/** Shopify CDN: Minification failed

Line 1478:47 Unexpected "`"

**/
/* ==========================================================================
   GIO TRUOT — theo ban DA CHOT v36 "gio bam Gymshark, viet lai cho Bamboove"
   (PREVIEWS-DA-CHOT/XEM-preview-full-homepage-v36-GIO-BAM-GYMSHARK-28-09.html)

   · KHUNG + HIEU UNG: theo ban preview — ngang 420px · sat MEP PHAI · nen cream
     · TRUOT TU PHAI VAO (0,32s) · nen mo 45% (dung y gio-truot.html).
   · RUOT: copy Gymshark (viet lai):
       Your bag (N pairs) · thanh free ship $65 · dong uu dai theo so doi
       2/3/4/6 doi = 10/17/25/30 % · Subtotal + Pairs discount + Total
       · "Secure checkout" (o khoa) + HANG BIEU TUONG THANH TOAN · dai Undo sau khi xoa mon.

   So do da kiem: KIEM-TRA/_thu-gio-v36.json (72 dat / 0 hong).
   ========================================================================== */

/* Bien dung chung — trung bang mau da dung o header */
#cart-drawer {
  --bb-cream: var(--bamboo-cream, #faf8f5);
  --bb-forest: var(--bamboo-forest, #2d4a3e);
  --bb-line: var(--bamboo-line, #e7e2d8);
  --bb-muted: var(--bamboo-muted, #6b6560);
  --bb-charcoal: #1a1a1a;
  --bb-white: #fff;
  --bb-r: 6px;
}

/* ---------- 0. GIO NAM DE LEN TRANG (khong ep trang) ----------
   Bamboove them `.page-wrapper--drawer-open` => `margin-inline-end: var(--theme-drawer-width)` = 480px
   => trang bi THU HEP va ho ra mot khe 60px giua trang voi gio.
   DO DUOC (1440px): .page-wrapper 1440 -> 960 · gio 420 tai x=1020 · khe 60px.
   Ban chot v36 (PREVIEWS-DA-CHOT/XEM-preview-...-GIO-BAM-GYMSHARK) va Gymshark deu KHONG ep trang:
   gio TRUOT DE len trang + nen mo 45%. Nen bo margin khi mo gio nay. */
@media screen and (min-width: 990px) {
  html:has(#cart-drawer[open]) .page-wrapper--drawer-open {
    margin-inline-end: 0 !important;
  }
}

/* Gio phai nam TREN thanh header: `.header-section` co z-index = --layer-menu-drawer (18),
   con dialog cua Bamboove chi = --layer-sticky + stack (8 + 1 = 9) => header de len gio.
   Khong con ep trang nua thi phai nang gio len tren moi thu. */
#cart-drawer dialog.theme-drawer__dialog {
  z-index: calc(var(--layer-temporary, 20) + var(--drawer-stack-order, 1)) !important;
}

/* Nen mo 45% — dung y gio-truot.html / ban chot v36.
   Bamboove mo gio dang NON-MODAL tren desktop nen `::backdrop` KHONG duoc ve; phai tu lam 1 lop nen. */
.bb-gio-nen {
  position: fixed;
  inset: 0;
  z-index: var(--layer-temporary, 20);
  background: rgb(26 26 26 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

#cart-drawer[open] .bb-gio-nen {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* ---------- 1. KHUNG: 420px · sat mep phai · nen cream ---------- */
#cart-drawer dialog.theme-drawer__dialog {
  inset: 0 0 0 auto !important;
  width: 420px !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bb-cream) !important;
  box-shadow: -10px 0 30px rgb(26 26 26 / 18%) !important;
  overflow: hidden !important;
}

#cart-drawer dialog.theme-drawer__dialog::backdrop {
  background: rgb(26 26 26 / 45%);
}

/* Ruot gio phai CAO HET dialog, neu khong chan gio (2 nut) se khong dinh day */
#cart-drawer cart-drawer-component {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 0;
}

#cart-drawer .bb-gio {
  flex: 1 1 auto;
  min-height: 0;
}

/* Truot tu PHAI vao — dung hieu ung ban preview */
@media screen and (prefers-reduced-motion: no-preference) {
  #cart-drawer dialog.theme-drawer__dialog[open] {
    animation: bb-gio-vao 0.32s cubic-bezier(0.32, 0.72, 0, 1) both !important;
  }
}

@keyframes bb-gio-vao {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* ---------- 2. RUOT GIO ---------- */
.bb-gio {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative; /* (17/10/2026) mốc cho toast Undo `position:absolute` */
  color: var(--bb-charcoal);
  font-family: var(--font-body--family), sans-serif;
}

/* 2.1 Dau gio: "Your bag (2 pairs)" + nut dong */
.bb-gio__dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bb-line);
  background: var(--bb-cream);
}

.bb-gio__ten {
  margin: 0;
  font-family: var(--font-heading--family), Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bb-forest);
}

.bb-gio__dem {
  color: var(--bb-forest);
}

.bb-gio__dong {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  background: var(--bb-white);
  color: var(--bb-forest);
  cursor: pointer;
}

.bb-gio__dong:hover {
  background: var(--bb-cream);
}

.bb-gio__dong svg {
  width: 15px;
  height: 15px;
}

/* 2.2 Thanh free ship */
.bb-gio__ship {
  flex: 0 0 auto;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--bb-line);
}

.bb-gio__ship-chu {
  margin: 0 0 9px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bb-muted);
}

.bb-gio__ship-chu b {
  color: var(--bb-forest);
  font-weight: 700;
}

.bb-gio__ship-thanh {
  height: 6px;
  border-radius: 3px;
  background: var(--bb-line);
  overflow: hidden;
}

.bb-gio__ship-day {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--bb-forest);
  transition: width 0.25s ease;
}

/* 2.3 Dong uu dai theo so doi */
.bb-gio__uu-dai {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--bb-line);
  background: #efe9dc;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bb-forest);
}

.bb-gio__uu-dai[hidden] {
  display: none;
}

/* 2.3 Thanh tien trinh GOI 2/4/6 — moc 10% / 25% / 30% (08/10/2026 · phien 46)
   Yeu cau chu may: "cai cart drawer da co may cai moc 2 pack / 4 pack / 6 pack chua, sua cho co
   … khi khach them du so luong thi thanh tien trinh chay toi dung phan do".
   Vi tri moc = dung ty le so doi: 2/6 = 33,333% · 4/6 = 66,666% · 6/6 = 100%. */
.bb-gio__goi {
  flex: 0 0 auto;
  padding: 12px 20px 16px;
  border-bottom: 1px solid var(--bb-line);
  background: #efe9dc;
}

.bb-gio__goi-chu {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bb-forest);
}

.bb-gio__goi-thanh {
  position: relative;
  height: 6px;
  margin: 6px 16px 0;
  border-radius: 3px;
  background: #ddd5c6;
}

.bb-gio__goi-day {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--bb-forest);
  transition: width 0.25s ease;
}

.bb-gio__goi-moc {
  position: absolute;
  top: -5px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.bb-gio__goi-moc b {
  box-sizing: border-box;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bb-white);
  border: 2px solid #cfc6b5;
}

.bb-gio__goi-moc em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--bb-muted);
}

.bb-gio__goi-moc.is-dat b {
  background: var(--bb-forest);
  border-color: var(--bb-forest);
}

.bb-gio__goi-moc.is-dat em {
  color: var(--bb-forest);
}

/* 2.5 GOI Y THEM TRONG GIO ("You might also like") — hoc tu GYMSHARK (08/10/2026 · phien 46)
   Gymshark: carousel goi y trong gio + lop `minicart-recommendations-skeleton`.
   Minh: goi /recommendations/products.json bang JS roi do vao .bb-gio__goiy-ds */
.bb-gio__goiy {
  flex: 0 0 auto;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--bb-line);
  background: var(--bb-white);
}

.bb-gio__goiy[hidden] {
  display: none;
}

.bb-gio__goiy-ten {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-forest);
}

.bb-gio__goiy-ds {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.bb-gio__goiy-o {
  flex: 0 0 96px;
  scroll-snap-align: start;
}

.bb-gio__goiy-o a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.bb-gio__goiy-anh {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  background: #f4f1ec;
}

.bb-gio__goiy-ten-o {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--bb-ink);
}

.bb-gio__goiy-gia {
  font-size: 12px;
  font-weight: 800;
  color: var(--bb-forest);
}

/* ===== B18 (16/10/2026 · phiếu 72) — SKELETON khối "You may also like" =====
   JS `taiGoiY()` gọi /recommendations/products.json (~200-600ms) ⇒ TRƯỚC ĐÂY khối TRỐNG trong lúc chờ
   (đo: _DO/p72-do-that.txt — `o_skeleton = 0`). Nay hiện 4 ô xám + vệt sáng chạy (shimmer),
   học lớp `minicart-recommendations-skeleton` của Gymshark. `veGoiY()` thay sạch innerHTML ⇒ skeleton tự mất. */
.bb-gio__goiy-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-gio__goiy-skeleton-anh {
  width: 96px;
  height: 120px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eeece8 25%, #f6f4f1 37%, #eeece8 63%);
  background-size: 400% 100%;
  animation: bb-skeleton 1.4s ease infinite;
}

.bb-gio__goiy-skeleton-chu {
  height: 10px;
  border-radius: 4px;
  background: #eeece8;
}

.bb-gio__goiy-skeleton-chu--ngan {
  width: 65%;
}

@keyframes bb-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-gio__goiy-skeleton-anh { animation: none; }
}

/* Dong tin cay cuoi gio (Gymshark co `bag.free_returns`) */
.bb-gio__hangtin {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--bb-muted);
}

/* 2.4 Danh sach mon */
.bb-gio__ds {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px;
  background: var(--bb-white);
}

.bb-gio__mon {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bb-line);
}

.bb-gio__mon:last-child {
  border-bottom: 0;
}

.bb-gio__anh {
  display: block;
  width: 76px;
  height: 95px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bb-cream);
}

.bb-gio__tin {
  min-width: 0;
}

.bb-gio__mten {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bb-charcoal);
  text-decoration: none;
}

.bb-gio__mten:hover {
  color: var(--bb-forest);
  text-decoration: underline;
}

.bb-gio__mta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--bb-muted);
}

.bb-gio__mhang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* nut so luong: − 2 + */
.bb-gio__sl {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  background: var(--bb-white);
  overflow: hidden;
}

.bb-gio__sl button {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-charcoal);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.bb-gio__sl button:hover {
  background: var(--bb-cream);
}

.bb-gio__sl span {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.bb-gio__mgia {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bb-forest);
  white-space: nowrap;
}

.bb-gio__xoa {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  color: var(--bb-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bb-gio__xoa:hover {
  color: #b4552a;
}

/* 2.5 Gio trong */
.bb-gio__trong {
  flex: 1 1 auto;
  margin: 0;
  padding: 34px 24px;
  background: var(--bb-white);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bb-muted);
}

.bb-gio__trong[hidden] {
  display: none;
}

/* 2.6 Dai Undo sau khi xoa mon */
.bb-gio__undo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--bb-line);
  background: var(--bb-charcoal);
  color: var(--bb-cream);
}

.bb-gio__undo[hidden] {
  display: none;
}

.bb-gio__undo p {
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-gio__undo button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bb-cream);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bb-gio__undo button:hover {
  color: #fff;
}

/* 2.7 Chan gio: khoi tien + 2 nut */
.bb-gio__chan {
  flex: 0 0 auto;
  /* 17/10/2026 (phiên 87) — BỎ ĐƯỜNG KẺ ĐẦU KHUNG + HẠT BỤI TRỐNG.
     Anh Trung: *“làm sao chỉ có cái total, nút check out và cái badge thôi… ở trên đang có cái gạch
     xong ở trên đó đang có một cái trống”*.
     Trước: `border-top: 1px` + `padding-top: 16px` + dòng Total có thêm 1 đường kẻ riêng
     (margin 11 + padding 11) ⇒ đầu khung có **2 đường kẻ + 28px trống**.
     Nay: KHÔNG kẻ, chỉ cách nội dung 14px; nền kem của chân giỏ tự tách khỏi vùng trắng bên trên.
     🔁 LÙI BÀI: thêm lại `border-top: 1px solid var(--bb-line);` và `padding-top: 16px`. */
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--bb-cream);
}

.bb-gio__dong-tien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--bb-charcoal);
}

.bb-gio__dong-tien + .bb-gio__dong-tien {
  margin-top: 7px;
}

.bb-gio__dong-tien b {
  font-weight: 700;
}

.bb-gio__dong-tien--giam,
.bb-gio__dong-tien--giam b {
  color: var(--bb-muted);
}

.bb-gio__dong-tien--giam em {
  font-style: normal;
  font-size: 12px;
}

.bb-gio__dong-tien--giam[hidden] {
  display: none;
}

/* 17/10/2026 (phiên 87) — BỎ ĐƯỜNG KẺ THỨ HAI NGAY TRÊN “TOTAL”.
   Anh Trung: *“làm sao chỉ có cái total, nút check out và cái badge thôi… ở trên đang có cái gạch
   xong ở trên đó đang có một cái trống”*.
   Đo được (1440×900): dòng Total có `border-top` riêng trong khi chân giỏ (.bb-gio__chan) cũng có
   `border-top` ⇒ **2 đường kẻ cách nhau 28px**, giữa là một dải trống vô nghĩa.
   Nay bỏ hẳn đường kẻ của dòng Total; chân giỏ cũng không kẻ (xem `.bb-gio__chan`).
   🔁 LÙI BÀI: thêm lại `margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--bb-line);`. */
.bb-gio__dong-tien--cuoi {
  font-size: 15px;
}

.bb-gio__dong-tien--cuoi b {
  font-size: 19px;
  color: var(--bb-forest);
}

.bb-gio__ghichu {
  margin: 10px 0 14px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bb-muted);
}

/* "Secure checkout" + hàng biểu tượng thanh toán (11/10/2026 · p53) */
.bb-gio__nut-gui {
  margin: 0;
}

.bb-gio__tt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  border-radius: var(--bb-r);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.bb-gio__tt {
  border: 0;
  background: var(--bb-forest);
  color: var(--bb-cream);
}

.bb-gio__tt:hover {
  background: #22392f;
}

.bb-gio__tt svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

/* Hàng biểu tượng thanh toán dưới nút mua — học Gymshark (5 icon 40×24 trong
   `cart-actions_payment-icons`) + Shrine Pro (nút Check out + dải icon).
   Icon do Shopify vẽ (`payment_type_svg_tag`) ⇒ luôn đúng phương thức shop đang nhận.
   Giữ NHỎ để nút mua vẫn nằm trong màn đầu ở khổ 375–390px (đo ở phiếu 52/53). */
.bb-gio__tt-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.bb-gio__tt-icon {
  display: flex;
  align-items: center;
}

.bb-gio__tt-svg {
  display: block;
  width: 34px;
  height: 22px;
}

/* Gia goc bi gach khi mon da duoc giam (hoc Gymshark: `line_total` gach gia cu)
   Chi hien khi Shopify THUC SU giam (item.original_line_price > item.final_line_price). */
.bb-gio__mgia-goc {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bb-muted);
}

/* ---------- 3. DIEN THOAI: GIO TRUOT TU MEP PHAI (giong Gymshark) ---------- */
@media screen and (max-width: 749px) {
  /* 11/10/2026 (phien 52) — chu may kiem tra lai Gymshark: mini-bag cua ho TRUOT TU PHAI ca tren
     dien thoai (DOM that: `mini-cart_mini-cart-area` truot tu phai). Ban cu cua minh lam
     "tam truot tu day" ⇒ SAI HUONG ⇒ doi lai cho dung: neo mep PHAI, rong HET man, cao 100dvh.
     Van giu: nut dong (X) o goc phai dau gio, cham vao nen = dong (Bamboove da co ::backdrop). */
  #cart-drawer dialog.theme-drawer__dialog {
    inset: 0 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: -12px 0 30px rgb(26 26 26 / 22%) !important;

    /* Gio da chiem het be ngang man hinh => phai chua CA vung tai (notch) va vung duoi
       (home indicator), khong thi ho dai kem 2 dau. */
    padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom) !important;
  }

  /* Dien thoai: Bamboove mo bang `showModal()` => da co `::backdrop` cua trinh duyet.
     Tat lop nen tu lam de khong bi toi 2 lop. */
  .bb-gio-nen {
    display: none;
  }
}



/* ==========================================================================
   4. BO CUC LAI · DO BONG KHI CUON · LOP CHO  (10/10/2026 · phien 46)
   --------------------------------------------------------------------------
   Hoc tu code gio GYMSHARK (doc trong AI-CORP/projects/gymshark-clone):
     · `.mini-cart_area`  : CA vung giua cuon chung; `.mini-cart_items>div` co
                            `padding-bottom:12.8rem` de khoi nut co dinh KHONG che mon cuoi.
     · `.mini-cart_header`: sticky + `transition:box-shadow .15s linear` => cuon la do bong.
     · `.cart-actions--scrolling` : bong chan gio khi cuon.
     · `.mini-cart_loading-overlay` + spinner: nen trang 70% khi dang doi gio.
   MINH: 1 vung cuon `.bb-gio__cuon` · dau gio + chan gio dung yen · lop cho khi doi gio.
   ========================================================================== */

/* .bb-gio can lam moc toa do cho lop cho */
.bb-gio {
  position: relative;
}

/* VUNG CUON CHUNG: thanh free ship + thanh goi + danh sach mon + goi y */
.bb-gio__cuon {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* PHIẾU 72: chan tran ngang (moc cuoi cua thanh gop tung lam gio sinh thanh cuon ngang) */
  overscroll-behavior: contain;
  background: var(--bb-white);
}

/* Danh sach mon: BO cuon rieng. Truoc day chinh no cuon con 3 khoi kia dung yen
   => tren dien thoai thap (667px) cac khoi chiem ~560px, danh sach mon bi bop ~50px. */
.bb-gio__ds {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

/* Gio rong: an thanh free ship + thanh goi (chua co gi ma thanh chay 0% => trong nhu loi) */
.bb-gio--trong .bb-gio__ship,
.bb-gio--trong .bb-gio__goi {
  display: none;
}

/* Dau gio / chan gio: do bong khi vung giua da cuon (y Gymshark) */
.bb-gio__dau,
.bb-gio__chan {
  position: relative;
  z-index: 2;
  transition: box-shadow 0.15s linear;
}

.bb-gio.is-cuon .bb-gio__dau {
  box-shadow: 0 8px 12px -8px rgb(26 26 26 / 22%);
}

.bb-gio.is-cuon .bb-gio__chan {
  box-shadow: 0 -8px 14px -10px rgb(26 26 26 / 26%);
}

/* P65-CART-FIX-V2 (13/10/2026): mon trong gio duoc lam mo NGAY khi bam Remove / - / +
   (JS them .bb-gio__mon--removing) de user-perceived nhanh (0ms thay vi 600ms).
   (76c · 17/10/2026) — NAY chỉ dùng cho bấm −/+ (đổi số lượng); nút REMOVE chuyển sang
   hoạt ảnh THU GỌN bên dưới (học Horizon `onLineItemRemove`). */
.bb-gio__mon--removing {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

/* ============================================================================
   (76c · 17/10/2026) HOẠT ẢNH THÊM / XOÁ MÓN — HỌC HORIZON
   (`assets/component-cart-items.js`: dòng bị xoá được ANIMATE trước khi bỏ;
    dòng mới được gắn lớp `adding` để trượt vào; thay DOM êm không “giật”).
   Bản mình thay cả ruột `.bb-gio` một lần nên làm 3 việc:
     ① dòng XOÁ: thu gọn chiều cao NGAY khi bấm (cảm giác “mất tức thì”)
     ② dòng MỚI: trượt xuống + hiện dần khi ruột giỏ mới về
     ③ ruột giỏ vừa thay: mờ nhẹ 0.55 → 1 trong 0.18s (thay vì bật một cái)
   ============================================================================ */
.bb-gio__mon--chuan-bi-xoa {
  overflow: hidden;
  transition: height 0.24s ease, padding 0.24s ease, opacity 0.2s ease, border-color 0.24s ease;
}
.bb-gio__mon--xoa {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom-color: transparent !important;
  opacity: 0;
}
.bb-gio__mon--moi {
  animation: bb-mon-moi 0.32s ease both;
}
@keyframes bb-mon-moi {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.bb-gio--vua-thay {
  animation: bb-gio-vua-thay 0.18s ease both;
}
@keyframes bb-gio-vua-thay {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-gio__mon--moi,
  .bb-gio--vua-thay { animation: none; }
  .bb-gio__mon--chuan-bi-xoa { transition: none; }
}
.bb-gio__mon--removing .bb-gio__nut {
  opacity: 0.5;
}

/* (76e · 17/10/2026) LỚP CHỜ VÔ HÌNH — HỌC HORIZON: giỏ của họ KHÔNG hề có spinner / “đang
   load” nào (quét mã nguồn: 0 spinner/skeleton; họ chỉ KHOÁ tương tác `cart-items-disabled`
   trong lúc chờ). Mình giữ lớp chờ để CHỐNG BẤM ĐÚP nhưng KHÔNG vẽ gì: nền trong suốt,
   bỏ vòng xoay.
   🔁 LÙI BÀI: cho `.bb-gio__ban` nền `rgb(255 255 255 / 70%)` + `.bb-gio.is-dang-ban .bb-gio__ban{display:flex}`
   và bỏ dòng `display:none` của `.bb-gio__ban-xoay`. */
.bb-gio__ban {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  background: transparent;
}

.bb-gio.is-dang-ban .bb-gio__ban {
  display: block;
}

.bb-gio__ban-xoay {
  display: none;   /* 76e: bỏ vòng xoay “đang load” (giữ nguyên khối này để dễ lùi bài) */
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 3px solid var(--bb-line);
  border-top-color: var(--bb-forest);
  border-radius: 50%;
  animation: bb-gio-xoay 1.1s linear infinite;
}

@keyframes bb-gio-xoay {
  to {
    transform: rotate(360deg);
  }
}

/* (76e) SHIMMER nhẹ trên CON SỐ khi đang cập nhật — học Horizon (`textComponent.shimmer()`
   + `cartTotal?.shimmer()`): dải sáng chạy qua chữ THAY CHO vòng xoay “đang load”. */
.bb-shimmer {
  background-image: linear-gradient(90deg, currentColor 35%, rgba(122, 139, 124, 0.2) 50%, currentColor 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bb-shimmer-chay 0.9s linear infinite;
}

@keyframes bb-shimmer-chay {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-shimmer {
    animation: none;
    -webkit-text-fill-color: currentColor;
    background-image: none;
  }
}

/* ============================================================================
   (76f · 17/10/2026) CHỐNG “GIẬT” KHI MÁY CHỦ CHỐT SỔ — HỌC HORIZON
   (`component-cart-items.js` bọc `startViewTransition` quanh mỗi lần update).
   Đo 76f: lúc chốt sổ, ruột giỏ đổi layout một khung hình (nhảy 96–146px) ⇒ “giật”.
   Nay giao `.bb-gio` cho View Transition: CŨ → MỚI chuyển mềm 0.22s.
   ============================================================================ */
#cart-drawer .bb-gio {
  view-transition-name: bb-gio;
}

::view-transition-old(bb-gio) {
  animation-duration: 0.08s;
}

/* 76 l (17/10/2026) — RÚT NGẮN cross-fade (trước đây cả hai 0,22s).
   Anh Trung: “mỗi lần thêm hay bớt sản phẩm nó phải giật một cái”. Đo `_TOOLS/_p76l-soi-giat.py`:
   bố cục KHÔNG nhảy (delta = 0) — cái “nháy” gồm ① lớp dìm mờ 0,55 (ĐÃ GỠ ở bamboove-cart-drawer.js)
   và ② cross-fade 0,22s giữa 2 con số khác nhau ⇒ **bóng chồng chữ** (ảnh chụp +250ms thấy
   `$89..37` — hai giá trị cũ/mới chồng nhau). Nay: cũ tan 0,08s · mới hiện 0,12s ⇒ hết bóng,
   vẫn mềm mắt. 🔁 LÙI BÀI: đổi lại 2 con số thành 0.22s. */
::view-transition-new(bb-gio) {
  animation-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  #cart-drawer .bb-gio {
    view-transition-name: none;
  }
}

/* Canh bao con it hang (Gymshark `bag.only_x_left`) */
.bb-gio__khan {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #b4552a;
}

/* Hop giao hang & doi tra (Gymshark infoSheet) — khong can JS */
.bb-gio__tin {
  margin: 8px 0 0;
}

/* (16/10/2026 · phiên 75 e) — Luật của hộp đổi trả dạng <details> (`.bb-gio__tin-mo` · `.bb-gio__tin-ruot`)
   đã DỌN cùng lúc với việc bỏ ô “Free returns”. CHỈ giữ luật `.bb-gio__tin` ngay trên vì class đó
   còn dùng cho PHẦN THÔNG TIN của thẻ món. */

/* Dong MA NGUOI MOI trong chan gio */
.bb-gio__ma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px dashed #cfc6b5;
  border-radius: var(--bb-r);
  background: #fffdf8;
}

/* (15/10/2026 · H1) `hidden` PHAI thang `display: flex` o tren.
   DO THAT: JS dat `hidden = true` (khach chua de email / da ap ma xong) nhung khach VAN THAY
   khoi ma, vi luat class co do uu tien cao hon luat `[hidden] { display: none }` cua trinh duyet. */
.bb-gio__ma[hidden] {
  display: none !important;
}

.bb-gio__ma-chu {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--bb-forest);
}

.bb-gio__ma-chu b {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.bb-gio__ma-chep {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--bb-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bb-gio__ma-chep:hover {
  color: #22392f;
}

.bb-gio__ma-ap {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bb-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bb-gio__dau,
  .bb-gio__chan {
    transition: none;
  }

  .bb-gio__ban-xoay {
    animation-duration: 3s;
  }
}

/* ============================================================================
   PHIẾU 72 (16/10/2026) — GIỎ MỚI · NHÓM 1: 5 khối nhỏ
   ① dải “chưa giữ hàng” (học Gymshark) ② ô nhập mã giảm giá (học Volume)
   ③ ghi chú đơn (học Volume) ④ hộp đổi trả NỔI BẬT + icon ⑤ dòng thương hiệu
   LÙI BÀI: xoá đúng khối này là về như cũ.
   ============================================================================ */

/* ① dải “chưa giữ hàng” — ĐÃ BỎ 16/10/2026 (BẢN v7 · mockup v7 điểm 1).
   Muốn trả lại: khối `bb-gio__giu*` ở _DO\_BAN-LUU\bamboove-cart-drawer.css.p72v7-truoc.bak */

/* ② ô nhập mã giảm giá */
.bb-gio__manhap {
  margin: 14px 0 0;
  padding: 12px 13px;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
}
.bb-gio__manhap-nhan {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bb-charcoal);
}
.bb-gio__manhap-hang {
  display: flex;
  gap: 8px;
}
.bb-gio__manhap-o {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--bb-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.bb-gio__manhap-o:focus {
  border-color: var(--bb-forest);
}
.bb-gio__manhap-nut {
  padding: 9px 15px;
  background: var(--bb-charcoal);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap;
}
.bb-gio__manhap-nut:hover {
  background: #000;
}
.bb-gio__manhap-ghi {
  margin: 7px 0 0;
  font-size: 10.5px;
  color: var(--bb-muted);
  line-height: 1.4;
}

/* ③ ghi chú đơn */
.bb-gio__note {
  margin: 12px 0 0;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  overflow: hidden;
}
.bb-gio__note summary {
  padding: 11px 13px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bb-charcoal);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bb-gio__note summary::-webkit-details-marker {
  display: none;
}
.bb-gio__note summary::after {
  content: '+';
  font-size: 15px;
  color: var(--bb-muted);
}
.bb-gio__note[open] summary::after {
  content: '\2212';
}
.bb-gio__note-ruot {
  padding: 0 13px 12px;
}
.bb-gio__note textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bb-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  outline: none;
}
.bb-gio__note textarea:focus {
  border-color: var(--bb-forest);
}
.bb-gio__note p {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--bb-muted);
  line-height: 1.4;
}

/* ④ (16/10/2026 · phiên 75 e) — Luật của HỘP ĐỔI TRẢ đã DỌN cùng lúc với việc bỏ ô “Free returns”
   (`details.bb-gio__tin` · `details.bb-gio__tin > .bb-gio__tin-mo` · `.bb-gio__tin-ic`).
   ⚠️ VẪN NHỚ: class `bb-gio__tin` dùng cho CẢ HAI thứ — phần THÔNG TIN của thẻ món (<div>, giữ nguyên)
   và hộp đổi trả (<details>, đã bỏ 16/10) ⇒ nếu dựng lại hộp thì phải gắn tiền tố `details.` như cũ. */

/* ⑤ dòng thương hiệu ở chân giỏ — ĐÃ BỎ 16/10/2026 (BẢN v7 · mockup v7).
   Muốn trả lại: khối `bb-gio__brand*` ở _DO\_BAN-LUU\bamboove-cart-drawer.css.p72v7-truoc.bak */

/* ============================================================================
   PHIẾU 72 · NHÓM 2 (16/10/2026): ⑥ tim ♡ từng món ⑦ giỏ rỗng có hình + nút
   LÙI BÀI: xoá đúng khối này.
   ============================================================================ */

/* ⑥ nút tim ♡ — ĐÃ BỎ 16/10/2026 (BẢN v7 · mockup v7 điểm 2): thẻ món chỉ còn bộ −1+ và Remove.
   Bản cũ: _DO\_BAN-LUU\bamboove-cart-drawer.css.p72v7-truoc.bak */
.bb-gio__mnut {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ⑦ giỏ rỗng — hình + câu + nút mua */
.bb-gio__trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 44px 22px;
}
.bb-gio__trong[hidden] {
  display: none;
}
.bb-gio__trong-ve {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bb-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-gio__trong-ve svg {
  width: 62px;
  height: 62px;
  stroke: var(--bb-muted);
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bb-gio__trong b {
  font-size: 15px;
  color: var(--bb-charcoal);
}
.bb-gio__trong p {
  margin: 0;
  font-size: 12.5px;
  color: var(--bb-muted);
  line-height: 1.55;
  max-width: 270px;
}
.bb-gio__trong-hang {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 270px;
  margin-top: 6px;
}
.bb-gio__trong-nut {
  display: block;
  margin-top: 0;
  padding: 12px 20px;
  background: var(--bb-forest);
  color: #fff;
  border-radius: var(--bb-r);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.bb-gio__trong-nut:hover {
  background: #22382f;
}
.bb-gio__trong-nut--vien {
  background: transparent;
  color: var(--bb-forest);
  border: 1px solid var(--bb-forest);
}
.bb-gio__trong-nut--vien:hover {
  background: #f2f6f3;
}

/* ⑧ nút “+ Add” trên thẻ gợi ý (16/10/2026 · phiếu 72) — thêm thẳng vào giỏ, không phải rời trang */
.bb-gio__goiy-o {
  display: flex;
  flex-direction: column;
}
.bb-gio__goiy-them {
  width: 100%;
  margin-top: 6px;
  padding: 7px 0;
  background: var(--bb-charcoal);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.bb-gio__goiy-them:hover {
  background: #000;
}
.bb-gio__goiy-them:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ============================================================================
   PHIẾU 72 · NHÓM 5 (16/10/2026) — GIỎ 2 CỘT: cột trái “Recently viewed”
   · CHỈ máy tính (≥1000px) + CHỈ khi khách ĐÃ xem sản phẩm (JS gắn class .bb-co-rv lên dialog).
   · Chưa có dữ liệu ⇒ cột ẩn, giỏ vẫn 420px như cũ (KHÔNG có khối trống).
   · Trên máy tính, tab “Recently viewed” TRONG giỏ được ẩn (đã có cột riêng);
     ĐIỆN THOẠI vẫn giữ đủ 2 tab.
   LÙI BÀI: xoá khối này + bỏ 2 thẻ bọc trong snippets/cart-drawer.liquid.
   ============================================================================ */
.bb-gio-2cot {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.bb-gio-cotphai {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.bb-gio-cotphai .bb-gio {
  flex: 1 1 auto;
  min-height: 0;
}
.bb-gio__cot-rv {
  display: none;
  flex-direction: column;
  /* 16/10/2026 (phiên 75 d) — NỚI CHO KHỚP VOLUME (anh chốt “giống kích cỡ của Volume”):
     đo ảnh gốc Volume @1440 ⇒ giỏ 828px · cột gợi ý trái 338px · cột giỏ 490px.
     ⇒ nay: cột trái 320 → 338px, giỏ 800 → 830px (xem `@media (min-width:1000px)` bên dưới). */
  width: 338px;
  flex: 0 0 338px;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--bb-line);
}
.bb-gio__cot-rv[hidden] {
  display: none;
}
.bb-gio__cot-rv-nhan {
  margin: 0;
  padding: 18px 18px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--bb-charcoal);
  border-bottom: 1px solid var(--bb-line);
}
.bb-gio__cot-rv-ds {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
}
.bb-gio__cot-rv-o {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bb-gio__cot-rv-anh {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5px;
  background: #f4f1ec;
}
.bb-gio__cot-rv-ten {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bb-charcoal);
  text-decoration: none;
}
.bb-gio__cot-rv-gia {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--bb-charcoal);
}
.bb-gio__cot-rv-them {
  width: 100%;
  padding: 9px 0;
  background: var(--bb-charcoal);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.bb-gio__cot-rv-them:hover {
  background: #000;
}
.bb-gio__cot-rv-them:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (min-width: 1000px) {
  #cart-drawer dialog.theme-drawer__dialog.bb-co-rv {
    width: 830px !important; /* 75 d: 800 → 830 cho khớp Volume (828px) */
  }
  #cart-drawer dialog.theme-drawer__dialog.bb-co-rv .bb-gio__cot-rv:not([hidden]) {
    display: flex;
  }

  /* ⚠️ 16/10/2026 (phiên 75 b) — ĐÃ GỠ luật ẨN tab “Recently viewed” ở đây:
     `#cart-drawer .bb-gio__tab[data-bb-tab='rv'] { display: none; }`
     vì anh Trung xem giỏ thật và báo *“cạnh You may also like chưa có cái là Recently viewed”* —
     luật cũ (từ phiếu 72, khi máy tính còn dùng CỘT trái riêng) khiến tab RV tàng hình ở màn ≥1000px.
     Nay 2 tab hiện Ở MỌI KHỔ (anh chốt). */
}

@media (max-width: 999px) {
  .bb-gio__cot-rv {
    display: none !important;
  }
}

/* (17/10/2026) DẢI UNDO LÀ PHẦN RIÊNG — nằm ngay dưới đầu giỏ ("Your bag"),
   TRƯỚC vùng cuộn; KHÔNG còn nằm trong `.bb-gio__chan` / khối Total.
   Có margin + đổ bóng để tách hẳn.
   ============================================================================ */
/* (17/10/2026) DẢI UNDO LÀ TOAST NỔI — nằm phía TRÊN chân giỏ/Total, cách 12px,
   KHÔNG nằm trong footer, KHÔNG đẩy sản phẩm (position:absolute).
   `--bb-chan-h` do JS đo chiều cao footer (0 khi giỏ rỗng). */
.bb-gio__undo {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(var(--bb-chan-h, 0px) + 12px);
  z-index: 6;
  margin: 0;
  padding: 10px 12px;
  background: #f4f1ec;
  /* 🔴 17/10/2026 (phiên 75 z) — LỖI ANH TRUNG BÁO: “báo hiện đã remove bị lỗi này, có nhìn thấy chữ gì đâu”.
     Nguyên nhân: luật CŨ phía trên (mục 2.6) đặt `color: var(--bb-cream)` cho cả dải (dải cũ nền ĐEN),
     nhưng luật mới đổi nền sang SÁNG mà KHÔNG đặt lại màu chữ ⇒ **chữ kem trên nền kem = vô hình**
     (chỉ nút “Undo” thấy được vì nó có `color: var(--bb-forest)` riêng). Nay đặt lại màu chữ. */
  color: var(--bb-charcoal);
  border: 1px solid var(--bb-line);
  border-left: 3px solid var(--bb-forest);
  border-radius: var(--bb-r);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  box-shadow: 0 4px 14px rgb(45 74 62 / 10%);
}
.bb-gio__undo[hidden] {
  display: none;
}
.bb-gio__undo p {
  margin: 0;
  font-size: 11.5px;
  color: var(--bb-charcoal);
}
.bb-gio__undo button {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bb-forest);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* Ẩn nút “về đầu trang” khi giỏ đang mở — nút này nổi z-index 900, đè lên góc phải giỏ
   (ảnh anh Trung gửi 17/10/2026). Không ảnh hưởng khi giỏ đóng. */
body:has(#cart-drawer[open]) .bb-top {
  display: none !important;
}

/* ============================================================================
   17/10/2026 (phiên 75 z) — SỬA LỖI “CHỮ LẠC NGOÀI COMMENT” (đo được: dòng ~1380 có nguyên một đoạn
   tiếng Việt KHÔNG nằm trong `/* … */` ⇒ CSS parser coi là selector rác và **NUỐT luôn luật
   `.bb-gio__gop` ngay sau nó**). Nay đã bọc lại thành comment cho đúng.
   Nội dung đoạn đó (giữ nguyên, chỉ bọc comment):
   Thay 2 thanh cũ (.bb-gio__ship + .bb-gio__goi). 4 mốc:
   “2 pairs 10%” (33,3%) → “Free shipping” (50% — mốc ĐẶC BIỆT ăn theo TIỀN) →
   “4 pairs 25%” (66,6%) → “6 pairs 30%” (100%). Thanh chạy liên tục theo tỉ lệ giá.
   LÙI BÀI: xoá khối này + trả lại 2 khối cũ trong snippets/cart-drawer.liquid.
   ============================================================================ */
.bb-gio__gop {
  margin: 12px 0 0;
  padding: 12px 13px;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
}
.bb-gio__gop-chu {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--bb-muted);
}
.bb-gio__gop-chu b {
  color: var(--bb-charcoal);
}
.bb-gio__gop-thanh {
  position: relative;
  height: 4px;
  /* chừa 34px MỖI BÊN cho nhãn mốc (mốc cuối ở 100% rộng 68px ⇒ nhô 34px)
     ⇒ KHÔNG còn tràn ngang làm giỏ sinh thanh cuộn ngang (đo 16/10: 454 > 420) */
  margin: 16px 34px 34px;
  background: var(--bb-line);
  border-radius: 2px;
}
.bb-gio__gop-day {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--bb-forest);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.bb-gio__gop-moc {
  position: absolute;
  top: -5px;
  width: 68px;
  margin-left: -34px;
  text-align: center;
}
.bb-gio__gop-moc b {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bb-line);
  margin: 0 auto;
}
.bb-gio__gop-moc em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--bb-muted);
  margin-top: 6px;
  line-height: 1.25;
}
.bb-gio__gop-moc.is-dat b {
  border-color: var(--bb-forest);
  background: var(--bb-forest);
}
.bb-gio__gop-moc.is-dat em {
  color: var(--bb-forest);
  font-weight: 800;
}
/* mốc “Free shipping” vẽ khác một chút (viền đứt) để thấy nó là mốc ĐẶC BIỆT */
.bb-gio__gop-moc--ship b {
  width: 13px;
  height: 13px;
  margin-top: -1px;
  border-style: dashed;
}
.bb-gio__gop-moc--ship.is-dat b {
  border-style: solid;
}
@media (prefers-reduced-motion: reduce) {
  .bb-gio__gop-day {
    transition: none;
  }
}

/* ============================================================================
   16/10/2026 · PHIẾU 72 — BẢN v7: LÀM NỐT GIỎ HÀNG THEO MOCKUP v7
   Mockup: PREVIEWS-DA-CHOT\XEM-GIO-MOI-7-VIEC-16-10-v7.html
     ① (gỡ ở trên) ② (gỡ ở trên) — dải “chưa giữ hàng” · nút tim ♡ · dòng thương hiệu chân giỏ
     ③ MÁY TÍNH: bỏ HÀNG TAB ở khối gợi ý, thay bằng 1 nhãn “You may also like”
        (cột “Recently viewed” vẫn nằm RIÊNG ở cạnh trái giỏ — NHÓM 5)
     ④ ĐIỆN THOẠI: 2 tab CẠNH NHAU + LƯỚI 2 × 2 · KHÔNG thanh kéo · KHÔNG mũi tên
     ⑤ GIỎ RỖNG: sạch toàn bộ (không thanh tiến độ · không tóm tiền · không Secure checkout)
     ⑥ Thanh tiến độ 4 mốc: kiểu mới (nền gradient + vạch màu brand + mốc tròn to hơn)
     ⑦ Hộp “Free returns”: 1 DÒNG (bỏ accordion)
   LÙI BÀI: xoá đúng khối này + trả 3 khối đã gỡ ở trên
            (_DO\_BAN-LUU\bamboove-cart-drawer.css.p72v7-truoc.bak).
   ============================================================================ */

/* ---- ③ ④ HÀNG TAB + LƯỚI THẺ GỢI Ý: NAY Ở assets/bamboove-cart-tabs.css (1 nguồn duy nhất)
   Vì sao: phiên 60 (13/10) đã có file RIÊNG cho 2 tab với độ ưu tiên `#cart-drawer .…`
   (cao hơn file này) ⇒ để 2 nơi là chồng chéo, lưới thẻ bị luật cũ ĐÈ.
   Bản v7 (16/10/2026) nay nằm trọn ở `bamboove-cart-tabs.css`; khối thử ở đây đã GỠ.
   Bản trước khi gỡ: _DO\_BAN-LUU\bamboove-cart-drawer.css.p72v7-truoc.bak */

/* ---- ⑤ GIỎ RỖNG: sạch toàn bộ (mockup v7 điểm 5) ---- */
.bb-gio--trong .bb-gio__gop,
.bb-gio--trong .bb-gio__manhap,
.bb-gio--trong .bb-gio__note,
.bb-gio--trong .bb-gio__tin,
.bb-gio--trong .bb-gio__tt-icons,
.bb-gio--trong .bb-gio__dong-tien,
.bb-gio--trong .bb-gio__nut-gui,
.bb-gio--trong .bb-gio__goiy {
  display: none;
}
/* Giỏ rỗng: ẩn chân giỏ (Total/checkout). Dải Undo nằm NGOÀI chân giỏ nên vẫn hiện được
   khi khách vừa xoá món cuối. */
.bb-gio--trong .bb-gio__chan {
  display: none;
}
/* Khối “giỏ rỗng” cao hơn cho cân, giống mockup: hình tròn + câu + 2 nút */
.bb-gio--trong .bb-gio__trong {
  padding: 64px 30px;
  min-height: 420px;
}
.bb-gio__trong-ve {
  width: 96px;
  height: 96px;
}
.bb-gio__trong-ve svg {
  width: 46px;
  height: 46px;
  stroke: var(--bb-forest);
  stroke-width: 1.6;
}
.bb-gio__trong b {
  font-size: 18px;
  font-weight: 600;
}

/* ---- ⑦ (16/10/2026 · phiên 75 e) — Ô “FREE RETURNS” ĐÃ BỎ HẲN khỏi giỏ (anh Trung chốt:
   “không cần giữ cái free return và 30 day … thôi”). Trước đó nó là <details> accordion (p72),
   rồi rút thành 1 dòng (mockup v7), nay bỏ luôn.
   ⇒ Luật CSS `.bb-gio__tin--dong` + `.bb-gio__tin-ic` dưới đây KHÔNG còn dùng — giữ lại chỉ để
   ai muốn dựng lại thì có sẵn; muốn dọn sạch thì xoá khối này (không ảnh hưởng gì). */

/* ---- ⑥ THANH TIẾN ĐỘ 4 MỐC: kiểu mới, bám brand hơn ---- */
.bb-gio__gop {
  position: relative;
  margin: 14px 0 0;
  padding: 16px 16px 24px;
  background: linear-gradient(180deg, #fff 0%, #f7f4ed 100%);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r);
  overflow: hidden;
}
/* vạch màu brand chạy dọc mép trái thẻ tiến độ */
.bb-gio__gop::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--bb-forest) 0%, #c4956e 100%);
}
.bb-gio__gop-chu {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bb-charcoal);
  line-height: 1.5;
  margin: 0 0 14px;
}
.bb-gio__gop-chu b {
  color: var(--bb-forest);
  font-weight: 800;
}
.bb-gio__gop-thanh {
  position: relative;
  height: 6px;
  margin: 0 32px 32px; /* chừa 32px mỗi bên cho nhãn mốc ⇒ KHÔNG tràn ngang */
  background: #ebe6dc;
  border-radius: 99px;
  box-shadow: inset 0 1px 2px rgb(45 74 62 / 8%);
}
.bb-gio__gop-day {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--bb-forest) 0%, #3a5a4d 100%);
  box-shadow: 0 1px 4px rgb(45 74 62 / 25%);
}
/* Mốc nay là CHÍNH ô tròn (16px) — chấm nhỏ bên trong `b` không dùng nữa */
.bb-gio__gop-moc {
  top: -5px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #fff;
  border: 2px solid #d4cfc4;
  border-radius: 50%;
  transition: all 0.3s;
}
.bb-gio__gop-moc b {
  display: none;
}
.bb-gio__gop-moc em {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  margin-top: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.bb-gio__gop-moc.is-dat {
  border-color: var(--bb-forest);
  background: var(--bb-forest);
  box-shadow: 0 0 0 3px rgb(45 74 62 / 12%);
}
.bb-gio__gop-moc.is-dat em {
  color: var(--bb-forest);
  font-weight: 800;
}
/* Mốc “Free shipping” = mốc ĐẶC BIỆT (viền đứt → khi ĐẠT thì màu nhấn Terracotta) */
.bb-gio__gop-moc--ship {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  margin-left: -9px;
  border-style: dashed;
}
.bb-gio__gop-moc--ship.is-dat {
  border-style: solid;
  background: #c4956e;
  border-color: #c4956e;
  box-shadow: 0 0 0 3px rgb(196 149 110 / 18%);
}
.bb-gio__gop-moc--ship em {
  color: #c4956e;
  font-weight: 800;
}

/* ============================================================================
   16/10/2026 (phiên 75 g) — KHỐI “PHỤ” TRONG VÙNG CUỘN: MÃ GIẢM GIÁ + GHI CHÚ ĐƠN
   Chuyển từ CHÂN GIỎ xuống đây, NẰM NGAY DƯỚI “ADD A LITTLE EXTRA” (anh Trung yêu cầu:
   trước đây 2 khối này nằm ngay TRÊN Subtotal/Shipping ⇒ sai chỗ).
   Thứ tự giỏ nay: món → “Add a little extra” → mã giảm giá → ghi chú đơn → (chân giỏ) Subtotal… → checkout.
   LÙI BÀI: trả 2 khối về `.bb-gio__chan` trong snippets/cart-drawer.liquid rồi bỏ luật này.
   ============================================================================ */
.bb-gio__phu {
  padding: 4px 20px 16px;
  border-top: 1px solid var(--bb-line);
  background: var(--bb-white);
}

.bb-gio__phu .bb-gio__manhap {
  margin: 12px 0 0;
}

.bb-gio__phu .bb-gio__note {
  margin: 10px 0 0;
}

/* giỏ rỗng: ẩn luôn khối phụ (nếu không sẽ còn 1 dải trắng + đường kẻ vô nghĩa) */
.bb-gio--trong .bb-gio__phu {
  display: none;
}

/* ============================================================================
   16/10/2026 (phiên 75 x) — PHẦN TÍNH PHÍ CHI TIẾT DƯỚI GHI CHÚ ĐƠN + NÚT NHẮC KÉO XUỐNG
   Anh Trung: *“cho cái phần này xuống dưới cái phần order note… để trên nút check out chỉ hiện cái total thôi,
   nhìn cho gọn… để nhắc khách thì mình sẽ có một nút và mũi tên hướng xuống… khi nào cái phần dưới order note
   bị che thì mới hiện lại cái nút bấm để lướt nhanh xuống dưới”*.
   ============================================================================ */
.bb-gio__tom-tien {
  margin: 0 20px 10px; /* 75 y: bớt khoảng thừa dưới thẻ phí (anh: “sao lại thừa ra cái khoảng gì đây”) */
  padding: 12px 16px 14px;
  border: 1px solid var(--bb-line);
  border-radius: 10px;
  background: var(--bb-white);
}

/* gạch ngăn giữa các dòng cho dễ đọc (chỉ trong khối này, không đụng chân giỏ) */
.bb-gio__tom-tien .bb-gio__dong-tien {
  padding: 2px 0;
}

.bb-gio--trong .bb-gio__tom-tien,
.bb-gio--trong .bb-gio__nhay {
  display: none;
}

/* ============================================================================
   16/10/2026 (phiên 75 z) — NÚT “FEES BREAKDOWN” = VÒNG TRÒN TRẮNG NỔI, TÁCH KHỎI THANH TOTAL
   Anh Trung: *“bỏ cái kiểu đó đi, tôi cần cái như hình… cái nút fees breakdown của bạn dính liền với thanh
   dưới có chữ total rồi, TÁCH RIÊNG nó ra”* (ảnh anh gửi: nút TRÒN TRẮNG + mũi tên, kiểu nút lên-đầu-trang PDP).
   ⇒ `position: absolute; bottom: calc(100% + 12px)` = NỔI PHÍA TRÊN chân giỏ (không dính vào dải Total),
     nằm ở GÓC PHẢI, chỉ có MŨI TÊN (chữ ẩn — vẫn giữ `aria-label` cho máy đọc).
   ============================================================================ */
.bb-gio__nhay {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 14px); /* NỔI hẳn lên trên chân giỏ (như một popup nhỏ), KHÔNG dính vào dải Total */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(26 26 26 / 10%);
  border-radius: 50%;
  background: #fff;
  color: var(--bb-charcoal, #1f1f1f);
  box-shadow: 0 10px 26px rgb(0 0 0 / 22%), 0 2px 6px rgb(0 0 0 / 12%);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* chữ đã bỏ (anh muốn đúng kiểu VÒNG TRÒN + mũi tên như ảnh) — vẫn đọc được bằng screen reader */
.bb-gio__nhay span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bb-gio__nhay:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
}

.bb-gio__nhay[hidden] {
  display: none;
}

.bb-gio__nhay svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  animation: bb-nhay-mui 1.5s ease-in-out infinite;
}

@keyframes bb-nhay-mui {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-gio__nhay svg {
    animation: none;
  }
}

/* ============================================================================
   16/10/2026 (phiên 75 i) — ĐÃ BỎ CSS của TRUST BADGE “FREE RETURNS” (`.bb-gio__tin-cay*`)
   vì anh Trung chốt *“thôi tôi nghĩ lại rồi, bỏ cái badge đó đi”* (badge thêm ở phiên 75 h).
   🔁 DỰNG LẠI: lấy khối CSS ở commit `8681148` (cùng chỗ này) rồi thêm lại markup trong
   `snippets/cart-drawer.liquid` (ngay dưới khối Order note).
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .bb-gio__gop-moc {
    transition: none;
  }
}

/* ============================================================================
   18/10/2026 — THANH TIẾN ĐỘ MUA HÀNG: BẢN MỚI (đã đẩy live 18/10/2026)
   Vì sao đổi: bản 4 mốc cũ có 4 nhãn chen nhau + mốc “free ship” nằm giữa thanh
   (mốc theo TIỀN, không theo số đôi) nên nhìn rối. Bản mới:
     · 4 nấc: 2 pairs → Free ship $60 → 4 pairs → 6 pairs
     · 3 nấc đôi tự đầy theo số đôi thật; nấc free ship chạy theo TIỀN và tô terracotta
     · ô “Free AU shipping” ở góc phải to 2 dòng (số tiền còn thiếu / Unlocked)
     · bỏ gradient + vạch màu dọc + 4 ô tròn; nền kem phẳng, chữ nhỏ in hoa
   LÙI BÀI: xoá khối này + trả markup cũ trong snippets/cart-drawer.liquid
   (bản cũ ở commit trước ngày 18/10/2026).
   ============================================================================ */
.bb-gio__gop.bb-gio__gop--moi {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 15px 13px;
  background: #f8f5ee;
  border: 1px solid rgb(45 74 62 / 14%);
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
}
.bb-gio__gop--moi::before {
  display: none;
  content: none;
}
.bb-gio__gop--moi .bb-gio__gop-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px;
}
.bb-gio__gop--moi .bb-gio__gop-nhan {
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--bb-forest);
}
.bb-gio__gop--moi .bb-gio__gop-ship {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 112px;
  padding: 6px 9px 7px;
  border-radius: 8px;
  background: #f1e9dc;
  border: 1px solid rgb(196 149 110 / 40%);
  color: #3b3a36;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}
.bb-gio__gop--moi .bb-gio__gop-ship small {
  font-size: 8.5px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #8a6a4c;
}
.bb-gio__gop--moi .bb-gio__gop-ship b {
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 800;
  color: #3b3a36;
}
.bb-gio__gop--moi .bb-gio__gop-ship.is-dat {
  background: var(--bb-forest);
  border-color: var(--bb-forest);
  color: #faf8f5;
}
.bb-gio__gop--moi .bb-gio__gop-ship.is-dat small {
  color: #c4956e;
}
.bb-gio__gop--moi .bb-gio__gop-ship.is-dat b {
  color: #faf8f5;
}
.bb-gio__gop--moi .bb-gio__gop-chu {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #3b3a36;
}
.bb-gio__gop--moi .bb-gio__gop-chu b {
  color: var(--bb-forest);
  font-weight: 800;
}
.bb-gio__gop--moi .bb-gio__gop-thanh {
  display: flex;
  gap: 5px;
  height: 6px;
  margin: 0 0 9px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.bb-gio__gop--moi .bb-gio__gop-doan {
  flex: 1 1 0;
  height: 100%;
  background: #e4ded2;
  border-radius: 999px;
  overflow: hidden;
}
.bb-gio__gop--moi .bb-gio__gop-doan i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--bb-forest) 0%, #4a6a5a 100%);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.bb-gio__gop--moi .bb-gio__gop-doan--ship i {
  background: linear-gradient(90deg, #b07b52 0%, #d6ad88 100%);
}
.bb-gio__gop--moi .bb-gio__gop-moc-hang {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.bb-gio__gop--moi .bb-gio__gop-moc {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.bb-gio__gop--moi .bb-gio__gop-moc b {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.15px;
  color: #8a8173;
}
.bb-gio__gop--moi .bb-gio__gop-moc em {
  position: static;
  display: block;
  width: auto;
  margin: 1px 0 0;
  transform: none;
  font-size: 8.5px;
  line-height: 1.2;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  color: #9a9284;
  text-align: left;
  white-space: normal;
}
.bb-gio__gop--moi .bb-gio__gop-moc.is-dat b {
  color: var(--bb-forest);
}
.bb-gio__gop--moi .bb-gio__gop-moc.is-dat em {
  color: #6f675b;
}
.bb-gio__gop--moi .bb-gio__gop-moc--ship b {
  color: #b07b52;
}
.bb-gio__gop--moi .bb-gio__gop-moc--ship em {
  color: #a8886b;
}
.bb-gio__gop--moi .bb-gio__gop-moc--ship.is-dat b {
  color: #b07b52;
}
.bb-gio__gop--moi .bb-gio__gop-moc--ship.is-dat em {
  color: #8a6a4c;
}
@media (max-width: 380px) {
  .bb-gio__gop--moi .bb-gio__gop-ship {
    min-width: 104px;
    padding: 5px 7px 6px;
  }
  .bb-gio__gop--moi .bb-gio__gop-ship small {
    font-size: 8px;
  }
  .bb-gio__gop--moi .bb-gio__gop-ship b {
    font-size: 10.5px;
  }
  .bb-gio__gop--moi .bb-gio__gop-chu {
    font-size: 11.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bb-gio__gop--moi .bb-gio__gop-doan i {
    transition: none;
  }
}