/* ===== 5 giao diện Ngày Nhà giáo Việt Nam 20/11 ===== */
:root[data-theme="tuoi-sang"] {
  --bg:#FBF6EA; --surface:#FFFDF7; --ink:#1E2B22; --muted:#4A5A4E; --accent:#3F7D3A; --on-accent:#FFFFFF;
  --accent-2:#E8B04B; --accent-3:#F3C6C2; --line:#D9CFB8; --frame:#FFFFFF;
  --shadow:0 18px 40px -18px rgba(30,43,34,.45); --radius:14px; --display-weight:800;
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-accent:"Playfair Display", Georgia, serif;
  --bg-pattern:radial-gradient(rgba(63,125,58,.07) 1px, transparent 1.4px) 0 0/22px 22px;
}
:root[data-theme="bang-phan"] {
  --bg:#1F3B2D; --surface:#274A39; --ink:#F4F1E6; --muted:#C9D6CC; --accent:#F6E27A; --on-accent:#1F3B2D;
  --accent-2:#F3A9B9; --accent-3:#9FD3E6; --line:rgba(244,241,230,.28); --frame:#6B4423;
  --shadow:0 14px 30px -12px rgba(0,0,0,.65); --radius:6px; --display-weight:400;
  --font-display:"Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  --font-body:"Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-accent:"Patrick Hand", "Comic Sans MS", cursive;
  --bg-pattern:radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.06), transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(255,255,255,.05), transparent 45%);
}
:root[data-theme="hoa-tri-an"] {
  --bg:#FFF4F2; --surface:#FFFFFF; --ink:#3A1F25; --muted:#6B4A50; --accent:#B3263E; --on-accent:#FFFFFF;
  --accent-2:#F2A541; --accent-3:#F7B6C2; --line:#F0CFD3; --frame:#FFFFFF;
  --shadow:0 22px 44px -20px rgba(179,38,62,.45); --radius:22px; --display-weight:700;
  --font-display:"Dancing Script", "Brush Script MT", "Segoe Script", cursive;
  --font-body:"Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-accent:"Dancing Script", "Brush Script MT", cursive;
  --bg-pattern:radial-gradient(circle at 10% 0%, rgba(247,182,194,.45), transparent 35%), radial-gradient(circle at 100% 30%, rgba(242,165,65,.18), transparent 30%);
}
:root[data-theme="trang-vo"] {
  --bg:#FDFDF8; --surface:#FFFFFF; --ink:#1D2B4F; --muted:#4B5675; --accent:#1F4FB5; --on-accent:#FFFFFF;
  --accent-2:#E35D5D; --accent-3:#CFE0F2; --line:#CFE0F2; --frame:#FFFFFF;
  --shadow:3px 4px 0 rgba(29,43,79,.18); --radius:4px; --display-weight:400;
  --font-display:"Pangolin", "Comic Sans MS", "Segoe Print", cursive;
  --font-body:"Nunito", "Segoe UI", Arial, sans-serif;
  --font-accent:"Pangolin", "Comic Sans MS", cursive;
  --bg-pattern:linear-gradient(90deg, transparent 0 46px, #E35D5D 46px 48px, transparent 48px), repeating-linear-gradient(to bottom, transparent 0 31px, #CFE0F2 31px 32px);
}
:root[data-theme="con-do"] {
  --bg:#EAF5F4; --surface:#FFFFFF; --ink:#0F2E3A; --muted:#3E5B66; --accent:#0E6E78; --on-accent:#FFFFFF;
  --accent-2:#F2B84B; --accent-3:#9ED8D2; --line:#BFE0DC; --frame:#FFFFFF;
  --shadow:0 20px 40px -20px rgba(14,110,120,.55); --radius:16px; --display-weight:600;
  --font-display:"Lora", Georgia, "Times New Roman", serif;
  --font-body:"Nunito", "Segoe UI", Arial, sans-serif;
  --font-accent:"Lora", Georgia, serif;
  --bg-pattern:linear-gradient(180deg, #EAF5F4 0%, #D3ECE9 100%);
}

html.theme-anim body, html.theme-anim .masthead, html.theme-anim .site-foot, html.theme-anim .frame {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

/* ---- Tạp chí tươi sáng ---- */
[data-theme="tuoi-sang"] .hero-title .em { font-style: italic; }

/* ---- Bảng phấn ---- */
[data-theme="bang-phan"] .masthead { border-bottom: 6px solid #6B4423; background: #1F3B2D; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
[data-theme="bang-phan"] .hero-title { letter-spacing: .01em; font-size: clamp(2.8rem, 8.4vw, 6.8rem); line-height: 1; }
[data-theme="bang-phan"] .hero-title .em { font-style: normal; color: var(--accent); text-decoration: underline wavy rgba(246,226,122,.7); text-underline-offset: .12em; text-decoration-thickness: 3px; }
[data-theme="bang-phan"] .frame { border: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), var(--shadow); padding: 10px; }
[data-theme="bang-phan"] .frame img { border-radius: 2px; }
[data-theme="bang-phan"] .btn { border-style: dashed; }
[data-theme="bang-phan"] .btn-primary { border-style: solid; }
[data-theme="bang-phan"] .site-foot { border-top: 6px solid #6B4423; }
[data-theme="bang-phan"] .toc-range, [data-theme="bang-phan"] .chapter-range { -webkit-text-stroke-width: 1.2px; }
[data-theme="bang-phan"] .chapter, [data-theme="bang-phan"] .toc { border-top-style: dashed; }
[data-theme="bang-phan"] .card strong, [data-theme="bang-phan"] .toc-title { font-weight: 400; font-size: 1.15em; }

/* ---- Hoa tri ân ---- */
[data-theme="hoa-tri-an"] .hero-title { font-size: clamp(3rem, 9.5vw, 7.6rem); line-height: .95; letter-spacing: 0; }
[data-theme="hoa-tri-an"] .hero-title .em { font-style: normal; }
[data-theme="hoa-tri-an"] .section-title, [data-theme="hoa-tri-an"] .chapter-title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
[data-theme="hoa-tri-an"] .masthead { border-radius: 0 0 26px 26px; border-bottom: 2px solid var(--accent-3); }
[data-theme="hoa-tri-an"] .brand-name { font-size: 1.35rem; }
[data-theme="hoa-tri-an"] .frame { border: 3px solid #fff; outline: 2px solid var(--accent-3); box-shadow: var(--shadow); }
[data-theme="hoa-tri-an"] .frame img { border-radius: 16px; }
[data-theme="hoa-tri-an"] .card strong, [data-theme="hoa-tri-an"] .toc-title { font-size: 1.3rem; line-height: 1.1; }
[data-theme="hoa-tri-an"] .hero-sub { font-style: normal; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
[data-theme="hoa-tri-an"] .hero-quote { border-left: 0; padding-left: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); text-align: left; }
[data-theme="hoa-tri-an"] .hero-quote::before { content: "\275D"; display: block; color: var(--accent-2); font-size: 2rem; line-height: 1; }
[data-theme="hoa-tri-an"] .btn { box-shadow: 0 8px 18px -10px rgba(179,38,62,.7); }
[data-theme="hoa-tri-an"] .site-foot { border-radius: 36px 36px 0 0; }
[data-theme="hoa-tri-an"] .kicker { font-family: var(--font-body); }

/* ---- Trang vở học trò ---- */
[data-theme="trang-vo"] .hero-title { font-size: clamp(2.6rem, 7.6vw, 6rem); line-height: 1.1; letter-spacing: 0; }
[data-theme="trang-vo"] .hero-title .em { font-style: normal; background: linear-gradient(transparent 62%, rgba(227,93,93,.35) 62% 92%, transparent 92%); }
[data-theme="trang-vo"] .masthead { border-bottom: 2px solid var(--accent-2); }
[data-theme="trang-vo"] .btn { border-radius: 4px; box-shadow: 3px 3px 0 rgba(29,43,79,.35); }
[data-theme="trang-vo"] .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(29,43,79,.35); }
[data-theme="trang-vo"] .frame { border: 1px solid #1D2B4F; padding: 8px 8px 14px; transform: rotate(-.4deg); }
[data-theme="trang-vo"] .frame img { border-radius: 0; }
[data-theme="trang-vo"] .card:hover .frame { box-shadow: 5px 6px 0 rgba(29,43,79,.25); }
[data-theme="trang-vo"] .toc-range, [data-theme="trang-vo"] .chapter-range { -webkit-text-stroke-width: 1.2px; }
[data-theme="trang-vo"] .hero-quote { border-left: 0; background: #FFF6BF; color: var(--ink); padding: 1rem 1.2rem; transform: rotate(-.7deg); box-shadow: 2px 3px 0 rgba(29,43,79,.2); }
[data-theme="trang-vo"] .card strong, [data-theme="trang-vo"] .toc-title { font-weight: 400; font-size: 1.15em; }
[data-theme="trang-vo"] .site-foot { border-top: 2px solid var(--accent-2); }
@media (min-width: 720px) {
  [data-theme="trang-vo"] { --bg-pattern: linear-gradient(90deg, transparent 0 70px, #E35D5D 70px 72px, transparent 72px), repeating-linear-gradient(to bottom, transparent 0 31px, #CFE0F2 31px 32px); }
}

/* ---- Con đò tri thức ---- */
[data-theme="con-do"] body { background-attachment: fixed; }
[data-theme="con-do"] .hero-title { letter-spacing: -.01em; font-size: clamp(2.5rem, 7.4vw, 6rem); line-height: 1.02; }
[data-theme="con-do"] .hero-title .em, [data-theme="con-do"] .hero-sub, [data-theme="con-do"] .hero-quote, [data-theme="con-do"] .chapter-title em { font-style: italic; }
[data-theme="con-do"] .masthead { border-bottom: 0; box-shadow: 0 10px 24px -16px rgba(14,110,120,.7); }
[data-theme="con-do"] .frame { border-radius: 16px 16px 16px 4px; box-shadow: var(--shadow); }
[data-theme="con-do"] .btn { border-radius: 12px 4px 12px 4px; }
[data-theme="con-do"] .site-foot { background: linear-gradient(180deg, transparent, rgba(14,110,120,.12)); padding-bottom: 130px; border-top: 0; }
[data-theme="con-do"] .toc, [data-theme="con-do"] .chapter { border-top-color: rgba(14,110,120,.25); }
[data-theme="con-do"] .card strong, [data-theme="con-do"] .toc-title { font-weight: 600; }

/* ===== Hoạ tiết (#decor) ===== */
#decor svg { display: block; }
#decor .pt { position: absolute; left: var(--x); top: -40px; will-change: transform, opacity; }
#decor .fx { position: absolute; }

/* tuoi-sang: lá mầm bay lên */
.d-tuoi-sang .pt { top: auto; bottom: -40px; width: 22px; height: 22px; background: var(--accent); opacity: .35; border-radius: 0 70% 0 70%; transform: scale(var(--s,1)); animation: d-up var(--t,22s) linear var(--d,0s) infinite; }
@keyframes d-up { 0% { transform: translate3d(0,0,0) rotate(0) scale(var(--s,1)); opacity: 0; } 10% { opacity: .35; } 90% { opacity: .3; } 100% { transform: translate3d(40px,-112vh,0) rotate(220deg) scale(var(--s,1)); opacity: 0; } }

/* bang-phan: bụi phấn */
.d-bang-phan .pt { width: var(--z,3px); height: var(--z,3px); border-radius: 50%; background: #F4F1E6; opacity: .5; animation: d-chalk var(--t,16s) linear var(--d,0s) infinite; }
@keyframes d-chalk { 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: .5; } 100% { transform: translate3d(var(--dx,30px),108vh,0); opacity: 0; } }
.d-bang-phan .fx { right: 3vw; bottom: 2vh; width: min(260px, 40vw); opacity: .9; }

/* hoa-tri-an: cánh hoa rơi */
.d-hoa-tri-an .pt { width: 16px; height: 16px; border-radius: 150% 0 150% 0; background: linear-gradient(135deg, var(--accent-3), var(--accent)); opacity: .75; animation: d-petal var(--t,14s) ease-in-out var(--d,0s) infinite; }
@keyframes d-petal {
  0% { transform: translate3d(0,0,0) rotate(0) scale(var(--s,1)); opacity: 0; }
  10% { opacity: .75; }
  35% { transform: translate3d(40px,35vh,0) rotate(120deg) scale(var(--s,1)); }
  65% { transform: translate3d(-30px,70vh,0) rotate(260deg) scale(var(--s,1)); }
  100% { transform: translate3d(30px,108vh,0) rotate(400deg) scale(var(--s,1)); opacity: 0; }
}
.d-hoa-tri-an .fx { left: 1vw; bottom: 0; width: min(150px, 30vw); }

/* trang-vo: máy bay giấy */
.d-trang-vo .pt { top: var(--y,20%); left: -90px; width: 64px; opacity: .85; animation: d-plane var(--t,24s) linear var(--d,0s) infinite; }
@keyframes d-plane { 0% { transform: translate3d(0,40px,0) rotate(-8deg); opacity: 0; } 8% { opacity: .85; } 92% { opacity: .85; } 100% { transform: translate3d(calc(100vw + 200px),-30vh,0) rotate(-8deg); opacity: 0; } }
.d-trang-vo .fx { right: 3vw; top: 90px; width: 70px; opacity: .5; }

/* con-do: sóng + con đò */
.d-con-do .wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 90px; animation: d-wave var(--t,18s) linear infinite; will-change: transform; }
.d-con-do .wave svg { width: 100%; height: 100%; }
@keyframes d-wave { to { transform: translate3d(-50%,0,0); } }
.d-con-do .boat { position: absolute; left: 14vw; bottom: 54px; width: 120px; animation: d-bob 5s ease-in-out infinite; will-change: transform; }
@keyframes d-bob { 0%,100% { transform: translateY(-6px) rotate(-3deg); } 50% { transform: translateY(6px) rotate(3deg); } }
@media (max-width: 719px) { .d-con-do .boat { width: 84px; left: 8vw; } .d-con-do .wave { height: 64px; } .d-con-do .boat { bottom: 40px; } }

@media (prefers-reduced-motion: reduce) {
  #decor *, .d-con-do .wave, .d-con-do .boat { animation: none !important; }
  #decor .pt { display: none; }
  html.theme-anim body, html.theme-anim .masthead, html.theme-anim .site-foot, html.theme-anim .frame { transition: none; }
}

/* Trình đọc luôn nền tối: bảng phấn đảo biến cục bộ */
[data-theme="bang-phan"] #reader { --bg: #F4F1E6; --ink: #14261D; }
[data-theme="bang-phan"] #reader::backdrop { background: #14261D; }

/* Biến sách theo theme (không dùng :root[data-theme] để check_contrast.py không bắt nhầm) */
[data-theme="bang-phan"] .book { --book-cover:#6B4423; --book-spine:#4A2E17; --book-paper:#F4F1E6; --book-edge:#E6E0CC; --book-edge-line:#B9B19A; --book-shadow:0 30px 60px -25px rgba(0,0,0,.7); }
[data-theme="hoa-tri-an"] .book { --book-cover:#B3263E; --book-spine:#8E1C30; --book-paper:#FFFFFF; --book-edge:#FBE6EA; --book-edge-line:#F0CFD3; --book-shadow:0 30px 60px -25px rgba(179,38,62,.5); }
[data-theme="trang-vo"] .book { --book-cover:#1F4FB5; --book-spine:#183E8F; --book-paper:#FFFFFF; --book-edge:#FFFFFF; --book-edge-line:#CFE0F2; --book-shadow:5px 7px 0 rgba(29,43,79,.22); }
[data-theme="con-do"] .book { --book-cover:#0E6E78; --book-spine:#0A535B; --book-paper:#FFFFFF; --book-edge:#EAF5F4; --book-edge-line:#BFE0DC; --book-shadow:0 30px 60px -25px rgba(14,110,120,.55); }

/* Hạt vệt con trỏ theo theme */
[data-theme="bang-phan"] .cur-p { background: #F4F1E6; width: 4px; height: 4px; left: -2px; top: -2px; }
[data-theme="hoa-tri-an"] .cur-p { background: linear-gradient(135deg, #F7B6C2, #B3263E); width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 150% 0 150% 0; }
[data-theme="trang-vo"] .cur-p { background: #1F4FB5; border-radius: 50% 50% 50% 0; }
[data-theme="con-do"] .cur-p { background: #0E6E78; width: 5px; height: 5px; left: -2.5px; top: -2.5px; }