/* ==========================================================================
   Bãi cọc Bạch Đằng — phụ đề + thanh thuyết minh + thẻ ảnh tư liệu
   Gắn trong #app (không tự tạo stacking context) để z-index so được với
   UI viewer: card 26 · bar 27 · lightbox 45 · modal phim 50 · intro 60.
   ========================================================================== */

#bd-story-root {
  position: absolute;
  inset: 0;
  pointer-events: none;              /* không chặn thao tác xoay panorama */
  font-family: "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  color: #efe9dd;
}

/* ------------------------------- phụ đề ------------------------------- */
#bd-story-sub {
  position: absolute;
  left: 50%;
  bottom: 168px;
  transform: translateX(-50%);
  width: min(760px, 86vw);
  padding: 12px 18px 13px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(12, 13, 17, .86), rgba(12, 13, 17, .74));
  border: 1px solid rgba(217, 178, 106, .35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
#bd-story-sub.show { opacity: 1; visibility: visible; }
#bd-story-sub .now {
  font-size: 15px;
  line-height: 1.55;
  color: #efe9dd;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* ------------------------------ thẻ ảnh ------------------------------- */
#bd-story-card {
  position: absolute;
  right: 18px;
  top: 122px;
  z-index: 26;
  width: min(340px, 28vw);
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
#bd-story-card.show { opacity: 1; visibility: visible; transform: none; }
#bd-story-card .inner {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(217, 178, 106, .35);
  background: rgba(16, 18, 24, .82);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  cursor: zoom-in;
  pointer-events: auto;             /* bấm thẻ để mở ảnh lớn */
}
#bd-story-card img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
#bd-story-card .cap {
  padding: 9px 12px 11px;
  font-size: 12px;
  line-height: 1.45;
  color: #efe9dd;
}
#bd-story-card .cap::before {
  content: "ẢNH TƯ LIỆU";
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  color: var(--gold, #d9b26a);
}
#bd-story-card .cap:empty { display: none; }

@media (max-width: 900px) {
  #bd-story-card { display: none; }
}

/* ------------------------------ lightbox ------------------------------ */
#bd-story-lightbox {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(4, 5, 8, .9);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
#bd-story-lightbox.show { display: flex; }
#bd-story-lightbox img {
  max-width: 90vw;
  max-height: 78vh;
  border-radius: 12px;
  border: 1px solid rgba(217, 178, 106, .35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  pointer-events: none;
}
#bd-story-lightbox .cap {
  max-width: 82vw;
  font-size: 14px;
  text-align: center;
  color: #efe9dd;
}
#bd-story-lightbox .cap:empty { display: none; }
#bd-story-lightbox .hint {
  font-size: 12px;
  letter-spacing: .3px;
  color: rgba(185, 178, 164, .65);
}

/* --------------------- nút mời bật tiếng thuyết minh ------------------- */
#bd-story-sound {
  position: absolute;
  left: 50%;
  bottom: 290px;
  transform: translateX(-50%);
  z-index: 27;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--gold-soft, #f0d9a8);
  background: rgba(16, 18, 24, .9);
  border: 1px solid rgba(217, 178, 106, .5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  cursor: pointer;
  pointer-events: auto;
}
#bd-story-sound.show { display: flex; }
#bd-story-sound:hover { background: rgba(30, 26, 16, .95); }
#bd-story-sound .ico { font-size: 15px; }

/* ------------------- đụng độ UI có sẵn của viewer ------------------- */
/* Toast "Kéo chuột để xoay…" của app.js nằm ở bottom:190 -> đè phụ đề; dời lên trên */
body:has(#bd-story-root) .toast { bottom: 300px; }

@media (max-width: 720px) {
  #bd-story-sub {
    bottom: 150px;
    width: calc(100vw - 24px);
    padding: 10px 12px 11px;
  }
  #bd-story-sub .now { font-size: 13px; line-height: 1.5; }
  #bd-story-sound { bottom: auto; top: 96px; font-size: 12.5px; }
}