/* Trình xem tour 360 – nhận diện EMIR: tím mận đậm, vàng đồng, kem; Playfair Display (tiêu đề) + Montserrat.
   Không dùng backdrop-filter: hiệu ứng làm mờ nền buộc GPU vẽ lại khung 360 mỗi khung hình.
   Hiệu ứng lặp lại (nhấp nháy, chú thích) chỉ đổi transform + opacity: không vẽ lại khung 360. */
:root {
  --plum-950: #1f021d;
  --plum-900: #2a0427;
  --plum-800: #340631;
  --plum-700: #421743;
  --plum-600: #551a52;
  --plum-500: #6e2c69;
  --gold: #cfad68;
  --gold-light: #e9d29b;
  --gold-pale: #f6ebcf;
  --gold-dark: #a8843f;
  --cream: #faf5ec;
  --cream-2: #f3ead8;
  --accent: #cfad68;                /* bản đồ nhỏ: hình quạt hướng nhìn */
  --accent-rgb: 207, 173, 104;
  --walk-rgb: 42, 4, 39;            /* màu nền vòng tròn bước đi trên sàn */
  --text: #f7f0e3;                  /* chữ trên nền tối */
  --text-2: rgba(247, 240, 227, .72);
  --ink: #2a0427;                   /* chữ trên nền sáng */
  --ink-2: #5b3a57;
  --muted: #8a7186;
  --panel: rgba(36, 4, 34, .9);
  --panel-line: rgba(207, 173, 104, .28);
  --line: rgba(42, 4, 39, .12);
  --gold-grad: linear-gradient(135deg, #f1dca6 0%, #cfad68 48%, #b28c47 100%);
  --shadow: 0 14px 36px rgba(20, 2, 18, .34);
  --shadow-sm: 0 6px 16px rgba(20, 2, 18, .26);
  --radius: 14px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--plum-950); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { flex: 0 0 auto; }

#pano { position: fixed; inset: 0; background: var(--plum-950); cursor: grab; transform-origin: 50% 50%; }
#pano:active { cursor: grabbing; }
/* Điểm nóng ẩn đi khi đang di chuyển, hiện dần khi tới nơi */
.hs-walk, .hs-label, .hs-pin, .hs-info, .hs-lift { transition: opacity .45s ease .2s; }
#pano.moving .hs-walk, #pano.moving .hs-label, #pano.moving .hs-pin, #pano.moving .hs-info, #pano.moving .hs-lift { opacity: 0; transition: opacity .2s ease; }

.panel { background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--shadow); color: var(--text); }

/* ---------- Thanh trên ---------- */
.topbar {
  position: fixed; top: 14px; left: 14px; right: 14px; z-index: 20;
  display: flex; align-items: flex-start; gap: 10px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .spacer { flex: 1; }
.brand { display: flex; align-items: center; gap: 12px; padding: 7px 18px 7px 8px; border-radius: var(--radius); min-width: 0; max-width: min(520px, 100%); }
.brand .mark { width: 40px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; text-decoration: none; }
.brand .mark img { width: 34px; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.brand .t { min-width: 0; padding-left: 12px; border-left: 1px solid var(--panel-line); }
.brand h1 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p b { color: var(--gold-light); font-weight: 600; }

.actions { display: flex; gap: 8px; }
.pill-btn {
  height: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--panel-line); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
  background: var(--panel); box-shadow: var(--shadow-sm); color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.pill-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.pill-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pill-btn.primary { background: var(--gold-grad); color: var(--plum-900); border-color: transparent; box-shadow: 0 8px 22px rgba(var(--accent-rgb), .35); }
.pill-btn.primary:hover { color: var(--plum-950); filter: brightness(1.06); }

/* ---------- Nút icon ---------- */
.btn {
  min-width: 42px; height: 42px; border-radius: 10px; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: var(--text-2);
  transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: rgba(var(--accent-rgb), .12); color: var(--gold-light); }
.btn:active { background: rgba(var(--accent-rgb), .2); }
.btn.on { color: var(--gold); }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { opacity: .3; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--text-2); }
.toolbar { display: flex; gap: 2px; padding: 5px; border-radius: var(--radius); }
/* Nút tham quan tự động: nổi bật bằng viền vàng; đang chạy thì nền vàng */
.btn.tour-btn { padding: 0 14px 0 10px; margin: 0 4px; border: 1px solid rgba(var(--accent-rgb), .55); color: var(--gold-light); font-size: 13px; font-weight: 600; }
.btn.tour-btn svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.6; }
.btn.tour-btn.on { background: var(--gold-grad); color: var(--plum-900); border-color: transparent; }
.btn.tour-btn.on svg { fill: none; stroke-width: 2.6; }

/* ---------- Dock dưới: danh sách điểm + thanh công cụ ---------- */
.dock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(100% - 28px, 1100px); pointer-events: none;
}
.dock > * { pointer-events: auto; }
.strip {
  display: flex; gap: 12px; padding: 9px 11px; border-radius: var(--radius);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  transition: opacity .25s ease, transform .25s ease;
}
.strip::-webkit-scrollbar { display: none; }
.strip.hide { opacity: 0; transform: translateY(10px); pointer-events: none; }
.grp { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.grp + .grp { padding-left: 12px; border-left: 1px solid var(--panel-line); }
.grp-name { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-2); padding-left: 2px; }
.grp.active .grp-name { color: var(--gold); }
.grp-items { display: flex; gap: 8px; }
.stop {
  position: relative; width: 92px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
}
.stop .ph { width: 92px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--plum-700); outline: 2px solid transparent; outline-offset: 0; transition: outline-color .15s; }
.stop img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.stop:hover img { transform: scale(1.06); }
.stop .nm { font-size: 11.5px; line-height: 1.3; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop:hover .ph { outline-color: rgba(var(--accent-rgb), .5); }
.stop.active .ph { outline: 2px solid var(--gold); }
.stop.active .nm { color: var(--gold-light); font-weight: 600; }

/* ---------- Thanh chọn tầng ---------- */
.floors {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 19;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px; border-radius: 999px;
}
.floors .cap { padding: 2px 0 5px; display: grid; place-items: center; }
.floors .cap svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.floor-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .4); background: transparent; cursor: pointer;
  font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--text); display: grid; place-items: center; transition: all .15s;
}
.floor-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.floor-btn.active { background: var(--gold-grad); border-color: transparent; color: var(--plum-900); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); }

/* ---------- Điểm nóng: vòng tròn bước đi trên sàn (hotspot phối cảnh, nằm song song mặt đất) ---------- */
.hs-walk { width: 0; height: 0; }
/* điểm neo 0×0 của nhãn / nút cầu thang: không chiếm chỗ, không chặn chuột (chỉ phần tử con nhận chuột) */
.hs-anchor { width: 0; height: 0; pointer-events: none; }
.hs-anchor > * { pointer-events: auto; }
.hs-anchor > .hs-label { pointer-events: none; }
.floor {
  position: relative; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.floor .disc { position: absolute; inset: 28px; border-radius: 50%; background: rgba(var(--walk-rgb), .55); }
.floor .ring { position: absolute; inset: 28px; border-radius: 50%; border: 7px solid var(--gold-light); transition: background .15s, border-color .15s; }
.floor .pulse { position: absolute; inset: 28px; border-radius: 50%; border: 6px solid rgba(246, 235, 207, .9); animation: pulse 2.4s ease-out infinite; pointer-events: none; }
.floor svg { position: relative; width: 96px; height: 96px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.floor svg .sh { stroke: rgba(31, 2, 29, .5); stroke-width: 20; }
.floor svg .fg { stroke: #fff; stroke-width: 12; }
.floor:hover .ring { background: rgba(var(--accent-rgb), .55); border-color: #fff4d8; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }

/* Nhãn điểm đến phía trên vòng tròn */
/* Chỉ chữ (pill) nhận chuột; ảnh xem trước chỉ nhận chuột khi đang hiện – vùng ảnh ẩn không làm nhãn bật lên */
.hs-label { transform: translate(-50%, -100%); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.hs-label .pill { pointer-events: auto; }
.hs-label.hover .card { pointer-events: auto; }
.hs-label .card {
  width: 172px; border-radius: 10px; overflow: hidden; background: var(--plum-900); border: 2px solid var(--gold); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; pointer-events: none;
}
.hs-label .card img { display: block; width: 100%; height: 102px; object-fit: cover; }
.hs-label .pill {
  white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(36, 4, 34, .9); border: 1px solid var(--panel-line); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 6px;
}
.hs-label .pill svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-label.hover .card { opacity: 1; transform: none; }
.hs-label.hover .pill { background: var(--gold-grad); color: var(--plum-900); border-color: transparent; }
.hs-label.hover .pill svg { stroke: var(--plum-900); }

/* Ghim (ảnh flycam – tour này không dùng, giữ kiểu cho dữ liệu sau này) */
.hs-pin { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hs-pin .lbl { padding: 8px 14px 8px 12px; border-radius: 12px; background: var(--plum-800); border: 1px solid var(--gold); color: var(--text); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hs-pin .lbl .ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--accent-rgb), .18); display: grid; place-items: center; }
.hs-pin .lbl .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-pin .lbl b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.hs-pin .lbl small { display: block; font-size: 12px; opacity: .8; line-height: 1.25; }
.hs-pin .stem { width: 2px; height: 34px; background: linear-gradient(var(--gold), rgba(207,173,104,.4)); }
.hs-pin .dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); margin-bottom: -7px; }

/* Điểm thông tin */
.hs-info {
  position: relative; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--gold); padding: 0; cursor: pointer;
  background: rgba(36, 4, 34, .88); color: var(--gold-light); box-shadow: var(--shadow-sm); display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.hs-info::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .85); animation: pulse 2.6s ease-out infinite; pointer-events: none; }
.hs-info svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.hs-info .tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); white-space: nowrap;
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--plum-900); border: 1px solid var(--panel-line); color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.hs-info:hover { background: var(--gold); color: var(--plum-900); }
.hs-info:hover .tip { opacity: 1; transform: translate(-50%, 0); }

/* Cầu thang */
.hs-lift {
  transform: translate(-50%, -50%); border: 1px solid var(--panel-line); white-space: nowrap; cursor: pointer; padding: 9px 15px 9px 9px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px; background: rgba(36, 4, 34, .9); box-shadow: var(--shadow); color: var(--text);
  transition: background .15s, color .15s;
}
.hs-lift .ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--accent-rgb), .16); color: var(--gold); display: grid; place-items: center; }
.hs-lift svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-lift b { display: block; font-size: 14px; line-height: 1.2; text-align: left; }
.hs-lift small { display: block; font-size: 12px; color: var(--text-2); text-align: left; }
.hs-lift:hover { background: var(--gold-grad); color: var(--plum-900); }
.hs-lift:hover .ic { background: rgba(42, 4, 39, .14); color: var(--plum-900); }
.hs-lift:hover small { color: var(--plum-700); }

/* ---------- Chú thích không gian (góc dưới trái, hiện ~3 giây khi tới nơi) ---------- */
.caption {
  position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: 196px; z-index: 15; max-width: min(560px, calc(100vw - 48px));
  pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease;
  text-shadow: 0 2px 14px rgba(20, 2, 18, .75), 0 1px 3px rgba(20, 2, 18, .6);
}
.caption.show { opacity: 1; transform: none; }
.caption small { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-light); }
.caption small::before { content: ""; width: 34px; height: 1.5px; background: var(--gold); }
.caption b { display: block; margin-top: 6px; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; line-height: 1.15; color: #fff; }

/* ---------- Thẻ thông tin ---------- */
.info-card {
  position: fixed; right: 14px; top: 84px; z-index: 30; width: min(360px, calc(100vw - 28px));
  padding: 18px 20px 20px; border-radius: var(--radius); animation: rise .2s ease;
}
.info-card .kick { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.info-card h3 { margin: 0 34px 8px 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.3; }
.info-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.close { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(var(--accent-rgb), .14); color: currentColor; display: grid; place-items: center; }
.close:hover { background: rgba(var(--accent-rgb), .3); }
.close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Hộp thoại sáng (chọn tầng, liên hệ, kết thúc): nền kem, chữ tím, điểm vàng ---------- */
.modal, .ending { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(20, 2, 18, .55); animation: fade .2s ease; overflow-y: auto; touch-action: pan-y; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.lift-panel, .contact-panel, .ending-card {
  position: relative; width: min(380px, 100%); padding: 24px 24px 26px; border-radius: 20px; background: var(--cream); color: var(--ink);
  border: 1px solid rgba(var(--accent-rgb), .55); box-shadow: 0 24px 60px rgba(20, 2, 18, .45); animation: rise .22s ease; user-select: text;
}
.lift-panel .close, .contact-panel .close, .ending-card .close, .side .close { color: var(--ink-2); background: rgba(42, 4, 39, .06); }
.lift-panel .close:hover, .contact-panel .close:hover, .ending-card .close:hover, .side .close:hover { background: rgba(42, 4, 39, .12); }
.lift-panel h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.lift-panel p { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.lift-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lift-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; text-align: left; color: var(--ink); transition: border-color .15s, background .15s;
}
.lift-row:hover { border-color: var(--gold); background: var(--gold-pale); }
.lift-row .num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; font-weight: 600; background: var(--gold-pale); color: var(--plum-700); flex: 0 0 auto; }
.lift-row b { display: block; font-size: 15px; }
.lift-row small { display: block; font-size: 12.5px; color: var(--muted); }
.lift-row.active { border-color: var(--gold); }
.lift-row.active .num { background: var(--gold-grad); color: var(--plum-900); }

.contact-panel, .ending-card { width: min(420px, 100%); text-align: center; }
.c-logo { display: flex; justify-content: center; margin: 2px 0 14px; }
.c-logo img { height: 54px; width: auto; }
.contact-panel .kick, .ending-card .kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-dark); }
.contact-panel .kick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-panel h3, .ending-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--plum-800); }
.c-lead { margin: 0 auto 18px; max-width: 340px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cta-list { display: grid; gap: 9px; text-align: left; }
.cta {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, background .15s, transform .15s;
}
.cta:hover { border-color: var(--gold); background: var(--gold-pale); }
.cta svg { width: 40px; height: 40px; padding: 10px; border-radius: 11px; background: var(--gold-pale); fill: none; stroke: var(--plum-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta small { display: block; font-size: 11.5px; color: var(--muted); }
.cta b { display: block; font-size: 15px; font-weight: 700; word-break: break-word; }
.cta.main { background: linear-gradient(135deg, var(--plum-700), var(--plum-900)); color: var(--text); border-color: transparent; box-shadow: 0 10px 24px rgba(42, 4, 39, .3); }
.cta.main:hover { transform: translateY(-1px); }
.cta.main svg { background: var(--gold-grad); stroke: var(--plum-900); }
.cta.main small { color: var(--gold-light); }
.cta.main b { font-size: 19px; letter-spacing: .5px; }
.ending .again { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--plum-700); font-weight: 600; cursor: pointer; text-decoration: none; font-size: 14px; margin-left: 4px; margin-right: 4px; }
.ending .again:hover { background: var(--gold-pale); }
.ending .again svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hiệu ứng lên/xuống cầu thang: rèm tím mận khép lại, bảng số tầng ---------- */
.elevator { position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.elevator.show { visibility: visible; pointer-events: auto; }
.elevator .doors { position: absolute; inset: 0; display: flex; overflow: hidden; }
.elevator .doors span {
  flex: 1; transform: translateX(-101%); transition: transform .68s cubic-bezier(.62,0,.32,1);
  background: linear-gradient(90deg, var(--plum-950), var(--plum-800) 70%, var(--plum-700)); box-shadow: 6px 0 30px rgba(20,2,18,.5);
  border-right: 1px solid rgba(var(--accent-rgb), .6);
}
.elevator .doors span + span { transform: translateX(101%); border-right: 0; border-left: 1px solid rgba(var(--accent-rgb), .6); background: linear-gradient(90deg, var(--plum-700), var(--plum-800) 30%, var(--plum-950)); box-shadow: -6px 0 30px rgba(20,2,18,.5); }
.elevator.closed .doors span { transform: none; }
.elevator .disp {
  position: relative; display: flex; align-items: center; gap: 20px; padding: 20px 32px; border-radius: 18px;
  background: rgba(31, 2, 29, .7); border: 1px solid rgba(var(--accent-rgb), .55); color: var(--gold); box-shadow: var(--shadow);
  opacity: 0; transform: scale(.94); transition: opacity .25s ease, transform .25s ease;
}
.elevator.closed .disp { opacity: 1; transform: none; transition-delay: .4s; }
.elevator .disp svg { width: 30px; height: 30px; fill: currentColor; }
.elevator .disp .num { text-align: center; }
.elevator .disp .num small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-2); }
.elevator .disp b { display: block; font-family: var(--serif); font-size: 58px; line-height: 1; font-weight: 600; min-width: 64px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.elevator .disp small { display: block; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.elevator .disp .nm { color: #fff; font-family: var(--serif); font-size: 20px; font-weight: 600; }

/* ---------- Bảng thông tin biệt thự ---------- */
.side {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 42; width: min(430px, 100%); overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); color: var(--ink); box-shadow: -10px 0 40px rgba(20,2,18,.35); padding: 26px 26px 40px;
  transform: translateX(105%); transition: transform .3s ease; touch-action: pan-y; user-select: text;
}
.side.open { transform: none; }
.side .s-logo { display: inline-block; margin-bottom: 18px; }
.side .s-logo img { height: 46px; width: auto; display: block; }
.side .kick { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-dark); }
.side h2 { margin: 8px 40px 6px 0; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--plum-800); }
.side .addr { margin: 0 0 18px; display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); }
.side .addr svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--gold-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side .lead { margin: 0 0 20px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 24px; }
.facts div { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(var(--accent-rgb), .35); }
.facts small { display: block; font-size: 11.5px; color: var(--muted); }
.facts b { display: block; margin-top: 3px; font-size: 14.5px; color: var(--plum-800); }
.side h4 { margin: 0 0 12px; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.side ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.side li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.side li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--gold-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23551a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.side .cta-list { margin-bottom: 26px; }
.side .how { display: grid; gap: 10px; margin-bottom: 26px; }
.side .how div { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.side .how i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-pale); color: var(--plum-700); font-style: normal; }
.side .how svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side .foot { padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.side .foot a { color: var(--plum-600); font-weight: 600; text-decoration: none; }

/* ---------- Màn hình mở đầu ---------- */
.intro {
  position: fixed; inset: 0; z-index: 40; display: flex; padding: 24px; overflow-y: auto; touch-action: pan-y;
  background: linear-gradient(100deg, rgba(31, 2, 29, .96) 0%, rgba(31, 2, 29, .86) 34%, rgba(31, 2, 29, .3) 66%, rgba(31, 2, 29, .05) 100%), var(--cover) center / cover no-repeat, var(--plum-950);
  transition: opacity .5s ease, visibility .5s;
}
.intro.out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-card { width: min(580px, 100%); margin: auto auto auto max(0px, calc((100vw - 1200px) / 2)); padding: 8px 8px 8px 16px; animation: rise .7s ease both; }
.intro .logo { display: inline-block; margin-bottom: 34px; }
.intro .logo img { height: 64px; width: auto; display: block; }
.intro .kick { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); }
.intro .kick::before { content: ""; width: 40px; height: 1.5px; background: var(--gold); }
.intro h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(40px, 6vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.3px; color: #fff; }
.intro .sub { margin: 0 0 10px; font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; color: var(--gold-light); letter-spacing: .3px; }
.intro .addr { display: flex; align-items: center; gap: 7px; margin: 0 0 20px; font-size: 14.5px; color: var(--text-2); }
.intro .addr svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro .lead { margin: 0 0 24px; max-width: 520px; font-size: 15.5px; line-height: 1.75; color: rgba(247, 240, 227, .86); }
.intro .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 30px; max-width: 560px; border-top: 1px solid rgba(var(--accent-rgb), .35); border-bottom: 1px solid rgba(var(--accent-rgb), .35); }
.intro .chips span { padding: 12px 12px 12px 0; }
.intro .chips span + span { padding-left: 12px; border-left: 1px solid rgba(var(--accent-rgb), .25); }
.intro .chips small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.intro .chips b { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.35; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.intro .start {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15.5px; font-weight: 700; letter-spacing: .3px; background: var(--gold-grad); color: var(--plum-900);
  box-shadow: 0 14px 32px rgba(var(--accent-rgb), .35); transition: transform .15s, filter .15s;
}
.intro .start:hover { filter: brightness(1.06); transform: translateY(-1px); }
.intro .start svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro .start.ghost { background: rgba(31, 2, 29, .35); color: var(--gold-light); border: 1px solid var(--gold); box-shadow: none; }
.intro .start.ghost svg { fill: currentColor; stroke-width: 1.4; width: 18px; height: 18px; }
.intro .hint { margin: 20px 0 0; font-size: 13.5px; color: var(--text-2); }
.intro .hint a { color: var(--gold-light); font-weight: 700; text-decoration: none; letter-spacing: .4px; }

/* ---------- Màn hình chờ, thông báo ---------- */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--plum-700), var(--plum-950) 70%); transition: opacity .6s ease, visibility .6s; }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }   /* đang mờ dần cũng không chặn cú bấm */
.loader > div { text-align: center; }
.loader .spin { display: block; width: 64px; height: auto; margin: 0 auto; animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.loader .msg { margin-top: 18px; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text); text-align: center; letter-spacing: .3px; }
.loader .bar { width: 140px; height: 2px; margin: 14px auto 0; border-radius: 2px; overflow: hidden; background: rgba(var(--accent-rgb), .2); }
.loader .bar i { display: block; width: 40%; height: 100%; background: var(--gold); animation: slide 1.3s ease-in-out infinite; }
.loader.done .spin, .loader.done .bar i { animation: none; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.toast {
  position: fixed; left: 50%; top: 84px; transform: translate(-50%, -8px); z-index: 60; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; text-align: center; background: var(--plum-900); border: 1px solid var(--panel-line); color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bản đồ nhỏ: toà nhà nhìn nghiêng, các tầng xếp chồng ---------- */
.minimap {
  position: fixed; left: 14px; top: 90px; z-index: 18; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; width: 244px; transition: width .35s ease, opacity .3s ease, transform .3s ease;
}
.minimap.off, .minimap.closed { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.mm-head { display: flex; align-items: center; gap: 7px; padding: 7px 6px 6px 11px; font-size: 12.5px; }
.mm-head .mm-ic { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.mm-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-count { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), .16); color: var(--gold-light); font-size: 11px; font-weight: 700; }
.mm-btn { width: 28px; height: 28px; border: 0; border-radius: 8px; padding: 0; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.mm-btn:hover { background: rgba(var(--accent-rgb), .14); color: var(--gold-light); }
.mm-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-body { position: relative; height: 200px; margin: 0 6px 6px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #fbf7ee, #efe4cd); transition: height .35s ease, opacity .18s ease; }
.mm-body::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--accent-rgb), .12) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .12) 1px, transparent 1px); background-size: 18px 18px; }
.minimap.swap .mm-body { opacity: 0; }
.minimap.big { width: min(480px, calc(100vw - 28px)); }
.minimap.big .mm-body { height: min(520px, calc(100vh - 260px)); }
.mm-svg { position: relative; display: block; overflow: visible; }
.mm-world { transform-origin: 0 0; }
.mm-floor { fill: rgba(255,255,255,.75); stroke: #d8c49a; }
.mm-edge { stroke: rgba(85, 26, 82, .4); stroke-linecap: round; transition: stroke .3s; }
.mm-edge.done { stroke: var(--plum-600); }
.mm-edge-sh { stroke: rgba(20,2,18,.3); stroke-linecap: round; }
.mm-exit { cursor: pointer; }
.mm-exit line, .mm-exit path { stroke: var(--plum-600); stroke-linecap: round; stroke-linejoin: round; }
.mm-node { cursor: pointer; }
.mm-node .hit { fill: transparent; }
.mm-node .dot { fill: #fff; stroke: var(--plum-600); transition: fill .3s; }
.mm-node.visited .dot { fill: var(--gold-light); }
.mm-node:hover .dot { fill: var(--gold); }
.mm-node.next .dot { fill: var(--gold); stroke: #fff; }
.mm-node text { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-linejoin: round; pointer-events: none; }
.mm-node.current text { fill: var(--plum-600); font-weight: 700; }
.mm-me { pointer-events: none; }
.mm-me .me-dot { fill: var(--plum-600); stroke: #fff; }
.mm-me .pulse { fill: rgba(var(--accent-rgb), .35); transform-box: fill-box; transform-origin: center; animation: mmpulse 2.2s ease-out infinite; }
@keyframes mmpulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
/* Mặt bằng từng tầng (maps[].plan): kem – vàng – tím, ngoài nhà (đường, sân, vườn) khác hẳn trong nhà */
.mm-svg.plan .mm-edge { stroke: rgba(85, 26, 82, .5); }
.mm-svg.plan .mm-edge.done { stroke: var(--plum-600); }
.pl-out { stroke: none; }
.pl-out.k-neighbor { fill: #ebe4d8; }
.pl-hatch { stroke: rgba(110, 80, 100, .18); }
.pl-out.k-sidewalk { fill: #e2d8c6; }
.pl-out.k-road { fill: #c9c3bb; }
.pl-lane { stroke: rgba(255, 255, 255, .9); }
.pl-out.k-yard { fill: #efe5d0; }
.pl-foot { fill: #fffaf0; }
.pl-floor { fill: #fffaf0; }
.pl-wall { stroke: #8b6c86; }
.pl-outer { fill: none; stroke: var(--plum-700); stroke-linejoin: round; }
.k-living .pl-floor { fill: #f9ecd2; }
.k-kitchen .pl-floor { fill: #f6efe3; }
.k-bedroom .pl-floor { fill: #f9ecd2; }
.k-bath .pl-floor { fill: #e4eef3; }
.k-lobby .pl-floor, .k-hall .pl-floor { fill: #fbf6ec; }
.k-stairs .pl-floor { fill: #efe6d6; }
.k-balcony .pl-floor { fill: #ece3d2; }
.k-terrace .pl-floor { fill: #e9dcc3; }
.k-steps .pl-floor { fill: #b9b2ad; }
.k-lawn .pl-floor { fill: #cfe3b5; }
.pl-step { stroke: rgba(66, 23, 67, .45); }
.pl-arrow { fill: none; stroke: rgba(66, 23, 67, .6); stroke-linecap: round; stroke-linejoin: round; }
.pl-click { cursor: pointer; }
.pl-click:hover .pl-floor { fill: var(--gold-light); }
.pl-furn { fill: #fff; stroke: #b9a3b4; }
.pl-pillow { fill: #f1e2c4; stroke: #c9b08a; }
.pl-chair { fill: #d9c9d5; stroke: none; }
.pl-glass-box { fill: rgba(140, 190, 215, .35); stroke: #7cb5d0; }
.pl-planter { fill: #a9cf8a; stroke: #7da561; }
.pl-tree { fill: rgba(122, 170, 92, .55); stroke: rgba(80, 130, 60, .7); }
.pl-tree-hi { fill: rgba(190, 225, 160, .45); pointer-events: none; }
.pl-plant { fill: #a9cf8a; stroke: #7da561; }
.pl-rock { fill: #cfc8bb; stroke: #ada594; }
.pl-win-bg, .pl-glass-bg { stroke: #fff; }
.pl-win { stroke: #6aa7c9; }
.pl-glass { stroke: #7cc4e8; }
.pl-rail { stroke: var(--plum-700); stroke-linecap: round; }
.pl-fence { stroke: #8f7f72; stroke-linecap: round; }
.pl-div { stroke: rgba(110, 80, 100, .55); }
.pl-door { stroke: #fffaf0; }
.pl-label { fill: #7a5f75; font-weight: 700; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: rgba(255, 250, 240, .85); stroke-width: 0; }
.pl-label.out { fill: #8c7d70; }
.pl-label.k-road { fill: #fff; }
.pl-label.k-lawn { fill: #4f7a37; }
.pl-label.note { fill: var(--plum-600); }
.iso-plate { fill: rgba(255,255,255,.42); stroke: #d6c08e; stroke-linejoin: round; transition: fill .45s, stroke .45s; }
.iso-side { fill: rgba(207, 173, 104, .35); transition: fill .45s; }
.iso-pillar { stroke: #d6c08e; }
.iso-level.cur .iso-plate { fill: rgba(255, 250, 238, .95); stroke: var(--gold-dark); }
.iso-level.cur .iso-side { fill: var(--gold); }
.iso-tag { cursor: pointer; }
.iso-tag rect { fill: #fff; stroke: #d6c08e; transition: fill .3s, stroke .3s; }
.iso-tag text { fill: var(--plum-700); font-weight: 700; transition: fill .3s; }
.iso-tag.cur rect { fill: var(--plum-700); stroke: var(--plum-700); }
.iso-tag.cur text { fill: var(--gold-light); }
.iso-tag:hover rect { stroke: var(--plum-600); }
.mm-svg.iso .mm-edge { stroke: rgba(85, 26, 82, .45); transition: stroke .3s, opacity .45s; }
.mm-svg.iso .mm-edge.done { stroke: var(--plum-600); }
.mm-svg.iso .mm-edge.up { stroke: var(--gold-dark); }
.mm-svg.iso .mm-node { transition: opacity .45s; }
.mm-svg.iso .dim { opacity: .3; }
.mm-route { pointer-events: none; }

.mm-open {
  position: fixed; left: 14px; top: 90px; z-index: 18; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: var(--gold); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mm-open.show { opacity: 1; pointer-events: auto; }
.mm-open svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Điện thoại: phóng to bằng 2 ngón, không cần nút +/− */
@media (pointer: coarse) {
  #btnZoomIn, #btnZoomOut { display: none; }
}
@media (max-width: 720px) {
  .minimap { left: 8px; top: 74px; width: 168px; }
  .mm-head { padding: 5px 4px 4px 9px; font-size: 12px; }
  .mm-count { display: none; }
  .mm-body { height: 142px; margin: 0 4px 4px; }
  .minimap.big { width: calc(100vw - 16px); }
  .minimap.big .mm-body { height: min(440px, calc(100vh - 230px)); }
  .mm-open { left: 8px; top: 74px; }
  .toast { top: auto; bottom: 86px; }
  .topbar { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .topbar .spacer { display: none; }
  .brand { padding: 5px 12px 5px 6px; gap: 8px; flex: 1; max-width: none; }
  .brand .mark { width: 30px; height: 46px; }
  .brand .mark img { width: 28px; }
  .brand .t { padding-left: 9px; }
  .brand h1 { font-size: 15.5px; }
  .brand p { font-size: 11.5px; }
  .actions { gap: 6px; }
  .pill-btn { width: 44px; height: 46px; padding: 0; justify-content: center; }
  .pill-btn span { display: none; }
  .dock { width: calc(100% - 16px); bottom: max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  .strip { gap: 10px; padding: 8px 10px; }
  .grp + .grp { padding-left: 10px; }
  .stop { width: 78px; }
  .stop .ph { width: 78px; height: 50px; }
  .stop .nm { font-size: 11px; }
  .toolbar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .btn { min-width: 40px; height: 40px; }
  .btn.tour-btn { padding: 0 11px 0 8px; margin: 0 2px; }
  .floors { right: 8px; padding: 7px 4px; gap: 4px; top: 46%; }
  .floor-btn { width: 33px; height: 33px; font-size: 14px; }
  .caption { left: 16px; bottom: 132px; max-width: calc(100vw - 70px); }
  .caption b { font-size: 22px; }
  .caption small { font-size: 10.5px; letter-spacing: 2px; }
  .info-card { top: auto; bottom: 132px; right: 8px; left: 8px; width: auto; }
  .intro { padding: 18px; background: linear-gradient(180deg, rgba(31,2,29,.15) 0%, rgba(31,2,29,.35) 22%, rgba(31,2,29,.94) 46%, var(--plum-950) 100%), var(--cover) 42% top / auto 56% no-repeat, var(--plum-950); }
  .intro-card { margin: auto 0 0; padding: 0; }
  .intro .logo { margin-bottom: 20px; }
  .intro .logo img { height: 48px; }
  .intro .lead { display: none; }   /* mô tả đầy đủ có trong bảng "Thông tin"; màn nhỏ ưu tiên ảnh bìa + nút bắt đầu */
  .intro .kick { font-size: 10.5px; letter-spacing: 1.6px; gap: 8px; margin-bottom: 12px; }
  .intro .kick::before { width: 24px; }
  .intro .addr { margin-bottom: 16px; }
  .intro .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; }
  .intro .chips span:nth-child(3) { padding-left: 0; border-left: 0; }
  .intro .chips span:nth-child(n+3) { border-top: 1px solid rgba(var(--accent-rgb), .2); }
  .intro h2 { font-size: 40px; }
  .intro-actions { flex-direction: column; }
  .intro .start { justify-content: center; padding: 15px 22px; }
  .hs-label .pill { font-size: 12.5px; padding: 6px 12px; }
}
@media (max-height: 700px) and (min-width: 721px) {
  .intro .lead { display: none; }
  .intro .logo { margin-bottom: 20px; }
}
@media (max-height: 560px) {
  .intro .chips { display: none; }
}