/* =========================================================
   Kartchen — invisible induction
   1. Tokens          6. Gallery
   2. Base            7. Finishes (signature)
   3. Primitives      8. Products / Process / FAQ
   4. Header / Nav    9. Contact / Footer
   5. Hero / Hob     10. Dock / Motion / Responsive
                     11. Lớp bắt buộc của WordPress
                     12. Tin tức (lưu trữ, bài viết, .prose)
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --ink:        #0E0F10;
  --ink-2:      #141618;
  --ink-3:      #1B1E21;
  --bone:       #F2EFE9;
  --bone-2:     #E3DED4;
  --brass:      #C9A875;   /* on dark  — 8.6:1 */
  /* Vàng đồng cho nền sáng. Chú thích cũ ghi 5,2:1 — đó là đo trên nền TRẮNG
   thuần. Nền sáng thật của site là #F2EFE9 (ngà), và trên đó #8A6C3E chỉ đạt
   4,26:1, tức dưới ngưỡng AA 4,5:1 cho chữ nhỏ. Đo bằng màu đã tính của chính
   phần tử .eyebrow, không phải bằng token. */
--brass-lo:   #7A5F36;   /* trên nền ngà #F2EFE9 — 5.2:1 */
  --brass-hi:   #E8D3AC;

  /* Cùng ba màu trên nhưng ở dạng "r,g,b" trần, để dùng được trong rgba().
     CSS không cho tách kênh màu ra khỏi một biến dạng #hex, nên muốn có
     rgba(màu-thương-hiệu, .16) thì buộc phải giữ song song hai dạng.

     Trước khi có mấy dòng này, 40 chỗ trong file viết cứng rgba(201,168,117,…)
     và #16130E — kể cả --line là viền của gần như mọi khung trên site. Đổi màu
     chủ đạo mà không đổi chúng thì site ra hai tông màu chỏi nhau. */
  --accent-rgb:    201,168,117;
  --accent-hi-rgb: 232,211,172;

  /* Chữ nằm TRÊN nền màu chủ đạo (nút đặc, nhãn "được chọn nhiều nhất"…).
     PHP tính lại thành gần-đen hay gần-trắng tuỳ độ sáng của màu khách chọn —
     xem inc/color.php. */
  --on-accent:  #16130E;

  /* contextual — flipped by .section--light */
  --bg:         var(--ink);
  --fg:         #EDEAE4;
  --fg-dim:     #96938D;
  --accent:     var(--brass);
  --line:       rgba(var(--accent-rgb),.16);
  --panel:      var(--ink-2);

  /* type */
  --display: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --body:    "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* rhythm */
  --gap:   clamp(16px, 2.2vw, 28px);
  --pad-y: clamp(72px, 9vw, 80px);
  --r:     3px;
  --ease:  cubic-bezier(.22,.61,.36,1);

  /* procedural material maps */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --vein:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='500' filter='url(%23v)'/%3E%3C/svg%3E");
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 clamp(.95rem,.35vw + .88rem,1.02rem)/1.7 var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:200; letter-spacing:-.03em; line-height:1.2; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:12px 18px; background:var(--brass); color:var(--ink);
  font:500 .82rem var(--mono); transform:translateY(-160%); transition:transform .2s;
}
.skip-link:focus{ transform:none; }

/* ---------- 3. PRIMITIVES ---------- */
.shell{ width:min(1240px, 100% - 2*clamp(20px,5vw,60px)); margin-inline:auto; }
/* 1200px is the cap, not a fixed width. As a fixed width it made the page
   1200px wide on a phone: the FAQ ran off-screen, and because .hdr is
   position:fixed it only ever spans the viewport — so panning right to reach
   the cut-off text slid the header (and the menu button) out of view. */
.shell--narrow{ width:min(1200px, 100% - 2*clamp(20px,5vw,60px)); }

.section{ padding-block:var(--pad-y); position:relative; }
.section + .section{ border-top:1px solid var(--line); }
.section--flush{ padding-bottom:clamp(48px,6vw,80px); }
.section--light{
  --bg:var(--bone); --fg:#15171A; --fg-dim:#5C5F65;
  --accent:var(--brass-lo); --line:rgba(21,23,26,.12); --panel:#fff;
  background:var(--bg); color:var(--fg);
}

.eyebrow{
  margin-bottom:16px; color:var(--accent);
  font:500 .69rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
}
.h2{ font-size:clamp(1.85rem,3.4vw,3rem); max-width:18ch; }

.secHead{ margin-bottom:clamp(38px,5vw,56px); }
.single .secHead{ margin-bottom:clamp(38px,5vw,38px); }
.single-product .secHead{padding-top: 15px;}


.secHead--split{ display:grid; gap:clamp(20px,3vw,56px); grid-template-columns:1fr; align-items:end; }
.secHead__note{ color:var(--fg-dim); max-width:52ch; }
/* Liên kết hành động ở cột phải của header (ví dụ "Xem đủ sáu công nghệ").
   52ch là giới hạn cho ĐOẠN CHỮ dễ đọc — với một liên kết thì nó vô nghĩa. */
.secHead__note--action{ max-width:none; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:1px solid transparent; border-radius:var(--r);
  font:500 .8rem/1 var(--body); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:11px 20px; font-size:.72rem; }
.btn--full{ width:100%; }
.btn--solid{ background:var(--brass); color:var(--on-accent); border-color:var(--brass); }
.btn--solid:hover{ background:var(--brass-hi); border-color:var(--brass-hi); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.section--light .btn--ghost{ border-color:rgba(21,23,26,.22); }
.section--light .btn--solid{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.section--light .btn--solid:hover{ background:var(--brass-lo); border-color:var(--brass-lo); color:#fff; }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* Không có JavaScript thì không có hiệu ứng — nhưng nội dung PHẢI hiện.
   Thiếu dòng này, một lỗi JS bất kỳ sẽ làm trắng toàn bộ phần giữa trang. */
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- MATERIAL SYSTEM ---------- */
.surface{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--s-1,#111);
  background-image:var(--s-layers,none);
  background-size:cover;
}
.surface::before{                       /* veining / clouding */
  content:""; position:absolute; inset:-25%; z-index:1; pointer-events:none;
  background-image:var(--vein);
  background-size:var(--s-veinSize,150% 150%);
  opacity:var(--s-veinOp,.4);
  mix-blend-mode:var(--s-veinBlend,screen);
  filter:contrast(var(--s-veinCon,180%)) brightness(var(--s-veinBri,1));
}
.surface::after{                        /* grain + directional sheen */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain), linear-gradient(115deg,rgba(255,255,255,.1),transparent 44%,rgba(0,0,0,.18));
  background-size:170px 170px, cover;
  opacity:var(--s-grainOp,.34); mix-blend-mode:overlay;
}
.surface > *{ position:relative; z-index:2; }

/* procedural surfaces for the hero hob and the gallery scenes; the finishes
   section uses real product renders instead */
.surface--nero{ --s-1:#0F1012; --s-veinOp:.22; --s-veinCon:230%; --s-glow:1; }
.surface--calacatta{
  --s-1:#F0EEE9; --s-veinOp:.22; --s-veinBlend:multiply; --s-veinCon:300%; --s-glow:.72;
  /* Calacatta is read by its veins, not its field — draw them explicitly */
  --s-layers:
    linear-gradient(72deg,transparent 45.4%,rgba(150,116,62,.34) 46.4%,rgba(150,116,62,.1) 47.2%,transparent 48.4%),
    linear-gradient(63deg,transparent 60.6%,rgba(126,110,86,.3) 61.4%,transparent 62.6%),
    linear-gradient(84deg,transparent 21.4%,rgba(163,131,80,.22) 22.3%,transparent 23.4%),
    linear-gradient(58deg,transparent 76.6%,rgba(120,104,82,.2) 77.3%,transparent 78.3%);
}
.surface--beton{ --s-1:#7B7671; --s-veinOp:.3; --s-veinBlend:multiply; --s-veinCon:130%; --s-glow:.84; }
.surface--oak{
  --s-1:#4A382A; --s-veinOp:.3; --s-veinSize:340% 120%; --s-veinCon:150%; --s-glow:.95;
  --s-layers:repeating-linear-gradient(92deg,rgba(0,0,0,.16) 0 2px,transparent 2px 13px),
             repeating-linear-gradient(92deg,rgba(255,255,255,.05) 0 1px,transparent 1px 27px);
}

/* ---------- 4. HEADER ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
/* The glass sits on a pseudo-element, never on .hdr itself. An ancestor with
   backdrop-filter becomes the containing block for its position:fixed
   descendants — with it on .hdr, the mobile drawer was clipped to the 62px
   header box instead of covering the screen. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,15,16,.92),rgba(14,15,16,0));
  transition:background .35s var(--ease);
}
.hdr.is-stuck::before{ background:rgba(12,13,14,.86); backdrop-filter:blur(14px) saturate(140%); }
.hdr.is-stuck{ border-bottom-color:var(--line); }

/* above .hdr__progress: .hdr__bar now forms a stacking context, so the
   drawer's z-index:110 only competes inside it */
.hdr__bar{ position:relative; z-index:2; display:flex; align-items:center; gap:clamp(14px,3vw,42px); height:var(--hdr-h,78px); transition:height .35s var(--ease); }
.hdr.is-stuck .hdr__bar{ --hdr-h:62px; }
.hdr__progress{ position:relative; z-index:1; height:1px; background:transparent; }
.hdr__progress i{ display:block; height:100%; width:0; background:var(--brass); transition:width .1s linear; }

.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--brass); flex:0 0 auto; }
.brand__word{ font:600 1.06rem/1 var(--display); letter-spacing:.02em; color:var(--fg); }
.brand__mark svg{ transition:transform .5s var(--ease); }
.brand:hover .brand__mark svg{ transform:rotate(90deg); }
/* Logo tải lên từ Customizer.
   height cố định + width:auto để MỌI tỷ lệ đều vừa: logo ngang dài tự giãn
   rộng, logo vuông tự thu hẹp. Đặt ngược lại (khoá width) thì logo cao sẽ đội
   header lên và đẩy menu xuống.
   max-width chặn logo quá dài nuốt mất chỗ của menu trên màn hình hẹp. */
.brand__logo{
  display:block; width:auto; height:clamp(26px,2.6vw,34px);
  max-width:min(220px,42vw); object-fit:contain;
  transition:height .35s var(--ease);
}
/* Header co từ 78px xuống 62px khi cuộn — logo phải co theo, nếu không nó chạm
   sát mép trên dưới và trông như bị kẹt. */
.hdr.is-stuck .brand__logo{ height:clamp(22px,2.2vw,28px); }

.nav{ margin-inline:auto; }
.nav__list{ display:flex; gap:clamp(14px,2vw,30px); }
.nav__list a{
  position:relative; display:block; padding:8px 2px;
  font-size:.86rem; color:var(--fg-dim); transition:color .2s;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__list a:hover,.nav__list a.is-active{ color:var(--fg); }
.nav__list a.is-active::after,.nav__list a:hover::after{ transform:scaleX(1); }
.nav__close,.nav__foot{ display:none; }

/* --- menu con ---
   KHỐI NÀY VIẾT MOBILE-FIRST, ngược với phần còn lại của file. Có lý do: trạng
   thái cơ sở của menu con là "xếp gấp trong ngăn kéo" (display:none/block), còn
   trên desktop nó là "hộp thả xuống" (visibility + opacity). Viết desktop trước
   rồi ghi đè cho mobile thì hai cơ chế ẩn/hiện đè lên nhau, và phải dùng tới
   !important để gỡ. Mobile trước thì mỗi trạng thái chỉ có một luật.

   Nút .nav__toggle do inc/nav.php chèn vào; hành vi do initNavSubmenus() trong
   main.js lo. Ba phần là một khối. */
.nav__list .menu-item-has-children{
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
}
.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; background:none; border:0; cursor:pointer;
  color:var(--fg-dim); transition:color .2s, transform .25s var(--ease);
}
.nav__toggle:hover{ color:var(--brass); }
.menu-item-has-children.is-open > .nav__toggle{ transform:rotate(180deg); color:var(--brass); }

/* PHẢI giới hạn trong .nav__list. Viết trần `.sub-menu{display:none}` thì nó
   nuốt luôn menu con của widget menu ở footer — nơi không có nút gập nào để mở
   ra, nên cấp con biến mất hẳn. Đã đo thấy: footer trả về display:none. Trước
   khi thêm khối này footer còn hiện (dù phẳng), tức là "sửa" xong lại tệ hơn
   lúc đầu. */
.nav__list .sub-menu{
  display:none;
  /* Chiếm trọn hàng để nằm HẲN dưới cặp "tên mục + nút", chứ không chen vào
     bên cạnh nút — .menu-item-has-children là flex container. */
  width:100%;
}
.nav__list .menu-item-has-children.is-open > .sub-menu{ display:block; }

@media (max-width:1023px){
  /* 44px là ngưỡng vùng chạm; đẩy sang phải để ngón cái với tới mà không che
     mất tên mục. */
  .nav__toggle{ width:44px; height:44px; margin-left:auto; }
  .nav__list .sub-menu{ padding:0 0 14px 18px; border-left:1px solid var(--line); }
  .nav__list .sub-menu a{ padding:12px 0; font-size:1.02rem; font-family:var(--body); font-weight:400; }
  .nav__list .sub-menu a::after{ display:none; }
  /* Ngăn kéo kẻ một vạch dưới mỗi mục cấp 1 (`.nav__list li`). Mục con thừa
     hưởng luật đó thì mỗi dòng con cũng có vạch, và cấu trúc phân cấp biến thành
     một danh sách phẳng có nhiều gạch — đúng thứ vạch dọc bên trái đang cố phân
     biệt. */
  .nav__list .sub-menu li{ border-bottom:0; }
}

@media (min-width:1024px){
  .nav__toggle{ width:22px; height:22px; }
  .nav__list .sub-menu{
    display:block;                       /* luôn có trong bố cục, ẩn bằng visibility */
    position:absolute; top:100%; left:-16px; z-index:120;
    width:max-content; min-width:220px; max-width:280px;
    padding:10px 0;
    background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:0 26px 64px -26px rgba(0,0,0,.92);
    /* visibility (không phải opacity đơn thuần) để mục con đang ẩn nằm NGOÀI
       thứ tự Tab — nếu không, người dùng bàn phím rơi vào một liên kết vô hình. */
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  /* Hai đường mở: rê chuột (cho chuột), và class .is-open do nút bấm đặt (cho
     bàn phím lẫn cảm ứng).

     KHÔNG dùng :focus-within, dù thoạt nhìn nó có vẻ đúng. Đã thử và đo thấy
     hỏng: nhấn Escape thì JS gỡ .is-open rồi trả tiêu điểm về đúng cái nút —
     mà nút nằm TRONG <li>, nên :focus-within khớp ngay lập tức và mở lại menu
     vừa đóng. aria-expanded báo "false" trong khi menu vẫn hiện: trạng thái
     nói một đằng, mắt thấy một nẻo.

     Bỏ nó đi không mất gì về trợ năng — cái nút chính là cơ chế dành cho bàn
     phím, và đây đúng là mẫu Disclosure Navigation của WAI-ARIA APG. Ngược lại
     còn được hai thứ: menu không tự bung ra khi người dùng chỉ Tab lướt qua,
     và các liên kết con không chen vào thứ tự Tab khi chưa được mở. */
  .nav__list .menu-item-has-children:hover > .sub-menu,
  .nav__list .menu-item-has-children.is-open > .sub-menu{
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .nav__list .sub-menu a{ padding:9px 20px; font-size:.84rem; }
  .nav__list .sub-menu a::after{ display:none; }   /* gạch chân của cấp 1 không hợp trong hộp */
  .nav__list .sub-menu a:hover{ color:var(--brass); background:rgba(var(--accent-rgb),.09); }
}

.hdr__side{ display:flex; align-items:center; gap:clamp(10px,1.5vw,20px); margin-left:auto; }
.lang{ display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.lang__btn{
  padding:7px 11px; background:none; border:0; cursor:pointer;
  font:500 .68rem/1 var(--mono); letter-spacing:.08em; color:var(--fg-dim); transition:.2s;
}
.lang__btn.is-on{ background:var(--brass); color:var(--on-accent); }
.hdr__tel{ display:inline-flex; align-items:center; gap:8px; font:500 .78rem var(--mono); color:var(--fg-dim); transition:color .2s; }
.hdr__tel:hover{ color:var(--brass); }

.burger{ display:none; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; padding:11px 10px; }
.burger span{ display:block; height:1.5px; background:var(--fg); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 5. HERO ---------- */
.hero{ position:relative; padding-block:calc(var(--hdr-h,78px) + clamp(56px,9vw,110px)) clamp(60px,8vw,110px); overflow:hidden; }
.hero__glow{
  position:absolute; top:-18%; right:-12%; width:min(760px,88vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 62%); filter:blur(28px);
}
.hero__grid{ position:relative; display:grid; gap:clamp(40px,5vw,72px); grid-template-columns:1fr; align-items:center; }

.hero__h1{ font-size:clamp(2.5rem,5.4vw,4.35rem); margin-bottom:26px; }
.hero__h1 span{ display:block; }
.hero__h1 em{ display:block; font-style:normal; font-weight:600; color:var(--brass); }
.hero__lead{ color:var(--fg-dim); max-width:50ch; font-size:1.02em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-block:34px; }
.hero__hint{ margin-top:16px; color:var(--fg-dim); font:400 .76rem var(--mono); }

.specstrip{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.specstrip > div{ background:var(--ink); padding:16px 18px; }
.specstrip dt{ font:500 .62rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.specstrip dd{ margin-top:8px; font:400 clamp(.98rem,2.6vw,1.12rem)/1.25 var(--display); color:var(--brass); }

/* --- the worktop --- */
.hob{
  aspect-ratio:4/3; border-radius:var(--r); margin:0;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
}
/* Chế độ ảnh tự chọn.
   .surface không được gắn ở chế độ này (nó vẽ hoạ tiết đá đè lên ảnh), mà chính
   .surface là nơi cấp position:relative — nên phải tự khai lại, nếu không
   .hob__cap (position:absolute) sẽ nhảy ra neo theo tổ tiên khác. */
.hob--shot{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink-2); }
/* Bốn ảnh chồng nhau; chọn theo TỔ HỢP hai thuộc tính mà initHob() đã ghi sẵn —
   data-zones (nút 2/4 vùng) và data-on (nút nguồn). Không có luật nào khác trong
   file này đọc cả hai cùng lúc, nên đây là chỗ duy nhất phải sửa nếu sau này
   thêm một trạng thái nữa.
   Đổi ảnh bằng display chứ không bằng src: không có khoảnh khắc trắng lúc tải,
   và ba ảnh đang ẩn cũng biến mất khỏi cây trợ năng luôn. */
.hob__shot{ display:none; width:100%; height:100%; object-fit:cover; }
.hob--shot[data-zones="4"][data-on="true"]  .hob__shot--4on,
.hob--shot[data-zones="4"][data-on="false"] .hob__shot--4off,
.hob--shot[data-zones="2"][data-on="true"]  .hob__shot--2on,
.hob--shot[data-zones="2"][data-on="false"] .hob__shot--2off{ display:block; }

.hob__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 50%); pointer-events:none; }
.hob__zones{ position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); padding:9%; }
.hob[data-zones="2"] .hob__zones{ grid-template-columns:repeat(2,1fr); grid-template-rows:1fr; padding:16% 9%; }
.hob[data-zones="2"] .zone[data-z="3"],
.hob[data-zones="2"] .zone[data-z="4"]{ display:none; }

.zone{
  place-self:center; position:relative; width:min(78%,148px); aspect-ratio:1; border-radius:50%;
  opacity:.055; transition:opacity .75s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.hob[data-on="true"] .zone{ opacity:calc(var(--s-glow,1) * 1); }
.zone::before{                                   /* ring */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(var(--accent-hi-rgb),.85);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.55), inset 0 0 22px rgba(var(--accent-rgb),.35);
  opacity:0; transition:opacity .6s var(--ease);
}
.zone::after{                                    /* bloom */
  content:""; position:absolute; inset:-42%; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.42),transparent 62%);
  opacity:0; transition:opacity .8s var(--ease);
}
.hob[data-on="true"] .zone::before{ opacity:1; animation:breathe 3.4s var(--ease) infinite; }
.hob[data-on="true"] .zone::after{ opacity:1; }
.hob[data-on="true"] .zone[data-z="2"]::before{ animation-delay:.35s; }
.hob[data-on="true"] .zone[data-z="3"]::before{ animation-delay:.7s; }
.hob[data-on="true"] .zone[data-z="4"]::before{ animation-delay:1.05s; }
@keyframes breathe{ 0%,100%{ box-shadow:0 0 16px rgba(var(--accent-rgb),.45), inset 0 0 20px rgba(var(--accent-rgb),.3); } 50%{ box-shadow:0 0 30px rgba(var(--accent-rgb),.8), inset 0 0 32px rgba(var(--accent-rgb),.5); } }

.hob__ui{ position:absolute; z-index:3; left:8%; bottom:8%; display:flex; align-items:center; gap:14px; opacity:0; transition:opacity .5s var(--ease); }
.hob[data-on="true"] .hob__ui{ opacity:1; }
.hob__read{ font:500 .78rem/1 var(--mono); color:var(--brass-hi); letter-spacing:.12em; }
.hob__slider{ display:flex; gap:4px; align-items:flex-end; }
.hob__slider i{ width:3px; height:9px; background:rgba(var(--accent-hi-rgb),.25); }
.hob__slider i.is-lit{ background:var(--brass-hi); box-shadow:0 0 8px rgba(var(--accent-hi-rgb),.8); }
.hob__cap{
  position:absolute; z-index:3; right:8%; bottom:8%; text-align:right;
  font:400 .66rem/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.hob__cap span{ display:block; }
.hob__code{ color:rgba(255,255,255,.32); }

.hobctl{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-top:18px; }
.hobctl__tabs{ display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.hobctl__tab{
  padding:11px 20px; background:none; border:0; cursor:pointer;
  font:500 .72rem/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); transition:.25s;
}
.hobctl__tab.is-on{ background:rgba(var(--accent-rgb),.14); color:var(--brass); }
.hobctl__power{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:var(--r);
  font:500 .72rem/1 var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); transition:.25s;
}
.hobctl__power:hover{ border-color:var(--brass); color:var(--brass); }
.hobctl__power.is-on{ background:var(--brass); border-color:var(--brass); color:var(--on-accent); }
/* one label is always display:none, so it stays out of the accessible name */
.hobctl__lbl--off,
.hobctl__power.is-on .hobctl__lbl--on{ display:none; }
.hobctl__power.is-on .hobctl__lbl--off{ display:inline; }

/* ---------- CARDS ---------- */
.cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr; }
.card{ background:var(--ink); padding:clamp(26px,3vw,40px); transition:background .35s var(--ease); }
.card:hover{ background:var(--ink-2); }
.card__ico{ display:block; width:34px; color:var(--brass); margin-bottom:26px; }
.card__ico svg{ width:34px; height:34px; }
.card h3{ font-size:1.16rem; font-weight:600; letter-spacing:-.01em; margin-bottom:12px; }
.card p{ color:var(--fg-dim); font-size:.93rem; }

/* ---------- 6. GALLERY ---------- */
.gallery{
  display:grid; gap:clamp(10px,1.4vw,18px); grid-template-columns:1fr;
  width:min(1600px,100% - 2*clamp(20px,5vw,60px)); margin-inline:auto;
}
.shot{ margin:0; position:relative; }
.shot__img{ display:block; aspect-ratio:4/3; border-radius:var(--r); }
.shot__hob{
  position:absolute; z-index:2; left:50%; top:52%; translate:-50% -50%;
  width:44%; aspect-ratio:2/1;
  background:
    radial-gradient(circle at 27% 50%, rgba(var(--accent-rgb),.5), transparent 46%),
    radial-gradient(circle at 73% 50%, rgba(var(--accent-rgb),.5), transparent 46%);
  filter:blur(1px);
}
.shot figcaption{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; padding-top:14px; }
.shot figcaption b{ font-weight:500; font-size:.92rem; }
.shot figcaption span{ color:var(--fg-dim); font:400 .7rem var(--mono); letter-spacing:.08em; }

/* ---------- 7. FINISHES ---------- */
.finish{ display:grid; gap:clamp(26px,3.5vw,54px); grid-template-columns:1fr; align-items:start; }

.finish__stage{
  position:relative; margin:0; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--r); background:var(--bone-2);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.45);
}
.finish__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* every render shares one camera, so a single crop frames the island in
     all 20 — it sits just below and left of centre in the 4:3 source */
  object-position:49% 62%;
  opacity:0; transition:opacity .55s var(--ease);
}
.finish__img.is-on{ opacity:1; }
.finish__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; justify-content:space-between;
  padding:26px clamp(16px,2.4vw,26px) clamp(14px,2vw,20px);
  /* Lớp phủ phải ĐỦ ĐẬM Ở ĐÚNG HÀNG CHỮ, không chỉ ở mép dưới.
     Bản cũ `rgba(12,13,14,.62) -> transparent` cho tương phản trung bình 3,41
     nhưng chỗ sáng nhất chỉ 1,92:1 — mà thư viện bề mặt phần lớn là đá sáng,
     nên "chỗ sáng nhất" là trường hợp thường gặp chứ không phải ngoại lệ.
     Ba điểm dừng: đậm ở dưới, còn đủ đậm ngang dòng chữ, rồi mới tan. */
  background:linear-gradient(0deg,
    rgba(12,13,14,.92) 0%,
    rgba(12,13,14,.86) 45%,
    rgba(12,13,14,.55) 75%,
    transparent 100%);
  color:#F4F2ED;
}
.finish__name{ font:400 clamp(1.2rem,2.2vw,1.6rem)/1 var(--display); letter-spacing:-.02em; }
.finish__num{ font:400 .72rem var(--mono); letter-spacing:.12em; color:rgba(244,242,237,.66); }
.finish__num b{ font-weight:500; color:var(--brass); }

.finish__hint{ margin-bottom:20px; color:var(--fg-dim); font-size:.9rem; }

/* 20 circular samples, the original's layout language done keyboard-first */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:clamp(10px,1.4vw,16px); }
.swatch{ cursor:pointer; border:0; padding:0; background:none; display:block; }
.swatch__chip{
  display:block; aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
  transition:transform .28s var(--ease), outline-color .2s;
  outline:2px solid transparent; outline-offset:3px;
}
.swatch:hover .swatch__chip{ transform:scale(1.07); }
.swatch__num{ display:block; padding-top:7px; text-align:center; font:400 .64rem var(--mono); color:var(--fg-dim); }
.swatch[aria-checked="true"] .swatch__chip{ outline-color:var(--ink); transform:scale(1); }
.swatch[aria-checked="true"] .swatch__num{ color:var(--ink); font-weight:500; }

/* ---------- 8. PRODUCTS ---------- */
.plans{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:1fr; }
.plan{ position:relative; display:flex; flex-direction:column; padding:clamp(26px,3vw,42px); border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); }
.plan--feat{ background:linear-gradient(170deg,rgba(var(--accent-rgb),.09),transparent 55%),var(--ink-2); border-color:rgba(var(--accent-rgb),.34); }
.plan__flag{
  position:absolute; top:-1px; right:clamp(20px,3vw,32px); padding:7px 14px;
  background:var(--brass); color:var(--on-accent); font:500 .6rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.plan__dia{ display:grid; grid-template-columns:repeat(2,14px); gap:7px; margin-bottom:24px; }
.plan__dia i{ display:block; width:14px; height:14px; border:1px solid var(--brass); border-radius:50%; }
.plan__head h3{ font-size:1.7rem; font-weight:400; margin-bottom:12px; }
.plan__head p{ color:var(--fg-dim); font-size:.93rem; margin-bottom:28px; }
.plan__specs{ margin-bottom:30px; border-top:1px solid var(--line); }
.plan__specs > div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.plan__specs dt{ color:var(--fg-dim); font-size:.84rem; }
.plan__specs dd{ font:500 .88rem var(--mono); color:var(--brass); letter-spacing:.02em; }
.plan .btn{ margin-top:auto; }

/* ---------- PROCESS ---------- */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:1fr; counter-reset:s; }
.step{ background:var(--ink); padding:clamp(26px,3vw,40px); }
.step__n{ display:block; margin-bottom:22px; font:400 2.4rem/1 var(--display); color:rgba(var(--accent-rgb),.32); letter-spacing:-.04em; }
.step h3{ font-size:1.16rem; font-weight:600; letter-spacing:-.01em; margin-bottom:12px; }
.step p{ color:var(--fg-dim); font-size:.93rem; margin-bottom:20px; }
.step__meta{ font:500 .66rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }

/* ---------- INNER-PAGE HERO ---------- */
.phero{ padding-block:calc(var(--hdr-h,78px) + clamp(46px,7vw,88px)) clamp(30px,4vw,54px); }
.blog .phero,
.archive .phero { padding-block: calc(var(--hdr-h, 78px) + clamp(46px, 7vw, 88px)) clamp(6px, 4vw, 6px); }
.page .phero {
    padding-block: calc(var(--hdr-h, 78px) + clamp(46px, 7vw, 70px)) clamp(15px, 4vw, 15px);
}
.page .phero + .section {
    padding-top: clamp(18px, 2.6vw, 16px);
}

.phero__h1{
  font-family:var(--display); font-weight:200; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(2.2rem,5vw,4rem); max-width:20ch; margin:0 0 22px;
}
.phero__lead{ color:var(--fg-dim); max-width:58ch; font-size:1.02em; }
/* the hero already opened the page — the next section must not add a second
   full run of top padding on top of it */
.phero + .section{ padding-top:clamp(18px,2.6vw,38px); }
.phero + .section{ border-top:0; }

.linkarrow{ display:inline-flex; align-items:center; gap:9px; color:var(--accent); font-size:.9rem; }
.linkarrow::after{ content:"→"; transition:transform .25s var(--ease); }
.linkarrow:hover::after{ transform:translateX(5px); }

/* ---------- TECHNOLOGY LIST ---------- */
.tlist{ border-top:1px solid var(--line); }
.titem{
  display:grid; gap:14px clamp(24px,4vw,64px); grid-template-columns:1fr;
  padding-block:clamp(28px,3.6vw,46px); border-bottom:1px solid var(--line);
  align-items: center;
}
.titem__t{ font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:200; }
.titem__c p{ color:var(--fg-dim); max-width:62ch; }
.titem__meta{
  display:inline-block; margin-top:16px; padding:7px 13px;
  border:1px solid var(--line); border-radius:var(--r);
  font:500 .64rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}

/* ---------- ABOUT ---------- */
.who{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr; align-items:start; }
.who__copy p{ color:var(--fg-dim); max-width:56ch; }
.who__copy p + p{ margin-top:18px; }
.who__copy .h2{ margin-bottom:22px; }

.marks{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.marks > div{ background:var(--bg); padding:clamp(20px,2.4vw,30px); }
.marks dt{ font:200 clamp(1.7rem,3.2vw,2.5rem)/1 var(--display); letter-spacing:-.03em; color:var(--brass); }
.marks dd{ margin-top:12px; color:var(--fg-dim); font:500 .62rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }

/* cards sit on the light panel colour inside a light section */
.cards--light .card{ background:var(--panel); }
.cards--light .card:hover{ background:var(--bone-2); }

/* ---------- BRAND FILM ---------- */
/* capped so the film's native 1280×870 does not run to full section height */
.vid{ width:min(100%,980px); margin-inline:auto; }
.vid__open{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  position:relative; border-radius:var(--r); overflow:hidden;
}
.vid__poster{
  /* native ratio, no crop — cropping scaled the burned-in logo up and pushed it
     under the controls */
  width:100%; height:auto; aspect-ratio:1280/870;
  background:var(--ink-3); transition:transform .8s var(--ease);
}
.vid__open:hover .vid__poster{ transform:scale(1.03); }
.vid__scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(8,9,10,.62),transparent 46%);
}
.vid__play{
  position:absolute; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  display:flex; align-items:center; gap:14px;
  padding:9px 22px 9px 9px; border-radius:999px;
  background:rgba(12,13,14,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); color:#F2EFE9;
  transition:background .25s, border-color .25s, transform .3s var(--ease);
}
.vid__playIco{
  display:grid; place-items:center; width:clamp(44px,4.4vw,54px); aspect-ratio:1;
  border-radius:50%; background:var(--brass); color:var(--on-accent);
  padding-left:3px;                       /* optical centring of the triangle */
  transition:background .25s;
}
.vid__playTxt{ display:grid; gap:3px; text-align:left; }
.vid__playTxt b{ font:500 .8rem/1 var(--body); letter-spacing:.05em; text-transform:uppercase; }
.vid__playTxt em{ font:400 .7rem/1 var(--mono); font-style:normal; letter-spacing:.12em; color:rgba(242,239,233,.6); }
.vid__open:hover .vid__play,
.vid__open:focus-visible .vid__play{ background:rgba(12,13,14,.7); border-color:var(--brass); transform:translateY(-2px); }
.vid__open:hover .vid__playIco{ background:var(--brass-hi); }

/* player */
.vlb{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:clamp(52px,7vh,80px) clamp(10px,3vw,32px) clamp(16px,4vh,40px);
  background:rgba(8,9,10,.96); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .2s var(--ease);
}
.vlb.is-on{ opacity:1; }
.vlb__frame{ width:min(100%,1280px); }
.vlb__frame video,
.vlb__frame iframe{
  display:block; width:100%; height:auto; max-height:80vh;
  border-radius:var(--r); background:#000;
}
/* iframe không có tỷ lệ nội tại như <video>, nên height:auto sẽ cho ra 0.
   aspect-ratio dựng lại khung 16/9, và border:0 gỡ viền mặc định của iframe. */
.vlb__frame iframe{ aspect-ratio:16/9; height:auto; border:0; }
.vlb__close{
  position:absolute; top:clamp(12px,2.4vh,22px); right:clamp(12px,3vw,26px);
  display:grid; place-items:center; width:46px; height:46px; cursor:pointer;
  color:#F2EFE9; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:50%;
  transition:background .2s, border-color .2s;
}
.vlb__close:hover{ background:rgba(var(--accent-rgb),.2); border-color:var(--brass); }

/* ---------- PRODUCT LIST ---------- */
.pbar{
  display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.pbar__filters{ display:flex; flex-wrap:wrap; gap:8px; }
.pchip{
  padding:10px 18px; cursor:pointer; background:none; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:var(--r);
  font:500 .76rem/1 var(--body); letter-spacing:.03em; transition:.22s;
}
.pchip:hover{ border-color:rgba(var(--accent-rgb),.4); color:var(--fg); }
.pchip.is-on{ background:rgba(var(--accent-rgb),.14); border-color:var(--brass); color:var(--brass); }
.pbar__sort{ display:flex; align-items:center; gap:12px; }
.pbar__lab{ color:var(--fg-dim); font:500 .64rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.pbar__sort select{
  padding:10px 34px 10px 14px; color:inherit; color-scheme:dark;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r);
  font-size:.82rem; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) 18px,calc(100% - 14px) 18px;
  background-size:5px 5px; background-repeat:no-repeat;
}
.pbar__sort select option{ background-color:var(--ink-3); color:var(--fg); }

/* Nút "Xem tất cả sản phẩm" dưới lưới sản phẩm nhúng trong trang.
   Thẻ bọc là <p>, mà reset ở mục 2 đặt p{margin:0} — nên không có luật này thì
   nút DÍNH SÁT đáy thẻ sản phẩm đầu tiên, đúng 0px, và căn trái. Nhìn ra thì nó
   giống một nút của riêng thẻ đó chứ không phải của cả khối.
   Căn giữa vì nút thuộc về TOÀN BỘ lưới: căn trái dưới lưới ba cột vẫn khiến nó
   đọc như đang gắn với cột thứ nhất. */
.pgrid__more{ margin-top:clamp(30px,4vw,52px); text-align:center; }

.pcount{ margin:22px 0 clamp(20px,2.6vw,32px); color:var(--fg-dim); font:400 .78rem var(--mono); letter-spacing:.08em; }
.pcount b{ color:var(--accent); font-weight:500; }
.pempty{ padding:48px 0; text-align:center; color:var(--fg-dim); }

.pgrid{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:1fr; }
.pcard{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--ink-2); }
.pcard__link{ display:block; height:100%; }
.pcard__shot{ position:relative; display:block; overflow:hidden; background:var(--ink-3); }
.pcard__shot img{
  /* height:auto is required — the width/height attributes map to CSS presentational
     hints, and aspect-ratio is ignored while height is a fixed length */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:49% 62%;
  transition:transform .6s var(--ease);
}
.pcard__link:hover .pcard__shot img{ transform:scale(1.04); }
.pcard__flag{
  position:absolute; top:0; left:0; padding:7px 13px;
  background:var(--brass); color:var(--on-accent);
  font:500 .58rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.pcard__body{ display:block; padding:clamp(18px,2vw,26px); }
.pcard__code{ display:block; font:500 .68rem/1 var(--mono); letter-spacing:.16em; color:var(--accent); }
.pcard__name{ display:block; margin-top:12px; font:400 1.28rem/1.15 var(--display); letter-spacing:-.02em; }
.pcard__meta{ display:block; margin-top:10px; color:var(--fg-dim); font-size:.82rem; }
.section--light .pcard{ background:#fff; }
.section--light .pcard__flag{ background:var(--ink); color:var(--bone); }

/* ---------- PRODUCT DETAIL ---------- */
.crumbs{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  padding-block:clamp(18px,2.4vw,30px);
  font:400 .7rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
}
.crumbs a:hover{ color:var(--brass); }
.crumbs__now{ color:var(--fg); }

.pdp{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr; align-items:start; }
/* ---------- GALLERY ---------- */
.gal__stage{ position:relative; margin:0; }
.gal__open{
  display:block; width:100%; padding:0; cursor:zoom-in; background:none;
  border:0; border-radius:var(--r); overflow:hidden; position:relative;
}
.gal__open img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:49% 62%;
  background:var(--ink-3); transition:transform .6s var(--ease);
}
.gal__open:hover img{ transform:scale(1.03); }
.gal__zoom{
  position:absolute; top:14px; right:14px; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%; color:#F2EFE9;
  background:rgba(12,13,14,.55); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s;
}
.gal__open:hover .gal__zoom,
.gal__open:focus-visible .gal__zoom{ opacity:1; transform:none; }

.gal__cap{
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; justify-content:space-between;
  padding-top:14px; color:var(--fg-dim); font-size:.84rem;
}
.gal__count{ font:400 .7rem var(--mono); letter-spacing:.1em; }
.gal__count b{ color:var(--accent); font-weight:500; }

.gal__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.gal__thumb{
  padding:0; border:0; background:none; cursor:pointer; border-radius:var(--r); overflow:hidden;
  outline:2px solid transparent; outline-offset:2px; transition:outline-color .2s, opacity .2s;
  opacity:.62;
}
/* 3/2 against a 4/3 source crops top and bottom, so the island fills more of a
   small thumbnail and the finishes stay tellable apart */
.gal__thumb img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:49% 64%; background:var(--ink-3); }
.gal__thumb:hover{ opacity:1; }
.gal__thumb.is-on{ opacity:1; outline-color:var(--brass); }

/* ---------- LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  grid-template-columns:auto 1fr auto; gap:clamp(6px,2vw,26px);
  padding:clamp(52px,7vh,80px) clamp(8px,3vw,32px) clamp(16px,4vh,40px);
  background:rgba(8,9,10,.94); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .2s var(--ease);
}
.lb.is-on{ opacity:1; }
.lb__fig{ margin:0; display:grid; justify-items:center; gap:16px; min-width:0; }
.lb__img{
  /* no width:100% — the image never scales past its natural size, so an
     800px photograph is shown sharp instead of blown up */
  max-width:min(92vw,1400px); max-height:78vh; width:auto; height:auto;
  border-radius:var(--r);
}
.lb__cap{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; justify-content:center;
  color:rgba(242,239,233,.72); font-size:.86rem; text-align:center;
}
.lb__count{ font:400 .72rem var(--mono); letter-spacing:.12em; color:rgba(242,239,233,.5); }
.lb__count b{ color:var(--brass); font-weight:500; }

.lb__close,.lb__nav{
  display:grid; place-items:center; cursor:pointer; color:#F2EFE9;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:50%; transition:background .2s, border-color .2s;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(var(--accent-rgb),.2); border-color:var(--brass); }
.lb__close{ position:absolute; top:clamp(12px,2.4vh,22px); right:clamp(12px,3vw,26px); width:46px; height:46px; }
.lb__nav{ width:clamp(42px,5vw,54px); aspect-ratio:1; }

/* on a phone the side buttons would squeeze the photo — drop them below it */
@media (max-width:599px){
  .lb{ grid-template-columns:1fr; padding-bottom:86px; }
  .lb__nav{ position:absolute; bottom:20px; width:50px; }
  .lb__nav--prev{ left:calc(50% - 60px); }
  .lb__nav--next{ left:calc(50% + 10px); }
  .lb__img{ max-height:66vh; }
}

/* ---------- PRODUCT DETAIL — info column ---------- */
.pdp__h1{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:16px; }
.pdp__tagline{ color:var(--fg); font-size:1.04em; margin-bottom:16px; }
/* .pdp__body đã gỡ: mô tả sản phẩm không còn nằm trong cột thông tin mà xuống
   hẳn một section riêng dùng .prose + .shell--read bên dưới. */
.pdp__specsH{ font:500 .64rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.pdp__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.pill{
  display:inline-block; margin-bottom:20px; padding:9px 16px;
  border:1px solid rgba(var(--accent-rgb),.34); border-radius:var(--r);
  background:rgba(var(--accent-rgb),.1); font-size:.8rem;
}
.pill b{ color:var(--brass); font-family:var(--mono); letter-spacing:.08em; }

/* ---------- SHOWROOM ---------- */
.showroom{ display:grid; gap:clamp(26px,3.5vw,56px); grid-template-columns:1fr; align-items:center; }
.showroom__lead{ color:var(--fg-dim); max-width:52ch; margin-block:20px 30px; }
.showroom__card{
  display:grid; gap:9px; padding:clamp(26px,3vw,40px); font-style:normal;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
}
.showroom__pin{ color:var(--accent); margin-bottom:6px; }
.showroom__card b{ font:400 1.24rem/1.2 var(--display); letter-spacing:-.02em; }
.showroom__card span{ color:var(--fg-dim); }
.showroom__hours{ font:400 .78rem var(--mono) !important; letter-spacing:.06em; }
.showroom__card a{ margin-top:6px; color:var(--accent); font:500 .92rem var(--mono); }

.ft__addr{ margin-top:14px; font-style:normal; color:var(--fg-dim); font-size:.84rem; max-width:30ch; }
.ft__hours{ margin-top:12px; text-align:center; color:var(--fg-dim); font:400 .72rem var(--mono) !important; letter-spacing:.06em; }

/* ---------- FULL-BLEED STATEMENT ---------- */
.banner{
  position:relative; overflow:hidden;
  display:grid; align-items:end;
  min-height:clamp(440px,64vh,660px);
  background:#0A0B0C;              /* holds the frame while the image lazy-loads */
}
.banner--short{ min-height:clamp(360px,48vh,500px); }
.banner__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:58% 50%;
  transform:scale(1.05); transition:transform 1.4s var(--ease);
}
.banner.is-in .banner__img{ transform:scale(1); }
.banner__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,10,.84) 0%,rgba(8,9,10,.55) 38%,rgba(8,9,10,.1) 70%,transparent 100%),
    linear-gradient(0deg,rgba(8,9,10,.78) 0%,rgba(8,9,10,.18) 48%,transparent 72%);
}
/* grain kept on its own layer — blended into the scrim it swamps the photo */
.banner__scrim::after{
  content:""; position:absolute; inset:0;
  background:var(--grain); background-size:170px 170px;
  opacity:.07; mix-blend-mode:overlay;
}
.banner__body{ position:relative; z-index:2; padding-block:clamp(44px,6vw,76px); color:#F2EFE9; }
.banner__h2{
  max-width:17ch; margin-bottom:20px;
  font-size:clamp(1.9rem,4.4vw,3.5rem);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.banner__lead{
  max-width:44ch; margin-bottom:32px; color:rgba(242,239,233,.78);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

/* on narrow screens the copy spans the full width, so the left-to-right scrim
   built for the two-column desktop framing stops doing its job */
@media (max-width:767px){
  .banner__scrim{
    background:linear-gradient(0deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,.6) 46%,rgba(8,9,10,.18) 76%,transparent 100%);
  }
}

/* the banner is its own divider — no hairline needed on either side */
.section + .banner,
.banner + .section{ border-top:0; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; gap:20px; justify-content:space-between;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1rem,1.6vw,1.2rem); font-weight:400; letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; flex:0 0 auto; width:13px; height:13px;
  background:linear-gradient(var(--accent),var(--accent)) center/13px 1px no-repeat,
             linear-gradient(var(--accent),var(--accent)) center/1px 13px no-repeat;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa__body{ padding-bottom:24px; }
.qa__body p{ color:var(--fg-dim); max-width:68ch; font-size:.94rem; }

/* ---------- 9. CONTACT ---------- */
.book{ display:grid; gap:clamp(36px,4.5vw,72px); grid-template-columns:1fr; align-items:start; }
.book__lead{ color:var(--fg-dim); margin-top:22px; max-width:46ch; }
.book__facts{ margin-top:38px; border-top:1px solid var(--line); }
.book__facts li{ display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); }
.book__facts b{ font:500 .64rem/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.book__facts a:hover{ color:var(--brass); }

.form{ padding:clamp(24px,3vw,40px); border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); }
.form__row{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
.field{ display:block; margin-bottom:20px; border:0; padding:0; }
.field label,.field legend{ display:block; margin-bottom:8px; font:500 .74rem/1.4 var(--body); letter-spacing:.04em; }
.field__opt{ color:var(--fg-dim); font-weight:400; text-transform:none; letter-spacing:0; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s, background .2s;
  font-size:.92rem;
  /* the form sits on a dark panel, so the browser must draw its native parts —
     the select popup, the caret, scrollbars — dark to match */
  color-scheme:dark;
}
/* The option list is painted by the OS off the control's own background. An
   alpha background composites to white there and hides the near-white text,
   so give the options an opaque colour of their own. */
.field select option{ background-color:var(--ink-3); color:var(--fg); }

/* autofill would otherwise repaint the field near-white with its own text
   colour — the same clash, from the other direction */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);
  -webkit-box-shadow:0 0 0 100px var(--ink-3) inset;
  caret-color:var(--fg);
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(var(--accent-rgb),.34); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brass); background:rgba(255,255,255,.05); outline-offset:1px; }
.field__hint{ margin-top:7px; color:var(--fg-dim); font:400 .72rem var(--mono); }
.field__err{ margin-top:7px; color:#E5837A; font-size:.78rem; }
.field.has-error input,.field.has-error select{ border-color:#E5837A; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:block; padding:11px 20px; border:1px solid var(--line); border-radius:var(--r);
  font-size:.82rem; cursor:pointer; transition:.22s;
}
.chip input:hover + span{ border-color:rgba(var(--accent-rgb),.4); }
.chip input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:3px; }
.chip input:checked + span{ background:rgba(var(--accent-rgb),.14); border-color:var(--brass); color:var(--brass); }

.form__legal{ margin-top:16px; color:var(--fg-dim); font-size:.76rem; }
.form__done{ margin-top:20px; padding:16px 18px; border:1px solid var(--brass); border-radius:var(--r); background:rgba(var(--accent-rgb),.1); color:var(--brass-hi); font-size:.88rem; }

/* ---------- FOOTER ---------- */
.ft{ border-top:1px solid var(--line); background:var(--ink-2); padding-top:clamp(52px,6vw,84px); }
.ft__grid{ display:grid; gap:clamp(30px,4vw,54px); grid-template-columns:1fr; }
.ft__brand p{ margin-top:18px; color:var(--fg-dim); font-size:.88rem; max-width:32ch; }
.ft__social{ display:flex; gap:10px; margin-top:24px; }
.ft__social a{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding-inline:12px;
  border:1px solid var(--line); border-radius:var(--r); color:var(--fg-dim); transition:.25s;
}
.ft__social a:hover{ border-color:var(--brass); color:var(--brass); }
.ft__zalo{ font:500 .7rem var(--mono); letter-spacing:.06em; }
.ft__col h2{ font:500 .64rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:20px; }
.ft__col li + li{ margin-top:11px; }
/* Thu hẹp vào `li a`, KHÔNG phải mọi `a` trong cột.
   Từ khi footer là 4 vùng widget, mọi cột đều mang class .ft__col — kể cả cột
   thương hiệu và cột kêu gọi hành động. Selector cũ `.ft__col a` có specificity
   (0,1,1), cao hơn `.ft__tel` và `.btn` (0,1,0), nên nó nuốt màu của cả hotline
   lẫn nút bấm. Link điều hướng thì luôn nằm trong <li>, nút và hotline thì không. */
.ft__col li a{ color:var(--fg-dim); font-size:.88rem; transition:color .2s; }
.ft__col li a:hover{ color:var(--fg); }
/* Menu con ở footer LUÔN XỔ SẴN — không nút bấm, không xếp gấp. Cột footer đã
   là một danh sách để quét mắt, giấu bớt đi chỉ tổ thêm một cú bấm.
   Widget menu của WordPress không giới hạn depth, nên trước đây cấp con vẫn
   render ra nhưng KHÔNG có luật CSS nào — hiện phẳng y hệt mục cha, tức là cấu
   trúc biên tập viên dựng lên trở nên vô hình. Thụt lề + vạch dọc là thứ duy
   nhất cần để nó đọc được. */
.ft__col .sub-menu{ margin-top:11px; padding-left:14px; border-left:1px solid var(--line); }
.ft__col .sub-menu li + li{ margin-top:9px; }
.ft__col .sub-menu a{ font-size:.82rem; }
/* Ô lưới = một vùng widget. Ô mới là con trực tiếp của .ft__grid, KHÔNG phải
   widget — nhờ vậy thả hai widget vào cùng một cột thì chúng xếp chồng trong ô
   đó, thay vì thành ô lưới thứ năm rơi xuống hàng dưới. */
.ft__cell{ min-width:0; }
.ft__cell > .ft__col + .ft__col{ margin-top:32px; }
/* Bẫy bot: ẩn khỏi mắt người NHƯNG vẫn nằm trong DOM để bot điền vào.
   Không dùng display:none — một số bot bỏ qua ô ẩn kiểu đó. */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__done--ok{ display:block; padding:18px 20px; border:1px solid var(--brass); border-radius:var(--r); }
.form__done--ok b{ display:block; margin-bottom:4px; }
.form__done--err{ display:block; margin-bottom:18px; padding:12px 16px; border:1px solid #b3261e; border-radius:var(--r); color:#f2b8b5; }
.field--err input, .field--err select, .field--err textarea{ border-color:#b3261e; }

.ft__cta p{ margin-bottom:18px; font-family:var(--display); font-size:1.16rem; letter-spacing:-.02em; }
/* Widget "Thông tin liên hệ": cặp nhãn–giá trị, không phải danh sách link. */
.ft__facts > div + div{ margin-top:13px; }
.ft__facts dt{ font:500 .64rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:4px; }
.ft__facts dd{ font-size:.88rem; color:var(--fg); }
.ft__facts dd a{ color:var(--brass); transition:color .2s; }
.ft__facts dd a:hover{ color:var(--fg); }
.ft__tel{ display:block; margin-top:14px; text-align:center; font:500 .84rem var(--mono); color:var(--brass); }
.ft__base{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; margin-top:clamp(40px,5vw,68px); padding-block:24px; border-top:1px solid var(--line); }
.ft__base small{ color:var(--fg-dim); font:400 .7rem var(--mono); letter-spacing:.08em; }

/* ---------- 10. DOCK / TO-TOP ---------- */
.dock{
  position:fixed; z-index:90; left:0; right:0; bottom:0; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(12,13,14,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.dock.is-on{ transform:none; }
.dock__tel{ display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:0 0 auto; padding:15px 20px; border:1px solid var(--line); border-radius:var(--r); font:500 .78rem var(--body); }
.dock__cta{ flex:1; padding-inline:16px; font-size:.72rem; letter-spacing:.04em; text-align:center; }

/* one source of truth for the floating column, so the rail and the back-to-top
   button always line up on the same edge */
:root{ --float-edge:clamp(16px,3vw,32px); --float-size:46px; }

.totop{
  position:fixed; z-index:90; right:var(--float-edge); bottom:var(--float-edge);
  width:var(--float-size); height:var(--float-size); display:grid; place-items:center; cursor:pointer;
  background:rgba(12,13,14,.8); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:50%; color:var(--brass);
  opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s, border-color .25s;
}
.totop.is-on{ opacity:1; transform:none; }
.totop:hover{ border-color:var(--brass); }

/* ---------- QUICK CONTACT RAIL ---------- */
.quick{
  position:fixed; z-index:90; right:var(--float-edge);
  /* parked above the back-to-top slot, whether or not that button is showing —
     so the rail never jumps when it fades in */
  bottom:calc(var(--float-edge) + var(--float-size) + 12px);
  display:flex; flex-direction:column; gap:10px;
}
.quick__btn{
  position:relative; display:grid; place-items:center;
  width:var(--float-size); height:var(--float-size);
  background:rgba(12,13,14,.8); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:50%; color:var(--brass);
  transition:border-color .25s, background .25s, color .25s;
}
.quick__btn:hover{ border-color:var(--brass); background:var(--brass); color:var(--on-accent); }
/* label comes from aria-label, so there is one attribute to translate and the
   tooltip can never drift from the accessible name */
.quick__btn::after{
  content:attr(aria-label); position:absolute; right:calc(100% + 10px); top:50%;
  translate:0 -50%; white-space:nowrap; pointer-events:none;
  padding:7px 12px; border-radius:var(--r);
  background:rgba(12,13,14,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); color:#F2EFE9;
  font:500 .72rem/1 var(--body); letter-spacing:.04em;
  opacity:0; transform:translateX(6px); transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.quick__btn:hover::after,
.quick__btn:focus-visible::after{ opacity:1; transform:none; }

/* ---------- 11. LỚP BẮT BUỘC CỦA WORDPRESS ----------
   Không phải trang trí. WordPress core và trình soạn thảo cổ điển TỰ in những
   lớp này ra, và theme phải định nghĩa chúng — Theme Handbook liệt kê đây là
   yêu cầu tối thiểu.

   Trước khi có blog thì không lớp nào trong số này xuất hiện, nên thiếu mà site
   vẫn trông bình thường. Chúng chỉ lộ ra khi có nội dung do người dùng soạn:
   the_posts_pagination() in một <h2 class="screen-reader-text"> — không định
   nghĩa lớp đó thì dòng "Điều hướng trang" hiện to giữa trang như một tiêu đề
   thật. Và nút "Căn trái" trong trình soạn thảo sinh class="alignleft" mà không
   có luật nào ăn vào, tức biên tập viên bấm mà không thấy gì thay đổi.
   ------------------------------------------------------ */
.screen-reader-text{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; border:0; clip-path:inset(50%); word-wrap:normal !important;
}
/* Vẫn phải hiện lại khi nhận tiêu điểm bàn phím: một số liên kết bỏ qua nội
   dung dùng chính lớp này. */
.screen-reader-text:focus{
  position:fixed; top:10px; left:10px; z-index:200;
  width:auto; height:auto; margin:0; padding:12px 18px;
  clip-path:none; overflow:visible;
  background:var(--brass); color:var(--ink);
  font:500 .82rem var(--mono);
}

.alignnone{ margin:0; }
.aligncenter{ display:block; margin-inline:auto; }
.alignleft{ float:left; margin:.4em 1.6em 1.2em 0; }
.alignright{ float:right; margin:.4em 0 1.2em 1.6em; }

.wp-caption{ max-width:100%; }
.wp-caption img{ display:block; width:100%; height:auto; }
.wp-caption-text,.gallery-caption{
  margin-top:10px; color:var(--fg-dim);
  font:400 .78rem/1.5 var(--mono); letter-spacing:.03em;
}
/* Hai lớp này core gắn vào <article> và không cần giao diện riêng ở đây, nhưng
   phải tồn tại để bộ kiểm tra theme không báo thiếu. */
.sticky{ display:block; }
.bypostauthor{ display:block; }

/* ---------- 12. TIN TỨC — LƯU TRỮ ---------- */
/* Cột chữ hẹp hơn hẳn .shell. 760px cho ra khoảng 70–75 ký tự mỗi dòng, mức dễ
   đọc nhất cho văn bản dài. .shell (1240px) dùng cho bài viết thì mỗi dòng gần
   130 ký tự — mắt bị lạc dòng khi xuống hàng. */
.shell--read{ width:min(760px, 100% - 2*clamp(20px,5vw,60px)); }

.pbar--chips{ justify-content:flex-start; }
/* .pchip vốn dựng cho <button> (mặc định đã là inline-block nên padding dọc ăn
   ngay). Dải chuyên mục dùng <a> — inline thuần, padding dọc không đẩy được
   chiều cao — nên cần đổi display. Tách thành modifier để không đụng tới bộ lọc
   sản phẩm đang chạy tốt. */
.pchip--link{ display:inline-flex; align-items:center; }

.ngrid{ display:grid; gap:clamp(22px,2.6vw,36px); grid-template-columns:1fr; }

.ncard{ position:relative; display:flex; flex-direction:column; }
.ncard__shot{ overflow:hidden; border-radius:var(--r); background:var(--ink-2); }
.ncard__shot img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease);
}
.ncard:hover .ncard__shot img{ transform:scale(1.04); }
/* Bài chưa có ảnh đại diện vẫn phải chiếm đúng khối hình, nếu không các thẻ
   trong lưới lệch nhau và hàng dưới bị so le. Vân đá tái dùng --vein có sẵn nên
   không tốn thêm một byte tải về nào. */
.ncard__blank{
  display:block; aspect-ratio:16/10;
  background-image:var(--vein); background-size:cover; opacity:.22;
}
/* flex:1 + margin-top:auto ở .ncard__foot đẩy dòng "phút đọc" xuống đáy thẻ.
   Thiếu cặp này thì chân thẻ bám theo độ dài đoạn trích, nên ba thẻ cạnh nhau
   có ba mốc chân khác nhau — hàng lưới trông như xếp ẩu. */
.ncard__body{ display:flex; flex-direction:column; flex:1; padding-top:18px; }
.ncard__meta{
  display:flex; flex-wrap:wrap; gap:5px 12px; color:var(--fg-dim);
  font:400 .68rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.ncard__cat{ color:var(--accent); }
.ncard__t{
  margin-top:12px;
  font:200 clamp(1.16rem,1.7vw,1.42rem)/1.25 var(--display); letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.ncard:hover .ncard__t{ color:var(--brass); }
/* Vùng bấm phủ kín thẻ, trong khi tên đọc được của liên kết vẫn chỉ là tiêu đề.
   Cặp đôi bắt buộc: bỏ position:relative ở .ncard là lớp phủ này nhảy ra tính
   theo tổ tiên khác và phủ nhầm nửa trang. */
.ncard__link::after{ content:""; position:absolute; inset:0; }
.ncard__x{ margin-top:12px; color:var(--fg-dim); font-size:.9rem; }
.ncard__foot{
  margin-top:auto; padding-top:14px; color:var(--fg-dim);
  font:400 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
}

.nlead{
  position:relative; display:grid; align-items:center;
  gap:clamp(22px,3vw,46px); grid-template-columns:1fr;
  margin-bottom:clamp(34px,4.4vw,62px);
  padding-bottom:clamp(34px,4.4vw,62px);
  border-bottom:1px solid var(--line);
}
.nlead__shot{ overflow:hidden; border-radius:var(--r); background:var(--ink-2); }
.nlead__shot img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s var(--ease);
}
.nlead:hover .nlead__shot img{ transform:scale(1.03); }
.nlead__t{
  font:200 clamp(1.7rem,3.2vw,2.6rem)/1.1 var(--display); letter-spacing:-.03em;
  transition:color .25s var(--ease);
}
.nlead:hover .nlead__t{ color:var(--brass); }
.nlead__x{ margin-top:18px; color:var(--fg-dim); max-width:52ch; }
.nlead .ncard__meta{ margin-top:22px; }

.nempty{ padding:clamp(40px,6vw,84px) 0; text-align:center; color:var(--fg-dim); }
.nempty p + p{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }

.section--light .ncard__shot,
.section--light .nlead__shot{ background:var(--bone-2); }

/* ---------- PHÂN TRANG ---------- */
.pagination{ margin-top:clamp(38px,5vw,64px); }
.pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  /* 44px là ngưỡng vùng chạm tối thiểu WCAG khuyến nghị — phân trang là thứ
     người dùng điện thoại bấm nhiều nhất trong một trang danh sách. */
  min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--fg-dim); font:500 .82rem var(--mono); transition:.22s;
}
.page-numbers:hover{ border-color:rgba(var(--accent-rgb),.4); color:var(--fg); }
.page-numbers.current{ background:rgba(var(--accent-rgb),.14); border-color:var(--brass); color:var(--brass); }
.page-numbers.dots{ border-color:transparent; }

/* ---------- TIN TỨC — BÀI VIẾT ---------- */
.phero--post{ padding-bottom:clamp(22px,3vw,38px); }
.npost__h1{ max-width:24ch; }
.pmeta{
  display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:22px; color:var(--fg-dim);
  font:400 .7rem var(--mono); letter-spacing:.12em; text-transform:uppercase;
}

.npost__hero{ margin:0 0 clamp(30px,4vw,54px); }
/* Cùng lý do với `.phero + .section` ở mục 8: ảnh đại diện đã mở đầu bài rồi,
   phần thân không được cộng thêm nguyên một lượt --pad-y lên trên nữa. Trước khi
   có dòng này, khoảng trống giữa chú thích ảnh và đoạn đầu tiên là 186px. */
.npost__hero + .section{ padding-top:clamp(16px,2.4vw,34px); padding-bottom: clamp(16px, 2.4vw, 34px);}
.npost__hero img{ width:100%; height:auto; border-radius:var(--r); }
.npost__cap{ margin-top:12px; color:var(--fg-dim); font:400 .76rem/1.5 var(--mono); }
.single .section {
    padding-block: clamp(15px, 9vw, 15px);
}
/* Section ĐẦU TIÊN vẫn phải chừa chỗ cho header cố định.
   Luật ngay trên siết padding của mọi .section trên trang single xuống 15px.
   Với bài viết thì không sao — trang bài mở đầu bằng .phero, mà .phero đã tự
   cộng chiều cao header vào padding của nó. Nhưng TRANG CHI TIẾT SẢN PHẨM mở
   đầu thẳng bằng .section nên mất luôn khoảng chừa đó: đo được breadcrumb nằm
   ĐÈ LÊN header 65px, chữ chui xuống dưới thanh menu.
   Dùng đúng công thức của .phero — var(--hdr-h,78px) — để hai chỗ không lệch
   nhau nếu sau này ai đổi chiều cao header. */
.single .section:first-of-type{ padding-top:calc(var(--hdr-h,78px) + 15px); }

.single .prose h2 {max-width: 100%;margin-top: 1rem;}
.single .prose figure {margin: 10px 0;}

/* ---------- THÂN BÀI VIẾT ----------
   Đây là phần quan trọng nhất của cả khối này.

   Phần reset ở mục 2 cố tình xoá sạch margin của p/h1-h3 và list-style của
   ul/ol. Với mọi trang khác thì đúng: chúng được dựng từ các khối bố cục, nơi
   khoảng cách do chính khối quyết định. Nhưng the_content() nhả ra HTML tuỳ ý do
   biên tập viên gõ — và với reset đó, một bài viết hoàn chỉnh hiện thành MỘT
   khối chữ liền không xuống dòng, danh sách gạch đầu dòng mất hết dấu chấm, và
   mọi liên kết trong bài trông y hệt chữ thường.

   Nên .prose là nơi trả lại toàn bộ mặc định đó, nhưng chỉ trong phạm vi thân
   bài.
   ------------------------------------ */
.prose{ font-size:1.02rem; line-height:1.8; }

/* Chọn tử "con cú": mọi phần tử con TRỪ phần tử đầu tiên được đẩy xuống. Ưu
   điểm so với việc đặt margin-bottom cho từng thẻ: nó phủ được cả những thẻ
   không lường trước (biên tập viên dán bảng, nhúng iframe, chèn shortcode) mà
   không bao giờ để thừa khoảng trắng ở cuối khối. */
.prose > * + *{ margin-top:1.2em; }

/* :where() có độ đặc hiệu BẰNG KHÔNG. Nhờ vậy luật này gom margin về 0 mà vẫn
   thua luật "con cú" ở trên — nếu viết thẳng `.prose h4{margin:0}` thì nó đặc
   hiệu hơn (0,1,1) và sẽ xoá luôn khoảng cách vừa đặt. */
.prose :where(h1,h2,h3,h4,h5,h6){ margin:0; font-family:var(--display); }
.prose > h2{ margin-top:2.1em; }
.prose > h3{ margin-top:1.7em; }
.prose > :where(h1,h2,h3,h4,h5,h6):first-child{ margin-top:0; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:200; letter-spacing:-.02em; line-height:1.16; }
.prose h3{ font-size:clamp(1.16rem,1.8vw,1.4rem); font-weight:500; letter-spacing:-.01em; line-height:1.3; }
.prose h4{ font-size:1.02rem; font-weight:600; letter-spacing:0; }

.prose a{
  color:var(--accent); text-decoration:underline;
  text-underline-offset:.22em; text-decoration-thickness:1px;
}
.prose a:hover{ text-decoration-thickness:2px; }
.prose strong,.prose b{ color:var(--fg); font-weight:600; }

.prose ul,.prose ol{ padding-left:1.4em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.5em; }
/* "Con cú" chỉ với tay tới con TRỰC TIẾP của .prose, nên danh sách lồng bên
   trong <li> không nhận được khoảng cách nào. */
.prose li > ul,.prose li > ol{ margin-top:.5em; }
.prose li::marker{ color:var(--accent); }

.prose blockquote{
  padding:2px 0 2px clamp(18px,3vw,30px);
  border-left:2px solid var(--accent);
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.14rem,2vw,1.48rem); line-height:1.42;
}
.prose blockquote > * + *{ margin-top:.6em; }
.prose blockquote cite{
  display:block; margin-top:14px; color:var(--fg-dim); font-style:normal;
  font:400 .76rem var(--mono); letter-spacing:.08em;
}

.prose img{ max-width:100%; height:auto; border-radius:var(--r); }
.prose figure{ margin:0; }
.prose figcaption{ margin-top:10px; color:var(--fg-dim); font:400 .78rem/1.5 var(--mono); }
/* Ảnh căn trái/phải thả nổi ra ngoài luồng; thiếu dòng này thì phần tử ngay sau
   .prose bị chữ tràn đè lên. */
.prose::after{ content:""; display:table; clear:both; }

.prose table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.prose th,.prose td{ padding:12px 14px; border:1px solid var(--line); text-align:left; }
.prose th{
  color:var(--accent); font:500 .68rem var(--mono);
  letter-spacing:.12em; text-transform:uppercase;
}

.prose code{
  padding:2px 6px; border-radius:2px;
  background:rgba(var(--accent-rgb),.12); color:var(--brass-hi);
  font:400 .88em var(--mono);
}
.prose pre{
  padding:clamp(16px,2vw,24px); overflow-x:auto;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
}
.prose pre code{ padding:0; background:none; color:inherit; font-size:.85rem; }

.prose hr{
  height:0; border:0; border-top:1px solid var(--line);
  margin-block:clamp(30px,4vw,50px);
}
.prose dt{ font-weight:600; }
.prose dd{ margin-left:1.3em; color:var(--fg-dim); }

/* Bài chia nhiều trang bằng <!--nextpage--> */
.pagelinks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:2.2em; }
.pagelinks__l{
  margin-right:6px; color:var(--fg-dim);
  font:500 .64rem var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.pagelinks .post-page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--fg-dim); font:500 .8rem var(--mono); text-decoration:none;
}
.pagelinks .post-page-numbers.current{
  background:rgba(var(--accent-rgb),.14); border-color:var(--brass); color:var(--brass);
}

/* ---------- THẺ VÀ CHIA SẺ ---------- */
.ptags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(30px, 4vw, 30px);
    padding-top: clamp(24px, 3vw, 24px);
    border-top: 1px solid var(--line);
}
.ptag{
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  color:var(--fg-dim); font:500 .74rem var(--body); transition:.22s;
}
.ptag::before{ content:"#"; margin-right:3px; color:var(--accent); }
.ptag:hover{ border-color:var(--accent); color:var(--fg); }

.pshare{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:clamp(24px,3vw,34px); }
.pshare__l{
  margin-right:4px; color:var(--fg-dim);
  font:500 .64rem var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.pshare__a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--fg-dim); font:500 .76rem var(--body); transition:.22s;
}
.pshare__a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- ĐIỀU HƯỚNG BÀI TRƯỚC / SAU ---------- */
/* Công thức bề rộng phải chép lại từ .shell, KHÔNG mượn được.
   the_post_navigation() lọc tham số class qua sanitize_html_class(), hàm đó xoá
   khoảng trắng nên không truyền nổi hai lớp — chi tiết trong single.php. */
.postnav{
  width:min(1240px, 100% - 2*clamp(20px,5vw,30px));
  margin:clamp(30px,5vw,30px) auto;
}
.postnav .nav-links{
  display:grid; gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.postnav .nav-previous,.postnav .nav-next{
  background:var(--bg); padding:clamp(22px,3vw,15px) clamp(18px,3vw,30px);
}
.navlink__l{
  display:block; margin-bottom:10px; color:var(--accent);
  font:500 .64rem var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.navlink__t{
  display:block;
  font:200 clamp(1.04rem,1.8vw,1.32rem)/1.28 var(--display); letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.postnav a:hover .navlink__t{ color:var(--brass); }

/* ---------- KẾT QUẢ TÌM KIẾM ---------- */
/* search.php trộn thẻ sản phẩm và dòng kết quả trong cùng một .pgrid. Cho dòng
   kết quả chiếm trọn hàng thay vì nhét vào một ô lưới — một đoạn chữ trong ô
   rộng 1/3 màn hình đọc rất khó. */
.sresult{
  grid-column:1/-1;
  padding-block:clamp(18px,2.4vw,28px); border-bottom:1px solid var(--line);
}
.sresult__t{ font:200 clamp(1.2rem,2vw,1.6rem)/1.2 var(--display); letter-spacing:-.02em; }
.sresult__t a:hover{ color:var(--brass); }
.sresult__x{ margin-top:10px; color:var(--fg-dim); font-size:.9rem; }

.searchform{ display:flex; flex-wrap:wrap; gap:10px; max-width:540px; }
.searchform__in{
  flex:1 1 220px; padding:13px 16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r);
}
.searchform__in::placeholder{ color:var(--fg-dim); }
.searchform__in:focus{ border-color:var(--accent); }
.phero__search{ margin-top:26px; }

@media (min-width:600px){
  .ngrid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:700px){
  .postnav .nav-links{ grid-template-columns:1fr 1fr; }
  .postnav .nav-next{ text-align:right; }
}
@media (min-width:820px){
  .nlead{ grid-template-columns:1.05fr .95fr; }
}
@media (min-width:1024px){
  .ngrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:599px){
  /* Ảnh thả nổi trong cột chữ rộng chưa tới 340px chỉ còn vài chữ mỗi dòng bên
     cạnh — bỏ thả nổi, cho ảnh chiếm nguyên hàng. */
  .alignleft,.alignright{ float:none; margin-inline:0; }
  /* Bảng rộng phải cuộn TRONG khung của nó. Không có dòng này thì chính thân
     trang cuộn ngang — đúng lỗi đã sửa ở giai đoạn QA. */
  .prose table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:599px){
  /* a ragged pair of buttons reads as two unrelated options — stack them square */
  .hero__actions .btn{ flex:1 1 100%; }

  .zone {
      width: min(59%, 121px);
  }
}
@media (min-width:600px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .cards--light{ grid-template-columns:repeat(3,1fr); }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .shot--wide{ grid-column:span 2; }
  .shot--wide .shot__img{ aspect-ratio:21/9; }
  .form__row{ grid-template-columns:1fr 1fr; }
  .plans{ grid-template-columns:repeat(2,1fr); }

  /* side-by-side specs are only comparable if the rows line up, whatever
     length the descriptions run to in either language */
  @supports (grid-template-rows: subgrid){
    .plans{ grid-template-rows:auto auto auto; }
    .plan{ display:grid; grid-row:span 3; grid-template-rows:subgrid; }
  }
}
@media (min-width:900px){
  .secHead--split{ grid-template-columns:1.1fr .9fr; }
  /* Chỉ căn phải khi header THỰC SỰ thành hai cột. Dưới 900px nó xếp chồng, lúc
     đó căn phải sẽ đẩy liên kết ra xa tiêu đề nó thuộc về. */
  .secHead__note--action{ text-align:right; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .finish{ grid-template-columns:1.05fr .95fr; }
  .book{ grid-template-columns:.9fr 1.1fr; }
  .titem{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .who{ grid-template-columns:1.15fr .85fr; }
  .pdp{ grid-template-columns:1.05fr .95fr; }
  .showroom{ grid-template-columns:1.1fr .9fr; }
  .ft__grid{ grid-template-columns:1.4fr .8fr .8fr 1fr; }
}
@media (min-width:1024px){
  .cards{ grid-template-columns:repeat(4,1fr); }
  /* must be restated after .cards — same specificity, so source order decides,
     and 3 mission cards in a 4-column grid leave a dead cell */
  .cards--light{ grid-template-columns:repeat(3,1fr); }
  .pgrid{ grid-template-columns:repeat(3,1fr); }
  .hero__grid{ grid-template-columns:1.02fr .98fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .shot--tall{ grid-row:span 2; }
  .shot--tall .shot__img{ aspect-ratio:3/4; }
  .shot--wide{ grid-column:span 2; }
}

/* mobile nav drawer */
@media (max-width:1023px){
  .burger{ display:block; }
  .hdr__tel,.hdr__side .btn{ display:none; }
  .nav{
    position:fixed; inset:0; z-index:110; margin:0; padding:96px clamp(24px,7vw,48px) 40px;
    display:flex; flex-direction:column; gap:auto;
    background:var(--ink); border-left:1px solid var(--line);
    transform:translateX(100%); visibility:hidden;
    /* visibility flips instantly on open (so the drawer is focusable at once)
       and only after the slide-out finishes on close */
    transition:transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav.is-open{ transform:none; visibility:visible; transition:transform .4s var(--ease), visibility 0s; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line); }
  .nav__list a{ padding:20px 0; font-family:var(--display); font-size:1.6rem; font-weight:200; letter-spacing:-.02em; color:var(--fg); }
  .nav__list a::after{ display:none; }
  .nav__list a.is-active{ color:var(--brass); }
  .nav__close{ display:grid; place-items:center; position:absolute; top:22px; right:clamp(20px,6vw,44px); width:44px; height:44px; background:none; border:1px solid var(--line); border-radius:var(--r); color:var(--fg); cursor:pointer; }
  .nav__foot{ display:block; margin-top:auto; padding-top:32px; }
  .nav__tel{ display:block; margin-top:18px; text-align:center; font:500 1.02rem var(--mono); color:var(--brass); }
  .dock{ display:flex; }
  /* the dock already holds the two actions worth taking here — more floating
     buttons would only cover content. Delete these two lines to bring the rail
     back on phones. */
  .totop{ display:none; }
  .quick{ display:none; }
}
@media (min-width:480px) and (max-width:1023px){
  .nav{ left:auto; width:min(420px,100%); }
}

/* ---------- MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .hdr,.dock,.totop,.quick,.hobctl,.finish__picker{ display:none !important; }
  body{ background:#fff; color:#000; }
}