/* ============================================================
   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, right = 16px + --st-share-w. KHÔNG
   đụng gì trong vr-360/.

   `--st-share-w` do js/tour-chrome.js đặt và từ 2026-08-21 LUÔN LÀ 0: bộ skin
   desktop để nút chia sẻ trong thanh công cụ đáy, còn nút chia sẻ tự dựng cho bộ
   mobile đã gỡ theo yêu cầu. Giữ biến trong công thức để hàng trên có thêm nút
   thì chỉ phải sửa một dòng bên tour-chrome.js.
   Hàng trên-phải hiện nay, xếp từ mép vào: [ngôn ngữ] rồi [góp ý]
   (js/feedback.css, ≤640px) — và trên DESKTOP thì [CTA "Vé Combo"] (#st-menu)
   đứng bên trái nút ngôn ngữ; ở điện thoại CTA xuống hàng 2 (top 69/right 16).

   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). 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
     · 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 (CTA) và #st-logo 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;
}

/* ⚠ 2026-08-21: khối `@media (max-width: 620px)` cũ ở đây ĐÃ GỠ. Nó cho nút ngôn
   ngữ đi hình chữ L xuống hàng dưới mỗi khi `body.st-menu-open` bật, để nhường cả
   hàng trên cho 3 lựa chọn xổ ngang của nút hamburger. Hamburger không còn (menu
   thay bằng MỘT nút CTA "Vé Combo" — xem js/site-menu.js), nên không ai đặt class
   đó nữa và nút ngôn ngữ đứng yên ở top 15 / right 16 mọi khổ màn. */

@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 #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.
   (Bài học này giữ lại vì các tệp khác trỏ về đây; bản thân nút ngôn ngữ nay không
   còn chữ nào, chỗ duy nhất trong cụm này còn dùng nó là dải mã 2 chữ cái trên viên
   cờ — xem `#st-lang-menu .st-lang-short`.) */
/* NÚT = BÓNG CỜ của ngôn ngữ đang dùng — cùng khuôn với viên trong hàng chọn
   (2026-08-21). Bản trước là viên thuốc [quả cầu][VI][mũi nhọn]; nay bỏ cả ba,
   chỉ còn lá cờ. Chữ ẩn đi vì trên nút nó là TRẠNG THÁI, mà lá cờ đã nói đủ; mã
   2 chữ cái chỉ còn trong hàng chọn, nơi khách đang phải phân biệt giữa các lựa
   chọn. Nhãn cho trình đọc màn hình bù lại phần chữ đã ẩn (xem renderBtn).
   ⚠ KHÔNG có vòng xanh (bỏ 2026-08-21 đợt 11 theo yêu cầu): trên NÚT nó thừa — nút
   luôn là ngôn ngữ đang dùng, chẳng có gì để phân biệt. Vòng xanh chỉ còn ở viên
   trong HÀNG CHỌN, nơi nó thật sự đánh dấu "cái đang dùng" giữa các lựa chọn. */
#st-lang-btn {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;              /* cắt lá cờ theo viên tròn */
  color: #0f172a;                /* màu quả cầu dự phòng khi ngôn ngữ chưa có cờ */
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .3);
  transition: transform .18s cubic-bezier(.34, 1.5, .5, 1);
}

#st-lang-btn:hover {
  transform: scale(1.06);
}

/* Đang mở hàng chọn: nút thụt lại một chút — dấu hiệu "cái này đang được giữ" và
   nhường sân cho hàng cờ vừa bung ra. */
#st-lang-btn[aria-expanded="true"] {
  transform: scale(.92);
}

#st-lang-btn .st-lang-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Dự phòng: ngôn ngữ chưa vẽ cờ trong FLAGS → hiện quả cầu, canh giữa viên tròn. */
#st-lang-btn .st-lang-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  #st-lang-btn {
    transition: none;
  }
}

/* ══ DANH SÁCH NGÔN NGỮ: XỔ NGANG SANG TRÁI, MỖI Ô LÀ MỘT BÓNG CỜ ══════════
   (2026-08-21) Trước đây menu thả XUỐNG dưới nút. Từ khi cột hai nút "Mua combo"
   / "Mua vé" nằm ngay dưới đó (js/site-menu.css, top 69) thì menu thả xuống bị
   chúng che mất — không sửa bằng z-index được vì che ở đây là che THẬT, hai vật
   cùng chiếm một chỗ. Nên đổi hướng: xổ SANG TRÁI, đúng dải trống duy nhất còn
   lại ở hàng trên.

   Mỗi lựa chọn là một viên tròn 46px: LÁ CỜ phủ kín (SVG nội tuyến, xem
   js/lang-switch.js) + dải trắng dưới đáy in MÃ 2 CHỮ CÁI (ISO 639-1, lấy từ
   `short` trong data/site-i18n.json). Cờ nói "nước nào" trong một cái liếc, mã
   chữ nói chính xác "ngôn ngữ nào" — cờ một mình thì mơ hồ (tiếng Anh ≠ nước Anh),
   mã chữ một mình thì phải đọc mới hiểu.

   KHÔNG dùng `hidden`/`display:none`: đã display:none thì không có gì để chạy
   animation. Trạng thái nằm ở class `.st-open`; lúc đóng dùng `visibility: hidden`
   HOÃN đúng bằng thời gian animation để các viên kịp rút về, `inert` (JS) lo bàn
   phím. Cùng khuôn với cụm nút nổi góc dưới-trái. */
#st-lang-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  visibility: hidden;
  transition: visibility 0s linear .46s;
}

#st-lang.st-open #st-lang-menu {
  visibility: visible;
  transition-delay: 0s;
}

#st-lang-menu button {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;              /* cắt lá cờ theo viên tròn */
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .3);
  /* Bung ra TỪ phía nút: nhỏ + lệch phải + trong suốt → về đúng chỗ. Đường cong
     vọt quá 1 rồi lùi lại cho cảm giác nảy như nút trong game. */
  opacity: 0;
  transform: translateX(30px) scale(.45);
  transition: opacity .18s ease, transform .34s cubic-bezier(.34, 1.56, .5, 1);
  transition-delay: var(--d-out, 0ms);
}

/* `--st-lang-lag` = 0ms ở desktop (không khai) nên calc rơi về đúng --d-in; chỉ màn
   hẹp mới cộng thêm quãng đợi nút Góp ý lùi đi (xem js/feedback.css). */
#st-lang.st-open #st-lang-menu button {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--st-lang-lag, 0ms) + var(--d-in, 0ms));
}

#st-lang-menu button:hover {
  box-shadow: 0 2px 10px rgba(15, 23, 42, .3), 0 0 0 3px rgba(255, 255, 255, .85);
}

/* Ngôn ngữ ĐANG DÙNG: vòng xanh thương hiệu ôm ngoài viên cờ */
#st-lang-menu button[aria-selected="true"] {
  box-shadow: 0 0 0 3px #0e6b2e, 0 2px 10px rgba(15, 23, 42, .3);
}

/* Vừa bấm chọn: nảy một cái RỒI mới thu (class do js/lang-switch.js gắn 260ms) —
   không có nhịp này thì cú bấm trôi qua không dấu vết. */
#st-lang-menu button.picked {
  animation: st-lang-pick .26s cubic-bezier(.34, 1.6, .5, 1);
}

@keyframes st-lang-pick {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

#st-lang-menu .st-lang-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Dải mã chữ nằm ĐÈ lên đáy lá cờ: nền trắng .94 để chữ đọc được trên cả nền cờ
   đỏ (VN) lẫn xanh navy (GB) mà không phải đổi màu chữ theo từng cờ. */
#st-lang-menu .st-lang-short {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: #0f172a;
  font-family: inherit;
  font-weight: 700;              /* 500/700 là hai face CÓ THẬT của DVN Gustavo */
  font-size: 10px;
  letter-spacing: .5px;
}

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

/* ── DESKTOP (≥641px): XỔ THẲNG XUỐNG ────────────────────────────────────
   (2026-08-21 đợt 9) Ở khổ này hai nút "Mua combo"/"Mua vé" đã dời lên nằm ngang
   cùng hàng trên (js/site-menu.css), nên dải ngay dưới nút ngôn ngữ trống hẳn —
   xổ xuống là hướng tự nhiên nhất và không phải đẩy nút nào đi cả (khác điện
   thoại, nơi phải mượn chỗ của nút Góp ý).
   ⚠ ĐIỆN THOẠI KHÔNG ĐỔI: mọi luật ở đây đều nằm trong `min-width: 641px`.
   Mốc lệch đổi sang bộ DỌC (`--d-vin`/`--d-vout`, js/lang-switch.js đặt): hàng
   chạy xuống nên viên ĐẦU mảng mới là viên sát nút. */
@media (min-width: 641px) {
  #st-lang-menu {
    top: calc(100% + 10px);
    right: 0;
    flex-direction: column;
  }

  #st-lang-menu button {
    transform: translateY(-30px) scale(.45);
    transition-delay: var(--d-vout, 0ms);
  }

  #st-lang.st-open #st-lang-menu button {
    transform: none;
    transition-delay: var(--d-vin, 0ms);
  }
}

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

/* ── ĐIỆN THOẠI (≤640px): VIÊN CỜ THU VỀ 34px ────────────────────────────
   (2026-08-21 đợt 11) Cùng cỡ với nút CTA vừa thu và với `#fp-fabs-toggle` — cả
   trang chỉ còn MỘT cỡ "nút phụ" trên điện thoại.
   `top` giữ nguyên 15px: nút Góp ý bên cạnh cũng đã thu về 34px (js/feedback.css)
   nên cả hàng chung đường tâm mà không phải bù gì. (Bản nháp từng phải đặt 20px khi
   nút Góp ý còn 44 — bỏ rồi, ghi lại để không ai thắc mắc con số ấy ở đâu ra.)
   Viền mỏng theo cỡ (2.5 → 2px), giữ nguyên tỉ lệ. */
@media (max-width: 640px) {
  #st-lang-btn {
    width: 34px;
    height: 34px;
    border-width: 2px;
  }

  #st-lang-menu {
    gap: 6px;
  }

  #st-lang-menu button {
    width: 34px;
    height: 34px;
    border-width: 2px;
  }

  #st-lang-menu button[aria-selected="true"] {
    box-shadow: 0 0 0 2.5px #0e6b2e, 0 2px 10px rgba(15, 23, 42, .3);
  }

  /* Dải mã chữ co theo viên: 12px cao / chữ 8.5px vẫn đọc được vì chỉ có 2 ký tự
     in hoa trên nền trắng đặc. */
  #st-lang-menu .st-lang-short {
    height: 12px;
    font-size: 8.5px;
    letter-spacing: .3px;
  }
}

/* Ẩ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;
}