@page { size: A4; margin: 15mm 14mm 16mm 14mm; }
:root{
  --paper:#FBF6E9;
  --paper-2:#F8F1E0;
  --surface:#F4ECD8;
  --surface-2:#EDE2CC;
  --ink:#2E2A22;
  --muted:#6B6354;
  --accent:#C7553A;
  --accent-dark:#A8432C;
  --accent-2:#3E7C82;
  --accent-3:#D9A441;
  --line:#D6C8A8;
  --line-2:#E6DCC2;
  --callout:#F6EFDC;
  --green:#4A6741;
  --teal:#3E7C82;
  --plum:#6a4a8a;
  --terra:#b56b3f;
  --gold:#B89568;
  --gold-deep:#8A6D3B;
  --red:#b13e3e;
  --shadow:0 18px 46px rgba(15,39,64,0.10);
}
*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(45,110,122,0.08), transparent 26%),
    radial-gradient(circle at 85% 14%, rgba(27,58,90,0.08), transparent 22%),
    linear-gradient(180deg, #F4ECD8 0%, #EFE5D0 100%);
  font-family: "Be Vietnam Pro", "Be Vietnam Pro","Noto Sans JP", "Segoe UI", sans-serif;
  line-height:1.75; font-size:0.9062rem;
  -webkit-font-smoothing:antialiased;
  padding:24px 12px;
  min-height:100vh;
}
.page-shell{
  max-width:1200px; margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:24px;
  padding:36px 32px 48px;
  box-shadow:var(--shadow);
}

/* ============ HEADER ============ */
.main-header{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.09), transparent 22%),
    radial-gradient(circle at 88% 20%, rgba(95,163,178,0.24), transparent 16%),
    linear-gradient(135deg, #A8432C 0%, #C7553A 36%, #8F3A26 100%);
  color:#fff; border-radius:22px; box-shadow:var(--shadow);
  padding:44px 40px 40px; margin-bottom:30px; text-align:center;
}
.main-header::after{
  content:"数学"; position:absolute; right:-12px; bottom:-60px;
  font-family:"Noto Serif JP","Yu Mincho",serif; font-weight:900;
  font-size:clamp(7rem, 14vw, 13rem); color:rgba(255,255,255,0.07); line-height:1; pointer-events:none;
}
.main-header .badge{
  display:inline-block; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.20);
  color:#F7E6C4; letter-spacing:0.18em; font-size:0.6875rem; font-weight:700; text-transform:uppercase;
}
.main-header h1{
  font-family:"Cormorant Garamond","Noto Serif JP",serif;
  font-weight:700; font-size:2.75rem; line-height:1.1; letter-spacing:-0.01em;
  margin:18px 0 8px; color:#fff;
}
.main-header h1 .jp{ color:var(--accent-3); font-family:"Noto Serif JP",serif; }
.main-header .subtitle{
  margin:14px auto 0; max-width:820px;
  color:rgba(255,255,255,0.88); font-size:0.9375rem; font-style:italic;
}
.main-header .author{
  margin-top:18px; font-size:0.75rem; color:rgba(255,255,255,0.65);
  letter-spacing:0.10em;
}

/* ============ TOC ============ */
.toc{
  background:linear-gradient(180deg, rgba(255,253,250,0.96), rgba(240,246,248,0.96));
  border:1px solid rgba(45,110,122,0.20);
  border-radius:22px; box-shadow:var(--shadow);
  padding:28px 30px; margin-bottom:32px;
}
.toc h2{
  margin:0 0 14px; padding:0;
  font-family:"Cormorant Garamond","Noto Serif JP",serif;
  font-size:1.75rem; line-height:1.1; color:var(--accent); font-weight:700;
  border:none;
}
.toc-chapter{ margin:18px 0; }
.toc-chapter-title{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; margin-bottom:10px;
  background:linear-gradient(90deg, #C7553A, #3E7C82);
  color:#fff; border-radius:12px;
  font-family:"Noto Serif JP",serif;
  font-weight:700; font-size:1rem;
}
.toc-chapter-title::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--accent-3); flex-shrink:0;
}
.toc-items{
  list-style:none; padding-left:8px; margin:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
}
.toc-items li{ margin:0; }
.toc-items a{
  display:block; padding:11px 14px;
  text-decoration:none; color:inherit;
  background:linear-gradient(180deg, #FBF6E9 0%, #F6EFDC 100%);
  border:1px solid var(--line-2); border-radius:12px;
  font-weight:600; color:var(--accent); font-size:0.8438rem;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  border-left:3px solid transparent;
}
.toc-items a:hover{
  transform:translateY(-2px);
  border-color:rgba(27,58,90,0.40); border-left-color:var(--accent-2);
  box-shadow:0 12px 24px rgba(15,39,64,0.06);
}

/* ============ CHAPTER CARD ============ */
.chapter-card{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #A8432C 0%, #C7553A 50%, #8F3A26 100%);
  border-radius:22px; box-shadow:var(--shadow);
  padding:36px 40px 30px; margin:60px 0 22px;
  color:#fff;
}
.chapter-card::after{
  content:""; position:absolute; right:-80px; top:-90px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(95,163,178,0.45) 0%, rgba(95,163,178,0.08) 48%, transparent 68%);
  pointer-events:none;
}
.chapter-card h2{
  margin:0 0 6px;
  font-family:"Noto Serif JP",serif; font-size:2rem; font-weight:700; color:#fff;
  letter-spacing:0; position:relative; z-index:1;
}
.chapter-card h2 .num{ color:var(--accent-3); margin-right:8px; }
.chapter-card .ch-sub{
  font-size:0.9062rem; color:rgba(255,255,255,0.85); font-style:italic;
  position:relative; z-index:1;
  max-width:780px;
}

/* ============ DOCUMENT (Lesson) ============ */
.document{
  background:var(--paper);
  border:1px solid rgba(45,110,122,0.16);
  border-radius:24px; box-shadow:var(--shadow);
  padding:0 0 32px; margin-bottom:36px; overflow:hidden;
}
.lesson-banner{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:24px 36px 22px;
  background:
    radial-gradient(circle at 88% 30%, rgba(95,163,178,0.28), transparent 26%),
    linear-gradient(135deg, #A8432C 0%, #C7553A 50%, #8F3A26 100%);
  color:#fff;
}
.lesson-banner .lesson-no{
  flex-shrink:0;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.9375rem;
  box-shadow:0 6px 14px rgba(45,110,122,0.30);
  font-family:"Cormorant Garamond",serif;
}
.lesson-banner h3{
  margin:0; flex:1;
  font-family:"Noto Serif JP",serif; font-size:1.375rem; font-weight:700; color:#fff;
}
.lesson-banner h3 .vn{
  display:block; margin-top:3px;
  font-family:"Be Vietnam Pro",sans-serif; font-size:0.8438rem; font-weight:500;
  color:rgba(255,255,255,0.85); font-style:italic;
}
.doc-body{ padding:24px 32px 12px; }

/* ============ SECTION HEAD ============ */
.section-head{
  position:relative; overflow:hidden;
  margin:22px 0 16px;
  padding:14px 22px 14px 20px;
  border-radius:18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 36%),
    linear-gradient(135deg, #154366 0%, #C7553A 52%, #3E7C82 100%);
  color:#fff; font-weight:700; font-size:1.031rem;
}
.section-head::before{
  content:attr(data-mark); margin-right:10px;
  font-size:1.125rem;
}
.subsection-head{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 10px;
  font-weight:700; color:var(--accent);
  font-size:0.9688rem;
}
.subsection-head::before{
  content:""; width:6px; height:22px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent-3));
}

/* ============ THEORY BOX (Định nghĩa & Định lý) ============ */
.theory-box{
  margin:14px 0 18px;
  background:linear-gradient(180deg, #fdfbf6, #f7f0e0);
  border:1px solid #e2d3b0;
  border-left:5px solid var(--gold-deep);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(138,109,34,0.06);
}
.theory-box .th-head{
  padding:10px 18px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
  color:#fff; font-weight:700; font-size:0.8438rem;
  letter-spacing:0.04em;
  display:flex; align-items:center; gap:8px;
}
.theory-box .th-head::before{ content:"📘"; }
.theory-box .th-body{ padding:14px 20px; color:#3a3220; line-height:1.8; }
.theory-box .th-body p{ margin:8px 0; }
.theory-box .th-body strong{ color:var(--accent-dark); }

/* DEFINITION variant - blue */
.def-box{
  margin:14px 0 18px;
  background:linear-gradient(180deg, #F8F2E4, #e6f1f4);
  border:1px solid #b9d6df;
  border-left:5px solid var(--accent);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(27,58,90,0.06);
}
.def-box .df-head{
  padding:10px 18px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:700; font-size:0.8438rem;
  letter-spacing:0.04em;
  display:flex; align-items:center; gap:8px;
}
.def-box .df-head::before{ content:"📐"; }
.def-box .df-body{ padding:14px 20px; color:#2E2A22; line-height:1.85; }
.def-box .df-body p{ margin:8px 0; }

/* ============ FORMULA BOX ============ */
.formula-box{
  margin:14px 0 18px;
  background:linear-gradient(180deg, #fff5f8, #faeaf0);
  border:1px solid #f0d8e2;
  border-left:5px solid #1B3A6B;
  border-radius:14px;
  overflow:hidden;
}
.formula-box .fm-head{
  padding:10px 18px;
  background:linear-gradient(90deg, #1B3A6B, #d96b95);
  color:#fff; font-weight:700; font-size:0.8438rem;
  letter-spacing:0.04em;
  display:flex; align-items:center; gap:8px;
}
.formula-box .fm-head::before{ content:"🧮"; }
.formula-box .fm-body{ padding:14px 22px; color:#3a1530; }
.formula-box .fm-body .formula{
  text-align:center; margin:10px 0;
  font-size:1rem;
}

/* ============ EXAMPLE BOX ============ */
.example-box{
  margin:18px 0 22px;
  background:#fff;
  border:1px solid #E2D6B8;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,39,64,0.06);
}
.example-box .ex-head{
  padding:12px 22px;
  background:linear-gradient(90deg, #3E7C82, #D9A441);
  color:#fff; font-weight:700; font-size:0.9062rem;
  display:flex; align-items:center; gap:10px;
}
.example-box .ex-head .ex-tag{
  background:rgba(255,255,255,0.22);
  padding:3px 10px; border-radius:999px;
  font-size:0.6875rem; letter-spacing:0.1em;
}
.example-box .ex-problem{
  padding:14px 22px;
  background:#FAF5E8;
  border-bottom:1px solid #E2D6B8;
  color:#2E2A22; line-height:1.8;
}
.example-box .ex-problem strong{ color:var(--accent); }
.example-box .ex-solution{ padding:14px 22px; }
.example-box .ex-solution .sol-label{
  display:inline-block; padding:3px 10px; border-radius:8px;
  background:var(--accent-2); color:#fff;
  font-size:0.7188rem; font-weight:700; letter-spacing:0.06em;
  margin-bottom:10px;
}
.example-box .ex-solution .step{
  margin:10px 0;
  padding:10px 14px;
  background:linear-gradient(180deg, #fbfdfe, #eef5f7);
  border-left:3px solid var(--accent-3);
  border-radius:0 10px 10px 0;
  line-height:1.8;
}
.example-box .ex-solution .step .step-no{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font-weight:700; font-size:0.7188rem;
  padding:2px 9px; border-radius:6px;
  margin-right:8px;
}
.example-box .ex-answer{
  margin:12px 0 0; padding:12px 18px;
  background:linear-gradient(180deg, #fffbef, #f8eed4);
  border-left:4px solid var(--gold-deep);
  border-radius:0 10px 10px 0;
  color:#5a4520;
  font-weight:600;
}
.example-box .ex-answer::before{
  content:"⇒ Đáp số: ";
  font-weight:800; color:var(--accent-dark);
}

/* ============ TIP & WARNING BOXES ============ */
.tip-box{
  margin:14px 0; padding:12px 18px;
  background:linear-gradient(180deg, #f0fbef, #dcf2da);
  border:1px solid #b6d9b2;
  border-left:5px solid var(--green);
  border-radius:0 12px 12px 0;
  color:#244a26; line-height:1.75;
}
.tip-box::before{
  content:"💡 Mẹo đạt điểm tuyệt đối:";
  display:block; font-weight:700; color:var(--green);
  margin-bottom:6px; font-size:0.8438rem; letter-spacing:0.03em;
}
.warning-box{
  margin:14px 0; padding:12px 18px;
  background:linear-gradient(180deg, #fdf4f4, #f8d9d9);
  border:1px solid #e8b3b3;
  border-left:5px solid var(--red);
  border-radius:0 12px 12px 0;
  color:#4a1a1a; line-height:1.75;
}
.warning-box::before{
  content:"⚠️ Lỗi thường gặp:";
  display:block; font-weight:700; color:var(--red);
  margin-bottom:6px; font-size:0.8438rem; letter-spacing:0.03em;
}
.note-box{
  margin:12px 0; padding:11px 16px;
  background:linear-gradient(180deg, #f8f4fb, #ebe0f0);
  border-left:4px solid var(--plum);
  border-radius:0 10px 10px 0;
  color:#3a2548; line-height:1.7; font-size:0.8438rem;
}
.note-box::before{
  content:"📌 Lưu ý: ";
  font-weight:700; color:var(--plum);
}

/* ============ EXERCISE BLOCK ============ */
.exercise-block{
  margin:28px 0 22px;
  background:linear-gradient(180deg, #FBF6E9 0%, #F0E6CE 100%);
  border:1px solid #D6C8A8;
  border-radius:18px; overflow:hidden;
  box-shadow:0 10px 24px rgba(15,39,64,0.05);
}
.exercise-block h4{
  margin:0;
  padding:16px 22px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff;
  font-family:"Noto Serif JP",serif;
  font-size:1.062rem; font-weight:700;
  border:none;
  display:flex; align-items:center; gap:10px;
}
.exercise-block h4::before{ content:"✏️"; }
.exercise-block ol{
  margin:0; padding:18px 22px 8px 44px;
}
.exercise-block .exercise-item{
  margin:14px 0; padding:14px;
  background:#fff;
  border:1px solid #e8dcc2;
  border-left:4px solid var(--gold);
  border-radius:8px;
}
.exercise-block .exercise-item .ex-q{
  font-weight:600; color:#3a3220;
  margin-bottom:6px;
}
.answer-btn{
  margin-top:10px; padding:7px 18px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; border:none; border-radius:999px;
  font-weight:700; font-size:0.7812rem; cursor:pointer;
  box-shadow:0 6px 14px rgba(27,58,90,0.18);
  transition:all 0.2s; font-family:inherit;
}
.answer-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(27,58,90,0.28);
}
.answer-box{
  display:none; margin:12px 0 0;
  padding:12px 16px;
  background:linear-gradient(180deg, #fffbef, #f8eed4);
  border:1px solid #d9bb88;
  border-left:4px solid var(--accent-2);
  border-radius:10px;
  font-size:0.8438rem; line-height:1.75; color:#5a4520;
}
.answer-box.show{ display:block; }
.answer-box strong{ color:var(--accent); }

/* ============ TABLES ============ */
table.math-table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:12px 0; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2);
  font-size:0.8438rem;
}
table.math-table thead{
  background:linear-gradient(180deg, #F4ECD8 0%, #E2D6B8 100%);
  color:var(--accent);
}
table.math-table thead th{
  padding:10px 12px; text-align:center;
  font-weight:800; font-size:0.7812rem; letter-spacing:0.02em;
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);
}
table.math-table thead th:last-child{ border-right:none; }
table.math-table tbody td{
  padding:10px 12px; vertical-align:middle; text-align:center;
  border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);
  background:#fff;
}
table.math-table tbody td:last-child{ border-right:none; }
table.math-table tbody tr:nth-child(even) td{ background:#FAF5E8; }

/* ============ FIGURE / SVG BOX ============ */
.figure-box{
  margin:18px auto; padding:14px;
  background:linear-gradient(180deg, #ffffff, #F8F2E4);
  border:1px solid #E2D6B8;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(15,39,64,0.05);
  text-align:center;
}
.figure-box svg{
  display:block; margin:0 auto;
  max-width:100%;
}
.figure-box .caption{
  display:block; margin-top:8px;
  color:var(--muted); font-style:italic; font-size:0.7812rem;
}
.figure-row{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
  margin:18px 0;
}
.figure-row .figure-box{ margin:0; }
@media (max-width:780px){
  .figure-row{ grid-template-columns:1fr; }
}

/* Inline highlight */
.hl{
  background:linear-gradient(180deg, transparent 60%, #ffe9a8 60%);
  padding:0 3px; font-weight:600;
}
.kw{ color:var(--accent); font-weight:700; }
.kw2{ color:var(--accent-2); font-weight:700; }

/* ============ FOOTER ============ */
.footer-card{
  margin-top:40px; padding:28px 30px;
  background:linear-gradient(135deg, #A8432C 0%, #C7553A 50%, #8F3A26 100%);
  color:rgba(255,255,255,0.88);
  border-radius:18px; text-align:center; font-size:0.8438rem;
  box-shadow:var(--shadow);
}
.footer-card strong{ color:var(--accent-3); }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .page-shell{ padding:22px 16px 36px; }
  .main-header{ padding:32px 24px 28px; }
  .main-header h1{ font-size:1.875rem; }
  .toc-items{ grid-template-columns:1fr; }
  .doc-body{ padding:20px 18px 10px; }
  .lesson-banner{ padding:22px 22px 20px; }
  .chapter-card{ padding:24px 26px 22px; }
}

/* ================= TRÍ LỮ APP LAYOUT (build thêm) ================= */
html{font-size:clamp(16px, 0.45vw + 10.4px, 26px)}
body{padding:0; font-size:.92rem;}
.layout{display:flex; min-height:100vh;}
.sidebar{
  width:18rem; position:fixed; inset:0 auto 0 0; z-index:60; overflow-y:auto;
  background:linear-gradient(180deg,#F8F1E0,#F4ECD8);
  border-right:1px solid #D6C8A8; padding:1rem .9rem 2rem;
  transition:transform .25s ease;
}
.sidebar .sb-brand{display:block; text-decoration:none; color:#2E2A22; padding:.4rem .5rem .8rem; border-bottom:2px solid #C7553A; margin-bottom:.7rem;}
.sidebar .sb-brand .t1{font-family:"Noto Serif JP",serif; font-weight:900; font-size:1.05rem; color:#C7553A;}
.sidebar .sb-brand .t2{font-size:.72rem; color:#6B6354; letter-spacing:.08em;}
.sb-item{display:flex; align-items:center; gap:.55rem; padding:.5rem .55rem; margin:.15rem 0;
  border-radius:.6rem; text-decoration:none; color:#2E2A22; font-size:.8rem; line-height:1.35;
  border:1px solid transparent;}
.sb-item:hover{background:#FBF6E9; border-color:#D6C8A8;}
.sb-item.active{background:#C7553A; color:#fff; font-weight:600;}
.sb-item.active .sb-pct{color:#F7E6C4;}
.sb-item .sb-jp{font-family:"Noto Serif JP",serif; font-size:.72rem; min-width:3.2em; color:#B89568; font-weight:700;}
.sb-item.active .sb-jp{color:#F2D9A8;}
.sb-item .sb-pct{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.66rem; color:#6B6354;}
.sb-bar{height:.22rem; border-radius:99px; background:#E6DCC2; margin:.15rem .55rem .5rem; overflow:hidden;}
.sb-bar i{display:block; height:100%; background:linear-gradient(90deg,#C7553A,#D9A441); width:0%;}
.main-wrap{margin-left:18rem; flex:1; min-width:0; padding:0 1rem 3rem;}
.page-shell{margin-top:1rem;}
/* topbar */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:.6rem;
  background:rgba(251,246,233,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid #D6C8A8; padding:.55rem .9rem; margin:0 -1rem;}
.topbar .tb-title{font-family:"Noto Serif JP",serif; font-weight:700; color:#A8432C;
  font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tb-spacer{flex:1;}
.tb-btn{border:1px solid #D6C8A8; background:#FBF6E9; color:#2E2A22; border-radius:.55rem;
  padding:.3rem .55rem; cursor:pointer; font-size:.78rem; line-height:1;}
.tb-btn:hover{border-color:#C7553A; color:#C7553A;}
.tb-search{position:relative;}
.tb-search input{border:1px solid #D6C8A8; background:#fff; border-radius:.55rem;
  padding:.34rem .6rem; font-size:.78rem; width:13rem; color:#2E2A22; font-family:inherit;}
.tb-search input:focus{outline:2px solid #D9A441;}
.search-pop{position:absolute; top:110%; right:0; width:24rem; max-width:80vw; max-height:60vh; overflow-y:auto;
  background:#FBF6E9; border:1px solid #D6C8A8; border-radius:.8rem; box-shadow:0 18px 40px rgba(46,42,34,.18);
  display:none; padding:.4rem;}
.search-pop.show{display:block;}
.search-pop a{display:block; padding:.45rem .6rem; border-radius:.5rem; text-decoration:none;
  color:#2E2A22; font-size:.78rem; line-height:1.4;}
.search-pop a:hover{background:#F4ECD8;}
.search-pop a .sk{display:inline-block; font-size:.62rem; color:#fff; background:#B89568;
  border-radius:.4rem; padding:.05rem .4rem; margin-right:.4rem; vertical-align:middle;}
.search-pop .nores{padding:.6rem; color:#6B6354; font-size:.75rem;}
/* hamburger + overlay mobile */
.tb-menu{display:none;}
.sb-overlay{display:none;}
@media (max-width:1100px){
  .sidebar{transform:translateX(-105%);}
  .sidebar.open{transform:none; box-shadow:0 0 60px rgba(0,0,0,.3);}
  .main-wrap{margin-left:0;}
  .tb-menu{display:inline-block;}
  .sb-overlay.show{display:block; position:fixed; inset:0; background:rgba(46,42,34,.35); z-index:55;}
  .tb-search input{width:8.5rem;}
}
/* progress chip trên topbar */
.tb-prog{font-family:"JetBrains Mono",monospace; font-size:.68rem; color:#6B6354; white-space:nowrap;}
.tb-prog b{color:#C7553A;}
/* nút tự chấm */
.grade-row{display:flex; gap:.5rem; align-items:center; padding:.6rem .9rem .8rem; flex-wrap:wrap;}
.grade-row .glabel{font-size:.72rem; color:#6B6354;}
.grade-btn{border:1.5px solid #D6C8A8; background:#FBF6E9; border-radius:.55rem; cursor:pointer;
  padding:.3rem .7rem; font-size:.76rem; font-family:inherit; color:#2E2A22;}
.grade-btn.ok.sel{background:#4A6741; border-color:#4A6741; color:#fff;}
.grade-btn.no.sel{background:#B13E3E; border-color:#B13E3E; color:#fff;}
.ex-state{display:inline-block; margin-left:.5rem; font-size:.72rem; vertical-align:middle;}
.ex-state.ok{color:#4A6741;} .ex-state.no{color:#B13E3E;}
/* đánh dấu đã học */
.doc-done{margin:1.2rem 0 .4rem; text-align:right;}
.doc-done button{border:1.5px solid #B89568; background:#FBF6E9; color:#8A6D3B; border-radius:.6rem;
  padding:.42rem .9rem; cursor:pointer; font-size:.78rem; font-family:inherit;}
.doc-done button.done{background:#4A6741; border-color:#4A6741; color:#fff;}
/* FAB */
.fab-wrap{position:fixed; right:1rem; bottom:1.1rem; z-index:70; display:flex; flex-direction:column; gap:.5rem;}
.fab{width:2.7rem; height:2.7rem; border-radius:50%; border:none; cursor:pointer; font-size:1.05rem;
  background:#C7553A; color:#fff; box-shadow:0 10px 24px rgba(46,42,34,.3); display:flex; align-items:center; justify-content:center;}
.fab.alt{background:#B89568;}
.fab:hover{filter:brightness(1.08);}
/* panel công thức */
.formula-panel{position:fixed; top:0; right:0; bottom:0; width:26rem; max-width:94vw; z-index:80;
  background:#FBF6E9; border-left:1px solid #D6C8A8; box-shadow:-20px 0 50px rgba(46,42,34,.25);
  transform:translateX(105%); transition:transform .25s ease; overflow-y:auto; padding:1rem 1.1rem 2rem;}
.formula-panel.open{transform:none;}
.formula-panel h3{font-family:"Noto Serif JP",serif; color:#A8432C; margin:.2rem 0 .6rem; font-size:1rem;
  border-bottom:2px solid #D9A441; padding-bottom:.4rem;}
.formula-panel h4{margin:.9rem 0 .3rem; font-size:.8rem; color:#8A6D3B;}
.formula-panel .fitem{background:#F8F1E0; border:1px solid #E6DCC2; border-radius:.6rem;
  padding:.45rem .65rem; margin:.3rem 0; font-size:.8rem; line-height:1.7;}
.fp-close{float:right; border:none; background:none; font-size:1.1rem; cursor:pointer; color:#6B6354;}
/* prev/next */
.pager{display:flex; gap:.8rem; margin:2rem 0 0;}
.pager a{flex:1; text-decoration:none; border:1.5px solid #D6C8A8; border-radius:.9rem; padding:.8rem 1rem;
  color:#2E2A22; background:#FBF6E9;}
.pager a:hover{border-color:#C7553A;}
.pager .dir{font-size:.68rem; color:#B89568; letter-spacing:.1em; text-transform:uppercase;}
.pager .pt{font-weight:600; font-size:.85rem; color:#A8432C;}
.pager a.next{text-align:right;}
/* ===== trang bìa ===== */
.cover-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1rem; margin:1.4rem 0;}
.cover-card{position:relative; display:block; text-decoration:none; color:#2E2A22; background:#FBF6E9;
  border:1px solid #D6C8A8; border-radius:1.1rem; padding:1.1rem 1.2rem 1.3rem; overflow:hidden;
  box-shadow:0 10px 26px rgba(46,42,34,.07); transition:transform .18s ease, box-shadow .18s ease;}
.cover-card:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(46,42,34,.14); border-color:#C7553A;}
.cover-card .cc-jp{position:absolute; right:.2rem; bottom:-1.6rem; font-family:"Noto Serif JP",serif;
  font-weight:900; font-size:4.6rem; color:rgba(184,149,104,.14); pointer-events:none; line-height:1;}
.cover-card .cc-no{font-family:"Cormorant Garamond",serif; font-weight:700; color:#C7553A; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;}
.cover-card h3{margin:.25rem 0 .4rem; font-family:"Noto Serif JP",serif; font-size:1rem; color:#2E2A22;}
.cover-card p{margin:0 0 .8rem; font-size:.74rem; color:#6B6354; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.cc-meta{display:flex; align-items:center; gap:.6rem; font-family:"JetBrains Mono",monospace; font-size:.66rem; color:#8A6D3B;}
.cc-bar{flex:1; height:.28rem; background:#E6DCC2; border-radius:99px; overflow:hidden;}
.cc-bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,#C7553A,#D9A441,#3E7C82);}
.cover-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.8rem; margin:1.2rem 0 0;}
.cover-stats .st{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:.9rem; padding:.7rem .5rem; text-align:center;}
.cover-stats .st b{display:block; font-family:"Cormorant Garamond",serif; font-size:1.6rem; line-height:1.1; color:#F2D9A8;}
.cover-stats .st span{font-size:.66rem; letter-spacing:.06em; color:#F7E6C4;}
.continue-box{margin:1.3rem 0 0; text-align:center;}
.continue-box a{display:inline-block; background:linear-gradient(90deg,#C7553A,#D9A441); color:#fff;
  text-decoration:none; font-weight:700; border-radius:99px; padding:.7rem 1.8rem; font-size:.88rem;
  box-shadow:0 12px 28px rgba(199,85,58,.35);}
/* ===== DARK MODE ===== */
html.dark{--paper:#211D15; --paper-2:#262217; --surface:#2B2619; --surface-2:#332D1E;
  --ink:#EDE4D0; --muted:#B5AA92; --line:#4A4234; --line-2:#3A3428; --callout:#262217;}
html.dark body{background:linear-gradient(180deg,#1A1712,#14110C); color:#EDE4D0;}
html.dark :is(.exercise-item,.ex-problem){background:#262217 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark .doc-body :is(td,th){background:#262217 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark .doc-body div[style*="background"]{background:#262217 !important; color:#E2D8C2;}
html.dark .hl{background:linear-gradient(transparent 55%, #5A4520 55%) !important; color:#F2D9A8;}
html.dark .kw{background:#3A3220 !important; color:#D9A441;}
/* dark: chữ thân hộp bị hardcode màu tối */
html.dark :is(.formula-box .fm-body,.def-box .df-body,.theory-box .th-body,
  .example-box .ex-problem,.exercise-block .exercise-item .ex-q,.exercise-block){color:#E2D8C2 !important;}
html.dark .exercise-block .exercise-item .ex-q{color:#F2D9A8 !important;}
/* dark: các khối nền sáng (gradient) còn sót */
html.dark .example-box .ex-solution .step{background:#2B2619 !important; border-left-color:#D9A441; color:#E2D8C2;}
html.dark :is(.example-box .ex-answer,.answer-box){background:#332D1E !important; border-color:#5A4B30 !important; color:#F2D9A8 !important;}
html.dark .tip-box{background:#202B1D !important; border-color:#3C5438 !important; color:#C8E0C2 !important;}
html.dark .warning-box{background:#2E1D1D !important; border-color:#5A3535 !important; color:#E8C4C4 !important;}
html.dark .note-box{background:#262031 !important; border-color:#4A3D5C !important; color:#D8CCE8 !important;}
html.dark .figure-box{background:#262217 !important; border-color:#4A4234 !important;}
html.dark .formula-box{background:#262217 !important; border-color:#4A4234 !important;}
html.dark table.math-table thead{background:#332D1E !important; color:#D9A441;}
html.dark table.math-table tbody tr:nth-child(even) td{background:#2B2619 !important;}
html.dark .page-shell{background:#211D15; border-color:#3A3428;}
html.dark .topbar{background:rgba(26,23,18,.92); border-color:#3A3428;}
html.dark .tb-btn,html.dark .tb-search input{background:#2B2619; color:#EDE4D0; border-color:#4A4234;}
html.dark .topbar .tb-title{color:#D9A441;}
html.dark .sidebar{background:linear-gradient(180deg,#211D15,#1A1712); border-color:#3A3428;}
html.dark .sb-item{color:#EDE4D0;}
html.dark .sb-item:hover{background:#2B2619; border-color:#4A4234;}
html.dark .sb-brand .t2{color:#B5AA92;}
html.dark .sb-bar{background:#3A3428;}
html.dark .search-pop{background:#211D15; border-color:#4A4234;}
html.dark .search-pop a{color:#EDE4D0;} html.dark .search-pop a:hover{background:#2B2619;}
html.dark :is(.def-box,.theory-box,.example-box,.note-box,.tip-box,.warning-box,.formula-box,
  .figure-box,.exercise-block,.chapter-card,.toc,.footer-card,.document){
  background:#262217 !important; border-color:#4A4234 !important; color:#EDE4D0;}
html.dark .answer-box{background:#2B2619 !important; border-color:#4A4234 !important; color:#EDE4D0;}
html.dark :is(.df-body,.th-body,.doc-body,.toc-items a,.ch-sub){color:#E2D8C2;}
html.dark .toc-items a{color:#E2D8C2;}
html.dark body, html.dark .doc-body{color:#E2D8C2;}
html.dark .section-head, html.dark .subsection-head{color:#D9A441;}
html.dark .pager a, html.dark .cover-card, html.dark .grade-btn:not(.sel), html.dark .doc-done button:not(.done){
  background:#262217; border-color:#4A4234; color:#EDE4D0;}
html.dark .cover-card p{color:#B5AA92;}
html.dark .formula-panel{background:#211D15; border-color:#4A4234;}
html.dark .formula-panel .fitem{background:#262217; border-color:#3A3428; color:#E2D8C2;}
html.dark mjx-container svg{color:#EDE4D0;}
@media print{.sidebar,.topbar,.fab-wrap,.formula-panel,.grade-row,.doc-done,.pager{display:none !important}.main-wrap{margin:0}}