/* Queeny sections: hotel (khach-san), proc (quy-trinh), qa (hoi-dap), closing (lien-he).
   Built on base.css tokens, .reveal/.rv choreography and the .draw self-drawing lines.
   Animate only transform and opacity (the accordion height is the one honest exception, see .qa-item).
   Looping animations run only while the section carries .live (toggled by sections.js); body.paused halts all. */

/* ---------- shared ---------- */
html.no-js .draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.hotel>.divider,.proc>.divider,.qa>.divider,.closing>.divider{position:absolute;top:0;left:0;right:0}
.draw.sub{opacity:.4}
.btn .ico{transition:transform .45s var(--ease-out)}
.btn:hover .ico,.btn:focus-visible .ico{transform:translate3d(4px,0,0)}

/* the closing button: bigger, with a breathing halo (opacity only) */
.btn-xl{min-height:68px;padding:0 clamp(1.5em,4vw,2.4em);font-size:clamp(1rem,1.5vw,1.1875rem);font-weight:500}
.btn-xl::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;box-shadow:0 0 64px 6px rgba(232,198,106,.5);opacity:.35}
.closing.live .btn-xl::after{animation:btn-halo 5.6s var(--ease-soft) -1.4s infinite alternate}
@keyframes btn-halo{from{opacity:.18}to{opacity:.62}}
@media (pointer:coarse){.btn-xl{min-height:64px}}

/* =====================================================================
   HOTEL: a typographic section. The number is the anchor.
   ===================================================================== */
.hotel{overflow-x:clip}
.hotel-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,5vw,44px)}

.hotel-head{position:relative;z-index:3}
.hotel-head::before{content:"";position:absolute;left:-14%;top:-6%;width:min(100%,560px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,198,106,.2),rgba(232,198,106,.06) 55%,transparent);opacity:.8}
.hotel.live .hotel-head::before{animation:hotel-glow 8s var(--ease-soft) -3s infinite alternate}
@keyframes hotel-glow{from{opacity:.4;transform:scale(.95)}to{opacity:1;transform:scale(1.06)}}

.hotel-num{display:flex;align-items:baseline;gap:.08em;margin-top:.12em;font:400 clamp(9.5rem,42vw,14rem)/.86 var(--font-display);letter-spacing:-.02em}
.hotel-dw{position:relative;display:block;padding-right:.04em}
.hotel-d{position:relative;display:block;color:var(--text-primary);
  background:linear-gradient(180deg,#FBF6E8 18%,var(--text-primary) 46%,#E9CD84 112%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hotel-echo{position:absolute;inset:0 auto auto 0;display:block;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px rgba(232,198,106,.62);
  transform:translate3d(.075em,.04em,0);pointer-events:none;user-select:none;-webkit-user-select:none}
.hotel.live .hotel-echo{animation:hotel-echo 10s var(--ease-soft) -4s infinite alternate}
@keyframes hotel-echo{from{transform:translate3d(.085em,.045em,0);opacity:.6}to{transform:translate3d(.03em,.07em,0);opacity:1}}
.hotel-u{font-size:.25em;line-height:1;letter-spacing:.01em;color:var(--accent)}

/* the arched window, with an offset gold hairline and a pair of drapes that part on reveal */
.hotel-fig{--off:clamp(10px,1.7vw,18px);--arch:50% 50% 14px 14px / 58% 58% 14px 14px;margin:0 var(--off) var(--off) 0;max-width:640px}
.hotel-frame{position:relative}
.hotel-line{position:absolute;inset:0;border:1px solid var(--accent);border-radius:var(--arch);opacity:.6;transform:translate3d(var(--off),var(--off),0);pointer-events:none}
.hotel.live .hotel-line{animation:hotel-line 12s var(--ease-soft) -5s infinite alternate}
@keyframes hotel-line{from{transform:translate3d(var(--off),var(--off),0)}to{transform:translate3d(calc(var(--off)*.4),calc(var(--off)*.4),0)}}
.hotel-arch{position:relative;border-radius:var(--arch);overflow:hidden;aspect-ratio:1400/1166;background:var(--panel);box-shadow:0 56px 90px -48px rgba(0,0,0,.75),0 0 0 1px rgba(232,198,106,.14)}
.hotel-arch img{width:100%;height:100%;object-fit:cover}
.hotel-drape{display:none}
.js .hotel-drape{display:block;position:absolute;top:0;bottom:0;width:50.6%;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px),linear-gradient(90deg,#0B1B6E,#091352 55%,#0B1B6E);
  transition:transform 1.9s var(--ease-out) .35s}
.js .hotel-drape.l{left:0}
.js .hotel-drape.r{right:0}
.js .hotel-fig.in .hotel-drape.l{transform:translate3d(-101%,0,0)}
.js .hotel-fig.in .hotel-drape.r{transform:translate3d(101%,0,0)}
.hotel-cap{margin-top:16px;font:400 .8125rem/1.4 var(--font-mono);letter-spacing:.04em;color:var(--text-secondary)}

.hotel-body{margin-top:1.1em;max-width:50ch;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.7;color:var(--text-secondary);text-wrap:pretty}
.hotel .h2{font-size:clamp(1.85rem,3.3vw,2.85rem);max-width:19ch;margin-top:0}

.hotel-points li{position:relative;padding:20px 0 20px 46px;border-top:1px solid var(--line);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.45}
.hotel-points li:last-child{border-bottom:1px solid var(--line)}
.hotel-points li::before{content:"";position:absolute;left:3px;top:22px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent)}
.hotel-points li::after{content:"";position:absolute;left:12px;top:31px;width:2px;height:2px;border-radius:50%;background:var(--accent)}

.hotel-cta{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:20px;border-top:1px solid var(--line)}
.hotel-cta-line{font:400 clamp(1.2rem,1.9vw,1.5rem)/1.4 var(--font-display);max-width:30ch;text-wrap:balance}
@media (max-width:480px){.hotel-cta .btn{width:100%}}

@media (min-width:900px){
  .hotel-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);row-gap:0}
  .hotel-head{grid-column:1/9;grid-row:1}
  .hotel-num{font-size:clamp(11rem,22vw,21rem)}
  .hotel-copy{grid-column:1/7;grid-row:2;margin-top:clamp(20px,3vw,36px)}
  .hotel-fig{grid-column:7/13;grid-row:1/3;align-self:start;margin-top:clamp(36px,6vw,92px);width:100%}
  .hotel-points{grid-column:1/7;grid-row:3;margin-top:clamp(48px,6vw,80px)}
  .hotel-cta{grid-column:7/13;grid-row:3;margin-top:clamp(48px,6vw,80px)}
}

/* =====================================================================
   PROC: four equal steps hanging from one curtain rail
   ===================================================================== */
.proc-head .h2{max-width:19ch}
.proc-list{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:44px;margin-top:clamp(48px,7vw,88px)}
.proc-list::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(232,198,106,.8),rgba(232,198,106,.28));transform-origin:top}
.js .proc-list::before{transform:scaleY(0)}
.js .proc-list.in::before{transform:none;transition:transform 2s var(--ease-out) .1s}

.proc-step{position:relative;padding-left:58px}
.js .reveal .proc-step.rv{transition-delay:calc(var(--i,0)*260ms)}
.proc-ring{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent)}
.proc-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--accent);opacity:.9}
.proc-panel{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:22px;row-gap:6px;padding:2px 0 8px}
.proc-no{grid-column:1/-1;font:500 .75rem/1 var(--font-mono);letter-spacing:.16em;color:var(--accent);padding-top:6px}
.proc-ico{width:72px;height:72px;flex:none;overflow:visible}
.proc-ico .draw{stroke-width:1.6;--kk:clamp(0,calc((var(--k,0) - var(--b,0)) / (var(--e,.6) - var(--b,0))),1)}
.proc-ico .draw{stroke-dashoffset:calc(1 - clamp(0,calc((var(--kk,0) - var(--s,0)) / (1 - var(--s,0))),1))}
.proc-text .h3{font-size:clamp(1.375rem,2.1vw,1.75rem)}
.proc-text p{margin-top:.55em;color:var(--text-secondary);font-size:1.0625rem;line-height:1.6;max-width:30ch}

/* fabric texture and a slow sheen behind each step (decor only, desktop) */
.proc-fabric{display:none}

@media (min-width:560px) and (max-width:899.98px){
  .proc-panel{grid-template-columns:auto 1fr;column-gap:28px}
  .proc-no{grid-column:1/-1}
  .proc-ico{width:88px;height:88px}
}

@media (min-width:900px){
  .proc-list{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,36px);row-gap:0}
  .proc-list::before{left:0;right:0;top:12px;bottom:auto;width:auto;height:1.5px;background:linear-gradient(90deg,var(--accent),rgba(232,198,106,.45));transform-origin:left}
  .js .proc-list::before{transform:scaleX(0)}
  .js .proc-list.in::before{transform:none}
  .proc-step{padding-left:0;padding-top:26px}
  .proc-step::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:1px;background:linear-gradient(180deg,rgba(232,198,106,.7),rgba(232,198,106,0))}
  .proc-panel{display:block;padding:26px clamp(8px,1.4vw,22px) clamp(32px,4vw,52px) 36px}
  .proc-no{display:block;padding-top:0}
  .proc-ico{margin-top:20px;width:80px;height:80px;--e:.72}
  .proc-step:nth-child(2) .proc-ico{--b:.07}
  .proc-step:nth-child(3) .proc-ico{--b:.14}
  .proc-step:nth-child(4) .proc-ico{--b:.21}
  .proc-text{margin-top:22px}
  .proc-fabric{display:block;position:absolute;inset:0 0 0 12px;z-index:-1;overflow:hidden;pointer-events:none;
    background:linear-gradient(180deg,rgba(24,35,92,.55),rgba(24,35,92,0) 90%),repeating-linear-gradient(90deg,rgba(245,239,224,.04) 0 1px,transparent 1px 20px);
    -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent),linear-gradient(90deg,#000 78%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg,#000 40%,transparent),linear-gradient(90deg,#000 78%,transparent);mask-composite:intersect}
  .proc-fabric i{position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,228,176,.1),transparent);transform:translate3d(-130%,0,0);opacity:0}
  .proc.live .proc-fabric i{animation:proc-sheen 10s var(--ease-soft) calc(var(--i,0)*-2.4s - 1.2s) infinite}
}
@keyframes proc-sheen{
  0%{transform:translate3d(-130%,0,0);opacity:0}
  15%{opacity:1}
  75%{opacity:1}
  100%{transform:translate3d(260%,0,0);opacity:0}
}

/* =====================================================================
   QA: eight questions, native details
   ===================================================================== */
.qa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,48px)}
.qa-head{position:relative}
.qa-head::before{content:"";position:absolute;left:-30%;top:-80%;width:min(120%,520px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,198,106,.13),transparent);opacity:.7}
.qa.live .qa-head::before{animation:qa-drift 14s var(--ease-soft) -6s infinite alternate}
@keyframes qa-drift{from{transform:translate3d(-4%,0,0) scale(.96);opacity:.45}to{transform:translate3d(10%,6%,0) scale(1.05);opacity:.9}}
.qa-title{font-size:clamp(2.6rem,6.6vw,5.5rem);line-height:1;margin-top:0}
.qa-fold{width:clamp(96px,12vw,150px);height:20px;margin-top:22px;opacity:.85}
.qa-fold path{vector-effect:non-scaling-stroke}

.qa-item{border-top:1px solid var(--line)}
.qa-item:last-child{border-bottom:1px solid var(--line)}
.qa-item summary{--g:clamp(14px,2.2vw,28px);list-style:none;display:grid;grid-template-columns:2.1rem minmax(0,1fr) 44px;align-items:center;column-gap:var(--g);
  min-height:80px;padding:18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::marker{content:""}
.qa-item summary:focus-visible{outline-offset:4px;border-radius:14px}
.qa-no{font:500 .75rem/1 var(--font-mono);letter-spacing:.14em;color:var(--accent)}
.qa-q{font:400 clamp(1.1875rem,2vw,1.5rem)/1.32 var(--font-display);text-wrap:balance;transition:color .3s var(--ease-soft)}
.qa-item summary:hover .qa-q{color:var(--accent-hover)}
.qa-ico{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);transition:border-color .3s var(--ease-soft),transform .5s var(--ease-out)}
.qa-ico::before,.qa-ico::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;border-radius:2px;background:var(--accent);transition:transform .5s var(--ease-out)}
.qa-ico::after{transform:rotate(90deg)}
.qa-item summary:hover .qa-ico{border-color:var(--accent)}
.qa-item[open] .qa-ico{border-color:var(--accent);transform:rotate(180deg)}
.qa-item[open] .qa-ico::after{transform:rotate(0deg)}
.qa-a{padding:0 calc(44px + var(--g,24px)) 30px calc(2.1rem + var(--g,24px))}
.qa-a p{color:var(--text-secondary);font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.72;max-width:60ch;text-wrap:pretty}

/* smooth open and close where ::details-content exists (the one place a height animates, opt in by support) */
@supports selector(::details-content){
  .qa-item{interpolate-size:allow-keywords}
  .qa-item::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .55s var(--ease-out),opacity .4s var(--ease-soft),content-visibility .55s allow-discrete}
  .qa-item[open]::details-content{block-size:auto;opacity:1}
}
/* elsewhere: the answer fades up on open; sections.js fades it on close */
@supports not selector(::details-content){
  .qa-item[open] .qa-a{animation:qa-in .55s var(--ease-out)}
}
@keyframes qa-in{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}

@media (max-width:599.98px){
  .qa-item summary{grid-template-columns:minmax(0,1fr) 44px}
  .qa-no{display:none}
  .qa-a{padding-left:0;padding-right:0}
}
@media (min-width:960px){
  .qa-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .qa-head{position:sticky;top:calc(var(--nav-h) + 48px)}
}

/* =====================================================================
   CLOSING: the last light of the day
   ===================================================================== */
.closing{padding-block:clamp(120px,17vw,230px) clamp(88px,11vw,150px);text-align:center}
.closing-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.closing-bg>*{position:absolute;display:block}
.closing-sun{left:50%;top:56%;width:min(150vw,1280px);aspect-ratio:1;border-radius:50%;transform:translate3d(-50%,-50%,0);
  background:radial-gradient(closest-side,rgba(244,178,84,.36),rgba(232,198,106,.16) 42%,transparent 72%);opacity:.9}
.closing.live .closing-sun{animation:closing-sun 8s var(--ease-soft) -3s infinite alternate}
@keyframes closing-sun{from{opacity:.6;transform:translate3d(-50%,-50%,0) scale(.97)}to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.05)}}
.closing-beam{top:-25%;bottom:-25%;width:22vw;min-width:160px;background:linear-gradient(90deg,transparent,rgba(255,226,170,.09) 50%,transparent);transform:rotate(14deg)}
.closing-beam.b1{left:6%}
.closing-beam.b2{left:62%;width:14vw;opacity:.75}
.closing.live .closing-beam.b1{animation:closing-beam 18s var(--ease-soft) -7s infinite alternate}
.closing.live .closing-beam.b2{animation:closing-beam 22s var(--ease-soft) -15s infinite alternate-reverse}
@keyframes closing-beam{from{transform:translate3d(-4vw,0,0) rotate(14deg)}to{transform:translate3d(5vw,0,0) rotate(14deg)}}

.closing-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.closing-title{font:400 clamp(2.6rem,7.4vw,6.4rem)/1.04 var(--font-display);letter-spacing:-.012em;max-width:13ch;text-wrap:balance}
.closing-lede{margin-top:1.4em;max-width:46ch;text-wrap:balance;text-align:center;font-size:clamp(1.125rem,1.7vw,1.3125rem);color:var(--text-primary);opacity:.88}
.closing-actions{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(36px,5vw,56px)}
.closing-note{color:var(--text-primary);opacity:.9;font-size:.9375rem;margin-top:2px}
.closing-sign{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(72px,10vw,128px)}
.closing-wave{width:clamp(140px,18vw,220px);height:18px}
.closing-wave path{vector-effect:non-scaling-stroke}
.closing-line{font:400 clamp(1.4rem,2.8vw,2.1rem)/1.25 var(--font-display);color:var(--text-primary);text-wrap:balance;max-width:24ch}
@media (max-width:480px){.closing-actions .btn{width:100%}}

/* ---------- reduced motion: final states, nothing moving ---------- */
@media (prefers-reduced-motion:reduce){
  .js .proc-list::before,.js .proc-list.in::before{transform:none!important}
  .js .hotel-drape{display:none!important}
  .proc-fabric i{display:none!important}
  .hotel-echo{transform:translate3d(.075em,.04em,0)!important;opacity:1!important}
  .hotel-line{transform:translate3d(var(--off),var(--off),0)!important}
  .qa-item[open] .qa-a{animation:none!important}
}

/* ===== offers and clean ===== */
/* uu-dai: a ledger of four hairline rows. ve-sinh-rem: five steps threaded on a wavy washing line.
   Same rules as above: .js scoping, loops only while .live, reduced motion and no-JS complete. */
.offers>.divider,.clean>.divider{position:absolute;top:0;left:0;right:0}
.offers,.clean{padding-block:clamp(80px,10.5vw,148px);overflow-x:clip}

/* ---------- offers ---------- */
.offers-head .h2{max-width:20ch}
.offers-list{position:relative;margin-top:clamp(40px,6vw,72px)}
.offers-list::after{content:"";display:block;height:1px;background:var(--accent-muted)}
.offer{position:relative;padding:clamp(26px,3.4vw,40px) 0}
.offer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent-muted);transform-origin:left;transition:background-color .45s var(--ease-soft)}
.js .reveal .offer::before{transform:scaleX(0)}
.js .reveal.in .offer::before{transform:none;transition:transform 1.5s var(--ease-out) calc(var(--i,0)*150ms + 150ms),background-color .45s var(--ease-soft)}
/* a thread of light travelling along each hairline, one after another (whisper) */
.offer::after{content:"";position:absolute;left:0;top:0;width:18%;height:1px;pointer-events:none;opacity:0;transform:translate3d(-100%,0,0);
  background:linear-gradient(90deg,transparent,rgba(255,232,178,.95),transparent)}
.offers.live .offer::after{animation:offer-glint 10s linear calc(var(--i,0)*-2.4s - 1.4s) infinite}
@keyframes offer-glint{
  0%{transform:translate3d(-100%,0,0);opacity:0}
  6%{opacity:1}
  52%{opacity:1}
  64%{transform:translate3d(560%,0,0);opacity:0}
  100%{transform:translate3d(560%,0,0);opacity:0}
}
.offer-fig{display:block;font:400 clamp(2.75rem,7vw,5.5rem)/1 var(--font-display);letter-spacing:-.012em;color:var(--accent)}
.offer-fig::before{content:"";position:absolute;left:0;top:-7px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--accent)}
.offer-text{margin-top:.6rem}
.offer-text .h3{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
.offer-text p{margin-top:.5em;max-width:44ch;color:var(--text-secondary);font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;text-wrap:pretty}
@media (hover:hover){.offer:hover::before{background:var(--accent)}}
@media (min-width:720px){
  .offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,64px);align-items:center}
  .offer-text{margin-top:0}
}
.offers-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;padding-top:clamp(22px,3vw,34px)}
.offers-note{position:relative;padding-left:30px;max-width:46ch;color:var(--text-secondary);font-size:1.0625rem;line-height:1.5}
.offers-note::before{content:"";position:absolute;left:2px;top:.28em;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--accent)}
@media (max-width:560px){.offers-foot .btn{width:100%}}

/* ---------- combo nhà mới: one framed card above the ledger ---------- */
.combo{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(36px,5vw,60px);padding:clamp(24px,4vw,52px);border-radius:24px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(232,198,106,.16),transparent 55%),linear-gradient(160deg,#141c52 0%,#0c1338 72%);
  border:1px solid rgba(232,198,106,.42);box-shadow:0 60px 110px -60px rgba(0,0,0,.8)}
/* the same thread of light as the ledger rows, along the card's top edge */
.combo-glint{position:absolute;left:0;top:0;width:22%;height:1px;pointer-events:none;opacity:0;transform:translate3d(-100%,0,0);
  background:linear-gradient(90deg,transparent,rgba(255,232,178,.95),transparent)}
.offers.live .combo-glint{animation:offer-glint 9s linear -2s infinite}
.combo-tag{font:500 .75rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.combo-title{margin-top:.75rem;font:400 clamp(1.9rem,4.2vw,3.3rem)/1.06 var(--font-display);letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
.combo-list{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(26px,3.5vw,40px)}
.combo-item{position:relative;display:flex;flex-direction:column;gap:.3em;padding:18px 0 18px 40px;border-top:1px solid var(--line)}
.combo-item::before{content:"";position:absolute;left:2px;top:22px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent)}
.combo-item::after{content:"";position:absolute;left:8px;top:28px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.combo-k{font:400 clamp(1.35rem,2.2vw,1.75rem)/1.15 var(--font-display);color:var(--text-primary)}
.combo-v{color:var(--text-secondary);font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.5}
.combo-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(22px,3vw,34px);padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--line)}
.combo-note{max-width:40ch;color:var(--text-secondary);font-size:1rem;line-height:1.5}
@media (min-width:720px){.combo-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}}
@media (min-width:1100px){
  .combo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);align-items:start}
  .combo-list{margin-top:0}
  .combo-foot{grid-column:1/-1}
}
@media (max-width:560px){.combo-foot .btn{width:100%}}
.offers-sub{margin-top:clamp(52px,6.5vw,84px);font:500 .8125rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.offers-sub+.offers-list{margin-top:clamp(16px,2.2vw,24px)}

/* ---------- clean ---------- */
.clean{text-align:center}
.clean-head .h2{max-width:21ch;margin-inline:auto}
.clean-head .lede{max-width:54ch;margin-inline:auto;text-wrap:balance}
.clean-seq{--disc:76px;--sw:2.3;position:relative;margin-top:clamp(48px,7vw,80px);text-align:left}
.clean-line{position:absolute;pointer-events:none;overflow:visible}
.clean-line .draw{stroke-width:1.5;stroke-dashoffset:calc(1 - clamp(0,calc(var(--k,0) / .7),1))}
.clean-line.h{display:none}
.clean-line.v{display:block;left:0;top:0;width:var(--disc);height:100%}
.clean-list{position:relative;display:grid;row-gap:clamp(30px,6vw,46px)}
.clean-step{display:grid;grid-template-columns:var(--disc) minmax(0,1fr);grid-template-areas:"disc no" "disc h" "disc p";grid-template-rows:auto auto 1fr;column-gap:clamp(18px,4vw,28px);align-items:start}
.clean-disc{grid-area:disc}
.clean-no{grid-area:no;padding-top:6px;font:500 .75rem/1 var(--font-mono);letter-spacing:.16em;color:var(--accent)}
.clean-step .h3{grid-area:h;margin-top:10px;font-size:clamp(1.3rem,2.4vw,1.55rem)}
.clean-step p{grid-area:p;margin-top:.45em;color:var(--text-secondary);font-size:1.0625rem;line-height:1.6;max-width:34ch;text-wrap:balance}
.clean-disc{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--disc);height:var(--disc);border-radius:50%;
  border:1px solid rgba(232,198,106,.55);background:radial-gradient(circle at 50% 36%,#161f55,var(--canvas) 74%);transition:border-color .4s var(--ease-soft)}
.clean-disc::after{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 34px 3px rgba(232,198,106,.5)}
.clean.live .clean-disc::after{animation:clean-glow 7.5s var(--ease-soft) calc(var(--i,0)*-1.1s - .8s) infinite}
@keyframes clean-glow{0%{opacity:0}16%{opacity:.85}34%{opacity:0}100%{opacity:0}}
@media (hover:hover){.clean-step:hover .clean-disc{border-color:var(--accent)}}
.clean-ico{width:calc(var(--disc)*.62);height:calc(var(--disc)*.62);overflow:visible}
.clean-ico .draw{stroke-width:var(--sw,2);--kk:clamp(0,calc((var(--k,0) - var(--b,0)) / (var(--e,.6) - var(--b,0))),1)}
.clean-ico .draw{stroke-dashoffset:calc(1 - clamp(0,calc((var(--kk,0) - var(--s,0)) / (1 - var(--s,0))),1))}
.clean-foot{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(44px,6vw,72px)}
.clean-note{max-width:40ch;color:var(--text-secondary);font-size:1.0625rem;line-height:1.5}
.clean-note::before{content:"";display:inline-block;width:14px;height:14px;margin-right:12px;vertical-align:-1px;border-radius:50%;border:1.5px solid var(--accent)}
@media (max-width:560px){.clean-foot .btn{width:100%}}
@media (min-width:560px) and (max-width:959.98px){.clean-seq{--disc:88px;--sw:2}}

@media (min-width:960px){
  .clean-seq{--disc:92px;--sw:2;--e:.72}
  .clean-line.v{display:none}
  .clean-line.h{display:block;left:0;width:100%;height:40px;top:calc(.75rem + 16px + var(--disc)/2 - 20px)}
  .clean-list{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(8px,1.6vw,24px);row-gap:0}
  .clean-step{display:block;text-align:center}
  .clean-no{display:block;height:.75rem;padding:0;line-height:.75rem;margin-bottom:16px}
  .clean-disc{margin-inline:auto}
  .clean-step .h3{margin-top:24px}
  .clean-step p{margin:.5em auto 0;max-width:22ch}
  .clean-step:nth-child(2) .clean-ico{--b:.06}
  .clean-step:nth-child(3) .clean-ico{--b:.12}
  .clean-step:nth-child(4) .clean-ico{--b:.18}
  .clean-step:nth-child(5) .clean-ico{--b:.24}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal .offer::before{transform:none!important}
  .offer::after,.clean-disc::after{display:none!important}
}
/* pathLength plus non-scaling-stroke undercounts the dash when the svg is stretched wider than its viewBox (the Hỏi đáp fold stopped short at 1440), so these small waves use plain scaling strokes */
.qa-fold path,.closing-wave path{vector-effect:none;stroke-width:1.4}
/* ===== end offers and clean ===== */

/* =====================================================================
   DEALER (dai-ly): typographic like the hotel section; the commission is the anchor
   ===================================================================== */
.dealer>.divider{position:absolute;top:0;left:0;right:0}
.dealer{padding-block:clamp(80px,10.5vw,148px);overflow-x:clip}
.dealer-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,4.5vw,44px)}
.dealer .h2{font-size:clamp(1.85rem,3.3vw,2.85rem);max-width:18ch}
.dealer-lede{margin-top:1rem;max-width:44ch;color:var(--text-secondary);font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6}
.dealer-fig{position:relative;z-index:1}
.dealer-fig::before{content:"";position:absolute;left:-10%;top:50%;width:min(100%,520px);aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;transform:translate3d(0,-50%,0);
  background:radial-gradient(closest-side,rgba(232,198,106,.18),rgba(232,198,106,.05) 55%,transparent);opacity:.8}
.dealer-num{font:400 clamp(3.4rem,17vw,7.5rem)/.9 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.offers .nw,.dealer .nw{white-space:nowrap}
.dealer-nw{position:relative;display:inline-block;padding-right:.06em}
.dealer-n{position:relative;display:block;color:var(--text-primary);
  background:linear-gradient(180deg,#FBF6E8 18%,var(--text-primary) 46%,#E9CD84 112%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dealer-echo{position:absolute;inset:0 auto auto 0;display:block;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px rgba(232,198,106,.62);
  transform:translate3d(.06em,.035em,0);pointer-events:none;user-select:none;-webkit-user-select:none}
.dealer.live .dealer-echo{animation:hotel-echo 10s var(--ease-soft) -2s infinite alternate}
.dealer-points li{position:relative;padding:20px 0 20px 46px;border-top:1px solid var(--line);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.45}
.dealer-points li:last-child{border-bottom:1px solid var(--line)}
.dealer-points li::before{content:"";position:absolute;left:3px;top:22px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent)}
.dealer-points li::after{content:"";position:absolute;left:12px;top:31px;width:2px;height:2px;border-radius:50%;background:var(--accent)}
.dealer-points strong{font-weight:500;color:var(--text-primary)}
.dealer-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:20px;border-top:1px solid var(--line)}
.dealer-cta-line{font:400 clamp(1.2rem,1.9vw,1.5rem)/1.4 var(--font-display);max-width:30ch;text-wrap:balance}
@media (max-width:480px){.dealer-cta .btn{width:100%}}
@media (max-width:899.98px){.dealer-cta{border-top:0;padding-top:4px}}
@media (min-width:900px){
  .dealer-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);row-gap:0}
  .dealer-head{grid-column:1/7;grid-row:1}
  .dealer-fig{grid-column:7/13;grid-row:1;align-self:center;justify-self:end}
  .dealer-num{font-size:clamp(5rem,8.5vw,8.5rem)}
  .dealer-points{grid-column:1/7;grid-row:2;margin-top:clamp(40px,5vw,64px)}
  .dealer-cta{grid-column:8/13;grid-row:2;margin-top:clamp(40px,5vw,64px);align-self:start}
}
@media (prefers-reduced-motion:reduce){
  .combo-glint{display:none!important}
  .dealer-echo{animation:none!important}
}