/* ============================================================
   LUX MASSAGE — redesign design system (dark bronze / gold)
   Shared by every page. Real spa photography + GSAP motion.
   ============================================================ */
:root{
  --bg:#100b06; --bg2:#170f08; --bg3:#1e150c;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.02);
  --gold1:#eccf92; --gold2:#c9a15a; --gold3:#8a6a2f;
  --rose:#dcb8ad; --cream:#f3e9d9; --muted:#b3a48d; --dim:#7d715c;
  --line:rgba(201,161,90,.20); --line2:rgba(201,161,90,.35);
  --grad-gold:linear-gradient(135deg,var(--gold1),var(--gold2) 55%,var(--gold3));
  --shadow:0 34px 90px -34px rgba(0,0,0,.85);
  --r:22px; --maxw:1220px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--cream);overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;line-height:1.05;letter-spacing:-.015em}
.serif{font-family:'Fraunces',serif}
.script{font-family:'Fraunces',serif;font-style:italic;font-weight:500;letter-spacing:-.01em}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(28px,5vw,64px)}
.eyebrow{font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold2);font-weight:500;display:inline-block}

/* ambient */
.mesh{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(60% 50% at 12% 8%,rgba(201,161,90,.13),transparent 60%),
  radial-gradient(50% 45% at 92% 16%,rgba(220,184,173,.09),transparent 60%),
  radial-gradient(55% 60% at 72% 98%,rgba(138,106,47,.14),transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg2))}
.grain{position:fixed;inset:0;z-index:-1;opacity:.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:100px;font-size:13.5px;letter-spacing:.05em;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.4s var(--ease);position:relative;font-family:'Inter'}
.btn-gold{background:var(--grad-gold);color:#20160a;box-shadow:0 14px 36px -12px rgba(201,161,90,.6)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 24px 54px -14px rgba(201,161,90,.78)}
.btn-ghost{border-color:var(--line2);color:var(--cream);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold2);background:rgba(201,161,90,.09)}
.btn-sm{padding:11px 22px;font-size:12.5px}

/* NAV */
nav.lux-nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:.4s}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;max-width:1300px;margin:0 auto;transition:.4s}
.lux-nav.scrolled{background:rgba(16,11,6,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.lux-nav.scrolled .nav-in{padding:12px 26px}
.logo{font-family:'Fraunces',serif;font-size:23px;letter-spacing:.3em;font-weight:500;white-space:nowrap}
.logo b{font-weight:600}.logo .dot{color:var(--gold2)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links>a{font-size:13px;letter-spacing:.03em;color:var(--muted);transition:.3s;position:relative;padding:4px 0}
.nav-links>a::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--grad-gold);transition:.35s}
.nav-links>a:hover{color:var(--cream)}.nav-links>a:hover::after,.nav-links>a.active::after{width:100%}
.nav-links>a.active{color:var(--cream)}
.lang{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 12px;cursor:pointer}
.lang b{color:var(--gold1);font-weight:500}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.6px;background:var(--cream);transition:.3s}
.mobile-menu{position:fixed;inset:0;z-index:190;background:rgba(12,8,4,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;pointer-events:none;transition:.4s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Fraunces',serif;font-size:30px;color:var(--cream)}
@media(max-width:900px){.nav-links{display:none}.burger{display:flex}}

/* page hero banner (inner pages) */
.page-hero{position:relative;padding:170px 0 80px;text-align:center;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:brightness(.32) saturate(1.1)}
.page-hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,11,6,.6),var(--bg))}
.page-hero h1{font-size:clamp(42px,6vw,74px);margin:14px 0 10px}
.page-hero p{color:var(--muted);max-width:560px;margin:0 auto}
.crumb{font-size:12px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin-top:18px}
.crumb a{color:var(--gold2)}

/* sections */
.pad{padding-block:110px}.pad-sm{padding-block:72px}
.head-center{text-align:center;max-width:680px;margin:0 auto 58px}
.head-center h2{font-size:clamp(34px,4.6vw,56px);margin:14px 0 12px}
.head-center p{color:var(--muted)}

/* generic reveal */
.reveal{opacity:0;transform:translateY(34px)}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border:1px solid var(--line);border-radius:var(--r);padding:44px 28px;background:var(--panel);backdrop-filter:blur(10px)}
.stat{text-align:center}
.stat b{font-family:'Fraunces',serif;font-size:clamp(38px,5vw,58px);display:block;line-height:1}
.stat span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;gap:34px 20px}}

/* service cards */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{position:relative;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));backdrop-filter:blur(12px);transition:transform .3s,box-shadow .3s,border-color .3s;transform-style:preserve-3d;overflow:hidden}
.card:hover{border-color:var(--line2);box-shadow:0 44px 100px -46px rgba(201,161,90,.5)}
.card-glow::before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0),rgba(236,207,146,.14),transparent 45%);opacity:0;transition:.4s;pointer-events:none}
.card-glow:hover::before{opacity:1}
.svc-card{padding:38px 34px}
.pop{position:absolute;top:22px;right:22px;background:var(--grad-gold);color:#20160a;font-size:11px;letter-spacing:.1em;padding:6px 13px;border-radius:100px;font-weight:600;text-transform:uppercase}
.svc-card h3{font-size:34px;margin-bottom:4px}
.svc-card .sub{color:var(--rose);font-size:13.5px;letter-spacing:.04em}
.price{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px}
.price small{color:var(--muted);font-size:12px}.price b{font-family:'Fraunces',serif;font-size:40px;color:var(--cream)}.price em{color:var(--muted);font-style:normal;font-size:13px}
.feat{list-style:none;margin:22px 0 26px;border-top:1px solid var(--line);padding-top:20px}
.feat li{display:flex;gap:11px;padding:8px 0;font-size:14px;color:var(--muted)}.feat li i{color:var(--gold2);font-style:normal}
.svc-card .btn{width:100%;justify-content:center}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}

/* therapist cards — photo on top, readable info panel BELOW (not overlaid) */
.thr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){.thr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.thr-grid{grid-template-columns:1fr 1fr;gap:14px}}
.thr{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);transition:.35s var(--ease)}
.thr:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.thr-photo{aspect-ratio:3/4;position:relative;overflow:hidden}
.thr-photo img{width:100%;height:100%;object-fit:cover;transition:.6s var(--ease)}
.thr:hover .thr-photo img{transform:scale(1.05)}
.thr-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,2,.5),transparent 26%)}
.thr-badges{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;flex-wrap:wrap;gap:5px}
.thr-badges .tbadge{position:static!important;top:auto!important;right:auto!important;text-transform:none}
.thr-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:2px}
.thr-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.thr-name b{font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;color:var(--cream);line-height:1.2}
.thr-rate{color:var(--gold1);font-size:12px;white-space:nowrap;font-weight:500}
.thr-sub{color:var(--muted);font-size:11.5px;margin:2px 0 9px}
.thr-chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:3px 9px;background:var(--panel2)}
.chip.svc{color:var(--gold1);border-color:var(--line2)}
.chip b{color:var(--gold1);font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{text-align:center;padding:36px 24px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.step .num{font-family:'Fraunces',serif;font-size:56px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.step h3{font-size:23px;margin:8px 0}.step p{color:var(--muted);font-size:13.5px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* testimonials */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst{border:1px solid var(--line);border-radius:22px;padding:30px 28px;background:var(--panel);backdrop-filter:blur(10px)}
.tst .stars{color:var(--gold1);letter-spacing:3px;margin-bottom:14px}
.tst p{color:var(--cream);font-family:'Fraunces',serif;font-size:20px;line-height:1.42;margin-bottom:18px}
.tst .who{font-size:12.5px;color:var(--muted);letter-spacing:.08em}
@media(max-width:820px){.tst-grid{grid-template-columns:1fr}}

/* offer */
.offer{position:relative;border-radius:28px;overflow:hidden;padding:70px 40px;text-align:center;background:linear-gradient(120deg,#241a0d,#3a2b12 45%,#241a0d);border:1px solid var(--line)}
.offer .shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(236,207,146,.16) 50%,transparent 70%);transform:translateX(-100%);animation:sh 5s ease-in-out infinite}
@keyframes sh{0%,20%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.offer h2{font-size:clamp(32px,4.4vw,52px);position:relative}
.offer .tag{position:relative;font-family:'Fraunces',serif;font-size:80px;color:var(--gold1)}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;white-space:nowrap;background:rgba(0,0,0,.16)}
.marquee-track{display:inline-flex;gap:56px;animation:scrollx 28s linear infinite}
.marquee span{font-family:'Fraunces',serif;font-size:25px;color:var(--muted);letter-spacing:.05em;display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:'✦';color:var(--gold2);font-size:13px}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* CTA */
.cta-final{text-align:center;padding:120px 0}
.cta-final h2{font-size:clamp(40px,6vw,74px);margin-bottom:8px}
.cta-final .script{color:var(--rose);font-size:clamp(30px,4vw,50px);display:block}

/* forms (contact / booking) */
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--cream);font-family:'Inter';font-size:14px;transition:.3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold2);background:rgba(201,161,90,.06)}
.field select option{background:#1a120a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* booking stepper */
.stepper{display:flex;gap:8px;justify-content:center;margin-bottom:44px;flex-wrap:wrap}
.stepper .s{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13px}
.stepper .s b{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:'Fraunces',serif;font-size:16px}
.stepper .s.on{color:var(--cream)}.stepper .s.on b{background:var(--grad-gold);color:#20160a;border-color:transparent}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.pick-grid{grid-template-columns:1fr}}
.pick{border:1px solid var(--line);border-radius:16px;padding:24px;cursor:pointer;transition:.3s;background:var(--panel)}
.pick:hover,.pick.sel{border-color:var(--gold2);background:rgba(201,161,90,.08)}
.pick h4{font-size:22px;margin-bottom:4px}.pick p{font-size:13px;color:var(--muted)}

/* split feature (image + text) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-img{order:2}
.split-img{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:5/4;transform-style:preserve-3d}
.split-img img{width:100%;height:100%;object-fit:cover}
.split .tick{display:flex;gap:12px;align-items:flex-start;margin:12px 0;font-size:14.5px;color:var(--cream)}
.split .tick i{color:var(--gold2);font-style:normal;margin-top:2px}
.split h2{font-size:clamp(30px,4.2vw,50px);margin:12px 0 16px}
.split p{color:var(--muted);margin-bottom:16px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.rev .split-img{order:0}}

/* prose (policy pages) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:30px;margin:38px 0 14px;color:var(--cream)}
.prose h3{font-size:21px;margin:26px 0 10px;color:var(--gold1)}
.prose p,.prose li{color:var(--muted);margin-bottom:12px;font-size:15px}
.prose ul{padding-left:22px;margin-bottom:16px}.prose li{margin-bottom:8px}
.policy-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.policy-nav a{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:9px 18px;transition:.3s}
.policy-nav a:hover,.policy-nav a.active{border-color:var(--gold2);color:var(--cream);background:rgba(201,161,90,.08)}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;background:var(--panel);transition:.3s}
.contact-card:hover{border-color:var(--gold2);transform:translateY(-4px)}
.contact-card .ic{font-size:26px;margin-bottom:10px}
.contact-card b{display:block;font-family:'Fraunces',serif;font-size:20px;margin-bottom:4px}
.contact-card span{font-size:13px;color:var(--muted)}

/* footer */
footer.lux-foot{border-top:1px solid var(--line);padding:64px 0 30px;background:rgba(0,0,0,.24)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
.lux-foot h4{font-family:'Inter';font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-bottom:18px;font-weight:600}
.lux-foot a,.lux-foot p{color:var(--muted);font-size:13.5px;display:block;margin-bottom:10px;transition:.3s}
.lux-foot a:hover{color:var(--gold1)}
.f-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.f-disc{font-size:11.5px;color:#6b5f4d}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr;gap:30px}}

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

/* theme toggle button */
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;min-width:34px;border:1px solid var(--line);border-radius:50%;cursor:pointer;color:var(--gold1);font-size:15px;transition:.3s;background:transparent;user-select:none}
.theme-toggle:hover{border-color:var(--gold2);background:rgba(201,161,90,.09)}

/* ================= LIGHT THEME ================= */
html[data-theme="light"]{
  --bg:#f6efe3; --bg2:#fdf9f1; --bg3:#efe6d5;
  --panel:rgba(90,60,25,.05); --panel2:rgba(90,60,25,.02);
  --gold1:#a9762f; --gold2:#946128; --gold3:#7a5320;
  --rose:#b9776a; --cream:#3a2b16; --muted:#7c6a51; --dim:#a89577;
  --line:rgba(169,118,47,.24); --line2:rgba(169,118,47,.46);
  --shadow:0 30px 70px -34px rgba(120,90,50,.35);
}
html[data-theme="light"] .mesh{background:
  radial-gradient(60% 50% at 12% 8%,rgba(201,161,90,.16),transparent 60%),
  radial-gradient(50% 45% at 92% 16%,rgba(210,150,120,.10),transparent 60%),
  radial-gradient(55% 60% at 72% 98%,rgba(200,170,110,.18),transparent 60%),
  linear-gradient(180deg,var(--bg),var(--bg2))}
html[data-theme="light"] .grain{opacity:.025}
html[data-theme="light"] .lux-nav.scrolled{background:rgba(253,249,241,.84)}
html[data-theme="light"] .mobile-menu{background:rgba(250,244,234,.97)}
html[data-theme="light"] .btn-ghost{background:rgba(255,255,255,.55)}
html[data-theme="light"] .card{background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));box-shadow:0 22px 54px -32px rgba(120,90,50,.4)}
html[data-theme="light"] .stats,html[data-theme="light"] .step,html[data-theme="light"] .tst,html[data-theme="light"] .thr,html[data-theme="light"] .contact-card,html[data-theme="light"] .pick{background:rgba(255,255,255,.62)}
html[data-theme="light"] .marquee{background:rgba(120,90,50,.045)}
html[data-theme="light"] .lux-foot{background:rgba(120,90,50,.05)}
html[data-theme="light"] .offer{background:linear-gradient(120deg,#f3e7d3,#efdec6 45%,#f3e7d3)}
/* banner images: soft ivory wash instead of near-black */
html[data-theme="light"] .page-hero .bg{filter:brightness(1) saturate(1.05)}
html[data-theme="light"] .page-hero .bg::after{background:linear-gradient(180deg,rgba(253,249,241,.55),rgba(253,249,241,.82) 58%,var(--bg))}
/* LIGHT hero: photo becomes a faint accent so text is crisp on cream (was washed) */
html[data-theme="light"] .home-hero .hero-bg{filter:brightness(1.08) saturate(1.12);opacity:.34}
html[data-theme="light"] .home-hero::after{background:linear-gradient(90deg,var(--bg),rgba(250,244,233,.9) 42%,rgba(250,244,233,.62) 74%,rgba(250,244,233,.35)),linear-gradient(180deg,transparent 58%,var(--bg))}
html[data-theme="light"] .home-hero h1,html[data-theme="light"] .home-hero .hero-meta b{color:#2a1e10}
html[data-theme="light"] .home-hero p.lead{color:#5a4a34}
html[data-theme="light"] .home-hero .script{color:#c07d55}
html[data-theme="light"] .lux-nav .logo,html[data-theme="light"] .lux-nav .burger span{color:#2a1e10}
html[data-theme="light"] .lux-nav:not(.scrolled) .nav-in{background:linear-gradient(180deg,rgba(250,244,233,.72),transparent)}
/* inner page banners: same faint-photo treatment */
html[data-theme="light"] .page-hero .bg{filter:brightness(1.06) saturate(1.1);opacity:.4}
html[data-theme="light"] .page-hero .bg::after{background:linear-gradient(180deg,rgba(250,244,233,.6),var(--bg))}
html[data-theme="light"] .page-hero h1{color:#2a1e10}
/* chips readable on cream */
html[data-theme="light"] .chip{background:rgba(255,255,255,.75);border-color:rgba(169,118,47,.32);color:#6a5940}
html[data-theme="light"] .chip.svc{color:#946128;border-color:rgba(169,118,47,.5)}
html[data-theme="light"] .home-hero h1{color:#3a2b16}
html[data-theme="light"] .home-hero p.lead{color:#5a4a34}
/* therapist card text stays light (always on a dark photo gradient) */
html[data-theme="light"] .thr-info h3{color:#f6efe0}
html[data-theme="light"] .thr-city,html[data-theme="light"] .chip{color:#f2e8d6}
html[data-theme="light"] .chip b{color:#f4d79a}
/* form fields readable on light */
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff;color:#3a2b16}
html[data-theme="light"] .field select option{background:#fff}

/* ================= MOBILE UX POLISH ================= */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
@media(hover:none){
  .btn:active{transform:scale(.955)}
  .thr:active,.card:active,.pick:active,.contact-card:active,.policy-nav a:active,.step:active{transform:scale(.985)}
  .card-glow:hover::before{opacity:0}          /* no cursor-glow on touch */
  .thr:hover .thr-view{opacity:0}               /* no hover overlay on touch */
  .thr:hover .thr-photo img{transform:none}
}
/* sticky app-style Book bar (injected by lux.js on non-booking pages) */
.m-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(16,11,6,0),rgba(16,11,6,.94) 34%);
  backdrop-filter:blur(12px);align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(130%);transition:transform .45s var(--ease)}
.m-cta.show{transform:translateY(0)}
.m-cta .lbl{font-size:11.5px;color:var(--muted);line-height:1.3}
.m-cta .lbl b{display:block;font-family:'Fraunces',serif;font-size:18px;color:var(--cream)}
.m-cta .btn{padding:13px 26px;white-space:nowrap}
html[data-theme="light"] .m-cta{background:linear-gradient(180deg,rgba(253,249,241,0),rgba(253,249,241,.96) 34%)}
@media(max-width:900px){
  .m-cta{display:flex}
  body{padding-bottom:80px}
  .lux-nav.scrolled .nav-in{padding:10px 20px}
  .home-hero .inner{padding-top:104px}
  .pad{padding-block:76px}.pad-sm{padding-block:56px}
  .split{gap:26px}
}

/* ================= CITY GATE (real booking-app entry) ================= */
.citygate{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,7,3,.86);backdrop-filter:blur(16px)}
.citygate.show{display:flex}
.citygate-card{max-width:440px;width:100%;text-align:center;border:1px solid var(--line);border-radius:26px;
  padding:40px 30px calc(34px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#1b130b,#120d07);box-shadow:var(--shadow)}
.citygate .ic{font-size:34px;margin-bottom:10px}
.citygate h2{font-size:34px;margin-bottom:10px}
.citygate p{color:var(--muted);font-size:14px;margin-bottom:24px}
.citygate .cg-loc{width:100%;justify-content:center;margin-bottom:16px}
.citygate .cg-or{color:var(--dim);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.citygate .cg-cities{display:flex;flex-direction:column;gap:10px}
.cg-city{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:15px 18px;cursor:pointer;transition:.3s;background:rgba(255,255,255,.02);color:var(--cream);font-size:15px}
.cg-city:hover,.cg-city:active{border-color:var(--gold2);background:rgba(201,161,90,.09)}
.cg-city span{color:var(--gold1)}
html[data-theme="light"] .citygate{background:rgba(250,244,234,.9)}
html[data-theme="light"] .citygate-card{background:linear-gradient(180deg,#fff,#f6efe3)}

/* duration package price rows (home + services) */
.pkg-row{display:flex;gap:10px;margin:18px 0 6px}
.pk{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center;background:var(--panel)}
.pk span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pk b{font-family:'Fraunces',serif;font-size:21px;color:var(--cream);white-space:nowrap}
/* real chat-screenshot review gallery */
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
@media(max-width:900px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
.rev{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);cursor:zoom-in;transition:.35s var(--ease)}
.rev:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.rev img{width:100%;height:auto;display:block;background:#fff}
.rev-lb{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,5,2,.92);backdrop-filter:blur(8px);cursor:zoom-out}
.rev-lb.show{display:flex}
.rev-lb img{max-width:92vw;max-height:88vh;border-radius:14px;border:1px solid var(--line)}

/* circular spa photo strip (hero — like original luxmassage.vn) */
.photo-strip{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:4px 0 2px}
.circ{width:118px;height:118px;border-radius:50%;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow)}
.circ img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.circ{width:74px;height:74px}.photo-strip{gap:11px}}
/* staggered stat cards (like original) */
.stats.cards{border:none;background:none;padding:0;backdrop-filter:none}
.stats.cards .stat{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:30px 18px;backdrop-filter:blur(10px)}
@media(min-width:761px){
  .stats.cards{margin-bottom:70px}
  .stats.cards .stat:nth-child(2){transform:translateY(22px)}
  .stats.cards .stat:nth-child(3){transform:translateY(44px)}
  .stats.cards .stat:nth-child(4){transform:translateY(66px)}
}
/* filter bar → one swipeable row */
#filterbar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#filterbar::-webkit-scrollbar{display:none}
#filterbar a{white-space:nowrap;flex:0 0 auto}

/* ============ LIGHT THEME v2 — crisp Figma-style (authoritative, last wins) ============ */
html[data-theme="light"]{
  --bg:#f4efe7; --bg2:#faf7f1; --bg3:#efe8dc;
  --panel:#ffffff; --panel2:#faf7f1;
  --gold1:#a9762f; --gold2:#8f5f27; --gold3:#734d1f;
  --rose:#b56b58; --cream:#241a10; --muted:#6b5d4c; --dim:#a2917b;
  --line:rgba(120,92,54,.14); --line2:rgba(169,118,47,.42);
  --shadow:0 24px 60px -30px rgba(90,66,38,.30);
}
html[data-theme="light"] body{-webkit-font-smoothing:antialiased}
/* crisp WHITE cards + soft elevation */
html[data-theme="light"] .card,html[data-theme="light"] .thr,html[data-theme="light"] .stats.cards .stat,
html[data-theme="light"] .step,html[data-theme="light"] .tst,html[data-theme="light"] .contact-card,
html[data-theme="light"] .pick,html[data-theme="light"] .bk-step,html[data-theme="light"] .info-panel,
html[data-theme="light"] .incl-card,html[data-theme="light"] .automatch{background:#fff;border-color:rgba(120,92,54,.12);box-shadow:0 14px 40px -26px rgba(90,66,38,.35)}
html[data-theme="light"] .stats{background:#fff;border-color:rgba(120,92,54,.12)}
html[data-theme="light"] .btn-ghost{background:#fff;border-color:rgba(169,118,47,.4);color:#3a2b18}
html[data-theme="light"] .card{background:#fff}
/* chips clear on white */
html[data-theme="light"] .chip{background:#f8f3ea;border:1px solid rgba(120,92,54,.22);color:#5b4d3c}
html[data-theme="light"] .chip.svc{background:rgba(169,118,47,.09);color:#8f5f27;border-color:rgba(169,118,47,.42)}
html[data-theme="light"] .chip b{color:#8f5f27}
/* therapist card text on white */
html[data-theme="light"] .thr-name b{color:#241a10}
html[data-theme="light"] .thr-rate{color:#a9762f}
html[data-theme="light"] .thr-sub{color:#6b5d4c}
/* nav / footer / marquee / offer / mobile / gate */
html[data-theme="light"] .lux-nav.scrolled{background:rgba(255,255,255,.9);border-bottom:1px solid rgba(120,92,54,.12)}
html[data-theme="light"] .lux-nav .logo,html[data-theme="light"] .lux-nav .burger span{color:#241a10}
html[data-theme="light"] .lux-nav:not(.scrolled) .nav-in{background:transparent}
html[data-theme="light"] .mobile-menu{background:rgba(250,247,241,.98)}
html[data-theme="light"] .marquee{background:#fff;border-color:rgba(120,92,54,.1)}
html[data-theme="light"] .marquee span{color:#a2917b}
html[data-theme="light"] .lux-foot{background:#fbf8f2}
html[data-theme="light"] .offer{background:linear-gradient(120deg,#fbf3e6,#f6ead6);border-color:rgba(169,118,47,.25)}
html[data-theme="light"] .m-cta{background:linear-gradient(180deg,rgba(250,247,241,0),rgba(250,247,241,.97) 34%)}
html[data-theme="light"] .citygate{background:rgba(244,239,231,.92)}
html[data-theme="light"] .citygate-card{background:#fff}
/* HERO crisp — photo faint, text sharp */
html[data-theme="light"] .home-hero .hero-bg{filter:brightness(1.06) saturate(1.1);opacity:.2}
html[data-theme="light"] .home-hero::after{background:linear-gradient(90deg,var(--bg),rgba(244,239,231,.86) 46%,rgba(244,239,231,.5) 78%),linear-gradient(180deg,transparent 60%,var(--bg))}
html[data-theme="light"] .home-hero h1{color:#1f160c}
html[data-theme="light"] .home-hero p.lead{color:#4f4433}
html[data-theme="light"] .home-hero .script{color:#b56b58}
html[data-theme="light"] .home-hero .hero-meta b{color:#241a10}
html[data-theme="light"] .page-hero .bg{filter:brightness(1.05) saturate(1.08);opacity:.18}
html[data-theme="light"] .page-hero .bg::after{background:linear-gradient(180deg,rgba(244,239,231,.5),var(--bg))}
html[data-theme="light"] .page-hero h1{color:#1f160c}
/* forms */
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff;color:#241a10;border-color:rgba(120,92,54,.2)}

/* ---- light-theme fixes: readable gold buttons + stronger chips ---- */
html[data-theme="light"] .btn-gold{color:#fffaf2}
html[data-theme="light"] .btn-gold:hover{color:#fffaf2}
html[data-theme="light"] .pop{color:#fffaf2}
html[data-theme="light"] .tbadge.rec{color:#20160a} /* on dark photo overlay — keep dark */
html[data-theme="light"] .m-cta .lbl{color:#6b5d4c}
html[data-theme="light"] .chip{background:#f1e9db;border:1px solid rgba(120,92,54,.32);color:#453927}
html[data-theme="light"] .chip.svc{background:rgba(169,118,47,.13);color:#7a5320;border-color:rgba(169,118,47,.52)}
html[data-theme="light"] .chip b{color:#7a5320}
/* dark theme: ensure gold buttons keep dark ink (unchanged, explicit) */
html:not([data-theme="light"]) .btn-gold{color:#20160a}

/* real brand logo (wordmark image) */
.logo-img{height:26px;width:auto;display:block}
.lux-foot .logo-img{height:24px}
html:not([data-theme="light"]) .logo-img{filter:brightness(0) invert(1) opacity(.92)} /* white on dark */
html[data-theme="light"] .logo-img{filter:none} /* real brown on cream */
@media(max-width:600px){.logo-img{height:22px}}

/* logo = text wordmark matching CURRENT luxmassage.vn ("Lux" script + MASSAGE) */
.logo .lux{font-style:italic;font-weight:500;font-size:1.2em;letter-spacing:-.01em;text-transform:none;margin-right:.05em}
.foot-tag{font-family:'Fraunces',serif;font-style:italic;color:var(--gold1);font-size:15px;margin-top:8px}

/* ===== logo (Lux script gold + MASSAGE caps) matching luxmassage.vn ===== */
.logo{display:inline-flex;align-items:baseline;gap:3px;font-family:'Fraunces',serif;font-weight:500;letter-spacing:.26em;font-size:19px}
.logo .lux{font-family:'Great Vibes',cursive;font-weight:400;font-style:normal;font-size:2.05em;letter-spacing:0;color:var(--gold2);text-transform:none;line-height:.8;transform:translateY(.06em)}
html:not([data-theme="light"]) .logo .lux{color:var(--gold1)}
.lux-foot .logo{font-size:18px}

/* ===== floating PILL header ===== */
.nav-in{margin:14px auto 0;max-width:1170px;border:1px solid var(--line);border-radius:100px;
  background:rgba(22,15,9,.5);backdrop-filter:blur(16px);box-shadow:0 18px 44px -26px rgba(0,0,0,.7);
  padding:10px 16px 10px 26px}
.lux-nav.scrolled{background:transparent;border-bottom:none}
.lux-nav.scrolled .nav-in{margin-top:8px;background:rgba(22,15,9,.66)}
html[data-theme="light"] .nav-in{background:rgba(255,255,255,.74);box-shadow:0 18px 48px -26px rgba(90,66,38,.4)}
html[data-theme="light"] .lux-nav.scrolled .nav-in{background:rgba(255,255,255,.88)}
html[data-theme="light"] .lux-nav:not(.scrolled) .nav-in{background:rgba(255,255,255,.74)} /* override old rule */
@media(max-width:600px){.nav-in{margin:10px 12px 0;padding:9px 12px 9px 18px}}

/* Reviews "Reviews About Us" — chat screenshots sliding left continuously */
.rev-marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rev-track{display:flex;gap:16px;width:max-content;animation:revscroll 48s linear infinite}
.rev-marquee:hover .rev-track{animation-play-state:paused}
.rev-track .rev{flex:0 0 auto;width:210px;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;cursor:zoom-in;transition:.3s}
.rev-track .rev:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rev-track .rev img{width:210px;height:auto;display:block}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.rev-track .rev,.rev-track .rev img{width:160px}}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* review modal (View all) + review meta */
.tst .who{line-height:1.4}
.rev-modal{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,5,2,.82);backdrop-filter:blur(8px)}
.rev-modal.show{display:flex}
.rev-modal-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:26px 26px 30px;box-shadow:var(--shadow)}
html[data-theme="light"] .rev-modal-card{background:#fff}
.rev-modal-card h3{font-size:26px;margin-bottom:2px}
.rev-modal-close{float:right;cursor:pointer;font-size:20px;color:var(--muted);line-height:1;padding:2px 6px}
.rev-item{border-bottom:1px solid var(--line);padding:16px 0}
.rev-item:last-child{border-bottom:0}
.rev-item .stars{color:var(--gold1);letter-spacing:2px;font-size:13px}
.rev-item p{color:var(--cream);margin:7px 0 5px;font-family:'Fraunces',serif;font-size:17.5px;line-height:1.42}
.rev-item .meta{color:var(--muted);font-size:12px;letter-spacing:.02em}

/* header pill = TRANSPARENT glass (see-through, floating) like luxmassage.vn */
.nav-in{background:rgba(22,15,9,.28)!important;backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.14)}
.lux-nav.scrolled .nav-in{background:rgba(22,15,9,.5)!important}
html[data-theme="light"] .nav-in{background:rgba(255,255,255,.42)!important;border:1px solid rgba(120,92,54,.16);box-shadow:0 14px 40px -26px rgba(90,66,38,.3)}
html[data-theme="light"] .lux-nav.scrolled .nav-in{background:rgba(255,255,255,.68)!important}

/* review 4-criteria breakdown */
.rating-sum{display:grid;grid-template-columns:auto 1fr;gap:20px 26px;align-items:center;border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:24px 26px;margin-bottom:30px}
html[data-theme="light"] .rating-sum{background:#fff;box-shadow:0 14px 40px -26px rgba(90,66,38,.3)}
.rating-big{text-align:center;padding-right:22px;border-right:1px solid var(--line)}
.rating-big b{font-family:'Fraunces',serif;font-size:52px;line-height:1;display:block;color:var(--cream)}
.rating-big .stars{color:var(--gold1);letter-spacing:2px;font-size:14px;margin:4px 0}
.rating-big span{color:var(--muted);font-size:12px}
.rating-bars{display:flex;flex-direction:column;gap:9px}
.rbar{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rbar .track{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.rbar .fill{height:100%;background:var(--grad-gold);border-radius:6px}
.rbar b{color:var(--cream);text-align:right;font-family:'Fraunces',serif;font-size:14px}
@media(max-width:560px){.rating-sum{grid-template-columns:1fr;gap:16px}.rating-big{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}.rbar{grid-template-columns:88px 1fr 30px}}

/* make criteria bars visible (solid gold fill + clearer track) */
.rbar .track{background:rgba(120,92,54,.14)}
html:not([data-theme="light"]) .rbar .track{background:rgba(255,255,255,.1)}
.rbar .fill{background:linear-gradient(90deg,var(--gold2),var(--gold1))!important;min-width:6px;box-shadow:0 0 0 .5px rgba(0,0,0,.03)}

/* reviews marquee: show ~3 bigger tiles (less dense) */
.rev-track{gap:18px}
.rev-track .rev{width:clamp(150px,30vw,230px)}
.rev-track .rev img{width:100%;height:300px;object-fit:cover;object-position:top}
@media(max-width:600px){.rev-track .rev{width:30vw}.rev-track .rev img{height:250px}}

/* header pill TRANSPARENT (no fill at top — just outline + glass blur) */
.nav-in{background:transparent!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.16)!important;backdrop-filter:blur(8px)}
html[data-theme="light"] .nav-in{border:1px solid rgba(120,92,54,.22)!important}
.lux-nav.scrolled .nav-in{background:rgba(22,15,9,.42)!important;backdrop-filter:blur(18px)}
html[data-theme="light"] .lux-nav.scrolled .nav-in{background:rgba(255,255,255,.62)!important;box-shadow:0 14px 40px -26px rgba(90,66,38,.3)!important}

/* ===== Lux Concierge chat widget ===== */
.lux-chat-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:170;width:56px;height:56px;border-radius:50%;background:var(--grad-gold);color:#20160a;border:none;cursor:pointer;box-shadow:0 14px 34px -10px rgba(201,161,90,.6);display:grid;place-items:center;font-size:23px;transition:.3s}
.lux-chat-btn:hover{transform:scale(1.06)}
@media(max-width:900px){.lux-chat-btn{bottom:calc(86px + env(safe-area-inset-bottom))}}
.lux-chat-panel{position:fixed;right:18px;bottom:84px;z-index:171;width:344px;max-width:calc(100vw - 36px);height:min(520px,72vh);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;backdrop-filter:blur(18px)}
html[data-theme="light"] .lux-chat-panel{background:#fff}
@media(max-width:900px){.lux-chat-panel{bottom:150px}}
.lux-chat-panel.open{display:flex}
.lc-head{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.lc-head .av{width:34px;height:34px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;color:#20160a;font-size:16px;flex:0 0 auto}
.lc-head b{font-family:'Fraunces',serif;font-size:16px;display:block;line-height:1.1}.lc-head small{color:var(--muted);font-size:11px}
.lc-close{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px}
.lc-body{flex:1;overflow:auto;padding:15px;display:flex;flex-direction:column;gap:9px}
.lc-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.46}
.lc-msg.bot{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--cream)}
html[data-theme="light"] .lc-msg.bot{background:#f6f0e6}
.lc-msg.user{background:var(--grad-gold);color:#20160a;align-self:flex-end;border-bottom-right-radius:4px}
.lc-msg a{color:var(--gold1);text-decoration:underline}
html[data-theme="light"] .lc-msg.bot a{color:#8f5f27}
.lc-qr{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 12px}
.lc-qr button{background:transparent;border:1px solid var(--line2);color:var(--gold1);border-radius:100px;padding:7px 12px;font-size:11.5px;cursor:pointer;font-family:'Inter'}
html[data-theme="light"] .lc-qr button{color:#8f5f27}
.lc-qr button:hover{background:rgba(201,161,90,.1)}
.lc-input{display:flex;gap:8px;padding:11px 13px;border-top:1px solid var(--line)}
.lc-input input{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:100px;padding:10px 14px;color:var(--cream);font-size:13px;font-family:'Inter'}
html[data-theme="light"] .lc-input input{background:#faf6ee;color:#241a10}
.lc-input button{background:var(--grad-gold);border:none;border-radius:50%;width:38px;height:38px;min-width:38px;color:#20160a;cursor:pointer;font-size:16px}

/* FINAL: no pill container — fully transparent header like luxmassage.vn (only buttons are pills) */
.nav-in{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;margin:0 auto!important;max-width:1300px!important;padding:22px 26px!important}
.lux-nav.scrolled .nav-in{padding:12px 26px!important}
.lux-nav.scrolled{background:rgba(22,15,9,.66);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
html[data-theme="light"] .lux-nav.scrolled{background:rgba(250,247,241,.85);border-bottom:1px solid rgba(120,92,54,.12)}

/* FINAL v2: SOLID crisp pill like luxmassage.vn mobile (white pill, stands out, floating) */
.nav-in{background:#ffffff!important;border:1px solid rgba(120,92,54,.10)!important;border-radius:100px!important;box-shadow:0 14px 40px -18px rgba(90,66,38,.30)!important;backdrop-filter:none!important;margin:14px auto 0!important;max-width:1150px!important;padding:11px 16px 11px 26px!important}
html:not([data-theme="light"]) .nav-in{background:#1b130b!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 16px 44px -22px rgba(0,0,0,.7)!important}
.lux-nav.scrolled .nav-in{margin-top:8px!important}
@media(max-width:600px){.nav-in{margin:10px 12px 0!important;padding:10px 12px 10px 18px!important}}

/* testimonials: fewer, bigger sliding images (less busy) + slower */
.rev-track{gap:20px;animation-duration:60s}
.rev-track .rev{width:clamp(200px,44vw,300px)}
.rev-track .rev img{height:auto}
@media(max-width:600px){.rev-track .rev{width:44vw}.rev-track .rev img{height:auto}}

/* ===== PILL BEHAVIOR (authoritative, matches luxmassage.vn) ===== */
/* Desktop: TRANSPARENT at top → floating WHITE PILL on scroll */
.nav-in{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;margin:0 auto!important;max-width:1300px!important;padding:24px 40px!important;transition:background .35s,padding .35s,margin .35s,box-shadow .35s,border-radius .35s}
.lux-nav.scrolled{background:transparent!important;border-bottom:none!important}
.lux-nav.scrolled .nav-in{background:#fff!important;border:1px solid rgba(120,92,54,.10)!important;border-radius:100px!important;box-shadow:0 16px 44px -20px rgba(90,66,38,.34)!important;margin:12px auto 0!important;max-width:1150px!important;padding:11px 16px 11px 28px!important}
html:not([data-theme="light"]) .lux-nav.scrolled .nav-in{background:#1b130b!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 18px 46px -22px rgba(0,0,0,.7)!important}
/* Mobile: WHITE PILL always (like luxmassage mobile) */
@media(max-width:900px){
 .nav-in{background:#fff!important;border:1px solid rgba(120,92,54,.10)!important;border-radius:100px!important;box-shadow:0 14px 40px -18px rgba(90,66,38,.3)!important;margin:10px 12px 0!important;padding:10px 12px 10px 18px!important}
 html:not([data-theme="light"]) .nav-in{background:#1b130b!important;border-color:rgba(255,255,255,.09)!important}
}

/* testimonials slider: 2 big images (match luxmassage.vn) */
.rev-track{gap:22px;animation-duration:55s}
.rev-track .rev{width:clamp(240px,46vw,340px)!important;border-radius:18px}
.rev-track .rev img{height:auto!important}
@media(max-width:600px){.rev-track .rev{width:70vw!important}}

/* testimonials 2-column: LEFT heading+About, RIGHT sliding images (like luxmassage.vn desktop) */
.testi-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px;align-items:center}
.testi-left h2{font-size:clamp(34px,4.4vw,54px);margin:12px 0 14px}
.testi-left p{color:var(--muted);margin-bottom:26px;max-width:340px}
.testi-right{overflow:hidden}
.testi-right .rev-track .rev{width:190px!important}
.testi-right .rev-track .rev img{height:340px!important;object-fit:cover;object-position:top}
@media(max-width:820px){.testi-grid{grid-template-columns:1fr;gap:26px;text-align:center}.testi-left p{margin-left:auto;margin-right:auto}.testi-right .rev-track .rev{width:60vw!important}.testi-right .rev-track .rev img{height:auto!important}}

/* PILL = frosted glass (transparent, see blurred content through — not opaque) */
.lux-nav.scrolled .nav-in{background:rgba(255,255,255,.42)!important;backdrop-filter:blur(24px) saturate(1.6)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 16px 44px -24px rgba(90,66,38,.28)!important}
html:not([data-theme="light"]) .lux-nav.scrolled .nav-in{background:rgba(22,15,9,.32)!important;backdrop-filter:blur(24px) saturate(1.4)!important;border:1px solid rgba(255,255,255,.12)!important}
@media(max-width:900px){
 .nav-in{background:rgba(255,255,255,.42)!important;backdrop-filter:blur(24px) saturate(1.6)!important;border:1px solid rgba(255,255,255,.5)!important}
 html:not([data-theme="light"]) .nav-in{background:rgba(22,15,9,.34)!important;backdrop-filter:blur(24px)!important;border:1px solid rgba(255,255,255,.12)!important}
}

/* ===== FINAL FIX: pill SOLID (colored), nav bar around/under it TRANSPARENT ===== */
/* the full-width nav bar behind the pill = fully transparent (show page content) */
.lux-nav,.lux-nav.scrolled{background:transparent!important;border:none!important;border-bottom:none!important;box-shadow:none!important;backdrop-filter:none!important}
/* the PILL itself = SOLID colour (revert, NOT glass) */
.lux-nav.scrolled .nav-in{background:#ffffff!important;backdrop-filter:none!important;border:1px solid rgba(120,92,54,.1)!important;box-shadow:0 16px 44px -20px rgba(90,66,38,.32)!important}
html:not([data-theme="light"]) .lux-nav.scrolled .nav-in{background:#1b130b!important;border-color:rgba(255,255,255,.09)!important}
@media(max-width:900px){
 .nav-in{background:#ffffff!important;backdrop-filter:none!important;border:1px solid rgba(120,92,54,.1)!important;box-shadow:0 14px 40px -18px rgba(90,66,38,.3)!important}
 html:not([data-theme="light"]) .nav-in{background:#1b130b!important;border-color:rgba(255,255,255,.09)!important}
}

/* testimonials: widen text col, shrink image col → "Reviews About Us" on ONE line */
.testi-grid{grid-template-columns:1.05fr .95fr!important;gap:36px!important}
.testi-left h2{font-size:clamp(30px,3.4vw,46px)!important;white-space:nowrap}
.testi-right .rev-track .rev{width:170px!important}
@media(max-width:820px){.testi-grid{grid-template-columns:1fr!important}.testi-left h2{white-space:normal;font-size:clamp(32px,8vw,44px)!important}.testi-right .rev-track .rev{width:58vw!important}}

/* testimonials left column: pad in from the outer edge */
.testi-left{padding-left:clamp(0px,4vw,60px)}
@media(max-width:820px){.testi-left{padding-left:0}}

/* ===== DEFINITIVE: pill fully SOLID (opaque, no glass); nav bar stays transparent ===== */
html .lux-nav .nav-in,html .lux-nav.scrolled .nav-in{
  background:#ffffff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(120,92,54,.1)!important;border-radius:100px!important;
  box-shadow:0 16px 44px -20px rgba(90,66,38,.32)!important;margin:12px auto 0!important;max-width:1160px!important;padding:11px 16px 11px 28px!important}
html:not([data-theme="light"]) .lux-nav .nav-in,html:not([data-theme="light"]) .lux-nav.scrolled .nav-in{background:#1b130b!important;border-color:rgba(255,255,255,.09)!important}
@media(max-width:600px){html .lux-nav .nav-in{margin:10px 12px 0!important;padding:10px 12px 10px 18px!important}}

/* override the old light-theme .62 rule → pill fully SOLID in light (top + scroll) */
html[data-theme="light"] .lux-nav .nav-in,
html[data-theme="light"] .lux-nav.scrolled .nav-in{background:#ffffff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid rgba(120,92,54,.1)!important}

/* ===== Stat cards — thin gold icon on top + warmer cream card (match luxmassage.vn "sang") ===== */
.stats.cards .stat{position:relative;padding-top:26px!important}
.stat-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto 14px;color:#c9a15a}
.stat-ic svg{width:30px;height:30px}
html[data-theme="light"] .stat-ic{color:#a9823f}
html[data-theme="light"] .stats.cards .stat{background:#fdf9f1!important;border:1px solid rgba(120,92,54,.13)!important;box-shadow:0 22px 54px -30px rgba(90,66,38,.42)!important}

/* ===== Stats — 1:1 replica of luxmassage.vn .value-blocks ===== */
.value-blocks-row{display:flex;gap:20px;justify-content:center;max-width:1300px;margin:0 auto;flex-wrap:wrap}
.value-block-card{flex:1 1 0;min-width:220px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 24px;border-radius:20px;background:rgba(95,71,29,.10);border:1px solid rgba(95,71,29,.15);box-shadow:none}
.value-icon{margin-bottom:18px;line-height:0}
.value-icon-img{width:50px;height:50px;object-fit:contain}
.value-number{font-family:'Playfair Display',serif;font-size:48px;font-weight:500;line-height:1.15;color:#5f471d}
.value-number-text{font-family:inherit}
.value-label{font-family:'Be Vietnam Pro',sans-serif;font-size:14.4px;font-weight:500;color:#5f471d;margin-top:6px}
/* dark-theme fallback (this site has a toggle; luxmassage.vn is light-only) */
html:not([data-theme="light"]) .value-block-card{background:rgba(255,255,255,.045);border-color:rgba(201,161,90,.22)}
html:not([data-theme="light"]) .value-number{color:#e9c078}
html:not([data-theme="light"]) .value-label{color:#c9b38f}
html:not([data-theme="light"]) .value-icon-img{filter:brightness(0) saturate(100%) invert(78%) sepia(38%) saturate(560%) hue-rotate(347deg) brightness(92%) contrast(88%)}
@media(max-width:760px){.value-block-card{flex:1 1 40%;padding:36px 16px}.value-number{font-size:38px}}

/* stagger staircase + italic numbers — final 1:1 match to luxmassage.vn */
.value-blocks-row{align-items:flex-start}
.value-number{font-style:italic}
@media(min-width:761px){
  .value-block-card:nth-child(2){margin-top:60px}
  .value-block-card:nth-child(3){margin-top:120px}
  .value-block-card:nth-child(4){margin-top:180px}
}

/* Review 4-criteria bars — vivid gold fill on a faint track so the bar clearly
   reads as "filled" (the old earth-gold blended into the tan track). */
.rbar .track{height:8px!important;background:rgba(120,92,54,.10)!important;border-radius:8px}
.rbar .fill{display:block!important;height:100%;background:linear-gradient(90deg,#c0871a,#e8bd55)!important;border-radius:8px;min-width:8px;box-shadow:0 1px 3px -1px rgba(160,110,20,.5)}
html:not([data-theme="light"]) .rbar .track{background:rgba(255,255,255,.10)!important}
html:not([data-theme="light"]) .rbar .fill{background:linear-gradient(90deg,#c9a15a,#eccf92)!important}

/* ============================================================
   MOBILE POLISH PASS (2026-08-26) — calmer type, more edge
   breathing room, tighter vertical rhythm. Phones ≤600 / ≤400.
   Desktop (≥601) is untouched.
   ============================================================ */
@media(max-width:600px){
  /* more comfortable side gutter everywhere */
  .container{padding:0 30px}
  /* eyebrows: shorter tracking so city lists / labels don't wrap tight to the edge */
  .eyebrow{letter-spacing:.22em;font-size:10px}
  /* inner-page hero: kill the excessive top gap + right-size the title */
  .page-hero{padding:118px 0 52px}
  .page-hero h1{font-size:clamp(33px,8.4vw,44px)}
  .page-hero p{font-size:15px;padding:0 4px}
  /* section rhythm: less cavernous on a phone */
  .pad{padding-block:64px}.pad-sm{padding-block:44px}
  .head-center{margin:0 auto 38px}
  .head-center h2{font-size:clamp(27px,7.4vw,38px)}
  /* home hero: scale the display type so lines don't jam both edges */
  .home-hero h1{font-size:clamp(38px,9.6vw,54px)!important;max-width:16ch}
  .home-hero .script{font-size:clamp(34px,8.6vw,48px)!important}
  .home-hero p.lead{font-size:15.5px;margin:18px 0 30px}
  .home-hero .inner{padding-top:112px;padding-bottom:52px}
  .hero-meta{gap:20px;margin-top:26px}
  /* media blocks: keep a clear rounded frame inside the gutter */
  .split-img{border-radius:18px}
  .thr-photo{border-radius:18px}
}
@media(max-width:400px){
  .container{padding:0 26px}
  .home-hero h1{font-size:36px!important}
  .home-hero .script{font-size:32px!important}
  .page-hero h1{font-size:31px}
  .head-center h2{font-size:26px}
}

/* ===== Mobile: COMPACT — owner wants it tighter (too much margin/whitespace) ===== */
@media(max-width:600px){
  .container{padding:0 24px}
  /* the hero wasted almost a full screen of empty space (min-height:100vh +
     120px top padding + vertical centering) → collapse to content height. */
  .home-hero{min-height:auto}
  .home-hero .inner{padding:98px 24px 44px}
  /* tighten vertical rhythm so pages read denser, less airy */
  .pad{padding-block:54px}
  .pad-sm{padding-block:36px}
  .page-hero{padding:96px 0 52px}
  .head-center{margin-bottom:34px}
  /* two 60/90 price boxes still fit (tighter gutter gives the card more room) */
  .svc-card{padding:30px 20px}
  .pk{padding:12px 10px;min-width:0}
  .pk b{font-size:19px}
}
@media(max-width:400px){
  .container{padding:0 22px}
}

/* page-hero + cta-final content is NOT wrapped in .container, and their
   `padding:Npx 0` shorthand zeroed the horizontal gutter → give them the same
   inline gutter directly (this longhand wins over the shorthand above). */
.page-hero,.cta-final{padding-inline:clamp(28px,5vw,64px)}
@media(max-width:600px){ .page-hero,.cta-final{padding-inline:24px} }

/* ===== Mobile header — burger LEFT · logo CENTER · circular Book button RIGHT (match luxmassage.vn) ===== */
.m-book{display:none}
@media(max-width:900px){
  /* slimmer, softer, more elegant pill */
  html .lux-nav .nav-in{padding:8px 12px 8px 14px!important;box-shadow:0 12px 36px -20px rgba(90,66,38,.4)!important;border-color:rgba(120,92,54,.06)!important}
  .lux-nav .burger{order:1;display:flex;min-width:42px;align-items:center}
  .lux-nav .logo{order:2;flex:1 1 auto;justify-content:center;text-align:center;letter-spacing:.2em}
  .m-book{order:3;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#7c5c27,#59401a);color:#fff;
    box-shadow:0 9px 20px -8px rgba(95,71,29,.55);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
  .m-book svg{width:19px;height:19px}
  .m-book:active{transform:scale(.9)}
  .m-book:hover{transform:translateY(-1.5px);box-shadow:0 15px 28px -8px rgba(95,71,29,.7)}
  html:not([data-theme="light"]) .m-book{background:linear-gradient(140deg,#caa25a,#a9823f);color:#1b130b}
}
@media(max-width:600px){
  html .lux-nav .nav-in{padding:7px 11px 7px 13px!important;margin:10px 12px 0!important}
  .lux-nav .logo{font-size:18px!important}
  .m-book{width:40px;height:40px}
}

/* ===== Book button: solid brown, bigger, soft shadow (match luxmassage.vn) ===== */
@media(max-width:900px){
  .m-book{width:48px!important;height:48px!important;background:#5f471d!important;box-shadow:0 10px 26px 0 rgba(95,71,29,.22)!important}
  .m-book svg{width:21px;height:21px}
  html:not([data-theme="light"]) .m-book{background:#caa25a!important;color:#1b130b}
}
@media(max-width:600px){ .m-book{width:46px!important;height:46px!important} }

/* ===== Nav: hide on scroll-down / show on scroll-up; hide entirely while menu open ===== */
.lux-nav{transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.lux-nav.nav-hidden{transform:translateY(-175%)}
body.menu-open{overflow:hidden}
body.menu-open .lux-nav{opacity:0;transform:translateY(-175%);pointer-events:none}

/* ===== Mobile menu — full-screen cream overlay ===== */
.mobile-menu{position:fixed!important;inset:0!important;z-index:300;display:flex!important;flex-direction:column!important;
  align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
  padding:60px clamp(24px,7vw,40px) 32px!important;overflow-y:auto;
  background:#faf5ec!important;color:#3a2b16;backdrop-filter:none!important;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .4s ease,transform .4s ease}
html:not([data-theme="light"]) .mobile-menu{background:#17100a!important;color:var(--cream)}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mm-close{position:absolute;top:20px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:#3a2b16;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px -12px rgba(90,66,38,.4)}
html:not([data-theme="light"]) .mm-close{background:rgba(255,255,255,.08);color:var(--cream)}
.mm-close svg{width:20px;height:20px}
.mm-nav{display:flex;flex-direction:column;margin-top:22px}
.mm-nav a{display:flex;align-items:baseline;gap:16px;padding:18px 2px;font-family:'Fraunces',serif;font-size:25px;
  font-weight:500;letter-spacing:-.01em;border-top:1px solid var(--line);color:inherit;text-decoration:none;
  transition:color .25s,padding .25s,opacity .5s,transform .5s;opacity:0;transform:translateX(16px)}
.mm-nav a:last-child{border-bottom:1px solid var(--line)}
.mm-nav a:active,.mm-nav a:hover{color:var(--gold3);padding-left:8px}
.mm-num{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold2);flex:none;width:22px}
.mobile-menu.open .mm-nav a{opacity:1;transform:none}
.mobile-menu.open .mm-nav a:nth-child(1){transition-delay:.05s}
.mobile-menu.open .mm-nav a:nth-child(2){transition-delay:.1s}
.mobile-menu.open .mm-nav a:nth-child(3){transition-delay:.15s}
.mobile-menu.open .mm-nav a:nth-child(4){transition-delay:.2s}
.mobile-menu.open .mm-nav a:nth-child(5){transition-delay:.25s}
.mobile-menu.open .mm-nav a:nth-child(6){transition-delay:.3s}
.mm-lang{margin-top:28px}
.mm-lang-lbl{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mm-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-lang-grid button{padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff;color:inherit;
  font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;transition:.25s;font-family:'Inter',sans-serif}
html:not([data-theme="light"]) .mm-lang-grid button{background:rgba(255,255,255,.05)}
.mm-lang-grid button.active{background:#5f471d;color:#fff;border-color:#5f471d}
.mm-book{margin-top:26px!important;width:100%;justify-content:center;padding:17px!important;font-size:15px;gap:8px}
.mm-social{display:flex;gap:14px;justify-content:center;margin-top:26px}
.mm-social a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--gold3);background:rgba(255,255,255,.6);transition:.25s}
.mm-social a:active{transform:scale(.92)}
html:not([data-theme="light"]) .mm-social a{background:rgba(255,255,255,.05);color:var(--gold1)}
.mm-social svg{width:20px;height:20px}
.mm-copy{text-align:center;font-size:11px;color:var(--muted);margin-top:18px;letter-spacing:.03em}
@media(min-width:901px){ .mobile-menu{display:none!important} }

/* ===== Menu tightened so Book Now fits without scroll + language flags ===== */
.mobile-menu{padding-top:52px!important;padding-bottom:26px!important;justify-content:flex-start!important}
.mm-nav{margin-top:16px!important}
.mm-nav a{padding:14px 2px!important;font-size:22px!important}
.mm-lang{margin-top:20px!important}
.mm-lang-lbl{margin-bottom:9px!important}
.mm-lang-grid button{display:flex;align-items:center;gap:9px;padding:12px 13px!important;font-size:13px!important}
.mm-flag{font-size:17px;line-height:1;flex:none}
.mm-book{margin-top:20px!important;padding:16px!important}
.mm-social{margin-top:18px!important}
.mm-social a{width:42px;height:42px}
.mm-copy{margin-top:14px!important}
/* neutralize the unused hide-on-scroll rule (pill now always follows) */
.lux-nav.nav-hidden{transform:none}

/* ===== Mobile pill: compact, fit-content, centered (1:1 luxmassage.vn) ===== */
@media(max-width:900px){
  html .lux-nav .nav-in{width:-moz-fit-content!important;width:fit-content!important;max-width:calc(100% - 28px)!important;
    margin:12px auto 0!important;padding:6px 9px 6px 16px!important;gap:13px!important}
  .lux-nav .logo{flex:0 0 auto!important;font-size:16px!important;letter-spacing:.15em!important}
  .lux-nav .burger{min-width:auto!important;padding:6px 2px!important}
  .m-book{width:44px!important;height:44px!important}
  .m-book svg{width:20px;height:20px}
}
@media(max-width:600px){
  html .lux-nav .nav-in{padding:6px 8px 6px 15px!important;gap:11px!important}
  .lux-nav .logo{font-size:15px!important}
  .m-book{width:42px!important;height:42px!important}
}

/* ============================================================
   DESKTOP HEADER — 1:1 luxmassage.vn (2026-08-27)
   TOP = transparent spread nav (3-col grid, centered logo).
   SCROLL = white floating pill. Overrides all earlier
   !important .nav-in white-pill rules (later + equal spec).
   Mobile (<=900) header is untouched — lives in its own MQ.
   ============================================================ */
@media(min-width:901px){
  /* hide mobile-only controls on desktop */
  .lux-nav .burger,.lux-nav .m-book{display:none!important}

  /* ---- TOP (not scrolled): fully transparent, spread 3-col grid ---- */
  html .lux-nav .nav-in,
  html:not([data-theme="light"]) .lux-nav .nav-in,
  html[data-theme="light"] .lux-nav .nav-in{
    display:grid!important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    margin:0 auto!important;
    max-width:1300px!important;
    padding:24px 44px!important;
    transition:background .4s ease,box-shadow .4s ease,border-color .4s ease,border-radius .4s ease,margin .4s ease,padding .4s ease,max-width .4s ease!important;
  }
  /* nav bar chrome itself always transparent on desktop */
  html .lux-nav,html .lux-nav.scrolled{
    background:transparent!important;border:none!important;border-bottom:none!important;
    box-shadow:none!important;backdrop-filter:none!important;
  }

  /* logo dead-center in the middle grid column */
  .lux-nav .nav-in>.logo{grid-column:2;justify-self:center;text-align:center}

  /* nav groups */
  .lux-nav .nav-grp{display:flex;align-items:center;gap:34px}
  .lux-nav .nav-left{grid-column:1;justify-self:start;justify-content:flex-start}
  .lux-nav .nav-right{grid-column:3;justify-self:end;justify-content:flex-end}

  /* nav links: uppercase brown, letter-spaced, medium */
  .lux-nav .nav-grp a:not(.btn-booknow){
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#5f471d;
    text-decoration:none;
    white-space:nowrap;
    transition:color .25s,opacity .25s;
  }
  .lux-nav .nav-grp a:not(.btn-booknow):hover{color:#8a6a2f;opacity:.9}
  .lux-nav .nav-grp a.active{color:#3d2b12}
  html:not([data-theme="light"]) .lux-nav .nav-grp a:not(.btn-booknow){color:var(--cream)}
  html:not([data-theme="light"]) .lux-nav .nav-grp a:not(.btn-booknow):hover{color:var(--gold1)}

  /* BOOK NOW pill — solid brown, white uppercase */
  .lux-nav .btn-booknow{
    display:inline-flex;align-items:center;justify-content:center;
    background:#5f471d;
    color:#fff!important;
    font-family:'Inter',sans-serif;
    font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    text-decoration:none;white-space:nowrap;
    padding:13px 26px;border-radius:100px;border:none;
    box-shadow:0 10px 26px -10px rgba(95,71,29,.55);
    transition:transform .25s,box-shadow .25s,background .25s;
  }
  .lux-nav .btn-booknow:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(95,71,29,.7)}
  html:not([data-theme="light"]) .lux-nav .btn-booknow{background:linear-gradient(140deg,#caa25a,#a9823f);color:#1b130b!important}

  /* language selector — flag + EN in bordered rounded pill */
  .lux-nav .lang-sel{
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.06em;
    color:#5f471d;
    background:transparent;
    border:1px solid rgba(120,92,54,.3);
    border-radius:100px;
    padding:8px 14px;
    cursor:pointer;line-height:1;
    transition:background .25s,border-color .25s,color .25s;
  }
  .lux-nav .lang-sel::after{content:'\2304';font-size:14px;margin-left:1px;opacity:.7;line-height:1}
  .lux-nav .lang-sel:hover{background:rgba(120,92,54,.06);border-color:rgba(120,92,54,.5)}
  .lux-nav .lang-sel .ls-flag{font-size:15px;line-height:1}
  html:not([data-theme="light"]) .lux-nav .lang-sel{color:var(--cream);border-color:rgba(255,255,255,.22)}
  html:not([data-theme="light"]) .lux-nav .lang-sel:hover{background:rgba(255,255,255,.06)}

  /* ---- SCROLLED: collapse into white floating pill ---- */
  html .lux-nav.scrolled .nav-in,
  html:not([data-theme="light"]) .lux-nav.scrolled .nav-in,
  html[data-theme="light"] .lux-nav.scrolled .nav-in{
    background:#ffffff!important;
    border:1px solid rgba(120,92,54,.12)!important;
    border-radius:100px!important;
    box-shadow:0 16px 44px -20px rgba(90,66,38,.34)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    margin:12px auto 0!important;
    max-width:1180px!important;
    padding:12px 22px!important;
  }
  html:not([data-theme="light"]) .lux-nav.scrolled .nav-in{
    background:#1b130b!important;border-color:rgba(255,255,255,.09)!important;
    box-shadow:0 18px 46px -22px rgba(0,0,0,.7)!important;
  }
}

/* ============================================================
   MOBILE (<=900) — hide desktop nav groups so the compact
   burger·logo·m-book pill is unchanged (replaces old .nav-links
   hide rule now that markup uses .nav-grp/.lang-sel).
   ============================================================ */
@media(max-width:900px){
  .lux-nav .nav-grp,
  .lux-nav .nav-left,
  .lux-nav .nav-right,
  .lux-nav .lang-sel,
  .lux-nav .btn-booknow{display:none!important}
  .lux-nav .burger{display:flex!important}
  .lux-nav .m-book{display:inline-flex!important}
}

/* ============================================================
   FIGMA-STYLE GLOBAL POLISH — buttery micro-interactions,
   cohesive motion, refined depth (2026-08-27)
   ============================================================ */
:root{--e-out:cubic-bezier(.2,.8,.2,1);--e-smooth:cubic-bezier(.22,.61,.36,1)}

/* smooth transitions on interactive elements (NOT .tilt — GSAP owns those) */
a:not(.tilt),button,.chip,.value-block-card,.why-card,.price-opt,.addon-row,
.listing-card,.tbadge,.m-book,.btn-booknow,.lang-sel,.mm-nav a,.mm-lang-grid button,
.mm-social a,.mm-close,.filter a,.tpick,.opt,.dur{
  transition:transform .3s var(--e-out),box-shadow .35s var(--e-out),
    background-color .25s ease,border-color .25s ease,color .22s ease,opacity .25s ease}

/* buttons — hover lift + tap feedback */
.btn{will-change:transform}
.btn:active{transform:scale(.965)}
.btn-ghost:hover{transform:translateY(-2px)}

/* cards — soft hover depth (non-tilt) */
.listing-card:hover,.why-card:hover,.price-opt:hover{transform:translateY(-4px);box-shadow:0 24px 52px -30px rgba(90,66,38,.42)}
html[data-theme="light"] .value-block-card:hover{transform:translateY(-4px);box-shadow:0 26px 56px -30px rgba(90,66,38,.4)}
.addon-row:hover{background:rgba(201,161,90,.06)}
.tpick:hover,.opt:hover,.dur:hover{transform:translateY(-2px)}

/* smooth image zoom on hover (non-tilt) */
.listing-card img,.detail-img img,.circ img{transition:transform .6s var(--e-out)}
.listing-card:hover img,.circ:hover img{transform:scale(1.05)}

/* refined focus-visible (a11y + polish) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.tpick:focus-visible{
  outline:2px solid var(--gold2);outline-offset:3px;border-radius:8px}

/* premium touch details */
::selection{background:rgba(201,161,90,.28);color:inherit}
html{scroll-behavior:smooth}
img{backface-visibility:hidden}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== Theme toggle restored (desktop nav-right icon + mobile menu) ===== */
.theme-toggle{cursor:pointer;font-size:16px;line-height:1;border:none;background:transparent;color:inherit;transition:transform .3s var(--e-out),opacity .25s}
.theme-toggle:active{transform:scale(.88)}
@media(min-width:901px){
  .nav-right .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);background:rgba(255,255,255,.4);color:var(--gold3)}
  html:not([data-theme="light"]) .nav-right .theme-toggle{background:rgba(255,255,255,.06);color:var(--gold1)}
  .nav-right .theme-toggle:hover{transform:translateY(-2px)}
  .mm-theme{display:none!important}
}
@media(max-width:900px){
  .nav-right .theme-toggle{display:none!important}
  .mm-theme{position:absolute;top:20px;left:18px;width:46px;height:46px;border-radius:50%;
    border:1px solid var(--line);background:#fff;color:#3a2b16;display:flex;align-items:center;justify-content:center;font-size:19px}
  html:not([data-theme="light"]) .mm-theme{background:rgba(255,255,255,.08);color:var(--cream)}
}

/* ===== Mobile menu — "Track my booking" utility link ===== */
.mobile-menu a.mm-track{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;color:var(--gold3);font-family:'Inter',sans-serif!important;font-weight:500!important;font-size:14.5px!important;
  letter-spacing:0!important;background:rgba(201,161,90,.06);transition:transform .2s,background .25s,border-color .25s}
.mm-track svg{width:19px;height:19px;flex:none}
.mm-track span{flex:1}
.mm-track em{font-style:normal;transition:transform .25s var(--e-out)}
.mm-track:active{transform:scale(.99)}
.mm-track:hover{border-color:var(--line2)}
.mm-track:hover em{transform:translateX(4px)}
html:not([data-theme="light"]) .mm-track{color:var(--gold1);background:rgba(255,255,255,.04)}

/* ===== ~$USD next to VND prices (girl.luxmassage.vn parity) ===== */
.usd{color:var(--muted);font-weight:500;letter-spacing:.02em}
.price-opt .amt .usd{display:block;font-family:'Inter',sans-serif;font-size:12px;margin-top:3px}
.addon-row .pr .usd,.lc-price .usd,.fh-price .usd{display:inline;font-family:'Inter',sans-serif;font-size:11.5px;margin-left:6px;opacity:.85}