/* ===== Phông chữ TỰ HOST (assets/fonts/*.woff2) – 11/10/2026 =====
   Trước đây nạp từ Google Fonts: phụ thuộc mạng ngoài, chữ đổi phông giữa chừng (FOUT) làm hộp chữ nhảy cỡ. Nay phục vụ ngay trên web,
   chỉ 3 bộ ký tự (vietnamese · latin · latin-ext) × Be Vietnam Pro 300/400/500/600 + Spectral 400/500/600 ≈ 330KB; index.html nạp trước (preload)
   hai tệp dùng nhiều nhất. Thêm phông / độ đậm mới: tải woff2 về assets/fonts và khai báo thêm ở đây. */
/* 20/10/2026: bỏ toàn bộ bộ chữ latin-ext (6 tệp ~100KB, PageSpeed điện thoại): đã quét index.html + catalog.js + hoatdong.js,
   không có ký tự nào cần bộ này – tiếng Việt nằm đủ trong bộ "vietnamese" + "latin". Thêm chữ ngoại lai (ł, ő, ş…) thì khai lại. */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-300-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/spectral-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/spectral-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/spectral-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/spectral-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/spectral-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/spectral-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Giao diện chung – mảng GIAO DIỆN phụ trách */

/* ============================================================
   TOKEN NHẬN DIỆN – nguồn duy nhất của màu, bo góc, bóng, nhịp.
   Giải thích từng token và lý do chọn: DESIGN.md.
   Muốn dùng một màu / bo góc / bóng chưa có tên ở đây thì THÊM VÀO ĐÂY TRƯỚC,
   không viết thẳng mã màu trong thành phần.
   ============================================================ */
:root {
  /* -- Màu nền tảng -- */
  --ac-ink-900: #0a0a0b;                  /* đen: thanh menu, trang chủ, khung xem ảnh */
  --ac-ink-800: #141214;                  /* đen phụ: bảng, thanh công cụ */
  --ac-ink-700: #2b2118;                  /* nâu đen: chữ chính trên nền be, tab đang chọn */
  --ac-paper-50: #fbf8f2;                 /* be sáng nhất */
  --ac-paper-100: #f7f3ec;                /* nền trang sản phẩm */
  --ac-paper-200: #f1ebe0;                /* ô chìm trên nền be */
  --ac-cream: #f6f3ec;                    /* trắng ngà ấm: chữ chính trên nền tối */
  --ac-gold-400: #e6cf9f;                 /* vàng kim chính */
  --ac-gold-600: #c9a46a;                 /* đầu đậm của gradient vàng */
  --ac-gold-100: #fff7ea;                 /* chữ trên nút tối trang chủ */
  --ac-gold-grad: linear-gradient(90deg, #c9a46a, #e6cf9f);
  /* -- Bộ màu tối của trang danh mục / sản phẩm (12/10/2026, xem DANH-GIA-UI-UX-2026-10-12.md mục 4) --
     Hàng hóa của An Chiêu phần lớn MÀU TRẮNG (mặt công tắc, bồn cầu, đèn). Trên nền be chúng biến mất.
     Bốn bậc giá trị: thanh đen 900 → nền trang char-800 → hộc ảnh niche-900 → đèn rọi + hàng trắng. */
  --ac-char-800: #1e1b17;                 /* nền trang danh mục / sản phẩm (than ấm) – nhấc sáng 12/10 lượt 3 */
  --ac-niche-900: #141315;                /* (giữ lại) nền hộc bản TỐI – không còn dùng cho ô ảnh */
  --ac-niche-50: #fbf8f2;                 /* kem sáng nhất, đỉnh phông */
  --ac-niche-300: #d4c5a9;                /* chân phông, chỗ sậm nhất */
  /* HỘC SÁNG KIỂU PHÔNG CHỤP (12/10/2026 lượt 7 – người dùng yêu cầu nền sáng trở lại).
     Dựng theo PHÔNG VÔ CỰC của phòng chụp sản phẩm: sáng ở đỉnh, sậm dần xuống chân phông,
     cộng một vùng tối hắt lên từ đáy. Hàng màu TRẮNG (đèn panel, mặt công tắc, bồn cầu) tách khỏi
     nền nhờ chân phông sậm CỘNG bóng đổ bám đúng hình thật của vật (ảnh đều đã tách nền, có kênh
     alpha, nên drop-shadow ôm theo viền vật chứ không ôm khung ảnh).
     VÌ SAO LẦN NÀY KHÁC LẦN BỊ LOẠI: bản kem hồi 12/10 là nền kem PHẲNG và KHÔNG CÓ bóng đổ –
     đó mới là nguyên nhân hàng trắng biến mất, không phải vì nền sáng. Đã dựng lại và đo trên
     đúng bốn mã khó nhất (MPE FPD-6060T trắng trơn, Moderva trắng, AvatarON ba màu, ZenCelo nâu).
     Bản hộc TỐI (lưới 26px + đèn rọi) nằm trong lịch sử git, commit 753ef36 trở về trước. */
  --ac-niche:
    radial-gradient(120% 78% at 50% 112%, rgba(126, 105, 74, 0.34), transparent 62%),
    linear-gradient(to bottom, var(--ac-niche-50) 0%, #f4eee2 40%, #e2d7c1 76%, var(--ac-niche-300) 100%);
  --ac-niche-line: rgba(60, 48, 32, 0.16);    /* viền hộc sáng */
  /* BA LỚP BÓNG, lớp đầu mới là lớp quan trọng nhất.
     Đo thật trên mã khó nhất (MPE FPD-6060T): ảnh trung bình RGB(228,230,234), phông kem (246,239,228)
     -> tương phản 1,09:1, gần như TRÙNG KHÍT, mà vật lại chiếm 88% khung ảnh. Bóng đổ mềm hất xuống
     không cứu được vì mép trên và hai mép bên vẫn trôi vào nền. Lớp `0 0 1px` không lệch, đậm, ôm sát
     viền vật nên vẽ ra một NÉT VIỀN theo đúng hình thật – hàng trắng lập tức đọc được, hàng sậm thì
     lớp này chìm đi, không hại gì. Hai lớp sau là bóng tiếp đất và bóng đổ cho có khối.
     Đừng bỏ lớp đầu: bỏ là đèn panel trắng biến mất y như bản kem bị loại hồi 12/10. */
  --ac-niche-drop:
    drop-shadow(0 0 1px rgba(58, 44, 24, 0.62))
    drop-shadow(0 1px 1px rgba(58, 44, 24, 0.3))
    drop-shadow(0 13px 16px rgba(72, 56, 34, 0.34));
  --ac-spot: rgba(240, 222, 186, 0.26);   /* (không còn dùng) đèn rọi ấm của hộc bản TỐI */
  /* Vàng kim KHÔNG dùng làm màu chữ trên nền be: chỉ 1,38:1 (gold-400) / 2,11:1 (gold-600). */

  /* -- Bo góc -- */
  --r-xs: 2px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --r-pill: 999px; --r-full: 50%;

  /* -- Đổ bóng -- Nền tối: đen trung tính. Nền be: được pha ấm tối đa .10 (DESIGN.md 5.3) */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.18);
  --sh-lg: 0 24px 50px rgba(0, 0, 0, 0.35);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  /* --sh-warm (bóng pha ấm) chỉ tồn tại trong bộ màu BE, khai ở .frame:not(.is-home):
     bóng pha màu trên nền tối là dấu hiệu giao diện máy sinh, nên không để nó có mặt ở ngữ cảnh tối. */

  /* -- Nhịp chuyển động -- */
  --t-fast: 150ms; --t-base: 300ms; --t-slow: 600ms; --t-scene: 850ms;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* -- Họ chữ -- */
  --f-body: "Be Vietnam Pro", system-ui, sans-serif;     /* toàn bộ giao diện */
  --f-display: "Spectral", Georgia, serif;               /* CHỈ tiêu đề >= 28px (dưới mức đó dấu chồng tiếng Việt dính nhau) */

  /* -- Thang cỡ tiêu đề -- dùng với --f-display */
  --fs-display-xl: clamp(30px, 4.2vw, 58px);
  --fs-display-l: clamp(26px, 2.8vw, 40px);
  --fs-display-m: clamp(21px, 2vw, 30px);

  /* -- Khoảng cách -- bội số của 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
}

/* Biến theo ngữ cảnh: bộ màu TỐI (mặc định). Bộ màu BE khai ở .frame:not(.is-home). */
:root {
  /* Bộ màu tối: đen trung tính hơi ấm + chữ trắng ngà. Không còn sắc tím (tàn dư của bản mẫu đầu) */
  --bg: var(--ac-ink-900);                  /* trùng màu thanh tiêu đề và meta theme-color */
  --text: var(--ac-cream);
  --muted: rgba(246, 243, 236, 0.62);
  --line: rgba(255, 255, 255, 0.14);
  --on-text: #17140e;                       /* chữ trên nền màu --text */
  --surface: rgba(255, 255, 255, 0.05);     /* nền nút / ô kính mờ */
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-solid: rgba(12, 10, 8, 0.55);
  --stroke: rgba(255, 255, 255, 0.26);
  --stroke-strong: rgba(255, 255, 255, 0.7);
  --halo: rgba(236, 214, 166, 0.28);        /* quầng sáng sau sản phẩm – vàng kim nhạt */
  --floor: rgba(0, 0, 0, 0.75);             /* bóng đổ dưới sản phẩm */
  --drop: rgba(0, 0, 0, 0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }
/* body KHÔNG cao cứng 100% (20/10/2026): thanh tiêu đề sticky nằm trong body, body chỉ cao 1 màn hình thì cuộn quá 1 màn hình
   thanh trôi mất ở trang danh mục – trái luật "thanh tiêu đề luôn hiện". min-height giữ nguyên chỗ cho các khối đo theo 100%. */
body { min-height: 100%; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 20/10/2026: các dải tràn viền (dải logo, ảnh nền) rộng 100vw – trên Windows 100vw tính cả thanh cuộn 15px nên trang có
   thanh cuộn NGANG ở mọi cỡ máy tính (Mac / Chromium không giao diện dùng thanh cuộn nổi nên không ai thấy). clip (không phải hidden):
   không tạo khung cuộn mới nên position: sticky và khoá cuộn bằng :has() vẫn chạy như cũ. */
html, body { overflow-x: clip; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

button { font: inherit; color: inherit; }

/* ---------- Khung chính (tràn viền) ---------- */
.frame {
  transition: background-color 0.8s ease;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--ac-char-800);          /* 12/10/2026: nền than thay cho gradient be (xem .frame:not(.is-home)) */
  overflow: hidden;
  overflow: clip; /* chặn cuộn ngang ngầm khi phần tử rộng hơn khung */
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Nền gradient mờ (blob): ánh vàng kim nhạt ở góc trên-trái & dưới-phải */
.glow {
  position: absolute;
  border-radius: 50%;
  /* 13/10/2026: bỏ filter: blur(80px) (3 khối blur lớn chạy hoạt ảnh vô hạn) – gradient tròn đã mờ dần về trong suốt */
  z-index: -1;
  will-change: transform;
}
.glow--gold-tl {
  width: 50%;
  height: 62%;
  left: -12%;
  top: -20%;
  background: radial-gradient(circle at 40% 40%, #f4e4c0 0%, #ecd6a6 35%, rgba(236, 214, 166, 0) 72%);
  opacity: 0.7;
  animation: drift-a 18s ease-in-out infinite alternate;
}
.glow--gold-br {
  width: 50%;
  height: 62%;
  right: -12%;
  bottom: -22%;
  background: radial-gradient(circle at 55% 55%, #f2e0b6 0%, #e8cf9c 35%, rgba(232, 207, 156, 0) 72%);
  opacity: 0.65;
  animation: drift-b 22s ease-in-out infinite alternate;
}
.glow--wave {
  width: 70%;
  height: 26%;
  right: -8%;
  bottom: 14%;
  background: radial-gradient(closest-side, rgba(255, 252, 244, 0.9), rgba(255, 252, 244, 0));
  transform: rotate(-14deg);
  opacity: 0.6;
  animation: drift-c 16s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate(6%, 8%) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-6%, -5%) scale(1.1); } }
@keyframes drift-c { to { transform: rotate(-8deg) translate(-4%, -6%); } }

/* ============================================================================
   NỀN "DÒNG ĐIỆN CHẠY TRÊN DÂY" (12/10/2026)
   Nền tối trơn một màu quá nhạt nhẽo. Thay vì rắc hạt / đốm màu trang trí (ẩn dụ lạ),
   dùng đúng thứ công ty bán: vài sợi dây mảnh vắt qua khung và một vệt sáng chạy dọc theo dây
   – "đèn bật, dòng điện chạy". Mỗi sợi là một <path>; vệt sáng là một nét đứt ngắn chạy bằng
   stroke-dashoffset (không có khối blur lớn, không có phần tử nào đổi kích thước).
   Tham khảo: lightstreakbg.framer.website (người dùng gửi 12/10).
   ============================================================================ */
.streaks {
  position: absolute;
  inset: 0;
  z-index: -1;                /* sau nội dung, trước nền khung – giống lớp hạt .frame::after */
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;      /* nền trang trí: không cho ảnh hưởng tính toán bố cục của nội dung */
}
.streaks svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.streaks .wire { fill: none; stroke: rgba(236, 214, 166, 0.085); stroke-width: 1; }
/* Trang chủ: lớp dây lát bằng nhiều khung 1200×800 xếp dọc (setupStreaks trong js/app.js), mỗi khung có dây + tia riêng;
   khung ngoài màn hình được gắn .is-offscreen nên tia dừng – mỗi lúc chỉ 1–2 khung đang vẽ. */
.streaks__band { position: absolute; left: 0; right: 0; contain: strict; will-change: transform; }   /* lớp riêng: tia chạy chỉ vẽ lại khung của nó */
.streaks__band.is-offscreen { will-change: auto; }   /* khung ngoài màn hình: trả lại bộ nhớ card đồ họa */
.streaks .spark {
  fill: none;
  stroke: var(--ac-gold-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* nét sáng ngắn trên một sợi rất dài: phần còn lại trong suốt */
  stroke-dasharray: 86 3000;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .streaks .spark {
    opacity: 1;
    animation: spark-run var(--dur, 16s) linear var(--delay, 0s) infinite;
  }
}
/* Quầng sáng thay cho drop-shadow (filter làm card đồ họa tích hợp giật): hai nét CÙNG độ dài nét đứt với lõi, đầu tròn,
   dày dần và nhạt dần → bao quanh lõi thành một vầng mềm, tâm trùng tâm. PHẢI đứng sau .streaks .spark (cùng độ ưu tiên). */
.streaks .spark.spark--glow { stroke: #f0dcae; stroke-width: 5; stroke-opacity: 0.2; }
.streaks .spark.spark--halo { stroke: #e6cf9f; stroke-width: 12; stroke-opacity: 0.06; }
.streaks .spark:not(.spark--glow):not(.spark--halo) { stroke: #fbeccb; }   /* lõi sáng hơn quầng một bậc → đọc như vệt sáng, không phải gạch màu */
@keyframes spark-run {
  from { stroke-dashoffset: 3086; }
  to { stroke-dashoffset: 0; }
}
/* Trang chủ: khung hero là ảnh đèn thật, không cần thêm dây. */
.frame.is-home .streaks { display: none; }

/* Lớp hạt (grain) */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Thanh điều hướng: MỘT hàng – logo trái · menu giữa · ô tìm kiếm phải ---------- */
/* QUY TẮC TỪ 12/10/2026: THANH TIÊU ĐỀ LUÔN HIỆN, không bao giờ ẩn khi cuộn (người dùng chốt).
   Mọi trang: `position: sticky` – thanh chiếm chỗ thật trong dòng chảy nên không phải bù padding.
   Trang chính dùng `fixed` (khai báo riêng bên dưới) vì khung hero cao đúng 100vh. */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  padding: 12px clamp(18px, 3vw, 40px);
  min-height: 68px;
}
/* khối ô tìm kiếm + bảng gợi ý (giữ tên lớp vì js/app.js dùng để bắt bấm ra ngoài) */
.nav__brand { position: relative; display: flex; align-items: center; flex: none; }
/* Thanh tiêu đề luôn nền đen ở mọi trang (không đổi màu theo trang sản phẩm):
   khai báo lại bộ màu tối ngay trên .nav để logo, ô tìm kiếm, menu luôn dùng màu sáng */
.nav {
  --bg: #0a0a0b;
  --text: #f6f3ec;
  --muted: rgba(246, 243, 236,0.62);
  --line: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.26);
  --stroke-strong: rgba(255, 255, 255, 0.7);
  background: var(--bg);
  color: var(--text);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 16px;                  /* tên công ty – thanh một hàng nên không cần 21px */
  white-space: nowrap;
  flex: none;
}
.logo__text { transition: opacity var(--t-fast); }
.logo:hover .logo__text { opacity: 0.78; }
.logo__mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;                 /* khung tròn nền trắng, biểu tượng AC chữ đen */
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.logo__mark img { display: block; width: 25px; height: auto; }

/* Ô tìm kiếm dạng viên thuốc, rộng cố định */
.search {
  display: flex;
  align-items: center;
  height: 38px;
  width: clamp(220px, 20vw, 320px);     /* ô tìm kiếm nới rộng 12/10/2026: khách là thợ điện tra MÃ HÀNG, đây là tính năng mạnh nhất của trang */
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
  flex: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
/* KHÔNG nở rộng khi bấm vào: ô rộng ra là đẩy / lấn sang chữ menu (người dùng phản ánh 2026-10-08) – chỉ đổi viền + nền */
.search:focus-within { border-color: var(--stroke-strong); background: rgba(255, 255, 255, 0.1); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 16px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.search input::placeholder { color: var(--muted); }
/* Dấu X sẵn có của trình duyệt cho input[type=search]: tắt đi, nếu không sẽ có HAI dấu X */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search button {
  position: relative;
  width: 32px; height: 32px;
  margin-right: 3px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: transform var(--t-fast);
}
.search button:hover { transform: scale(1.06); }
/* Gõ xong muốn xóa thì trước đây phải bôi đen rồi xóa tay. Nay chính nút đó thành nút xóa:
   kính lúp quay 90° rồi mờ đi trong lúc dấu X quay vào – một chỗ, một biểu tượng, không chen thêm nút
   (12/10/2026 – mẫu: gói "animated search bar", đổi biểu tượng kèm quay + phóng).
   js/app.js gắn lớp .has-text cho .search khi ô có chữ. */
.search button svg { position: absolute; transition: opacity 0.22s, transform 0.3s var(--ease-out); }
.search button .ic-clear { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.search.has-text button .ic-find { opacity: 0; transform: rotate(90deg) scale(0.5); }
.search.has-text button .ic-clear { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .search button svg { transition: opacity 0.01s; transform: none; }
}
.search button:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 2px; }

/* ============================================================================
   MENU 5 MỤC + BẢNG LỚN "SẢN PHẨM" (12/10/2026 – Đợt 5)
   Trước: lưới 6 cột × 2 hàng cho 11 đề mục, và từ 1241px thanh phải chia 2 tầng mới đủ chỗ
   (cao ~107px thay vì 68px đã chốt). Nay một hàng 5 mục ở mọi cỡ ≥ 1024px.
   ============================================================================ */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.menu__row { list-style: none; display: flex; align-items: center; gap: clamp(2px, 0.8vw, 14px); }
.menu__mega-item { position: static; }        /* bảng lớn neo theo .nav, không theo <li> */
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px clamp(10px, 1vw, 16px);
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-pill);
  opacity: 0.76;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.menu__link:hover { opacity: 1; background: rgba(255, 255, 255, 0.09); }
.menu__link:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 2px; }
/* mục đang mở: vạch vàng kim ngắn bên dưới */
.menu__link.is-active { opacity: 1; }
.menu__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 18px; height: 2px;
  translate: -50% 0;
  border-radius: var(--r-xs);
  background: var(--ac-gold-grad);
}
/* "Thiết bị vệ sinh" đứng riêng: chấm vàng dẫn trước chữ (người dùng muốn làm nổi bật mảng này) */
.menu__link--hl::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ac-gold-400);
  flex: none;
}
.menu__chev { transition: transform var(--t-base) var(--ease-out); opacity: 0.7; }
.nav.mega-open .menu__chev { transform: rotate(180deg); }
.nav.mega-open #megaBtn { opacity: 1; background: rgba(255, 255, 255, 0.09); }

/* ---- Bảng lớn ---- */
.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 41;
  padding: clamp(20px, 2vw, 30px) clamp(18px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--sh-lg);
}
.mega[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mega { animation: mega-in 0.26s var(--ease-out) both; }
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega__inner { max-width: 1280px; margin-inline: auto; display: grid; gap: clamp(18px, 2.4vw, 34px); }
@media (min-width: 1024px) { .mega__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mega__h {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ac-gold-400);
}
.mega__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mcard a {
  display: grid; gap: 8px;
  padding: 8px 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--text); text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mcard a:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(230, 207, 159, 0.3); }
.mcard a:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 2px; }
.mcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--ac-niche);
  border: 1px solid var(--ac-niche-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}
.mcard__media img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(58, 44, 24, 0.62)) drop-shadow(0 7px 9px rgba(72, 56, 34, 0.3)); }
.mcard__name { font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.mcard__n { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

.burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

/* ---------- Các màn hình (chuyển cảnh không tải lại trang) ---------- */
.views {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.view {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(34px) scale(0.98);
  /* 13/10/2026: bỏ `filter: blur(12px)` khi chuyển trang – làm mờ cả màn hình mỗi khung hình là thứ làm chuyển cảnh giật trên máy dùng card đồ họa tích hợp */
  transition:
    opacity 0.6s cubic-bezier(.4, 0, .2, 1),
    transform 0.85s var(--ease-out),
    visibility 0s linear 0.85s;
}
.view.is-leaving { transform: translateY(-34px) scale(0.98); }
.view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  filter: none;
  transition-delay: 0.26s, 0.26s, 0.26s, 0s;
}

/* ---------- Trang chính: ảnh tràn viền ---------- */
.home-bg {
  --top: var(--nav-h, 130px); /* ảnh bắt đầu ngay dưới thanh tiêu đề (chiều cao do JS đo) */
  position: absolute;
  inset: 0;
  z-index: -1;
  /* phía trên ảnh: màu trần đen; phía dưới (màn hình dọc): màu vùng sáng */
  background: #020202;
  opacity: 0;
  visibility: hidden; /* rời trang chính: ẩn hẳn, không ảnh hưởng hiển thị trang sản phẩm */
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.frame.is-home .home-bg { visibility: visible; transition: opacity 1s ease, visibility 0s; }
/* Vị trí dọc của ảnh nền trong khung: giữa khung; điện thoại ĐỨNG nâng lên 43% (xem cuối file). Ảnh, dải màu hai bên, vầng sáng đèn
   và nút "Xem …" đều dùng chung biến này nên luôn khớp nhau (trước đây chỉ ảnh dịch lên, dải màu vẫn ở giữa → đứt nét / lệch hai bên) */
:root { --photo-top: 50%; }
.home-bg__stage {
  position: absolute;
  inset: var(--top) 0 0;
}
/* dải màu mép trái/phải của ảnh, kéo giãn ra hai bên, cùng vị trí và chiều cao với ảnh */
.home-bg__off::before, .home-bg__lit::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--photo-top);
  height: min(100%, 100vw);
  transform: translateY(-50%);
  background: url("../assets/hero/hero-edges.webp") 0 0 / 100% 100% no-repeat;
}
/* SỬA 20/10/2026 – "vai" nón sáng gãy ngang ở màn hình rộng hơn ảnh vuông (≥ 1440px thấy rõ).
   hero-edges.webp là CỘT mép trái / phải của ảnh kéo giãn sang hai bên: ổn với các dải NGANG (trần đen, mép trần, tường)
   nhưng từ ~78% chiều cao trở xuống mép ảnh là NÓN SÁNG, kéo giãn ngang thành hai vạch sáng chạy thẳng ra mép màn hình
   – nhìn như nón sáng bị bẻ gập. Nay phần dưới hai bên phủ lại bằng màu tường, rồi vẽ tiếp CẠNH XIÊN của nón
   (đo trên ảnh: cạnh chạm mép ảnh ở 77,6% chiều cao, độ dốc ~1,06) bằng một tam giác chuyển sắc mềm,
   bắt đầu từ trong vùng mờ 7% của .hero-photo để không có chỗ nối. --S = cạnh ảnh vuông (khung chứa là .home-bg__stage). */
/* CHỈ màn hình NGANG (20/10/2026): màn dọc ảnh vừa bề ngang, không có dải hai bên, và ảnh mờ dần ở mép dưới → lớp màu tường
   này lộ ra thành vạch xám ngang dưới dòng chữ (người dùng chụp trên điện thoại). Màn dọc giữ nguyên dải màu mép ảnh như cũ. */
@supports (width: 1cqh) { @media (min-aspect-ratio: 1001/1000) {
  .home-bg__stage { container-type: size; }
  .home-bg__off::before, .home-bg__lit::before {
    --S: min(100cqh, 100cqw);
    --cone: #d3c0a7;
    background:
      linear-gradient(to bottom right, transparent 45%, var(--cone) 55%)
        calc(50% - var(--S) * 0.585) 100% / calc(var(--S) * 0.31) calc(var(--S) * 0.29) no-repeat,
      linear-gradient(to bottom left, transparent 45%, var(--cone) 55%)
        calc(50% + var(--S) * 0.585) 100% / calc(var(--S) * 0.31) calc(var(--S) * 0.29) no-repeat,
      linear-gradient(to bottom, transparent 75%, #75726d 75.6%, #7f7a72 100%),
      url("../assets/hero/hero-edges.webp") 0 0 / 100% 100% no-repeat;
  }
} }
.hero-photo {
  position: absolute;
  left: 50%;
  top: var(--photo-top);
  height: min(100%, 100vw);
  aspect-ratio: 1;
  width: auto;
  transform: translate(-50%, -50%);
  /* mờ dần hai mép để không thấy đường nối với nền */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.glow { transition: opacity 1s ease; }
.frame.is-home .home-bg { opacity: 1; }

/* Nút "Xem đèn spotlight RS280": nằm trong vùng sáng của đèn, trên chữ "Philips"
   (khung vuông trùng khớp vị trí ảnh nền trang chính) */
.home-cta {
  --top: var(--nav-h, 130px);
  position: absolute;
  inset: var(--top) 0 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.frame.is-home .home-cta { opacity: 1; visibility: visible; transition: opacity 0.7s ease, visibility 0s; }
.home-cta__photo {
  position: absolute; left: 50%; top: var(--photo-top);
  height: min(100%, 100vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
/* Khối chữ giới thiệu nằm giữa vùng sáng của đèn.
   Trước đây còn một nút "Xem PHILIPS …" bên dưới, đã bỏ ngày 08/10/2026 cùng toàn bộ CSS của nó
   (.home-cta__btn, .home-cta__icon). Chữ nhích lên 64% vì khối nay chỉ còn một phần. */
.home-cta__stack {
  position: absolute; left: 50%; top: 69%;          /* 64% -> 69%: tiêu đề xê xuống một chút (người dùng 2026-10-09) */
  transform: translate(-50%, -50%);
  width: max-content; max-width: min(92%, calc(100vw - 136px));
  display: flex; flex-direction: column; align-items: center;
}
/* mở màn: chữ hiện sau khi vùng sáng đã lan xuống */
.frame.intro .home-cta__stack { animation: cta-in 0.45s var(--ease-out) 1.3s both; }
@keyframes cta-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- Mở màn: đèn bật sáng ---------- */
@property --reveal { syntax: "<percentage>"; inherits: false; initial-value: 115%; }
.hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo .hero-text { position: absolute; left: 5%; top: 75%; width: 90%; height: 25%; }
.home-bg__flash { background: none; pointer-events: none; mix-blend-mode: screen; }

/* -- Quầng sáng ở miệng đèn: vùng nhỏ nên dùng blur thoải mái -- */
/* Quầng sáng ở miệng đèn. Từ 12/10/2026 nó gánh luôn phần "lõi sáng" trước đây nằm trong .hero-beam
   (xem chú thích của .hero-beam), nên to và mềm hơn một chút. */
.hero-glow {
  position: absolute; left: 50%; top: 25.6%; width: 30%; height: 13%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 248, 232, 0.98), rgba(255, 226, 172, 0.62) 48%, transparent);
  filter: blur(14px); opacity: 0;
}

/* -- Nón sáng đổ xuống --
   KHÔNG dùng filter: blur() ở đây: khối rộng ~700×560px, blur vùng rộng làm trình duyệt đơ
   (quy tắc trong CLAUDE.md). Độ mềm lấy từ hai nguồn miễn phí về hiệu năng:
     · dọc  – gradient nhiều điểm dừng, nhạt dần tới trong suốt
     · ngang – mask-image làm tan hai mép nón
   Cộng với mix-blend-mode: screen của lớp cha, ánh sáng cộng vào ảnh đúng như đèn thật. */
.hero-beam {
  position: absolute;
  left: 50%; top: 23.5%;
  width: 80%; height: 72%;
  translate: -50% 0;
  /* Ba lớp tỏa tròn chồng nhau thay cho một hình tam giác cắt bằng clip-path:
     tam giác cho ra hai cạnh xiên SẮC NÉT, nhìn như miếng giấy dán lên ảnh.
     Gradient tỏa thì mép tự tan, giống ánh sáng thật, và không tốn blur. */
  /* ĐÃ SỬA 12/10/2026 – người dùng chỉ ra "line thẳng" cắt ngang khung ở đúng tầm cái đèn.
     Nguyên nhân: hai lớp tỏa tròn cũ có tâm ở 2% và 6% – tức NGAY MÉP TRÊN của chính khung .hero-beam.
     Ở mép đó gradient vẫn đang rất sáng nên bị khung CẮT NGANG, mà lớp cha lại `mix-blend-mode: screen`
     – thành một vạch sáng thẳng tăm tẪfp kéo hết 80% bề ngang. Không phải lỗi của ảnh nền.
     Cách sửa: (1) bỏ hẳn lớp "lõi sáng" ở 2% – phần việc đó giao cho .hero-glow (quầng miệng đèn)
     vốn đã có sẵn và được làm mờ thật; (2) thêm mặt nạ mờ dần 11% ở mép trên khung, nên thân
     chùm sáng tan vào nền thay vì bị cắt. */
  background:
    /* thân chùm sáng loe dần xuống */
    radial-gradient(46% 62% at 50% 6%, rgba(255, 230, 182, 0.34), rgba(255, 220, 160, 0.12) 52%, transparent 80%),
    /* vũng sáng đọng trên mặt tường / sàn */
    radial-gradient(64% 26% at 50% 88%, rgba(255, 216, 152, 0.26), transparent 74%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 100%);
  opacity: 0;
  will-change: opacity;
}
/* -- Bụi li ti bay trong vùng sáng: chỉ chạy transform nên không tốn gì -- */
.hero-motes {
  position: absolute;
  left: 50%; top: 23.5%;
  width: 80%; height: 72%;
  translate: -50% 0;
  /* mờ dần ra mép để hạt không kết thúc đột ngột thành một hình chữ nhật */
  -webkit-mask-image: radial-gradient(48% 62% at 50% 10%, #000 20%, transparent 82%);
  mask-image: radial-gradient(48% 62% at 50% 10%, #000 20%, transparent 82%);
  opacity: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 18%, rgba(255, 246, 224, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 61% 34%, rgba(255, 240, 210, 0.7), transparent),
    radial-gradient(2px 2px at 44% 62%, rgba(255, 248, 232, 0.6), transparent),
    radial-gradient(1.3px 1.3px at 76% 71%, rgba(255, 238, 206, 0.65), transparent),
    radial-gradient(1.1px 1.1px at 33% 84%, rgba(255, 244, 220, 0.55), transparent),
    radial-gradient(1.7px 1.7px at 58% 93%, rgba(255, 240, 212, 0.5), transparent);
  background-size: 52% 46%;
  will-change: transform;
}
/* Hiện / ẩn theo đúng lớp .home-bg__flash (cùng nhịp với quầng sáng miệng đèn), KHÔNG tự quản lý
   trạng thái riêng: bản trước chồng transition + animation + các lớp .intro lên nhau và kết quả là
   quầng sáng kẹt ở opacity 0. Ít lớp điều khiển hơn thì không còn chỗ cho xung đột. */
.frame.is-home .hero-beam { opacity: 1; }
.frame.is-home .hero-motes { opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  /* đèn thật có dao động rất nhỏ; biên độ 4% nên cảm nhận được mà không thành nhấp nháy */
  .frame.is-home .hero-beam { animation: beam-breathe 7s ease-in-out infinite; }
  .frame.is-home .hero-motes { animation: motes-drift 34s linear infinite; }
}
@keyframes beam-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.96; } }
@keyframes motes-drift { to { transform: translate3d(-6%, -14%, 0); } }
.home-bg__lit {
  /* nền phía trên / dưới ảnh khi khung cao hơn ảnh: đen trần và đúng màu đáy dải màu hai bên (#cabaa8) để không có vạch nối */
  background: linear-gradient(to bottom, #020202 50%, #cabaa8 50%);
  --lampY: calc(var(--photo-top) - 0.25 * min(100%, 100vw));
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% var(--lampY), #000 var(--reveal), transparent calc(var(--reveal) + 15%));
  mask-image: radial-gradient(ellipse 120% 100% at 50% var(--lampY), #000 var(--reveal), transparent calc(var(--reveal) + 15%));
}
.home-bg__off {
  filter: brightness(0.7);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--photo-top) - 0.165 * min(100%, 100vw)), transparent calc(var(--photo-top) - 0.11 * min(100%, 100vw)));
  mask-image: linear-gradient(to bottom, #000 calc(var(--photo-top) - 0.165 * min(100%, 100vw)), transparent calc(var(--photo-top) - 0.11 * min(100%, 100vw)));
}
/* Nhịp mở màn – tổng 1,8 giây (trước đây 4,6s). Giữ nguyên trình tự nhân quả:
   đèn hiện ra -> bừng sáng -> vùng sáng lan từ đèn xuống -> chữ và nút hiện.
   Rút ngắn vì khách quay lại lần 2, lần 3 vẫn phải xem lại từ đầu; quá 3 giây là nhiều người rời trang. */
.frame.intro .home-bg__off { animation: lamp-in 0.35s ease 0s both; }
.frame.intro .hero-glow { animation: lamp-flicker 1.1s ease 0.3s both; }
.frame.intro .home-bg__lit { animation: light-spread 0.85s cubic-bezier(.45, 0, .2, 1) 0.5s both; }
.frame.intro .hero-text,
.frame.intro .hero-copy { animation: text-in 0.45s var(--ease-out) 1.25s both; }
.frame.intro:not(.ready) * { animation-play-state: paused !important; }
@keyframes lamp-in { from { opacity: 0; } to { opacity: 1; } }
/* đèn bật một lần: sáng lên mượt, giữ sáng rồi hòa vào ảnh */
@keyframes lamp-flicker {
  0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes light-spread { from { --reveal: -15%; } to { --reveal: 115%; } }
@keyframes text-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Trang sản phẩm: nền be, ánh vàng kim ở góc trên-trái & dưới-phải ---------- */
/* 12/10/2026 – ĐỔI SANG NỀN TỐI (phương án "Showroom đêm", người dùng chọn 12/10).
   Lý do: hàng hóa phần lớn màu trắng, trên nền be chúng biến mất (đo thật ở 375px: ô ảnh trông như ô trống).
   Tách lớp trong giao diện tối KHÔNG dựa vào chênh lệch sáng tối lớn (bốn bậc đều gần nhau) mà dựa vào
   ĐƯỜNG VIỀN TÓC 1px + ÁNH SÁNG TRONG KHỐI – nếu chỉ đổi màu nền mà giữ bốn lớp phẳng thì sẽ lặp lại
   đúng vấn đề của nền be ở phiên bản tối. Chi tiết: DANH-GIA-UI-UX-2026-10-12.md mục 3.0 và 4. */
.frame:not(.is-home) {
  --bg: var(--ac-char-800);
  --text: var(--ac-cream);
  --muted: rgba(246, 243, 236, 0.62);     /* 6,9:1 trên #181613 – AAA */
  --line: rgba(255, 255, 255, 0.12);
  --on-text: #17140e;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-solid: rgba(20, 18, 20, 0.86);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke-strong: rgba(255, 255, 255, 0.6);
  --halo: rgba(236, 214, 166, 0.28);      /* quầng vàng kim – hợp nền tối */
  --floor: rgba(0, 0, 0, 0.75);
  --drop: rgba(0, 0, 0, 0.55);
  --sh-warm: 0 18px 40px rgba(0, 0, 0, 0.42);   /* nền tối: bóng ĐEN trung tính, không pha màu (DESIGN.md §5.3) */
  color: var(--text);
}
.frame::after { opacity: 0.035; }      /* lớp hạt – giữ nguyên mức cũ, chỉ đủ phá dải màu, không thêm chi phí vẽ */
.frame.is-home .glow { opacity: 0; }
/* Ba quầng vàng mờ (.glow) đặt trên nền than biến thành một vệt NÂU ĐỤC ở góc trên-trái – đã dựng thử
   và chụp màn hình ngày 12/10. Chúng cũng là 3 × filter: blur(80px) chạy hoạt ảnh vô hạn trên MỌI trang
   danh mục (trái DESIGN.md §6.2 quy tắc 2). Tắt hẳn ngoài trang chủ. */
.frame:not(.is-home) .glow { display: none; }

/* màn hình dọc (điện thoại): ảnh vừa bề ngang, mờ thêm mép trên/dưới */
@media (max-aspect-ratio: 1/1) {
  .hero-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Danh mục sản phẩm ---------- */
.catalog {
  padding: 0 clamp(16px, 4vw, 72px) 40px;
  justify-content: flex-start;
}
/* tiêu đề, mục con, thanh hãng không bao giờ bị ép nhỏ lại (thanh hãng có overflow nên mặc định co về 0 khi trang thấp) */
.catalog > :not(.showcase) { flex-shrink: 0; }
.tabs::-webkit-scrollbar { display: none; }
/* màn hình máy tính: chừa lề hai bên tối thiểu 72px để cột ảnh nhỏ bên phải không bị cụm nút liên hệ cố định chạm vào */
@media (min-width: 1101px) { .catalog { padding-inline: max(clamp(16px, 4vw, 72px), 72px); } }

/* Tiêu đề đề mục (vd. THIẾT BỊ CHIẾU SÁNG): nổi bật hơn hàng mục con, cách thanh tiêu đề một khoảng thoáng */
.catalog__eyebrow {
  margin-top: clamp(22px, 3.6vh, 40px);
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin-right: -0.2em;
  text-align: center;
}
/* gạch vàng kim mảnh dưới tiêu đề, tách tiêu đề với hàng mục con */
.catalog__eyebrow::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #c9a46a, #e6cf9f);
}

.tabs {
  position: relative;
  display: inline-flex;
  min-height: 52px;                /* giữ chỗ sẵn cho các nút hãng do JS tạo: không đẩy lưới xuống sau khi trang đã vẽ */
  max-width: 100%;                 /* nhiều hãng trên màn hình hẹp: thanh chọn hãng vuốt ngang được, không tràn khỏi màn hình */
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
/* Dấu hiệu vuốt ngang: mờ dần ở mép còn nội dung. Class do js/app.js (markTabsScroll) bật/tắt nên khi
   thanh vừa đủ chỗ thì KHÔNG có mặt nạ, chip cuối không bị cắt mép. */
.tabs.can-scroll-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.tabs.can-scroll-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
}
.tabs.can-scroll-start.can-scroll-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
/* Hàng mục con (vd. Đèn âm trần · Đèn ốp trần · Đèn trang trí) – nằm DƯỚI thanh hãng */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin-top: 14px;
}
.subtabs button {
  position: relative;
  border: 0;
  background: none;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s;
}
.subtabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-out);
}
.subtabs button:hover { color: var(--text); }
.subtabs button.is-active { color: var(--text); }
.subtabs button.is-active::after { transform: scaleX(1); }
.tabs + .subtabs { margin-top: 10px; }        /* mục con nằm dưới thanh hãng */

/* ĐIỆN THOẠI: mục con thành MỘT HÀNG VUỐT NGANG, không xuống nhiều hàng (13/10/2026).
   Đo thật ở 375×812 trên trang một mã hàng trước khi sửa: 7 mục con của Thiết bị vệ sinh
   chiếm 129px (3 hàng), đẩy TÊN SẢN PHẨM xuống y=847 — tức nằm DƯỚI màn hình cao 812px.
   Khách mở một mã hàng mà không nhìn thấy tên của nó. Một hàng còn ~44px, tên lên trên nếp gấp.
   Cùng kiểu với thanh chọn hãng .tabs: mờ dần ở mép còn nội dung, JS tự cuộn mục đang chọn vào giữa. */
@media (max-width: 700px) {
  .subtabs {
    flex-wrap: nowrap;
    /* KHÔNG dùng justify-content: center ở hàng vuốt ngang: khi nội dung dài hơn khung,
       flexbox đẩy tràn ra CẢ HAI phía và phần đầu hàng không cuộn tới được (scrollWidth
       vẫn báo bằng clientWidth). Đã dựng và thấy đúng lỗi đó: mục con đầu bị cắt mất.
       Cách chắc chắn: căn trái, rồi cho chính khung co theo nội dung (width: max-content)
       và chặn ở 100% — vừa khung thì margin auto căn giữa, dài hơn thì cuộn từ đầu hàng. */
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 0 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: 18px;
    overscroll-behavior-x: contain;      /* vuốt hết hàng thì không kéo luôn cả trang sang ngang */
  }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { flex: none; white-space: nowrap; }
  .subtabs.can-scroll-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }
  .subtabs.can-scroll-start {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px);
  }
  .subtabs.can-scroll-start.can-scroll-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
}
/* Bước chi tiết ≥ 1101px: ô "Thông số nổi bật" nằm cố định bên trái (rộng ~214px + lề 72px) nên hàng mục con KHÔNG được tràn sang đó.
   9 mục con (Thiết bị vệ sinh, từ 2026-10-11 thêm "Chậu chén") rộng ~845px, ở 1280px chạm ô thông số → cho xuống 2 hàng khi hẹp (100vw − 620px). */
@media (min-width: 1101px) {
  .frame:not(.is-plp) .subtabs { max-width: calc(100vw - 620px); margin-inline: auto; }
}

.tabs__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}
/* Quầng vàng mềm quanh hãng đang chọn (12/10/2026 – mẫu: gói "navigation tabs v5",
   lớp .dark-tab-ambient-glow). Trên nền tối, một thanh trắng trơn khó bắt mắt; quầng
   vàng cho nó một điểm neo mà không thêm viền hay bóng cứng.
   .tabs có overflow-x:auto nên MỌI thứ tràn quá 4px padding đều bị cắt – quầng vì vậy
   chỉ nở đúng trong phần padding đó và đã nhạt sẵn khi chạm mép, không sinh đường cắt.
   Quầng nằm trong .tabs__indicator nên trôi theo thanh trượt, không cần thêm transition. */
/* [style] : chỉ vẽ quầng SAU KHI renderPlp() đã đặt được vị trí + bề ngang cho thanh trượt.
   Thanh trượt bề ngang 0 mà vẫn vẽ quầng thì thành một vệt vàng lem ở mép trái thanh chọn hãng.
   Hiện không gặp (đề mục không chia theo hãng thì cả thanh .tabs bị ẩn), nhưng giữ cho chắc:
   đổi bố cục thanh chọn hãng sau này mà quên là lộ ngay. */
.tabs__indicator[style]::after {
  content: "";
  position: absolute;
  inset: -4px -10px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(230, 207, 159, 0.4), rgba(230, 207, 159, 0) 64%);
}
.tabs button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 9px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.35s;
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { color: var(--on-text); }

/* Quy tắc chung cho MỌI đề mục hàng hóa (hiện tại và thêm sau này):
   khối ảnh + tên hàng luôn chừa khoảng cách dưới thanh chọn hãng / mục con, ảnh không vượt khung --media-h
   (fitStage() tự trừ khoảng này khi tính chiều cao khung nên trang vẫn vừa một màn hình) */
.showcase {
  --media-h: clamp(220px, 44vh, 440px);
  margin-top: clamp(14px, 2.4vh, 26px);
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}
/* chừa chỗ đều hai bên cho cột ảnh chi tiết, để sản phẩm vẫn nằm giữa */
.showcase.has-rail { padding-inline: 190px; }

/* ---------- Ô thông số nổi bật (bên trái) ---------- */
/* chừa chỗ đều hai bên khi có ô thông số hoặc cột ảnh chi tiết, để sản phẩm vẫn nằm giữa */
.showcase.has-specs { padding-inline: 230px; }
/* khung sản phẩm gọn lại để ô thông số nằm sát sản phẩm hơn */
.showcase.has-specs .stage { max-width: 800px; column-gap: 28px; }
.specs {
  position: absolute;
  right: calc(100% + 16px);      /* sát bên trái nút << */
  /* căn giữa theo chiều cao ảnh sản phẩm – không dùng transform để hiệu ứng trượt không làm ô bị tụt */
  top: 0;
  bottom: 0;
  height: max-content;
  margin-block: auto;
  width: 214px;
  padding: 18px 18px 8px;
  border-radius: var(--r-xl);
  /* 12/10/2026: khối ĐẶC, không còn "kính mờ". Ô kính mờ (--surface .06) trên nền than gần như vô hình –
     đúng vấn đề của ảnh 5 người dùng gửi. Ảnh 6 (thiết bị vệ sinh) được đánh giá cao chính vì ô này là
     khối đặc đọc rõ như một tấm thẻ kỹ thuật. */
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--surface-solid);
  box-shadow: var(--sh-inset), var(--sh-warm);
  text-align: left;
}
.specs[hidden] { display: none; }
.specs__title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs__list { margin: 0; }
.specs__row { padding: 10px 0; border-top: 1px solid var(--line); }
.specs__row:first-child { border-top: 0; }
.specs dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--text); }

/* ---------- Cột ảnh chi tiết (bên phải) ---------- */
.rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
}
.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--surface-solid);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
}
.rail__btn:hover { background: var(--text); color: var(--on-text); }
.rail__btn:disabled { opacity: 0.3; pointer-events: none; }

.rail__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: none;
}
.rail__list::-webkit-scrollbar { display: none; }

.thumb {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 12px;
  /* 12/10/2026: dùng CÙNG hộc tối như ô ảnh ở lưới, để ảnh nhỏ và ảnh lớn là một hệ.
     Trước đây là ô kính mờ --surface: trên nền than nó chỉ còn là một ô xám nhạt gần như vô hình. */
  border: 1px solid var(--ac-niche-line);
  background: var(--ac-niche);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);       /* ô co theo khung nút: ảnh dọc không tràn ra ngoài rồi bị cắt đáy */
  place-items: center;
  padding: 10px;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.62;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease-out);
}
.thumb:hover { opacity: 1; transform: translateX(-3px); }
.thumb.is-active {
  opacity: 1;
  border-color: transparent;
  /* hộc nay là kem, vòng chọn màu var(--text) (cũng kem) sẽ vô hình -> dùng nâu sậm */
  box-shadow: 0 0 0 2px rgba(58, 44, 26, 0.9), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}


.shot {
  display: grid;
  place-items: center;
  width: 100%;
}
.rail__list { position: relative; }

/* Ảnh chụp thật (không tách nền): bo góc, phủ kín ô nhỏ */
.stage__media img.is-photo {
  border-radius: 16px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
}
.thumb--photo { padding: 0; }
.thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 3vw, 48px);
  width: 100%;
  max-width: 1000px;
  touch-action: pan-y;
}

.stage__media {
  position: relative;
  z-index: 1; /* tủ chính luôn nằm trên ảnh mờ */
  height: var(--media-h);
  display: grid;
  place-items: center;
}
/* quầng sáng phía sau sản phẩm */
.stage__media::before {
  content: "";
  position: absolute;
  inset: 8% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), transparent);
  z-index: -1;
}
/* bóng đổ dưới sản phẩm */
.stage__media::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor), transparent);
  filter: blur(6px);
  z-index: -1;
}
/* ảnh sản phẩm đứng yên (người dùng yêu cầu bỏ hiệu ứng lơ lửng lên xuống) */
.float {
  display: grid;
  place-items: center;
  height: 100%;
}
.stage__media img {
  display: block;
  max-height: calc(var(--media-h) * 0.94 * var(--img-scale, 1));          /* --img-scale: variant.scale trong catalog.js (mặc định 1) */
  max-width: calc(min(100%, 620px) * var(--img-scale, 1));
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px var(--drop));
  user-select: none;
  -webkit-user-drag: none;
}


.stage { position: relative; }
.arrow { position: relative; z-index: 2; }

.peek {
  position: absolute;
  right: 9px;               /* mép phải nép sau nút >> */
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  border: 0;
  padding: 16px 0 30px 16px; /* chừa chỗ cho bóng đổ, không bị cắt cạnh */
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-mask-image: linear-gradient(to left, #000 70%, transparent 100%);
  mask-image: linear-gradient(to left, #000 70%, transparent 100%);
}
.peek img {
  display: block;
  height: calc(var(--media-h) * 0.42);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.72;
  filter: drop-shadow(0 8px 14px var(--drop));
  transform: scale(0.96);
  transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--ease-out);
}
.peek:hover img,
.stage:has(.arrow--next:hover) .peek img {
  opacity: 1;
  filter: drop-shadow(0 10px 18px var(--drop));
  transform: scale(1) translateX(-8px);
}

.arrow {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /* 12/10/2026: nền ĐẶC thay cho kính mờ. Hai lý do: (1) vòng tròn viền mảnh trong suốt đặt giữa khoảng
     trống trông như lơ lửng, không gắn với gì; (2) ảnh mờ "mã kế tiếp" (.peek) nấp sau nút này – khi nút
     trong suốt thì hai thứ hoà vào nhau, nhìn như lỗi chồng hình (người dùng phản ánh, ảnh 6). */
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--surface-solid);
  box-shadow: var(--sh-inset);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-out), opacity 0.25s;
}
.arrow:hover { background: var(--text); color: var(--on-text); }
.arrow--next:hover { transform: translateX(4px); }
.arrow--prev:hover { transform: translateX(-4px); }
.arrow:disabled { opacity: 0; pointer-events: none; }

/* ĐIỆN THOẠI: hai nút ‹ › ĐÈ LÊN khung ảnh thay vì chiếm cột riêng (13/10/2026).
   Đo thật ở 375×812 trước khi sửa: .stage là lưới 3 cột `auto 1fr auto`, hai nút 58px cộng
   khoảng cách hai bên ăn mất 176px, khung ảnh chỉ còn 199px trên màn 375px — ảnh sản phẩm
   cao 191px nằm lọt trong hộc cao 357px, tức bỏ phí 166px chiều cao và hàng hóa nhỏ một cách
   vô lý ở đúng trang quan trọng nhất. Nay nút nổi hai mép, ảnh lấy trọn bề ngang.
   Chỉ áp ≤700px: bố cục máy tính (ràng buộc "vừa khít một màn hình" ở ≥1101px) giữ nguyên. */
@media (max-width: 700px) {
  .stage {
    display: block;
    position: relative;
  }
  .stage .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
  }
  .stage .arrow--prev { left: 0; }
  .stage .arrow--next { right: 0; }
  /* bỏ hiệu ứng trượt ngang khi rê chuột: nút nay nằm đè lên ảnh, trượt sẽ che mất hàng hóa */
  .stage .arrow--next:hover, .stage .arrow--prev:hover { transform: translateY(-50%); }
  .stage .peek { display: none; }        /* ảnh mã kế tiếp: không còn chỗ, bỏ trên điện thoại */
}

.info { margin-top: 18px; width: 100%; }
/* khối tên hàng không rộng hơn khung sản phẩm (800px), để tên dài không chạy xuống dưới ô thông số bên trái / cột ảnh nhỏ bên phải */
@media (min-width: 1101px) { .info { max-width: 800px; margin-inline: auto; } }
/* Tên hàng: chữ chạy liền một mạch (không dùng flex để chữ đậm tên hãng không tách khỏi dòng), căn giữa,
   ngắt dòng cân đối (không bỏ lẻ 1 chữ ở dòng cuối), hộp luôn đủ 2 dòng để khung không nhảy giữa các sản phẩm */
.info__name {
  max-width: min(100%, 36em);
  margin-inline: auto;
  font-size: clamp(18px, 1.9vw, 25px);                 /* tên hàng nhỏ hơn ảnh sản phẩm (người dùng 2026-10-09: ảnh nhỏ hơn tên hàng, mất cân đối) */
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
@media (min-width: 1101px) { .info__name { min-height: 2.5em; } }
/* tên dài (hơn ~50 ký tự): hạ cỡ chữ một bậc để không quá 2–3 dòng */
.info__name.is-long { font-size: clamp(16px, 1.6vw, 21px); }
/* tên rất dài (hơn ~75 ký tự, vd. quạt hút Panasonic liệt kê 5 mã): hạ thêm một bậc để vẫn ≤ 3 dòng */
.info__name.is-xlong { font-size: clamp(14px, 1.4vw, 18px); }
.info__name b { font-weight: 600; letter-spacing: 0.08em; }
.info__name .nb { white-space: nowrap; }

.variants {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.variants__label {
  font-size: 13px;
  color: var(--muted);
  min-width: 130px;
  text-align: right;
}
.variants__label strong { color: var(--text); font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--bg), 0 0 0 3px transparent;
  transition: box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.swatch:hover { transform: scale(1.12); }
.swatch--chip {
  width: auto;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.swatch--chip:hover { transform: none; color: var(--text); background: var(--surface-hover); }
.swatch--chip.is-active {
  background: var(--text);
  color: var(--on-text);
  box-shadow: none;
}
.swatch.is-active:not(.swatch--chip) {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--bg), 0 0 0 4px var(--text);
}

/* (đã bỏ thanh số thứ tự .counter – người dùng 2026-10-09: trùng với "Mã n / N" ở thanh quay lại) */

.empty {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text);
}
.empty strong { color: var(--text); font-weight: 500; font-size: 18px; }

[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
/* 12/10/2026: thanh tiêu đề chỉ còn 5 mục nên MỘT HÀNG 68px vừa ở mọi cỡ ≥ 1024px.
   Đã BỎ HẲN quy tắc cũ "≥ 1241px chia 2 tầng" – đó là cách vá cho 11 mục, không phải thiết kế. */
@media (max-width: 1240px) {
  .nav { gap: clamp(20px, 2.4vw, 36px); }
  .menu__row { gap: 2px; }
  .menu__link { font-size: 12px; letter-spacing: 0.04em; padding-inline: 10px; }
}

/* Màn hình hẹp: cột ảnh chi tiết chuyển thành hàng ngang dưới tên sản phẩm */
@media (max-width: 1100px) {
  .showcase.has-rail, .showcase.has-specs { padding-inline: 0; }
  /* ô thông số chuyển xuống dưới tên sản phẩm, xếp 2 cột */
  .specs { position: static; order: 5; width: min(100%, 560px); height: auto; margin: 22px 0 0; padding: 14px 18px 6px; }
  .specs__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .specs__row:nth-child(2) { border-top: 0; }
  .rail {
    position: static;
    transform: none;
    margin-top: 20px;
    max-width: 100%;
  }
  .rail__nav { display: none; }
  .rail__list {
    flex-direction: row;
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    gap: 10px;
  }
  .thumb { width: 76px; padding: 7px; border-radius: 10px; }
  .thumb:hover { transform: translateY(-3px); }
}

/* Thanh menu cỡ trung (1024–1439px): 6 mục + ô tìm kiếm không đủ chỗ ở cỡ chữ gốc.
   Từ khi thêm mục Catalogue (PR #38), hàng link rộng 611px tràn ra khỏi khung 458px:
   logo bị "Trang chủ" đè, "Liên hệ" đè ô tìm kiếm (đo được −51px mỗi bên ở 1024px).
   .menu để overflow nhìn thấy được nên tràn đều hai bên; thu chữ + đệm + ô tìm cho vừa một hàng. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .nav { gap: clamp(12px, 1.6vw, 22px); padding: 12px clamp(14px, 2vw, 24px); }
  .menu__row { gap: 2px; }
  .menu__link { font-size: 12px; letter-spacing: 0.04em; padding: 9px 6px; }
  .search { width: clamp(170px, 16vw, 220px); }
}

/* Nút ba gạch: mốc hạ từ ≤ 1240px xuống ≤ 1023px (12/10/2026).
   5 mục + ô tìm kiếm vừa thoải mái từ 1024px; trước đây phải thu gọn sớm vì 11 mục không đủ chỗ.
   Trong ngăn kéo: bảng lớn không nổi lên nữa mà xổ thẳng trong dòng chảy. */
@media (max-width: 1023px) {
  .home-bg, .home-cta { --top: var(--nav-h, 68px); }
  .nav { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .burger { display: grid; place-items: center; }
  .nav__brand { display: contents; }               /* điện thoại: ô tìm kiếm mở ra thành một hàng riêng khi bấm nút ba gạch */
  .search,
  .menu { display: none; }
  /* Ngăn kéo mở ra dài hơn màn hình điện thoại (bảng "Sản phẩm" xổ ~1200px): phải CUỘN ĐƯỢC TRONG CHÍNH NGĂN KÉO.
     Trước đây thanh tiêu đề là fixed, cao 1616px trên màn 664px và không cuộn được → khách vuốt xuống thì trang phía sau cuộn,
     bảng tự đóng và "sản phẩm biến mất" (người dùng phản ánh trên iPhone 19/10/2026). */
  .nav.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .nav.open .search { display: flex; width: 100%; order: 3; }
  .nav.open .search:focus-within { width: 100%; }
  .nav.open .menu { display: block; width: 100%; order: 4; }
  .nav.open .menu__row { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav.open .menu__link { justify-content: flex-start; width: 100%; padding: 12px 14px; }
  .nav.open .menu__link.is-active::after { left: 14px; translate: 0 0; bottom: 6px; }
  .nav.open .menu__link--btn { justify-content: space-between; }
  .mega {
    position: static;
    padding: 6px 0 10px;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mega__inner { gap: 16px; }
  .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .peek { display: none; }
}

/* Ảnh DẢI NẰM NGANG (tỉ lệ rộng ≥ 2,2:1 – mặt công tắc nhiều màu xếp hàng, MCB, đèn pha…): trên điện thoại, hai nút « » ăn mất ~100px chiều ngang nên ảnh
   chỉ còn ~260 × 70px. Đổi bố cục khung: ảnh trải trọn bề ngang, hai nút chuyển mã nằm thành một hàng ngay dưới ảnh (JS bật .is-wide – xem applyMedia). */
@media (max-width: 700px) {
  .stage.is-wide {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media media" "prev next";
    row-gap: 12px; column-gap: 16px;
  }
  .stage.is-wide .stage__media { grid-area: media; height: auto; padding: 8px 0 4px; }
  .stage.is-wide .stage__media::before { inset: 0 6%; }
  .stage.is-wide .float, .stage.is-wide .shot { height: auto; width: 100%; }
  .stage.is-wide .stage__media img { width: 100%; max-width: 100%; max-height: none; }
  .stage.is-wide .arrow--prev { grid-area: prev; justify-self: end; }
  .stage.is-wide .arrow--next { grid-area: next; justify-self: start; }
}

@media (max-width: 600px) {
  .arrow { width: 44px; height: 44px; }
  .stage { gap: 4px; }
  .tabs button { padding: 8px 18px; }
  .variants__label { min-width: 0; text-align: center; width: 100%; }
}

/* (Đã bỏ lệnh tắt sạch mọi hiệu ứng khi Giảm chuyển động – xem khối "CHẾ ĐỘ HIỆU ỨNG NHẸ" cuối file, 20/10/2026.) */

/* ---------- Banner thương hiệu (Thiết bị vệ sinh – INAX…) ---------- */
.brand-bg {
  position: absolute;
  /* ảnh bắt đầu dưới dải tiêu đề đề mục (nền tối phía trên). Máy tính: cố định 68px trong khung – KHÔNG theo --nav-h,
     vì menu 7 mục xuống 2 hàng (thanh cao ~106px) sẽ đẩy mép ảnh xuống cắt ngang thanh chọn hãng */
  inset: var(--brand-top, 68px) 0 0;
  z-index: -1;
  background: #0c0c0d;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.brand-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.04);
  transition: transform 6s ease-out, filter 0.7s ease;
}
/* Banner ảnh nhỏ có chữ in sẵn (VIGLACERA – hero.contain): ảnh nằm trọn khung, không phóng quá cỡ; phía trên chừa chỗ cho
   tiêu đề + thanh chọn hãng; nền xung quanh là chính ảnh làm mờ + tối (cùng cách xử lý ảnh nhỏ ở màn hình 2 trang chính) */
.brand-bg.is-contain { overflow: hidden; --hero-pad: calc(clamp(22px, 3.6vh, 40px) + 110px); }   /* = tiêu đề + thanh chọn hãng phía trên ảnh */
.brand-bg.is-contain::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--bg-blur) center / cover no-repeat;       /* ảnh đã làm mờ + tối sẵn (hero.blur) – không dùng filter blur nặng khi hiển thị */
}
.brand-bg.is-contain img {
  position: relative;
  box-sizing: border-box;
  padding-top: var(--hero-pad);
  object-fit: contain;
  object-position: 50% 50%;
}
@media (max-width: 700px) { .brand-bg.is-contain img { object-position: 50% 0; } }   /* điện thoại: ảnh sát ngay dưới thanh chọn hãng, nút nằm dưới ảnh */
/* xem sản phẩm: banner làm mờ phủ kín như các hãng khác */
.frame.is-hero-products .brand-bg.is-contain::before { display: none; }
.frame.is-hero-products .brand-bg.is-contain img { padding-top: 0; object-fit: cover; }

/* lớp tối phía trên để menu dễ đọc */
.brand-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 13, 0.55) 0%, rgba(12, 12, 13, 0) 18%, rgba(12, 12, 13, 0) 80%, rgba(12, 12, 13, 0.25) 100%);
}
.frame.is-brand-hero .brand-bg { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.frame.is-brand-hero .brand-bg img { transform: none; }
/* Hãng có sản phẩm: banner làm mờ thành nền, sản phẩm hiển thị như trang thiết bị điện */
.frame.is-hero-products .brand-bg img { filter: blur(16px) brightness(0.5) saturate(0.9); transform: scale(1.08); transition: transform 0.7s ease, filter 0.7s ease; }
.frame.is-hero-products .brand-bg::after { background: rgba(12, 12, 13, 0.25); }
.frame.is-hero-products .stage__media::before { opacity: 0.22; }
.frame.is-hero-products .stage__media::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
/* ảnh phối cảnh thiết bị vệ sinh: vừa đúng khung (không tràn lên thanh chọn hãng) */
.frame.is-hero-products .stage__media img.is-photo { max-height: var(--media-h); border-radius: 20px; }
.frame.is-brand-hero .glow { opacity: 0; }
.frame.is-brand-hero::after { opacity: 0; }
.frame.is-brand-hero {
  --text: #f6f3ec;
  --muted: rgba(246, 243, 236,0.72);
  --line: rgba(255, 255, 255, 0.18);
  --on-text: #141214;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.16);
  --surface-solid: rgba(10, 8, 12, 0.45);
  --stroke: rgba(255, 255, 255, 0.3);
  --stroke-strong: rgba(255, 255, 255, 0.7);
  color: var(--text);
  background: #0c0c0d;
}
.brand-hero {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 9vw, 180px);
  top: clamp(190px, 24vh, 260px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease 0.25s, transform 0.9s var(--ease-out) 0.25s;
}
.frame.is-brand-hero .brand-hero { opacity: 1; transform: none; }
/* Banner hãng (landing): tiêu đề + thanh chọn hãng nâng lên một chút, khối chữ banner luôn nằm DƯỚI thanh chọn hãng ở mọi cỡ màn hình
   (chữ VIGLACERA dài nên trước đây chạy sang đè lên thanh chọn hãng) */
.frame.is-brand-hero:not(.is-hero-products) .catalog__eyebrow { margin-top: clamp(10px, 1.8vh, 20px); }
@media (min-width: 701px) {
  .brand-hero { top: calc(var(--brand-top, 68px) + 142px); }
}
.brand-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-family: var(--f-display);
  font-size: var(--fs-display-l);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;      /* Spectral có chân: chữ HOA tiếng Việt cần ít giãn hơn để dấu không rời chữ */
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
@media (max-width: 1023px) {           /* nút ba gạch: thanh một hàng, mép ảnh theo chiều cao thanh */
  .brand-bg { top: var(--nav-h, 84px); }
}
@media (max-width: 700px) {
  .brand-hero { left: 20px; right: 20px; top: calc(var(--nav-h, 80px) + 134px); }
  .brand-hero__title { font-size: clamp(17px, 5vw, 22px); }
  .brand-bg img { object-position: 52% 60%; }
}

/* Hàng nút dưới dòng chữ banner: "Xem sản phẩm" + "Tải catalogue" */
.brand-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.brand-hero__actions:not(:has(> :not([hidden]))) { display: none; }
/* Nút chính "Xem sản phẩm": nền trắng đặc, icon tối */
.brand-hero__cta.brand-hero__cta--primary { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; color: #141214; border-color: #fff; }
.brand-hero__cta.brand-hero__cta--primary .brand-hero__cta-icon { background: #141214; color: #fff; }
.brand-hero__cta.brand-hero__cta--primary:hover { background: rgba(255, 255, 255, 0.88); }
.brand-hero__cta.brand-hero__cta--primary:hover .brand-hero__cta-icon { transform: translateX(3px); }
.brand-hero__cta[hidden] { display: none; }

/* Nút tải catalogue dưới dòng chữ banner – kính mờ, bo tròn */
.brand-hero__cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.brand-hero__cta-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #141214;
  transition: transform 0.4s var(--ease-out);
}
.brand-hero__cta:hover {
  background: #fff;
  color: #141214;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.brand-hero__cta:hover .brand-hero__cta-icon { background: #141214; color: #fff; transform: translateY(2px); }
.brand-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .brand-hero__actions { margin-top: 18px; gap: 10px; }
  .brand-hero__cta { font-size: 13px; padding-right: 18px; }
  .brand-hero__cta-icon { width: 30px; height: 30px; }
}

/* Hãng không có dòng chữ (vd. TOTO): chừa đúng chiều cao 2 dòng chữ để nút nằm y vị trí như INAX
   (chiều cao chữ = 2 × 1.25em + khoảng cách 0.25em = 2.75em của cỡ chữ tiêu đề) */
.brand-hero.no-title .brand-hero__actions { margin-top: calc(2.75 * clamp(22px, 2.3vw, 42px) + 26px); }
@media (max-width: 700px) {
  .brand-hero.no-title .brand-hero__actions { margin-top: calc(2.75 * clamp(17px, 5vw, 22px) + 18px); }
}
/* Ảnh nền sáng: phủ tối nhẹ phía bên phải (vùng nút) và mép trên để chữ / nút trắng dễ đọc */
.brand-bg.is-shaded::after {
  background:
    linear-gradient(to left, rgba(12, 12, 13, 0.5) 0%, rgba(12, 12, 13, 0.18) 38%, rgba(12, 12, 13, 0) 60%),
    linear-gradient(to bottom, rgba(12, 12, 13, 0.55) 0%, rgba(12, 12, 13, 0) 18%);
}

/* Ảnh có vùng trắng rộng ở phía chữ (VIGLACERA – tường đá cẩm thạch): phủ tối đậm hơn bên phải để chữ / nút trắng đọc rõ */
.brand-bg.is-shaded-strong::after {
  background:
    linear-gradient(to left, rgba(10, 12, 20, 0.78) 0%, rgba(10, 12, 20, 0.6) 32%, rgba(10, 12, 20, 0.25) 52%, rgba(10, 12, 20, 0) 70%),
    linear-gradient(to bottom, rgba(12, 12, 13, 0.55) 0%, rgba(12, 12, 13, 0) 18%);
}

/* Nút neo theo tọa độ ảnh (tùy chọn hero.anchor) */
.brand-hero.is-anchored { right: auto; }
.brand-hero.is-anchored .brand-hero__actions { margin-top: 0; }
@media (max-width: 700px) {
  .brand-hero.is-anchored { right: auto; }
}

/* ---------- Cụm nút liên hệ cố định (góc phải dưới): nút tròn đen, biểu tượng đường nét trắng ---------- */
/* - Logo Zalo (ô xanh) và Messenger (bong bóng gradient) giữ nguyên nhận diện thương hiệu.
   - Vị trí cố định ở MỌI trang và MỌI chế độ: biểu tượng không bao giờ nhảy chỗ, chỉ phần chữ trượt ra / thu vào bên trái.
   - Trang chính & banner thương hiệu (≥ 1100px, không có cột ảnh nhỏ): chữ mở sẵn. Trang sản phẩm: chỉ hiện biểu tượng (không đè
     cột ảnh nhỏ), rê chuột / Tab thì chữ mở ra. Cả 4 nút luôn cùng kích thước. */
.contact {
  --w-open: 196px;
  position: fixed;
  right: clamp(8px, calc(4vw - 50px), 24px);   /* lề phải theo độ rộng màn hình: luôn chừa khoảng trống với cột ảnh nhỏ ở trang sản phẩm */
  bottom: 18px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.contact__item {
  display: flex;
  flex-direction: row-reverse;      /* biểu tượng nằm sát mép phải, chữ mở ra bên trái */
  align-items: center;
  width: 46px;
  height: 46px;
  padding: 3px;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  /* Kính mờ thật, không phải khối đen đặc: nhẹ hơn và không chọi với ảnh phía sau */
  background: rgba(16, 14, 12, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: width 0.45s var(--ease-out), border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
/* Bỏ vòng tròn tối lồng trong viên thuốc tối (thừa một lớp, nhìn nặng và rối):
   biểu tượng nằm thẳng trên nền kính. Logo Zalo / Messenger vẫn giữ nhận diện riêng. */
.contact__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 0.4s var(--ease-out);
}
.contact__icon--app { background: none; }
.contact__icon svg { width: 21px; height: 21px; display: block; }
.contact__icon svg.line { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact__icon--app svg { width: 24px; height: 24px; }       /* logo ứng dụng nhỉnh hơn một chút */
.contact__text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 6px 0 14px; white-space: nowrap; line-height: 1.2; opacity: 0; transition: opacity 0.3s; }
.contact__text strong { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.contact__text small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.66); }
.contact__item:hover, .contact__item:focus-visible {
  width: var(--w-open);
  background: rgba(16, 14, 12, 0.82);
  border-color: rgba(230, 207, 159, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.contact__item:hover .contact__text, .contact__item:focus-visible .contact__text { opacity: 1; }
.contact__item:hover .contact__icon { transform: scale(1.05); }
.contact__item:focus-visible { outline: 2px solid #e6cf9f; outline-offset: 3px; }

/* Trang chính và banner thương hiệu (không có cột ảnh nhỏ): chữ mở sẵn */
@media (min-width: 1100px) {
  /* Chữ chỉ mở sẵn khi đang ở màn hình hero (chưa có nội dung bên dưới để che).
     Cuộn qua hero là thu về biểu tượng, nếu không cụm nút 196px sẽ đè lên thẻ đề mục ở cột phải. */
  body:has(.frame.is-home):not(.is-page2):not(.past-hero) .contact__item { width: var(--w-open); }
  body:has(.frame.is-home):not(.is-page2):not(.past-hero) .contact__text { opacity: 1; }
  /* banner hãng: màn hình thấp (< 740px) thì chỉ hiện biểu tượng, nếu mở chữ thì cụm nút đè lên nút "Tải Catalogue"
     (menu 2 hàng làm nút banner xuống tới y ≈ 493px; cụm nút liên hệ chiếm 232px tính từ đáy -> cần cao ≥ 737px) */
  @media (min-height: 740px) {
    body:has(.frame.is-brand-hero:not(.is-hero-products)) .contact__item { width: var(--w-open); }
    body:has(.frame.is-brand-hero:not(.is-hero-products)) .contact__text { opacity: 1; }
  }
}
@media (max-width: 700px) {
  .contact { right: 12px; bottom: 14px; gap: 10px; }
  .contact__item { width: 44px; height: 44px; }
  .contact__icon { width: 38px; height: 38px; }
  .contact__icon svg { width: 20px; height: 20px; }
  .contact__icon--app svg { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) { .contact__item, .contact__icon { transition: none; } }

/* Màn hình nhỏ hoặc thấp: 4 nút liên hệ cao ~200px che nút >> / << và chữ ở mép phải → thu gọn thành MỘT nút, bấm mới bung ra (bấm ra ngoài / Esc để đóng) */
.contact__toggle { display: none; }
@media (max-width: 700px), (max-height: 520px) {
  .contact__toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    border-radius: 999px; cursor: pointer; color: #fff;
    background: rgba(12, 11, 10, 0.9);

    border: 1px solid rgba(230, 207, 159, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 28px rgba(0, 0, 0, 0.32);
    -webkit-tap-highlight-color: transparent;
  }
  .contact__toggle svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .contact__toggle .i-close, .contact.is-open .contact__toggle .i-chat { display: none; }
  .contact.is-open .contact__toggle .i-close { display: block; }
  .contact__toggle:focus-visible { outline: 2px solid #e6cf9f; outline-offset: 3px; }
  .contact:not(.is-open) .contact__item { display: none; }
  .contact.is-open .contact__item { animation: contact-pop 0.3s var(--ease-out) both; }
  .contact.is-open .contact__item:nth-last-child(2) { animation-delay: 0.03s; }
  .contact.is-open .contact__item:nth-last-child(3) { animation-delay: 0.06s; }
  .contact.is-open .contact__item:nth-last-child(4) { animation-delay: 0.09s; }
  .contact.is-open .contact__item:nth-last-child(5) { animation-delay: 0.12s; }
}
/* nút tròn liên hệ nổi ở góc phải dưới: chừa chỗ cuối trang để hàng ảnh nhỏ / tên hàng cuộn lên khỏi nút, không bị che mãi */
@media (max-width: 700px), (max-height: 520px) { .catalog { padding-bottom: 96px; } }
@keyframes contact-pop { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contact.is-open .contact__item { animation: none; } }

/* ---------- Trang chính: cuộn xuống màn hình thứ hai (chỉ ảnh nền) ---------- */
.home-page2 { display: none; }
/* màn hình 2: ảnh phủ kín cả màn hình (không mang thanh tiêu đề theo), dải thông tin nằm đè ở đáy ảnh */
body:has(.frame.is-home) .home-page2 {
  display: block;
  position: relative;
  height: 100vh;
  height: 100svh;
  background: #0a0a0b;
  overflow: hidden;
}
/* ảnh nền tràn viền: file 2184×1224 (gốc 1456×816 phóng 1,5×) đủ lớn để phủ kín màn hình mà không vỡ.
   Ảnh gốc nhỏ hơn ~1400px thì KHÔNG kéo tràn – đặt giữa khung bo góc (xem CLAUDE.md, quy tắc ảnh) */
.home-page2 img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Khối showroom đè trên ảnh ----------
   Bản cũ chỉ có một câu nằm giữa ảnh: không có việc gì để làm, không có thông tin nào dùng được.
   Nay là hai cột (chữ | thẻ thông tin), đặt ở nửa dưới ảnh nơi nền tối nhất. */
.home-page2 { isolation: isolate; }
/* lớp phủ tối dần từ dưới lên: chữ trắng luôn đọc được dù ảnh có vùng sáng */
.home-page2::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(6, 5, 4, 0.08) 0%,
    rgba(6, 5, 4, 0.28) 38%,
    rgba(6, 5, 4, 0.72) 76%,
    rgba(6, 5, 4, 0.88) 100%);
}
/* Một cột, canh trái, rộng vừa đủ đọc. Trước đây là hai cột vì có thêm thẻ thông tin;
   thẻ đó đã bỏ do trùng hoàn toàn với dải thông tin cuối trang. */
.showroom {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 72px) clamp(32px, 5vh, 64px);
  color: #fff;
}

.showroom__eyebrow {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.showroom__eyebrow::after {
  content: ""; display: block; width: 44px; height: 2px; margin-top: 10px;
  border-radius: var(--r-xs); background: var(--ac-gold-grad);
}
.showroom__title {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: var(--fs-display-l);
  font-weight: 400;
  line-height: 1.18;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 20px rgba(10, 5, 0, 0.5);
}
.showroom__lead {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.showroom__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--ac-cream);
  color: var(--ac-ink-700);
  text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.showroom__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.showroom__btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }

/* Màn hẹp: khối chữ + thẻ thông tin xếp dọc nên có thể cao hơn một màn hình.
   Cho cả khối TỰ CAO (ảnh chuyển sang phủ nền) thay vì khóa 100svh rồi cắt mất nút ở đáy. */
@media (max-width: 899px) {
  body:has(.frame.is-home) .home-page2 { height: auto; min-height: 100svh; }
  .home-page2 img { position: absolute; inset: 0; z-index: 0; }
  .showroom { position: relative; left: auto; right: auto; bottom: auto; padding-top: clamp(96px, 26vh, 220px); }
}
/* Màn hình hero cao đúng một màn hình; các khối nội dung nằm ngay bên dưới.
   ĐÃ BỎ `scroll-snap-type: y mandatory`: bắt nấc chỉ hợp với trang đúng 2 màn hình,
   trang chính nay có 5 khối nên phải cuộn tự nhiên. */
body:has(.frame.is-home) .frame { height: 100vh; height: 100svh; z-index: 2; }

/* nút cuộn xuống / lên (góc trái dưới): ở màn hình 1 là viên thuốc có chữ "Xem phối cảnh bên dưới",
   nền tối đậm + viền sáng + vòng sáng nhấp nháy để khách không bỏ sót; ở màn hình 2 thu về nút tròn "về đầu trang" */
.scrollcue {
  position: fixed;
  left: 22px;
  bottom: 20px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: rgba(22, 17, 12, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background 0.3s, transform 0.3s var(--ease-out), padding 0.45s var(--ease-out), gap 0.45s var(--ease-out);
}
body:has(.frame.is-home) .scrollcue { display: inline-flex; }
body:has(.frame.is-home) .scrollcue:not(.is-up) { display: none; }
.scrollcue__label {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: max-width 0.45s var(--ease-out), opacity 0.3s;
}
.scrollcue__icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #1b1612;                               /* mũi tên tối trên nền trắng: nổi bật cả trên ảnh sáng lẫn tối */
  animation: cue-ring 2.4s ease-out infinite;
}
.scrollcue__icon svg { transition: transform 0.4s var(--ease-out); animation: cue-bob 1.8s ease-in-out infinite; }
.scrollcue.is-up svg { transform: rotate(180deg); animation-name: cue-bob-up; }
.scrollcue.is-up { padding: 4px; gap: 0; height: 52px; }
.scrollcue.is-up .scrollcue__label { max-width: 0; opacity: 0; }
.scrollcue.is-up .scrollcue__icon { width: 44px; height: 44px; animation: none; }
.scrollcue:hover { background: rgba(22, 17, 12, 0.92); transform: translateY(-2px); }
.scrollcue:focus-visible { outline: 2px solid #0a7cff; outline-offset: 3px; }
@keyframes cue-bob { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes cue-bob-up { 0%, 100% { translate: 0 2px; } 50% { translate: 0 -3px; } }
@keyframes cue-ring {                           /* vòng sáng lan ra từ nút tròn trắng, lặp lại để thu hút ánh nhìn */
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}
@media (max-width: 700px) {
  .scrollcue { left: 12px; bottom: 12px; height: 50px; padding: 5px 5px 5px 16px; gap: 10px; }
  .scrollcue__label { font-size: 13px; }
  .scrollcue__icon, .scrollcue.is-up .scrollcue__icon { width: 40px; height: 40px; }
  .scrollcue.is-up { height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .scrollcue__icon, .scrollcue__icon svg { animation: none; } }


/* Khi ở khối cuối: ẩn nút "Chúng tôi là ai" (đang ở đó rồi) */
body.is-page2:has(.frame.is-home) .contact__item--about { display: none; }

/* ============================================================================
   DẢI THÔNG TIN CUỐI TRANG
   Bản cũ: một dải mỏng `position: absolute` đè lên đáy ảnh, chữ 11–13px chen chúc,
   kèm khung Facebook nhúng tự sinh thanh cuộn và nặng vài MB.
   Nay: một khối riêng nằm dưới ảnh, nền đen đặc, bốn cột, chữ đọc được.
   ============================================================================ */
/* chỉ có ở trang chính: trang sản phẩm vừa khít một màn hình và không cuộn */
.site-footer { display: none; }
body:has(.frame.is-home) .site-footer {
  display: block;
  position: relative;
  z-index: 3;
  background: var(--ac-ink-900);
  color: var(--ac-cream);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
  padding-block: clamp(44px, 6vh, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 12/10/2026 (bản 2): bốn cột CÙNG KIỂU, cùng chiều cao – thông tin công ty · hai nhóm đề mục · liên hệ.
   Bỏ cột khung Facebook và cột khung bản đồ: hai khung nhúng sáng trắng là thứ chói nhất trên nền đen,
   và địa chỉ + nút "Chỉ đường" đã có ở khối Showroom ngay phía trên.
   Bản sáng 12/10 nhồi 11 đề mục vào một cột rồi chia 2 cột con -> cột con cắt ngang lưới 4 cột. */
@media (min-width: 1040px) { .site-footer__inner { grid-template-columns: 1.35fr 1fr 1fr 0.85fr; gap: clamp(28px, 3.4vw, 56px); } }
.ft-col { min-width: 0; }

.ft-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ac-cream); text-decoration: none;
  font-size: 16px; font-weight: 600; letter-spacing: 0.03em;
  margin-bottom: 14px;
}
.ft-logo .logo__mark { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.ft-logo .logo__mark img { display: block; width: 21px; height: auto; }
.ft-legal { margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.ft-addr { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: rgba(246, 243, 236, 0.74); }
.ft-note { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(246, 243, 236, 0.62); }

.ft-h {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246, 243, 236, 0.62);
}
.ft-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* Vùng bấm ≥ 24px ở mọi nơi, ≥ 40px trên màn hình cảm ứng (DESIGN.md §10).
   Liên kết chân trang trước đây chỉ cao 15–20px – đo được bằng script trong trang ở 375px (12/10/2026). */
.ft-list a, .ft-dir, .ft-bar-links a { min-height: 24px; display: inline-flex; align-items: center; }
@media (pointer: coarse) {
  .ft-list a, .ft-bar-links a { min-height: 40px; }
  .ft-list { gap: 0; }
  .ft-bar-links { gap: 0 20px; }
}
.ft-list a {
  display: inline-block;
  color: rgba(246, 243, 236, 0.8);
  text-decoration: none;
  font-size: 14px; line-height: 1.5;                       /* 13.5px là cỡ lẻ – bảng cỡ chữ chỉ có 11 / 12 / 13 / 14 / 15–16 / 18 / 22+ */
  transition: color var(--t-fast), transform var(--t-fast);
}
.ft-list a:hover { color: var(--ac-gold-400); transform: translateX(3px); }
.ft-list a:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; border-radius: 4px; }
/* Số điện thoại là thứ khách cần nhất ở cuối trang: cho nó cỡ chữ của một tiêu đề nhỏ */
.ft-list--tel a { font-size: 17px; font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

.ft-chip {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  color: rgba(246, 243, 236, 0.86); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ft-chip:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(230, 207, 159, 0.5); }
.ft-chip:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 2px; }

/* Khung bản đồ – người dùng yêu cầu giữ lại (12/10/2026).
   Hạ sáng bằng filter cho khỏi chói trên dải chân trang đen; rê chuột thì sáng lại để đọc tên đường. */
.ft-map {
  margin-top: 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ft-map iframe {
  display: block; width: 100%; height: 164px; border: 0;
  filter: grayscale(0.35) brightness(0.74) contrast(1.06);
  transition: filter var(--t-base);
}
.ft-map:hover iframe { filter: grayscale(0.1) brightness(0.96) contrast(1.02); }
@media (prefers-reduced-motion: reduce) { .ft-map iframe { transition: none; } }

/* Hai nút nhắn tin – kiểu A (người dùng chọn 12/10/2026).
   Nền kính tối như mọi thành phần khác; CHỈ LOGO giữ màu nhận diện thật của Zalo / Facebook
   (ngoại lệ có chủ đích của DESIGN.md §3.4 quy tắc 4). Viền + quầng sáng chỉ lên màu khi rê chuột.
   Bản trước tô nguyên khối hai mảng xanh xếp dọc: nổi bật nhưng ồn và không rõ nên bấm cái nào. */
.ft-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ft-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--ac-cream); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ft-btn svg { flex: none; }
.ft-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.ft-btn--zalo:hover { border-color: rgba(10, 124, 255, 0.75); box-shadow: 0 8px 22px rgba(10, 124, 255, 0.22); }
.ft-btn--fb:hover { border-color: rgba(24, 119, 242, 0.75); box-shadow: 0 8px 22px rgba(24, 119, 242, 0.22); }
.ft-btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
@media (max-width: 360px) { .ft-social { grid-template-columns: 1fr; } }
/* Nút "Chỉ đường" ngay dưới bản đồ: cùng toạ độ với ghim trong khung nhúng và với nút ở khối Showroom. */
.ft-dir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; min-height: 34px;
  color: var(--ac-cream); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: color var(--t-fast);
}
.ft-dir:hover { color: var(--ac-gold-400); }
.ft-dir:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; border-radius: 4px; }
/* Danh mục: 11 mục xếp một cột là quá dài – chia 2 cột từ 420px, điền theo CỘT để đọc dọc tự nhiên. */
/* (Đã bỏ .ft-list--cats – danh mục nay là hai cột riêng, không chia cột con bên trong một cột.) */

/* Dải cuối chân trang.
   Lố6I ĐÃ SỬA 12/10/2026 (người dùng: "mục này không nằm giữa trang"):
   bản cũ đặt `margin-inline: auto` lên TẪ CẢ con của một hộp flex. Hai lề auto ăn hết khoảng
   trống nên cả dòng © và cụm liên kết đều bị đẩy vào giữa, không còn thẳng lề với bốn cột bên trên.
   Nay có MỘT hộp trong `.site-footer__bar-inner` giữ max-width + căn giữa, còn hai cụm
   chia hai đầu bên trong hộp đó – đúng mép với lưới cột. */
.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-inline: clamp(20px, 5vw, 72px);
  padding-block: 18px;
  /* .45 chỉ đạt 4,17:1 trên nền #0a0a0b – dưới chuẩn 4,5:1 (Lighthouse bắt được). .6 đạt ~6,6:1 */
  font-size: 12px; color: rgba(246, 243, 236, 0.6);
}
.site-footer__bar-inner {
  max-width: 1280px;
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  justify-content: space-between;
}
@media (max-width: 640px) { .site-footer__bar-inner { justify-content: center; text-align: center; } }
.site-footer__bar p { margin: 0; }
/* Cụm nút liên hệ nổi (phải) + nút về đầu trang (trái) đè lên nút Facebook / link "Liên hệ" ở cuối trang (kiểm Safari + Chrome 20/10/2026):
   chừa lề phải cho cột nút nổi khi khung chân trang chạm mép màn hình; điện thoại chừa thêm đáy cho hai nút tròn. */
@media (min-width: 701px) and (max-width: 1359px) { .site-footer__inner, .site-footer__bar { padding-right: max(clamp(20px, 5vw, 72px), 88px); } }
@media (max-width: 700px) { .site-footer__bar { padding-bottom: 92px; } }
.ft-bar-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft-bar-links a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.ft-bar-links a:hover { color: var(--ac-gold-400); }
.ft-bar-links a:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; border-radius: 4px; }

/* ---------- Chuyển cảnh mượt màn hình 1 → màn hình 2 (biến --p: 0 → 1 theo vị trí cuộn, do JS cập nhật) ---------- */
html.is-paging { scroll-snap-type: none !important; }                 /* đang chạy hoạt ảnh cuộn: tắt bắt nấc */
body:has(.frame.is-home) .frame { background: #020202; }               /* nền tối phía sau các lớp đang chìm xuống */
@media (prefers-reduced-motion: no-preference) {
  /* Phần không đổi theo cách điều khiển: lớp tối phủ lên màn hình 1, điểm xoay, gợi ý lớp riêng */
  .frame.is-home > * { transform-origin: 50% 100%; will-change: translate, scale; }
  .frame.is-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #000;
    pointer-events: none;
  }
  .home-page2 img { transform-origin: 50% 45%; will-change: scale; }

  /* ===== Cách 1 (trình duyệt hiện đại): hiệu ứng chạy THEO VỊ TRÍ CUỘN ngay trên bộ xử lý đồ họa,
     không có mã JS chạy ở từng khung hình → mượt kể cả khi máy đang bận.

     Khác bản cũ: trước đây MỌI hiệu ứng đều khóa vào `scroll(root block)` tức là vị trí cuộn của CẢ TRANG,
     đúng khi trang chính cao đúng 2 màn hình. Nay trang chính có 5 khối nên:
       - Hiệu ứng màn hình hero giới hạn trong 1 màn hình đầu (`animation-range: 0 100vh`).
       - Hiệu ứng khối showroom khóa vào CHÍNH NÓ qua một mốc thời gian đặt tên (`view-timeline: --page2`),
         nên nằm ở đâu trong trang cũng chạy đúng lúc nó đi vào khung nhìn. ===== */
  @supports (animation-timeline: scroll()) {
    /* màn hình hero: chìm xuống chậm hơn tốc độ cuộn (thị sai) và nhỏ lại nhẹ, các lớp cùng chuyển động */
    .frame.is-home > * { animation: home-sink linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    /* lớp tối phủ dần lên màn hình hero */
    .frame.is-home::before { opacity: 0; animation: home-dim linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }

    /* Mốc thời gian đặt tên cho khối showroom; body mở phạm vi để các phần tử con dùng chung. */
    body:has(.frame.is-home) { timeline-scope: --page2; }
    .home-page2 { view-timeline: --page2 block; }
    /* ảnh thu từ 1,16× về 1× như camera lùi ra; chữ và dải thông tin trượt lên, hiện dần */
    .home-page2 img { scale: 1.16; animation: page2-zoom linear both; animation-timeline: --page2; animation-range: entry 0% cover 55%; }
    /* tiêu đề, câu dẫn và nút trượt lên + hiện dần, lệch nhịp nhau một chút */
    .showroom__eyebrow,
    .showroom__title {
      animation: showroom-move linear both, tagline-fade linear both;
      animation-timeline: --page2, --page2;
      animation-range: entry 12% cover 46%, entry 12% cover 46%;
    }
    .showroom__lead,
    .showroom__btn {
      animation: showroom-move linear both, tagline-fade linear both;
      animation-timeline: --page2, --page2;
      animation-range: entry 18% cover 54%, entry 18% cover 54%;
    }
    .site-footer {
      animation: footer-move linear both, footer-fade linear both;
      animation-timeline: --page2, --page2;
      animation-range: entry 24% cover 62%, entry 24% cover 62%;
    }
  }

  /* ===== Cách 2 (dự phòng cho trình duyệt chưa có scroll-driven animations): JS ghi --p (0 → 1) khi cuộn.
     Chỉ còn lo phần hero; khối showroom hiện thẳng, không ẩn. ===== */
  @supports not (animation-timeline: scroll()) {
    .frame.is-home > * {
      translate: 0 calc(var(--p, 0) * 11vh);   /* không thu nhỏ – xem chú thích @keyframes home-sink */
    }
    .frame.is-home::before { opacity: calc(var(--p, 0) * 0.85); }
  }
}
/* An toàn: trạng thái NGHỈ của chữ và dải thông tin là HIỆN SẴN.
   Nếu trình duyệt hiểu `animation-timeline` nhưng không hiểu `timeline-scope`, mốc `--page2` không phân giải được,
   hoạt ảnh thành vô hiệu và phần tử dùng lại trạng thái nghỉ này — khách vẫn đọc được, không bị trang trắng. */
.showroom__eyebrow, .showroom__title, .showroom__lead, .showroom__btn, .site-footer { opacity: 1; }
/* CHỈ trượt xuống, KHÔNG thu nhỏ. Bản trước có `scale: 0.95`: thu 5% làm ảnh nền hở ra
   hai bên và để lộ nền đen của `.frame` thành hai dải đen dọc (người dùng phản ánh 08/10).
   Cảm giác chiều sâu đã do lớp tối `home-dim` đảm nhiệm, không cần thu nhỏ nữa. */
@keyframes home-sink { to { translate: 0 11vh; } }
@keyframes home-dim { to { opacity: 0.85; } }
@keyframes page2-zoom { from { scale: 1.16; } to { scale: 1; } }
@keyframes showroom-move { from { translate: 0 34px; } to { translate: 0 0; } }
@keyframes tagline-fade { 0%, 35% { opacity: 0; } 80%, 100% { opacity: 1; } }     /* giống clamp((p - 0.35) × 2.2) của cách 2 */
@keyframes footer-move { from { translate: 0 56px; } to { translate: 0 0; } }
@keyframes footer-fade { 0%, 45% { opacity: 0; } 90%, 100% { opacity: 1; } }      /* giống clamp((p - 0.45) × 2.2) của cách 2 */

/* ---------- Trang sản phẩm đứng yên: vừa khít một màn hình, không còn khoảng trống để cuộn (máy tính) ---------- */
/* `.is-plp` = đang ở bước LƯỚI: lưới dài hơn một màn hình nên PHẢI cuộn được.
   Quy tắc "vừa khít một màn hình" chỉ áp cho bước CHI TIẾT một mã. */
@media (min-width: 1101px) and (min-height: 680px) {
  html:has(.frame:not(.is-home):not(.is-plp)), body:has(.frame:not(.is-home):not(.is-plp)) { overflow: hidden; }
  .frame:not(.is-home):not(.is-plp) { height: 100vh; height: 100dvh; }
  /* Trang chi tiết (không phải banner landing của hãng; sản phẩm thiết bị vệ sinh vẫn mang class is-brand-hero nhưng có thêm is-hero-products): khung bắt đầu SAU thanh tiêu đề nên phải cao (màn hình - thanh tiêu đề).
     Trước đây cao đủ 100dvh -> ~106px đáy nằm ngoài màn hình, nút "Hỏi giá" bị cắt / chạm mép (người dùng phản ánh 2026-10-09). */
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) { min-height: 0; height: calc(100vh - var(--nav-h, 68px)); height: calc(100dvh - var(--nav-h, 68px)); }   /* min-height: 0 vì .frame có min-height: 100vh ép cao lại */
  .views, .view { min-height: 0; }
  /* nén khoảng đệm dọc ở bước chi tiết để dành chỗ cho ẢNH sản phẩm (chủ thể) */
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .catalog { padding-bottom: 28px; }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .catalog__eyebrow { margin-top: clamp(10px, 2.2vh, 28px); }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .tabs { margin-top: clamp(8px, 1.4vh, 14px); }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .tabs + .subtabs { margin-top: 6px; }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .crumb { margin-top: clamp(6px, 1.2vh, 14px); }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .info { margin-top: 10px; }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .variants { margin-top: 12px; }
  .frame:not(.is-home):not(.is-plp):not(.is-brand-hero:not(.is-hero-products)) .ask { margin-top: 12px; }
}

/* ---------- Ô tìm kiếm: bảng gợi ý ---------- */
.search__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;                       /* ô tìm kiếm nay nằm bên phải thanh: bảng gợi ý thả xuống thẳng mép phải */
  z-index: 40;
  width: min(480px, 92vw);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 6px;
  background: #151311;
  border: 1px solid rgba(230, 207, 159, 0.3);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.search__panel[hidden] { display: none; }
.sr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: #f6f3ec; text-decoration: none; }
.sr:hover, .sr.is-active { background: rgba(255, 255, 255, 0.09); }
.sr img { flex: none; width: 46px; height: 46px; object-fit: contain; padding: 3px; border-radius: 8px; background: #f1ebe0; }
.sr__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sr__name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.sr__name mark { background: none; color: #e6cf9f; font-weight: 700; }
.sr__meta { font-size: 12px; color: rgba(246, 243, 236,0.6); }
.search__note { padding: 12px 12px 8px; font-size: 13px; line-height: 1.5; color: rgba(246, 243, 236,0.72); }
.search__more { padding: 6px 12px 8px; font-size: 12px; color: rgba(246, 243, 236,0.55); }
@media (max-width: 1320px) {
  .search__panel { position: static; order: 3; width: 100%; max-height: 50vh; }   /* điện thoại: bảng gợi ý nằm ngay dưới ô tìm kiếm */
}
@media (max-width: 480px) {
  .logo { gap: 8px; font-size: 16px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__mark img { width: 20px; }
}

/* ---------- Xem ảnh phóng to (bấm vào ảnh sản phẩm) ---------- */
.shot { cursor: zoom-in; }
.shot:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 12px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  background: #0e0e0f;
  color: #f6f3ec;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 52px;
  padding: 0 64px;
  background: #262628;
}
.lightbox__title { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox__close {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.14); }
.lightbox__main {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 20px 28px;
  cursor: zoom-out;            /* bấm vùng nền tối quanh ảnh để thoát */
}
.lightbox__main img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 92px);      /* thanh trên 52px + lề 40px */
  max-height: calc(100dvh - 92px);
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  user-select: none;
  transform: scale(0.97);
  transition: transform 0.4s var(--ease-out);
}
.lightbox.is-open .lightbox__main img { transform: none; }
.lightbox__main img.is-cutout { padding: 28px; border-radius: 16px; background: #f1ebe0; }   /* ảnh tách nền: nền be sáng để thấy rõ sản phẩm */
.lightbox__side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 124px;
  min-height: 0;
  padding: 14px 0 18px;
  background: #151516;
}
.lightbox__side[hidden] { display: none; }
.lightbox__count { font-size: 13px; color: rgba(246, 243, 236,0.7); }
.lightbox__strip {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
}
.lightbox__strip::-webkit-scrollbar { display: none; }
.lightbox__strip li { flex: none; }
.lightbox__thumb {
  display: block;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #262628;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.25s, border-color 0.25s;
}
.lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb.is-cutout { background: #f1ebe0; }
.lightbox__thumb.is-cutout img { object-fit: contain; padding: 6px; }
.lightbox__thumb:hover { opacity: 1; }
.lightbox__thumb.is-active { opacity: 1; border-color: #fff; }
/* nút lên / xuống nằm bên trái dải ảnh, giữa chiều cao */
.lightbox__nav {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lightbox__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #1b1b1c;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background 0.2s, opacity 0.2s;
}
.lightbox__btn:hover:not(:disabled) { background: #333336; }
.lightbox__btn:disabled { opacity: 0.35; cursor: default; }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .lightbox__main { padding: 12px; }
  .lightbox__main img { max-height: calc(100vh - 52px - 24px - 96px); max-height: calc(100dvh - 52px - 24px - 96px); }
  .lightbox__main img.is-cutout { padding: 16px; }
  .lightbox__side { flex-direction: row; width: auto; padding: 10px 12px 14px; gap: 10px; }
  .lightbox__count { display: none; }
  .lightbox__strip { flex-direction: row; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 2px; }
  .lightbox__thumb { width: 64px; height: 64px; }
  .lightbox__nav { position: static; translate: none; flex-direction: row; order: -1; gap: 6px; }
  .lightbox__btn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__main img { transition: none; }
}

/* ---------- Điện thoại: chữ không chui xuống dưới cụm nút liên hệ cố định (góc phải dưới) ---------- */
@media (max-width: 700px) {
  .info { padding-inline: 48px; }                        /* tên hàng / màu / thanh đếm chừa lề đối xứng, vẫn căn giữa */
  .specs { width: calc(100% - 96px); margin-inline: auto; }
  .rail__list { padding-inline-end: 52px; }               /* ảnh nhỏ cuối hàng vuốt ra khỏi cụm nút liên hệ */
}
/* 12/10/2026 – ĐIỆN THOẠI: tiêu đề đề mục và thanh hãng không còn chật.
   Đo thật ở 375px: "MẶT CÔNG TẮC & Ổ CẮM" ở 19px giãn .2em chiếm 93% bề ngang (đề mục dài hơn sẽ xuống
   dòng xấu); thanh hãng cắt ngang giữa chữ "PANASO…" mà không có dấu hiệu nào cho biết vuốt ngang được. */
@media (max-width: 700px) {
  .catalog__eyebrow { letter-spacing: 0.12em; margin-right: -0.12em; }
  .tabs button { padding-inline: 16px; letter-spacing: 0.1em; }      /* 4 chip vừa một hàng ở 375px, không cắt chữ */
}
@media (max-width: 400px) {
  .catalog__eyebrow { font-size: 17px; letter-spacing: 0.08em; margin-right: -0.08em; }
  .tabs button { padding-inline: 13px; }
}
@media (max-width: 560px) {
  .specs__list { grid-template-columns: 1fr; }          /* ô thông số một cột cho dễ đọc khi hẹp */
  .specs__row:nth-child(2) { border-top: 1px solid var(--line); }
  .info__name { font-size: clamp(18px, 5.2vw, 22px); }
  .info__name.is-long { font-size: clamp(16px, 4.6vw, 19px); }
  .info__name.is-xlong { font-size: clamp(13px, 3.5vw, 15px); }
}

/* ---------- Màn hình cảm ứng: vùng bấm tối thiểu ~40px, ô nhập không làm Safari iOS tự phóng to trang ---------- */
@media (pointer: coarse), (max-width: 700px) {
  .tabs button { padding-block: 13px; }                          /* tab hãng: cao ~40px */
  .subtabs button { padding-block: 11px; }                       /* tab mục con: cao ~40px */
  .swatch { position: relative; }
  .swatches { gap: 16px; }
  .swatch::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }          /* chấm màu 26px → vùng bấm 42px (không đổi hình, hai vùng không chồng nhau) */
  .swatch--chip::after { inset: -5px; border-radius: 999px; }
  .search { height: 42px; }
  .search button { width: 42px; }
  .search input { font-size: 16px; }                             /* < 16px thì Safari iOS tự phóng to khi bấm vào ô */
}

/* Điện thoại: ảnh nền trang chính (rộng đúng bằng màn hình) nâng lên một chút để dòng chữ cuối ảnh
   ("Suitable for home lighting") không bị cụm nút liên hệ ở góc phải dưới che */
@media (max-width: 700px) and (max-aspect-ratio: 1/1) {
  :root { --photo-top: 43%; }       /* chỉ khi màn hình đứng: nằm ngang (ảnh bị giới hạn bởi chiều cao) thì ảnh ở giữa */
}

/* ============================================================================
   TRANG CHÍNH DÀI – các khối nội dung dưới màn hình hero.
   Trước đây trang chính bắt nấc đúng 2 màn hình và KHÓA con lăn (wheel + preventDefault).
   Cách đó chặn mọi trang chính dài nên đã gỡ: nay cuộn tự nhiên, hiệu ứng chạy theo vị trí
   của TỪNG KHỐI trong khung nhìn (animation-timeline: view()) thay vì theo cả trang.
   ============================================================================ */
.homesections { display: none; }
body:has(.frame.is-home) .homesections {
  display: block;
  position: relative;
  z-index: 2;
  /* Khối này nằm NGOÀI .frame nên không thừa hưởng bộ màu be khai ở .frame:not(.is-home).
     Phải khai lại đủ bộ, nếu không --muted sẽ lấy giá trị của bộ màu TỐI (trắng ngà)
     và mọi chữ phụ thành trắng trên nền trắng – vô hình. */
  /* 12/10/2026 – ĐỔI SANG NỀN TỐI. Dải này là mảng SÁNG duy nhất kẹp giữa hero tối (trên) và
     ảnh showroom + chân trang đen (dưới): nhịp sáng–tối–sáng–tối làm trang chủ mất mạch, và người dùng
     phản ánh đúng chỗ này "lạc quẻ" (12/10). Nay trang chủ là một dải tối liền mạch, ảnh và hàng hóa
     là thứ duy nhất phát sáng. Phụ phẩm: vàng kim đọc được 12,2:1 nên dùng lại làm màu chữ được. */
  --bg: var(--ac-char-800);
  --text: var(--ac-cream);
  --muted: rgba(246, 243, 236, 0.62);
  --line: rgba(255, 255, 255, 0.12);
  --on-text: #17140e;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.10);
  --surface-solid: rgba(20, 18, 20, 0.86);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke-strong: rgba(255, 255, 255, 0.6);
  --sh-warm: 0 18px 40px rgba(0, 0, 0, 0.42);
  background: var(--bg);
  color: var(--text);
}
/* Hai vũng sáng ấm rất nhạt – đọc như ánh đèn của màn hình hero hắt xuống, không phải hai mảng màu.
   Bản be cũ để .5 / .42: trên nền tối mức đó biến thành vệt nâu đục (đã dựng thử 12/10). */
body:has(.frame.is-home) .homesections::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(62% 42% at 8% 2%, rgba(236, 214, 166, 0.09), transparent 70%),
    radial-gradient(55% 38% at 94% 62%, rgba(232, 207, 156, 0.06), transparent 72%);
}
.hs {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
  padding-block: clamp(56px, 8vh, 104px);
}
.hs + .hs { padding-top: 0; }
.hs__head { margin-bottom: clamp(24px, 3.4vh, 40px); }
.hs__eyebrow {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;      /* người dùng 2026-10-09: tiêu đề khối "chưa nổi bật, chữ hơi nhỏ" */
  /* 12/10/2026: nền đổi sang tối nên VÀNG KIM dùng được làm màu chữ (13,0:1 – AAA).
     Trước đây phải dùng màu mực vì vàng trên nền be chỉ 1,38–2,11:1 (DESIGN.md §3.3). */
  color: var(--ac-gold-400);
}
.hs__eyebrow::after {
  content: ""; display: block; width: 36px; height: 2px; margin-top: 10px;
  border-radius: var(--r-xs); background: var(--ac-gold-grad);
}
.hs__title {
  margin: 0;
  font-family: var(--f-display);        /* Spectral – chỉ dùng từ 28px trở lên, xem DESIGN.md §4.2 */
  font-size: clamp(30px, 3.4vw, 50px);   /* lớn + đậm để nổi bật ở mọi khối của trang chính (trước 21–30px) */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
  max-width: 24ch;
}
.hs__foot { margin: clamp(20px, 3vh, 32px) 0 0; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn--ghost { border: 1px solid var(--stroke); color: var(--text); background: var(--surface); }
.btn--ghost:hover { background: var(--surface-hover); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }

/* ---------- Khối 1: giới thiệu công ty + vài con số đếm thật ---------- */
.intro { display: grid; gap: clamp(32px, 4vw, 52px); align-items: start; }   /* một cột: chữ giới thiệu trên, dải số liệu dàn ngang bên dưới */
.intro__main { min-width: 0; }
.intro__main .hs__title { margin-bottom: clamp(14px, 2.2vh, 24px); }   /* tiêu đề 2 dòng từng dính sát đoạn giới thiệu (hộp chữ chồng 4px ở 1280×720) */
.intro__text { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--muted); max-width: 62ch; }

/* Dải số liệu – dựng lại 12/10/2026 theo mẫu "metrics" người dùng gửi (jiro.build metrics-01-payway):
   BA con số lớn đứng tự do, phân cách bằng đường kẻ tóc, KHÔNG còn hộp viền + lưới gap 1px.
   Hộp cũ: 5 ô trong một khung bo góc, mỗi ô nền trắng .55 trong suốt đè lên hai quầng vàng
   -> mỗi ô một sắc khác nhau, và hai ô cuối chứa địa chỉ 2–3 dòng làm cả dải lệch nhịp. */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 0; border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 34px); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.fact { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 720px) {
  .fact + .fact { border-left: 1px solid var(--line); padding-left: clamp(24px, 3.4vw, 48px); }
  .fact + .fact + .fact,
  .fact:nth-child(2) { margin-left: clamp(0px, 1vw, 12px); }
}
.fact__n {
  font-family: var(--f-display);
  font-size: clamp(46px, 5.2vw, 76px); font-weight: 600; line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fact__label { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac-gold-400); }
.fact__note { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 32ch; }
/* Dòng gọn thay cho hai ô "showroom" / "kho hàng" cũ */
.facts__foot { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.facts__foot strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Giấy chứng nhận (14/10/2026) ----------
   Giấy là tờ TRẮNG trên nền trang tối → đặt như tờ giấy đặt lên bàn: viền vàng kim mảnh, bóng đổ tĩnh (không animate),
   dải tên hãng tối bên dưới. Hai giấy ngang (1776×1168) xếp chồng bên trái, giấy CADIVI (dọc 1328×1904) cao bằng cả hai bên phải
   (tỉ lệ cột 1,12 : 1 chọn để ảnh dọc gần như khít ô, phần dư là nền trắng của chính tờ giấy nên không lộ).
   Chỉ transform / opacity khi rê chuột (luật hiệu năng ở CLAUDE.md). */
.certs { border-top: 1px solid var(--line); padding-top: clamp(28px, 3.6vw, 44px); }
.certs__head { max-width: 62ch; margin-bottom: clamp(20px, 2.6vw, 30px); }
.certs__eyebrow {
  margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ac-gold-400);
}
.certs__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: minmax(0, 1fr);
}
.cert { min-width: 0; }
.cert__btn {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 0; border: 1px solid rgba(230, 207, 159, 0.38); border-radius: var(--r-md);
  background: #1c1a17; color: inherit; font: inherit; text-align: left; cursor: zoom-in; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  transition: transform 0.45s var(--ease-out), border-color 0.3s ease;
}
.cert__btn:hover { transform: translateY(-4px); border-color: rgba(230, 207, 159, 0.8); }
.cert__btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 4px; }
.cert__paper { display: block; flex: 1 1 auto; min-height: 0; background: #fff; }
.cert__paper img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cert--land .cert__paper img { aspect-ratio: 1776 / 1168; height: auto; }
@media (min-width: 760px) {
  .certs__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .cert--land { grid-column: 1; }
  .cert--tall { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 759px) {
  .cert--tall { max-width: 440px; width: 100%; margin-inline: auto; }
}

/* ---------- Hoạt động của công ty (14/10/2026) ----------
   Lưới 6 cột (máy tính) × số hàng tùy số ảnh – hiện tại 3 hàng; điện thoại 3 cột. Ô vuông, ảnh phủ kín (cover); ảnh thật chụp ở kho / xe giao
   nên không tách nền. Chỉ transform khi rê chuột; ảnh nhỏ (≤ 560px) tải lười, ảnh lớn chỉ tải khi bấm. */
.hd { border-top: 1px solid var(--line); padding-top: clamp(28px, 3.6vw, 44px); }
.hd[hidden] { display: none; }
/* LƯỚI KHẢM (dựng lại 20/10/2026 – xem setupActivityGrid trong js/app.js). Mỗi NHỊP lấp kín một khối chữ nhật, không lỗ:
   điện thoại 2 cột × 4 hàng / 6 ảnh: [ngang rộng] [vuông vuông] [đứng | vuông / vuông]
   máy tính 6 cột × 4 hàng / 10 ảnh: [LỚN 3×2 | rộng 2×1 | đứng 1×2 / vuông vuông] [đứng | rộng | LỚN 3×2 / vuông vuông]
   Thứ tự DOM tự rơi đúng chỗ (không cần dense). Ảnh hơi trầm để hòa nền tối, rê chuột / Tab thì sáng hẳn và hiện chú thích;
   ảnh LỚN luôn có chú thích – đó là nơi câu chuyện "hàng thật, giao thật" được kể bằng chữ. */
.hd__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(6px, 0.8vw, 10px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 42vw;
}
.hd__item:not(.is-tail):nth-child(6n + 1) { grid-column: span 2; }
.hd__item:not(.is-tail):nth-child(6n + 4) { grid-row: span 2; }
@media (min-width: 760px) {
  .hd__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(104px, 11vw, 164px); }
  .hd__item:not(.is-tail):nth-child(n) { grid-column: auto; grid-row: auto; }        /* gỡ nhịp điện thoại */
  .hd__item:not(.is-tail):nth-child(10n + 1),
  .hd__item:not(.is-tail):nth-child(10n + 8) { grid-column: span 3; grid-row: span 2; }
  .hd__item:not(.is-tail):nth-child(10n + 2),
  .hd__item:not(.is-tail):nth-child(10n + 7) { grid-column: span 2; }
  .hd__item:not(.is-tail):nth-child(10n + 3),
  .hd__item:not(.is-tail):nth-child(10n + 6) { grid-row: span 2; }
}
.hd__item { min-width: 0; min-height: 0; }
.hd__btn {
  position: relative; display: block; width: 100%; height: 100%; padding: 0;
  border: 1px solid rgba(230, 207, 159, 0.16); border-radius: var(--r-sm);
  background: #1c1a17; overflow: hidden; cursor: zoom-in;
  transition: border-color 0.3s ease, box-shadow 0.4s var(--ease-out);
}
.hd__btn img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.86) saturate(0.92);
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}
/* chú thích: dải tối mờ dần từ đáy, chữ trắng ngà; ô nhỏ chỉ hiện khi rê chuột / Tab */
.hd__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 36px 14px 12px;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.86), rgba(10, 9, 8, 0.5) 55%, transparent);
  color: var(--ac-cream, #f6f3ec); font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.hd__item.is-big .hd__cap { opacity: 1; transform: none; font-size: 14px; padding: 48px 18px 16px; }
.hd__btn:hover, .hd__btn:focus-visible { border-color: rgba(230, 207, 159, 0.6); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.hd__btn:hover img, .hd__btn:focus-visible img { transform: scale(1.045); filter: none; }
.hd__btn:hover .hd__cap, .hd__btn:focus-visible .hd__cap { opacity: 1; transform: none; }
.hd__btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
@media (hover: none) and (max-width: 759px) { .hd__item:not(.is-big) .hd__cap { display: none; } }   /* điện thoại: ô nhỏ quá, chỉ ảnh lớn có chữ */
.hd__item[hidden] { display: none; }
.hd__more {
  display: block; margin: clamp(16px, 2.2vw, 24px) auto 0; min-height: 40px; padding: 0 22px;
  border: 1px solid var(--stroke); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.hd__more[hidden] { display: none; }
.hd__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(16px, 2.2vw, 24px); }
.hd__actions .hd__more { margin: 0; }
.hd__more--less { background: transparent; color: var(--muted); }
.hd__more--less:hover { color: var(--text); }
.hd__more:hover { background: var(--surface-hover); transform: translateY(-1px); }
.hd__more:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }

/* Khung xem giấy chứng nhận phóng to */
html.cv-open, html.cv-open body { overflow: hidden; }
.cview {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 56px 12px 16px;
  background: rgba(10, 9, 8, 0.94); color: #f6f3ec;
  opacity: 0; transition: opacity 0.28s ease;
  cursor: zoom-out;
}
.cview[hidden] { display: none; }
.cview.is-open { opacity: 1; }
.cview__fig { margin: 0; min-width: 0; display: grid; justify-items: center; gap: 12px; cursor: default; }
.cview__fig img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
  background: #fff; border-radius: var(--r-sm); user-select: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.97); transition: transform 0.4s var(--ease-out);
}
.cview.is-open .cview__fig img { transform: none; }
.cview__fig figcaption { font-size: 14px; letter-spacing: 0.02em; color: rgba(246, 243, 236, 0.8); text-align: center; }
.cview__close, .cview__nav {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: inherit; cursor: pointer;
  transition: background 0.2s ease;
}
.cview__close:hover, .cview__nav:hover { background: rgba(255, 255, 255, 0.2); }
.cview__close:focus-visible, .cview__nav:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 2px; }
.cview__close { position: absolute; top: 8px; right: 8px; }
.cview__nav:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 600px) {
  .cview { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 56px 12px 14px; }
  .cview__fig { grid-column: 1 / -1; grid-row: 1; }
  .cview__nav { grid-row: 2; }
  .cview__nav--prev { grid-column: 1; justify-self: start; }
  .cview__nav--next { grid-column: 2; justify-self: end; }
}

/* ---------- Khối 3: DẢI LOGO CHẠY (12/10/2026) ----------
   Hai hàng ngược chiều, tràn hết bề ngang màn hình, mép trái/phải mờ dần.
   Chỉ chạy transform: translateX trên một phần tử mỗi hàng (chạy trên card đồ họa).
   Rê chuột / Tab vào thì DỪNG để khách đọc được tên hãng. */
/* KHÔNG overflow: clip ở đây: khối có lề 72px nên clip cắt cứng dải logo cách mép màn hình 72px, mặt nạ mờ dần ở .lw-row không bao giờ hiện
   (20/10/2026). Phần tràn ra ngoài màn hình đã được html { overflow-x: clip } lo. */
.hs--brands { overflow: visible; }
.logowall { display: grid; gap: 14px; width: 100vw; margin-inline: calc(50% - 50vw); }
.lw-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lw-move { display: flex; width: max-content; gap: 14px; }
.lw-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .lw-move { animation: lw-scroll var(--dur, 48s) linear infinite; }
  .lw-row--rev .lw-move { animation-direction: reverse; }
  .logowall:hover .lw-move,
  .logowall:focus-within .lw-move { animation-play-state: paused; }
}
@keyframes lw-scroll { to { transform: translateX(calc(-50% - 7px)); } }   /* -7px = nửa khoảng cách giữa hai bản sao */

/* Logo GIỮ NGUYÊN MÀU THƯƠNG HIỆU (người dùng yêu cầu 12/10/2026).
   Vì ảnh logo đã có sẵn nền màu riêng của từng hãng, không lồng thêm một ô nền phía sau nữa
   (ô nền trên ô nền = hai lớp bo góc chồng nhau). Chính tấm logo là ô. */
.lw-item a {
  display: grid; place-items: center;
  width: 164px; height: 74px;
  border-radius: var(--r-md);
  background: none;
  text-decoration: none; color: var(--muted);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform var(--t-base) var(--ease-out);
}
/* Hãng chưa có ảnh logo (CAMSCO · LIVA): hiện tên chữ trong ô viên thuốc viền mảnh */
.lw-item--text a { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-pill); transition: border-color var(--t-base), color var(--t-base), transform var(--t-base); }
.lw-item--text a:hover { border-color: rgba(230, 207, 159, 0.45); color: var(--text); }
.lw-item img {
  display: block; width: 136px; height: auto; aspect-ratio: 12 / 5; border-radius: 8px;
  transition: box-shadow var(--t-base);
}
.lw-item a:hover { transform: translateY(-3px); }
.lw-item a:hover img { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(230, 207, 159, 0.35); }
.lw-item a:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
@media (max-width: 560px) { .lw-item a { width: 136px; height: 64px; } .lw-item img { width: 112px; } }
/* Giảm chuyển động: không chạy, xếp cuộn ngang thủ công (vẫn xem được đủ 19 hãng) */
@media (prefers-reduced-motion: reduce) {
  .lw-row { overflow-x: auto; scrollbar-width: none; }
  .lw-row::-webkit-scrollbar { display: none; }
}
/* (Đã bỏ .bchip / .brandrow ngày 12/10/2026 – thay bằng dải logo chạy .logowall bên trên.) */

/* ============================================================================
   KHỐI CÂU HỎI THƯỜNG GẶP (12/10/2026) – bố cục theo mẫu người dùng gửi:
   cột trái là thẻ liên hệ đứng yên khi cuộn, cột phải là danh sách câu hỏi.
   Dùng <details>/<summary> của chính trình duyệt: không cần JS, Tab + Enter dùng được,
   trình đọc màn hình đọc đúng trạng thái đóng/mở.
   ============================================================================ */
.faq { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } }
@media (min-width: 900px) { .faq__aside { position: sticky; top: calc(var(--nav-h, 68px) + 32px); } }
.faq__card {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface-solid);
  box-shadow: var(--sh-inset);
}
.faq__card-title { margin: 0 0 10px; font-family: var(--f-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; line-height: 1.24; text-wrap: balance; }
.faq__card-note { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.faq__zalo { display: flex; align-items: center; width: max-content; min-height: 24px; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.faq__zalo:hover { color: var(--ac-gold-400); }
.faq__zalo:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; border-radius: 4px; }

.qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qa__item {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--t-base), background var(--t-base);
}
.qa__item:has(details[open]) { border-color: rgba(230, 207, 159, 0.3); background: rgba(255, 255, 255, 0.045); }
.qa summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px clamp(16px, 1.8vw, 22px);
  cursor: pointer; list-style: none;
  min-height: 40px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: -2px; border-radius: var(--r-lg); }
.qa__no { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color var(--t-base); }
.qa__q { flex: 1; min-width: 0; font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.45; }
/* Dấu cộng vẽ bằng hai vạch: mở ra thì vạch dọc xoay mất -> thành dấu trừ. Chỉ chạy transform. */
.qa__ico { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); transition: background var(--t-base), border-color var(--t-base); }
.qa__ico::before, .qa__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px;
  background: currentColor; border-radius: 2px; translate: -50% -50%;
  transition: transform var(--t-base) var(--ease-out);
}
.qa__ico::after { transform: rotate(90deg); }
.qa summary:hover .qa__ico { border-color: rgba(230, 207, 159, 0.45); }
details[open] .qa__no { color: var(--ac-gold-400); }
details[open] .qa__ico { background: var(--ac-gold-400); border-color: transparent; color: var(--ac-ink-900); }
details[open] .qa__ico::after { transform: rotate(0deg); }
.qa__a { padding: 0 clamp(16px, 1.8vw, 22px) 20px calc(clamp(16px, 1.8vw, 22px) + 34px); }
.qa__a p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.qa__a strong { color: var(--text); font-weight: 600; }
.qa__a a { color: var(--ac-gold-400); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  details[open] .qa__a { animation: qa-in 0.32s var(--ease-out) both; }
}
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .qa__a { padding-left: clamp(16px, 1.8vw, 22px); } }

/* ============================================================================
   KHỐI MỜI LIÊN HỆ (12/10/2026) – một khối, một việc, một hành động chính.
   ============================================================================ */
.hs--cta { padding-bottom: clamp(64px, 9vh, 112px); }
.cta {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #121012, #0c0b0c);
  padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 72px) clamp(56px, 7vw, 92px);
  text-align: center;
  isolation: isolate;
}
/* Vệt sáng ấm dâng từ mép dưới – "đèn vừa bật ở phía dưới khung". Là gradient dựng sẵn, không phải filter: blur. */
.cta__beam {
  position: absolute;
  left: 50%; bottom: -58%;
  width: min(128%, 1100px); aspect-ratio: 2 / 1;
  translate: -50% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(236, 214, 166, 0.42), rgba(201, 164, 106, 0.16) 52%, transparent 76%);
}
@media (prefers-reduced-motion: no-preference) {
  .cta__beam { animation: beam-pulse 7s ease-in-out infinite alternate; }
}
@keyframes beam-pulse { from { opacity: 0.78; } to { opacity: 1; } }
/* Viền chạy sáng – CHỈ dùng ở đúng khối này (người dùng gửi mã mẫu "Neon Border" và dặn tự cân nhắc
   chỗ nào thật sự cần). Mã mẫu là React + requestAnimationFrame + 2 nhóm × 3 lớp blur cho MỖI khối:
   đặt lên 40 thẻ sản phẩm là 40 vòng lặp vẽ mỗi khung hình. Ở đây viết lại bằng CSS thuần:
   một gradient hình quạt xoay quanh viền, cắt bằng mask nên chỉ còn đúng đường viền 1px.
   Trình duyệt chưa hỗ trợ @property thì viền đứng yên – vẫn đẹp, không hỏng. */
@property --ac-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--ac-angle) at 50% 50%,
    transparent 0 58%,
    rgba(230, 207, 159, 0.12) 68%,
    var(--ac-gold-400) 78%,
    rgba(230, 207, 159, 0.12) 88%,
    transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .cta::before { animation: ac-angle-spin 9s linear infinite; }
}
@keyframes ac-angle-spin { to { --ac-angle: 360deg; } }

.cta__body { position: relative; max-width: 760px; margin-inline: auto; }
.cta__eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ac-gold-400); }
.cta__title { margin: 0 0 16px; font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; line-height: 1.16; text-wrap: balance; }
.cta__lead { margin: 0 auto 28px; max-width: 54ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--muted); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__note { margin: 24px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Nút chính màu vàng kim – chữ mực đen trên nền vàng là 10,6:1 (AAA) */
.btn--gold {
  background: var(--ac-gold-400); color: var(--ac-ink-900);
  border: 1px solid transparent; font-weight: 600;
  box-shadow: 0 10px 28px rgba(201, 164, 106, 0.18);
}
.btn--gold:hover { background: #f0dcb2; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(201, 164, 106, 0.26); }
.faq__card .btn--gold { width: max-content; }

/* Chữ trên nút vàng nhún xuống rồi lên theo TỪNG KÝ TỰ, cách nhau 0,03 giây
   (12/10/2026 – mẫu: gói "glassy navbar", @keyframes loginLetterWaveDown).
   js/app.js cắt chữ thành từng <span class="wv"> và đặt --i = thứ tự ký tự.
   Chữ vẫn bôi đen và trình đọc màn hình vẫn đọc nguyên câu: <span> là thẻ nội dòng,
   không chen khoảng trắng, không đặt aria-hidden.
   Dấu cách giữ nguyên là ký tự thường (white-space: pre) để không dính chữ vào nhau. */
.btn--gold .wv { display: inline-block; white-space: pre; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .btn--gold:hover .wv,
  .btn--gold:focus-visible .wv { animation: gold-wave 0.38s ease-in-out both; animation-delay: calc(var(--i) * 0.03s); }
}
@keyframes gold-wave {
  0% { transform: translateY(0); }
  35% { transform: translateY(3px); }
  65% { transform: translateY(-0.5px); }
  100% { transform: translateY(0); }
}

/* ---------- Khối 4: vì sao chọn ---------- */
.whygrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
/* Biểu tượng nằm CÙNG DÒNG với tiêu đề, không phải một ô vuông xếp bên trên.
   Kiểu "ô biểu tượng trên tiêu đề" lặp bốn lần là bố cục ai cũng dùng, nhìn ra ngay là làm cho xong. */
.why { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.why__icon { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ac-gold-600); }
.why__icon svg { width: 34px; height: 34px; overflow: visible; }

/* Nét biểu tượng tự vẽ khi khối lọt vào màn hình, bốn ô lần lượt cách nhau 0,12 giây,
   kèm một vầng vàng loé lên rồi tắt – đúng cảnh đèn vừa bật, hợp nghề của công ty.
   Mẫu: gói "svg animations" trong thư mục Animation Code (bản gốc chạy framer-motion
   pathLength; đây viết lại bằng CSS thuần, không thêm thư viện).
   pathLength="1" đặt sẵn trong index.html cho phép dùng chung một con số cho mọi hình,
   dù nét dài ngắn khác nhau.
   Lớp .can-draw do js/app.js gắn: KHÔNG có JS thì biểu tượng hiện bình thường, không mất nét. */
.whygrid .why__icon::after {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 222, 186, 0.42), transparent 72%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .whygrid.can-draw .why__icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .whygrid.is-drawn .why__icon svg > * { animation: why-draw 0.9s var(--ease-out) both; }
  .whygrid.is-drawn .why__icon::after { animation: why-flash 0.9s var(--ease-out) 0.18s both; }
  /* nét thứ hai, thứ ba… trong CÙNG một biểu tượng vẽ sau nét đầu một nhịp ngắn */
  .whygrid.is-drawn .why__icon svg > *:nth-child(2) { animation-delay: 0.1s; }
  .whygrid.is-drawn .why__icon svg > *:nth-child(3) { animation-delay: 0.17s; }
  .whygrid.is-drawn .why__icon svg > *:nth-child(4) { animation-delay: 0.22s; }
  /* bốn ô chạy lần lượt từ trái sang phải */
  .whygrid.is-drawn .why:nth-child(2) .why__icon svg > *,
  .whygrid.is-drawn .why:nth-child(2) .why__icon::after { animation-delay: 0.12s; }
  .whygrid.is-drawn .why:nth-child(3) .why__icon svg > *,
  .whygrid.is-drawn .why:nth-child(3) .why__icon::after { animation-delay: 0.24s; }
  .whygrid.is-drawn .why:nth-child(4) .why__icon svg > *,
  .whygrid.is-drawn .why:nth-child(4) .why__icon::after { animation-delay: 0.36s; }
}
@keyframes why-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes why-flash {
  0% { opacity: 0; transform: scale(0.4); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
/* Lưới 2 cột thay cho flex, căn theo MÉP TRÊN (12/10/2026).
   Trước đây là flex căn giữa: thẻ nào tiêu đề dài thành 2 dòng (hiện là "Có showroom để xem
   tận mắt") thì biểu tượng của nó tụt xuống 9px so với ba thẻ kia – đo thật ở 1280px.
   Nay cột biểu tượng rộng cố định 34px và căn mép trên, nên bốn biểu tượng luôn cùng một
   độ cao dù tiêu đề mấy dòng. Chữ đẩy xuống nửa phần chênh lệch để DÒNG ĐẦU nằm ngang
   tâm biểu tượng. Đổi cỡ biểu tượng thì sửa cả ba chỗ: width/height của .why__icon,
   của svg, và con số 34px trong hai công thức dưới đây. */
.why__title {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4;
}
.why__title > span:last-child { padding-top: calc((34px - 1.4em) / 2); }
/* (đã bỏ đoạn mô tả .why__text dưới tiêu đề – người dùng: dư thừa, 2026-10-09) */

/* ---------- Hero: chữ HTML thay cho chữ in sẵn trong ảnh ---------- */
.hero-copy {
  position: relative;
  text-align: center;
  max-width: min(92vw, 620px);
  margin-inline: auto;
  padding: 10px 24px 2px;
}
/* Nền sáng mềm sau chữ: chữ hero là nâu đen đặt trên VÙNG SÁNG của ảnh đèn.
   Nếu ảnh chưa tải (hoặc khung ảnh lệch ở cỡ màn lạ) thì nền sau chữ là #020202 và chữ nâu
   sẽ chỉ còn 1,2:1 – không đọc nổi. Lớp này bảo đảm luôn có vũng sáng dưới chữ. */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 228, 0.92), rgba(255, 240, 214, 0.55) 56%, transparent 82%);
  pointer-events: none;
}
.hero-copy__title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
  color: #231a10;
}
.hero-copy__sub {
  margin: 0;                      /* không còn nút bên dưới nên bỏ lề đáy */
  font-size: clamp(13px, 1.25vw, 17px);              /* nay là câu slogan duy nhất dưới tiêu đề nên nhích lớn hơn dòng liệt kê cũ */
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-wrap: balance;                                 /* điện thoại: câu chia 2 dòng cân nhau, không mồ côi 1–2 chữ */
  color: rgba(35, 26, 16, 0.82);
}

/* ============================================================================
   HIỆU ỨNG THEO CUỘN – mỗi khối tự hiện khi đi vào khung nhìn.
   Chỉ chạy transform + opacity (chạy trên card đồ họa, không bắt tính lại bố cục).
   Trình duyệt chưa hỗ trợ thì nội dung hiện sẵn, không bị ẩn mất.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Mốc nằm TRỌN trong giai đoạn `entry`: khối chạy xong trước khi vào hẳn khung nhìn,
       nên lúc khách dừng đọc thì mọi thứ đã hiện đủ, không còn chữ mờ dở dang. */
    .hs__head,
    .hs__foot,
    .intro__main > p,
    .intro__main > h2 {
      animation: hs-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* lệch nhịp từng ô: ô sau nhích chậm hơn ô trước, thành một đợt sáng lan ngang.
       Ô muộn nhất (i = 5) vẫn xong ở entry 90%, tức trước khi khối vào hẳn khung nhìn. */
    .facts > .fact,
    .certs__head,
    .certs__grid > .cert,
    .hd,
    .logowall,
    .whygrid > .why {
      animation: hs-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(60% + var(--i, 0) * 6%);
    }
  }
}
@keyframes hs-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================================
   HÀNH TRÌNH: Đề mục → LƯỚI sản phẩm → Chi tiết một mã → Hỏi giá
   ============================================================================ */
.showcase[hidden] { display: none !important; }

/* -- Bước 2: lưới --
   Trước đây giữa thanh hãng và lưới chỉ có dòng "N mã" dính sát (khoảng cách 0px), nhìn chật.
   Bỏ dòng đó rồi thì thanh hãng và lưới cần một khoảng thở đàng hoàng. */
.plp {
  width: 100%; max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 3vh, 34px) clamp(16px, 3vw, 40px) clamp(40px, 6vh, 72px);
}
.plp[hidden] { display: none; }
.plp__empty { padding: 48px 0; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.plp__empty strong { font-size: 18px; font-weight: 500; }
.plp__empty span { font-size: 14px; color: var(--muted); }
.plp__empty a { color: inherit; }

/* 12/10/2026 – BỎ KHUNG THẺ. Ô ảnh CHÍNH LÀ thẻ; chữ nằm NGOÀI ô, trên nền trang.
   Đã soi 9 trang tham khảo (Louis Poulsen, Bang & Olufsen, Dyson, Apple, GROHE, Linear, Teenage Engineering,
   FLOS, Louis Poulsen PLP): không trang nào vẽ viền quanh thẻ sản phẩm. Khung thẻ + nền thẻ mờ là thói quen
   của web thương mại điện tử giá rẻ, và ở đây nó còn tạo thêm một lớp giá trị sát nền làm hàng hóa chìm thêm.
   Cột: 1 ở <360px · 2 ở 360–1099px · 3 ở ≥1100px.

   13/10/2026 – HẠ NGƯỠNG 2 CỘT TỪ 480px XUỐNG 360px. Ghi chú cũ để 1 cột ở ≤479px vì
   "ảnh 3 màu xếp ngang trong ô 123px thì không nhìn ra gì". Con số 123px đó không còn đúng:
   đo thật ở 375×812 hiện nay, ô ảnh 2 cột rộng 143px và ảnh ba mặt công tắc (Moderva,
   HALUMIE, AvatarON) vẫn đọc rõ cả ba mặt lẫn ba màu — đã dựng và nhìn tận mắt trước khi đổi.
   Cái giá của 1 cột thì rất đắt: mỗi màn hình điện thoại chỉ thấy ĐÚNG MỘT mã, nên 17 mã
   bồn cầu TOTO là 17 lần vuốt. Nay 4 mã một màn. Dưới 360px vẫn giữ 1 cột (ô sẽ tụt xuống
   ~130px, đúng vùng ghi chú cũ cảnh báo). */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; } }
.pcard__link {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  border: 0; background: none; padding: 0;
  color: inherit; text-align: left; text-decoration: none;
  font: inherit; cursor: pointer;
}
.pcard__link:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 4px; border-radius: var(--r-lg); }
.pcard__media {
  position: relative;
  /* Lề trong 9% bề rộng ô (~14px ở ô 160px, ~20px ở ô 225px): ảnh cao (hộp đèn, bồn cầu) từng chỉ cách mép 10px
     nên nhìn như dính vào khung (người dùng phản ánh 2026-10-10). Ảnh đặt tuyệt đối trong khung 82% × 82% (inset 9%)
     + object-fit: contain: ảnh DỌC (máy nước nóng, quạt cây, bơm) luôn hiện TRỌN, không bị cắt đáy (2026-10-11) –
     trước đây dùng max-height: 100% trong lưới nên tỉ lệ phần trăm không có chiều cao tham chiếu và ảnh dọc tràn khung. */
  aspect-ratio: 1; border-radius: var(--r-lg);
  /* HỘC TỐI CÓ ĐÈN RỌI (12/10/2026). Rất nhiều mã là đèn / mặt công tắc / bồn cầu MÀU TRẮNG đã tách nền;
     mọi nền sáng đều làm chúng biến mất. Nền be cũ (#f2e9d9→#e3d6c0) đã được đo thật ở 375px: ô ảnh trông
     như ô trống dù ảnh đã tải xong. Nay: hộc sâu hơn nền trang + một nguồn sáng ấm rọi từ trên xuống
     (đúng ẩn dụ "đèn bật" của DESIGN.md §6.2 quy tắc 7) + viền tóc & vạch sáng mép trên để hộc không
     chìm vào nền trang (bài học từ Linear – xem DANH-GIA-UI-UX-2026-10-12.md mục 3.0). */
  background: var(--ac-niche);
  border: 1px solid var(--ac-niche-line);
  /* vạch sáng mép trên = mép phông bắt sáng; bóng đổ ngoài để ô kem NỔI HẲN khỏi nền than của trang */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
/* (12/10/2026 lượt 7b – người dùng yêu cầu) ĐÃ BỎ vũng bóng hình bầu dục dưới chân hàng hóa
   (trước là .pcard__media::before). Hàng hóa vẫn tách khỏi phông nhờ nét viền ôm hình thật và
   chân phông sậm – xem --ac-niche-drop và --ac-niche. Vũng bóng đó còn một tật phụ: ô nào ảnh
   chưa tải xong thì nó hiện ra thành một vệt mờ giữa ô trống. */
/* LỚP 2 – VỆT SÁNG QUÉT QUA khi rê chuột: đúng ẩn dụ "đèn quét qua mặt hàng" của DESIGN.md §6.2.
   Nằm trên ảnh (::after vẽ sau nội dung) nên nhìn như ánh sáng lướt trên vật, không phải sau vật.
   Chỉ chạy `transform` + `opacity`. */
.pcard__media::after {
  content: "";
  position: absolute; inset: -20% -60%;
  pointer-events: none;
  /* Trên phông KEM, vệt trắng mờ 17% không nhìn thấy gì – phải nâng hẳn lên gần đục. */
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, 0.62) 47%,
    rgba(255, 255, 255, 0.22) 56%,
    transparent 66%);
  transform: translateX(-60%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pcard__media::after { transition: transform 0.85s var(--ease-out), opacity var(--t-base); }
  .pcard__link:hover .pcard__media::after { transform: translateX(60%); opacity: 1; }
}
.pcard__link:hover .pcard__media { border-color: rgba(150, 112, 52, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 38px rgba(0, 0, 0, 0.55); }
.pcard__media img {
  position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain;
  filter: var(--ac-niche-drop);
  transition: transform var(--t-slow) var(--ease-out);
}
.pcard__link:hover .pcard__media img { transform: scale(1.04); }
/* ẢNH CHỤP THẬT (có nền riêng – gần như toàn bộ thiết bị vệ sinh và đèn trang trí ASIA):
   phủ KÍN ô, không chừa phông kem. Đặt một tấm ảnh chữ nhật lên giữa phông rồi thêm bóng ôm
   hình thì bóng sẽ ôm lấy cái khung ảnh chứ không ôm sản phẩm, nhìn ra ngay là lỗi.
   Đây đúng là cách ảnh nhỏ ở trang chi tiết đã làm từ trước (.thumb--photo), nay dùng chung.
   Nhận biết bằng danh sách ANH_CHUP ở cuối js/catalog.js – đo từ chính các tệp ảnh. */
.pcard__media img.is-photo {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: none;
}
.mcard__media img.is-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.pcard__brand { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.pcard__name { font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }   /* anywhere: chuỗi mã dài "TBV09400V/TBW13020V/…" không có chỗ ngắt từng tràn ra ngoài thẻ trên điện thoại */
@media (max-width: 1099px) { .pcard__name { -webkit-line-clamp: 3; } }
/* .pcard__go ("Xem chi tiết →") đã BỎ 12/10/2026: cả thẻ đã là một liên kết, in lại câu đó ở mọi thẻ là
   lặp cùng một chữ 9–40 lần trên một màn hình. Không trang tham khảo nào (Louis Poulsen, B&O, Dyson) có nó. */

/* thanh hãng ở bước lưới: kèm số mã của từng hãng */
/* 11px là sàn cỡ chữ của cả web (QUY-CACH mục 3) – không được nhỏ hơn */
.tabs button small { font-size: 11px; font-weight: 600; opacity: 0.6; margin-left: 3px; letter-spacing: 0; }
.tabs button { white-space: nowrap; }

/* -- Bước 3: thanh quay lại -- */
.crumb {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(14px, 2vh, 20px);        /* trước đây dính sát thanh hãng */
  padding: 0 clamp(16px, 3vw, 40px);
}
.crumb[hidden] { display: none; }
.crumb__back {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px 0 10px;
  border: 1px solid var(--stroke); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.crumb__back:hover { background: var(--surface-hover); transform: translateX(-2px); border-color: var(--stroke-strong); }
.crumb__back:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
.crumb__pos { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

/* -- Bước 4: hỏi giá -- */
.ask { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.ask[hidden] { display: none; }
.ask__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Một hành động chính duy nhất (DESIGN.md §1 "Gọn": không ba nút cùng mức quan trọng).
   "Hỏi giá mã này" = khối đặc; "Nhắn Zalo" = nút phụ nhẹ hơn hẳn, không tô nền. */
.ask__btn--main { background: var(--text); color: var(--on-text); border-color: transparent; font-weight: 600; }
.ask__btn--main:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.ask__btn:not(.ask__btn--main) { background: none; border-color: var(--line); color: var(--muted); }
.ask__btn:not(.ask__btn--main):hover { background: var(--surface); border-color: var(--stroke); color: var(--text); transform: translateY(-2px); }
.ask__btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
/* banner hãng (nền tối) dùng màu sáng */
.frame.is-brand-hero .ask__btn--main { background: var(--ac-cream); color: var(--ac-ink-700); }

/* ============================================================================
   CHUYỂN TIẾP LƯỚI ↔ CHI TIẾT
   Dùng View Transitions của chính trình duyệt: ảnh của thẻ vừa bấm nở ra thành khung ảnh lớn.
   Trình duyệt tự nội suy giữa hai trạng thái nên mượt, không cần thư viện, JS không chạy ở từng khung hình.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(product-shot) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  /* CHỈ mờ dần, KHÔNG trượt.
     Bản trước cho cả trang trượt translateY(-10px → +14px). Con trỏ tự vẽ nằm trong cùng ảnh chụp
     `root` đó nên nó trượt theo trang: khách bấm vào tab PANASONIC mà thấy con trỏ nằm phía trên tab.
     Đây là thứ không đo được bằng getBoundingClientRect() vì DOM sống vẫn đứng yên,
     chỉ lớp ảnh chụp của View Transition mới dịch. */
  ::view-transition-old(root) { animation: vt-out 160ms ease both; }
  ::view-transition-new(root) { animation: vt-in 240ms ease 40ms both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* Tên `product-shot` do js/app.js gán tạm cho ảnh thẻ và ảnh lớn ngay trước khi chuyển,
   rồi gỡ ra sau khi xong – hai phần tử không bao giờ cùng mang tên này tại một thời điểm hiển thị. */

/* (Đã bỏ con trỏ chuột tự vẽ "đốm sáng" theo yêu cầu người dùng 2026-10-08: dùng con trỏ hệ thống) */

/* ============================================================================
   THANH MENU: cuộn xuống thì ẩn đi, cuộn ngược lên một chút là hiện lại.
   Trang chính nay dài 5 khối nên quy tắc cũ "menu chỉ thuộc màn hình đầu" sẽ bỏ rơi
   khách ở giữa trang, không có đường đổi danh mục.
   ============================================================================ */
body:has(.frame.is-home) .nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(10, 10, 11, 0.92);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
body:has(.frame.is-home) .frame { padding-top: var(--nav-h, 84px); }
body.nav-stuck:has(.frame.is-home) .nav { border-bottom-color: var(--line); box-shadow: var(--sh-lg); }
/* (Đã bỏ `body.nav-hidden .nav { transform: translateY(-100%) }` ngày 12/10/2026:
   người dùng chốt thanh tiêu đề LUÔN hiện, không ẩn khi kéo xuống.) */
/* Đổ bóng + đường kẻ dưới thanh khi đã cuộn qua đỉnh, ở MỌI trang (không riêng trang chính) */
body.nav-stuck .nav { border-bottom: 1px solid var(--line); box-shadow: var(--sh-lg); }
@media (prefers-reduced-motion: reduce) {
  body:has(.frame.is-home) .nav { transition: none; }
}

/* ---------- Khối Catalogue: bảng xem / tải (13/10/2026; mẫu: trang Price list của CADIVI) ---------- */
.ctable { border: 1px solid var(--stroke); border-radius: var(--r-lg, 18px); overflow: hidden; background: var(--surface); }
.ctable__head, .ctable__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2.6fr) 64px 104px minmax(168px, 1.1fr);
  align-items: center; gap: 0 clamp(12px, 2vw, 28px);
  padding: 16px clamp(16px, 2.4vw, 28px);
}
.ctable__head { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.04); }
.ctable__row { border-top: 1px solid var(--stroke); transition: background var(--t-fast); }
.ctable__row:hover { background: var(--surface-hover); }
.ctable__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ctable__brand img { height: 28px; width: auto; max-width: 96px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px 6px; }
.ctable__brand span { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.ctable__title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.ctable__type, .ctable__size { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ctable__act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ctable__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--stroke); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ctable__btn:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); }
.ctable__btn--dl { background: var(--ac-gold-400); color: var(--ac-ink-900); border-color: transparent; font-weight: 600; }
.ctable__btn--dl:hover { background: #f0dcb2; border-color: transparent; }
.ctable__btn:focus-visible { outline: 2px solid var(--ac-gold-400); outline-offset: 3px; }
@media (max-width: 820px) {
  .ctable__head { display: none; }
  .ctable__row { grid-template-columns: 1fr auto; grid-template-areas: "brand size" "title title" "act act"; gap: 10px 12px; padding: 18px 16px; }
  .ctable__brand { grid-area: brand; }
  .ctable__size { grid-area: size; text-align: right; }
  .ctable__type { display: none; }
  .ctable__title { grid-area: title; }
  .ctable__act { grid-area: act; justify-content: flex-start; }
  .ctable__btn { min-height: 44px; }
}
/* Bấm mục trên thanh menu (Giới thiệu, Catalogue, Câu hỏi…) → khối dừng NGAY DƯỚI thanh tiêu đề cố định, tiêu đề khối không bị che */
.hs { scroll-margin-top: calc(var(--nav-h, 68px) + 12px); }
.ctable__head > :last-child { text-align: right; }

/* 13/10/2026: hoạt ảnh vô hạn của khối đang NẰM NGOÀI màn hình vẫn chạy ngầm (tính lại kiểu mỗi khung hình) → js/app.js (setupOffscreenPause) gắn .is-offscreen để tạm dừng */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

/* ============================================================================
   CHẾ ĐỘ HIỆU ỨNG NHẸ khi máy bật "Giảm chuyển động" (20/10/2026, người dùng chọn).
   Windows tắt "Animation effects" (Settings → Accessibility → Visual effects), Android / iOS bật "Giảm chuyển động"
   hay chế độ tiết kiệm pin → trình duyệt báo prefers-reduced-motion: reduce. Trước đây ở đây là MỘT lệnh tắt sạch
   mọi animation + transition toàn trang → máy đó thấy web "chết", không có hiệu ứng nào (người dùng phản ánh trên PC).
   Nay GIỮ những gì chỉ đổi ÁNH SÁNG / ĐỘ MỜ (đèn bật, hiện mờ dần, vẽ nét biểu tượng, tia sáng & dải logo chạy CHẬM),
   BỎ những gì làm cả khối TRƯỢT / PHÓNG / NHÚN (thị sai trang chủ, chữ nhún, bụi bay, quầng trôi, khối trồi lên).
   Các luật no-preference rải rác trong file vẫn tự tắt phần chuyển động mạnh; khối dưới chỉ BẬT LẠI phần nhẹ.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }                                                        /* quầng sáng trôi: chuyển động, bỏ */
  /* mở màn đèn bật: chỉ còn mờ dần, không trồi chữ */
  .frame.intro .hero-text, .frame.intro .hero-copy { animation-name: fade-in; }
  .frame.intro .home-cta__stack { animation-name: fade-in-center; }
  .frame.is-home .hero-beam { animation: beam-breathe 7s ease-in-out infinite; }
  /* tia sáng trên dây vàng + dải logo: chạy, nhưng chậm gấp đôi */
  .streaks .spark { opacity: 1; animation: spark-run calc(var(--dur, 16s) * 2) linear var(--delay, 0s) infinite; }
  .lw-row { overflow: hidden; }
  .lw-move { animation: lw-scroll calc(var(--dur, 48s) * 2) linear infinite; }
  .lw-row--rev .lw-move { animation-direction: reverse; }
  .logowall:hover .lw-move, .logowall:focus-within .lw-move { animation-play-state: paused; }
  /* khối mời liên hệ: vầng sáng thở + viền sáng chạy chậm */
  .cta__beam { animation: beam-pulse 7s ease-in-out infinite alternate; }
  .cta::before { animation: ac-angle-spin 18s linear infinite; }
  /* biểu tượng "Vì sao chọn An Chiêu" tự vẽ nét (không có chuyển động khối) */
  .whygrid.can-draw .why__icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .whygrid.is-drawn .why__icon svg > * { animation: why-draw 1.1s var(--ease-out) both; }
  /* các khối trang chủ hiện MỜ DẦN khi cuộn tới (không trồi lên) */
  @supports (animation-timeline: view()) {
    .hs__head, .hs__foot, .intro__main > p, .intro__main > h2 {
      animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .facts > .fact, .certs__head, .certs__grid > .cert, .hd, .logowall, .whygrid > .why {
      animation: fade-in linear both; animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(60% + var(--i, 0) * 6%);
    }
  }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-center { from { opacity: 0; transform: translate(-50%, -50%); } to { opacity: 1; transform: translate(-50%, -50%); } }