/* Bo goc tap trung: chinh 1 cho de doi toan bo giao dien (--radius = the/modal nho, nut bam dung -sm, badge dung -pill) */
:root {
  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;
  --radius-spine: 8px 16px 16px 8px; /* bia truyen dang gay sach */
}

/* Font Google duoc nap qua <link> trong index.html (nhanh hon @import - xem ghi chu o do) */

:root, html[data-theme="dark"] {
  --ink: #12161d;
  --panel: #1b212b;
  --panel-2: #232a36;
  --hairline: #313a48;
  --text: #d9dee6;
  --text-dim: #8b96a5;
  --gold: #c9a24b;
  --gold-soft: #e2c383;
  --paper: #f3ead4;
  --paper-text: #2b2115;
  --paper-text-dim: #6b5c42;
  --danger: #c96b4b;
  --radius: 12px;
  --shadow: 0 20px 60px rgba(0,0,0,.5);
}

html[data-theme="light"] {
  --ink: #f4efe2;
  --panel: #ffffff;
  --panel-2: #f0eadb;
  --hairline: #ddd3ba;
  --text: #2b2115;
  --text-dim: #77694f;
  --gold: #9c7226;
  --gold-soft: #7c5b1e;
  --paper: #fbf7ec;
  --paper-text: #2b2115;
  --paper-text-dim: #6b5c42;
  --danger: #b0492b;
  --radius: 12px;
  --shadow: 0 20px 50px rgba(60,45,20,.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color .15s ease, color .15s ease;
  overflow-x: hidden; /* an toan cho cac khoi "tran vien" nhu anh bia profile (rong hon container cha) */
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, #171d26, #14181f);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Che do sang: thanh top-bar mac dinh dung mau gradient rat toi (gan den), tren nen sang
   gay chenh lech tuong phan manh, nhin lau de moi mat. Doi sang tong mau giay am (paper)
   cung he mau voi theme sang de dju hon, van giu phong cach van hoc/giay cu cua web. */
html[data-theme="light"] .topbar {
  background: linear-gradient(180deg, var(--paper), var(--panel-2));
}
.brand { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.brand:hover .brand-name { color: var(--gold-soft); }

.searchbox { flex: 0 0 260px; }
.searchbox input {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 12px;
  border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text);
}
.searchbox input:focus { outline: none; border-color: var(--gold); }
/* Logo gia sach: anh PNG dung lam "khuon" (mask) de mau tu doi theo theme (vang o ca sang/toi) */
.brand-mark {
  width: 32px; height: 32px; flex: 0 0 auto; align-self: center;
  background-color: var(--gold-soft);
  -webkit-mask: url('/img/bookshelf.png') center / contain no-repeat;
          mask: url('/img/bookshelf.png') center / contain no-repeat;
}
.brand-name { font-family: 'Literata', serif; font-weight: 600; font-size: 18px; letter-spacing: 0.02em; }

.topnav { display: flex; gap: 4px; flex: 1; }
.navbtn {
  background: none; border: none; color: var(--text-dim);
  font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer;
  border-radius: var(--radius); transition: color .15s, background .15s;
}
a.navbtn, a.brand { text-decoration: none; }
a.navbtn { display: inline-block; }
a.brand { color: inherit; }
.navbtn:hover { color: var(--text); background: var(--panel-2); }
.navbtn.active { color: var(--ink); background: var(--gold-soft); font-weight: 600; }

.authbox { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.authbox .who { color: var(--text-dim); display: flex; align-items: center; gap: 7px; text-decoration: none; }
.authbox .who:hover strong { color: var(--gold-soft); }
.avatar-mini {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; font-family: 'Literata', serif;
  vertical-align: middle; flex-shrink: 0;
}
.btn {
  font: inherit; font-size: 14px; padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); font-weight: 600; }
.btn.primary:hover { background: var(--gold); }
.btn.ghost { background: none; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: none; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Main content ---------- */
main { flex: 1; padding: 32px 28px 64px; max-width: 1180px; margin: 0 auto; width: 100%; }

h1, h2, h3 { font-family: 'Literata', serif; margin: 0 0 4px; }
.section-title { font-size: 22px; font-weight: 600; margin-bottom: 20px; color: var(--text); }
.muted { color: var(--text-dim); }
p { line-height: 1.6; }

/* ---------- Library grid: sach xep tren ke ---------- */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
}
.book {
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
}
.spine {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-spine);
  display: flex; align-items: flex-end;
  padding: 14px 12px;
  position: relative;
  box-shadow: -4px 0 0 rgba(0,0,0,.25) inset, 0 6px 14px rgba(0,0,0,.35);
  transition: transform .15s ease;
  overflow: hidden;
}
.book:hover .spine { transform: translateY(-4px); }
.spine::before {
  content: '';
  position: absolute; left: 8px; top: 10px; bottom: 10px; width: 1px;
  background: rgba(255,255,255,.18);
}
.spine-title {
  font-family: 'Literata', serif; font-weight: 600; font-size: 14px; line-height: 1.3;
  color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.book-meta { font-size: 12px; color: var(--text-dim); }
.book-meta .src { color: var(--gold-soft); }

.empty-shelf {
  border: 1px dashed var(--hairline); border-radius: var(--radius);
  padding: 48px 24px; text-align: center; color: var(--text-dim);
}

/* ---------- Forms ---------- */
.card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 24px; max-width: 560px;
}
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.tab {
  background: none; border: none; color: var(--text-dim); font: inherit; font-size: 14px;
  padding: 10px 4px; margin-right: 20px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--gold-soft); border-color: var(--gold-soft); }

.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--text-dim); }
.field input[type=text], .field input[type=password], .field input[type=url], .field input[type=email], .field input[type=number], .field textarea {
  font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.field textarea { min-height: 160px; resize: vertical; font-family: 'Literata', serif; }
.field input[type=file] { font-size: 13px; color: var(--text-dim); }
.hint { font-size: 12px; color: var(--text-dim); }
.error-msg { color: var(--danger); font-size: 13px; margin-top: -6px; margin-bottom: 12px; }
.form-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- Novel detail ---------- */
.breadcrumb { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-soft); }
.novel-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.novel-sidebar { display: flex; flex-direction: column; gap: 18px; }
.side-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 18px; }
.side-panel h4 {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 0 0 12px;
}
.uploader-card { display: flex; align-items: center; gap: 10px; }
.uploader-card .u-main { flex: 1; min-width: 0; }
.uploader-card .u-name { font-weight: 600; font-size: 14px; }
.uploader-card .u-name:hover { color: var(--gold-soft); }
.uploader-card .u-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 860px) { .novel-detail-layout { grid-template-columns: 1fr; } }

/* ---------- Bang xep hang (thanh ben trang chi tiet truyen) ---------- */
.leaderboard-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.leaderboard-tabs button {
  flex: 1; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text-dim);
  font: inherit; font-size: 12px; padding: 6px 0; border-radius: var(--radius); cursor: pointer;
}
.leaderboard-tabs button.active { background: var(--gold); color: #1a1608; border-color: var(--gold); font-weight: 600; }
.leaderboard-list .rank-num {
  width: 20px; flex-shrink: 0; text-align: center; font-weight: 700; color: var(--text-dim); font-size: 13px;
}
.leaderboard-list li:nth-child(1) .rank-num,
.leaderboard-list li:nth-child(2) .rank-num,
.leaderboard-list li:nth-child(3) .rank-num { color: var(--gold-soft); }

.novel-header { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }
.novel-header .spine { width: 150px; flex-shrink: 0; }
.novel-info { flex: 1; min-width: 240px; }
.novel-info h1 { font-size: 26px; }
.novel-code { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: 8px; }
.info-rows { margin: 14px 0; font-size: 14px; display: flex; flex-direction: column; gap: 7px; }
.info-rows .info-row { display: flex; gap: 8px; align-items: center; }
.info-rows .info-label { color: var(--text-dim); flex-shrink: 0; width: 76px; }
.info-row-uploader .info-label { align-self: flex-start; margin-top: 3px; }
.info-uploader { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.info-uploader:hover { color: var(--gold-soft); }
.info-uploader .avatar-mini { width: 26px; height: 26px; font-size: 12px; }
.status-pill { font-size: 12px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); }
.status-pill.completed { color: #3fae5c; border-color: #3fae5c; }
.status-pill.ongoing { color: var(--gold-soft); border-color: var(--gold-soft); }
.badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); color: var(--text-dim); margin-top: 6px;
}
.btn.bookmark-btn { display: inline-flex; align-items: center; gap: 6px; }
.chapter-list-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 8px; flex-wrap: wrap; gap: 8px; }
.chapter-list-head h3 { margin: 0; }
.chapter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.chapter-list li {
  border-bottom: 1px solid var(--hairline); display: flex; align-items: center;
}
.chapter-list button[data-chapter] {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--text);
  font: inherit; font-size: 14px; padding: 12px 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px;
}
.chapter-list button:hover { color: var(--gold-soft); }
.chapter-list .idx { color: var(--text-dim); margin-right: 10px; width: 34px; display: inline-block; }
.chapter-list .chapter-meta { color: var(--text-dim); font-size: 12px; flex-shrink: 0; display: flex; gap: 10px; }
.add-chapter-form { margin: 14px 0 0; }
.chapter-row-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 4px; }
.chapter-edit-btn, .chapter-del-btn {
  font-size: 12px; cursor: pointer; background: none; border: none; font: inherit; padding: 0; white-space: nowrap;
}
.chapter-edit-btn { color: var(--text-dim); }
.chapter-edit-btn:hover { color: var(--gold-soft); text-decoration: underline; }
.chapter-del-btn { color: var(--danger); }
.chapter-del-btn:hover { text-decoration: underline; }

/* ---------- Reader (trang giay duoi den doc) ---------- */
.reader-wrap { display: flex; justify-content: center; background: var(--ink); }
/* Trang doc: bo gioi han 1180px cua <main> de cot chu co the keo rong theo thanh "Do rong cot chu" */
main.reader-main { max-width: none; padding-left: 20px; padding-right: 20px; overflow-anchor: none; }
/* Bình luận trong chương: thụt vào thẳng hàng với lề chữ của cột đọc (giống bình luận ở trang truyện), không dính mép trái */
main.reader-main .comments-section {
  max-width: 720px; margin-right: auto;
  margin-left: max(0px, calc((100% - min(var(--reader-width, 960px), 100%)) / 2 + clamp(18px, 5vw, 56px)));
}
.reader-page {
  background: var(--paper); color: var(--paper-text);
  max-width: min(var(--reader-width, 960px), 100%); width: 100%; padding: 56px clamp(18px, 5vw, 56px) 90px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  font-family: 'Literata', serif;
}
.reader-page h2 { font-size: 24px; margin-bottom: 26px; color: var(--paper-text); }
.reader-page .body-text { font-size: 18px; line-height: 1.85; white-space: pre-wrap; }
/* Chan doc gia thuong sao chep noi dung chuong (khong ap dung khi chu truyen/tac gia/admin
   dang xem - ho khong bi gan class nay, xem app.js) */
.reader-page.no-copy .body-text { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.reader-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin: 40px auto 0; max-width: min(var(--reader-width, 960px), 100%); padding: 0 8px;
}
.reader-nav .btn { background: var(--panel-2); color: var(--text); border-color: var(--hairline); }
.reader-topbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  max-width: min(var(--reader-width, 960px), 100%); margin: 0 auto 18px; padding: 0 8px;
}
.reader-topbar-right { display: flex; align-items: center; gap: 14px; }

/* ---------- Chinh co chu trang doc ---------- */
.font-size-control { display: flex; align-items: center; gap: 2px; }
.font-size-btn {
  width: 28px; height: 28px; border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
}
.font-size-btn:hover { border-color: var(--gold); }
.font-size-btn:first-child { font-size: 11px; }
.font-size-btn:last-child { font-size: 16px; }
.font-size-value { min-width: 26px; text-align: center; font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: baseline; justify-content: center; }
.font-size-value .rs-num { width: 3ch; }

/* ---------- Da doc chuong xong (tu dong danh dau khi luot het chuong) ---------- */
.chapter-list .read-mark {
  color: #3fae5c; font-size: 12px; cursor: pointer; background: none; border: none;
  font: inherit; padding: 0; margin-left: 10px; white-space: nowrap; flex-shrink: 0;
}
.chapter-list .read-mark:hover { color: #3fae5c; text-decoration: underline; }
.reader-read-notice {
  max-width: 720px; margin: 18px auto 0; padding: 0 8px;
  color: #3fae5c; font-size: 13px; display: flex; align-items: center; gap: 6px;
}

.loading { color: var(--text-dim); padding: 40px 0; text-align: center; }

/* ---------- Follow + view count ---------- */
.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; color: var(--text-dim); }
.stat-row .stat { display: flex; align-items: center; gap: 5px; }
.btn.following { background: var(--panel-2); color: var(--gold-soft); border-color: var(--gold-soft); }

/* ---------- Comments ---------- */
.comments-section { margin-top: 36px; max-width: 720px; }
.comments-section h3 { font-size: 17px; margin-bottom: 14px; }
.comment-form { margin-bottom: 18px; }
.comment-form textarea {
  width: 100%; min-height: 44px; max-height: 140px; font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text); resize: vertical;
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-item {
  border-bottom: 1px solid var(--hairline); padding: 12px 0; font-size: 14px;
}
.comment-item .comment-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.comment-item .comment-author { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.comment-item .comment-user { color: var(--gold-soft); font-weight: 600; }
.comment-item .comment-time { color: var(--text-dim); font-size: 12px; }
.comment-item .comment-body { line-height: 1.5; white-space: pre-wrap; }
.comment-item .del-comment { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.comment-item .del-comment:hover { color: var(--danger); }
.comment-empty { color: var(--text-dim); font-size: 13px; padding: 8px 0; }
.comment-item .comment-image { max-width: 220px; max-height: 220px; border-radius: var(--radius); margin-top: 8px; display: block; cursor: zoom-in; }
.comment-form-row { display: flex; gap: 10px; }
.comment-form-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.comment-attach-btn {
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--text-dim);
  font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer;
}
.comment-attach-btn:hover { border-color: var(--gold); color: var(--text); }
.comment-image-preview { position: relative; display: inline-block; margin-top: 8px; }
.comment-image-preview img { max-height: 90px; border-radius: var(--radius); display: block; }
.pending-image-order { display: block; margin-top: 3px; font-size: 11px; color: var(--text-dim); text-align: center; }
.comment-image-preview button {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--panel); color: var(--text); font-size: 12px;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* ---------- Reply long nhau, ghim binh luan, tag @username ---------- */
.comment-item .comment-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.reply-btn, .pin-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; font: inherit;
  padding: 0;
}
.reply-btn:hover { color: var(--text); text-decoration: underline; }
.pin-btn:hover { color: var(--gold-soft); text-decoration: underline; }
.comment-item.pinned { background: var(--panel-2); border-radius: var(--radius); padding: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.pinned-badge { color: var(--gold-soft); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.comment-list.nested { list-style: none; margin: 10px 0 0; padding: 10px 0 0 14px; border-left: 2px solid var(--hairline); }
.comment-list.nested .comment-item { padding: 10px 0; }
.reply-form-slot:not([hidden]) { margin: 10px 0 0 0; padding-left: 2px; }
.reply-form-slot .comment-form { margin-bottom: 0; }
.mention-tag { color: var(--gold-soft); font-weight: 600; text-decoration: none; }
.mention-tag:hover { text-decoration: underline; }
.mention-popover {
  position: fixed; z-index: 1001; width: 240px; max-height: 220px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 4px; display: none;
}
.mention-popover.open { display: block; }
.mention-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit;
  background: none; border: none; color: var(--text); font-size: 13px; padding: 7px 8px;
  cursor: pointer; border-radius: var(--radius-sm);
}
.mention-opt:hover, .mention-opt.active { background: var(--panel-2); }
.mention-opt.active { box-shadow: inset 2px 0 0 var(--gold-soft); }
.mention-opt span { font-weight: 600; }
.mention-opt em { color: var(--text-dim); font-style: normal; font-size: 12px; margin-left: auto; }

/* ---------- Tac gia/hoa si minh hoa gan tai khoan (novel_contributors) ---------- */
.contributors-row .contributors-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.contributor-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 3px 10px 3px 3px; text-decoration: none;
}
.contributor-chip:hover { border-color: var(--gold-soft); }
.contributor-chip .avatar-mini { width: 20px; height: 20px; font-size: 11px; }
.contributor-chip em { font-style: normal; color: var(--text-dim); font-size: 11px; }

/* ---------- Anh minh hoa chen trong chuong (luc viet + luc doc) ---------- */
.chapter-content-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.chapter-image-preview-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.chapter-image-preview { position: relative; display: inline-block; }
.chapter-image-preview img { max-height: 90px; max-width: 140px; object-fit: cover; border-radius: var(--radius); display: block; }
.chapter-image-preview button {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--panel); color: var(--text); font-size: 12px;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.chapter-img-wrap { display: block; margin: 18px 0; }
.chapter-img { max-width: 100%; max-height: 640px; border-radius: var(--radius); display: block; margin: 0 auto; cursor: zoom-in; }

/* ---------- Anh/gif dinh kem bai viet + binh luan dien dan ---------- */
.forum-post-image { max-width: 100%; max-height: 520px; border-radius: var(--radius); display: block; margin: 0 0 24px; cursor: zoom-in; }
.forum-comment-image { max-width: 220px; max-height: 220px; border-radius: var(--radius); margin-top: 8px; display: block; cursor: zoom-in; }

/* ---------- Lightbox: bam vao anh de xem to + tai ve ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 16, .86); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(90vw, 900px); max-height: 90vh; }
.lightbox-inner img { max-width: 100%; max-height: 76vh; border-radius: var(--radius-sm); box-shadow: var(--shadow); object-fit: contain; }
.lightbox-actions { display: flex; gap: 10px; }
.lightbox-actions .btn { background: var(--panel); }
.lightbox-img, img.lightbox-img { cursor: zoom-in; }

/* ---------- Chon emoji chen vao o nhap ---------- */
.emoji-picker-popover {
  position: fixed; z-index: 1001; width: 260px; max-height: 220px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; display: none;
}
.emoji-picker-popover.open { display: block; }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-opt {
  background: none; border: none; font-size: 18px; line-height: 1; padding: 6px 0; cursor: pointer;
  border-radius: var(--radius); transition: background .1s;
}
.emoji-opt:hover { background: var(--panel-2); }
.emoji-trigger-btn { font-size: 15px; }

/* ---------- Thanh tha cam xuc (reaction) ---------- */
.reaction-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.reaction-opt {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: 4px 9px; cursor: pointer; color: var(--text-dim); transition: border-color .15s, color .15s;
}
.reaction-opt:hover { border-color: var(--gold-soft); }
.reaction-opt.active { border-color: var(--gold); background: var(--panel); color: var(--text); }
.reaction-count { font-size: 11px; color: var(--text-dim); }
.reaction-total { font-size: 12px; color: var(--text-dim); margin-left: 4px; }

/* ---------- Anh bia trang ca nhan (kieu Facebook). Khong co anh -> mau xam o che do
   sang, mau den o che do toi (theo yeu cau), khong dung mau --panel binh thuong. ---------- */
.profile-cover {
  /* Rong hon phan noi dung ben duoi 1/5 (120%), can giua bang margin am 2 ben (10% + 10%) */
  position: relative; width: 120%; margin-left: -10%; height: var(--profile-cover-h, 320px); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 20px; background: #000000;
}
html[data-theme="light"] .profile-cover.no-photo { background: #d9d9d9; }
html:not([data-theme="light"]) .profile-cover.no-photo { background: #000000; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-cover-actions { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.profile-cover-btn {
  font-size: 12px; padding: 6px 10px; background: rgba(20, 20, 20, .55); color: #fff;
  border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(2px);
}
.profile-cover-btn:hover { background: rgba(20, 20, 20, .75); }
.profile-cover-hint {
  position: absolute; left: 12px; bottom: 12px; font-size: 11px; color: #fff;
  background: rgba(20, 20, 20, .5); padding: 4px 9px; border-radius: var(--radius-pill); pointer-events: none;
}
.draggable-cover { cursor: grab; }
.draggable-cover.dragging { cursor: grabbing; }
@media (max-width: 640px) {
  /* Man hinh nho khong du cho de "tran vien" - tra ve dung 100% de tranh cuon ngang */
  .profile-cover { height: clamp(140px, calc(var(--profile-cover-h, 320px) * .6), 360px); width: 100%; margin-left: 0; }
}

/* ---------- Nhan vai tro (reader/author/admin) ---------- */
.role-badge {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); vertical-align: middle;
  border: 1px solid var(--hairline); color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; /* nhãn không bao giờ bị xuống dòng giữa chừng (vd "QUẢN TRỊ / VIÊN") */
}
.role-badge.role-author { color: var(--gold-soft); border-color: var(--gold-soft); }
.role-badge.role-admin { color: var(--danger); border-color: var(--danger); }

/* ---------- Panel "Quan ly quyen xem" tren trang truyen + trang To chuc ---------- */
.access-block { margin-bottom: 18px; }
.access-block:last-child { margin-bottom: 0; }
.access-block h4 { font-size: 13px; margin-bottom: 8px; }
.access-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.access-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px 4px 10px;
  border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.access-chip .avatar-mini { width: 18px; height: 18px; font-size: 10px; }
.access-chip.blocked { border-color: var(--danger); color: var(--danger); }
.access-chip button {
  background: none; border: none; color: inherit; cursor: pointer; font-size: 11px; opacity: .7;
  padding: 0; line-height: 1;
}
.access-chip button:hover { opacity: 1; }
.access-add-form { display: flex; gap: 8px; }
.access-add-form input, .access-add-form select {
  flex: 1; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px;
}
.access-add-form .btn { font-size: 13px; padding: 7px 12px; flex-shrink: 0; }

.org-card h3 { font-size: 17px; }

/* ---------- Profile ---------- */
.profile-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.profile-side { display: flex; flex-direction: column; gap: 16px; }
.avatar-circle {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Literata', serif; font-size: 36px; font-weight: 600; color: #fff;
}
.profile-username {
  font-family: 'Literata', serif; font-size: 20px; font-weight: 600; line-height: 1.3;
  word-break: break-word;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; /* tên quá dài -> nhãn vai trò tụt xuống dòng riêng, nguyên vẹn */
}
.profile-username .profile-name { min-width: 0; overflow-wrap: anywhere; }
.profile-username .role-badge { flex: none; }
.profile-handle { color: var(--text-dim); font-size: 13px; margin-top: 2px; line-height: 1.3; word-break: break-all; }
.profile-stats { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.profile-stats .row { display: flex; align-items: center; gap: 8px; }
.side-tabs { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.side-tabs button {
  text-align: left; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
}
.side-tabs button.active { background: var(--panel-2); color: var(--gold-soft); }
.genre-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.genre-tags-label { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.genre-tag {
  font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  color: var(--text-dim); text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
a.genre-tag:hover { color: var(--gold-soft); border-color: var(--gold-soft); background: var(--panel-2); }
a.genre-tag.active { color: var(--gold-soft); border-color: var(--gold-soft); background: var(--panel-2); font-weight: 600; }
.genre-tag-count, .genre-chip-count { opacity: .7; font-size: .92em; }
.genre-tag-wrap { display: inline-flex; align-items: center; gap: 2px; }
.genre-del { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 50%; opacity: .6; }
.genre-del:hover { color: #e57373; opacity: 1; background: var(--panel-2); }

/* ---------- Bo chon the loai (dang ky / tai khoan / dang truyen): nut dang chip, bam de doi trang thai ---------- */
.genre-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.genre-chip {
  font: inherit; font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text-dim);
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.genre-chip:hover { border-color: var(--gold); color: var(--text); }
.genre-chip.selected, .genre-chip.fav {
  background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); font-weight: 600;
}
.genre-chip.dislike { background: none; color: var(--danger); border-color: var(--danger); }
.genre-picker-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.genre-picker-legend span { display: inline-flex; align-items: center; gap: 5px; }

.profile-main .panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 20px; margin-bottom: 20px; }
.profile-main h3 { font-size: 15px; margin-bottom: 10px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.novel-row-list { list-style: none; margin: 0; padding: 0; }
.novel-row-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.novel-row-list li:hover .row-title { color: var(--gold-soft); }
.row-cover { width: 34px; height: 48px; border-radius: var(--radius-xs); flex-shrink: 0; }
.row-title { flex: 1; font-size: 14px; }
.row-meta { font-size: 12px; color: var(--text-dim); }
.bio-edit-form textarea { width: 100%; min-height: 90px; }

/* ---------- Forum ---------- */
.forum-list { list-style: none; margin: 0; padding: 0; }
.forum-list li { border-bottom: 1px solid var(--hairline); padding: 16px 4px; cursor: pointer; }
.forum-list .f-title { font-family: 'Literata', serif; font-size: 16px; font-weight: 600; }
.forum-list .f-title:hover { color: var(--gold-soft); }
.forum-list .f-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.forum-cat { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); color: var(--gold-soft); margin-right: 8px; }
.forum-post-body { line-height: 1.7; white-space: pre-wrap; margin: 16px 0 28px; font-size: 15px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text);
  padding: 10px 18px; border-radius: var(--radius); font-size: 14px; z-index: 50;
}
.toast.error { border-color: var(--danger); color: var(--danger); }

/* ---------- Icon button + dropdown chung (theme, user menu) ---------- */
.icon-btn {
  width: 34px; height: 34px; padding: 0; line-height: 1; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--gold); }

.theme-menu, .user-menu, .notif-menu { position: relative; }
.notif-menu .icon-btn { position: relative; }
/* Icon SVG: can giua tuyet doi (emoji lech theo font tung may) */
.icon-svg { width: 17px; height: 17px; fill: currentColor; display: block; pointer-events: none; }
.emo { display: block; line-height: 1; pointer-events: none; }
.emo-quote { transform: translateY(2.5px); } /* ❝ nam cao trong o em -> day xuong de can giua */
/* Chuong emoji: glyph nam lech len tren trong o em -> day xuong de can giua thi giac (chinh --bell-nudge neu font may khac) */
.bell-emoji { display: block; line-height: 1; transform: translateY(var(--bell-nudge, 0.01px)); pointer-events: none; }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-sm); background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-dropdown { width: 320px; max-height: 420px; overflow-y: auto; padding: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.notif-head strong { font-size: 13px; }
.notif-list { list-style: none; margin: 0; padding: 4px; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: var(--radius-xs); cursor: pointer; }
.notif-item:hover { background: var(--panel-2); }
.notif-item.unread { background: rgba(201, 162, 75, .08); }
.notif-item.unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); margin-top: 6px; flex-shrink: 0; }
.notif-item .row-cover { width: 32px; height: 44px; }
.notif-text { flex: 1; font-size: 13px; line-height: 1.4; }
.notif-time { color: var(--text-dim); font-size: 11px; }
.notif-empty { color: var(--text-dim); font-size: 13px; padding: 18px 14px; text-align: center; margin: 0; }
.dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; z-index: 40;
  display: none; flex-direction: column; gap: 2px;
}
.dropdown.open { display: flex; }
.dropdown button, .dropdown a {
  background: none; border: none; text-align: left; color: var(--text); font: inherit; font-size: 14px;
  padding: 9px 12px; border-radius: var(--radius-xs); cursor: pointer; display: flex; align-items: center; gap: 9px;
  text-decoration: none;
}
.dropdown button:hover, .dropdown a:hover { background: var(--panel-2); color: var(--gold-soft); }
.dropdown button.active-theme { color: var(--gold-soft); font-weight: 600; }
.dropdown hr { border: none; border-top: 1px solid var(--hairline); margin: 4px 2px; }

/* ---------- Menu "The loai" o top-bar: liet ke tat ca the loai, mo dang luoi 2 cot ---------- */
.genre-menu { position: relative; }
.genre-dropdown {
  /* --genre-cols / --genre-w / --genre-off do JS dat (initGenreMenu): so cot Super Admin chon, be rong theo man hinh, lech trai de khong tran */
  width: var(--genre-w, 320px); left: var(--genre-off, 0); right: auto; max-height: 70vh; overflow-y: auto;
  display: none; grid-template-columns: repeat(var(--genre-cols, 2), minmax(0, 1fr)); gap: 2px;
}
.genre-dropdown.open { display: grid; }
.genre-dropdown a { justify-content: space-between; gap: 6px; font-size: 13px; padding: 8px 10px; min-width: 0; }
.genre-dropdown-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.genre-dropdown-count { flex-shrink: 0; }
.genre-dropdown a.genre-dropdown-all { grid-column: 1 / -1; justify-content: center; color: var(--gold-soft); border-top: 1px solid var(--hairline); margin-top: 4px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.genre-dropdown a.active { color: var(--gold-soft); font-weight: 600; background: var(--panel-2); }
.genre-dropdown-count { opacity: .65; font-size: .9em; }

.user-menu-trigger { display: flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 14px; padding: 4px; }
.user-menu-trigger:hover strong { color: var(--gold-soft); }
.user-menu .dropdown { right: 0; min-width: 180px; }

/* May co chuot: re chuot vao avatar / "The loai" la hien menu (khong can bam). Cau noi ::before lap
   khoang trong 8px giua nut va menu de chuot di chuyen xuong khong bi mat hover. Man hinh cam ung
   khong dung khoi nay - van bam de mo/dong (.open) nhu cu. */
@media (hover: hover), (any-hover: hover) {
  .user-menu:hover .dropdown { display: flex; }
  .genre-menu:hover .genre-dropdown, .genre-menu.hover-open .genre-dropdown { display: grid; }
  .hover-suppress .dropdown { display: none !important; } /* vua chon xong 1 muc -> dong menu cho toi khi re chuot ra roi vao lai */
  .user-menu .dropdown::before {
    content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  }
  /* Menu "The loai": khung co overflow-y:auto nen CAT MAT ::before cua chinh no (nam ngoai khung) -> chuot di qua khoang
     ho 8px la menu dong. Cau noi phai dat o phan tu CHA (.genre-menu), chi ton tai khi dang hover, rong bang khung
     (320px, canh phai nhu khung) de di cheo sang trai cung khong bi mat hover. */
  .genre-menu:hover::after {
    content: ''; position: absolute; left: var(--genre-off, 0); top: 100%; width: var(--genre-w, 320px); height: 10px;
  }
}

/* Trang "The loai" rieng (#/genres) - dung lai .genre-tag, chi to hon mot chut cho de bam */
.genre-page-grid { gap: 10px; margin-top: 0; }
.genre-page-grid .genre-tag { font-size: 14px; padding: 7px 14px; }

/* ---------- Trinh soan tieu su (bo cuc kieu DMOJ) ---------- */
.rte { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; }
.rte-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 0 8px; border-bottom: 1px solid var(--hairline); background: var(--panel);
}
.rte-tabs { display: flex; gap: 2px; }
.rte-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; padding: 10px 14px; cursor: pointer; transition: color .15s, border-color .15s;
}
.rte-tab:hover { color: var(--text); }
.rte-tab.active { color: var(--gold-soft); border-bottom-color: var(--gold-soft); font-weight: 600; }
.rte-toolbar { display: flex; gap: 2px; flex-wrap: wrap; padding: 5px 0; }
.rte-toolbar button {
  min-width: 30px; height: 28px; padding: 0 6px; border-radius: var(--radius);
  border: 1px solid transparent; background: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1;
}
.rte-toolbar button:hover { border-color: var(--hairline); background: var(--panel-2); color: var(--text); }
.rte-toolbar button sup { font-size: 9px; }

.rte .rte-pane { display: flex; background: var(--panel-2); }
/* display:flex/block se de len [hidden] mac dinh cua trinh duyet -> phai khai bao lai */
.rte .rte-pane[hidden] { display: none; }
.rte-gutter {
  flex-shrink: 0; width: 38px; padding: 10px 0; overflow: hidden; text-align: right;
  border-right: 1px solid var(--hairline); background: var(--panel);
  color: var(--text-dim); opacity: .6; user-select: none;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6;
}
.rte-gutter div { padding-right: 8px; }
.rte .rte-source {
  flex: 1; min-height: 260px; resize: vertical; border: none; outline: none;
  padding: 10px 12px; background: var(--panel-2); color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6;
  white-space: pre; overflow-x: auto;
}
.rte .rte-preview-pane { display: block; min-height: 260px; padding: 14px 16px; }
.rte .rte-preview-pane[hidden] { display: none; }
.rte-help {
  padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--panel); font-size: 13px;
}
.rte-help p.hint { font-size: 12px; }
.rte-help code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--gold-soft); word-break: break-word; }
/* Che do soan thao Co ban / Nang cao (dan truyen, them/sua chuong, dang/sua bai) */
.editor-mode { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.editor-mode-label { font-size: 12px; color: var(--text-dim); }
.editor-mode button {
  border: 1px solid var(--hairline); background: var(--panel); color: var(--text-dim);
  border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.editor-mode button:hover { color: var(--text); }
.editor-mode button.active { color: var(--gold-soft); border-color: var(--gold-soft); font-weight: 600; }
.rte-mount[hidden] { display: none; }
.rte.rte-plain .rte-gutter { display: none; }
.rte.rte-plain .rte-source { white-space: pre-wrap; overflow-x: hidden; width: 100%; box-sizing: border-box; }
/* O nhap co chu (px) tren thanh cong cu: bam vao so de go tay, giong bang chinh trang doc */
.rte-size {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px;
  border-left: 1px solid var(--hairline); color: var(--text-dim); font-size: 12px;
}
.rte-toolbar .rte-size button { min-width: 24px; padding: 0 4px; font-size: 12px; }
/* Ô số px: nằm trong .field nên bị luật ".field input[type=number]" (padding 10px 12px, nền đậm) bóp mất chữ số -> ghi đè
   cho giống ô số ở bảng chỉnh trang đọc (nền trong, gạch chân nét đứt, bấm vào là gõ được). */
.rte-size .rs-num, .field .rte-size input.rs-num[type=number] {
  width: 3.4ch; min-width: 3.4ch; padding: 0 2px; margin: 0; border: 0; border-bottom: 1px dashed var(--hairline);
  border-radius: 0; background: transparent; box-sizing: content-box;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-align: right; line-height: 1.4;
  -moz-appearance: textfield; appearance: textfield;
}
.rte-size .rs-num:hover { border-bottom-color: var(--gold-soft); }
.rte-size .rs-num:focus, .field .rte-size input.rs-num[type=number]:focus { outline: none; border-bottom: 1px solid var(--gold); color: var(--gold-soft); background: var(--panel-2); }
/* Noi dung dang nang cao khi hien thi */
.forum-post-body.md-body { white-space: normal; }
.chapter-line.md { white-space: normal; }
.chapter-line.md p { margin: 0; }
.chapter-line.md h1, .chapter-line.md h2, .chapter-line.md h3, .chapter-line.md h4 { margin: .4em 0 .2em; line-height: 1.3; }
.chapter-line.md ul, .chapter-line.md ol { margin: 0; padding-left: 1.5em; }
.chapter-line.md blockquote { margin: .3em 0; padding-left: 12px; border-left: 3px solid var(--hairline); color: var(--text-dim); }
.chapter-line.md pre, .chapter-line.md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.chapter-line.md pre { overflow-x: auto; white-space: pre; }
.chapter-line.md hr { border: none; border-top: 1px solid var(--hairline); margin: .8em 0; }
.chapter-line.md img { max-width: 100%; border-radius: var(--radius-xs); }
.chapter-line.md iframe { max-width: 100%; border: none; border-radius: var(--radius-sm); display: block; }
.chapter-line.md table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.chapter-line.md th, .chapter-line.md td { border: 1px solid var(--hairline); padding: 4px 8px; }
.chapter-line.md a { color: var(--gold-soft); }
.bio-render { line-height: 1.6; }
.bio-render a { color: var(--gold-soft); }
.bio-render img { max-width: 100%; border-radius: var(--radius-xs); }

/* ---------- Avatar co anh that ----------
   Truoc day chi co .avatar-edit-wrap moi dinh kieu cho <img>, nen avatar o trang
   Thanh vien (top 3 + bang xep hang) khong duoc co lai -> bi cat goc / hien o trang.
   Cac quy tac duoi day ap dung cho MOI noi dung avatar. */
.avatar-circle.has-img,
.avatar-mini.has-img { padding: 0; overflow: hidden; background: var(--panel-2); }
.avatar-circle img.avatar-img,
.avatar-mini img.avatar-img,
.avatar-edit-wrap img.avatar-img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* ---------- Avatar upload ---------- */
.avatar-edit-wrap { position: relative; width: 96px; }
.avatar-edit-wrap .avatar-circle { overflow: hidden; }
.avatar-edit-overlay {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
  opacity: 0; cursor: pointer; transition: opacity .15s;
}
.avatar-edit-wrap:hover .avatar-edit-overlay { opacity: 1; }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Khoi tieu su tren trang ca nhan (bo cuc kieu DMOJ) ---------- */
.bio-panel { }
.bio-render { line-height: 1.7; word-break: break-word; }
.bio-render > *:first-child { margin-top: 0; }
.bio-render > *:last-child { margin-bottom: 0; }
.bio-render p { margin: 0 0 10px; }
.bio-render ul, .bio-render ol { margin: 0 0 10px; padding-left: 22px; }
.bio-render h1, .bio-render h2, .bio-render h3, .bio-render h4 {
  font-family: 'Literata', serif; margin: 14px 0 8px; line-height: 1.3; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.bio-render h1 { font-size: 21px; }
.bio-render h2 { font-size: 18px; }
.bio-render h3 { font-size: 16px; }
.bio-render h4 { font-size: 15px; }
.bio-render blockquote {
  margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--gold-soft); color: var(--text-dim);
}
.bio-render code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  background: var(--panel-2); padding: 1px 5px; border-radius: var(--radius-xs);
}
.bio-render hr { border: none; border-top: 1px solid var(--hairline); margin: 14px 0; }
.bio-render sup, .bio-render sub { font-size: 75%; }
.bio-render table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.bio-render th, .bio-render td { border: 1px solid var(--hairline); padding: 6px 10px; text-align: left; }
.bio-render th { background: var(--panel-2); font-weight: 600; }
.bio-render iframe { max-width: 100%; border: none; border-radius: var(--radius-sm); display: block; margin: 0 0 12px; }
.bio-render pre {
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px; overflow-x: auto; margin: 0 0 10px;
}

/* ---------- Member grid ---------- */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.member-card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 18px 14px; text-align: center; cursor: pointer; transition: border-color .15s;
}
.member-card:hover { border-color: var(--gold); }
.member-card .avatar-circle { width: 56px; height: 56px; font-size: 22px; margin: 0 auto 10px; }
.member-card .m-name { font-family: 'Literata', serif; font-weight: 600; font-size: 14px; }
.member-card .m-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* ---------- History (Lich su doc) ---------- */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.history-list .row-cover { width: 40px; height: 56px; }
.history-list .h-main { flex: 1; }
.history-list .h-title { font-size: 14px; }
.history-list .h-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Checkbox (remember me) ---------- */
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin: -6px 0 16px; }
.checkbox-row input { accent-color: var(--gold); }
.link-btn { background: none; border: none; color: var(--gold-soft); font: inherit; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Cover upload trong form them truyen / chinh sua ---------- */
.cover-picker { display: flex; align-items: center; gap: 14px; }
.cover-preview {
  width: 70px; height: 100px; border-radius: var(--radius-xs); border: 1px dashed var(--hairline);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--text-dim); font-size: 11px; text-align: center;
}
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto; border-top: 1px solid var(--hairline); padding: 22px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: var(--text-dim); font-size: 13px;
}
.footer-credit strong { color: var(--gold-soft); }
.footer-links { display: flex; gap: 14px; }
.footer-link {
  color: var(--text-dim); text-decoration: none; font-size: 13px;
  padding: 5px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-link:hover { color: var(--gold-soft); border-color: var(--gold); }

/* ---------- Bang xep hang thanh vien ---------- */
.panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 22px; }

.top3-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
.top3-card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.top3-card.top3-first { border-color: var(--gold); box-shadow: 0 6px 24px rgba(0,0,0,.25); transform: translateY(-8px); }
.top3-rank { font-size: 11px; letter-spacing: .06em; color: var(--text-dim); font-weight: 600; }
.top3-rank-first { display: inline-block; background: rgba(60,175,92,.16); color: #3fae5c; padding: 3px 10px; border-radius: var(--radius-pill); width: fit-content; }
.top3-user { display: flex; align-items: center; gap: 12px; }
.top3-avatar { width: 52px; height: 52px; font-size: 20px; flex-shrink: 0; }
.top3-name { font-family: 'Literata', serif; font-weight: 600; font-size: 15px; }
.top3-handle { font-size: 12px; color: var(--text-dim); }
.top3-score { font-family: 'Literata', serif; font-size: 26px; font-weight: 700; }

.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--hairline);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.page-btn:hover:not(:disabled) { border-color: var(--gold); }
.page-btn.active { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); font-weight: 600; }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-ellipsis { color: var(--text-dim); padding: 0 4px; }

.member-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.member-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
  padding: 8px 10px; border-bottom: 1px solid var(--hairline);
}
.member-table td { padding: 12px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.member-table tr:hover td { background: var(--panel-2); cursor: pointer; }
.member-row-user { display: flex; align-items: center; gap: 10px; }
.member-row-avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }
.member-row-name { font-weight: 600; }
.member-row-handle { font-size: 12px; color: var(--text-dim); }

@media (max-width: 700px) {
  .top3-row { grid-template-columns: 1fr; }
  .top3-card.top3-first { transform: none; }
  .member-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .searchbox { order: 3; flex-basis: 100%; }
  main { padding: 20px 16px 48px; }
  .reader-page { padding: 36px clamp(14px, 4.5vw, 40px) 60px; }
  .profile-layout { grid-template-columns: 1fr; }
}

/* ---------- Thuoc tinh hidden luon thang (nhieu phan tu co display rieng) ---------- */
[hidden] { display: none !important; }

/* ---------- O mat khau co nut hien/an ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: none; border: none; border-radius: var(--radius);
  color: var(--text-dim); cursor: pointer;
}
.pw-toggle:hover { color: var(--gold-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- Trang doc: dong de luu (nhan dup 2 lan) ---------- */
.reader-page .body-text { touch-action: manipulation; }
.reader-hint { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--paper-text-dim); margin: -14px 0 22px; }
.chapter-line { border-radius: var(--radius-xs); }
.chapter-line.has-text { cursor: text; }
.chapter-line.saved {
  --hl: 201, 162, 75;
  background: rgba(var(--hl), .26);
  box-shadow: -5px 0 0 rgb(var(--hl));
}
.chapter-line.saved[data-color="green"] { --hl: 76, 175, 110; }
.chapter-line.saved[data-color="blue"] { --hl: 79, 140, 214; }
.chapter-line.saved[data-color="pink"] { --hl: 214, 100, 150; }
.chapter-line.saved[data-color="purple"] { --hl: 150, 110, 210; }
.chapter-line.saved[data-note]::after { content: ' 📝'; font-size: .7em; opacity: .8; }
.chapter-line.flash { animation: lineFlash 2.2s ease-out; }
@keyframes lineFlash {
  0%, 35% { background: rgba(201, 162, 75, .55); }
  100% { background: rgba(201, 162, 75, 0); }
}
.chapter-line.saved.flash { animation: lineFlashSaved 2.2s ease-out; }
@keyframes lineFlashSaved {
  0%, 35% { background: rgba(var(--hl), .6); }
  100% { background: rgba(var(--hl), .26); }
}

/* ---------- Trang Danh dau (dong da luu) ---------- */
.bookmark-group { margin-bottom: 26px; max-width: 760px; }
.bookmark-novel { font-size: 17px; margin: 0 0 10px; }
.bookmark-novel a { color: var(--gold-soft); text-decoration: none; }
.bookmark-novel a:hover { text-decoration: underline; }
.bookmark-item {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.bookmark-text {
  margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--gold);
  font-family: 'Literata', serif; line-height: 1.7; white-space: pre-wrap; font-size: 15px;
}
.bookmark-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.bookmark-meta a { color: var(--gold-soft); text-decoration: none; font-weight: 600; }
.bookmark-meta a:hover { text-decoration: underline; }
.bookmark-remove { margin-left: auto; font-size: 12px; padding: 4px 10px; }

/* ---------- To chuc ---------- */
.org-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.org-eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--text-dim); margin-bottom: 4px; }
.org-wide { max-width: none; }
.org-select {
  font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.org-search { margin-bottom: 6px; }
.org-search input {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel); color: var(--text);
}
.org-search input:focus { outline: none; border-color: var(--gold); }
.org-subtitle { font-size: 16px; margin: 24px 0 12px; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.org-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s;
}
.org-mini:hover { border-color: var(--gold); transform: translateY(-2px); }
.org-mini-main { min-width: 0; }
.org-mini-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-mini-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.org-role {
  font-size: 11px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
}
.org-role.owner { color: var(--gold-soft); border-color: var(--gold-soft); }
.org-access { font-size: 11px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid; white-space: nowrap; flex-shrink: 0; }
.org-access.open { color: #3fae5c; border-color: #3fae5c; }
.org-access.closed { color: var(--gold-soft); border-color: var(--gold-soft); }
.org-rows { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.org-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline);
  color: var(--text); text-decoration: none;
}
.org-row:last-child { border-bottom: none; }
a.org-row:hover { background: var(--panel-2); }
.org-row-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-count { font-size: 12px; color: var(--text-dim); background: var(--panel-2); border-radius: var(--radius-pill); padding: 1px 10px; min-width: 32px; text-align: center; }

.org-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
.org-main { min-width: 0; }
.org-hero {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 26px;
}
.org-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.org-pill {
  display: inline-block; font-size: 11px; letter-spacing: .12em; padding: 3px 11px;
  border-radius: var(--radius-md); border: 1px solid var(--hairline); color: var(--gold-soft); background: var(--panel);
}
.org-hero h1 { font-family: 'Literata', serif; font-size: 30px; margin: 12px 0 6px; line-height: 1.2; }
.org-owner { font-size: 13px; color: var(--text-dim); }
.org-owner a { color: var(--gold-soft); text-decoration: none; }
.org-owner a:hover { text-decoration: underline; }
.org-stats { display: flex; gap: 10px; }
.org-stat { min-width: 110px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel); }
.org-stat-label { font-size: 10.5px; letter-spacing: .12em; color: var(--text-dim); }
.org-stat-value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.org-stat-value.open { color: #3fae5c; }
.org-stat-value.closed { color: var(--gold-soft); }
.org-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.org-info-card {
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px;
  background: var(--panel); font-size: 13px; color: var(--text-dim); line-height: 1.55;
}
.org-info-card strong { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 4px; }
.org-about { margin-top: 16px; }
.org-about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.org-about-head h3 { margin: 0; font-size: 17px; }
.org-about-icon {
  width: 36px; height: 36px; border-radius: var(--radius); background: var(--panel-2); color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center; font-family: 'Literata', serif; font-style: italic; font-weight: 700;
  flex-shrink: 0;
}
.org-desc { white-space: pre-wrap; line-height: 1.65; margin: 0; }
.org-side-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.org-side-head h4 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; }
.org-edit-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text-dim); text-decoration: none; font-size: 16px;
}
.org-edit-btn:hover { color: var(--gold-soft); }
.org-actions { display: flex; flex-direction: column; gap: 10px; }
.org-actions .org-action { width: 100%; text-align: center; display: block; }
.org-note { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
/* Nut dang the <a> trong khu vuc to chuc: bo gach chan, can giua nhu <button> */
.org-actions a.btn, .org-request-card a.btn { display: inline-block; text-decoration: none; }
.org-block { max-width: 760px; margin-bottom: 22px; }
.org-members-list { max-width: 760px; }
.org-member { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--hairline); }
.org-member:last-child { border-bottom: none; }
.org-member-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.org-member-main .avatar-mini { width: 34px; height: 34px; font-size: 14px; }
.org-member-name { font-weight: 600; color: var(--text); text-decoration: none; }
.org-member-name:hover { color: var(--gold-soft); }
.org-remove { font-size: 12px; padding: 4px 10px; }
.org-request { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.org-request-reason { margin: 10px 0 12px; padding: 8px 12px; background: var(--panel-2); border-radius: var(--radius); white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.org-request-card { max-width: 640px; margin: 0 auto; }
.org-request-card h2 { margin: 12px 0 6px; font-size: 24px; }
.org-hr { border: none; border-top: 1px solid var(--hairline); margin: 18px 0; }
.org-danger { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .org-layout { grid-template-columns: 1fr; }
  .org-info-cards { grid-template-columns: 1fr; }
}

/* ---------- Thanh dieu huong: du cho 6 muc (them "To chuc") ---------- */
.topbar { gap: 18px; }
.navbtn { white-space: nowrap; padding: 8px 12px; }
.searchbox { flex: 0 1 260px; min-width: 150px; }
@media (max-width: 1100px) {
  .navbtn { padding: 8px 9px; font-size: 13.5px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1000px) {
  /* man hinh vua/nho: thanh menu xuong hang rieng thay vi tran ngang */
  .topbar { flex-wrap: wrap; }
  .topnav { order: 3; flex: 1 0 100%; flex-wrap: wrap; row-gap: 2px; }
  .searchbox { flex: 1 1 200px; }
}
@media (max-width: 600px) {
  .navbtn { padding: 8px 10px; }
  .searchbox { flex-basis: 100%; order: 4; }
}

/* ================= Danh gia sao, ke doc, tim trong truyen ================= */
.library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.library-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.book-rating { color: var(--gold-soft); font-weight: 600; }
.stars {
  display: inline-block; font-size: 16px; letter-spacing: 1px; line-height: 1; vertical-align: -1px;
  background: linear-gradient(90deg, var(--gold) var(--pct, 0%), var(--hairline) var(--pct, 0%));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rating-box { margin: 8px 0 4px; }
.rating-summary { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rating-mine { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; flex-wrap: wrap; }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rating-star { background: none; border: none; padding: 0 1px; font-size: 22px; line-height: 1; color: var(--hairline); cursor: pointer; transition: transform .1s; }
.rating-star.on { color: var(--gold); }
.rating-input:hover .rating-star { color: var(--hairline); }
.rating-input .rating-star:hover, .rating-input .rating-star:hover ~ .rating-star { color: var(--gold); }
.rating-star:hover { transform: scale(1.15); }
.shelf-select { padding: 8px 10px; }
.shelf-move { margin-top: 8px; width: 100%; font-size: 13px; padding: 6px 8px; }
.novel-search { display: flex; gap: 8px; margin: 0 0 12px; max-width: 460px; }
.novel-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.novel-search input:focus { outline: none; border-color: var(--gold); }
.search-results-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-dim); margin: 6px 0 8px; }
.search-results { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel); max-height: 420px; overflow-y: auto; }
.search-results li { border-bottom: 1px solid var(--hairline); }
.search-results li:last-child { border-bottom: none; }
.search-results a { display: block; padding: 10px 14px; color: var(--text); text-decoration: none; }
.search-results a:hover { background: var(--panel-2); }
.sr-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.sr-snippet { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
mark { background: rgba(201, 162, 75, .45); color: inherit; border-radius: var(--radius-xs); padding: 0 1px; }

/* ================= Bao cao vi pham + hop thoai ================= */
.report-btn {
  background: none; border: none; padding: 0 4px; font: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.report-btn:hover { color: var(--danger); text-decoration: underline; }
.btn.report-novel-btn { color: var(--text-dim); }
.btn.report-novel-btn:hover { color: var(--danger); border-color: var(--danger); }
.modal-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 16, .6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-card { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.report-reasons { display: flex; flex-direction: column; gap: 8px; }
.report-reason { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.notif-icon {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border-radius: 50%; font-size: 15px;
}

/* ================= Trang quan tri ================= */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.admin-filter { margin-bottom: 14px; }
.report-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; max-width: 820px; }
.report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.report-target { margin-bottom: 8px; font-size: 14px; }
.report-target a { color: var(--gold-soft); text-decoration: none; }
.report-target a:hover { text-decoration: underline; }
.report-preview { margin: 6px 0 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--hairline); color: var(--text-dim); white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.report-detail { margin-bottom: 8px; font-size: 13px; font-style: italic; color: var(--text-dim); }
.admin-user { flex-wrap: wrap; }
.admin-user .org-row-name a { color: inherit; text-decoration: none; }
.admin-user .org-row-name a:hover { color: var(--gold-soft); }

/* ================= Danh dau: ghi chu + mau ================= */
.bookmark-note { margin: -2px 0 10px; padding: 8px 12px; background: var(--panel-2); border-radius: var(--radius); font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.color-dots { display: inline-flex; gap: 5px; align-items: center; margin-left: 6px; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: rgb(201, 162, 75); }
.color-dot[data-set-color="green"] { background: rgb(76, 175, 110); }
.color-dot[data-set-color="blue"] { background: rgb(79, 140, 214); }
.color-dot[data-set-color="pink"] { background: rgb(214, 100, 150); }
.color-dot[data-set-color="purple"] { background: rgb(150, 110, 210); }
.color-dot.on { border-color: var(--text); }
.bookmark-small { font-size: 12px; padding: 4px 10px; }
.bookmark-meta .bookmark-small:last-child { margin-left: 0; }
.bookmark-item[data-color="green"] .bookmark-text { border-left-color: rgb(76, 175, 110); }
.bookmark-item[data-color="blue"] .bookmark-text { border-left-color: rgb(79, 140, 214); }
.bookmark-item[data-color="pink"] .bookmark-text { border-left-color: rgb(214, 100, 150); }
.bookmark-item[data-color="purple"] .bookmark-text { border-left-color: rgb(150, 110, 210); }
.bookmark-note-form { margin-top: 10px; }
.bookmark-note-form textarea {
  width: 100%; min-height: 70px; font: inherit; font-size: 14px; padding: 8px 10px; margin-bottom: 8px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text); resize: vertical;
}

/* ================= Trang doc: cong cu moi ================= */
.reader-page[data-reader-font="sans"] { font-family: 'Inter', system-ui, sans-serif; }
.reader-page[data-reader-font="system"] { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.reader-page[data-reader-theme="white"] { --paper: #ffffff; --paper-text: #1c1c1c; --paper-text-dim: #666666; }
.reader-page[data-reader-theme="sepia"] { --paper: #f1e5c8; --paper-text: #4b3a26; --paper-text-dim: #7a6749; }
.reader-page[data-reader-theme="dark"] { --paper: #1d222b; --paper-text: #cfd5de; --paper-text-dim: #8b96a5; }
.reader-page[data-reader-theme="dark"] mark { background: rgba(201, 162, 75, .5); color: #fff; }
.reader-tool {
  min-width: 34px; height: 30px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.reader-tool:hover { border-color: var(--gold); }
.reader-topbar-right { flex-wrap: wrap; justify-content: flex-end; }
.reader-jump {
  max-width: 190px; font: inherit; font-size: 13px; padding: 5px 8px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.reader-settings-wrap { position: relative; }
.reader-settings {
  position: fixed; right: 16px; top: 120px; z-index: 40; width: 300px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.rs-row { display: flex; flex-direction: column; gap: 6px; }
.rs-label { font-size: 12px; color: var(--text-dim); }
.rs-num-wrap { display: inline-flex; align-items: baseline; gap: 1px; color: var(--text); font-weight: 700; }
.rs-num {
  width: 5ch; font: inherit; color: inherit; text-align: right; padding: 0 2px; border-radius: 0;
  background: transparent; border: 0; border-bottom: 1px dashed var(--hairline); cursor: text;
  -moz-appearance: textfield; appearance: textfield;
}
.rs-num::-webkit-outer-spin-button, .rs-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rs-num:hover { border-bottom-color: var(--gold-soft); }
.rs-num:focus { outline: none; border-bottom: 1px solid var(--gold); color: var(--gold-soft); background: var(--panel-2); }
.rs-num.warn { border-bottom-color: var(--danger); }
.rs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-select { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text); cursor: pointer; }
.rs-select:focus { outline: none; border-color: var(--gold-soft); }
.chip {
  font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.chip.active { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); font-weight: 600; }
.rs-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--hairline); cursor: pointer; padding: 0; }
.rs-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.rs-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.rs-reset { align-self: flex-start; font-size: 12px; padding: 5px 12px; }
.reader-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.reader-progress-fill { height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }
.reader-pct {
  position: fixed; right: 14px; bottom: 14px; z-index: 30; padding: 3px 10px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-md); opacity: .85; pointer-events: none;
}
.reader-find {
  position: fixed; right: 16px; top: 72px; z-index: 45; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.reader-find input {
  width: 190px; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}
.reader-find input:focus { outline: none; border-color: var(--gold); }
.reader-find button { background: none; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--text); width: 28px; height: 28px; cursor: pointer; font-size: 12px; }
.reader-find button:hover { border-color: var(--gold); }
.reader-find-count { min-width: 44px; text-align: center; font-size: 12px; color: var(--text-dim); }
mark.find-hit.current { background: rgb(240, 160, 50); color: #1a1208; outline: 2px solid rgb(240, 160, 50); }
@media (max-width: 600px) {
  .reader-settings { position: fixed; left: 12px; right: 12px; width: auto; top: 150px; max-height: 70vh; overflow-y: auto; }
  .reader-find { left: 12px; right: 12px; }
  .reader-find input { flex: 1; width: auto; min-width: 0; }
  .reader-pct { bottom: 10px; right: 10px; }
}

/* ================= To chuc: xep hang, lien ket moi ================= */
.lb-rank { width: 26px; flex-shrink: 0; text-align: center; font-weight: 700; color: var(--text-dim); font-family: 'Literata', serif; }
.lb-rank.top { color: var(--gold-soft); }
.org-row .avatar-mini { width: 28px; height: 28px; font-size: 12px; }
.invite-link-row { display: flex; gap: 8px; }
.invite-link-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text);
}

/* ---------- Chinh nho ---------- */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
.report-card a, .bookmark-group a { color: var(--gold-soft); text-decoration: none; }
.report-card a:hover { text-decoration: underline; }
.brand-name { white-space: nowrap; }
.authbox .who strong { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.user-menu-trigger strong { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }

/* ================= Super Admin: nhan vai tro, khu vuc nguy hiem, xoa tai khoan ================= */
.role-badge.role-super_admin { color: var(--gold); border-color: var(--gold); }

.danger-zone { border-color: var(--danger); }
.danger-label { color: var(--danger); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }

.modal-close-x {
  background: none; border: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.modal-close-x:hover { color: var(--text); }
.radio-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; margin-top: 6px; cursor: pointer; }

.profile-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.profile-actions-row .report-btn { padding: 0; }

/* ================= Bao cao chuong + nut ve trang truyen trong reader-nav ================= */
.reader-report-row { display: flex; justify-content: flex-end; max-width: var(--reader-width, 720px); margin: 28px auto 0; padding: 0 8px; }
.reader-home-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 16px; }

/* ================= So sao canh ten nguoi binh luan (da danh gia truyen) ================= */
.comment-rating { color: var(--gold-soft); font-size: 12px; font-weight: 600; margin-left: 6px; }

/* ================= Vote len/xuong cho binh luan (rieng voi cam xuc emoji) ================= */
.vote-bar { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; margin-right: 10px; }
.vote-btn {
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 999px; color: var(--text-dim);
  font-size: 12px; line-height: 1; width: 24px; height: 24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.vote-btn:hover { border-color: var(--gold-soft); color: var(--text); }
.vote-btn.vote-up.active { border-color: #3fae5c; color: #3fae5c; background: var(--panel); }
.vote-btn.vote-down.active { border-color: var(--danger); color: var(--danger); background: var(--panel); }
.vote-score { font-size: 13px; font-weight: 600; min-width: 18px; text-align: center; color: var(--text-dim); }
.vote-score.pos { color: #3fae5c; }
.vote-score.neg { color: var(--danger); }
/* Reaction-bar va vote-bar nam canh nhau tren cung 1 hang, tach voi khoi noi dung ben tren */
.comment-body-wrap .vote-bar, .comment-body-wrap .reaction-bar { display: inline-flex; }
.comment-body-wrap { display: block; }

/* ================= Binh luan bi an do vote qua thap (nguong do Admin cau hinh) ================= */
.comment-hidden-banner {
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; color: var(--text-dim); margin: 6px 0;
}
.reveal-hidden-comment-btn {
  background: none; border: none; color: var(--gold-soft); font: inherit; font-size: 13px;
  cursor: pointer; padding: 0; text-decoration: underline;
}

/* ================= Nhieu anh dinh kem 1 lan dang (binh luan, bai viet dien dan) ================= */
.comment-image-preview-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.comment-image-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.comment-image-gallery .gallery-img {
  max-width: 160px; max-height: 160px; margin-top: 0; object-fit: cover;
}
.forum-post-image.gallery-img { max-width: 260px; max-height: 260px; margin-bottom: 0; }

/* ================= Sua binh luan/bai viet: nhan "da chinh sua" + xem lich su ================= */
.comment-edited-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.edit-comment-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; font: inherit; padding: 0; }
.edit-comment-btn:hover:not(:disabled) { color: var(--gold-soft); text-decoration: underline; }
.edit-comment-btn:disabled { opacity: .45; cursor: not-allowed; }
.edit-form-slot:not([hidden]) { margin: 10px 0 0 0; padding-left: 2px; }
.edit-form-slot .comment-form { margin-bottom: 0; }
.edit-history-item { border-bottom: 1px solid var(--hairline); padding: 12px 0; font-size: 14px; }
.edit-history-item:last-child { border-bottom: none; }
.edit-history-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }

/* ================= Tab sap xep binh luan: Moi nhat / Noi bat (theo vote) ================= */
.comment-sort-tabs { display: flex; gap: 14px; margin: 4px 0 14px; border-bottom: 1px solid var(--hairline); }
.comment-sort-tab {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; padding: 6px 2px; cursor: pointer;
}
.comment-sort-tab.active { color: var(--gold-soft); border-color: var(--gold-soft); font-weight: 600; }
.comment-sort-tab:hover:not(.active) { color: var(--text); }

/* ================= Nut "Xin làm Tác giả" tren top-bar (Doc gia) ================= */
.author-request-btn {
  width: auto; height: 34px; border-radius: 17px; padding: 0 14px; font-size: 13px; white-space: nowrap;
}
.author-request-btn:disabled { opacity: .6; cursor: default; }

/* ================= Theo doi 1 bai viet dien dan cu the (khac voi theo doi truyen) ================= */
.following-post-row { cursor: pointer; }
.following-post-row:hover { border-color: var(--gold-soft); }

/* ---------- Dot so luong cho xu ly o tab trang Quan tri ---------- */
.tab-count {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
}
.tab-count[hidden] { display: none; }

/* ---------- Binh luan an danh ---------- */
.anon-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); cursor: pointer; user-select: none; }
.anon-toggle input { accent-color: var(--gold); }
.anon-avatar { background: var(--hairline); color: var(--text-dim); }
.anon-name { color: var(--text-dim); font-style: italic; }
.anon-badge { margin-left: 6px; font-size: 11px; color: var(--text-dim); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 0 6px; }

/* ---------- Thong bao chuyen chu so huu ---------- */
.notif-actions { display: flex; gap: 6px; margin: 6px 0 2px; }
.notif-actions .btn { font-size: 12px; padding: 4px 10px; }

/* ---------- Bao ve noi dung chuong (han che in / chup man hinh) ---------- */
.reader-page.no-copy { -webkit-touch-callout: none; }
.reader-page.protect-blur .body-text { filter: blur(16px); pointer-events: none; }
.reader-page.protect-blur::after {
  content: 'Nội dung đã được làm mờ để bảo vệ bản quyền. Quay lại tab này để tiếp tục đọc.';
  position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 60; max-width: 80vw; text-align: center;
  padding: 14px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--hairline); color: var(--text);
}
@media print {
  html.protect-content body * { display: none !important; }
  html.protect-content body::before { content: 'Nội dung truyện được bảo vệ, không thể in.'; display: block; padding: 40px; font-size: 18px; color: #000; }
}

/* ================= Video / nhạc trong bài diễn đàn ================= */
.media-gallery { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.media-item video { width: 100%; max-height: 520px; border-radius: var(--radius-pill); background: #000; display: block; }
.media-audio { padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel-2); }
.media-audio .media-name { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; word-break: break-word; }
.media-audio audio { width: 100%; display: block; }
.media-embed-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #000; display: block; }
.media-embed-audio iframe { width: 100%; height: 166px; border: 0; border-radius: var(--radius); display: block; }
.media-picker { margin-bottom: 8px; }
.media-link-input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text); }
.media-link-input:focus { outline: none; border-color: var(--gold-soft); }
.media-progress { position: relative; height: 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; margin-bottom: 6px; }
.media-progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold-soft); opacity: .35; transition: width .15s; }
.media-progress span { position: relative; z-index: 1; font-size: 12px; line-height: 20px; padding: 0 8px; color: var(--text); }
.media-picker-list { display: flex; flex-direction: column; gap: 6px; }
.media-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel-2); font-size: 13px; }
.media-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-picker-remove { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.media-picker-remove:hover { color: #e57373; }

/* Anh keo link: chi hien dia chi dich */
.drag-chip { position: fixed; top: -300px; left: -300px; max-width: 360px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); border: 1px solid var(--gold-soft); font: 13px/1.35 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* Chon phong chu trong panel Aa: danh sach tu ve, re chuot de xem truoc */
.rs-font { position: relative; }
.rs-font-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.rs-font-btn[aria-expanded="true"] { border-color: var(--gold-soft); }
.rs-font-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 240px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); }
.rs-font-list[hidden] { display: none; }
.rs-font-group { padding: 6px 8px 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.rs-font-opt { font: inherit; font-size: 13px; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; }
.rs-font-opt:hover, .rs-font-opt:focus { outline: none; background: var(--panel-2); color: var(--gold-soft); }
.rs-font-opt.active { color: var(--gold); font-weight: 700; }

/* ---------- The loai BI HAN CHE: bia den + loi nhac (xem utils/limitedGenres.js) ---------- */
.spine.limited-cover, .row-cover.limited-cover { background: #000; }
.spine.limited-cover { align-items: center; justify-content: center; text-align: center; padding: 10px; border: 1px solid var(--hairline); }
.spine.limited-cover::before { display: none; }
.limited-msg { font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.limited-link { color: var(--gold-soft); text-decoration: underline; cursor: pointer; font-weight: 600; }
.limited-link:hover { color: var(--gold); }
.genre-chip.limited:not(.selected) { border-style: dashed; }
.genre-chip.limited.blocked { background: #000; color: var(--gold-soft); border-color: var(--hairline); }
.genre-chip.limited.unblocked { background: none; color: var(--text); border-color: var(--gold); }
.limited-page { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.limited-page .spine { width: 180px; flex-shrink: 0; }
.limited-page h2 { margin-bottom: 8px; }
.limited-page .btn { display: inline-block; margin-top: 12px; text-decoration: none; }
.limited-login-note { margin-top: 14px; font-size: 13px; color: var(--gold-soft); border-top: 1px solid var(--hairline); padding-top: 12px; }

/* ---- Doc tiep (trang chu / lich su) ---- */
.continue-strip { margin: 0 0 22px; }
.continue-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--paper-text, inherit); }
.continue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.continue-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card-bg, rgba(127,127,127,.08)); border: 1px solid var(--hairline, rgba(127,127,127,.25)); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.continue-card:hover { border-color: #c9a227; transform: translateY(-1px); }
.continue-card .row-cover { width: 40px; height: 56px; flex: none; }
.continue-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.continue-info b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-info small { font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-go { flex: none; font-size: 12px; font-weight: 600; color: #c9a227; white-space: nowrap; }

/* ---- Che do chia trang ---- */
.reader-pager { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(20,22,28,.86); color: #f3ead4; border: 1px solid #c9a227; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.reader-pager[hidden] { display: none; }
.reader-pager-btn { width: 44px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.reader-pager-btn:hover, .reader-pager-btn:focus-visible { background: rgba(201,162,39,.25); outline: none; }
.reader-pager-info { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
body.reader-paged .reader-page { padding-bottom: 96px; }

/* ---- Nut tren thanh trang doc: tai offline / nghe ---- */
.reader-tool { border: 1px solid transparent; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.reader-tool:hover, .reader-tool:focus-visible { background: rgba(201,162,39,.2); outline: none; }
.reader-tool.on { border-color: #c9a227; color: #c9a227; }

/* ---- Che do nghe (TTS) ---- */
.chapter-line.tts-now { background: rgba(201,162,39,.22); box-shadow: -4px 0 0 #c9a227; border-radius: var(--radius-xs); }
.tts-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 41;
  width: min(560px, calc(100vw - 20px)); padding: 8px 10px; background: rgba(20,22,28,.94); color: #f3ead4; border: 1px solid #c9a227; border-radius: var(--radius-lg); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.tts-bar[hidden] { display: none; }
.tts-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tts-opts { margin-top: 6px; gap: 8px 12px; font-size: 12px; }
.tts-opts label { display: flex; align-items: center; gap: 4px; }
.tts-opts select { max-width: 150px; background: #2a2f39; color: inherit; border: 1px solid rgba(201,162,39,.5); border-radius: var(--radius-sm); padding: 2px 4px; font-size: 12px; }
.tts-btn { width: 40px; height: 36px; border: 0; border-radius: var(--radius); background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.tts-btn:hover, .tts-btn:focus-visible { background: rgba(201,162,39,.25); outline: none; }
.tts-play { background: #c9a227; color: #1b1f26; }
.tts-pos { flex: 1; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.tts-sel { border: 1px solid rgba(201,162,39,.5); background: transparent; color: inherit; border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; cursor: pointer; }
.tts-sel:hover { background: rgba(201,162,39,.25); }
.tts-opts .tts-vi { white-space: nowrap; }
.tts-hint { line-height: 1.4; margin-top: 6px; font-size: 12px; color: #e8c766; }
body.tts-open .reader-page { padding-bottom: 260px; }
body.reader-paged .tts-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ---- Da tai ve / offline ---- */
.offline-note { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #c9a227; border-radius: var(--radius); background: rgba(201,162,39,.12); font-size: 14px; }
.dl-novel { border: 1px solid var(--hairline, rgba(127,127,127,.25)); border-radius: var(--radius); margin-bottom: 10px; background: var(--card-bg, rgba(127,127,127,.06)); }
.dl-novel > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.dl-novel > summary::-webkit-details-marker { display: none; }
.dl-novel > summary b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-chapters { display: flex; flex-direction: column; max-height: 360px; overflow: auto; border-top: 1px solid var(--hairline, rgba(127,127,127,.25)); }
.dl-ch { padding: 8px 14px; font-size: 14px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(127,127,127,.12); }
.dl-ch:hover { background: rgba(201,162,39,.12); }

/* ---- Thong ke tac gia ---- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.stats-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card-bg, rgba(127,127,127,.08)); border: 1px solid var(--hairline, rgba(127,127,127,.25)); border-radius: var(--radius-md); }
.stats-card:hover { border-color: #c9a227; }
.stats-card b { font-size: 15px; margin-bottom: 4px; }
.stats-card i { font-style: normal; font-weight: 700; color: #c9a227; }
.stats-card small { opacity: .7; }
.stats-range { margin: 6px 0 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { padding: 12px 14px; border: 1px solid var(--hairline, rgba(127,127,127,.25)); border-radius: var(--radius-md); background: var(--card-bg, rgba(127,127,127,.06)); }
.kpi-val { font-size: 24px; font-weight: 700; color: #c9a227; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 13px; margin-top: 2px; }
.kpi-sub { font-size: 12px; opacity: .7; margin-top: 2px; }
.stats-h { margin: 18px 0 8px; font-size: 15px; }
.stats-chart { width: 100%; height: auto; max-height: 260px; color: inherit; }
.chart-bar { fill: #c9a227; }
.chart-bar:hover { fill: #e8c766; }
.chart-grid { stroke: rgba(127,127,127,.25); stroke-width: 1; }
.chart-axis { fill: currentColor; font-size: 10px; opacity: .7; }
.table-scroll { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th, .stats-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid rgba(127,127,127,.18); white-space: nowrap; }
.stats-table td:nth-child(2) { white-space: normal; min-width: 180px; }
.stats-table td:nth-child(3) { position: relative; min-width: 110px; }
.stats-bar { position: absolute; left: 0; top: 50%; height: 60%; transform: translateY(-50%); background: rgba(201,162,39,.2); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; z-index: 0; }
.stats-table td:nth-child(3) { z-index: 1; }
.stats-ch { color: inherit; text-decoration: none; }
.stats-ch:hover { color: #c9a227; }

/* ---- Binh luan theo doan ---- */
.body-text.para-on { padding-right: 34px; }
.chapter-line[data-ph] { position: relative; }
.chapter-line[data-pc]::after {
  position: absolute; right: -32px; top: 2px; min-width: 26px; box-sizing: border-box;
  padding: 1px 5px; border-radius: var(--radius); font-size: 11px; line-height: 16px; text-align: center; white-space: nowrap;
  background: rgba(201,162,39,.16); border: 1px solid rgba(201,162,39,.55); color: #8a6d12; cursor: pointer; user-select: none;
}
.chapter-line[data-pc]::after { content: '\1F4AC  ' attr(data-pc); }
.chapter-line.para-active { background: rgba(201,162,39,.12); border-radius: var(--radius-xs); }
.para-panel {
  position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column; overflow-y: auto; padding: 14px 16px 24px;
  background: #1b1f26; color: #d9dee6; border-left: 1px solid #313a48; box-shadow: -12px 0 40px rgba(0,0,0,.45);
}
.para-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #c9a227; }
.para-panel-close { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.para-quote { margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid #c9a227; background: rgba(201,162,39,.08); color: #aab3c0; font-size: 14px; line-height: 1.5; }
@media (max-width: 700px) {
  .para-panel { top: auto; height: 72vh; width: 100vw; border-left: 0; border-top: 1px solid #313a48; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.45); }
  .body-text.para-on { padding-right: 30px; }
  .chapter-line[data-pc]::after { right: -30px; }
}

/* ---- Thanh thao tac tren dong (binh luan / trich dan / luu dong) ---- */
.chapter-line.para-hot { background: rgba(201,162,39,.07); border-radius: var(--radius-xs); }
.line-bar { position: fixed; z-index: 55; display: flex; flex-direction: column; gap: 3px; }
.line-bar[hidden] { display: none; }
.line-bar button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(201,162,39,.55); background: #1b1f26; color: #e2c383; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.line-bar button[hidden] { display: none; }
.line-bar button:hover { background: #c9a227; color: #1b1f26; }
@media (max-width: 700px) { .line-bar button { width: 26px; height: 26px; font-size: 12px; } }

/* ---- Danh sach doc ---- */
.library-links { margin: -6px 0 14px; font-size: 13px; color: var(--text-dim); }
.library-links a { color: #c9a227; }
.list-tabs { margin-bottom: 16px; }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.list-card { display: block; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--panel); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.list-card:hover { border-color: #c9a227; transform: translateY(-2px); }
.list-card-title { font-weight: 600; margin-bottom: 4px; }
.list-card-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-card-meta { font-size: 12px; color: var(--text-dim); }
.list-flag { white-space: nowrap; font-size: 11px; font-weight: 400; padding: 1px 7px; border-radius: var(--radius); border: 1px solid var(--hairline); color: var(--text-dim); vertical-align: middle; }
.list-flag.pub { border-color: rgba(201,162,39,.6); color: #c9a227; }
.list-head { margin-bottom: 20px; }
.list-head a:not(.btn) { color: var(--gold-soft); }
.list-desc { margin: 0 0 8px; color: var(--text); white-space: pre-wrap; }
.list-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.list-item-tools { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.list-pick { max-height: 40vh; overflow-y: auto; margin-bottom: 10px; }
.quick-list-form { display: flex; gap: 8px; }
.quick-list-form input { flex: 1; min-width: 0; }

/* ---- Huy hieu + streak ---- */
.streak-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel); margin-bottom: 16px; }
.streak-flame { font-size: 44px; line-height: 1; }
.streak-num { font-size: 32px; font-weight: 700; color: #c9a227; line-height: 1.1; }
.streak-num span { font-size: 15px; font-weight: 400; color: var(--text-dim); }
.act-grid { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.act-cell { display: block; width: 12px; height: 12px; border-radius: var(--radius-xs); background: var(--panel-2); }
.act-cell.on { background: #c9a227; }
.act-cell.blank { background: transparent; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge-card { padding: 14px 10px; text-align: center; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--panel); }
.badge-card.earned { border-color: rgba(201,162,39,.7); box-shadow: 0 0 0 1px rgba(201,162,39,.15) inset; }
.badge-card.locked { opacity: .55; }
.badge-card.locked .badge-icon { filter: grayscale(1); }
.badge-icon { font-size: 32px; line-height: 1.2; }
.badge-name { font-weight: 600; font-size: 14px; margin: 4px 0 2px; }
.badge-desc { font-size: 12px; color: var(--text-dim); min-height: 30px; }
.badge-date { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.badge-bar { height: 4px; border-radius: var(--radius-xs); background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.badge-bar i { display: block; height: 100%; background: #c9a227; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pb-badge { font-size: 20px; line-height: 1; cursor: default; }
.pb-streak { font-size: 13px; padding: 2px 8px; border-radius: var(--radius-md); border: 1px solid rgba(201,162,39,.6); color: #c9a227; }

/* ---- Trich dan o trang Danh dau ---- */
.bookmark-quote { margin: 4px 0 6px; padding: 5px 10px; font-size: 13px; border-left: 3px solid #c9a227; color: var(--text-dim); background: rgba(201,162,39,.08); }

/* ---- Tim kiem nang cao ---- */
.adv-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.adv-search input[type=search] { flex: 1 1 260px; min-width: 0; }
.adv-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adv-item { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--panel); padding: 10px 12px; }
.adv-head { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.adv-head small { display: block; font-weight: 400; }
.adv-hit { display: block; margin-top: 8px; padding: 6px 10px; border-left: 3px solid rgba(201,162,39,.6); color: inherit; text-decoration: none; font-size: 13px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.adv-hit:hover { background: rgba(201,162,39,.08); }
.adv-hit-ch { display: block; font-weight: 600; font-size: 12px; color: #c9a227; }
.adv-hit-text { color: var(--text-dim); }
.adv-results mark, .adv-hit mark { background: rgba(201,162,39,.35); color: inherit; padding: 0 1px; border-radius: var(--radius-xs); }

/* TTS: o chon nguon giong chi hien khi may chu co giong */
.tts-opts label[hidden] { display: none; }

/* Dien dan: noi dung (anh, video, nhac, nhung) khong bo goc */
.forum-post-image, .forum-comment-image, .forum-post-body img, .forum-post-body video, .forum-post-body iframe,
.media-item video, .media-audio, .media-embed-video iframe, .media-embed-audio iframe,
.media-picker-item, .media-progress, .media-link-input { border-radius: 0; }