/* reader.css - [data-zone=reader] LÕI TĨNH LẶNG: nền phẳng, AAA, chỉ micro-transition <0.45s. */
@keyframes ca-crack { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }

[data-zone='reader'] { background: var(--bg-void); }
.reader { position: relative; min-height: calc(100vh - 60px); background: var(--r-bg); color: var(--r-ink); }
.reader-surface { position: relative; min-height: calc(100vh - 60px); }
.reader-scroll { max-width: 660px; margin: 0 auto; padding: 86px 24px 120px; }

.chapter-eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-ash); text-align: center; margin: 0 0 8px; }
.chapter-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; text-align: center; margin: 0; color: var(--r-ink); }
.chapter-title:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
.chapter-sub { font-family: var(--font-display); font-style: italic; font-size: 19px; text-align: center; color: var(--r-ash); margin: 4px 0 30px; }
.chapter-body { font-family: var(--r-fam, var(--font-body)); font-size: var(--r-size, 19px); line-height: var(--r-line, 1.8); color: var(--r-ink); }
.chapter-body p { margin: 0 0 20px; text-align: left; }
.chapter-end { text-align: center; font-size: 12px; letter-spacing: .22em; color: var(--r-ash); margin-top: 18px; }
.reader-empty { text-align: center; padding: 120px 20px; color: var(--r-ash); display: flex; flex-direction: column; gap: 18px; align-items: center; }

.ca-divider { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 34px 0 10px; opacity: .6; }
.ca-grain-line { width: 58px; height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 6px); }

/* Chrome ẩn/hiện (micro-transition) */
.reader-top, .reader-bottom { position: fixed; left: 0; right: 0; z-index: 20; transition: opacity .2s ease, transform .2s ease; }
.reader-top { top: 0; height: 64px; padding: 14px 18px 0; display: flex; align-items: center; gap: 14px; background: linear-gradient(to bottom, rgba(12,10,11,.92), rgba(12,10,11,0)); }
[data-theme='giay'] .reader-top { background: linear-gradient(to bottom, rgba(231,222,201,.95), rgba(231,222,201,0)); }
[data-theme='giay'] .reader-top, [data-theme='giay'] .reader-bottom { color: var(--r-ink); }
.reader-top.is-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.reader-bottom { bottom: 0; padding: 10px 22px 22px; background: linear-gradient(to top, rgba(12,10,11,.94), rgba(12,10,11,0)); }
[data-theme='giay'] .reader-bottom { background: linear-gradient(to top, rgba(231,222,201,.96), rgba(231,222,201,0)); }
.reader-bottom.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.reader-icon { color: var(--r-ink); border-radius: 50%; }
.reader-titlebar { flex: 1; min-width: 0; text-align: center; }
.reader-series { display: block; font-size: 13px; font-weight: 600; color: var(--r-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-chap { display: block; font-size: 12px; color: var(--r-ash); }

.reader-progress { height: 3px; background: rgba(160,150,130,.18); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.reader-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 3px; }
.reader-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--r-ash); }
.reader-navbtn { color: var(--r-ash); padding: 8px 10px; border-radius: var(--radius-sm); }
.reader-navbtn.reader-next { color: var(--gold-soft); }
.reader-navbtn.is-disabled { opacity: .4; }

.reader-bright { position: fixed; inset: 0; z-index: 15; pointer-events: none; }

/* Settings sheet */
.reader-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.reader-scrim.is-open { opacity: 1; pointer-events: auto; }
.reader-settings { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 660px; margin: 0 auto; background: var(--bg-raised); border-top: 1px solid var(--line-gold); border-radius: 22px 22px 0 0; padding: 18px 22px 30px; box-shadow: 0 -20px 50px rgba(0,0,0,.6); transform: translateY(110%); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.reader-settings.is-open { transform: translateY(0); opacity: 1; }
.rs-handle { width: 38px; height: 4px; background: var(--line); border-radius: 3px; margin: 0 auto 16px; }
.rs-group-label { color: var(--ink-ash); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 9px; }
.rs-seg { display: flex; gap: 9px; margin-bottom: 18px; }
.rs-segbtn { flex: 1; text-align: center; padding: 11px 0; border-radius: 8px; font-size: 13px; border: 1px solid var(--line); color: var(--ink-ash); transition: all .2s; }
.rs-segbtn.is-on { border-color: var(--gold); background: rgba(194,161,77,.12); color: var(--gold-soft); font-weight: 600; }
.rs-row { display: flex; gap: 14px; margin-bottom: 16px; }
.rs-row > div { flex: 1; }
.rs-pair { display: flex; gap: 9px; }
.rs-step { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 9px 0; color: var(--ink-bone); font-size: 16px; }
#rs-bright { width: 100%; accent-color: var(--gold); }

/* PAYWALL */
.paywall { text-align: center; padding: 80px 28px; display: flex; flex-direction: column; align-items: center; position: relative; }
.paywall-ember { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(192,57,43,.14), transparent 65%); pointer-events: none; }
.paywall-seal { position: relative; margin-bottom: 8px; }
.paywall-seal.is-cracking { animation: ca-crack .6s ease-out; }
.paywall-lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .6; }
.paywall-band { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-30deg); width: 158px; padding: 7px 0; background: linear-gradient(180deg,#9a2f2f,#742020); border-top: 1px solid rgba(236,228,214,.22); border-bottom: 1px solid rgba(0,0,0,.32); box-shadow: 0 3px 11px rgba(0,0,0,.55); color: #E8D8C0; font-size: 11px; letter-spacing: .34em; }
.paywall-title { font-size: 28px; color: var(--ink-bone); margin-top: 14px; }
.paywall-eyebrow { color: var(--ink-faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 0; }
.paywall-desc { color: var(--ink-ash); font-size: 14px; line-height: 1.6; margin: 14px 0 0; max-width: 280px; }
.paywall-balance { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: var(--bg-surface); border: 1px solid var(--line); padding: 8px 14px; border-radius: 20px; font-size: 13px; }
.paywall-balance b { color: var(--gold-soft); }
.paywall .btn { width: 100%; max-width: 320px; margin-top: 14px; }
.coin-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--gold-soft); }
.paywall-topup { color: var(--ink-faint); font-size: 12.5px; margin-top: 16px; }
.paywall-topup a, .paywall-balance a { color: var(--gold-soft); }