/* Tuan Shop - Vest Nam · vỏ trang và bộ "nguyên liệu" dùng chung (khu A).
   Màu lấy từ chính mẫu VIP1: xanh than (mực), sơ mi trắng (nền), vải lót (mảng phụ), cúc đồng (chỉ dùng cho thước size).
   Các khu khác (B–F) dùng biến và lớp ở đây, KHÔNG định nghĩa lại. Tên biến/lớp là hợp đồng (shared_notes §6).
   Mobile-first. Mốc bề rộng: <768 · 768 · 1024 · 1180 (lưới 4 cột) · 1280 · 1440. */

/* ==========================================================================
   1. Biến (tokens)
   ========================================================================== */
:root {
  color-scheme: light;
  /* Màu thương hiệu (Tuan Hub: index.html đổi theo settings.theme của từng shop, xem docs/NHIEU-SHOP.md).
     Không đổi theo chế độ tối: dùng cho chữ đặt trên ảnh, bóng, lớp phủ tối. Các biến màu bên dưới (--ink, --brass, --usp-bg,
     --sw-ring, --sh-*, --backdrop, --scrim-dark) ghi thẳng giá trị gốc; theme của shop ghi đè từng biến (index.html, themeCss). */
  --brand: #141B2D;           /* theme.ink */
  --brand-hover: #22304F;     /* nút chính khi rê chuột: vẫn đủ tương phản với chữ trắng */
  --brand-2: #2B3348;         /* chữ phụ đặt trên ảnh sáng */
  --brand-night: #1A2030;     /* nền chờ của ảnh tông tối */
  --brand-accent: #A87B3A;    /* theme.accent */
  --brand-rgb: 20, 27, 45;    /* = --brand, cho bóng, viền mờ */
  --deep-rgb: 14, 19, 32;     /* lớp phủ tối, nền mờ sau hộp thoại */
  /* Màu */
  --ink: #141B2D;          /* "Xanh than": chữ, nút chính, chip đã chọn */
  --paper: #FFFFFF;        /* "Sơ mi trắng": nền trang */
  --lining: #F2F3F6;       /* "Vải lót": nền ảnh, mảng phụ, nền ô nhập */
  --stone: #DCDFE6;        /* đường kẻ, viền chip */
  --muted: #596074;        /* chữ phụ (6.3:1 trên nền trắng) */
  --brass: #A87B3A;        /* "Cúc đồng": CHỈ cho hình (kim thước, vạch 10 cm, chấm gợi ý), không bao giờ cho chữ */
  --alert: #B42318;        /* "Còn 1", giảm giá thật, lỗi. Không dùng cho việc khác */
  --ok: #0F7A4D;           /* đã thêm vào giỏ, thành công */
  --on-ink: var(--paper);
  --ink-hover: #22304F;
  --scrim-light: linear-gradient(90deg, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 55%);
  --scrim-dark: linear-gradient(180deg, rgba(14, 19, 32, 0) 40%, rgba(14, 19, 32, .62) 100%);
  --backdrop: rgba(14, 19, 32, .52);
  --usp-bg: #141B2D;
  --usp-fg: #FFFFFF;
  --ftr-bg: var(--lining);
  --focus: var(--ink);
  --sw-ring: rgba(20, 27, 45, .18); /* viền trong của ô màu (tối: viền sáng, để ô đen/xanh than vẫn thấy) */

  /* Chữ */
  --f-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-hero: clamp(28px, 1.8vw + 22px, 56px);
  --t-h2: clamp(22px, 1vw + 18px, 34px);
  --t-h1-product: 22px;
  --t-price-lg: 24px;
  --t-price: 17px;
  --t-body: 15px;
  --t-ui: 15px;
  --t-small: 13px;
  --t-micro: 12px;
  --t-size: 18px;
  --t-tape: 11px;
  --lh-body: 1.55;

  /* Khoảng cách (bội 4) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --sp-32: 32px; --sp-40: 40px; --sp-56: 56px; --sp-72: 72px; --sp-96: 96px;
  --section-gap: var(--sp-40);

  /* Bo góc, bóng */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-round: 999px;
  --sh-1: 0 1px 2px rgba(20, 27, 45, .06);
  --sh-2: 0 10px 30px -12px rgba(20, 27, 45, .28);
  --sh-3: 0 24px 64px -20px rgba(10, 14, 26, .5);

  /* Chuyển động */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-fast: 150ms;
  --d-base: 240ms;
  --d-sheet: 320ms;

  /* Bố cục */
  --gutter: 16px;
  --maxw: 1320px;
  --usp-h: 32px;
  --hdr-h: 56px;
  --hdr-offset: var(--hdr-h); /* header.js đặt 0 khi đầu trang đang ẩn (cuộn xuống) */
  --hdr-bottom: calc(var(--usp-h) + var(--hdr-h)); /* mép dưới đầu trang trên màn hình (header.js cập nhật) */
  --bar-h: 0px; /* chiều cao thanh đáy đang hiện (giỏ / mua hàng); nút chat, toast, lên đầu trang nằm trên nó */
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --section-gap: var(--sp-56); }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 32px; --usp-h: 36px; --hdr-h: 68px; --section-gap: var(--sp-72);
    --t-h1-product: 28px; --t-price-lg: 28px; --t-body: 16px; --lh-body: 1.6;
  }
}
@media (min-width: 1440px) {
  :root { --gutter: 48px; --section-gap: var(--sp-96); }
}

/* Giao diện tối: theo máy (trừ khi chọn sáng) hoặc chọn tối */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECEEF3; --paper: #0E1320; --lining: #171D2C; --stone: #2A3247; --muted: #A4AABD;
    --brass: #D2A964; --alert: #FF8A7A; --ok: #4FD1A0;
    --on-ink: #0E1320; --ink-hover: #C9CEDA;
    --scrim-light: linear-gradient(90deg, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 55%);
    --backdrop: rgba(3, 5, 10, .66);
    --usp-bg: #171D2C; --usp-fg: #ECEEF3;
    --ftr-bg: #0B0F1A;
    --sw-ring: rgba(255, 255, 255, .32);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .7);
    --sh-3: 0 24px 64px -16px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEEF3; --paper: #0E1320; --lining: #171D2C; --stone: #2A3247; --muted: #A4AABD;
  --brass: #D2A964; --alert: #FF8A7A; --ok: #4FD1A0;
  --on-ink: #0E1320; --ink-hover: #C9CEDA;
  --backdrop: rgba(3, 5, 10, .66);
  --usp-bg: #171D2C; --usp-fg: #ECEEF3;
  --ftr-bg: #0B0F1A;
  --sw-ring: rgba(255, 255, 255, .32);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 12px 32px -12px rgba(0, 0, 0, .7);
  --sh-3: 0 24px 64px -16px rgba(0, 0, 0, .8);
}

/* ==========================================================================
   2. Nền tảng
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: clip; scroll-padding-top: calc(var(--hdr-h) + 12px);
  background: var(--paper);
}
html.dialog-open { overflow: hidden; scrollbar-gutter: stable; }
body {
  min-height: 100vh; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
input, select, textarea { font-size: 16px; } /* luôn 16px: iOS không phóng to khi chạm vào ô nhập */
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:where(dialog) { color: var(--ink); }
::selection { background: var(--ink); color: var(--on-ink); }

/* Vòng tiêu điểm bàn phím: mực, cách 2px. Trên ảnh/nền tối dùng .on-photo để vòng trắng. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-photo :focus-visible, :focus-visible.on-photo { outline-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(var(--deep-rgb), .55); }
#main:focus-visible, .grid-anchor:focus-visible { outline: none; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none;
}
.skip:focus, .skip:focus-visible { top: 12px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.noscript { padding: 24px var(--gutter); text-align: center; }

/* ==========================================================================
   3. Nguyên liệu dùng chung (primitives)
   ========================================================================== */
/* Khung nội dung: tối đa 1320px, lề theo bề rộng */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Khoảng giữa các khu: chỉ bằng margin giữa hai .section liền nhau */
.section + .section { margin-top: var(--section-gap); }
.section-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: var(--sp-20); }
.section-h > h2, .section-h__t {
  font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.01em;
}
.section-h__n { color: var(--muted); font-size: var(--t-small); }
.section-h__more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 44px;
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .section-h__more:hover { text-decoration: underline; } }

/* Chữ tiêu đề (Archivo giãn rộng) và chữ số (Archivo hẹp, số đều nhau) */
.display { font-family: var(--f-display); font-stretch: 118%; font-weight: 750; letter-spacing: -.01em; line-height: 1.12; }
.num { font-family: var(--f-display); font-stretch: 87.5%; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.muted { color: var(--muted); }

/* Nút: góc vuông vức may đo (r-sm), không bo tròn kiểu viên thuốc */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--lining); color: var(--ink);
  font: 600 var(--t-ui)/1.2 var(--f-body); text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
  user-select: none;
}
.btn svg { flex: none; }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--stone); }
.btn--link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .btn:not(:disabled):hover { background: var(--stone); }
  .btn--primary:not(:disabled):hover { background: var(--ink-hover); }
  .btn--ghost:not(:disabled):hover { background: transparent; border-color: var(--ink); }
  .btn--link:not(:disabled):hover { background: none; text-decoration-thickness: 2px; }
}
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--on-ink); border-right-color: transparent; animation: spin .7s linear infinite;
}
.btn--ghost.is-busy::after { border-color: var(--ink); border-right-color: transparent; }

/* Nút biểu tượng: luôn 44×44 */
.icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: var(--r-sm); color: inherit; background: transparent;
  transition: background-color var(--d-fast) var(--ease);
}
@media (hover: hover) { .icon-btn:hover { background: var(--lining); } }

/* Chip lọc / danh mục */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--stone); border-radius: var(--r-xs); background: var(--paper); color: var(--ink);
  font: 500 14px/1.2 var(--f-body); white-space: nowrap; text-decoration: none;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip__n { color: var(--muted); font-size: 13px; }
.chip[aria-pressed="true"] .chip__n, .chip[aria-current="page"] .chip__n { color: inherit; opacity: .75; }
@media (hover: hover) { .chip:not([aria-pressed="true"]):not([aria-current="page"]):hover { border-color: var(--ink); } }

/* Chip size: chữ size + số tương đương (size_map) + "còn N". Đã chọn = nền mực. Hết = gạch chéo + "Hết". */
.szchip {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 52px; min-height: 56px; padding: 6px 8px; border: 1px solid var(--stone); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); line-height: 1; text-align: center;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.szchip__l { font-family: var(--f-display); font-stretch: 87.5%; font-weight: 600; font-size: var(--t-size); line-height: 1; font-variant-numeric: tabular-nums; }
.szchip__num { font-size: 12px; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.szchip__left { font-size: 12px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.szchip--low .szchip__left { color: var(--alert); font-weight: 600; }
.szchip[aria-checked="true"], .szchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.szchip[aria-checked="true"] .szchip__num, .szchip[aria-checked="true"] .szchip__left,
.szchip[aria-pressed="true"] .szchip__num, .szchip[aria-pressed="true"] .szchip__left { color: inherit; opacity: .8; }
.szchip.is-out, .szchip[aria-disabled="true"] {
  color: var(--muted); background-color: var(--lining); border-color: var(--lining);
  background-image: linear-gradient(to top right, transparent calc(50% - .6px), var(--stone) calc(50% - .6px), var(--stone) calc(50% + .6px), transparent calc(50% + .6px));
}
.szchip.is-out .szchip__l, .szchip[aria-disabled="true"] .szchip__l { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.szchip--suggest::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 1.5px var(--paper);
}
@media (hover: hover) {
  .szchip:not(.is-out):not([aria-disabled="true"]):not([aria-checked="true"]):not([aria-pressed="true"]):hover { border-color: var(--ink); }
}

/* Ô màu tròn (util swatch()). Có mã màu thật thì tô; không có thì cắt giữa ảnh của màu đó (vải kẻ thấy đúng hoa văn). */
.swatch {
  position: relative; display: inline-block; flex: none; width: var(--sw-size, 20px); height: var(--sw-size, 20px);
  border-radius: 50%; overflow: hidden; background: var(--sw, var(--lining));
  box-shadow: inset 0 0 0 1px var(--sw-ring); vertical-align: middle;
}
/* Ảnh màu: phóng vào thân trước bên trái của áo (ảnh manơcanh 3:4, khoảng x 29–45%, y 45–57%: dưới ve áo, trên túi; tránh
   cúc, tem giá, tay áo, cổ manơcanh) để ô 20–24px đọc ra màu và hoa văn vải, không phải cả chiếc áo thu nhỏ. */
.swatch--img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(6.25); transform-origin: 35% 51.5%;
}
.swatch--none { background: var(--lining) linear-gradient(to top right, transparent 46%, var(--stone) 46% 54%, transparent 54%); }
.swatch[aria-pressed="true"], [aria-pressed="true"] > .swatch, [aria-checked="true"] > .swatch, .is-active > .swatch {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
}

/* Tab phân đoạn: 48px, tab đang chọn nền mực */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  border-radius: var(--r-sm); background: var(--lining);
}
.seg > button, .seg > a, .seg > label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 6px;
  color: var(--muted); font: 600 14px/1.25 var(--f-body); text-align: center; text-decoration: none;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.seg > [aria-selected="true"], .seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > [aria-current="page"] {
  background: var(--ink); color: var(--on-ink);
}
@media (hover: hover) { .seg > :not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-checked="true"]):hover { color: var(--ink); } }

/* Dải cuộn ngang (CSS scroll-snap): 2.2 / 3.2 / 4 thẻ một lần nhìn, không mũi tên trên màn cảm ứng */
.rail {
  --rail-n: 2.2; --rail-gap: 12px;
  display: grid; grid-auto-flow: column; gap: var(--rail-gap);
  grid-auto-columns: calc((100% - (var(--rail-n) - 1) * var(--rail-gap)) / var(--rail-n));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .rail { --rail-n: 3.2; --rail-gap: 16px; } }
@media (min-width: 1024px) { .rail { --rail-n: 4; --rail-gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

/* Đường dẫn (breadcrumb): một dòng, phần giữa rút gọn */
.crumbs { font-size: var(--t-small); color: var(--muted); min-width: 0; }
.crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "/"; padding: 0 8px; color: var(--stone); }
.crumbs li:not(:first-child):not(:last-child) { flex-shrink: 1; overflow: hidden; }
.crumbs a, .crumbs span { display: inline-block; overflow: hidden; text-overflow: ellipsis; min-height: 32px; line-height: 32px; color: var(--muted); text-decoration: none; }
.crumbs li:last-child > * { color: var(--ink); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); text-decoration: underline; } }

/* Nhãn giảm giá (chỉ khi old_price > price thật) */
.badge-sale {
  display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px;
  background: var(--alert); color: #FFFFFF; font-family: var(--f-display); font-stretch: 87.5%; font-weight: 700;
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .badge-sale { color: #2A0905; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-sale { color: #2A0905; } }

/* "Ảnh minh hoạ" trên mọi ảnh AI (hero, banner, ô danh mục). Khung chứa cần position: relative. */
.ai-cap {
  position: absolute; right: 12px; bottom: 10px; z-index: 1; pointer-events: none; white-space: nowrap;
  /* Chip nền tối đặc: chữ trắng đạt ≥ 4.5:1 trên mọi vùng ảnh (sáng hay tối). Đây là ghi chú trung thực, phải đọc được. */
  display: inline-block; padding: 2px 7px; border-radius: 4px; background: rgba(var(--deep-rgb), .66); color: #FFFFFF;
  font-size: var(--t-micro); line-height: 1.35; font-weight: 500; text-shadow: none;
}
.ai-cap--light { background: rgba(var(--deep-rgb), .66); color: #FFFFFF; text-shadow: none; }
.ai-cap--static { position: static; text-shadow: none; color: var(--muted); }

/* Ô nhập: luôn 16px, cao 48px */
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  display: block; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--stone); border-radius: var(--r-xs);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.4;
  transition: border-color var(--d-fast) var(--ease);
  appearance: none; -webkit-appearance: none;
}
textarea.input, .field textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.input, .field select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.input::placeholder, .field ::placeholder { color: var(--muted); opacity: 1; }
/* Trạng thái phải mạnh hơn quy tắc gốc (.field input:not(...):not(...) = 0,3,1), không thì viền đỏ không hiện. */
.input:focus, .field input:not([type="checkbox"]):not([type="radio"]):focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.input[aria-invalid="true"], .field input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"],
.field select[aria-invalid="true"], .field textarea[aria-invalid="true"], .field [aria-invalid="true"] { border-color: var(--alert); }
.input[aria-invalid="true"]:focus, .field input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field__hint { font-size: var(--t-small); color: var(--muted); }
.field__err { font-size: var(--t-small); color: var(--alert); font-weight: 500; }

/* Mục gập (details/summary) */
.accordion { border-bottom: 1px solid var(--stone); }
.accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0;
  font-weight: 600; font-size: 15px; list-style: none; cursor: pointer;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after, .ftr-group > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--d-base) var(--ease);
}
.accordion[open] > summary::after, .ftr-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.accordion__body { padding-bottom: var(--sp-20); }

/* Khung chờ: cùng cỡ phần thật */
.skel { background-color: var(--lining); animation: skel-pulse 1.4s ease-in-out infinite; }

/* ==========================================================================
   4. Hộp thoại (sheet) — overlay.js makeSheet(): 'bottom' | 'drawer' | 'drawer-right' | 'center' | 'full' | 'top'
   ========================================================================== */
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; padding: 0; border: 0;
  width: 100%; max-width: none; max-height: calc(100dvh - 24px); height: auto;
  background: var(--paper); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3);
  overflow: hidden; overscroll-behavior: contain;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-up var(--d-sheet) var(--ease); }
.sheet::backdrop { background: var(--backdrop); animation: fade var(--d-sheet) var(--ease); }
.sheet.is-closing { animation: sheet-down 180ms var(--ease) forwards; }
.sheet.is-closing::backdrop { animation: fade-out 180ms var(--ease) forwards; }
.sheet-in {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 60px;
  padding: 8px 8px 8px var(--sp-20); background: var(--paper); border-bottom: 1px solid var(--stone);
}
.sheet-title {
  flex: 1 1 auto; min-width: 0; font-family: var(--f-display); font-stretch: 106%; font-weight: 700;
  font-size: 19px; line-height: 1.3; letter-spacing: -.005em;
}
.sheet-body { flex: 1 0 auto; padding: var(--sp-20); }
.sheet-foot {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px var(--sp-20) calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--stone);
}
.sheet-foot > .btn { flex: 1 1 auto; }
/* Thông báo nhỏ bên trong hộp thoại (hộp thoại che mọi thứ khác): neo vào chính hộp (ngăn kéo giỏ hàng trên máy tính,
   tấm đáy trên điện thoại), ngay trên chân hộp. --toast-b: util.js toast() đo chiều cao chân hộp lúc hiện. */
.sheet .toast-host {
  position: absolute; left: 12px; right: 12px; bottom: var(--toast-b, calc(16px + env(safe-area-inset-bottom))); z-index: 5;
  display: grid; justify-items: center; gap: 8px; pointer-events: none;
}

/* bottom: đáy màn hình mọi bề rộng; từ 768 rộng tối đa 560 ở giữa */
@media (min-width: 768px) {
  .sheet--bottom { width: min(560px, 100%); }
  .sheet--drawer { width: min(640px, 100%); }
}
/* drawer: đáy màn hình dưới 1024, ngăn kéo bên phải từ 1024 */
@media (min-width: 1024px) {
  .sheet--drawer {
    inset: 0 0 0 auto; margin: 0; width: min(var(--sheet-w, 440px), 100vw); height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  .sheet--drawer[open] { animation-name: drawer-in; }
  .sheet--drawer.is-closing { animation-name: drawer-out; }
}
/* drawer-right: ngăn kéo bên phải ở mọi bề rộng (menu) */
.sheet--drawer-right {
  inset: 0 0 0 auto; margin: 0; width: min(86vw, var(--sheet-w, 360px)); height: 100dvh; max-height: 100dvh; border-radius: 0;
}
.sheet--drawer-right[open] { animation-name: drawer-in; }
.sheet--drawer-right.is-closing { animation-name: drawer-out; }
/* center: đáy màn hình dưới 768, hộp giữa màn hình 480px từ 768 */
@media (min-width: 768px) {
  .sheet--center {
    inset: 0; margin: auto; width: min(var(--sheet-w, 480px), calc(100vw - 48px)); height: fit-content;
    max-height: calc(100dvh - 48px); border-radius: var(--r-lg);
  }
  .sheet--center[open] { animation-name: pop; }
  .sheet--center.is-closing { animation-name: pop-out; }
}
/* full: toàn màn hình (xem ảnh lớn) */
.sheet--full { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
.sheet--full[open] { animation-name: fade; }
.sheet--full.is-closing { animation-name: fade-out; }
/* top: tìm kiếm toàn màn hình trên điện thoại; từ 1024 là bảng thả xuống 720px ngay dưới đầu trang */
.sheet--top { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.sheet--top[open] { animation-name: fade; }
.sheet--top.is-closing { animation-name: fade-out; }
@media (min-width: 1024px) {
  .sheet--top {
    inset: var(--hdr-bottom) 0 auto 0; margin: 0 auto; width: min(720px, calc(100vw - 48px)); height: auto;
    max-height: min(72vh, calc(100dvh - var(--hdr-bottom) - 24px)); border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .sheet--top[open] { animation-name: drop; }
  .sheet--top::backdrop { background: rgba(var(--deep-rgb), .28); }
}
/* Bề rộng riêng của từng ngăn kéo */
.sheet--cart { --sheet-w: 440px; }
.sheet--reco, .sheet--size { --sheet-w: 480px; }
.sheet--policy { --sheet-w: 560px; }
.sheet--drawer-nav { --sheet-w: 360px; }

/* ==========================================================================
   5. Dải ưu đãi (USP), đầu trang, menu
   ========================================================================== */
.usp { background: var(--usp-bg); color: var(--usp-fg); }
.usp-in { position: relative; display: flex; align-items: center; justify-content: center; height: var(--usp-h); overflow: hidden; white-space: nowrap; }
.usp-item {
  display: inline-flex; align-items: center; min-height: var(--usp-h); padding: 0 6px; color: inherit;
  font: 600 13px/1.2 var(--f-body); white-space: nowrap; text-decoration: none;
}
.usp-item.is-on { animation: usp-in 420ms var(--ease); }
/* Dòng chưa tới lượt (và dòng thứ hai trên điện thoại): ẩn khỏi mắt nhưng vẫn nằm trong thứ tự tab và trình đọc màn hình đọc
   đủ 4 ưu đãi. Tab tới dòng nào thì header.js hiện trang có dòng đó. */
.usp-item:not(.is-on), .usp-item.is-on ~ .usp-item.is-on {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%);
}
.usp-item--notice { font-weight: 600; }
/* Vòng tiêu điểm: màu chữ của dải (trắng trên nền mực), vẽ vào trong vì dải cắt phần tràn. */
.usp-item:focus-visible { outline: 2px solid var(--usp-fg); outline-offset: -4px; border-radius: 4px; }
@media (hover: hover) { .usp-item:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Màn cảm ứng: dải cao 44px để mỗi dòng là một vùng chạm đủ lớn. */
@media (pointer: coarse) { :root { --usp-h: 44px; } }
@media (min-width: 768px) {
  .usp-item.is-on ~ .usp-item.is-on { position: static; width: auto; height: auto; min-height: var(--usp-h); padding: 0 6px; overflow: visible; clip-path: none; }
  .usp-item.is-on ~ .usp-item.is-on::before { content: "·"; padding: 0 12px 0 6px; opacity: .7; }
}
@media (min-width: 1024px) {
  .usp:not(.has-notice) .usp-item { position: static; width: auto; height: auto; min-height: var(--usp-h); padding: 0 6px; overflow: visible; clip-path: none; animation: none; }
  .usp:not(.has-notice) .usp-item ~ .usp-item::before { content: "·"; padding: 0 14px 0 8px; opacity: .7; }
}

.hdr {
  position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--stone);
  transition: transform 280ms var(--ease);
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr-in { display: flex; align-items: center; gap: 16px; height: var(--hdr-h); }
.hdr-brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; color: var(--ink); text-decoration: none; }
.wm { display: block; width: auto; height: 26px; color: currentColor; }
.wm-tick { fill: var(--brass); }
.wm-rule { fill: var(--stone); }
@media (min-width: 1024px) { .hdr-brand .wm { height: 31px; } }
/* Logo riêng của shop (Tuan Hub, index.html: settings.theme.logo) hoặc logo chữ = tên shop khi chưa có logo.
   Cao cố định, rộng theo tỉ lệ ảnh (đã nhớ từ lần trước nên không nhảy menu); tên dài / logo rộng thì co lại, không tràn ngang. */
.hdr-brand.is-own, .ftr-logo.is-own { min-width: 0; max-width: 100%; }
.hdr-brand.is-own { flex: 0 1 auto; }
.ftr-logo.is-own { text-decoration: none; }
.wm--logo { height: 36px; width: auto; max-width: min(100%, 180px); object-fit: contain; object-position: left center; }
.wm--text {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(100%, 340px); height: auto;
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 19px; line-height: 1.3;
  letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}
.wm--text::before { content: ""; flex: none; width: 5px; height: .95em; border-radius: 1px; background: var(--brass); }
.wm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .hdr-brand .wm--logo { height: 44px; max-width: min(100%, 240px); }
  .hdr-brand .wm--text { font-size: 23px; height: auto; }
}
.ftr-logo .wm--logo { height: 44px; max-width: min(100%, 220px); }
.ftr-logo .wm--text { font-size: 22px; }
/* Lần đầu mở web của một shop (chưa nhớ giao diện): ẩn logo (vẫn giữ chỗ) tới khi biết shop, tối đa 2 giây. */
html.brand-wait .hdr-brand > *, html.brand-wait .ftr-logo > * { visibility: hidden; }

.nav { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav-list { display: flex; align-items: center; gap: 0 28px; margin: 0; padding: 6px 4px; list-style: none; white-space: nowrap; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  color: var(--ink); font: 500 15px/1 var(--f-body); text-decoration: none; white-space: nowrap; background: none;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform 200ms var(--ease);
}
.nav-link:focus-visible::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover::after { transform: scaleX(1); } }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); flex: none; }

.hdr-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.hdr-text {
  display: none; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink);
  font: 500 15px/1 var(--f-body); white-space: nowrap;
}
.hdr-search { display: none; position: relative; align-items: center; width: 280px; margin-right: 6px; }
.hdr-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hdr-search-input {
  width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--lining); border-radius: var(--r-xs);
  background: var(--lining); color: var(--ink); font-size: 16px; appearance: none; -webkit-appearance: none;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.hdr-search-input::placeholder { color: var(--muted); opacity: 1; }
.hdr-search-input:focus { border-color: var(--ink); background: var(--paper); }
.hdr-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hdr-cart { color: var(--ink); }
.cart-count {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; overflow: hidden;
  border-radius: var(--r-round); background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2px var(--paper);
  font-family: var(--f-display); font-stretch: 87.5%; font-weight: 700; font-size: 11px; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.cart-count__n { display: block; }
.cart-count__n.is-in { animation: odo-in 300ms var(--ease); }
.cart-count__n.is-out { position: absolute; inset: 0; animation: odo-out 300ms var(--ease) forwards; }

@media (min-width: 768px) and (max-width: 1023.98px) { .hdr-text { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav { display: block; }
  .hdr-in { gap: 32px; }
  .hdr-menu { display: none; }
  .hdr.nav-collapsed .nav { display: none; }
  .hdr.nav-collapsed .hdr-menu { display: inline-grid; }
}
@media (min-width: 1280px) {
  .hdr-search { display: flex; }
  .hdr-search-btn { display: none; }
}

/* Menu (ngăn kéo bên phải): danh mục, liên kết, nhắn shop */
.drawer-nav { display: grid; }
.drawer-sec { padding: 8px 0; border-bottom: 1px solid var(--stone); }
.drawer-sec:last-child { border-bottom: 0; }
.drawer-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px 0 17px;
  border-left: 3px solid transparent; color: var(--ink); font: 500 16px/1.3 var(--f-body); text-decoration: none; text-align: left;
}
.drawer-row[aria-current="page"], .drawer-row.is-current { border-left-color: var(--ink); font-weight: 600; }
.drawer-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.drawer-row__meta { flex: none; display: inline-flex; align-items: center; color: var(--muted); font-size: var(--t-small); font-weight: 400; white-space: nowrap; }
.drawer-row__chev { flex: none; color: var(--muted); }
.drawer-policies { border-bottom: 0; }
.drawer-policies > summary.drawer-row { min-height: 56px; padding: 0 20px 0 17px; }
.drawer-policies .ftr-list { padding: 0 20px 8px; }
@media (hover: hover) { .drawer-row:hover { background: var(--lining); } }
.drawer-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 20px 8px; }
.drawer-contact .btn { flex-direction: column; min-height: 60px; padding: 6px 4px; gap: 4px; font-size: 13px; line-height: 1.2; }
.drawer-fanpage { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 20px 16px; color: var(--ink); font-size: 14px; }

/* Dải "Đang live trên Facebook" */
.live-strip { background: var(--lining); border-bottom: 1px solid var(--stone); }
.live-strip__in { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.live-strip__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); }
.live-strip__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--alert); animation: live-ping 2s ease-out infinite; }
.live-strip__t { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-strip__go { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
html[data-view="home"].is-live .live-strip { display: none; }

/* ==========================================================================
   6. Khung chờ lúc tải, trang 404, lỗi tải
   ========================================================================== */
.view { display: block; }
/* Phần thân luôn cao ít nhất một màn hình: chân trang không bao giờ vẽ trong màn hình đầu lúc đang tải rồi bị đẩy xuống
   (nhảy bố cục), kể cả trang ngắn (404, danh mục trống). */
#main { min-height: calc(100svh - var(--usp-h) - var(--hdr-h)); }
.boot-skel { padding-bottom: var(--sp-40); }
.boot-hero { width: 100%; aspect-ratio: 4 / 5; max-height: var(--hero-max-m, none); }
/* Điện thoại thấp (360×740, SE): ảnh đầu trang 4:5 thấp lại vừa đủ để hàng chip size của khung chọn size vẫn nằm trong
   màn hình đầu, kể cả khi thanh giỏ 64px đang hiện. Dùng chung cho .hero-media (shop-home.css). */
@media (max-width: 767.98px) { :root { --hero-max-m: max(300px, calc(100svh - 306px - var(--usp-h))); } }
/* Điện thoại: ảnh đầu trang thấp lại thì cắt phần chân (vỉa hè), giữ phần đầu, để mặt người mẫu không nằm dưới chữ
   (kể cả khi vào trang chủ từ trang khác, lúc ảnh dựng lại bằng home.js). Dòng "Xem vest đang có" ẩn trên điện thoại:
   khung chọn size ngay dưới ảnh là việc chính, lưới hàng ở ngay sau đó. */
@media (max-width: 767.98px) {
  .hero > .hero-media .hero-pic { --pos-m: 50% 0% !important; }
  .hero .hero-cta { display: none; }
}
.boot-size-wrap { position: relative; margin-top: -40px; }
.boot-size { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-2); }
.boot-size > i { display: block; height: 22px; width: 52%; border-radius: 6px; }
.boot-size > i:nth-child(2) { height: 52px; width: 100%; border-radius: var(--r-sm); }
.boot-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.boot-chips i { display: block; height: 56px; border-radius: var(--r-sm); }
/* Danh mục / tìm kiếm: đầu trang (đường dẫn, tiêu đề, số mẫu), thanh size 64, chip danh mục 48, thanh lọc 56 (shop-collection.css). */
.boot-head { display: none; grid-template-rows: 44px 42px 26px; align-items: center; padding-top: 12px; }
.boot-head i { display: block; height: 14px; width: 30%; border-radius: 4px; }
.boot-head i:nth-child(2) { align-self: end; height: 28px; width: 60%; margin-bottom: 2px; border-radius: 6px; }
.boot-head i:nth-child(3) { align-self: end; height: 13px; width: 45%; margin-bottom: 4px; }
@media (pointer: fine) { .boot-head { grid-template-rows: 32px 42px 26px; } }
.boot-bars { display: none; gap: 16px; padding-top: 16px; }
.boot-bars i { display: block; height: 64px; border-radius: var(--r-md); }
.boot-bars i:nth-child(2) { height: 48px; width: min(100%, 420px); border-radius: var(--r-sm); }
.boot-bars i:nth-child(3) { height: 56px; border-radius: var(--r-sm); }
.boot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin-top: var(--sp-40); }
.boot-card__media { aspect-ratio: 4 / 5; border-radius: var(--r-sm); }
.boot-card i { display: block; height: 13px; margin-top: 10px; border-radius: 4px; width: 55%; }
.boot-card i + i { width: 90%; height: 16px; }
.boot-card i + i + i { width: 45%; height: 18px; }
.boot-pd { display: none; }
.boot-pd__media { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--gutter)); }
.boot-pd__info { display: grid; gap: 12px; padding-top: 16px; }
.boot-pd__info i { display: block; height: 14px; width: 40%; border-radius: 4px; }
.boot-pd__info i:nth-child(2) { height: 26px; width: 85%; }
.boot-pd__info i:nth-child(3) { height: 28px; width: 50%; }
.boot-pd__info i:nth-child(4) { height: 56px; width: 100%; border-radius: var(--r-sm); }
html[data-boot="grid"] .boot-hero, html[data-boot="grid"] .boot-size-wrap,
html[data-boot="product"] .boot-hero, html[data-boot="product"] .boot-size-wrap,
html[data-boot="product"] .boot-head, html[data-boot="product"] .boot-bars, html[data-boot="product"] .boot-grid { display: none; }
html[data-boot="grid"] .boot-head, html[data-boot="grid"] .boot-bars { display: grid; }
html[data-boot="grid"] .boot-grid { margin-top: 12px; }
html:not([data-boot="grid"]) .boot-card:nth-child(n+5) { display: none; }
html[data-boot="product"] .boot-pd { display: block; }
html.is-live[data-boot="home"] .boot-hero { display: none; }
@media (min-width: 768px) {
  .boot-hero { aspect-ratio: 16 / 9; }
  .boot-size-wrap { margin-top: -48px; }
  .boot-size { padding: 24px; }
  .boot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .boot-pd { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  html[data-boot="product"] .boot-pd { display: grid; }
  .boot-pd__media { margin-inline: 0; border-radius: var(--r-sm); }
}
@media (min-width: 1024px) {
  .boot-head { grid-template-rows: 32px 54px; padding-top: 24px; }
  .boot-head i:nth-child(2) { height: 38px; width: 36%; margin-bottom: 0; }
  .boot-head i:nth-child(3) { display: none; }
  .boot-hero { aspect-ratio: auto; height: min(42.86vw, 78svh); }
  .boot-size-wrap { margin-top: -64px; }
  .boot-size { padding: 32px; }
  .boot-pd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
}
@media (min-width: 1180px) { .boot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } }

.nf { display: grid; justify-items: center; gap: 14px; padding-block: var(--sp-72); text-align: center; }
.nf-code { font-size: 56px; line-height: 1; color: var(--stone); }
.nf-title { font-size: var(--t-h2); }
.nf-sub { max-width: 46ch; color: var(--muted); }
.nf-search { display: flex; gap: 8px; width: min(480px, 100%); margin-top: 8px; }
.nf-search .input { flex: 1 1 auto; min-width: 0; }
.nf-act { margin-top: 4px; }
.boot-error { display: grid; justify-items: start; gap: 12px; padding-block: var(--sp-56); }
.boot-error__t { font-family: var(--f-display); font-stretch: 108%; font-size: var(--t-h2); }

/* ==========================================================================
   7. Chân trang
   ========================================================================== */
.ftr {
  margin-top: var(--section-gap); padding: var(--sp-40) 0 calc(var(--sp-24) + 56px + var(--bar-h) + env(safe-area-inset-bottom));
  background: var(--ftr-bg); color: var(--ink);
}
.ftr-in { display: grid; grid-template-columns: minmax(0, 1fr); }
.ftr-brand { padding-bottom: var(--sp-24); }
.ftr-logo { display: inline-flex; color: var(--ink); min-height: 44px; align-items: center; }
.ftr-logo .wm--v { height: 30px; }
.ftr-logo .wm--h { display: none; height: 22px; }
.ftr-tag { margin-top: 10px; max-width: 34ch; color: var(--muted); font-size: 14px; }
.ftr-group { border-top: 1px solid var(--stone); }
.ftr-group:last-of-type { border-bottom: 1px solid var(--stone); }
.ftr-group > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  font: 600 15px/1.3 var(--f-body); list-style: none; cursor: pointer;
}
.ftr-group > summary::-webkit-details-marker { display: none; }
.ftr-group[data-static] > summary { cursor: default; pointer-events: none; }
.ftr-group[data-static] > summary::after { display: none; }
.ftr-list { display: grid; gap: 0; margin: 0; padding: 0 0 14px; list-style: none; }
.ftr-list a, .ftr-list button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 15px;
  text-decoration: none; text-align: left;
}
.ftr-list svg { flex: none; color: var(--muted); }
@media (hover: hover) { .ftr-list a:hover, .ftr-list button:hover { text-decoration: underline; } }
.ftr-base { position: relative; display: grid; gap: 10px; margin-top: var(--sp-24); font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.ftr-pay { color: var(--ink); font-weight: 500; }
.ftr-seller { display: grid; gap: 2px; font-style: normal; }
.ftr-seller-name { color: var(--ink); font-weight: 600; }
.ftr-seller a { color: inherit; }
@media (pointer: coarse) { .ftr-seller a { display: inline-flex; align-items: center; min-height: 44px; } }
.ftr-copy { padding-top: 6px; }
@media (min-width: 768px) {
  .ftr { padding-top: var(--sp-56); }
  .ftr-in { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-32); }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-group, .ftr-group:last-of-type { border: 0; }
  .ftr-group > summary { min-height: 40px; }
  .ftr-base { padding-top: var(--sp-20); }
  .ftr-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--stone); }
}
@media (min-width: 1024px) {
  .ftr-in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .ftr-brand { grid-column: auto; padding-bottom: 0; }
  .ftr-logo .wm--v { display: none; }
  .ftr-logo .wm--h { display: block; }
  .ftr-base { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-32); align-items: end; }
  .ftr-pay, .ftr-seller { grid-column: 1; }
  .ftr-copy { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* ==========================================================================
   8. Thanh giỏ, nút chat, lên đầu trang, thông báo nhỏ
   ========================================================================== */
.cartbar {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--stone); box-shadow: 0 -10px 24px -18px rgba(var(--brand-rgb), .35);
}
.cartbar-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
  border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font: 600 15px/1.2 var(--f-body);
}
.cartbar-info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cartbar-n { white-space: nowrap; }
.cartbar-sum { font-family: var(--f-display); font-stretch: 87.5%; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartbar-go { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cartbar-go::after { content: "›"; font-size: 20px; line-height: 1; }
@media (hover: hover) { .cartbar-btn:hover { background: var(--ink-hover); } }
@media (max-width: 1023.98px) {
  :root:not([data-view="product"]):has(#cartbar:not([hidden])) { --bar-h: 64px; }
}
/* Trang sản phẩm có thanh mua riêng (điện thoại) và cột thông tin dính (máy tính): không hiện thanh giỏ đè lên. */
html[data-view="product"] .cartbar { display: none; }
/* Máy tính: không có thanh giỏ nổi (nó che cột thẻ thứ tư). Nút giỏ trên đầu trang có số món, thêm hàng có thông báo. */
@media (min-width: 1024px) { .cartbar { display: none; } }
/* Trang /live trên điện thoại: thanh "Chốt ngay" đang dính đáy thì nó là thanh đáy duy nhất (số món giỏ nằm trong thanh đó). */
@media (max-width: 899.98px) {
  body.lv-stuck .cartbar { display: none; }
  :root:not([data-view="product"]):has(body.lv-stuck):has(#cartbar:not([hidden])) { --bar-h: 0px; }
}

/* Nút nổi: chat góc phải, lên đầu trang góc trái, cùng cách mép 16px và cùng đáy (trên thanh đáy nếu có).
   Chân trang chừa sẵn 80px ở đáy nên hai nút không bao giờ che chữ chân trang. */
.fab {
  position: fixed; z-index: 24; right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + var(--bar-h) + env(safe-area-inset-bottom));
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility 0s linear 0s;
}
.fab.is-away { opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, var(--d-base); }
.fab-btn {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-2);
  transition: background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
@media (hover: hover) { .fab-btn:hover { background: var(--ink-hover); } }
.fab-btn:active { transform: scale(.96); }
html.dialog-open .fab, html.dialog-open .fab-top { display: none; }
/* Trang sản phẩm: không có nút chat nổi ở mọi bề rộng (không che nút mua, ô tin cậy); "Hỏi shop về mẫu này" nằm trong cột thông tin. */
html[data-view="product"] .fab { display: none; }
@media (min-width: 1024px) { .fab-btn { width: 56px; height: 56px; } }
.fab-top {
  position: fixed; z-index: 23; left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + var(--bar-h) + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 1px solid var(--stone); box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility 0s linear var(--d-base);
}
.fab-top.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }

/* Danh sách kênh nhắn shop (chat.js) */
.chat-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chat-link {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--stone);
  border-radius: var(--r-sm); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600;
}
.chat-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lining); color: var(--ink); }
.chat-txt { display: grid; gap: 1px; min-width: 0; font-size: 15px; line-height: 1.3; }
.chat-txt small { color: var(--muted); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .chat-link:hover { border-color: var(--ink); } }
.chat-help { display: grid; gap: 8px; }
.chat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-row .btn { flex: 1 1 140px; }
.chat-sheet-sub { margin-bottom: 14px; color: var(--muted); font-size: 14px; }

/* Thông báo nhỏ: đáy (trên thanh đáy) ở điện thoại, góc phải dưới ở máy tính bảng, góc phải trên ở máy tính */
.toasts {
  position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(12px + var(--bar-h) + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; min-height: 48px; padding: 8px 8px 8px 16px;
  border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-2);
  font: 500 14px/1.4 var(--f-body); pointer-events: auto; animation: toast-in var(--d-base) var(--ease);
}
.toast-msg { flex: 1 1 auto; min-width: 0; padding-block: 6px; }
.toast--warn { border-left: 4px solid var(--alert); }
.toast--ok { border-left: 4px solid var(--ok); }
.toast-act {
  flex: none; min-height: 44px; padding: 0 10px; border-radius: var(--r-xs); color: inherit;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.toast .toast-x { width: 40px; height: 40px; color: inherit; }
@media (pointer: coarse) { .toast .toast-x { width: 44px; height: 44px; } }
@media (hover: hover) { .toast .toast-x:hover { background: rgba(255, 255, 255, .12); } }
.toast--rich { align-items: flex-start; background: var(--paper); color: var(--ink); border: 1px solid var(--stone); padding: 12px 6px 12px 12px; }
.toast--rich > :first-child { flex: 1 1 auto; min-width: 0; }
@media (hover: hover) { .toast--rich .toast-x:hover { background: var(--lining); } }
/* Trang sản phẩm trên điện thoại: "Đã thêm vào giỏ" gọn một dòng (ảnh nhỏ, chữ xác nhận, size · màu, nút xem giỏ), cao ~64px,
   nằm ngay dưới đầu trang (đè lên ảnh), không che tên, giá, size và thanh mua ở nửa dưới. Thanh mua cũng tự đổi thành "✓ Đã thêm". */
@media (max-width: 767.98px) {
  html[data-view="product"] .toasts { top: calc(var(--hdr-bottom) + 8px); bottom: auto; }
  html[data-view="product"] .toasts .toast.cart-toast-box { align-items: center; padding: 8px 4px 8px 8px; animation-name: toast-down; }
  html[data-view="product"] .toasts .cart-toast { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
  html[data-view="product"] .toasts .cart-toast-thumb { width: 36px; }
  html[data-view="product"] .toasts .cart-toast-main { padding-right: 0; }
  html[data-view="product"] .toasts .cart-toast-ok { margin-bottom: 0 !important; white-space: nowrap; }
  html[data-view="product"] .toasts .cart-toast-name, html[data-view="product"] .toasts .cart-toast-price { display: none; }
  html[data-view="product"] .toasts .cart-toast-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-view="product"] .toasts .cart-toast-go { grid-column: auto; width: auto; margin: 0; min-height: 44px; padding: 0 10px; font-size: 13px; }
  html[data-view="product"] .toasts .cart-toast-go svg { display: none; }
}
@media (min-width: 768px) {
  .toasts { left: auto; right: var(--gutter); width: 360px; justify-items: stretch; }
}
@media (min-width: 1024px) {
  .toasts { top: calc(var(--hdr-bottom) + 12px); bottom: auto; width: 340px; }
}

/* ==========================================================================
   9. Trang chính sách (policy.js)
   ========================================================================== */
.policy-body { display: grid; gap: var(--sp-20); }
.policy { display: grid; gap: 12px; max-width: 68ch; font-size: 15px; line-height: 1.65; }
.policy p { white-space: pre-line; }
.policy-h { margin-top: 8px; font-family: var(--f-display); font-stretch: 104%; font-size: 17px; line-height: 1.3; }
ul.policy-list { display: grid; gap: 6px; padding-left: 20px; list-style: disc; } /* ul. để thắng ul[class] { list-style: none } */
.policy-list li::marker { color: var(--muted); }
.policy-updated { font-size: var(--t-small); color: var(--muted); }
.policy--after { padding-top: var(--sp-16); border-top: 1px solid var(--stone); }
.policy-seller { display: grid; gap: 0; margin: 0; }
.policy-seller .spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--stone); }
.policy-seller dt { font-size: var(--t-small); color: var(--muted); }
.policy-seller dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) { .policy-seller .spec { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; } }
.policy-more { padding-top: var(--sp-16); border-top: 1px solid var(--stone); }
.policy-more-h { font-size: var(--t-small); font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.policy-more ul { display: grid; margin: 0; padding: 0; list-style: none; }
.policy-more-link { display: flex; align-items: center; min-height: 44px; color: var(--ink); }

/* ==========================================================================
   10. Trang /live: khung LIVE phía trên trang chủ (shop/live.js)
   html.is-live do index.html đặt sớm. Chỉ hiện ở trang chủ của phiên live (không hiện ở trang sản phẩm, danh mục).
   ========================================================================== */
.live { display: none; background: var(--paper); border-bottom: 1px solid var(--stone); }
html.is-live:not([data-view]) .live, html.is-live[data-view="home"] .live { display: block; }
.live[data-state="retry"] .lv-skel { display: none; }
.live-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 16px 20px; }
.lv-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.lv-badge {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-xs);
  background: var(--alert); color: #FFFFFF; font: 700 12px/1 var(--f-body); letter-spacing: .06em;
}
:root[data-theme="dark"] .lv-badge:not(.is-off):not(.is-wait) { color: #2A0905; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lv-badge:not(.is-off):not(.is-wait) { color: #2A0905; } }
.lv-badge.is-off, .lv-badge.is-wait { background: var(--lining); color: var(--muted); }
.lv-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.lv-badge:not(.is-off):not(.is-wait) .lv-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; animation: live-ping 2s ease-out infinite;
}
.lv-title { font-family: var(--f-display); font-stretch: 110%; font-weight: 700; font-size: clamp(22px, 6vw, 32px); line-height: 1.12; letter-spacing: -.01em; min-width: 0; }
.lv-note { color: var(--muted); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.lv-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.lv-code-box {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 3px 3px 3px 12px;
  border: 1px solid var(--stone); border-radius: var(--r-sm); background: var(--lining);
}
.lv-code-k { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lv-code-v { font-size: 18px; letter-spacing: .02em; color: var(--ink); min-width: 0; }
.lv-copy { flex: none; min-height: 40px; padding: 0 12px; background: var(--paper); }
.lv-code-hint { flex: 1 1 90px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.lv-stale { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lv-stale svg { flex: none; }
.lv-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.lv-skel { min-height: 470px; border-radius: var(--r-lg); }
.lv-all { display: flex; justify-content: center; }
.lv-all .btn--link { gap: 6px; }
.lv-idle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--stone); border-radius: var(--r-md); background: var(--lining); }
.lv-idle-txt { display: grid; gap: 2px; min-width: 0; }
.lv-idle-t { font-family: var(--f-display); font-stretch: 106%; font-size: 18px; line-height: 1.25; }
.lv-idle .note { color: var(--muted); font-size: 14px; }
.lv-feat {
  position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  grid-template-areas: "media id" "opts opts" "dock dock"; gap: 14px; padding: 12px 12px 0;
  background: var(--paper); border: 1px solid var(--stone); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.lv-feat.is-new { animation: lv-flash 2.4s ease-out; }
.lv-feat--gone { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 6px; padding: 18px; box-shadow: none; }
.lv-gone-t { font-family: var(--f-display); font-stretch: 106%; font-size: 20px; line-height: 1.25; }
.lv-media {
  grid-area: media; position: relative; align-self: start; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0;
  border-radius: var(--r-sm); overflow: hidden; background: var(--lining);
}
.lv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 200ms ease; }
.lv-media img.is-loaded { opacity: 1; }
.lv-feat-id { grid-area: id; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv-eyebrow { font-size: 12px; font-weight: 600; color: var(--muted); }
.lv-feat-code { margin-top: 2px; font-size: clamp(30px, 10vw, 44px); line-height: 1; color: var(--ink); }
.lv-feat-name { font: 500 14px/1.35 var(--f-body); min-height: 2.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; }
.lv-price .price { font-family: var(--f-display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.lv-price .old, .lv-item .old { font-size: 13px; color: var(--muted); }
.lv-low { color: var(--alert); font-weight: 600; font-size: 13px; }
.lv-detail { align-self: flex-start; gap: 6px; margin-top: auto; font-size: 14px; }
.lv-opts { grid-area: opts; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.lv-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.lv-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.lv-label b { color: var(--ink); font-size: 14px; }
.lv-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -6px; }
.lv-swatch-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.lv-sizes { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
.lv-sizes .szchip { min-width: 0; padding-inline: 2px; }
.lv-sizes.is-shake { animation: shake .4s ease; }
.lv-size-note { min-height: 1.45em; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lv-size-note.is-low { color: var(--alert); font-weight: 600; }
.lv-dock {
  grid-area: dock; position: sticky; bottom: var(--bar-h); z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  margin: 0 -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--stone); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.lv-feat.is-stuck .lv-dock { border-radius: 0; box-shadow: 0 -12px 24px -16px rgba(9, 12, 26, .4); }
.lv-buy { min-height: 52px; font-size: 17px; }
/* Nút giỏ trong thanh "Chốt ngay": chỉ khi thanh đang dính đáy (điện thoại) thay cho thanh giỏ hàng đang ẩn. */
.lv-cart {
  position: relative; display: none; grid-auto-flow: column; place-items: center; gap: 4px; min-width: 52px; height: 52px; padding: 0 8px;
  border: 1px solid var(--stone); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
.lv-cart-n { font-size: 15px; font-weight: 700; }
@media (max-width: 899.98px) {
  body.lv-stuck .lv-cart:not([hidden]) { display: inline-grid; }
  body.lv-stuck .lv-dock:has(.lv-cart:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.lv-qty { display: inline-flex; align-items: center; border: 1px solid var(--stone); border-radius: var(--r-sm); }
.lv-qty-btn { display: grid; place-items: center; width: 44px; height: 48px; color: var(--ink); }
.lv-qty-btn:disabled { color: var(--stone); }
.lv-qty-n { min-width: 28px; text-align: center; font-size: 17px; }
.lv-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; }
.lv-h { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); font-stretch: 106%; font-size: 18px; line-height: 1.2; }
.lv-count { font-size: 13px; color: var(--muted); }
.lv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lv-item {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px; background: var(--paper); border: 1px solid var(--stone); border-radius: var(--r-md);
}
@media (hover: hover) { .lv-item:hover { border-color: var(--ink); } }
.lv-thumb { position: relative; width: 60px; aspect-ratio: 4 / 5; border-radius: var(--r-xs); overflow: hidden; background: var(--lining); }
.lv-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms ease; }
.lv-thumb img.is-loaded { opacity: 1; }
.lv-item-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.lv-item-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.lv-item-code { font-size: 19px; line-height: 1.1; }
.lv-item-top .low { color: var(--alert); font-size: 12px; font-weight: 600; }
.lv-item-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-item-price { display: flex; gap: 8px; align-items: baseline; }
.lv-item-price .price { font-family: var(--f-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.lv-tems { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.lv-tem { display: inline-flex; align-items: baseline; gap: 2px; min-width: 28px; height: 24px; padding: 0 6px; border: 1px solid var(--stone); border-radius: 4px; font-size: 12px; line-height: 22px; }
.lv-tem b { font-family: var(--f-display); font-stretch: 87.5%; font-weight: 600; font-size: 13px; }
.lv-tem.is-out { color: var(--muted); text-decoration: line-through; background: var(--lining); border-color: var(--lining); }
.lv-pick { min-width: 72px; }
.lv-pick::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
@media (max-width: 1023.98px) { body.lv-stuck .fab { display: none; } }
body.lv-stuck .toasts { bottom: calc(96px + var(--bar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .live-in { gap: 20px; padding-block: 28px 32px; }
  .lv-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
  .lv-head > :not(.lv-code) { grid-column: 1; }
  .lv-code { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; align-self: end; gap: 4px; }
  .lv-code-hint { flex: none; text-align: right; }
  .lv-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
  .lv-skel { min-height: 540px; }
  .lv-feat { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-areas: "media id" "media opts" "media dock"; grid-template-rows: auto auto 1fr; gap: 18px 26px; padding: 20px; }
  .lv-feat-code { font-size: clamp(48px, 4.4vw, 66px); }
  .lv-feat-name { font-size: 16px; min-height: 0; }
  .lv-price .price { font-size: 28px; }
  .lv-detail { margin-top: 0; }
  .lv-dock { position: static; align-self: end; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .lv-idle { padding: 18px 22px; }
}

/* ==========================================================================
   11. Tên lớp cũ (các module chưa đổi sang lớp mới vẫn hiện đúng)
   ========================================================================== */
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--stone); }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 52px; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; }
@media (hover: hover) {
  .btn-primary:not(:disabled):hover { background: var(--ink-hover); }
  .btn-ghost:not(:disabled):hover { background: transparent; border-color: var(--ink); }
}
.link-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; color: var(--ink);
  font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.note { color: var(--muted); font-size: var(--t-small); }

/* ==========================================================================
   12. Màn cảm ứng, chuyển động
   ========================================================================== */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .crumbs a { min-height: 44px; line-height: 44px; }
}

@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }
@keyframes pop-out { to { transform: translateY(8px) scale(.98); opacity: 0; } }
@keyframes drop { from { transform: translateY(-8px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@keyframes toast-down { from { transform: translateY(-8px); opacity: 0; } }
@keyframes usp-in { from { opacity: 0; } }
@keyframes odo-in { from { transform: translateY(100%); } }
@keyframes odo-out { to { transform: translateY(-100%); } }
@keyframes skel-pulse { 50% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes live-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes lv-flash { 0% { box-shadow: 0 0 0 0 var(--ink), var(--sh-2); } 12% { box-shadow: 0 0 0 3px var(--ink), var(--sh-2); } 100% { box-shadow: 0 0 0 0 transparent, var(--sh-2); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::backdrop { animation: none !important; }
  .skel, .live-strip__dot::after, .lv-dot::after { animation: none !important; }
  .lv-feat.is-new { outline: 3px solid var(--ink); outline-offset: 2px; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Đổi trang (router.js + View Transitions cùng tài liệu): cả trang mờ chéo nhẹ; ảnh thẻ hàng "bay" thành ảnh đầu trang
   sản phẩm (và ngược lại khi Back); đầu trang đứng yên (chỉ đặt tên trong lúc chuyển: html.vt-nav). */
html.vt-nav .hdr { view-transition-name: site-hdr; }
::view-transition-group(product-media) { animation-duration: 320ms; animation-timing-function: var(--ease); }
::view-transition-old(product-media), ::view-transition-new(product-media) { height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 220ms var(--ease) both vt-in; }
::view-transition-group(site-hdr) { animation-duration: 0s; }
::view-transition-old(site-hdr) { display: none; }
::view-transition-new(site-hdr) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Khung chờ của router (view 'pending'): khu của trang chưa nạp xong, cùng dáng trang thật (không 404, không trang trắng). */
.vw { padding-block: var(--sp-16) var(--sp-40); }
.vw i { display: block; height: 14px; border-radius: 4px; }
.vw-pd__media { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--gutter)); margin-top: calc(-1 * var(--sp-16)); }
.vw-pd__info { display: grid; gap: 12px; padding-top: 16px; }
.vw-pd__info i { width: 40%; }
.vw-pd__info i:nth-child(2) { height: 26px; width: 85%; }
.vw-pd__info i:nth-child(3) { height: 28px; width: 50%; }
.vw-pd__info i:nth-child(4) { height: 56px; width: 100%; border-radius: var(--r-sm); }
.vw-head { display: grid; gap: 12px; margin-bottom: var(--sp-24); }
.vw-head i { width: 30%; }
.vw-head i:nth-child(2) { height: 28px; width: 60%; border-radius: 6px; }
.vw-head i:nth-child(3) { width: 45%; }
.vw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.vw-card__media { aspect-ratio: 4 / 5; border-radius: var(--r-sm); }
.vw-card i { height: 13px; margin-top: 10px; width: 55%; }
.vw-card i + i { width: 90%; height: 16px; }
.vw-card i + i + i { width: 45%; height: 18px; }
@media (min-width: 768px) {
  .vw--product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .vw-pd__media { margin: 0; border-radius: var(--r-sm); }
  .vw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
}
@media (min-width: 1024px) { .vw--product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
/* Khung chờ trang sản phẩm có dữ liệu mẫu (bấm thẻ hàng): bố cục .pd-* thật, ảnh + mã + tên + giá thật, phần chọn còn chờ. */
.vw-pd i { display: block; height: 14px; border-radius: 4px; }
.vw-pd .pd-slide { cursor: default; }
.vw-pd__crumb { width: min(220px, 50%); }
.vw-pd__rest { display: grid; gap: 12px; }
.vw-pd__rest .vw-pd__l { width: 32%; }
.vw-pd__rest .vw-pd__l ~ .vw-pd__l { margin-top: 8px; }
.vw-pd i.vw-pd__sw { height: 40px; width: 58%; border-radius: var(--r-round); }
.vw-pd i.vw-pd__sz { height: 52px; width: 100%; border-radius: var(--r-sm); }
.vw-pd i.vw-pd__cta { height: 52px; width: 100%; margin-top: 8px; border-radius: var(--r-sm); }
@media (min-width: 1024px) { .vw-pd i.vw-pd__sz { height: 60px; } }

/* Đầu trang khi đã cuộn (router.js html.is-scrolled): bỏ viền, có bóng mềm; máy tính: nền mờ kính, logo nhỏ lại một chút.
   Chỉ đổi màu/bóng/transform (không đổi chiều cao: nội dung bên dưới không nhảy). */
.hdr { transition: transform 280ms var(--ease), box-shadow 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease); }
.hdr-brand .wm { transform-origin: left center; transition: transform 240ms var(--ease); }
html.is-scrolled .hdr { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--stone), 0 8px 24px -18px rgba(var(--brand-rgb), .45); }
@media (min-width: 1024px) {
  html.is-scrolled .hdr {
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
  html.is-scrolled .hdr-brand .wm { transform: scale(.9); }
}

/* 13. Bản in xác nhận đơn (print.js): .print-* trong shop-cart.css. */

/* Đang live (header.js): nút "● LIVE" trong đầu trang thay cho dải chèn phía trên ảnh (dải làm nhảy bố cục khi hiện muộn).
   Vùng chạm 44px, viên thuốc đỏ 28px bên trong. */
.hdr-live { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 4px; color: #FFFFFF; text-decoration: none; }
.hdr-live[hidden] { display: none; }
.hdr-live__pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: var(--r-round);
  background: var(--alert); font: 700 12px/1 var(--f-body); letter-spacing: .06em;
}
.hdr-live__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hdr-live__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; animation: live-ping 2s ease-out infinite; }
.hdr-live:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-round); }
:root[data-theme="dark"] .hdr-live { color: #2A0905; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hdr-live { color: #2A0905; } }
@media (prefers-reduced-motion: reduce) { .hdr-live__dot::after { animation: none; } }

/* Đổi trang trong SPA: router.js đặt tiêu điểm vào H1 (cho bàn phím, trình đọc màn hình); tiêu đề không cần viền tiêu điểm. */
main h1[tabindex="-1"]:focus { outline: none; }
/* Điện thoại hẹp (<400px): nút LIVE gọn lại để logo + LIVE + tìm + giỏ + menu vừa một hàng. */
@media (max-width: 399.98px) {
  .hdr-in:has(.hdr-live:not([hidden])) { gap: 8px; }
  .hdr-live { padding: 0 2px; }
  .hdr-live__pill { padding: 0 6px; gap: 4px; font-size: 11px; letter-spacing: .02em; }
}