/** Shopify CDN: Minification failed

Line 283:40 Unexpected "("

**/
/* =============================================================================
   BAMBOOVE — tinh chỉnh RIÊNG phần footer (nhóm section footer) cho khớp bản
   thiết kế đã chốt TC-14 (`CHOT-HAN\01-trang-chu\14-footer`).
   Không đụng `base.css`, không đụng header.
   -----------------------------------------------------------------------------
   ĐỐI CHIẾU ĐO ĐƯỢC 02/10/2026 (TC-14 @1440 → footer theme TRƯỚC khi sửa):
     · tiêu đề cột Shop/Help/About : 12px · 700 · giãn 1.4px · IN HOA → theme: 32px serif
     · logo                          : 280×80 (điện thoại 227×65)    → theme: 168×48 (112×32)
     · icon mạng xã hội              : 3 vòng tròn 44px, icon 20px    → theme: 0
     · dải đáy                       : © TRÁI + 5 link PHẢI          → theme: © trái + nút "Terms and Policies"
   Logo · icon · dải đáy đã lo bằng: setting block `logo` (footer-group.json) ·
   `blocks/bamboove-social.liquid` · `blocks/bamboove-legal-links.liquid`.
   File này lo phần còn lại: cỡ tiêu đề cột · dải thanh toán · căn logo điện thoại.
   Nạp từ `sections/footer.liquid` (nằm trong <body> ⇒ SAU css của theme).
   ============================================================================= */

/* ① TIÊU ĐỀ 3 CỘT — nhỏ, IN HOA, giãn chữ (TC-14: `.footer-col__title`) */
.shopify-section-group-footer-group .footer-content .menu__heading {
  font-family: var(--font-body--family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.72;
}

.shopify-section-group-footer-group .footer-content .menu__heading__default {
  font-weight: 700;
}

/* ② DẢI LOGO THANH TOÁN — trọn 1 hàng dưới 3 cột, KHÔNG có kẻ phía trên.
   Chủ dự án chốt 03/10/2026: "trên dòng mấy cái svg thanh toán lại có đường kẻ kia …
   cả điện thoại lẫn máy tính đều bỏ hoặc ẩn nó đi" ⇒ BỎ `border-top` (trước đó có
   `border-top: 1px solid rgb(250 248 245 / 0.18)` theo TC-14 — nay chủ dự án bác). */
.shopify-section-group-footer-group .payment-icons {
  margin-top: 40px;
}

@media screen and (min-width: 750px) {
  .shopify-section-group-footer-group .footer-content > .payment-icons {
    grid-column: 1 / -1;
  }
}

/* ③ ĐIỆN THOẠI — logo + icon canh GIỮA như TC-14 (theme mặc định canh trái)
   Logo nằm trong block `group` (flex cột) ⇒ dùng align-self (KHÔNG dùng width:100%
   — sẽ kéo giãn ảnh logo thành 358×102). */
@media screen and (max-width: 749px) {
  .shopify-section-group-footer-group .logo-block {
    align-self: center;
  }

  .shopify-section-group-footer-group .bb-social {
    align-self: center;
  }
}

/* ④ MÁY TÍNH — NHỊP 3 CỘT MENU KHỚP TC-14
   -----------------------------------------------------------------------------
   Vị trí ĐO ĐƯỢC (03/10/2026) khi mở chính bản chốt `XEM-TC-14.html` ở 1440px:
     · cột thương hiệu : 320px (logo x=44, icon mạng xã hội x=44)
     · cách sang menu  : 56px   → cột Shop bắt đầu x=420
     · 3 cột link      : rộng 190px, canh đều về mép phải ⇒ khe giữa các cột = 203px
                         (Shop x=420 · Help x=813 · About x=1206)
   CSS gốc của bản thiết kế (`.site-footer .footer-grid`): repeat(3, minmax(140px,190px))
   + justify-content: space-between, nằm trong ô 1fr cạnh cột thương hiệu 320px.
   Theme mặc định chia 4 cột đều (310px · gap 40) ⇒ Shop x=390 · Help x=740 · About x=1090
   (các cột dồn về bên trái, nhịp khác bản chốt).

    Cách làm ở đây: ở ≥990px dựng LƯỚI 7 RÃNH — rãnh lẻ = cột nội dung, 3 rãnh chẵn
    ở giữa là KHE HỞ cố định bằng nhau (`1fr`) ⇒ không còn hiện tượng "khe giữa
    nuốt hết khoảng trống" như `minmax(0, 1fr)` trước đây.
    Ở 1440px (khung trong = 1360px sau padding 40×2):
      320 + 56 + 190 + 1fr + 190 + 1fr + 190 = 1360
      ⇒ 1fr = (1360 − 320 − 56 − 190×3) / 3 = 140px ✓
    Khoảng cách logo→Shop = 56px (trong rãnh thứ 2, cố định).
    Khoảng cách giữa 3 cột menu = 140px mỗi khe (bằng nhau ✓).
    Dùng `minmax(140px, 190px)` để cột co lại ở màn hình hẹp (990–1100px).
    ⚠️ Lưới này bám THỨ TỰ block trong `sections/footer-group.json`:
       ① brand (logo + mạng xã hội) ② menu_shop ③ menu_help ④ menu_about ⑤ payment_icons
       Đổi thứ tự block ⇒ phải sửa lại các dòng `:nth-child` bên dưới. */
@media screen and (min-width: 990px) {
  .shopify-section-group-footer-group .footer-content {
    display: grid !important;
    grid-template-areas:
      "brand shop help about"
      "pay pay pay pay" !important;
    grid-template-columns: 320px 1fr 1fr 1fr !important;
    column-gap: 140px !important;
    row-gap: 0 !important;
  }

  .shopify-section-group-footer-group .footer-content > :nth-child(1) { grid-area: brand; }
  .shopify-section-group-footer-group .footer-content > :nth-child(2) { grid-area: shop; }
  .shopify-section-group-footer-group .footer-content > :nth-child(3) { grid-area: help; }
  .shopify-section-group-footer-group .footer-content > :nth-child(4) { grid-area: about; }
  .shopify-section-group-footer-group .footer-content > :nth-child(5) { grid-area: pay; }
}





/* ⑤ ĐIỆN THOẠI — THỨ TỰ KHỐI + THỨ TỰ DẢI ĐÁY KHỚP TC-14
   -----------------------------------------------------------------------------
   Markup của bản chốt (đo trong `XEM-TC-14.html`, mục "KIEM NHANH THU TU"):
     `.footer-grid` (3 cột menu) ở vị trí 65  →  `.footer-strip` (logo + mạng xã hội) 1674
     →  `.footer-pay` 4744  →  `.footer-legal` 5601
   và trong dải đáy: `<p class="footer-legal__links">` (5 link) đứng TRƯỚC
   `<p class="footer-legal__biz">` (câu ©). Ảnh 390px của bản chốt cũng vậy:
   menu → logo → icon → thanh toán → 5 link → ©.
   Theme (JSON) lại đặt `brand` trước và `copyright` trước `legal_links` ⇒ đảo lại. */
@media screen and (max-width: 749px) {
  /* P70 · 15/10/2026: ĐÃ BỎ luật `order: -1` (bản TC-14 cũ đẩy 3 cột menu LÊN TRƯỚC logo).
     Chủ máy chốt bố cục mới: khối THƯƠNG HIỆU (logo · câu chào · social · email) đứng ĐẦU
     chân trang trên điện thoại — khớp với máy tính (cột 1) ⇒ giữ đúng thứ tự trong JSON. */

  /* Dải đáy là flex cột ⇒ đảo chiều để 5 link pháp lý nằm TRÊN, câu © nằm DƯỚI */
  .shopify-section-group-footer-group .utilities {
    flex-direction: column-reverse;
  }
}

/* ===============================================================================
   30 — 07/10/2026 (phiên 40): HOẠT ẢNH MỞ/ĐÓNG cho MENU ACCORDION ở FOOTER.
   ĐO ĐƯỢC: Bamboove mở/đóng TỨC THÌ (transition 0s · animation none) — chiều cao nhảy
   36 → 174 px trong 1 khung hình ⇒ nhìn như "GIẬT".
   Nay: hoạt ảnh `height` do JS điều khiển (assets/bamboove-footer-accordion.js) — 300ms.
   ⚠️ ĐỪNG quay lại kỹ thuật `grid-template-rows 0fr→1fr`: đo cô lập trên Chromium 153
      thấy KHÔNG nội suy (chiều cao nhảy 1 nhịp), còn `height` px thì mượt.
   =============================================================================== */
/* Cần overflow:hidden để cắt nội dung khi đang chạy hoạt ảnh height (nếu không sẽ thấy chữ tràn). */
.menu--accordion .details-content{ overflow:hidden; }

/* -------------------------------------------------------------------------------
   (07/10/2026 · phiên 40) CHẶN hoạt ảnh SẴN CÓ của Bamboove cho menu accordion ở footer.
   Bamboove (snippets/accordion-custom-component.liquid) cho `.details-content` chạy
   `block-size:0 → auto` + `@starting-style` + `interpolate-size:allow-keywords`.
   ⚠️ `interpolate-size` CHỈ có ở Chrome 129+ ⇒ Safari / Chrome cũ KHÔNG nội suy được
      `auto` ⇒ chiều cao nhảy 1 nhịp ⇒ đúng cái "GIẬT" trên điện thoại.
   ⇒ Ta tự lo hoạt ảnh bằng `height` (JS) nên TẮT của Bamboove.
   Ghi 3 lớp class (.menu--accordion .menu__details .details-content) để ĐÈ được rule của
   Bamboove (`accordion-custom details:not(:focus-within) .details-content`).
   ------------------------------------------------------------------------------- */
.menu--accordion .menu__details .details-content{ transition:none; }
.menu--accordion .menu__details .details-content.bb-ft-chay{
  transition:height var(--bb-acc-ms, 0.3s) var(--bb-acc-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
/* Ai bật "giảm chuyển động" trong máy ⇒ tắt hẳn hoạt ảnh (JS cũng đặt MS = 0) */
@media (prefers-reduced-motion: reduce){
  .menu--accordion .menu__details .details-content.bb-ft-chay{ transition:none; }
}

/* -------------------------------------------------------------------------------
   (07/10/2026 · phiên 41) BỎ "NHỊP GIẬT 12px" khi ĐÓNG menu accordion ở footer.
   ĐO ĐƯỢC (mẫu mỗi 30ms): Bamboove đặt `margin-top: var(--spacing--size)` = 12px cho
   `.details-content`. Margin này nằm NGOÀI vùng mà JS animate (`height`) ⇒ khi đóng:
     +210ms  cao=48 (nội dung đã 0)  · +240ms…+390ms VẪN 48  · +420ms mới tụt về 36
   ⇒ khách thấy "một nhịp giật rồi mới hết hẳn" (12px tụt sau khi hoạt ảnh xong ~0,3s,
     do Bamboove còn phải chạy transition `content-visibility`).
   CÁCH CHỮA: bỏ margin ở NGOÀI, chuyển 12px vào TRONG thẻ <ul> ⇒ được animate CHUNG
   với chiều cao ⇒ đóng là về 0 ngay, hết dư 12px. Vẫn tôn trọng cài đặt "menu_spacing".
   ------------------------------------------------------------------------------- */
.menu--accordion .menu__details .details-content{ margin-top:0; }
.menu--accordion .menu__details .details-content > ul{ margin-top:var(--spacing--size, 12px); }

/* ===============================================================================
   31 — 13/10/2026 (phiên 65): SỬA LINK PHÁP LÝ GẦN NHƯ VÔ HÌNH.
   ĐO ĐƯỢC: link trong `.bb-legal` (Privacy · Terms · Shipping · Refunds · Contact)
   kế thừa `color` từ color-scheme của section `footer-utilities` = `rgba(250,248,245,.6)`
   (kem 60%) ⇒ trên nền SÁNG gần như không đọc được (Lighthouse báo lỗi contrast).
   Đặt lại màu chữ đậm (--bb-forest #2D4A3E) ⇒ tương phản ~9:1.
   =============================================================================== */
/* ── P70a · 15/10/2026: DẢI ĐÁY — LINK PHÁP LÝ BỊ VÔ HÌNH ─────────────────────
   ĐO ĐƯỢC: link có `color: #2D4A3E` (xanh rừng đậm) trong khi NỀN chân trang
   cũng `#2D4A3E` ⇒ chữ chìm hẳn vào nền, khách KHÔNG thấy Privacy/Terms/Shipping/Refund
   (đo bằng getComputedStyle: color rgb(45,74,62) · nền #2D4A3E).
   Lý do có luật cũ: trước đây chân trang nền SÁNG nên phải làm chữ đậm cho đủ tương phản;
   nay nền đã đổi sang xanh rừng ⇒ phải trả chữ về KEM (khớp chữ bản quyền bên trái).
   ============================================================================ */
.shopify-section-group-footer-group .bb-legal__ds a {
  color: #FAF8F5;
  opacity: 0.9;
}
.shopify-section-group-footer-group .bb-legal__ds a:hover {
  color: #FFFFFF;
  opacity: 1;
}


/* ── Cột "Join the Bamboove Club" ở chân trang (P69 · 15/10/2026) ──────────────
   Khối `email-signup` mặc định KÉO HẾT chiều ngang (đo được 1.262 px ở khổ 1440)
   ⇒ giới hạn lại cho gọn mắt, vẫn đủ rộng để gõ email.
   ============================================================================ */
.shopify-section-group-footer-group .email-signup-block {
  max-width: 420px;
}

/* ── P70 · 15/10/2026: CHÂN TRANG — BỐ CỤC CHỐT (4 cột) ────────────────────────
   ① ĐIỆN THOẠI: căn GIỮA khối thương hiệu (logo · câu chào · social · email)
      — chủ máy chốt “căn giữa” cho cân, vì bên dưới là hàng accordion full-width.
   ② Dòng EMAIL: cùng màu chữ, gạch chân mảnh cho biết bấm được.
   ③ Dải đáy: 3 link pháp lý nằm GỌN 1 HÀNG trên điện thoại (trước đây 3 + 1 lẻ loi).
   ──────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .shopify-section-group-footer-group .group-block:has(.bb-logo) .group-block-content {
    align-items: center !important;
    text-align: center !important;
  }

  .shopify-section-group-footer-group .group-block:has(.bb-logo) .bb-social {
    justify-content: center !important;
  }

  .shopify-section-group-footer-group .bb-legal__ds {
    justify-content: center !important;
    gap: 6px 16px !important;
  }
}

/* Dòng email (chỉ trong khối thương hiệu) — không đụng logo */
.shopify-section-group-footer-group .group-block:has(.bb-logo) p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.shopify-section-group-footer-group .group-block:has(.bb-logo) p a:hover {
  text-decoration-thickness: 2px;
}

/* ── P70b · 15/10/2026: CĂN CHỈNH ĐIỆN THOẠI (anh báo "sao lệch thế" + "thưa quá") ──
   ĐO ĐƯỢC trước khi sửa:
     · câu chào + email: `text-align: start` ⇒ căn TRÁI trong khi logo/icon căn giữa
     · `.footer-content` row-gap = 40px (hàng accordion chỉ cao 36px ⇒ khe còn dày hơn hàng)
     · khối lấy email → dải badge = 80px (40 grid + `margin-top: 40px` của payment-icons)
   --------------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* ① CĂN GIỮA chữ trong khối thương hiệu (câu chào + email) */
  .shopify-section-group-footer-group .group-block:has(.bb-logo) p {
    text-align: center !important;
  }

  /* ② Khối lấy email: căn giữa tiêu đề + mô tả (ô nhập/nút vẫn full-width) */
  .shopify-section-group-footer-group .group-block:has(.email-signup-block) h3,
  .shopify-section-group-footer-group .group-block:has(.email-signup-block) p {
    text-align: center !important;
  }

  /* ③ Giãn cách dọc giữa các khối: 40px → 22px cho gọn */
  .shopify-section-group-footer-group .footer-content {
    row-gap: 22px !important;
  }

  /* ④ Khối lấy email → dải badge: 80px → 30px (22 + 8) */
  .shopify-section-group-footer-group .payment-icons {
    margin-top: 8px !important;
  }
}



.shopify-section-group-footer-group .email-signup__heading {
  margin-bottom: 6px;
}


/* 18/10/2026 — Nền xanh của footer phải nằm TRÊN chính group footer, không dựa vào body.
   Trước đây chỉ có `.section-background` (con) xanh, còn group/footer trong suốt; khi body kem
   thì nền xanh bị che ⇒ chữ kem trên nền kem gần như vô hình (đo collection mobile).
   Đặt nền cho group để footer luôn xanh trên MỌI trang, không làm xanh thẻ sản phẩm. */
.shopify-section-group-footer-group {
  background-color: #2d4a3e;
}


   Nay chỉ đặt nền xanh cho HTML (root), còn BODY vẫn KEM để nền thẻ sản phẩm / các section
   trong suốt không bị xanh lây. Đã đo collection: thẻ sản phẩm trả lại nền kem.
   Chỉ áp dụng < 750px (desktop giữ nguyên). */
@media screen and (max-width: 749px) {
  html {
    background-color: #2d4a3e !important;
  }
  body {
    background-color: #faf8f5;
  }
}