/* Inter (variable, self-host) — đủ glyph tiếng Việt dấu chồng: ồ, ế, ữ, ậ…
   Segoe UI Variable của Windows 11 thiếu các glyph này nên trình duyệt fallback
   từng ký tự, làm chữ có dấu nhảy sang font khác. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/inter-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bảng màu và các thành phần dùng chung cho trang xem lẫn trang quản trị. */
:root {
  --bg: #0d1117;
  --panel: rgba(16, 22, 30, .82);
  --panel-solid: #121821;
  --line: rgba(255, 255, 255, .14);
  --text: #e8edf4;
  --muted: #93a2b5;
  --accent: #4cc2ff;
  --danger: #ff6b6b;
  --pin: #e8453c;      /* đỏ pin bản đồ */
  --ok: #4ade80;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter var", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Pannellum tự đặt font Helvetica cho container — Helvetica thiếu dấu tiếng Việt,
   nên ép nhãn/tooltip trong viewer dùng chung font với trang. */
.pnlm-container, .pnlm-container * { font-family: inherit; }

/* ---------- Nút ---------- */
.btn {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(14px);
  color: var(--text); cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.93); }
.btn:hover { background: rgba(30, 40, 52, .9); }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn[hidden] { display: none; }

button.primary, button.ghost, button.danger {
  padding: 10px 14px; border-radius: 10px; font: inherit; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
}
button.primary { background: var(--accent); color: #06121b; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
button.ghost:hover { background: rgba(255,255,255,.06); }
button.danger { background: transparent; border-color: rgba(255,107,107,.45); color: var(--danger); font-weight: 500; }
button.danger:hover { background: rgba(255,107,107,.12); }
button:disabled { opacity: .5; cursor: default; }

/* ---------- Pin-point (hotspot) ---------- */
/* Pin hình giọt nước đỏ như trên bản đồ: mũi nhọn cắm đúng vào điểm được đánh
   dấu, nên toàn bộ pin phải được kéo lên phía trên điểm neo của Pannellum.
   Hai loại pin phân biệt bằng ký hiệu bên trong, nhận ra ngay từ xa:
     chú thích  — chấm tròn trắng
     chuyển cảnh — mũi tên trong vòng tròn trắng   */
.hs { width: 34px; height: 46px; margin: -46px 0 0 -17px; cursor: pointer; }

/* Vòng sóng loang ngay dưới chân pin, không phải quanh thân pin. */
.hs::before {
  content: ""; position: absolute;
  left: 50%; top: 100%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--pin); opacity: .3;
  animation: pulse 2.2s ease-out infinite;
}
/* Thân pin là ảnh SVG nên đổ bóng bằng drop-shadow để bóng ôm đúng hình giọt
   nước, box-shadow sẽ ra bóng hình chữ nhật. */
.hs::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32.5'%3E%3Cpath d='M12 1.2c-5.2 0-9.4 4.2-9.4 9.4 0 7 9.4 21 9.4 21s9.4-14 9.4-21c0-5.2-4.2-9.4-9.4-9.4z' fill='%23e8453c' stroke='%23ffffff' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='10.6' r='3.9' fill='%23ffffff'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.hs-scene::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32.5'%3E%3Cpath d='M12 1.2c-5.2 0-9.4 4.2-9.4 9.4 0 7 9.4 21 9.4 21s9.4-14 9.4-21c0-5.2-4.2-9.4-9.4-9.4z' fill='%23e8453c' stroke='%23ffffff' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='10.6' r='4.7' fill='%23ffffff'/%3E%3Cpath d='M9.8 10.6h4.3M12.3 8.8l1.9 1.8-1.9 1.8' fill='none' stroke='%23e8453c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Pin có gắn âm thanh: gắn thêm huy hiệu loa nhỏ ở vai phải của pin, giữ nguyên
   hình pin để ký hiệu bên trong vẫn đọc được. */
.hs .spk {
  position: absolute; left: auto; right: -2px; top: 0;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--pin); background: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8453c'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7' stroke='%23e8453c' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 9px 9px;
  box-shadow: 0 1px 5px rgba(0,0,0,.55);
  pointer-events: none;
}
.hs.playing .spk {
  background-color: var(--pin);
  border-color: #fff;
  animation: spk 1s ease-in-out infinite;
}
@keyframes spk {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

@keyframes pulse {
  0%   { transform: scale(.7); opacity: .45; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Đang phát: vòng sóng đập nhanh và rõ hơn để thấy pin nào đang kêu. */
.hs.playing::before {
  animation-duration: 1s;
  opacity: .55;
}
.hs.playing::after {
  filter: drop-shadow(0 0 4px rgba(232,69,60,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.hs.playing .label { background: rgba(10, 15, 21, .96); border-color: var(--pin); }

/* Nhãn tên hiện sẵn ngay dưới mũi pin — không phải bấm mới biết pin là gì.
   Chữ dài thì cắt bớt, rê chuột (hoặc chạm) mới mở ra đầy đủ.
   Không nhận chuột để còn kéo được pin nằm ngay dưới nó. */
div.hs .label {
  position: absolute; left: 50%; top: 50px; transform: translateX(-50%);
  /* width: max-content là bắt buộc — pin chỉ rộng 34px, thiếu nó thì khi xuống
     dòng nhãn co lại đúng bề ngang pin và mỗi chữ rơi một dòng. */
  width: max-content;
  max-width: 148px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(10, 15, 21, .82);
  backdrop-filter: blur(8px);
  color: var(--text); font-size: 11.5px; line-height: 1.45; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  pointer-events: none; transition: max-width .15s, background .15s;
}
.hs-scene .label { border-color: rgba(232,69,60,.5); }
.hs-scene .label::before { content: "→ "; color: var(--pin); font-weight: 700; }

div.hs:hover .label, div.hs.tapped .label {
  max-width: 240px; white-space: normal; overflow: visible;
  text-overflow: clip; word-break: normal; overflow-wrap: break-word;
  background: rgba(10, 15, 21, .96); z-index: 5;
}

/* ---------- Pannellum: ẩn UI mặc định, dùng UI riêng ---------- */
.pnlm-load-box, .pnlm-controls-container,
.pnlm-panorama-info, .pnlm-title-box, .pnlm-author-box { display: none !important; }

/* ---------- Vòng quay chờ ---------- */
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.16); border-top-color: var(--accent);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }