/* Home presentation deck and Home hero (presentation.js).
   Media fill the viewport; ONE overlay navbar (logo · scrolling chapter labels · account, fullscreen,
   compact menu) and the footer are overlays whose BACKGROUND is terracotta at alpha .5 while their
   text stays fully opaque. Motion is on by default and follows prefers-reduced-motion (no toggle). */
body.is-deck{--rust:#b84029;--chrome:rgb(184 64 41 / .5);--deck-top:84px;--deck-bottom:78px;overflow:hidden;height:100dvh;background:#283626}
/* The overlay navbar (shared header, chapter strip, compact menu) is styled by shared-shell.css for every
   v7 page (html[data-shell=overlay]); only the deck's own fullscreen control stays here. */
.deck-fullscreen{display:none}
body.is-deck .deck-fullscreen{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid #ffffffb3;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
body.is-deck .site-header .deck-fullscreen{order:3}
.deck-fullscreen svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.deck-fullscreen[aria-pressed=true] svg{transform:rotate(180deg) scale(.86)}
.deck-fullscreen[data-unavailable]{opacity:.6}
.deck-fullscreen:hover{background:#ffffff1f}
.deck-toast{position:fixed;z-index:46;left:50%;top:calc(var(--deck-top) + 6px);transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:10px;background:#fff8ee;color:#3d2f28;font-size:13px;line-height:1.4;text-align:center;box-shadow:0 10px 30px #2b1a1244}
.deck-toast[hidden]{display:none}
body.is-deck .site-footer,body.is-deck main>section:not(#deck){display:none!important}
body.is-home .site-footer,body.is-home main>section:not(#home){display:none!important}
body.is-deck main{margin:0;padding:0}
.deck{position:fixed;inset:0;z-index:1;overflow:hidden;color:#fff9ef;font-family:var(--font-sans,Arial,sans-serif);background:#283626}
.deck[hidden]{display:none}
.deck button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.deck p,.deck h2,.deck h3{color:inherit;letter-spacing:inherit}.deck p{line-height:1.55}
.deck button:focus-visible,.deck a:focus-visible,.deck input:focus-visible,.deck textarea:focus-visible{outline:3px solid #e7a333;outline-offset:3px}
.deck-slides{position:absolute;inset:0;isolation:isolate}
.deck-slide{position:absolute;inset:0;overflow:hidden;visibility:hidden;pointer-events:none;opacity:0;transform:translate3d(6%,0,0);transition:transform .85s cubic-bezier(.19,1,.22,1),opacity .6s,visibility .85s}
.deck-slide.active{visibility:visible;pointer-events:auto;opacity:1;transform:none;z-index:2}
.deck-slide.departed{visibility:visible;opacity:0;transform:translate3d(-10%,0,0);z-index:1}
.deck.reverse .deck-slide{transform:translate3d(-6%,0,0)}.deck.reverse .deck-slide.active{transform:none}.deck.reverse .deck-slide.departed{transform:translate3d(10%,0,0)}
.deck-slide .deck-copy>*{opacity:0;transform:translateY(26px);transition:opacity .6s .2s,transform .85s .2s cubic-bezier(.19,1,.22,1)}
.deck-slide.active .deck-copy>*{opacity:1;transform:none}
.tpl{position:absolute;inset:0}
.deck-media{position:absolute;inset:0;display:block;margin:0}
.deck-media img,.deck-media video{display:block;width:100%;height:100%;object-fit:cover}
.deck-slide.active .tpl-hero .deck-media img{animation:deck-zoom 9s ease-out both}
@keyframes deck-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* No shade layer over the photos (owner 2026-10-04): image colours show unmodified; copy on a photo keeps a tight
   text shadow (text only, never a full-image scrim). */
.deck-copy{position:absolute;z-index:3;left:6%;top:calc(var(--deck-top) + 3vh);width:min(680px,86%);text-shadow:0 1px 2px #000c,0 0 6px #0009,0 2px 18px #0009}
.deck-eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.19em;font-weight:700}
.deck-title{margin:0;font-weight:500;letter-spacing:-.05em;line-height:1.2;font-size:clamp(40px,6.4vw,112px)}
.deck-title span{display:block}.deck-title span:last-child:not(:first-child){font-family:var(--font-serif,Georgia,serif);font-style:italic;font-weight:400}
.deck-text{margin:22px 0 0;font-size:clamp(14px,1.35vw,19px);line-height:1.55;max-width:460px}.deck-text span{display:block}
.deck-cta{margin-top:30px;display:inline-flex;align-items:center;gap:26px;min-height:48px;padding:14px 20px;border-radius:3px;background:#f3efe5!important;color:#25271c!important;font-size:13px;text-shadow:none}
.deck-note{position:absolute;z-index:3;right:4%;bottom:calc(var(--deck-bottom) + 10px);font-size:9px;letter-spacing:.12em;padding:5px 8px;border-radius:4px;background:#1b261c80}
/* video */
.deck-video video{background:#111}
.deck-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff}
.deck-play b{display:grid;place-items:center;width:86px;height:86px;border:1px solid #fff;border-radius:50%;font-size:24px;font-weight:400;backdrop-filter:blur(6px);background:#0003}
.deck-play span{font-size:9px;letter-spacing:.25em}
.deck-pause{position:absolute;z-index:4;right:5%;bottom:calc(var(--deck-bottom) + 14px);padding:10px 16px;border-radius:30px;border:1px solid #ffffff90!important;background:var(--chrome)!important}
.tpl-hero .deck-video.is-playing~.deck-copy{opacity:0;transition:opacity .4s;pointer-events:none}
/* overlay + pins */
.cover-stage{position:absolute;inset:0;overflow:hidden;background:#ece8dc}
.cover-box{position:absolute;left:0;top:0;width:100%;height:100%}
.cover-media,.cover-media img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover-media img{object-fit:fill!important}
.deck-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;color:#283626!important}
.deck-pin b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fffaf0;box-shadow:0 6px 20px #29291f26;font-size:12px}
.deck-pin span{background:#fffaf0;padding:5px 10px;border-radius:20px;font-size:10px;white-space:nowrap}
.deck-pin[aria-pressed=true] b{background:#364b3a;color:#fff}
.overlay-card{background:rgb(255 249 239 / .5);color:#283626;text-shadow:none;border-radius:8px;padding:22px;width:min(360px,88%);backdrop-filter:blur(10px)}
.overlay-card .deck-title{font-size:clamp(30px,3.2vw,46px)}.overlay-card .deck-text{font-size:13px;margin-top:14px}
.point-info{margin-top:14px;border-top:1px solid #29291f26;padding-top:12px}.point-info h3{margin:0 0 6px;font-size:18px}.point-info p{margin:0;font-size:12px;line-height:1.5}
.tpl-overlay .deck-note{color:#fff}
/* sequence + gallery */
.seq-frame{position:absolute;inset:0;background:#253629}
.seq-frame>picture,.seq-frame>.seq-stage{position:absolute;inset:0;animation:seq-in .9s cubic-bezier(.19,1,.22,1) both}
.seq-frame>picture.leaving,.seq-frame>.seq-stage.leaving{animation:seq-out .7s ease both}
@keyframes seq-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes seq-out{to{opacity:0;clip-path:inset(0 100% 0 0)}}
.seq-frame img{width:100%;height:100%;display:block}
.seq-count{display:block;font-size:12px;letter-spacing:.2em;margin:0 0 16px}
.seq-copy .deck-title{font-size:clamp(38px,5.4vw,96px)}
.seq-controls{position:absolute;z-index:4;right:5%;bottom:calc(var(--deck-bottom) + 14px);display:flex;align-items:center;gap:10px}
.seq-controls>button{min-width:40px;height:40px;padding:0 14px;border:1px solid #ffffff88!important;border-radius:30px;background:#1b261c55!important}
.seq-controls>button:disabled{opacity:.35}
.seq-thumbs{display:flex;gap:8px}
.seq-thumbs button{width:70px;height:50px;padding:0!important;border:2px solid transparent!important;border-radius:3px;overflow:hidden;transition:transform .3s}
.seq-thumbs button[aria-pressed=true]{border-color:#fff!important;transform:translateY(-6px)}
.seq-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.tpl-gallery .deck-note,.tpl-sequence .deck-note{left:6%;right:auto}
/* chrome: the translucent layer is a pseudo-element so the (opaque) text repaints independently */
.deck-foot:before,.deck-plans-nav:before,.deck>.deck-strip:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--chrome);backdrop-filter:blur(10px);pointer-events:none}
.deck>.deck-strip{position:fixed;z-index:30;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 80px);height:48px;padding:0 5px;border-radius:999px;border:1px solid #ffffff30;isolation:isolate}
.deck>.deck-fullscreen{position:fixed;z-index:30;top:16px;right:12px}
.deck-foot{position:fixed;z-index:30;left:12px;right:12px;bottom:12px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-radius:12px;border:1px solid #ffffff30;isolation:isolate}
.deck-foot[hidden],.deck-plans-nav[hidden]{display:none}
.deck-pos{display:flex;align-items:center;gap:10px;font-size:11px;min-width:0}.deck-num{font-size:22px}.deck-line{width:40px;height:1px;background:#ffffff80}
.deck-name{font-weight:400;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:.3em;margin-top:-.3em}
.deck-navs{display:flex;gap:8px}.deck-navs button{height:36px;padding:0 16px;border:1px solid #ffffff70!important;border-radius:30px;font-size:12px}
.deck-next{background:#ffffff26!important}.deck-navs button:disabled{opacity:.35}
.deck-plans-nav{position:fixed;z-index:30;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;padding:6px;border-radius:999px;border:1px solid #ffffff30;isolation:isolate}
.deck-plans-nav button{min-height:40px;padding:0 20px;border-radius:30px;font-size:13px;white-space:nowrap}
.plans-overview{background:#fff!important;color:#7a2a1b!important;font-weight:700}
.plans-back{border:1px solid #ffffffa0!important}
/* Dealer "Quan tâm" (unit detail only): the accent button of the bottom bar, with a gentle glow pulse. */
.deck .deck-plans-nav .plans-interest{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 24px;border-radius:30px;background:#f2b54a;color:#3b1d12;font-size:14px;font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 0 #f2b54acc;animation:interest-pulse 2.4s ease-out infinite}
.deck .deck-plans-nav .plans-interest:hover{background:#ffc965;transform:none}
@keyframes interest-pulse{0%{box-shadow:0 0 0 0 #f2b54acc}70%,100%{box-shadow:0 0 0 12px #f2b54a00}}
/* Audience entry (chapter 0): media + "Dành cho:" + two choices only. */
.tpl-audience{background:#2b1a12}
.deck-media.is-kenburns img{transform-origin:62% 42%;animation:deck-kenburns 24s ease-in-out infinite alternate}
@keyframes deck-kenburns{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2.2%,-1.6%,0)}}
.audience-video video{object-fit:cover}
.audience-panel{position:absolute;z-index:3;left:50%;bottom:calc(var(--deck-bottom) + 7vh);transform:translateX(-50%);width:min(640px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.deck .audience-label{margin:0;padding:4px 14px;border-radius:999px;background:rgb(29 15 9 / .6);font-size:15px;letter-spacing:.14em;font-weight:700;text-shadow:0 1px 2px #000c}
.audience-choices{display:flex;justify-content:center;gap:14px;width:100%}
.deck .audience-choice{flex:1 1 0;max-width:290px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;border:1px solid #ffffffa8;border-radius:12px;background:var(--chrome);backdrop-filter:blur(10px);font-size:16px;font-weight:600;text-shadow:none;transition:transform .35s cubic-bezier(.19,1,.22,1),background .2s,box-shadow .2s}
.deck .audience-choice.audience-customer{background:#fff1d5;color:#85351f;border-color:#fff1d5}
.deck .audience-choice:hover{transform:translateY(-3px);box-shadow:0 14px 30px #1d0f0966}
.deck .audience-choice[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 14px 30px #1d0f0966}
.audience-choice b{font-size:20px;font-weight:400;line-height:1}
.deck-slide .audience-panel>*{opacity:0;transform:translateY(24px);transition:opacity .6s .3s,transform .9s .3s cubic-bezier(.19,1,.22,1)}
.deck-slide.active .audience-panel>*{opacity:1;transform:none}
/* Location slides: marker pinned to an image-relative point (same cover box as the image). */
.seq-stage{overflow:hidden}
.seq-stage .cover-box{position:absolute}
.seq-marker{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.seq-marker b{position:relative;z-index:1;display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:2px solid #fff;border-radius:999px;background:#b84029;color:#fff;font-size:13px;box-shadow:0 8px 24px #2b1a1266}
.seq-marker:before{content:"";position:absolute;width:44px;height:44px;border:2px solid #fffd;border-radius:50%;animation:marker-pulse 2.2s ease-out infinite}
@keyframes marker-pulse{from{transform:scale(.8);opacity:.9}to{transform:scale(2.2);opacity:0}}
/* Plans: one stage, four levels cross-fading in place (masterplan → tower → unit → summary). */
.tpl-plans{background:#1f2a20;overflow:hidden;overflow:clip}
.plans-layer{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1),visibility 0s linear .9s}
.plans-layer.is-active{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.tpl-plans.is-deeper .plans-layer.is-active{animation:layer-in .9s cubic-bezier(.19,1,.22,1) both}
@keyframes layer-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(var(--dy,0px) + 10px))}}
.plans-level-0{transform-origin:var(--zoom-x,50%) var(--zoom-y,50%)}
.tpl-plans:not([data-level="0"]) .plans-level-0{transform:scale(1.6)}
.plans-map{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.plans-map::-webkit-scrollbar{display:none}
.plans-canvas{position:relative;margin:0}
.plans-image,.plans-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;user-select:none}
/* Hit polygons are invisible (no fill, no stroke, no hover colour); only keyboard focus draws an outline. */
.plans-zone{cursor:pointer;outline:none}
.plans-zone polygon{fill:none;stroke:none;pointer-events:all}
.plans-zone:focus-visible polygon{stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke}
.plans-mask{fill:rgb(10 14 10 / .6);opacity:0;transition:opacity .45s}
.has-selection .plans-mask{opacity:1}
.plans-pins{position:absolute;inset:0;pointer-events:none}
.plans-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none}
.plans-pin[hidden]{display:none}
.plans-pin>strong{display:grid;place-items:center;min-width:58px;height:30px;padding:0 12px;border-radius:999px;background:#fff9efe8;color:#7a2a1b;font:700 13px var(--font-sans,Arial,sans-serif);letter-spacing:.08em;box-shadow:0 6px 18px #1d120c55;transition:transform .3s,background .3s,color .3s}
.plans-pin.is-selected>strong{background:#b84029;color:#fff;transform:scale(1.08)}
.plans-card{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(calc(-50% + var(--dx,0px)),var(--dy,0px));width:max-content;min-width:210px;max-width:min(300px,calc(100vw - 24px));display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:#fff9ef;color:#283626;text-align:left;box-shadow:0 18px 40px #1d120c66;pointer-events:auto;animation:card-in .45s cubic-bezier(.19,1,.22,1) both}
.plans-card[hidden]{display:none}
.plans-card strong{font-size:18px;letter-spacing:-.01em}
.plans-status{font-size:13px;color:#6b5a4d}
.deck .plans-view,.deck .interest{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;padding:0 20px;border-radius:999px;background:#b84029;color:#fff;font-size:14px;font-weight:700;transition:transform .25s,background .2s}
.deck .plans-view:hover,.deck .interest:hover{background:#96331f;transform:translateX(2px)}
.plans-hud{position:absolute;z-index:6;left:16px;top:calc(var(--deck-top) + 4px);max-width:calc(100% - 32px);display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
.plans-hud[hidden],.plans-crumb[hidden]{display:none}
.deck .plans-crumb{margin:0;padding:6px 12px;border-radius:999px;background:#1b261cc0;color:#fff;font-size:12px;line-height:1.4;backdrop-filter:blur(8px)}
.plans-tabs{position:absolute;z-index:6;left:50%;top:calc(var(--deck-top) + 44px);transform:translateX(-50%);max-width:calc(100% - 24px);display:flex;gap:4px;padding:4px;overflow-x:auto;scrollbar-width:none;border:1px solid #ffffff40;border-radius:999px;background:var(--chrome);backdrop-filter:blur(10px)}
.deck .plans-tab{flex:none;min-height:40px;padding:0 18px;border-radius:999px;font-size:13px;white-space:nowrap}
.deck .plans-tab[aria-selected=true]{background:#fff;color:#7a2a1b;font-weight:700}
.plans-group{position:absolute;inset:0;animation:layer-in .7s cubic-bezier(.19,1,.22,1) both}
.plans-grid-wrap{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:calc(var(--deck-top) + 100px) 16px calc(var(--deck-bottom) + 14px)}
.plans-grid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(16px);transform:scale(1.12);pointer-events:none}
.plans-grid{position:relative;width:min(780px,100%);margin:auto;display:grid;gap:14px;padding:22px;border-radius:14px;background:#fff9efee;color:#283626;box-shadow:0 30px 60px #0006}
.plans-floor{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:12px}
.plans-floor-label{font-size:13px;font-weight:700;letter-spacing:.04em}
.plans-floor-units{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
/* Floor step (mandatory, nothing pre-selected): the Thấp/Trung/Cao choice centred over the blurred masterplan. */
/* CT2B art (CT2B_ART in presentation.js): a box of the image's aspect ratio (--r = width/height). */
.plans-art{position:relative;overflow:hidden}
.plans-art-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.plans-art-tag{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:#283626b3;color:#fff9ef;font-size:11px;pointer-events:none}
.art-sky{fill:#cfd9d6}.art-ground{fill:#9db093}.art-podium{fill:#c9bba6;stroke:#8a7b6f;stroke-width:2}
.art-wall{fill:#e6dccb;stroke:#a8977f;stroke-width:2}.art-cap{fill:#b9a88f}.art-line{stroke:#c3b39b;stroke-width:2}
.art-window{fill:#7f9894;opacity:.55}.art-band{stroke:#b84029;stroke-width:3;stroke-dasharray:14 10;opacity:.7}
.art-floor{fill:#e6dccb;stroke:#a8977f;stroke-width:3}
/* CT2B floor step: elevation fitted in the free space; one button per floor group centred in its height band. */
.plans-floor-step:has(.has-elev){padding-top:calc(var(--deck-top) + 44px)}
.plans-floor-pick.has-elev{flex:1 1 auto;min-height:0;width:100%;display:grid;justify-items:stretch;grid-template-rows:auto auto minmax(0,1fr);gap:4px;padding:0;background:none;box-shadow:none;color:#fff9ef}
.deck .plans-floor-pick.has-elev .plans-floor-eyebrow{color:#f2c9a0}
.deck .plans-floor-pick.has-elev .plans-floor-title{margin:0 0 4px;font-size:clamp(20px,2vw,28px)}
.plans-elev-box{container-type:size;min-height:0;display:flex}
/* The image keeps its full height (bands stay exact); a box narrower than the image crops it sideways around --fx.
   --iw/--ix: drawn image width/left; --tlx/--trx: tower edges (CT2B_ART.elevation.tower); buttons stand right of it. */
.plans-elev{flex:none;margin:auto;width:min(100cqw,calc(100cqh * var(--r)));height:100cqh;border-radius:12px;box-shadow:0 30px 60px #0006;
 --iw:calc(100cqh * var(--r));--ix:calc((min(100cqw,var(--iw)) - var(--iw)) * var(--fx,.5));
 --tlx:calc(var(--ix) + var(--iw) * var(--tl,.3));--trx:calc(var(--ix) + var(--iw) * var(--tr,.7));
 --bw:min(180px,max(108px,100% - var(--trx) - 22px));--bx:min(var(--trx) + 10px,100% - var(--bw) - 6px)}
.plans-elev .plans-art-img{left:var(--ix);right:auto;width:var(--iw)}
.plans-elev .plans-art-tag{right:auto;left:8px}
.plans-elev .plans-tabs.plans-elev-tabs{position:absolute;inset:0;transform:none;max-width:none;display:block;padding:0;overflow:visible;border:0;border-radius:0;background:none;backdrop-filter:none}
.deck .plans-elev .plans-tab{position:absolute;left:var(--bx);transform:translateY(-50%);width:var(--bw);min-height:52px;padding:0 14px;border:2px solid #b84029;background:#fff;color:#7a2a1b;font-size:15px;font-weight:700;box-shadow:0 8px 20px #1d120c55;transition:background .2s,color .2s}
.deck .plans-elev .plans-tab:hover,.deck .plans-elev .plans-tab:focus-visible{background:#b84029;color:#fff}
.deck .plans-floor-step .plans-elev .plans-tab{min-width:0}
.plans-elev-band{position:absolute;left:var(--tlx);width:calc(var(--trx) - var(--tlx));border-top:2px dashed #fff9ef;filter:drop-shadow(0 0 1px #000a);pointer-events:none;transition:background .2s}
.plans-elev-band[data-group=low]{border-bottom:2px dashed #fff9ef}
.plans-elev:has(.plans-tab[data-group=low]:is(:hover,:focus-visible)) .plans-elev-band[data-group=low],
.plans-elev:has(.plans-tab[data-group=mid]:is(:hover,:focus-visible)) .plans-elev-band[data-group=mid],
.plans-elev:has(.plans-tab[data-group=high]:is(:hover,:focus-visible)) .plans-elev-band[data-group=high]{background:#b8402966}
/* "Tầng 03–08": under its button (portrait phones), left of the tower (short landscape boxes), beside it (wide). */
.plans-elev-range{position:absolute;left:calc(var(--bx) + var(--bw) / 2);transform:translate(-50%,31px);padding:2px 8px;border-radius:999px;background:#283626d9;color:#fff9ef;font-size:12px;font-weight:700;pointer-events:none;white-space:nowrap}
@container (orientation:landscape){.plans-elev-range{left:auto;right:calc(100% - var(--tlx) + 8px);transform:translateY(-50%)}}
@container (min-width:640px) and (min-height:400px){.plans-elev-range{left:calc(var(--bx) + var(--bw) + 8px);right:auto;transform:translateY(-50%);font-size:13px}}
.plans-floor-pick{position:relative;margin:auto;display:grid;justify-items:center;gap:10px;width:min(560px,100%);padding:26px 22px;border-radius:16px;background:#fff9efee;color:#283626;text-align:center;box-shadow:0 30px 60px #0006;animation:layer-in .7s cubic-bezier(.19,1,.22,1) both}
.deck .plans-floor-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.16em;color:#b84029;text-transform:uppercase}
.deck .plans-floor-title{margin:0 0 6px;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.03em}
.plans-floor-step .plans-tabs{position:static;transform:none;max-width:100%;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;overflow:visible;border:0;border-radius:0;background:none;backdrop-filter:none}
.deck .plans-floor-step .plans-tab{min-height:56px;min-width:130px;padding:0 22px;border:2px solid #b84029;background:#fff;color:#7a2a1b;font-size:15px;font-weight:700;transition:background .2s,color .2s}
.deck .plans-floor-step .plans-tab:hover,.deck .plans-floor-step .plans-tab:focus-visible{background:#b84029;color:#fff}
.deck .plans-unit{min-height:48px;padding:6px;border:1px solid #28362640;border-radius:8px;background:#fff;color:#283626;font-size:13px;transition:background .2s,color .2s,transform .2s}
.deck .plans-unit:hover{background:#b84029;color:#fff;transform:translateY(-2px)}
/* CT2B Mặt bằng (level 1, after the floor step): the plan of one floor of the chosen group (14 unit polygons, dashboard
   "03 Căn" geometry) on the roof of the top-down render. Owner 2026-10-02: full-bleed like Tổng mặt bằng — no panel,
   no legend; the render covers the whole chapter under the overlay header, tabs and bottom bar, and drags/scrolls like
   a map (phones: larger than the screen). Never a page scroll. */
/* overflow:clip: no programmatic scroll container (focus of a unit must never shift the stage). */
.plans-fp-wrap{overflow:hidden;overflow:clip;padding:0}
.plans-fp{position:absolute;inset:0;animation:layer-in .7s cubic-bezier(.19,1,.22,1) both}
/* The heading is for screen readers (breadcrumb and tabs show it on screen). */
.plans-fp-head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Unit fill = LOẠI CĂN (owner 2026-10-01: solid, one colour per type; --tf fill, --tc label). Owner 2026-10-02: one
   outline for every unit whatever its status; a unit that cannot take a "Quan tâm" (data-bookable=false) carries a
   light diagonal hatch (.plans-fp-mark) over its colour. Hover/focus and the last opened unit still highlight. */
.plans-fp [data-type]{--tf:#e3dccf;--tc:#3d342c}
.plans-fp [data-type=STU]{--tf:#f2d27a;--tc:#3a2a10}
.plans-fp [data-type="1BED"]{--tf:#a9d3b0;--tc:#1f3324}
.plans-fp [data-type="2BED1"]{--tf:#8fc3dc;--tc:#12303d}
.plans-fp [data-type="2BED2"]{--tf:#f0a882;--tc:#4a1f0f}
.plans-fp [data-type="2BED4"]{--tf:#bcb5e3;--tc:#2a2550}
.plans-fp [data-type="2BED7"]{--tf:#dba5c6;--tc:#43183a}
.plans-fp [data-type="3BED4"]{--tf:#4f7f61;--tc:#fff9ef}
.plans-fp [data-type="3BED7"]{--tf:#9a5b3c;--tc:#fff9ef}
.plans-fp [data-type="3BED8"]{--tf:#3d6688;--tc:#fff9ef}
.plans-fp-scroll{position:absolute;inset:0;display:flex;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#1f2a20;container-type:size}
.plans-fp-scroll::-webkit-scrollbar{display:none}
/* The scene (top-down render, CT2B_ART.roof) covers the chapter like the masterplan (cover = the larger of the two
   fits), never below a legible plan width --L (--pw = plan width share of the image); the rest of the render
   drags/scrolls around the plan (the view starts centred on the roof). */
.plans-fp-scene{--L:520px;flex:none;margin:auto;width:max(100cqw,100cqh * var(--r),var(--L) / var(--pw,1));height:calc(max(100cqw,100cqh * var(--r),var(--L) / var(--pw,1)) / var(--r))}
.plans-fp-roof{position:absolute;transform-origin:50% 50%}
.plans-fp-roof .plans-fp-svg{position:absolute;inset:0;width:100%;height:100%}
/* On the roof: solid units (type colour, status mark on top), upright labels with a halo of the unit colour. */
.plans-fp-scene .plans-fp-outline{fill:#efe7da;stroke:#283626;stroke-opacity:.6;stroke-width:3}
.plans-fp-scene .plans-fp-unit path{stroke-width:3}
.plans-fp-scene .plans-fp-unit:is(:hover,:focus-visible) path{stroke-width:9}.plans-fp-scene .plans-fp-unit.is-selected path{stroke-width:11}
.plans-fp-scene .plans-fp-unit text{stroke:var(--tf);stroke-width:5px;stroke-linejoin:round;paint-order:stroke}
.plans-fp-scene .plans-fp-no{font-size:34px}.plans-fp-scene .plans-fp-type{font-size:22px}.plans-fp-scene .plans-fp-type.is-narrow{font-size:19px}
.plans-fp-scene .plans-fp-corridor{fill:#283626;stroke:#fff9ef;stroke-width:4px;paint-order:stroke}
.plans-fp-scroll:focus-visible{outline:3px solid #e7a333;outline-offset:-3px}
/* Wide screens: the full-bleed plan reaches the top of the chapter, so the group tabs stand in a column under the
   breadcrumb (left, over the render) instead of over the plan. */
@media(min-width:761px){.plans-layer.is-floorplan .plans-tabs{left:16px;top:calc(var(--deck-top) + 44px);transform:none;flex-direction:column;border-radius:24px}}
/* Desktop: the whole floor fits the panel. Phones (below): a fixed legible width, swiped sideways. */
.plans-fp-svg{display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;margin:auto;font-family:inherit}
.plans-fp-outline{fill:#dce0d3;stroke:#859685;stroke-width:1.5}
.plans-fp-unit{cursor:pointer;outline:none}
/* Gói L: a polygon without a Sheet row (not in the bảng hàng): dimmed, not selectable. */
.plans-fp-unit[data-missing=true]{cursor:not-allowed;opacity:.32}
.plans-fp-unit[data-missing=true] path{fill:#d9d2c6}
.plans-fp-unit path{fill:var(--tf);stroke:#283626;stroke-opacity:.75;stroke-width:1.7;transition:stroke .2s}
.plans-fp-unit .plans-fp-mark{fill:none;stroke:none;pointer-events:none}
/* Dark and light line side by side: the hatch reads on pale and dark type colours alike. */
.plans-fp-hatch{fill:none;stroke:#283626;stroke-opacity:.3;stroke-width:2}.plans-fp-hatch.is-light{stroke:#fff9ef;stroke-opacity:.35}
.plans-fp-unit text{fill:var(--tc);text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums}
.plans-fp-no{font-size:26px;font-weight:700}
.plans-fp-type{font-size:18px;font-weight:600}
.plans-fp-type.is-narrow{font-size:15px}
.plans-fp-unit:hover path,.plans-fp-unit:focus-visible path{stroke:#b84029;stroke-opacity:1;stroke-width:5}
.plans-fp-unit.is-selected path{stroke:#c08a2e;stroke-opacity:1;stroke-width:7}
.plans-fp-corridor{fill:#4d5e50;font-size:15px;text-anchor:middle;letter-spacing:.08em;pointer-events:none}
.plans-fp-north circle{fill:#f9faf4;stroke:#cbd4c8;stroke-width:1.5}
.plans-fp-north path{fill:#244e49}
.plans-fp-north .plans-fp-north-shaft{fill:none;stroke:#244e49;stroke-width:3}
.plans-fp-north-label{fill:#244e49;font-size:17px;font-weight:700;text-anchor:middle}
/* Detail without a layout image: the schematic is explicitly marked as an illustration. */
.detail-placeholder{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:#283626cc;color:#fff9ef;font-size:13px;font-weight:600;white-space:nowrap}
/* Unit detail: media fills the stage, one card with the information. */
.detail-stage{position:absolute;inset:0;background:#efe9dc;overflow:hidden}
.detail-media{position:absolute;inset:0;animation:layer-in .8s cubic-bezier(.19,1,.22,1) both}
.detail-media img{display:block;width:100%;height:100%}
.detail-media.is-layout{inset:calc(var(--deck-top) + 48px) calc(min(400px,38vw) + 32px) calc(var(--deck-bottom) + 12px) 24px}
.detail-media.leaving{animation:seq-out .6s ease both}
.detail-schematic{position:absolute;inset:calc(var(--deck-top) + 48px) calc(min(400px,38vw) + 32px) calc(var(--deck-bottom) + 12px) 24px;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:640px;max-height:520px;margin:auto}
.detail-schematic span{display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;border:4px solid #354534;background:#fffaf0;color:#283626;font-size:14px}
.detail-schematic span:nth-child(2){background:#dec5a6}.detail-schematic span:nth-child(3){background:#ced4bf}
.detail-card{position:absolute;z-index:4;right:16px;top:calc(var(--deck-top) + 6px);max-height:calc(100% - var(--deck-top) - var(--deck-bottom) - 18px);width:min(400px,38vw);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px 22px;border-radius:14px;background:#fff9eff2;color:#283626;box-shadow:0 20px 50px #1d120c40;backdrop-filter:blur(10px);animation:layer-in .8s cubic-bezier(.19,1,.22,1) both}
.deck .detail-eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:.16em;color:#b84029;text-transform:uppercase}
.deck .detail-title,.deck .summary-title{margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.deck .detail-type{margin:0;font-size:14px;font-weight:700}
.detail-info,.summary-facts{display:grid;gap:8px;margin:0}
.detail-info div,.summary-facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;padding-top:8px;border-top:1px solid #28362626}
.detail-info dt,.summary-facts dt{font-size:12px;opacity:.75}.detail-info dd,.summary-facts dd{margin:0;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.detail-views{display:flex;flex-wrap:wrap;gap:6px}
.deck .detail-view{min-height:36px;padding:0 12px;border:1px solid #28362650;border-radius:999px;font-size:12px}
.deck .detail-view[aria-pressed=true]{background:#283626;color:#fff}
.deck .detail-note{margin:0;font-size:12px;line-height:1.5;opacity:.85}
/* detail desktop (Gói H, owner 2026-10-03): layout ≈ 64 % of the free height, card right beside it, the pair centred.
   --layout-r = the layout image's width/height (presentation.js renderDetail), 1.25 until it is known. */
@media(min-width:761px){
 .plans-level-2{--layout-r:1.25;--d-top:calc(var(--deck-top) + 48px);--d-h:calc(100dvh - var(--d-top) - var(--deck-bottom) - 12px);--d-cw:min(400px,38vw);--d-gap:28px;
  --d-ih:calc(var(--d-h) * .64);--d-iw:min(calc(var(--d-ih) * var(--layout-r)),calc(100vw - var(--d-cw) - var(--d-gap) - 48px));
  --d-left:max(24px,calc((100vw - var(--d-iw) - var(--d-gap) - var(--d-cw)) / 2));--d-y:calc(var(--d-top) + (var(--d-h) - var(--d-ih)) / 2)}
 .plans-level-2 .detail-media.is-layout,.plans-level-2 .detail-schematic{inset:auto;left:var(--d-left);top:var(--d-y);width:var(--d-iw);height:var(--d-ih);max-width:none;max-height:none;margin:0}
 .plans-level-2:has(.detail-media.is-layout,.detail-schematic) .detail-card{right:auto;left:calc(var(--d-left) + var(--d-iw) + var(--d-gap));top:var(--d-y);max-height:calc(100dvh - var(--d-y) - var(--deck-bottom) - 12px)}
}
/* Summary (dealer mode only). */
.summary{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:calc(var(--deck-top) + 44px) 16px calc(var(--deck-bottom) + 16px);background:#283626}
.summary-panel{width:min(780px,100%);margin:0 auto;display:grid;gap:12px;padding:24px 26px;border-radius:14px;background:#fff9ef;color:#283626}
.summary-facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:18px}
.deck .summary-status{margin:0;padding:10px 12px;border-radius:8px;background:#f6e3d9;color:#7a2a1b;font-size:13px}
.deck .summary-status.is-ok{background:#e1ecd9;color:#27472a}
.summary-status:empty{display:none}
.summary-form fieldset{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0;margin:0;padding:0;border:0}
.summary-form fieldset:disabled{opacity:.5}
.summary-slot{display:grid;align-content:start;gap:8px;min-width:0;padding:12px;border:1px dashed #28362670;border-radius:10px}
.summary-slot.has-file{border-style:solid}
.summary-slot-label{font-size:13px;font-weight:700}
.summary-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.summary-slot{position:relative}
.summary-slot:focus-within{outline:3px solid #e7a333;outline-offset:2px}
.summary-slot-actions{display:flex;flex-wrap:wrap;gap:8px}
.summary-pick{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:#283626;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
fieldset:disabled .summary-pick{cursor:not-allowed}
.summary-file{display:grid;gap:6px;min-width:0;font-size:12px}
.summary-file img{display:block;max-width:100%;max-height:150px;border-radius:6px;object-fit:contain;background:#fff}
.summary-pdf{display:grid;place-items:center;width:56px;height:68px;border-radius:6px;background:#b84029;color:#fff;font-weight:700}
.summary-meta,.summary-empty{overflow-wrap:anywhere;opacity:.8}
.deck .summary-remove{justify-self:start;min-height:34px;padding:0 12px;border:1px solid #28362650;border-radius:999px;font-size:12px}
.summary-remove[hidden]{display:none}
.summary-field{display:grid;gap:6px;min-width:0;font-size:13px;font-weight:700}
.summary-field input,.summary-field textarea{min-height:46px;padding:10px 12px;border:1px solid #28362650;border-radius:8px;background:#fff;color:#283626;font:inherit;font-size:16px;font-weight:400}
.summary-field textarea{min-height:76px;resize:vertical}
.summary-field:has(textarea),.summary-consent{grid-column:1/-1}
.summary-field [aria-invalid=true]{border-color:#b3261e}
.summary-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5}
.summary-consent input{flex:none;width:20px;height:20px;margin:1px 0 0}
.deck .summary-error{min-height:1.2em;margin:0;color:#b3261e;font-size:14px}
.deck .summary-send{justify-self:start;min-height:50px;padding:0 38px;border-radius:12px;background:#b84029;color:#fff;font-size:16px;font-weight:700}
.deck .summary-send:disabled{opacity:.4;cursor:not-allowed}
.summary-form{display:grid;gap:12px}
.summary-done{display:grid;gap:4px;padding:14px;border-radius:10px;background:#e1ecd9;color:#27472a}
@media(max-width:760px){
 body.is-deck{--deck-top:72px;--deck-bottom:70px}
 body.is-deck .deck-fullscreen{width:36px;height:36px}
 .deck-foot{left:8px;right:8px;bottom:8px;height:50px;padding:0 10px;gap:6px}
 .deck-line,.deck-total{display:none}.deck-name{margin-left:4px;font-size:10px;max-width:22vw}.deck-num{font-size:18px}
 .deck-navs button{padding:0 12px}
 .deck-copy{left:6%;right:6%;width:auto}.deck-title{font-size:clamp(34px,11vw,56px)}.seq-copy .deck-title{font-size:clamp(34px,10.5vw,52px)}
 .deck-text{font-size:13px;margin-top:14px}.deck-cta{margin-top:20px;padding:12px 16px}
 .overlay-card{padding:14px;width:auto;top:auto;bottom:calc(var(--deck-bottom) + 44px)}.overlay-card .deck-title{font-size:28px}
 .tpl-overlay .deck-note{bottom:auto;top:calc(var(--deck-top) + 4px)}
 .seq-controls{left:5%;right:5%;justify-content:space-between;gap:6px}.seq-thumbs{gap:5px}.seq-thumbs button{width:44px;height:38px}
 .deck-pin b{width:30px;height:30px;font-size:10px}.deck-pin span{font-size:8px;padding:4px 7px}
 .deck-note{left:6%!important;right:6%!important;bottom:calc(var(--deck-bottom) + 60px);text-align:center}
 .deck-plans-nav{bottom:10px}.deck-plans-nav button{min-height:40px;padding:0 16px}
 .audience-panel{bottom:calc(var(--deck-bottom) + 5vh)}.audience-choices{flex-direction:column;align-items:stretch}.deck .audience-choice{max-width:none;min-height:52px}
 .plans-pin>strong{min-width:48px;height:26px;font-size:11px}
 .plans-card{min-width:180px;padding:12px 14px}
 .plans-tabs{top:calc(var(--deck-top) + 40px)}.deck .plans-tab{padding:0 12px;font-size:12px}
 .plans-grid-wrap{padding:calc(var(--deck-top) + 92px) 8px calc(var(--deck-bottom) + 10px)}.plans-grid{padding:14px;gap:12px}
 .plans-floor{grid-template-columns:1fr;gap:6px}.plans-floor-units{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .detail-media.is-layout,.detail-schematic{inset:calc(var(--deck-top) + 44px) 8px 50% 8px}
 .detail-card{left:8px;right:8px;width:auto;top:auto;bottom:calc(var(--deck-bottom) + 6px);max-height:calc(50% - var(--deck-bottom) - 12px);padding:16px}
 .deck-plans-nav{gap:6px;padding:5px}.deck-plans-nav button{padding:0 13px}.deck .deck-plans-nav .plans-interest{padding:0 16px}
 /* Plan 640 px wide on screen (touch): unit numbers ≈ 17 px, unit types ≈ 11 px, narrowest unit (10) ≈ 37 px across;
    the render is larger than the screen and drags both ways. */
 .plans-fp-scene{--L:640px}
 .plans-floor-pick{padding:20px 14px}.deck .plans-floor-step .plans-tab{min-width:0;flex:1 1 0;padding:0 10px;font-size:14px}
 .summary{padding:calc(var(--deck-top) + 40px) 8px calc(var(--deck-bottom) + 10px)}.summary-panel{padding:16px}
 .summary-form fieldset{grid-template-columns:1fr}
}
@media(max-height:520px) and (min-width:761px){
 body.is-deck{--deck-top:66px;--deck-bottom:62px}
 body.is-deck .deck-fullscreen{width:34px;height:34px}
 .deck-foot{height:42px;bottom:8px}.deck-title{font-size:clamp(30px,5vw,52px)}.seq-copy .deck-title{font-size:clamp(28px,4.6vw,48px)}
 .deck-text{margin-top:8px;font-size:12px}.deck-eyebrow{margin-bottom:8px}.deck-cta{margin-top:12px;min-height:38px;padding:8px 14px}
 .overlay-card{padding:12px}.overlay-card .deck-title{font-size:24px}
 .deck-plans-nav{bottom:8px}.deck-plans-nav button{min-height:36px}
 .audience-panel{bottom:calc(var(--deck-bottom) + 3vh);gap:8px}.deck .audience-choice{min-height:46px}
 .plans-floor-step:has(.has-elev){padding-top:calc(var(--deck-top) + 34px)}
 .plans-floor-pick.has-elev{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:16px;text-align:left}
 .plans-floor-pick.has-elev .plans-elev-box{grid-column:2;grid-row:1/3}.deck .plans-elev .plans-tab{min-height:40px;font-size:13px}
 /* Phone landscape: group tabs move up beside the breadcrumb; the plan keeps a legible width and drags. */
 .plans-tabs{top:calc(var(--deck-top) + 2px)}
 .plans-fp-scene{--L:640px}
}
@media(prefers-reduced-motion:reduce){
 .deck *,.deck *:before,.deck *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---- Home hero (#home, release_ui 'home', contract v7 §2/§12) ---------------------------------------------
   Full viewport under the shared overlay header; copy below the header on every viewport. */
.home-hero{position:fixed;inset:0;z-index:1;overflow:hidden;color:#fff9ef;background:#283626;font-family:var(--font-sans,Arial,sans-serif)}
.home-hero[hidden]{display:none}
body.is-home{--deck-top:84px;overflow:hidden;height:100dvh;background:#283626}
body.is-home main{margin:0;padding:0}
.home-media{position:absolute;inset:0}
.home-media img,.home-media video{display:block;width:100%;height:100%;object-fit:cover}
.home-media.is-kenburns img{animation:home-kenburns 22s ease-in-out infinite alternate}
@keyframes home-kenburns{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.home-copy{position:absolute;z-index:2;left:6%;right:6%;bottom:max(9vh,calc(env(safe-area-inset-bottom) + 28px));max-width:760px;text-shadow:0 1px 2px #000c,0 0 6px #0009,0 2px 18px #0009}
.home-eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.19em;font-weight:700;color:inherit}
.home-title{margin:0;font-weight:500;letter-spacing:-.04em;line-height:1.2;font-size:clamp(44px,7vw,120px);color:inherit}
.home-title span{display:block}.home-title span:last-child:not(:first-child){font-family:var(--font-serif,Georgia,serif);font-style:italic;font-weight:400}
.home-text{margin:22px 0 0;max-width:480px;font-size:clamp(15px,1.4vw,20px);line-height:1.55;color:inherit}.home-text span{display:block}
.home-cta{display:inline-flex;align-items:center;gap:26px;min-height:48px;margin-top:30px;padding:14px 22px;border-radius:3px;background:#f3efe5;color:#25271c;font-size:14px;font-weight:600;text-decoration:none;text-shadow:none}
.home-cta:hover{background:#fff}
.home-cta:focus-visible{outline:3px solid #e7a333;outline-offset:3px}
/* Home bottom bar (Gói H): same look as .deck-foot (the chapters' bar); the copy stays above it. */
.home-foot{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-radius:12px;border:1px solid #ffffff30;isolation:isolate;color:#fff9ef}
.home-foot:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgb(184 64 41 / .5);backdrop-filter:blur(10px);pointer-events:none}
.home-foot .deck-navs a{display:inline-flex;align-items:center;gap:.3em;height:36px;padding:0 16px;border:1px solid #ffffff70;border-radius:30px;font-size:12px;color:inherit;text-decoration:none}
.home-foot .home-next{background:#ffffff26}.home-foot [aria-disabled=true]{opacity:.35;pointer-events:none}
.home-foot a:focus-visible{outline:3px solid #e7a333;outline-offset:3px}
.home-hero:has(.home-foot) .home-copy{bottom:calc(max(9vh,calc(env(safe-area-inset-bottom) + 28px)) + 52px)}
@media(max-width:760px){
 body.is-home{--deck-top:72px}
 .home-copy{left:22px;right:22px;bottom:max(7vh,calc(env(safe-area-inset-bottom) + 22px))}
 .home-title{font-size:clamp(38px,12vw,60px)}.home-text{font-size:14px;margin-top:14px}
 .home-cta{margin-top:22px;min-height:48px;padding:12px 18px}
 .home-foot{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));height:50px;padding:0 10px;gap:6px}
 .home-foot .deck-line,.home-foot .deck-total{display:none}.home-foot .deck-name{margin-left:4px;font-size:10px;max-width:22vw}.home-foot .deck-num{font-size:18px}
 .home-foot .deck-navs a{padding:0 12px}
 .home-hero:has(.home-foot) .home-copy{bottom:calc(max(7vh,calc(env(safe-area-inset-bottom) + 22px)) + 52px)}
}
@media(max-height:560px){.home-copy{bottom:18px}.home-title{font-size:clamp(30px,8vh,56px)}.home-text{margin-top:8px}.home-cta{margin-top:12px}.home-hero:has(.home-foot) .home-copy{bottom:76px}}
@media(prefers-reduced-motion:reduce){.home-media.is-kenburns img{animation:none!important}}
/* ---- Staff view (Gói B, amendment A): hidden / dealer-only chapters are labelled; guests never get these nodes ---- */
.chapter-flag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e7a333;color:#283626;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.02em}
[data-chapter-strip] a[data-hidden-chapter],.deck-strip a[data-hidden-chapter]{font-style:italic;opacity:.85}
.deck-flag{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;transform:translateX(-50%);display:block;padding:5px 14px;border-radius:999px;background:#e7a333;color:#283626;font-size:12px;font-weight:700;box-shadow:0 6px 18px #0004;pointer-events:none}
/* view compass (Gói V, template compass in presentation.js): background + compass ring + 4 direction cards
   (top/left/right/bottom); a card opens its image over the stage (.compass-full), "4 hướng" / Tiếp ý → go back. */
.tpl-compass{--cw:clamp(150px,min(21vw,28vh),300px);--sw:clamp(120px,min(17vw,30vh),250px)}
/* overflow:clip, not hidden: the zoomed full image never makes the chapter scrollable (focus/scrollIntoView). */
.tpl-compass,.compass-full{overflow:clip}
.compass-eyebrow{position:absolute;z-index:3;left:24px;top:calc(var(--deck-top) + 10px);margin:0;text-shadow:0 1px 2px #000c,0 0 6px #0009,0 2px 12px #0009}
.compass-stage{position:absolute;z-index:3;inset:calc(var(--deck-top) + 8px) 16px calc(var(--deck-bottom) + 14px);display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;
 grid-template-areas:"top top top" "left . right" "bottom bottom bottom";gap:10px;align-items:center}
/* The ring fills the middle row: N just under the top card, S just over the bottom one, behind the cards. */
.compass-ring{position:relative;grid-area:2/1/3/4;justify-self:center;align-self:center;height:calc(100% - 30px);max-height:min(92vw,100vh);aspect-ratio:1;border-radius:50%;border:2px solid #ffffffb8;box-shadow:0 0 0 10px #ffffff1f,inset 0 0 40px #ffffff26;pointer-events:none}
.compass-letter{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fffaf0;color:#283626;font-size:16px;font-weight:700;box-shadow:0 6px 18px #0005;transform:translate(-50%,-50%)}
.compass-letter-top{left:50%;top:0}.compass-letter-bottom{left:50%;top:100%;background:var(--rust,#b84029);color:#fff}
.compass-letter-left{left:0;top:50%}.compass-letter-right{left:100%;top:50%}
.deck .compass-card{position:relative;z-index:1;display:flex;flex-direction:column;width:var(--cw);max-width:100%;padding:6px;border:2px solid #ffffffcc;border-radius:14px;background:#1d3427cc;color:#fff;
 box-shadow:0 14px 34px #0006;backdrop-filter:blur(6px);text-align:center;transition:transform .25s,background .25s}
.deck .compass-card:hover,.deck .compass-card:focus-visible,.deck .compass-card.is-last{background:var(--rust,#b84029);transform:translateY(-2px)}
.compass-top{grid-area:top;justify-self:center}.compass-bottom{grid-area:bottom;justify-self:center}
.deck .compass-left,.deck .compass-right{width:var(--sw)}
.compass-left{grid-area:left;justify-self:end;margin-right:-2vw}.compass-right{grid-area:right;justify-self:start;margin-left:-2vw}
.compass-thumb{display:block;overflow:hidden;border-radius:9px;aspect-ratio:16/9;background:#ffffff1a}
.compass-left .compass-thumb,.compass-right .compass-thumb{aspect-ratio:4/3}
.compass-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.compass-cap{display:flex;flex-direction:column;gap:2px;padding:7px 4px 3px;line-height:1.25}
.compass-cap strong{font-size:clamp(14px,1.3vw,19px);letter-spacing:.06em;text-transform:uppercase}
.compass-cap small{font-size:clamp(11px,1vw,14px);opacity:.92}
.compass-full{position:absolute;inset:0;z-index:5;background:#283626}
.compass-full[hidden]{display:none}
.compass-full-media,.compass-full-media .deck-media{position:absolute;inset:0}
.deck-slide.active .compass-full-media img{animation:deck-zoom 9s ease-out both}
.compass-full-title{text-transform:uppercase;font-size:clamp(36px,5.4vw,92px)}
.tpl-compass.is-full .compass-stage,.tpl-compass.is-full .compass-eyebrow{visibility:hidden}
@media(max-width:760px){
 .tpl-compass{--cw:min(62vw,300px);--sw:34vw}
 .compass-eyebrow{display:none}
 .compass-stage{inset:calc(var(--deck-top) + 6px) 8px calc(var(--deck-bottom) + 24px);gap:8px}
 .compass-left{justify-self:start;margin-right:0}.compass-right{justify-self:end;margin-left:0}
 .deck .compass-card{padding:4px;border-radius:12px}.compass-thumb{border-radius:8px}
 .compass-cap{padding:5px 2px 2px}.compass-cap strong{font-size:14px}.compass-cap small{font-size:11px}
 .compass-letter{width:32px;height:32px;font-size:14px}.compass-letter-left,.compass-letter-right{display:none}
 .tpl-compass .deck-note{top:auto;bottom:calc(var(--deck-bottom) + 2px);padding:3px 6px;font-size:8px}
}
@media(max-height:560px) and (min-width:761px){
 .tpl-compass{--cw:clamp(130px,19vw,230px);--sw:var(--cw)}
 .compass-stage{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;grid-template-areas:"left top bottom right";justify-items:center}
 .compass-ring{grid-area:1/1/2/5;height:min(100%,40vw)}
 .compass-left,.compass-right{margin:0;justify-self:center}.compass-left .compass-thumb,.compass-right .compass-thumb{aspect-ratio:16/9}
 .compass-eyebrow{display:none}
}
@media(prefers-reduced-motion:reduce){.deck .compass-card{transition:none}.deck-slide.active .compass-full-media img{animation:none}}
/* home swipe (Gói R2): on Home a horizontal swipe changes page (presentation.js homeGo), not the browser history */
html:has(body.is-home){overscroll-behavior-x:none}