/* Trang đọc: 4 theme, chữ thoải mái, thanh công cụ ẩn/hiện khi chạm */
.reader-page { padding-bottom: 0; background: var(--r-bg); color: var(--r-text); background-image: none; transition: background 0.3s, color 0.3s; }
.reader-page { --r-bg: #fffdfb; --r-panel: #ffffff; --r-text: #33242b; --r-muted: #8f7781; --r-line: #f1e3dc; --r-font: 'Lora', Georgia, serif; --r-size: 19px; --r-lh: 1.85; }
.reader-page[data-theme='cream'] { --r-bg: #fbf4e6; --r-panel: #f7eedb; --r-text: #3b2e1f; --r-muted: #84735a; --r-line: #eadfc6; }
.reader-page[data-theme='pink'] { --r-bg: #fdf0f2; --r-panel: #fbe5ea; --r-text: #3a2530; --r-muted: #94707c; --r-line: #f4d6dd; }
.reader-page[data-theme='dark'] { --r-bg: #1d1a1c; --r-panel: #2a2427; --r-text: #ddd2d6; --r-muted: #998a90; --r-line: #3a3236; }
.reader-page[data-font='sans'] { --r-font: 'Be Vietnam Pro', system-ui, sans-serif; }
.reader-page .panel { background: var(--r-panel); border-color: var(--r-line); }
.reader-page[data-theme='dark'] .btn-outline { background: transparent; color: var(--r-text); border-color: var(--r-line); }
.reader-page[data-theme='dark'] .sheet { background: #2a2427; color: var(--r-text); }
.reader-page[data-theme='dark'] .option-row { border-color: var(--r-line); }

.reader-bar {
  position: fixed; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: color-mix(in srgb, var(--r-bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.reader-top { top: 0; border-bottom: 1px solid var(--r-line); padding-top: max(6px, env(safe-area-inset-top)); }
.reader-bottom { bottom: 0; border-top: 1px solid var(--r-line); padding-bottom: calc(6px + var(--safe-bottom)); justify-content: space-between; }
.reader.chrome-hidden .reader-top { transform: translateY(-110%); }
.reader.chrome-hidden .reader-bottom { transform: translateY(110%); }
.reader .icon-btn { color: var(--r-text); }
.reader-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.reader-story { font-size: 12px; color: var(--r-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-chap { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-link { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--r-text); }
.rb-link.is-disabled { opacity: 0.35; }
.rb-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--r-line); overflow: hidden; margin: 0 6px; }
.rb-progress span { display: block; height: 100%; width: 0; background: var(--grad-primary); border-radius: 4px; }

.reader-content { max-width: 720px; margin: 0 auto; padding: 76px 20px 110px; }
.reader-title { font-family: var(--font-display); font-size: 26px; text-align: center; margin: 10px 0 26px; line-height: 1.3; }
.reader-title::after { content: '❀'; display: block; margin-top: 10px; font-size: 16px; color: var(--rose-500); opacity: 0.7; }
.reader-text { font-family: var(--r-font); font-size: var(--r-size); line-height: var(--r-lh); text-align: justify; hyphens: auto; word-break: break-word; }
.reader-text p { margin: 0 0 1em; }
.reader-text.is-locked { position: relative; max-height: 22em; overflow: hidden; }
.reader-text.is-locked::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12em; background: linear-gradient(180deg, transparent, var(--r-bg)); }
.lock-card { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 10px 0 30px; padding: 22px 18px; }
.lock-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-100); color: var(--rose-600); }
.lock-ico .icon { width: 26px; height: 26px; }
.reader-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 30px; }

.setting-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-group:last-child { border-bottom: 0; }
.setting-label { font-weight: 600; font-size: 15px; }
.theme-swatches { display: flex; gap: 10px; }
.theme-swatches button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line-strong); }
.theme-swatches button[data-theme='white'] { background: #fffdfb; }
.theme-swatches button[data-theme='cream'] { background: #fbf4e6; }
.theme-swatches button[data-theme='pink'] { background: #fbe0e6; }
.theme-swatches button[data-theme='dark'] { background: #1d1a1c; }
.theme-swatches button.is-active { border-color: var(--coral-500); box-shadow: 0 0 0 3px rgba(230, 101, 74, 0.2); }
.stepper { display: flex; align-items: center; gap: 4px; background: var(--pink-50); border-radius: var(--radius-pill); padding: 4px; }
.stepper button { width: 44px; height: 36px; border: 0; border-radius: var(--radius-pill); background: #fff; font-weight: 700; color: var(--ink); }
.stepper output { min-width: 32px; text-align: center; font-weight: 700; color: var(--ink); }
.seg { display: flex; gap: 4px; background: var(--pink-50); border-radius: var(--radius-pill); padding: 4px; }
.seg button { height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button.is-active { background: #fff; color: var(--coral-600); box-shadow: var(--shadow-sm); }

.audio-mini { position: fixed; left: 12px; right: 12px; bottom: calc(64px + var(--safe-bottom)); z-index: 45; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); max-width: 560px; margin: 0 auto; }
.audio-mini .icon-btn { color: var(--coral-600); }
.audio-info { display: flex; flex-direction: column; min-width: 0; flex: 0 1 140px; font-size: 12px; line-height: 1.3; color: var(--ink); }
.audio-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.audio-mini input[type='range'] { flex: 1; accent-color: var(--coral-500); }

@media (min-width: 1024px) {
  .reader-content { padding-top: 96px; }
  .reader-title { font-size: 32px; }
}