/* site.css — CSS of the approved Norton Park UI, extracted VERBATIM from
   web/index.html <style> by inline/derive-from-web.py (2026-09-23).
   url('assets/…') resolves relative to THIS file → site/assets/.
   Differences for the inline build live in inline.css (loaded after). */
/* ===== FONT BRAND (BRAND-GUIDELINE.md muc 6): The Seasons=tiêu đề · Futura=phụ đề · Gotham=nội dung.
   Bản SVN có tiếng Việt; glyph nào font thiếu thì trình duyệt tự fallback theo từng ký tự. ===== */
@font-face{font-family:'The Seasons';font-weight:300;font-display:swap;src:url('assets/fonts/SVN-The%20Seasons/OTF/SVN-TheSeasons-Light.otf') format('opentype')}
@font-face{font-family:'The Seasons';font-weight:400;font-display:swap;src:url('assets/fonts/SVN-The%20Seasons/OTF/SVN-TheSeasons-Regular.otf') format('opentype')}
@font-face{font-family:'The Seasons';font-weight:700;font-display:swap;src:url('assets/fonts/SVN-The%20Seasons/OTF/SVN-TheSeasons-Bold.otf') format('opentype')}
@font-face{font-family:'Futura Norton';font-weight:400;font-display:swap;src:url('assets/fonts/SFUFutura/SFUFuturaBook.TTF') format('truetype')}
@font-face{font-family:'Futura Norton';font-weight:700;font-display:swap;src:url('assets/fonts/SFUFutura/SFUFuturaHeavy.TTF') format('truetype')}
@font-face{font-family:'Gotham Norton';font-weight:300;font-display:swap;src:url('assets/fonts/SVN-Gotham/SVN-Gotham%20Light.otf') format('opentype')}
@font-face{font-family:'Gotham Norton';font-weight:400;font-display:swap;src:url('assets/fonts/SVN-Gotham/SVN-Gotham%20Book.otf') format('opentype')}
@font-face{font-family:'Gotham Norton';font-weight:700;font-display:swap;src:url('assets/fonts/SVN-Gotham/SVN-Gotham%20Bold.otf') format('opentype')}
/* Tiêu đề lớn = The Seasons (serif thanh lịch) */
.ct-hero h4,#pop .head h2,.ct-form h3,.gal-title{font-family:var(--f-head)}
/* Nhãn/phụ đề chữ hoa = Futura */
.hs .hs-lab,#tour .cap,#compass .lab,#compass .deg,#mood .seg button,.ct-hero-kicker,
#pop .head .crumb,#minimap .head h3,#floors h4,#sheet h5,.ph-full b,.ct-soc-lab,
.gal-chip{font-family:var(--f-sub)}
:root{
  /* --- lấy từ cấu hình bản 3D --- */
  --accent:#F3EBDA;    /* kem sáng — kéo về họ Kem–Cát guideline (Stone Beige pha sáng) */
  --text:#eef2f7;
  --warm:#C39B77;      /* Champagne Bronze #A78061 pha sáng cho chữ trên nền tối */
  --btn:49px;          /* theme.button.size     */
  --icon:24px;         /* theme.button.iconSize */
  --gap:8px;           /* theme.button.gap      */
  --edge:12px;         /* theme.button.edge     */
  /* ---- 4 CÔNG TẮC ĐỘ MỜ ĐỤC CHO MỌI NÚT KÍNH (.glass) ----
     Chốt 2026-09-10: phương án D "Kính sữa" — xem & duyệt lại ở
     web/mockups/glass-opacity-concepts.html (mở, bấm preset D).
     Đổi 4 số này là MỌI nút tròn đổi theo: rail phải, cụm góc dưới-phải,
     la bàn, nút ☰ mobile, thẻ ban công.
     4 panel mood / tour / minimap / menu tầng có bộ công tắc riêng (ở phần
     CSS của từng cái) — hiện đặt CÙNG mức D; sửa ở đây nhớ sửa luôn 4 chỗ đó. */
  --g-rgb:43,46,35;   /* tint Dark Pine theo brand guideline */
  --g-tint:.34;       /* 1. nền tối       : .08 trong veo → .45 đặc      */
  --g-blur:18px;      /* 2. sương mờ      : 2px sắc nét  → 36px mịn dày  */
  --g-sheen:.22;      /* 3. lớp sữa trắng : .04 nhạt     → .28 đục sữa   */
  --g-edge:.34;       /* 4. viền kính     : .10 mảnh     → .45 rõ        */
  --line:rgba(220,211,192,.22);   /* hairline Beige Sand thay trắng lạnh */
  --glass:rgba(var(--g-rgb),var(--g-tint));   /* ghép từ 2 công tắc trên */
  --popup:rgba(23,25,18,.95);  /* nền popup: đen ấm họ pine (bỏ navy lạnh) */
  --radius:16px;
  /* thanh cuộn — xem khối 'THANH CUỘN THƯƠNG HIỆU' bên dưới */
  --sb:rgba(195,155,119,.5);      /* con trượt Champagne Bronze */
  --sb-h:rgba(195,155,119,.82);   /* khi rê chuột */
  /* --- font brand --- */
  --f-head:'The Seasons',Georgia,'Times New Roman',serif;
  --f-sub:'Futura Norton','Segoe UI',system-ui,sans-serif;
  --f-body:'Gotham Norton','Segoe UI',system-ui,-apple-system,sans-serif;
  --map-w:min(456px,34vw);  /* minimap.width — +20% theo feedback; min() tránh đè thanh tour ở cửa sổ hẹp */
  --comp-w:320px;      /* compass.width         */
  --mood-w:276px;      /* modes.width — nới cho nhãn tiếng Việt */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;overflow:hidden;overscroll-behavior:none}
body{
  font:400 14px/1.45 var(--f-body);
  color:var(--text);-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}  /* chặn menu lưu ảnh khi chạm giữ (mobile) */

/* ---------- THANH CUỘN THƯƠNG HIỆU ----------
   Mặc định của Windows là thanh xám dày, lạc hẳn khỏi lớp UI kính. Thay bằng
   con trượt mảnh màu Champagne Bronze trên rãnh trong suốt — áp cho MỌI vùng
   cuộn của trang.
   Viết hai cú pháp cho hai họ trình duyệt, cùng một hình thức:
     · scrollbar-width / scrollbar-color  → Firefox, Chrome 121+
     · ::-webkit-scrollbar-*              → Safari, Chrome/Edge cũ
   Mẹo `border trong suốt + background-clip:padding-box`: con trượt trông thon
   5px nhưng vùng bắt chuột vẫn rộng 9px, dễ kéo. */
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:var(--sb);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--sb-h)}   /* background-COLOR chứ không phải shorthand: shorthand sẽ reset background-clip */
::-webkit-scrollbar-corner{background:transparent}

/* ---------- nền tĩnh (thay cho khung 3D) ---------- */
/* height:100dvh — Chrome Android (omnibox đáy / edge-to-edge) tính inset:0 theo
   viewport LỚN (như khi thanh URL ẩn) nên hàng nút đáy tụt sau thanh trình duyệt;
   dvh luôn đúng bằng vùng đang nhìn thấy. Trình duyệt cũ bỏ qua dòng này → giữ inset. */
.stage{position:fixed;inset:0;overflow:hidden;height:100dvh}
.bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  transition:filter .9s ease;
}
/* nền là IFRAME viewer Viz4D (bridge chèn khi CFG.viewer.enabled) — cùng class .bg
   nên mood filter / kick áp y như với ảnh tĩnh; border 0 vì iframe có viền UA */
iframe.bg{border:0;background:#07080b}
body.v4d-on .hs:not(.hs-v4d){display:none!important}   /* nền 3D live: pin neo %-ảnh ẩn — pin 3D (.hs-v4d, bridge dựng, bám camera) thay thế */
body:not(.v4d-on) [data-act="freefly"]{display:none!important}   /* "Bay tự do" chỉ có nghĩa khi nền 3D sống — bản tĩnh không có gì để tắt snap */
/* lớp pin 3D: bridge chiếu toạ độ world → px mỗi khung hình; container không bắt
   chạm (xuyên xuống viewer), từng pin tự bật lại — cùng khuôn với #blStack */
#v4dHs{position:absolute;inset:0;pointer-events:none}
/* Mỗi pin nằm trong một KHUNG ĐỊNH VỊ riêng: khung chỉ nhận transform (chạy
   thẳng trên compositor, không đụng layout), còn nút .hs giữ nguyên transform
   canh giữa + hover scale của bộ CSS đã duyệt — hai việc không giẫm lên nhau. */
#v4dHs .v4d-pin{position:absolute;left:0;top:0;will-change:transform;
  transition:opacity .16s ease}
#v4dHs .v4d-pin.crop{display:none}
#v4dHs .v4d-pin.occl{opacity:0;pointer-events:none}   /* bị công trình che khuất */
#v4dHs .hs{position:relative;pointer-events:auto}
.bg.is-sunset{filter:saturate(1.15) contrast(1.04) sepia(.28) hue-rotate(-12deg) brightness(.96)}
.bg.is-night{filter:saturate(.75) brightness(.42) contrast(1.1) hue-rotate(190deg)}
/* static fallback page: grades of the moods without a scene (Trưa) and of Chiều's fallback */
.bg.is-noon{filter:brightness(1.06) contrast(1.05) saturate(1.08)}
.bg.is-afternoon{filter:saturate(1.12) contrast(1.03) sepia(.22) hue-rotate(-8deg) brightness(.97)}
/* CẤP MÁY THẤP (bridge gắn body.v4d-tier-low | -tablet | -mobile theo GPU/RAM/UA):
   năm lớp kính mờ 18px nằm cố định trên nền WebGL đổi từng khung = compositor
   phải làm mờ lại mọi vùng đó mỗi khung ở độ phân giải Retina. Hạ còn 6px cho
   GPU tích hợp; máy có GPU rời (tier high/mid) giữ nguyên 18px đã duyệt. */
body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile{--g-blur:6px}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #mood .seg{--md-blur:6px}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #tour .bar{--tr-blur:6px}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #minimap{--mm-blur:6px}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #floors{--fl-blur:6px}
.bg.kick{animation:bgKick 1.4s ease}
@keyframes bgKick{0%{transform:scale(1)}45%{transform:scale(1.028)}100%{transform:scale(1)}}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.28) 100%)}

/* ---------- lớp phủ giao diện ---------- */
.ui{position:absolute;inset:0;transition:opacity .25s;pointer-events:none}
/* ---------- màn mở đầu: video intro che lúc viewer 3D nạp ngầm ----------
   Phát 1 lần → chụp KHUNG CUỐI ra canvas rồi trả decoder → viewer ready thì
   FADE: khung cuối mờ dần + đẩy nhẹ vào, cảnh 3D rõ dần lên từ nền tối.
   z-index 200: trên mọi lớp UI (cao nhất hiện có là 92). */
#introGate{position:fixed;inset:0;z-index:200;background:#07080b;
  opacity:1;will-change:opacity;
  transition:opacity 4s cubic-bezier(.45,.05,.2,1)}   /* crossfade 4s — khop #sceneBridge + fadeSeconds */
#introGate.out{opacity:0;pointer-events:none}
/* translateZ: đẩy video/khung cuối lên lớp compositor riêng — đổi độ mờ của
   màn không kéo theo một lượt vẽ lại toàn trang ở mỗi khung. */
#introGate video,#introGate .ig-poster,#introGate .ig-freeze{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateZ(0);backface-visibility:hidden}
#introGate video{will-change:transform}
#introGate .ig-poster{display:none;object-position:center 55%;opacity:0;transition:opacity .6s ease}   /* dự phòng khi video không phát được */
/* ảnh nền chỉ hiện (mờ dần vào) khi đã tải + giải mã xong — v4d-bridge.js › whenShown (chủ dự án 02/10/2026 tối): mạng chậm
   không còn cảnh ảnh vẽ dần từ trên xuống. Máy 4K / Retina: bản gốc (.ig-poster-hi) phủ lên bản 2560 khi nó về. */
#introGate .ig-poster.ready{opacity:1}
/* Khung cuối chụp lại: hiện lên đúng lúc thẻ <video> nhả bộ giải mã, người xem
   không thấy khác gì vì đây chính là khung hình cuối cùng vừa phát. */
#introGate .ig-freeze{display:none}
#introGate.frozen video{display:none}
#introGate.frozen .ig-freeze{display:block}
/* Lúc tan màn: khung cuối đẩy vào 1.035 — cú chuyển có nhịp chứ không phải
   một cái tắt đèn; đúng chiều với cảnh 3D đang lùi về 1 ở dưới. */
#introGate.out video,#introGate.out .ig-freeze,#introGate.out .ig-poster{
  transform:translateZ(0) scale(1.05);
  filter:blur(4px) saturate(.92);
  transition:transform 4s cubic-bezier(.45,.05,.2,1),filter 4s cubic-bezier(.45,.05,.2,1)}
/* Khối chờ (29/09/2026, chủ dự án: "màn chờ thành tiến độ"): nhịp chờ + thanh tiến độ THẬT + % (v4d-bridge.js ›
   loading progress, theo số byte cảnh đầu đã tải) + dòng nhắc không rời trang — trang ẩn thì cảnh thôi tải. */
#introGate .ig-load{position:absolute;left:50%;bottom:max(7.5%,calc(env(safe-area-inset-bottom,0px) + 24px));
  transform:translateX(-50%);width:min(340px,calc(100vw - 48px));
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:0;transition:opacity .5s;z-index:2}
/* quầng tối mềm sau khối chờ: ảnh nền nhiều chi tiết (đường, metro, mặt tiền AEON của ảnh masterplan) ở đúng chỗ chữ.
   02/10/2026 tối (chủ dự án duyệt mockup): đậm + rộng hơn (.52 → .7, -24/-52 → -34/-84 px) */
#introGate .ig-load::before{content:'';position:absolute;inset:-34px -84px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,8,11,.7),rgba(7,8,11,0))}
#introGate.hold .ig-load{opacity:1}   /* video đã hết (hoặc không có video) mà cảnh chưa xong → hiện khối chờ */
#introGate.out .ig-load{opacity:0;transition:opacity .32s ease}
/* dải tối mềm ở đáy ảnh nền, dưới khối chờ (cùng lần duyệt): hiện cùng khối chờ (.hold) nên không phủ video intro nếu có
   lúc bật lại, tan cùng chữ khi vào cảnh */
#introGate::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(7,8,11,.62),rgba(7,8,11,.26) 48%,rgba(7,8,11,0));
  opacity:0;transition:opacity .5s}
#introGate.hold::after{opacity:1}
#introGate.out::after{opacity:0;transition:opacity .32s ease}
/* ---------- máy không vẽ được cảnh 3D (chủ dự án 03/10/2026: PA2, PA3 = máy chỉ có đồ hoạ phần mềm) ----------
   site/nogfx.js dựng thanh này trong màn chờ, trên ảnh masterplan; không viewer nào được mở (v4d-bridge.js › noGfx).
   Lời ngắn cho người không rành công nghệ; "Cách bật" / "Máy khác" mới mở phần chi tiết. */
#introGate.nogfx .ig-load{display:none}
.ngx{position:absolute;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 12px));z-index:2;transform:translateX(-50%);
  box-sizing:border-box;width:min(880px,calc(100% - 32px));max-height:calc(100% - 36px);overflow:auto;overscroll-behavior:contain;
  border-radius:18px;background:rgba(23,25,18,.9);border:1px solid rgba(220,211,192,.24);box-shadow:0 30px 80px -20px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#eef2f7;font-family:var(--f-body);text-align:left;
  animation:ngxIn .45s ease both}
@keyframes ngxIn{from{opacity:0;transform:translate(-50%,12px)}}
.ngx button{font:inherit;cursor:pointer}
.ngx button:focus-visible{outline:2px solid #e6cba0;outline-offset:2px}
.ngx-row{display:flex;align-items:center;gap:16px;padding:16px 18px}
.ngx-ico{flex:none;width:44px;height:44px;color:#e6cba0}
.ngx-txt{flex:1;min-width:0}
.ngx-txt strong{display:block;font-family:var(--f-head);font-weight:400;font-size:24px;line-height:1.15;color:#F3EBDA;text-wrap:balance}
.ngx-txt span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:rgba(238,242,247,.8)}
.ngx-btns{display:flex;gap:8px;flex:none}
.ngx-cta,.ngx-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;
  font-family:var(--f-sub);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ngx-cta{border:0;background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;box-shadow:0 10px 30px -10px rgba(167,128,97,.8)}
.ngx-ghost{border:1px solid rgba(220,211,192,.42);background:rgba(243,235,218,.04);color:#F3EBDA}
.ngx-ghost[aria-expanded="true"]{background:rgba(195,155,119,.2);border-color:rgba(195,155,119,.75)}
.ngx-cta svg,.ngx-ghost svg{width:17px;height:17px;flex:none}
.ngx-small{min-height:42px;margin-top:4px}
.ngx-more{border-top:1px solid rgba(220,211,192,.24);padding:14px 18px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.ngx-more[hidden]{display:none}
.ngx-k{margin-bottom:10px;font-family:var(--f-sub);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C39B77}
.ngx-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ngx-tab{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(220,211,192,.24);background:transparent;
  color:rgba(238,242,247,.75);font-family:var(--f-sub);font-size:12px;letter-spacing:.06em}
.ngx-tab[aria-selected="true"]{background:rgba(195,155,119,.18);border-color:rgba(195,155,119,.7);color:#F3EBDA}
.ngx-me{margin-left:6px;font-size:10px;letter-spacing:.12em;color:#e6cba0;text-transform:uppercase}
.ngx-steps{margin:0 0 10px;padding:0;list-style:none;counter-reset:ngx}
.ngx-steps li{position:relative;padding-left:36px;margin:0 0 10px;font-size:14px;line-height:1.55;color:rgba(238,242,247,.88);counter-increment:ngx}
.ngx-steps li::before{content:counter(ngx);position:absolute;left:0;top:-1px;width:24px;height:24px;box-sizing:border-box;border-radius:50%;
  border:1px solid rgba(195,155,119,.7);color:#e6cba0;font:700 12px/22px var(--f-sub);text-align:center}
.ngx b{font-weight:700;color:#F3EBDA}
.ngx code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;color:#F3EBDA;background:rgba(243,235,218,.08);padding:1px 5px;border-radius:5px}
.ngx-en{opacity:.68}
.ngx-code{margin-top:8px;font-size:11.5px;color:rgba(238,242,247,.5);overflow-wrap:anywhere}
.ngx-other p{margin:0 0 6px;font-size:14px;line-height:1.55;color:rgba(238,242,247,.85)}
.ngx-qrbox{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:rgba(238,242,247,.65)}
.ngx-qr{width:132px;height:132px;box-sizing:border-box;padding:6px;border-radius:10px;background:#F3EBDA;color:#2f3327}
.ngx-qr svg{display:block;width:100%;height:100%}
.ngx-toast{position:absolute;left:50%;top:10px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:9px 14px;border-radius:10px;
  background:#F3EBDA;color:#2f3327;font-size:13px;overflow-wrap:anywhere;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.ngx-toast[hidden]{display:none}
@media (pointer:coarse){ .ngx-tab{min-height:44px} .ngx-qrbox{display:none} }
@media (max-width:760px){
  .ngx{width:calc(100% - 24px);bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px))}
  .ngx-row{flex-wrap:wrap;padding:14px}
  .ngx-btns{width:100%;flex-wrap:wrap}
  .ngx-btns>*{flex:1 1 40%}
  .ngx-btns .ngx-cta{flex-basis:100%}
  .ngx-txt strong{font-size:21px}
  .ngx-more{grid-template-columns:1fr;padding:12px 14px}
  .ngx-qrbox{display:none}
}
@media (max-height:540px) and (min-width:700px){       /* điện thoại ngang: một hàng, phần chi tiết cuộn trong thanh */
  .ngx-row{padding:10px 14px}
  .ngx-txt strong{font-size:19px}
  .ngx-txt span{font-size:12.5px}
  .ngx-ico{width:36px;height:36px}
  .ngx-cta,.ngx-ghost{min-height:44px;padding:0 12px}
  .ngx-qrbox{display:none}
}
@media (prefers-reduced-motion:reduce){ .ngx{animation:none} }
#introGate .ig-hint{display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(238,242,247,.85);text-shadow:0 1px 4px rgba(0,0,0,.7)}
#introGate .ig-hint i{width:7px;height:7px;border-radius:50%;background:#e6cba0;
  box-shadow:0 0 10px rgba(230,203,160,.9);animation:igPulse 1.15s ease-in-out infinite}
@keyframes igPulse{0%,100%{transform:scale(.72);opacity:.55}50%{transform:scale(1);opacity:1}}
#introGate .ig-prog{display:flex;align-items:center;gap:12px;width:100%}
#introGate .ig-bar{position:relative;flex:1;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(238,242,247,.22);box-shadow:0 1px 6px rgba(0,0,0,.35)}
#introGate .ig-bar i{position:absolute;inset:0;background:#e6cba0;box-shadow:0 0 8px rgba(230,203,160,.85);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}
#introGate .ig-pc{min-width:3.1em;text-align:right;font-size:12px;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:#e6cba0;text-shadow:0 1px 4px rgba(0,0,0,.7)}
#introGate .ig-note{margin:0;font-size:12.5px;line-height:1.4;text-align:center;
  color:rgba(238,242,247,.76);text-shadow:0 1px 4px rgba(0,0,0,.75)}
/* "Bắt đầu tham quan" (07/10/2026, chủ dự án chọn PA1 của mockup): cảnh tải xong chờ cú chạm của khách — cú chạm mà mọi
   trình duyệt đòi trước khi cho phát tiếng; nhạc + cảnh + tour vào cùng lúc (v4d-bridge.js › startGate). Nút mặc kính mờ
   của giao diện bề mặt (.glass, như thanh tour / nút tròn), chữ hoa giãn như các nhãn của trang; không có dòng phụ. */
#introGate .ig-start{display:none}
#introGate.is-start .ig-start{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;
  padding:0 28px;border-radius:999px;cursor:pointer;pointer-events:auto;color:#F3EBDA;
  font-family:var(--f-sub);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.45);transition:transform .16s,background .18s,border-color .18s;
  animation:igStartIn .5s cubic-bezier(.2,.7,.2,1) both}
#introGate.is-start .ig-start svg{width:15px;height:15px;flex:none;margin-left:-4px}
@media (hover:hover){ #introGate.is-start .ig-start:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)} }
#introGate.is-start .ig-start:active{transform:scale(.97)}
#introGate .ig-start:focus-visible{outline:2px solid #e6cba0;outline-offset:3px}
#introGate.is-start{cursor:pointer}                              /* chạm đâu trên màn chờ cũng là "bắt đầu" */
#introGate.is-start .ig-note{display:none}
#introGate.is-start .ig-hint i{animation:none;opacity:1;transform:none}
#introGate.is-start .ig-load{gap:14px}
@keyframes igStartIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ #introGate.is-start .ig-start{animation:none} }

/* Trong lúc màn mở đầu che kín: lớp UI kính (backdrop-filter blur+saturate) và
   vignette nằm dưới vẫn bị trình duyệt vẽ + làm mờ lại MỖI KHUNG dù không ai
   thấy — ăn đúng phần GPU mà video đang cần. Ẩn hẳn, bật lại lúc fade. */
body.intro-lock .ui,body.intro-lock .vignette{visibility:hidden}
/* Fade vào cảnh: viewer 3D rõ dần từ nền tối + lùi 1.045 → 1, ngược chiều với
   khung cuối đang đẩy vào. UI + pin vào sau nửa nhịp để cảnh được nhìn trước. */
body.intro-reveal .bg{animation:v4dSceneIn 4s cubic-bezier(.45,.05,.2,1) both}
body.intro-reveal .ui,body.intro-reveal .vignette{animation:v4dUiIn 1.4s ease 2.2s both}   /* UI vao o nua cuoi crossfade */
@keyframes v4dSceneIn{
  0%{opacity:0;transform:scale(1.045)}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1)}}
@keyframes v4dUiIn{from{opacity:0}to{opacity:1}}
/* Cau trang crossfade (hoc Eaton Park): FLASH TRANG SANG luc chuyen canh —
   loe nhanh len ~90% trang o giay dau roi tan cham theo duoi crossfade,
   lam moi noi khung-cuoi-video -> canh 3D. z tren #introGate de phu ca
   khung cuoi; pointer-events:none nen khong chan bam. */
#sceneBridge{position:fixed;inset:0;z-index:205;pointer-events:none;opacity:0;
  background:rgba(255,255,255,0)}
#sceneBridge.is-active{animation:v4dBridge 4s cubic-bezier(.45,.05,.2,1) forwards}
@keyframes v4dBridge{
  0%{opacity:0;background:rgba(255,255,255,0)}
  13%{opacity:1;background:rgba(255,255,255,.9)}    /* dinh flash ~0.5s: trang ro rang */
  30%{opacity:1;background:rgba(255,255,255,.38)}
  100%{opacity:0;background:rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){
  #introGate{transition:opacity .4s linear}
  #introGate.out video,#introGate.out .ig-freeze,#introGate.out .ig-poster{transform:translateZ(0);filter:none;transition:none}
  #sceneBridge.is-active{animation:none}
  body.intro-reveal .bg{animation:v4dUiIn .4s linear both}}

/* ---------- màn chờ HẠT MẦM (PA1/C — Dark Pine): ~1.5s TRƯỚC video intro ----------
   Tấm dệt hạt xuôi–ngược dựng từ vector logo thật (assets/pattern/weave-night-86.svg),
   logo lockup ở giữa. Tự tan sau 1.5s (script ngay dưới thẻ div) rồi video intro
   mới phát — v4d-bridge.js giữ video bằng cờ window.NP_SEED_HOLD.
   z 230: trên cả #introGate (200) + #sceneBridge (205). */
#seedLoad{position:fixed;inset:0;z-index:230;overflow:hidden;
  background:linear-gradient(180deg,#343827,#22261b);   /* Dark Pine đậm → trầm */
  opacity:1;transition:opacity .85s ease}
#seedLoad.out{opacity:0;pointer-events:none}
#seedLoad .sl-band{position:absolute;left:0;right:0;height:26%;
  background:url('assets/pattern/weave-night-86.svg') repeat left top;
  animation:slBand 1s ease both}
#seedLoad .sl-band.t{top:0}
#seedLoad .sl-band.b{bottom:0;background-position:left bottom}   /* hàng cắt dở nằm ở mép trong, đối xứng dải trên */
@keyframes slBand{from{opacity:0}to{opacity:1}}
/* logo gốc màu pine đậm trên nền trong suốt → lật thành kem Beige Sand cho nền tối */
#seedLoad .sl-logo{position:absolute;left:50%;top:50%;width:min(56vw,520px);
  transform:translate(-50%,-50%);
  filter:brightness(0) invert(1) sepia(.26) saturate(.7) brightness(1.02);
  opacity:0;animation:slLogo 3.2s ease .15s forwards}
@keyframes slLogo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.985)}
  28%{opacity:.96;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.96;transform:translate(-50%,-50%) scale(1.012)}}   /* trôi chậm rất nhẹ */
@media (prefers-reduced-motion:reduce){
  #seedLoad{transition:opacity .3s linear}
  #seedLoad .sl-band,#seedLoad .sl-logo{animation:none;opacity:.96}}
  /* vùng trống chạm xuyên xuống nền 3D; từng phần tử con tự bật lại (dòng dưới) */
body.ui-off .ui{opacity:0;pointer-events:none}
body.ui-off .ui *{pointer-events:none!important}  /* UI ẩn (phím H) → không còn vùng click vô hình */
/* "Sơ đồ" full screen (04/10/2026): the runtime's map covers the window inside the scene, the page UI steps aside */
body.mm-x .ui{opacity:0;pointer-events:none;transition:opacity .25s}
body.mm-x .ui *{pointer-events:none!important}
.ui > *{position:absolute;pointer-events:auto}

.glass{
  /* kính "milky-frosted": nền tối rất nhẹ + lớp sheen trắng mờ + blur sâu
     (tham chiếu card FEATURES / Elegant Simplicity mà đối tác đã duyệt) */
  /* Ghép từ 4 công tắc ở :root — KHÔNG sửa số ở đây, sửa trên :root. */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,var(--g-sheen)),
      rgba(255,255,255,calc(var(--g-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--g-sheen) * .45))),
    var(--glass);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.55);
  backdrop-filter:blur(var(--g-blur)) saturate(1.55);
  border:1px solid rgba(255,255,255,var(--g-edge));
  box-shadow:0 8px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- nút tròn chuẩn ---------- */
.btn{
  width:var(--btn);height:var(--btn);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  transition:transform .16s,background .18s,border-color .18s;
  position:relative;
}
/* :hover chỉ áp cho thiết bị CÓ chuột — iOS giữ trạng thái hover dính sau khi chạm */
@media (hover:hover){
  .btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
}
.btn:active{transform:scale(.95)}          /* menuStyle.pressScale */
.btn.is-on{background:rgba(254,240,225,.9);color:#12151b;border-color:transparent}
.btn svg{width:var(--icon);height:var(--icon);display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.38))}  /* giữ độ đọc icon khi kính trong hơn */
.btn.is-on svg{filter:none}

/* chú thích (tooltip.placement = left; .tip-r = lật sang phải cho nút sát mép trái) */
.btn[data-tip]::after{
  content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:5px 10px;border-radius:8px;white-space:nowrap;
  font-size:12px;letter-spacing:.01em;
  background:rgba(10,12,16,.86);color:var(--text);
  border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .16s .12s,transform .16s .12s;
}
.btn.tip-r[data-tip]::after{right:auto;left:calc(100% + 10px);transform:translateY(-50%) translateX(-6px)}
@media (hover:hover){
  .btn[data-tip]:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
  .btn.tip-r[data-tip]:hover::after{transform:translateY(-50%) translateX(0)}
}

/* ---------- logo góc (branding) ----------
   D02 — nhận diện theo mood:
   • Day / Sunset : logo primary brand (chữ Dark Pine #5D614F + lá Champagne
     Bronze #A78061 — chính là file logo.png) trên quầng sáng kem.
   • Night        : silhouette tô lại bằng Beige Sand #DCD3C0 (bản logo nền
     tối theo brand guideline) + bóng đổ và quầng chuyển sang ĐEN. */
#logo{top:14px;left:18px}
/* quầng nền: thu gọn vùng phủ + nhạt hơn để bớt lan toả */
#logo::before{content:"";position:absolute;inset:-16px -34px -20px -26px;z-index:-1;
  background:radial-gradient(58% 60% at 44% 48%,rgba(250,244,230,.34),rgba(250,244,230,0) 68%)}
body.mood-night #logo::before{
  background:radial-gradient(58% 60% at 44% 48%,rgba(0,0,0,.34),rgba(0,0,0,0) 68%)}
#logo img{height:75px;display:block;transition:opacity .5s;
  filter:drop-shadow(0 1px 1px rgba(255,250,240,.9))
         drop-shadow(0 0 5px rgba(255,250,240,.6))}   /* bỏ lớp toả 26px, thu lớp giữa 10→5px */
body.mood-night #logo img{opacity:0}
/* lớp logo Night: dùng CSS mask từ chính logo.png để tô màu lại silhouette */
#logo .lg-night{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s;
  background:#DCD3C0;                                  /* Beige Sand */
  -webkit-mask:url(assets/logo.png) center/contain no-repeat;
  mask:url(assets/logo.png) center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(0,0,0,.5))}
body.mood-night #logo .lg-night{opacity:1}

/* ---------- la bàn (compass) ---------- */
#compass{top:var(--edge);left:50%;transform:translateX(-50%);
  width:var(--comp-w);border-radius:12px;padding:6px 0 4px;overflow:hidden;cursor:ew-resize;touch-action:none}
#compass .strip{position:relative;height:26px;overflow:hidden}
#compass .tick{position:absolute;top:12px;width:1px;height:6px;background:rgba(255,255,255,.35);transform:translateX(-50%)}
#compass .tick.maj{top:8px;height:10px;background:rgba(255,255,255,.6)}
#compass .lab{position:absolute;top:1px;transform:translateX(-50%);
  font-size:13px;font-weight:600;letter-spacing:.14em;color:rgba(238,242,247,.75)}
#compass .lab.mid{color:var(--accent);font-size:15px}
#compass .cursor{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--accent)}
#compass .deg{text-align:center;font-size:11px;letter-spacing:.1em;color:rgba(238,242,247,.62)}

/* ---------- mood (modes: Day / Sunset / Night) ----------
   PA2 đã chốt: dáng thanh iOS 44px, nhãn CHỮ (bỏ icon thời tiết).
   Núm là HẠT MẦM (logo symbol nortonMark) LĂN + XOAY như
   bánh xe tới mood được chọn; núm lăn tới đâu, nhãn ở đó NHƯỜNG CHỖ
   (mờ đi) — vị trí núm tự nói "đang ở mood nào". Click nhãn hoặc kéo
   ngang; Day sang Night thì hạt lăn thẳng một mạch qua Sunset. */
/* OPTION 2: thanh mood xuống GIỮA ĐÁY (chỗ cũ của tour) */
#mood{bottom:18px;left:50%;transform:translateX(-50%);width:var(--mood-w);height:44px;z-index:50}
/* Thanh mood KHÔNG dùng class .glass — tự khai báo nền kính riêng để
   chỉnh độc lập (như minimap / menu tầng). 3 công tắc ngay dưới đây;
   mặc định đang đặt ĐÚNG bằng giá trị kính chung hiện tại. */
#mood .seg{
  /* ---- 3 CÔNG TẮC ĐỘ MỜ ĐỤC (chỉnh 3 số này) ---- */
  --md-tint:rgba(43,46,35,.34);   /* 1. nền tối      : .08 trong veo → .45 đặc — D Kính sữa */
  --md-blur:18px;                 /* 2. sương mờ     : 2px sắc nét → 36px mịn dày */
  --md-sheen:.22;                 /* 3. lớp sữa trắng: .04 nhạt   → .28 đục sữa */

  /* ---- nền kính (ghép từ 3 công tắc trên) ---- */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,var(--md-sheen)),
      rgba(255,255,255,calc(var(--md-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--md-sheen) * .45))),
    var(--md-tint);
  -webkit-backdrop-filter:blur(var(--md-blur)) saturate(1.55);
  backdrop-filter:blur(var(--md-blur)) saturate(1.55);
  border:1px solid rgba(255,255,255,.34);         /* viền kính — D */
  box-shadow:0 8px 28px rgba(0,0,0,.16),          /* bóng đổ ra ngoài */
             inset 0 1px 0 rgba(255,255,255,.18); /* vệt sáng mép trên */

  /* ---- khung & tương tác ---- */
  position:relative;width:100%;height:44px;
  border-radius:999px;padding:4px;display:flex;
  cursor:grab;touch-action:none}
#mood .seg.drag{cursor:grabbing}
/* thumb = khung định vị vô hình (1/3 bề rộng); hạt mầm ở chính giữa */
#mood .thumb{position:absolute;top:0;bottom:0;left:4px;width:calc((100% - 8px)/3);
  transition:transform .45s cubic-bezier(.45,.05,.35,1)}
#mood .seg.drag .thumb{transition:none}
#mood .seed{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;background:#e8dac9;color:#594A42;   /* Hoa Dau Brown trên nền kem */
  box-shadow:0 2px 9px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center}
#mood .seed-rot{display:flex;align-items:center;justify-content:center;
  transition:transform .45s cubic-bezier(.45,.05,.35,1)}   /* cùng easing với thumb → lăn khớp */
#mood .seg.drag .seed-rot{transition:none}
#mood .seed-rot svg{width:16px;height:16px;display:block}
#mood .seg button{position:relative;flex:1;height:100%;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;letter-spacing:.03em;color:rgba(238,242,247,.8);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:opacity .25s;
  pointer-events:none}   /* seg tự xử lý pointer để kéo trượt */
#mood .seg button.on{opacity:0}   /* hạt mầm thế chỗ nhãn đang chọn */
#mood .hint{position:absolute;bottom:calc(100% + 8px);right:0;width:100%;   /* mood ở đáy → gợi ý nằm TRÊN thanh */
  text-align:center;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(238,242,247,.75);white-space:nowrap;pointer-events:none;
  opacity:0;transition:.2s;text-shadow:0 1px 4px rgba(0,0,0,.7)}
#mood:hover .hint{opacity:1}

/* popup đang mở → tạm ẩn mood + tour + compass (thanh mood 250px đè lên nút đóng X
   của popup; pill tour đè lên nội dung). Rail phải vẫn hiện để chuyển nhanh giữa các mục. */
body.pop-open #mood,body.pop-open #tour,body.pop-open #compass{
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}

/* ---------- màn chuyển mood — "GIEO HẠT" ----------
   Hạt chò bronze rơi xoay nhẹ xuống tâm màn; chạm đất, quầng sáng mang màu
   thời khắc mới (--tint) nở lan từ điểm chạm + 2 vòng sóng bronze mảnh.
   Cảnh mới là BẢN SAO của .bg mang mood đích (.bg.bloom) hiện qua mask tròn
   mép mềm — cảnh không bao giờ bị che tối. Chỉ chạy khi nền là ảnh tĩnh;
   nền 3D live (iframe) đổi mood thẳng, viewer tự chuyển ánh sáng. */
#moodFx{position:fixed;inset:0;z-index:80;pointer-events:none;display:none}
#moodFx.show{display:block}
#moodFx .drop{position:absolute;left:50%;top:46%}
#moodFx .fy{position:absolute;left:-27px;top:-32px;width:54px;height:54px;opacity:0}
#moodFx.go .fy{animation:npSeedFall .92s cubic-bezier(.42,.05,.6,1) forwards}
@keyframes npSeedFall{0%{opacity:0;transform:translateY(-56vh)}10%{opacity:1}
  100%{opacity:1;transform:translateY(0)}}
#moodFx .sway{width:100%;height:100%}
#moodFx.go .sway{animation:npSeedSway .92s ease-in-out forwards}
@keyframes npSeedSway{0%{transform:translateX(24px) rotate(-18deg)}
  30%{transform:translateX(-15px) rotate(12deg)}
  60%{transform:translateX(8px) rotate(-8deg)}
  84%{transform:translateX(-3px) rotate(3deg)}100%{transform:none}}
#moodFx .sway svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 16px rgba(20,16,10,.5))}
#moodFx.go .sway svg{animation:npSeedOut .5s ease-in .98s forwards}
@keyframes npSeedOut{to{opacity:0;transform:scale(1.9)}}
/* vòng sóng: non-scaling-stroke giữ nét luôn mảnh 2px khi phóng to */
#moodFx .rings{position:absolute;left:-700px;top:-700px;width:1400px;height:1400px;overflow:visible}
#moodFx .rings circle{fill:none;stroke:#C99B6E;stroke-width:2;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;opacity:0}
#moodFx.go .rings .r1{animation:npRing 1.2s cubic-bezier(.25,.4,.2,1) .88s forwards}
#moodFx.go .rings .r2{animation:npRing 1.35s cubic-bezier(.25,.4,.2,1) 1.08s forwards}
@keyframes npRing{0%{opacity:.85;transform:scale(.02)}100%{opacity:0;transform:scale(1)}}
#moodFx .flash{position:absolute;left:-170px;top:-170px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--tint,#E8A96B),transparent 64%);opacity:0;filter:blur(2px)}
#moodFx.go .flash{animation:npFlash 1.15s ease-out .86s forwards}
@keyframes npFlash{0%{opacity:.7;transform:scale(.22)}100%{opacity:0;transform:scale(3.6)}}
/* Wash in the mood's tint over the 3D scene only: z 10 = above #S3DViewport (0), below the page UI
   (.stage 20) and the seed FX (80). Opacity-only, so it stays on the compositor; peaks at the seed's
   touch-down, where the two scenes start to crossfade underneath. `.hold` keeps it up while a scene
   that was clicked before its background preload finished is still loading (at most coldWaitMs); the
   base transition fades a held wash out instead of dropping it in one frame. */
#moodWash{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at 50% 46%,var(--tint,#F6E7C6) 0,var(--tint,#F6E7C6) 35%,transparent 110%)}
#moodWash.go{animation:npWash 1.9s ease-out .6s both}
#moodWash.hold{animation:none;opacity:.22;transition:opacity .4s}
@keyframes npWash{0%{opacity:0}30%{opacity:.26}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#moodWash.go{animation:none}}
/* bản sao cảnh mang mood MỚI — bloom nở từ điểm gieo (khớp .drop 50% 46%);
   transition:none ở trạng thái gốc để filter mood không animate lúc vừa chèn */
.bg.bloom{transform:scale(1.04);transition:none;
  -webkit-mask:radial-gradient(circle,#000 55%,transparent 72%) 50% 46%/0% 0% no-repeat;
          mask:radial-gradient(circle,#000 55%,transparent 72%) 50% 46%/0% 0% no-repeat}
.bg.bloom.go{transform:scale(1);-webkit-mask-size:440% 440%;mask-size:440% 440%;
  transition:-webkit-mask-size 1.3s cubic-bezier(.5,.05,.22,1),
    mask-size 1.3s cubic-bezier(.5,.05,.22,1),transform 1.7s cubic-bezier(.3,.1,.2,1)}

/* ---------- rail nút phải (ui.railSlot = mid-right) ----------
   Bọc trong #railWrap: vùng hover rộng quanh cụm nút (padding trái 110px) —
   rê vào là hiện overlay tối + CỘT HẠT MẦM outline (PA5, assets/pattern/col-beige-96.svg). */
#railWrap{right:0;top:50%;transform:translateY(-50%);z-index:50;
  padding:38px var(--edge) 38px 110px}
#rail{position:relative;display:flex;flex-direction:column;gap:var(--gap)}
#railWrap .rw-shade{position:absolute;inset:-40px 0 -40px -60px;pointer-events:none;opacity:0;
  background:linear-gradient(270deg,rgba(22,24,17,.5),rgba(22,24,17,.22) 45%,transparent 78%);
  transition:opacity .5s ease}
#railWrap .rw-col{position:absolute;top:-34px;bottom:-34px;
  right:calc(var(--edge) + var(--btn) + 16px);width:96px;pointer-events:none;
  opacity:0;transform:translateX(10px);
  background:url('assets/pattern/col-beige-96.svg') repeat-y center top/96px auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  transition:opacity .5s ease,transform .5s ease}
@media (hover:hover){
  #railWrap:hover .rw-shade{opacity:1}
  #railWrap:hover .rw-col{opacity:.78;transform:none}}   /* cảnh sáng nên cần đậm hơn mockup */
/* popup toàn màn đang mở → tắt aura (rail nổi trên popup, tránh vệt tối đè panel) */
body:has(#pop.open) #railWrap .rw-shade,body:has(#pop.open) #railWrap .rw-col{opacity:0!important}
/* popup mở → vùng hover rộng 110 px của #railWrap (z 50, trên popup z 40) KHÔNG được nuốt cú bấm: nó phủ ~90 px mép phải
   panel popup — đối tác 29/09/2026: ô tick và nút "Tiện ích" của bộ lọc bản đồ vị trí "lúc bấm được lúc không" (đúng lúc
   hàng đó nằm trong dải dọc của rail). Chỉ các nút thật còn nhận chuột. */
body.pop-open #railWrap,body:has(#pop.open) #railWrap{pointer-events:none}
body.pop-open #railWrap #rail,body:has(#pop.open) #railWrap #rail{pointer-events:auto}

/* ---------- panel INFORMATION cạnh trái: rê chuột vào mép trái → trượt ra ----------
   Nền overlay gradient Dark Pine MỜ DẦN 100%→10% theo trục ngang (làm bệ cho TITLE +
   description nổi bật trên cảnh 3D); nội dung vào so le trái→phải; CTA gradient
   Champagne Bronze → Beige Sand (guideline 4a). Chỉ máy có chuột; ẩn khi popup mở. */
#infoEdge{left:0;top:50%;transform:translateY(-50%);height:min(560px,72%);width:30px;z-index:30}
#infoEdge .ie-tab{position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:150px;
  border-radius:0 4px 4px 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(167,128,97,0),#A78061 30%,#A78061 70%,rgba(167,128,97,0));
  box-shadow:0 0 14px rgba(167,128,97,.4);animation:ieTab 2.6s ease-in-out infinite;transition:opacity .35s}
@keyframes ieTab{0%,100%{opacity:.55}50%{opacity:1}}
#infoEdge .ie-panel{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-38px);
  width:min(480px,46vw);padding:36px 64px 30px 36px;border-radius:0 24px 24px 0;overflow:hidden;
  background:linear-gradient(90deg,rgba(31,34,25,1) 0%,rgba(33,36,27,.86) 44%,rgba(43,46,35,.1) 100%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1),visibility 0s .55s}
/* watermark quả chò outline mép phải panel */
#infoEdge .ie-wm{position:absolute;right:-130px;top:50%;transform:translateY(-50%);height:92%;
  color:#DCD3C0;opacity:0;transition:opacity .8s .15s;pointer-events:none;
  /* nét tan dần trái→phải: vô hình ở vùng content, chỉ hiện về mép phải panel */
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.55) 62%,#000 86%);
  mask-image:linear-gradient(90deg,transparent 34%,rgba(0,0,0,.55) 62%,#000 86%)}
/* nội dung: vào so le trái→phải */
#infoEdge .ie-panel>*{opacity:0;transform:translateX(-16px);transition:opacity .4s ease,transform .4s ease}
#infoEdge .ie-crumb{display:block;font-family:var(--f-sub);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:#BFC0B3;margin-bottom:10px}
#infoEdge h3{margin:0 0 12px;font-family:var(--f-head);font-weight:400;
  font-size:clamp(24px,2.2vw,32px);line-height:1.22;color:#EAE4D3}
#infoEdge .ie-desc{margin:0 0 18px;font-size:13.5px;line-height:1.65;color:rgba(220,211,192,.85);max-width:330px}
#infoEdge .ie-stats{display:flex;gap:24px;margin-bottom:20px}
#infoEdge .ie-stats b{display:block;font-family:var(--f-head);font-weight:400;font-size:22px;color:#C39B77}
#infoEdge .ie-stats b i{font-style:normal;font-size:12px}
#infoEdge .ie-stats span{font-family:var(--f-sub);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(191,192,179,.75)}
#infoEdge .ie-cta{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  font:700 12.5px var(--f-sub);letter-spacing:.14em;text-transform:uppercase;color:#2f3327;
  padding:13px 26px;border-radius:999px;background:linear-gradient(135deg,#A78061,#DCD3C0 90%);
  box-shadow:0 10px 26px rgba(167,128,97,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:.25s}
#infoEdge .ie-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
#infoEdge .ie-hot{display:block;margin-top:10px;font-size:11px;letter-spacing:.04em;color:rgba(191,192,179,.7)}
/* Panel mở khi: rê chuột vào mép trái, HOẶC lượt TỰ MỞ 10 giây đầu phiên —
   JS gắn class .is-auto, xem khối "panel Thông tin: TỰ MỞ" trong phần script. */
@media (hover:hover){
  #infoEdge:is(:hover,.is-auto) .ie-panel{opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(-50%);transition-delay:0s}
  #infoEdge:is(:hover,.is-auto) .ie-tab{opacity:0;animation:none}
  #infoEdge:is(:hover,.is-auto) .ie-wm{opacity:.07}
  .ui:has(#infoEdge:is(:hover,.is-auto)) #minimap{opacity:.18;transition:opacity .4s}   /* panel mở → minimap lùi lại */
  #infoEdge:is(:hover,.is-auto) .ie-panel>*{opacity:1;transform:none}
  #infoEdge:is(:hover,.is-auto) .ie-crumb{transition-delay:.04s}
  #infoEdge:is(:hover,.is-auto) h3{transition-delay:.1s}
  #infoEdge:is(:hover,.is-auto) .ie-desc{transition-delay:.18s}
  #infoEdge:is(:hover,.is-auto) .ie-stats{transition-delay:.26s}
  #infoEdge:is(:hover,.is-auto) .ie-cta{transition-delay:.34s}
  #infoEdge:is(:hover,.is-auto) .ie-hot{transition-delay:.4s}}
@media (hover:none){#infoEdge{display:none}}      /* máy chạm: không có hover */
body:has(#pop.open) #infoEdge{opacity:0;pointer-events:none}

/* ---------- cụm nút gốc dưới-phải ---------- */
#corner{right:var(--edge);bottom:var(--edge);display:flex;flex-direction:column;gap:var(--gap);z-index:50}

/* ---------- thanh tour (native tourMenu) ----------
   Mặc định THU GỌN thành nút tròn play/pause; hover chuột hoặc CHẠM GIỮ
   → bung từ tâm icon ra 2 phía trái/phải thành thanh full như D00.
   Bố cục đối xứng quanh nút play: [count][prev][▶][next][speed]. */
/* OPTION 2: pill tour lên GÓC TRÊN PHẢI (chỗ cũ của thanh mood).
   Khối #tour luôn rộng bằng thanh ĐẦY ĐỦ (shrink-to-fit) kể cả lúc đang thu gọn
   thành nút tròn — nút tròn nằm ở tâm khối. Nên khi thu gọn phải đẩy khối sang
   phải "nửa khối trừ bán kính nút" thì nút mới sát mép; lúc bung ra trả transform
   về 0 để thanh full vừa khít góc, đúng chỗ thanh mood vẫn chiếm. */
/* LUÔN HIỆN ĐỦ NÚT — không còn bung/thu.
   Bản trước thu gọn về nút tròn 38px và chỉ bung khi hover: vùng bấm quá nhỏ,
   không có độ trễ nên rê ngang là bung / lệch một pixel là sập, và tệ nhất là
   cả khối trượt 99px ngay lúc trỏ vào — nút chạy khỏi con trỏ. Nay thanh đứng
   yên, mọi nút bấm được ngay; chỉ ĐỘ MỜ đổi theo việc người xem có đang để ý
   tới nó hay không, nên vẫn không át cảnh 3D. */
/* ========== KÍCH THƯỚC THANH TOUR — 5 CÔNG TẮC ==========
   Gom vào biến để mỗi khổ máy chỉ việc đè lại 5 số này, thay vì rải
   `width:42px` ra bốn năm chỗ rồi mỗi lần sửa lại quên một chỗ.
   Ba mức: desktop (dưới) · điện thoại DỌC · điện thoại NGANG (xem @media). */
#tour{--t-btn:42px;    /* đường kính nút tròn            */
      --t-ico:17px;    /* icon trong nút                 */
      --t-num:56px;    /* bề ngang ô "9 / 13" và ô "x1"  */
      --t-gap:2px;     /* khe giữa các nút               */
      --t-pad:5px 6px; /* đệm trong của thanh            */
  top:var(--edge);right:var(--edge);text-align:center;z-index:45;
  pointer-events:none;-webkit-touch-callout:none;
  opacity:var(--tour-idle,.55);transition:opacity .3s ease;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.30))}
/* rõ hẳn khi: con trỏ tới gần · đang dùng bàn phím · vừa có thao tác tour
   (.awake do JS bật ~2.6s để cú bấm nào cũng thấy phản hồi) */
#tour:hover,#tour:focus-within,#tour.awake{opacity:1}
@media (hover:none){ #tour{opacity:.82} }   /* cảm ứng: không có hover, để sẵn mức đọc được */
/* Thanh tour dùng TRẮNG SÁNG (không phải kem/warm như các khối khác): nó nằm đè
   lên ảnh nền, gặp cảnh ban ngày thì kem bị chìm — trắng thuần + bóng chữ đậm
   hơn giữ được độ nổi ở cả 3 mood. */
#tour .cap.has-title{text-transform:none;letter-spacing:.02em;font-size:12.5px;opacity:.92}   /* có title từ content.json */
.ph-desc{max-width:520px;margin:14px auto 0;font-size:14px;line-height:1.7;color:rgba(238,242,247,.82);text-align:center}
#tour .cap{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  margin-top:5px;text-shadow:0 1px 4px rgba(0,0,0,.75)}
/* ========== ĐỘ MỜ ĐỤC CỦA THANH TOUR — 2 TRẠNG THÁI ==========
   Thanh này KHÔNG dùng .glass chung nữa mà tự khai báo nền kính riêng, nên
   chỉnh ở đây KHÔNG ảnh hưởng tới các nút / panel khác (giống cách #minimap,
   #mood .seg, #floors đang làm).
     • NHÓM A = lúc THU GỌN thành nút tròn ▶  (trạng thái mặc định)
     • NHÓM B = lúc BUNG RA thành thanh full  (hover chuột / chạm giữ)
   Chỉ cần đổi 4 số ở mỗi nhóm, phần ghép nền bên dưới tự tính theo.
   ============================================================== */
#tour .bar{
  /* ---- NHÓM A — KHI THU GỌN (nút tròn) ----
     ĐẶC HƠN kính chung (.15/5px) vì nút này nằm giữa màn, hay rơi trúng vùng
     trời sáng — nền .38 + blur 10px + viền .4 giữ icon ▶ luôn đọc được. */
  --tr-tint:rgba(43,46,35,.34);   /* 1. nền tối      : .08 trong veo → .45 đặc — D Kính sữa */
  --tr-blur:18px;                 /* 2. sương mờ     : 2px sắc nét  → 36px mịn dày */
  --tr-sheen:.22;                 /* 3. lớp sữa trắng: .04 nhạt    → .28 đục sữa  */
  --tr-edge:.34;                  /* 4. viền kính    : .10 mảnh    → .45 rõ       */

  /* ---- nền kính ghép từ 4 công tắc trên — KHÔNG cần sửa ---- */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,var(--tr-sheen)),
      rgba(255,255,255,calc(var(--tr-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--tr-sheen) * .45))),
    var(--tr-tint);
  -webkit-backdrop-filter:blur(var(--tr-blur)) saturate(1.55);
  backdrop-filter:blur(var(--tr-blur)) saturate(1.55);
  border:1px solid rgba(255,255,255,var(--tr-edge));
  box-shadow:0 8px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18);

  display:flex;align-items:center;gap:var(--t-gap);border-radius:999px;padding:var(--t-pad);
  pointer-events:auto;
  transition:background .32s ease,border-color .32s ease}
#tour .bar button{width:var(--t-btn);height:var(--t-btn);flex:none;border-radius:50%;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .16s,opacity .2s}
/* Nút thu còn 36–38px là DƯỚI mức 44px mà iOS/Android khuyến nghị cho vùng
   chạm. Nới vùng bấm bằng lớp trong suốt thay vì phóng to hình tròn: cao thêm
   6px mỗi phía (36 → 48px chạm được) mà thanh vẫn gọn. Ngang chỉ nới 1px —
   đúng nửa khe 2px giữa hai nút, để hai vùng chạm CHẠM nhau chứ không chồng
   lên nhau (chồng thì cú bấm rơi vào nút bên cạnh). */
#tour .bar button::after{content:"";position:absolute;inset:-6px -1px}
@media (hover:hover){
  #tour .bar button:hover{background:rgba(255,255,255,.18)}
}
#tour .bar button svg{width:var(--t-ico);height:var(--t-ico);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)) drop-shadow(0 0 6px rgba(0,0,0,.45))}
#tour .count{width:var(--t-num);flex:none;font-size:14px;letter-spacing:.06em;color:#fff;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6);transition:opacity .2s}
#tour .bar .speed{width:var(--t-spd,44px);font-size:12px;color:rgba(255,255,255,.9)}
#tour #tPlay{background:rgba(255,255,255,.16)}   /* nút ▶ nổi hơn trên nền đã đặc */
/* ←/→ trong lúc camera đang bay: cú bấm vẫn ĐƯỢC GHI NHẬN (xếp hàng trong
   bridge), nút chỉ nhạt bớt để cho biết máy đang xử lý — không chặn bấm. */
#tour .bar button.busy{opacity:.45}
#tour .count{transition:opacity .2s}
#tour .count.busy{opacity:.6}
/* ---- nhóm giữa ‹ n / tổng › tự đổi vai (30/09/2026, chủ dự án duyệt "phương án 3 nâng cao") ----
   Không còn công tắc Tour | Khu: người xem kéo / xoay cảnh → tour dừng, nhóm CUỘN LÊN thành ‹ khu / tổng khu ›
   (#tour.khu); bấm ▶ → tour chạy tiếp, nhóm cuộn về bước tour. site.js › rollNav: bản chụp nhóm cũ (.tgrp-ghost)
   trượt lên và mờ đi, nhóm thật từ cạnh dưới trượt lên. Ô số rộng cố định (--t-num) nên thanh không đổi bề ngang
   giữa hai chế độ. overflow:hidden chỉ bật lúc đang cuộn (.rolling) để vùng chạm nới của ←/→ không bị xén. */
#tour .tnav{position:relative;display:flex;flex:none}
#tour .tnav.rolling{overflow:hidden}
#tour .tgrp{display:flex;align-items:center;gap:var(--t-gap);
  transition:transform .36s cubic-bezier(.22,.8,.24,1),opacity .36s ease}
#tour .tgrp.from-below{transform:translateY(100%);opacity:0;transition:none}
#tour .tgrp-ghost{position:absolute;inset:0;pointer-events:none}
#tour .tgrp-ghost.to-top{transform:translateY(-100%);opacity:0}
#tour .count.tick{animation:tCountTick .28s ease both}   /* số đổi trong cùng chế độ: chữ số mới nhích từ dưới lên */
@keyframes tCountTick{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
/* đang ở khu: thanh rõ hẳn; ▶ sáng viền đồng mời chạy lại tour; x1 (tốc độ của tour) lùi mờ */
#tour.khu{opacity:1}
#tour.khu #tPlay{background:rgba(220,195,154,.32);
  box-shadow:0 0 0 2px rgba(236,214,178,.95),0 0 16px rgba(220,195,154,.55);animation:tPlayInvite 2.2s ease-in-out infinite}
@keyframes tPlayInvite{0%,100%{box-shadow:0 0 0 2px rgba(236,214,178,.95),0 0 9px rgba(220,195,154,.35)}
  50%{box-shadow:0 0 0 2px rgba(236,214,178,.95),0 0 20px rgba(220,195,154,.7)}}
#tour.khu .bar .speed{opacity:.45}
@media (prefers-reduced-motion:reduce){
  #tour .tgrp.from-below,#tour .tgrp-ghost.to-top{transform:none}   /* chỉ mờ chéo, không trượt */
  #tour .count.tick,#tour.khu #tPlay{animation:none}
}
/* máy gập khi gập (≤ 379 px): chỗ giữa nút minimap và ☰ chỉ ~212 px — thu ô số và ô tốc độ để thanh
   [▶][‹ n / tổng ›][x1] (~206 px) vẫn đủ nút; nút nhạc nổi trên thanh (page-shell.css mục 6) */
@media (max-width:379px){
  #tour{--t-num:38px;--t-spd:34px}
}

/* ---------- cột góc dưới-trái: minimap ----------
   (nút chatbot AI đã gỡ 2026-09-11 — mã còn nguyên ở README mục 10) */
#blStack{left:var(--edge);bottom:var(--edge);display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;pointer-events:none}
#blStack>*{pointer-events:auto}

/* ---------- minimap ---------- */
/* ================= minimap "Masterplan" =================
   Panel này KHÔNG dùng class .glass — tự khai báo nền kính riêng,
   chỉnh ở đây KHÔNG ảnh hưởng tới các nút / thanh khác (tiện cho
   D03, D04 tinh chỉnh độc lập). Mặc định đang đặt ĐÚNG bằng giá
   trị .glass chung — đổi 3 "công tắc" dưới đây là minimap đổi theo.
   ========================================================== */
#minimap{
  /* ---- 3 CÔNG TẮC ĐỘ MỜ ĐỤC (chỉnh 3 số này) ---- */
  --mm-tint:rgba(43,46,35,.34);   /* 1. nền tối (tint DARK PINE theo guideline) — D Kính sữa */
  --mm-blur:18px;                 /* 2. sương mờ     : 2px sắc nét → 36px mịn dày */
  --mm-sheen:.22;                 /* 3. lớp sữa trắng: .04 nhạt   → .28 đục sữa */

  /* ---- nền kính (ghép từ 3 công tắc trên) ---- */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,var(--mm-sheen)),
      rgba(255,255,255,calc(var(--mm-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--mm-sheen) * .45))),
    var(--mm-tint);
  -webkit-backdrop-filter:blur(var(--mm-blur)) saturate(1.55);
  backdrop-filter:blur(var(--mm-blur)) saturate(1.55);
  border:1px solid rgba(220,211,192,.34);         /* viền kính Beige Sand — D */
  box-shadow:0 8px 28px rgba(0,0,0,.16),          /* bóng đổ ra ngoài */
             inset 0 1px 0 rgba(255,255,255,.18); /* vệt sáng mép trên */

  /* ---- khung ---- */
  width:var(--map-w);border-radius:14px;padding:10px 12px 8px;
}
#minimap.hidden{display:none}
#minimap .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#minimap .head h3{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#DCD3C0;display:flex;align-items:center;gap:7px}          /* Beige Sand */
#minimap .head h3::before{content:"";width:12px;height:15px;flex:none;   /* hạt mầm bronze trước tiêu đề */
  background:url('assets/pattern/seed-bronze.svg') no-repeat center/contain;opacity:.9}
#minimap .head button{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:rgba(238,242,247,.6);border-radius:6px}
#minimap .head button:hover{background:rgba(255,255,255,.1);color:var(--text)}
/* nhãn số toà trên nền trắng của plate Masterplan */
#minimap .blk-no span{font-size:8.5px;font-weight:700;letter-spacing:.04em;
  color:#4a3b2e;text-shadow:none}
/* toà hover: sáng lên để báo vùng bấm được */
#plate2 path.blk{cursor:pointer;transition:filter .18s}
#plate2 path.blk:hover{filter:brightness(1.4)}
/* khu vực (Aeon / Park / hồ) hover: sáng lên + đậm fill để báo vùng bấm được */
#plate2 path.zone{cursor:pointer;transition:filter .18s,fill-opacity .18s}
#minimap .pt[data-step]{cursor:pointer}   /* chấm có bước tour: bấm là bay tới (nền 3D) */
#plate2 path.zone:hover{filter:brightness(1.45)}
/* bong bóng tên (hover toà / chấm sáng) */
#minimap .mm-bub{position:absolute;z-index:8;transform:translate(-50%,-100%);
  padding:3px 10px;border-radius:999px;background:rgba(38,41,30,.94);          /* pine đậm */
  border:1px solid rgba(220,211,192,.32);font-size:10px;font-weight:600;letter-spacing:.06em;
  color:var(--accent);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
#minimap .mm-bub.show{opacity:1}
#minimap .mm-bub::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;
  border:4px solid transparent;border-top-color:rgba(38,41,30,.94)}
/* plate Masterplan theo đúng tỉ lệ khung Figma của khách (3224×1923) */
#minimap #plate2{aspect-ratio:2882/1423}
#minimap .plate{position:relative;width:100%;
  background:rgba(28,33,40,.25);border-radius:8px;overflow:hidden}   /* minimap.bg */
#minimap .shape{position:absolute;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:filter .18s,transform .18s}
#minimap .shape:hover{filter:brightness(1.45);transform:scale(1.03)}
#minimap .shape span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.94);text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;text-align:center;
  padding:0 3px;line-height:1.15}
#minimap .shape span.dim{color:rgba(220,211,192,.6);font-size:8.5px;letter-spacing:.08em}  /* Beige Sand mờ */
#minimap svg.poly{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#minimap .pt{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  background:#efdcbc;box-shadow:0 0 0 2px rgba(255,255,255,.4),0 0 14px rgba(230,203,157,.95);cursor:pointer}
#minimap .pt::before,#minimap .pt::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(230,203,157,.9);animation:ripple 2.4s ease-out infinite}
#minimap .pt::before{animation-delay:1.2s}
@keyframes ripple{0%{transform:scale(.7);opacity:1}75%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
#minimap .hint{margin-top:6px;font-size:10.5px;letter-spacing:.02em;color:rgba(191,192,179,.66)}  /* Sage Mist */
/* D02 — chạm/click BẤT KỲ ĐÂU trên trang: HẠT MẦM rơi xuống đất tại điểm
   chạm, thu nhỏ dần rồi biến mất, kèm vòng "chạm đất" loang nhẹ.
   position:fixed + z-index cao nên hiện được cả trên popup / sheet. */
.seed-fall{position:fixed;pointer-events:none;z-index:92;color:#ead9b8;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  animation:seedFall .8s cubic-bezier(.35,.65,.4,1) forwards}
.seed-fall svg{display:block}
.seed-soil{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1.5px solid rgba(234,217,184,.85);border-radius:50%;pointer-events:none;z-index:91;
  animation:seedSoil .85s ease-out forwards}
@keyframes seedFall{
  0%{transform:translate(-50%,-135%) scale(1.4) rotate(-16deg);opacity:0}
  16%{opacity:1}
  60%{transform:translate(-50%,-50%) scale(.72) rotate(6deg)}
  100%{transform:translate(-50%,-40%) scale(.1) rotate(14deg);opacity:0}
}
@keyframes seedSoil{
  0%,52%{transform:scale(.15);opacity:0}
  68%{opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
#mapOpen{display:none}
#mapOpen.show{display:flex;animation:mmBtnIn .22s ease-out both}
/* mở/đóng minimap kiểu iOS: panel phóng ra (thu về) đúng tâm nút thu gọn.
   transform-origin do JS đặt theo vị trí thật của nút. */
#minimap.mm-in{animation:mmIn .44s cubic-bezier(.16,.84,.28,1.02) both}
#minimap.mm-out{animation:mmOut .28s cubic-bezier(.4,0,.7,.3) both}
@keyframes mmIn{
  0%{opacity:0;transform:scale(.14)}
  38%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@keyframes mmOut{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.14)}
}
@keyframes mmBtnIn{from{opacity:0;transform:scale(.55)}}   /* nút hiện lại sau khi panel thu */
@media (prefers-reduced-motion:reduce){
  #minimap.mm-in,#minimap.mm-out,#mapOpen.show{animation:none}
}

/* ---------- MOBILE: nút Menu ☰ + bottom sheet gom các nhóm nút ---------- */
#menuFab{display:none;position:absolute;z-index:50}   /* .btn đặt relative → ép absolute lại */
#sheet{position:fixed;inset:0;z-index:64;pointer-events:none}
#sheet .sh-back{position:absolute;inset:0;background:rgba(4,6,9,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s}
#sheet .sh-panel{position:absolute;left:10px;right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  border-radius:22px;padding:14px 14px 14px;
  background:rgba(28,31,22,.88);                  /* đen ấm họ pine — khớp popup */
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(220,211,192,.2);box-shadow:0 18px 60px rgba(0,0,0,.55);
  transform:translateY(24px);opacity:0;transition:.28s cubic-bezier(.2,.8,.3,1)}
#sheet.open{pointer-events:auto}
#sheet.open .sh-back{opacity:1}
#sheet.open .sh-panel{transform:none;opacity:1}
#sheet .sh-grab{width:38px;height:4px;border-radius:2px;background:rgba(220,211,192,.3);margin:0 auto 12px}
#sheet h5{margin:2px 4px 8px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(191,192,179,.65)}                    /* Sage Mist */
#sheet .sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
#sheet .sh-grid.aux{margin-bottom:0}
/* nhãn tiếng Việt dài ("Mặt bằng tổng thể", "Ẩn/hiện điểm nóng") xuống 2 dòng
   thay vì tràn: canh giữa, dòng sát nhau, ô cao tối thiểu để lưới thẳng hàng */
.sh-it{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;
  padding:13px 5px 11px;border-radius:14px;min-height:84px;
  background:rgba(93,97,79,.18);border:1px solid rgba(220,211,192,.1);   /* ô kính pine */
  font-size:11.5px;line-height:1.25;text-align:center;letter-spacing:.01em;
  color:rgba(238,242,247,.9);transition:.15s;overflow-wrap:anywhere}
.sh-it svg{width:22px;height:22px;color:var(--accent)}
.sh-it:active{transform:scale(.96)}
/* mục đang bật: gradient Champagne Bronze → Beige Sand (guideline 4a) */
.sh-it.is-on{background:linear-gradient(135deg,#A78061,#DCD3C0 85%);border-color:transparent;color:#2f3327;font-weight:600}
.sh-it.is-on svg{color:#2f3327}

/* ---------- hotspot trên ảnh ---------- */
.hs{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#fff;transition:transform .18s}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs.crop{display:none!important}   /* điểm neo nằm ngoài vùng ảnh đang hiển thị */
/* Chấm tròn ĐỒNG BỘ màu với title (brand): tối = Hoa Dau Brown → Champagne Bronze,
   sáng = Beige Sand → Champagne Bronze. Quầng bronze nhẹ tạo điểm nhấn. */
.hs.dark{background:linear-gradient(135deg,rgba(89,74,66,.95),rgba(167,128,97,.95));
  color:#fef0e1;border:1px solid rgba(220,211,192,.42);
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 14px rgba(167,128,97,.35)}
.hs.light{background:linear-gradient(135deg,rgba(220,211,192,.96),rgba(167,128,97,.92));
  color:#4a3a30;border:1px solid rgba(89,74,66,.28);box-shadow:0 4px 18px rgba(0,0,0,.3)}
.hs .hs-lab{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  /* Brand Norton Park: nền gradient Hoa Dau Brown -> Champagne Bronze (điểm nhấn),
     chữ kem sáng; giữ blur kính. Thay màu xám đen cũ (rgba(10,13,18,.72)). */
  background:linear-gradient(120deg,rgba(89,74,66,.95),rgba(120,96,77,.95) 58%,rgba(167,128,97,.95));
  border:1px solid rgba(220,211,192,.42);color:#fef0e1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.hs.light .hs-lab{background:linear-gradient(120deg,rgba(220,211,192,.96),rgba(167,128,97,.92));
  color:#4a3a30;border-color:rgba(89,74,66,.30);text-shadow:none}   /* Beige Sand -> Champagne Bronze (brand) */

/* ---------- hoạ tiết chữ T — "hạt mầm đã nảy" (2 cánh lá + thân) ----------
   Dùng ở 4 chỗ đã chốt: T-rule phân đoạn · watermark đầu popup ·
   watermark cột Liên hệ · pin hotspot Công Viên. */
.trule{display:block;height:26px;color:rgba(167,128,97,.9)}   /* Champagne Bronze */
.trule.ct{margin:2px 0 0}
.trule.ph{margin:2px 0 0;color:rgba(201,161,122,.7)}
.trule.hero{margin:14px 0 16px;color:rgba(230,203,160,.85)}
.trule.sm{height:16px;margin:0 4px 8px;color:rgba(201,161,122,.8)}

/* ---- THẺ THÔNG TIN CĂN khi rê chuột trên mặt bằng của mặt cắt (#unitCard) ----
   Kính brand (Hoa Dau Brown pha tối, viền Beige Sand), mã căn font tiêu đề, kicker Sage
   Mist, dòng gọi bấm Champagne Bronze. Bám theo con trỏ, không nhận chuột. */
#unitCard{position:absolute;left:0;top:0;z-index:39;width:232px;padding:14px 16px 12px;box-sizing:border-box;
  border-radius:14px;background:rgba(52,46,38,.92);border:1px solid rgba(220,211,192,.32);
  box-shadow:0 14px 34px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  pointer-events:none;color:#F1ECE0;display:flex;flex-direction:column;gap:6px;will-change:transform}
#unitCard[hidden]{display:none}
body.pop-open #unitCard,body.ui-off #unitCard{display:none}
.uc-kick{font-family:var(--f-sub);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#BFC0B3}
.uc-head{display:flex;align-items:baseline;gap:10px}
.uc-code{font-family:var(--f-head);font-weight:600;font-size:30px;line-height:1;letter-spacing:.02em;color:#F1ECE0}
.uc-code.long{font-size:24px}   /* mã Lot B dài (B2.12A.14) — mã + "Tầng 12A" vẫn nằm một dòng */
.uc-floor{font-family:var(--f-sub);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#DCC39A;white-space:nowrap}
.trule.uc{width:150px;height:16px;margin:2px 0 4px;color:rgba(220,195,154,.9)}
.uc-rows{display:flex;flex-direction:column;gap:5px}
.uc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;line-height:1.35}
.uc-row span{color:rgba(241,236,224,.62);white-space:nowrap}   /* nhãn một dòng, giá trị dài (tầm nhìn) mới xuống dòng */
.uc-row b{font-weight:600;color:#F1ECE0;text-align:right}
.uc-cta{margin-top:5px;font-family:var(--f-sub);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#C39B77}
.uc-muted{margin-top:5px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(191,192,179,.55)}
.uc-btn{display:none}
/* máy chạm: không có hover — chạm 1 thắp căn + thẻ kéo lên từ đáy kèm nút, chạm 2 / nút mở tour */
/* đáy = trên THANH TOUR (mobile: thanh nằm sát đáy, cao 46px tại bottom:var(--edge-b)) — không thì nút "Mở tour 360" bị thanh tour đè (ảnh chụp Pixel 7 17/09) */
#unitCard.touch{left:var(--edge-l,10px);right:auto;top:auto;bottom:calc(var(--edge-b,10px) + 58px);
  width:min(440px,calc(100vw - 20px));transform:none!important;pointer-events:auto;border-radius:18px;padding:12px 16px 14px}
  /* min(440px, …): điện thoại thì kín bề ngang, máy lai (Surface, iPad có bàn phím) thì vẫn là thẻ, không bung hết màn */
#unitCard.touch .uc-btn{display:block;margin-top:6px;min-height:46px;border:0;border-radius:12px;
  background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-family:var(--f-sub);font-weight:600;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#unitCard.touch .uc-cta{display:none}
/* watermark đầu popup (chìm ~6%, không chiếm chỗ) */
#pop .head{position:relative;overflow:hidden}
#pop .head .t-wm{position:absolute;right:58px;top:-16px;width:108px;height:108px;
  color:#DCD3C0;opacity:.1;pointer-events:none}   /* outline vector thật trên nền pine ấm */
#pop .head .t-wm svg{width:100%;height:100%;display:block}
/* watermark cột thông tin trang Liên hệ */
.ct-aside{position:relative;overflow:hidden}
.ct-aside .t-wm2{position:absolute;right:-34px;bottom:-30px;width:190px;height:190px;
  color:#DCD3C0;opacity:.07;transform:rotate(-8deg);pointer-events:none}
.ct-aside .t-wm2 svg{width:100%;height:100%;display:block}
/* pin chữ T cho hotspot Công Viên: thân chỉ xuống vị trí, chấm sáng ở gốc */
.hs.tpin{border-radius:0;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transform:translate(-50%,-100%)}
.hs.tpin:hover{transform:translate(-50%,-100%) scale(1.1)}
.hs.tpin svg{display:block}
.hs.tpin .tp-dot{position:absolute;left:50%;bottom:-4px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.95)}
.hs.tpin .hs-lab{top:auto;bottom:calc(100% + 10px)}

/* ================= menu chọn tầng (slice) =================
   Panel này KHÔNG dùng class .glass — nó tự khai báo nền kính riêng,
   nên chỉnh ở đây KHÔNG ảnh hưởng tới các nút / thanh khác.
   3 "công tắc" chính nằm ngay dưới đây: --fl-tint, --fl-blur, --fl-sheen.
   ============================================================ */
#floors{
  /* ---- 3 CÔNG TẮC ĐỘ MỜ ĐỤC (chỉnh 3 số này) ---- */
  --fl-tint:rgba(43,46,35,.34);   /* 1. nền tối (tint DARK PINE theo guideline) — D Kính sữa */
  --fl-blur:18px;                 /* 2. sương mờ     : 2px sắc nét → 36px mịn dày */
  --fl-sheen:.22;                 /* 3. lớp sữa trắng: .04 nhạt   → .28 đục sữa */

  /* ---- nền kính (ghép từ 3 công tắc trên) ---- */
  background:
    linear-gradient(155deg,
      rgba(255,255,255,var(--fl-sheen)),
      rgba(255,255,255,calc(var(--fl-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--fl-sheen) * .45))),
    var(--fl-tint);
  -webkit-backdrop-filter:blur(var(--fl-blur)) saturate(1.55);
  backdrop-filter:blur(var(--fl-blur)) saturate(1.55);
  border:1px solid rgba(220,211,192,.34);         /* viền kính Beige Sand — khớp minimap, D */
  box-shadow:0 8px 28px rgba(0,0,0,.16),          /* bóng đổ — khớp .glass */
             inset 0 1px 0 rgba(255,255,255,.18); /* vệt sáng mép trên */

  /* ---- vị trí & khung ---- */
  right:calc(var(--edge) + var(--btn) + 12px);top:50%;
  transform:translateY(-50%) translateX(10px);
  width:210px;border-radius:14px;padding:10px;z-index:50;

  /* ---- đóng/mở panel: KHÔNG phải độ mờ đục, đừng sửa 2 dòng này ---- */
  /* transition CHỈ opacity + transform: 'all' kéo theo cả background/height
     mỗi khi khối chú giải xuất hiện, nhìn như panel "loang" ra. */
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .22s,transform .22s,visibility 0s .22s;   /* visibility đợi fade xong mới ẩn */
}
/* visibility:hidden khi đóng: 21 nút không còn nằm trong thứ tự Tab / cây trợ
   năng — trước đây chỉ opacity:0 nên Tab tới nút vô hình, Enter là VÀO mặt cắt. */
#floors.open{opacity:1;pointer-events:auto;transform:translateY(-50%);visibility:visible;transition-delay:0s}
#floors h4{margin:2px 4px 8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#DCD3C0}                                  /* Beige Sand */
/* DOM đã dựng từ tầng cao → thấp, nên dùng column thường (grid mobile giữ đúng thứ tự này) */
#floors .list{display:flex;flex-direction:column;gap:3px;max-height:46vh;overflow:auto;
  overscroll-behavior:contain;scroll-padding:8px;scrollbar-width:thin;padding:6px 0;
  /* mờ dần hai mép cuộn: báo "còn tầng phía trên/dưới" thay vì cắt ngang một nút */
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 14px),transparent 100%),
    linear-gradient(transparent 0,#000 14px,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 0,#000 calc(100% - 14px),transparent 100%),
    linear-gradient(transparent 0,#000 14px,#000 100%);
  mask-composite:intersect}
#floors .list button{padding:8px 12px;border-radius:9px;text-align:left;font-size:13px;
  color:rgba(238,242,247,.85);transition:background .15s}
#floors .list button:hover{background:rgba(220,211,192,.14)}
#floors .list button:active{background:rgba(220,211,192,.24);transform:scale(.985)}   /* phản hồi bấm tức thì, trước khi cảnh kịp bay */
#floors .list button:focus-visible{outline:2px solid #DCD3C0;outline-offset:-2px}
/* tầng đang chọn: gradient Champagne Bronze → Beige Sand (guideline 4a) */
#floors .list button.on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600}
#floors .exit{margin-top:8px;width:100%;padding:8px;border-radius:9px;font-size:12px;
  border:1px solid rgba(167,128,97,.55);color:#DCD3C0}
#floors .exit:hover{background:rgba(167,128,97,.28)}

/* ---------- công tắc lớp tô màu theo nhóm loại căn ---------- */
#floors .ov{margin-top:9px;padding-top:9px;border-top:1px solid rgba(220,211,192,.16)}
#floors .ov[hidden]{display:none}
#floors .ov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:7px 4px;border-radius:9px;color:#DCD3C0;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;transition:background .15s}
#floors .ov-head:hover{background:rgba(220,211,192,.1)}
#floors .ov-sw{position:relative;width:32px;height:18px;border-radius:999px;flex:none;
  background:rgba(220,211,192,.22);border:1px solid rgba(220,211,192,.2);transition:.2s}
#floors .ov-sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:#DCD3C0;transition:.2s}
/* đang bật: cùng gradient Champagne Bronze → Beige Sand với tầng đang chọn */
#floors .ov-head[aria-pressed="true"] .ov-sw{border-color:transparent;
  background:linear-gradient(115deg,#A78061,#DCD3C0 85%)}
#floors .ov-head[aria-pressed="true"] .ov-sw::after{left:16px;background:#2f3327}
#floors .ov-key{margin-top:4px;transition:opacity .2s}
#floors .ov.is-off .ov-key{opacity:.32}
#floors .ov-key div,#floors .ov-key button{display:flex;align-items:center;gap:8px;padding:4px 5px;border-radius:7px;
  font-size:11.5px;color:rgba(238,242,247,.8)}
#floors .ov-key i{width:11px;height:11px;border-radius:3px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
#floors .ov-key b{font-weight:600;letter-spacing:.04em}
#floors .ov-key span{margin-left:auto;font-size:10.5px;color:rgba(220,211,192,.55)}
/* ---------- lọc loại căn (chủ dự án 28/09/2026): mỗi dòng chú giải là một ô chọn, chọn được nhiều loại ---------- */
#floors .ov-cap{margin:2px 5px 4px;font-size:10.5px;line-height:1.45;letter-spacing:.03em;color:rgba(220,211,192,.62)}
#floors .ov-cap b{color:#DCD3C0;font-weight:600}
#floors .ov-cap .ov-clear{margin-left:4px;padding:0;font-size:10.5px;color:#e2c08f;text-decoration:underline;text-underline-offset:2px}
#floors .ov.is-off .ov-cap{display:none}
#floors .ov-key button{width:100%;margin:3px 0;padding:6px 7px;text-align:left;cursor:pointer;
  border:1px solid rgba(220,211,192,.18);transition:background .15s,opacity .15s,border-color .15s}
@media (hover:hover){ #floors .ov-key button:hover{background:rgba(220,211,192,.1)} }
#floors .ov-key button:focus-visible{outline:2px solid #DCD3C0;outline-offset:-2px}
/* ô chọn bên phải: trống = chưa chọn, nền tối + dấu ✓ = đang lọc loại này */
#floors .ov-key button::after{content:"";flex:none;box-sizing:border-box;width:14px;height:14px;margin-left:4px;border-radius:4px;
  border:1.5px solid rgba(220,211,192,.55)}
#floors .ov-key button[aria-pressed="true"]{background:rgba(254,240,225,.93);border-color:transparent;color:#12151b}
#floors .ov-key button[aria-pressed="true"] span{color:rgba(18,21,27,.62)}
#floors .ov-key button[aria-pressed="true"]::after{border-color:#12151b;background:#12151b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fef0e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
#floors .ov-key button.is-dim{opacity:.5}
#floors .ov-key button.is-zero{opacity:.34}
#floors .ov-key button.is-zero[aria-pressed="true"]{opacity:.9}
/* đang lọc: số căn thuộc các loại đang chọn ở bên phải mỗi tầng; tầng không có thì mờ */
#floors.is-filtering .list button{position:relative;padding-right:40px}
#floors .list button[data-n]::after{content:attr(data-n);position:absolute;right:8px;top:50%;transform:translateY(-50%);
  min-width:22px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:9px;background:rgba(254,240,225,.9);color:#12151b;
  font:700 10.5px/18px var(--f-body,system-ui);text-align:center}
#floors .list button.is-zero:not(.on){opacity:.42}
#floors .ov-note{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:rgba(254,240,225,.1);border:1px solid rgba(214,178,128,.5);
  color:#fef0e1;font-size:11.5px;line-height:1.45}
#floors .ov-note[hidden]{display:none}
#floors .ov-note b{color:#e2c08f}
#floors .ov-note button{display:inline-block;margin:6px 6px 0 0;height:28px;padding:0 11px;border-radius:14px;
  background:rgba(254,240,225,.92);color:#12151b;font-size:11px;font-weight:600}
/* màn thấp (điện thoại xoay ngang, cửa sổ nhỏ): panel bên phải cao hơn viewport → rút danh sách lại */
@media (max-height:620px) and (min-width:741px){#floors .list{max-height:30vh}}

/* ---------- popup toàn màn (chừa cột rail phải) ---------- */
#pop{position:absolute;inset:0;display:none;z-index:40;transition:opacity .25s}
#pop.open{display:block}
body.ui-off #pop{opacity:0;pointer-events:none}
/* KHÔNG backdrop-filter ở popup (review 27/09/2026): hai lớp kính (mờ 3px toàn màn + mờ 24px sau panel) bị tính lại
   MỖI KHUNG khi nội dung popup đổi — bản đồ chuyển động, tour 360, cuộn danh sách — bản đồ vị trí trong popup chỉ còn
   30 khung/giây (45 khi bỏ, đo popup-hold-ab.mjs). Panel vốn đục 95% nên lớp mờ sau nó gần như không lộ ra: nền đặc
   cùng màu nhìn như cũ; nền tối quanh panel đậm hơn một chút thay cho độ mờ. Cảnh 3D phía sau đứng yên suốt lúc mở. */
#pop .back{position:absolute;inset:0;background:rgba(4,6,9,.58)}
#pop .panel{position:absolute;top:10px;left:10px;bottom:10px;
  right:calc(var(--btn) + var(--edge)*2);          /* chừa đúng cột nút bên phải */
  border-radius:var(--radius);overflow:hidden;
  background:rgb(23,25,18);                        /* = --popup đục hẳn */
  border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:popIn .34s cubic-bezier(.2,.8,.3,1)}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
/* header popup: TỐI GIẢN — bỏ dải màu + diềm (nặng nề, tách khối vô lý);
   chỉ hairline + chữ tone brand. Điểm nhấn brand dồn xuống CHÂN panel (.hm-fence). */
#pop .head{height:56px;display:flex;align-items:center;gap:14px;padding:0 62px 0 22px;
  border-bottom:1px solid rgba(191,192,179,.14)}          /* hairline Sage Mist */
#pop .head .crumb{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#BFC0B3}  /* Sage Mist */
#pop .head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:.02em;color:#E9E3D2}
/* chân panel: hàng rào hạt mầm outline (PA2 liều thấp) — RÕ ở mép đáy, tan dần lên trên */
#pop .hm-fence{position:absolute;left:0;right:0;bottom:0;height:110px;opacity:.13;pointer-events:none;
  background:url('assets/pattern/fence-beige-140.svg') repeat-x left bottom;
  -webkit-mask-image:linear-gradient(0deg,#000 14%,transparent 96%);
  mask-image:linear-gradient(0deg,#000 14%,transparent 96%)}
#pop .x{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:rgba(238,242,247,.8);z-index:2}
#pop .x:hover{background:rgba(255,255,255,.12)}
#popBody{position:absolute;top:57px;left:0;right:0;bottom:0;overflow:auto;overscroll-behavior:contain}

/* placeholder nhúng nội dung full khung */
.ph-full{position:absolute;inset:16px;border:1.5px dashed rgba(255,255,255,.16);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:rgba(238,242,247,.55);text-align:center;padding:24px}
.ph-full svg{opacity:.5}
.ph-full b{font-size:14px;font-weight:600;color:rgba(238,242,247,.8);letter-spacing:.02em}
.ph-full span{font-size:12px;max-width:520px;line-height:1.6}

/* form liên hệ 3 cột: hero ảnh · thông tin · form */
/* 3 cột CHIA ĐỀU → tỉ lệ giữ nguyên ở mọi bề rộng màn hình, không cột nào nuốt phần dư */
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  min-height:100%}

/* ---- cột hero (lấp khoảng trống bên trái) ---- */
.ct-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  border-right:1px solid rgba(255,255,255,.09)}
.ct-hero-img{position:absolute;inset:0;
  background:url(assets/photos/web/l2.jpg) center/cover no-repeat;
  transform:scale(1.04)}
.ct-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,18,.42) 0%,rgba(10,13,18,.72) 46%,rgba(10,13,18,.94) 100%)}
.ct-hero-body{position:relative;z-index:1;padding:36px 36px 32px;
  width:100%;max-width:470px;margin:0 auto}   /* cột rộng thì nội dung vẫn gọn giữa */
.ct-hero-mark{display:block;color:#e6cba0;opacity:.9;margin-bottom:14px}
.ct-hero-mark svg{display:block}
.ct-hero-kicker{font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:#d9bd8f;margin-bottom:8px}
.ct-hero h4{margin:0;font-size:25px;line-height:1.28;font-weight:600;letter-spacing:.01em;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ct-hero p{margin:0;font-size:12.5px;line-height:1.7;color:rgba(238,242,247,.72);max-width:330px}
.ct-hero-stats{display:flex;gap:26px;margin-top:26px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.13)}
.ct-hero-stats b{display:block;font-size:21px;font-weight:600;color:var(--accent);line-height:1.1}
.ct-hero-stats b i{font-style:normal;font-size:12px;margin-left:1px;color:rgba(254,240,225,.75)}
.ct-hero-stats span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(238,242,247,.5);display:block;margin-top:3px}

/* ---- hàng liên kết mạng xã hội / nhắn tin ---- */
.ct-soc-wrap{display:flex;flex-direction:column;gap:7px;margin-top:-6px}
.ct-soc-lab{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(238,242,247,.4)}
.ct-soc-lab:not(:first-child){margin-top:6px}
/* padding-top KHỚP với .ct-form (36px) để 3 cột thẳng hàng mốc trên */
.ct-aside{padding:36px clamp(36px,9%,86px) 32px;border-right:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;gap:20px;background:rgba(255,255,255,.02)}
.ct-aside img.lg{height:64px;align-self:flex-start;display:block;
  filter:brightness(1.3) drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.ct-tag{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#d9bd8f;margin-top:-10px}
.ct-dev{font-size:12px;letter-spacing:.05em;color:rgba(238,242,247,.62);margin-top:-10px;line-height:1.5}
.ct-soc{display:flex;gap:8px}
.ct-soc a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:rgba(238,242,247,.85);
  font-size:12px;font-weight:800;text-decoration:none;transition:.15s}
.ct-soc a:hover{border-color:var(--accent);color:var(--accent)}
.ct-info{display:flex;flex-direction:column;gap:14px;font-size:12.5px;color:rgba(238,242,247,.8);line-height:1.55}
.ct-info>div{display:flex;gap:11px}
.ct-info svg{flex:none;margin-top:2px;opacity:.65}
.ct-info b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(238,242,247,.45);font-weight:600;margin-bottom:2px}
/* link gọi điện / gửi mail / mở bản đồ: giữ nguyên kiểu chữ, chỉ sáng lên khi hover */
.ct-info a.ct-lnk{color:inherit;text-decoration:none;padding:3px 0;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.ct-info a.ct-lnk:hover,.ct-info a.ct-lnk:focus-visible{color:var(--accent);
  border-bottom-color:rgba(254,240,225,.4)}
.ct-note{margin-top:auto;font-size:10.5px;color:rgba(238,242,247,.35);line-height:1.5}
.ct-form{padding:36px clamp(44px,8%,96px);display:flex;flex-direction:column;gap:14px}
.ct-form h3{margin:0;font-size:20px;font-weight:600}
.ct-form .sub{font-size:12.5px;color:rgba(238,242,247,.55);margin:-6px 0 4px}
.ct-form label{display:flex;flex-direction:column;gap:6px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(238,242,247,.55);font-weight:600}
.ct-form input,.ct-form select,.ct-form textarea{
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;color:var(--text);font:inherit;font-size:13.5px;outline:none;
  transition:border-color .15s,background .15s;width:100%}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  border-color:rgba(254,240,225,.55);background:rgba(255,255,255,.09)}
.ct-form select option{background:#161a21;color:var(--text)}
.ct-form textarea{resize:vertical;min-height:88px}
.ct-form .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-form .ck{flex-direction:row;align-items:center;gap:8px;text-transform:none;
  letter-spacing:.02em;font-size:12px;font-weight:400;color:rgba(238,242,247,.7);cursor:pointer}
.ct-form .ck input{width:auto}
.ct-form .submit{align-self:flex-start;background:var(--accent);color:#12151b;font-weight:600;
  padding:12px 28px;border-radius:999px;letter-spacing:.04em;font-size:13.5px;
  transition:filter .15s,transform .12s;margin-top:4px}
.ct-form .submit:hover{filter:brightness(1.06)}
.ct-form .submit:active{transform:scale(.97)}
.ct-form .demo-note{font-size:10.5px;color:rgba(238,242,247,.35)}
.ct-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:60px 20px;text-align:center}
.ct-ok .ring{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(94,231,157,.6);
  display:flex;align-items:center;justify-content:center;color:#5ee79d}
.ct-ok b{font-size:17px}
.ct-ok span{font-size:12.5px;color:rgba(238,242,247,.6);max-width:380px;line-height:1.6}

/* ---------- nhúng iframe full khung popup ---------- */
.pop-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  background:rgba(255,255,255,.03)}

/* nút quay lại từ màn giữ chỗ tour 360 */
.ph-back{margin-top:6px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  color:rgba(238,242,247,.85);font-size:12.5px;transition:.15s}
.ph-back:hover{border-color:var(--accent);color:var(--accent)}
/* Cùng nút đó nhưng NỔI trên khung tour đang nhúng: tour phủ kín popup nên
   nút phải nằm đè lên, có nền kính riêng mới đọc được trên mọi cảnh pano.
   Góc dưới-TRÁI: góc dưới-phải là chỗ Pano2VR đặt cụm nút của chính nó. */
.pop-embed + .tour-back{position:absolute;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  margin:0;z-index:2;background:rgba(20,24,31,.62);color:#fff;
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  border-color:rgba(255,255,255,.28);box-shadow:0 6px 22px rgba(0,0,0,.35)}
@media (max-width:740px){
  .pop-embed + .tour-back{left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:8px 14px;font-size:12px}
}
/* ---------- thư viện ảnh (Photos) ---------- */
.gal{padding:22px 26px 34px;max-width:1280px;margin:0 auto}
.gal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.gal-title{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px}
.gal-count{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:rgba(238,242,247,.55);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.gal-chips{display:flex;gap:6px;flex-wrap:wrap}
.gal-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:12px;
  color:rgba(238,242,247,.8);background:rgba(255,255,255,.04);transition:.15s}
.gal-chip:hover{border-color:rgba(254,240,225,.5);color:var(--accent)}
.gal-chip.on{background:var(--accent);color:#12151b;border-color:transparent;font-weight:600}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.gal-it{position:relative;margin:0;border-radius:12px;overflow:hidden;cursor:zoom-in;
  aspect-ratio:16/9;background:rgba(255,255,255,.04);animation:galIn .5s cubic-bezier(.2,.8,.3,1) both}
.gal-it.feat{grid-column:span 2;grid-row:span 2}
.gal-it img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gal-it:hover img,.gal-it:focus-visible img{transform:scale(1.05)}
.gal-it:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-it figcaption{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:8px;padding:26px 12px 10px;
  background:linear-gradient(transparent,rgba(5,8,12,.82));
  opacity:0;transform:translateY(8px);transition:.28s}
.gal-it:hover figcaption,.gal-it:focus-visible figcaption{opacity:1;transform:none}
.g-cap{font-size:12px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.g-tag{flex:none;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#12151b;background:rgba(254,240,225,.92);border-radius:999px;padding:3px 9px}
@keyframes galIn{from{opacity:0;transform:translateY(14px)}}

/* lightbox xem ảnh lớn */
#lb{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s}
#lb.open{opacity:1;pointer-events:auto}
#lb .lb-back{position:absolute;inset:0;background:rgba(3,5,8,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#lb .lb-stage{position:relative;touch-action:pan-y}
#lbImg{max-width:min(1500px,92vw);max-height:70vh;border-radius:10px;display:block;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  opacity:0;transform:scale(.985);transition:opacity .3s,transform .3s;
  user-select:none;-webkit-user-drag:none}
#lbImg.on{opacity:1;transform:none}
#lb .lb-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(18,21,27,.6);border:1px solid var(--line);color:var(--text);
  display:flex;align-items:center;justify-content:center;z-index:2}
#lb .lb-x:hover{background:rgba(60,68,80,.7)}
#lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;background:rgba(18,21,27,.6);border:1px solid var(--line);
  color:var(--accent);display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s}
#lb .lb-nav:hover{background:rgba(60,68,80,.7)}
#lb .lb-prev{left:18px}
#lb .lb-next{right:18px}
#lb .lb-meta{position:relative;display:flex;align-items:center;gap:16px;font-size:12.5px;
  color:rgba(238,242,247,.85)}
#lbCnt{font-size:11px;letter-spacing:.1em;color:rgba(238,242,247,.5)}
#lb .lb-strip{position:relative;display:flex;gap:6px;max-width:92vw;overflow-x:auto;padding:2px}
#lb .lb-strip img{height:52px;border-radius:6px;opacity:.4;cursor:pointer;transition:.18s;display:block}
#lb .lb-strip img:hover{opacity:.75}
#lb .lb-strip img.on{opacity:1;outline:2px solid var(--accent)}
@media (prefers-reduced-motion:reduce){
  .gal-it{animation:none}
  #lbImg,#lb{transition:none}
  .seed-fall,.seed-soil{display:none}   /* người dùng tắt animation → tắt hạt mầm */
}
@media (max-width:700px){
  .gal-it.feat{grid-column:auto;grid-row:auto}
  #lb .lb-nav{width:40px;height:40px}
  #lb .lb-prev{left:8px}
  #lb .lb-next{right:8px}
}

/* ---------- tablet nhỏ / cửa sổ hẹp (iPad dọc vẫn giữ layout desktop) ---------- */
/* khung hẹp: bỏ cột hero, quay về 2 cột như cũ */
@media (max-width:1320px){
  .ct-grid{grid-template-columns:380px minmax(0,620px);justify-content:center}
  .ct-hero{display:none}
}
@media (max-width:900px){
  :root{--btn:42px;--icon:21px;--map-w:min(300px,31vw);--comp-w:220px;--mood-w:216px}
  #logo img{height:48px}
  #minimap .hint,#mood .hint{display:none}
  #floors{width:170px}
  .ct-grid{grid-template-columns:1fr}
  .ct-aside{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  .ct-form{padding:24px 22px}
  .ct-form .f2{grid-template-columns:1fr}
}

/* ---------- màn hình thấp (điện thoại xoay ngang) ----------
   KHÔNG đặt min-width ở đây: khối MOBILE bên dưới đứng sau trong file nên tự
   thắng cascade ở ≤740px. Nhờ vậy không còn khe hở nào cho chiều rộng lẻ
   (zoom / DPR phân số) rơi vào giữa hai breakpoint. */
@media (max-height:540px){
  /* điện thoại xoay ngang: la bàn + thanh mood THU NHỎ, minimap TĂNG ~15% */
  :root{--btn:38px;--icon:19px;--gap:6px;--map-w:min(276px,30vw);--comp-w:200px;--mood-w:190px}
  #logo img{height:36px}
  /* la bàn ép MỌNG: dải tick 26→18px, chữ + số độ nhỏ lại (cao ~49→36px) */
  #compass{padding:3px 0 2px;border-radius:10px}
  #compass .strip{height:18px}
  #compass .tick{top:9px;height:5px}
  #compass .tick.maj{top:6px;height:8px}
  #compass .lab{top:0;font-size:10px}
  #compass .lab.mid{font-size:11.5px}
  #compass .cursor{border-left-width:5px;border-right-width:5px;border-top-width:6px}
  #compass .deg{font-size:9px}
  #mood{height:38px;bottom:10px}   /* OPTION 2: mood ở đáy → nhích sát mép khi màn thấp */
  #mood .seg{height:38px}
  #mood .seg button{font-size:11px}
  #mood .seed{width:26px;height:26px;margin:-13px 0 0 -13px}
  #mood .seed-rot svg{width:12px;height:12px}
  #corner{flex-direction:row}          /* nút góc xếp ngang, tránh đè lên rail */
  /* popup mở: hàng nút góc nằm đè lên góc dưới phải của popup (che bảng thông tin / nút của bản đồ — review 27/09);
     cảnh phía sau đang đứng yên nên điểm nóng / bay tự do lúc này cũng chẳng để làm gì */
  body:has(#pop.open) #corner{opacity:0;pointer-events:none}
  #minimap .hint{display:none}
  /* OPTION 2: tour đã lên góc trên phải nên không còn cần nhích đáy */
  /* mép trái/phải khi máy có tai thỏ (landscape, viewport-fit=cover) */
  #railWrap{padding-right:calc(var(--edge) + env(safe-area-inset-right,0px))}
  #corner{right:calc(var(--edge) + env(safe-area-inset-right,0px))}
  #blStack{left:calc(var(--edge) + env(safe-area-inset-left,0px))}
}

/* ---------- MOBILE (≤740px): gom rail + nút góc vào Menu ☰ / bottom sheet ---------- */
@media (max-width:740px){
  :root{
    --btn:46px;--icon:22px;--edge:12px;
    --edge-l:calc(12px + env(safe-area-inset-left,0px));
    --edge-r:calc(12px + env(safe-area-inset-right,0px));
    --edge-b:calc(12px + env(safe-area-inset-bottom,0px));
    --comp-w:min(46vw,200px);--mood-w:136px;--map-w:min(86vw,360px);
  }
  #logo{top:10px;left:var(--edge-l)}
  #logo img{height:36px}
  #logo::before{inset:-20px -40px -26px -30px}

  #compass{padding:4px 0 2px}
  #compass .deg{font-size:10px}
  #compass .lab{font-size:11px}
  #compass .lab.mid{font-size:12.5px}

  /* mood: xoay DỌC — treo dưới la bàn ở mép phải, núm hạt mầm lăn theo
     phương đứng (Day trên → Night dưới), tránh chen ngang với la bàn */
  /* OPTION 2 giữ nguyên bố cục mobile của bản gốc: mood vẫn treo dọc ở mép phải,
     tour vẫn nằm trong hàng nút đáy. Phải huỷ tường minh các thuộc tính vị trí
     mới của bản desktop, nếu không phần tử sẽ nhận cả 2 cặp toạ độ và lệch chỗ. */
  #mood{top:calc(var(--edge) + 56px);right:var(--edge-r);width:48px;height:140px;
    bottom:auto;left:auto;transform:none}
  #mood .hint{top:calc(100% + 8px);bottom:auto}
  #mood .seg{flex-direction:column;width:48px;height:140px}
  /* thanh mood dọc chỉ rộng 48px → nhãn dài ("Hoàng hôn") xuống 2 dòng,
     canh giữa, không tràn ra ngoài viền kính */
  #mood .seg button{font-size:9.5px;letter-spacing:0;line-height:1.15;
    text-align:center;padding:0 3px;white-space:normal;overflow-wrap:anywhere}
  /* màn hẹp: nhãn hotspot dài không được rộng quá khung nhìn (clampLabels()
     lo phần đẩy vào trong, dòng này lo phần cắt bớt nếu vẫn quá dài) */
  .hs .hs-lab{max-width:calc(100vw - 24px);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  #mood .thumb{top:4px;bottom:auto;left:0;right:0;width:auto;height:calc((100% - 8px)/3)}
  #mood .seed{width:27px;height:27px;margin:-13.5px 0 0 -13.5px}
  #mood .seed-rot svg{width:13px;height:13px}

  /* rail + nút góc + nút mở minimap → thay bằng bottom sheet */
  #railWrap,#corner,#mapOpen,#infoEdge{display:none!important}
  /* nút "?" hướng dẫn tham quan (site/guide.js) → mục "Hướng dẫn tham quan" cuối menu ⊞ (site.js, chủ dự án 12/10/2026) */
  #npHelp{display:none!important}
  /* popup toàn màn đang mở → hàng nút đáy (tour) lùi mờ, khỏi đè form; vẫn bấm được */
  body:has(#pop.open) #blStack{opacity:.4;transition:opacity .25s}
  body:has(#pop.open) #blStack:hover,body:has(#pop.open) #blStack:focus-within{opacity:1}
  /* ...còn menu ⊞ lùi XUỐNG DƯỚI popup (#pop z 40), chủ dự án 26/09/2026: popup full màn liền mạch, nút không
     đè nội dung iframe (bảng lọc bản đồ, thẻ tour căn hộ…). Đóng popup bằng ✕ là nút trở lại như cũ. */
  body.pop-open #menuFab,body:has(#pop.open) #menuFab{z-index:39}

  /* hàng nút đáy: tour (giữa) · menu (phải) — ô trái trống từ khi gỡ nút chatbot.
     #tour trải full chiều ngang rồi canh giữa bằng flex → thanh khi bung
     không bị bó vào 50% viewport (quy tắc shrink-to-fit của absolute box). */
  #blStack{left:var(--edge-l);bottom:var(--edge-b);flex-direction:column-reverse}
  #menuFab{display:flex;right:var(--edge-r);bottom:var(--edge-b)}
  #tour{left:0;right:auto;width:100%;top:auto;bottom:var(--edge-b);
    display:flex;flex-direction:column;align-items:center;
    /* Điện thoại DỌC: thu 5 công tắc lại. Nút 38px vẫn đủ rộng để bấm bằng
       ngón cái, mà cả thanh xuống còn ~220x46 thay vì 244x74. */
    --t-btn:38px;--t-ico:16px;--t-num:44px;--t-pad:4px 5px}
  #tour .bar{max-width:calc(100vw - 132px)}   /* chừa chỗ cho nút ☰ bên phải (ô trái nay trống) */
  /* Nhãn "TOUR TỰ ĐỘNG" bỏ trên máy nhỏ: nó ăn 20px CHIỀU CAO (dòng chữ 15px +
     5px margin) để nói lại đúng cái mà icon ▶ và ô "9 / 13" ngay dưới đã nói.
     Muốn lấy lại: xoá dòng này. Vẫn giữ cho trình đọc màn hình qua aria-label. */
  #tour .cap{display:none}

  /* minimap: mặc định ẩn trên mobile, bật từ menu ☰ */
  #minimap{padding:8px 10px 6px}

  /* menu tầng: thành panel đáy */
  #floors{left:var(--edge-l);right:var(--edge-r);width:auto;top:auto;
    bottom:calc(var(--edge-b) + 60px);transform:translateY(10px)}
  #floors.open{transform:none}
  #floors .list{display:grid;grid-template-columns:repeat(2,1fr);max-height:38vh}
  /* có khối lớp tô thì panel cao thêm ~90px — nhường lại từ danh sách tầng,
     nếu không nó đẩy #unitCard (bottom: edge-b + 58px) ra ngoài màn hình */
  #floors.has-ov .list{max-height:30vh}
  /* đích chạm ≥40px (nút tầng, công tắc, Thoát) — dưới 44px là mức WCAG tối thiểu, cũ ~27–35px */
  #floors .list button,#floors .ov-head,#floors .exit{min-height:40px}
  /* thẻ căn (chạm 1 chọn, chạm 2 mở tour) phải NỔI TRÊN panel tầng: cùng neo đáy,
     trước đây z 39 < 50 nên chạm "Mở tour 360" trúng "Thoát mặt cắt" */
  #unitCard.touch{z-index:60}

  /* popup: full màn (không còn chừa cột rail phải) */
  #pop .panel{top:8px;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #pop .head{padding:0 56px 0 16px}

  .gal{padding:16px 12px 26px}
  .hs .hs-lab{font-size:10px}
}

@media (max-width:560px){
  :root{--comp-w:min(50vw,180px)}
  #tour{--t-num:40px}
  #tour .count{font-size:13px}
}

/* ---------- ĐIỆN THOẠI NẰM NGANG ----------
   Chỗ này trước đây KHÔNG có gì cả, và đó là lỗi: mọi ngắt máy nhỏ của trang
   đều theo CHIỀU RỘNG (≤740px), trong khi điện thoại xoay ngang lại rộng
   915–956px — tức là rơi vào nhánh desktop và nhận nguyên thanh tour 260x74
   trên một màn chỉ cao 412px (18% chiều cao, nằm chồng lên đầu cột nút phải).
   Ngắt theo CHIỀU CAO mới bắt đúng tình huống này. Máy tính để cửa sổ thấp
   cũng rơi vào đây — và thanh gọn cũng hợp lý hơn, nên không cần chặn.
   Ngang thì chiều cao là thứ khan hiếm: bỏ nhãn, thu nút còn 36px
   → cả khối ~204x42, trả lại 32px chiều cao cho cảnh. */
@media (max-height:520px) and (orientation:landscape){
  #tour{--t-btn:36px;--t-ico:15px;--t-num:40px;--t-pad:3px 4px}
  #tour .cap{display:none}
  #tour .count{font-size:13px}
  #tour .bar .speed{font-size:11.5px}
}
/* ============================================================================
   ĐIỀU CHỈNH 3 THANH: LA BÀN · MOOD · TOUR TỰ ĐỘNG  —  SỬA CÁC SỐ NGAY DƯỚI ĐÂY
   ============================================================================
   Đây là NƠI DUY NHẤT chỉnh độ trong suốt / độ dày viền / màu nền của 3 thanh
   (block đặt cuối <style> nên luôn thắng bản kính cũ; KHÔNG ảnh hưởng minimap/
   menu/floors). Chỉ cần đổi 3 số đầu:

     • --bar-opacity        ĐỘ ĐẶC của nền   : 0 = trong suốt hẳn · 1 = kín mít
                            (đang .64 = bớt trong suốt ~4x so với kính cũ .15;
                             muốn trong hơn thì giảm, đục hơn thì tăng)
     • --bar-border-width   ĐỘ DÀY viền (px) : 1px mảnh · 2px vừa · 3px rất dày
     • --bar-border-opacity ĐỘ ĐẬM viền      : 0 nhạt · 1 rõ nhất (màu Beige Sand)

   Màu nền = gradient brand Hoa Dau Brown → Champagne Bronze. Muốn ĐỔI TÔNG thì
   sửa 3 bộ RGB --bar-c1 / --bar-c2 / --bar-c3 (đầu → cuối gradient).
   MẸO: muốn chỉnh RIÊNG 1 thanh, đặt lại biến ngay trên selector của thanh đó
   (vd `#tour .bar{ --bar-opacity:.5 }`) — nó chỉ đè thanh ấy.
   ---------------------------------------------------------------------------- */
#compass,
#mood .seg,
#tour .bar{
  --bar-opacity:.75;          /* ← ĐỘ ĐẶC nền   (0..1) */
  --bar-border-width:1px;     /* ← ĐỘ DÀY viền  (px)   */
  --bar-border-opacity:.82;    /* ← ĐỘ ĐẬM viền  (0..1) */
  --bar-c1:89 74 66;          /* Hoa Dau Brown — đầu gradient (đậm)      */
  --bar-c2:120 96 77;         /* nâu ấm — điểm chuyển tiếp giữa          */
  --bar-c3:167 128 97;        /* Champagne Bronze — cuối gradient (nhấn) */

  background:linear-gradient(135deg,
    rgb(var(--bar-c1) / var(--bar-opacity)) 0%,
    rgb(var(--bar-c2) / var(--bar-opacity)) 55%,
    rgb(var(--bar-c3) / var(--bar-opacity)) 100%);
  border:var(--bar-border-width) solid rgb(220 211 192 / var(--bar-border-opacity));  /* Beige Sand */
  box-shadow:0 10px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------- nút rail "Gợi ý thiết kế" (đối tác 29/09/2026): popup chọn tour concept ---------- */
.dz{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:28px;max-width:1080px;margin:0 auto}
.dz-lead{margin:0 0 16px;font-size:13px;letter-spacing:.04em;color:rgba(220,211,192,.75)}
.dz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.dz-card{display:flex;align-items:center;gap:14px;min-height:84px;padding:16px 16px 16px 14px;border-radius:14px;text-align:left;
  cursor:pointer;color:#efe6d6;border:1px solid rgba(220,211,192,.22);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:border-color .18s,background .18s,transform .18s}
.dz-card:hover{border-color:rgba(214,178,128,.7);background:linear-gradient(155deg,rgba(167,128,97,.22),rgba(167,128,97,.06))}
.dz-card:active{transform:scale(.985)}
.dz-card:focus-visible{outline:2px solid #DCD3C0;outline-offset:2px}
.dz-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#2f3327;
  background:linear-gradient(135deg,#A78061,#DCD3C0 85%)}
.dz-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.dz-t b{font-size:15.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.dz-t small{font-size:12px;letter-spacing:.06em;color:rgba(220,211,192,.7)}
.dz-go{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#e2c08f}
.dz-view{position:absolute;inset:0}
.dz-bar{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;gap:14px;padding:0 14px;
  border-bottom:1px solid rgba(220,211,192,.14);background:rgb(23,25,18);color:#efe6d6;font-size:13px}
.dz-bar b{font-weight:600;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-back{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;cursor:pointer;
  color:#2f3327;background:linear-gradient(115deg,#A78061,#DCD3C0 85%);font-size:12px;font-weight:600}
/* 24/10/2026: "Contact Now" (gọi hotline) — cùng viên thuốc với "Chọn mẫu khác", dạt về mép phải của thanh */
.dz-bar b{min-width:0}
.dz-contact{margin-left:auto;text-decoration:none;white-space:nowrap}
.dz-back:hover{filter:brightness(1.07)}
.dz-back:focus-visible{outline:2px solid #DCD3C0;outline-offset:2px}
@media (max-width:420px){.dz-bar{gap:8px;padding:0 10px}.dz-back{padding:0 10px}}
/* iframe = phần tử thay thế: top + bottom + height:auto KHÔNG kéo giãn nó (ra 150 px mặc định — lỗi 29/09 chủ dự án chụp),
   nên phải ghi chiều cao tường minh */
.dz-view .pop-embed{top:46px;bottom:auto;height:calc(100% - 46px)}
@media (max-width:740px){
  .dz{justify-content:flex-start;padding:16px 14px 22px}
  .dz-grid{grid-template-columns:1fr;gap:10px}
  .dz-card{min-height:72px;padding:12px}
  .dz-go span,.dz-go{font-size:10px}
}

/* ---- In-app browser notice (Zalo / Messenger / Facebook…, owner 08/10/2026 — boot.js › INAPP_KIND) ----
   Frosted card (.glass, like "Bắt đầu tham quan") over the intro gate (z 200) and the page, top centre; the gate keeps
   loading under it. Buttons: open in Chrome / Safari (when possible), copy the link, go on here. */
#npInapp{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);z-index:260;
  width:min(420px,calc(100vw - 24px));box-sizing:border-box;padding:14px 16px 12px;border-radius:16px;
  color:#F3EBDA;font:500 13px/1.45 var(--f-sub);text-align:center;box-shadow:0 10px 32px rgba(0,0,0,.4);pointer-events:auto}
#npInapp p{margin:0}
#npInapp .ia-main{font-weight:700;color:#F3EBDA}
#npInapp .ia-how{margin-top:6px;font-size:12px;color:#E9C9A6}
#npInapp .ia-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
#npInapp button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1);color:#F3EBDA;font:700 12px/1 var(--f-sub);letter-spacing:.04em;cursor:pointer}
#npInapp button[data-act="open"]{background:rgba(233,201,166,.22);border-color:rgba(233,201,166,.7)}
#npInapp button.ia-here{background:transparent;border-color:transparent;text-decoration:underline;font-weight:500}
#npInapp .ia-ok{margin-top:8px;font-size:12px;color:#B9CC93}
/* ---------- Điều khoản sử dụng + © trên màn chờ (08/10/2026, chủ dự án duyệt; spec VPS) ----------
   Dòng điều khoản dưới nút "Bắt đầu tham quan" (hiện khi có nút, is-start), dòng © ở mép dưới suốt màn chờ, hộp điều khoản
   ngay trên màn chờ (role=dialog): nền --popup, viền --line, bo 16px, tiêu đề --f-head, thân 12–13px, điện thoại cuộn trong 80vh.
   App Offline (html.np-electron, không có nút bắt đầu): chỉ dòng ©. Bridge › startGate bỏ qua cú bấm / phím trong .ig-terms, .ig-terms-dlg. */
#introGate .ig-terms{display:none;margin:0;font-size:12px;line-height:1.4;text-align:center;color:rgba(238,242,247,.72);text-shadow:0 1px 4px rgba(0,0,0,.75)}
#introGate.is-start .ig-terms{display:block}
#introGate .ig-terms-link{color:#E9C9A6;text-decoration:underline;text-underline-offset:2px;cursor:pointer;pointer-events:auto;
  white-space:nowrap;display:inline-block;padding:3px 0}   /* one piece on narrow screens (344 px: the link wrapped mid-way), a taller tap target */
#introGate .ig-terms-link:focus-visible{outline:2px solid #e6cba0;outline-offset:2px;border-radius:3px}
#introGate .ig-copy{position:absolute;left:0;right:0;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 6px));margin:0;z-index:2;
  text-align:center;font-size:11px;line-height:1.3;color:rgba(238,242,247,.55);text-shadow:0 1px 4px rgba(0,0,0,.75);pointer-events:none}
#introGate.out .ig-copy,#introGate.out .ig-terms{opacity:0;transition:opacity .32s ease}
html.np-electron #introGate .ig-terms{display:none!important}
html.np-terms-open #npInapp{display:none}   /* the in-app notice (z 260) would cover the box's title + × on a phone (harness 09/10) */
#introGate .ig-terms-dlg{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(5,7,10,.55);pointer-events:auto}
#introGate .ig-terms-dlg[hidden]{display:none}
#introGate .ig-terms-box{position:relative;width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column;box-sizing:border-box;
  padding:22px 22px 18px;border-radius:16px;background:var(--popup);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.45);color:#eef2f7}
#introGate .ig-terms-box h3{margin:0 28px 10px 0;font-family:var(--f-head);font-weight:500;font-size:20px;line-height:1.25;color:#F3EBDA}
#introGate .ig-terms-body{overflow:auto;-webkit-overflow-scrolling:touch;font-size:12.5px;line-height:1.55;color:rgba(238,242,247,.85);padding-right:4px}
#introGate .ig-terms-body p{margin:0 0 9px}
#introGate .ig-terms-body b{color:#F3EBDA;font-weight:600}
#introGate .ig-terms-date{margin-top:12px!important;font-size:11.5px;color:rgba(238,242,247,.55)}
#introGate .ig-terms-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:#eef2f7;font:400 22px/1 system-ui,sans-serif;cursor:pointer}
#introGate .ig-terms-ok{align-self:center;margin-top:14px;min-height:42px;padding:0 22px;border-radius:999px;cursor:pointer;color:#F3EBDA;
  font-family:var(--f-sub);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
#introGate .ig-terms-x:focus-visible,#introGate .ig-terms-ok:focus-visible{outline:2px solid #e6cba0;outline-offset:2px}
@media (max-width:420px){#introGate .ig-terms-box{padding:18px 16px 14px}#introGate .ig-terms-box h3{font-size:18px}}
@media (max-height:540px){#introGate .ig-terms-box{max-height:92vh}}
/* Page toast (09/10/2026): one line over the bars when a mood switch was given up (site.js › pageToast). Glass pill, above the
   mood bar on computers and above the tour bar on phones; never takes clicks. */
#npToast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);z-index:120;
  max-width:min(520px,calc(100vw - 32px));padding:12px 20px;border-radius:999px;color:var(--accent);
  font-family:var(--f-body);font-size:14px;line-height:1.4;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .35s}
#npToast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:740px){#npToast{bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:13px;border-radius:18px}}
@media (prefers-reduced-motion:reduce){#npToast{transition:opacity .2s;transform:translate(-50%,0)}}