/* Giao diện đen–vàng thống nhất các trang người dùng, gồm trang nghe truyện. */
html { background: #090b0d; color-scheme: dark; }
body.site-noir {
  --brand: #e6b85f;
  --bg: #090b0d;
  --surface: #121416;
  --surface2: #1b1d20;
  --line: #30302c;
  --text: #eee9df;
  --muted: #aba79f;
  --live: #91c89b;
  --shadow: 0 6px 24px #0003;
  --radius: 8px;
  --mono: system-ui, -apple-system, "Segoe UI", sans-serif;
  --dh-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --noir-background: url("./noir-background.webp");
  --noir-hero: url("./noir-hero.webp");
  --dh-pink: #252118;
  --dh-pink-line: #55442b;
  --dh-petal2: #edc577;
  --dh-deep: #f4d99c;
  --dh-peach: #211c15;
  --dh-green: #19271e;
  --dh-cream2: #282116;
  --dh-yellow: #e6b85f;
  color-scheme: dark;
  color: var(--text);
  background: var(--bg);
  isolation: isolate;
  font-family: var(--dh-display);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
body.site-noir::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#090b0d66, #090b0d99), var(--noir-background) center / cover no-repeat;
}
body.site-noir .topbar {
  background: #0b0d0fee;
  border-bottom: 1px solid #ba945a38;
  padding: 8px max(16px, calc((100vw - 1360px) / 2));
  gap: 12px;
}
body.site-noir .brand { flex: none; color: #f2cc82; font-family: inherit; font-size: 21px; font-weight: 700; }
body.site-noir .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #e6b85f19; }
body.site-noir .top-nav { margin-left: 12px; gap: 2px; scrollbar-width: thin; scrollbar-color: #66512d transparent; }
body.site-noir .top-nav::-webkit-scrollbar { display: block; height: 3px; }
body.site-noir .top-nav::-webkit-scrollbar-thumb { background: #66512d; }
body.site-noir .top-nav a { padding: 7px 9px; color: #c7c6c2; font-size: 15px; font-weight: 500; border-radius: 0; }
body.site-noir .nav-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
body.site-noir .top-nav a.on { color: #f3cd7f; background: transparent; box-shadow: inset 0 -2px #e6b85f; }
body.site-noir .genre-menu { position: relative; display: inline-flex; align-items: center; }
body.site-noir .genre-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 0; background: transparent; color: #c7c6c2; font: 500 15px var(--dh-display); cursor: pointer; white-space: nowrap; }
body.site-noir .genre-toggle.on { color: #f3cd7f; box-shadow: inset 0 -2px #e6b85f; }
body.site-noir .genre-toggle:hover { color: #f7d99d; }
body.site-noir .genre-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.site-noir .genre-toggle[aria-expanded=true] .genre-chevron { transform: rotate(180deg); }
body.site-noir .genre-options { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 152px; padding: 5px; border: 1px solid #55442b; border-radius: 6px; background: #141719; box-shadow: 0 8px 24px #0006; }
body.site-noir .genre-options a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 15px; }
body.site-noir .main-menu .genre-menu { display: block; flex: 1 0 100%; }
body.site-noir .main-menu .genre-toggle { width: 100%; padding: 8px 10px; gap: 8px; font-size: 16px; }
body.site-noir .main-menu .genre-toggle.on { background: #302719; box-shadow: none; border-radius: 5px; }
body.site-noir .main-menu .genre-chevron { margin-left: auto; }
body.site-noir .main-menu .genre-options { position: static; margin: 4px 0 4px 24px; min-width: 0; padding: 0; border: 0; border-left: 1px solid #55442b; border-radius: 0; background: transparent; box-shadow: none; }
body.site-noir .top-nav a:hover, body.site-noir .main-menu a:hover { color: #f7d99d; background: #e6b85f0c; }
body.site-noir .main-menu { background: #111315; border-bottom: 1px solid var(--line); }
body.site-noir .main-menu a { color: var(--text); border-radius: 5px; padding: 8px 10px; font-size: 16px; }
body.site-noir .main-menu a.on { background: #302719; color: #f3cd7f; box-shadow: none; }
body.site-noir .top-search, body.site-noir .menu-btn { color: #d5c4a3; }
body.site-noir .btn-login, body.site-noir .acct-btn, body.site-noir .bell-btn {
  color: #e8d8b4; background: #141619; border: 1px solid #625031; box-shadow: none;
}
body.site-noir .acct-btn .av-wrap { background: #33271a; }
body.site-noir .bell-n { background: #e6b85f; color: #171309; }
body.site-noir .wrap { max-width: 1200px; padding: 20px 20px 12px; }
body.site-noir .wrap.narrow { max-width: 780px; }
body.site-noir .h1 { color: #f0d9a5; font-size: clamp(24px, 3vw, 30px); font-weight: 600; }
body.site-noir .h2, body.site-noir .shelf-head h2 { color: #f1d69a; font-weight: 600; font-size: 22px; }
body.site-noir .sub { font-family: inherit; color: var(--muted); font-size: 14px; font-weight: 400; margin-bottom: 12px; }
body.site-noir .searchbox { margin: 12px 0 18px; }
body.site-noir .searchbox input {
  height: 42px; border-radius: 22px; border: 1px solid #3d3d36;
  background: #111315; color: var(--text); box-shadow: none; font-family: inherit; font-weight: 400;
}
body.site-noir .searchbox > svg, body.site-noir .sb-clear { top: 21px; }
body.site-noir .searchbox input:focus { border-color: #c59b50; box-shadow: 0 0 0 3px #e6b85f12; }
body.site-noir .suggest { border-radius: 8px; background: #15171a; }
body.site-noir .shelf { margin-top: 22px; }
body.site-noir .shelf-head { border-bottom: 1px solid #e6b85f1c; padding-bottom: 8px; gap: 8px; }
body.site-noir .arrows { display: flex; }
body.site-noir .arrows button { width: 30px; height: 30px; font-size: 20px; border: 1px solid #765e37; color: #e6b85f; }
body.site-noir .tabs button { height: 30px; padding: 0 10px; font-size: 14px; background: #141619; border: 1px solid var(--line); color: var(--muted); }
body.site-noir .tabs button.on { background: #302719; border-color: #ab8543; color: #f4d99c; }
body.site-noir .rail {
  grid-template-rows: none; grid-auto-columns: clamp(128px, 10vw, 152px);
  gap: 12px; margin: 0; padding: 4px 0 8px; scroll-padding: 0;
}
body.site-noir .rail.is-dragging, body.site-noir .noir-slides.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
body.site-noir .rail .card, body.site-noir .rail img, body.site-noir .noir-slides a, body.site-noir .noir-slides img { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  body.site-noir .rail, body.site-noir .noir-slides { cursor: grab; user-select: none; -webkit-user-select: none; }
  body.site-noir .rail .card { cursor: inherit; }
}
body.site-noir .card {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0;
  border: 1px solid #38372e; border-radius: 6px;
  background: linear-gradient(145deg, #17191a, #0e1012); box-shadow: none;
}
body.site-noir .card:hover { border-color: #be944b; box-shadow: 0 8px 22px #0004; }
body.site-noir .card:not(.has-cover)::before {
  flex: none; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0;
  background-size: 50px; background-color: #282219;
}
body.site-noir .card.has-cover .card-cover { flex: none; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; object-fit: cover; }
body.site-noir .card-body { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; padding: 8px; }
body.site-noir .card-title { display: block; flex: none; width: 100%; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
body.site-noir .card-body .meta, body.site-noir .card-body .live { display: block; max-width: 100%; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
body.site-noir .card .rank { top: 6px; left: 6px; transform: none; width: 21px; height: 21px; border-radius: 4px; font: 700 13px/1 system-ui, sans-serif; background: #cdb06f; color: #211b0e; }
body.site-noir .meta, body.site-noir .live, body.site-noir .row-meta { font-family: inherit; }
/* Cỡ chữ đọc nội dung và thông tin phụ thống nhất ở các trang/modal. */
body.site-noir .meta, body.site-noir .live, body.site-noir .row-meta,
body.site-noir .sg-meta, body.site-noir .np-body small, body.site-noir .c-actions,
body.site-noir .c-actions button, body.site-noir .rate-mine, body.site-noir .prof-hint,
body.site-noir .ref-stats span, body.site-noir .ref-txt small, body.site-noir .q-reset-all,
body.site-noir .q-again, body.site-noir .q-ok, body.site-noir .sh-dur,
body.site-noir .sh-sold, body.site-noir .sh-chip small, body.site-noir .vip-on,
body.site-noir .vip-count, body.site-noir .ac-vip, body.site-noir .st { font-size: 14px; }
body.site-noir .c-note, body.site-noir .c-name b, body.site-noir .c-bubble > b,
body.site-noir .prof-form label, body.site-noir .prof-info, body.site-noir .prof-links,
body.site-noir .wd-form label, body.site-noir .wd-add label, body.site-noir .wd-warn,
body.site-noir .wd-rules, body.site-noir .wd-balance span, body.site-noir .sh-name,
body.site-noir .sh-chip b, body.site-noir .sh-buy, body.site-noir .vip-perks,
body.site-noir .lg-form label, body.site-noir .np-item, body.site-noir .nf-detail p,
body.site-noir .gd-row p, body.site-noir .gd-rw, body.site-noir .gd-note,
body.site-noir .ref-txt, body.site-noir .ac-links a, body.site-noir .ask-msg,
body.site-noir .inapp-msg, body.site-noir .ul-msg { font-size: 16px; }
body.site-noir .gd-th, body.site-noir .gd-tr, body.site-noir .gd-table.small .gd-tr,
body.site-noir .lg-tabs button, body.site-noir .btn-ghost.sm, body.site-noir .wd-quick button,
body.site-noir .lb-tabs a, body.site-noir .lb-val, body.site-noir .ac-stats,
body.site-noir .ac-ck, body.site-noir .ck-btn, body.site-noir .timer-grid button,
body.site-noir .chip, body.site-noir .timer-pop p, body.site-noir .timer-menu p { font-size: 15px; }
body.site-noir .realm, body.site-noir .pm-tag { font-size: 13px; }
body.site-noir .seek-time, body.site-noir .sheet-sub { font-size: 14px; }
body.site-noir .ac-bar { height: 22px; }
body.site-noir .ac-bar em, body.site-noir .ac-bar i { font-size: 13px; line-height: 22px; }
body.site-noir .tag { color: #e8c885; background: #201c15; border: 1px solid #796039; border-radius: 5px; font: 13px/1.4 system-ui, sans-serif; padding: 2px 5px; }
body.site-noir .tag.genre-dam-my { color: #d0b3ef; background: #261c31; border-color: #765394; }
body.site-noir .tag.genre-ngon-tinh { color: #eab5bf; background: #2c1c22; border-color: #905365; }
body.site-noir .cover-genres { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: calc(100% - 12px); pointer-events: none; }
body.site-noir .cover-genres .tag { box-shadow: 0 1px 5px #0006; font-weight: 600; white-space: nowrap; }
body.site-noir .cover-genres .genre-dam-my { background: #261c31ed; }
body.site-noir .cover-genres .genre-ngon-tinh { background: #2c1c22ed; }
body.site-noir .row { background: linear-gradient(120deg, #17191b, #101214); border: 1px solid #34342e; border-radius: 7px; box-shadow: none; padding: 10px; gap: 10px; }
body.site-noir .row-head b { font-family: inherit; font-weight: 600; font-size: 16px; flex: 0 0 100%; width: 100%; }
body.site-noir .row-head { flex-wrap: wrap; gap: 3px; }
body.site-noir .row-meta { gap: 8px; }
body.site-noir .row-icon { position: relative; width: 60px; height: 64px; border-radius: 5px; background: #2a2419; color: #e6b85f; }
body.site-noir .row-icon .cover-genres { top: 3px; right: 3px; max-width: calc(100% - 6px); gap: 2px; }
body.site-noir .row-icon .cover-genres .tag { font-size: 12px; padding: 1px 3px; }
body.site-noir .row-icon img { border-radius: 5px; }
body.site-noir .row .dur { background: #292219; color: #e6b85f; }
body.site-noir .noir-home .all .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.site-noir .pager a, body.site-noir .pager .off { background: #151719; border: 1px solid var(--line); border-radius: 5px; }
body.site-noir .footer { border-top: 1px solid #e6b85f26; color: #9d988d; background: transparent; margin-top: 24px; padding: 16px 12px; font-size: 14px; }
body.site-noir .footer nav a { color: #c1aa7d; }

/* Banner trang chủ dùng đúng ảnh bìa, tên và đường dẫn truyện đang có. */
body.site-noir .noir-carousel { position: relative; isolation: isolate; }
body.site-noir .noir-carousel::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - 1520px) / 2)); width: min(64%, 760px); z-index: -1; pointer-events: none;
  background: var(--noir-hero) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 78%, transparent), linear-gradient(0deg, transparent, #000 24%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 78%, transparent), linear-gradient(0deg, transparent, #000 24%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
body.site-noir .noir-slides { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
body.site-noir .noir-slides::-webkit-scrollbar { display: none; }
body.site-noir .noir-prev, body.site-noir .noir-next { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #a08149; border-radius: 50%; color: #ecc773; background: #0b0d0eb3; cursor: pointer; }
body.site-noir .noir-prev svg, body.site-noir .noir-next svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.site-noir .noir-prev { left: 18px; }
body.site-noir .noir-next { right: 18px; }
body.site-noir .noir-feature-dots { position: absolute; z-index: 2; right: max(64px, calc((100% - 1160px) / 2)); bottom: 8px; display: flex; gap: 6px; }
body.site-noir .noir-feature-dots button { position: relative; width: 18px; height: 18px; border: 0; padding: 0; background: transparent; cursor: pointer; }
body.site-noir .noir-feature-dots button::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #6e6b64; }
body.site-noir .noir-feature-dots button[aria-current=true]::before { background: #ecc773; }
body.site-noir .noir-feature { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; position: relative; display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 28px; align-items: center; min-height: 248px; padding: 14px max(68px, calc((100% - 1160px) / 2)); overflow: hidden; border: 0; border-radius: 0; background: transparent; }
body.site-noir .noir-book { position: relative; display: block; aspect-ratio: 3 / 4; border: 1px solid #b39356; border-radius: 2px; box-shadow: 2px 0 #4c4030, 4px 0 #8a7751, 5px 0 #30271b, 0 8px 20px #0008; }
body.site-noir .noir-book::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; z-index: 1; border-right: 1px solid #edcc8740; background: linear-gradient(90deg, #090b0dbb, #d4b47733 45%, #090b0d66); pointer-events: none; }
body.site-noir .noir-book > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
body.site-noir .noir-book-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px; height: 100%; color: #e8c885; text-align: center; background: linear-gradient(135deg, #45381d, #12150f); }
body.site-noir .noir-book-fallback svg { font-size: 30px; }
body.site-noir .noir-book-fallback b { font: 600 16px/1.5 var(--dh-display); }
body.site-noir .noir-feature-copy { max-width: 380px; min-width: 0; text-shadow: 0 2px 8px #000; }
body.site-noir .noir-eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; color: #f0d7a1; }
body.site-noir .noir-feature-copy h2 { margin: 0 0 8px; font: 600 clamp(26px, 3vw, 32px)/1.35 var(--dh-display); color: #fff2d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.site-noir .noir-feature-tags { margin: 0 0 8px; }
body.site-noir .noir-feature-tags:empty { display: none; }
body.site-noir .noir-feature-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #d5d0c5; font: 16px/1.55 var(--dh-display); margin: 0 0 8px; }
body.site-noir .noir-feature-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin: 0 0 12px; color: #d8d1c2; }
body.site-noir .noir-feature-meta span { display: inline-flex; align-items: center; gap: 8px; }
body.site-noir .noir-feature-meta svg { color: #e6b85f; }
body.site-noir .noir-listen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1px solid #e5bd71; border-radius: 5px; color: #20170a; font: 600 16px var(--dh-display); text-shadow: none; background: linear-gradient(115deg, #f5ce78, #c99542); }
body.site-noir .noir-listen:hover { filter: brightness(1.1); }
body.site-noir .noir-home > .h1 { margin-top: 0; font-size: 22px; }

/* Trang nghe: giữ ảnh truyện tròn, đổi viền và các khối nội dung sang đen–vàng. */
body.site-noir .listen-wrap .back { display: inline-flex; margin-bottom: 14px; font-size: 14px; }
body.site-noir .hero { gap: 20px; padding: 18px; border: 1px solid #51442d; border-radius: 10px; background: linear-gradient(130deg, #1b1b17f5, #111416f5); box-shadow: 0 8px 24px #0003; }
body.site-noir .hero-art, body.site-noir .hero-art.has-cover { width: 184px; height: 184px; border-radius: 50%; border: 1px solid #79613b; background: radial-gradient(circle, #514023, #161a19 72%); box-shadow: 0 6px 24px #0005; }
body.site-noir .hero-art::before { content: ""; position: absolute; inset: 6px; border: 1px dashed #b9934b80; border-radius: 50%; pointer-events: none; }
body.site-noir .hero-art .hero-cover { top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; border: 2px solid #d0ad68; box-shadow: 0 4px 14px #0006; }
body.site-noir .hero-art:not(.has-cover) .eq { display: inline-flex; }
body.site-noir .hero-art .dur { bottom: 4px; padding: 3px 7px; font-size: 14px; color: #f3d99c; background: #171a1b; border: 1px solid #79613b; }
body.site-noir .hero h1 { font-family: inherit; font-size: 24px; line-height: 1.5; font-weight: 600; color: #f3d99c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.site-noir .hero-meta { gap: 6px 10px; }
body.site-noir .hero-meta .meta, body.site-noir .hero-meta .live { font-size: 14px; }
body.site-noir .hero-actions { gap: 10px; margin-top: 14px; }
body.site-noir .hero-actions .btn-play, body.site-noir .hero-actions .btn-ghost { min-width: 112px; height: 48px; padding: 0 22px; font-size: 15px; }
body.site-noir .hero-actions .btn-play svg { width: 20px; height: 20px; }
body.site-noir .hero .resume { font-size: 14px; font-weight: 400; }
body.site-noir .desc { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; color: #c8c4bb; font-size: 16px; font-weight: 400; line-height: 1.7; }
body.site-noir .part { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; box-shadow: none; }
body.site-noir .part-no { border-radius: 5px; background: #2b2418; color: #e6b85f; }
body.site-noir .part.on { border-color: #cfa34f; background: #242219; }
body.site-noir .part.on .part-no { background: #e6b85f; color: #211809; }
body.site-noir .rate-text { font-size: 14px; color: #ccb581; font-weight: 400; }
body.site-noir .rate-mine { color: #e6b85f; }
body.site-noir .stars::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%234c4230' d='m13 2 3.2 6.5 7.2 1-5.2 5.1 1.2 7.2-6.4-3.4-6.4 3.4 1.2-7.2-5.2-5.1 7.2-1z'/%3E%3C/svg%3E"); }
body.site-noir .stars::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23e6b85f' d='m13 2 3.2 6.5 7.2 1-5.2 5.1 1.2 7.2-6.4-3.4-6.4 3.4 1.2-7.2-5.2-5.1 7.2-1z'/%3E%3C/svg%3E"); }
body.site-noir .heart-box, body.site-noir .comments { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #141719; box-shadow: none; }
body.site-noir .heart-title { font-size: 15px; }
body.site-noir .heart-n { background: #2a2318; }
body.site-noir .heart-n::before { border-right-color: #2a2318; }
body.site-noir .c-field, body.site-noir .c-login { background: #0e1012; border: 1px solid #49402f; border-radius: 8px; }
body.site-noir .c-field textarea { background: none; border: 0; border-radius: 0; }
body.site-noir .c-bubble { background: #1b1e20; border: 1px solid var(--line); border-radius: 10px; }
body.site-noir .c-bubble p { font-size: 16px; line-height: 1.6; }
body.site-noir .c-send { color: #211809; }
body.site-noir .c-item { border-bottom: 1px solid #30302c; }

/* Các trang và hộp thoại hiện có giữ nguyên hành vi, chỉ thay bề mặt và màu. */
body.site-noir .modal-box, body.site-noir .acct-card, body.site-noir .notif-panel, body.site-noir .timer-pop, body.site-noir .sheet-panel { background: #141719; color: var(--text); border: 1px solid #5a492f; border-radius: 10px; box-shadow: 0 16px 60px #0007; }
body.site-noir .acct-card .ac-head { border-bottom-color: var(--line); }
body.site-noir .acct-card a, body.site-noir .acct-card button { color: inherit; }
body.site-noir .btn-play, body.site-noir .q-btn, body.site-noir .sh-buy, body.site-noir .wd-submit, body.site-noir .ask-ok, body.site-noir .ul-btn, body.site-noir .c-send { background: linear-gradient(110deg, #ecc773, #ca984b); color: #211809; border-radius: 6px; box-shadow: none; }
body.site-noir .btn-ghost, body.site-noir .chip, body.site-noir .ask-no { color: var(--text); background: #1c1e20; border: 1px solid #645235; border-radius: 6px; }
body.site-noir .chip.on { background: #33291a; color: #f2cd81; border-color: #ae8745; }
body.site-noir .lg-tabs, body.site-noir .reset-form, body.site-noir .quest, body.site-noir .sh-item, body.site-noir .sh-chip, body.site-noir .ref-list, body.site-noir .ref-stats div, body.site-noir .wd-form, body.site-noir .wd-add, body.site-noir .prof-card, body.site-noir .lb-row { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
body.site-noir .lg-tabs button.on { color: #f3cf88; background: #302719; box-shadow: none; }
body.site-noir .lg-form input, body.site-noir .ref-link input, body.site-noir .wd-form input:not([type=radio]), body.site-noir .wd-add input, body.site-noir .wd-add select, body.site-noir .c-form input { color: var(--text); background: #0e1012; border: 1px solid #4d4434; border-radius: 6px; }
body.site-noir .quest.promax, body.site-noir .gd-promax, body.site-noir .ref-card, body.site-noir .wd-balance, body.site-noir .vip-card { background: linear-gradient(130deg, #302718, #151718); color: #efd7a4; border: 1px solid #7b6135; border-radius: 8px; box-shadow: none; }
body.site-noir .quest { padding: 11px; gap: 10px; margin-bottom: 8px; }
body.site-noir .q-ico { width: 38px; height: 38px; font-size: 20px; background: #2b2418; border-radius: 7px; }
body.site-noir .q-ico { color: #c7c6c2; }
body.site-noir .q-ico .nav-icon { width: 22px; height: 22px; }
body.site-noir .q-body small, body.site-noir .q-reward { font-size: 14px; }
body.site-noir .q-btn { padding: 6px 11px; font-size: 14px; }
body.site-noir .q-reward, body.site-noir .sh-chip.on, body.site-noir .ref-big b { color: #e9bf6c; }
body.site-noir .q-bar span, body.site-noir .hist-bar span { background: linear-gradient(90deg, #a77b38, #f0cb7e); }
body.site-noir .q-reset-all { background: #181a1c; border: 1px solid var(--line); border-radius: 5px; box-shadow: none; }
body.site-noir .ac-vip { background: #302719; color: #eac77f; border: 1px solid #675332; }
body.site-noir .vip-buy .sh-buy { color: #211809; background: linear-gradient(110deg, #ecc773, #ca984b); }
body.site-noir .vip-buy .sh-sold { color: #bba578; }
body.site-noir .wd-warn { background: #30251a; color: #edc984; border: 1px solid #72562f; }
/* Giữ chỗ ngay lần tải đầu; không có hiệu ứng nhấp nháy/shimmer. */
body.site-noir .service-panel { min-height: 420px; min-height: min(600px, calc(100svh - 200px)); }
body.site-noir .panel-placeholder > div { display: flex; align-items: center; gap: 12px; height: 76px; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-sizing: border-box; }
body.site-noir .panel-placeholder i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; background: #242526; }
body.site-noir .panel-placeholder span { width: 52%; height: 9px; background: #292b2c; border-radius: 3px; }
body.site-noir .gd-card, body.site-noir .prose, body.site-noir .soon { background: var(--surface); border-color: var(--line); border-radius: 8px; }
body.site-noir .gd-note, body.site-noir .gd-tr:nth-child(odd), body.site-noir .nf-detail .np-ico { background: #1b1d1c; }
body.site-noir .gd-warn { background: #2b2419; color: #e8cc93; }
body.site-noir .ac-head b, body.site-noir .ac-stones { color: #eac77f; }
body.site-noir .prof-cam { background: #d8b264; color: #211809; }
body.site-noir .prof-card { padding: 18px 14px; }
body.site-noir .prof-img { width: 80px; height: 80px; font-size: 30px; }
body.site-noir .prof-form input { height: 42px; background: #0e1012; border-color: #4d4434; }
body.site-noir .lb-row { padding: 10px 12px; gap: 10px; }
body.site-noir .lb .av-wrap { padding: 0; background: none; }
body.site-noir .lb .av-wrap > .lb-av { border: 0; box-shadow: none; }
body.site-noir .lb .vtick circle { fill: #9e9c95; }
body.site-noir .sh-item, body.site-noir .vip-card, body.site-noir .wd-form, body.site-noir .wd-add { padding: 12px; }
body.site-noir .wd-balance { padding: 16px; }
body.site-noir .sheet-art { background: radial-gradient(circle, #554126, #171a1b); border-radius: 50%; }
body.site-noir .c-btn.c-main { color: #211809; }
body.site-noir .timer-grid button { background: #20221e; border-color: #66502e; }
body.site-noir .timer-grid button.on { background: #3c2f1a; color: #f3d58f; }
body.site-noir .sh-prev { background: #20221e; border-radius: 6px; }
body.site-noir .c-btn.c-main { background: #e6b85f; color: #211809; box-shadow: none; }
body.site-noir .seek-time { color: #c6b897; }
body.site-noir .sheet-art { background-color: #252017; }
body.site-noir a:focus-visible, body.site-noir button:focus-visible { outline: 2px solid #f1c875; outline-offset: 4px; }

@media (min-width: 1024px) {
  body.site-noir .top-nav { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 900px) {
  body.site-noir .noir-feature { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 14px 64px; min-height: 228px; }
  body.site-noir .noir-feature-copy h2 { font-size: 26px; }
  body.site-noir .wrap { padding: 16px 16px 10px; }
  body.site-noir .rail { grid-auto-columns: 132px; gap: 10px; }
}
@media (max-width: 719px) {
  body.site-noir .hero { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; padding: 14px 12px; text-align: left; }
  body.site-noir .hero-art, body.site-noir .hero-art.has-cover { grid-column: 1; grid-row: 1 / span 2; width: 120px; height: 120px; }
  body.site-noir .hero-body { display: contents; }
  body.site-noir .hero h1 { grid-column: 2; align-self: end; font-size: 22px; margin: 0; }
  body.site-noir .hero-meta { grid-column: 2; align-self: start; justify-content: flex-start; gap: 5px; }
  body.site-noir .hero-meta .meta, body.site-noir .hero-meta .live { font-size: 13px; }
  body.site-noir .hero .rating, body.site-noir .hero-actions, body.site-noir .hero .resume { grid-column: 1 / -1; margin-top: 0; }
  body.site-noir .hero .rating, body.site-noir .hero-actions { justify-content: center; }
  body.site-noir .hero-actions .btn-play, body.site-noir .hero-actions .btn-ghost { height: 48px; padding: 0 22px; }
  body.site-noir .comments { padding: 12px; }
}
@media (max-width: 560px) {
  body.site-noir { --noir-background: url("./noir-background-mobile.webp"); --noir-hero: url("./noir-hero-mobile.webp"); }
  body.site-noir::before { background-position: center, left center; }
  body.site-noir .topbar { padding: 7px 12px; gap: 6px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.site-noir .brand { flex-shrink: 1; font-size: 17px; }
  body.site-noir .brand img { max-width: 118px; height: 30px; }
  body.site-noir .wrap { padding: 12px 12px 8px; }
  body.site-noir .main-menu { top: 55px; gap: 2px; padding: 8px 12px; }
  body.site-noir .noir-feature { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 48px; min-height: 170px; }
  body.site-noir .noir-prev, body.site-noir .noir-next { width: 40px; height: 40px; }
  body.site-noir .noir-prev { left: 4px; }
  body.site-noir .noir-next { right: 4px; }
  body.site-noir .noir-feature-dots { right: 48px; bottom: 0; gap: 2px; }
  body.site-noir .noir-feature-copy h2 { font-size: 22px; margin-bottom: 6px; }
  body.site-noir .noir-eyebrow { font-size: 12px; letter-spacing: .1em; margin-bottom: 5px; }
  body.site-noir .noir-feature-desc { font-size: 16px; -webkit-line-clamp: 1; margin-bottom: 8px; }
  body.site-noir .noir-feature-tags { margin-bottom: 6px; }
  body.site-noir .noir-feature-meta { font-size: 14px; gap: 6px; margin-bottom: 8px; }
  body.site-noir .noir-listen { min-height: 44px; padding: 0 20px; font-size: 16px; }
  body.site-noir .noir-carousel::before { opacity: .6; background-position: right center; }
  body.site-noir .noir-book .cover-genres { top: 3px; right: 3px; }
  body.site-noir .noir-book .cover-genres .tag { font-size: 12px; padding: 1px 3px; }
  body.site-noir .rail { grid-auto-columns: calc((100% - 16px) / 3); gap: 8px; }
  body.site-noir .card-body { padding: 7px 6px; }
  body.site-noir .card-title { font-size: 16px; }
  body.site-noir .card-body .meta, body.site-noir .card-body .live { font-size: 14px; gap: 3px; }
  body.site-noir .card .cover-genres { top: 4px; right: 4px; }
  body.site-noir .card .cover-genres .tag { font-size: 12px; padding: 2px 4px; }
  body.site-noir .card .rank { top: 4px; left: 4px; width: 18px; height: 18px; font-size: 13px; }
  body.site-noir .noir-home .all .list { grid-template-columns: minmax(0, 1fr); }
  body.site-noir .h1, body.site-noir .noir-home > .h1 { font-size: 24px; }
  body.site-noir .h2, body.site-noir .shelf-head h2 { font-size: 22px; }
  body.site-noir .shelf { margin-top: 18px; content-visibility: auto; contain-intrinsic-size: auto 270px; }
  body.site-noir .shelf-head { flex-wrap: wrap; }
  body.site-noir .swipe-hint { font-size: 14px; }
  body.site-noir .row-head b { font-size: 15px; }
  body.site-noir .row { padding: 8px; }
  body.site-noir .quest { gap: 8px; padding: 10px; flex-wrap: wrap; }
  body.site-noir .q-side { flex: 1 0 100%; max-width: none; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
}