/* Trang đọc sách "Mark ở vũ trụ khác": phủ lên CSS riêng của từng bài (bài gốc dùng biến --bg, --paper, --night...).
   Đổi sang nhận diện đã duyệt (navy #0F172A, kem #FFF7ED, cam hổ phách #FBBF24 → #EA580C), font của Mark học AI,
   bỏ bớt khoảng trắng. Thêm vào trang bởi scripts/tao_vu_tru_khac.py, áp cho mọi cuốn. */
:root {
  --bg: #FFF7ED; --paper: #FFFFFF; --ink: #0F172A; --muted: #5B5F6B; --rule: #F3DFC4; --grid: #FCEBD5;
  --night: #1E3A8A; --day: #EA580C; --rem: #0F766E;
  --cam: #EA580C; --vang: #FBBF24; --navy: #0F172A; --kem: #FFF7ED;
  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1120; --paper: #131C31; --ink: #F1F5F9; --muted: #A3ADBF; --rule: #24304A; --grid: #1B2640;
    --night: #93A6FF; --day: #FBBF24; --rem: #5EC8C2; --cam: #FBBF24;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1120; --paper: #131C31; --ink: #F1F5F9; --muted: #A3ADBF; --rule: #24304A; --grid: #1B2640;
  --night: #93A6FF; --day: #FBBF24; --rem: #5EC8C2; --cam: #FBBF24;
}

body { font-size: 1rem; line-height: 1.55; padding-block-end: 32px; }
.wrap { max-width: 64rem; }
a { color: var(--cam); }
.label { color: var(--cam); }

/* Đầu bài: nền lấy màu bìa từng cuốn (--bia-1, --bia-2, --bia-nhan do script đặt từ data/vu-tru-khac.json,
   mặc định là navy của thương hiệu), có sao, Mark áo len ở góc phải, thông tin sách thành chip ở cột phải */
header {
  --bia-1: #0F172A; --bia-2: #1E293B; --bia-nhan: #FBBF24; --le: max(16px, calc(50vw - 32rem));
  position: relative; margin-inline: calc(50% - 50vw); padding: 28px calc(var(--le) + 170px) 24px var(--le);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: 28px; row-gap: 8px; align-content: start;
  background: radial-gradient(1px 1px at 12% 30%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 70%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 18%, #fff7 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 82%, #fff5 50%, transparent 51%),
    radial-gradient(120% 140% at 85% 0%, var(--bia-2) 0%, var(--bia-1) 62%);
  color: #FFF7ED; border-bottom: 3px solid var(--bia-nhan);
}
header::after {
  content: ""; position: absolute; right: var(--le); bottom: 0; width: 150px; height: 170px;
  background: url("mark-doc-sach.svg") bottom right / contain no-repeat;
}
header > * { position: relative; z-index: 1; grid-column: 1; }
header .label, header .meta span { color: var(--bia-nhan); }
header h1 { font-size: clamp(2rem, 5vw, 3rem); color: #FFF7ED; }
header .sub { color: #FDE6C8; font-size: 1rem; }
header .draft { justify-self: start; border: 0; background: var(--bia-nhan); color: var(--bia-1); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
/* Thông tin sách: chip lấp chỗ trống bên phải tiêu đề */
header .meta { grid-column: 2; grid-row: 1 / span 5; align-self: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
header .meta div { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgb(255 255 255 / .08); border: 1px solid color-mix(in srgb, var(--bia-nhan) 45%, transparent); }
header .meta span { font-size: .66rem; }
header .meta b { color: #FFF7ED; font-size: .9rem; }
/* Hoạ tiết bìa: "trang" = trăng khuyết vàng (Why We Sleep), "but-chi" = dải bút chì vàng đầu tẩy hồng, "song" = dải sóng nước (Flow) */
body.bia-trang header::before { content: ""; position: absolute; top: 22px; right: calc(var(--le) + 150px); width: 46px; height: 46px; border-radius: 50%;
  box-shadow: 10px -6px 0 0 var(--bia-nhan); transform: rotate(-20deg); opacity: .9; }
body.bia-but-chi header { border-bottom: 0; }
body.bia-but-chi header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(90deg, #F2A7B8 0 40px, #C0C4CC 40px 52px, #F5C518 52px calc(100% - 28px), #E8C99A calc(100% - 28px) calc(100% - 10px), #333 calc(100% - 10px)); }
body.bia-song header { border-bottom: 0; }
body.bia-song header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 7 Q15 1 30 7 T60 7' fill='none' stroke='%2322D3EE' stroke-width='3'/%3E%3C/svg%3E") repeat-x center / 60px 14px, #0E7490; }
body.bia-hong-tam header::before { content: ""; position: absolute; top: 20px; right: calc(var(--le) + 150px); width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, #D32F2F 0 12%, #fff 12% 30%, #D32F2F 30% 48%, #fff 48% 66%, #D32F2F 66% 100%); box-shadow: 0 0 0 3px var(--bia-nhan); }
@media (max-width: 900px) {
  header { grid-template-columns: minmax(0, 1fr); padding-right: calc(var(--le) + 80px); }
  header .meta { grid-column: 1; grid-row: auto; margin-top: 4px; }
  header::after { width: 72px; height: 82px; top: 18px; bottom: auto; }
  body.bia-trang header::before { right: calc(var(--le) + 70px); width: 30px; height: 30px; }
  body.bia-hong-tam header::before { right: calc(var(--le) + 70px); width: 34px; height: 34px; }
}
@media (max-width: 640px) {
  header { padding-right: var(--le); padding-bottom: 20px; }
  header h1, header .sub, header .label, header .draft { max-width: calc(100% - 80px); }
  body.bia-hong-tam header::before { display: none; }
}

/* Mục lục: hàng chip dính trên cùng khi cuộn */
.toc {
  position: sticky; top: 48px; z-index: 5; margin-inline: calc(50% - 50vw); padding: 10px max(16px, calc(50vw - 32rem));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  flex-wrap: nowrap; overflow-x: auto; gap: 6px; border-bottom: 1px solid var(--rule); font-size: .88rem; scrollbar-width: none;
}
.toc a { white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); }
.toc a:hover { color: var(--cam); border-color: var(--cam); }

/* Bớt khoảng trắng giữa các phần */
section { padding-block: 24px 4px; gap: 12px; scroll-margin-top: 110px; }
h2 { font-size: 1.4rem; }
h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: middle;
  background: radial-gradient(circle at 35% 35%, #FBBF24, #EA580C); box-shadow: 0 0 0 3px color-mix(in srgb, #FBBF24 30%, transparent); }
.ecard, .flow .step, .part, figure, .fcol, .evi, .pm > div, details.more, .rule { border-radius: 12px; }
.ecard svg, .rule svg { color: var(--cam); }
.thesis { border-left-color: var(--cam); }
.bar i { background: linear-gradient(90deg, #FBBF24, #EA580C); }
details.more summary { color: var(--cam); }
footer { margin-top: 28px; }

/* Máy tính: hai cột, mục lục dính ở cột trái, mỗi phần là một thẻ trắng */
@media (min-width: 1000px) {
  .wrap { max-width: 72rem; display: grid; grid-template-columns: 13rem 1fr; column-gap: 32px; }
  header { grid-column: 1 / -1; --le: max(16px, calc(50vw - 36rem)); }
  .toc { grid-column: 1; grid-row: 2 / span 20; align-self: start; position: sticky; top: 64px; margin: 24px 0 0; padding: 14px;
    flex-direction: column; flex-wrap: nowrap; overflow: visible; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
  .toc::before { content: "Trong bài"; font: 600 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cam); padding: 0 4px 6px; }
  .toc a { border: 0; background: none; padding: 6px 10px; border-radius: 8px; }
  .toc a:hover { background: var(--grid); }
  section, footer { grid-column: 2; }
  section { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; margin-top: 16px; }
}
html[lang="en"] .toc::before { content: "In this article"; }

/* Tiến độ đọc: vạch màu nhấn của bìa ngay dưới thanh trên cùng, mục đang đọc sáng lên trong mục lục (assets/vu-tru-khac/doc.js) */
.vtk-tien-do { position: fixed; top: 48px; left: 0; right: 0; height: 3px; z-index: 20; pointer-events: none; background: rgb(15 23 42 / .12); }
.vtk-tien-do i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--vtk-nhan, #FBBF24), #EA580C); }
.toc a[aria-current] { background: var(--vtk-nhan, #FBBF24); border-color: var(--vtk-nhan, #FBBF24); color: #0F172A; font-weight: 600; }
@media (min-width: 1000px) {
  .toc a { position: relative; }
  .toc a[aria-current] { background: color-mix(in srgb, var(--vtk-nhan, #FBBF24) 22%, transparent); color: var(--ink); }
  .toc a[aria-current]::before { content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--vtk-nhan, #FBBF24); }
}
@media (prefers-reduced-motion: no-preference) { .vtk-tien-do i { transition: transform .1s linear; } .toc a { transition: background .2s, color .2s; } }