/* Shared public website theme. Page styles retain their existing layouts. */
:root {
  color-scheme: dark;
  --site-bg: #0b1015;
  --site-surface: #131b23;
  --site-raised: #1b2631;
  --site-line: #283541;
  --site-text: #e5edf4;
  --site-muted: #9aaebb;
  --site-accent: #6ee7b7;
  --site-accent-strong: #34d399;
  --site-accent-soft: #153b32;
  --brand: var(--site-accent);
  --wd-brand: var(--site-accent);
  --accent: var(--site-accent);
  --bs-body-bg: var(--site-bg);
  --bs-body-color: var(--site-text);
  --bs-border-color: var(--site-line);
  --bs-link-color: var(--site-accent);
  --bs-link-hover-color: #a7f3d0;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.site-dark {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--site-bg);
  color: var(--site-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.site-dark #app { flex: 1; min-width: 0; }
.site-dark main.container { margin-top: 28px; margin-bottom: 48px; }
.site-dark ::selection { background: #285e4e; color: #f0fdf4; }
.site-dark a { text-decoration: none; transition: color .18s ease; }
.site-dark a:hover { color: var(--site-accent); }
.site-dark :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 4px; }
.site-dark :is(h1, h2, h3, h4, .title, .page-title, .book-title, .top-title, .chapter-wrap) { color: var(--site-text); }
.site-dark :is(input, select, textarea, .form-control, .form-select, .chapter-input) {
  background-color: var(--site-surface);
  color: var(--site-text);
  border-color: var(--site-line);
  accent-color: var(--site-accent);
}
.site-dark input::placeholder, .site-dark textarea::placeholder { color: #8a9caa; opacity: 1; }
.site-dark :is(input, select, textarea, .form-control):focus {
  background-color: var(--site-raised);
  color: var(--site-text);
  border-color: var(--site-accent);
  box-shadow: 0 0 0 3px #6ee7b71a;
}
.site-dark option { background: var(--site-surface); color: var(--site-text); }

/* Navigation and search */
.site-dark .navbar {
  background: #10171e;
  border-bottom: 1px solid var(--site-line);
  padding: 16px 0;
}
.site-dark .navbar-brand, .site-dark .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--site-text) !important;
  font-weight: 800;
  letter-spacing: -.6px;
}
.site-dark .navbar-brand { font-size: 22px; padding: 0; }
.brand-symbol {
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #6ee7b738;
  border-radius: 11px;
  background: #6ee7b70c;
  color: var(--site-accent);
  font-size: 17px;
}
.brand-accent { color: var(--site-accent); }
.site-dark .nav-link { color: #b8c8d4 !important; font-size: 14px; }
.site-dark .nav-link:hover, .site-dark .nav-link:focus { color: var(--site-accent) !important; }
.site-dark .navbar-toggler { border-color: var(--site-line); border-radius: 10px; }
.site-dark .search-form .form-control { border-radius: 10px 0 0 10px; padding: 10px 14px; font-size: 13px; }
.site-dark .search-form .btn { border-radius: 0 10px 10px 0; padding-inline: 16px; }
.site-dark .btn-outline-primary { color: var(--site-accent); border-color: var(--site-line); background: var(--site-raised); }
.site-dark .btn-outline-primary:hover { color: #091b15; background: var(--site-accent); border-color: var(--site-accent); }
.site-dark :is(.wd-drawer, #theLoaiOverlay, #danhSachOverlay, .overlay-header, #danhSachMenu, #theLoaiMenu, #topMenu) {
  background: var(--site-surface);
  border-color: var(--site-line);
  color: var(--site-text);
}
.site-dark :is(.wd-item, .wd-drawer-head, .overlay-body a, .tl-col li a, #theLoaiGrid a) { color: var(--site-text); border-color: var(--site-line); }
.site-dark :is(.wd-item:hover, .tl-col li a:hover, .overlay-body a:hover) { color: var(--site-accent); background: var(--site-raised); }
.site-dark :is(.wd-close, .wd-burger) { background: var(--site-raised); color: var(--site-text); border-color: var(--site-line); }
.site-dark .overlay-header button { color: var(--site-text); }
.site-dark .wd-backdrop { background: #000b; backdrop-filter: blur(4px); }
.site-dark :is(#theLoaiOverlay, #danhSachOverlay) { z-index: 10000; }
.site-dark #danhsachGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Catalog, cards and sidebars */
.site-dark .section { margin: 34px 0; }
.site-dark :is(.section h2, .main-title h2) { font-weight: 800; letter-spacing: -.4px; }
.site-dark .section h2 > i { color: var(--site-accent); font-size: 17px; }
.site-dark .section h2::after { background: var(--site-line); opacity: 1; height: 1px; }
.site-dark :is(.bg-wrap, .latest-wrap, .homeCol .home-content, .widget, .homeRightCol .widget, .sidebar .widget, .book, .top-item, .policy-container, .popup-inner) {
  background: var(--site-surface);
  border-color: var(--site-line);
  color: var(--site-text);
  box-shadow: 0 8px 28px #00000012;
  border-radius: 14px;
}
.site-dark .grid .card {
  background: transparent !important;
  border: 0 !important;
  color: var(--site-text);
  border-radius: 12px;
}
.site-dark .bg-wrap { padding: 20px; }
.site-dark .listCol,
.site-dark .listCol > .bg-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.site-dark .book .cover,
.site-dark .related-books .card .thumb { background: var(--site-raised); }
.site-dark .widget.suggest .widget-title { color: var(--site-accent); border-color: var(--site-line); }
.site-dark .related-books h2 { border-color: var(--site-line); }
.site-dark .card .thumb { border-radius: 12px; background: var(--site-raised); transition: filter .2s ease; }
.site-dark .card:hover .thumb { filter: brightness(1.08); }
.site-dark .card .meta { padding-top: 12px !important; }
.site-dark :is(.card h3, .card .title a, .related-books .card .title a, .latest-title a, .iname h3 a, .homeRightCol .widget .title, .widget.suggest .item a, .tags.tag-name li a, .book .title a, .cat-grid a) { color: var(--site-text); }
.site-dark :is(.toolbar, .toolbar label, .book .meta, .book .meta .label, .meta-rows, .chapter-content) { color: #c4d1db; }
.site-dark .book .meta { color: #b3c3cf !important; }
.site-dark :is(.title-list p, .latest-meta, .latest-bullet, .itemupdate .icate, .itemupdate .icate a, .itemupdate .iupdated, .widget.suggest .item a i, .chapter-meta, .hint, .loading, .top-meta, .top-description, .meta-items, .breadcrumbs, .breadcrumbs li, .policy-header .update-time, .top-list small) { color: var(--site-muted); }
.site-dark :is(.breadcrumbs a, .latest-meta a, .itemupdate .ichapter a, .chapter-book) { color: var(--site-accent); }
.site-dark :is(.latest-item, .itemupdate, .suggest .all .item, .meta-rows li, .chapter-list li, .section-title, .related-books, .related-books .section-title, .title-list h1, .policy-header, .popup-body li) { border-color: var(--site-line) !important; }
.site-dark :is(.itemupdate:hover, .widget.suggest .item:hover, .row:hover, .chapter-list li:hover) { background: var(--site-raised); }
.site-dark :is(.homeCol .main-title .line, .latest-head .rule) { background: var(--site-accent); }
.site-dark :is(.tag, .genre-tag, .pg-indicator, .book-label span) {
  color: #bdcdd7;
  background: var(--site-raised);
  border-color: var(--site-line);
  box-shadow: none;
}
.site-dark :is(.label-full, .label-status, .tag-full, .badge-full) {
  color: #93efc6 !important;
  background: var(--site-accent-soft) !important;
  border-color: #2e6451;
}
.site-dark .label-ongoing { color: #f7d58a !important; background: #3a2d19 !important; border-color: #6d542c; }
.site-dark .badge-new { background: #1c3450; color: #a4cfff; border-color: #2d5275; }
.site-dark .suggest .item > span:first-child { box-shadow: none; background: var(--site-raised); color: var(--site-text); }
.site-dark .status-new::before, .site-dark .status-full::before { color: var(--site-accent); background: var(--site-accent-soft); }
.site-dark .status-hot::before { color: #fda4af; background: #4a202b; }
.site-dark .book:not(:first-child)::before { background: var(--site-line); }
.site-dark .placeholder, .site-dark .empty-state { background: var(--site-surface); color: var(--site-muted); border-color: var(--site-line); }
.site-dark .error { color: #fda4af; }

/* Reader, paging and policy page */
.site-dark :is(.book-tools .btn, .btn-page, .pg-btn, .frm-goto button, .chapter-controls .btn.mid) {
  background: var(--site-raised);
  color: var(--site-text);
  border-color: var(--site-line);
}
.site-dark :is(.book-tools .btn:hover, .btn-page:hover, .pg-btn:hover) { background: #263b3a; color: var(--site-accent); border-color: #44705f; }
.site-dark :is(.book-tools .btn.primary, .btn-readnow, .chapter-btn, .pg-btn--primary, .chapter-controls .btn.prev, .chapter-controls .btn.next) {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: #082219;
}
.site-dark .btn-page.active { background: var(--site-accent) !important; color: #082219 !important; border-color: var(--site-accent); }
.site-dark :is(.chapter-controls .btn, .pg-btn):disabled { background: var(--site-surface) !important; color: #718493 !important; border-color: var(--site-line) !important; }
.site-dark .chapter-content {
  background: #111a21;
  color: #cbd7df;
  border: 1px solid var(--site-line);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 44px);
  font-size: 18px;
  line-height: 1.95;
}
.site-dark .chapter-content :is(p, span, div, font) { color: inherit !important; background-color: transparent !important; }
.site-dark .chapter-content a { color: var(--site-accent); }
.site-dark .popup { background: #000a; backdrop-filter: blur(5px); }
.site-dark .popup-header { background: var(--site-raised); color: var(--site-text); border-bottom: 1px solid var(--site-line); }
.site-dark .popup-body a { color: var(--site-text); }
.site-dark .chapter-loading { background: #131b23df; }
.site-dark .loader { border-color: var(--site-line); border-top-color: var(--site-accent); }
.site-dark .policy-section :is(p, li), .site-dark .contact-info p { color: #bacbd7; }
.site-dark .policy-section h2 { color: var(--site-accent); border-color: var(--site-accent); }
.site-dark :is(.highlight-box, .contact-info) { background: var(--site-raised); border-color: var(--site-accent); }
.site-dark .highlight-box p { color: #b0e7ce; }
.site-dark .policy-container strong { color: var(--site-text); }
.site-dark .policy-container a { color: var(--site-accent); }

/* Footer: an editorial invitation, useful links and a quiet signature. */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  background: #0d151b;
  border-top: 1px solid #2b453d;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6ee7b7, transparent);
}
.site-footer > .container { position: relative; }
.footer-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 54px 0 40px;
  border-bottom: 1px solid var(--site-line);
  background: radial-gradient(ellipse at 90% 0, #6ee7b709, transparent 60%);
}
.site-footer .footer-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--site-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.9px;
}
.footer-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 12px #6ee7b74d; }
.site-footer h2 { margin: 0 0 18px; font-size: clamp(28px, 3.7vw, 44px); line-height: 1.2; font-weight: 800; letter-spacing: -1.6px; }
.site-footer h2 span { color: var(--site-accent); }
.site-footer p { color: var(--site-muted); font-size: 13px; line-height: 1.85; }
.footer-invitation > div > p:last-child { margin-bottom: 0; }
.site-footer .footer-explore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-shrink: 0;
  padding: 15px 20px;
  border: 1px solid var(--site-accent);
  border-radius: 10px;
  background: var(--site-accent);
  color: #082219;
  font-size: 13px;
  font-weight: 700;
  transition: background .18s, transform .18s;
}
.site-footer .footer-explore:hover { color: #082219; background: #a7f3d0; transform: translateY(-2px); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 56px; padding: 44px 0; }
.site-dark .footer-logo { padding: 0; font-size: 22px; white-space: nowrap; }
.footer-brand > p { max-width: 330px; margin: 18px 0; }
.footer-signature { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: #9ab5ad; }
.site-footer h3 { color: #b1c1cd; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; margin: 8px 0 22px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-links h3 { margin-bottom: 8px; }
.site-footer .footer-links a { display: flex; justify-content: space-between; gap: 24px; width: 100%; color: #bccbd6; padding: 0; font-size: 13px; }
.site-footer .footer-links a i { color: #607a73; font-size: 10px; align-self: center; }
.site-footer .footer-links a:hover, .site-footer .footer-links a:hover i { color: var(--site-accent); background: none; }
.footer-contact > p { margin-bottom: 16px; }
.site-footer .footer-email { display: flex; align-items: center; gap: 10px; color: var(--site-text); font-size: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--site-line); }
.footer-email span { overflow-wrap: anywhere; }
.footer-email > i:first-child { color: var(--site-accent); }
.footer-email > i:last-child { margin-left: auto; color: var(--site-muted); font-size: 10px; }
.site-footer .footer-policy { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 12px; color: var(--site-muted); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 26px; border-top: 1px solid var(--site-line); }
.footer-bottom p { font-size: 11px; margin: 0; color: #8ba0ae; }
.footer-bottom p + p { color: #7e929f; margin-top: 2px; }
.site-footer .footer-back-top { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: #c0cfd9; font-size: 12px; }
.footer-back-top span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--site-line); border-radius: 50%; color: var(--site-accent); font-size: 18px; }
.footer-back-top:hover span { border-color: var(--site-accent); }

@media (min-width: 992px) {
  .site-dark .wrapper.homepage { grid-template-columns: minmax(0, 1fr) 290px; }
  .site-dark .itemupdate { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 45px 78px; gap: 12px; }
  .site-dark .itemupdate .iname { min-width: 0; }
  .site-dark .itemupdate .iname h3 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-dark .tl-dropdown, .site-dark #theLoaiMenu { min-width: 0; width: min(720px, 75vw); }
  .site-dark #theLoaiMenu { left: -180px !important; }
  .site-dark #theLoaiGrid { min-width: 0; gap: 12px 24px; }
  .site-dark #danhSachMenu { width: 420px; }
  .site-dark #topMenu { width: 460px; left: -160px; }
  .site-dark .tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-dark .tl-col li a { white-space: normal; }
}
@media (max-width: 991.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { max-width: 520px; }
  .site-dark .latest-wrap { padding: 18px; }
}
@media (max-width: 575.98px) {
  .site-dark .navbar-brand { font-size: 19px; }
  .site-dark .navbar .navbar-toggler { margin-top: -38px; padding: 4px 7px; }
  .site-dark main.container { margin-top: 20px; }
  .site-dark .bg-wrap { padding: 16px; }
  .site-dark .section h2 { font-size: 18px; }
  .site-dark .card .tag { font-size: 10px; padding: 3px 6px; }
  .site-dark .label-full { white-space: normal; font-size: 10px; line-height: 1.3; padding: 4px 6px; }
  .site-dark .related-books .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-dark .chapter-content { border-radius: 0; border-left: 0; border-right: 0; font-size: 17px; }
  .footer-invitation { align-items: flex-start; flex-direction: column; gap: 24px; padding: 36px 0 32px; }
  .site-footer .footer-eyebrow { letter-spacing: 1.2px; font-size: 9px; }
  .site-footer h2 { letter-spacing: -1px; }
  .site-footer .footer-explore { padding: 12px 18px; }
  .footer-grid { gap: 30px 24px; padding: 32px 0; }
  .site-dark .footer-logo { font-size: 21px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-contact > p { max-width: 360px; }
  .footer-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .footer-links h3 { grid-column: 1 / -1; }
  .site-footer .footer-links a { font-size: 12px; gap: 8px; }
  .footer-bottom { align-items: flex-start; }
  .site-footer .footer-back-top { font-size: 0; gap: 0; }
  .site-footer .footer-back-top span { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-dark *, .site-dark *::before, .site-dark *::after { animation: none !important; transition: none !important; }
}

/* Affiliate artwork preserves its configured pixel ratio without cropping. */
.site-dark .catalog-with-spotlight { grid-template-columns: minmax(0, 1fr) 320px; }
.site-dark .reader-spotlight { width: min(100%, var(--spotlight-width, 300px)); margin: 0 auto 24px; }
.site-dark .reader-spotlight[hidden] { display: none; }
.site-dark .spotlight-caption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 9px; letter-spacing: 1.3px; color: var(--site-muted); }
.site-dark .spotlight-caption > span { letter-spacing: 0; }
.site-dark .spotlight-card { display: block; overflow: hidden; border-radius: 10px; outline-offset: 4px; }
.site-dark .spotlight-art { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) {
  .site-dark .catalog-with-spotlight { grid-template-columns: minmax(0, 1fr); }
  .site-dark .sideCol { display: none; }
}