/* Base */
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
#pano{position:fixed;inset:0;background:#000}

/* ——— Overlay ——— */
.start-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: #fff;
  transition: opacity 0.8s ease;
  font-family: "Roboto", sans-serif;
}
.start-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.lottie-box {
  width: 300px;
  height: 300px;
}
.loading-text {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #ccc;
  letter-spacing: 0.5px;
}

/* Toolbar/Panel/Debug */
.toolbar{position:fixed;left:12px;top:12px;display:flex;gap:8px;z-index:10}
.btn{padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;font-size:14px}
.btn:hover{background:rgba(0,0,0,.7)}
.btn-light{background:#eee;color:#111;border-color:#ddd}
.panel{position:fixed;right:12px;top:12px;max-width:360px;z-index:10;display:none;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.panel header{padding:10px 12px;font-weight:700;border-bottom:1px solid #eee;position:relative}
.panel .content{padding:12px;max-height:50vh;overflow:auto}
.panel .close{position:absolute;right:8px;top:8px;cursor:pointer;background:#eee;border-radius:8px;padding:4px 8px}
.debug{position:fixed;right:12px;top:12px;color:#fff;background:rgba(0,0,0,.6);padding:6px 8px;border-radius:8px;font:12px/1.2 monospace}

/* Loading */
.loading{position:fixed;inset:0;display:none;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:600;backdrop-filter:blur(1px);z-index:9}
.loading.active,.loading[style*="display: flex"]{display:flex}

/* Sidebar (trái) */
.side{position:fixed;left:0;top:0;bottom:0;width:min(320px,85vw);background:#1d2a42;color:#fff;border-right:1px solid rgba(255,255,255,.08);z-index:20;transform:translateX(0);display:flex;flex-direction:column;transition:transform .25s ease}
.side.collapsed{transform:translateX(-100%)}
.side-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-logo{height:68px}
.side-btn{background:#2b3e62;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.side-body{padding:6px 6px 80px;overflow:auto}
.grp{background:#223356;border:1px solid rgba(255,255,255,.08);border-radius:8px;margin:8px 0}
.ghead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer}
.gbody{display:none;padding:6px}
.grp.open .gbody{display:block}
.item{background:#2a3d64;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:8px 10px;cursor:pointer;margin:6px 0}
.item:hover{background:#314872}
.item.active{outline:2px solid #2b8cff}

/* Handle mở menu khi đóng */
.side-handle{position:fixed;left:0;top:30%;transform:translate(-40%,-50%);width:60px;height:68px;border-radius:50%;display:none;align-items:center;justify-content:center;background:#ff7a21;color:#132a4a;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:21}
.side-handle:active{transform:translate(-40%,-50%) scale(.98)}
body.menu-collapsed .side-handle{display:flex}

/* Marker label */
.marker__label{display: none;position:absolute;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);border-radius:8px;padding:4px 8px;white-space:nowrap;font-size:17px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.marker:hover .marker__label,
.icon-img:hover + .marker__label {
  display: block;
}

/* DOT */
:root{
  --dot-size: 18px;                 /* kích thước chấm */
  --dot-core:#16f501;               /* màu lõi */
  --dot-alt:#7c4dff;                /* màu phụ */
  --dot-contrast:#0b0e1a;           /* màu viền tương phản */
  --dot-shadow:rgba(0,0,0,.35);
}

/* ===== Base DOT (hit-area + tooltip) ===== */
.marker--dot{
  position:absolute; inset:auto;
  width:var(--dot-size); height:var(--dot-size);
  border-radius:50%;
  cursor:pointer;
  transform:translate(-50%,-50%);            /* tâm khớp toạ độ yaw/pitch */
  box-shadow:0 8px 18px var(--dot-shadow);
  /* hit area rộng hơn giúp dễ click */
}
.marker--dot::before{
  content:""; position:absolute; inset:-12px; border-radius:50%;
  /* hit-area trong suốt để dễ bấm trên mobile */
}
.marker--dot:hover{ filter:brightness(1.06) saturate(1.1); }

/* Tooltip nhỏ (dùng data-label) */
.marker--dot::after{
  content:attr(data-label);
  position:absolute; left:50%; top:calc(100% + 10px);
  transform:translateX(-50%);
  white-space:nowrap; pointer-events:none;
  font:600 12px/1.2 ui-sans-serif,system-ui,"Segoe UI",Roboto,Inter;
  color:#eaf6ff; background:rgba(6,10,22,.8);
  border:1px solid rgba(255,255,255,.15);
  padding:6px 8px; border-radius:8px;
  opacity:0; translate:0 4px; transition:opacity .2s, translate .2s;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.marker--dot:hover::after{ opacity:1; translate:0 0; }

/* ===== Motion keyframes ===== */
@keyframes pulse {
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.95 }
  70%  { transform:translate(-50%,-50%) scale(1.45); opacity:0 }
  100% { opacity:0 }
}
@keyframes rotateRing { to { transform:rotate(360deg) } }
@keyframes sonar {
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.55 }
  100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0 }
}
/* ===== 1) NEON GLOW ===== */
.marker--dot{
  background: radial-gradient(50% 50% at 50% 50%, #fff 0 12%, var(--dot-core) 12% 70%, #344d32 70% 100%);
  border:1px solid rgb(91 255 76);
}
.marker--dot::before,
.marker--dot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--dot-size); height:var(--dot-size); border-radius:50%;
  border:2px solid var(--dot-core);
  animation: sonar 1.8s ease-out infinite;
}
.marker--dot::after{ animation-delay:.6s; opacity:.35; }

/* ===== Trạng thái active / focus (tăng tương phản) ===== */
.marker--dot:focus-visible{
  outline:2px solid #fff; outline-offset:4px;
}
.marker--dot:active{ transform:translate(-50%,-50%) scale(.96); }

/* ===== Giảm chuyển động theo OS ===== */
@media (prefers-reduced-motion: reduce){
  .marker--dot,
  .marker--dot::before,
  .marker--dot::after{ animation:none !important; transition:none !important; }
}
/*end*/
/* PNG marker (arrow/location) */
.marker--img{position:absolute;background:transparent;box-shadow:none}
.marker--img .ico{width:60px;height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.marker--img .marker__label{top:56px}

/* Scene modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5)}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%, 900px);max-height:80vh;overflow:auto;background:#fff;border-radius:12px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #eee}
.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px}
.scene-card{background:#f7f7f9;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.scene-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.scene-card .cap{padding:8px 10px;font-weight:600;font-size:14px}
.audio-bar{
  position:fixed; right:14px; bottom:14px; z-index:9999;
  display:flex; gap:8px; align-items:center;
  background:#151a22; color:#e6edf3; border:1px solid #2a3140;
  padding:8px 10px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.35);
  font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
}
.audio-bar button{
  cursor:pointer; border:1px solid #2a3140; background:#1b2230; color:#fff;
  padding:6px 10px; border-radius:8px;
}
.audio-bar input[type="range"]{ width:120px; accent-color:#2b8cff; }
.audio-state{ opacity:.8; font-size:12px; min-width:70px; text-align:right; }
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgb(0 0 0 / 70%);
    color: #fff;
    padding: 35px 20px;
    display: flex; justify-content: space-evenly; align-items: center;
    font-size: 19px;
    z-index: 2000;
  }
  .cookie-banner button {
    background: #2b8cff;
    border: none; color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
  }
@media (max-width:640px){ .audio-bar{ right:8px; bottom:8px; } }
.preview-box {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  border: 2px solid #fff;
  padding: 5px;
  border-radius: 6px;
  z-index: 1000;
}
.preview-box img {
  width: 240px;
  height: auto;
  display: block;
}
.preview-box .caption {
  text-align: center;
  color: #fff;
  margin-top: 4px;
  font-size: 14px;
}
.nav-preview{ position:fixed; z-index:50; pointer-events:none; display:none; }
.nav-preview .preview-box{
  width:280px; background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.nav-preview img{ width:100%; height:150px; object-fit:cover; border-radius:6px; display:block; }
.nav-preview .preview-title{ color:#fff; font-weight:600; font-size:14px; text-align:center; margin-top:4px; }
/* Modal nền tối */
.modal {
  display: none; 
  position: fixed; 
  z-index: 2000; 
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
}

/* Nội dung modal */
.modal-content {
  background: #1b1f26;
  margin: 8% auto;
  padding: 20px;
  border-radius: 10px;
  width: 70%;
  color: white;
}

/* Nút đóng */
.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

/* Bố cục hướng dẫn */
.help-grid {
  display: flex;
  gap: 20px;
  justify-content: space-around;
  margin-top: 20px;
}
.help-item {
  text-align: center;
  max-width: 220px;
}
.help-item img {
  width: 80px;
  height: auto;
  margin-bottom: 10px;
}
.HDSD{
  text-align: center;

}
  #rotateOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
    padding: 20px;
  }
  #rotateOverlay img {
    width: 80px;
    margin-bottom: 20px;
    animation: rotatePhone 2s infinite;
  }