/* ============================================================
   tour-chrome.css — giấu nút của TRANG khi panel của skin 3DVista che lên
   (js/tour-chrome.js). Chỉ index.htm nạp tệp này.
   ------------------------------------------------------------
   ⚠ 2026-08-21 — GỠ hai khối từng chiếm gần hết tệp này:
     · `#st-tip` — nhãn tên tự vẽ đặt BÊN TRÁI nút chia sẻ. Chỉ cần thiết vì cụm
       nút chia sẻ xếp DỌC sát mép phải (nhãn gốc của 3DVista đè lên nút ngay
       dưới ở cả hai trạng thái nó cho phép, mà component không công bố thuộc
       tính vị trí nào). Cụm ấy không còn.
     · `#st-share` — nút chia sẻ tự dựng cho bộ skin mobile + luật trượt 108px
       của nó khi `body.st-menu-open` bật.
   Cả hai đi theo yêu cầu "bỏ nút chia sẻ dư ở trên" + "bỏ nút hamburger"; chi
   tiết ở js/tour-chrome.js và js/site-menu.js.
   ============================================================ */

/* ── NÚT CỦA TRANG NẰM DƯỚI PANEL CỦA SKIN ────────────────────────────────
   Class do js/tour-chrome.js đặt lên đúng những nút mà panel đang mở CHE LÊN
   (#fp-fabs · #st-feedback-btn · #st-menu · #st-lang · #st-logo · #st-ai). Panel
   nào chỉ chiếm nửa màn (bộ desktop) thì các nút ngoài vùng ấy vẫn dùng được.

   Vì sao không hạ z-index cho xong: panel nằm trong #viewer, mà #viewer có
   `z-index:1` nên tạo STACKING CONTEXT — mọi thứ bên trong bị kẹp dưới 1, không
   có giá trị nào xếp nút của trang vào giữa nền tour và panel được. Xuống dưới
   #viewer thì canvas 360° phủ kín, nút mất hút. Nên: che đúng nút bị che.

   ⚠ `visibility`, KHÔNG phải `display:none`. Phép so chồng lấn bên JS đọc
   `getBoundingClientRect()` của chính nút; `display:none` cho hộp 0×0 → hết
   chồng lấn → hiện lại → lại chồng lấn: nhấp nháy vô tận. `visibility` giữ
   nguyên layout nên trạng thái đứng yên, và vẫn cắt được Tab lẫn chuột.

   ⚠ DÙNG `animation`, KHÔNG dùng `transition` — không phải chuyện sở thích:
   mấy nút này có `transition` riêng lo việc khác (#st-logo co giãn khi rê chuột
   và mờ đi khi cụm nút nổi mở, ba nút trong #fp-fabs bay ngang theo lịch so le
   ở js/floorplan.css). Khai thêm `transition` ở đây là ghi đè nguyên bộ ấy;
   `animation` là thuộc tính khác hẳn nên hai bên không đụng nhau. (Các
   `animation` khác trong dự án — vòng sóng #fp-fabs, vòng nhấp nháy #st-ai,
   sóng + vệt sáng của .st-cta — đều nằm trên chính nút CON hoặc ::before/::after
   của nó, không phải trên các phần tử ở đây.)

   ⚠⚠ KHÔNG ĐƯỢC hoạt hoá `visibility` chung khung hình với `opacity`. Chrome chỉ
   đẩy animation xuống luồng ghép lớp khi MỌI thuộc tính nó chạm tới đều ghép lớp
   được (transform/opacity/filter); nhét thêm `visibility` là cả animation tụt về
   luồng chính — đúng luồng đang kẹt vì dựng panel. Bản đầu làm vậy và đo được:
   lúc mở panel trình duyệt RƠI KHUNG HÌNH 208–383ms (3 lần đo), cú mờ dần lọt
   trọn vào quãng chết nên vẫn thấy "pặc" y như chưa sửa. Nay keyframes chỉ đụng
   `opacity`, còn `visibility` do class thứ hai `.st-panel-gone` lo, js/tour-chrome.js
   gắn SAU khi mờ xong.

   ⚠ .st-cta có `animation` GỌI MẮT của riêng nó; `.st-under-panel` khai
   `animation … !important` nên nó thắng và vòng sóng dừng trong lúc nút bị giấu —
   đúng ý (nút đang ẩn thì đừng nhấp nháy), và trả lại khi lộ ra.

   Nhánh hiện lại cũng phải là class RIÊNG (`.st-over-panel`, gắn tạm rồi tự gỡ):
   bỏ class ẩn thôi thì phần tử bật về trạng thái gốc tức thì — vẫn "pặc", chỉ là
   ở chiều ngược lại.

   Ẩn chậm hơn hiện (.26s ↔ .18s): chiều ẩn phải sống chung với quãng dựng panel
   nên chừa dư; chiều hiện thì panel đã dựng xong từ lâu, không vướng gì. */
.st-under-panel {
  pointer-events: none !important;
  animation: st-panel-out .26s ease forwards !important;
}

.st-under-panel.st-panel-gone {
  visibility: hidden !important;
}

.st-over-panel {
  animation: st-panel-in .18s ease !important;
}

@keyframes st-panel-out {
  to { opacity: 0; }
}

@keyframes st-panel-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .st-under-panel,
  .st-over-panel {
    animation-duration: .01ms !important;
  }
}