/*
 * Trình đọc sách (GĐ 10). Nạp RIÊNG ở trang sách, không nạp toàn cục như `eform.css` — trang này kéo
 * theo pdf.js và page-flip nên không có lý do gì bắt mọi trang khác trả tiền cho nó.
 *
 * Màu lấy từ token (ui-guidelines R1), không viết hex.
 */

.book-reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: 'crumbs crumbs' 'hero hero' 'body body';
  gap: 16px 20px;
  align-items: start;
}

.book-reader > .crumbs { grid-area: crumbs; }
.book-reader > .book-hero { grid-area: hero; }
.book-reader > .book-reader-body { grid-area: body; }
/* Hai trạng thái không-có-sách chiếm trọn bề ngang thay vì nép vào cột trái. */
.book-reader > .state,
.book-reader > .preview-note { grid-column: 1 / -1; }

/*
 * Khối "thân" trình đọc: toolbar · mục lục · trạng thái tải · flip · bên cạnh. Tách khỏi `.book-reader`
 * ở trên vì `book-hero.js` ẩn/hiện CẢ KHỐI này bằng thuộc tính `hidden` (id="book-reader") — hero đứng
 * ngoài khối này nên vẫn hiện dù trình đọc chưa mở.
 */
.book-reader-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: 'bar bar' 'stage side';
  gap: 16px 20px;
  align-items: start;
}
/*
 * `[hidden]` và `.book-reader-body` có specificity BẰNG NHAU (một thuộc tính, một lớp) — CSS tác giả
 * luôn thắng CSS mặc định của trình duyệt bất kể thứ tự, nên `display: grid` ở trên âm thầm VÔ HIỆU
 * HOÁ `[hidden] { display: none }`. `book-hero.js` đặt `reader.hidden = true` mà khối vẫn hiện ra —
 * lỗi đã bắt được khi đo bằng trình duyệt thật (§2c), không phải suy luận.
 */
.book-reader-body[hidden] { display: none; }

.book-reader-body > .book-toolbar { grid-area: bar; }
.book-reader-body > .book-stage { grid-area: stage; }
.book-reader-body > .book-side { grid-area: side; }
.book-reader-body > .state { grid-column: 1 / -1; }

.book-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.book-btn {
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.book-btn:hover { border-color: var(--red-border); }
.book-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.book-pageno { font-weight: 700; min-width: 90px; text-align: center; }

.book-search {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.book-stage {
  min-height: 420px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* `auto` chứ không `hidden`: phóng to làm cuốn sách rộng hơn ô nhìn, cắt đi thì nút + trở nên vô dụng. */
  overflow: auto;
}

/* Lớp phóng: bề rộng do JS đặt theo mức phóng; căn giữa khi hẹp hơn ô nhìn. */
.book-zoom { margin: 0 auto; }

/* page-flip tự đặt kích thước từng tờ; ở đây chỉ lo nền và canh giữa canvas bên trong. */
.book-leaf { background: var(--bg); display: flex; align-items: center; justify-content: center; }
.book-leaf canvas { display: block; max-width: 100%; }

.book-side { display: flex; flex-direction: column; gap: 16px; }

.book-panel {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.book-panel h3 { margin: 0 0 10px; font-size: 1rem; }

.book-results,
.book-outline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.book-hit {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.book-hit:hover { border-color: var(--red-border); }
.book-hit b { display: block; color: var(--red-dark); }
.book-hit span { display: block; color: var(--ink-soft); font-size: 0.9em; }

.book-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  /* Dải 200 trang phải cuộn được, nếu không nó đẩy mọi khối khác xuống ngoài màn hình. */
  max-height: 420px;
  overflow-y: auto;
}

.book-thumb {
  padding: 4px;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.book-thumb img { display: block; width: 100%; height: auto; min-height: 40px; }
.book-thumb span { display: block; text-align: center; color: var(--ink-soft); font-size: 0.85em; }
.book-thumb-empty img { display: none; }

.book-group { margin-top: 20px; }
.book-group-title {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--red-soft);
  color: var(--red-dark);
}

/* Điện thoại: một cột, khối bên cạnh xuống dưới khung sách. */
@media (max-width: 900px) {
  .book-reader {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'crumbs' 'hero' 'body';
  }
  .book-reader-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'bar' 'stage' 'side';
  }
  .book-thumbs { max-height: 260px; }
}

/*
 * 🔄 2026-09-11: lập luận "kiosk là màn cảm ứng cho người cao tuổi, 48px là quá nhỏ" ĐÃ ĐÚNG nhưng
 * trước đây chỉ áp cho riêng trang sách. Nay nó là luật chung ở `kiosk.css` và phủ cả ô tìm, bộ lọc,
 * nút "Bỏ lọc", chip trang cổng. Ở đây chỉ còn phần RIÊNG của trang sách.
 */
html[data-kiosk='1'] .book-btn { min-width: var(--tap-min); font-size: 1.05rem; }
html[data-kiosk='1'] .book-thumbs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
html[data-kiosk='1'] .book-thumb { min-height: var(--tap-min); }

/* Hero giới thiệu — trước trình đọc (`grid-area: hero` khai ở đầu file). */
.book-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.book-hero-cover canvas {
  display: block;
  max-width: 200px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.book-hero-info { flex: 1 1 260px; }
.book-hero-eyebrow {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.book-hero-info h2 { margin: 0 0 6px; }
.book-hero-agency { margin: 0 0 6px; color: var(--ink-soft); }
.book-hero-desc { margin: 0 0 10px; max-width: 60ch; color: var(--ink-soft); }

.book-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 10px 0 16px;
  padding: 0;
  color: var(--ink-soft);
}
.book-hero-stats b { color: var(--ink); }

.book-btn-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
}
.book-btn-primary:hover { border-color: var(--gold-dark); }

/* Mục lục theo chương — drawer trượt từ phải, khung dựng sẵn SSR (`hidden` do JS toggle). */
.book-toc-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  background: rgb(0 0 0 / 45%);
}
/* Cùng lý do đã ghi ở `.book-reader-body[hidden]` — `display: flex` ở trên đè mất `[hidden]`. */
.book-toc-drawer[hidden] { display: none; }

.book-toc-panel {
  width: min(360px, 92vw);
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background: var(--paper);
}

.book-toc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.book-toc-head h3 { margin: 0; }
.book-toc-head button {
  min-height: 44px;
  min-width: 44px;
  font: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.book-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.book-toc-item {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.book-toc-item:hover { border-color: var(--red-border); }

@media (max-width: 900px) {
  .book-hero { flex-direction: column; text-align: center; }
  .book-hero-stats { justify-content: center; }
  .book-toc-panel { width: 100%; }
}

html[data-kiosk='1'] .book-btn-primary,
html[data-kiosk='1'] .book-toc-item,
html[data-kiosk='1'] [data-book-toc-open] {
  min-height: var(--tap-min);
}