/* ==========================================================================
   TRÚC MỘC — Ván gỗ công nghiệp  |  Trang chủ
   Bảng màu lấy trực tiếp từ file logo: nền #192B16, chữ kem #ECE3D1
   ========================================================================== */
:root{
  --forest:#192b16;
  --forest-dk:#12200f;
  --forest-lt:#22381e;
  --cream:#ece3d1;
  --cream-2:#f5f1e6;
  --paper:#faf8f2;
  --sage:#8e9e7a;
  --ink:#171c15;
  --muted:#5a6355;
  --line:rgba(25,43,22,.13);
  --line-light:rgba(236,227,209,.18);

  --ff:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-display:'Montserrat','Be Vietnam Pro',system-ui,sans-serif;
  --container:1200px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff);font-size:16px;line-height:1.65;font-weight:400;
  color:var(--ink);background:var(--cream-2);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;line-height:1.2}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--forest);color:var(--cream)}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.ico{width:18px;height:18px;flex:0 0 auto}

/* Kho <symbol>: ẩn bằng kích thước 0 chứ KHÔNG dùng display:none — display:none
   làm mọi gradient khai báo bên trong không được tô. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- typography ---------- */
.h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(24px,3vw,36px);letter-spacing:.01em;color:var(--forest);
}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sage);
  margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:0 0 auto}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:26px;height:1px;background:currentColor;flex:0 0 auto}
.eyebrow--light{color:rgba(236,227,209,.8)}

.section{padding:84px 0;scroll-margin-top:var(--header-h)}
.section--paper{background:var(--paper)}

.sec-head{max-width:660px;margin-bottom:44px}
.sec-head--center{margin-inline:auto;text-align:center}
/* doan dan duoi tieu de section: rong hon .sec-head de chu khong bi hep */
.sec-lead{margin:16px auto 0;max-width:62ch;color:var(--muted);font-size:16.5px}
/* khoi van ban hep: cot canh giua nhung chu canh trai, de doc hon chu canh giua */
.prose{max-width:64ch;margin-inline:auto;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
/* Be Vietnam Pro chi tai 400/500 nen strong dung 500; 700 se bi browser gia lap
   thanh chu beo. Khoanh vung de khong dung tay .brand__text strong. */
.prose strong,.split__body strong,.sec-lead strong{font-weight:500;color:var(--forest)}
.page-head__body strong{font-weight:500;color:var(--cream)}
/* Tieu de 2 dong: dong duoi nhat hon de tach y phu khoi y chinh. */
.h2 span{color:var(--muted)}
.h2--light span{color:var(--sage)}
.hero__title span{color:var(--sage)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border:1px solid transparent;
  font-family:var(--ff-display);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn .ico{width:16px;height:16px}
.btn--cream{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.btn--cream:hover{background:#fff;border-color:#fff}
.btn--dark{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn--dark:hover{background:var(--forest-lt);border-color:var(--forest-lt)}
.btn--block{width:100%}

.link-more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
  padding-bottom:4px;border-bottom:1px solid var(--line);
  transition:color .25s,border-color .25s;
}
.link-more .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.link-more:hover{color:var(--sage);border-color:var(--sage)}
.link-more:hover .ico{transform:translateX(4px)}

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar{background:var(--forest-dk);color:rgba(236,227,209,.7);font-size:13px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.topbar__group{display:flex;align-items:center;gap:24px}
.topbar__item{display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.topbar__item:hover{color:var(--cream)}
.topbar__item--strong{color:var(--cream);font-weight:500}
.topbar__item .ico{width:15px;height:15px}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:50;background:var(--forest);color:var(--cream);
  border-bottom:1px solid var(--line-light);
}
.header__in{display:flex;align-items:center;gap:24px;min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand__mark{height:38px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{
  font-family:var(--ff-display);font-size:17px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.brand__text em{
  font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,227,209,.55);margin-top:3px;
}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:14px;font-weight:500;color:rgba(236,227,209,.82);
  padding-block:6px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.nav a:hover{color:var(--cream);border-color:var(--cream)}

.header__actions{display:flex;align-items:center;gap:12px}
.burger{display:none;padding:8px;color:var(--cream)}
.burger .ico{width:22px;height:22px}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.drawer{position:fixed;inset:0;z-index:100;background:rgba(18,32,15,.55)}
.drawer__panel{
  position:absolute;inset:0 0 0 auto;width:min(320px,84vw);
  background:var(--forest);color:var(--cream);
  padding:26px 26px 32px;display:flex;flex-direction:column;gap:24px;
}
.drawer__close{align-self:flex-end;padding:6px;color:var(--cream)}
.drawer__close .ico{width:24px;height:24px}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  padding:14px 0;font-family:var(--ff-display);font-size:15px;font-weight:500;
  letter-spacing:.06em;border-bottom:1px solid var(--line-light);
}

/* ==========================================================================
   1. Hero — chữ trái, ảnh phải
   ========================================================================== */
.hero{position:relative;background:var(--forest)}

/* Các slide nằm chung ô grid 1/1 nên khung cao bằng slide cao nhất — không
   nhảy layout khi chuyển. Slide đang vào có z-index cao hơn nên fade lên trên
   slide cũ, không bị tối ở giữa. */
.hero__slides{display:grid}
.hero__slide{
  grid-area:1/1;
  display:grid;grid-template-columns:1fr 1fr;min-height:520px;
  opacity:0;visibility:hidden;z-index:1;
  transition:opacity .55s var(--ease);
}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero__slide.is-prev{opacity:1;visibility:visible;z-index:1;transition:none}

.hero__text{background:var(--forest);color:var(--cream);display:flex;align-items:center;padding:72px 0}
.hero__text-in{
  width:100%;max-width:calc(var(--container) / 2);
  margin-left:auto;padding-inline:24px 56px;
}
/* slide 2 và 3 dùng <p> chứ không phải <h1> (một trang chỉ nên có một h1),
   nên cần margin:0 vì thẻ p có margin mặc định. */
/* line-height phai khai ngay o day chu khong dua vao quy tac h1,h2,h3: slide 1
   la <h1> con slide 2-3 la <p> (mot trang chi nen co mot h1), nen neu de trong
   thi <p> thua huong line-height 1.65 cua body -> lech 20.7px moi dong. */
.hero__title{
  margin:0;font-family:var(--ff-display);font-weight:600;line-height:1.2;
  font-size:clamp(30px,3.6vw,46px);letter-spacing:.005em;
}
.hero__lead{margin:20px 0 0;font-size:16.5px;color:rgba(236,227,209,.8);max-width:44ch}
/* hai doan lien tiep trong cung mot y thi ke sat hon so voi khoang cach
   giua tieu de va doan dau. */
.hero__lead+.hero__lead{margin-top:12px}
.hero__text .btn{margin-top:30px}
.hero__media{overflow:hidden;background:var(--cream-2)}
.hero__media img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   2. Thế mạnh sản phẩm
   ========================================================================== */
/* điều khiển slider */
.hero__ctrl{
  position:absolute;bottom:22px;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:18px;
  pointer-events:none;
}
.hero__arrow,.hero__dots{pointer-events:auto}
.hero__arrow{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line-light);background:rgba(18,32,15,.5);color:var(--cream);
  transition:background-color .25s,border-color .25s;
}
.hero__arrow:hover{background:var(--cream);border-color:var(--cream);color:var(--forest)}
.hero__arrow:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.hero__arrow--next .ico{transform:rotate(180deg)}

.hero__dots{display:flex;gap:9px}
.hero__dot{
  width:32px;height:4px;background:rgba(236,227,209,.35);
  transition:background-color .25s,width .25s var(--ease);
}
.hero__dot:hover{background:rgba(236,227,209,.6)}
.hero__dot.is-active{background:var(--cream);width:44px}
.hero__dot:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

/* ==========================================================================
   3. Về chúng tôi — ảnh trái, chữ phải
   ========================================================================== */
.about__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about__media{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--cream-2)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__body p{color:var(--muted);max-width:46ch}
.about__body .h2{margin-bottom:16px}
.about__body .btn{margin-top:12px}

/* ==========================================================================
   4. Sản phẩm — 3 mã
   ========================================================================== */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .25s var(--ease)}
.prod:hover{border-color:var(--forest)}
.prod__media{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2)}
.prod__media img{width:100%;height:100%;object-fit:cover}
.prod__body{flex:1;display:flex;flex-direction:column;padding:24px 26px 28px}
/* margin-top:auto ep cum nut xuong day the, de cac the cao khac nhau van thang hang.
   flex-wrap vi hai nhan chu hoa gian cach rong khong phai luc nao cung du cho mot dong. */
.prod__actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.prod__body h3{font-family:var(--ff-display);font-size:20px;font-weight:600;color:var(--forest)}
.prod__code{
  margin:6px 0 0;font-family:var(--ff-display);font-size:13px;font-weight:600;
  letter-spacing:.1em;color:var(--sage);
}
/* dt/dd nam trong <div> de moi cap nhan-gia-tri la mot dong grid rieng */
.prod__specs{margin:16px 0 20px;padding:16px 0 0;border-top:1px solid var(--line);font-size:13.5px}
.prod__specs>div{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:7px}
.prod__specs>div:last-child{margin-bottom:0}
.prod__specs dt{color:var(--muted)}
.prod__specs dd{margin:0;text-align:right;color:var(--forest)}

/* ==========================================================================
   5. Banner
   ========================================================================== */
/* Chiều cao do min-height quyết định (không để nội dung tự định) nên banner
   luôn giữ tỉ lệ khoảng 2.6:1 trên desktop — đủ cao để ảnh nền không bị cắt
   thành dải mỏng, không cao tới mức lấn phần còn lại của trang. */
.banner{
  position:relative;isolation:isolate;color:var(--cream);overflow:hidden;
  background:var(--forest);
  /* flex + align-items:center căn giữa dọc đáng tin cậy hơn grid
     align-content ở đây; nếu không, nội dung trôi lên trên và để lại
     khoảng tối trống ở đáy banner. */
  display:flex;align-items:center;
  min-height:clamp(380px,32vw,480px);
}
.banner__bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
}
/* Lay phan phai cua anh (toi hon) vao khung cho chu de doc hon. Chi co tac dung
   khi anh tran ngang: o 390px do duoc 3.31 -> 3.76:1; o 1440px anh vua khit be
   ngang nen khong doi (3.06:1). Khoanh rieng de khong doi khung banner trang chu. */
.banner--right .banner__bg{object-position:78% center}
/* Lop phu xanh cho banner dat tren anh sang. Do duoc: khong anh nao trong thu
   vien dat 4.5:1 cho chu nho neu de anh tran — ke ca vung toi nhat cua hero-2
   cung tut xuong 1.38:1 vi den tha. Do dam .72 chon bang phep do, khong uoc. */
.banner--scrim{isolation:isolate}
.banner--scrim::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(25,43,22,.72);
}
/* Không dùng lớp phủ: ảnh nền hiện nguyên bản. */
.banner__in{
  width:100%;display:flex;flex-direction:column;align-items:center;
  padding:48px 24px 60px;text-align:center;
}
.banner__title{
  font-family:var(--ff-display);font-weight:600;
  /* cùng cỡ với .hero__title */
  font-size:clamp(30px,3.6vw,46px);letter-spacing:.06em;text-transform:uppercase;
  max-width:30ch;
}
.banner__lead{margin:18px 0 0;max-width:52ch;font-size:16.5px;color:rgba(236,227,209,.82)}
.banner .btn{margin-top:30px}
.banner__act{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.banner__act .btn{margin-top:0}

/* ==========================================================================
   Footer — 4 cột
   ========================================================================== */
/* Footer giữ đúng #192b16 vì file logo-lockup.png có nền xanh nướng sẵn cùng mã
   màu — đổi nền footer sẽ lộ khung chữ nhật quanh logo. */
.footer{
  background:var(--forest);color:rgba(236,227,209,.72);
  padding-top:64px;scroll-margin-top:var(--header-h);
}
/* Bốn cột: logo | Liên hệ | Danh mục | Theo dõi.
   Cột logo không có tiêu đề h3 nên logo được kéo lớn để tự neo cột 1; cột
   "Theo dõi" chỉ một hàng icon nên đặt ngoài cùng phải, không làm lệch khối. */
.footer__in{
  display:grid;grid-template-columns:1.15fr 1fr .95fr .55fr;
  gap:36px 36px;padding-bottom:44px;align-items:start;
}
.footer__logo{width:100%;max-width:280px;height:auto}
/* h3 dùng cùng cỡ + tracking với .eyebrow của các section trên trang, và
   danh sách dùng 15px — nằm giữa body 16px và chú thích 14px. */
.footer__col h3{
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:18px;
}
.footer__contact li{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:10px;font-size:14px;line-height:1.5;
}
.footer__contact .ico{width:15px;height:15px;margin-top:3px;color:var(--sage)}
/* Tên pháp nhân đứng riêng một dòng trên địa chỉ, cùng một mục và cùng một
   icon: hai thứ trả lời chung một câu hỏi, tách ra thì đọc như hai địa điểm. */
.footer__company{display:block;font-weight:600;color:var(--cream)}
.footer__contact a:hover{color:var(--cream)}
.footer__links li{margin-bottom:10px;font-size:14px;line-height:1.5}
.footer__links a{transition:color .25s}
.footer__links a:hover{color:var(--cream)}
.footer__socials{display:flex;gap:10px}
.footer__socials a{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line-light);transition:background-color .25s,border-color .25s,color .25s;
}
.footer__socials a:hover{background:var(--cream);border-color:var(--cream);color:var(--forest)}
.footer__socials .ico{width:15px;height:15px}
.footer__bar{
  border-top:1px solid var(--line-light);padding-block:22px;
}
.footer__bar p{margin:0;font-size:12.5px;color:rgba(236,227,209,.5)}

/* ==========================================================================
   Dải liên hệ nổi + nút về đầu trang
   Màu theo bảng màu thương hiệu (xanh rừng / kem) chứ không theo màu riêng của
   từng dịch vụ — bốn nút cạnh nhau mà mỗi nút một màu sẽ ồn.
   ========================================================================== */
.fab{
  position:fixed;right:14px;bottom:14px;z-index:40;
  display:flex;flex-direction:column;gap:10px;
}
.fab__btn,
.fab__top{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.fab__btn{
  background:var(--forest);color:var(--cream);
  box-shadow:0 6px 18px rgba(23,28,21,.22);
}
.fab__btn:hover{background:var(--cream);color:var(--forest);transform:translateY(-2px)}
.fab__btn .ico{width:21px;height:21px}
/* Zalo mang logo của chính nó chứ không phải một hình đơn sắc như các nút kia.
   Chữ "Zalo" là phần khiến người ta nhận ra nó ngay, mà chữ ấy chỉ đọc được khi
   logo chiếm trọn nút — thu về 21px như icon thường thì chỉ còn một đốm xanh.
   Nên nút này bỏ nền và để logo tự lo cả hình tròn lẫn màu. */
.fab__btn--brand{background:none;box-shadow:0 6px 18px rgba(23,28,21,.22)}
.fab__btn--brand .ico{width:100%;height:100%}
.fab__btn--brand:hover{background:none;transform:translateY(-2px)}

/* nút về đầu trang: nhạt hơn để không tranh chú ý với nhóm liên hệ */
.fab__top{
  margin-top:6px;background:#fff;color:var(--forest);
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(23,28,21,.14);
}
.fab__top:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
/* #i-chev chỉ sang trái -> quay 90deg cho chỉ lên */
.fab__top .ico{width:19px;height:19px;transform:rotate(90deg)}

.fab__btn:focus-visible,
.fab__top:focus-visible{outline:2px solid var(--forest);outline-offset:3px}

@media (max-width:640px){
  .fab{right:10px;bottom:10px;gap:8px}
  .fab__btn,.fab__top{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .fab__btn:hover{transform:none}
}

/* ==========================================================================
   Reveal — hiệu ứng duy nhất của trang
   ========================================================================== */
/* Trang thai an chi ap dung khi .has-js co tren <html> — class do do mot script
   dong bo trong <head> them vao. Khong co JavaScript thi .reveal khong an gi,
   noi dung hien binh thuong thay vi bien mat. */
.has-js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.has-js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-js .reveal{opacity:1;transform:none;transition:none}
  .hero__slide{transition:none}
}

/* ==========================================================================
   Trang con — thành phần dùng cho gioi-thieu / san-pham / lien-he ...
   ========================================================================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.h2--light{color:var(--cream)}
.btn--outline-light{background:transparent;color:var(--cream);border-color:var(--line-light)}
.btn--outline-light:hover{border-color:var(--cream);background:rgba(236,227,209,.08)}

.lightbox{
  position:fixed;inset:0;z-index:110;   /* trên cả drawer (100) và nút nổi (40) */
  display:grid;place-items:center;padding:24px;
  background:rgba(18,32,15,.86);
  /* Trong này chỉ có một tấm ảnh và một nút đóng — không có gì để bôi đen, mà
     cho bôi đen thì hỏng: ::selection tô nền --forest, và trình duyệt tô lớp đó
     ĐÈ LÊN chính tấm ảnh, làm nó tối đen như bị nền phủ. Chỉ cần giữ chuột trên
     ảnh kéo ra ngoài, hoặc Ctrl+A, là dính — và vùng chọn không mất khi đóng
     modal, nên lần mở sau ảnh vẫn tối. Cho cả nhánh này không chọn được là
     xong; kéo ảnh ra ngoài để lưu vẫn chạy, vì đó là drag ảnh chứ không phải
     bôi đen. */
  -webkit-user-select:none;user-select:none;
}
/* Bắt buộc: rule trên đã khai display nên nó thắng [hidden] của trình duyệt —
   không có dòng này thì modal hiện thường trực. Cùng lý do với .swatch[hidden]. */
.lightbox[hidden]{display:none}
/* width chứ không phải max-width: để max-width thì khung co theo kích thước
   nội tại của tấm ảnh, nên mã nào chụp nhỏ sẽ mở ra nhỏ hơn hẳn mã bên cạnh —
   cùng tỉ lệ tấm nhưng không cùng cỡ. Ảnh trong catalog rộng từ 399px tới
   1600px, chênh nhau bốn lần. */
.lightbox__panel{position:relative;width:min(860px,92vw)}
.lightbox__img{
  display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;
  border:1px solid var(--line-light);background:var(--cream-2);
}
/* Ảnh mở lớn nằm theo khổ tấm — 2440 × 1220 là 2:1 ngang, tấm ván nằm xuống —
   chứ không theo hình dạng tấm ảnh chụp. Tỉ lệ nằm trong thuộc tính width và
   height nên khung đã đúng trước khi ảnh tải xong, không giật layout. Phủ kín
   thay vì lồng vừa: lồng vừa để lại hai dải nền, còn kéo cho vừa thì méo vân.
   Neo góc dưới-phải để giữ dấu Trúc Mộc, cùng lý do với ô trong lưới. */
.lightbox__img--panel{
  /* aspect-ratio phải có: bỏ nó đi thì thuộc tính width/height trên thẻ chỉ giữ
     khung lúc chưa tải xong, tải xong là trình duyệt đo lại chính tấm ảnh và
     khung lặng lẽ quay về hình dạng tấm ảnh. */
  aspect-ratio:var(--panel-w) / var(--panel-h);
  /* Chặn theo cả hai phía trong một dòng: hẹp hơn khung nhìn thì bề ngang dẫn,
     màn thấp thì chiều cao dẫn. Dùng max-height thay cho vế sau sẽ nén chiều
     cao mà giữ nguyên bề ngang, tức phá đúng cái tỉ lệ vừa đặt ra. */
  width:min(100%, calc(82vh * var(--panel-w) / var(--panel-h)));
  height:auto;max-width:100%;
  object-fit:cover;object-position:100% 100%;margin-inline:auto;
}
.lightbox__size{
  margin:10px 0 0;text-align:center;
  font-size:13px;letter-spacing:.06em;color:var(--cream);opacity:.75;
}
.lightbox__close{
  position:absolute;top:-16px;right:-16px;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--cream);color:var(--forest);
  box-shadow:0 6px 18px rgba(23,28,21,.3);
  transition:background-color .25s;
}
.lightbox__close:hover{background:#fff}
.lightbox__close .ico{width:20px;height:20px}
.lightbox__close:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

@media (max-width:520px){
  /* nút đóng phải nằm trong khung nhìn: padding của .lightbox chỉ còn 16px */
  .lightbox{padding:16px}
  .lightbox__close{top:-10px;right:-10px;width:40px;height:40px}
}

/* -- đầu trang: nền xanh rừng, breadcrumb + tiêu đề -- */
.page-head{background:var(--forest);color:var(--cream);padding:58px 0 62px}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;
  font-size:13px;color:rgba(236,227,209,.6);
}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--cream)}
.crumb span[aria-current]{color:var(--cream)}
.page-head__title{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(28px,3.2vw,40px);letter-spacing:.005em;
}
.page-head__lead{margin:16px 0 0;max-width:58ch;font-size:16.5px;color:rgba(236,227,209,.8)}
/* dau trang co doan gioi thieu: cao hon, tieu de 2 dong voi dong duoi nhat hon.
   Sage tren --forest dat 5.24:1 nen dung duoc cho chu lon. */
.page-head--intro{padding:66px 0 78px}
.page-head--intro .page-head__title{line-height:1.2}
.page-head__title span{color:var(--sage)}
.page-head__body{margin-top:24px;color:rgba(236,227,209,.8);font-size:16.5px}
.page-head__body p:last-child{margin-bottom:0}

/* -- khối chữ + ảnh, so le -- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--rev .split__media{order:-1}
.split__media{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--cream-2)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body p{color:var(--muted);max-width:48ch}
.split__body .h2{margin-bottom:16px}
/* dong phu duoi ten nhom san pham: la <p> chu khong phai heading, vi no mo ta
   chinh section chu khong dan vao mot khoi noi dung rieng. */
.lede{
  margin:0 0 18px;max-width:40ch;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);line-height:1.4;color:var(--forest);
}
p.pull{
  margin:22px 0 24px;padding-left:18px;border-left:2px solid var(--sage);
  max-width:none;font-family:var(--ff-display);font-weight:600;font-size:19px;
  line-height:1.35;letter-spacing:.01em;color:var(--forest);
}
p.pull--light{color:var(--cream)}

.bullets{display:flex;flex-direction:column;gap:13px;margin-top:24px}
.bullets li{display:flex;align-items:flex-start;gap:11px;font-size:15px}
.bullets .ico{width:17px;height:17px;margin-top:4px;color:var(--sage)}
.bullets+p{margin-top:24px}

/* -- thẻ dẫn sang trang con -- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.card{
  display:block;background:#fff;border:1px solid var(--line);padding:30px 30px 32px;
  transition:border-color .25s var(--ease);
}
.card:hover{border-color:var(--forest)}
.card__num{
  font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--sage);
}
.card h3{
  margin:10px 0 10px;font-family:var(--ff-display);font-size:20px;font-weight:600;
  color:var(--forest);
}
.card p{margin:0 0 20px;font-size:15px;color:var(--muted)}
.card p:last-child{margin-bottom:0}

/* -- Uu diem / Ung dung duoi moi nhom san pham -- */
.detail{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
  margin-top:52px;padding-top:40px;border-top:1px solid var(--line);
}
/* Nhan nho dung --muted chu khong phai --sage: sage tren nen sang chi do duoc
   2.54:1, duoi nguong 4.5:1 cho chu nho. --muted dat 5.9:1. */
.detail__h{
  margin:0 0 16px;font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.detail .bullets{margin-top:0}
/* dt/dd trong <div> de moi nhom ung dung la mot khoi rieng */
.uses>div{margin-bottom:18px}
.uses>div:last-child{margin-bottom:0}
.uses dt{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--forest)}
.uses dd{margin:5px 0 0;font-size:15px;color:var(--muted)}

/* -- hai panel Tam nhin / Su menh --
   Dung cung ngon ngu the voi .value va .card: nen trang, vien mong. Tieu de
   ben trong nho hon .h2 goc de tieu de cap section van la cap lon nhat.
   Khong dat align-items: de grid stretch mac dinh keo hai panel bang chieu
   cao hang; align-items:start se lam moi panel co bang noi dung cua no. */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pillar{background:#fff;border:1px solid var(--line);padding:40px 38px 44px}
.pillar .h2{margin-bottom:16px;font-size:clamp(21px,2vw,26px)}
.pillar p{color:var(--muted)}
.pillar p:last-child{margin-bottom:0}
.pillar strong{font-weight:500;color:var(--forest)}

/* -- dai ket cuoi trang --
   Nen xanh dac, doi xung voi .page-head o dau trang; cung tach hai section
   nen kem lien nhau. */
.closing{background:var(--forest);color:var(--cream);padding:78px 0;text-align:center}
.closing .h2{max-width:24ch;margin-inline:auto}
.closing__lead{margin:20px auto 0;max-width:58ch;font-size:16.5px;color:rgba(236,227,209,.78)}

/* -- hai ảnh ngang khổ rộng -- */
.strip{display:grid;grid-template-columns:1fr 1fr}
/* aspect-ratio theo đúng tỉ lệ ảnh nguồn (1168/784) thay vì chiều cao cố định:
   trước đây ô cao 340px trên bề rộng 720px cho tỉ lệ 2.12, trong khi ảnh là
   1.49 -> object-fit:cover cắt mất 30% chiều cao. Giờ ô co giãn theo cột nên
   không cắt tí nào. */
.strip img{width:100%;height:auto;aspect-ratio:1168/784;object-fit:cover;display:block}

/* -- lưới giá trị -- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.value{background:#fff;border:1px solid var(--line);padding:30px 28px 32px}
.value__ico{width:28px;height:28px;color:var(--sage);margin-bottom:18px}
.value h3{font-family:var(--ff-display);font-size:18px;font-weight:600;color:var(--forest)}
.value p{margin:10px 0 0;font-size:15px;color:var(--muted)}

/* -- trang liên hệ -- */
.contact{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
/* Hai tieu de o day la nhan cot chu khong phai tieu de section, nen nho hon
   .h2 mac dinh de khong lan vao tieu de trang. */
.contact .h2{font-size:clamp(20px,1.8vw,26px)}
.contact__hint{margin:14px 0 26px;color:var(--muted);font-size:15px}
.contact__info .h2{margin-bottom:16px}

.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
}
.field label span{color:var(--sage)}
.field input,.field textarea{
  padding:13px 15px;border:1px solid var(--line);background:#fff;
  /* 16px là bắt buộc: iOS Safari phóng to cả trang khi focus vào ô nhập có
     font-size dưới 16px. Cùng lý do với .dd__toggle. */
  font-size:16px;font-family:var(--ff);color:var(--ink);
  transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
.form .btn{align-self:flex-start;margin-top:4px}

.infos{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}
.infos li{display:flex;align-items:flex-start;gap:13px}
.infos .ico{width:18px;height:18px;margin-top:4px;color:var(--sage);flex:0 0 auto}
.infos div{display:flex;flex-direction:column;gap:3px}
.infos b{
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
}
.infos a,.infos span{font-size:16px;color:var(--ink)}
.infos a{transition:color .25s}
.infos a:hover{color:var(--sage)}

@media (max-width:1024px){
  .values{grid-template-columns:1fr 1fr}
  .split{gap:40px}
  .contact{gap:40px}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:32px}
  .split--rev .split__media{order:0}
  .pillars{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr;gap:32px;margin-top:36px;padding-top:32px}
  .contact{grid-template-columns:1fr;gap:44px}
  .page-head{padding:44px 0 48px}
  .page-head--intro{padding:44px 0 56px}
}

@media (max-width:640px){
  .values{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .pillar{padding:30px 26px 34px}
  .closing{padding:60px 0}
}

/* -- catalogue: dropdown tự dựng + lưới mã màu --
   Dropdown bằng HTML thay vì <select>: panel do mình vẽ nên neo đúng vào nút ở
   mọi môi trường, không phụ thuộc cách hệ điều hành vẽ popup.
   Từng lựa chọn là <button> thật (không phải role="option") — bàn phím và click
   hoạt động sẵn, ít chỗ sai hơn là tự dựng listbox. -- */
.filters-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:30px;
}
.dd{display:flex;align-items:center;gap:13px;min-width:0}
.dd__label{
  flex:0 0 auto;
  font-family:var(--ff-display);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sage);
}
.dd__wrap{position:relative}

.dd__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-width:220px;padding:12px 15px;
  border:1px solid var(--line);background:#fff;
  font-family:var(--ff);font-size:16px;color:var(--forest);
  text-align:left;transition:border-color .2s;
}
.dd__toggle:hover{border-color:var(--forest)}
.dd__toggle[aria-expanded="true"]{border-color:var(--forest)}
.dd__toggle:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
/* #i-chev vẽ mũi tên chỉ SANG TRÁI (nó dùng cho nút lùi của slider). Đóng thì
   quay -90deg cho chỉ xuống, mở thì +90deg cho chỉ lên. */
.dd__chev{
  width:15px;height:15px;flex:0 0 auto;color:var(--forest);
  transform:rotate(-90deg);transition:transform .2s var(--ease);
}
.dd__toggle[aria-expanded="true"] .dd__chev{transform:rotate(90deg)}

.dd__panel{
  /* z-index phải cao hơn .fab (40): dải liên hệ nổi cố định ở góc dưới-phải,
     nếu nó nằm trên panel thì bấm lựa chọn gần góc đó sẽ trúng nút nổi. */
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:45;
  background:#fff;border:1px solid var(--forest);
  box-shadow:0 16px 34px rgba(23,28,21,.14);
}
.dd__opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:44px;padding:11px 15px;
  background:none;border:0;text-align:left;
  font-family:var(--ff);font-size:15px;color:var(--ink);
  transition:background-color .15s,color .15s;
}
.dd__opt span{font-size:12.5px;color:var(--sage);font-variant-numeric:tabular-nums}
.dd__opt:hover{background:var(--cream-2)}
.dd__opt:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.dd__opt.is-active{color:var(--forest);font-weight:500;background:var(--cream-2)}
.dd__opt.is-active span{color:var(--forest);opacity:.6}

.filters__note{margin:32px 0 0;font-size:15px;color:var(--muted);text-align:center}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.swatch{background:#fff;border:1px solid var(--line);transition:border-color .25s var(--ease)}
.swatch:hover{border-color:var(--forest)}
.swatch[hidden]{display:none}
.swatch__media{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2)}
/* Khung ô là hình vuông, ảnh thì 65 dọc / 43 vuông / 49 ngang, nên phần lớn
   ảnh bị cắt. Neo vào góc dưới-phải để dấu Trúc Mộc — nằm cách mép 2% ở đúng
   góc đó — không phải là thứ bị cắt đi. Mẫu bề mặt vốn đều nhau nên giữ góc
   nào cũng đại diện được; cắt ở giữa thì mất dấu ở khoảng 114 trên 157 ảnh. */
.swatch__media img{width:100%;height:100%;object-fit:cover;object-position:100% 100%}
.swatch__body{padding:20px 20px 22px}
.swatch__body h3{font-family:var(--ff-display);font-size:17px;font-weight:600;color:var(--forest)}
.swatch__code{
  margin:5px 0 0;font-family:var(--ff-display);font-size:12.5px;font-weight:600;
  letter-spacing:.09em;color:var(--sage);
}
.swatch__spec{display:flex;flex-direction:column;gap:6px;margin:16px 0 18px}
.swatch__spec div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.swatch__spec dt{color:var(--muted)}
.swatch__spec dd{margin:0;color:var(--ink);text-align:right}

@media (max-width:1024px){
  .swatches{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .swatches{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:640px){
  .filters-bar{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:20px}
  .dd{flex-direction:column;align-items:stretch;gap:9px}
  /* Nhãn để nguyên cỡ chú thích: thứ cần đạt 44px là chính điều khiển, và nút
     bên dưới đã 48px. Bơm nhãn lên 44px chỉ làm khối cao vô ích. */
  .dd__wrap{width:100%}
  .dd__toggle{min-width:0;width:100%;min-height:48px}
  .dd__opt{min-height:48px}
}

@media (max-width:520px){
  .swatches{grid-template-columns:1fr}
}

/* ==========================================================================
   Tối ưu mobile
   Mọi thứ bấm được đều phải đạt tối thiểu 44 × 44 — đó là ngưỡng ngón tay.
   Trên desktop giữ nguyên vì con trỏ chuột chính xác hơn nhiều.
   ========================================================================== */
@media (max-width:900px){

  /* -- topbar: chỉ giữ hotline, canh giữa, đủ cao để bấm --
     Trước đây hiện cả email + hotline, nội dung rộng đúng 390px nên khi thay
     số thật vào là tràn. */
  .topbar__in{justify-content:center;min-height:44px}
  .topbar__group:last-child{gap:0}
  .topbar__group:last-child .topbar__item:not(.topbar__item--strong){display:none}
  .topbar__item{min-height:44px;padding-inline:8px}

  /* -- burger 38 -> 44 -- */
  .burger{padding:11px}

  /* -- dot slider: 32×4 gần như không bấm được. Trên mobile đổi sang dạng tròn
        với vùng bấm 44×44, thanh nhìn thấy nằm trong ::before -- */
  /* nền tối cho dãy dot: chúng nằm trên ảnh sáng nên cần nền để thấy được.
     Gộp ở đây thay vì để ở khối Responsive phía dưới — quy tắc đó cùng độ
     ưu tiên nhưng đứng sau, sẽ ghi đè padding và làm dãy dot cao 64px. */
  .hero__dots{gap:2px;padding:0 6px;background:rgba(18,32,15,.55)}
  .hero__dot{
    width:44px;height:44px;background:none;
    display:grid;place-items:center;transition:none;
  }
  .hero__dot::before{
    content:"";width:9px;height:9px;border-radius:50%;
    background:rgba(236,227,209,.45);transition:background-color .25s;
  }
  /* .hero__dot.is-active ở base có (0,2,0), thắng .hero__dot{background:none}
     (0,1,0) của khối này -> dot đang chọn hiện ra là khối kem 44x44.
     Phải tắt background ở đúng mức độ ưu tiên đó. */
  .hero__dot.is-active{width:44px;background:none}
  .hero__dot.is-active::before{background:var(--cream)}

  /* -- mũi tên 42 -> 44 -- */
  .hero__arrow{width:44px;height:44px}

  /* -- "Tìm hiểu thêm" trong thẻ sản phẩm; base đã có padding-bottom:4px
     nên cộng thêm ở đây cho đủ 44 -- */
  .link-more{padding-block:13px 12px}

  /* -- logo trong header: 38px cao, thêm đệm cho đủ tầm ngón tay -- */
  .brand{padding-block:3px}

  /* -- link footer: biến thành khối có đệm dọc; bỏ margin của li để khoảng
        cách không bị nhân đôi -- */
  .footer__links li,
  .footer__contact li{margin-bottom:0}
  .footer__links a,
  .footer__contact a{display:block;padding-block:12px;min-height:44px}
  .footer__contact li{align-items:center;min-height:44px}
  .footer__contact span{padding-block:12px}

  /* -- breadcrumb và link liên hệ là chữ trơn, cao 21-26px; cho display
     inline-flex + min-height để nới vùng bấm mà chữ vẫn nằm giữa -- */
  .crumb a,
  .infos a{display:inline-flex;align-items:center;min-height:44px}
  .crumb{gap:4px 8px}

  /* -- input/textarea đủ cao để bấm; nút gửi trải rộng -- */
  .field input{min-height:48px}
  .form .btn{align-self:stretch;min-height:48px}
  .card,.value{padding:26px 24px 28px}

  /* -- icon xã hội 34 -> 44 -- */
  .footer__socials{gap:12px}
  .footer__socials a{width:44px;height:44px}
}

/* ==========================================================================
   Rút chiều cao trang trên máy nhỏ
   Ảnh sản phẩm vuông làm mỗi thẻ cao 342px; đổi sang 4:3 rút ~86px mỗi thẻ.
   ========================================================================== */
@media (max-width:640px){
  .prod__media{aspect-ratio:4/3}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .nav{gap:20px}
  .nav a{font-size:13px}
  /* Năm cột quá chật dưới 1024px: cột brand xuống riêng một hàng, bốn cột còn
     lại chia đều. */
  .footer__in{grid-template-columns:1fr 1fr;gap:38px 32px}
  .footer__logo{max-width:230px}
  .about__in{gap:40px}
}

@media (max-width:900px){
  .topbar__group:first-child{display:none}
  .nav{display:none}
  .burger{display:inline-flex}
  .hero__slide{grid-template-columns:1fr;min-height:0}
  .hero__text{padding:60px 0}
  /* điều khiển nằm trên ảnh sáng -> thêm nền tối cho dễ đọc */
  .hero__ctrl{bottom:16px}
  .hero__text-in{max-width:var(--container);margin-inline:auto;padding-inline:24px}
  .hero__media{aspect-ratio:16/10}
  .about__in{grid-template-columns:1fr;gap:32px}
  .products{grid-template-columns:1fr 1fr}
  .section{padding:64px 0}
  .banner{min-height:0}
  .banner__in{padding:76px 24px 88px}
}

@media (max-width:640px){
  .pager{gap:6px;margin-top:36px}
  .pager__num,
  .pager__step{min-width:40px;font-size:13px}
  .topbar__group{gap:16px;font-size:12.5px}
  .products{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr;gap:32px}
  /* footer về 1 cột -> canh giữa logo. margin-inline:auto đủ vì .footer__logo
     đã có max-width, nên nó là khối hẹp hơn cột. */
  .footer__logo{margin-inline:auto}
  .banner__in{padding:64px 24px 80px}
}

/* ==========================================================================
   BỔ SUNG CHO BẢN WORDPRESS
   Ba việc bản tĩnh không có: nút chuyển ngôn ngữ, trạng thái của form Liên hệ,
   và chỗ cho thanh quản trị của WordPress. Không sửa rule nào phía trên.
   ========================================================================== */

/* ---------- chuyển ngôn ngữ ----------
   Cờ thay cho chữ VI/EN. Tên ngôn ngữ vẫn nằm trong link dưới dạng .sr-only —
   một lá cờ nói cho người nhìn thấy biết link dẫn tới đâu, nhưng nó không phải
   là nhãn, nên trình đọc màn hình cần tên thật. */
.langs{display:inline-flex;align-items:center;gap:6px}
.langs__item{
  display:inline-flex;align-items:center;padding:3px;
  border:1px solid transparent;border-radius:3px;
  /* ngôn ngữ không hoạt động mờ đi, thay vì đổi màu chữ như trước */
  opacity:.5;transition:opacity .25s,border-color .25s;
}
.langs__item:hover{opacity:1}
.langs__item.is-on{opacity:1;border-color:var(--line-light)}
.langs__item:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.langs__flag{
  width:22px;height:15.4px;display:block;border-radius:2px;
  /* viền trong: cờ Mỹ có nền trắng, không có viền thì mất cạnh trên nền tối */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
/* Ngôn ngữ chưa có cờ trong parts/icons.svg thì hiện mã, không để nút trống. */
.langs__code{
  display:block;min-width:22px;text-align:center;
  font-family:var(--ff-display);font-size:11.5px;font-weight:600;letter-spacing:.1em;
}

/* Trong drawer: một dòng riêng, vùng chạm 44px. */
.drawer__langs{margin:18px 0 14px;gap:10px}
.drawer__langs .langs__item{
  min-width:44px;min-height:44px;padding:12px;justify-content:center;
  border-color:var(--line-light);
}
.drawer__langs .langs__flag{width:26px;height:18.2px}

/* ---------- trạng thái form ---------- */
.form__note{
  display:flex;align-items:flex-start;gap:11px;
  margin:0 0 22px;padding:14px 16px;font-size:15px;line-height:1.55;
  border-left:3px solid var(--sage);background:var(--paper);color:var(--ink);
}
.form__note .ico{width:19px;height:19px;margin-top:3px;color:var(--sage);flex:0 0 auto}
.form__note--err{border-left-color:#a4331f;background:#fdf3f1;color:#7a2617}

.field__err{margin:0;font-size:13.5px;color:#a4331f}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#a4331f}

/* Mã bề mặt chưa có ảnh: ô trung tính, giữ đúng ô lưới thay vì để sập layout
   hoặc hiện ảnh lỗi. Tên và mã ở dưới vẫn nhận diện được nó. */
.swatch__media--empty{background:var(--cream);border:1px dashed var(--line)}

/* ==========================================================================
   Phân trang bảng màu
   ========================================================================== */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:46px}
.pager__pages{display:flex;align-items:center;gap:6px}
.pager__num,
.pager__step{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--ff-display);font-size:14px;font-weight:600;
  transition:background-color .25s,border-color .25s,color .25s;
}
.pager__num:hover,
.pager__step:not([disabled]):hover{border-color:var(--forest)}
.pager__num.is-on{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.pager__step .ico{width:18px;height:18px}
/* #i-chev chỉ sang trái, nên nút "sau" quay ngược lại — cùng cách .fab__top làm */
.pager__step--next .ico{transform:rotate(180deg)}
.pager__step[disabled]{opacity:.32;cursor:default}
.pager__gap{
  min-width:22px;text-align:center;color:var(--muted);
  font-family:var(--ff-display);font-size:14px;font-weight:600;
}
.pager__num:focus-visible,
.pager__step:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* Đổi trang thì cuộn về đầu khối lọc, không để header dính che mất dòng đầu */
.filters-bar{scroll-margin-top:calc(var(--header-h) + 24px)}
/* Đổi trang ở "các mã khác trong nhóm" cuộn về đầu lưới; cùng khoảng hở với
   thanh lọc để header dính không che mất hàng đầu. */
#sibGrid{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- trang chi tiết một mã bề mặt ---------- */
/* Trang chi tiết không có dải tối mở đầu, nên bớt khoảng trống phía trên. */
.section--top{padding-top:42px}

.sheet{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.sheet__title{
  margin:0;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(28px,3.2vw,40px);letter-spacing:.005em;color:var(--forest);
}
.sheet__media{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:var(--cream-2)}
.sheet__media img{width:100%;height:100%;object-fit:cover;object-position:100% 100%}
/* Dòng dưới ảnh: ghi chú lệch màu bên trái, link mở ảnh gốc bên phải. Ghi chú
   này không phải câu khách — màu trên màn hình lệch thật, và nói trước thì đỡ
   một cuộc gọi khiếu nại. */
/* Hàng thao tác dưới ảnh: xem lớn và tải về, canh trái cạnh nhau. */
.sheet__under{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:16px}
.sheet__under .link-more{flex:0 0 auto;white-space:nowrap}
.datasheet{margin:24px 0 0;border-top:1px solid var(--line)}
.datasheet>div{
  display:grid;grid-template-columns:minmax(120px,36%) 1fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.datasheet dt{color:var(--muted);font-size:14.5px}
.datasheet dd{margin:0;color:var(--forest);font-weight:500}
.datasheet dd a{border-bottom:1px solid var(--line)}
.datasheet dd a:hover{color:var(--sage);border-color:var(--sage)}
.sheet__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* Mã QR nằm dưới cụm nút, tách bằng một đường kẻ như .datasheet phía trên để
   ba khối trong cột phải đọc thành ba nhịp chứ không dính vào nhau. */
.sheet__qr{
  display:flex;align-items:center;gap:18px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
}
.sheet__qr svg{flex:0 0 auto;width:104px;height:104px;border:1px solid var(--line)}
.sheet__qr-text{font-size:13.5px;color:var(--muted)}
.sheet__qr-text p{margin:0 0 8px}

/* Hai cột hết chỗ trước 900px: khổ ván tự bẻ dòng giữa chừng và cột phải tràn
   ra ngoài khung nhìn, kéo theo cả thanh cuộn ngang. Những quy tắc dưới đây
   từng nằm trong các khối media của stylesheet gốc phía trên — nhưng .sheet
   được khai báo sau chúng, cùng độ đặc hiệu, nên rule nền ghi đè và cả khối
   không bao giờ chạy. Một override phải đứng sau thứ nó override. */
@media (max-width:900px){
  .sheet{grid-template-columns:1fr;gap:34px}
  /* Xếp dọc thì đọc là mã, thông số, rồi hai nút; ảnh xuống dưới cùng. Ai mở
     đúng trang của một mã đã nhìn thấy ảnh ở lưới Catalogue rồi — thứ họ tới
     đây để lấy là thông số và cách nhận mẫu. Đổi thứ tự ngay trên .sheet__figure
     chứ không phải trên từng khối con, để ảnh và cặp "Xem ảnh lớn / Tải ảnh"
     đi liền nhau y như ở hai cột. */
  .sheet__body{order:1}
  .sheet__figure{order:2}
  /* Ảnh mã màu không cần cao bằng cả khung màn hình khi xếp dọc */
  .sheet__media{aspect-ratio:4/3}
}

@media (max-width:520px){
  .sheet__under{gap:10px 18px}
  .sheet__act .btn{flex:1 1 100%}
  /* Ảnh QR 104px cộng chữ không còn vừa một hàng ở khổ này. */
  .sheet__qr{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- reCAPTCHA ---------- */
/* Ô kiểm tra v2 chỉ xuất hiện khi một lượt gửi bị chấm điểm thấp. Nhãn của nó
   không dùng <label> được: widget là iframe của Google, không có input nào để
   thuộc tính for trỏ tới. Nên nó là một <span> mang đúng dáng của .field label. */
.field__label{
  font-family:var(--ff-display);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
}
.field__label span{color:var(--sage)}
/* Google trả về khung rộng 302px cố định, tràn ra ngoài trên máy hẹp. */
.field--captcha .g-recaptcha{max-width:100%;overflow:hidden}

/* Dòng ghi công bắt buộc theo điều khoản của Google, dùng thay cho badge nổi
   ở góc phải vì badge đè lên nút FAB. */
.form__legal{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.form__legal a{color:inherit;text-decoration:underline}

/* ---------- thanh quản trị WordPress ----------
   #wpadminbar là position:fixed, còn .header là sticky top:0 — không đẩy nhau,
   nên header trượt lên nằm dưới thanh đó. Chỉ áp dụng khi WordPress thực sự in
   thanh quản trị (body.admin-bar), nên khách xem trang không bị ảnh hưởng. */
.admin-bar .header{top:32px}

@media screen and (max-width:782px){
  /* Ở mobile thanh quản trị cao 46px và KHÔNG fixed, nên header không cần bù. */
  .admin-bar .header{top:0}
}