:root{
--bg:#fffafa;--surface:#fbefef;--border:#f0d5d7;--text:#2b1417;--muted:#7c5d61;
--accent:#c8203b;--hdr-bg:#7d1424;--hdr-text:#fff4f4;
--rd-bg:#fffcfb;--rd-text:#2b1a1c;
--on-accent:#fff;--accent-soft:#fae4e7;--accent-ring:rgba(200,32,59,.28);
--r:4px;--gap:9px;--wrap:1140px;--fh:'Noto Serif',Georgia,'Times New Roman',serif;--cover-ar:2/3;
color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
font:15.5px/1.55 Roboto,'Segoe UI','Noto Sans',Arial,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:48px}
.brand{flex:none;font:700 22px/1 'Noto Serif',Georgia,'Times New Roman',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 Roboto,'Segoe UI','Noto Sans',Arial,sans-serif;letter-spacing:.5px;margin:0 0 13px;
display:flex;gap:10px;align-items:center;text-transform:none}
.sec-h{padding-left:10px;border-left:4px solid var(--accent)}
.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 'Noto Serif',Georgia,'Times New Roman',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 a{color:var(--accent);text-decoration:underline}
.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='%237c5d61' 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 'Noto Serif',Georgia,'Times New Roman',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}}
/* ---- hiệu ứng: ảnh bìa (.cv) phóng nhẹ + thẻ nhấc lên khi rê chuột, vệt sáng lướt ----
   Chỉ áp cho HTML có khung .cv; ảnh luôn bị cắt trong khung nên phóng to không tràn. */
.cv{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--surface);
isolation:isolate}
.card .cv{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cv img{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.cv::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
transform:translateX(-120%);transition:transform .8s ease}
a:hover .cv img,a:focus-visible .cv img{transform:scale(1.08)}
a:hover .cv::after{transform:translateX(120%)}
.card:hover .cv,.card:focus-visible .cv{transform:translateY(-4px);box-shadow:0 16px 28px -14px rgba(0,0,0,.5)}
/* carousel cuộn ngang nên cắt mất phần nhấc lên -> chỉ giữ phóng ảnh */
.carou .card:hover .cv{transform:none}
.card .bl-t{transition:color .2s}
.card:hover .bl-t{color:var(--accent)}
/* ảnh đang tải: khung lấp lánh thay vì ô trống, tải xong ảnh hiện dần (lớp .js do base.html gắn) */
.js .cv:not(.ld){background:linear-gradient(100deg,var(--surface) 30%,var(--border) 50%,var(--surface) 70%)
0 0/300% 100%;animation:cv-shimmer 1.3s linear infinite}
.js .cv:not(.ld) img{opacity:0}
@keyframes cv-shimmer{to{background-position:-150% 0}}
/* khối nội dung trượt nhẹ lên khi cuộn tới; thẻ bên trong hiện lần lượt (--i do reader.js gán) */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv .card,.rv .thumbs li{opacity:0;transform:translateY(14px)}
.rv.in .card,.rv.in .thumbs li{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);
transition-delay:calc(var(--i,0) * 45ms)}
/* chi tiết nhỏ */
.chip,.gwrap a,.st-genres a,.rail-g a{transition:transform .2s,background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.chip:hover,.st-genres a:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(0,0,0,.35)}
.side .gwrap a:hover,.rail-g a:hover{transform:translateX(3px)}
.btn,.pager button,.rd-tools button,.st-btn{transition:transform .12s,filter .15s,background-color .15s,border-color .15s,color .15s}
.btn:active,.pager button:active:not(:disabled),.rd-tools button:active:not(:disabled){transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
.cv img,.card .cv,.cv::after,.hero-main,.rv,.rv .card,.rv .thumbs li{transition:none!important;animation:none!important}
a:hover .cv img,.card:hover .cv,.hero-main:hover{transform:none}
.rv,.rv .card,.rv .thumbs li{opacity:1;transform:none}}
@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}}

.rk-list{list-style:none;margin:0;padding:0}
.rk-list li a{display:flex;align-items:center;gap:14px;padding:10px 6px;border-bottom:1px solid var(--border);
transition:background-color .2s}
.rk-list li a:hover{background:var(--accent-soft)}
.rk-list li a:hover b{color:var(--accent)}
.rk-no{flex:none;width:44px;text-align:center;font:800 30px/1 var(--fh);color:var(--muted);opacity:.55;
font-variant-numeric:tabular-nums}
.rk-no.n1,.rk-no.n2,.rk-no.n3{color:var(--accent);opacity:1}
.rk-list .cv{flex:none;width:48px;height:72px;border-radius:5px;overflow:hidden;background:var(--surface)}
.rk-list .cv img{display:block;width:100%;height:100%;object-fit:cover}
.rk-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.rk-t b{font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rk-t small{font-size:12px;color:var(--muted)}
.rk-list.mini li a{padding:8px 2px;gap:10px}
.rk-list.mini .rk-no{width:30px;font-size:20px}
.rk-list.mini .rk-t b{font-size:13.5px}
.bc{display:flex;gap:18px;align-items:flex-start;min-width:0}
.bc>.cv{flex:none;width:150px;border-radius:max(var(--r),8px);overflow:hidden;
box-shadow:0 14px 30px -16px rgba(0,0,0,.55);background:var(--surface)}
.bc>.cv img{display:block;width:100%;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bc:hover>.cv img{transform:scale(1.06)}
.bc-t{flex:1;min-width:0}
.bc-t h3{font:700 20px/1.3 var(--fh);margin:0 0 6px}
.bc-t h3 a:hover{color:var(--accent)}
.bc-m{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.bc-d{font-size:14px;line-height:1.65;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:4;
-webkit-box-orient:vertical;overflow:hidden}
.bc-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0}
.bc-a .bn-btn{min-height:38px;padding:0 20px;font-size:14px}
.bc-n{font-size:12.5px;color:var(--muted)}
.tile{position:relative;display:block;overflow:hidden;border-radius:max(var(--r),8px);background:var(--surface)}
.tile .cv{display:block;height:100%}
.tile img{display:block;width:100%;height:100%;aspect-ratio:var(--cover-ar);object-fit:cover;
transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.07)}
.tile-t{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;color:#fff;
background:linear-gradient(transparent,rgba(0,0,0,.82))}
.tile-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:13.5px;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tile-t small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
margin-top:6px;font-size:13px;line-height:1.5;opacity:.88}
.more{float:right;font-size:13px;font-weight:500;color:var(--accent)}
.box{padding:16px 16px 10px;margin-bottom:18px;background:var(--surface);border:1px solid var(--border);
border-radius:max(var(--r),10px)}
.box .sec-h{margin-top:0}
.box .sec{margin:0}
@media(max-width:560px){.bc>.cv{width:104px}.bc-t h3{font-size:17px}.bc-d{-webkit-line-clamp:3;font-size:13.5px}
.rk-no{width:34px;font-size:24px}}

.pills{display:flex;gap:8px;overflow-x:auto;padding:14px 0 10px;margin-bottom:6px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pills a{flex:none;padding:7px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--border);
font-size:13px;white-space:nowrap}
.pills a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.feed-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px}
.feed-i{position:relative;margin:0 0 16px;padding:20px 20px 20px 24px;background:var(--surface);
border:1px solid var(--border);border-radius:max(var(--r),14px);transition:border-color .25s,box-shadow .25s}
.feed-i:hover{border-color:var(--accent);box-shadow:0 18px 36px -24px rgba(0,0,0,.5)}
.feed-no{position:absolute;top:14px;right:18px;font:800 22px/1 var(--fh);color:var(--accent);opacity:.8}
.feed-c>.cv{width:128px}
.feed-c .bc-t h3{padding-right:48px}
.feed-side{position:sticky;top:14px;align-self:start}
.thumbs{list-style:none;margin:0;padding:0}
.thumbs a{display:flex;gap:12px;padding:8px 2px;border-bottom:1px solid var(--border);align-items:center}
.thumbs .cv{width:44px;height:66px;flex:none;border-radius:4px;overflow:hidden;background:var(--bg)}
.thumbs .cv img{display:block;width:100%;height:100%;object-fit:cover}
.thumbs b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.thumbs a:hover b{color:var(--accent)}
@media(max-width:980px){.feed-wrap{grid-template-columns:1fr}.feed-side{position:static}}
@media(max-width:560px){.feed-i{padding:16px 14px}.feed-c>.cv{width:96px}}

/* ---- trang chi tiết truyện: banner (chữ một bên, bìa một bên, ảnh bìa làm nền chìm) ---- */
.st{position:relative;isolation:isolate;overflow:hidden;margin:4px 0 30px;padding:40px 44px;
border:1px solid var(--border);border-radius:max(var(--r),12px);background:var(--surface)}
.st-backdrop{position:absolute;inset:-40px;z-index:-2;background-size:cover;background-position:center 25%;
filter:grayscale(1) blur(2px);opacity:.17;animation:st-drift 26s ease-in-out infinite alternate}
/* lớp phủ làm chữ luôn đọc rõ: đậm phía chữ, nhạt dần về phía bìa */
.st::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(90deg,var(--surface) 22%,transparent 92%)}
.st-hero .st-backdrop{filter:blur(34px) saturate(1.35);opacity:.5}
.st-hero::after{background:linear-gradient(90deg,var(--surface) 12%,transparent 100%)}
.st-coverleft::after{background:linear-gradient(270deg,var(--surface) 22%,transparent 92%)}
@keyframes st-drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.st-top{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:48px;align-items:center}
.st-coverleft .st-top{grid-template-columns:230px minmax(0,1fr)}
.st-cover-wrap{order:2;position:relative;overflow:hidden;border-radius:max(var(--r),8px);
box-shadow:0 2px 4px rgba(0,0,0,.1),0 24px 44px -16px rgba(0,0,0,.55);
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
animation:st-pop .8s cubic-bezier(.2,.7,.2,1) both}
.st-coverleft .st-cover-wrap{order:0}
.st-cover-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
transform:translateX(-120%);transition:transform .9s ease}
.st-cover-wrap:hover{transform:translateY(-6px) rotate(-1.2deg);
box-shadow:0 4px 8px rgba(0,0,0,.12),0 30px 54px -18px rgba(0,0,0,.6)}
.st-coverleft .st-cover-wrap:hover{transform:translateY(-6px) rotate(1.2deg)}
.st-cover-wrap:hover::after{transform:translateX(120%)}
.st .st-cover{display:block;width:100%;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
border:0;border-radius:0;box-shadow:none;background:var(--bg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.st-cover-wrap:hover .st-cover{transform:scale(1.05)}
.st .st-meta{display:block;min-width:0;padding:0}
/* chữ hiện lần lượt khi mở trang */
.st-meta>*{animation:st-up .6s cubic-bezier(.2,.7,.2,1) both}
.st-meta>:nth-child(2){animation-delay:.06s}.st-meta>:nth-child(3){animation-delay:.12s}
.st-meta>:nth-child(4){animation-delay:.18s}.st-meta>:nth-child(5){animation-delay:.24s}
.st-meta>:nth-child(6){animation-delay:.3s}
@keyframes st-up{from{opacity:0;transform:translateY(14px)}}
@keyframes st-pop{from{opacity:0;transform:translateY(18px) scale(.96)}}
.st-author{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:14px;color:var(--muted)}
.st-author svg{flex:none}
.st-author b{color:var(--text);font-weight:600}
.st .st-title{font:700 clamp(24px,2.8vw,34px)/1.22 var(--fh);margin:0 0 14px;letter-spacing:-.3px;
text-wrap:balance}
.st .st-desc{margin:0 0 16px}
.st .d-desc{margin:0;font-size:15.5px;line-height:1.75;color:var(--text);white-space:pre-line}
.st .d-desc.clamp{-webkit-line-clamp:3}
.st .d-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;font-weight:600}
.st .d-more::after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;
transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.st .d-desc:not(.clamp)+.d-more::after{transform:translateY(2px) rotate(225deg)}
.st-genres{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px;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(--bg);color:var(--text)}
.st-genres a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.st .st-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;width:auto;max-width:100%;
margin:0 0 24px;padding:0;border:0;background:none;color:var(--muted)}
.st .st-stats>div{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;border:0}
.st .st-stats dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st .st-stats dd{margin:0;padding:0;border:0;font-size:14.5px;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-status-on::before{animation:st-pulse 2s ease-in-out infinite}
@keyframes st-pulse{50%{box-shadow:0 0 0 6px rgba(46,158,99,0)}}
.st-actions{display:flex;flex-wrap:wrap;gap:12px}
.st .st-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;margin:0;
padding:0 26px;font-size:15px;font-weight:600;line-height:1.2;border-radius:999px;
transition:transform .2s,filter .15s,background-color .15s,border-color .15s,color .15s,box-shadow .2s}
.st .st-btn:hover{transform:translateY(-2px)}
.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(--bg);
box-shadow:0 8px 18px -10px rgba(0,0,0,.3)}
/* "Đọ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:190px;
padding:6px 30px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
box-shadow:0 12px 24px -10px var(--accent)}
.st .st-btn-main:hover{color:var(--on-accent);filter:brightness(1.07);box-shadow:0 16px 28px -10px var(--accent)}
.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 .d-desc-wrap{margin:0}
.st .d-desc-wrap.st-desc{margin:0 0 18px}
/* ---- 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 Roboto,'Segoe UI','Noto Sans',Arial,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(--text)}
.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{padding:28px 26px}
.st-top{grid-template-columns:minmax(0,1fr) 170px;gap:26px}
.st-coverleft .st-top{grid-template-columns:170px minmax(0,1fr)}}
/* điện thoại: bìa lên trên, căn giữa như trang chi tiết của app đọc truyện; lớp phủ chuyển
   thành trên nhạt - dưới đậm để phần chữ bên dưới vẫn rõ */
@media(max-width:560px){
.st{padding:24px 16px}
.st::after,.st-hero::after,.st-coverleft::after{background:linear-gradient(180deg,transparent 0,var(--surface) 48%)}
.st-top,.st-coverleft .st-top{grid-template-columns:1fr;justify-items:center;gap:18px;text-align:center}
.st-cover-wrap,.st-coverleft .st-cover-wrap{order:-1;width:156px}
.st .st-title{font-size:22px;margin-bottom:10px}
.st-author,.st-genres,.st .st-stats,.st-actions{justify-content:center}
.st .d-desc{font-size:15px;text-align:left}
.st .st-stats{gap:6px 16px}
.st .st-btn{flex:1 1 40%;padding:0 14px}
.st .st-btn-main{flex-basis:100%}
.chaps.st-chaps{grid-template-columns:1fr}
.st-latest{white-space:normal}}
@media(prefers-reduced-motion:reduce){
.st-backdrop,.st-cover-wrap,.st-meta>*,.st-status-on::before{animation:none}
.st-cover-wrap:hover,.st .st-btn:hover{transform:none}}

/* ---- banner trang chủ ---- */
.bn{position:relative;isolation:isolate;overflow:hidden;margin:20px 0 30px;background:var(--surface);
border:1px solid var(--border);border-radius:max(var(--r),14px)}
.bn-track{display:grid}
.bn-slide{grid-area:1 / 1;position:relative;isolation:isolate;display:grid;
grid-template-columns:minmax(0,1fr) 200px;gap:44px;align-items:center;padding:34px 48px 50px;
opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.bn-slide.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.bn-bg{position:absolute;inset:-30px;z-index:-2;background-size:cover;background-position:center 25%;
filter:grayscale(1) blur(2px);opacity:.18;transform:scale(1.04)}
.bn-slide.on .bn-bg{animation:bn-kb 9s ease-out both}
@keyframes bn-kb{to{transform:scale(1.16) translate(-2%,-1%)}}
.bn-slide::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(90deg,var(--surface) 28%,transparent 96%)}
.bn-txt{min-width:0}
.bn-author{margin:0 0 8px;font-size:14px;color:var(--muted)}
.bn-title{margin:0 0 12px;font:700 clamp(22px,2.6vw,32px)/1.22 var(--fh);letter-spacing:-.3px;
text-wrap:balance}
.bn-title a{color:var(--text)}
.bn-title a:hover{color:var(--accent)}
.bn-desc{margin:0 0 14px;font-size:15px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden}
.bn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 22px;font-size:13.5px;
color:var(--muted)}
.bn-actions{display:flex;flex-wrap:wrap;gap:12px}
.bn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;
border:1px solid var(--accent);border-radius:999px;font-size:15px;font-weight:600;background:var(--accent);
color:var(--on-accent);box-shadow:0 12px 24px -10px var(--accent);transition:transform .2s,filter .15s,
border-color .15s,color .15s}
.bn-btn:hover{color:var(--on-accent);transform:translateY(-2px);filter:brightness(1.07)}
.bn-btn.ghost{background:var(--bg);color:var(--text);border-color:var(--border);box-shadow:none}
.bn-btn.ghost:hover{color:var(--accent);border-color:var(--accent);filter:none}
.bn-cover{display:block;overflow:hidden;border-radius:max(var(--r),8px);transform:rotate(2deg);
box-shadow:0 2px 4px rgba(0,0,0,.1),0 24px 44px -16px rgba(0,0,0,.55);
transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.bn-cover img{display:block;width:100%;height:auto;aspect-ratio:var(--cover-ar);object-fit:cover;
background:var(--bg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bn-cover:hover{transform:rotate(0) translateY(-6px)}
.bn-cover:hover img{transform:scale(1.05)}
/* slide vừa hiện: chữ trượt lên lần lượt, bìa lướt vào */
.bn-slide.on .bn-txt>*{animation:st-up .7s cubic-bezier(.2,.7,.2,1) both}
.bn-slide.on .bn-txt>:nth-child(2){animation-delay:.07s}
.bn-slide.on .bn-txt>:nth-child(3){animation-delay:.14s}
.bn-slide.on .bn-txt>:nth-child(4){animation-delay:.21s}
.bn-slide.on .bn-txt>:nth-child(5){animation-delay:.28s}
.bn-slide.on .bn-cover{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes bn-in{from{opacity:0;transform:translateX(34px) rotate(7deg)}}
.bn-nav{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;
width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid var(--border);border-radius:50%;
background:var(--bg);color:var(--text);cursor:pointer;opacity:0;
box-shadow:0 4px 14px rgba(0,0,0,.14);transition:opacity .2s,color .2s,border-color .2s}
.bn:hover .bn-nav,.bn-nav:focus-visible{opacity:.92}
.bn-nav:hover{opacity:1;color:var(--accent);border-color:var(--accent)}
.bn-prev{left:10px}.bn-next{right:10px}
.bn-dots{position:absolute;left:48px;bottom:18px;z-index:2;display:flex;gap:7px}
.bn-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--border);
cursor:pointer;transition:width .3s,background-color .3s}
.bn-dots button.on{width:24px;background:var(--accent)}
@media(max-width:640px){
.bn{margin:14px 0 22px}
.bn-slide{grid-template-columns:minmax(0,1fr) 100px;gap:16px;align-items:start;padding:20px 16px 40px}
.bn-slide::after{background:linear-gradient(90deg,var(--surface) 35%,transparent 110%)}
.bn-author{font-size:12.5px;margin-bottom:5px}
.bn-title{font-size:19px;margin-bottom:8px}
.bn-desc{font-size:13.5px;line-height:1.6;margin-bottom:10px}
.bn-meta{gap:4px 12px;font-size:12.5px;margin-bottom:14px}
.bn-actions{gap:8px}
.bn-btn{min-height:40px;padding:0 16px;font-size:14px}
.bn-cover{transform:none}
.bn-nav{display:none}
.bn-dots{left:16px;bottom:14px}}
@media(prefers-reduced-motion:reduce){
.bn-slide,.bn-slide.on{transition:none}
.bn-slide.on .bn-bg,.bn-slide.on .bn-txt>*,.bn-slide.on .bn-cover{animation:none}}
@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}