/* ==========================================================
   HIÊN — Vietnamese Wellness Spa
   Bộ nhận diện: Be · Xanh rêu · Nâu gỗ
   Nền giấy dó màu ngà · Heading Cormorant Garamond · Body Inter
   Chỉ dùng line icon — không emoji, không icon nhiều màu
   ========================================================== */

:root{
  /* BE — nền giấy dó ngà */
  --be-light:#FAF5EA;
  --be:#F3ECDD;
  --be-dark:#E8DCC4;

  /* XANH RÊU */
  --reu-light:#7E8B68;
  --reu:#5E6E4A;
  --reu-dark:#414D33;
  --reu-deep:#2E3724;

  /* NÂU GỖ */
  --nau-sang:#C9A882;   /* nâu gỗ sáng — dùng trên nền rêu */
  --nau-light:#8A6B4C;
  --nau:#6B4F35;
  --nau-dark:#4A3728;
  --nau-deep:#2B2019;

  --dong:#A98850;       /* đồng — màu nhấn */
  --white:#FFFDF8;

  --maxw:1160px;
}

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

/* ---------- NỀN GIẤY DÓ ---------- */
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  background-color:var(--be);
  color:var(--nau-dark);
  font-size:16.5px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  background-image:
    /* sợi giấy dó */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E"),
    /* vân xơ ngang rất nhẹ */
    repeating-linear-gradient(94deg, rgba(107,79,53,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(2deg, rgba(107,79,53,.018) 0 1px, transparent 1px 11px);
  background-attachment:fixed, scroll, scroll;
}

/* Lớp giấy dó dùng lại cho các khối nền sáng */
.paper{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E");
}

h1,h2,h3,h4,h5{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  color:var(--reu-dark);
  line-height:1.22;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.narrow{max-width:820px; margin:0 auto;}
.center{text-align:center;}

/* ==========================================================
   TIÊU ĐỀ SONG NGỮ — quy tắc bắt buộc
   Tiếng Việt trên (xanh rêu, IN HOA, ĐẬM)
   Tiếng Anh dưới (nâu gỗ, in nghiêng)
   ========================================================== */
.ttl{display:block;}
.ttl .vi{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:700;
  text-transform:uppercase;
  color:var(--reu-dark);
  line-height:1.18;
}
.ttl .en{
  display:block;
  font-family:'Inter',Arial,sans-serif;
  font-weight:400;
  font-style:italic;
  text-transform:none;
  color:var(--nau);
  line-height:1.4;
}

.ttl.t-display .vi{font-size:70px; letter-spacing:7px;}
.ttl.t-display .en{font-size:20px; letter-spacing:3px; margin-top:14px;}

.ttl.t1 .vi{font-size:48px; letter-spacing:4px;}
.ttl.t1 .en{font-size:16.5px; letter-spacing:2px; margin-top:9px;}

.ttl.t2 .vi{font-size:37px; letter-spacing:3px;}
.ttl.t2 .en{font-size:15.5px; letter-spacing:1.6px; margin-top:8px;}

.ttl.t3 .vi{font-size:24px; letter-spacing:1.8px;}
.ttl.t3 .en{font-size:14px; letter-spacing:1px; margin-top:4px;}

.ttl.t4 .vi{font-size:19px; letter-spacing:1.3px;}
.ttl.t4 .en{font-size:13px; letter-spacing:.7px; margin-top:2px;}

/* Trên nền xanh rêu / nâu: chữ be + nâu gỗ sáng */
.sec-reu .ttl .vi,.sec-nau .ttl .vi,.cta-band .ttl .vi,.combo .ttl .vi{color:var(--be-light);}
.sec-reu .ttl .en,.sec-nau .ttl .en,.cta-band .ttl .en,.combo .ttl .en{color:var(--nau-sang);}
.combo.feature .ttl .vi{color:var(--nau-deep);}
.combo.feature .ttl .en{color:var(--nau);}

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:'Inter',Arial,sans-serif;
  font-size:11.5px; letter-spacing:4.5px; text-transform:uppercase;
  color:var(--dong); margin-bottom:18px; font-weight:500;
}
.lead{font-size:18px; line-height:1.85; font-weight:300;}
.en{font-style:italic; color:var(--nau); font-size:.94em;}
.muted{opacity:.78;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}

/* Đường phân cách */
.rule{width:64px; height:1px; background:var(--dong); margin:22px auto 28px; position:relative;}
.rule::before,.rule::after{
  content:''; position:absolute; top:-2px; width:5px; height:5px;
  background:var(--dong); transform:rotate(45deg);
}
.rule::before{left:-9px;} .rule::after{right:-9px;}
.rule.left{margin-left:0; margin-right:0;}

/* ==========================================================
   LINE ICON — chỉ nét, một màu, không tô đặc
   ========================================================== */
.ico{
  width:24px; height:24px; display:inline-block;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle;
}
.ico-lg{width:38px; height:38px; stroke-width:1.2;}
.ico-sm{width:18px; height:18px; stroke-width:1.5;}
#hien-icons{display:none;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:200;
  background:rgba(243,236,221,.96);
  border-bottom:1px solid rgba(107,79,53,.15);
  backdrop-filter:blur(8px);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:15px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; flex-direction:column; line-height:1;}
.brand .mark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:31px; letter-spacing:9px; color:var(--reu-dark); font-weight:600;
}
.brand .tag{
  font-size:8px; letter-spacing:2.8px; text-transform:uppercase;
  color:var(--nau-light); margin-top:6px; font-weight:400;
}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{
  font-size:12.5px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--nau-dark); opacity:.82; padding-bottom:3px; font-weight:400;
  border-bottom:1px solid transparent; transition:.2s;
}
.nav-links a:hover,.nav-links a.active{opacity:1; color:var(--reu-dark); border-bottom-color:var(--dong);}
.nav-cta{
  background:var(--reu-dark); color:var(--be-light)!important;
  padding:11px 24px; font-size:11.5px; letter-spacing:2.2px;
  text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--reu-dark)!important; opacity:1!important; transition:.2s;
}
.nav-cta:hover{background:var(--reu-deep); border-color:var(--reu-deep)!important;}
.burger{
  display:none; background:none; border:none; color:var(--reu-dark);
  cursor:pointer; padding:6px; line-height:0;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 34px; font-size:11.5px; letter-spacing:2.6px;
  text-transform:uppercase; border:1px solid transparent;
  transition:.25s; cursor:pointer; font-family:'Inter',Arial,sans-serif; font-weight:400;
}
.btn-solid{background:var(--reu-dark); color:var(--be-light); border-color:var(--reu-dark);}
.btn-solid:hover{background:var(--reu-deep); border-color:var(--reu-deep);}
.btn-ghost{background:transparent; color:var(--reu-dark); border-color:var(--reu-dark);}
.btn-ghost:hover{background:var(--reu-dark); color:var(--be-light);}
.btn-gold{background:var(--dong); color:var(--white); border-color:var(--dong);}
.btn-gold:hover{background:#96763F; border-color:#96763F;}
.btn-light{background:var(--be-light); color:var(--reu-dark); border-color:var(--be-light);}
.btn-light:hover{background:var(--white);}

/* ---------- SECTIONS ---------- */
section{padding:98px 0;}
.sec-be{background:var(--be);}
.sec-belight{background:var(--be-light);}
.sec-white{background:var(--white);}
.sec-reu{background:var(--reu-deep); color:var(--be);}
.sec-reu h1,.sec-reu h2,.sec-reu h3,.sec-reu h4{color:var(--be-light);}
.sec-reu .eyebrow{color:var(--nau-sang);}
.sec-reu .en{color:var(--nau-sang);}
.sec-nau{background:var(--nau-deep); color:var(--be);}
.sec-nau h1,.sec-nau h2,.sec-nau h3,.sec-nau h4{color:var(--be-light);}
.sec-nau .eyebrow{color:var(--nau-sang);}
.sec-nau .en{color:var(--nau-sang);}

.sec-head{text-align:center; margin-bottom:58px;}
.sec-head p{max-width:700px; margin:0 auto;}

/* Số thứ tự chương — dẫn theo flow thương hiệu */
.chapter{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:13px; letter-spacing:5px; text-transform:uppercase;
  color:var(--dong); margin-bottom:14px; display:block;
}

/* ---------- PAGE HERO ---------- */
.page-hero{
  background:linear-gradient(180deg,var(--be-light) 0%,var(--be-dark) 100%);
  padding:82px 0 74px; text-align:center;
}
.crumb{font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.6; margin-bottom:20px;}

/* ---------- GRIDS ---------- */
.grid{display:grid; gap:26px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}
.split{display:grid; grid-template-columns:1fr 1fr; gap:62px; align-items:center;}

/* ---------- CARDS ---------- */
.card{
  background:var(--white); border:1px solid rgba(107,79,53,.14);
  padding:36px 32px;
}
.card .num{
  display:block; font-family:'Cormorant Garamond',serif;
  font-size:15px; letter-spacing:3.5px; color:var(--dong); margin-bottom:14px;
}
.card p{font-size:15px; line-height:1.75; opacity:.86;}

/* Trụ giá trị */
.pillar{text-align:center; padding:8px;}
.pillar .icon{
  width:70px; height:70px; margin:0 auto 22px; border-radius:50%;
  background:transparent; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(107,79,53,.28); color:var(--reu);
}
.sec-reu .pillar .icon,.sec-nau .pillar .icon{border-color:rgba(201,168,130,.4); color:var(--nau-sang);}
.pillar p{font-size:14.5px; opacity:.84; margin-top:10px;}

/* ---------- VÙNG MIỀN ---------- */
.region{
  background:var(--white); border:1px solid rgba(107,79,53,.14);
  overflow:hidden; display:flex; flex-direction:column;
}
.region .banner{
  background:var(--reu-dark); color:var(--be-light);
  padding:15px 26px; letter-spacing:2.6px; text-transform:uppercase; font-size:11.5px;
}
.region .body{padding:32px 28px; flex:1;}
.region p{font-size:14.5px; opacity:.86; margin-bottom:14px;}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px;}
.tag{
  font-size:12px; background:var(--be); border:1px solid rgba(107,79,53,.16);
  padding:5px 13px; color:var(--nau); letter-spacing:.3px;
}
.sec-reu .tag,.sec-nau .tag{background:rgba(201,168,130,.1); border-color:rgba(201,168,130,.3); color:var(--nau-sang);}

/* ---------- THẢO MỘC ---------- */
.herb{
  background:var(--white); border:1px solid rgba(107,79,53,.13);
  padding:30px 16px; text-align:center;
}
.sec-reu .herb{background:rgba(250,245,234,.06); border-color:rgba(201,168,130,.24);}
.herb .glyph{color:var(--reu); margin-bottom:14px; display:flex; justify-content:center;}
.sec-reu .herb .glyph{color:var(--nau-sang);}
.herb h4{font-size:19px; margin-bottom:2px; text-transform:uppercase; letter-spacing:1.2px;}
.sec-reu .herb h4{color:var(--be-light);}
.herb .latin{font-size:12.5px; font-style:italic; color:var(--nau); margin-bottom:10px;}
.sec-reu .herb .latin{color:var(--nau-sang);}
.herb p{font-size:13.5px; line-height:1.6; opacity:.82;}

/* ---------- BƯỚC ---------- */
.step{
  display:flex; gap:24px; align-items:flex-start;
  padding:28px 0; border-bottom:1px solid rgba(201,168,130,.2);
}
.step:last-child{border-bottom:none;}
.step .n{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--dong); color:var(--dong);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:19px;
}
.step p{font-size:14.5px; opacity:.82;}

/* ---------- COMBO ---------- */
.combo{
  background:var(--nau-deep); color:var(--be);
  padding:36px 34px; position:relative; border:1px solid rgba(169,136,80,.32);
}
.combo.feature{background:linear-gradient(150deg,var(--dong) 0%,#8B6C3C 100%); color:var(--nau-deep);}
.combo .badge{
  position:absolute; top:22px; right:22px; background:var(--reu);
  color:var(--be-light); font-size:9.5px; letter-spacing:2px;
  text-transform:uppercase; padding:5px 13px;
}
.combo.feature .badge{background:var(--nau-deep); color:var(--dong);}
.combo .cname{
  font-size:11px; letter-spacing:3.2px; text-transform:uppercase;
  color:var(--nau-sang); margin-bottom:10px;
}
.combo.feature .cname{color:var(--nau-deep); opacity:.72;}
.combo .dur{font-size:13px; letter-spacing:1.4px; margin-bottom:20px; opacity:.9;}
.combo .prices{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.combo .old{text-decoration:line-through; opacity:.55; font-size:15px;}
.combo .new{font-family:'Cormorant Garamond',serif; font-size:38px; letter-spacing:.5px;}
.combo .save{
  display:inline-block; margin-top:12px; font-size:12px; letter-spacing:.6px;
  background:rgba(250,245,234,.13); padding:5px 14px;
}
.combo.feature .save{background:rgba(43,32,25,.16);}

/* ---------- MENU DỊCH VỤ ---------- */
.tabs{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:46px;}
.tab-btn{
  background:var(--white); border:1px solid rgba(107,79,53,.22);
  color:var(--nau-dark); padding:13px 30px; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer;
  font-family:'Inter',Arial,sans-serif; transition:.2s;
}
.tab-btn:hover{border-color:var(--reu);}
.tab-btn.active{background:var(--reu-dark); color:var(--be-light); border-color:var(--reu-dark);}
.panel{display:none;}
.panel.active{display:block; animation:fade .35s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.svc{
  background:var(--white); border:1px solid rgba(107,79,53,.13);
  padding:28px 32px; margin-bottom:16px;
  display:flex; justify-content:space-between; gap:30px; align-items:flex-start;
  transition:border-color .35s, box-shadow .35s;
}
.svc:hover{border-color:rgba(169,136,80,.5); box-shadow:0 6px 26px rgba(107,79,53,.09);}
.svc .info{flex:1;}
/* ảnh minh hoạ dịch vụ, lấy từ menu HIÊN */
.svc .anh{
  width:132px; height:132px; flex-shrink:0; overflow:hidden;
  border:1px solid rgba(107,79,53,.14); background:var(--be-dark);
}
.svc .anh img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s ease;}
.svc:hover .anh img{transform:scale(1.07);}
@media(max-width:760px){
  .svc{flex-wrap:wrap; padding:22px 20px; gap:18px;}
  .svc .anh{width:84px; height:84px;}
  .svc .info{flex:1 1 60%;}
  .svc .cost{min-width:0; text-align:left; flex-basis:100%;}
}
.svc h4{font-size:22px; margin-bottom:1px; text-transform:uppercase; letter-spacing:1.4px;}
.svc .ename{font-size:13.5px; font-style:italic; color:var(--nau); margin-bottom:12px;}
.svc .steps{font-size:14px; opacity:.8; line-height:1.7;}
.svc .cost{text-align:right; white-space:nowrap; min-width:170px;}
.svc .cost .line{
  font-size:13.5px; padding:3px 0; border-bottom:1px dotted rgba(107,79,53,.25); margin-bottom:6px;
}
.svc .cost .line:last-child{border-bottom:none; margin-bottom:0;}
.svc .cost b{font-family:'Cormorant Garamond',serif; font-size:25px; color:var(--reu-dark); font-weight:600;}
.hot{
  display:inline-block; background:var(--dong); color:var(--white);
  font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase;
  padding:3px 10px; margin-left:10px; vertical-align:middle;
}

/* ---------- CON NGƯỜI ---------- */
.person{
  background:var(--white); border:1px solid rgba(107,79,53,.14);
  padding:34px 26px; text-align:center;
}
.person .ava{
  width:84px; height:84px; margin:0 auto 20px; border-radius:50%;
  border:1px solid rgba(107,79,53,.26); display:flex;
  align-items:center; justify-content:center; color:var(--reu);
}
.person .role{
  font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--dong); margin-bottom:8px;
}
.person p{font-size:14.5px; opacity:.84;}

/* ---------- REVIEW ---------- */
.review{
  background:var(--white); border:1px solid rgba(107,79,53,.14);
  padding:36px 32px; display:flex; flex-direction:column;
}
.review .quote{color:var(--dong); margin-bottom:16px;}
.review blockquote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px; line-height:1.6; color:var(--nau-dark);
  font-style:italic; margin-bottom:22px; flex:1;
}
.review .who{font-size:14px; letter-spacing:.4px; color:var(--reu-dark); font-weight:500;}
.review .from{font-size:12.5px; color:var(--nau); font-style:italic; margin-top:1px;}
.stars{display:flex; gap:4px; margin-bottom:16px; color:var(--dong);}

/* ---------- LÂN CẬN ---------- */
.near{
  background:var(--white); border-left:2px solid var(--dong);
  padding:22px 26px;
}
.sec-be .near{background:var(--white);}
.near .dist{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--dong); margin-bottom:6px;
}
.near p{font-size:13.5px; opacity:.8; line-height:1.65;}

/* ---------- FAQ ---------- */
.faq{background:var(--white); border:1px solid rgba(107,79,53,.14); margin-bottom:12px; overflow:hidden;}
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  padding:24px 28px; font-family:'Cormorant Garamond',Georgia,serif;
  font-size:21px; color:var(--reu-dark); cursor:pointer; display:flex;
  justify-content:space-between; align-items:center; gap:20px; line-height:1.4;
}
.faq-q .pm{color:var(--dong); flex-shrink:0; transition:.25s; line-height:0;}
.faq.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 28px;}
.faq.open .faq-a{max-height:460px; padding-bottom:26px;}
.faq-a p{font-size:15px; opacity:.84; line-height:1.8;}

/* ---------- PILL LIÊN HỆ ---------- */
.pills{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.pill{
  background:rgba(250,245,234,.08); border:1px solid rgba(201,168,130,.3);
  padding:16px 28px; font-size:15px; color:var(--be); transition:.2s;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.pill:hover{background:rgba(250,245,234,.15);}
.pill b{
  color:var(--nau-sang); font-weight:400; letter-spacing:2px;
  text-transform:uppercase; font-size:11px;
}

/* ---------- MINH HOẠ ---------- */
.illus{width:100%; height:auto; display:block;}
.illus-hien{max-width:980px; margin:0 auto;}
.vignette{text-align:center;}
.vignette figcaption{margin-top:16px;}
.vignette figcaption .vi{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:700;
  text-transform:uppercase; color:var(--reu-dark); font-size:17px; letter-spacing:1.4px;
}
.vignette figcaption .en{
  display:block; font-style:italic; color:var(--nau); font-size:13.5px; margin-top:3px;
}

/* ---------- CTA ---------- */
.cta-band{background:var(--reu-deep); color:var(--be); text-align:center; padding:84px 0;}
.cta-band p{max-width:620px; margin:0 auto 34px; opacity:.86;}

/* ---------- FOOTER ---------- */
.footer{background:var(--nau-deep); color:var(--be-dark); padding:68px 0 0;}
.footer h4{
  color:var(--be-light); font-size:12px; letter-spacing:2.8px;
  text-transform:uppercase; margin-bottom:20px; font-family:'Inter',Arial,sans-serif; font-weight:500;
}
.footer a{color:var(--be-dark); opacity:.84; font-size:14.5px; line-height:2.1;}
.footer a:hover{opacity:1; color:var(--nau-sang);}
.footer .fgrid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:42px; padding-bottom:50px;}
.footer .fbrand .mark{
  font-family:'Cormorant Garamond',serif; font-size:36px; letter-spacing:10px;
  color:var(--be-light); display:block; margin-bottom:8px;
}
.footer .fbrand .tag{font-size:8.5px; letter-spacing:3.2px; text-transform:uppercase; color:var(--nau-sang); margin-bottom:18px;}
.footer .fbrand p{font-size:14px; opacity:.76; line-height:1.8; max-width:310px;}
.footer ul{list-style:none;}
.footer .fbot{
  border-top:1px solid rgba(201,168,130,.16); padding:24px 0;
  text-align:center; font-size:12.5px; opacity:.6;
}

/* ---------- NÚT NỔI + ÂM THANH ---------- */
.float{position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; gap:10px;}
.float a,.float button{
  width:50px; height:50px; border-radius:50%; background:var(--reu-dark);
  color:var(--be-light); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(43,32,25,.28); border:1px solid rgba(201,168,130,.28);
  transition:.2s; cursor:pointer; font-family:'Inter',sans-serif; font-size:10.5px;
  letter-spacing:.6px; padding:0;
}
.float a:hover,.float button:hover{background:var(--dong); transform:translateY(-2px);}
.float button.on{background:var(--dong);}
.sound-hint{
  position:fixed; right:84px; bottom:76px; z-index:300;
  background:var(--nau-deep); color:var(--be-light); padding:9px 16px;
  font-size:12px; letter-spacing:.4px; opacity:0; pointer-events:none;
  transition:opacity .3s; white-space:nowrap;
}
.sound-hint.show{opacity:.94;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1040px){
  .g5{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .footer .fgrid{grid-template-columns:1fr 1fr; gap:34px;}
}
@media(max-width:860px){
  body{font-size:15.5px;}
  section{padding:66px 0;}

  .ttl.t-display .vi{font-size:37px; letter-spacing:3px;}
  .ttl.t-display .en{font-size:15px; letter-spacing:2px;}
  .ttl.t1 .vi{font-size:30px; letter-spacing:2.4px;}
  .ttl.t1 .en{font-size:14.5px;}
  .ttl.t2 .vi{font-size:26px; letter-spacing:2px;}
  .ttl.t2 .en{font-size:14px;}
  .ttl.t3 .vi{font-size:20px;}
  .ttl.t3 .en{font-size:13px;}

  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--be-light); flex-direction:column; gap:0;
    padding:12px 0; border-bottom:1px solid rgba(107,79,53,.16);
    box-shadow:0 8px 20px rgba(43,32,25,.1);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 28px; width:100%; border-bottom:none;}
  .nav-links a:hover{background:var(--be);}
  .nav-links .nav-cta{margin:10px 28px; justify-content:center; text-align:center;}
  .burger{display:block;}

  .g2,.g3,.g4,.g5,.split{grid-template-columns:1fr;}
  .split{gap:36px;}
  .svc{flex-direction:column; gap:14px;}
  .svc .cost{text-align:left; min-width:0;}
  .footer .fgrid{grid-template-columns:1fr;}
  .float a,.float button{width:44px; height:44px;}
  .sound-hint{display:none;}
}

/* ══════════════════════════════════════════════════
   BỔ SUNG — ẢNH THẬT, COMBO KIỂU MENU, ĐỘI NGŨ
   ══════════════════════════════════════════════════ */

/* Ảnh phủ khối */
.ph{position:relative; overflow:hidden; background:var(--be-dark);}
.ph img{width:100%; height:100%; object-fit:cover; display:block;}
.ph-16{aspect-ratio:16/9;}
.ph-43{aspect-ratio:4/3;}

/* Hero có ảnh */
.hero-photo{
  position:relative; min-height:76vh; display:flex;
  align-items:center; justify-content:center; text-align:center;
  background:var(--nau-deep); overflow:hidden;
}
.hero-photo img.bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.62;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,32,25,.42) 0%, rgba(43,32,25,.20) 45%, rgba(43,32,25,.72) 100%);
}
.hero-photo .inner{position:relative; z-index:2; padding:70px 28px; max-width:900px;}
.hero-photo .eyebrow{color:var(--nau-sang);}
.hero-photo .ttl .vi{color:#FDF8EC; text-shadow:0 2px 18px rgba(43,32,25,.5);}
.hero-photo .ttl .en{color:var(--nau-sang);}
.hero-photo p{color:#F2E9D8; text-shadow:0 1px 10px rgba(43,32,25,.5);}
.hero-photo .rule{background:var(--nau-sang);}
.hero-photo .rule::before,.hero-photo .rule::after{background:var(--nau-sang);}

/* ---------- COMBO KIỂU MENU (hàng ngang) ---------- */
.cmb{
  display:flex; border:1px solid rgba(107,79,53,.26);
  background:var(--white); margin-bottom:16px; overflow:hidden;
}
.cmb-ph{width:210px; flex-shrink:0; position:relative; background:var(--nau-deep);}
.cmb-ph img{width:100%; height:100%; object-fit:cover; opacity:.9;}
.cmb-name{
  position:absolute; top:16px; left:0; background:var(--reu-deep);
  border-left:3px solid var(--dong); padding:9px 15px 9px 12px; z-index:2;
}
.cmb.feature .cmb-name{background:var(--nau-deep);}
.cmb-name .n{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px;
  letter-spacing:2.4px; color:var(--nau-sang); text-transform:uppercase; line-height:1.1;
}
.cmb-name .e{
  font-size:8px; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--be-dark); margin-top:4px; opacity:.85;
}
.cmb-tag{
  position:absolute; bottom:14px; left:12px; z-index:2;
  background:var(--dong); color:#fff; font-size:9px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; padding:4px 11px;
}
.cmb-body{flex:1; padding:22px 26px; display:flex; flex-direction:column;}
.cmb-body h3{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:23px;
  text-transform:uppercase; letter-spacing:.8px; color:var(--reu-dark); line-height:1.18;
}
.cmb-body .sub{
  font-size:12.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--nau); margin-top:4px;
}
.cmb-min{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; align-self:flex-start;
  background:var(--reu-dark); color:var(--be-light); padding:5px 14px;
  font-size:11.5px; letter-spacing:1.5px;
}
.cmb-min .ico{width:13px; height:13px; stroke-width:1.6;}
.cmb-list{list-style:none; margin-top:16px; padding-top:14px; border-top:1px dotted rgba(107,79,53,.32);}
.cmb-list li{
  display:flex; align-items:flex-start; gap:9px; padding:5px 0; font-size:15px;
}
.cmb-list li .ico{width:15px; height:15px; color:var(--dong); flex-shrink:0; margin-top:4px; stroke-width:1.8;}
.cmb-list li b{font-weight:500; color:var(--nau-dark);}
.cmb-list li span{color:var(--nau); font-size:13.5px; font-style:italic;}
.cmb-list li em{margin-left:auto; font-style:normal; font-size:13px; color:var(--nau); opacity:.8; white-space:nowrap; padding-left:12px;}
.cmb-price{
  width:190px; flex-shrink:0; border-left:1px dotted rgba(107,79,53,.32);
  padding:22px 22px; text-align:right; display:flex; flex-direction:column; justify-content:center;
}
.cmb-price .lb{font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--nau); opacity:.75;}
.cmb-price .old{font-size:14px; color:var(--nau); text-decoration:line-through; margin:2px 0 10px;}
.cmb-price .now{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:32px;
  color:var(--reu-dark); line-height:1.05;
}
.cmb-price .sv{
  align-self:flex-end; margin-top:10px; background:var(--reu-dark); color:var(--be-light);
  font-size:9.5px; letter-spacing:.8px; padding:4px 11px;
}
.cmb.feature .cmb-price .now{color:#8B6C3C;}
.cmb.feature .cmb-price .sv{background:var(--dong);}

/* ---------- THẺ THẢO MỘC CÓ ẢNH ---------- */
.hb{background:var(--white); border:1px solid rgba(107,79,53,.13); text-align:center; overflow:hidden;}
.hb img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;}
.hb .tx{padding:14px 12px 18px;}
.hb h4{font-size:18px; text-transform:uppercase; letter-spacing:1.1px; margin-bottom:1px;}
.hb .latin{font-size:11.5px; font-style:italic; color:var(--nau); margin-bottom:8px;}
.hb p{font-size:13px; line-height:1.55; opacity:.82;}

/* ---------- KHỐI MIỀN CÓ ẢNH ---------- */
.rg{background:var(--white); border:1px solid rgba(107,79,53,.14); overflow:hidden;
    display:flex; flex-direction:column;}
.rg img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.rg .bd{padding:26px 24px; flex:1;}
.rg .fl{
  display:inline-block; background:var(--reu-dark); color:var(--be-light);
  font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:5px 13px; margin-bottom:14px;
}

/* ---------- ĐỘI NGŨ ---------- */
.tm{background:var(--white); border:1px solid rgba(107,79,53,.14); padding:30px 22px; text-align:center;}
.tm .av{
  width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
  border:1px solid rgba(107,79,53,.28); display:flex; align-items:center;
  justify-content:center; color:var(--reu);
}
.tm .role{font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--dong); margin-bottom:7px;}
.tm h4{font-size:19px; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;}
.tm p{font-size:14px; opacity:.84;}

/* ---------- BẢNG GIÁ LẺ ---------- */
.svc-ph{width:150px; flex-shrink:0; background:var(--be-dark);}
.svc-ph img{width:100%; height:100%; object-fit:cover;}

@media(max-width:860px){
  .cmb{flex-direction:column;}
  .cmb-ph{width:100%; height:170px;}
  .cmb-price{width:100%; border-left:none; border-top:1px dotted rgba(107,79,53,.32); text-align:left;}
  .cmb-price .sv{align-self:flex-start;}
  .cmb-list li em{margin-left:0; padding-left:0;}
  .cmb-list li{flex-wrap:wrap;}
  .hero-photo{min-height:64vh;}
}

/* ══════════════════════════════════════════════════════════
   CHUYỂN NGÔN NGỮ VIỆT / ANH
   Tận dụng sẵn cặp .vi/.en đã có trong mọi tiêu đề
   ══════════════════════════════════════════════════════════ */
.lang{display:flex; align-items:center; gap:0; border:1px solid rgba(107,79,53,.3); overflow:hidden;}
.lang button,
.lang a{
  background:none; border:none; cursor:pointer; padding:7px 10px;
  font-family:'Inter',Arial,sans-serif; font-size:10.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--nau); transition:.2s;
  text-decoration:none; white-space:nowrap; line-height:1.4;
  border-right:1px solid rgba(107,79,53,.18);
}
.lang a:last-child{border-right:none;}
.lang button.on,
.lang a.on{background:var(--reu-dark); color:var(--be-light);}
.lang button:not(.on):hover,
.lang a:not(.on):hover{background:rgba(107,79,53,.08);}
/* nhãn CJK không viết hoa được, cho chữ to hơn chút cho cân */
.lang a[hreflang="zh-Hans"],
.lang a[hreflang="ja"],
.lang a[hreflang="ko"]{font-size:11.5px; letter-spacing:.4px; text-transform:none;}
@media(max-width:980px){
  .lang a{padding:6px 7px; font-size:9.5px; letter-spacing:1px;}
  .lang a[hreflang="zh-Hans"],
  .lang a[hreflang="ja"],
  .lang a[hreflang="ko"]{font-size:10.5px;}
}

/* Chế độ tiếng Anh: ẩn dòng Việt, đôn dòng Anh lên làm tiêu đề */
html[data-lang="en"] .ttl .vi{display:none;}
html[data-lang="en"] .ttl .en{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:normal; font-weight:700; text-transform:uppercase;
  color:var(--reu-dark); margin-top:0;
}
html[data-lang="en"] .ttl.t-display .en{font-size:58px; letter-spacing:5px;}
html[data-lang="en"] .ttl.t1 .en{font-size:42px; letter-spacing:3.4px;}
html[data-lang="en"] .ttl.t2 .en{font-size:33px; letter-spacing:2.6px;}
html[data-lang="en"] .ttl.t3 .en{font-size:22px; letter-spacing:1.6px;}
html[data-lang="en"] .ttl.t4 .en{font-size:17.5px; letter-spacing:1.2px;}
html[data-lang="en"] .sec-reu .ttl .en,
html[data-lang="en"] .sec-nau .ttl .en,
html[data-lang="en"] .cta-band .ttl .en{color:var(--be-light);}
html[data-lang="en"] .hero-sig .ttl .en{color:var(--reu-dark);}
/* Chú thích tranh & tên dịch vụ */
html[data-lang="en"] .vignette figcaption .vi{display:none;}
html[data-lang="en"] .vignette figcaption .en{
  font-family:'Cormorant Garamond',serif; font-weight:700; text-transform:uppercase;
  color:var(--reu-dark); font-size:15px; font-style:normal;
}
html[data-lang="en"] .only-vi{display:none;}
html[data-lang="vi"] .only-en{display:none;}

@media(max-width:860px){
  html[data-lang="en"] .ttl.t-display .en{font-size:33px; letter-spacing:2.4px;}
  html[data-lang="en"] .ttl.t1 .en{font-size:27px;}
  html[data-lang="en"] .ttl.t2 .en{font-size:23px;}
}

/* ══════════════════════════════════════════════════════════
   DẢI TÍN HIỆU TIN CẬY
   ══════════════════════════════════════════════════════════ */
.trust{background:var(--reu-deep); color:var(--be); padding:26px 0;}
.trust .row{display:flex; justify-content:center; flex-wrap:wrap; gap:0;}
.trust .it{
  display:flex; align-items:center; gap:11px; padding:6px 26px;
  border-right:1px solid rgba(201,168,130,.22);
}
.trust .it:last-child{border-right:none;}
.trust .ico{color:var(--nau-sang); flex-shrink:0;}
.trust .tx b{
  display:block; font-family:'Cormorant Garamond',serif; font-size:19px;
  font-weight:700; color:var(--be-light); line-height:1.15; letter-spacing:.4px;
}
.trust .tx span{
  display:block; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--nau-sang); margin-top:2px;
}
@media(max-width:860px){
  .trust .row{gap:4px;}
  .trust .it{border-right:none; width:50%; padding:10px 12px; justify-content:flex-start;}
  .trust .tx b{font-size:16px;}
}

/* ══════════════════════════════════════════════════════════
   KHU CHỌN THẢO MỘC — điểm riêng của HIÊN
   ══════════════════════════════════════════════════════════ */
.hchoose{display:grid; grid-template-columns:1fr 340px; gap:34px; align-items:start;}
.hgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.hpick{
  background:var(--white); border:1px solid rgba(107,79,53,.16);
  padding:0 0 12px; cursor:pointer; text-align:center; overflow:hidden;
  transition:.18s; font-family:'Inter',Arial,sans-serif; position:relative;
}
.hpick img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:.2s;}
.hpick .n{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:15.5px; text-transform:uppercase; letter-spacing:.9px;
  color:var(--reu-dark); margin-top:10px;
}
.hpick .l{display:block; font-size:10.5px; font-style:italic; color:var(--nau); margin-top:1px;}
.hpick:hover{border-color:var(--dong); transform:translateY(-2px);}
.hpick.on{border-color:var(--reu-dark); border-width:2px; background:var(--be);}
.hpick.on::after{
  content:''; position:absolute; top:9px; right:9px; width:20px; height:20px;
  border-radius:50%; background:var(--reu-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF5EA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-size:12px; background-repeat:no-repeat; background-position:center;
}

.hbowl{
  background:var(--reu-deep); color:var(--be); padding:30px 26px;
  position:sticky; top:96px;
}
.hbowl h4{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:21px;
  text-transform:uppercase; letter-spacing:1.6px; color:var(--be-light);
}
.hbowl .sub{font-size:12.5px; font-style:italic; color:var(--nau-sang); margin-top:3px;}
.hbowl .line{height:1px; background:rgba(201,168,130,.3); margin:18px 0;}
.hempty{font-size:14px; color:var(--nau-sang); opacity:.85; line-height:1.7;}
.hlist{list-style:none;}
.hlist li{
  display:flex; align-items:flex-start; gap:9px; padding:8px 0;
  border-bottom:1px dotted rgba(201,168,130,.22); font-size:14px;
}
.hlist li:last-child{border-bottom:none;}
.hlist li .d{width:5px; height:5px; background:var(--nau-sang); transform:rotate(45deg); margin-top:8px; flex-shrink:0;}
.hlist li b{color:var(--be-light); font-weight:500;}
.hlist li em{display:block; font-style:normal; font-size:12.5px; color:var(--nau-sang); opacity:.9;}
.hbowl .cnt{
  font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--nau-sang);
  letter-spacing:1.4px; text-transform:uppercase; margin-bottom:12px;
}
.hbowl .btn{width:100%; justify-content:center; margin-top:18px;}
.hbowl .note{font-size:11.5px; color:var(--nau-sang); opacity:.75; margin-top:12px; line-height:1.6;}

@media(max-width:980px){
  .hchoose{grid-template-columns:1fr;}
  .hgrid{grid-template-columns:repeat(4,1fr);}
  .hbowl{position:static;}
}
@media(max-width:620px){ .hgrid{grid-template-columns:repeat(2,1fr);} }

/* ══════════════════════════════════════════════════════════
   HIỆN CHỮ TỪ DƯỚI LÊN
   Tiêu đề lớn trôi lên khi cuộn tới. Dòng Việt lên trước,
   dòng Anh theo sau một nhịp — như lật một trang giấy.
   Ai tắt hiệu ứng chuyển động trong hệ điều hành thì bỏ qua.
   ══════════════════════════════════════════════════════════ */
.ttl .vi, .ttl .en{
  will-change:transform, opacity;
}
.ttl.len .vi, .ttl.len .en{
  opacity:0; transform:translateY(26px);
}
.ttl.len.hien .vi{
  opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.22,.7,.3,1), transform .75s cubic-bezier(.22,.7,.3,1);
}
.ttl.len.hien .en{
  opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.22,.7,.3,1) .12s,
             transform .75s cubic-bezier(.22,.7,.3,1) .12s;
}
/* gạch trang trí và chữ dẫn đi cùng nhịp */
.sec-head .rule{transform-origin:center; transition:.7s cubic-bezier(.22,.7,.3,1) .2s;}
.sec-head.len .rule{transform:scaleX(0); opacity:0;}
.sec-head.len.hien .rule{transform:scaleX(1); opacity:1;}

@media (prefers-reduced-motion: reduce){
  .ttl.len .vi, .ttl.len .en, .sec-head.len .rule{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* Tiêu đề "Về HIÊN" — chữ "Về" nhỏ, HIÊN to */
.ttl .vi .nho{
  display:block; font-style:normal; font-weight:400;
  font-size:.30em; letter-spacing:.28em; line-height:1;
  margin-bottom:.18em; opacity:.72;
}

/* Khu chọn thảo mộc khi không còn cột "nồi nước" — dàn một cột */
.hchoose.mot-cot{grid-template-columns:1fr;}