/* 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 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 nút mép phải + bánh răng: KHÔNG CÒN LÀM Ở ĐÂY ───────────────── Trước 2026-08-19 chỗ này có một luật `:has()` ghim `Container_97CDE6A9` (cột 2 nút đổi cảnh, bản xuất ghi cứng `top: 360`) về `top: 66px !important`. Nó chạy — nhưng chỉ đúng ở một khổ màn, và lại là ĐÚNG CÁI ANTI-PATTERN đã phải bỏ ba lần cho nút bánh răng: CSS đánh nhau với inline style do player tự sinh từ THUỘC TÍNH component. Hai chỗ hỏng đo được: · số 66 và ngưỡng `max-height: 500` là hằng số — máy có khung nhìn ngang thấp hơn (thanh địa chỉ hiện, máy 16:9) vẫn khuất nút, mà bánh răng thì CSS không với tới được (nó neo theo đáy một khung nền có sàn 370px, không phải theo mép màn); · chuỗi `:has()` bám vào tên tệp ảnh `Button_A35DE207…` — cảnh nào skin đổi ảnh nút là luật lặng lẽ không khớp gì nữa. Nay cả ba cụm (bánh răng · cột đổi cảnh · thuyết minh) do js/tour-chrome.js `fitChrome()` đặt bằng THUỘC TÍNH component, tính từ `innerHeight` thật → tự vừa mọi khổ máy, và vùng bấm / thứ tự chồng lớp / cột con đi theo. Đừng thêm lại luật CSS nào cho chúng: `!important` ở đây sẽ lặng lẽ thắng JS. */ /* ── 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 ý · Nhận mã giảm giá — nút thứ 4 thêm 2026-08-11, nút thứ 5 thêm 2026-08-26; ở 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, #st-share-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, #st-share-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, #st-share-btn::before, #st-share-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, #st-share-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; } #fp-fabs > :nth-child(5) { --fab-d: 2s; } @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, #st-share-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; } /* ══ ĐIỆN THOẠI (≤640px): CỤM NÚT CHỈ CÒN BIỂU TƯỢNG + NÚT THU GỌN ═══════ (yêu cầu 2026-08-21) Ba viên thuốc có nhãn rộng 353px ở khổ 390 — gần trọn bề ngang màn, che mất cảnh 360°. Nay: [‹] [Chỉ đường] [Điểm đến] [Khám phá] — MỘT hàng ngang: nút nhỏ 34px để thu/mở đứng đầu, ba nút tròn 44px chỉ-biểu-tượng bay ngang ra từ nó cụm MẶC ĐỊNH LÀ THU GỌN (chốt với chủ dự án): vào trang chỉ thấy nút nhỏ, và logo góc trên-trái vẫn hiện. Bấm → 3 nút BAY NGANG ra từ chính nút nhỏ, lệch nhau 70ms, đường cong vọt quá rồi lùi lại (nảy như nút trong game); bấm nữa → bay ngược về theo thứ tự đảo. Class `body.st-fabs-open` do js/floorplan.js đặt; js/site-menu.css nghe CÙNG class đó để giấu logo lúc cụm đang mở. Nút nhỏ tự phát vòng sóng lúc đang thu — mặc định thu gọn thì phải có gì đó nói cho khách biết nó bấm được. BỐ CỤC BẰNG GRID, không phải flex-wrap: ở khổ này nút "Chia sẻ trải nghiệm" là `position: fixed` (js/feedback.css kéo nó lên hàng trên-phải) nên nó rơi khỏi luồng — grid tự bỏ qua, ba nút còn lại vẫn đúng 3 cột. Ba nút GIỮ NGUYÊN CHỖ trong hàng kể cả khi thu gọn (chỉ trong suốt): `--fabs-h` mà js/floorplan.js công bố chính là số js/tour-chrome.js dùng để nâng nút bánh răng của skin lên khỏi cụm — cho nó co giãn theo mỗi cú bấm thì bánh răng nhảy lên nhảy xuống theo. (Hàng ngang nên `--fabs-h` = 44px, đúng như trước đợt này.) */ #fp-fabs-toggle { display: none; /* chỉ tồn tại ở khổ điện thoại */ } @media (max-width: 640px) { /* MỘT HÀNG NGANG: [thu gọn][Chỉ đường][Điểm đến][Khám phá] — nút thu gọn đứng ĐẦU hàng (order:-1, không phải đổi thứ tự trong HTML) nên nó không nhúc nhích khi cụm mở/thu, và ba nút kia bay ngang RA TỪ nó rồi thu lại vào nó. Base `#fp-fabs` đã là flex + gap 10 nên ở đây chỉ cần canh trục dọc: nút thu gọn 34px thấp hơn ba nút 44px. */ #fp-fabs { align-items: center; } #fp-fabs-toggle { order: -1; } /* Viên thuốc → viên tròn. Nhãn ẨN chứ không xoá khỏi DOM: aria-label vẫn còn cho trình đọc màn hình, và xoay ngang (>640px) là nhãn hiện lại, không cần JS. */ #fp-launch, #fp-list-launch, #welcome-launch, #st-share-btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; gap: 0; /* THU GỌN: lùi về đúng TÂM nút thu gọn + co lại + mờ đi → trông như chui vào trong nó. Số học: nút thu gọn rộng 34 + khe 10 → nút thứ i bắt đầu ở 44 + i×54, tâm ở 66 + i×54; tâm nút thu gọn ở 17 → lùi 49 + i×54. `visibility` hoãn tới khi bay xong, nếu không nút biến mất giữa đường (và nó cũng là thứ cắt Tab). */ transform: translateX(calc(-49px - var(--i, 0) * 54px)) scale(.34); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s cubic-bezier(.5, -.3, .7, .45) var(--d-out, 0ms), opacity .18s ease var(--d-out, 0ms), visibility 0s linear calc(var(--d-out, 0ms) + .3s); } #fp-launch span, #fp-list-launch span, #welcome-launch span, #st-share-btn span { display: none; } #fp-launch svg, #fp-list-launch svg, #welcome-launch svg, #st-share-btn svg { width: 20px; height: 20px; } /* Thứ tự bay: mở thì từ trái sang phải (nút gần nút nhỏ nhất đi trước), thu thì đảo lại — mắt đọc ra một đợt sóng chứ không phải ba nút nhảy cùng lúc. */ #fp-launch { --i: 0; --d-in: 0ms; --d-out: 210ms; } #fp-list-launch { --i: 1; --d-in: 70ms; --d-out: 140ms; } #welcome-launch { --i: 2; --d-in: 140ms; --d-out: 70ms; } #st-share-btn { --i: 3; --d-in: 210ms; --d-out: 0ms; } body.st-fabs-open #fp-launch, body.st-fabs-open #fp-list-launch, body.st-fabs-open #welcome-launch, body.st-fabs-open #st-share-btn { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .38s cubic-bezier(.34, 1.56, .5, 1) var(--d-in, 0ms), opacity .2s ease var(--d-in, 0ms), visibility 0s linear var(--d-in, 0ms); } /* Nút thu/mở — đứng ĐẦU hàng, đúng chỗ 3 nút kia chui vào */ #fp-fabs-toggle { box-sizing: border-box; position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: var(--fab-bw) solid var(--fab-line); border-radius: 50%; background: #fff; color: var(--fab-line); cursor: pointer; box-shadow: 0 2px 10px rgba(15, 23, 42, .28); } #fp-fabs-toggle:hover { background: #f1f5f9; } #fp-fabs-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; transition: transform .3s cubic-bezier(.34, 1.45, .5, 1); } /* Mũi tên quay 180°: thu gọn thì chỉ SANG PHẢI (bấm là bung ra), đang mở thì chỉ SANG TRÁI (bấm là thu về) — hướng mũi tên luôn là hướng cú bấm sẽ đẩy. */ body.st-fabs-open #fp-fabs-toggle svg { transform: rotate(180deg); } /* Vòng sóng CHỈ khi đang thu gọn (dùng lại keyframes của cụm nút). Đang mở thì 3 nút đã ra hết, không cần gọi mắt nữa. */ #fp-fabs-toggle::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; } body.st-fabs-open #fp-fabs-toggle::after { animation: none; } } @media (max-width: 640px) and (prefers-reduced-motion: reduce) { #fp-launch, #fp-list-launch, #welcome-launch, body.st-fabs-open #fp-launch, body.st-fabs-open #fp-list-launch, body.st-fabs-open #welcome-launch, #fp-fabs-toggle svg { transition-duration: .01ms; transition-delay: 0ms; } #fp-fabs-toggle::after { animation: none; } } /* ── NÚT × DÙNG CHUNG CHO CẢ SITE (.st-x) ───────────────────────────── Trước bản này mỗi trang một dáng × (tròn tối / bo góc xám / trong suốt trên nền xanh) — cùng một cử chỉ "đóng" mà khách phải học lại ở từng màn. Canon nay là .st-p2-close của TRANG CHÀO (welcome/css/wall.css): tròn 46px nền xám nhạt, nét × mảnh, hover đậm màu + xoay 90°. ⚠ Dấu × VẼ BẰNG SVG, không dùng ký tự "×" (U+00D7): glyph đó canh theo trục toán học nên nằm CAO hơn tâm dòng, flex/grid căn giữa vẫn lệch. Khai ở đây vì floorplan.css là tệp CSS mà CẢ 3 trang đều nạp, và nạp TRƯỚC combo.css/ticket-modal.css nên hai tệp đó ghi đè được cỡ nút. Dùng bởi: #fp-close · nút × bảng "Điểm đến" (js/floorplan.dc.html) · #cb-exit (combo/combo.css) · .st-tk-x (js/ticket-modal.css). KHÔNG khai bóng ở đây — chỉ nút NỔI TRÊN ẢNH mới cần, tự khai lấy. */ .st-x { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; background: #f1f5f9; color: #475569; cursor: pointer; text-decoration: none; transition: background .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1), transform .14s cubic-bezier(.4, 0, .2, 1); } .st-x svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .st-x:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .st-x { transition: none; } .st-x:hover { transform: none; } } /* Dáng nút lấy từ .st-x; ở đây chỉ còn CHỖ ĐỨNG + bóng (nút nổi trên ảnh bản đồ/360° nên nền xám nhạt cần một đường tách). */ #fp-close { position: fixed; /* 46px + top 14+SAT → tâm 37+SAT, cùng baseline search bar mobile (top 12+SAT, cao 50) */ top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 10002; box-shadow: 0 2px 10px rgba(15, 23, 42, .28); } /* 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; } /* MOBILE — khách đang gõ: bottom-sheet bung hết chỗ trống phía trên bàn phím (fp-sheet-kb do component gắn khi state.kbFocus). Mép trên sheet lúc này ở ~y10 nên #fp-close (top 15) rơi đúng lên hàng tiêu đề/ô tìm. Sheet đã có nút × riêng + grip kéo xuống, nên giấu nút toàn cục; rời ô nhập là nó hiện lại. #st-menu/#st-lang cũng nằm ở hàng đó. */ body:has(.fp-sheet-kb) #fp-close, body:has(.fp-sheet-kb) #st-menu, body:has(.fp-sheet-kb) #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; } }