/* ============================================================
   THE JERSEY LAB — storefront theme v7 "PHÒNG KIỂM ĐỊNH"
   ------------------------------------------------------------
   Cửa hàng tên là LAB, và lời hứa thật của nó là "kiểm định từng chiếc,
   hoàn 200% nếu hàng giả". Nên toàn bộ ngôn ngữ thị giác lấy từ đó —
   phòng kiểm định / kho lưu trữ áo đấu, chứ không phải sân cỏ:

   - GIẤY & MỰC: trắng và xám lạnh kiểu giấy nền chụp studio, chữ mực than.
     KHÔNG có giá đỏ, không tag "Tiết kiệm %" nền đỏ. Giảm giá nói bằng một
     con số nhỏ trên nền mực nhạt — thứ làm trang bán áo trông rẻ nhanh
     nhất là bảng màu đỏ chói của tem giảm giá.
   - MỘT màu nhấn duy nhất: MỰC KIỂM ĐỊNH #2233C4, dùng như con dấu — link,
     ô đang chọn, dấu tích đã kiểm. Đỏ oxit chỉ dành cho LỖI và HẾT HÀNG.
   - BA bộ chữ, mỗi bộ một việc (xem layouts/app.blade.php):
       Archivo    → chữ hiển thị, kéo bề ngang như chữ ép nhiệt sau lưng áo
       Be Vietnam → chữ đọc, dấu tiếng Việt gọn
       Plex Mono  → chữ DỮ LIỆU
   - CHỮ KÝ của trang: dải thông số `.spec` — một dòng mono in hoa ghi dữ
     liệu THẬT (mã hàng · mùa giải · đã kiểm định), đọc như nhãn giặt sau
     cổ áo. Nó lặp lại ở thẻ sản phẩm, đầu khối, trang chi tiết.

   Bán kính bo góc toàn trang = 2px. Không phải 0 (cứng như báo in), cũng
   không phải 8-12px (mềm như ứng dụng) — 2px là mép của một tấm thẻ giấy.
   ============================================================ */

:root {
    /* ---------- MỰC & GIẤY ---------- */
    --ink: #101216;          /* mực than — tiêu đề, header, footer */
    --ink-deep: #08090C;     /* đáy đen của footer/masthead */
    --ink-2: #2A2E34;        /* chữ đọc */
    --muted: #6E747C;        /* chữ phụ, siêu dữ liệu */
    --paper: #ffffff;
    --bench: #EEEFF1;        /* mặt bàn: nền ảnh sản phẩm, dải xen kẽ */
    --bench-2: #E4E6E9;      /* mặt bàn đậm hơn — ô trống, ảnh giữ chỗ */
    --rule: #DCDFE3;         /* gạch mảnh */
    --rule-soft: #EAECEF;

    /* ---------- MỰC KIỂM ĐỊNH (màu nhấn DUY NHẤT) ---------- */
    --signal: #2233C4;
    --signal-2: #161FA0;     /* khi rê chuột / bấm */
    --signal-tint: #ECEEFB;  /* nền chip, nền ô đang chọn */

    /* ---------- MÀU MANG NGHĨA (không phải màu trang trí) ---------- */
    --flag: #B3341F;         /* hết hàng, lỗi, huỷ */
    --flag-tint: #FBEDEA;
    --ok: #1D7A4C;
    --ok-tint: #E8F4EE;
    --warn: #8A5A00;
    --warn-tint: #FBF2E0;

    /* ---------- CHỮ ---------- */
    --font-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* ---------- KHUNG ---------- */
    --container: 1320px;
    --gutter: clamp(20px, 4vw, 52px);
    --radius: 2px;
    --shadow-md: 0 14px 44px rgba(16, 18, 22, .10);
    --shadow-sm: 0 2px 10px rgba(16, 18, 22, .06);

    /* ============================================================
       TÊN CŨ — trỏ vào bảng màu mới.
       Hàng trăm dòng ở các trang con vẫn gọi --color-main, --c-gold-d…
       Trỏ lại ở đây là cả website đổi tông cùng lúc, thay vì phải đi sửa
       từng chỗ và bỏ sót vài trang khiến chúng lạc lõng.
       ============================================================ */
    --color-main: var(--signal);
    --color-red: var(--flag);
    --color-yellow: var(--warn);
    --color-black: var(--ink);
    --color-gray: var(--muted);
    --color-btn: var(--ink);
    --color-btn-h: var(--signal);
    --color-was: #9AA0A8;
    --c-dark: var(--ink);
    --c-text: var(--ink-2);
    --c-muted: var(--muted);
    --c-gold: var(--signal);
    --c-gold-d: var(--signal);
    --c-sale: var(--flag);
    --c-border: var(--rule);
    --c-soft: var(--bench);
    --font-heading: var(--font-body);
    --font-serif: var(--font-display);
    --wash: var(--bench);
    --brass: var(--signal);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Sticky footer: body xếp dọc cao tối thiểu 1 màn, <main> nở ra chiếm chỗ trống
   → trang ít nội dung (giỏ trống, 404, chính sách...) footer vẫn nằm sát đáy màn hình */
body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink-2);
    background: var(--paper);
    margin: 0;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > .footer { flex-shrink: 0; }
/* khối nội dung chính của trang giãn ra để nội dung ngắn không dồn hết lên đầu trang */
main > .section { flex: 1 0 auto; }
main > .page-fill { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

a { color: inherit; text-decoration: none; transition: color .18s ease, background .18s ease, border-color .18s ease; }
img { max-width: 100%; }
.w-100 { width: 100%; }
.transition { transition: .25s all; }

/* Đi bằng bàn phím phải THẤY mình đang đứng ở đâu — khai một lần cho cả trang. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 1px; }

/* Chữ hiển thị: Archivo kéo bề ngang, đúng tỉ lệ chữ ép nhiệt sau lưng áo.
   Trình duyệt không hiểu font biến thiên vẫn rơi về Archivo thường — chỉ mất
   độ bè, không vỡ khuôn. */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 112;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}

/* ============================================================
   .spec — CHỮ KÝ CỦA TRANG
   Dải dữ liệu kỹ thuật đọc như dòng chữ trên nhãn giặt sau cổ áo. Dùng cho
   mã hàng, mùa giải, tình trạng kiểm định, số phiếu, nhãn đầu khối. Luôn là
   THÔNG TIN THẬT — dùng nó để trang trí là mất hết ý nghĩa.
   ============================================================ */
.spec {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    font-variant-numeric: tabular-nums; line-height: 1.5;
}
.spec--ink { color: var(--ink); }
.spec--signal { color: var(--signal); }
/* Dấu tích kiểm định đứng đầu dòng */
.spec-check { display: inline-flex; align-items: center; gap: 6px; color: var(--signal); }
.spec-check svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Nhãn nhỏ in hoa dùng ở đầu khối/cột — chữ hiển thị, không phải mono */
.kicker {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

/* Khung nội dung */
.wrap-content,
.container {
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto; width: 100%;
    padding-inline: var(--gutter);
}

/* ---------- Nút ---------- */
/* Một khuôn nút duy nhất cho cả website: chữ hiển thị in hoa, giãn chữ rộng,
   bo 2px. Biến thể chỉ đổi MÀU, không đổi hình dáng — nút mỗi trang một kiểu
   là dấu hiệu rõ nhất của một trang được chắp vá. */
.btn2 {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font-display); font-variation-settings: "wdth" 105;
    font-weight: 700; font-size: 12.5px; line-height: 1;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 16px 28px; border: 1px solid transparent; border-radius: var(--radius);
    cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.btn2-dark,
.btn2-gold,
.btn2-accent { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn2-dark:hover,
.btn2-gold:hover,
.btn2-accent:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn2-outline { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn2-outline:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn2-line { border-color: var(--rule); background: var(--paper); color: var(--ink); }
.btn2-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn2-ghost { background: var(--bench); border-color: var(--bench); color: var(--ink-2); }
.btn2-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn2-danger { background: var(--flag); border-color: var(--flag); color: #fff; }
.btn2-danger:hover { background: #8E2716; border-color: #8E2716; color: #fff; }
.btn2-danger:disabled { opacity: .55; cursor: not-allowed; }
.btn2-block { width: 100%; }
.btn2-lg { padding: 18px 34px; font-size: 13px; }
.btn2:disabled { opacity: .45; cursor: not-allowed; }
/* icon SVG dùng chung trong nút / nhãn — thừa hưởng màu chữ, không đổi cỡ theo font-size */
.ico-svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ============================================================
   HEADER — GIẤY TRẮNG, gạch chỉ mảnh
   Bản cũ là một khối đen đặc từ mép này sang mép kia. Khối đen ấy đè lên
   mọi thứ phía dưới và làm ảnh sản phẩm trông tối theo. Ở đây header là
   giấy: trắng, một đường kẻ mảnh dưới chân, chữ mực than. Sắc đen được
   để dành cho footer và các dải tuyên bố — dùng ít thì mới nặng ký.
   ============================================================ */
.header {
    background: var(--paper); border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 999;
}
.header .wrap-content { position: relative; }
.header-inner { display: flex; align-items: center; gap: 32px; }
/* flex + img block: bỏ khoảng trống baseline dưới ảnh (làm logo lệch lên trên vài px) */
.header-left { display: flex; align-items: center; flex-shrink: 0; padding: 16px 0; }
.header-left .logo-head { display: flex; align-items: center; }
.header-left img { max-height: 46px; width: auto; display: block; }
.brand-text {
    font-family: var(--font-display); font-variation-settings: "wdth" 115;
    font-weight: 700; font-size: 19px; letter-spacing: .02em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap;
}
.brand-text span { color: var(--signal); }

/* ---- Menu ---- */
/* Menu CANH GIỮA header — logo trái, cụm icon phải, danh mục ở giữa cho cân đối */
.header-nav { flex: 1 1 auto; min-width: 0; }
.header-nav ul { padding: 0; margin: 0; list-style: none; }
.header-nav ul.menu-main { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.header-nav ul li { position: relative; z-index: 1; }
.header-nav ul li a {
    display: block; position: relative; padding: 27px 15px;
    font-family: var(--font-display); font-variation-settings: "wdth" 102;
    font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap;
}
/* Gạch chân MỰC KIỂM ĐỊNH chạy ra từ giữa — không dùng text-decoration vì nó
   nhảy sát chân chữ, gạch riêng thì canh được đúng đáy hàng menu. */
.header-nav ul.menu-main > li > a::before {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 20px; height: 1.5px;
    background: var(--signal); transform: scaleX(0); transform-origin: center;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.header-nav ul.menu-main > li:hover > a::before,
.header-nav ul.menu-main > li > a.active::before { transform: scaleX(1); }
.header-nav ul.menu-main > li:hover > a,
.header-nav ul li a.active { color: var(--signal); }
.header-nav ul li a.has-child { padding-right: 25px; }
.header-nav ul li a.has-child:after {
    content: ""; position: absolute; bottom: calc(50% - 2px); right: 11px; width: 5px; height: 5px;
    border: 1.2px solid currentColor; border-top: 0; border-left: 0;
    transform: rotate(45deg); opacity: .55; transition: .25s all;
}
.header-nav ul li ul {
    position: absolute; min-width: 246px; background: var(--paper);
    border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1), visibility .25s;
}
.header-nav ul li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.header-nav ul li ul li { padding: 0; }
.header-nav ul li ul li a {
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
    color: var(--ink-2); border-bottom: 0; padding: 10px 18px;
    text-transform: none; letter-spacing: 0;
}
.header-nav ul li ul li:hover > a { color: var(--signal); background: var(--signal-tint); }
/* Cấp 3 fly-out sang phải (Câu lạc bộ → giải đấu → CLB) */
.header-nav ul li ul li ul { top: -7px; left: 100%; margin-top: 0; }
.header-nav ul li ul li a.has-child { padding-right: 26px; }
.header-nav ul li ul li a.has-child:after {
    right: 14px; bottom: calc(50% - 3px); transform: rotate(-45deg);
}

/* ---- Cụm icon phải: tìm kiếm — chuông — tài khoản — giỏ ---- */
.header-icons { display: flex; align-items: center; gap: 22px; flex-shrink: 0; margin-left: auto; }
.header-ico {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
    border: 0; background: none; color: var(--ink); cursor: pointer;
    font-family: var(--font-display); font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    transition: color .2s ease; position: relative;
}
.header-ico:hover { color: var(--signal); }
.header-ico svg { width: 19px; height: 19px; flex-shrink: 0; }
.header-ico__label { white-space: nowrap; }
/* Chấm đếm giỏ: mực kiểm định, KHÔNG phải đỏ — đỏ ở website này chỉ có nghĩa
   là hỏng hoặc hết hàng, dùng nó cho con số vui vẻ là phá mất quy ước. */
.header-ico--cart { padding-right: 6px; }
.header-cart-dot {
    position: absolute; top: -3px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--signal); color: #fff;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Thanh tìm kiếm trượt xuống dưới hàng header ---- */
.header-searchbar { border-top: 1px solid var(--rule-soft); padding: 16px 0 20px; }
.header-searchbar form { display: flex; align-items: center; gap: 14px; }
.header-searchbar__ico { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.header-searchbar input {
    flex: 1 1 auto; min-width: 0; height: 46px; border: 0; border-bottom: 1px solid var(--rule);
    outline: 0; background: transparent; color: var(--ink);
    font-size: 17px; font-family: var(--font-body); border-radius: 0;
}
.header-searchbar input:focus { border-bottom-color: var(--signal); outline: 0; }
.header-searchbar input::placeholder { color: #A6ABB2; }
.header-searchbar__go {
    height: 42px; padding: 0 28px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
    border-radius: var(--radius);
    font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    cursor: pointer; transition: .2s all;
}
.header-searchbar__go:hover { background: var(--signal); border-color: var(--signal); }
.header-searchbar__close {
    width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: transparent; color: var(--muted); cursor: pointer; padding: 0; transition: .2s all;
}
.header-searchbar__close svg { width: 15px; height: 15px; }
.header-searchbar__close:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   SR-ONLY — chữ dành cho trình đọc màn hình & máy tìm kiếm, mắt không thấy
   Dùng cho tiêu đề h1 của trang chủ: khối hero là ảnh nên không có chỗ đặt chữ,
   nhưng trang nào cũng phải có đúng MỘT h1 nói trang này về cái gì.
   KHÔNG dùng display:none — như thế trình đọc màn hình cũng bỏ qua luôn.
   ============================================================ */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   CRITERIA — dòng trạng thái của phòng kiểm định (trên cùng, trước header)
   ------------------------------------------------------------
   Bản cũ là một băng chữ chạy vô tận. Chữ chạy là thứ khách phải ĐỢI mới
   đọc được, và nó là dấu hiệu quen thuộc của các trang bán hàng rẻ tiền.
   Ở đây bốn cam kết đứng yên, viết bằng chữ dữ liệu, mỗi cam kết một dấu
   tích — đọc một lượt là xong, không phải nhìn theo.
   ============================================================ */
.criteria { background: var(--ink-deep); color: #fff; }
/* `safe center`: canh giữa khi đủ chỗ, nhưng khi bốn cam kết dài hơn màn hình thì
   tự lùi về canh trái. Dùng `center` trơn trong một khối cuộn ngang là cam kết đầu
   tiên bị đẩy ra ngoài mép trái và KHÔNG cuộn tới được. */
.criteria .wrap-content {
    display: flex; align-items: center; justify-content: safe center;
    gap: 0 34px; min-height: 38px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.criteria .wrap-content::-webkit-scrollbar { display: none; }
.criteria-item {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: .11em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); white-space: nowrap;
}
.criteria-item svg { width: 11px; height: 11px; flex-shrink: 0; color: rgba(255, 255, 255, .42); }

/* ============================================================
   SLIDESHOW — full-width, mũi tên vuông đen 45x45
   ============================================================ */
/* Chiều cao do JS đặt theo đúng ảnh ĐANG hiện (xem initSlideshow trong home.blade).
   Mỗi banner một tỉ lệ khác nhau, mà khối flex thì cao bằng ảnh cao nhất — không
   ghì lại thì ảnh ngang nhất để thừa một mảng trắng to dưới chân. */
.slideshow { position: relative; overflow: hidden; transition: height .45s ease; }
.slideshow-track { display: flex; transition: transform .8s ease; will-change: transform; }
.slideshow-item { min-width: 100%; display: block; cursor: pointer; align-self: flex-start; }
/* KHÔNG cắt ảnh: banner là ảnh quảng cáo có chữ, cắt mất mép là mất luôn phần chữ.
   height:auto để ảnh tự cao theo đúng tỉ lệ gốc — mọi cỡ màn đều thấy trọn ảnh,
   không cần khoá chiều cao theo từng @media nữa. */
.slideshow-item img { width: 100%; height: auto; display: block; }

.control-owl { position: absolute; width: 100%; z-index: 2; left: 0; top: calc(50% - 23px); opacity: 0; transition: opacity .25s ease; }
.slideshow:hover .control-owl { opacity: 1; }
.control-owl button {
    top: 0; position: absolute; outline: none; border: 0; padding: 0; margin: 0;
    cursor: pointer; color: var(--ink); width: 46px; height: 46px; font-size: 22px;
    background: rgba(255, 255, 255, .92); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; transition: .25s all;
}
.control-owl button:hover { background: #fff; color: var(--signal); }
.control-owl button.owl-prev { left: 22px; }
.control-owl button.owl-next { right: 22px; }

/* Bộ đếm slide "1/3" — chữ dữ liệu trên nền mực trong suốt */
.slideshow-count {
    position: absolute; left: 22px; bottom: 20px; z-index: 2;
    padding: 6px 12px; background: rgba(8, 9, 12, .62); color: #fff; border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   THANH TIÊU ĐỀ KHỐI — canh trái, không canh giữa
   Tiêu đề canh giữa bắt mắt phải nhảy vào giữa rồi nhảy về mép trái để đọc
   tiếp danh sách bên dưới. Canh trái là cùng một trục đọc từ trên xuống.
   ============================================================ */
.section { padding: 64px 0 76px; }
.section-product { margin-top: 64px; }
.wrap-home { padding-bottom: 10px; }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--rule);
    text-align: left; flex-wrap: wrap;
}
.section-head h2 {
    margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 112;
    font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em;
    text-transform: uppercase; color: var(--ink);
}
.section-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); max-width: 58ch; }

.section-more { text-align: center; margin-top: 38px; }
.btn-viewmore {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 16px 44px; border: 1px solid var(--ink); border-radius: var(--radius);
    color: var(--ink); background: var(--paper);
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; transition: all .2s ease;
}
.btn-viewmore:hover { background: var(--ink); color: #fff; }

/* ============================================================
   THẺ SẢN PHẨM — hiện vật trên nền giấy chụp
   ------------------------------------------------------------
   Bản cũ: ảnh đóng khung viền xám, dấu "+" navy góc dưới, giá đỏ, dòng
   "Tiết kiệm X%" đỏ. Ba tín hiệu đỏ trên MỘT thẻ, nhân lên hai chục thẻ
   một trang — mắt không còn chỗ nghỉ và cái áo không còn là nhân vật chính.

   Bản này: bỏ hết viền, ảnh nằm trên nền giấy chụp; dưới ảnh đúng ba dòng
   theo thứ tự khách thật sự đọc — THÔNG SỐ (đội/mùa/phiên bản) → TÊN → GIÁ.
   Giá viết bằng mực than. Mức giảm là một con số nhỏ ở góc ảnh.
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }

/* height:100% + grid/flex stretch => mọi thẻ trong một hàng cao BẰNG NHAU */
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; }

/* Khung VUÔNG khớp đúng tỉ lệ ảnh sản phẩm đang có (768x768).
   Ảnh vuông thì cover lấp kín 100% — không cắt mất người, không hở dải hai bên. */
.pcard-media {
    position: relative; aspect-ratio: 1 / 1; background: var(--bench);
    border: 0; border-radius: var(--radius); overflow: hidden; display: block; margin-bottom: 16px;
}
.pcard-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #B9BEC5; background: var(--bench-2);
}
.pcard-ph svg { width: 46px; height: 46px; }

/* Mức giảm — chữ dữ liệu trên nền giấy, góc trên trái. Nhỏ và lặng lẽ:
   con số này là thông tin, không phải tiếng rao. */
.pcard-off {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 4px 8px; background: var(--paper); color: var(--ink); border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; line-height: 1;
}

/* Thanh "Xem chi tiết" trượt lên từ đáy ảnh */
.pcard-view {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 12px; background: var(--ink); color: #fff;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    transform: translateY(100%); opacity: 0;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
.pcard-view svg { width: 14px; height: 14px; }
.pcard:hover .pcard-view,
.pcard:focus-within .pcard-view { transform: translateY(0); opacity: 1; }

.pcard-body { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
/* Dải thông số — CHỮ KÝ. Đứng TRƯỚC tên vì nó là thứ phân biệt hai chiếc áo
   trông giống hệt nhau: cùng đội, khác mùa giải, khác phiên bản. */
.pcard-spec {
    margin: 0 0 7px; font-size: 10.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard-name {
    font-family: var(--font-body); font-size: 14.5px; font-weight: 500; line-height: 1.45;
    margin: 0 0 auto; padding-bottom: 12px; color: var(--ink); letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-name a { background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .35s cubic-bezier(.22, .61, .36, 1); }
.pcard:hover .pcard-name a { background-size: 100% 1px; }
.pcard-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pcard-price .now {
    font-family: var(--font-body); font-size: 16px; font-weight: 600;
    color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.pcard-price .was {
    font-family: var(--font-body); font-size: 13px; font-weight: 400;
    color: var(--color-was); text-decoration: line-through; font-variant-numeric: tabular-nums;
}
/* Lớp cũ vài trang con còn gọi — giữ lại nhưng câm lặng, mức giảm giờ nằm trên ảnh */
.badge-off {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    padding: 4px 8px; background: var(--paper); color: var(--ink); border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Không có gì để hiện — nói rõ làm gì tiếp theo, không phải một ô xám trống */
.empty-state {
    text-align: center; padding: 72px 24px; color: var(--muted);
    background: var(--bench); border-radius: var(--radius);
}
.empty-state i { font-size: 40px; color: #B9BEC5; display: block; margin-bottom: 14px; }
.empty-state p { margin: 0; font-size: 15px; }

/* ============================================================
   ĐẦU TRANG / BREADCRUMB / TRANG DANH SÁCH
   ------------------------------------------------------------
   Đầu trang canh TRÁI: nó nằm ngay trên một lưới sản phẩm canh trái, canh
   giữa là bắt mắt phải nhảy vào giữa rồi nhảy về mép để đọc tiếp.
   Breadcrumb viết bằng chữ dữ liệu — nó là toạ độ, không phải câu văn.
   ============================================================ */
.page-head { background: var(--paper); padding: 46px 0 30px; text-align: left; border-bottom: 1px solid var(--rule); }
.breadcrumb2 {
    display: flex; align-items: center; justify-content: flex-start; gap: 9px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.breadcrumb2 a:hover { color: var(--signal); }
.breadcrumb2 .sep { opacity: .45; }
.page-head h1 {
    margin: 16px 0 0; font-family: var(--font-display); font-variation-settings: "wdth" 114;
    font-size: clamp(30px, 4.4vw, 56px); font-weight: 700; line-height: 1.02;
    letter-spacing: -.03em; text-transform: uppercase; color: var(--ink);
}
.page-head .page-head__lead { margin: 14px 0 0; max-width: 62ch; font-size: 15px; color: var(--muted); }

.listing { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 72px; }

/* Bộ lọc: không đóng hộp. Nhãn nhỏ + gạch mảnh + danh sách chữ — hộp viền
   quanh mỗi nhóm lọc là thứ làm cột trái nặng hơn cả lưới sản phẩm bên cạnh. */
.filter-box { border: 0; }
.filter-box + .filter-box { margin-top: 30px; }
.filter-box h4 {
    margin: 0 0 12px; padding: 0 0 12px; background: none; color: var(--ink);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
}
.filter-box ul { list-style: none; margin: 0; padding: 0; }
.filter-box li a {
    display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
    font-size: 14px; font-weight: 400; color: var(--ink-2); border-left: 0;
}
.filter-box li a:hover { color: var(--signal); }
.filter-box li a.active {
    color: var(--signal); font-weight: 600; background: none; border-left: 0;
}
/* Dấu tích nhỏ đứng trước mục đang chọn — không dùng riêng màu để báo trạng thái */
.filter-box li a.active::before {
    content: ""; flex: 0 0 6px; height: 6px; margin: 8px 8px 0 -14px;
    background: var(--signal); border-radius: 50%;
}

.listing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin: 30px 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
    gap: 16px; flex-wrap: wrap;
}
.listing-toolbar .count {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.listing-toolbar .count b { color: var(--ink); font-weight: 600; }
.sort-select {
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 10px 38px 10px 14px; font-family: var(--font-body); font-size: 13.5px;
    background-color: var(--paper); color: var(--ink); cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E747C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}
.sort-select:hover { border-color: var(--ink); }

.pagination2 { display: flex; gap: 6px; justify-content: center; margin-top: 56px; }
.pagination2 a, .pagination2 span {
    min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--rule);
    border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.pagination2 a:hover { border-color: var(--ink); color: var(--ink); }
.pagination2 .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination2 .disabled { opacity: .35; pointer-events: none; border-color: transparent; }

/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM
   ------------------------------------------------------------
   Ảnh chiếm hơn nửa bề ngang và DÍNH khi cuộn: cột phải dài (chọn size,
   nút mua, phần mô tả), cuộn xuống mà ảnh trôi mất là khách phải nhớ
   cái áo trông thế nào để quyết định.
   ============================================================ */
/* Trang này KHÔNG dùng .page-head: khối đó sinh ra để đỡ tên trang cỡ lớn,
   còn ở đây tên sản phẩm nằm trong cột phải. Để nguyên thì phần trên cùng là
   một dải trắng cao ngót trăm pixel chỉ chứa mỗi hàng chữ đường dẫn, đẩy ảnh
   sản phẩm — thứ khách vào để xem — xuống dưới mép màn hình. */
/* Khai kèm .section cho đủ nặng: các khối @media bên dưới tệp còn khai lại
   `.section { padding: ... }` dạng viết tắt, cùng độ ưu tiên mà đứng sau thì
   nó dựng lại khoảng đệm trên vừa bỏ. */
.section.section--pdetail { padding-top: 0; }
.pd-crumb {
    display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden;
    padding: 20px 0 26px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* Tên danh mục và tên sản phẩm dài thì cắt bằng dấu ba chấm chứ không cho
   xuống dòng — hàng đường dẫn phải luôn cao đúng MỘT dòng, nếu không trên máy
   hẹp nó lại phình thành ba dòng đúng như khối cũ. "Trang chủ" đủ ngắn nên
   khoá cứng, để phần bị cắt rơi vào hai mục sau. */
.pd-crumb > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-crumb a { flex: 0 1 auto; color: var(--muted); }
.pd-crumb a:first-child { flex: 0 0 auto; }
.pd-crumb a:hover { color: var(--signal); }
.pd-crumb .sep { flex: 0 0 auto; overflow: visible; opacity: .4; }
.pd-crumb .cur { flex: 1 1 auto; color: var(--ink-2); }

.pdetail { display: grid; grid-template-columns: 1.4fr minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 24px; }
/* Dải ảnh nhỏ dựng DỌC bên trái ảnh lớn, đúng khuôn trang sản phẩm của các cửa
   hàng CLB. Xếp ngang dưới chân ảnh như bản cũ thì ảnh lớn phải nhường chỗ, mà
   chỗ ấy lại là thứ khách nhìn lâu nhất trên cả trang.
   Dùng flex chứ không grid hai cột: sản phẩm chỉ có MỘT ảnh thì khối dải ảnh nhỏ
   không được in ra, grid sẽ để hở một cột trống còn flex thì ảnh lớn tự lấp đầy. */
.pd-gallery { position: sticky; top: 100px; display: flex; align-items: stretch; gap: 14px; }
.pd-gallery .pd-main { flex: 1 1 auto; min-width: 0; }
/* min-height:0 + overflow-y:auto — sản phẩm nhiều ảnh thì dải ảnh nhỏ tự cuộn
   trong đúng chiều cao của ảnh lớn, thay vì mọc dài xuống dưới và kéo cả khối
   ảnh cao vống lên. */
.pd-thumbs {
    order: -1; flex: 0 0 84px; flex-direction: column; margin-top: 0;
    min-height: 0; overflow-y: auto; scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-gallery .pd-main {
    border: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; background: var(--bench);
}
.pd-gallery .pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery .pd-main .ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 72px; color: #B9BEC5; background: var(--bench-2);
}
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs img {
    width: 84px; height: 84px; object-fit: cover; background: var(--bench);
    border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: border-color .2s ease;
}
.pd-thumbs img:hover { border-color: var(--ink); }

.pd-info { min-width: 0; }
.pd-brand {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .2em; color: var(--muted);
}
.pd-title {
    font-family: var(--font-display); font-variation-settings: "wdth" 110;
    font-size: clamp(26px, 3vw, 40px); font-weight: 700; margin: 12px 0 0;
    line-height: 1.06; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink);
}
/* Dải thông số của chiếc áo — CHỮ KÝ, xem ghi chú .spec ở đầu tệp */
.pd-spec { margin: 14px 0 0; font-size: 11px; }
.pd-rating { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 12px 0 0; flex-wrap: wrap; }
.pd-rating .stars { color: #C79A2E; font-size: 14px; letter-spacing: 1px; }
.pd-rating .sep { opacity: .45; }
.pd-lead { margin: 20px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 54ch; }

/* Giá — mực than, không phải đỏ. Mức giảm là một chip nhỏ nền mực nhạt.
   Số tiền lớn màu đỏ là quy ước của tem giảm giá dán trên kệ chợ; ở đây con
   số tự nó đã đủ to để không cần hét. */
.pd-price-box {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--rule);
}
.pd-price-box .now {
    font-family: var(--font-body); font-size: clamp(26px, 2.8vw, 34px); font-weight: 600;
    color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pd-price-box .was {
    font-size: 16px; font-weight: 400; color: var(--color-was);
    text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.pd-price-box .off {
    background: var(--signal-tint); color: var(--signal); border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 9px; line-height: 1;
}
.pd-promo {
    display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 7px 12px;
    background: var(--signal-tint); border: 0; border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .06em; color: var(--signal);
}
.pd-promo svg { width: 15px; height: 15px; flex-shrink: 0; }

.pd-option { margin-top: 28px; }
.pd-option .lbl {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em; margin-bottom: 12px; color: var(--muted);
}
.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-chip {
    min-width: 50px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius);
    font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
    cursor: pointer; text-align: center; background: var(--paper); transition: all .18s;
}
.pd-chip:hover { border-color: var(--ink); color: var(--ink); }
.pd-chip.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.pd-chip.sold { opacity: .38; text-decoration: line-through; cursor: not-allowed; }

.pd-actions { display: flex; gap: 14px; margin: 28px 0 0; flex-wrap: wrap; align-items: center; }
.pd-buy { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 0; }
/* Nút chính là "Mua ngay" (mực than đặc), nút phụ là "Thêm vào giỏ" (chỉ có
   viền). Mỗi màn hình đúng MỘT nút chính — trước đây cả hai đều đặc màu và
   cùng cỡ nên không nút nào dẫn được đường. */
.btn-atc,
.btn-buynow {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 54px; padding: 0 22px; cursor: pointer; border-radius: var(--radius);
    font-family: var(--font-display); font-variation-settings: "wdth" 105;
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    transition: all .2s ease;
}
.btn-buynow { background: var(--ink); color: #fff; border: 1px solid var(--ink); order: -1; }
.btn-buynow:hover { background: var(--signal); border-color: var(--signal); }
.btn-atc { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); }
.btn-atc:hover { border-color: var(--ink); background: var(--bench); }
.btn-atc b { font-variant-numeric: tabular-nums; }
.btn-atc:disabled,
.btn-buynow:disabled { opacity: .45; cursor: not-allowed; }
.btn-atc:disabled:hover { border-color: var(--rule); background: var(--paper); }

.qty-input { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--radius); }
.qty-input button {
    width: 46px; height: 50px; border: 0; background: transparent; font-size: 17px;
    cursor: pointer; color: var(--ink-2); transition: background .15s;
}
.qty-input button:hover { background: var(--bench); }
.qty-input button:disabled { opacity: .3; cursor: not-allowed; background: transparent; }
.qty-input input {
    width: 56px; height: 50px; border: 0; text-align: center; background: transparent;
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}

/* Tồn kho còn lại, đứng cạnh ô số lượng — chặn hụt hàng ngay từ lúc chọn */
.pd-stock { flex-basis: 100%; order: 9; font-size: 13px; color: var(--muted); margin-top: -2px; }
.pd-stock b { color: var(--ink); font-weight: 600; }
.pd-stock.is-low b { color: var(--flag); }
.pd-stock.is-out { color: var(--flag); font-weight: 600; }

/* Huy hiệu DMCA dưới nút mua — nhỏ, mờ nhẹ để không tranh chỗ với nút chính */
.pd-dmca { margin: 22px 0 0; }
.pd-dmca a { display: inline-block; line-height: 0; }
.pd-dmca img { width: 121px; height: auto; opacity: .5; transition: opacity .2s ease; }
.pd-dmca a:hover img { opacity: 1; }

/* Mô tả / thông tin dạng ACCORDION */
/* Accordion giờ nằm TRONG cột phải chứ không nằm dưới cả hai cột. Để nó ở dưới
   thì cột trái (ảnh) hết nội dung từ giữa trang và bỏ lại một mảng trắng cao
   gần bốn trăm pixel bên cạnh phần chữ. Đưa vào cột phải là hai cột dài xấp xỉ
   nhau, mà ảnh vẫn dính theo màn khi cuộn. */
.pd-accs { margin: 40px 0 0; border-top: 1px solid var(--rule); max-width: none; }
.pd-acc { border-bottom: 1px solid var(--rule); }
.pd-acc summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 2px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary:hover { color: var(--signal); }
.pd-acc summary::after {
    content: ""; width: 8px; height: 8px; flex-shrink: 0;
    border: 1.5px solid currentColor; border-top: 0; border-left: 0;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease; margin-right: 4px;
}
.pd-acc[open] summary::after { transform: rotate(225deg); }
.pd-acc__body { padding: 0 2px 22px; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.pd-acc__body p { margin-top: 0; }
.pd-acc__ul { margin: 0; padding-left: 18px; }
.pd-acc__ul li + li { margin-top: 4px; }
.pd-acc__body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   TRANG NỘI DUNG (info / contact / cart / account)
   ============================================================ */
/* ---------- Trang Chính sách / Hướng dẫn / Thu mua ---------- */
.section-info { padding: 12px 0 14px; display: flex; flex-direction: column; justify-content: center; }

.info-shell {
    display: grid; grid-template-columns: 288px minmax(0, 1fr);
    max-width: 1180px; margin: 0 auto;
    border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
    box-shadow: none; background: var(--paper);
}

/* Cột trái — mục lục trên nền giấy chụp. Trước đây là một khối đen tuyền,
   nặng hơn cả nội dung nó dẫn tới. */
.info-nav { background: var(--bench); color: var(--ink); padding: 24px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--rule); }
.info-nav__title {
    margin: 0 0 16px; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.info-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.info-nav__list a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 13px; font-size: 14px; font-weight: 400; color: var(--ink-2);
    border-left: 2px solid transparent; border-radius: var(--radius); background: transparent; transition: .2s all;
}
.info-nav__list a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .35; }
.info-nav__list a:hover { background: var(--paper); color: var(--signal); }
.info-nav__list a.active {
    background: var(--paper); color: var(--signal); font-weight: 600; border-left-color: var(--signal);
}
.info-nav__list a.active svg { opacity: 1; }

.info-nav__help {
    display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.info-nav__help svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--signal); }
.info-nav__help b {
    display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.info-nav__help a { font-size: 15px; font-weight: 600; color: var(--ink); }
.info-nav__help a:hover { color: var(--signal); }

/* Cột phải — nội dung */
/* Nội dung bám mép trên, hàng nút ghim đáy (margin-top:auto) → vị trí nút giống hệt nhau
   giữa các trang dù số mục nhiều ít khác nhau (thu mua 3 mục, chính sách 4 mục). */
.info-main { padding: 30px 34px; display: flex; flex-direction: column; justify-content: flex-start; }
.info-main h2 { margin: 0 0 8px; font-size: 19px; }
.info-lead { margin: 0 0 20px; font-size: 14.5px; color: var(--muted); }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.info-list li { display: flex; align-items: flex-start; gap: 13px; }
.info-list p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.info-no {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--signal-tint);
    color: var(--signal); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}
.info-tick {
    flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--signal-tint);
    color: var(--c-gold-d); display: inline-flex; align-items: center; justify-content: center;
}
.info-tick svg { width: 15px; height: 15px; }

.info-cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-border);
}
.info-list { margin-bottom: 18px; }

/* ---------- Form thu mua (chỉ trang Thu mua) ---------- */
.tradein-form { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tradein-form__title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
    font-family: var(--font-display); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.tradein-form__title svg { width: 18px; height: 18px; color: var(--c-gold-d); }
.tradein-form__note { margin: 0 0 14px; font-size: 13px; color: var(--c-muted); }

.tradein-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tradein-full { grid-column: 1 / -1; }
.tradein-form .form-field { margin-bottom: 12px; }
.tradein-form .form-field label { font-size: 12px; letter-spacing: .3px; margin-bottom: 5px; }
.tradein-form .form-field input[type=text],
.tradein-form .form-field input[type=tel],
.tradein-form .form-field input[type=email] { height: 42px; font-size: 13.5px; }
.tradein-form .req { color: var(--c-sale); }

.form-field textarea {
    width: 100%; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 12px 14px; font-size: 14.5px;
    font-family: var(--font-body); color: var(--ink); background: var(--paper);
    outline: 0; resize: vertical; min-height: 104px; line-height: 1.65;
    transition: border-color .18s ease;
}
.form-field textarea::placeholder { color: #A6ABB2; }
.form-field textarea:hover { border-color: #C4C8CD; }
.form-field textarea:focus { border-color: var(--signal); }

/* Ô chọn tệp: input thật ẩn đi, thao tác qua vùng kéo–thả.
   Phải là .form-field input.uploader-input để thắng .form-field input { width: 100% } —
   nếu không, input absolute rộng bằng cả trang và làm tràn ngang toàn trang. */
.form-field input.uploader-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.label-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--c-muted); }

/* Chọn selector .form-field label.uploader để thắng .form-field label { display: block } */
.form-field label.uploader {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 20px 16px; margin: 0; text-align: center; cursor: pointer;
    font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
    border: 1.5px dashed var(--rule); background: var(--bench); transition: .18s all;
}
.form-field label.uploader:hover { border-color: var(--color-main); background: var(--signal-tint); }
.form-field label.uploader.is-over { border-color: var(--color-main); background: var(--warn-tint); border-style: solid; }
.form-field label.uploader.has-files { padding: 13px 16px; }
/* input ẩn vẫn nhận focus bàn phím → viền đậm cho biết đang ở vùng chọn tệp */
.uploader-input:focus-visible + .form-field label.uploader,
.uploader-input:focus-visible + .uploader { border-color: var(--c-dark); border-style: solid; }

.uploader__ico { width: 30px; height: 30px; color: var(--c-gold-d); margin-bottom: 3px; }
.uploader.has-files .uploader__ico { width: 22px; height: 22px; margin-bottom: 0; }
.uploader__title { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.uploader__title b { font-weight: 700; color: var(--c-gold-d); text-decoration: underline; text-underline-offset: 2px; }
.uploader__hint { font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.uploader.has-files .uploader__hint { display: none; }

.uploader__error { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: var(--c-sale); }

.uploader__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.uploader__item {
    display: flex; align-items: center; gap: 11px; padding: 7px 10px 7px 7px;
    border: 1px solid var(--c-border); background: #fff;
}
.uploader__item img { width: 46px; height: 46px; object-fit: cover; flex-shrink: 0; background: var(--c-soft); }
.uploader__meta { flex: 1 1 auto; min-width: 0; }
.uploader__meta b {
    display: block; font-size: 13px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uploader__meta span { font-size: 12px; color: var(--c-muted); }
.uploader__del {
    flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border); background: #fff; color: var(--muted); cursor: pointer; padding: 0; transition: .18s all;
}
.uploader__del svg { width: 14px; height: 14px; }
.uploader__del:hover { background: var(--c-sale); border-color: var(--c-sale); color: #fff; }

.tradein-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.simple-card { max-width: 460px; margin: 0 auto 54px; border: 1px solid var(--c-border); padding: 34px; text-align: center; }
.simple-card .ico { font-size: 52px; color: var(--c-gold-d); }
.simple-card h2 { font-size: 21px; font-weight: 700; margin: 12px 0 8px; text-transform: uppercase; }
.simple-card p { color: var(--c-muted); font-size: 14.5px; margin: 0 0 22px; }

/* ---------- Ô nhập dùng chung cho cả website ----------
   Nhãn LUÔN hiện thành một dòng riêng phía trên ô (không dùng placeholder thay
   nhãn): gõ xong chữ vào là placeholder biến mất, khách quay lại soát thì không
   còn biết ô đó hỏi gì. Viền mảnh 1px, bo 2px, và khi focus thì đổi sang mực
   kiểm định — dấu hiệu duy nhất cần thiết. */
.form-field { text-align: left; margin-bottom: 18px; }
.form-field label {
    display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.form-field input {
    width: 100%; height: 48px; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 0 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
    background: var(--paper); outline: 0; transition: border-color .18s ease;
}
.form-field input::placeholder { color: #A6ABB2; }
.form-field input:hover { border-color: #C4C8CD; }
.form-field input:focus { border-color: var(--signal); outline: 0; }

/* Select trong form: cùng khuôn với input (cao 46px, viền 1.5px) và tự vẽ mũi tên.
   Để mặc định thì mỗi trình duyệt vẽ một kiểu, đứng cạnh ô nhập là thấy lệch ngay. */
.form-field select {
    width: 100%; height: 48px; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 0 38px 0 14px;
    font-size: 14.5px; font-family: var(--font-body); color: var(--ink); background-color: var(--paper); outline: 0;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
}
.form-field select:hover { border-color: #C4C8CD; }
.form-field select:focus { border-color: var(--signal); }

/* ---------- Trang gọn 1 màn hình (liên hệ / chính sách / thu mua) ---------- */
/* .page-fit siết chân trang lại cho toàn trang vừa một khung nhìn, không phải
   cuộn (dùng ở trang chính sách / liên hệ / thương hiệu khi nội dung ngắn). */
.page-fit .usp { padding: 30px 0 32px; margin-top: 40px; }
.page-fit .footer-top { padding: 24px 0; }
.page-fit .footer-social a { width: 34px; height: 34px; font-size: 14px; }
.page-fit .footer-title { margin-bottom: 12px; }
.page-fit .footer-ul li { margin-bottom: 6px; }
.page-fit .footer-info p { margin-bottom: 6px; }
.page-fit .footer-bottom { padding: 16px 0; }
.page-fit .footer-article { padding: 30px 0 24px; }

.page-head--slim { padding: 20px 0 0; }
.page-head--slim h1 { margin-top: 8px; font-size: 26px; }
/* section giãn theo chiều cao còn trống (main flex) → canh giữa để khối không dính lên đầu trang */
.section-contact { padding: 12px 0 14px; display: flex; flex-direction: column; justify-content: center; }

.contact-shell {
    display: grid; grid-template-columns: 0.95fr 1.05fr;
    max-width: 1180px; margin: 0 auto;
    border: 1px solid var(--rule); box-shadow: none; background: #fff;
}

/* Cột trái — panel ĐEN tuyền kiểu "GET IN TOUCH" của mẫu */
.contact-aside { background: var(--ink); color: #fff; padding: 26px 28px; display: flex; flex-direction: column; }
.ca-title {
    margin: 0 0 20px; font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em; color: rgba(255, 255, 255, .5);
}
.ca-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ca-list li { display: flex; gap: 13px; align-items: flex-start; }
.ca-list svg { width: 20px; height: 20px; flex-shrink: 0; color: #fff; margin-top: 2px; }
.ca-list b { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .5); margin-bottom: 3px; }
.ca-list a, .ca-list span { display: block; font-size: 14.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.ca-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.ca-social { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ca-social a {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; transition: .2s all;
}
.ca-social svg { width: 17px; height: 17px; }
.ca-social a:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* Cột phải — form, tiêu đề serif theo mẫu */
.contact-form { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; }
.contact-form h2 {
    margin: 0 0 6px; font-family: var(--font-serif); font-size: 23px; font-weight: 500;
    text-transform: none; letter-spacing: .2px; color: var(--ink);
}
.contact-form .cf-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--c-muted); }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cf-full { grid-column: 1 / -1; }
.contact-form .form-field { margin-bottom: 11px; }
.contact-form .form-field label { font-size: 12px; letter-spacing: .3px; margin-bottom: 5px; }
.contact-form .form-field input { height: 42px; font-size: 13.5px; }
.contact-form .req { color: var(--c-sale); }
.contact-form .btn2 { margin-top: 3px; }

/* ---------- Giỏ hàng (khuôn cart của mẫu: danh sách trái + thẻ tóm tắt phải) ---------- */
.padding-top-bottom { padding: 1.6rem 0 2.5rem; }

.wrap-cart { padding: 0; background: transparent; border: 0; box-shadow: none; }

.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; max-width: 1240px; margin: 0 auto; }

/* Thẻ tóm tắt — nền var(--bench) như --color-cart-subtotal-bg của mẫu, dính khi cuộn */
.cart-sum { background: var(--bench); border-radius: var(--radius); padding: 26px 24px; position: sticky; top: 100px; }
.cart-sum__title { margin: 0 0 16px; font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: var(--ink); }
.cart-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.cart-sum__row--total { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 14px; color: var(--ink); }
.cart-sum__row--total b { font-size: 21px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-sum__note { margin: 2px 0 16px; font-size: 12.5px; color: var(--c-muted); line-height: 1.6; }

.cart-continue {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    text-decoration: underline; text-underline-offset: 4px;
}
.cart-continue:hover { color: var(--ink); }
.cart-continue .ico-svg { width: 16px; height: 16px; }

/* ---------- Giỏ hàng trống ---------- */
.empty-cart { padding: 40px 24px 48px; text-align: center; }
.empty-cart__art { width: 132px; height: 132px; margin: 0 auto 26px; position: relative; }
.empty-cart__art::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .07), rgba(0, 0, 0, 0) 70%);
}
.empty-cart__art svg { position: relative; width: 100%; height: 100%; display: block; color: var(--ink); }
.empty-cart__art svg .ec-accent { color: var(--color-main); }
.empty-cart h2 {
    font-family: var(--font-serif); font-size: 26px; font-weight: 500;
    letter-spacing: .3px; margin: 0 0 10px; color: var(--ink);
}
.empty-cart .empty-cart__desc { margin: 0 auto 26px; max-width: 520px; font-size: 15px; color: var(--c-muted); line-height: 1.7; }
.empty-cart__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.empty-cart__actions .btn2 svg { width: 18px; height: 18px; flex-shrink: 0; }

.empty-cart__suggest { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--c-border); }
.empty-cart__suggest-title {
    margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--c-muted);
}
.empty-cart__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.empty-cart__chips a {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
    border: 1px solid var(--c-border); background: #fff; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--ink); transition: .2s all;
}
.empty-cart__chips a svg { width: 15px; height: 15px; color: var(--muted); }
.empty-cart__chips a:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.empty-cart__chips a:hover svg { color: #fff; }

.empty-cart__perks {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin: 34px 0 0; padding: 24px 0 0; border-top: 1px solid var(--c-border); list-style: none;
}
.empty-cart__perks li { display: flex; align-items: center; justify-content: center; gap: 11px; text-align: left; }
.empty-cart__perks svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink); }
.empty-cart__perks b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.empty-cart__perks span { font-size: 12.5px; color: var(--c-muted); }


/* Dòng sản phẩm trong giỏ — chỉ kẻ viền dưới mảnh, ảnh viền nhạt như card của mẫu */
.procart {
    display: grid; grid-template-columns: 96px 1fr 130px 130px 44px; gap: 16px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.procart-label {
    padding: 0 0 12px; border-bottom: 1px solid var(--rule);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
.pic-procart { text-align: center; }
.pic-procart img { max-height: 96px; height: inherit; border: 1px solid var(--rule); background: #fff; }
.pic-procart .pic-ph { display: inline-flex; width: 90px; height: 90px; align-items: center; justify-content: center; background: var(--bench); color: #B9BEC5; border: 1px solid var(--rule); }
.pic-procart .pic-ph svg { width: 34px; height: 34px; }
/* Nút xoá: icon trần, rê vào mới đỏ — gọn như mẫu */
.act-procart { text-align: center; }
.del-procart {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; background: none; color: var(--muted); border-radius: 0;
    cursor: pointer; transition: .18s color;
}
.del-procart svg { width: 17px; height: 17px; flex-shrink: 0; }
.del-procart span { display: none; }
.del-procart:hover { color: var(--color-main); }
.name-procart a { font-size: 14px; color: var(--ink); display: block; font-weight: 500; line-height: 1.45; }
.name-procart a:hover { color: var(--color-main); }
.properties-procart { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.properties-procart p { display: inline-block; margin: 0 12px 0 0; }
.properties-procart p strong { font-weight: 600; color: var(--muted); }
.quantity-counter-procart {
    border: 1px solid var(--rule); width: 100%; max-width: 112px; height: 36px; margin: 0 auto;
    text-align: center; border-radius: 0; display: flex; align-items: stretch; justify-content: space-between;
}
.counter-procart { background: transparent; border: 0; width: 30%; color: var(--ink-2); outline: none; cursor: pointer; font-size: 17px; line-height: 1; }
.counter-procart:hover:not(:disabled) { background: var(--bench); }
.counter-procart:disabled { opacity: .32; cursor: not-allowed; }
.quantity-counter-procart .quantity-procart:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.stock-procart { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.quantity-counter-procart .quantity-procart {
    width: 40%; border: 0; outline: none; padding: 0; color: var(--ink); text-align: center;
    font-size: 13.5px; font-weight: 600;
}
.qty-procart-col { text-align: center; }
.linetotal-procart { text-align: right; font-weight: 600; color: var(--ink); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.procart-label .linetotal-procart { color: var(--muted); font-weight: 600; font-family: inherit; }

.form-field .req { color: var(--flag); }

/* Toast báo đã thêm vào giỏ (do public/js/cart.js dựng) */
.cart-notify {
    position: fixed; top: 20px; right: 20px; z-index: 1100; display: flex; gap: 12px; align-items: flex-start;
    background: var(--paper); border-left: 3px solid var(--ok); box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    padding: 14px 18px; max-width: 340px; opacity: 0; transform: translateX(20px); transition: .3s all;
}
.cart-notify.show { opacity: 1; transform: translateX(0); }
.cart-notify i { color: var(--ok); font-size: 20px; }
.cart-notify b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.cart-notify--warn { border-left-color: var(--flag); }
.cart-notify--warn i { color: var(--flag); }
.cart-notify p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* ============================================================
   GIỎ HÀNG DẠNG DRAWER — trượt ra từ cạnh phải
   ============================================================ */
/* khoá cuộn nền; padding bù đúng bề rộng thanh cuộn (JS gán --sbw) để trang không giật ngang */
body.cart-drawer-open { overflow: hidden; }

.cart-drawer { position: fixed; inset: 0; z-index: 2000; }

/* Mở: chậm hơn, giảm tốc kiểu iOS. Đóng: nhanh và dứt khoát. */
.cart-drawer__overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
    opacity: 0; transition: opacity .24s ease-in;
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; transition: opacity .42s ease-out; }

.cart-drawer__panel {
    position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 420px;
    display: flex; flex-direction: column; background: #fff; box-shadow: -6px 0 34px rgba(0, 0, 0, .2);
    /* translate3d + will-change: đẩy hẳn sang GPU, không repaint từng khung */
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    transition: transform .26s cubic-bezier(.4, 0, .9, .45);
}
.cart-drawer.is-open .cart-drawer__panel {
    transform: translate3d(0, 0, 0);
    transition: transform .46s cubic-bezier(.32, .72, 0, 1);
}

/* Nội dung trôi vào so le — chỉ chạy ngay sau khi mở, không lặp lại khi đổi số lượng */
@keyframes cd-slide-in {
    from { opacity: 0; transform: translate3d(26px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes cd-fade-up {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}
.cart-drawer.just-opened .cd-item,
.cart-drawer.just-opened .cd-empty { animation: cd-slide-in .44s cubic-bezier(.32, .72, 0, 1) both; }
.cart-drawer.just-opened .cd-item:nth-child(1) { animation-delay: .10s; }
.cart-drawer.just-opened .cd-item:nth-child(2) { animation-delay: .16s; }
.cart-drawer.just-opened .cd-item:nth-child(3) { animation-delay: .21s; }
.cart-drawer.just-opened .cd-item:nth-child(4) { animation-delay: .25s; }
.cart-drawer.just-opened .cd-item:nth-child(5) { animation-delay: .28s; }
.cart-drawer.just-opened .cd-item:nth-child(n+6) { animation-delay: .30s; }
.cart-drawer.just-opened .cd-empty { animation-delay: .14s; }
.cart-drawer.just-opened .cart-drawer__foot { animation: cd-fade-up .42s cubic-bezier(.32, .72, 0, 1) .2s both; }

/* Đầu drawer TRẮNG chữ đen, tiêu đề serif — theo drawer "Cart" của mẫu */
.cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.cart-drawer__title {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: .3px;
}
.cart-drawer__title svg { width: 20px; height: 20px; color: var(--ink); }
.cart-drawer__badge {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--signal); color: #fff; font-size: 11px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
}
.cart-drawer__close {
    width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
    padding: 0; transition: .2s all;
}
.cart-drawer__close svg { width: 17px; height: 17px; }
.cart-drawer__close:hover { opacity: .6; }

.cart-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px; }

.cd-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.cd-pic { flex-shrink: 0; width: 74px; height: 88px; background: var(--c-soft); display: block; }
.cd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #B9BEC5; }
.cd-ph svg { width: 26px; height: 26px; }

.cd-info { flex: 1 1 auto; min-width: 0; }
.cd-name {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-name:hover { color: var(--c-gold-d); }
.cd-props { display: block; margin-top: 3px; font-size: 12px; color: var(--c-muted); }
.cd-price { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--ink); }

.cd-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--c-border); }
.cd-qty button {
    width: 28px; height: 28px; border: 0; background: #fff; color: var(--ink);
    font-size: 15px; line-height: 1; cursor: pointer; transition: .18s all;
}
.cd-qty button:hover:not(:disabled) { background: var(--bench); }
.cd-qty button:disabled { opacity: .32; cursor: not-allowed; }
.cd-qty input { width: 38px; height: 28px; border: 0; border-left: 1px solid var(--c-border); border-right: 1px solid var(--c-border); text-align: center; font-size: 13px; font-weight: 700; padding: 0; }
.cd-qty input:focus { outline: 2px solid var(--color-main); outline-offset: -2px; }
.cd-left { display: block; margin-top: 5px; font-size: 12px; color: var(--c-muted); }

.cd-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.cd-del {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border); background: #fff; color: var(--muted); cursor: pointer; padding: 0; transition: .18s all;
}
.cd-del svg { width: 13px; height: 13px; }
.cd-del:hover { background: var(--c-sale); border-color: var(--c-sale); color: #fff; }
.cd-line { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.cd-empty { text-align: center; padding: 54px 10px; }
.cd-empty svg { width: 58px; height: 58px; color: #B9BEC5; }
.cd-empty b { display: block; margin: 14px 0 5px; font-family: var(--font-display); font-size: 16px; font-weight: 700; text-transform: uppercase; }
.cd-empty p { margin: 0 0 18px; font-size: 13.5px; color: var(--c-muted); }

.cart-drawer__foot { flex-shrink: 0; padding: 14px 18px 18px; border-top: 1px solid var(--c-border); background: var(--bench); }
.cart-drawer__sum { display: flex; align-items: baseline; justify-content: space-between; }
.cart-drawer__sum span { font-size: 13.5px; color: var(--c-muted); }
.cart-drawer__sum b { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-drawer__note { margin: 4px 0 12px; font-size: 12px; color: var(--c-muted); }
.cart-drawer__cont {
    display: block; width: 100%; margin-top: 9px; padding: 9px 0; border: 0; background: none;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--c-muted); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.cart-drawer__cont:hover { color: var(--ink); }

/* Mobile: chừa mép trái để thấy vẫn còn trang phía sau, bấm ra ngoài là đóng */
@media (max-width: 480px) {
    .cart-drawer__panel { max-width: 88%; }
    .cart-drawer__body { padding: 4px 14px; }
    .cd-pic { width: 62px; height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-drawer__panel, .cart-drawer__overlay { transition-duration: .01ms; }
    .cart-drawer.just-opened .cd-item,
    .cart-drawer.just-opened .cd-empty,
    .cart-drawer.just-opened .cart-drawer__foot { animation: none; }
}

/* ============================================================
   MODAL ĐĂNG NHẬP / ĐĂNG KÝ
   ============================================================ */
body.modal-open { overflow: hidden; }

.auth-modal {
    position: fixed; inset: 0; z-index: 2100;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease-in; }
.auth-modal.is-open .auth-modal__overlay { opacity: 1; transition: opacity .34s ease-out; }

.auth-modal__box {
    position: relative; width: 100%; max-width: 430px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column; background: #fff; box-shadow: 0 28px 70px rgba(8, 9, 12, .28);
    opacity: 0; transform: translate3d(0, 18px, 0) scale(.97);
    transition: opacity .18s ease-in, transform .2s cubic-bezier(.4, 0, .9, .45), max-width .34s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
}
.auth-modal.is-open .auth-modal__box {
    opacity: 1; transform: translate3d(0, 0, 0) scale(1);
    transition: opacity .28s ease-out, transform .42s cubic-bezier(.32, .72, 0, 1), max-width .34s cubic-bezier(.32, .72, 0, 1);
}
/* Tab đăng ký cần chỗ cho 2 cột → hộp nới rộng, chuyển mượt khi đổi tab */
.auth-modal.is-register .auth-modal__box { max-width: 640px; }

/* Đầu modal TRẮNG tối giản, tiêu đề serif — theo trang tài khoản của mẫu */
.auth-modal__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 22px 4px; background: #fff; color: var(--ink); flex-shrink: 0;
}
.auth-modal__title {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: .3px;
}
.auth-modal__title svg { width: 21px; height: 21px; color: var(--ink); }
.auth-modal__close {
    width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 0; transition: .2s all;
}
.auth-modal__close svg { width: 17px; height: 17px; }
.auth-modal__close:hover { opacity: .6; }

/* Tab dạng chữ + gạch chân đen (không còn nền xám) */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-border); flex-shrink: 0; margin-top: 10px; }
.auth-tab {
    padding: 14px 8px; border: 0; background: var(--paper); cursor: pointer;
    font-family: var(--font-display); font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; color: var(--muted); border-bottom: 2px solid transparent; transition: .2s all;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active { background: var(--paper); color: var(--ink); border-bottom-color: var(--signal); }

.auth-modal__body { padding: 20px 22px 18px; overflow-y: auto; }
.auth-panel { display: none; }
.auth-panel.is-active { display: block; animation: auth-fade .3s ease both; }
@keyframes auth-fade { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.auth-full { grid-column: 1 / -1; }
.auth-grid .auth-check { margin-bottom: 16px; }
.auth-grid .auth-check a { color: var(--c-gold-d); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.auth-panel .form-field { margin-bottom: 14px; }
.auth-panel .form-field label { font-size: 12px; letter-spacing: .3px; }
.auth-panel .form-field input { height: 44px; font-size: 14px; }
.auth-panel .req { color: var(--c-sale); }

.auth-pass { position: relative; }
.auth-pass input { padding-right: 44px; }
.auth-pass__eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; transition: .18s color;
}
.auth-pass__eye svg { width: 18px; height: 18px; }
.auth-pass__eye:hover, .auth-pass__eye.is-on { color: var(--c-gold-d); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 16px; }
.auth-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.auth-check input { width: 15px; height: 15px; accent-color: var(--color-main); }
/* "Quên mật khẩu?" là <button> chứ không phải <a>: nó chuyển bước ngay trong
   modal, không đi tới trang nào. Vẫn phải trông y hệt một liên kết, nên xoá sạch
   khung viền + nền mặc định của nút — thiếu đoạn này là nó hiện ra như một cái
   nút xám nằm lệch hẳn khỏi hàng. */
.auth-link {
    font-size: 13px; font-weight: 600; color: var(--c-gold-d);
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; line-height: inherit;
}
.auth-link:hover { text-decoration: underline; }

/* Vạch "hoặc" ngăn giữa nút gửi biểu mẫu và nút đăng nhập mạng xã hội */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.auth-or span { font-size: 12px; letter-spacing: .4px; color: var(--c-muted); text-transform: uppercase; }

/* Nút mạng xã hội (Google, Facebook): nền trắng viền mảnh để không tranh chỗ với
   nút chính, chỉ mỗi logo giữ đúng màu thương hiệu cho khách nhận ra ngay. */
.btn-social {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 48px; padding: 0 16px;
    border: 1px solid var(--rule); border-radius: 2px; background: #fff;
    font-size: 14px; font-weight: 700; color: var(--ink); transition: .18s all;
}
.btn-social + .btn-social { margin-top: 10px; }
.btn-social svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-facebook svg { color: #1877f2; }
.btn-facebook:hover { border-color: #1877f2; background: var(--bench); color: var(--ink); }
.btn-google:hover { border-color: #4285f4; background: var(--bench); color: var(--ink); }

.auth-swap { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--c-muted); }
.auth-swap button {
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 700; color: var(--c-gold-d); text-decoration: underline; text-underline-offset: 2px;
}
.auth-swap button:hover { color: var(--ink); }

/* Băng thông báo trong modal */
.auth-alert {
    margin: 0 0 14px; padding: 10px 13px; font-size: 13px; line-height: 1.55;
    border-left: 3px solid; border-radius: 2px;
}
.auth-alert.is-error   { background: var(--flag-tint); border-color: var(--c-sale); color: var(--flag); }
.auth-alert.is-success { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.auth-alert.is-info    { background: var(--warn-tint); border-color: var(--color-main); color: var(--warn); }

/* Dòng báo kết quả của ba form khách gửi (liên hệ, thu mua, đăng ký nhận tin).
   Cùng bảng màu với .auth-alert để cả website nói cùng một ngôn ngữ — xanh là
   xong, đỏ là hỏng — thay cho hộp alert() của trình duyệt trước đây. */
.form-status {
    margin: 14px 0 0; padding: 10px 13px; font-size: 13px; line-height: 1.55;
    border-left: 3px solid; border-radius: 2px;
}
.form-status.is-error   { background: var(--flag-tint); border-color: var(--c-sale); color: var(--flag); }
.form-status.is-success { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }

/* Bước nhập mã xác thực — ẩn thanh tab vì không thuộc tab nào */
.auth-modal.is-verify .auth-tabs { display: none; }
.auth-verify__intro { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.auth-verify__intro svg { width: 34px; height: 34px; flex-shrink: 0; color: var(--c-gold-d); }
.auth-verify__intro p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.auth-verify__intro b { color: var(--ink); }

.form-field input.auth-code {
    height: 58px; text-align: center; font-family: var(--font-mono);
    font-size: 24px; font-weight: 500; letter-spacing: 12px; text-indent: 12px;
}
.field-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--c-muted); }
/* Lỗi validate dưới ô nhập — form tra cứu đơn dùng class này nhưng trước giờ chưa có kiểu */
.field-error { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--c-sale); }
.auth-countdown { font-size: 12.5px; color: var(--c-muted); margin-left: 4px; }
.auth-swap button:disabled { color: var(--c-muted); text-decoration: none; cursor: not-allowed; }

/* ============================================================
   CHUÔNG THÔNG BÁO trên header (chỉ khi khách đã đăng nhập)
   ============================================================ */

.header-notif { position: relative; }
.header-notif__btn {
    position: relative; padding: 6px 4px; display: flex; align-items: center;
    border: 0; cursor: pointer; background: none; color: #fff; transition: opacity .2s ease;
}
.header-notif__btn i { font-size: 19px; line-height: 1; }
.header-notif__btn:hover, .header-notif.open .header-notif__btn { opacity: .75; }
.header-notif__badge {
    position: absolute; top: -2px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: var(--signal); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
}

/* Popup dùng lại đúng khuôn .header-account__menu bên dưới (nền trắng, viền,
   đổ bóng) để hai popup cạnh nhau không lệch phong cách. */
.header-notif__menu {
    position: absolute; top: 100%; right: 0; width: 340px; max-width: calc(100vw - 24px);
    background: #fff; z-index: 1200; border: 1px solid var(--c-border); box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .22s all;
}
.header-notif.open .header-notif__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.header-notif__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 15px; border-bottom: 1px solid var(--c-border);
}
.header-notif__title { font-size: 14px; font-weight: 700; color: var(--ink); }
/* Nút tiếng chuông đẩy sát phải, "đánh dấu đã đọc" bám ngay sau nó */
.header-notif__sound {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius);
    background: none; color: var(--ink); cursor: pointer; transition: background .15s, color .15s;
}
.header-notif__sound:hover { background: var(--c-soft); }
.header-notif__sound i { font-size: 15px; line-height: 1; }
.header-notif__sound.is-off { color: var(--c-muted); }
.header-notif__sound .header-notif__sound-off { display: none; }
.header-notif__sound.is-off .header-notif__sound-on { display: none; }
.header-notif__sound.is-off .header-notif__sound-off { display: inline-block; }

.header-notif__readall {
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; color: var(--c-gold-d);
}
.header-notif__readall:hover { text-decoration: underline; }
.header-notif__readall:disabled { color: var(--c-muted); cursor: default; text-decoration: none; }

.header-notif__list { max-height: 360px; overflow-y: auto; }
.header-notif__empty { margin: 0; padding: 26px 15px; text-align: center; font-size: 13px; color: var(--c-muted); }

.header-notif__item {
    display: block; padding: 11px 15px; border-bottom: 1px solid var(--rule-soft);
    color: var(--ink); text-decoration: none; transition: background .15s;
}
.header-notif__item:hover { background: var(--c-soft); }
/* Chưa đọc: nền đỏ rất nhạt + vạch màu thương hiệu bên trái. */
/* Chưa đọc: nền mực kiểm định rất nhạt + vạch mực bên trái. KHÔNG dùng đỏ —
   ở website này đỏ chỉ có nghĩa là hỏng, mà một thông báo chưa đọc thì không hỏng. */
.header-notif__item.is-unread { background: var(--signal-tint); box-shadow: inset 3px 0 0 var(--signal); }
.header-notif__item-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; margin-bottom: 2px; }
.header-notif__item-body { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.header-notif__item-time { display: block; margin-top: 4px; font-size: 11px; color: var(--c-muted); }

.header-notif__foot { padding: 10px 15px; text-align: center; border-top: 1px solid var(--c-border); }
.header-notif__foot a { font-size: 13px; font-weight: 600; color: var(--c-gold-d); }
.header-notif__foot a:hover { text-decoration: underline; }

/* Toast realtime (góc phải dưới) — báo đơn vừa đổi trạng thái ngay khi đang xem trang */
.rt-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px));
}
.rt-toast {
    display: block; padding: 12px 14px; background: var(--ink); color: #fff; text-decoration: none;
    border-left: 3px solid var(--color-main); box-shadow: var(--shadow-md);
    animation: rtToastIn .25s ease-out;
}
.rt-toast__title { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.rt-toast__body { display: block; font-size: 12px; color: var(--rule); line-height: 1.45; }
@keyframes rtToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rt-toast { animation: none; } }

@media (max-width: 767px) {
    /* Header dồn xuống một hàng đầy chiều ngang: popup neo theo mép phải màn hình
       thay vì mép nút, nếu không nó tràn ra ngoài khung nhìn. */
    .header-notif__menu { position: fixed; right: 12px; left: auto; width: calc(100vw - 24px); }
    .header-notif__btn { padding: 0 12px; }
}

/* Menu tài khoản trên header khi đã đăng nhập */
.header-account { position: relative; }
.header-account__btn {
    padding: 6px 0; display: flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
    background: none; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 500;
    white-space: nowrap; transition: opacity .2s ease;
}
.header-account__btn i { font-size: 18px; line-height: 1; }
.header-account:hover .header-account__btn { opacity: .75; }
.header-account__menu {
    position: absolute; top: 100%; right: 0; min-width: 205px; background: #fff; z-index: 1200;
    border: 1px solid var(--c-border); box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .22s all;
}
.header-account:hover .header-account__menu,
.header-account:focus-within .header-account__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.header-account__menu a,
.header-account__menu button {
    display: block; width: 100%; text-align: left; padding: 11px 15px; border: 0; background: none;
    font-family: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
    border-bottom: 1px solid var(--rule-soft);
}
.header-account__menu form:last-child button { border-bottom: 0; color: var(--c-sale); font-weight: 600; }
.header-account__menu a:hover,
.header-account__menu button:hover { background: var(--c-soft); color: var(--c-gold-d); }

.auth-modal__foot {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
    padding: 12px 18px; border-top: 1px solid var(--c-border); background: var(--bench);
    font-size: 12.5px; color: var(--c-muted);
}
.auth-modal__foot svg { width: 15px; height: 15px; color: var(--c-gold-d); }
.auth-modal__foot a { font-weight: 700; color: var(--ink); }
.auth-modal__foot a:hover { color: var(--c-gold-d); }

/* Màn hẹp: form đăng ký về lại 1 cột, hộp không nới rộng nữa */
@media (max-width: 600px) {
    .auth-grid { grid-template-columns: 1fr; }
    .auth-modal.is-register .auth-modal__box { max-width: 430px; }
}

@media (max-width: 480px) {
    .auth-modal { padding: 12px; align-items: flex-end; }
    .auth-modal__box,
    .auth-modal.is-register .auth-modal__box { max-width: none; max-height: calc(100vh - 24px); }
    .auth-modal__body { padding: 16px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-modal__box, .auth-modal__overlay { transition-duration: .01ms; }
    .auth-panel.is-active { animation: none; }
}

/* ---------- Đặt hàng: báo lỗi + tóm tắt tiền khi thành công ---------- */
.cart-alert {
    margin: 0 0 16px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
    border-left: 3px solid; border-radius: 2px;
}
.cart-alert.is-error   { background: var(--flag-tint); border-color: var(--c-sale); color: var(--flag); }
.cart-alert.is-success { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }

.hint-inline { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-muted); }

.order-success__sum {
    max-width: 340px; margin: 18px auto 20px; padding: 14px 16px;
    border: 1px solid var(--c-border); background: var(--bench); text-align: left;
}
.order-success__sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.order-success__sum span { font-size: 13.5px; color: var(--c-muted); }
.order-success__sum b { font-size: 14px; color: var(--ink); }
.order-success__sum .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--c-border); }
.order-success__sum .is-total b { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.order-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

@media (max-width: 600px) {
    .order-success__actions { flex-direction: column; }
    .order-success__actions .btn2 { width: 100%; }
}

/* ============================================================
   TRANG THANH TOÁN — layout riêng, chỉ logo + form + thông tin
   ============================================================ */
/* Khuôn "payment-grade" kiểu Stripe Checkout: nền sáng dịu, thẻ trắng bo góc
   đổ bóng mềm, ô nhập floating label — mềm mại và tinh hơn phần còn lại của web. */
body.checkout-page { background: var(--bench); }
.co-wrap { max-width: 1120px; margin: 0 auto; width: calc(100% - 32px); }

/* ---- Ô nhập floating label (.ff): nhãn nằm trong ô, gõ/chọn là nổi lên ---- */
.ff { position: relative; margin-bottom: 14px; }
.ff:last-child { margin-bottom: 0; }
.ff input, .ff select {
    width: 100%; height: 54px; border: 1px solid var(--rule); border-radius: var(--radius);
    background: #fff; padding: 21px 14px 5px; font-size: 14.5px; font-family: inherit;
    color: var(--ink); outline: 0; transition: border-color .15s ease, box-shadow .15s ease;
}
.ff input:hover, .ff select:hover { border-color: var(--muted); }
.ff input:focus, .ff select:focus { border-color: var(--signal); }
.ff > label {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--muted); pointer-events: none; margin: 0;
    max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: all .16s ease;
}
/* Nổi nhãn khi: đang gõ, đã có chữ, hoặc là ô select (select luôn hiện chữ bên trong) */
.ff input:focus ~ label,
.ff input:not(:placeholder-shown) ~ label,
.ff--select > label {
    top: 9px; transform: none; font-size: 11px; font-weight: 600;
    letter-spacing: .4px; color: var(--muted); text-transform: uppercase;
}
.ff--select select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 38px; }
.ff--select select:disabled { background: var(--bench); color: var(--muted); cursor: not-allowed; }
.ff--select > svg {
    position: absolute; top: 50%; right: 13px; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.ff--select select:disabled ~ svg { opacity: .4; }
/* Fallback JSON hỏng: select bị thay bằng input gõ tay — giấu mũi tên đi */
.ff--select input ~ svg { display: none; }

/* Dòng bước trên đầu form: Giỏ hàng › Thông tin › Hoàn tất */
.co-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 -8px; font-size: 12.5px; color: var(--muted); }
.co-crumbs a { color: var(--ink); }
.co-crumbs a:hover { color: var(--color-main); }
.co-crumbs .is-current { color: var(--ink); font-weight: 600; }
.co-crumbs .sep { opacity: .45; }

/* Header ĐEN đồng bộ trang chính (logo bản sáng) */
/* Header trang thanh toán: giấy trắng + gạch mảnh, y hệt header trang chính —
   khách vừa bấm "Đặt hàng" mà chuyển sang một thanh đen khác hẳn là khoảnh khắc
   dễ nghi ngờ nhất trong cả luồng mua. */
.co-head { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 14px 0; }
.co-head .co-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.co-logo { display: flex; align-items: center; }
.co-logo img { max-height: 42px; width: auto; display: block; }
.co-head__right { display: flex; align-items: center; gap: 24px; }
.co-secure {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.co-secure svg { width: 16px; height: 16px; color: var(--ok); }
.co-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.co-back svg { width: 15px; height: 15px; }
.co-back:hover { color: var(--signal); }

.co-main { padding: 30px 0 52px; min-height: 60vh; }

/* Lưới: form trái co giãn — cột tóm tắt 400px bên phải */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }

/* ---- Thẻ bước TRẮNG bo góc, bóng mềm kiểu Stripe ---- */
.co-form { display: grid; gap: 18px; min-width: 0; }
.co-card {
    background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 26px 28px; box-shadow: none;
}
.co-card__title {
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
    font-family: var(--font-serif); font-size: 19px; font-weight: 500;
    text-transform: none; letter-spacing: .2px; color: var(--ink);
}
.co-step {
    width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500;
    font-family: var(--font-mono);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Đóng/mở khối: tiêu đề bấm được, mũi tên tròn xoay theo trạng thái ---- */
[data-co-toggle] { cursor: pointer; user-select: none; }
.co-card__chev {
    margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid var(--rule); background: #fff; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center; transition: .2s all;
}
.co-card__chev svg { width: 14px; height: 14px; transition: transform .25s ease; }
[data-co-toggle]:hover .co-card__chev { border-color: var(--ink); color: var(--ink); }
/* Khối đóng: giấu hết trừ tiêu đề, mũi tên xoay ngược */
.co-card.is-closed > *:not(.co-card__title),
.co-sum.is-closed > *:not(.co-sum__title) { display: none; }
.co-card.is-closed .co-card__title, .co-sum.is-closed .co-sum__title { margin-bottom: 0; }
.co-card.is-closed .co-card__chev svg, .co-sum.is-closed .co-card__chev svg { transform: rotate(180deg); }
/* Tiêu đề thẻ tóm tắt cũng là hàng flex để mũi tên đứng sát phải */
.co-sum__title { display: flex; align-items: center; gap: 6px; }

/* Hàng field: 2 cột bằng nhau, mobile tự xuống 1 cột */
.co-row { display: grid; gap: 0 14px; }
.co-row--2 { grid-template-columns: 1fr 1fr; }
.hint-inline { font-weight: 400; color: var(--c-muted); }

.co-hint-note {
    margin: 14px 0 0; padding: 10px 13px; background: var(--bench); border-radius: var(--radius);
    font-size: 12px; line-height: 1.55; color: var(--c-muted);
}

/* ---- Phương thức thanh toán ---- */
.co-pay { display: grid; gap: 10px; }
.co-pay__opt { display: block; cursor: pointer; }
.co-pay__opt input { position: absolute; opacity: 0; pointer-events: none; }
.co-pay__box {
    display: flex; align-items: center; gap: 13px; padding: 15px 16px;
    border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; transition: .18s all;
}
.co-pay__box > svg { width: 23px; height: 23px; flex-shrink: 0; color: var(--c-muted); }
.co-pay__text { flex: 1 1 auto; font-size: 12.5px; color: var(--c-muted); line-height: 1.5; }
.co-pay__text b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.co-pay__tick {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--rule);
    display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: .18s all;
}
.co-pay__tick svg { width: 12px; height: 12px; }
.co-pay__opt:hover .co-pay__box { border-color: var(--muted); box-shadow: none; }
.co-pay__opt input:checked + .co-pay__box { border-color: var(--ink); background: var(--bench); box-shadow: 0 0 0 1px var(--ink); }
.co-pay__opt input:checked + .co-pay__box > svg { color: var(--ink); }
.co-pay__opt input:checked + .co-pay__box .co-pay__tick { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-pay__opt input:focus-visible + .co-pay__box { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Cửa hàng tắt hết hình thức thanh toán — nói lý do thay vì để phần này trống */
.co-pay__none {
    margin: 0; padding: 13px 15px; background: var(--warn-tint); border-left: 3px solid var(--warn);
    border-radius: var(--radius); font-size: 13px; line-height: 1.6; color: var(--warn);
}

/* ---- Khối hướng dẫn chuyển khoản (partials/bank-transfer) — trung tính, viền nhạt ---- */
.co-bank {
    margin-top: 14px; padding: 16px 18px;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bench);
    text-align: left;
}
.co-bank__title {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em; color: var(--ink);
}
.co-bank__title svg { width: 18px; height: 18px; color: var(--ink); }

/* Bảng thông tin bên trái, mã QR bên phải; màn hẹp thì QR xuống dưới */
.co-bank__body { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.co-bank__rows { flex: 1 1 260px; margin: 0; min-width: 0; }
.co-bank__row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 0; border-bottom: 1px dashed var(--rule);
}
.co-bank__row:last-child { border-bottom: 0; }
.co-bank__row dt { flex: 0 0 96px; font-size: 12.5px; color: var(--c-muted); }
.co-bank__row dd {
    flex: 1 1 auto; margin: 0; min-width: 0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13.5px; color: var(--ink); word-break: break-word;
}
.co-bank__row dd b { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.co-bank__code { color: var(--color-main); }
.co-bank__soon { font-size: 12.5px; color: var(--c-muted); }

.co-copy {
    flex-shrink: 0; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 0;
    background: #fff; font-size: 11.5px; font-weight: 600; color: var(--c-muted);
    cursor: pointer; transition: .15s all;
}
.co-copy:hover { border-color: var(--ink); color: var(--ink); }
.co-copy.is-done { border-color: var(--ok); color: var(--ok); }

.co-bank__qr { flex: 0 0 auto; margin: 0; text-align: center; }
.co-bank__qr img {
    display: block; width: 118px; height: 118px; object-fit: contain;
    border: 1px solid var(--rule); border-radius: 0; background: #fff; padding: 4px;
}
.co-bank__qr figcaption { margin-top: 5px; font-size: 11.5px; color: var(--c-muted); }

.co-bank__note {
    margin: 12px 0 0; padding: 8px 11px; background: #fff; border: 1px solid var(--rule); border-radius: 0;
    font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.co-bank__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--c-muted); }

.co-submit { margin-top: 20px; border-radius: var(--radius); padding: 17px 26px; font-size: 15px; letter-spacing: .3px; }

.co-terms { margin: 10px 0 0; font-size: 12px; text-align: center; color: var(--c-muted); }
.co-terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.co-terms a:hover { color: var(--color-main); }

.co-alert { margin: 0; padding: 12px 15px; font-size: 13.5px; line-height: 1.55; border-left: 3px solid; border-radius: var(--radius); }
.co-alert.is-error   { background: var(--flag-tint); border-color: var(--c-sale); color: var(--flag); }
.co-alert.is-success { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
/* is-warn: giá/tồn kho vừa đổi so với lúc khách thêm vào giỏ — nhắc chứ không phải lỗi */
.co-alert.is-warn    { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }

/* ---- Cột tóm tắt: dính theo màn khi cuộn form dài ---- */
.co-aside { min-width: 0; }
/* Thẻ tóm tắt trắng bo góc, bóng mềm — dính theo màn khi cuộn */
.co-sum {
    position: sticky; top: 24px; background: #fff; color: var(--ink);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px;
    box-shadow: none;
}
.co-sum__title { margin: 0 0 14px; font-family: var(--font-serif); font-size: 18px; font-weight: 500; text-transform: none; letter-spacing: .2px; color: var(--ink); }
.co-sum__items { max-height: 300px; overflow-y: auto; margin-bottom: 14px; }

.co-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.co-item:last-child { border-bottom: 0; }
.co-item__pic { position: relative; width: 54px; height: 64px; flex-shrink: 0; background: var(--bench); border-radius: var(--radius); border: 1px solid var(--rule-soft); }
.co-item__pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
.co-ph { display: block; width: 100%; height: 100%; background: var(--rule-soft); border-radius: var(--radius); }
.co-item__qty {
    position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.co-item__info { flex: 1 1 auto; min-width: 0; }
.co-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.co-item__props { display: block; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
.co-item__price { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Mã giảm giá ---- */
.co-voucher { margin: 4px 0 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.co-voucher__row { display: flex; gap: 8px; }
.co-voucher__input {
    flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 13px;
    letter-spacing: .5px; text-transform: uppercase; outline: none; transition: border-color .15s;
}
.co-voucher__input::placeholder { letter-spacing: normal; text-transform: none; color: var(--muted); }
.co-voucher__input:focus { border-color: var(--ink); }
.co-voucher__btn {
    flex: 0 0 auto; height: 42px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--radius);
    background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px;
    cursor: pointer; transition: opacity .15s;
}
.co-voucher__btn:hover { opacity: .85; }
.co-voucher__btn:disabled { opacity: .5; cursor: default; }

.co-voucher__on { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-voucher__tag {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
    padding: 8px 13px; border-radius: var(--radius); background: var(--ok-tint); color: var(--ok);
}
.co-voucher__tag svg { width: 16px; height: 16px; flex-shrink: 0; }
.co-voucher__tag b {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-voucher__remove {
    flex-shrink: 0; border: 0; background: none; padding: 0; font-size: 13px;
    color: var(--c-muted); text-decoration: underline; cursor: pointer;
}
.co-voucher__remove:hover { color: var(--c-sale); }
.co-voucher__msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--flag); }
.co-voucher__msg.is-ok { color: var(--ok); }

/* Danh sách mã cửa hàng đang phát — bấm một cái là áp. */
.co-voucher__list { display: grid; gap: 8px; margin-top: 10px; }
.co-voucher__card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 10px 12px; border: 1px dashed var(--rule); border-radius: var(--radius); background: #fff;
    text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.co-voucher__card:hover { border-color: var(--ink); background: var(--bench); }
/* Mã chưa đủ điều kiện KHÔNG bị ẩn và cũng không bấm được: nó vẫn phải nói rõ còn
   thiếu bao nhiêu, vì đó vừa là câu trả lời "sao mã này không dùng được", vừa là
   lý do để khách mua thêm. */
.co-voucher__card.is-locked { cursor: default; background: var(--bench); border-style: solid; opacity: .75; }
.co-voucher__card.is-locked:hover { border-color: var(--rule); }
.co-voucher__info { min-width: 0; }
.co-voucher__card-code {
    display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    letter-spacing: .5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-voucher__card-note { display: block; margin-top: 2px; font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.co-voucher__off { flex-shrink: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--signal); }
.co-voucher__need { flex-shrink: 0; font-size: 12px; color: var(--c-muted); text-align: right; max-width: 45%; }

.co-sum__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.co-sum__line span { font-size: 13.5px; color: var(--c-muted); }
.co-sum__line b { font-size: 14px; color: var(--ink); font-weight: 600; }
/* Khoản giảm hiện màu khuyến mãi để mắt bắt được ngay giữa mấy dòng số đen. */
.co-sum__line.is-off b { color: var(--c-sale); }
.co-sum__line.is-total { margin-top: 8px; padding-top: 13px; border-top: 1px solid var(--rule); }
.co-sum__line.is-total span { font-size: 14px; font-weight: 500; color: var(--ink); }
.co-sum__line.is-total b { font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-sum__note { margin: 3px 0 0; font-size: 12px; color: var(--c-muted); line-height: 1.6; }

.co-sum__perks { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 9px; }
.co-sum__perks li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.co-sum__perks svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink); }

/* ---- Giỏ trống + đặt hàng thành công ---- */
.co-empty, .co-done { max-width: 560px; margin: 20px auto; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: none; padding: 44px 28px; text-align: center; }
.co-empty svg { width: 58px; height: 58px; color: #B9BEC5; }
.co-empty b { display: block; margin: 14px 0 5px; font-family: var(--font-serif); font-size: 20px; font-weight: 500; text-transform: none; }
.co-empty p { margin: 0 0 18px; font-size: 13.5px; color: var(--c-muted); }

.co-done__ico { width: 66px; height: 66px; color: var(--ok); }
/* Trang kết quả thanh toán dùng chung khuôn .co-done, chỉ đổi màu biểu tượng:
   xanh = đã thu tiền, vàng = còn đang chờ, đỏ = giao dịch không thành. */
.co-done__ico.is-wait { color: var(--warn); }
.co-done__ico.is-fail { color: var(--flag); }
.co-done h1 { margin: 14px 0 6px; font-family: var(--font-serif); font-size: 27px; font-weight: 500; text-transform: none; color: var(--ink); }
.co-done__code { margin: 0 0 4px; font-size: 14.5px; color: var(--c-muted); }
.co-done__code b { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: .06em; }
.co-done__sum { max-width: 330px; margin: 18px auto; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bench); text-align: left; }
.co-done__sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.co-done__sum span { font-size: 13.5px; color: var(--c-muted); }
.co-done__sum b { font-size: 14px; color: var(--ink); }
.co-done__sum .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--c-border); }
.co-done__sum .is-total b { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-done p { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; }
.co-done__hint { font-size: 13px; color: var(--c-muted); }
.co-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---- Chân trang tối giản ---- */
.co-foot { border-top: 1px solid var(--c-border); background: #fff; padding: 22px 0; }
.co-foot__brand { margin: 0 0 4px; font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.co-foot__info p { margin: 0 0 3px; font-size: 12.5px; color: var(--c-muted); }
.co-foot__info a { color: var(--ink); font-weight: 600; }
.co-foot__info a:hover { color: var(--c-gold-d); }
.co-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 10px; }
.co-foot__links a { font-size: 12.5px; color: var(--c-muted); }
.co-foot__links a:hover { color: var(--c-gold-d); text-decoration: underline; }
.co-foot__copy { margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) {
    .co-grid { grid-template-columns: 1fr; gap: 18px; }
    .co-sum { position: static; }
    .co-sum__items { max-height: none; }
    .co-aside { order: -1; }   /* xem đơn trước rồi mới điền form */
}

@media (max-width: 600px) {
    .co-wrap { width: calc(100% - 24px); }
    .co-card { padding: 20px 16px; border-radius: var(--radius); }
    .co-sum { padding: 20px 16px; border-radius: var(--radius); }
    .co-row--2 { grid-template-columns: 1fr; }
    .co-head__right .co-secure { display: none; }
    .co-logo img { max-height: 44px; }
    .co-empty, .co-done { padding: 32px 18px; }
    .co-done__actions { flex-direction: column; }
    .co-done__actions .btn2 { width: 100%; }
}

/* ---------- Trang Thương hiệu ----------
   Logo hãng vốn đủ mọi màu; đóng khung từng cái rồi để nguyên màu là một bảng
   màu hỗn loạn. Ở đây logo nằm trên nền giấy chụp, xám hoá lúc nghỉ và trở lại
   đúng màu khi rê chuột — hàng logo im lặng, chỉ cái đang được chú ý mới lên tiếng. */
.section-brands { padding: 24px 0 30px; display: flex; flex-direction: column; justify-content: center; }
.brands-lead {
    display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 14px;
    margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rule);
    font-size: 14.5px; color: var(--muted); text-align: left;
}
.brands-count {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--signal); background: var(--signal-tint); border: 0;
    padding: 5px 11px; border-radius: var(--radius);
}

.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.section-brands--grid { justify-content: flex-start; padding: 24px 0 56px; }

.brand-card { display: flex; flex-direction: column; background: var(--paper); transition: background .25s ease; }
.brand-card:hover { background: var(--bench); }

.brand-card__logo {
    height: 124px; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: transparent; border-bottom: 0;
}
.brand-card__logo img {
    max-height: 46px; max-width: 72%; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .55; transition: filter .25s ease, opacity .25s ease;
}
.brand-card:hover .brand-card__logo img { filter: none; opacity: 1; }
.brand-card__wordmark {
    font-family: var(--font-display); font-variation-settings: "wdth" 112;
    font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase;
    color: var(--ink); text-align: center; line-height: 1.1;
}

.brand-card__body { padding: 0 20px 4px; text-align: center; }
.brand-card__name {
    display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.brand-card__count { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }

.brand-card__go {
    margin-top: auto; padding: 16px 20px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
}
.brand-card:hover .brand-card__go { color: var(--signal); }
.brand-card__go svg { width: 13px; height: 13px; transition: transform .25s ease; }
.brand-card:hover .brand-card__go svg { transform: translateX(4px); }

.brands-empty { text-align: center; padding: 72px 20px; }
.brands-empty svg { width: 54px; height: 54px; color: #B9BEC5; }
.brands-empty p { margin: 16px 0 22px; font-size: 15px; color: var(--muted); }

/* ============================================================
   DẢI DỊCH VỤ — 4 cam kết ngay trên chân trang
   Canh trái và ngăn nhau bằng gạch dọc mảnh: bốn cột chữ canh giữa là khuôn
   quen thuộc nhất của các trang bán hàng làm sẵn.
   ============================================================ */
.usp { border-top: 1px solid var(--rule); background: var(--paper); padding: 60px 0 64px; margin-top: 80px; }
.usp .wrap-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.usp-item { text-align: left; padding: 0 30px; border-left: 1px solid var(--rule-soft); }
.usp-item:first-child { padding-left: 0; border-left: 0; }
.usp-item:last-child { padding-right: 0; }
.usp-item svg { width: 22px; height: 22px; margin: 0 0 16px; display: block; color: var(--signal); }
.usp-item h4 {
    margin: 0 0 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.usp-item p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* ============================================================
   CAROUSEL TRƯỢT NGANG (hscroll) — dùng chung cho thẻ danh mục
   & sản phẩm trang chủ
   ============================================================ */
.hscroll { position: relative; }
/* snap "proximity" chứ không "mandatory": nhịp cuối phải cuộn hết tầm để ô chót
   không bị cắt, mà điểm hết tầm lại không trùng mốc ô — mandatory sẽ kéo giật
   ngược lại một đoạn ngay sau khi animation dừng, trông y như bị nhảy. */
.hscroll-track {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-item { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
/* 4 ô sản phẩm / hàng — cùng nhịp với .product-grid ở trang danh sách, để lưới
   và dải trượt trên trang chủ không lệch cỡ ảnh nhau. */
.hscroll-track--products .hscroll-item { width: calc((100% - 4 * 22px) / 5); }
/* align-items mặc định của flex là stretch nên các ô đã cao bằng nhau; thẻ bên
   trong phải height:100% mới lấp đủ ô (xem .pcard) */
.hscroll-track--products .pcard { margin-bottom: 0; }
/* thẻ danh mục dọc nhỏ hơn: 5 ô / hàng */
.hscroll-track--cats { gap: 20px; }
.hscroll-track--cats .hscroll-item { width: calc((100% - 80px) / 5); }

.hscroll-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.hscroll-btn {
    width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper);
    color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; transition: all .2s ease;
}
.hscroll-btn svg { width: 17px; height: 17px; }
.hscroll-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.hscroll-count {
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
    letter-spacing: .1em; min-width: 38px; text-align: center;
}

/* ============================================================
   BANNER TRÀN VIỀN (dải trẻ em)
   ============================================================ */
.cat-banner { display: block; position: relative; margin-top: 56px; overflow: hidden; }
/* Hai selector cho cùng một khuôn ảnh: bản MỘT ảnh (thẻ <a>) và bản NHIỀU ảnh tự
   chạy (khối .slideshow dựng bởi partials/banner-slideshow). */
.cat-banner img,
.cat-banner .slideshow-item img {
    /* Giống banner đầu trang: KHÔNG cắt. Ảnh trẻ em có chữ ở hai mép, khoá chiều
       cao rồi cắt giữa là mất chữ. height:auto = luôn thấy trọn ảnh, và trên màn
       rộng nó tự cao hơn hẳn khuôn cũ (vốn bị chặn ở 720px). */
    width: 100%; height: auto; display: block; transition: .4s transform;
}
.cat-banner:hover img { transform: scale(1.02); }

/* ============================================================
   CHÂN TRANG — khối mực than đóng đáy website
   Dải đăng ký nhận tin không còn là một ô nhập lép vế cạnh mấy biểu tượng
   mạng xã hội: nó thành một lời mời có tiếng nói, chiếm trọn một dải.
   ============================================================ */
.footer { margin-top: 0; background: var(--ink-deep); color: #fff; }

.footer-top { padding: 56px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-top .wrap-content {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center; gap: 40px;
}

.footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; grid-column: 1; }
.footer-social span {
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: transparent;
    border: 1px solid rgba(255, 255, 255, .22); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px; transition: .25s all;
}
.footer-social a:hover { background: #fff; color: var(--ink); border-color: #fff; }

.footer-newsletter { grid-column: 2; display: flex; flex-direction: column; gap: 16px; }
.footer-newsletter .title {
    font-family: var(--font-display); font-variation-settings: "wdth" 110;
    font-size: clamp(19px, 2vw, 26px); font-weight: 700; line-height: 1.15;
    letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
/* flex-wrap: dòng báo kết quả nằm TRONG form nên nó cũng là một ô flex —
   không cho xuống hàng thì nó chen vào cùng hàng với ô nhập và nút bấm. */
.footer-newsletter .form-newsletter { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.footer-newsletter .form-newsletter .form-status { flex: 0 0 100%; margin: 10px 0 0; }
.footer-newsletter .newsletter-input { flex: 1 1 240px; min-width: 0; }
.footer-newsletter .newsletter-input input {
    width: 100%; height: 52px; border-radius: 0; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .28); outline: 0; padding: 0 4px;
    font-size: 15px; font-family: var(--font-body); color: #fff; background: transparent;
}
.footer-newsletter .newsletter-input input:focus { border-bottom-color: #fff; }
.footer-newsletter .newsletter-input input::placeholder { color: rgba(255, 255, 255, .38); }
.footer-newsletter .newsletter-button button {
    height: 52px; padding: 0 26px; display: flex; justify-content: center; align-items: center;
    background: transparent; color: #fff; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .28);
    font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    border-radius: 0; cursor: pointer; transition: .25s all;
}
.footer-newsletter .newsletter-button button:hover { color: #fff; border-bottom-color: #fff; letter-spacing: .2em; }

.footer-article { padding: 64px 0 52px; }
.footer-article .wrap-content { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 40px; }

.footer-title {
    margin: 0 0 20px; color: rgba(255, 255, 255, .45);
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em;
}
.footer-info p { margin: 0 0 10px; color: rgba(255, 255, 255, .68); font-size: 14px; }
.footer-info p strong { color: rgba(255, 255, 255, .45); font-weight: 500; }
.footer-info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.footer-info a:hover { color: #fff; text-decoration-color: #fff; }

.footer-ul { list-style: none; padding-left: 0; margin: 0; }
.footer-ul li { margin-bottom: 10px; }
.footer-ul li a { color: rgba(255, 255, 255, .68); font-size: 14px; font-weight: 400; }
.footer-ul li a:hover { color: #fff; }

.footer-title--pay { margin-top: 30px; }
.footer-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-pay span {
    border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius);
    color: rgba(255, 255, 255, .7); font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; white-space: nowrap;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 24px 0; }
.footer-bottom .wrap-content {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-copyright {
    color: rgba(255, 255, 255, .42); font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
.footer-copyright span { color: rgba(255, 255, 255, .78); font-weight: 500; }
.footer-dmca { margin: 0; text-align: right; line-height: 0; }
.footer-dmca img { width: 110px; height: auto; opacity: .4; transition: opacity .2s ease; }
.footer-dmca a:hover img { opacity: .9; }

/* ============================================================
   CỤM LIÊN HỆ NỔI — một chồng nút vuông ở góc dưới phải
   ------------------------------------------------------------
   Bản cũ là bốn quả bóng tròn màu rực rỡ nhấp nháy vô tận, xếp dọc gần hết
   chiều cao màn hình. Vòng pulse chạy mãi kéo mắt khỏi thứ khách đang đọc,
   và bốn màu thương hiệu khác nhau đứng cạnh nhau là bảng màu ồn nhất trên
   cả trang. Giờ chúng gom thành MỘT khối mực than gọn ở góc: mỗi nút nhận
   màu thương hiệu ĐÚNG LÚC rê chuột vào — vẫn nhận ra ngay, mà đứng yên.
   ============================================================ */
.support-dock {
    position: fixed; right: 22px; bottom: 22px; z-index: 999;
    display: flex; flex-direction: column;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md);
}
.btn-frame {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; cursor: pointer;
    background: var(--ink); color: #fff;
    transition: background .2s ease, color .2s ease;
}
.btn-frame + .btn-frame { border-top: 1px solid rgba(255, 255, 255, .12); }
.btn-frame i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.btn-frame i span { color: inherit; font-size: 18px; line-height: 1; }
/* Vòng pulse của bản cũ — markup vẫn còn ở vài trang, giấu hẳn đi */
.btn-frame .kenit-alo-circle,
.btn-frame .kenit-alo-circle-fill { display: none; }

.btn-zalo:hover { background: #0068ff; color: #fff; }
.btn-messenger:hover { background: #0084ff; color: #fff; }
.btn-phone:hover { background: #1D7A4C; color: #fff; }
.btn-instagram:hover { background: #D6249F; color: #fff; }

/* ============================================================
   ĐƠN HÀNG — dùng chung cho trang tra cứu và khu vực tài khoản
   ============================================================ */

/* Nhãn trạng thái. Màu theo nghĩa: vàng = đang chờ, xanh dương = đang chạy,
   xanh lá = xong, đỏ = huỷ/hoàn — để liếc là biết đơn đang ở đâu. */
.order-badge {
    display: inline-block; padding: 6px 12px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    background: var(--bench); color: var(--ink-2);
}
.order-badge-pending,
.order-badge-confirmed  { background: var(--warn-tint); color: var(--warn); }
.order-badge-processing,
.order-badge-shipping   { background: var(--signal-tint); color: var(--signal); }
.order-badge-delivered,
.order-badge-completed  { background: var(--ok-tint); color: var(--ok); }
.order-badge-cancelled,
.order-badge-returned   { background: var(--flag-tint); color: var(--flag); }

/* Nhãn trạng thái PHIẾU TRẢ HÀNG. Cùng bảng màu với đơn hàng (vàng = đang chờ,
   xanh dương = đang chạy, xanh lá = xong, đỏ = kết thúc tiêu cực) để khách không
   phải học hai hệ màu khác nhau trong cùng khu tài khoản. */
.ret-badge-pending      { background: var(--warn-tint); color: var(--warn); }
.ret-badge-approved,
.ret-badge-received     { background: var(--signal-tint); color: var(--signal); }
.ret-badge-refunded     { background: var(--ok-tint); color: var(--ok); }
.ret-badge-rejected,
.ret-badge-cancelled    { background: var(--flag-tint); color: var(--flag); }

/* Bảng chọn sản phẩm cần trả (form yêu cầu trả hàng) */
.ret-pick { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.ret-pick th, .ret-pick td { padding: 11px 10px; border-bottom: 1px solid var(--rule-soft); text-align: left; font-size: 14px; vertical-align: middle; }
.ret-pick th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); font-weight: 700; }
.ret-pick .num { text-align: right; white-space: nowrap; }
.ret-pick .qty { text-align: center; width: 1%; white-space: nowrap; }
.ret-pick tbody tr:last-child td { border-bottom: 0; }
.ret-pick input[type=number] { width: 78px; height: 40px; border: 1.5px solid var(--c-border); padding: 0 8px; font-size: 14px; text-align: center; outline: 0; }
.ret-pick input[type=number]:focus { border-color: var(--c-dark); }
.ret-pick__name { display: block; font-weight: 700; }
.ret-pick__sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--c-muted); }

/* Tổng tiền hoàn dự kiến */
.ret-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.ret-total span { font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }
.ret-total b { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ret-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--c-muted); line-height: 1.55; }

/* Ô nhận tiền hoàn — ẩn khi khách không chọn chuyển khoản */
.ret-bank[hidden] { display: none; }

/* Thẻ phiếu trong danh sách yêu cầu trả hàng */
.ret-card { border: 1px solid var(--c-border); padding: 18px 20px; margin-bottom: 14px; background: #fff; }
.ret-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ret-card__code { display: flex; flex-direction: column; gap: 3px; }
.ret-card__code span { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }
.ret-card__code strong { font-size: 15px; }
.ret-card__body { margin: 14px 0 0; font-size: 14px; color: var(--c-text); }
.ret-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }

/* Danh sách "nhãn — giá trị". Mặc định xếp ngang, .is-stacked xếp dọc cho cột hẹp. */
.order-meta { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.order-meta li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-meta span { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }
.order-meta b { font-size: 14px; font-weight: 700; color: var(--c-text); overflow-wrap: anywhere; }
.order-meta.is-stacked { flex-direction: column; gap: 12px; margin: 0; }

.order-items { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.order-items th, .order-items td { padding: 11px 10px; border-bottom: 1px solid var(--rule-soft); text-align: left; font-size: 14px; }
.order-items th {
    font-size: 11.5px; font-weight: 700; color: var(--c-muted);
    text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--c-border);
}
.order-items .num { text-align: right; white-space: nowrap; }
.order-items tbody tr:last-child td { border-bottom: 0; }

.lookup-alert { margin: 18px 0 0; padding: 12px 15px; border-left: 3px solid; border-radius: var(--radius); font-size: 13.5px; line-height: 1.55; }
.lookup-alert-error { background: var(--flag-tint); border-color: var(--c-sale); color: var(--flag); }
.lookup-alert-ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.lookup-alert-warn { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }

/* ---------- Trang tài khoản: đầu trang ---------- */
.acc-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; background: #fff;
}
.acc-head__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acc-head__avatar {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
    background: var(--signal); color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 17px; font-weight: 700;
}
/* Chỉ nhắm khối chữ, KHÔNG nhắm mọi span trong .acc-head__who — nếu không thì
   chữ cái trong avatar cũng bị đè thành block 13px và lệch lên góc trên trái. */
.acc-head__meta b { display: block; font-size: 16px; font-weight: 700; color: var(--c-text); }
.acc-head__meta span { display: block; font-size: 13px; color: var(--c-muted); overflow-wrap: anywhere; }
.acc-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-head__actions .btn2 { padding: 10px 18px; font-size: 13px; }

/* ---------- Tab lọc trạng thái ---------- */
.acc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.acc-tab {
    padding: 10px 18px; border: 1px solid var(--rule); border-radius: 999px;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); background: var(--paper); transition: .2s;
}
.acc-tab:hover { border-color: var(--ink); color: var(--ink); }
.acc-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Thẻ "chưa có đơn" rộng bằng khối danh sách — .simple-card mặc định hẹp 460px,
   để nguyên thì nó co lại giữa trang, lệch tông với phần còn lại của khu tài khoản. */
.acc-empty { max-width: none; margin: 0; padding: 44px 24px; border-radius: var(--radius); background: #fff; }

/* ---------- Thẻ đơn hàng trong danh sách ---------- */
.acc-orders { display: flex; flex-direction: column; gap: 14px; }
.acc-order { border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.acc-order__top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); background: var(--bench);
}
.acc-order__top .muted { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.acc-order__top strong { font-size: 15px; font-weight: 700; color: var(--c-text); }
.acc-order__body { padding: 6px 18px; }
.acc-order__more { margin: 0 0 12px; font-size: 13px; color: var(--c-muted); }

.acc-line { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.acc-line:last-child { border-bottom: 0; }
.acc-line__pic { width: 52px; height: 62px; flex-shrink: 0; background: var(--c-soft); border-radius: var(--radius); overflow: hidden; }
.acc-line__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-line__info { flex: 1 1 auto; min-width: 0; }
.acc-line__info b { display: block; font-size: 14px; font-weight: 600; color: var(--c-text); }
.acc-line__info span { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.acc-line__money { font-size: 14px; font-weight: 700; white-space: nowrap; }

.acc-order__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap;
    padding: 13px 18px; border-top: 1px solid var(--rule-soft);
}
.acc-order__foot .muted { margin-right: auto; font-size: 12.5px; }
.acc-order__total { font-size: 13.5px; color: var(--c-muted); }
.acc-order__total b { font-size: 17px; font-weight: 600; color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.acc-order__foot .btn2 { padding: 9px 20px; font-size: 13px; }

/* ---------- Phân trang ---------- */
.acc-pager { display: flex; justify-content: center; gap: 6px; margin: 24px 0 0; flex-wrap: wrap; }
.acc-pager__link {
    min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; background: #fff;
}
.acc-pager__link:hover { border-color: var(--c-gold); }
.acc-pager__link.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Chi tiết đơn: nội dung trái, thông tin phải ---------- */
.acc-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.acc-detail__main, .acc-detail__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* .simple-card mặc định hẹp và canh giữa — trong trang này nó là khối nội dung đầy đủ */
.acc-card { max-width: none; margin: 0; text-align: left; padding: 20px 22px; border-radius: var(--radius); background: #fff; }
.acc-card__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 14px; }
.acc-card .acc-order__top { margin: -20px -22px 4px; }
.acc-note { margin: 0; font-size: 14px; line-height: 1.65; color: var(--c-text); }

.acc-sum { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-border); }
.acc-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; color: var(--c-muted); }
.acc-sum b { color: var(--c-text); font-weight: 700; }
.acc-sum .is-minus { color: var(--ok); }
.acc-sum .is-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--c-border); font-weight: 700; color: var(--c-text); }
.acc-sum .is-total b { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Hành trình đơn: mốc cũ ở trên, mốc mới nhất ở dưới cùng */
.acc-track { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--c-border); }
.acc-track li { position: relative; padding: 0 0 18px; }
.acc-track li:last-child { padding-bottom: 0; }
.acc-track li::before {
    content: ""; position: absolute; left: -29px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--c-border);
}
.acc-track li:last-child::before { background: var(--c-gold); border-color: var(--c-gold); }
.acc-track b { display: block; font-size: 14px; font-weight: 700; color: var(--c-text); }
.acc-track .muted { font-size: 12.5px; }
.acc-track__note { display: block; margin-top: 3px; font-size: 13px; color: var(--c-muted); }

/* Khối huỷ đơn — viền đỏ nhạt để tách khỏi các thẻ thông tin bên trên */
.acc-cancel { border-color: var(--rule); }
.acc-cancel .acc-card__title { color: var(--flag); }
.acc-cancel .acc-note { margin-bottom: 14px; font-size: 13.5px; color: var(--c-muted); }
.acc-cancel select {
    width: 100%; height: 44px; border: 1.5px solid var(--c-border); border-radius: 0;
    padding: 0 12px; font-family: inherit; font-size: 13.5px; color: var(--c-text);
    background: #fff; outline: 0; cursor: pointer;
}
.acc-cancel select:focus { border-color: var(--c-dark); }

/* ============================================================
   TIÊU ĐỀ CỦA CÁC KHỐI / HỘP THOẠI — gom về MỘT giọng
   ------------------------------------------------------------
   Trước đây mỗi khu vực tự chọn kiểu tiêu đề riêng: giỏ hàng dùng serif
   thường, tài khoản dùng chữ hoa đậm, thanh toán lại dùng serif cỡ khác.
   Đứng riêng thì trang nào cũng ổn; đi hết một lượt mua hàng mới thấy như
   ghép từ ba website.

   Khai ở ĐÂY, ngay trước khối màn hẹp, để các cỡ chữ riêng cho điện thoại
   bên dưới vẫn đè lên được — nên khối này cố tình KHÔNG đụng tới font-size.
   ============================================================ */
.cart-sum__title,
.cart-drawer__title,
.auth-modal__title,
.contact-form h2,
.empty-cart h2,
.co-card__title,
.co-sum__title,
.co-done h1,
.co-empty b,
.acc-card__title,
.ret-step__title,
.ret-modal__title,
.pay-modal__title,
.info-main h2,
.tradein-form__title,
.simple-card h2 {
    font-family: var(--font-display); font-variation-settings: "wdth" 110;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden { display: none !important; }
.d-block { display: block; }
.muted { color: var(--c-muted); }
[hidden] { display: none !important; }
.mobile-only { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
    .header-nav ul li a { padding: 25px 11px; font-size: 11.5px; }
    .header-inner { gap: 20px; }
}

@media (max-width: 1180px) {
    .header-ico__label { display: none; }   /* còn icon là đủ, chừa chỗ cho menu */
    .listing { grid-template-columns: 204px minmax(0, 1fr); gap: 38px; }
    .hscroll-track--products .hscroll-item { width: calc((100% - 56px) / 3); }
    .hscroll-track--cats .hscroll-item { width: calc((100% - 60px) / 4); }
    .poster-rail .hscroll-item { width: calc((100% - 3 * 18px) / 4); }
}

@media (max-width: 1080px) {
    /* Menu không đủ chỗ đứng cạnh logo nữa → chuyển thành hàng cuộn ngang
       dưới logo (thay vì rớt dòng lộn xộn ngay trong header) */
    .header-inner { flex-wrap: wrap; gap: 0 16px; }
    .header-nav {
        order: 3; flex: 1 1 100%; overflow-x: auto;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--rule-soft);
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .header-nav ul.menu-main { justify-content: flex-start; flex-wrap: nowrap; width: max-content; }
    .header-nav ul li a { white-space: nowrap; padding: 14px 13px 15px; }
    .header-nav ul.menu-main > li > a::before { bottom: 8px; left: 13px; right: 13px; }
    /* Hàng menu cuộn ngang cắt mất dropdown tuyệt đối — ẩn hẳn, bấm vào mục cha
       vẫn vào được trang danh mục */
    .header-nav ul li ul { display: none; }
    /* Ảnh hết dính khi hai cột rớt thành một: dính ở bố cục một cột nghĩa là ảnh
       đứng yên suốt trong lúc khách cuộn qua toàn bộ phần chữ bên dưới. */
    .pd-gallery { position: static; }
}

@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
    .listing { grid-template-columns: 1fr; gap: 34px; }
    .pdetail { grid-template-columns: 1fr; gap: 34px; }
    /* Một cột thì dải ảnh nhỏ trở về hàng ngang dưới chân ảnh lớn: dựng dọc ở
       đây chỉ tổ ăn mất bề ngang vốn đã hẹp của ảnh chính. */
    .pd-gallery { display: block; }
    .pd-thumbs { flex-direction: row; flex-wrap: wrap; margin-top: 12px; overflow: visible; }
    .cart-grid { grid-template-columns: 1fr; gap: 24px; }
    .cart-sum { position: static; }

    /* Dải dịch vụ về 2 cột: gạch dọc phải bỏ ở cột đầu của MỖI hàng, không chỉ
       ở ô đầu tiên — nếu không thì ô thứ ba vẫn còn một gạch treo lơ lửng. */
    .usp .wrap-content { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
    .usp-item:nth-child(odd) { padding-left: 0; border-left: 0; }

    .footer-top .wrap-content { grid-template-columns: 1fr; gap: 34px; }
    .footer-social, .footer-newsletter { grid-column: 1; }
    .footer-article .wrap-content { grid-template-columns: repeat(2, 1fr); gap: 34px; }
    .footer-news:nth-child(4) { grid-column: span 2; }

    .hscroll-track--products .hscroll-item { width: calc((100% - 28px) / 2); }
    .hscroll-track--cats .hscroll-item { width: calc((100% - 40px) / 3); }
    .poster-rail .hscroll-item { width: calc((100% - 2 * 18px) / 3); }
}

@media (max-width: 768px) {
    /* Bốn cam kết không đủ chỗ đứng giữa → dồn về trái rồi cuộn ngang,
       thay vì cắt mất hai cam kết cuối. */
    .criteria .wrap-content { justify-content: flex-start; gap: 0 24px; }

    .control-owl button.owl-prev { left: 12px; }
    .control-owl button.owl-next { right: 12px; }

    .section { padding: 46px 0 54px; }
    .section-product { margin-top: 40px; }
    .section-head { margin-bottom: 26px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
    .pcard-name { font-size: 13.5px; }
    .pcard-price .now { font-size: 15px; }
    .pcard-view { padding: 11px 10px; font-size: 10px; letter-spacing: .1em; }

    /* dải trượt: 2 ô + ló nửa ô kế tiếp cho biết còn hàng để lướt */
    .hscroll-track { gap: 16px; }
    .hscroll-track--products .hscroll-item { width: calc((100% - 24px) / 2.2); }
    .hscroll-track--cats .hscroll-item { width: calc((100% - 24px) / 2.4); }
    .poster-rail .hscroll-track { gap: 12px; }
    .poster-rail .hscroll-item { width: calc((100% - 24px) / 2.3); }
    .hscroll-btn { width: 36px; height: 36px; }
    .cat-banner { margin-top: 36px; }

    .usp { padding: 46px 0 48px; margin-top: 56px; }
    .footer-top { padding: 42px 0; }
    .footer-article { padding: 46px 0 38px; }
    .footer-article .wrap-content { grid-template-columns: 1fr; gap: 30px; }
    .footer-news:nth-child(1),
    .footer-news:nth-child(4) { grid-column: auto; }
    .footer-bottom .wrap-content { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer-dmca { text-align: left; }

    .contact-shell, .info-shell { grid-template-columns: 1fr; }
    .tradein-grid { grid-template-columns: 1fr; }
    .tradein-actions .btn2 { flex: 1 1 auto; }
    .info-nav { padding: 20px; }
    .info-main { padding: 22px 20px; }
    .info-cta .btn2 { flex: 1 1 auto; }
    .contact-aside { padding: 24px 20px; }
    .contact-form { padding: 24px 20px; }
    .cf-grid { grid-template-columns: 1fr; }

    .procart { grid-template-columns: 90px 1fr; gap: 12px; }
    .procart-label { display: none; }
    .qty-procart-col { grid-column: 2; text-align: left; }
    .quantity-counter-procart { margin: 0; }
    .stock-procart { text-align: left; }
    .linetotal-procart { grid-column: 2; text-align: left; padding-right: 0; }
    .act-procart { grid-column: 2; text-align: left; }
    .del-procart { width: auto; }

    .empty-cart { padding: 40px 14px 34px; }
    .empty-cart__art { width: 104px; height: 104px; margin-bottom: 20px; }
    .empty-cart h2 { font-size: 20px; }
    .empty-cart .empty-cart__desc { font-size: 14px; }
    .empty-cart__actions .btn2 { width: 100%; }
    .empty-cart__perks { grid-template-columns: 1fr; gap: 14px; }
    .empty-cart__perks li { justify-content: flex-start; }
}

/* Cụm liên hệ nổi: từ laptop trở xuống ép sát mép hơn, vì khung nội dung đã
   gần sát viền màn hình nên khối nút hay đè lên chữ và ô nhập. */
@media (max-width: 1200px) {
    .support-dock { right: 12px; bottom: 12px; }
    .btn-frame { width: 42px; height: 42px; }
    .btn-frame i span { font-size: 17px; }
}

/* ---------- Điện thoại (≤ 600px) ---------- */
@media (max-width: 600px) {
    .page-head { padding: 30px 0 22px; }
    .section { padding: 34px 0 42px; }
    .pd-crumb { padding: 14px 0 18px; }

    .info-cta, .tradein-actions, .empty-cart__actions { flex-direction: column; }
    .info-cta .btn2, .tradein-actions .btn2 { width: 100%; }

    .brand-grid, .section-brands--grid .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-card__logo, .section-brands--grid .brand-card__logo { height: 96px; padding: 18px; }
    .brand-card__logo img { max-height: 38px; }
    .brand-card__go { padding: 12px 14px 18px; }

    .usp .wrap-content { grid-template-columns: 1fr; row-gap: 30px; }
    .usp-item { padding-left: 0; border-left: 0; }
    .footer-title { margin-bottom: 16px; }

    .btn2 { padding: 15px 24px; }
    .btn2-lg { padding: 16px 28px; }
}

/* ---------- Điện thoại nhỏ (≤ 480px) ---------- */
@media (max-width: 480px) {
    .header-left { padding: 12px 0; }
    .header-left img { max-height: 38px; }
    .header-icons { gap: 16px; }
    .header-searchbar { padding: 12px 0 16px; }
    .header-searchbar input { height: 42px; font-size: 15px; }
    .header-searchbar__go { padding: 0 18px; }
    .header-nav ul li a { padding: 12px 11px 13px; font-size: 11px; }

    .product-grid { gap: 26px 12px; }
    .pcard-price .now { font-size: 14px; }
    .pcard-price .was { font-size: 12px; }
    .pcard-name { font-size: 13px; }
    /* Không có chuột thì không có trạng thái rê chuột: thanh "Xem chi tiết"
       trượt lên sẽ không bao giờ hiện, nên giấu hẳn cho khỏi chiếm chỗ. */
    .pcard-view { display: none; }

    .cd-qty button { width: 32px; height: 32px; }   /* vùng chạm ≥ 32px */
    .cd-del { width: 30px; height: 30px; }

    .empty-cart__art { width: 88px; height: 88px; }
}

/* ---------- Khu vực tài khoản trên màn hẹp ---------- */
@media (max-width: 1024px) {
    /* Cột thông tin xuống dưới nội dung chính thay vì bị bóp lại */
    .acc-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .acc-head { padding: 15px 16px; }
    .acc-head form { width: 100%; }
    .acc-head form .btn2 { width: 100%; }

    /* Tab lọc trượt ngang, không xuống dòng lộn xộn */
    .acc-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .acc-tab { flex: 0 0 auto; }

    .acc-order__top, .acc-order__body, .acc-order__foot { padding-left: 14px; padding-right: 14px; }
    .acc-order__foot { justify-content: space-between; }
    .acc-order__foot .muted { margin-right: 0; width: 100%; }
    .acc-order__foot .btn2 { width: 100%; }

    .acc-card { padding: 16px 14px; }
    .acc-card .acc-order__top { margin: -16px -14px 4px; }
    /* Bảng sản phẩm: thu gọn để 4 cột vừa màn hẹp, chữ được phép xuống dòng */
    .order-items th, .order-items td { padding: 10px 5px; font-size: 13px; }
    .order-items td { overflow-wrap: anywhere; }
}

/* ---------- Màn siêu rộng (≥ 1921px): giữ khối nội dung ở giữa, không kéo dãn ---------- */
@media (min-width: 1921px) {
    /* CỐ Ý không chặn bề ngang banner ở đây. Chặn thì trên màn 2K/4K nó nằm giữa và
       hở hai dải trắng hai bên — banner phải chạy trọn bề ngang màn hình. */
    .brand-grid { max-width: 1560px; }
}

/* ════════════════════════════════════════════════════════════
   TRANG CHỦ v66 — "SỐ ÁO"
   ────────────────────────────────────────────────────────────
   Trang chủ dựng theo ngôn ngữ hình ảnh của chính cái áo đấu,
   không phải theo khuôn "trang cao cấp" chung chung:

   - Nền tối là XANH SÂN CỎ DƯỚI ĐÈN (--pitch), không phải đen
     tuyền. Cả trang chỉ chạm nền tối ĐÚNG BA LẦN (lời tuyên bố
     đầu trang, dải poster, khối kết) — hiếm nên mỗi lần đều có
     trọng lượng.
   - Chữ tiêu đề là Archivo bè ngang, in hoa, sát nhau: đúng tỉ
     lệ chữ ép nhiệt trên lưng áo. Chữ đọc là Be Vietnam Pro,
     bộ chữ vẽ riêng cho dấu tiếng Việt.
   - MÀU ĐỎ chỉ còn ở giá tiền. Không có màu nhấn nào khác được
     thêm vào — nền xanh đã đủ làm giá đỏ bật lên.
   - SIGNATURE: mỗi khối mang một con số to kiểu SỐ ÁO, và con số
     đó là SỐ MỤC THẬT trong khối (12 đội tuyển, 10 mẫu mới...).
     Không đánh số thứ tự trang trí.

   MỌI selector đều nằm trong .home để không đụng tới trang khác.
   ════════════════════════════════════════════════════════════ */

.home {
    /* Tên cục bộ của trang chủ, trỏ vào bảng màu chung ở đầu tệp. Trước đây khối
       này có bảng màu RIÊNG (xanh sân cỏ) khác hẳn phần còn lại của website —
       đó chính là lý do trang chủ và các trang con trông như hai website. */
    --pitch: var(--ink);
    --pitch-deep: var(--ink-deep);
    --chalk: var(--paper);
    --fog: var(--bench);
    --edge: var(--rule);
    --edge-dark: rgba(255, 255, 255, .14);
    --ink-soft: var(--muted);

    --font-kit: var(--font-display);
    --font-read: var(--font-body);

    font-family: var(--font-read);
    color: var(--ink);
    background: var(--paper);
}

/* ---------- Khối & thanh tiêu đề dùng chung ---------- */
.home-sec { padding: 88px 0; background: var(--paper); }
.home-sec--fog { background: var(--bench); }
.home-sec--pitch { background: var(--ink); color: #fff; }
.home .cat-banner { margin-top: 0; }

/* Thanh tiêu đề: TÊN KHỐI | khoảng trống | Xem tất cả + nút cuộn.
   Đã bỏ ô đếm và câu dẫn ở tất cả các khối trang chủ — tám khối liền nhau, mỗi
   khối một câu giải thích thì trang chủ thành một trang chữ có kèm ảnh.
   Tên khối cố tình để NHỎ và bỏ luôn đường kẻ dưới chân: ở một cửa hàng, nhân
   vật chính là dải hàng hoá bên dưới chứ không phải cái nhãn của nó. */
.home-head {
    display: flex; align-items: center; gap: 26px;
    padding-bottom: 0; margin-bottom: 22px;
    border-bottom: 0;
}
.home-sec--pitch .home-head { border-bottom-color: var(--edge-dark); }

.home-head__text { flex: 0 1 auto; min-width: 0; }
.home-head__title {
    margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 116;
    font-weight: 700; text-transform: uppercase;
    font-size: clamp(19px, 1.9vw, 26px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink);
}
.home-head__sub {
    margin: 10px 0 0; max-width: 56ch; font-size: 14px; line-height: 1.7; color: var(--muted);
}
.home-head__rule { flex: 1 1 auto; height: 0; }
.home-head__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }

.home-sec--pitch .home-head__title { color: #fff; }
.home-sec--pitch .home-head__sub { color: rgba(255, 255, 255, .58); }

/* "Xem tất cả" — chữ hoa nhỏ, gạch chân chạy ra khi rê chuột */
.home-link {
    position: relative; font-family: var(--font-display); font-weight: 700;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap; padding-bottom: 5px;
}
.home-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.home-link:hover { color: var(--signal); }
.home-link:hover::after { transform: scaleX(1); }
.home-sec--pitch .home-link { color: #fff; }
.home-sec--pitch .home-link:hover { color: #fff; }

/* Nút cuộn — vuông, viền mảnh */
.home-nav { display: flex; align-items: center; gap: 6px; }
.home-nav__btn {
    width: 40px; height: 40px; padding: 0; cursor: pointer; background: transparent;
    border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease;
}
.home-nav__btn svg { width: 16px; height: 16px; }
.home-nav__btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.home-nav__count {
    font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .08em;
    color: var(--muted); min-width: 36px; text-align: center; font-variant-numeric: tabular-nums;
}
.home-sec--pitch .home-nav__btn { border-color: var(--edge-dark); color: #fff; }
.home-sec--pitch .home-nav__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.home-sec--pitch .home-nav__count { color: rgba(255, 255, 255, .5); }

.home-empty { margin: 0; padding: 44px 0; font-size: 14px; color: var(--muted); }

/* ════ BANNER ĐẦU TRANG ════
   Khung KHOÁ chiều cao, ảnh phủ kín bằng `cover`.

   Bản cũ để `height:auto` rồi nhờ JS đo chiều cao từng tấm ảnh mà gán vào khối.
   Ba banner người bán tải lên có ba tỉ lệ khác nhau (2.9 / 2.0 / 1.78) nên cứ
   đổi slide là cả trang giật lên xuống hơn ba trăm pixel, và ảnh tải chậm thì
   khối co giật thêm lần nữa lúc ảnh về. Khoá chiều cao là hết cả hai.

   Đổi lại: ảnh không đúng tỉ lệ sẽ bị cắt bớt hai đầu — khổ nên tải lên là
   khoảng 2350×1000.

   TUYỆT ĐỐI KHÔNG đè chữ HTML lên banner. Ảnh quảng cáo người bán tải lên vốn
   đã có chữ nướng sẵn trong ảnh; chồng thêm một lớp chữ nữa là hai tầng chữ đá
   nhau, mà lớp chữ HTML lại đứng yên trong khi ảnh bên dưới đổi liên tục. Muốn
   banner có lời mời thì viết thẳng vào ảnh lúc thiết kế banner. */
.home-hero { position: relative; background: var(--ink); }
/* Cao gần trọn một khung nhìn — banner là thứ đầu tiên khách thấy khi trang vừa
   mở. Chặn trên 780px để trên màn hình rất cao nó không đẩy hết phần còn lại
   xuống dưới tầm mắt. */
.home-hero .slideshow { height: min(78vh, 780px); }
.home-hero .slideshow-track,
.home-hero .slideshow-item,
.home-hero .slideshow-item > a { height: 100%; }
.home-hero .slideshow-item img { height: 100%; object-fit: cover; object-position: center; }

/* Bộ đếm slide và mũi tên nằm trên ảnh */
.home-hero .slideshow-count,
.home-hero .control-owl { z-index: 3; }

/* ════ BỘ SƯU TẬP — ba ô tràn viền, tên nằm trong ô ════
   Khối này làm thay việc của bức tường chữ cũ ngay dưới banner: khách vừa xem
   xong một tấm ảnh lớn là gặp ba nhánh hàng, mỗi nhánh một cái tên đọc được từ
   đầu kia căn phòng — thay cho một tiêu đề ba dòng + một đoạn văn + hai nút +
   một bảng bốn mục chen nhau trong cùng một màn hình.

   Ảnh để `contain` chứ không `cover`: ảnh danh mục là ảnh ghép ba chiếc áo trên
   nền trắng, cắt cạnh là mất luôn hai chiếc ngoài cùng. Ảnh đẩy lên trên, chữ
   ngồi ở khoảng trắng dưới chân — không cần lớp phủ tối, không cần khung. */
.shelf-band { background: var(--rule); }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
/* Ô = một cột dọc: ảnh chiếm hết phần trên, chữ ngồi ngay dưới chân ảnh.
   Bản đầu đặt ảnh tuyệt đối rồi canh bằng phần trăm padding — ảnh treo lơ lửng
   giữa ô và hở một mảng trắng to giữa ảnh với chữ. Cho ảnh và chữ vào cùng một
   dòng chảy thì khoảng cách tự đúng, không phải đoán. */
.shelf-tile {
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--paper); padding: 0;
}
/* Ảnh phủ KÍN khung. Ảnh danh mục vốn đã là một tấm nền xám nhạt có mấy chiếc áo
   đặt giữa, nên để `contain` thì tấm nền ấy nổi lên thành một cái hộp bo góc lửng
   lơ bên trong ô — hai lớp khung lồng nhau. Cho nó tràn hết khung thì nền xám của
   ảnh trở thành chính nền của ô, đúng kiểu giấy nền chụp studio. */
/* Khung ảnh khoá TỈ LỆ chứ không khoá phần trăm chiều cao ô: ba ô cùng bề ngang
   nên cùng tỉ lệ là cùng chiều cao ảnh — đáy ba tấm ảnh thẳng hàng dù tên bên
   dưới dài ngắn khác nhau. Khoá theo phần trăm thì phần chữ bị bó vào một chiều
   cao cố định và dòng nhãn phía trên bị cắt mất. */
.shelf-tile__frame {
    position: relative; flex: 0 0 auto; aspect-ratio: 5 / 4; display: block;
    overflow: hidden; background: var(--bench);
}
.shelf-tile__frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 46%;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.shelf-tile:hover .shelf-tile__frame img { transform: scale(1.05); }
.shelf-tile__ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: rgba(255, 255, 255, .24);
    font-family: var(--font-display); font-weight: 700; font-size: 108px;
}
/* Ô nào tên dài hơn thì phần chữ cao hơn; lưới kéo cả ba ô bằng nhau nên khoảng
   thừa rơi xuống đáy ô. Vì thế chữ canh TỪ TRÊN xuống — canh giữa thì tên hai
   dòng và tên một dòng sẽ nằm ở hai độ cao khác nhau. */
.shelf-tile__body {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 36px) clamp(26px, 2.6vw, 38px);
}
/* min-height giữ chỗ cho dòng nhãn kể cả khi danh mục chưa có nhánh con nào —
   thiếu nó thì tên của ô đó nhảy lên cao hơn hai ô bên cạnh đúng một dòng. */
.shelf-tile__kicker {
    display: block; margin-bottom: 12px; min-height: 1.5em;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shelf-tile__name {
    display: block; font-family: var(--font-display); font-variation-settings: "wdth" 116;
    font-weight: 700; text-transform: uppercase; color: var(--ink);
    font-size: clamp(23px, 2.4vw, 38px); line-height: .96; letter-spacing: -.035em;
    text-wrap: balance;
}
.shelf-tile__go {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; margin-top: 18px;
    font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
    padding-bottom: 5px; position: relative;
}
.shelf-tile__go::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--signal);
    transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.shelf-tile:hover .shelf-tile__go { color: var(--signal); }
.shelf-tile:hover .shelf-tile__go::after { transform: scaleX(1); }
.shelf-tile__go svg { width: 14px; height: 14px; transition: transform .3s ease; }
.shelf-tile:hover .shelf-tile__go svg { transform: translateX(5px); }

/* ════ THẺ ĐỘI / CÂU LẠC BỘ ════
   Tên đội nằm TRONG khung ảnh, dưới cùng, trên một lớp phủ tối dần — thẻ trở
   thành một khối liền chứ không phải ảnh rồi nhãn rời bên dưới. */
.arc-card { display: block; position: relative; overflow: hidden; background: var(--bench); border-radius: var(--radius); }
.arc-card__frame { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.arc-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.arc-card:hover .arc-card__frame img { transform: scale(1.05); }
.arc-card__frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 44%, rgba(8, 9, 12, .84) 100%);
}
.arc-card__ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--ink); color: rgba(255, 255, 255, .26);
    font-family: var(--font-display); font-weight: 700; font-size: 54px;
}
.arc-card__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 17px; }
.arc-card__kicker {
    display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arc-card__name {
    display: block; font-family: var(--font-display); font-variation-settings: "wdth" 114;
    font-weight: 700; text-transform: uppercase; font-size: 16px; line-height: 1.05;
    letter-spacing: -.015em; color: #fff;
}
/* Gạch trắng chạy ra dưới tên khi rê chuột — dấu hiệu duy nhất của trạng thái hover */
.arc-card__name::after {
    content: ""; display: block; width: 0; height: 2px; margin-top: 9px; background: #fff;
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.arc-card:hover .arc-card__name::after { width: 38px; }

/* ════ THẺ SẢN PHẨM trên các dải nền xám của trang chủ ════
   Thẻ sản phẩm đã dùng CHUNG một khuôn cho cả website (xem khối THẺ SẢN PHẨM ở
   trên) — ở đây chỉ còn đúng một việc: khối nào nền xám thì nền ảnh đảo lại
   thành trắng, để cái áo không chìm vào nền. */
.home-sec--fog .pcard-media { background: var(--paper); }
.home-sec--pitch .pcard-media { background: #14161B; }
.home-sec--pitch .pcard-name,
.home-sec--pitch .pcard-price .now { color: #fff; }
.home-sec--pitch .pcard-spec { color: rgba(255, 255, 255, .5); }

/* ════ DẢI POSTER — tràn hết bề ngang màn hình ════
   Poster là ảnh dựng sẵn khổ dọc, cinematic. Cho nó chạy tràn viền một lần duy
   nhất trong cả trang: khối này là chỗ để nhìn, không phải để đọc. */
.poster-band { padding: 88px 0; background: var(--ink); color: #fff; }
.poster-band .home-head { margin-bottom: 38px; }
.poster-bleed { width: 100%; padding-inline: max(20px, calc((100% - 1320px) / 2)); }
.poster-rail .hscroll-track { gap: 18px; }
.poster-rail .hscroll-item { width: calc((100% - 4 * 18px) / 5); }
.poster-tile { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ink-deep); border-radius: var(--radius); }
.poster-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22, .61, .36, 1), opacity .3s ease; }
.poster-rail:hover .poster-tile img { opacity: .55; }
.poster-tile:hover img { opacity: 1; transform: scale(1.04); }

/* ════ THƯƠNG HIỆU — một hàng logo lặng lẽ ════ */
.brand-rail {
    display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule);
    border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.brand-rail__item {
    flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; padding: 42px 18px 36px; background: var(--paper);
    transition: background .25s ease;
}
.home-sec--fog .brand-rail__item { background: var(--bench); }
.brand-rail__item:hover { background: var(--ink); }
.brand-rail__item img {
    height: 42px; width: auto; max-width: 128px; object-fit: contain; display: block;
    filter: grayscale(1); opacity: .5; transition: filter .3s ease, opacity .3s ease;
}
.brand-rail__item:hover img { filter: grayscale(1) invert(1) brightness(2); opacity: 1; }
.brand-rail__item span {
    font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); transition: color .25s ease;
}
.brand-rail__item:hover span { color: #fff; }

/* ---------- Nút trên nền mực ----------
   Khuôn nút này bị xoá nhầm lúc dọn khối "lời tuyên bố" cũ, làm nút cuối trang
   rơi về chữ trần kèm một mũi tên to bằng nửa khối. Khai lại ở đây, cạnh chỗ
   duy nhất còn dùng nó. Cùng cỡ chữ / cùng giãn chữ với .btn2 để cả website
   nói một giọng. */
.btn-kit {
    display: inline-flex; align-items: center; gap: 10px; padding: 17px 32px;
    border-radius: var(--radius);
    font-family: var(--font-display); font-variation-settings: "wdth" 105;
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid #fff; background: #fff; color: var(--ink); transition: all .2s ease;
}
.btn-kit svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s ease; }
.btn-kit:hover { background: transparent; color: #fff; }
.btn-kit:hover svg { transform: translateX(5px); }
.btn-kit--ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn-kit--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
/* Nút trên nền sáng */
.btn-kit--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-kit--solid:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/* ════ KHỐI KẾT — con số 200 làm nhân vật chính ════
   "Hoàn tiền 200%" là điều khách sợ nhất được trả lời thẳng bằng một con số, đặt
   đúng kiểu số áo như các khối trên. Ảnh thật của cửa hàng đứng cạnh. */
/* Đây là KHOẢNH KHẮC TÁO BẠO DUY NHẤT của cả trang: một con số cao gần trăm rưỡi
   pixel. Nó được phép to đến thế vì mọi khối phía trên đã nhường chỗ — số mục
   của từng khối đã rút xuống thành ô đếm nhỏ, giá thôi màu đỏ, tem giảm giá thôi
   chói. Nếu chỗ nào cũng hét thì chẳng chỗ nào được nghe. */
.closing { background: var(--ink); color: #fff; }
.closing__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
.closing__grid.closing--solo { grid-template-columns: 1fr; }
.closing__body { padding: 96px 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.closing--solo .closing__body { max-width: 760px; }
.closing__num {
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px;
    font-family: var(--font-display); font-variation-settings: "wdth" 125; font-weight: 800;
    font-size: clamp(64px, 8vw, 136px); line-height: .8; letter-spacing: -.05em; color: #fff;
    font-variant-numeric: tabular-nums;
}
.closing__num i {
    font-style: normal; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: 0; color: rgba(255, 255, 255, .42);
}
.closing__cap {
    margin: 0 0 22px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .52);
}
.closing h2 {
    margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 112;
    font-weight: 700; text-transform: uppercase; color: #fff;
    font-size: clamp(24px, 2.9vw, 38px); line-height: 1.05; letter-spacing: -.025em;
}
.closing__desc { margin: 24px 0 0; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .64); max-width: 52ch; }
.closing__cta { margin-top: 38px; }
/* Ảnh giữ ĐÚNG tỉ lệ gốc và canh giữa theo chiều dọc, thay vì bị kéo cao bằng
   cột chữ bên cạnh. Ảnh thật chỉ 768×560; kéo nó lên cao gần 800px là phóng to
   gấp rưỡi và mờ nhoè ngay. Khoá tỉ lệ thì trình duyệt luôn THU NHỎ ảnh xuống,
   không bao giờ phóng lên.
   Muốn ảnh nét căng ở màn hình lớn thì thay public/images/mission.webp bằng
   bản rộng tối thiểu 1600px (tỉ lệ ngang, khoảng 4:3). */
.closing__pic {
    position: relative; overflow: hidden; border-radius: var(--radius);
    align-self: center; aspect-ratio: 4 / 3; min-height: 0;
}
.closing__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Đi bằng bàn phím phải THẤY mình đang ở đâu ----------
   Trên nền mực than, viền tiêu điểm màu mực xanh gần như tàng hình → đổi sang
   trắng cho riêng các khối nền tối. */
.home-sec--pitch a:focus-visible,
.home-sec--pitch button:focus-visible,
.poster-band a:focus-visible,
.poster-band button:focus-visible,
.shelf-tile:focus-visible,
.closing a:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.footer input:focus-visible,
.criteria a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ════ CHUYỂN ĐỘNG ════
   ĐÚNG MỘT thứ trên cả trang chủ: mỗi khối nhô lên 16px khi cuộn tới. Không có
   gì khác động đậy. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .arc-card__frame img, .shelf-tile__frame img, .poster-tile img { transition: none; }
    .arc-card__name::after, .shelf-tile__go::after { transition: none; }
}

/* ---------- Màn hẹp ---------- */
@media (max-width: 1200px) {
    .closing__grid { gap: 44px; }
    .closing__body { padding: 84px 0; }
}

@media (max-width: 992px) {
    .home-sec, .poster-band { padding: 72px 0; }

    .home-head { flex-wrap: wrap; gap: 12px 22px; margin-bottom: 30px; }
    .home-head__text { flex: 1 1 220px; }
    .home-head__rule { display: none; }
    .home-head__tools { width: 100%; justify-content: space-between; }

    /* Ba ô bộ sưu tập không đủ chỗ đứng ngang → ô đầu chiếm trọn hàng, hai ô
       còn lại chia đôi hàng dưới. Ô đầu thấp lại vì nó rộng gấp đôi. */
    .shelf { grid-template-columns: repeat(2, 1fr); }
    .shelf-tile:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
    .shelf-tile { aspect-ratio: 4 / 5; }
    .home-hero .slideshow { height: min(72vh, 620px); }
    .poster-rail .hscroll-item { width: calc((100% - 3 * 18px) / 4); }

    .closing__grid { grid-template-columns: 1fr; gap: 0; }
    .closing__pic { order: -1; aspect-ratio: 16 / 9; }
    .closing__body { padding: 56px 0 66px; }
}

@media (max-width: 768px) {
    .home-sec, .poster-band { padding: 56px 0; }
    .btn-kit { flex: 1 1 100%; justify-content: center; padding: 15px 22px; }
    .closing__cta .btn-kit { flex: 0 1 auto; }

    .home-head__sub { margin-top: 8px; font-size: 13px; }
    .home-nav__btn { width: 36px; height: 36px; }

    /* Điện thoại: mỗi bộ sưu tập một ô, khổ ngang cho vừa một màn tay cầm. */
    .shelf { grid-template-columns: 1fr; }
    .shelf-tile,
    .shelf-tile:first-child { grid-column: auto; aspect-ratio: 5 / 4; }
    .shelf-tile__frame img { padding: 6% 6% 34%; object-position: center 30%; }
    /* Trên điện thoại banner cao gần trọn màn là khách phải cuộn một lần mới
       thấy được món hàng đầu tiên — hạ xuống còn khoảng hai phần ba màn. */
    .home-hero .slideshow { height: min(68vh, 520px); }

    .poster-rail .hscroll-track { gap: 12px; }
    .poster-rail .hscroll-item { width: calc((100% - 2 * 12px) / 2.3); }

    .brand-rail__item { min-width: 50%; padding: 28px 12px 24px; }
    .brand-rail__item img { height: 34px; }
}