/* Rieng cua thu vien truyen nghe. Mau, hinh khoi, khoang cach chung nam o
   /assets/app.css — day chi giu ke truyen, trinh doc va trang nghe thu giong.

   Ten lop o day bi app.js va print.js goi thang (.book-card, .book-cover,
   .book-card-body, .cover-fallback, .book-badge, .art-page, .no-art,
   .page-dot, .active, .is-playing, .status, .show, body.reading). Khong doi
   ten chung sang tien to k-. */

body { padding:0 20px 80px; }

/* ---------- Dau trang ---------- */

.hero-actions { margin-top:var(--s-4); }
.hero-actions > * { margin:0 var(--s-2) var(--s-2) 0; }

/* ---------- Ke truyen ---------- */

.book-grid {
  display:grid;
  grid-gap:var(--s-3); gap:var(--s-3);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.book-card {
  position:relative;
  display:flex; flex-direction:column; text-align:left;
  padding:0; overflow:hidden; cursor:pointer;
  background:var(--surface); color:inherit;
  border:1px solid var(--edge); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.book-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lift); }
.book-card:active { transform:translateY(0); }
.book-card.active { border-color:var(--accent-deep); box-shadow:var(--shadow-lift); }

/* Anh bia cao co dinh thay cho aspect-ratio: Safari 12 chua co thuoc tinh do. */
.book-cover {
  display:block; width:100%; height:180px; object-fit:cover;
  background:var(--surface-2); border-bottom:1px solid var(--edge);
  flex:0 0 auto;
}
.cover-fallback .book-cover { object-fit:contain; }

.book-card-body {
  display:flex; flex:1 1 auto; flex-direction:column; justify-content:center;
  padding:var(--s-3) var(--s-4) var(--s-4);
}
.book-card h3 {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-lg);
  line-height:var(--lh-tight); margin:0 0 var(--s-1);
}
.book-card small { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ---------- Nhan "nghe duoc / chua co audio" ---------- */
/* Nen dung --accent-deep chu khong phai --accent: chu trang tren mau tuoi
   khong dat 4.5:1 theo WCAG AA. */

.book-badge {
  position:absolute; top:var(--s-2); left:var(--s-2); z-index:3;
  display:inline-block; padding:3px var(--s-3);
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700;
  background:var(--accent-deep); color:var(--accent-ink);
}
.book-badge.no-audio { background:var(--danger-deep); color:#FFFFFF; }
.book-badge.has-audio { background:#15803D; color:#FFFFFF; }
.book-badge.partial { background:var(--accent-deep); color:var(--accent-ink); }

/* ---------- Doi man: ke truyen <-> trinh doc ---------- */

.reader-card { display:none; }
body.reading .k-head,
body.reading .library-card { display:none; }
body.reading .reader-card { display:flex; }

/* ---------- Trinh doc ---------- */

.reader-card {
  flex-direction:column;
  background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
  padding:var(--s-4); margin-top:var(--s-5);
}
.reader-card > * { margin-bottom:var(--s-3); }
.reader-card > *:last-child { margin-bottom:0; }

.reader-head { display:flex; align-items:center; }
.reader-head h2 {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-xl);
  line-height:var(--lh-tight); margin:0;
}
.reader-head > div { margin:0 var(--s-3); }
.back-btn { flex:0 0 auto; padding:0 var(--s-4); }
.reader-print { flex:0 0 auto; margin-left:auto; padding:0 var(--s-4); }

.eyebrow {
  margin:0 0 var(--s-1); color:var(--accent-deep);
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase;
}

.ebook-page {
  margin:0; overflow:hidden;
  border:1px solid var(--edge); border-radius:var(--r-lg);
  background:var(--surface-2);
}

/* San tranh giu nen toi co dinh o ca hai che do sang/toi: tranh minh hoa co
   vien trang nen noi han len nen sam. */
.art-page {
  display:flex; align-items:center; justify-content:center;
  background:#1B1016; max-height:72vh; overflow:hidden;
  touch-action:pan-y;
}
.art-page.no-art { min-height:220px; }
.art-page.no-art:before {
  content:"Ảnh minh họa sẽ được bổ sung";
  color:#B9A4AE; font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-sm); letter-spacing:.06em; text-transform:uppercase;
  padding:var(--s-6); text-align:center;
}
.page-art { display:block; width:100%; height:auto; max-height:72vh; object-fit:contain; }

.text-page { background:var(--surface); color:var(--ink); padding:var(--s-4); }
.text-page h3 {
  font-family:var(--font-head); font-weight:700; margin:0 0 var(--s-2);
  font-size:21px;
  font-size:clamp(21px,5vw,28px);
  line-height:var(--lh-tight);
}
.text-page p:not(.eyebrow) {
  margin:0; color:var(--ink); white-space:pre-wrap; line-height:1.75;
  font-size:18px;
  font-size:clamp(18px,4vw,21px);
}

.reader-audio { width:100%; display:block; }
.reader-audio[src=""], .reader-audio:not([src]) { display:none; }

/* ---------- Cham trang ---------- */

.page-dots { display:flex; flex-wrap:wrap; justify-content:center; }
.page-dot {
  width:14px; height:14px; min-height:0; padding:0;
  margin:0 var(--s-1) var(--s-1) 0;
  border:1px solid var(--edge-strong); border-radius:var(--r-pill);
  background:var(--surface-2); cursor:pointer;
}
.page-dot.active { background:var(--accent-deep); border-color:var(--accent-deep); }

/* ---------- Thanh dieu khien ---------- */

.reader-bar {
  display:grid;
  grid-gap:var(--s-2); gap:var(--s-2);
  grid-template-columns:var(--tap) 1fr var(--tap);
  align-items:center;
  position:sticky; bottom:calc(var(--s-2) + env(safe-area-inset-bottom));
  padding:var(--s-1); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--edge);
  box-shadow:var(--shadow); z-index:5;
}
.nav-btn { width:var(--tap); padding:0; font-size:22px; line-height:1; }
.play-btn { width:100%; }
.play-btn.is-playing { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* ---------- Thong bao ngan ---------- */

.status {
  position:fixed; left:50%; bottom:calc(5rem + env(safe-area-inset-bottom));
  padding:var(--s-3) var(--s-4); border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper);
  opacity:0; pointer-events:none; z-index:20;
  transform:translate(-50%,1rem);
  transition:opacity .2s ease, transform .2s ease;
}
.status.show { opacity:1; transform:translate(-50%,0); }

/* ---------- Trang nghe thu giong ---------- */

.voice-card { padding:var(--s-4); }
.voice-card p { margin:0 0 var(--s-2); }
.voice-card p:last-child { margin-bottom:0; }
.voice-card h3 {
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-lg);
  line-height:var(--lh-tight); margin:0 0 var(--s-2);
}
.voice-card audio { width:100%; display:block; margin-bottom:var(--s-2); }
.voice-sample { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ---------- Man rong ---------- */

@media (min-width:600px) {
  .book-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .reader-bar {
    grid-template-columns:auto 1fr auto;
    max-width:30rem; margin-left:auto; margin-right:auto;
  }
  .nav-btn { width:8rem; font-size:16px; }
}

@media (min-width:960px) {
  .book-grid {
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    grid-gap:var(--s-4); gap:var(--s-4);
  }
  .book-cover { height:230px; }

  .reader-card { padding:var(--s-5); }
  body.reading .reader-card {
    display:grid;
    grid-gap:var(--s-4) var(--s-5); gap:var(--s-4) var(--s-5);
    grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
    grid-template-areas:
      "head head"
      "art  text"
      "art  audio"
      "dots dots"
      "bar  bar";
  }
  body.reading .reader-card > * { margin-bottom:0; }
  .reader-head { grid-area:head; }
  .art-page { grid-area:art; max-height:none; min-height:540px; }
  .text-page {
    grid-area:text; align-self:stretch;
    display:flex; flex-direction:column; justify-content:center;
    padding:var(--s-5);
  }
  .reader-audio { grid-area:audio; }
  .page-dots { grid-area:dots; }
  .reader-bar { grid-area:bar; position:static; background:transparent; border:0; box-shadow:none; padding:0; }
}

@media (prefers-reduced-motion: reduce) {
  .book-card { transition:none; }
  .book-card:hover { transform:none; }
  .status { transition:none; }
}