/*
 * shop.css — khu vực /shop KẾ THỪA global style của site (styles.css, nền cream):
 * header .nav + footer .footer dùng chung toàn site, file này chỉ style phần riêng
 * của shop: nút giỏ hàng trên header (SSR hidden — shop.js hiện khi giỏ có hàng),
 * toolbar 1 hàng (tìm kiếm + chip lọc + sắp xếp + kiểu xem), lưới sản phẩm,
 * trang chi tiết, drawer giỏ hàng (nền sáng), và checkout — riêng 2 thẻ checkout
 * giữ nền tối stamped vì form dùng .buyform của styles.css (thiết kế cho nền tối)
 * và nối mạch theme sang funnel /pay.
 */

body.shop { display: flex; flex-direction: column; min-height: 100vh; }
.shop-main { flex: 1; padding: 26px 0 64px; }
/* Bàn phím: giữ viền focus rõ — các control có outline:none (search/sort/coupon/
   form) chỉ đổi màu viền, không đủ cho người dùng tab. Rule này thắng nhờ đứng sau
   styles.css và specificity (0,2,1) cao hơn các rule outline:none của chúng. */
body.shop :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
/* Thuộc tính [hidden] PHẢI thắng display của .pcard (block) / .shop-grid (grid/flex):
   JS lọc/tìm kiếm set .hidden để ẩn thẻ & lưới, nếu không display:… của tác giả đè
   [hidden] của UA → thẻ không khớp vẫn hiện. !important vì đây là bất biến "ẩn là ẩn". */
body.shop [hidden] { display: none !important; }

/* ── nút giỏ hàng trên header (.nav__inner) — chỉ hiện khi giỏ có hàng ── */
.shop-cart-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--cream-card); border: 1.5px solid var(--ink); color: var(--ink);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease);
}
.shop-cart-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--stamp-sm); }
.shop-cart-btn[hidden] { display: none; }

/* badge số lượng trên nút giỏ */
.cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800; line-height: 1;
}
.cart-badge[hidden] { display: none; }

/* ── nút dùng chung (stamped pill như .btn của styles.css — giữ tên class cho JS/markup) ── */
.shop-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  padding: 13px 26px; min-height: 46px; font-weight: 700; font-size: 1rem;
  font-family: var(--font-body); cursor: pointer; text-decoration: none;
  box-shadow: var(--stamp-sm);
  transition: transform .16s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.shop-btn-primary:hover { background: var(--orange-600); color: #fff; transform: translate(-1px, -1px); box-shadow: var(--stamp); }
.shop-btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.shop-btn-primary[aria-disabled="true"], .shop-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.shop-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: var(--r-pill); padding: 12px 24px; min-height: 46px; font-weight: 700; font-size: 1rem;
  font-family: var(--font-body); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease), transform .16s var(--ease);
}
.shop-btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.shop-linkbtn {
  background: none; border: 0; padding: 4px; color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.shop-linkbtn:hover { color: var(--orange-600); }

/* ── trang danh sách: toolbar 1 hàng — tìm kiếm + chip lọc + sắp xếp + kiểu xem ── */
.shop-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 6px 0 18px; }
/* Toolbar: chỉ giữ LAYOUT ở đây — kiểu nhìn (pill mực) dùng chung .ui-field /
   .ui-select / .ui-chip / .ui-seg trong assets/aios/styles.css. */
/* Thanh công cụ 2 HÀNG (best practice, tránh chật + cắt mất chip danh mục):
   hàng 1 = tìm kiếm (co giãn) + điều khiển (lọc giá · sắp xếp · lưới/danh sách);
   hàng 2 = chip DANH MỤC chiếm trọn chiều ngang, cuộn ngang nếu tràn. */
.shop-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.shop-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shop-search { flex: 1 1 260px; min-width: 0; }
.shop-toolbar__controls { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.shop-chips {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px; scrollbar-width: none;
}
.shop-chips::-webkit-scrollbar { display: none; }
.shop-sort, .shop-price, .shop-view { flex: none; }
.chip { flex: none; }
@media (max-width: 640px) {
  .shop-toolbar__controls { width: 100%; margin-left: 0; }
  .shop-price, .shop-sort { flex: 1 1 auto; min-width: 0; }
}

.shop-count { color: var(--muted); font-size: .88rem; margin: 0 0 16px; }
.shop-empty { color: var(--ink-soft); padding: 28px 0; font-size: 1rem; }
.shop-empty-state { color: var(--ink-soft); padding: 48px 0; font-size: 1.05rem; text-align: center; }

/* ── lưới sản phẩm ── */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
@media (max-width: 480px) { .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } }

.pcard {
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--cream-card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pcard:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--stamp-sm); }
.pcard__media { display: block; aspect-ratio: 1; background: var(--cream-50); border-bottom: 1px solid var(--line-soft); position: relative; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tile {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 2.6rem; font-weight: 800; color: var(--ink);
  background: linear-gradient(135deg, rgba(244, 124, 48, .32), rgba(244, 124, 48, .04) 70%);
}
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 15px; }
.pcard__name { font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--ink); }
.pcard__price { font-size: .95rem; }
/* Giá dùng màu mực như .tier__price của site (không cam trên nền sáng — dưới 4.5:1);
   sắc cam giữ ở gạch giá cũ + badge "Giảm giá" + nút. */
.pcard__price strong { color: var(--ink); font-size: 1.05rem; }
.pcard__price s { color: var(--muted); opacity: .65; font-size: .85rem; margin-left: 2px; }
.sale-badge {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: var(--r-pill); vertical-align: 1px;
  background: var(--orange-100); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.pcard__desc { display: none; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.pcard__add {
  align-self: flex-start; margin-top: 4px; padding: 9px 16px; min-height: 40px; border-radius: var(--r-pill);
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.pcard__add:hover { background: var(--orange); border-color: var(--ink); color: #fff; }

/* ── Sản phẩm chưa/không mở bán (v26) — vẫn hiện đầy đủ, chỉ không mua được ── */
.pcard.is-unavailable .pcard__media img { filter: grayscale(.55); opacity: .72; }
.pcard__flag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--ink); color: var(--cream, #f5efd9);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.pcard__soon {
  align-self: flex-start; margin-top: 4px; padding: 9px 16px; min-height: 40px;
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  background: var(--cream-50); border: 1.5px dashed var(--line);
  color: var(--muted); font-size: .85rem; font-weight: 700;
}

/* Nút lọc "chỉ hiện đang bán" — nằm trong toolbar controls, KHÔNG phải chip danh mục
   (chip là bộ chọn ĐƠN theo state.col; trộn vào sẽ phá bộ lọc danh mục). */
.shop-onlybuyable {
  flex: none; padding: 9px 15px; min-height: 40px; border-radius: var(--r-pill);
  background: transparent; border: 1.5px solid var(--line); color: var(--muted);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.shop-onlybuyable:hover { border-color: var(--ink); color: var(--ink); }
.shop-onlybuyable.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Khối thay cho nút mua trên trang chi tiết khi sản phẩm chưa mở bán. */
.pd-unavailable {
  border: 1.5px dashed var(--line); border-radius: var(--r-md, 14px);
  padding: 18px 20px; background: var(--cream-50);
}
.pd-unavailable__title { margin: 0 0 6px; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.pd-unavailable__note { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ── Báo giá riêng (B2B) — hàng ĐANG BÁN, chỉ là chốt giá qua tư vấn. KHÔNG làm mờ ảnh
   và KHÔNG dùng khung nét đứt xám như hàng ngừng bán: thẻ phải mời khách bấm tiếp. ── */
.pcard__contact {
  align-self: flex-start; margin-top: 4px; padding: 9px 16px; min-height: 40px;
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  background: var(--ink); border: 1.5px solid var(--ink); color: #fff;
  font-size: .85rem; font-weight: 700;
}
.pcard:hover .pcard__contact { background: var(--orange); border-color: var(--orange); }
.pcard__flag--contact { background: var(--orange); color: #fff; }
/* Chữ "Liên hệ báo giá" dài hơn con số — hạ cỡ để không xuống dòng trong ô giá của thẻ. */
.price-contact { font-size: .95em; }

.pd-contact {
  border: 1.5px solid var(--orange); border-radius: var(--r-md, 14px);
  padding: 18px 20px; background: var(--orange-100, #fff7ed);
}
.pd-contact__title { margin: 0 0 6px; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.pd-contact__note { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.pd-contact__cta { display: inline-flex; }
.pd-contact__alt { margin: 12px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.pd-contact__alt a { color: var(--ink); font-weight: 700; }

/* ── Đặt trước (v28) — MUA ĐƯỢC, nên không làm mờ ảnh như hàng ngừng bán; chỉ gắn
   nhãn xanh để khách hiểu ngay đây là mua trước chứ không phải giao ngay. ── */
.pcard__flag--pre { background: #1d4ed8; color: #fff; }
.pd-preorder {
  border: 1.5px solid #bfdbfe; border-radius: var(--r-md, 14px);
  padding: 16px 18px; background: #eff6ff; margin-top: 12px;
}
.pd-preorder__title { margin: 0 0 8px; font-weight: 800; color: #1e3a8a; font-size: .98rem; }
.pd-preorder__note { margin: 0 0 8px; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.pd-preorder__note:last-child { margin-bottom: 0; }

/* chế độ danh sách */
.shop-grid.is-list { display: flex; flex-direction: column; gap: 12px; }
.shop-grid.is-list .pcard { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
.shop-grid.is-list .pcard__media { width: 96px; height: 96px; aspect-ratio: 1; flex: none; border-radius: var(--r); border-bottom: 0; border: 1px solid var(--line-soft); overflow: hidden; }
.shop-grid.is-list .ph-tile { font-size: 1.7rem; }
.shop-grid.is-list .pcard__body { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 0; }
.shop-grid.is-list .pcard__name { grid-column: 1; }
.shop-grid.is-list .pcard__price { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; white-space: nowrap; }
.shop-grid.is-list .pcard__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  grid-column: 1; grid-row: 2;
}
.shop-grid.is-list .pcard__add { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; }
@media (max-width: 560px) {
  .shop-grid.is-list .pcard__media { width: 72px; height: 72px; }
  .shop-grid.is-list .pcard__add { display: none; }
}

/* ── trang chi tiết ── */

/* minmax(0,1fr) + min-width:0 → cột không "phình" theo bề rộng nội tại của ảnh ngang
   (grid/flex blowout). Hai cột LUÔN bằng nhau bất kể tỉ lệ ảnh. */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.pd-grid > * { min-width: 0; }
@media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; gap: 22px; } }

.pd-main {
  position: relative; width: 100%;
  aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  border: 1.5px solid var(--line); background: var(--cream-50);
}
/* contain (not cover) → toàn bộ ảnh hiện ra, không cắt xén ảnh không vuông.
   Bấm để mở lightbox xem ảnh đầy đủ + phóng to. */
.pd-main img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pd-thumb {
  flex: none; width: 72px; height: 72px; border-radius: var(--r-xs); overflow: hidden; cursor: pointer; padding: 0;
  border: 2px solid var(--line); background: var(--cream-50);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.is-active { border-color: var(--orange); }

/* Carousel: nút ◄ ► phủ lên ảnh chính + ô đếm n/N (chỉ hiện khi có nhiều ảnh). */
.pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; border: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 41, 55, .5); color: #fff; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0 0 3px;
  transition: background .15s ease;
}
.pd-nav:hover { background: rgba(31, 41, 55, .82); }
.pd-nav--prev { left: 10px; }
.pd-nav--next { right: 10px; }
.pd-counter {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(31, 41, 55, .62); color: #fff;
  font-size: .78rem; padding: 3px 9px; border-radius: 999px; pointer-events: none;
}
.pd-main:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── Lightbox: xem ảnh đầy đủ (contain), điều hướng, bấm để phóng to + rê để xem ── */
body.pd-lb-open { overflow: hidden; }
.pd-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 25, .93); overscroll-behavior: contain;
}
.pd-lightbox[hidden] { display: none; }
.pd-lightbox__stage {
  max-width: 94vw; max-height: 88vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pd-lightbox__img {
  max-width: 94vw; max-height: 88vh; object-fit: contain; display: block;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  transition: transform .12s ease;
}
.pd-lightbox__img.is-zoomed { cursor: move; transition: none; }
.pd-lightbox__close, .pd-lightbox__nav {
  position: fixed; z-index: 1001; border: none; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.pd-lightbox__close:hover, .pd-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.pd-lightbox__close { top: 16px; right: 18px; width: 42px; height: 42px; font-size: 20px; }
.pd-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.pd-lightbox__nav--prev { left: 16px; }
.pd-lightbox__nav--next { right: 16px; }
.pd-lightbox__counter {
  position: fixed; z-index: 1001; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: .82rem; padding: 4px 12px; border-radius: 999px; pointer-events: none;
}
@media (max-width: 640px) {
  .pd-lightbox__nav { width: 40px; height: 40px; font-size: 26px; }
  .pd-lightbox__nav--prev { left: 8px; } .pd-lightbox__nav--next { right: 8px; }
}

.pd-buy h1 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin: 0 0 10px; line-height: 1.15; }
.pd-price { font-size: 1.1rem; margin: 0 0 12px; }
.pd-price strong { color: var(--ink); font-size: 1.55rem; font-weight: 800; }
.pd-price s { color: var(--muted); opacity: .65; margin-left: 6px; }
.pd-short { color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }
/* "Có sẵn trong gói hội viên" — đứng NGAY trên khối mua, đủ nổi để không ai mua trùng thứ
   gói của mình đã bao gồm, nhưng không to bằng nút mua (mua đứt vẫn là lựa chọn hợp lệ). */
.pd-tier { background: #fff8f2; border: 1px solid var(--line); border-left: 3px solid #c2410c;
  border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: .92rem; line-height: 1.55; }
.pd-tier a { color: #c2410c; font-weight: 600; }

.pd-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--cream-card); margin: 0 0 16px; }
.pd-qty button {
  width: 44px; height: 44px; background: none; border: 0; color: var(--ink);
  font-size: 1.3rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.pd-qty button:hover { color: var(--orange-600); }
.pd-qty input {
  width: 54px; text-align: center; background: transparent; border: 0; color: var(--ink);
  font: inherit; font-size: 1.05rem; font-weight: 700; -moz-appearance: textfield; appearance: textfield;
}
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-qty input:focus { outline: none; }

.pd-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.pd-ctas > * { flex: 1 1 180px; }
.pd-trust { color: var(--muted); font-size: .85rem; line-height: 1.6; margin: 0; }

/* Landing page(s) gắn với sản phẩm — liên kết tới trang giới thiệu riêng (khác trang shop này). */
.pd-landing { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pd-landing__link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-weight: 600; font-size: .92rem; color: var(--brand, #F47C30); text-decoration: none;
}
.pd-landing__link:hover { text-decoration: underline; }

.pd-desc { margin-top: 44px; max-width: 760px; }
.pd-desc > h2 { font-size: 1.35rem; margin: 0 0 14px; }
/* Nội dung mô tả giàu định dạng (H2–H6, list, quote, link…) — cùng phong cách mô tả sự kiện. */
.pd-desc__body { color: var(--ink-soft); line-height: 1.75; font-size: 1rem; }
.pd-desc__body p { margin: 0 0 14px; }
.pd-desc__body h2, .pd-desc__body h3, .pd-desc__body h4,
.pd-desc__body h5, .pd-desc__body h6 { color: var(--ink); line-height: 1.3; margin: 22px 0 10px; }
.pd-desc__body h2 { font-size: 1.2rem; }
.pd-desc__body h3 { font-size: 1.08rem; }
.pd-desc__body h4 { font-size: 1rem; }
.pd-desc__body h5 { font-size: .94rem; }
.pd-desc__body h6 { font-size: .88rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pd-desc__body ul, .pd-desc__body ol { margin: 0 0 14px; padding-left: 22px; }
.pd-desc__body li { margin: 0 0 6px; }
.pd-desc__body a { color: var(--orange-600); }
.pd-desc__body strong, .pd-desc__body b { color: var(--ink); }
.pd-desc__body blockquote { border-left: 3px solid var(--orange); margin: 14px 0; padding: 4px 0 4px 14px; color: var(--muted); }
.pd-desc__body img { max-width: 100%; border-radius: var(--r-md, 12px); border: 1px solid var(--line); }
.pd-desc__body table { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.pd-desc__body th, .pd-desc__body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

.pd-related { margin-top: 46px; }
.pd-related h2 { font-size: 1.3rem; margin: 0 0 16px; }

/* trang 404 shop */
.shop-404 { max-width: 560px; margin: 56px auto; text-align: center; }
.shop-404 h1 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 12px; }
.shop-404 p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }

/* ── giỏ hàng: drawer + backdrop (nền sáng, khớp theme cream) ── */
.cart-backdrop { position: fixed; inset: 0; background: rgba(9, 9, 9, .4); z-index: 990; }
.cart-backdrop[hidden] { display: none; }
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); z-index: 1000;
  background: var(--cream-card); border-left: 1.5px solid var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .25s var(--ease); visibility: hidden;
}
.cart-drawer.is-open { transform: none; visibility: visible; }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.cart-drawer__head h2 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.cart-drawer__close {
  width: 44px; height: 44px; background: none; border: 0; color: var(--muted);
  font-size: 1.15rem; cursor: pointer; border-radius: var(--r-pill);
}
.cart-drawer__close:hover { color: var(--ink); background: var(--cream-50); }
.cart-drawer__notice {
  margin: 12px 18px 0; padding: 10px 12px; border-radius: var(--r-xs); font-size: .84rem; line-height: 1.5;
  background: var(--orange-100); border: 1px solid var(--orange); color: var(--ink-soft);
}
.cart-drawer__error {
  margin: 18px; padding: 16px; border-radius: var(--r-xs); text-align: center;
  background: var(--cream-50); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .9rem; line-height: 1.6;
}
.cart-drawer__error .shop-linkbtn { margin-top: 8px; }
.cart-drawer__items { flex: 1; overflow-y: auto; padding: 4px 18px; }
.cart-line { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.cart-line__thumb { width: 48px; height: 48px; flex: none; border-radius: var(--r-xs); overflow: hidden; background: var(--cream-50); border: 1px solid var(--line-soft); }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__thumb .ph-tile { font-size: 1.1rem; }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name { display: block; color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.35; text-decoration: none; }
.cart-line__name:hover { text-decoration: underline; }
.cart-line__price { color: var(--muted); font-size: .82rem; }
/* Dòng giỏ hàng của sản phẩm chưa mở bán: giữ lại cho khách thấy, nhưng làm mờ và
   KHÔNG tính vào tạm tính (xem renderDrawer trong shop.js). */
.cart-line.is-unavailable .cart-line__thumb img { filter: grayscale(.6); opacity: .7; }
.cart-line.is-unavailable .cart-line__price { text-decoration: line-through; }
.cart-line__flag { display: block; margin-top: 2px; color: var(--ink); font-size: .74rem; font-weight: 700; }
.cart-line__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--cream-50); }
.cart-line__qty button { width: 30px; height: 30px; background: none; border: 0; color: var(--ink); font-size: 1rem; cursor: pointer; line-height: 1; }
.cart-line__qty span { min-width: 24px; text-align: center; font-size: .88rem; font-weight: 700; color: var(--ink); }
.cart-line__remove { width: 34px; height: 34px; background: none; border: 0; color: var(--muted); font-size: .95rem; cursor: pointer; border-radius: var(--r-pill); }
.cart-line__remove:hover { color: #c0392b; background: rgba(192, 57, 43, .1); }
.cart-drawer__empty { color: var(--muted); text-align: center; padding: 26px 18px; }
.cart-drawer__empty[hidden] { display: none; }
.cart-drawer__foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.cart-drawer__subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .95rem; color: var(--ink-soft); }
.cart-drawer__subtotal strong { color: var(--ink); font-size: 1.15rem; }
.cart-drawer__cta { width: 100%; }

/* ── checkout — 2 thẻ tối stamped trên nền cream (form .buyform của styles.css
   thiết kế cho nền tối; đồng thời nối mạch theme sang funnel /pay) ── */
.co-title { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 20px; }
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.co-grid[hidden] { display: none; }
@media (max-width: 820px) {
  .co-grid { grid-template-columns: 1fr; gap: 20px; }
  .co-formcol { order: -1; }
}
.co-summary, .co-formcol {
  color: var(--on-dark);
  background-color: var(--dark-card);
  background-image: radial-gradient(rgba(245, 239, 217, .05) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  border: 1.5px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--stamp);
  padding: clamp(18px, 2.6vw, 28px);
}
.co-summary h2, .co-formcol h2 { font-size: 1.12rem; color: #fff; margin: 0 0 16px; }
.co-items { margin-bottom: 16px; }
/* Dòng đơn hàng = ảnh · (tên + stepper + bỏ) · thành tiền. Cùng bố cục với .cart-line của
   drawer NHƯNG bảng màu khác hẳn: .co-summary là thẻ TỐI (--dark-card), nên mọi token sáng
   (--ink, --cream-50, --line) copy sang đây sẽ thành chữ đen trên nền đen. */
.co-line {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start;
  padding: 13px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.co-line:last-child { border-bottom: none; }
.co-line__thumb {
  width: 52px; height: 52px; border-radius: var(--r-xs); overflow: hidden;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.co-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-line__thumb .ph-tile {
  font-size: 1.15rem; color: #f5efd9;
  background: linear-gradient(135deg, rgba(244, 124, 48, .55), rgba(244, 124, 48, .08) 70%);
}
.co-line__info { min-width: 0; }
.co-line__name {
  display: block; color: rgba(245, 239, 217, .92); font-weight: 600; font-size: .92rem;
  line-height: 1.35; text-decoration: none;
}
.co-line__name:hover { color: #fff; text-decoration: underline; }
.co-line__unit { display: block; margin-top: 3px; color: rgba(245, 239, 217, .55); font-size: .8rem; }
.co-line__ctl { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.co-line__qty {
  display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .05);
}
.co-line__qty button {
  width: 30px; height: 30px; background: none; border: 0; color: #f5efd9;
  font-size: 1rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.co-line__qty button:hover:not(:disabled) { color: #fff; }
.co-line__qty button:disabled { opacity: .35; cursor: default; }
.co-line__qty span { min-width: 26px; text-align: center; font-size: .88rem; font-weight: 700; color: #fff; }
.co-line__remove {
  background: none; border: 0; padding: 0; font-family: inherit; font-size: .82rem;
  color: rgba(245, 239, 217, .6); text-decoration: underline; cursor: pointer;
}
.co-line__remove:hover { color: #ffb4a2; }
.co-line__total { color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; text-align: right; }
@media (max-width: 480px) {
  .co-line { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .co-line__thumb { width: 44px; height: 44px; }
}
.co-coupon { display: flex; gap: 8px; }
.co-coupon__input {
  flex: 1; min-width: 0; padding: 10px 14px; min-height: 44px; font-family: inherit; font-size: .95rem;
  text-transform: uppercase; color: #f5efd9; background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 11px;
}
.co-coupon__input::placeholder { color: rgba(245, 239, 217, .4); text-transform: none; }
.co-coupon__input:focus { outline: none; border-color: var(--orange); }
.co-coupon__apply {
  flex: none; padding: 10px 18px; min-height: 44px; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #f5efd9; font: inherit; font-size: .88rem; font-weight: 700;
}
.co-coupon__apply:hover { border-color: var(--orange); }
.co-coupon__apply:disabled { opacity: .55; cursor: progress; }
.co-coupon__msg { margin: 8px 0 0; font-size: .84rem; }
.co-coupon__msg.ok { color: #7fdca0; font-weight: 600; }
.co-coupon__msg.bad { color: #ffb4a2; }
.co-totals { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; font-size: .94rem; }
.co-totals .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: rgba(245, 239, 217, .8); }
.co-totals .row[hidden] { display: none; }
.co-totals .row.disc { color: #7fdca0; }
.co-totals .row.total { border-top: 1px dashed rgba(255, 255, 255, .2); margin-top: 6px; padding-top: 10px; font-size: 1.05rem; color: #fff; font-weight: 800; }
.co-error { margin: 0 0 14px; }
.co-error[hidden] { display: none; }
.co-alert {
  max-width: 560px; margin: 40px auto; text-align: center;
  color: var(--on-dark);
  background-color: var(--dark-card);
  background-image: radial-gradient(rgba(245, 239, 217, .05) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  border: 1.5px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--stamp);
  padding: 30px 24px;
}
.co-alert[hidden] { display: none; }
.co-alert p { color: rgba(245, 239, 217, .85); line-height: 1.6; margin: 0 0 18px; font-size: 1rem; }
/* nút trong thẻ tối: bỏ viền/bóng stamp mực (thiết kế cho nền sáng) */
.co-alert .shop-btn-primary { border-color: transparent; box-shadow: 0 12px 26px -12px rgba(244, 124, 48, .9); }
.co-alert .shop-linkbtn { color: var(--orange); }