/* ============================================================
   tour-chrome.css — nhãn tên (tooltip) cho cụm nút chia sẻ của skin 3DVista
   ------------------------------------------------------------
   Vì sao phải TỰ VẼ thay vì dùng tooltip có sẵn: component Button của 3DVista chỉ
   công bố đúng một công tắc `toolTipFollowMouse`, KHÔNG có thuộc tính vị trí nào
   (đã dò: toolTipPosition/toolTipPlacement/toolTipOffset đều không tồn tại). Hai
   trạng thái nó cho ra đều che mất nút kế bên vì cụm nút xếp DỌC:
     · true  → nhãn bám dưới-phải con trỏ, đè lên nút ngay dưới;
     · false → nhãn neo dưới-trái nút, vẫn đè lên nút ngay dưới.
   Nhãn của chính 3DVista cũng không bám được bằng CSS: nó render ra <span>/<div>
   KHÔNG class, KHÔNG id. Nên js/tour-chrome.js xoá `toolTip` của component (tắt
   nhãn gốc) và dựng phần tử này, đặt sang BÊN TRÁI nút — hướng duy nhất còn trống.

   Giữ nguyên bảng màu nhãn của skin (nền xanh mạ #8CC63F, chữ trắng) để không
   thành một ngôn ngữ thiết kế thứ ba trên cùng một cụm nút.

   z-index 10012: trên #st-lang/#st-menu/#fp-split-ctl (10009) và trên #fp-overlay
   (10001) — nhãn luôn nằm trên mọi thứ nó có thể chạm tới.
   ============================================================ */

#st-tip {
  position: fixed;
  z-index: 10012;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #8CC63F;
  color: #fff;
  font: 700 13px/1.2 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
  /* Chỉ để nhìn: nếu ăn chuột thì nhãn nằm cạnh nút sẽ tự cướp con trỏ và gây
     nhấp nháy rollOver/rollOut liên tục. Cùng lệ thẻ xem trước #fp-preview. */
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .14s ease, transform .14s ease;
}

#st-tip.show {
  opacity: 1;
  transform: translateX(0);
}

/* Mũi nhọn chỉ sang nút ở bên phải */
#st-tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left-color: #8CC63F;
}

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

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

/* ── Nút chia sẻ TỰ DỰNG cho skin mobile (js/tour-chrome.js) ──────────────
   Bộ skin mobile không có nút chia sẻ ở góc như desktop, và nút `Share` của nó
   bị kẹt trong cột cài đặt đang ẩn — con của container ẩn thì không vẽ. Nên nút
   bấm là HTML của mình, còn việc chia sẻ vẫn giao cho 3 nút của skin trong hộp
   `- SHARE SOCIAL`.
   Cùng khuôn #st-lang-btn/#st-menu-btn: tròn 44px, nền trắng, cùng bóng. Hover
   xanh mạ #8CC63F cho khớp cụm chia sẻ (nút của skin cũng hover màu này). */
#st-share {
  position: fixed;
  top: calc(15px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 10009;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #0e6b2e;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
}

#st-share:hover {
  background: #8CC63F;
  color: #fff;
}

#st-share svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

/* Lớp phủ bản đồ mở → ô mép phải là của nút × (#fp-close); ẩn nút chia sẻ đi cho
   khỏi chồng, cùng khuôn điều kiện với #st-menu. */
body:has(#fp-close):has(#fp-overlay.open) #st-share {
  display: none;
}

/* ── MÀN HẸP + MENU ĐANG MỞ: xuống hàng 3 ─────────────────────────────────
   Bố cục lúc mở:  [3 lựa chọn][×]  ·  [ngôn ngữ]  ·  [chia sẻ]
   Ba nút của trang rời hàng trên để nhường chỗ cho 3 lựa chọn của #st-menu.
   Cả cụm chạy theo một CHUỖI, không phải cùng lúc: chia sẻ đi ĐẦU lúc mở và về
   SAU CÙNG lúc thu. Lịch chạy đầy đủ ghi ở js/site-menu.css — sửa một mốc thì
   phải xem lại cả bảng, vì các mốc được canh để hai nút không bao giờ đè nhau
   giữa đường.
   108px = 2 hàng × 54 (44 nút + 10 khe). Chỉ dịch theo TRỤC DỌC nên dùng
   `transform` là đủ (khác #st-lang phải đi hình chữ L). Class `st-menu-open` do
   js/site-menu.js đặt lên <body> vì CSS không chọn ngược lên phần tử anh em
   đứng trước. */
@media (max-width: 620px) {
  #st-share {
    transition: transform .2s cubic-bezier(.34, 1.2, .5, 1);
    transition-delay: 330ms;              /* THU: về sau cùng */
  }

  body.st-menu-open #st-share {
    transform: translateY(108px);
    transition-delay: 0ms;                /* MỞ: đi đầu tiên */
  }
}

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