:root{
--bg:#f7f9fb;--surface:#eef2f6;--border:#d5dde5;--text:#22303c;--muted:#61707e;
--accent:#3f6d99;--hdr-bg:#2b3440;--hdr-text:#eef2f6;
--rd-bg:#f7f9fb;--rd-text:#22303c;
--on-accent:#fff;--accent-soft:#e5ebf1;--accent-ring:rgba(63,109,153,.28);
--r:8px;--gap:11px;--wrap:1260px;--fh:'Times New Roman',Georgia,'Noto Serif',serif;--cover-ar:2/3;
color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
font:15px/1.55 Arial,'Segoe UI',Roboto,'Noto Sans',sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px}
.hdr{position:relative;z-index:50;background:var(--hdr-bg);color:var(--hdr-text)}
.hdr a{color:var(--hdr-text)}
.hdr-in{display:flex;flex-wrap:nowrap;align-items:center;gap:22px;height:58px}
.brand{flex:none;font:700 22px/1 'Times New Roman',Georgia,'Noto Serif',serif;letter-spacing:.3px;white-space:nowrap}
.nav{display:flex;gap:16px;font-size:14px;white-space:nowrap;min-width:0;overflow:hidden}
@media(max-width:980px){.hdr-in{gap:14px}.nav{gap:11px;font-size:13px}.brand{font-size:20px}}
.search{margin-left:auto;position:relative;width:min(300px,38vw)}
.search input{width:100%;height:32px;padding:0 11px;border:0;border-radius:var(--r);
background:var(--bg);color:var(--text);font-size:14px}
.results{position:absolute;top:38px;right:0;width:min(380px,80vw);max-height:65vh;overflow:auto;
background:var(--bg);border:1px solid var(--border);border-radius:var(--r);z-index:300;
box-shadow:0 6px 22px rgba(0,0,0,.16)}
.results a{display:flex;gap:9px;padding:7px 9px;border-bottom:1px solid var(--border);color:var(--text)}
.results img{width:32px;height:48px;object-fit:cover;flex:none}
.results span{display:flex;flex-direction:column;justify-content:center;min-width:0}
.results b{font-size:13px;font-weight:600}
.results i{font-size:11px;color:var(--muted);font-style:normal}
.empty{padding:14px;color:var(--muted);font-size:13px;margin:0}
.tagline{background:var(--surface);border-bottom:1px solid var(--border);
font-size:13px;color:var(--muted);padding:7px 0}
.cols{display:grid;grid-template-columns:1fr 232px;gap:26px;margin-top:20px;align-items:start}
/* Ô của grid mặc định min-width:auto nên KHÔNG co dưới kích thước nội dung. Có
   carousel bên trong là cột 1fr phình theo chiều dài cả dải card, kéo trang tràn
   ngang. min-width:0 trả lại quyền co cho cột. */
.cols>*{min-width:0}
.sec{margin-bottom:32px}
.sec-h{font:600 15px/1 Arial,'Segoe UI',Roboto,'Noto Sans',sans-serif;letter-spacing:.5px;margin:0 0 13px;
display:flex;gap:10px;align-items:center;text-transform:uppercase}
.sec-h{padding-bottom:7px;border-bottom:2px solid var(--border)}.sec-h::before{content:'';width:3px;height:15px;background:var(--accent);flex:none}
.grid{display:grid;gap:var(--gap)}
.grid-8{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(5,1fr)}
.card{display:block}
.card img{width:100%;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
display:block;border-radius:var(--r);background:var(--surface);True}
.bl-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
font-size:12.5px;margin-top:7px;line-height:1.35}
.rows{width:100%;border-collapse:collapse;font-size:13.5px}
.rows td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.r-t{width:52%}
.r-g{color:var(--muted);font-size:12.5px}
.r-c{text-align:right;white-space:nowrap}
.r-c a{color:var(--accent)}
.side{position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow-y:auto}
.side .gwrap{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.gbtn{background:none;border:0;padding:4px 2px;text-align:left;font:inherit;font-size:13px;
color:var(--text);cursor:pointer}
.gbtn:hover{color:var(--accent)}
.crumb{font-size:13px;color:var(--muted);margin:16px 0}
.detail{display:flex;gap:28px;margin-bottom:28px;flex-wrap:wrap;align-items:flex-start}
.d-cover{width:220px;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
border:1px solid var(--border);border-radius:var(--r);flex:none;background:var(--surface)}
.d-meta{flex:1;min-width:280px}
.d-meta h1{font:600 26px/1.3 'Times New Roman',Georgia,'Noto Serif',serif;margin:0 0 16px}
.d-meta dl{display:grid;grid-template-columns:max-content 1fr;gap:0 16px;margin:0 0 18px;
font-size:14px}
.d-meta dt{color:var(--muted);padding:7px 0;border-bottom:1px solid var(--border)}
.d-meta dd{margin:0;padding:7px 0;border-bottom:1px solid var(--border)}
.d-meta dl>*:nth-last-child(-n+2){border-bottom:0}
.d-desc{font-size:14px;line-height:1.7;margin:0}
.btn{display:inline-block;padding:8px 17px;background:var(--accent);color:#fff;
border-radius:var(--r);font-size:14px}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--border)}
.btn.off{opacity:.35;pointer-events:none}
.rd-note{margin:0;padding:26px 0;text-align:center;font-size:16px;line-height:1.9;color:var(--muted)}
.rd-note a{color:var(--accent);text-decoration:underline}
.rd-cta{margin:4px 0 8px;text-align:center}
.rd-cta .rd-cta-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 26px;
font-size:15px;font-weight:600;border-radius:max(var(--r),8px);background:var(--accent);
color:var(--on-accent);box-shadow:0 10px 22px -10px var(--accent);transition:filter .15s}
.rd-cta .rd-cta-btn:hover{color:var(--on-accent);filter:brightness(1.07)}
.chaps{list-style:none;padding:0;margin:0;columns:2;column-gap:22px;font-size:13.5px}
.chaps li[hidden]{display:none}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:16px 0 4px}
.pager button{min-width:36px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r);background:none;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button.on{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}
.pager button:disabled:not(.on){opacity:.35;cursor:default}
.pager .gap{padding:0 2px;color:var(--muted)}
.pager-info{text-align:center;font-size:12.5px;color:var(--muted)}
.ch-find{margin:0 0 12px}
.ch-find input{width:100%;max-width:420px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--card,transparent);color:var(--text);font:inherit;font-size:14px}
.ch-find input:focus{outline:none;border-color:var(--accent)}
.ch-empty{padding:14px 0;text-align:center;color:var(--muted);font-size:14px}
.chaps li{padding:4px 0;break-inside:avoid;border-bottom:1px solid var(--border)}
.rd-col{max-width:calc(86ch + 96px);margin:0 auto}
/* ---- trang đọc: nút chương, ô chọn, thanh công cụ ----
   Một chiều cao, một kiểu viền, bo góc theo --r của site. Ô chọn tự vẽ mũi tên thay cho
   mũi tên mặc định vốn mỗi hệ điều hành một kiểu. Chỉ THÊM class, không đổi class cũ:
   HTML cũ còn trong cache trình duyệt vẫn phải hiển thị đúng với CSS mới. */
.rd-bar{display:flex;gap:10px;align-items:center;margin:18px 0;flex-wrap:wrap}
.rd-bar .btn{flex:none;height:40px;display:inline-flex;align-items:center;gap:6px;
padding:0 16px;font-size:14px;font-weight:500;white-space:nowrap;
transition:background-color .15s,border-color .15s,color .15s}
.rd-bar .btn svg{flex:none;width:16px;height:16px}
.rd-bar .btn.ghost{background:var(--bg)}
.rd-bar .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* "Chương sau" là việc chính của trang -> nút đặc màu nhấn */
.rd-bar .rd-next:not(.off){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rd-bar .rd-next:not(.off):hover{background:var(--accent);color:var(--on-accent);filter:brightness(1.08)}
.rd-bar select,.rd-font{height:40px;padding:0 36px 0 14px;font:inherit;font-size:14px;
color:var(--text);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2361707e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") no-repeat right 12px center/16px 16px;
border:1px solid var(--border);border-radius:var(--r);cursor:pointer;
-webkit-appearance:none;appearance:none;text-overflow:ellipsis;
transition:border-color .15s,box-shadow .15s}
.rd-bar select{flex:1;min-width:130px}
.rd-bar select:hover,.rd-font:hover{border-color:var(--muted)}
.rd-bar select:focus-visible,.rd-font:focus-visible{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-ring)}
.rd-bar option,.rd-font option{background:var(--bg);color:var(--text)}
.rd-utils{display:flex;gap:10px;align-items:center;margin:0 0 16px;font-size:13.5px;
color:var(--muted)}
.rd-utils>a{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 10px;
margin-left:-10px;border-radius:var(--r);color:var(--muted);transition:background-color .15s,color .15s}
.rd-utils>a::before{content:'';flex:none;width:16px;height:16px;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7.5 5.5h9M7.5 10h9M7.5 14.5h9M3.5 5.5h.01M3.5 10h.01M3.5 14.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7.5 5.5h9M7.5 10h9M7.5 14.5h9M3.5 5.5h.01M3.5 10h.01M3.5 14.5h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.rd-utils>a:hover{color:var(--accent);background:var(--accent-soft)}
/* min-width:0 cho phép ô phông co lại (cắt bằng …) khi màn hình quá hẹp, thay vì đẩy
   cụm A−/A+ tràn ra ngoài */
.rd-tools{display:flex;align-items:center;margin-left:auto;min-width:0}
.rd-font{min-width:0;height:34px;max-width:190px;margin-right:8px;padding:0 32px 0 12px;
font-size:13.5px;background-position:right 10px center}
.rd-tools button{flex:none}
.rd-font[hidden]{display:none}
/* A− và A+ ghép thành một cụm: viền chồng 1px, bo góc ở hai đầu */
.rd-tools button{position:relative;height:34px;min-width:42px;padding:0 10px;
border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--text);
font:inherit;font-weight:600;line-height:1;cursor:pointer;
transition:background-color .15s,border-color .15s,color .15s}
.rd-tools button:hover:not(:disabled){z-index:1;border-color:var(--accent);color:var(--accent);
background:var(--accent-soft)}
.rd-tools button:focus-visible{z-index:2}
.rd-tools button:disabled{color:var(--muted);opacity:.55;cursor:default}
.rd-tools #fs-down{border-radius:var(--r) 0 0 var(--r);font-size:12.5px}
.rd-tools #fs-up{border-radius:0 var(--r) var(--r) 0;margin-left:-1px;font-size:16px}
.reader{background:var(--rd-bg);color:var(--rd-text);
padding:38px clamp(18px,5vw,56px) 48px;line-height:1.9;
border:1px solid var(--border);border-radius:var(--r)}
.rd-head{text-align:center;margin:0 0 34px;padding-bottom:22px;position:relative}
.rd-head::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:64px;height:2px;background:var(--accent);opacity:.5;border-radius:2px}
.rd-book{display:block;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;
color:var(--muted);margin:0 0 9px}
.reader h1{font:600 clamp(20px,2.4vw,27px)/1.35 'Times New Roman',Georgia,'Noto Serif',serif;margin:0 0 11px;
letter-spacing:-.2px}
.rd-sub{font-size:12.5px;color:var(--muted);margin:0}
.rd-body{max-width:min(100%,86ch);margin:0 auto;
text-align:left;overflow-wrap:break-word}
.rd-body p{margin:0 0 1.25em;text-wrap:pretty}
.rd-body p:last-child{margin-bottom:0}
.ft{margin-top:44px;padding:18px 0;border-top:1px solid var(--border);
color:var(--muted);font-size:13px}
@media(max-width:980px){.cols{grid-template-columns:1fr}
/* Sidebar thể loại trải hết bề ngang khi về một cột, nên PHẢI gỡ sticky,
   max-height và overflow — ba thứ này chỉ hợp lý cho cột phải hẹp trên desktop.
   Để nguyên thì nó thành hộp cao bằng màn hình kèm thanh cuộn riêng, nuốt trọn
   màn hình đầu tiên và đẩy toàn bộ truyện xuống dưới.
   Bỏ luôn order:-1: người đọc vào để xem truyện, không phải xem mục lục thể loại. */
.side{position:static;max-height:none;overflow:visible;margin-top:8px}
.grid-8,.grid-6{grid-template-columns:repeat(4,1fr)}
.chaps{columns:2}}
@media(max-width:600px){.grid-8,.grid-6{grid-template-columns:repeat(3,1fr)}
.nav{display:none}.chaps{columns:1}.r-g{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* chữ chỉ dành cho máy đọc / công cụ tìm kiếm (h1 trang chủ): ẩn khỏi màn hình, không ẩn khỏi DOM */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chips{display:flex;gap:6px;margin:0 0 20px;position:sticky;top:0;z-index:5;
background:var(--bg);padding:12px 0;overflow-x:auto;scrollbar-width:thin}
.chip{border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12.5px;
background:var(--surface);white-space:nowrap;flex:none}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.count{margin-left:auto;font-size:12px;font-weight:400;color:var(--muted);text-transform:none}
.side .gwrap a{display:block;padding:4px 2px;font-size:13px}
.side .gwrap a:hover{color:var(--accent)}
.cols.nosb{grid-template-columns:1fr}
.chaps.cols2,.chaps.cols3{columns:2}
.reader.rd-boxed{box-shadow:0 1px 3px rgba(0,0,0,.08)}
.reader.rd-plain{border:0;background:transparent;color:var(--text);padding:20px 0}
.d-hero{display:block;position:relative;padding-top:58px}
.d-hero .d-band{position:absolute;top:0;left:0;right:0;height:104px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r)}
.d-hero .d-inner{position:relative;display:flex;gap:28px;align-items:flex-start;padding:0 22px}
.d-hero .d-cover{width:200px}
.d-hero .d-meta{padding-top:52px}
.d-compact{display:block}
.d-compact .d-top{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.d-compact .d-cover{width:200px}
.d-compact h1{font-size:23px}
@media(max-width:560px){.d-cover,.d-hero .d-cover,.d-compact .d-cover{width:150px}
.d-hero .d-inner{padding:0}.d-meta{min-width:0}}
/* ---- section dạng carousel ---- */
.carou{position:relative;min-width:0}
/* KHÔNG dùng scroll-snap-type:x mandatory — nó cướp quyền của lệnh cuộn bằng JS:
   đo thật thì scrollTo({left:1500}) nhảy tới 7863 và nút lùi bấm không nhúc nhích.
   Carousel này cuộn theo từng khung nên vốn đã đều, không cần snap. */
.carou-track{display:flex;gap:var(--gap);overflow-x:auto;
scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.carou-track::-webkit-scrollbar{display:none}
.carou-track .card{flex:0 0 calc((100% - var(--gap) * 4) / 5)}
.carou-nav{position:absolute;top:34%;transform:translateY(-50%);z-index:6;
width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--border);
background:var(--bg);color:var(--text);font-size:15px;line-height:1;cursor:pointer;
box-shadow:0 2px 12px rgba(0,0,0,.16);opacity:0;transition:opacity .18s}
.carou:hover .carou-nav,.carou-nav:focus-visible{opacity:1}
.carou-nav:hover{border-color:var(--accent);color:var(--accent)}
.carou-nav[disabled]{opacity:0;pointer-events:none}
.carou-prev{left:-10px}
.carou-next{right:-10px}
@media(max-width:980px){
.carou-track .card{flex:0 0 calc((100% - var(--gap) * 3) / 4)}
}
@media(max-width:600px){
/* chừa một phần card kế bên để người dùng biết còn vuốt được */
.carou-track .card{flex:0 0 calc((100% - var(--gap) * 2) / 2.6)}
.carou-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.carou-track{scroll-behavior:auto}}
/* ---- trang đọc: các thành phần hỗ trợ khi cuộn dài ---- */
/* breadcrumb căn theo cột đọc thay vì trải hết chiều ngang; tên truyện dài thì
   cắt bằng ellipsis chứ không xuống dòng làm lệch khối bên dưới */
.rd-col .crumb{margin:16px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
background:var(--accent);transition:width .08s linear}
.rd-sticky{position:fixed;top:0;left:0;right:0;z-index:55;
background:var(--bg);border-bottom:1px solid var(--border);
box-shadow:0 2px 14px rgba(0,0,0,.09);
transform:translateY(-100%);transition:transform .2s ease}
.rd-sticky.on{transform:none}
.rd-sticky-in{max-width:calc(86ch + 96px);margin:0 auto;padding:0 14px;
height:48px;display:flex;align-items:center;gap:12px}
.rd-sticky-t{flex:1;min-width:0;font-size:13.5px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-sticky a{flex:none;display:inline-flex;align-items:center;justify-content:center;
height:32px;min-width:36px;padding:0 10px;font-size:13px;border:1px solid var(--border);
border-radius:var(--r);color:var(--text);transition:background-color .15s,border-color .15s,color .15s}
.rd-sticky a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rd-sticky a.off{opacity:.35;pointer-events:none}
.rd-sticky svg,.rd-gotop svg{display:block;width:16px;height:16px}
.rd-gotop{position:fixed;right:18px;bottom:18px;z-index:45;
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;padding:0;border:1px solid var(--border);border-radius:50%;
background:var(--bg);color:var(--text);font-size:17px;line-height:1;cursor:pointer;
opacity:0;pointer-events:none;transition:opacity .2s,border-color .15s,color .15s;
box-shadow:0 3px 14px rgba(0,0,0,.12)}
.rd-gotop.on{opacity:.9;pointer-events:auto}
.rd-gotop:hover{opacity:1;border-color:var(--accent);color:var(--accent)}
/* hàng tiện ích dưới cùng: căn giữa cho cân, khác hàng trên vốn căn hai bên */
.rd-utils.rd-utils-end{justify-content:center;margin:14px 0 0}
.rd-utils.rd-utils-end>a{margin-left:0}
@media(max-width:560px){
.rd-sticky-in{height:44px;gap:8px;padding:0 10px}
.rd-sticky a{padding:0 9px}
.rd-gotop{right:12px;bottom:12px;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
.rd-sticky,.rd-progress,.rd-gotop{transition:none}
}
/* Mobile: ảnh bên trái, cạnh nó là tên + thể loại; văn án và nút tách hẳn
   xuống dưới cho đủ bề ngang. display:contents nâng các con của .d-meta lên
   thành ô của grid cha, nhờ vậy không phải đổi DOM của cả 3 kiểu trang. */
@media(max-width:560px){
.detail,.d-hero .d-inner,.d-compact .d-top{display:grid;
grid-template-columns:auto 1fr;gap:10px 14px;align-items:start}
.d-meta{display:contents}
.d-cover,.d-hero .d-cover,.d-compact .d-cover{width:118px;
grid-column:1;grid-row:1 / span 2}
.d-meta h1{grid-column:2;grid-row:1;margin:0;font-size:18px;line-height:1.35}
.d-meta dl{grid-column:2;grid-row:2;margin:0;grid-template-columns:1fr;gap:2px;
font-size:13px}
.d-meta dt{padding:0;border:0}
.d-meta dd{padding:0;border:0}
.d-desc-wrap{grid-column:1 / -1;grid-row:3;margin:4px 0 0}
.btn-read{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:12px}
.d-hero{padding-top:0}
.d-hero .d-band{display:none}
}
.d-desc-wrap{margin:0 0 18px}
.d-desc.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
overflow:hidden}
.d-more{margin-top:7px;padding:0;border:0;background:none;color:var(--accent);
font:inherit;font-size:13px;cursor:pointer}
.d-more:hover{text-decoration:underline}
.btn-read{display:inline-flex;flex-direction:column;align-items:flex-start;
line-height:1.25;padding:9px 20px}
.btn-read i{font-style:normal;font-size:11.5px;opacity:.82;margin-top:3px}
body.has-rhb{padding-bottom:78px}
.rhb{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
display:flex;align-items:center;gap:13px;
max-width:min(560px,calc(100vw - 24px));padding:10px 13px;
border-radius:14px;background:var(--accent);color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.3);animation:rhb-in .22s ease-out}
@keyframes rhb-in{from{opacity:0;transform:translate(-50%,14px)}}
.rhb a{color:#fff}
.rhb a:hover{color:#fff}
.rhb-main{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.rhb img{width:34px;height:48px;flex:none;object-fit:cover;border-radius:5px;
background:rgba(255,255,255,.22)}
.rhb-txt{display:flex;flex-direction:column;min-width:0;gap:3px}
.rhb-txt b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.rhb-txt i{font-style:normal;font-size:12px;opacity:.85;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rhb a.rhb-go{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 16px;
border-radius:9px;background:#fff;color:var(--accent);font-size:13.5px;font-weight:600}
.rhb a.rhb-go:hover{color:var(--accent);opacity:.88}
.rhb-x{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:7px;
background:transparent;color:#fff;font-size:19px;line-height:1;cursor:pointer;opacity:.75}
.rhb-x:hover{opacity:1;background:rgba(255,255,255,.16)}
@media(max-width:560px){
.rhb{left:10px;right:10px;bottom:10px;transform:none;max-width:none;
animation:rhb-in-sm .22s ease-out}
@keyframes rhb-in-sm{from{opacity:0;transform:translateY(14px)}}
.rhb-go{padding:0 12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.rhb{animation:none}}
@media(max-width:860px){.rd-body{text-align:left}}
@media(max-width:520px){
.rd-bar{gap:8px}
.rd-bar select{order:-1;flex-basis:100%}
.rd-bar .btn{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}
.reader{padding:24px 16px 30px}}
/* điện thoại hẹp: "Mục lục" + ô phông + A−/A+ vẫn nằm gọn một hàng */
@media(max-width:400px){
.rd-utils{gap:6px}
.rd-font{margin-right:6px;font-size:13px}
.rd-tools button{min-width:38px}}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin:20px 0 26px}
.hero-main{display:flex;gap:16px;padding:16px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r)}
.hero-main img{width:150px;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
flex:none;border-radius:var(--r)}
.hero-t h2{font:600 22px/1.3 var(--fh);margin:0 0 8px}
.hero-m{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.hero-d{font-size:13.5px;line-height:1.6;margin:0}
.hero-side{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-content:start}
@media(max-width:900px){.hero{grid-template-columns:1fr}}

/* ---- trang chi tiết truyện ---- */
.st{position:relative;isolation:isolate;margin:4px 0 34px}
.st-top{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:start}
.st .st-cover{display:block;width:100%;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
border:0;border-radius:max(var(--r),6px);background:var(--surface);
box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 38px -12px rgba(0,0,0,.38)}
.st .st-meta{display:block;min-width:0;padding-top:4px}
.st .st-title{font:700 clamp(24px,2.9vw,34px)/1.22 var(--fh);margin:0 0 12px;letter-spacing:-.3px;
text-wrap:balance}
.st-author{display:flex;align-items:center;gap:7px;margin:0 0 16px;font-size:14.5px;color:var(--muted)}
.st-author svg{flex:none}
.st-author b{color:var(--text);font-weight:600}
.st-genres{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding:0}
.st-genres a{display:inline-block;padding:5px 13px;border:1px solid var(--border);border-radius:999px;
font-size:12.5px;line-height:1.3;background:var(--surface);color:var(--text);
transition:background-color .15s,border-color .15s,color .15s}
.st-genres a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.st .st-stats{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0 0 26px;padding:0;
gap:0;border:1px solid var(--border);border-radius:max(var(--r),6px);background:var(--surface);font-size:inherit}
.st .st-stats>div{min-width:112px;padding:12px 22px;border-left:1px solid var(--border)}
.st .st-stats>div:first-child{border-left:0}
.st .st-stats dt{margin:0 0 5px;padding:0;border:0;font-size:11px;font-weight:600;letter-spacing:.7px;
text-transform:uppercase;color:var(--muted)}
.st .st-stats dd{margin:0;padding:0;border:0;font-size:16px;font-weight:600;color:var(--text)}
.st-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.st-status::before{content:'';width:8px;height:8px;border-radius:50%;background:#2e9e63;
box-shadow:0 0 0 3px rgba(46,158,99,.18)}
.st-status-full::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.st-actions{display:flex;flex-wrap:wrap;gap:10px}
.st .st-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;
margin:0;padding:0 20px;font-size:14.5px;font-weight:600;line-height:1.2;border-radius:max(var(--r),6px);
transition:filter .15s,background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.st .st-btn.ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.st .st-btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* "Đọc từ đầu" -> JS đổi thành "Đọc tiếp" + tên chương (dòng <i>) nên xếp dọc */
.st .st-btn-main{flex-direction:column;align-items:center;justify-content:center;min-width:176px;
padding:6px 24px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
box-shadow:0 10px 22px -10px var(--accent)}
.st .st-btn-main:hover{color:var(--on-accent);filter:brightness(1.07)}
.st .st-btn-main i{margin-top:2px;font-size:11.5px;font-weight:400;opacity:.85;max-width:240px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;font:650 18px/1.3 var(--fh)}
.st-intro{margin-top:30px;padding:22px 26px 20px;border:1px solid var(--border);
border-radius:max(var(--r),6px);background:var(--surface)}
.st .d-desc-wrap{margin:0}
.st .d-desc{margin:0;font-size:15px;line-height:1.8;color:var(--text);white-space:pre-line}
.st .d-more{margin-top:10px;font-weight:600}
/* kiểu hero: ảnh bìa làm mờ phủ nền, mờ dần xuống màu nền trang */
.st-hero{padding:30px;border:1px solid var(--border);border-radius:max(var(--r),10px);overflow:hidden}
.st-backdrop{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center 30%;
filter:blur(42px) saturate(1.25);transform:scale(1.35);opacity:.42}
.st-hero::after{content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,transparent 0,var(--bg) 78%)}
/* kiểu compact: khối thông tin nằm trong một thẻ */
.st-compact .st-top{grid-template-columns:180px minmax(0,1fr);gap:30px;padding:26px;
border:1px solid var(--border);border-radius:max(var(--r),8px);background:var(--surface)}
.st-compact .st-stats,.st-compact .st-genres a{background:var(--bg)}
.st-compact .st-intro{background:transparent}
/* ---- danh sách chương ---- */
.st-chapters{margin:6px 0 10px;scroll-margin-top:16px}
.st-chap-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--border)}
.st-chap-head .st-h{margin:0}
.st-count{padding:4px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
font:500 12.5px/1.2 Arial,'Segoe UI',Roboto,'Noto Sans',sans-serif;color:var(--muted)}
.st-latest{margin:0;font-size:13.5px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:100%}
.st-latest a{color:var(--accent);font-weight:600}
.st-chapters .ch-find{position:relative;max-width:460px;margin:0 0 14px}
.st-chapters .ch-find[hidden]{display:none}
.st-chapters .ch-find svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);
pointer-events:none}
.st-chapters .ch-find input{max-width:none;height:44px;padding:0 14px 0 40px;background:var(--bg);
border-radius:max(var(--r),6px);transition:border-color .15s,box-shadow .15s}
.st-chapters .ch-find input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.chaps.st-chaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;columns:auto;
font-size:14px}
.chaps.st-chaps li{padding:0;border-bottom:1px solid var(--border)}
.st-chaps a{display:block;margin:0 -10px;padding:10px 10px;border-radius:max(var(--r),4px);color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .12s,color .12s}
.st-chaps a:hover{background:var(--accent-soft);color:var(--accent)}
.st-chaps li.lk a{color:var(--muted)}
.st-chaps li.lk a::before{content:'';display:inline-block;width:13px;height:13px;margin-right:7px;
vertical-align:-1px;background:currentColor;opacity:.75;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='9' width='11' height='8' rx='1.6'/%3E%3Cpath d='M7 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='9' width='11' height='8' rx='1.6'/%3E%3Cpath d='M7 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E") center/contain no-repeat}
.st-chaps li.lk a:hover{color:var(--accent)}
.st-chapters .pager button{height:38px;min-width:38px;border-radius:max(var(--r),6px)}
.st-chapters .pager button.on{color:var(--on-accent)}
@media(max-width:760px){
.st-top{grid-template-columns:170px minmax(0,1fr);gap:22px}
.st-compact .st-top{grid-template-columns:150px minmax(0,1fr);padding:20px}}
/* điện thoại: xếp dọc, căn giữa như trang chi tiết của app đọc truyện */
@media(max-width:560px){
.st-top,.st-compact .st-top{grid-template-columns:1fr;justify-items:center;gap:18px;text-align:center}
.st-compact .st-top{padding:20px 16px}
.st-cover-wrap{width:160px}
.st .st-title{font-size:22px;margin-bottom:8px}
.st-author{justify-content:center;margin-bottom:14px}
.st-genres{justify-content:center;margin-bottom:18px}
.st .st-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%}
.st .st-stats>div{min-width:0;padding:10px 6px}
.st .st-stats dt{font-size:10px;letter-spacing:.4px}
.st .st-stats dd{font-size:14.5px}
.st-status{gap:5px}
.st-actions{justify-content:center}
.st .st-btn{flex:1 1 40%;padding:0 12px}
.st .st-btn-main{flex-basis:100%}
.st-hero{padding:22px 16px}
.st-intro{margin-top:22px;padding:18px 16px;text-align:left}
.chaps.st-chaps{grid-template-columns:1fr}
.st-latest{white-space:normal}}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/literata-latin-ext-a8f67dce.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/literata-latin-a6569372.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/literata-vietnamese-f2adda15.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/merriweather-latin-ext-1c70d5c3.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/merriweather-latin-8d568b75.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/merriweather-vietnamese-5cb53f96.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lora-latin-ext-b047e391.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lora-latin-1ace0d36.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lora-vietnamese-57ab67f3.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-serif-latin-ext-b459a9ac.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-serif-latin-e22bf423.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-serif-vietnamese-a862b9f9.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-c4570683.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-c4fb6595.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-latin-ext-d172a732.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-b3cac1da.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-08d36588.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-latin-8b6c7c9f.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-ebe22251.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-55a865cb.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-ba57728a.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/nunito-latin-ext-9abf3bd2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/nunito-latin-ff573f56.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/nunito-vietnamese-4857e6a1.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
.reader[data-ff],.reader[data-ff] h1{font-family:var(--rd-ff)}
.reader[data-ff="literata"]{--rd-ff:'Literata',Georgia,'Times New Roman',serif}
.reader[data-ff="merriweather"]{--rd-ff:'Merriweather',Georgia,'Times New Roman',serif}
.reader[data-ff="lora"]{--rd-ff:'Lora',Georgia,'Times New Roman',serif}
.reader[data-ff="noto-serif"]{--rd-ff:'Noto Serif',Georgia,'Times New Roman',serif}
.reader[data-ff="be-vietnam-pro"]{--rd-ff:'Be Vietnam Pro','Segoe UI',Roboto,Arial,sans-serif}
.reader[data-ff="nunito"]{--rd-ff:'Nunito','Segoe UI',Roboto,Arial,sans-serif}