/* ============================================================
   site-menu.css — nút menu điều hướng giữa 3 trang chính (js/site-menu.js)
   ------------------------------------------------------------
   VỊ TRÍ MẶC ĐỊNH: top 15px / right 150px — hàng trên cùng bên phải, LÙI VÀO
   để không đè cụm chrome của skin 3DVista (đã đo thật): nút chia sẻ cách mép
   phải 15–55px, pill "VN" 68–138px. Nút bản đồ × (#fp-close) ở top 15/right 16
   thì không đụng vì menu tự ẩn khi lớp phủ bản đồ mở (xem dưới).
   Mặc định này còn đúng cho combo/index.html. Riêng INDEX.HTM ghi đè CẢ
   --st-menu-top (57px) LẪN --st-menu-right (khối <style> ngay sau link tệp này)
   để menu đứng NGAY BÊN TRÁI nút ngôn ngữ #st-lang, ở hàng NGAY DƯỚI cụm chrome
   3DVista — đo 2026-08-10 cho thấy cụm đó vẫn còn nguyên và chiếm y5–45 (bản
   2026-08-05 tưởng nó đã được ẩn/dời thủ công nên để cả hai nút ở top 15 và
   chúng đè lên pill "VN" + nút chia sẻ). Toạ độ đầy đủ ở js/lang-switch.css.

   NGOẠI LỆ map.html: trang đó CHÍNH LÀ bản đồ (lớp phủ mở suốt, không có
   #fp-close để đóng về đâu) nên menu không được ẩn — mà hàng trên cùng lại bị
   thanh tìm kiếm của bản đồ chiếm hết trên điện thoại. Trang tự đặt lại vị trí
   qua 2 biến CSS bên dưới về ô trống đã đo (top 68 / right 16).
   ============================================================ */

#st-menu {
  position: fixed;
  top: calc(var(--st-menu-top, 15px) + env(safe-area-inset-top, 0px));
  right: var(--st-menu-right, 150px);
  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-menu[hidden] {
  display: none;
}

/* Lớp phủ bản đồ đang mở TRÊN một trang có nội dung riêng (index.htm, combo/) → ẩn menu:
   bản đồ là một màn hình con có nút × của riêng nó, và trên điện thoại thanh tìm kiếm của
   nó trải gần hết hàng trên cùng. map.html không có #fp-close nên không dính luật này. */
body:has(#fp-close):has(#fp-overlay.open) #st-menu {
  display: none;
}

#st-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
}

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

#st-menu-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  color: #0f172a;
  pointer-events: none;
  overflow: visible;
}

/* ── Ba vạch → dấu × ──────────────────────────────────────────────────────
   `transform-box: view-box` để transform tính theo hệ toạ độ 24×24 của SVG chứ
   không theo hộp bao của nét vẽ: một <path> gạch ngang có hộp bao CAO 0px, đặt
   `transform-origin: center` trên đó là xoay quanh một điểm suy biến.

   ⚠ Cả ba <path> đều vẽ ở CÙNG y = 12, tức ngay tâm xoay. Khoảng cách giữa ba
   vạch là do `translateY(±5px)` ở trạng thái ĐÓNG, còn lúc MỞ thì chỉ còn phép
   xoay — nhờ vậy không bao giờ phải ghép translate với rotate trong một khai báo.
   Bản đầu vẽ sẵn ở y = 7/12/17 rồi lúc mở dùng `translateY(5px) rotate(45deg)`:
   SAI, vì danh sách transform áp từ PHẢI sang TRÁI lên toạ độ điểm — tức XOAY
   TRƯỚC rồi mới dịch. Điểm giữa vạch trên (12,7) xoay 45° quanh (12,12) văng sang
   (15,54 · 8,46) rồi mới dịch xuống, nên hai nét cắt nhau lệch tâm ô đúng 3,54px:
   dấu × trông méo và lệch phải. Đo bằng hộp bao nét vẽ, không phải nhìn bằng mắt. */
#st-menu-btn .st-bar {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .32s cubic-bezier(.6, -.28, .3, 1.4), opacity .16s ease;
}

#st-menu-btn .st-bar-1 { transform: translateY(-5px); }
#st-menu-btn .st-bar-3 { transform: translateY(5px); }

#st-menu.st-open .st-bar-1 { transform: rotate(45deg); }
#st-menu.st-open .st-bar-2 { opacity: 0; transform: scaleX(.2); }
#st-menu.st-open .st-bar-3 { transform: rotate(-45deg); }

/* ── Ba lựa chọn: HÀNG NGANG bung ra từ nút, từng cái một ─────────────────
   Neo `right: 100%` (mép trái nút) và chạy sang TRÁI vì nút luôn ở sát mép phải
   màn hình — hướng duy nhất còn chỗ.
   KHÔNG dùng thuộc tính `hidden`/`display:none`: đã `display:none` thì không có
   gì để chạy animation. Trạng thái nằm ở class `.st-open` (js/site-menu.js), lúc
   đóng thì `visibility: hidden` — nhưng HOÃN đúng bằng thời gian animation để các
   mục kịp rút về, nếu không chúng biến mất tức thì. `inert` lo phần bàn phím. */
#st-menu-list {
  position: absolute;
  top: 0;
  right: calc(100% + 10px);
  display: flex;
  gap: 8px;
  visibility: hidden;
  transition: visibility 0s linear .42s;
}

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

#st-menu-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
  white-space: nowrap;
  color: #1e293b;
  /* 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 (.34, 1.45) cho cảm giác "nảy" như nút trong game. */
  opacity: 0;
  transform: translateX(30px) scale(.72);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.45, .5, 1);
  transition-delay: var(--d-out, 0ms);
  pointer-events: none;
  /* KHÔNG viết `font: 600 13.5px/1.25 inherit` — shorthand `font` không nhận `inherit`
     ở chỗ họ font, trình duyệt vứt cả dòng (chi tiết ở js/lang-switch.css). Ở đây là
     thẻ <a> nên nó vẫn thừa kế được họ font, chỉ mất cỡ chữ và độ đậm: đo thật ra
     16px/400 thay vì 13.5px/600. */
  font-family: inherit;
  font-weight: 500;              /* 500/700 là hai face CÓ THẬT của DVN Gustavo */
  font-size: 13.5px;
  line-height: 1.25;
  text-decoration: none;
}

/* `--st-list-lag` = 0ms ở desktop (không khai) nên calc rơi về đúng --d-in cũ;
   chỉ màn hẹp mới cộng thêm quãng đợi nút × trượt sang phải. */
#st-menu.st-open #st-menu-list a {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: calc(var(--st-list-lag, 0ms) + var(--d-in, 0ms));
}

#st-menu-list a:hover {
  background: #f1f5f9;
}

#st-menu-list a svg {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: #64748b;
  fill: none;
}

/* Trang đang xem: làm mờ + không bấm được (vẫn đọc được để biết mình đang ở đâu) */
#st-menu-list a[aria-current="page"] {
  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;
  pointer-events: none;
}

#st-menu-list a[aria-current="page"] svg {
  stroke: #0e6b2e;
}

/* Mỗi mục có HAI nhãn, CSS chọn một: đầy đủ ở màn rộng, ngắn ở màn hẹp. Quy tắc
   mặc định này phải đứng TRƯỚC các @media bên dưới — cùng độ đặc hiệu thì THỨ TỰ
   TRONG TỆP quyết định, đặt sau là nó đè luôn quy tắc trong media query. */
#st-menu-list .st-menu-short {
  display: none;
}

#st-menu-list .st-menu-here {
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0e6b2e;
  opacity: .75;
  white-space: nowrap;
}

/* ── MÀN HẸP: dọn chỗ cho cả hàng ────────────────────────────────────────
   Ba viên thuốc có nhãn cần ~300px; ở khổ 390 mà nút ngôn ngữ vẫn nằm đó thì
   không đủ. Nên lúc mở: nút hamburger TRƯỢT SANG SÁT MÉP PHẢI (right 16) và nút
   ngôn ngữ TRƯỢT XUỐNG hàng dưới — cả hàng trên thành chỗ trống cho 3 lựa chọn.
   `--st-menu-right` chính là khoảng cách hiện tại tới mép phải, nên quãng cần
   trượt = giá trị đó trừ 16px; không phải đo đạc gì thêm. Quy tắc cho #st-lang
   nằm ở js/lang-switch.css (cùng nghe class `body.st-menu-open`).
   Nhãn "đang xem" bị bỏ ở khổ này — nó chỉ làm viên thuốc dài thêm, trong khi
   nền xanh đã nói đủ.

   LỊCH CHẠY CỦA CẢ CHUỖI (ms) — BỐN tệp cùng giữ, sửa một mốc phải xem lại cả bảng.
   Các mốc được canh để KHÔNG BAO GIỜ có hai nút chồng nhau giữa đường:
              MỞ                              THU
     0    chia sẻ ↓ 2 hàng   (200)      0    3 lựa chọn rút về      (240)
     40   góp ý ↓ 1 hàng     (110)      60   × ← trái               (220)
     70   ngôn ngữ → phải    (100)      190  ngôn ngữ ↑ 1 hàng      (110)
     110  góp ý → trái       (100)      290  ngôn ngữ ← trái        (100)
     170  ngôn ngữ ↓ 1 hàng  (110)      300  góp ý → phải           (100)
     200  × → phải           (220)      330  góp ý ↑ 1 hàng         (110)
     270  3 lựa chọn bung ra (+so le)   330  chia sẻ ↑ 2 hàng       (200)
   NỐI ĐUÔI, không phải chờ nhau: nhịp khởi hành cách nhau ~70ms trong khi mỗi bước
   chạy 100–220ms, nên lúc nào cũng có 2–3 nút đang chuyển động cùng lúc. Bước sau
   KHÔNG đợi bước trước dừng — để hở ra là mắt đọc thành khựng. Chỗ duy nhất bị
   ràng buộc là × (200ms): nó khởi hành khi ngôn ngữ mới đi được 1/4 quãng dốc, vừa
   đủ để lúc chạm vùng chồng lấn thì hàng 1 đã trống. Kiểm bằng cách lấy mẫu toạ độ
   thật mỗi 40ms rồi dò giao nhau hình chữ nhật — xem CLAUDE.md.
   Nút chia sẻ ở js/tour-chrome.css, nút ngôn ngữ ở js/lang-switch.css (nó đi hình
   chữ L nên có HAI mốc riêng cho `right` và `top`), nút góp ý ở js/feedback.css (đi
   chữ L NGƯỢC CHIỀU: xuống trước rồi mới sang — ô của nó nằm ngay đầu đường quét
   của ×, đi ngang trước là bị × đâm vào). */
@media (max-width: 620px) {
  #st-menu {
    transition: transform .22s cubic-bezier(.34, 1.2, .5, 1);
    transition-delay: 60ms;                  /* THU: bám ngay đuôi 3 lựa chọn đang rút */
  }

  body.st-menu-open #st-menu {
    transform: translateX(calc(var(--st-menu-right, 150px) - 16px));
    /* MỞ: × PHẢI ĐỢI nút ngôn ngữ rời hàng trên, nếu không nó trượt ngang ĐÈ LÊN
       nút ngôn ngữ đang còn ở đó (đo được: ở +125ms × tới x280 trong khi nút ngôn
       ngữ vẫn chiếm 241–320). Nhưng KHÔNG đợi ngôn ngữ xuống xong — nó khởi hành
       lúc ngôn ngữ mới đi được 1/4 quãng dốc, vừa đủ để lúc × chạm tới vùng chồng
       lấn (x>251, khoảng +90ms sau) thì ngôn ngữ đã rời khỏi hàng 1. */
    transition-delay: 200ms;
    /* 3 lựa chọn bung ra TỪ nút × (`right: calc(100% + 10px)`) nên phải đợi × gần
       tới nơi, không thì chúng nở ra từ x187 và văng khỏi mép trái màn hình. */
    --st-list-lag: 270ms;
  }

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

  /* Bung/rút nhanh hơn desktop cho khớp nhịp của cả chuỗi */
  #st-menu-list a {
    transition: opacity .16s ease, transform .24s cubic-bezier(.34, 1.45, .5, 1);
    height: 40px;
    padding: 0 11px;
    gap: 6px;
    font-size: 12.5px;
  }

  #st-menu-list a svg {
    width: 16px;
    height: 16px;
  }

  #st-menu-list .st-menu-here {
    display: none;
  }

  /* Đổi sang nhãn ngắn (data/site-i18n.json → nav_*_short) */
  #st-menu-list .st-menu-name { display: none; }
  #st-menu-list .st-menu-short { display: inline; }
}

/* Máy rất hẹp (iPhone SE…): bóp thêm cho ba viên thuốc vẫn nằm trong màn */
@media (max-width: 360px) {
  #st-menu-list { gap: 5px; }

  #st-menu-list a {
    height: 38px;
    padding: 0 9px;
    gap: 5px;
    font-size: 12px;
  }
}

/* Tôn trọng thiết lập "giảm chuyển động" của hệ điều hành: vẫn hiện/ẩn, chỉ bỏ
   phần trượt-nảy và độ trễ so le. */
@media (prefers-reduced-motion: reduce) {
  #st-menu,
  #st-menu-btn .st-bar,
  #st-menu-list a {
    --st-list-lag: 0ms;
    transition-duration: .01ms;
    transition-delay: 0ms !important;
  }
}