@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;
src:url(fonts/pd-500i-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;
src:url(fonts/pd-500i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;
src:url(fonts/pd-500i-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;
src:url(fonts/pd-500-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;
src:url(fonts/pd-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;
src:url(fonts/pd-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
src:url(fonts/bvp-300-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
src:url(fonts/bvp-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
src:url(fonts/bvp-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/bvp-400-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/bvp-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
src:url(fonts/bvp-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
src:url(fonts/bvp-600-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
src:url(fonts/bvp-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
src:url(fonts/bvp-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
src:url(fonts/bvp-700-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
src:url(fonts/bvp-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
src:url(fonts/bvp-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:300;font-display:swap;
src:url(fonts/bvp-300i-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:300;font-display:swap;
src:url(fonts/bvp-300i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:300;font-display:swap;
src:url(fonts/bvp-300i-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:400;font-display:swap;
src:url(fonts/bvp-400i-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:400;font-display:swap;
src:url(fonts/bvp-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:400;font-display:swap;
src:url(fonts/bvp-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   JAVINA — landing page
   Bảng màu lấy từ catalogue 2026: xanh rêu, giấy kem, vàng đồng,
   cam đất (mặt trời trong logo) và hồng sen.
   ============================================================ */
:root{
  --pine:#16301F;
  --pine-deep:#0E2118;
  --pine-soft:#22452E;
  --paper:#F6F1E4;
  --paper-warm:#EFE7D5;
  --white:#FFFDF8;
  /* Hai màu dưới đây đã được làm đậm để đạt chuẩn tương phản WCAG AA (4,5:1)
     trên cả ba nền sáng: giấy kem, kem đậm và trắng. */
  --gold:#7E6224;
  --gold-light:#C9A961;
  --sun:#C24A26;
  --sun-hover:#A63C1C;
  --rose:#A8425A;
  --ink:#16301F;
  --ink-soft:#4A5C4C;
  --ink-faint:#586657;
  --line:#DCD3BC;

  /* Be Vietnam Pro: bộ chữ thiết kế riêng cho tiếng Việt, dựng đúng dấu ở mọi
     tổ hợp (ươ, ưở, ữ, ệ, ỗ). Nhúng sẵn trong fonts/, không gọi ra ngoài. */
  /* Chỉ dùng cho dòng mở đầu: Playfair Display có bộ dấu tiếng Việt riêng,
     dựng đúng ươ, ữ, ấ, khác hẳn font serif hệ thống lúc đầu. */
  --display:"Playfair Display",Georgia,serif;
  --serif:"Be Vietnam Pro",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Be Vietnam Pro",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Be Vietnam Pro",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(20px,5vw,40px);
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto là bắt buộc: mọi thẻ <img> đều khai báo width/height trong HTML
   để trình duyệt chừa sẵn chỗ. Thiếu dòng này, thuộc tính height đó đè lên
   aspect-ratio và ảnh bị kéo cao đúng bằng số pixel gốc. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:66ch}

/* Không còn tương phản chân/không chân giữa tiêu đề và thân bài,
   nên phân cấp chuyển sang dùng độ đậm: tiêu đề lớn nhẹ, tiêu đề nhỏ đậm. */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;text-wrap:balance;letter-spacing:-.015em}
h1,h2{font-weight:300}
h2{font-size:clamp(28px,4.4vw,44px);line-height:1.14;margin:0 0 16px}
h3{font-size:clamp(19px,2.2vw,23px);line-height:1.3;margin:0 0 8px;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 16px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px
}
.on-dark .eyebrow{color:var(--gold-light)}

section{padding:clamp(56px,8vw,104px) 0}
.dark{background:var(--pine);color:var(--paper-warm)}
.dark h2,.dark h3{color:var(--white)}
.dark p{color:#C3D2C2}
.deep{background:var(--pine-deep);color:var(--paper-warm)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--sun);color:#fff}
.btn-primary:hover{background:var(--sun-hover)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(233,222,196,.42)}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:11px 22px;font-size:14.5px}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(22,48,31,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(201,169,97,.26);
}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-txt{
  font-family:var(--serif);font-weight:300;font-size:22px;letter-spacing:.16em;
  color:var(--white);line-height:1.05
}
.brand small{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.2em;color:var(--gold-light);margin-top:2px;white-space:nowrap}
/* Con dấu tròn nền kem, đúng cách logo được đặt trên nền xanh ở catalogue */
.brand-mark{
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);padding:3px;
  box-shadow:0 0 0 1px rgba(201,169,97,.35)
}
@media(max-width:420px){.brand-txt{font-size:19px}.brand-mark{width:40px;height:40px}}
nav{display:flex;gap:26px}
nav a{
  font-size:14.5px;color:#BDCCBC;text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;transition:color .16s,border-color .16s
}
nav a:hover{color:var(--gold-light);border-color:var(--gold-light)}
.hdr .btn{padding:10px 22px;font-size:14.5px}
.hdr-right{display:flex;align-items:center;gap:10px}

/* Nút ba gạch, chỉ hiện trên điện thoại */
.menu-btn{
  display:none;width:44px;height:44px;padding:0;cursor:pointer;
  background:transparent;border:1px solid rgba(233,222,196,.34);border-radius:100px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px
}
.menu-btn span{display:block;width:17px;height:1.5px;background:var(--gold-light);transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:900px){
  .menu-btn{display:flex}
  .hdr .btn{padding:10px 18px}
  nav{
    position:absolute;left:0;right:0;top:64px;
    flex-direction:column;gap:0;
    background:var(--pine-deep);border-bottom:1px solid rgba(201,169,97,.26);
    padding:6px var(--pad) 14px;
  }
  nav:not(.open){display:none}
  nav a{padding:14px 0;border-bottom:1px solid rgba(201,169,97,.14);font-size:16px}
  nav a:last-child{border-bottom:0}
}
/* Dưới 560px thanh trên cùng chỉ giữ logo và nút ba gạch.
   Nút gọi đã nằm sẵn ở thanh cố định dưới màn hình, để hai chỗ là thừa và chật. */
@media(max-width:560px){
  .hdr-right .btn{display:none}
  .brand-txt{font-size:19px;letter-spacing:.12em}
  .brand small{letter-spacing:.14em;font-size:8px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;padding:96px 0 88px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,26,17,.93) 0%,rgba(14,33,24,.86) 42%,rgba(14,33,24,.42) 100%)
}
.hero-in{position:relative;z-index:1;max-width:760px}
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(36px,6.6vw,70px);line-height:1.1;letter-spacing:-.012em;
  color:var(--white);margin:0 0 24px
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-light)}
.hero .sub{font-size:clamp(17px,2vw,20px);color:#CBD8CA;max-width:56ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-note{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#93A894}

/* ---------- proof bar ---------- */
.proof{background:var(--pine-deep);border-top:1px solid rgba(201,169,97,.24);padding:0}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-grid div{padding:30px 22px;border-right:1px solid rgba(201,169,97,.18)}
.proof-grid div:last-child{border-right:0}
.proof b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(24px,3vw,34px);color:var(--gold-light);line-height:1.1;margin-bottom:6px}
/* Con số chạy: tabular-nums giữ bề ngang cố định để chữ bên cạnh không nhảy */
.proof .num{font-style:normal;font-variant-numeric:tabular-nums}
.proof .fade-word{opacity:0;transform:translateY(6px);transition:opacity .6s ease .35s,transform .6s ease .35s}
/* .counted được gắn lên chính .proof-grid (id="proof"), không phải khối .proof bọc ngoài */
#proof.counted .fade-word{opacity:1;transform:none}
.proof span{font-size:14px;color:#9FB3A0;line-height:1.45;display:block}
@media(max-width:760px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-grid div{border-bottom:1px solid rgba(201,169,97,.18)}
  .proof-grid div:nth-child(2n){border-right:0}
}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.split.rev>*:first-child{order:2}
.split-big{grid-template-columns:1.35fr 1fr}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev>*:first-child{order:0}
}
.figure{position:relative}
/* Ảnh trong khối hai cột giữ đúng tỉ lệ gốc, không ép vào khung rồi cắt.
   Lưới sản phẩm và lưới năm bước vẫn cắt theo khung vì cần đều nhau. */
.figure img{width:100%;height:auto;aspect-ratio:auto}
.figure figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:12px
}
.dark .figure figcaption{color:#8DA28E}

/* ---------- scent grid ---------- */
.scents{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:44px}
/* Dòng chăm sóc chỉ có hai sản phẩm nên để hai cột, ảnh ngang hơn */
.scents.c2{grid-template-columns:repeat(2,1fr)}
.scents.c2 .ph{aspect-ratio:4/5}
.scents.c2 .ph img{object-position:center bottom}
@media(max-width:700px){.scents.c2{grid-template-columns:1fr}}
@media(max-width:940px){.scents{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scents{grid-template-columns:1fr}}
.scent{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.scent .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper-warm)}
.scent .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scent:hover .ph img{transform:scale(1.035)}
.scent .txt{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.scent .no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sun);margin-bottom:9px}
.scent h3{margin-bottom:3px}
.scent .en{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:13px}
.scent .claim{font-weight:600;font-size:15px;margin-bottom:8px}
.scent .desc{font-size:15px;color:var(--ink-soft);margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.tag{font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);padding:4px 10px;border-radius:100px}
.scent .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}
.scent .foot .btn{width:100%;justify-content:center}
.price{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.price b{display:block;font-family:var(--sans);font-size:16px;letter-spacing:0;color:var(--ink);text-transform:none;font-weight:650}

/* ---------- scent finder ---------- */
.finder{border:1px solid rgba(201,169,97,.34);padding:clamp(26px,4vw,44px);margin-top:40px;background:rgba(255,255,255,.03)}
.q{margin-bottom:26px}
.q p{font-family:var(--serif);font-size:20px;color:var(--white);margin:0 0 14px}
.q .opts{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:transparent;color:#C3D2C2;border:1px solid rgba(233,222,196,.34);
  padding:12px 20px;min-height:44px;border-radius:100px;cursor:pointer;
  font-family:var(--sans);font-size:15px;transition:all .16s
}
.chip:hover{border-color:var(--gold-light);color:var(--gold-light)}
.chip[aria-pressed="true"]{background:var(--gold-light);border-color:var(--gold-light);color:var(--pine);font-weight:600}
.result{
  border-top:1px solid rgba(201,169,97,.3);margin-top:8px;padding-top:26px;
  display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center
}
.result[hidden]{display:none}
.result img{width:150px;aspect-ratio:3/4;object-fit:cover}
.result .rname{font-family:var(--serif);font-size:28px;color:var(--white);margin:0 0 4px}
.result .rwhy{color:#C3D2C2;margin-bottom:16px}
@media(max-width:620px){.result{grid-template-columns:1fr}.result img{width:130px}}

/* ---------- sachet switcher ---------- */
.sachet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:40px}
@media(max-width:860px){.sachet{grid-template-columns:1fr}}
.sachet-img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.swatch-row{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.swatch-hint{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.swatch-row{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.swatch-row{grid-template-columns:1fr 1fr}}
.swatch{
  display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px 6px 7px;
  border-radius:100px;border:1.5px solid var(--line,rgba(0,0,0,.14));background:transparent;
  font:inherit;font-size:14px;line-height:1.25;text-align:left;color:var(--ink);cursor:pointer;
  outline-offset:3px;transition:border-color .16s,background .16s
}
.swatch i{flex:none;width:30px;height:30px;border-radius:100px}
.swatch:hover{border-color:var(--ink-faint)}
.swatch[aria-pressed="true"]{border-color:var(--ink);background:rgba(0,0,0,.05);font-weight:600}
.dark .swatch[aria-pressed="true"]{border-color:var(--gold-light)}
.sachet-info h3{margin-bottom:6px}
.sachet-info .tone{font-weight:600;color:var(--gold);margin-bottom:14px}
.dark .sachet-info .tone{color:var(--gold-light)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:44px}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);display:flex;flex-direction:column}
.step img{aspect-ratio:5/4;object-fit:cover;width:100%}
.step .sb{padding:20px 20px 24px}
.step .sn{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--sun);margin-bottom:10px}
.step h3{font-size:18px;font-family:var(--sans);font-weight:650;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(201,169,97,.24);border:1px solid rgba(201,169,97,.24);margin-top:40px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:var(--pine);padding:28px 26px 30px}
.card h3{font-family:var(--sans);font-size:17px;font-weight:650;margin-bottom:10px}
.card p{font-size:15px;margin:0}

/* ---------- faq ---------- */
.faq{margin-top:36px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--serif);font-size:20px;line-height:1.35
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:6px;top:19px;
  font-family:var(--mono);font-size:22px;color:var(--sun);transition:transform .2s
}
details[open] summary::after{transform:rotate(45deg)}
details .ans{padding:0 0 22px;color:var(--ink-soft);max-width:64ch}
details .ans p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.phone-big{
  font-family:var(--serif);font-weight:300;font-size:clamp(34px,6vw,56px);color:var(--gold-light);
  text-decoration:none;display:inline-block;line-height:1.1;margin:6px 0 20px;
  border-bottom:1px solid rgba(201,169,97,.4)
}
.phone-big:hover{color:var(--white);border-color:var(--white)}
.reach{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.addr{border:1px solid rgba(201,169,97,.32);padding:22px 24px;margin-bottom:14px}
.addr-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 8px
}
.addr-line{font-family:var(--serif);font-size:19px;color:var(--white);margin:0 0 14px;line-height:1.4}
.addr-map{
  display:inline-block;font-size:14.5px;color:var(--gold-light);text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.45);padding-bottom:2px
}
.addr-map:hover{color:var(--white);border-color:var(--white)}


/* ---------- footer ---------- */
footer{background:var(--pine-deep);color:#8DA28E;padding:48px 0 110px;font-size:14.5px;border-top:1px solid rgba(201,169,97,.2)}
.foot{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:flex-end}
footer a{color:var(--gold-light);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- sticky mobile bar ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--pine-deep);border-top:1px solid rgba(201,169,97,.3);
  padding:10px 16px;gap:10px;align-items:center;justify-content:space-between
}
.stickybar .lbl{font-size:13px;color:#9FB3A0;line-height:1.3}
.stickybar .lbl b{display:block;color:var(--white);font-size:15px}
.stickybar .acts{display:flex;gap:8px}
@media(max-width:900px){.stickybar{display:flex}}

/* ---------- Xem ảnh phóng to ----------
   Bấm vào ảnh bất kỳ để mở lớp phủ xem ảnh gốc. */
.zoomable{cursor:zoom-in}

.lb{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,26,18,.94);backdrop-filter:blur(6px);
  padding:clamp(14px,3vw,40px)
}
.lb.open{display:flex}
.lb-stage{
  max-width:min(1100px,94vw);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px
}
.lb-stage img{
  max-width:100%;max-height:calc(100vh - 190px);
  width:auto;height:auto;object-fit:contain;
  border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.5)
}
.lb.anim .lb-stage img{animation:lb-in .28s cubic-bezier(.2,.7,.3,1)}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.lb-cap{color:#C3D2C2;font-size:15px;line-height:1.5;text-align:center;max-width:62ch;margin:0}
.lb-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--gold-light);margin:0}
.lb-btn{
  position:absolute;width:52px;height:52px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,48,31,.82);color:var(--paper-warm);
  border:1px solid rgba(201,169,97,.34);border-radius:50%;
  font-size:22px;line-height:1;transition:background .18s,border-color .18s
}
.lb-btn:hover{background:var(--pine);border-color:var(--gold-light);color:var(--gold-light)}
.lb-close{top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px)}
.lb-prev{left:clamp(8px,2vw,26px);top:50%;margin-top:-26px}
.lb-next{right:clamp(8px,2vw,26px);top:50%;margin-top:-26px}
@media(max-width:620px){
  .lb-stage img{max-height:calc(100vh - 240px)}
  .lb-prev{left:12px;top:auto;bottom:20px;margin-top:0}
  .lb-next{right:12px;top:auto;bottom:20px;margin-top:0}
}
body.lb-lock{overflow:hidden}

/* ---------- Thẻ lật lên khi cuộn tới ----------
   Lật quanh trục ngang ở mép dưới, như một cánh cửa mở ra. Chỉ chạy một lần.
   .reveal đặt sẵn trạng thái ẩn, JS gắn .in để thả về vị trí thật. */
.reveal-wrap{perspective:1100px}
.reveal{
  opacity:0;transform:rotateX(12deg) translateY(26px);transform-origin:50% 100%;
  transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform
}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .proof .fade-word{opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════════════
   Dùng chung cho trang phụ (chứng nhận, sản phẩm)
   ══════════════════════════════════════════════════════════ */

/* Đầu trang gọn, không có ảnh nền như trang chính */
.page-head{
  position:relative;overflow:hidden;
  background:var(--pine);color:var(--on-pine);
  padding:clamp(56px,8vw,92px) 0 clamp(44px,6vw,68px);
  border-bottom:3px solid var(--gold-light)
}
/* Ảnh vườn làm nền, mỗi trang phụ một ảnh khác nhau và khác trang chủ.
   Lớp phủ chuyển sắc giữ chữ đọc được ở mọi ảnh. */
.page-head-bg{position:absolute;inset:0;z-index:0}
.page-head-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.page-head-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,26,17,.94) 0%,rgba(14,33,24,.88) 46%,rgba(14,33,24,.5) 100%)
}
.page-head>.wrap{position:relative;z-index:1}
.page-head h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(32px,5.4vw,54px);line-height:1.12;letter-spacing:-.012em;
  color:var(--white);margin:0 0 18px;max-width:20ch
}
.page-head p{color:#C3D2C2;max-width:56ch;font-size:18px;margin:0}
.page-head .eyebrow{color:var(--gold-light)}
.crumb{font-size:14.5px;color:#9FB3A0;margin:0 0 22px}
.crumb a{color:var(--gold-light);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* Bảng kết quả kiểm nghiệm */
.tw{overflow-x:auto;border:1px solid var(--line);background:var(--white);margin:24px 0}
.rt{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.rt th,.rt td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.rt th{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600;background:var(--paper-warm)
}
.rt tr:last-child td{border-bottom:0}
.rt td:first-child{font-weight:600}
.rt .val{font-variant-numeric:tabular-nums;white-space:nowrap}
.ok{color:#2E6B45;font-weight:650;white-space:nowrap}

/* Thẻ tóm tắt một phiếu kiểm nghiệm */
.lab{border:1px solid var(--line);background:var(--white);padding:clamp(22px,3vw,32px);margin-bottom:24px}
.lab-top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-bottom:6px}
.lab-org{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lab-date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint)}
.lab h3{margin-bottom:10px}
.lab .meta{font-size:14.5px;color:var(--ink-faint);margin:0 0 4px}

/* Lưới ảnh giấy tờ và ảnh khách hàng */
.shots{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.shots.c3{grid-template-columns:repeat(3,1fr)}
.shots.c4{grid-template-columns:repeat(4,1fr)}
.shots figure{margin:0;background:var(--white)}
.shots img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.shots.faces img{aspect-ratio:4/5;object-position:center}
.shots figcaption{
  padding:12px 14px 14px;font-size:13px;line-height:1.45;color:var(--ink-faint)
}
@media(max-width:860px){.shots.c4{grid-template-columns:repeat(2,1fr)}.shots.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.shots.c4,.shots.c3{grid-template-columns:1fr}}

/* Ghi chú phạm vi, nói rõ giới hạn của phiếu kiểm nghiệm */
.scope{border-left:2px solid var(--gold);padding:4px 0 4px 16px;color:var(--ink-soft);font-size:15px;margin:26px 0 0}

/* Khối sản phẩm dòng chăm sóc */
.line{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.line:last-child{margin-bottom:0}
.line.rev>*:first-child{order:2}
@media(max-width:860px){.line{grid-template-columns:1fr;gap:28px}.line.rev>*:first-child{order:0}}
.line img{width:100%;height:auto}
.spec{list-style:none;padding:0;margin:20px 0 24px;border-top:1px solid var(--line)}
.spec li{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:15px
}
.spec li span:first-child{color:var(--ink-faint)}
.spec li span:last-child{font-weight:600;text-align:right}
.dark .spec{border-color:rgba(201,169,97,.28)}
.dark .spec li{border-color:rgba(201,169,97,.28)}
.dark .spec li span:first-child{color:#9FB3A0}
.dark .spec li span:last-child{color:var(--white)}

/* ── Ba chữ trong tên JAVINA ── */
.name-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(201,169,97,.24);border:1px solid rgba(201,169,97,.24);margin-top:44px}
@media(max-width:800px){.name-grid{grid-template-columns:1fr}}
.name-card{background:var(--pine);padding:30px 28px 32px}
.name-card .letter{
  display:inline-block;font-family:var(--display);font-weight:500;font-size:34px;line-height:1;
  color:var(--pine);background:var(--gold-light);
  padding:10px 14px 12px;border-radius:3px;margin-bottom:18px
}
.name-card h3{font-family:var(--serif);font-weight:600;font-size:19px;margin-bottom:8px;color:var(--white)}
.name-card p{font-size:15px;margin:0;color:#C3D2C2}


/* ══════════════════════════════════════════════════════════
   Điện thoại: mỗi thẻ sản phẩm gọn trong một màn hình,
   tính cả nút Mua ngay. Ảnh neo đáy để chân chai không bị cụt.
   ══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .scent .ph{aspect-ratio:5/4}
  .scent .ph img{object-position:center 62%}
  .scents.c2 .ph{aspect-ratio:5/4}
  .scents.c2 .ph img{object-position:center bottom}

  .scent .txt{padding:15px 17px 16px}
  .scent .no{font-size:10px;margin-bottom:7px}
  .scent h3{font-size:18px;margin-bottom:2px}
  .scent .en{font-size:10px;margin-bottom:9px}
  .scent .claim{font-size:14.5px;line-height:1.4;margin-bottom:6px}
  .scent .desc{font-size:14px;line-height:1.48;margin-bottom:10px}
  .tags{gap:5px;margin-bottom:11px}
  .tag{font-size:11.5px;padding:3px 9px}
  .scent .foot{padding-top:11px}
  .scent .foot .btn{padding:12px 20px;font-size:15px}
}

/* ══════════════════════════════════════════════════════════
   Trang câu chuyện: bài đọc dài
   ══════════════════════════════════════════════════════════ */
.article{max-width:68ch;margin:0 auto}
.article p{font-size:18px;line-height:1.78;margin:0 0 22px;color:var(--ink-soft)}
.article p.lead{font-size:21px;line-height:1.65;color:var(--ink)}
.article h3{margin:44px 0 14px}
.article ul{margin:0 0 24px;padding-left:22px}
.article li{font-size:17.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:12px}
.article li b{color:var(--ink)}

.chapter{
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 10px;padding-top:8px
}
.chapter .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)
}
.chapter .rule{flex:1;height:1px;background:var(--line)}

.pull{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(21px,2.6vw,27px);line-height:1.45;color:var(--pine);
  border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:34px 0
}
.pull cite{
  display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:14.5px;letter-spacing:.02em;color:var(--ink-faint);margin-top:12px
}
.article figure{margin:36px 0}
.article figure img{width:100%;height:auto}
.article figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:12px
}

/* ── Lưới ảnh khách hàng ──
   Dùng lưới có tỉ lệ ô cố định thay vì kiểu xếp gạch bằng columns.
   Với 30 ảnh tải dần, columns bắt trình duyệt tính lại bố cục liên tục
   và có thể treo hẳn tab. Lưới cố định thì chỗ được chừa sẵn, không giật. */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.wall figure{margin:0;background:var(--white)}
.wall img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.wall{grid-template-columns:1fr}}

.hero-b2b{margin:-10px 0 20px;font-size:15px}
.hero .hero-b2b a{color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
.sb .en{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin:-2px 0 12px}
.b2b{background:var(--paper-warm)}
.b2b-in{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.b2b-in h2{margin-bottom:14px}
.b2b-in p{max-width:60ch;color:var(--ink-soft)}
.b2b-who{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.b2b-who li{padding:7px 14px;border:1.5px solid rgba(0,0,0,.14);border-radius:100px;font-size:14px}
.b2b-cta{display:flex;flex-direction:column;gap:10px}
.b2b-cta .btn{text-align:center;justify-content:center}
@media(max-width:860px){.b2b-in{grid-template-columns:1fr}}