/* ===== Nền & phông ===== */
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, #e0edff 0, transparent 60%),
    radial-gradient(1000px 500px at 100% 0, #ede9fe 0, transparent 55%),
    #f1f5f9;
  min-height:100vh;
}
.font-display{ font-family:'Baloo 2','Nunito',sans-serif; }

/* xs breakpoint tiện cho nhãn tab trên màn hình nhỏ */
@media (min-width:480px){ .xs\:inline{ display:inline; } }

/* ===== Thanh chuyển khu vực (Sách / Trắc nghiệm) ===== */
.navtab{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.4rem .9rem; border-radius:9999px; font-weight:700; font-size:.95rem;
  color:#fff; opacity:.85; transition:all .15s; white-space:nowrap;
}
.navtab:hover{ opacity:1; background:rgba(255,255,255,.12); }
.navtab.active{ background:#fff; color:#4f46e5; opacity:1; box-shadow:0 2px 8px rgba(0,0,0,.15); }

/* ===== Thẻ (khối/môn/sách/bài) ===== */
.card{
  background:#fff; border:1px solid #e7e9f0; border-radius:1.25rem;
  transition: transform .14s, box-shadow .14s; cursor:pointer;
}
.card:hover{ transform: translateY(-3px); box-shadow:0 12px 30px rgba(37,99,235,.14); }
.drop-shadow{ filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }

/* ===== Trình xem sách — thanh công cụ ===== */
.tbtn{
  padding:.35rem .55rem; border-radius:.6rem; font-size:1rem; line-height:1;
  background:transparent; color:#e2e8f0; transition:background .15s;
}
.tbtn:hover{ background:#475569; }
.tbtn.active{ background:#2563eb; color:#fff; }
.tsep{ width:1px; height:22px; background:#475569; margin:0 2px; display:inline-block; }

/* Trang PDF */
.pdf-page{ position:relative; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.35); }
.pdf-page canvas{ display:block; }

/* Highlight */
.hl-layer{ position:absolute; inset:0; }
.hl-layer.drawing{ cursor:crosshair; touch-action:none; }     /* chặn cuộn cướp thao tác kéo */
.hl-rect{ position:absolute; background:rgba(255,229,0,.45); mix-blend-mode:multiply; border-radius:2px; pointer-events:none; }
.hl-rect.temp{ background:rgba(255,229,0,.3); outline:1px dashed #b45309; }

/* Khung xem vùng đã chọn (chọn vùng -> ảnh cắt phóng to) */
.zoom-frame{ position:absolute; inset:0; z-index:30; display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.92); padding:12px; cursor:zoom-out; }
.zoom-frame.show{ display:flex; }
.zoom-frame canvas{ max-width:100%; max-height:100%; }
.zoom-frame-close{ position:absolute; top:10px; right:12px; z-index:2; background:#fff; color:#0f172a;
  border-radius:9999px; padding:.35rem .8rem; font-weight:700; font-size:.85rem; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.zoom-frame-close:hover{ background:#f1f5f9; }
.zoom-frame-hint{ position:absolute; bottom:10px; left:0; right:0; text-align:center; color:#cbd5e1; font-size:.75rem; }

/* Lớp công cụ (kính lúp / chọn vùng) */
.tool-layer{ position:absolute; inset:0; z-index:15; pointer-events:none; touch-action:none; }
.tool-layer.active{ pointer-events:auto; }
.tool-layer.loupe{ cursor:zoom-in; }
.tool-layer.marquee{ cursor:crosshair; }
.marquee-rect{ position:absolute; border:2px dashed #38bdf8; background:rgba(56,189,248,.18); border-radius:3px; pointer-events:none; }

/* Rọi đèn */
#spotlightOverlay{ position:absolute; inset:0; z-index:20; pointer-events:none; background:rgba(0,0,0,.82); }

/* Spinner */
.spinner{ width:42px; height:42px; border:4px solid #94a3b8; border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Ẩn mũi tên input số trang */
#pageInput::-webkit-outer-spin-button,
#pageInput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#pageInput{ -moz-appearance:textfield; }