/**
 * ar_sachnoi_style.css
 * ------------------------------------------------------------
 * Giao diện module SÁCH NÓI 3D.
 *
 * (A) THANH KỆ SÁCH: dải nhỏ, kính trong suốt, viền "chạy" công nghệ, cuộn
 *     ngang tự động kiểu marquee từ phải qua trái khi có nhiều hơn 5 quyển -
 *     mỗi ô hiện đúng ảnh Bìa 1 làm nền.
 * (B) MÀN HÌNH CHI TIẾT: chiếm TOÀN MÀN HÌNH khi chọn 1 quyển - nền lưới công
 *     nghệ, sách 3D lớn xoay chậm ở trên có viền sáng + vệt quét ánh sáng,
 *     bên dưới là các dòng thông tin chạy chữ đồng loạt (typewriter) + dải EQ.
 */

/* ==================== (A) THANH KỆ SÁCH (marquee nhỏ gọn) ==================== */
/* (2) Hiệu ứng ẩn/hiện chuyển MƯỢT bằng transition opacity+transform (không
   còn bật/tắt "display" đột ngột) - xem hàm hienPanel()/anPanel() trong JS:
   JS luôn bật display trước, đợi 1 khung hình rồi mới thêm class .sn-visible
   để trình duyệt CHẠY ĐÚNG transition; lúc ẩn thì bỏ class trước, đợi hết
   transition rồi mới thật sự display:none - tránh mọi trường hợp "kẹt" lại
   1 lớp trong suốt vẫn chặn thao tác (nguyên nhân có thể gây cảm giác
   "màn hình đen" dù không thấy rõ - lớp phủ vẫn còn value trong DOM). */
#ar-sn-shelf-bar {
  position: fixed !important; left: 0; right: 0; bottom: 0 !important; z-index: 887777 !important;
  display: none; justify-content: center;
  padding: 0 10px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  box-sizing: border-box; pointer-events: none;
  opacity: 0; transition: opacity 0.28s ease;
}
#ar-sn-shelf-bar.sn-visible { opacity: 1; }
#ar-sn-shelf-card {
  width: min(460px, 100%); pointer-events: auto;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,159,64,0.5);
  background: rgba(4, 10, 20, 0.32);
  box-shadow: 0 0 20px rgba(255,159,64,0.22);
  color: #fff; box-sizing: border-box; padding: 8px 10px;
  overflow: hidden;
  transform: translateY(16px); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
#ar-sn-shelf-bar.sn-visible #ar-sn-shelf-card { transform: translateY(0); }
#ar-sn-shelf-bar:not(.sn-visible) #ar-sn-shelf-card { pointer-events: none; }
#ar-sn-shelf-title {
  font-size: 10.5px; font-weight: bold; color: #ff9f40; letter-spacing: 0.4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center;
}
#ar-sn-shelf-title .sn-count { font-size: 9.5px; color: rgba(255,255,255,0.55); font-weight: 400; }

/* (1) Kệ sách giờ CUỘN NGANG BẰNG TAY (vuốt) - KHÔNG còn tự chạy marquee nữa
   theo đúng yêu cầu ("phải do tôi kéo chọn"). -webkit-overflow-scrolling để
   cuộn mượt trên iOS Safari cũ. */
.sn-shelf-viewport { overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sn-shelf-viewport::-webkit-scrollbar { display: none; }
.sn-shelf-track { display: flex; gap: 8px; width: max-content; }
.sn-shelf-track.sn-no-marquee { justify-content: center; }

/* Ô sách NHỎ, trong suốt (kính), viền phát sáng công nghệ - dùng box-shadow
   nhấp nháy (an toàn, tương thích mọi trình duyệt) thay cho conic-gradient +
   @property (một số WebView Android cũ không hỗ trợ, dễ mất hiệu ứng). */
.sn-book-tile {
  flex: none; width: 46px; cursor: pointer; text-align: center; position: relative;
  padding: 3px; border-radius: 8px; background: rgba(255,159,64,0.06);
  border: 1px solid rgba(255,159,64,0.55);
  animation: sn-tile-glow 2.2s ease-in-out infinite;
}
@keyframes sn-tile-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,159,64,0.25); border-color: rgba(255,159,64,0.4); }
  50% { box-shadow: 0 0 10px rgba(255,159,64,0.65); border-color: #ffdc80; }
}
.sn-book-tile.dang-chon { border-color: #ff9f40; box-shadow: 0 0 12px rgba(255,159,64,0.8); animation: none; }
.sn-book-cover {
  width: 100%; height: 62px; border-radius: 5px; background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sn-book-name {
  font-size: 8px; font-weight: 700; color: #fff; margin-top: 3px; line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sn-shelf-btn-row { display: flex; gap: 6px; margin-top: 6px; }
.sn-shelf-btn {
  flex: 1; border-radius: 8px; padding: 6px 0; font-size: 9.5px; font-weight: bold;
  cursor: pointer; border: 1px solid rgba(255,159,64,0.45); background: rgba(255,159,64,0.08); color: #ff9f40;
}
.sn-shelf-btn.sn-tathan { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ffb3b3; }

#btn-reopen-sn {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 89997; display: none; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #3a2400, #5c3d00);
  color: #ff9f40; border: 2px solid #ff9f40; border-radius: 30px;
  padding: 11px 20px; font-size: 11px; font-weight: bold; letter-spacing: 1px;
  cursor: pointer; text-transform: uppercase;
  box-shadow: 0 0 15px rgba(255,159,64,0.4);
}

.hud-empty-hint { font-size: 12px; color: rgba(255,255,255,0.65); text-align: center; padding: 16px 10px; font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }

/* ==================== (B) MÀN HÌNH CHI TIẾT TOÀN MÀN HÌNH ==================== */
#ar-sn-full {
  position: fixed !important; inset: 0 !important; z-index: 888800 !important;
  display: none; flex-direction: column;
  background: transparent; /* (SỬA LỖI "sách/nhân vật không hiện ra") KHÔNG
    còn phủ nền tối lên TOÀN BỘ panel như trước - nền tối chỉ đặt ở
    #ar-sn-full-info/#ar-sn-full-btnrow (khối chữ + nút) bên dưới, còn vùng
    #ar-sn-stage-space phía trên giờ HOÀN TOÀN TRONG SUỐT để lộ rõ camera +
    sách 3D/người thuyết minh (đang gắn vào camera scene chính) phía sau -
    trước đây dù đã chừa khoảng trống DOM đúng chỗ nhưng nền gradient tối phủ
    khắp panel (kể cả khoảng trống đó) nên sách/nhân vật tuy vẫn render đúng
    nhưng gần như vô hình vì bị lớp phủ tối đè lên trên. */
  color: #fff; padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  box-sizing: border-box; overflow: hidden;
  opacity: 0; transform: scale(0.96); transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
#ar-sn-full.sn-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
#ar-sn-full .sn-full-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,159,64,0.09) 0px, rgba(255,159,64,0.09) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(255,159,64,0.09) 0px, rgba(255,159,64,0.09) 1px, transparent 1px, transparent 28px);
}
#ar-sn-full > * { position: relative; z-index: 1; }

/* (1) Khoảng trống TRONG SUỐT canh giữa TRÊN CÙNG - nơi sách 3D đang trưng
   bày (neo trong không gian thật) hiện xuyên qua. Đã bỏ người thuyết minh
   nên khoảng này được TĂNG LÊN (khung info bên dưới thu gọn lại tương ứng) -
   thấy rõ sách 3D quay hơn. Có khung góc kiểu công nghệ (HUD) trang trí. */
#ar-sn-stage-space { flex: none; height: min(240px, 36vh); position: relative; }
#ar-sn-stage-space::before, #ar-sn-stage-space::after,
#ar-sn-stage-corners span { box-sizing: border-box; }
.sn-stage-corner {
  position: absolute; width: 22px; height: 22px; z-index: 2;
  border: 2px solid rgba(255,159,64,0.8); filter: drop-shadow(0 0 4px rgba(255,159,64,0.5));
}
.sn-stage-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.sn-stage-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.sn-stage-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.sn-stage-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.sn-stage-scanline {
  position: absolute; left: 8px; right: 8px; height: 2px; top: 0; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,200,120,0.9), transparent);
  box-shadow: 0 0 8px 1px rgba(255,159,64,0.7);
  animation: sn-stage-scan 3.2s ease-in-out infinite;
}
@keyframes sn-stage-scan {
  0% { top: 6%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 94%; opacity: 0; }
}

/* Khối bìa sách xoay 3D THUẦN CSS (transform-style: preserve-3d) - KHÔNG
   dùng canvas/WebGL nào cả nên không thể xung đột với cảnh AR chính (bài
   học từ lần thử nhúng thêm 1 <a-scene> độc lập gây vỡ camera thật). Mặc
   định đứng yên (animation-play-state: paused) - chỉ quay khi thêm class
   "sn-spin" (lúc đang xem chi tiết 1 quyển). */
#ar-sn-cover3d-wrap {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  perspective: 900px; -webkit-perspective: 900px;
}
#ar-sn-cover3d {
  position: relative; width: 108px; height: 148px;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  will-change: transform;
}
/* (SỬA LỖI "lúc 3D lúc phẳng như ảnh xoay, gáy không đầy đủ") CHỈ chạy đúng
   1 vòng 360° (animation-iteration-count: 1, KHÔNG "infinite" nữa) mỗi khi
   class "sn-spin" được gắn - JS (chayChuTrinhCover3D) chủ động xoá rồi gắn
   lại class này mỗi chu kỳ để animation khởi động MỚI HOÀN TOÀN từ đầu, tránh
   hiện tượng trôi/chập chờn dần theo thời gian mà animation lặp vô hạn hay
   gặp trên một số trình duyệt di động. */
#ar-sn-cover3d-wrap.sn-spin #ar-sn-cover3d {
  animation: sn-cover3d-spin 3.4s cubic-bezier(0.45, 0, 0.55, 1) 1;
}
@keyframes sn-cover3d-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.sn-c3d-face {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  background-color: #c9a876;
  border: 1.5px solid rgba(255,255,255,0.65);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.sn-c3d-front { transform: translateZ(9px); -webkit-transform: translateZ(9px); }
.sn-c3d-back { transform: rotateY(180deg) translateZ(9px); -webkit-transform: rotateY(180deg) translateZ(9px); }
.sn-c3d-spine {
  width: 18px; left: 45px; border-radius: 2px;
  transform: rotateY(90deg) translateZ(54px); -webkit-transform: rotateY(90deg) translateZ(54px);
}
.sn-c3d-img { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Pha 2 (đứng yên, mặt trước quay ra ngoài): ánh sáng trắng quét ngang qua
   sách - 1 dải sáng chéo (skew) chạy từ trái sang phải, nằm NGOÀI khối 3D
   (sibling, không bị rotateY tác động) nên luôn quét đúng hướng người xem. */
.sn-c3d-flash-sweep {
  position: absolute; top: 6%; bottom: 6%; left: -55%; width: 32%; z-index: 3;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.05) 70%, transparent 100%);
  transform: skewX(-16deg); opacity: 0; pointer-events: none;
}
#ar-sn-cover3d-wrap.sn-flash .sn-c3d-flash-sweep {
  animation: sn-flash-sweep 1.1s ease-in-out 1;
}
@keyframes sn-flash-sweep {
  0%   { left: -55%; opacity: 0; }
  12%  { opacity: 1; }
  50%  { opacity: 1; }
  88%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* Pha 2: viền sách sáng vàng chớp chớp trong suốt ~10 giây (5 nhịp x 2s) */
#ar-sn-cover3d-wrap.sn-flash .sn-c3d-face {
  animation: sn-vien-vang-chop 2s ease-in-out infinite;
}
@keyframes sn-vien-vang-chop {
  0%, 100% { border-color: rgba(255,255,255,0.65); box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
  50% { border-color: #FFDC00; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px 4px rgba(255,220,0,0.9); }
}

#ar-sn-full-info {
  flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 2px; margin-top: 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(30,18,4,0.55) 0%, rgba(4,8,14,0.72) 30%, rgba(4,8,14,0.8) 100%);
  border-top: 1px solid rgba(255,159,64,0.3);
}
.sn-field { margin-bottom: 5px; }
.sn-field-label { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,190,110,0.85); font-weight: 700; margin-bottom: 1px; }
.sn-field-value { font-size: 12px; line-height: 1.4; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); min-height: 1.3em; }
.sn-field-value.sn-title-value { font-size: 15px; font-weight: 800; color: #ffdc80; text-shadow: 0 0 10px rgba(255,159,64,0.6), 0 1px 3px rgba(0,0,0,0.9); }
.sn-field-row3 { display: flex; gap: 12px; flex-wrap: wrap; }
.sn-field-row3 .sn-field { flex: 1; min-width: 80px; }

.sn-typing::after { content: '▌'; margin-left: 2px; color: #ffdc80; animation: sn-cursor-blink 0.8s steps(1) infinite; }
@keyframes sn-cursor-blink { 50% { opacity: 0; } }

.sn-player { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.sn-player-btn {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #ff9f40;
  background: rgba(255,159,64,0.15); color: #ff9f40; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sn-player-btn:active { background: rgba(255,159,64,0.3); }
.sn-eq { flex: 1; height: 40px; display: flex; align-items: flex-end; gap: 3px; }
.sn-eq-bar {
  flex: 1; height: 6%; min-height: 3px; border-radius: 2px 2px 0 0;
  background: linear-gradient(0deg, #ff9f40, #ffdc80);
  transition: height 0.06s linear;
}
.sn-time { flex: none; font-size: 10.5px; font-family: monospace; color: #ffdc80; min-width: 74px; text-align: right; }
.sn-tts-hint { font-size: 10.5px; color: rgba(255,255,255,0.6); margin: 2px 0 4px; font-style: italic; }

#ar-sn-full-btnrow { flex: none; display: flex; gap: 8px; margin-top: 0; padding: 8px 10px 10px; background: rgba(4,8,14,0.97); border-radius: 0 0 4px 4px; }
.sn-btn {
  flex: 1; border-radius: 10px; padding: 11px 0; font-size: 11.5px; font-weight: bold;
  cursor: pointer; letter-spacing: 0.4px;
  border: 1.5px solid rgba(255,159,64,0.5); background: rgba(255,159,64,0.08); color: #ff9f40;
}
.sn-btn.sn-close { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff; }
.sn-btn.sn-tathan { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ffb3b3; }

/* ================================================================
   TIÊU CHUẨN CHẤT LƯỢNG: tôn trọng "prefers-reduced-motion" - xem giải
   thích đầy đủ trong ar_gioithieu_style.css. Riêng chu trình xoay sách 3D
   (chayChuTrinhCover3D trong ar_sachnoi.js) vẫn cho phép chạy - đây là hiệu
   ứng CHÍNH của tính năng (không phải trang trí phụ), chỉ tắt phần chớp
   sáng/quét ánh sáng phụ trợ. ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sn-book-tile, .sn-typing::after, .sn-stage-scanline,
  #ar-sn-cover3d-wrap.sn-flash .sn-c3d-face, .sn-c3d-flash-sweep {
    animation: none !important;
  }
}

.sn-shelf-btn:focus-visible, .sn-book-tile:focus-visible, .sn-btn:focus-visible,
.sn-player-btn:focus-visible, #btn-reopen-sn:focus-visible {
  outline: 2px solid #ff9f40; outline-offset: 2px;
}