/* ===== eDA 1+1=3 (ALA) — BookVision/StoryPad CLM =====
   Canvas 1920x1080, auto-scale. Mọi hotspot là thẻ tĩnh .clmLoging trong HTML. */
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: #020b21;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

#stage {
  position: absolute;
  width: 1920px; height: 1080px;
  top: 50%; left: 50%;
  transform-origin: 0 0;
  animation: eda-fade .35s ease;
}
@keyframes eda-fade { from { opacity: 0; } to { opacity: 1; } }

#stage .bg {
  position: absolute; inset: 0;
  width: 1920px; height: 1080px;
  background-size: 1920px 1080px;
  background-repeat: no-repeat;
  z-index: 1;
}

/* hotspot phải nằm trên nền để nhận click (mục Hierarchy của tài liệu) */
.clmLoging { z-index: 20; }

.hotspot {
  position: absolute;
  cursor: pointer;
  border-radius: 74px;
  -webkit-tap-highlight-color: transparent;
}

/* đáp án trang 2 & trang 12: glow vàng khi rê chuột */
.hotspot.quizfx { transition: box-shadow .25s ease; }
.hotspot.quizfx:hover { box-shadow: 0 0 55px 18px rgba(245, 185, 60, .8); }

/* xương rồng trang 13/14/15: chỉ click, không hiệu ứng hover */
.hotspot.linkfx { border-radius: 40px; }

/* ---------- nav prev/next ---------- */
.nav-arrow {
  position: absolute;
  top: 50%; margin-top: -55px;
  width: 74px; height: 110px;
  cursor: pointer;
  opacity: .35;
  transition: opacity .2s;
  z-index: 50;
}
.nav-arrow:hover { opacity: .9; }
.nav-arrow svg { width: 100%; height: 100%; pointer-events: none; }
.nav-prev { left: 10px; }
.nav-next { right: 10px; }

/* lớp element tách rời — không chặn thao tác chạm */
.lay {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}