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

/* Nền zone = nền reader THẬT (--r-bg), KHÔNG phải --bg-void (#0C0A0B đen).
   Trước 17/7 dùng bg-void -> chương 6-20 (readerZone nhưng KHÔNG SSR prose -> không có .ssr-reader ở dòng 16)
   hiện nền ĐEN rồi hydrate mới đổi sang theme sáng = CHỚP ĐEN⚡SÁNG mỗi lần mở chương. */
[data-zone='reader'] { background: var(--r-bg); }
/* Reader = immersive (lõi tĩnh lặng): ẩn header marketing (sticky z-40) trong zone reader để chrome riêng của reader hiện - reader-top (nút quay lại + bánh răng cài đặt) + vạch progress đều bị header che nếu không ẩn. */
body:has(#app[data-zone='reader']) .site-header { display: none; }
.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; }

/* ---- SSR mirror trang đọc (route /doc/*): node <article class="ssr-seo ssr-reader"> do functions/_middleware.js chèn ----
   Tái dùng class reader thật (.chapter-context/.chapter-title/.chapter-body) nên phần lớn typography kế thừa reader.css
   (Lora 19px/1.8, ink #ECE4D6). Dưới đây chỉ: (1) khung = .reader-scroll, (2) nền = nền reader, (3) gỡ màu/giãn-dòng
   marketing (.ssr-seo p) đè lên prose. reader.css nạp SAU marketing.css nên .ssr-reader (cùng specificity) thắng .ssr-seo.
   Khi SPA hydrate, view reader render đè -> node .ssr-reader biến mất -> các rule này tự ngưng, KHÔNG đụng client reader. */
#app[data-zone='reader']:has(.ssr-reader) { background: var(--r-bg); }   /* nền = nền reader thật -> hết chớp nền lúc hydrate */
.ssr-reader { max-width: 660px; padding: 86px 24px 120px; }              /* = .reader-scroll: cùng bề ngang + chừa 86px cho chrome -> prose bắt đầu đúng chỗ (giữ margin:0 auto của .ssr-seo) */
.ssr-reader .chapter-context { color: var(--r-ash); line-height: 1.5; } /* đè .ssr-seo p (ash marketing) cho khớp r-ash */
.ssr-reader .chapter-title { margin: 0 0 30px; }                        /* h1 30px center (kế thừa .chapter-title) + khoảng dưới thay cho chapter-sub */
.ssr-reader .chapter-body p { color: var(--r-ink); line-height: var(--r-line, 1.8); } /* thắng .ssr-seo p (ash 1.7) -> đúng ink + giãn dòng reader (size/font kế thừa .chapter-body) */
.ssr-reader .ssr-next { margin-top: 28px; font-family: var(--font-ui); font-size: 14px; text-align: center; color: var(--r-ash); }
.ssr-reader .ssr-next a { color: var(--gold-soft); }

.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; }
/* Thanh ngữ cảnh khách lạnh (thay eyebrow trên trang chương): 1 dòng mỏng, mờ, KHÔNG uppercase để đủ chỗ chữ */
.chapter-context { font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--r-ash); opacity: .85; text-align: center; margin: 0 0 10px; }
.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; }
/* H1 client giờ gộp 'Chương N: tiêu đề' (khớp SSR) -> tự lo khoảng dưới, không còn .chapter-sub gánh. Scope trong .chapter để
   KHÔNG rò sang .chapter-title dùng chung ở danh sách chương (bài học contrast-leak 21/7). */
.chapter-title-full { margin: 0 0 30px; }
/* Nhãn 18+ đầu chương - CHỈ hiện khi chương gắn cờ adult trong chapterMeta (dormant khi vắng field) */
.chapter-adult-note { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-align: center; color: var(--r-ash); border: 1px solid currentColor; border-radius: 999px; padding: 4px 14px; width: fit-content; margin: -18px auto 26px; opacity: .8; }
.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)); }
/* MỘC (17/7): nền #C4B79C -> gradient chrome phải khớp nền, không thì thanh trên/dưới loang màu sai. */
[data-theme='moc'] .reader-top { background: linear-gradient(to bottom, rgba(196,183,156,.95), rgba(196,183,156,0)); }
[data-theme='giay'] .reader-top, [data-theme='giay'] .reader-bottom,
[data-theme='moc'] .reader-top, [data-theme='moc'] .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)); }
[data-theme='moc'] .reader-bottom { background: linear-gradient(to top, rgba(196,183,156,.96), rgba(196,183,156,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 { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(160,150,130,.18); overflow: hidden; z-index: 25; pointer-events: none; }
.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; }

/* Card "đọc chương tiếp theo" cuối chương (GĐ1 retention) - hiện TRONG prose flow, không phụ thuộc bottom-nav */
.next-card { display: block; margin: 30px auto 6px; max-width: 34rem; padding: 16px 20px; border: 1px solid var(--cover-accent, var(--line-gold)); border-radius: var(--radius-md); background: rgba(194,161,77,.06); text-decoration: none; transition: background .2s ease, transform .15s ease; }
.next-card:hover { background: rgba(194,161,77,.12); transform: translateY(-2px); }
.next-card-eyebrow { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--r-ash); margin-bottom: 6px; }
.next-card-title { display: block; margin: 0; font-family: var(--font-body); font-size: 1.12rem; color: var(--r-ink); line-height: 1.35; }
.next-card-cta { display: inline-block; margin-top: 12px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold-soft); }
.next-card--locked { border-style: dashed; }
.next-card--end { text-align: center; }
.next-card-lock { font-size: .9em; }
/* Binge rail chương mở: tease 1 câu chương sau + đếm free còn lại + nút to */
.next-card-tease { display: block; margin-top: 8px; font-family: var(--r-fam, var(--font-body)); font-style: italic; font-size: .95rem; line-height: 1.55; color: var(--r-ash); }
.next-card-tease[hidden] { display: none; } /* tôn trọng attribute hidden (author style thắng UA rule) */
.next-card-free { display: block; margin-top: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--r-ash); }
.next-card-btn { display: flex; margin-top: 14px; font-size: 16px; padding: 15px 22px; }

/* ---- Soft-login hint (cuối chương, từ ch4 trở đi, 1 lần/thiết bị) ---- */
.login-hint { position: relative; margin: 26px auto 6px; max-width: 34rem; padding: 18px 48px; border: 1px solid var(--line-gold); border-radius: var(--radius-md); background: rgba(194,161,77,.07); text-align: center; }
.login-hint-x { position: absolute; top: 0; right: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--r-ash); font-size: 22px; line-height: 1; }
.login-hint-x:hover { color: var(--r-ink); }
.login-hint-text { margin: 0 0 14px; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--r-ink); }
.login-hint-text strong { color: var(--gold-soft); font-weight: 600; }
.login-hint-btn { margin: 0 auto; }

/* ---- Lối thoát cross-ấn ở paywall ---- */
.paywall-cross { margin: 12px 0 0; font-family: var(--font-ui); font-size: 14px; color: var(--r-ash); text-align: center; }
.paywall-cross a { display: inline-block; padding: 10px 4px; color: var(--gold-soft); text-decoration: none; }
.paywall-cross a:hover { text-decoration: underline; }
.paywall-link { display: inline-flex; align-items: center; min-height: 40px; background: none; border: 0; padding: 0 6px; color: var(--gold-soft); font: inherit; cursor: pointer; text-decoration: underline; }

/* 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; }
/* Panel settings là CHROME nền tối cố định (--bg-raised #1F1917), nằm TRONG .reader[data-theme].
   Theme moc/giay ghi đè --gold/--gold-soft thành gold TỐI (cho nền đọc SÁNG) -> rò vào panel này
   làm nhãn nút active (color:var(--gold-soft)) tối trên nền tối = contrast 1.5. Reset accent về
   gold sáng :root cho toàn panel, độc lập theme đang chọn. */
.reader-settings { --gold: #C2A14D; --gold-soft: #D9C089; 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 render THẲNG lên reader surface (không nền riêng) -> PHẢI dùng biến reader theme-adaptive,
   không dùng --ink-* (màu sáng của zone tối). Theme mặc định = moc (nền SÁNG) khiến --ink-bone/ash/faint
   thành chữ-sáng-trên-nền-sáng = vô hình. --r-ink/--r-ash tự đảo theo theme (tối/sáng đều đọc được). */
.paywall-title { font-size: 28px; color: var(--r-ink); margin-top: 14px; }
.paywall-eyebrow { color: var(--r-ash); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 0; }
.paywall-desc { color: var(--r-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(--r-ash); font-size: 12.5px; margin-top: 16px; }  /* --ink-faint = màu zone tối, trên theme moc/giay chỉ 1.72:1 (sót lớp contrast-leak 21/7) -> --r-ash theme-adaptive */
.paywall-topup a, .paywall-balance a { color: var(--gold-soft); }

/* ── MOBILE (thêm 26/7): trước đây reader.css KHÔNG có một @media nào, padding 86px/24px áp y hệt cho màn 375px lẫn 1440px.
   Trên iPhone 375px: 660px max-width không bao giờ chạm, nhưng 24px x2 ngang ăn 13% bề ngang -> dòng còn ~34 ký tự,
   dưới dải 35-45 ký tự/dòng tối ưu cho đọc dài; 86px trên đẩy prose xuống dưới fold.
   PHẢI sửa .reader-scroll VÀ .ssr-reader trong CÙNG một rule: hai lớp này là cặp song sinh (SSR vs client),
   lệch nhau là layout nhảy lúc hydrate đúng trên 60% traffic deep-link. */
@media (max-width: 480px) {
  .reader-scroll, .ssr-reader { padding: 64px 18px 110px; }
  .chapter-title, .ssr-reader .chapter-title { font-size: 25px; }
  .chapter-context { font-size: 12px; }
}