/* ==========================================================
   VR 360 LÂM ĐỒNG - STYLE
   ========================================================== */

/* ============ DESIGN TOKENS ============ */
:root {
  /* Colors */
  --bg-deep: #050E1A;
  --bg-darker: #0A1628;
  --panel-bg: rgba(10, 22, 40, 0.55);
  --panel-bg-solid: rgba(10, 22, 40, 0.85);
  --panel-border: rgba(94, 234, 212, 0.18);
  --panel-border-hover: rgba(94, 234, 212, 0.45);

  --accent-green: #4ADE80;
  --accent-cyan: #5EEAD4;
  --accent-glow: rgba(94, 234, 212, 0.35);
  --accent-purple: #A855F7;

  --text-primary: #FFFFFF;
  --text-secondary: #B8C5D1;
  --text-muted: #6B7A8A;
  --text-dim: #4B5A6A;

  /* Sizes */
  --panel-radius: 18px;
  --pill-radius: 999px;
  --shadow-glow: 0 0 40px rgba(94, 234, 212, 0.12);
  --shadow-deep: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ RESET ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

button:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* ============ PANORAMA LAYER ============ */
.pano-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-deep);
}

/* Mock background (giả lập panorama khi chưa có Pano2VR) */
.pano-mock {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 35%, rgba(255, 180, 80, 0.55) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 30%, rgba(255, 220, 150, 0.7) 0%, transparent 18%),
    linear-gradient(180deg,
      #0a1628 0%,
      #1a2f4a 25%,
      #2d4a6b 45%,
      #4a6a8a 60%,
      #6b8aa6 70%,
      #8aa6c0 78%,
      #5a7a90 85%,
      #2a4a5a 100%);
  background-size: cover;
}

.pano2vr-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pano-overlay {
  display: none;
}

/* Floating altitude/temperature info. Keep value ids unchanged for WeatherService. */
.quick-info {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 42;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 0;
  transform: translateX(-50%);
  color: #fff;
  pointer-events: none;
}

.quick-info-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 136px;
  padding: 0;
}

.quick-info-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.quick-info-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.quick-info-label {
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  white-space: nowrap;
}

.quick-info-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

:fullscreen .quick-info,
:-webkit-full-screen .quick-info,
body.is-fullscreen .quick-info {
  z-index: 1002;
}

@media (max-width: 768px) {
  .quick-info {
    top: calc(max(10px, env(safe-area-inset-top)) + 46px);
    left: max(14px, env(safe-area-inset-left));
    max-width: min(310px, calc(100vw - 28px));
    gap: 6px;
    padding: 0;
    transform: none;
  }

  .quick-info-item {
    min-width: 0;
    flex: 1 1 0;
    gap: 8px;
    padding: 0;
  }

  .quick-info-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .quick-info-label {
    font-size: 8px;
    letter-spacing: 0.45px;
  }

  .quick-info-value {
    font-size: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1024px),
       (max-height: 500px) and (orientation: landscape) {
  .quick-info {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    gap: 8px;
    transform: translateX(-50%);
  }

  .quick-info-item {
    min-width: 0;
    gap: 6px;
  }

  .quick-info-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .quick-info-icon svg {
    width: 15px;
    height: 15px;
  }

  .quick-info-label {
    font-size: 7.5px;
    letter-spacing: 0.35px;
  }

  .quick-info-value {
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .quick-info {
    width: min(174px, calc(100vw - 28px));
    flex-direction: column;
    align-items: stretch;
  }

  .quick-info-item {
    width: 100%;
  }
}

/* ============ UI WRAPPER ============ */
.ui-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity var(--t-slow);
}

.ui-wrapper>* {
  pointer-events: auto;
}

.ui-wrapper.ui-hidden {
  opacity: 0;
  pointer-events: none;
}

.ui-wrapper.ui-hidden>* {
  pointer-events: none;
}

/* ============ FULLSCREEN OVERLAY — đẩy mọi UI lên trên panorama ============
   Khi browser vào fullscreen, các phần tử anh em với #container có thể bị
   ẩn bởi fullscreen-stacking-context. Ta dùng cả pseudo-class :fullscreen
   (browser hiện đại) và class body.is-fullscreen (fallback iOS Safari < 16.4)
   để chắc chắn overlay nằm trên cùng. */
:fullscreen .ui-wrapper,
:-webkit-full-screen .ui-wrapper,
body.is-fullscreen .ui-wrapper {
  z-index: 1000;
}

:fullscreen .control-bar,
:-webkit-full-screen .control-bar,
body.is-fullscreen .control-bar {
  z-index: 1001;
}

:fullscreen .status-bar,
:-webkit-full-screen .status-bar,
body.is-fullscreen .status-bar {
  z-index: 1001;
}

:fullscreen .map-hover-popup,
:-webkit-full-screen .map-hover-popup,
body.is-fullscreen .map-hover-popup {
  z-index: 10000;
}

:fullscreen .modal-backdrop,
:-webkit-full-screen .modal-backdrop,
body.is-fullscreen .modal-backdrop {
  z-index: 10001;
}

/* ============ TOP BAR ============ */
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-mark {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.5));
}

.logo-mark svg {
  width: 100%;
  height: 100%;
}

.logo-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  line-height: 1;
}

.logo-slogan {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Compass */
.compass {
  flex: 1;
  max-width: 720px;
  display: flex;
  justify-content: center;
}

.compass-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  padding: 8px 0;
}

.compass-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(94, 234, 212, 0.15) 20%,
      rgba(94, 234, 212, 0.4) 50%,
      rgba(94, 234, 212, 0.15) 80%,
      transparent 100%);
}

.compass-tick {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg-deep);
  z-index: 1;
}

.compass-tick.active {
  color: var(--accent-cyan);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 0;
}

.compass-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan), 0 0 4px #fff;
  margin-bottom: 2px;
}

/* Top right controls */
.top-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--pill-radius);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-base);
}

.btn-pill:hover {
  border-color: var(--panel-border-hover);
  background: var(--panel-bg-solid);
}

.btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--t-base);
}

.btn-icon:hover {
  border-color: var(--panel-border-hover);
  background: var(--panel-bg-solid);
}

/* ============ PANELS (chung) ============ */
.panel {
  position: absolute;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-glow), var(--shadow-deep);
  padding: 18px;
  transition: all var(--t-slow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent-cyan);
}

.btn-collapse,
.btn-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.btn-collapse:hover,
.btn-close:hover {
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent-cyan);
}

.panel-corner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 999;
  pointer-events: auto;
}

.panel-corner-close svg {
  pointer-events: none;
}

.is-hidden,
/* iframe AI: ẩn bằng CSS position (không dùng display:none để iframe vẫn load) */
.ai-console-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  z-index: -1;
}

/* Nút đóng overlay AI — hiện trên cùng khi iframe fullscreen (mobile/Zalo) */
#ai-overlay-close {
  display: none; /* js sẽ set flex khi cần */
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(5, 14, 26, 0.85);
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============ LEFT PANEL: DESTINATIONS ============ */
.panel-left {
  top: 100px;
  left: 24px;
  width: 280px;
  max-height: calc(100vh - 220px);
  /* chừa chỗ status-bar + control-bar */
  display: flex;
  flex-direction: column;
  z-index: 10000;
}

.panel-left .panel-header,
.panel-left .btn-see-all {
  flex-shrink: 0;
}

.destinations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* cho phép flex item co lại để overflow áp dụng */
  padding-right: 4px;
  /* chừa chỗ thanh scroll */
}

/* Scrollbar tùy biến cho destinations-list */
.destinations-list::-webkit-scrollbar {
  width: 6px;
}

.destinations-list::-webkit-scrollbar-track {
  background: transparent;
}

.destinations-list::-webkit-scrollbar-thumb {
  background: rgba(94, 234, 212, 0.25);
  border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb:hover {
  background: rgba(94, 234, 212, 0.5);
}

.dest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--t-base);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
}

.dest-item:hover,
.dest-item.active {
  background: rgba(94, 234, 212, 0.08);
  border-color: rgba(94, 234, 212, 0.3);
  transform: translateX(2px);
}

/* Trên PC, giới hạn chiều cao danh sách tương đương 6 điểm đến để không đè lên mini-map, cho phép cuộn */
@media (min-width: 769px) {
  .destinations-list {
    max-height: 446px;
    /* 6 items * 66px + 5 gaps * 10px = 446px */
  }
}

.dest-thumb {
  width: 64px;
  height: 50px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2a4a5a, #4a6a8a);
  position: relative;
  overflow: hidden;
}

.dest-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4));
}

.dest-thumb-1 {
  background: linear-gradient(135deg, #4a7a8a 30%, #6a9aaa 100%);
}

.dest-thumb-2 {
  background: linear-gradient(135deg, #ff8a50, #ffd070);
}

.dest-thumb-3 {
  background: linear-gradient(135deg, #5a7a4a, #8aaa7a);
}

.dest-thumb-4 {
  background: linear-gradient(135deg, #2a5a4a, #5a8a7a);
}

.dest-thumb-5 {
  background: linear-gradient(135deg, #6a4a7a, #9a7aaa);
}

.dest-info {
  flex: 1;
  min-width: 0;
}

.dest-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.dest-name svg {
  color: var(--accent-green);
  flex-shrink: 0;
}

.dest-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-see-all {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 12px;
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all var(--t-base);
}

.btn-see-all:hover {
  background: rgba(94, 234, 212, 0.15);
  border-color: rgba(94, 234, 212, 0.5);
}

/* Collapsed state */
.panel-left.collapsed {
  width: 50px;
  padding: 18px 8px;
}

.panel-left.collapsed .panel-title,
.panel-left.collapsed .destinations-list,
.panel-left.collapsed .btn-see-all,
.panel-left.collapsed .panel-search-wrap {
  display: none;
}

.panel-left.collapsed .btn-collapse svg {
  transform: rotate(180deg);
}

/* ============ PANEL SEARCH & FILTER ============ */
.panel-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.panel-search-input-row {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 0 8px 0 10px;
  height: 34px;
  transition: border-color 0.2s;
}

.panel-search-input-row:focus-within {
  border-color: rgba(94, 234, 212, 0.45);
}

.panel-search-icon {
  color: rgba(255, 255, 255, 0.38);
  flex-shrink: 0;
}

.panel-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans, inherit);
  font-size: 12.5px;
}

.panel-search-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.panel-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}

.panel-search-clear.is-visible { display: flex; }

.panel-search-clear:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Filter row: trigger + count */
.panel-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-filter-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.panel-filter-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans, inherit);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  overflow: hidden;
}

.panel-filter-trigger #panel-filter-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.panel-filter-trigger:hover,
.panel-filter-trigger.is-open {
  border-color: rgba(94, 234, 212, 0.4);
  color: rgba(255, 255, 255, 0.9);
}

.panel-filter-trigger.has-filter {
  border-color: rgba(94, 234, 212, 0.5);
  color: var(--accent-cyan);
}

.panel-filter-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.panel-filter-trigger.is-open .panel-filter-chevron {
  transform: rotate(180deg);
}

/* Count badge */
.panel-dest-count {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Dropdown panel */
.panel-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(7, 18, 34, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  z-index: 200;
}

.panel-filter-dropdown.is-open { display: block; }

.panel-filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.38);
}

.panel-filter-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans, inherit);
  font-size: 12px;
}

.panel-filter-search::placeholder { color: rgba(255, 255, 255, 0.28); }

#panel-filter-options {
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

#panel-filter-options::-webkit-scrollbar { width: 4px; }
#panel-filter-options::-webkit-scrollbar-track { background: transparent; }
#panel-filter-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

/* ============ RIGHT PANEL: OVERVIEW ============ */
.panel-right {
  top: 100px;
  right: 24px;
  width: 300px;
}

.panel-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.stat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 8px;
  color: var(--accent-green);
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 8px 16px;
  margin-top: 6px;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 8px;
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--t-base);
}

.btn-detail:hover {
  background: rgba(94, 234, 212, 0.15);
  border-color: rgba(94, 234, 212, 0.5);
}

.panel-right.hidden {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* ============ CENTER STAGE ============ */
.center-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.center-stage>* {
  pointer-events: auto;
}

.center-stage--hide {
  opacity: 0;
  transform: translate(-50%, -58%);
  pointer-events: none !important;
}

.center-stage--hide>* {
  pointer-events: none !important;
}

.title-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-script {
  font-family: 'Dancing Script', cursive;
  font-size: 38px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: -8px;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.title-main {
  font-size: 92px;
  font-weight: 800;
  letter-spacing: 6px;
  background: linear-gradient(180deg, #B6F4EA 0%, #5EEAD4 50%, #4ADE80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(94, 234, 212, 0.4));
  line-height: 1;
}

.title-sub {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dot-sep {
  color: var(--accent-cyan);
  margin: 0 4px;
}

.title-divider {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 200px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

.divider-diamond {
  color: var(--accent-cyan);
  font-size: 12px;
  text-shadow: 0 0 8px var(--accent-cyan);
}

/* ============ DESTINATIONS MODAL SEARCH BAR ============ */
.dest-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dest-search-input-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px 0 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s;
}

.dest-search-input-wrap:focus-within {
  border-color: rgba(94, 234, 212, 0.45);
}

.dest-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans, inherit);
  font-size: 13.5px;
}

.dest-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.dest-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.dest-search-clear--visible {
  display: flex;
}

.dest-search-clear:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.dest-filter-select {
  height: 42px;
  min-width: 190px;
  padding: 0 36px 0 12px;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.dest-filter-select:focus,
.dest-filter-select:hover {
  border-color: rgba(94, 234, 212, 0.45);
}

.dest-filter-select option,
.dest-filter-select optgroup {
  background: #0a1628;
  color: #fff;
}

.dest-filter-count {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ============ MODAL DESTINATIONS GRID ============ */
.modal-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}

.modal-dest-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  flex-direction: column;
}

.modal-dest-item:hover {
  background: rgba(94, 234, 212, 0.1);
  border-color: rgba(94, 234, 212, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.modal-dest-thumb {
  width: 100%;
  height: 140px;
  background-color: var(--panel-border);
  background-size: cover;
  background-position: center;
}

.modal-dest-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.modal-dest-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  opacity: 0.75;
  margin-bottom: 4px;
  line-height: 1;
}

.modal-dest-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.modal-dest-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 768px) {
  .modal-dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .modal-dest-grid {
    grid-template-columns: 1fr;
  }
}

/* AI BUTTON */
.ai-button {
  position: relative;
  width: 220px;
  height: 220px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-base);
}

.ai-button:hover {
  transform: scale(1.03);
}

.ai-button:active {
  transform: scale(0.98);
}

.ai-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ai-ring-outer {
  inset: 0;
  border: 1px solid rgba(94, 234, 212, 0.25);
  animation: ring-pulse 3s ease-in-out infinite;
}

.ai-ring-mid {
  inset: 25px;
  border: 1px solid rgba(94, 234, 212, 0.45);
  animation: ring-pulse 3s ease-in-out infinite 0.5s;
}

@keyframes ring-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.ai-core {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Kính mờ tinh tế — gần như trong suốt, để cảnh VR 360 hiện rõ phía sau */
  background: radial-gradient(circle at 50% 35%,
      rgba(94, 234, 212, 0.10) 0%,
      rgba(18, 46, 70, 0.14) 55%,
      rgba(8, 18, 34, 0.20) 100%);
  border: 1px solid rgba(150, 245, 225, 0.35);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.22),
    inset 0 0 18px rgba(94, 234, 212, 0.10),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  color: var(--accent-cyan);
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}

.ai-core > svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.ai-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #eafff9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65), 0 0 10px rgba(94, 234, 212, 0.45);
  transition: color var(--t-base), text-shadow var(--t-base);
}

.ai-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
}

/* Sound waves */
.ai-wave {
  position: absolute;
  top: 50%;
  width: 100px;
  height: 60px;
  transform: translateY(-50%);
  pointer-events: none;
}

.ai-wave-left {
  left: -90px;
}

.ai-wave-right {
  right: -90px;
}

.ai-wave::before,
.ai-wave::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  background: var(--accent-cyan);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent-glow);
  transform: translateY(-50%);
  animation: wave-pulse 1.2s ease-in-out infinite;
}

.ai-wave-left::before {
  right: 10px;
  height: 22px;
  animation-delay: 0s;
}

.ai-wave-left::after {
  right: 25px;
  height: 14px;
  animation-delay: 0.15s;
}

.ai-wave-right::before {
  left: 10px;
  height: 22px;
  animation-delay: 0s;
}

.ai-wave-right::after {
  left: 25px;
  height: 14px;
  animation-delay: 0.15s;
}

.ai-wave-left {
  background: repeating-linear-gradient(90deg,
      transparent 0, transparent 4px,
      var(--accent-cyan) 4px, var(--accent-cyan) 6px,
      transparent 6px, transparent 12px,
      rgba(94, 234, 212, 0.6) 12px, rgba(94, 234, 212, 0.6) 14px);
  -webkit-mask: radial-gradient(ellipse at right, #000 0%, transparent 80%);
  mask: radial-gradient(ellipse at right, #000 0%, transparent 80%);
}

.ai-wave-right {
  background: repeating-linear-gradient(90deg,
      rgba(94, 234, 212, 0.6) 0, rgba(94, 234, 212, 0.6) 2px,
      transparent 2px, transparent 8px,
      var(--accent-cyan) 8px, var(--accent-cyan) 10px,
      transparent 10px, transparent 14px);
  -webkit-mask: radial-gradient(ellipse at left, #000 0%, transparent 80%);
  mask: radial-gradient(ellipse at left, #000 0%, transparent 80%);
}

@keyframes wave-pulse {

  0%,
  100% {
    opacity: 0.4;
    transform: translateY(-50%) scaleY(0.6);
  }

  50% {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
}

/* Header của mini-map: title bên trái, nút close bên phải
   (cùng pattern với .panel-header của panel-overview) */
.mini-map-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mini-map-text {
  flex: 1;
  min-width: 0;
}

/* ============ MINI MAP ============ */
.mini-map {
  position: absolute;
  bottom: 90px;
  left: 24px;
  width: 320px;
  height: 220px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-glow), var(--shadow-deep);
  padding: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 50;
}

.mini-map.expanded {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  z-index: 9999;
}

.mini-map.expanded .mini-map-overlay-actions {
  gap: 8px;
  top: 14px;
  right: 14px;
}

.mini-map.expanded .btn-map-action {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.mini-map.expanded .btn-map-action svg {
  width: 16px;
  height: 16px;
}

#map-container {
  width: 100%;
  height: 100%;
}

.mini-map-overlay-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.btn-map-action {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-map-action:hover {
  background: rgba(94, 234, 212, 0.2);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.mini-map .maplibregl-ctrl-bottom-right,
.mini-map .maplibregl-ctrl-bottom-left {
  display: none;
  /* Ẩn logo và attribution để mini map gọn gàng */
}

/* ============ MAP SEARCH & FILTER BAR ============ */
.map-search-bar {
  display: none;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  z-index: 20;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  /* tránh chồng icon: trừ nửa khoảng icon phải (184px) và padding trái */
  max-width: calc(100% - 204px);
}

.mini-map.expanded .map-search-bar {
  display: flex;
}

/* Search input wrapper */
.map-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(5, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0 8px 0 10px;
  height: 38px;
  gap: 7px;
  transition: border-color 0.2s;
  width: 210px;
}

.map-search-input-wrap:focus-within {
  border-color: rgba(94, 234, 212, 0.5);
}

.map-search-icon {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.map-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  line-height: 1;
}

.map-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12.5px;
}

.map-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.map-search-clear.is-visible {
  display: flex;
}

.map-search-clear:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Filter dropdown wrapper */
.map-filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.map-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  background: rgba(5, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans, inherit);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  min-width: 160px;
  max-width: 200px;
  overflow: hidden;
}

#map-filter-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.map-filter-trigger:hover,
.map-filter-trigger.is-open {
  border-color: rgba(94, 234, 212, 0.45);
  color: #fff;
}

.map-filter-trigger.has-filter {
  border-color: rgba(94, 234, 212, 0.5);
  color: var(--accent-cyan);
}

.map-filter-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.map-filter-trigger.is-open .map-filter-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.map-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: rgba(7, 18, 34, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(94, 234, 212, 0.05);
  overflow: hidden;
  z-index: 100;
}

.map-filter-dropdown.is-open {
  display: block;
}

.map-filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.4);
}

.map-filter-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans, inherit);
  font-size: 12px;
}

.map-filter-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.map-filter-options {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

.map-filter-options::-webkit-scrollbar {
  width: 4px;
}

.map-filter-options::-webkit-scrollbar-track {
  background: transparent;
}

.map-filter-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.map-filter-group-header {
  padding: 6px 12px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  opacity: 0.7;
  pointer-events: none;
}

.map-filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
  position: relative;
}

.map-filter-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.map-filter-option--active {
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

.map-filter-option--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent-cyan);
  border-radius: 0 2px 2px 0;
}

.map-filter-option--sub {
  padding-left: 22px;
  font-size: 12px;
}

.map-filter-all-tag {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 2px;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 520px) {
  .mini-map.expanded .map-search-bar {
    flex-direction: column;
    align-items: stretch;
    top: 66px;
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
  }

  .map-search-input-wrap {
    width: 100%;
  }

  .map-filter-trigger {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .map-filter-dropdown {
    right: 0;
    left: 0;
    width: auto;
  }
}

/* Custom Marker Pin
   Cấu trúc 2 lớp:
   - .map-marker-pin (root) — MapLibre giữ inline transform translate(...) để
     định vị. KHÔNG đặt transform/animation lên đây — sẽ phá vị trí pin.
   - .map-marker-pin-inner (con) — chứa background + nhận hover/active/pressed
     scale animation. Free để transform tuỳ ý. */
.map-marker-pin {
  width: 54px;
  height: 54px;
  /* Pin có thể đụng vào tooltip hoặc nhau khi zoom — đảm bảo touch target rộng */
  touch-action: manipulation;
}

.map-marker-pin:not(.active)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 215, 0, 0.24) 0 38%, rgba(255, 204, 0, 0.12) 39% 68%, rgba(255, 204, 0, 0) 70%),
    conic-gradient(from 135deg, rgba(255, 215, 0, 0.18), rgba(255, 255, 255, 0.08), rgba(255, 204, 0, 0.16), rgba(255, 215, 0, 0.18));
  border: 1px solid rgba(255, 235, 150, 0.32);
  filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.28));
  pointer-events: none;
}

.map-marker-pin-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url('../img-thumbs/location.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  transition: transform var(--t-fast), filter var(--t-fast);
  /* hint cho browser tối ưu animation */
  will-change: transform;
}

.map-marker-pin:hover .map-marker-pin-inner {
  transform: scale(1.15);
}

.map-marker-pin.active .map-marker-pin-inner {
  background-image: url('../img-thumbs/placeholder.gif');
  transform: scale(1.35);
  filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.85)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
}

.map-marker-pin.active {
  width: 36px;
  height: 36px;
  z-index: 20;
}

/* Long-press feedback trên mobile */
.map-marker-pin-inner.is-pressed {
  transform: scale(0.9);
  filter: brightness(0.85);
}

/* Radar (Heading Indicator) */
.map-radar-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  pointer-events: none;
  z-index: 8;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.72));
  transition: transform 0.1s linear;
  /* Mượt mà khi xoay */
}

/* Radar cone using conic-gradient or clip-path. Let's use a simple SVG-like approach or CSS border */
.map-radar-cone {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(from 322.5deg, rgba(59, 130, 246, 0) 0deg, rgba(96, 165, 250, 0.36) 10deg, rgba(37, 99, 235, 0.3) 37.5deg, rgba(96, 165, 250, 0.36) 65deg, rgba(59, 130, 246, 0) 75deg);
  border: none;
  box-shadow:
    0 0 14px rgba(59, 130, 246, 0.48),
    0 0 26px rgba(96, 165, 250, 0.24);
  /* Trỏ về phía "trên" (0 độ) của container */
}

/* Map Layer Button */
.btn-map-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.btn-map-layer:hover {
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent-cyan);
}

.btn-open-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 10px;
  color: var(--accent-green);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--t-base);
}

.btn-open-map:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: var(--accent-green);
}

/* ============ CONTROL BAR ============ */
.control-bar {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(5, 14, 26, 0.58);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--pill-radius);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(94, 234, 212, 0.08);
}

.ctrl-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--text-secondary);
  transition: all var(--t-base);
}

.ctrl-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all var(--t-base);
}

.ctrl-icon--glow {
  background: rgba(94, 234, 212, 0.12);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.4);
}

.ctrl-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ctrl-btn--active .ctrl-label {
  color: var(--accent-cyan);
}

.ctrl-dot {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ctrl-btn--recording .ctrl-dot {
  opacity: 1;
  animation: dot-pulse 1.2s ease-in-out infinite;
}

/* ============ STATUS BAR ============ */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 14, 26, 0.85) 100%);
  font-size: 12px;
  color: var(--text-secondary);
}

.status-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-online {
  color: var(--accent-green);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.status-handbook {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: var(--pill-radius);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--t-base);
}

.status-handbook:hover {
  border-color: var(--panel-border-hover);
  background: var(--panel-bg-solid);
}

/* ============ MODAL ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  background: var(--bg-darker);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(94, 234, 212, 0.2), 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform var(--t-base);
}

.modal-backdrop.open .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.modal-body h3 {
  color: var(--text-primary);
  font-size: 16px;
  margin: 18px 0 8px;
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-body ul {
  margin: 10px 0 10px 20px;
}

.modal-body li {
  margin-bottom: 6px;
}

.modal-body strong {
  color: var(--accent-cyan);
}

.modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.modal-body th,
.modal-body td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-body th {
  color: var(--accent-cyan);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Scrollbar */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(94, 234, 212, 0.3);
  border-radius: 3px;
}

/* Sheet backdrop ẩn mặc định (chỉ hiện trên mobile khi sheet mở) */
.sheet-backdrop {
  display: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .panel-left {
    width: 250px;
  }

  .panel-right {
    width: 270px;
  }

  .title-main {
    font-size: 76px;
  }

  .title-script {
    font-size: 32px;
  }
}

@media (max-width: 1024px) {
  .compass {
    display: none;
  }

  .panel-left,
  .panel-right {
    width: 230px;
  }

  .title-main {
    font-size: 60px;
    letter-spacing: 4px;
  }

  .title-script {
    font-size: 26px;
  }

  .title-sub {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .ai-button {
    width: 180px;
    height: 180px;
  }

  .ai-core {
    width: 110px;
    height: 110px;
  }
}

/* ============ TABLET / LARGE PHONE (≤ 768px) ============ */
@media (max-width: 768px) {

  /* Bump ui-wrapper above control-bar (20) + status-bar (15) để bottom-sheet
     và backdrop nằm trên các thanh điều khiển. Wrapper vẫn pointer-events:none
     nên không chặn click vào control-bar khi sheet đóng. */
  .ui-wrapper {
    z-index: 30;
  }

  /* Safe-area cho iPhone notch / home indicator */
  .top-bar {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    gap: 10px;
  }

  .logo-mark {
    width: 36px;
    height: 36px;
  }

  .logo-name {
    font-size: 17px;
    letter-spacing: 1px;
  }

  .logo-slogan {
    font-size: 7.5px;
    letter-spacing: 1.5px;
    margin-top: 2px;
  }

  .top-right-controls {
    gap: 6px;
  }

  .btn-pill {
    padding: 6px 10px;
    font-size: 12px;
  }

  .btn-icon {
    width: 36px;
    height: 36px;
  }

  /* Mini-map trên mobile portrait — luôn hiển thị, đặt PHÍA TRÊN control-bar
     với khoảng cách an toàn để không chồng nút điều khiển.
     - Control-bar: bottom = 48px + safe-area, height ≈ 60px (icon 32 + label 9 + padding)
       → top edge của control-bar cách viewport-bottom ≈ 108px
     - Mini-map bottom phải ≥ 108 + 16 (gap) = 124px */
  .mini-map {
    display: flex;
    width: 140px;
    height: 140px;
    bottom: calc(124px + env(safe-area-inset-bottom));
    left: 12px;
    /* z-index 35 = trên ui-wrapper (30) + control-bar (20) + status-bar (15) */
    z-index: 35;
    pointer-events: auto;
  }

  .mini-map-header {
    padding: 8px;
  }

  .mini-map-title {
    font-size: 11px;
  }

  .mini-map-desc {
    display: none;
  }

  .btn-open-map {
    padding: 6px;
    font-size: 10px;
  }

  /* Mini-map mờ đi khi bottom-sheet đang mở để không tranh chấp không gian */
  .ui-wrapper:has(.panel.mobile-open) .mini-map {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Panel destinations + overview chuyển thành bottom-sheet */
  .panel-left,
  .panel-right {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 25;
  }

  .panel-left.mobile-open,
  .panel-right.mobile-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Grip handle gợi ý vuốt — kẻ ngang nhỏ trên cùng */
  .panel-left::before,
  .panel-right::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 auto 12px;
    flex-shrink: 0;
  }

  /* Header + nút đóng — đảm bảo click được */
  .panel-left .panel-header,
  .panel-right .panel-header {
    flex-shrink: 0;
  }

  .panel-left .btn-collapse,
  .panel-right .btn-close {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
  }

  /* Xoay chevron của btn-collapse 90° để giống nút "đóng xuống" */
  .panel-left .btn-collapse svg {
    transform: rotate(-90deg);
    width: 14px;
    height: 14px;
  }

  /* Disable desktop "collapsed" state trên mobile */
  .panel-left.collapsed {
    width: 100%;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .panel-left.collapsed .panel-title {
    display: block;
  }

  .panel-left.collapsed .destinations-list {
    display: flex;
  }

  .panel-left.collapsed .btn-see-all {
    display: flex;
  }

  .panel-left.collapsed .btn-collapse svg {
    transform: rotate(-90deg);
  }

  /* Sheet backdrop — tap để đóng. Đặt trong ui-wrapper (z-index 30),
     z-index local 24: trên top-bar (0) — dim phần đó, dưới panel (25) — panel hiện trên. */
  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 14, 26, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 24;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Destinations list cuộn được khi nội dung dài */
  .destinations-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
  }

  .dest-item {
    padding: 10px;
  }

  .dest-thumb {
    width: 70px;
    height: 56px;
  }

  .dest-name {
    font-size: 14px;
  }

  .dest-desc {
    font-size: 12px;
  }

  /* Panel overview cuộn được */
  .panel-right .panel-desc {
    font-size: 13px;
  }

  .panel-right .stat-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  .center-stage {
    gap: 28px;
    padding: 0 16px;
  }

  .title-main {
    font-size: 46px;
    letter-spacing: 3px;
  }

  .title-script {
    font-size: 22px;
  }

  .title-sub {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .ai-button {
    width: 150px;
    height: 150px;
  }

  .ai-core {
    width: 96px;
    height: 96px;
  }

  .ai-label {
    font-size: 10px;
  }

  .ai-wave {
    display: none;
  }

  .ai-hint {
    font-size: 10px;
    bottom: -42px;
  }

  /* Control bar — đảm bảo nằm trên status bar, không tràn */
  .control-bar {
    bottom: calc(48px + env(safe-area-inset-bottom));
    padding: 8px 10px;
    gap: 2px;
    max-width: calc(100vw - 16px);
  }

  .ctrl-btn {
    padding: 6px 8px;
    min-width: 52px;
  }

  .ctrl-icon {
    width: 32px;
    height: 32px;
  }

  .ctrl-icon svg {
    width: 18px;
    height: 18px;
  }

  .ctrl-label {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  /* Status bar — gọn lại, ẩn ngày tháng */
  .status-bar {
    padding: 6px 14px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    font-size: 10px;
  }

  .status-left {
    gap: 10px;
  }

  .status-item:nth-child(3) {
    display: none;
  }

  /* ẩn date */
  .status-handbook {
    padding: 5px 10px;
    font-size: 10px;
    gap: 4px;
  }

  .status-handbook svg:last-child {
    display: none;
  }

  /* Modal chiếm gần full screen */
  .modal-backdrop {
    padding: 12px;
  }

  .modal {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 16px;
  }

  .modal-header {
    padding: 14px 18px;
  }

  .modal-title {
    font-size: 16px;
  }

  .modal-body {
    padding: 16px 18px;
    font-size: 13px;
  }
}

/* ============ PHONE NHỎ (≤ 480px) ============ */
@media (max-width: 480px) {
  .logo-block {
    gap: 8px;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
  }

  .logo-name {
    font-size: 15px;
    letter-spacing: 0.5px;
  }

  .logo-slogan {
    display: none;
  }

  .top-right-controls {
    gap: 4px;
  }

  .btn-pill {
    padding: 5px 8px;
    font-size: 11px;
  }

  .btn-pill svg:first-child {
    width: 14px;
    height: 14px;
  }

  .btn-pill svg:last-child {
    width: 10px;
    height: 10px;
  }

  .btn-icon {
    width: 34px;
    height: 34px;
  }

  .center-stage {
    gap: 22px;
  }

  .title-main {
    font-size: 38px;
    letter-spacing: 2px;
  }

  .title-script {
    font-size: 18px;
  }

  .title-sub {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .ai-button {
    width: 130px;
    height: 130px;
  }

  .ai-core {
    width: 84px;
    height: 84px;
  }

  .ai-core svg {
    width: 28px;
    height: 28px;
  }

  .ai-label {
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  /* Status bar tối giản: chỉ giữ trạng thái online */
  .status-bar {
    padding: 5px 10px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    font-size: 9.5px;
  }

  .status-left {
    gap: 8px;
  }

  .status-item:nth-child(2) {
    display: none;
  }

  /* ẩn cả time */
  .status-handbook span {
    display: none;
  }

  /* chỉ giữ icon */
  .status-handbook {
    padding: 5px 8px;
  }

  .control-bar {
    bottom: calc(36px + env(safe-area-inset-bottom));
    gap: 0;
    padding: 6px 8px;
  }

  .ctrl-btn {
    padding: 5px 6px;
    min-width: 48px;
  }

  .ctrl-icon {
    width: 28px;
    height: 28px;
  }

  .ctrl-icon svg {
    width: 16px;
    height: 16px;
  }

  .ctrl-label {
    font-size: 8px;
  }

  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-height: 92vh;
    border-radius: 12px;
  }

  .modal-header {
    padding: 12px 14px;
  }

  .modal-title {
    font-size: 15px;
  }

  .modal-body {
    padding: 14px;
    font-size: 12.5px;
  }
}

/* ============ LANDSCAPE PHONE (chiều cao < 500px) ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .top-bar {
    padding: 6px 14px;
  }

  .logo-mark {
    width: 28px;
    height: 28px;
  }

  .logo-name {
    font-size: 14px;
  }

  .logo-slogan {
    display: none;
  }

  /* Ẩn title-block để dành chỗ cho VR */
  .title-block {
    display: none;
  }

  .center-stage {
    gap: 0;
  }

  .ai-button {
    width: 110px;
    height: 110px;
  }

  .ai-core {
    width: 70px;
    height: 70px;
  }

  .ai-core svg {
    width: 24px;
    height: 24px;
  }

  .ai-label {
    font-size: 8px;
  }

  .ai-hint {
    display: none;
  }

  .control-bar {
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 5px 8px;
  }

  .status-bar {
    display: none;
  }

  .ctrl-btn {
    padding: 4px 6px;
  }

  .ctrl-icon {
    width: 26px;
    height: 26px;
  }

  .ctrl-label {
    font-size: 7.5px;
  }
}

/* ============ TOUCH DEVICES — bỏ hover effects ============ */
@media (hover: none) and (pointer: coarse) {
  .ctrl-btn:hover {
    background: transparent;
    color: var(--text-secondary);
  }

  .btn-pill:hover,
  .btn-icon:hover,
  .status-handbook:hover {
    background: var(--panel-bg);
  }
}

/* ============ MAP HOVER POPUP ============ */
.map-hover-popup {
  position: fixed;
  z-index: 9999;
  width: 260px;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--accent-glow);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: 'Be Vietnam Pro', sans-serif;
}

.map-hover-popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.map-popup-thumb {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.map-popup-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.map-popup-rating span {
  color: #fff;
  font-weight: 400;
}

.map-popup-content {
  padding: 12px;
}

.map-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
  margin: 0 0 4px 0;
}

.map-popup-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-popup-actions {
  display: flex;
  gap: 6px;
}

.popup-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.popup-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.popup-btn.btn-vr {
  background: rgba(94, 234, 212, 0.1);
  color: var(--accent-cyan);
  border-color: rgba(94, 234, 212, 0.3);
}

.popup-btn.btn-vr:hover {
  background: rgba(94, 234, 212, 0.2);
}

.popup-btn svg {
  width: 14px;
  height: 14px;
}

/* Tooltip co lại trên màn hình hẹp để không tràn viewport */
@media (max-width: 480px) {
  .map-hover-popup {
    width: min(220px, calc(100vw - 24px));
  }

  .map-popup-thumb {
    height: 96px;
  }

  .map-popup-content {
    padding: 10px;
  }

  .map-popup-title {
    font-size: 13px;
  }

  .map-popup-desc {
    font-size: 10.5px;
    margin-bottom: 8px;
  }
}

/* =====================================================
   RESPONSIVE: MOBILE LANDSCAPE (Ngang & Hẹp)
   Layout 3 vùng: mini-map (trái-dưới) — center-stage (giữa) — panel-right
   - Bỏ scale() vì làm rect không khớp click target & gây overlap mơ hồ
   - Dùng width % cố định, panels không full-width
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {

  /* Panels: cố định 2 bên, không còn là bottom-sheet */
  .panel-left,
  .panel-right {
    position: fixed;
    top: 50px;
    bottom: 56px;
    height: auto;
    max-height: calc(100vh - 110px);
    width: 38vw;
    max-width: 320px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border-radius: 12px;
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 28;
  }

  .panel-left {
    left: 8px;
    right: auto;
  }

  .panel-right {
    right: 8px;
    left: auto;
  }

  /* Khi panel ẩn (mobile-open class không có) → ẩn hẳn để không che VR.
     Bottom-sheet logic không áp dụng ở landscape. */
  .panel-left:not(.mobile-open),
  .panel-right:not(.mobile-open) {
    transform: translateY(calc(100% + 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.25s ease;
  }

  .panel-left.mobile-open,
  .panel-right.mobile-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Bỏ grip handle — không phải bottom sheet nữa */
  .panel-left::before,
  .panel-right::before {
    display: none;
  }

  /* VÔ HIỆU HOÁ .collapsed (cột 50px) ở landscape phone — sẽ kéo dài
     thành cột dọc cao chiếm hết bên trái màn hình. Layout landscape
     đã có panel cố định 38vw, không cần thu gọn cột. Click "thu gọn"
     trong landscape đã được JS chuyển sang đóng panel hẳn (closeAllSheets).
     Rule dưới đây ngăn .collapsed gây hiệu ứng phụ nếu class còn sót. */
  .panel-left.collapsed {
    width: 38vw;
    max-width: 320px;
    padding: 10px;
  }

  .panel-left.collapsed .panel-title,
  .panel-left.collapsed .destinations-list,
  .panel-left.collapsed .btn-see-all {
    display: revert;
  }

  .panel-left.collapsed .btn-collapse svg {
    transform: none;
  }

  /* Mini-map: bottom-left, không chồng control-bar */
  .mini-map {
    width: 160px;
    height: 110px;
    bottom: 60px;
    left: 8px;
    z-index: 35;
    display: flex;
    transform: none;
  }

  /* Center-stage: cho click xuyên qua khi không có button trực tiếp */
  .center-stage {
    pointer-events: none;
  }

  .center-stage>* {
    pointer-events: auto;
  }

  .title-main {
    font-size: 32px;
  }

  .ai-button {
    width: 120px;
    height: 120px;
    margin-top: -10px;
  }

  .ai-core {
    width: 76px;
    height: 76px;
  }

  .ai-core svg {
    width: 24px;
    height: 24px;
  }

  .ai-label {
    font-size: 9px;
  }

  /* Control-bar: thu gọn ở dưới, bỏ khoảng cách an toàn (status-bar đã ẩn) */
  .control-bar {
    bottom: 6px;
    padding: 5px 8px;
  }
}

/* =====================================================
   ADAPTIVE NARROW LAYOUT: TABLET + MOBILE LANDSCAPE
   Goal: keep panorama visible and prevent left/right panels overlapping.
   Mobile portrait is intentionally excluded here.
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px),
(max-height: 500px) and (orientation: landscape) {
  .ui-wrapper {
    z-index: 30;
  }

  .top-bar {
    padding: 8px 14px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
  }

  .logo-name {
    font-size: 15px;
    letter-spacing: 0.7px;
  }

  .logo-slogan {
    display: none;
  }

  .top-right-controls {
    gap: 6px;
  }

  .btn-pill {
    padding: 6px 10px;
    font-size: 11px;
  }

  .btn-icon {
    width: 34px;
    height: 34px;
  }

  .title-block {
    display: none;
  }

  .center-stage {
    pointer-events: none;
    gap: 0;
  }

  .center-stage>* {
    pointer-events: auto;
  }

  .ai-button {
    width: 112px;
    height: 112px;
  }

  .ai-core {
    width: 72px;
    height: 72px;
  }

  .ai-core svg {
    width: 24px;
    height: 24px;
  }

  .ai-label {
    font-size: 8px;
  }

  .ai-hint {
    display: none;
  }

  .panel-left,
  .panel-right {
    position: fixed;
    top: calc(max(8px, env(safe-area-inset-top)) + 44px);
    bottom: calc(54px + env(safe-area-inset-bottom));
    height: auto;
    max-height: none;
    width: min(42vw, 300px);
    max-width: 300px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    z-index: 42;
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.22s ease,
      width 0.24s ease,
      padding 0.24s ease;
  }

  .panel-left {
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    transform: translateX(calc(-100% - 18px));
  }

  .panel-right {
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    width: min(38vw, 320px);
    max-width: 320px;
    transform: translateX(calc(100% + 18px));
    /* Fit content height — no excess whitespace at bottom.
       Remove the shared bottom: 54px constraint; use max-height instead. */
    bottom: auto;
    height: auto;
    max-height: calc(100vh - max(8px, env(safe-area-inset-top)) - 44px - 64px - env(safe-area-inset-bottom));
    max-height: calc(100svh - max(8px, env(safe-area-inset-top)) - 44px - 64px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .panel-left.mobile-open,
  .panel-right.mobile-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .panel-left::before,
  .panel-right::before {
    display: none;
  }

  .panel-header {
    margin-bottom: 10px;
  }

  .panel-title {
    font-size: 11px;
    letter-spacing: 0.8px;
    line-height: 1.2;
  }

  .panel-desc {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .destinations-list {
    max-height: none;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dest-item {
    gap: 9px;
    padding: 7px;
    border-radius: 10px;
  }

  .dest-thumb {
    width: 54px;
    height: 42px;
    border-radius: 7px;
  }

  .dest-name {
    font-size: 12px;
  }

  .dest-desc {
    font-size: 10px;
  }

  .btn-see-all {
    padding: 8px;
    font-size: 11px;
    border-radius: 10px;
  }

  .stat-list {
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stat-item {
    gap: 9px;
    padding: 7px 2px;
  }

  .stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .stat-value {
    font-size: 14px;
  }

  .panel-left.collapsed {
    width: 48px;
    max-width: 48px;
    padding: 8px;
    overflow: visible;
  }

  .panel-left.collapsed .panel-header {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
  }

  .panel-left.collapsed .panel-header::after {
    content: none;
    display: none;
  }

  .panel-left.collapsed .panel-title,
  .panel-left.collapsed .destinations-list,
  .panel-left.collapsed .btn-see-all {
    display: none !important;
  }

  .panel-left.collapsed .btn-collapse {
    width: 32px;
    height: 32px;
    color: var(--accent-cyan);
    background: rgba(94, 234, 212, 0.16);
    border: 1px solid rgba(94, 234, 212, 0.34);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.16);
  }

  .panel-left .btn-collapse svg {
    transform: none;
  }

  .panel-left.collapsed .btn-collapse svg {
    transform: rotate(180deg);
  }

  .sheet-backdrop.open {
    opacity: 0;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ui-wrapper:has(.panel.mobile-open) .mini-map {
    opacity: 1;
    pointer-events: auto;
  }

  .mini-map {
    display: flex;
    width: 170px;
    height: 112px;
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(52px + env(safe-area-inset-bottom));
    border-radius: 10px;
    z-index: 36;
    transform: none;
    cursor: zoom-in;
  }

  body.layout-left-expanded .panel-left {
    /* Raise panel bottom above mini-map: map_bottom(62) + map_height(112) + gap(8) = 182 */
    bottom: calc(182px + env(safe-area-inset-bottom));
  }

  /* When mini-map is closed (.is-hidden), allow panel to use full height */
  body.layout-left-expanded:has(#mini-map.is-hidden) .panel-left {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }

  body.layout-left-expanded .mini-map:not(.expanded) {
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(62px + env(safe-area-inset-bottom));
  }

  body.layout-left-collapsed .mini-map:not(.expanded) {
    left: calc(max(8px, env(safe-area-inset-left)) + 58px);
  }

  .mini-map.expanded {
    left: 3vw;
    bottom: 3vh;
    width: 94vw;
    height: 94vh;
    cursor: default;
  }

  .mini-map-overlay-actions {
    top: 6px;
    right: 6px;
    gap: 5px;
  }

  .btn-map-action {
    width: 26px;
    height: 26px;
  }

  .control-bar {
    bottom: calc(6px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 16px);
    padding: 5px 8px;
    gap: 0;
  }

  .ctrl-btn {
    min-width: 48px;
    padding: 4px 6px;
  }

  .ctrl-icon {
    width: 26px;
    height: 26px;
  }

  .ctrl-icon svg {
    width: 16px;
    height: 16px;
  }

  .ctrl-label {
    font-size: 7.5px;
    letter-spacing: 0.35px;
  }

  .status-bar {
    padding: 5px 12px;
    font-size: 9.5px;
  }

  .status-left {
    gap: 8px;
  }

  .status-handbook {
    padding: 5px 9px;
    font-size: 9.5px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {

  .panel-left,
  .panel-right {
    top: calc(max(6px, env(safe-area-inset-top)) + 38px);
    bottom: calc(42px + env(safe-area-inset-bottom));
    width: min(40vw, 280px);
    max-width: 280px;
    padding: 10px;
  }

  .panel-right {
    width: min(38vw, 300px);
    max-width: 300px;
  }

  .panel-left.collapsed {
    width: 46px;
    max-width: 46px;
  }

  .mini-map {
    width: 124px;
    height: 82px;
    bottom: calc(44px + env(safe-area-inset-bottom));
  }

  body.layout-left-expanded .panel-left {
    bottom: calc(150px + env(safe-area-inset-bottom));
  }

  body.layout-left-expanded .mini-map:not(.expanded) {
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(56px + env(safe-area-inset-bottom));
  }

  body.layout-left-collapsed .mini-map:not(.expanded) {
    left: calc(max(8px, env(safe-area-inset-left)) + 56px);
  }

  .status-bar {
    display: none;
  }
}

/* ============ COMPACT OVERVIEW PANEL ============ */
#panel-overview {
  width: min(260px, calc(100vw - 48px));
  padding: 12px 13px;
  border-radius: 12px;
  background: rgba(5, 14, 26, 0.54);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#panel-overview .panel-header {
  margin-bottom: 7px;
  gap: 10px;
}

#panel-overview .panel-title {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-overview .btn-close {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

#panel-overview .btn-close svg {
  width: 12px;
  height: 12px;
}

#panel-overview .panel-desc {
  display: -webkit-box;
  margin-bottom: 8px;
  overflow: hidden;
  color: rgba(184, 197, 209, 0.86);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#panel-overview .stat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  overflow: visible;
}

#panel-overview .stat-item {
  min-width: 0;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

#panel-overview .stat-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

#panel-overview .stat-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  background: rgba(94, 234, 212, 0.08);
  color: var(--accent-cyan);
}

#panel-overview .stat-icon svg {
  width: 15px;
  height: 15px;
}

#panel-overview .stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

#panel-overview .stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

#panel-overview .stat-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Panel overview thumbnail */
.panel-overview-thumb {
  width: 100%;
  height: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  overflow: hidden;
  flex-shrink: 0;
  transition: height 0.3s ease, margin-bottom 0.3s ease;
}

.panel-overview-thumb.has-image {
  height: 110px;
  margin-bottom: 10px;
}

/* Modal overview detail thumbnail */
.overview-detail-thumb {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.04);
  margin-bottom: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Booking button distinct style */
#panel-overview .hotel-booking-item,
.overview-detail .hotel-booking-item {
  border-color: rgba(94, 234, 212, 0.3) !important;
  background: rgba(94, 234, 212, 0.06) !important;
}

#panel-overview .hotel-booking-item .stat-value,
#panel-overview .hotel-booking-item .hotel-booking-link,
.overview-detail .hotel-booking-item .stat-value,
.overview-detail .hotel-booking-item .hotel-booking-link {
  color: var(--accent-cyan) !important;
  font-weight: 600 !important;
}

#panel-overview .btn-detail {
  width: 100%;
  margin-top: 0;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

#panel-overview .btn-detail svg {
  width: 12px;
  height: 12px;
}

.modal-title {
  font-weight: 500;
}

.modal--overview-detail {
  max-width: 520px;
  border-radius: 14px;
}

.modal--overview-detail .modal-header {
  padding: 13px 16px;
}

.modal--overview-detail .modal-title {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal--overview-detail .modal-body {
  padding: 14px 16px 16px;
  font-size: 13px;
  line-height: 1.42;
}

.overview-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 400;
}

.overview-detail-desc {
  margin: 0;
  color: rgba(184, 197, 209, 0.9);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.42;
}

.overview-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
}

.overview-detail-stat {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(94, 234, 212, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.overview-detail-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(94, 234, 212, 0.08);
  color: var(--accent-cyan);
}

.overview-detail-icon svg {
  width: 13px;
  height: 13px;
}

.overview-detail-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  #panel-overview {
    width: min(92vw, 330px);
    padding: 11px 12px;
  }

  #panel-overview .panel-desc {
    font-size: 11px;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  #panel-overview .stat-list,
  .overview-detail-stats {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   RESPONSIVE IMPROVEMENTS — TABLET & SMALL LAPTOP
   Targets: iPad Pro/Air/Mini, Android Tablet, MacBook Air,
   Windows 1280×720, 1366×768, 1024×768
   ========================================================== */

/* ── Tablet portrait (769–1024px): mini-map slightly larger,
   recalculate panel-left bottom clearance to match.
   map_bottom(62) + map_height(118) + gap(12) = 192px         ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .mini-map:not(.expanded) {
    width: 180px;
    height: 118px;
  }

  body.layout-left-expanded .panel-left {
    bottom: calc(192px + env(safe-area-inset-bottom));
  }

  /* Recalc hidden-map fallback for portrait */
  body.layout-left-expanded:has(#mini-map.is-hidden) .panel-left {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* ── Tablet landscape (769–1024px, landscape): shorter viewport,
   compact mini-map so panel-left gets more room.              ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .panel-left,
  .panel-right {
    top: calc(max(6px, env(safe-area-inset-top)) + 42px);
    bottom: calc(50px + env(safe-area-inset-bottom));
  }

  /* Right panel: still fit-content, recalculate for shorter height */
  .panel-right {
    bottom: auto;
    max-height: calc(100vh - max(6px, env(safe-area-inset-top)) - 42px - 58px - env(safe-area-inset-bottom));
    max-height: calc(100svh - max(6px, env(safe-area-inset-top)) - 42px - 58px - env(safe-area-inset-bottom));
  }

  .mini-map:not(.expanded) {
    width: 160px;
    height: 104px;
    bottom: calc(52px + env(safe-area-inset-bottom));
  }

  /* map_bottom(52) + map_height(104) + gap(10) = 166 */
  body.layout-left-expanded .panel-left {
    bottom: calc(166px + env(safe-area-inset-bottom));
  }

  body.layout-left-expanded:has(#mini-map.is-hidden) .panel-left {
    bottom: calc(50px + env(safe-area-inset-bottom));
  }
}

/* ── Small laptop / large tablet (1025–1280px)
   Covers: Windows 1280×720, 1366×768; MacBook Air scaled down.
   Desktop layout but tighter — shrink panels & font sizes.   ── */
@media (min-width: 1025px) and (max-width: 1280px) {
  .panel-left {
    width: 246px;
    top: 88px;
    left: 18px;
    max-height: calc(100vh - 210px);
  }

  .panel-right {
    width: 252px;
    top: 88px;
    right: 18px;
    /* Already fit-content at desktop; guard against very short screens */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  .mini-map:not(.expanded) {
    width: 288px;
    height: 192px;
    bottom: 84px;
    left: 18px;
  }

  /* Ensure panel-left clears mini-map:
     top(88) + panel_max_height ≤ viewport − map_clearance(84+192+12=288) */
  .panel-left {
    max-height: calc(100vh - 88px - 288px - 12px);
  }

  .title-main {
    font-size: 74px;
    letter-spacing: 4px;
  }

  .title-script {
    font-size: 30px;
  }

  .title-sub {
    font-size: 14px;
    letter-spacing: 3px;
  }

  .ai-button {
    width: 168px;
    height: 168px;
  }

  .ai-core {
    width: 106px;
    height: 106px;
  }
}

/* ── Short landscape screens ≥769px, height ≤700px
   Covers: Windows 1366×768 landscape, landscape Android tablets. ── */
@media (min-width: 769px) and (max-height: 700px) and (orientation: landscape) {
  /* Only apply if NOT already handled by the mobile-landscape query */
  .top-bar {
    padding: 6px 14px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .logo-slogan {
    display: none;
  }

  .title-block {
    display: none;
  }

  .center-stage {
    gap: 0;
  }

  .ai-button {
    width: 100px;
    height: 100px;
  }

  .ai-core {
    width: 64px;
    height: 64px;
  }

  .ai-core svg {
    width: 20px;
    height: 20px;
  }

  .ai-label {
    font-size: 8px;
  }

  .ai-hint {
    display: none;
  }
}

/* ── Android tablet / large phone portrait (600–768px)
   These hit the mobile breakpoint but have more screen width.
   Improve bottom-sheet UX with slightly more generous sizing. ── */
@media (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {
  .panel-left,
  .panel-right {
    max-height: 68vh;
    padding: 16px 20px calc(22px + env(safe-area-inset-bottom));
  }

  .dest-item {
    padding: 10px 12px;
  }

  .dest-thumb {
    width: 74px;
    height: 58px;
  }

  .dest-name {
    font-size: 14px;
  }

  .dest-desc {
    font-size: 12px;
  }

  /* Mini-map: slightly larger & reposition above taller control-bar */
  .mini-map:not(.expanded) {
    width: 156px;
    height: 156px;
    bottom: calc(128px + env(safe-area-inset-bottom));
  }
}