/* ============================================================
   lang-switch.css — nút chuyển ngôn ngữ toàn trang (js/lang-switch.js)
   ------------------------------------------------------------
   VỊ TRÍ: top 15px, hàng TRÊN CÙNG bên phải — cùng hàng với nút chia sẻ của skin
   3DVista, lùi vào để chừa ô cho nó: right = 16px + --st-share-w. #st-menu xếp
   ngang hàng bên trái nữa, neo theo --st-share-w + --st-lang-w. KHÔNG đụng gì
   trong vr-360/.

   `--st-share-w` do js/tour-chrome.js đặt (54px = nút 44 + khe 10) SAU khi nó
   đổi kiểu nút chia sẻ của skin thành viên tròn trắng 44px khớp hai nút này; bộ
   skin mobile KHÔNG có nút chia sẻ ở góc nên biến đó về 0px và hai nút tự trôi
   ra sát mép — không chừa ô trống vô nghĩa trên màn hẹp. Dự phòng 0px nếu script
   không nạp được (khi ấy nút chia sẻ giữ nguyên kiểu cũ ở right 10, hai nút này
   đè lên nó — chấp nhận được vì z-index 10009).

   Bản 2026-08-05 để cả hai nút ở top 15 và CHÚNG ĐÈ lên chrome của skin (đo thật
   2026-08-10: cụm đó vẫn còn nguyên, chiếm y5–45); bản 2026-08-10 sửa bằng cách
   tụt cả hai xuống top 57 cho khỏi chạm. Nay hàng trên cùng đã dọn được thật —
   js/tour-chrome.js ẩn hẳn cụm ngôn ngữ của skin (right 65→140) và kéo nút chia
   sẻ về đúng ô right 16 — nên hai nút quay lại top 15, cả hàng chỉ còn 3 viên
   thuốc cùng kiểu. Toạ độ skin đã đo, giống nhau ở 1280×800 và 390×844 vì neo
   theo mép phải:
     · pill "VN" (đổi ngôn ngữ)  right 65→140, y5→45   ← ĐÃ ẨN
     · nút chia sẻ              right 10→60,  y5→45   ← ĐÃ ĐỔI KIỂU + dời right 16
     · container ngôn ngữ #786  right 65→140, y5→235  ← ĐÃ ẨN
     · thanh công cụ phải #471  right 5→55,   y0→hết màn (rỗng ở dải trên)
   Lưu ý: DOM id của bản xuất này là số ("71", "594", …) chứ không phải
   "Container_<UUID>", nên 4 selector ẩn ở cuối tệp KHÔNG khớp gì cả — công tắc
   window.LANG_HIDE_TOUR_SWITCH vẫn vô hiệu và KHÔNG còn cần tới (xem chú thích ở
   đó); việc ẩn nay do js/tour-chrome.js làm qua API của player.

   NGOẠI LỆ khi lớp phủ bản đồ mở: lúc đó chrome 3DVista nằm dưới lớp phủ (kể cả
   nút chia sẻ) nên ô right 16 thuộc về nút × đóng bản đồ (#fp-close, top 15
   right 16, 44×44 → y15–59): nút ngôn ngữ lấy lại right 16 nhưng tụt xuống top
   68 (đã đo thật là trống ở cả 4 màn: dải y 65…580 mép phải, trên cột công cụ
   bản đồ ở y ~588).
   Quy tắc #st-ai lúc bản đồ mở (right:70, top:68) neo theo đúng trạng thái này.
   #st-menu thì tự ẩn hẳn khi bản đồ mở nên không dính.

   z-index 10009: bằng #fp-split-ctl, TRÊN #viewer khi chia đôi (10005/10008)
   và trên #fp-overlay (10001) → luôn bấm được. Xem chú thích ở floorplan.css.
   ============================================================ */

#st-lang {
  position: fixed;
  top: calc(15px + env(safe-area-inset-top, 0px));
  right: calc(16px + var(--st-share-w, 0px));
  z-index: 10009;
  /* ĐỒNG BỘ VỚI SIDEBAR CỦA TOUR. Chữ sidebar do 3DVista VẼ TRÊN CANVAS (mỗi mục
     một canvas 185×45) nên computed style của DOM ở đó vô nghĩa — phải đọc thuộc
     tính của component mới ra sự thật: `fontFamily: "DVN - Gustavo"`, 14px.
     Hai tên họ font, CÓ CHỦ Ý xếp theo thứ tự này:
       · "DVN - Gustavo"  — đúng face của skin, khai ở vr-360/fonts.css, nhưng CHỈ
         index.htm nạp tệp đó;
       · "DVN Gustavo"    — cùng kiểu chữ, tự lưu ở welcome/assets/font/, khai trong
         js/floorplan.css mà CẢ BA trang (index/combo/map) đều nạp.
     Nhờ vậy trang tour dùng đúng face của sidebar, hai trang kia vẫn cùng kiểu chữ
     thay vì rơi về Be Vietnam Pro. Be Vietnam Pro giữ làm lớp đỡ cuối. */
  font-family: "DVN - Gustavo", "DVN Gustavo", 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#st-lang[hidden] {
  display: none;
}

/* Lớp phủ bản đồ đang mở TRÊN một trang có nội dung riêng (index.htm có #fp-close):
   nhường hàng trên cùng cho nút × đóng bản đồ, tụt xuống hàng dưới. Nút chia sẻ của
   skin lúc này nằm DƯỚI lớp phủ nên ô mép phải lấy lại được. Cùng khuôn điều kiện
   với site-menu.css và ai-guide.css. */
body:has(#fp-close):has(#fp-overlay.open) #st-lang {
  top: calc(68px + env(safe-area-inset-top, 0px));
  right: 16px;
}

/* MÀN HẸP + MENU ĐANG MỞ: nhường cả hàng trên cho 3 lựa chọn của #st-menu bằng
   cách trượt xuống hàng dưới (44px nút + 10px khe). Class `st-menu-open` do
   js/site-menu.js đặt lên <body> — phải đi qua body vì CSS không chọn ngược lên
   phần tử anh em đứng trước. Quy tắc đối xứng (hamburger trượt sang phải) nằm ở
   js/site-menu.css. */
@media (max-width: 620px) {
  /* ĐI THEO HÌNH CHỮ L, KHÔNG ĐI XÉO: sang phải xong mới xuống (lúc thu thì lên
     xong mới sang trái). Làm được là nhờ hoạt hoá `right` và `top` — hai thuộc
     tính THẬT của phần tử position:fixed — với hai mốc thời gian RIÊNG. Một
     `transform: translate(x, y)` thì không: nó chỉ có MỘT mốc cho cả hai trục nên
     bao giờ cũng cho đường chéo.
     Nó phải sang phải vì lúc đóng nó lùi vào đúng ô của nút chia sẻ
     (right = 16 + --st-share-w); ô đó trống rồi thì nó trôi ra sát mép mới thẳng
     hàng với hai nút kia. 69px = 15 + 54 (44 nút + 10 khe) = hàng thứ 2.
     Xem lịch chạy đầy đủ của cả chuỗi ở js/site-menu.css. */
  #st-lang {                                    /* trạng thái ĐÓNG = lượt THU */
    transition: top .11s cubic-bezier(.34, 1.2, .5, 1) 190ms,
                right .1s cubic-bezier(.34, 1.2, .5, 1) 290ms;
  }

  body.st-menu-open #st-lang {                  /* lượt MỞ */
    top: calc(69px + env(safe-area-inset-top, 0px));
    right: 16px;
    transition: right .1s cubic-bezier(.34, 1.2, .5, 1) 70ms,
                top .11s cubic-bezier(.34, 1.2, .5, 1) 170ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  #st-lang {
    transition-duration: .01ms;
    transition-delay: 0ms !important;
  }
}

/* ⚠ `font: 800 13px/1 inherit` là CSS KHÔNG HỢP LỆ — trong shorthand `font`, chỗ
   cuối phải là DANH SÁCH HỌ FONT; `inherit` chỉ dùng được khi nó là toàn bộ giá trị
   (`font: inherit`). Trình duyệt đọc `inherit` như tên một họ font không tồn tại rồi
   VỨT CẢ DÒNG → `<button>` vốn không thừa kế font nên rơi về mặc định của UA:
   **Arial 400 13.33px**. Đo thật 2026-08-10: nút ngôn ngữ và menu của nó render bằng
   Arial trong khi #st-menu-list, #fp-launch, #welcome-launch đều đúng Be Vietnam Pro
   — đó là chỗ lệch font khách nhìn ra.
   Cách viết đúng mà vẫn giữ MỘT nguồn khai họ font (ở #st-lang): `font-family:
   inherit` là longhand HỢP LỆ, các thuộc tính còn lại tách riêng. */
#st-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 22px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
}

#st-lang-btn:hover {
  background: #f1f5f9;
}

#st-lang-btn svg {
  flex: none;
  stroke: currentColor;
  fill: none;
}

#st-lang-btn .st-lang-caret {
  color: #64748b;
  transition: transform .16s ease;
}

#st-lang-btn[aria-expanded="true"] .st-lang-caret {
  transform: rotate(180deg);
}

#st-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .22);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#st-lang-menu[hidden] {
  display: none;
}

#st-lang-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #1e293b;
  font-family: inherit;          /* KHÔNG viết `font: … inherit` — xem chú thích ở #st-lang-btn */
  font-weight: 500;              /* 500/700 là hai face CÓ THẬT của DVN Gustavo */
  font-size: 13.5px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

#st-lang-menu button:hover {
  background: #f1f5f9;
}

#st-lang-menu button[aria-selected="true"] {
  background: #ecfdf5;
  color: #0e6b2e;
  /* 700 chứ không phải 800: cả hai họ DVN Gustavo chỉ có face thường và đậm
     (vr-360/fonts.css: normal+bold · welcome/assets/font: 500+700). Đặt 800 là
     trình duyệt GIẢ ĐẬM — nét dày bệt, lệch với chữ sidebar. */
  font-weight: 700;
}

#st-lang-menu .st-lang-short {
  flex: none;
  width: 26px;
  color: #94a3b8;
  font-weight: 700;              /* 700 chứ không phải 800 — xem lý do ở quy tắc ngay trên */
  font-size: 11px;
  letter-spacing: .4px;
}

#st-lang-menu button[aria-selected="true"] .st-lang-short {
  color: #0e6b2e;
}

/* Ẩn cụm chuyển ngôn ngữ có sẵn của skin 3DVista. KHÔNG sửa gì trong vr-360/ —
   chỉ là quy tắc hiển thị áp từ ngoài, bật bằng window.LANG_HIDE_TOUR_SWITCH.
   Bốn container: desktop CHÍNH/PHỤ + mobile CHÍNH/PHỤ (tên "CHUYEN NGON NGU*").

   ⚠ ĐO 2026-08-10: bốn selector này KHÔNG khớp phần tử nào trong bản xuất hiện
   tại — 3DVista render ra DOM id kiểu SỐ ("71", "786", "594"), tên
   "Container_<UUID>" chỉ còn là id nội bộ của player. Công tắc vì thế đang vô
   hiệu. Cách ẩn chạy được (nếu sau này cần) là gọi API của player, không phụ
   thuộc DOM id: tour.player.getById('Container_F7C0EB2E_…').set('visible',
   false) — đã thử chạy đúng. Hiện KHÔNG bật: đã chọn giữ nguyên chrome của tour
   và dời 2 nút của trang xuống dưới nó (xem đầu tệp). */
html.st-hide-tour-lang #Container_F7C0EB2E_CDC4_B874_41B2_EA599363FE90,
html.st-hide-tour-lang #Container_F74AE837_CDC5_B853_4199_A21EF7D017E3,
html.st-hide-tour-lang #Container_95025376_CDC4_C8D5_4160_6E341DBAB576,
html.st-hide-tour-lang #Container_4BF36782_06B4_D0AD_418E_77725DF430F4 {
  display: none !important;
}