/* ============================================================
   Tàng Thư Các — Design tokens (light + dark + accent)
   Fonts được enqueue trong functions.php (ttc-fonts).
   ============================================================ */

:root {
  /* type */
  --ui: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --serif: 'Noto Serif', Georgia, serif;
  --btn-font: 'Lora', Georgia, serif;
  --read-font: var(--serif);
  --read-size: 19px;

  /* accent (overridden from JS) */
  --accent: #bd6688;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 38%, transparent);

  /* shape */
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --maxw: 1460px;
  /* khung ornate cho card truyện (đồng bộ với khung ảnh bìa trang chi tiết) */
  --card-orn: color-mix(in oklab, var(--accent) 46%, transparent);
  --card-orn-soft: color-mix(in oklab, var(--accent) 22%, transparent);
  --card-gem: color-mix(in oklab, var(--accent) 78%, #cfe0ff);

  /* semantic — success/new/warn */
  --new: #2fa86a;
  --new-ink: #ffffff;

  /* gold foil — used for ornament lines + card hover sweep (both themes) */
  --gold-1: #caa44a;
  --gold-2: #f6e09a;
  --gold-3: #9c7a30;
  --gold-foil: linear-gradient(90deg, transparent, var(--gold-3) 18%, var(--gold-2) 42%, #fff7df 50%, var(--gold-2) 58%, var(--gold-1) 82%, transparent);
  --gold-line: linear-gradient(90deg, transparent, var(--gold-3), var(--gold-1), var(--gold-2), var(--gold-1), var(--gold-3), transparent);
  --gold-solid: #c9a44a;
}

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0e0c15;
  --bg-grad:   radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 20%, #15121f), #0e0c15 66%);
  --surface:   #1a1725;
  --surface-2: #221e31;
  --raised:    #2c2740;
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.17);
  --text:      #f2eff8;
  --text-2:    #b8b1c8;
  --text-3:    #837d97;
  --shadow:    0 18px 50px -22px rgba(0,0,0,.82);
  --shadow-sm: 0 4px 16px -8px rgba(0,0,0,.72);
  --cover-veil: linear-gradient(180deg, transparent 38%, rgba(6,5,11,.88));
  --skel: rgba(255,255,255,.07);
  --btn-bg: #9648799c;
  /* mục lục — không khí gấm + nhũ vàng (đồng bộ với bìa/thông tin truyện) */
  --toc-glass: linear-gradient(180deg, rgba(24,18,38,.55), rgba(13,10,22,.66));
  --toc-rail:  rgba(15,11,26,.5);
  --toc-head:  rgba(22,16,34,.92);
  --toc-line:  rgba(212,183,94,.20);
  --toc-line-soft: rgba(212,183,94,.11);
  --toc-gold:  #d4b75e;
}
/* Dark mode: nút bấm dùng màu #9648799c */
[data-theme="dark"] .btn--accent,
[data-theme="dark"] .rdock__toc,
[data-theme="dark"] .pcdrawer__send,
[data-theme="dark"] .rmode__play,
[data-theme="dark"] .toc2__sort button[data-on="1"],
[data-theme="dark"] .toc2pg[data-on="1"],
[data-theme="dark"] .pager button[data-on="1"],
[data-theme="dark"] .ranktabs button[data-on="1"],
[data-theme="dark"] .ranktabs--lg button[data-on="1"],
[data-theme="dark"] .genre[data-on="1"],
[data-theme="dark"] .rmode__switch[aria-checked="true"] {
  background: #9648799c !important; border-color: color-mix(in oklab, #964879 70%, transparent) !important; color: #fff !important;
}
[data-theme="dark"] .orn-btn { background: #9648799c !important; }
[data-theme="dark"] .btn--accent:hover,
[data-theme="dark"] .rdock__toc:hover,
[data-theme="dark"] .rmode__play:hover { filter: brightness(1.12); }

/* Light mode: nút bấm đồng bộ tông rượu ấm (không để tím lạc quẻ) */
[data-theme="light"] .btn--accent,
[data-theme="light"] .rdock__toc,
[data-theme="light"] .pcdrawer__send,
[data-theme="light"] .rmode__play,
[data-theme="light"] .toc2__sort button[data-on="1"],
[data-theme="light"] .toc2pg[data-on="1"],
[data-theme="light"] .pager button[data-on="1"],
[data-theme="light"] .ranktabs button[data-on="1"],
[data-theme="light"] .ranktabs--lg button[data-on="1"],
[data-theme="light"] .genre[data-on="1"],
[data-theme="light"] .rmode__switch[aria-checked="true"] {
  background: #8a3a63 !important; border-color: color-mix(in oklab, #8a3a63 70%, transparent) !important; color: #fff !important;
}
[data-theme="light"] .orn-btn { background: #8a3a63 !important; }

/* ---------- LIGHT — warm parchment / gold leaf ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg:        #f1e2bd;
  --bg-grad:   radial-gradient(1200px 720px at 80% -12%, #f8edcc, #f1e2bd 52%, #ead6a8 100%);
  --surface:   #fdf6e3;
  --surface-2: #f5e9cb;
  --raised:    #fffaee;
  --border:    rgba(120,84,34,.18);
  --border-2:  rgba(120,84,34,.30);
  --text:      #43321c;
  --text-2:    #6e553a;
  --text-3:    #9c855f;
  --shadow:    0 20px 48px -26px rgba(96,64,18,.40);
  --shadow-sm: 0 6px 18px -10px rgba(96,64,18,.32);
  --cover-veil: linear-gradient(180deg, transparent 40%, rgba(46,30,8,.74));
  --skel: rgba(120,84,34,.07);
  --gold-2: #e7c25f;
  /* mục lục — phiên bản giấy da bò + nhũ vàng (đổi theo darkmode) */
  --toc-glass: linear-gradient(180deg, rgba(255,250,238,.86), rgba(245,233,203,.9));
  --toc-rail:  rgba(245,233,203,.7);
  --toc-head:  rgba(253,246,227,.96);
  --toc-line:  rgba(150,108,40,.28);
  --toc-line-soft: rgba(150,108,40,.15);
  --toc-gold:  #9c7a30;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* bỏ vệt sáng/nháy xám-xanh khi chạm trên mobile */
* { -webkit-tap-highlight-color: transparent; }
button, a, .pcom, .rstage, .iconbtn, .toc2__vol, .toc2__ch, .rmode__themes button,
.rmode__opts button, .rmode__voice button, .rmode__size button, .rmode__switch { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--ui);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01';
}
::selection { background: var(--accent-soft); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ===== Bảo vệ nội dung (protect.js) ===== */
.prose, .rcontent, .ornf__desc, .cmt__text, .pcom-item__x {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.prose img, .rcontent img, .cover img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* làm mờ nội dung khi mất focus / nghi ngờ chụp màn hình */
html.ttc-hide-content .prose, html.ttc-hide-content .rcontent {
  filter: blur(14px); transition: filter .12s; }
html.ttc-hide-content .prose::after { content: ''; }
.ttc-protect-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,14,30,.96); color: #fff; border: 1px solid var(--accent-line, rgba(150,72,121,.5));
  padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }
.ttc-protect-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media print { body { display: none !important; } }

/* nút chuông nhận thông báo (Web Push) */
.ttc-bell { position: fixed; right: 16px; bottom: 16px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px;
  border: 1px dashed var(--border-2); background: var(--surface); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 14px; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 26px -10px rgba(0,0,0,.5); transition: border-color .15s, transform .12s, background .15s, color .15s; }
.ttc-bell:hover { transform: translateY(-1px); border-color: var(--accent-line); }
.ttc-bell svg { width: 17px; height: 17px; color: var(--text-3); }
.ttc-bell__ic { display: inline-flex; }
/* ĐÃ bật nhận thông báo — nền nhấn đặc, chữ/icon trắng, viền liền để dễ phân biệt */
.ttc-bell.is-on { background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 58%, #000));
  border-style: solid; border-color: transparent; color: #fff;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--accent) 75%, transparent); }
.ttc-bell.is-on:hover { border-color: transparent; }
.ttc-bell.is-on svg, .ttc-bell.is-on .ttc-bell__txt { color: #fff; }

/* popover chọn thông báo */
.ttc-pop { position: fixed; right: 16px; bottom: 64px; z-index: 1300; width: min(320px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: 14px;
  box-shadow: 0 22px 60px -22px rgba(0,0,0,.6); opacity: 0; transform: translateY(10px) scale(.97);
  transform-origin: bottom right; transition: opacity .2s, transform .2s; }
.ttc-pop.is-on { opacity: 1; transform: none; }
.ttc-pop__hd { font-family: 'Lora', serif; font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.ttc-pop__master { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600;
  color: var(--text); padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); cursor: pointer; }
.ttc-pop__sw { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.ttc-pop__opts { margin-top: 12px; transition: opacity .2s; }
.ttc-pop__opts[data-dim="1"] { opacity: .45; pointer-events: none; }
.ttc-pop__opt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.ttc-pop__opt input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.ttc-pop__sub { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ttc-pop__follows { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; }
.ttc-pop__find { margin: 0 0 8px; }
.ttc-pop__find input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px; outline: none; }
.ttc-pop__find input:focus { border-color: var(--accent-line); }
.ttc-pop__story { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.ttc-pop__story input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.ttc-pop__story.is-on { border-color: var(--accent-line); background: color-mix(in oklab, var(--accent) 12%, var(--surface-2)); }
.ttc-pop__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.ttc-pop__title { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttc-pop__x { border: 0; background: none; color: var(--text-3); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ttc-pop__x:hover { color: var(--accent); }
.ttc-pop__add { width: 100%; text-align: left; border: 1px dashed var(--accent-line); background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 11px; border-radius: 9px; cursor: pointer; margin-bottom: 6px; }
.ttc-pop__note { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.ttc-pop__note a { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) { .ttc-pop { right: 12px; bottom: 60px; } }
.admin-bar .ttc-bell { bottom: 16px; }
@media (max-width: 600px) { .ttc-bell { right: 12px; bottom: 12px; padding: 10px; } .ttc-bell__txt { display: none; } .ttc-bell svg { width: 19px; height: 19px; } }
/* trạng thái đang xử lý: mờ + xoay nhẹ để người dùng biết đã bấm */
.ttc-bell.is-busy { opacity: .7; pointer-events: none; }
.ttc-bell.is-busy svg { animation: ttcbellspin .8s linear infinite; }
@keyframes ttcbellspin { to { transform: rotate(360deg); } }

/* ===== Cổng giới hạn độ tuổi 18+ ===== */
.agegate { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px;
  background: rgba(8,6,14,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.agegate__box { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 34px 28px 28px; text-align: center; box-shadow: 0 30px 80px -30px #000; }
.agegate__badge { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%;
  font-family: 'Lora', serif; font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #c0392b, #7a1d18); box-shadow: 0 8px 26px -8px rgba(192,57,43,.7); }
.agegate__h { font-family: 'Lora', serif; font-size: 23px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.agegate__p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); margin: 0 0 22px; }
.agegate__act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.agegate__btn { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--accent), #7c3d5c);
  box-shadow: 0 8px 24px -8px var(--accent); text-decoration: none; }
.agegate__btn--ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-2); box-shadow: none; }
.agegate__btn--ghost:hover { color: var(--text); border-color: var(--accent-line); }
@media (max-width: 480px) { .agegate__box { padding: 28px 20px 22px; } .agegate__act { flex-direction: column; } .agegate__btn { width: 100%; } }

/* toast thông báo (nút chuông) */
.ttc-toast { position: fixed; left: 50%; bottom: 78px; transform: translate(-50%, 14px); z-index: 1300;
  max-width: min(420px, 90vw); background: var(--surface); color: var(--text); border: 1px solid var(--accent-line);
  border-radius: 12px; padding: 13px 18px; font-size: 13.5px; font-weight: 500; line-height: 1.5; text-align: center;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.ttc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ttc-toast--err { border-color: rgba(190,60,70,.5); }

/* nút back-to-top */
.ttc-top { position: fixed; right: 16px; bottom: 70px; z-index: 1200; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; border-radius: 50%;
  box-shadow: 0 8px 26px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .25s, transform .25s, border-color .15s, background .15s; }
.ttc-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ttc-top:hover { border-color: var(--accent-line); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); }
.ttc-top svg { width: 20px; height: 20px; color: var(--text-2); }
.ttc-top:hover svg { color: var(--accent); }
@media (max-width: 600px) { .ttc-top { right: 12px; bottom: 64px; width: 42px; height: 42px; } }

/* ===== Admin bar: không để thanh quản trị che header/nav ===== */
.admin-bar .hdr { top: 32px; }
.admin-bar .nav { top: 98px; }
body.admin-bar[data-reading="1"][data-chrome="1"] .hdr { top: 32px; }
.admin-bar body[data-reading="1"][data-chrome="1"] .rtop,
body.admin-bar[data-reading="1"][data-chrome="1"] .rtop { top: 98px; }
@media (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
  body.admin-bar[data-reading="1"][data-chrome="1"] .hdr { top: 46px; }
}
@media (max-width: 760px) {
  .admin-bar .nav { top: 112px; }
  body.admin-bar[data-reading="1"][data-chrome="1"] .rtop { top: 106px; }
}

/* Font Lora cho các nút bấm + phần tử tương tự (chip, pill, tag, pager...) */
.btn, .btn--sm, .btn--accent, .btn--glass,
.iconbtn, .pill, .gtag, .genre, .ranktabs button, .ranktabs--lg button,
.linkmore, .pager button, .toc2pg, .toc2__sort button, .rdock__nav, .rdock__toc,
.rendnav__lbl, .rendnav__t, .rmode__opts button, .rmode__themes button, .rmode__voice button,
.rmode__play, .fontpop__opts button, .pcdrawer__send, .composer .btn, .newtag, .newgold,
.scard__hover-cta, .hslide__tag, .hslide__cta .btn {
  font-family: var(--btn-font);
}

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- shared motion: gold sweep + starfield ---------- */
@keyframes ttc-sweep { from { background-position: 220% 0; } to { background-position: -120% 0; } }
@keyframes ttc-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
@keyframes ttc-shoot {
  0%   { transform: translate3d(0,0,0) rotate(var(--ang, 24deg)); opacity: 0; }
  6%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, -560px), var(--dy, 240px), 0) rotate(var(--ang, 24deg)); opacity: 0; }
}

/* freeze transitions during theme switch so var()-based colors re-resolve instantly */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: none !important;
}