/* ===================================================================
   ธีม Valhalla ทุกหน้า (2026-10-19) — โหลดท้ายสุดใน inc/header.php ต่อจาก valhalla.css
   ทับสีของธีมเดิม 5 ชั้น (style/site/newlogo/logo3-journal/prere + <style> ในหน้า) ให้เป็นมืด ทอง-แดง
   ไม่เปลี่ยนชื่อคลาสหรือโครงหน้า · ทุก selector ขึ้นต้น .vhs เพื่อชนะ specificity ของของเดิม
   ถอยกลับ: เอา inc/header.php / footer.php จาก *.bak-20261019-vhall ขึ้นทับ
   =================================================================== */

/* ---------- 1) ตัวแปรสีของธีมเดิม → ค่ามืด (ทุก rule ที่ใช้ var() เปลี่ยนตามเอง) ---------- */
body.vhs {
  --bg: #07080d; --paper: #0e0f16; --panel: #13121a; --ink: #ece6d8;
  --plum: #1b1420; --plum-deep: #0d0b12;
  --navy-900: #0b0b11; --navy-800: #121119; --navy-700: #1a1722; --navy-600: #a59d8c; --navy-line: rgba(245, 158, 11, .2);
  --gold: #fbbf24; --gold-hi: #fde68a; --gold-deep: #b45309; --gold-soft: rgba(251, 191, 36, .12);
  --star: #fbbf24; --star-hi: #fde68a; --peach: #fcd34d; --edge: #b45309;
  --pink: #fbbf24; --pink-deep: #f59e0b; --cyan: #4ade80; --lilac: #93c5fd; --lilac-deep: #60a5fa;
  --text: #ece6d8; --text-dim: #c9c0ad; --muted: #a59d8c;
  --ok: #4ade80; --danger: #f87171;
  --panel-line: rgba(245, 158, 11, .22); --input: rgba(0, 0, 0, .45); --input-line: rgba(255, 255, 255, .16);
  --on-accent: #1a1206; --radius: 6px; --shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --soft-line: rgba(255, 255, 255, .08); --on-dark: #ece6d8; --on-dark-dim: #a59d8c; --dark-line: rgba(245, 158, 11, .2);
  --font: 'Kanit', system-ui, sans-serif;
  /* ชุดสีป้ายสถานะบนพื้นมืด */
  --t-ok-bg: rgba(34, 197, 94, .14);   --t-ok: #86efac;
  --t-bad-bg: rgba(220, 38, 38, .17);  --t-bad: #fca5a5;
  --t-warn-bg: rgba(251, 191, 36, .14); --t-warn: #fcd34d;
  --t-blue-bg: rgba(59, 130, 246, .16); --t-blue: #93c5fd;
  --t-pur-bg: rgba(168, 85, 247, .17); --t-pur: #d8b4fe;
  --t-org-bg: rgba(249, 115, 22, .17); --t-org: #fdba74;
  --t-neu-bg: rgba(255, 255, 255, .07); --t-neu: #cfc7b6;
  --surface: linear-gradient(180deg, rgba(24, 21, 30, .9), rgba(12, 12, 18, .92));
  --surface-2: rgba(255, 255, 255, .035);
  --hover: rgba(251, 191, 36, .08);
}
html:has(body.vhs) { background: #07080d; }
body.vhs { background: radial-gradient(ellipse at 50% 0%, rgba(220, 38, 38, .14), #08080c 60%) fixed, #07080d; background-image: radial-gradient(ellipse at 50% 0%, rgba(220, 38, 38, .14), transparent 60%); color: var(--text); }
:where(.vhs) h1, :where(.vhs) h2, :where(.vhs) h3, :where(.vhs) h4 { color: #fff; }
.vhs :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vhs ::selection { background: rgba(251, 191, 36, .35); color: #fff; }
.vhs code { background: rgba(255, 255, 255, .08); color: #fde68a; border-radius: 4px; }
.vhs hr { border-color: var(--soft-line); }
.vhs .sub, .vhs .muted, .vhs .hint { color: var(--muted); }
.vhs .eyebrow, .vhs .overline { font-family: 'Cinzel', 'Kanit', serif; letter-spacing: .2em; color: var(--gold); }
.vhs .section h2 { background: none; -webkit-text-fill-color: currentColor; color: #fff; }
.vhs main.container { position: relative; z-index: 1; }

/* ---------- 2) แถบหัวหน้าเพจ + เมนูรอง ---------- */
.vhs .page-head {
  position: relative; z-index: 1; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, .55), rgba(7, 8, 13, .92)),
    radial-gradient(ellipse at 50% 120%, rgba(220, 38, 38, .25), transparent 60%),
    url("logo3-citadel.webp") center 35% / cover no-repeat;
  border-bottom: 1px solid rgba(245, 158, 11, .25);
  color: var(--text);
}
.vhs .page-head::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 160px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.vhs .page-head h1 { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.vhs .page-head .overline { color: var(--gold); font-size: .78rem; }
.vhs .page-head p { color: #d6cfbf; }
.vhs .subnav { position: relative; z-index: 2; background: rgba(10, 10, 15, .9); border-bottom: 1px solid rgba(245, 158, 11, .15); }
.vhs .subnav a { color: var(--muted); }
.vhs .subnav a:hover { color: var(--gold-hi); }
.vhs .subnav a.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- 3) กล่อง/การ์ดพื้นฐาน → กล่องขอบทอง ---------- */
.vhs .panel, .vhs .feat, .vhs .tile, .vhs .nl-fame-card, .vhs .nl-news-card, .vhs .nl-choice, .vhs .nl-char,
.vhs .econ-card, .vhs .eco-card, .vhs .news-item, .vhs .nl-step, .vhs .auth-split, .vhs .tp-card, .vhs .box,
.vhs .pet, .vhs .gc, .vhs .alpha-card, .vhs .rescue-item, .vhs .nl-shortcut, .vhs .nl-podium li {
  background: var(--surface); border: 1px solid var(--panel-line); color: var(--text); box-shadow: var(--shadow);
}
.vhs .panel { position: relative; }
.vhs .panel::before { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .6), transparent); }
.vhs .panel-title { background: rgba(251, 191, 36, .06); border-bottom: 1px solid var(--panel-line); color: #fff; }
.vhs .panel-title .ico, .vhs .panel-title svg { color: var(--gold); }
.vhs .panel-empty { color: var(--muted); }
.vhs .tile strong { color: var(--gold); font-family: 'Cinzel', 'Kanit', serif; }
.vhs .tile span, .vhs .tile small { color: var(--muted); }
.vhs .feat .ico, .vhs .feat:nth-child(3n+1) .ico, .vhs .feat:nth-child(3n+2) .ico { background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .25); color: var(--gold); }
.vhs .feat:nth-child(3n+2) .ico { background: rgba(6, 182, 212, .12); border-color: rgba(34, 211, 238, .3); color: #22d3ee; }
.vhs .feat:nth-child(3n) .ico { background: rgba(220, 38, 38, .14); border-color: rgba(248, 113, 113, .3); color: #fca5a5; }
.vhs .feat h3, .vhs .feat strong { color: #fff; }
.vhs .feat p { color: var(--muted); }
.vhs .kv, .vhs .kv * { border-color: var(--soft-line); }
.vhs .kv dt, .vhs .kv .k, .vhs .kv span:first-child { color: var(--muted); }

/* ---------- 4) ปุ่ม ---------- */
.vhs .btn {
  color: #1a1206; border: 1px solid #fcd34d; border-radius: 4px;
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 45%, #b45309 100%);
  box-shadow: 0 6px 22px rgba(245, 158, 11, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.vhs .btn:hover { color: #1a1206; background: linear-gradient(180deg, #fef3c7 0%, #fcd34d 45%, #d97706 100%); box-shadow: 0 8px 30px rgba(251, 191, 36, .5); }
.vhs .btn.ghost { color: var(--gold); background: rgba(7, 8, 13, .55); border-color: rgba(245, 158, 11, .4); box-shadow: none; }
.vhs .btn.ghost:hover { color: var(--gold-hi); background: var(--hover); border-color: var(--gold); }
.vhs .btn.danger, .vhs .btn.bad { color: #fff; border-color: #f87171; background: linear-gradient(180deg, #ef4444, #dc2626 50%, #991b1b); box-shadow: 0 6px 22px rgba(220, 38, 38, .3); }
.vhs .btn.danger:hover, .vhs .btn.bad:hover { color: #fff; box-shadow: 0 8px 30px rgba(239, 68, 68, .5); }
.vhs .btn:disabled, .vhs .btn:disabled:hover, .vhs .btn:disabled:active, .vhs .btn[disabled] { color: #6f6858; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.vhs .link-more { color: var(--gold); }
.vhs .btn-discord { background: rgba(88, 101, 242, .18); color: #c7d2fe; border-color: rgba(129, 140, 248, .45); }

/* ---------- 5) ฟอร์ม ---------- */
.vhs input:not([type=radio]):not([type=checkbox]):not([type=range]), .vhs select, .vhs textarea {
  background: var(--input); color: #fff; border: 1px solid var(--input-line); border-radius: 4px;
}
.vhs input:focus, .vhs select:focus, .vhs textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, .18); outline: none; }
.vhs input::placeholder, .vhs textarea::placeholder { color: #6f6858; }
.vhs input[aria-invalid=true] { background: rgba(220, 38, 38, .1); border-color: #f87171; }
.vhs select option, .vhs .adm-select option { background: #13121a; color: #ece6d8; }
.vhs .lbl, .vhs label { color: #d6cfbf; }
.vhs .req { color: #f87171; }
.vhs .cap-q { background: rgba(251, 191, 36, .12); color: var(--gold); border-color: rgba(251, 191, 36, .3); }
.vhs .sex label { background: rgba(0, 0, 0, .35); border-color: var(--input-line); color: var(--muted); }
.vhs .sex input:checked + label { background: rgba(251, 191, 36, .12); border-color: var(--gold); color: var(--gold); }
.vhs input[type=checkbox], .vhs input[type=radio] { accent-color: #fbbf24; }

/* ---------- 6) ข้อความแจ้ง ---------- */
.vhs .msg { border-radius: 4px; }
.vhs .msg.err { background: var(--t-bad-bg); color: var(--t-bad); border: 1px solid rgba(248, 113, 113, .35); }
.vhs .msg.ok { background: var(--t-ok-bg); color: var(--t-ok); border: 1px solid rgba(74, 222, 128, .3); }
.vhs .msg.ok a:not(.btn), .vhs .msg.err a:not(.btn) { color: inherit; text-decoration: underline; }
.vhs .msg b, .vhs .msg strong { color: #fff; }

/* ---------- 7) ป้าย/แท็บ/ตาราง ---------- */
.vhs .badge, .vhs .chip, .vhs .tagx, .vhs .tab-count { border-radius: 999px; }
.vhs .cat-update, .vhs .badge.cat-update { background: var(--t-warn-bg); color: var(--t-warn); }
.vhs .cat-balance, .vhs .badge.cat-balance { background: var(--t-blue-bg); color: var(--t-blue); }
.vhs .cat-event, .vhs .badge.cat-event { background: var(--t-bad-bg); color: var(--t-bad); }
.vhs .cat-notice, .vhs .badge.cat-notice { background: var(--t-neu-bg); color: var(--t-neu); }
.vhs .badge.patch { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #1a1206; }
.vhs .chip.on, .vhs .c-ok, .vhs .t-easy, .vhs .eco-chip.exp, .vhs .st-4 { background: var(--t-ok-bg); color: var(--t-ok); }
.vhs .chip.off, .vhs .c-common, .vhs .t-none, .vhs .eco-chip, .vhs .st-3 { background: var(--t-neu-bg); color: var(--t-neu); }
.vhs .chip.warn, .vhs .t-vhard, .vhs .st-1 { background: var(--t-bad-bg); color: var(--t-bad); }
.vhs .c-rare, .vhs .t-mid, .vhs .eco-chip.elite { background: var(--t-blue-bg); color: var(--t-blue); }
.vhs .c-special { background: var(--t-pur-bg); color: var(--t-pur); }
.vhs .c-slot, .vhs .t-hard, .vhs .st-5 { background: var(--t-warn-bg); color: var(--t-warn); }
.vhs .t-boss, .vhs .eco-chip.alpha, .vhs .st-2 { background: var(--t-org-bg); color: var(--t-org); }
.vhs .tagx { background: var(--t-bad-bg); color: var(--t-bad); }
.vhs .tab-count { background: rgba(255, 255, 255, .08); color: var(--muted); }

.vhs .tabs { border-color: var(--panel-line); }
.vhs .tabs a { color: var(--muted); background: transparent; border-color: var(--panel-line); }
.vhs .tabs a:hover { background: var(--hover); color: var(--gold-hi); }
.vhs .tabs a.active, .vhs .tabs a.on { background: linear-gradient(180deg, #fde68a, #fbbf24 50%, #b45309); color: #1a1206; border-color: #fcd34d; }
.vhs .tabs a.active .tab-count, .vhs .tabs a.on .tab-count { background: rgba(0, 0, 0, .2); color: #1a1206; }
.vhs .pager a, .vhs .pager span { color: var(--muted); border-color: var(--panel-line); background: transparent; }
.vhs .pager .on { background: var(--gold); color: #1a1206; border-color: var(--gold); }

.vhs .table-wrap { background: var(--surface); border: 1px solid var(--panel-line); border-radius: 6px; }
.vhs table.rank, .vhs .rt, .vhs .album { color: var(--text); background: transparent; }
.vhs table.rank thead th, .vhs .rt thead th, .vhs .album thead th { background: rgba(251, 191, 36, .07); color: var(--gold); border-color: var(--panel-line); font-weight: 500; }
.vhs table.rank td, .vhs .rt td, .vhs .album td { border-color: var(--soft-line); }
.vhs table.rank tbody tr:nth-child(even), .vhs .rt tbody tr:nth-child(even), .vhs .album tbody tr:nth-child(even) { background: var(--surface-2); }
.vhs table.rank tbody tr:hover, .vhs .rt tbody tr:hover, .vhs .album tbody tr:hover { background: var(--hover); }
.vhs .rankno.g1, .vhs .rankno.g2, .vhs .rankno.g3 { color: #1a1206; }
.vhs .rankno.g1 { background-image: radial-gradient(circle 15px at 50% 50%, #fde68a, #f59e0b 70%, transparent 72%); }
.vhs .rankno.g2 { background-image: radial-gradient(circle 15px at 50% 50%, #f4f4f5, #a1a1aa 70%, transparent 72%); }
.vhs .rankno.g3 { background-image: radial-gradient(circle 15px at 50% 50%, #fdba74, #b45309 70%, transparent 72%); }
.vhs table.rank td.rankno.g2, .vhs .nl-fame-list .top2 b, .vhs .nl-podium li:nth-child(2) .place { color: #1a1206; }
.vhs .nl-podium li:nth-child(2) .place { color: #d4d4d8; }
.vhs .nl-podium li:first-child { background: linear-gradient(180deg, rgba(251, 191, 36, .16), rgba(12, 12, 18, .92)); border-color: rgba(251, 191, 36, .55); }
.vhs .nl-podium .place { color: var(--gold); font-family: 'Cinzel', serif; }
.vhs .nl-podium strong { color: #fff; }
.vhs .nl-podium small, .vhs .nl-table-note { color: var(--muted); }

/* ---------- 8) หน้าเข้าสู่ระบบ / สมัคร ---------- */
.vhs .auth-split { overflow: hidden; }
.vhs .auth-art { background: radial-gradient(circle at 50% 38%, rgba(251, 191, 36, .18), transparent 62%), linear-gradient(180deg, #1b1420, #0d0b12); border-color: var(--panel-line); }
.vhs .auth-art-copy h2 { color: #fff; }
.vhs .auth-art-copy p, .vhs .auth-art-list, .vhs .auth-lead, .vhs .auth-switch { color: var(--muted); }
.vhs .auth-art-copy .overline, .vhs .auth-form .overline { color: var(--gold); }
.vhs .auth-art-list li::marker { color: var(--gold); }
.vhs .auth-form { background: transparent; }

/* ---------- 9) ดาวน์โหลด / ขั้นตอน ---------- */
.vhs .nl-choice.primary { background: linear-gradient(180deg, rgba(251, 191, 36, .1), rgba(12, 12, 18, .92)); border-color: rgba(251, 191, 36, .5); }
.vhs .choice-num { color: var(--gold); }
.vhs .nl-choice li { color: var(--text-dim); }
.vhs .nl-unready, .vhs .dl-note, .vhs .dl-note.is-patch { background: var(--t-warn-bg); color: var(--t-warn); border-color: rgba(251, 191, 36, .3); }
.vhs .nl-help { background: var(--t-ok-bg); color: var(--t-ok); border-color: rgba(74, 222, 128, .25); }
.vhs .nl-help strong, .vhs .nl-help a { color: var(--t-ok); }
.vhs .nl-band, .vhs .nl-band-world, .vhs .nl-band-paper { background: rgba(255, 255, 255, .025); border-color: var(--panel-line); }
.vhs .nl-phone, .vhs .tp-login-first { background: var(--t-warn-bg); border: 1px solid rgba(251, 191, 36, .3); color: var(--text); }
.vhs .nl-phone b, .vhs .tp-login-first b { color: var(--gold); }
.vhs .nl-phone p, .vhs .tp-login-first p { color: var(--text-dim); }
.vhs .nl-drive-note, .vhs .tp-before { color: var(--text-dim); }
.vhs .nl-drive-note svg, .vhs .tp-before li::marker { color: var(--gold); }
.vhs .tp-before b { color: #fff; }
.vhs .nl-steps li, .vhs .nl-step { border-color: var(--panel-line); }
.vhs .nl-flow li { background: var(--surface-2); border: 1px solid var(--panel-line); color: var(--text); }
.vhs .step-no { background: linear-gradient(180deg, #fde68a, #b45309); color: #1a1206; }
.vhs .step-title { color: #fff; }

/* ---------- 10) ข่าว ---------- */
.vhs .date-badge, .vhs .nl-lead-news .date-badge { background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3); color: var(--text); }
.vhs .date-badge b { color: var(--gold); }
.vhs .news-item { color: var(--text); }
.vhs .ni-title, .vhs .news-item h2, .vhs .news-item h3 { color: #fff; }
.vhs .news-body, .vhs .news-meta { color: var(--text-dim); }
.vhs .nl-lead-news { border-color: rgba(251, 191, 36, .55); }
.vhs .nl-news-count { color: var(--muted); }

/* ---------- 11) บัญชี / ดึงตัวละคร ---------- */
.vhs .nl-char .avatar { background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .25); }
.vhs .nl-char-foot { border-color: var(--soft-line); color: var(--muted); }
.vhs .nl-shortcut { color: var(--text); }
.vhs .nl-shortcut:hover { border-color: var(--gold); color: var(--gold-hi); }
.vhs .rescue-item:has(input:checked) { background: linear-gradient(180deg, rgba(251, 191, 36, .16), rgba(12, 12, 18, .92)); border-color: var(--gold); }
.vhs .rescue-item.off { background: rgba(255, 255, 255, .03); opacity: .6; }
.vhs .rescue-warn { background: var(--t-bad-bg); color: var(--t-bad); border-color: rgba(248, 113, 113, .3); }
.vhs .rescue-name { color: #fff; }
.vhs .rescue-meta, .vhs .rescue-xy, .vhs .rescue-note { color: var(--muted); }

/* ---------- 12) เติมเงิน ---------- */
.vhs .amt { background: var(--surface-2); border-color: var(--panel-line); color: var(--text); }
.vhs .amt:hover { background: var(--hover); border-color: var(--gold); }
.vhs .amt.on, .vhs .amt:has(input:checked) { background: rgba(251, 191, 36, .14); border-color: var(--gold); color: var(--gold); }
.vhs .topup-sum { background: var(--t-warn-bg); border-color: rgba(251, 191, 36, .35); color: var(--text); }
.vhs .tp-badge.wait { background: var(--t-warn-bg); color: var(--t-warn); }
.vhs .tp-badge.ok { background: var(--t-ok-bg); color: var(--t-ok); }
.vhs .tp-badge.bad { background: var(--t-bad-bg); color: var(--t-bad); }
.vhs .tp-head { background: rgba(251, 191, 36, .06); border-color: var(--panel-line); color: #fff; }
.vhs .tp-slip, .vhs .tp-slip img { background: rgba(255, 255, 255, .05); }
.vhs .tp-last, .vhs .tp-promo, .vhs .tp-transfer { background: var(--surface-2); border-color: var(--panel-line); }
.vhs .qr-box { background: var(--surface-2); border: 1px solid var(--panel-line); border-radius: 8px; color: var(--text-dim); }
.vhs .qr-box svg { background: #fff; padding: 10px; border-radius: 6px; }   /* QR ต้องดำบนขาวให้แอปธนาคารสแกนได้ */
.vhs .qr-cap { color: var(--muted); }

/* ---------- 13) ทีมงาน / เศรษฐกิจ ---------- */
.vhs .adm-row { background: var(--surface-2); border-color: var(--panel-line); }
.vhs .adm-copy { color: var(--gold); }
.vhs .adm-copy:hover, .vhs .adm-results div:hover { background: var(--hover); }
.vhs .adm-results { background: #13121a; border-color: var(--panel-line); }
.vhs .adm-tabs a, .vhs .adm-nav a { color: var(--muted); border-color: var(--panel-line); }
.vhs .adm-tabs a.on, .vhs .adm-nav a.on, .vhs .adm-tabs a.active, .vhs .adm-nav a.active { color: #1a1206; background: var(--gold); border-color: var(--gold); }
.vhs .danger-zone { border-color: rgba(248, 113, 113, .4); }
.vhs .danger-zone .panel-title { background: var(--t-bad-bg); color: var(--t-bad); }
.vhs .danger-zone .panel-title svg.ico { color: #f87171; }
.vhs .danger-zone code { background: rgba(220, 38, 38, .15); }
.vhs .econ-bar, .vhs .eco-bar { background: rgba(255, 255, 255, .08); }
.vhs .econ-bar span, .vhs .eco-bar span { background: linear-gradient(90deg, #fbbf24, #dc2626); }
.vhs .econ-value { color: var(--gold); }
.vhs .econ-label, .vhs .econ-sub { color: var(--muted); }
.vhs .box.warn { background: var(--t-warn-bg); border-color: rgba(251, 191, 36, .35); }
.vhs .box.ok { background: var(--t-ok-bg); border-color: rgba(74, 222, 128, .3); }
.vhs .up { color: #fca5a5; }
.vhs .down { color: #86efac; }

/* ---------- 14) ระบบนิเวศ / ตู้สุ่ม / สัตว์เลี้ยง ---------- */
.vhs .eco-alert { background: var(--t-bad-bg); color: var(--t-bad); border-color: rgba(248, 113, 113, .35); }
.vhs .eco-alert b { color: #fff; }
.vhs .eco-alpha { background: var(--surface-2); border-color: var(--panel-line); }
.vhs .eco-alpha.on { background: var(--t-org-bg); border-color: rgba(253, 186, 116, .4); }
.vhs .eco-alpha b, .vhs .alpha-card b { color: var(--t-org); }
.vhs .eco-alpha em, .vhs .alpha-card em { color: var(--t-bad); }
.vhs .alpha-pic, .vhs .gc-pic, .vhs .pet-pic { background: radial-gradient(ellipse at 50% 85%, rgba(251, 191, 36, .14), rgba(255, 255, 255, .03) 70%); }
.vhs .gc.t-special { background: linear-gradient(180deg, rgba(168, 85, 247, .14), rgba(12, 12, 18, .92)); border-color: rgba(216, 180, 254, .35); }
.vhs .gc-name, .vhs .pet-name { color: #fff; }
.vhs .gc-jump a, .vhs .gc-bar button, .vhs .pet-bar button { color: var(--muted); background: transparent; border-color: var(--panel-line); }
.vhs .gc-jump a:hover, .vhs .gc-bar button:hover, .vhs .pet-bar button:hover { background: var(--hover); color: var(--gold-hi); }
.vhs .gc-bar button.on, .vhs .pet-bar button.on, .vhs .gc-jump a.on { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.vhs .pet.is-boss { background: linear-gradient(180deg, rgba(249, 115, 22, .14), rgba(12, 12, 18, .92)); border-color: rgba(253, 186, 116, .35); }
.vhs .pet.is-none { background: rgba(255, 255, 255, .03); }
.vhs .pet-chip { background: var(--t-neu-bg); color: var(--t-neu); }

/* ---------- 15) หน้าแรกเก่าที่ยังมีคลาสค้างในหน้าอื่น ---------- */
.vhs .nl-feature-art { background: linear-gradient(180deg, #1b1420, #0d0b12); }
.vhs .nl-feature-art::after { background: rgba(251, 191, 36, .2); }
.vhs .nl-mini-all { background: rgba(251, 191, 36, .06); }
.vhs .nl-world.pink, .vhs .nl-world.green { background: var(--surface-2); }
.vhs .nl-anchor { color: var(--gold); }
.vhs .rules li, .vhs .contact-lead { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) { .vhs .page-head { background-attachment: scroll; } }

/* ---------- 16) แถบสีกรมท่าเข้มของธีมสมุดผจญภัย (#254966) → แดงเข้ม-ทอง ---------- */
.vhs .subnav a.on { background: rgba(251, 191, 36, .12); color: var(--gold); }
.vhs .nl-lead-news, .vhs .nl-feature, .vhs .nl-cta {
  background: linear-gradient(120deg, rgba(127, 29, 29, .4), rgba(20, 16, 12, .92) 65%); border: 1px solid rgba(251, 191, 36, .45); color: var(--text);
}
.vhs .nl-lead-news h2, .vhs .nl-feature h2, .vhs .nl-cta h2 { color: #fff; }
.vhs .nl-lead-news p, .vhs .nl-feature p, .vhs .nl-cta p { color: var(--text-dim); }
.vhs .nl-lead-news .eyebrow, .vhs .nl-lead-news .link-more { color: var(--gold); }
.vhs .nl-fame-card h3 { background: rgba(251, 191, 36, .08); color: var(--gold); border-bottom: 1px solid var(--panel-line); }
.vhs .nl-flow li b, .vhs .step-title .step-no, .vhs .nl-step > b { background: linear-gradient(180deg, #fde68a, #b45309); color: #1a1206; }
.vhs .feat .ico svg.ico { color: inherit; }
.vhs .stat, .vhs .ss-card, .vhs .news-card { background: var(--surface); border-color: var(--panel-line); }
.vhs summary { color: var(--text); }
.vhs summary:hover { color: var(--gold-hi); }

/* ---------- 17) จุดที่ธีมเดิมใช้ --plum เป็นสีตัวอักษร/เส้น (ตัวแปรนี้เป็นสีพื้นเข้มในธีมใหม่) ---------- */
.vhs .gc details summary { color: var(--gold); }
.vhs .stat .num { color: var(--gold); }
.vhs .nl-anchor a { color: var(--text); border-color: var(--panel-line); background: transparent; }
.vhs .nl-anchor a:hover { color: var(--gold-hi); border-color: var(--gold); background: var(--hover); }
.vhs .gc-jump a { border-color: var(--panel-line); }
.vhs .amt { border-color: var(--panel-line); }
.vhs .nl-shortcut { border-color: var(--panel-line); }