/* ===== Kiểu dáng bổ sung cho trình xem sách ===== */

/* Nút trên thanh công cụ */
.tbtn{
  padding: .3rem .5rem; border-radius: .5rem; font-size: .95rem; line-height: 1;
  background: transparent; color: #e2e8f0; transition: background .15s;
}
.tbtn:hover{ background: #475569; }
.tbtn.active{ background: #2563eb; color:#fff; }

.modebtn{ padding:.3rem .6rem; font-size:.8rem; background:#334155; color:#cbd5e1; }
.modebtn:hover{ background:#475569; }
.modebtn.active{ background:#2563eb; color:#fff; }

.tsep{ width:1px; height:22px; background:#475569; margin:0 2px; display:inline-block; }

/* Trang PDF ở chế độ tài liệu */
.pdf-page{
  position: relative; background:#fff; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.pdf-page canvas{ display:block; }

/* Lớp phủ dùng để vẽ / hiển thị highlight */
.hl-layer{ position:absolute; inset:0; }
.hl-layer.drawing{ cursor: crosshair; }
.hl-rect{
  position:absolute; background: rgba(255, 229, 0, .45);
  mix-blend-mode: multiply; border-radius:2px;
}
.hl-layer.drawing .hl-rect{ cursor: pointer; }
.hl-rect.temp{ background: rgba(255,229,0,.3); outline:1px dashed #b45309; }

/* Chế độ lật sách */
#flipContainer .stf__parent{ margin:0 auto; }
.flip-book{ box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.flip-page{ background:#fff; }
.flip-page img{ width:100%; height:100%; display:block; }

/* Lớp phủ rọi đèn */
#spotlightOverlay{
  position:absolute; inset:0; z-index:20; pointer-events:none;
  background: rgba(0,0,0,.78);
}

/* 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); } }

/* Thẻ trong thư viện */
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  transition: transform .12s, box-shadow .12s; cursor:pointer;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* Ẩn spinner của input number */
#pageInput::-webkit-outer-spin-button,
#pageInput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#pageInput{ -moz-appearance:textfield; }