/* floorplan.css — overlay bản đồ chỉ đường cho index.htm (tách từ inline).
   SCOPE vào #fp-overlay để KHÔNG phá layout #viewer của tour. */

/* DVN Gustavo — font THƯƠNG HIỆU của khách (welcome/css/fonts.css đã dùng cho trang chào).
   floorplan.dc.html khai 'Be Vietnam Pro'/'Baloo 2' khắp nơi nhưng KHÔNG trang nào nạp hai
   font đó → toàn bộ UI bản đồ vẫn rơi về font hệ thống. Nạp lại đúng file .woff2 có sẵn
   trong repo (không phụ thuộc CDN) để danh sách điểm đến ăn khớp với trang chào.
   url() giải theo VỊ TRÍ FILE CSS (/js/), KHÔNG theo <base href> của trang → dùng chung
   được cho cả index.htm, combo/index.html lẫn map.html. */
@font-face {
  font-family: 'DVN Gustavo';
  src: url('../welcome/assets/font/dvn-gustavo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DVN Gustavo';
  src: url('../welcome/assets/font/dvn-gustavo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
    /* --- CSS bản đồ: SCOPE vào #fp-overlay để KHÔNG phá layout #viewer của tour.
		   (bỏ html,body{} toàn cục của floor-plan.html; * box-sizing chỉ trong overlay) --- */
    #fp-overlay {
      position: fixed;
      inset: 0;
      z-index: 10001;
      display: none;
      font-family: 'Be Vietnam Pro', system-ui, sans-serif;
      color: #1e293b;
      -webkit-font-smoothing: antialiased;
    }

    #fp-overlay.open {
      display: block;
    }

    /* VR360 + bản đồ chia đôi (mobile): #viewer chiếm NỬA TRÊN, map (overlay) nửa dưới.
       Dùng !important vì 3DVista ghi đè inline style của #viewer khi resize — class/!important
       giữ vững vị trí + z-index (trên #st-app z:10001) nên nửa trên không lộ nền map. */
    #viewer.fp-vrsplit {
      top: 0 !important;
      bottom: auto !important;
      height: var(--fp-split, 50svh) !important;
      z-index: 10005 !important;
    }

    /* COMBO: "Mở rộng 360°" — VR phóng toàn màn hình TẠM trong lúc split (class do
       window.fpVrFull thêm/gỡ; index.htm không bao giờ gán nên bất biến). z:10008 trên
       divider (10006) nhưng DƯỚI chrome trang combo (10010+) để buy bar/journey bar còn dùng được. */
    #viewer.fp-vrsplit.fp-vrfull {
      height: 100svh !important;
      z-index: 10008 !important;
    }

    /* --- Cụm điều khiển tỉ lệ VR/bản đồ khi chia đôi (floorplan.js tạo Ở BODY) ---
       PHẢI ở body, không thể nằm trong template: #fp-overlay có z-index:10001 nên tạo stacking
       context — mọi thứ bên trong (kể cả #fp-close z:10002) bị kẹp DƯỚI #viewer (10005 khi chia đôi,
       10008 khi VR toàn màn) và không bao giờ bấm được ở nửa VR.
       3 nấc của CÙNG một chiều (VR chiếm bao nhiêu màn hình) + nút "Về tour" tách riêng, gom hết về
       mép TRÁI ngay dưới đường ngăn; VR toàn màn thì cụm trượt lên góc trái màn hình. */
    #fp-split-ctl {
      position: fixed;
      top: calc(var(--fp-split, 50svh) + 14px);
      left: 12px;
      z-index: 10009;
      display: none;
      align-items: center;
      gap: 8px;
      font: 800 13px/1 'Be Vietnam Pro', system-ui, sans-serif;
      transition: top .18s ease;
    }

    #fp-split-ctl.on {
      display: flex;
    }

    #fp-split-ctl.vrfull {
      top: calc(14px + env(safe-area-inset-top, 0px));
    }

    /* VR toàn màn trên máy hẹp: cụm ngồi ngay hàng chrome của 3DVista (chip ngôn ngữ + chia sẻ ở góc
       phải) — xếp DỌC để bề ngang còn ~160px, không đè lên chúng. Ở chia đôi thì không cần: cụm nằm
       trong nửa bản đồ, không có chrome tour nào ở đó. */
    @media (max-width: 879px) {
      #fp-split-ctl.vrfull {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }

    #fp-split-ctl .seg {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1.5px solid rgba(255, 255, 255, .9);
      background: rgba(15, 23, 42, .92);
      border-radius: 24px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    }

    #fp-split-ctl .seg button {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 11px;
      border: none;
      border-radius: 20px;
      background: transparent;
      color: rgba(255, 255, 255, .72);
      font: inherit;
      cursor: pointer;
    }

    #fp-split-ctl .seg button.on {
      background: #fff;
      color: #0f172a;
    }

    /* mobile: chỉ nấc ĐANG BẬT hiện chữ → cụm gọn, không che pin ở nửa bản đồ */
    #fp-split-ctl .seg button span {
      display: none;
    }

    #fp-split-ctl .seg button.on span {
      display: inline;
    }

    /* desktop (cùng ngưỡng 880px component dùng để bật layout mobile): hiện nhãn cả 3 nấc */
    @media (min-width: 880px) {
      #fp-split-ctl .seg button span {
        display: inline;
      }
    }

    #fp-split-back {
      display: none;
      align-items: center;
      gap: 7px;
      min-height: 44px;
      padding: 0 15px;
      border: 1.5px solid rgba(255, 255, 255, .9);
      border-radius: 24px;
      background: rgba(15, 23, 42, .92);
      color: #fff;
      font: inherit;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    }

    #fp-split-back.on {
      display: flex;
    }

    /* Đường ngăn KÉO ĐƯỢC giữa VR (trên) và bản đồ (dưới) khi chia đôi — Ở BODY (z trên #viewer). */
    #fp-split-divider {
      position: fixed;
      left: 0;
      right: 0;
      top: var(--fp-split, 50svh);
      transform: translateY(-50%);
      height: 28px;
      z-index: 10006;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: row-resize;
      touch-action: none;
    }

    #fp-split-divider.on {
      display: flex;
    }

    #fp-split-divider .grip {
      width: 56px;
      height: 6px;
      border-radius: 3px;
      background: rgba(15, 23, 42, .6);
      border: 1.5px solid rgba(255, 255, 255, .9);
      box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    }

    #fp-overlay * {
      box-sizing: border-box;
    }

    #fp-overlay ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    #fp-overlay ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 8px;
    }

    #fp-overlay ::-webkit-scrollbar-track {
      background: transparent;
    }

    @keyframes stpulse {
      0% {
        transform: scale(1);
        opacity: .55;
      }

      70% {
        transform: scale(2.6);
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes stfade {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes stpop {
      from {
        opacity: 0;
        transform: translate(-50%, -105%) scale(.9);
      }

      to {
        opacity: 1;
        transform: translate(-50%, -115%) scale(1);
      }
    }

    @keyframes stpopfade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* POI marker = nút động: tô đặc màu theo loại (số thứ tự vẽ trong ruột thay vì đục lỗ lộ map.png); viền trắng; hover/chọn → viền + quầng sáng màu theo loại */
    /* Dạng VIÊN THUỐC: min-width = height nên nhãn 1-2 ký tự vẫn là hình tròn hoàn hảo, chỉ 9 nhãn
       3 ký tự (15A/22B/101/…) giãn ngang thay vì tràn ra ngoài. Cỡ thật + ĐỘ DÀY VIỀN do pinStyle
       inline quyết định (khối PIN trong js/floorplan.dc.html — chỉnh sống bằng window.fpPin). */
    .poi-pin {
      position: relative;
      min-width: 20px;
      width: auto;
      height: 20px;
      padding: 0 4px;
      border-radius: 999px;
      background: var(--poi-color);
      border: 1px solid rgba(255, 255, 255, .85);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, min-width .16s ease, height .16s ease, padding .16s ease;
    }

    /* pin thu gọn chỉ còn ~7px → nới vùng chạm mà KHÔNG ảnh hưởng layout/bề rộng viên thuốc */
    .poi-pin::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 999px;
    }

    /* số mờ dần khi pin bị thu gọn / hiện lại lúc zoom vào, thay vì bật tắt đột ngột */
    .poi-pin>span {
      transition: opacity .16s ease;
    }

    .poi-pin:hover {
      transform: scale(1.22);
      border-color: var(--poi-color);
      box-shadow: 0 0 0 4px var(--poi-glow), 0 3px 10px rgba(0, 0, 0, .35);
    }

    .poi-pin.sel {
      min-width: 23px;
      height: 23px;
      border-color: var(--poi-color);
      box-shadow: 0 0 0 3.5px var(--poi-glow), 0 2px 8px rgba(0, 0, 0, .3);
    }

    /* --- nút nổi mở bản đồ + nút đóng overlay (giữ vị trí/giao diện nút cũ) --- */
    /* cụm 2 pill: flex tự giãn theo label (bỏ hard-pin left:150px) + safe-area đáy (home indicator) */
    #fp-fabs {
      position: fixed;
      left: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      z-index: 10000;
      display: flex;
      gap: 10px;
    }

    /* MOBILE DỌC: nút "Cài đặt" (bánh răng) của skin 3DVista nằm đúng chỗ cụm #fp-fabs.
       Việc dời nó KHÔNG làm bằng CSS nữa — xem js/tour-chrome.js (GEAR_SET/COL_SET).
       Ba đời luật CSS trước đều sai và đều phải bỏ:
         · dịch lớp VẼ (`pointer-events:none`) → hình đi, vùng bấm ở lại;
         · dịch lớp NHẬN BẤM → bấm được nhưng cột mở ra vẫn ở chỗ cũ, đè lên nút;
         · dịch thêm cột + `z-index !important` → chồng chất luật để chống lại inline
           style của 3DVista, mà vẫn không dùng được.
       Gốc rễ: vị trí do THUỘC TÍNH của component quyết định (`bottom`), 3DVista đọc nó
       rồi tự sinh inline style. Đặt đúng thuộc tính ấy thì nó tự vẽ lại — vùng bấm,
       thứ tự chồng lớp, cột con đều theo. Chống bằng CSS là chữa ngọn. */

    /* MOBILE NGANG: cụm 3 pill dời hẳn sang CẠNH NÚT CHAT (#st-ai, dưới-phải).
       Lý do: ở khổ ngang, sidebar của skin 3DVista chiếm 43.5% bề ngang bên TRÁI và
       cao hết màn (đo từ script_mobile.js: Container_AF9F7D58 43.511%×100%, danh sách
       bên trong Container_AF9F4D58 cao cứng 390px) → cụm nút ở góc dưới-trái nằm đè
       lên chính danh sách đó, ĐỒNG THỜI che nút "Cài đặt" (bánh răng) của skin: thanh
       Container_EA0EA0B3_mobile là bar 100%×40, bottom 5, paddingLeft 10 → bánh răng ở
       x10–50, y(H-45…H-5), trùng khít ô của pill "Chỉ đường" (left 16, bottom 16).
       Dời cụm sang phải là trả lại góc dưới-trái cho bánh răng — không cần transform
       nào cho nút đó (khác mobile DỌC ở trên, nơi cụm nút vẫn ở lại bên trái nên bánh
       răng buộc phải nhường chỗ bằng cách nâng lên).

       right 84px = 16 (lề nút micro) + 56 (bề ngang micro) + 12 (khe). Cố ý để mép
       phải cụm nút = W-84 < W-72: hàm layout() trong js/ai-guide.js chỉ nâng nút micro
       khi cụm vươn tới W-72, nên nút micro giữ nguyên bottom 16 và hai bên đứng CẠNH
       nhau thay vì chồng lên nhau.
       bottom 22px = canh TÂM pill (cao 44) trùng tâm nút micro (cao 56, bottom 16).
       nowrap + max-width:none: huỷ luật xuống dòng của js/welcome.css (@max-width 480px)
       — ở khổ ngang cụm nút phải nằm gọn MỘT hàng ngang tầm nút micro. Ghi `body #fp-fabs`
       để thắng luật đó về độ ưu tiên, vì welcome.css nạp SAU floorplan.css. */
    @media (max-height: 500px) and (orientation: landscape) {
      body #fp-fabs {
        left: auto;
        right: calc(84px + env(safe-area-inset-right, 0px));
        bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        flex-wrap: nowrap;
        max-width: none;
      }

      /* ── Cụm 2 nút "trực thăng / vị trí" ở cột phải: KÉO LÊN ĐẦU CỘT ───────
         Container_97CDE6A9 để CỨNG `top: 360px` (px, không phải %) mà khổ ngang chỉ
         cao 390 → khối 45×100 chạy tới y460: nút trên bị cắt một nửa, nút dưới (y414)
         mất hẳn khỏi màn. Đo thật 844×390 và 667×375 đều y hệt vì 360 là hằng số.
         Không hạ xuống đáy được: dải y290–390 mép phải đã là chỗ của nút micro
         (#st-ai [772,318 56×56]) và cụm pill. Trên cột thì y66–166 trống — dưới
         #st-lang/#st-menu (kết thúc y59) và trên nút sao (top 200) / nút loa (top 250),
         nên đưa lên đó là vừa đủ 3 nhóm mà không nhóm nào chạm nhau.
         66px là số CỐ ĐỊNH nhưng an toàn cho mọi khổ ngang: media query đã chặn
         max-height 500 nên trần cột luôn nằm ở y59. */
      div:has(> [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > img[src*="Button_A35DE207_B7F3_C079_41CD_E23C405AC2C3"]) {
        top: 66px !important;
      }

      /* ── Sidebar (menu THAM QUAN / ẨM THỰC / …): THU NHỎ + HẾT BỊ CẮT ──────
         Container_AF9F7D58 rộng 43.511% và bọc Container_AF9F4D58 cao CỨNG 390px.
         Ở khổ ngang: 844×390 → tấm menu 367×310 (chiếm gần nửa bề ngang), và lớp
         [content] của nó `overflow:hidden` với clientHeight 310 < scrollHeight 390
         → cắt cụt đúng giữa dòng "VỊ TRÍ", dòng "LIÊN HỆ" mất hẳn.
         KHÔNG ép `width` được: 3DVista ghi width/left/top px THẲNG vào style của
         TỪNG component con, nên bóp thẻ cha chỉ làm con tràn ra ngoài. `scale` là
         cách duy nhất giữ nguyên bố cục bên trong → 367×310 còn 264×223 (đo thật).
         Đồng thời trả lớp [overShadow]/[content] về đúng 390px chiều cao THẬT của
         danh sách: sau khi scale .72 chỉ còn 281px nên vừa khít màn 390 — nhờ đó
         hiện đủ 6 mục, không còn dòng cụt.
         Chuỗi selector phải ghi ĐỦ ĐỘ SÂU (5 nấc `[overShadow]>[content]>div>div`)
         vì 3DVista lồng component theo đúng khuôn đó; viết lỏng thì mọi tổ tiên
         cũng khớp và transform sẽ CỘNG DỒN. Đã đếm bằng CDP: đúng 1 phần tử khớp. */
      div:has(> [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > img[src*="Image_EECCA38F"]) {
        transform-origin: 0 0 !important;
        transform: translate(8px, 6px) scale(.72) !important;
      }

      div:has(> [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > img[src*="Image_EECCA38F"]) > [tdvlayer="overShadow"],
      div:has(> [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > [tdvlayer="overShadow"] > [tdvlayer="content"] > div > div
          > img[src*="Image_EECCA38F"]) > [tdvlayer="overShadow"] > [tdvlayer="content"] {
        height: 390px !important;
      }
    }

    /* ── Kiểu chung của các nút nổi trong #fp-fabs ────────────────────────
       (Chỉ đường · Điểm đến · Khám phá · Góp ý — nút thứ 4 thêm 2026-08-11;
       ở màn ≤480px js/feedback.css kéo riêng nút Góp ý ra góc dưới-phải.)
       2026-08-11: đổi từ "ba viên màu đầy" (xanh lá / xanh dương / vàng, bóng đen
       .35, bo 30, Be Vietnam Pro 600 14px) sang VIÊN TRẮNG, đồng bộ với cụm
       [chia sẻ][ngôn ngữ][menu] ở góc trên-phải — cùng nền, cùng bóng, cùng bo,
       cùng họ font. Trước đó trang có HAI ngôn ngữ thiết kế đánh nhau: góc trên
       một hệ trắng, góc dưới một hệ ba màu rực cùng độ đậm nên mắt không biết
       nhìn đâu trước.
       MÀU KHÔNG MẤT — nó dời vào BIỂU TƯỢNG, đủ để nhận ra từng nút mà không còn
       ba mảng màu tranh nhau. Vị trí giữ nguyên góc dưới-trái (góc dưới-phải để
       dành cho nút Trợ lý AI).
       Họ font giống #st-lang/#st-menu: "DVN - Gustavo" là face của skin (chỉ
       index.htm nạp vr-360/fonts.css), "DVN Gustavo" là bản tự lưu dùng chung cho
       cả 3 trang — xem js/site-menu.css. */
    #fp-fabs {
      --fab-line: #0e6b2e;      /* xanh lá đậm của trang (trùng màu "trang đang xem" ở #st-menu) */
      --fab-bw: 1.5px;          /* độ dày viền */
      --fab-wave: 12px;         /* vòng sóng nở ra bao xa */
      --fab-wave-dur: 3s;
    }

    #fp-launch,
    #fp-list-launch,
    #welcome-launch,
    #st-feedback-btn {
      /* border-box BẮT BUỘC: nút nằm NGOÀI #fp-overlay nên không dính luật
         `#fp-overlay * { box-sizing: border-box }`. Để content-box thì viền cộng
         thêm 3px vào cả bề ngang lẫn chiều cao — nút cao 47px, lệch hẳn với hàng
         nút 44px ở góc trên-phải. */
      box-sizing: border-box;
      position: relative;       /* mốc cho hai vòng sóng ::before/::after */
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 13px;
      border: var(--fab-bw) solid var(--fab-line);
      border-radius: 22px;
      background: #fff;
      color: #0f172a;
      font-family: "DVN - Gustavo", "DVN Gustavo", 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
    }

    #fp-launch:hover,
    #fp-list-launch:hover,
    #welcome-launch:hover,
    #st-feedback-btn:hover {
      background: #f1f5f9;
    }

    /* ── Vòng sóng lan ra ─────────────────────────────────────────────────
       Mỗi nút hai vòng (::before + ::after) lệch nhau nửa chu kỳ, và ba nút lại
       lệch nhau 0.5s (xem :nth-child bên dưới) → đọc ra như MỘT đợt sóng quét
       ngang cụm nút, chứ không phải ba nút nhấp nháy rời rạc.

       Dùng `outline-offset` chứ KHÔNG dùng `transform: scale()`: nút là viên
       thuốc dài ~115×44, scale đều sẽ đẩy mép trái/phải ra xa hơn mép trên/dưới
       rất nhiều — vòng ra hình bầu dục méo. `outline-offset` nở đúng số px như
       nhau ở mọi phía và tự bám `border-radius`.
       `pointer-events: none`: vòng sóng phủ lên nút, không tắt là nó nuốt cú bấm. */
    #fp-launch::before,
    #fp-launch::after,
    #fp-list-launch::before,
    #fp-list-launch::after,
    #welcome-launch::before,
    #welcome-launch::after,
    #st-feedback-btn::before,
    #st-feedback-btn::after {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--fab-bw));
      border-radius: inherit;
      outline: var(--fab-bw) solid transparent;
      pointer-events: none;
      animation: st-fab-wave var(--fab-wave-dur) ease-out infinite;
      animation-delay: var(--fab-d, 0s);
    }

    #fp-launch::after,
    #fp-list-launch::after,
    #welcome-launch::after,
    #st-feedback-btn::after {
      animation-delay: calc(var(--fab-d, 0s) + var(--fab-wave-dur) / 2);
    }

    #fp-fabs > :nth-child(2) { --fab-d: .5s; }
    #fp-fabs > :nth-child(3) { --fab-d: 1s; }
    #fp-fabs > :nth-child(4) { --fab-d: 1.5s; }

    @keyframes st-fab-wave {
      0%   { outline-color: rgba(14, 107, 46, .45); outline-offset: 0; }
      70%  { outline-color: rgba(14, 107, 46, 0); }
      100% { outline-color: rgba(14, 107, 46, 0); outline-offset: var(--fab-wave); }
    }

    /* Máy đặt "giảm chuyển động" thì bỏ hẳn sóng — viền xanh vẫn còn để tách nền. */
    @media (prefers-reduced-motion: reduce) {
      #fp-launch::before, #fp-launch::after,
      #fp-list-launch::before, #fp-list-launch::after,
      #welcome-launch::before, #welcome-launch::after,
      #st-feedback-btn::before, #st-feedback-btn::after {
        animation: none;
      }
    }

    #fp-launch svg,
    #fp-list-launch svg,
    #welcome-launch svg,
    #st-feedback-btn svg {
      width: 18px;
      height: 18px;
      flex: none;
    }

    #fp-launch svg {
      fill: #0e6b2e;
      stroke: none;
    }

    /* nút mở danh sách điểm đến — ngang hàng bên phải nút "Chỉ đường" (trong #fp-fabs) */
    #fp-list-launch svg {
      stroke: #1769ff;
      fill: none;
    }

    #fp-close {
      position: fixed;
      /* 44px + top 15+SAT → tâm 37+SAT, cùng baseline search bar mobile (top 12+SAT, cao 50) */
      top: calc(15px + env(safe-area-inset-top, 0px));
      right: 16px;
      z-index: 10002;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 50%;
      background: rgba(15, 23, 42, .72);
      color: #fff;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }

    #fp-close:hover {
      filter: brightness(1.12);
    }

    /* toast không chặn (thay alert của useMyLocation trong floorplan.dc.html) — body-level,
       z trên mọi chrome (kể cả bar trang combo 10010/10011) */
    #fp-toast {
      position: fixed;
      left: 50%;
      bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%) translateY(8px);
      z-index: 10012;
      max-width: min(86vw, 420px);
      background: rgba(15, 23, 42, .94);
      color: #fff;
      font: 600 13px/1.45 'Be Vietnam Pro', system-ui, sans-serif;
      padding: 11px 16px;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
    }

    #fp-toast.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* --- Danh sách "Điểm đến" (#st-list-sheet trong floorplan.dc.html) ---
       Hàng do template dựng bằng INLINE STYLE nên :hover/:focus của CSS thường thua →
       phải !important. Chỉ áp cho hàng có cảnh 360° ([data-has="1"]); hàng combo đặt
       data-has="0" nên giữ nguyên như cũ. */
    #st-list-sheet .fp-li {
      transition: box-shadow .16s ease, border-color .16s ease, transform .12s ease;
      outline: none;
    }

    /* Hàng là THẺ BO TRÒN màu nhóm → hover nhấc nhẹ + đổ bóng, hợp trang cho trẻ em.
       Inline style của template thắng CSS thường nên phải !important. */
    #st-list-sheet .fp-li[data-has="1"]:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important;
    }

    #st-list-sheet .fp-li[data-has="1"]:active {
      transform: translateY(0) scale(.985);
    }

    #st-list-sheet .fp-li[data-has="1"]:focus-visible {
      box-shadow: 0 0 0 3px rgba(240, 83, 47, .45) !important;
    }

    #st-list-sheet .fp-li {
      transition: transform .16s ease, box-shadow .16s ease;
    }

    /* HAI NÚT TẮT CHỒNG NHAU: trên desktop sheet phủ toàn màn nên nút × của nó trùng ô với
       #fp-close (body-level, z:10002, vẽ đè lên vì #fp-overlay tạo stacking context riêng).
       Sheet mở toàn màn → chỉ giữ nút × của sheet. Mobile không gắn class này. */
    body:has(#st-list-sheet.fp-sheet-full) #fp-close {
      display: none !important;
    }

    /* Cùng lý do: sheet toàn màn che kín trang, nút menu 3 trang + nút ngôn ngữ nổi bên dưới
       chỉ còn là vật cản đè lên hàng chip lọc. Ẩn trong lúc danh sách mở. */
    body:has(#st-list-sheet.fp-sheet-full) #st-menu,
    body:has(#st-list-sheet.fp-sheet-full) #st-lang {
      display: none !important;
    }

    /* ghim nghiêng -45° (inline) → hover phải lặp lại phép xoay, không thì ghim bật thẳng */
    #st-list-sheet .fp-li-go {
      transition: transform .16s ease, color .16s ease;
    }

    #st-list-sheet .fp-li[data-has="1"]:hover .fp-li-go {
      transform: translateX(3px);
      color: #141a24 !important;
    }

    @media (prefers-reduced-motion: reduce) {

      #st-list-sheet .fp-li,
      #st-list-sheet .fp-li-go {
        transition: none;
      }

      #st-list-sheet .fp-li[data-has="1"]:hover,
      #st-list-sheet .fp-li[data-has="1"]:active,
      #st-list-sheet .fp-li[data-has="1"]:hover .fp-li-go {
        transform: none;
      }
    }