/* ═══════════════════════════════════════════════════════════
   Bún ở HANU · 学习角
   Bảng màu pastel Trung Hoa: đỏ – hồng – xanh – trắng
   ═══════════════════════════════════════════════════════════ */

/* ─── Font ─── */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/quicksand-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/quicksand-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Màu */
  --red:#E8556D;      --red-deep:#C93B55;   --red-soft:#F7C6CE;
  /* Nút bấm: nền hồng nhạt, chữ đen ấm (tương phản 6.5:1 — đạt WCAG AA) */
  --btn:#F19CAA;      --btn-hover:#EC8A9B;  --btn-ink:#3A2A2F;
  --pink:#FFE4EA;     --pink-lite:#FFF3F6;
  --green:#7FBFA9;    --green-deep:#549A82;  --green-soft:#D6EDE4; --green-lite:#EFF8F4;
  --blue:#9CC3DD;     --blue-soft:#E3F0F8;
  --gold:#E8C88A;     --gold-soft:#F7EBD3;
  --cream:#FFFBF5;    --paper:#FFFFFF;
  --ink:#3A3238;      --ink-soft:#6E626C;    --ink-faint:#9A8F98;
  --line:#F0E2E6;

  /* Hình khối */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 2px 8px rgba(200,120,140,.08);
  --sh-md:0 6px 22px rgba(200,120,140,.13);
  --sh-lg:0 14px 44px rgba(180,100,120,.18);

  --sidebar-w:266px;
  --toc-w:236px;
  --topbar-h:58px;

  /* Chữ */
  --font-ui:'Quicksand',ui-rounded,'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-han:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Noto Sans SC','Source Han Sans SC',var(--font-ui),sans-serif;
  --font-han-serif:'Songti SC','STSong','SimSun','Noto Serif SC','Source Han Serif SC',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Bắt buộc: nhiều class dưới đây đặt display (flex/grid/inline-flex) nên sẽ
   ghi đè display:none mặc định của thuộc tính [hidden]. Không có dòng này thì
   nút "Hiện đáp án", thanh công cụ… vẫn hiện dù đã set hidden=true. */
[hidden]{display:none!important}
body{
  margin:0;
  font-family:var(--font-ui),var(--font-han);
  font-size:16px;line-height:1.72;color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,228,234,.55), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(214,237,228,.5), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(227,240,248,.45), transparent 50%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
body.is-locked,body.no-scroll{overflow:hidden}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--red-deep);text-decoration-color:var(--red-soft);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:6px}

/* ═══════════════ CỔNG MẬT KHẨU ═══════════════ */
.gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 20% 15%, #FFE4EA 0%, transparent 45%),
    radial-gradient(circle at 82% 20%, #D6EDE4 0%, transparent 42%),
    radial-gradient(circle at 50% 92%, #E3F0F8 0%, transparent 48%),
    var(--cream);
}
.gate[hidden]{display:none}
.gate__lanterns{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-around;
  font-size:30px;pointer-events:none;opacity:.85}
.gate__lanterns span{animation:sway 4.5s ease-in-out infinite;transform-origin:top center}
.gate__lanterns span:nth-child(1){animation-delay:-.6s}
.gate__lanterns span:nth-child(2){animation-delay:-2.1s;font-size:38px}
.gate__lanterns span:nth-child(3){animation-delay:-3.4s}
@keyframes sway{0%,100%{transform:rotate(-7deg) translateY(-6px)}50%{transform:rotate(7deg) translateY(2px)}}

.gate__card{
  position:relative;width:min(400px,100%);padding:44px 30px 30px;text-align:center;
  background:var(--paper);border:1.5px solid var(--red-soft);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
}
.gate__card.shake{animation:shake .42s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

.seal{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(-6deg);
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--btn);color:var(--btn-ink);border-radius:14px;
  font-family:var(--font-han-serif);font-size:28px;font-weight:700;
  box-shadow:0 6px 16px rgba(241,156,170,.55);
}
.gate__title{margin:6px 0 2px;font-size:27px;font-weight:700;letter-spacing:.4px}
/* Biến tiêu đề cổng thành logo ảnh (chỉ ở trang nhập mật khẩu) */
.gate__title--logo{margin:0 0 4px;line-height:0}
.gate__logo{
  display:block;width:100%;max-width:270px;height:auto;margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(232,85,109,.16));
}
.gate__sub{margin:0 0 22px;color:var(--ink-soft);font-size:14px}
.gate__field{display:flex;gap:8px}
.gate__field input{
  flex:1;min-width:0;padding:13px 16px;font:inherit;font-size:19px;letter-spacing:5px;text-align:center;
  /* letter-spacing chèn khoảng trắng cả sau ký tự cuối, nên chuỗi căn giữa bị
     lệch trái 2.5px. Với text-align:center thì text-indent chỉ dịch phải một
     nửa giá trị của nó, nên phải đặt 5px mới bù đủ 2.5px — đừng sửa thành 2.5px. */
  text-indent:5px;
  color:var(--ink);background:var(--pink-lite);
  border:1.5px solid var(--red-soft);border-radius:var(--r-md);transition:.18s;
}
.gate__field input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(232,85,109,.13)}
.gate__btn{
  flex:0 0 52px;border:none;border-radius:var(--r-md);background:var(--btn);color:var(--btn-ink);
  font-size:21px;font-weight:700;transition:.18s;
}
.gate__btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
.gate__err{margin:14px 0 0;color:var(--red-deep);font-size:14px;font-weight:600}

/* ═══════════════ THANH TRÊN ═══════════════ */
.app[hidden]{display:none}
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;gap:6px;padding:0 12px;
  background:rgba(255,251,245,.9);backdrop-filter:blur(12px);
  border-bottom:1.5px solid var(--line);
}
.topbar__brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
/* Đèn lồng đung đưa như ở cổng mật khẩu. Dùng lại đúng @keyframes sway ở trên.
   Không cần display:inline-block: span này là flex item của .topbar__brand nên
   đã được blockify sẵn, transform mới ăn (transform không áp lên inline thường). */
.topbar__lantern{font-size:20px;animation:sway 4.5s ease-in-out infinite;transform-origin:top center}
.topbar__name{font-weight:700;font-size:17px}
.topbar__spacer{flex:1}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  background:transparent;border:none;border-radius:12px;color:var(--ink-soft);transition:.16s;
}
.icon-btn:hover{background:var(--pink);color:var(--red-deep)}

/* Dải mây 云纹 */
.cloud-band{
  height:9px;
  background:
    repeating-linear-gradient(90deg, var(--red-soft) 0 14px, transparent 14px 28px) 0 0/28px 3px no-repeat,
    linear-gradient(90deg,var(--red-soft),var(--gold),var(--green-soft),var(--blue-soft),var(--red-soft));
  opacity:.75;
}

/* ═══════════════ BỐ CỤC ═══════════════ */
.layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);align-items:start}

/* ─── Sidebar ─── */
.sidebar{
  position:sticky;top:calc(var(--topbar-h) + 9px);
  height:calc(100dvh - var(--topbar-h) - 9px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:18px 12px 28px;border-right:1.5px solid var(--line);
  background:rgba(255,255,255,.5);
}
.sidebar__head{display:none}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 16px}
.brand__icon{font-size:26px}
.brand__title{font-weight:700;font-size:16px;line-height:1.25}
.brand__sub{font-family:var(--font-han);font-size:12px;color:var(--ink-faint);letter-spacing:2px}

.nav__subject{margin-bottom:18px}
.nav__subject-head{
  display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:7px;
  border-radius:var(--r-md);background:var(--pink);border:1.5px solid var(--red-soft);
}
.nav__subject--green .nav__subject-head{background:var(--green-lite);border-color:var(--green-soft)}
.nav__subject--blue  .nav__subject-head{background:var(--blue-soft);border-color:var(--blue)}
.nav__subject--gold  .nav__subject-head{background:var(--gold-soft);border-color:var(--gold)}
.nav__subject-ico{font-size:19px}
.nav__subject-name{font-weight:700;font-size:14.5px;line-height:1.2}
.nav__subject-cn{font-family:var(--font-han);font-size:11.5px;color:var(--ink-faint);letter-spacing:1.5px}

.nav__group{margin:12px 0 6px}
.nav__group-label{
  display:flex;align-items:center;gap:7px;padding:2px 11px 6px;
  font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-faint);
  cursor:pointer;list-style:none;user-select:none;
}
.nav__group-label:hover{color:var(--ink)}
.nav__group-label::-webkit-details-marker{display:none}
.nav__group-label::after{content:"";flex:1;height:1px;background:var(--line)}
.nav__group-label::before{content:"▾";order:2;font-size:10px;transition:transform .2s;color:var(--ink-faint)}
.nav__group-label>span{order:0}
.nav__group-label::after{order:1}
.nav__group[open]>.nav__group-label::before{transform:rotate(180deg)}
.nav__group-body{padding-top:2px}

.nav__link{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;text-decoration:none;
  padding:8px 11px;margin-bottom:2px;border:none;background:transparent;
  border-radius:11px;color:var(--ink-soft);font-size:14px;line-height:1.35;transition:.14s;
}
.nav__link:hover{background:var(--pink-lite);color:var(--ink)}
.nav__link.is-active{background:var(--btn);color:var(--btn-ink);font-weight:700;box-shadow:0 3px 10px rgba(241,156,170,.45)}
.nav__link.is-active:hover{background:var(--btn-hover);color:var(--btn-ink)}
.nav__link.is-active .nav__link-cn{color:rgba(58,42,47,.85)}
.nav__link-ico{font-size:15px;flex:none}
.nav__link-txt{min-width:0}
.nav__link-cn{display:block;font-family:var(--font-han);font-size:11.5px;color:var(--ink-faint);letter-spacing:.6px}
.nav__link.is-read::after{content:"✓";margin-left:auto;color:var(--green-deep);font-weight:700;font-size:13px}
.nav__link.is-active.is-read::after{color:var(--btn-ink)}

.sidebar__foot{padding:16px 12px 0;font-size:11.5px;color:var(--ink-faint);text-align:center;line-height:1.6}

.scrim{display:none}

/* Ẩn sidebar (desktop) để nhường diện tích cho nội dung chính — bật/tắt bằng nút ☰.
   Mất cột sidebar bên trái mà vẫn giữ cột mục lục rỗng bên phải (.has-toc chỉ có
   khi mục lục thật sự có nội dung — xem setTocHidden() trong app.js) thì nội dung
   dồn hẳn sang trái, nhìn lệch — nên bỏ luôn cột đó khi không có mục lục. */
body.sidebar-collapsed .sidebar{display:none}
body.sidebar-collapsed .layout{grid-template-columns:minmax(0,1fr)}
body.sidebar-collapsed.has-toc .layout{grid-template-columns:minmax(0,1fr) var(--toc-w)}

/* ─── Nội dung ─── */
.main{min-width:0;padding:22px 30px 90px}
.doc-wrap{max-width:860px;margin:0 auto}

.doc-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  background:var(--paper);border:1.5px solid var(--red-soft);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:.16s;box-shadow:var(--sh-sm);
}
.chip:hover{border-color:var(--red);color:var(--red-deep);transform:translateY(-1px)}
.chip.is-on{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.chip.is-on:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.chip--ghost{background:transparent;box-shadow:none;border-style:dashed}
.chip__ico{font-size:14px}

/* Menu chọn chế độ khi in — chỉ hiện khi bài có bản song ngữ ghép được (xem
   btn-print trong app.js). "Song song" (2 cột) không có trong danh sách vì
   in ra giấy hai cột cạnh nhau vừa hẹp vừa khó đọc. */
.print-ctl{position:relative;display:inline-flex}
.print-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:5;min-width:150px;
  padding:6px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-md);
}
.print-menu[hidden]{display:none}
.print-menu button{
  display:block;width:100%;text-align:left;padding:8px 10px;border:none;
  background:transparent;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-soft);
}
.print-menu button:hover{background:var(--pink-lite);color:var(--ink)}

/* Bộ chọn chế độ song ngữ */
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--paper);
  border:1.5px solid var(--red-soft);border-radius:999px;box-shadow:var(--sh-sm)}
.seg__btn{padding:5px 12px;border:none;background:transparent;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink-soft);transition:.16s}
.seg__btn:hover{color:var(--red-deep)}
.seg__btn.is-on{background:var(--btn);color:var(--btn-ink)}
.seg__btn[data-bimode="cn"]{font-family:var(--font-han)}

.toc-mobile{display:none;margin-bottom:18px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.toc-mobile>summary{padding:11px 16px;font-weight:700;font-size:14px;cursor:pointer;list-style:none;background:var(--pink-lite)}
.toc-mobile>summary::-webkit-details-marker{display:none}
.toc-mobile>summary::after{content:"▾";float:right;transition:.2s}
.toc-mobile[open]>summary::after{transform:rotate(180deg)}
.toc-mobile>div{padding:8px 8px 12px;max-height:52vh;overflow-y:auto}

/* ─── Mục lục phải ─── */
.toc{
  position:sticky;top:calc(var(--topbar-h) + 9px);
  max-height:calc(100dvh - var(--topbar-h) - 9px);overflow-y:auto;overscroll-behavior:contain;
  padding:22px 16px 40px 4px;
}
.toc__title{font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px;padding-left:11px}
/* Mục lục desktop (.toc) và mục lục mobile (.toc-mobile) dùng chung một khối HTML
   do buildHeadings() sinh ra, nên style phải phủ cả hai — chỉ gắn vào .toc thì
   link trong .toc-mobile về mặc định inline và dính hết vào một dòng. */
.toc a,
.toc-mobile a{
  display:block;padding:5px 11px;margin-bottom:1px;border-left:2.5px solid transparent;
  font-size:12.8px;line-height:1.45;color:var(--ink-faint);text-decoration:none;
  border-radius:0 8px 8px 0;transition:.14s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toc a:hover,
.toc-mobile a:hover{color:var(--ink);background:var(--pink-lite)}
.toc a.is-active,
.toc-mobile a.is-active{color:var(--red-deep);border-left-color:var(--red);background:var(--pink-lite);font-weight:700}
.toc a.lvl-3,
.toc-mobile a.lvl-3{padding-left:22px;font-size:12.2px}
/* Bản mobile: vùng chạm cao hơn cho ngón tay, và cho xuống dòng vì panel rộng
   gần bằng cả trang, không cần cắt bằng ellipsis như cột hẹp bên desktop */
.toc-mobile a{padding:9px 12px;font-size:13.5px;white-space:normal}
.toc-mobile a.lvl-3{padding-left:26px;font-size:13px}

/* ─── Điều hướng trước/sau ─── */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.pager[hidden]{display:none}
.pager a{
  display:block;padding:13px 17px;text-decoration:none;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:.16s;box-shadow:var(--sh-sm);
}
.pager a:hover{border-color:var(--red-soft);transform:translateY(-2px);box-shadow:var(--sh-md)}
.pager__dir{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.5px}
.pager__ttl{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pager a.next{text-align:right;grid-column:2}

/* ═══════════════ NỘI DUNG MARKDOWN ═══════════════ */
.markdown-body{font-size:16px}
.markdown-body>*:first-child{margin-top:0}

.markdown-body h1{
  font-size:27px;font-weight:700;line-height:1.35;margin:0 0 6px;padding-bottom:14px;
  border-bottom:2.5px solid var(--red-soft);
}
.markdown-body h1+h1{font-size:19px;color:var(--ink-soft);font-weight:600;border-bottom:none;
  margin-top:-4px;padding-bottom:0}
.markdown-body h2{
  position:relative;font-size:21px;font-weight:700;margin:42px 0 14px;padding:9px 16px 9px 18px;
  background:linear-gradient(90deg,var(--pink) 0%,rgba(255,228,234,0) 88%);
  border-left:5px solid var(--red);border-radius:0 var(--r-md) var(--r-md) 0;
  scroll-margin-top:calc(var(--topbar-h) + 16px);
}
.markdown-body h3{
  font-size:17.5px;font-weight:700;margin:30px 0 10px;color:var(--red-deep);
  padding-left:15px;border-left:3px solid var(--gold);
  scroll-margin-top:calc(var(--topbar-h) + 16px);
}
.markdown-body h4{font-size:15.5px;font-weight:700;margin:22px 0 8px;color:var(--green-deep);
  scroll-margin-top:calc(var(--topbar-h) + 16px)}
.markdown-body p{margin:0 0 14px}
.markdown-body strong{font-weight:700;color:var(--red-deep)}
.markdown-body em{color:var(--ink-soft)}

.markdown-body ul,.markdown-body ol{margin:0 0 15px;padding-left:24px}
.markdown-body li{margin-bottom:5px}
.markdown-body li::marker{color:var(--red)}

/* Đường ngăn mục — giữ mảnh vì tài liệu (nhất là đề thi) có RẤT nhiều dấu --- */
.markdown-body hr{
  height:1px;border:none;margin:26px 0;
  background:linear-gradient(90deg,transparent,var(--red-soft) 20%,
             var(--gold) 50%,var(--red-soft) 80%,transparent);
  opacity:.7;
}

/* Bảng */
.table-scroll{overflow-x:auto;margin:0 0 18px;border-radius:var(--r-md);
  border:1.5px solid var(--line);box-shadow:var(--sh-sm);-webkit-overflow-scrolling:touch}
.markdown-body table{border-collapse:collapse;width:100%;font-size:14.3px;background:var(--paper)}
.markdown-body th{
  background:var(--pink);color:var(--red-deep);font-weight:700;text-align:left;
  padding:11px 13px;border-bottom:2px solid var(--red-soft);white-space:nowrap;
}
.markdown-body td{padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.markdown-body tbody tr:nth-child(even){background:var(--cream)}
.markdown-body tbody tr:hover{background:var(--pink-lite)}
.markdown-body tbody tr:last-child td{border-bottom:none}

/* Trích dẫn thơ */
.markdown-body blockquote{
  margin:0 0 18px;padding:15px 20px;
  background:linear-gradient(180deg,var(--cream),var(--paper));
  border-left:4px solid var(--red-soft);border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--ink);box-shadow:var(--sh-sm);
}
.markdown-body blockquote p{margin-bottom:8px}
.markdown-body blockquote p:last-child{margin-bottom:0}
.markdown-body blockquote strong{font-weight:700;color:var(--ink)}

/* Mã */
.markdown-body code{
  padding:2px 7px;font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.9em;
  background:var(--gold-soft);border-radius:6px;color:var(--red-deep);
}
.markdown-body pre{
  margin:0 0 18px;padding:16px 18px;overflow-x:auto;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-md);
  font-size:13px;line-height:1.6;
}
.markdown-body pre code{background:none;padding:0;color:var(--ink-soft)}

/* ─── Thẻ đáp án ─── */
.answer{
  position:relative;margin:0 0 16px;border-radius:var(--r-md);overflow:hidden;
  border:1.5px solid var(--green-soft);background:var(--green-lite);
  box-shadow:var(--sh-sm);
}
.answer--wrong{border-color:var(--red-soft);background:var(--pink-lite)}
.answer__toggle{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 16px;text-align:left;
  background:var(--green-soft);border:none;font-size:13.5px;font-weight:700;color:var(--green-deep);
  transition:.15s;
}
.answer--wrong .answer__toggle{background:var(--red-soft);color:var(--red-deep)}
.answer__toggle:hover{filter:brightness(.97)}
.answer__toggle::after{content:"Bấm để xem";margin-left:auto;font-size:11.5px;font-weight:600;opacity:.72}
.answer.is-open .answer__toggle::after{content:"Ẩn đi"}
.answer__body{padding:15px 18px;display:none}
.answer.is-open .answer__body{display:block;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.answer__body>*:last-child{margin-bottom:0}
.answer__body blockquote{box-shadow:none;background:rgba(255,255,255,.65)}

/* ─── Song ngữ Việt / Trung ─── */
/* DOM cặp dựng một lần lúc render; bốn chế độ chỉ là class trên <body>,
   nhờ vậy đổi chế độ không mất đáp án đang mở, id heading hay vị trí cuộn. */
/* .bi__row / .bi__cell để nguyên display block, không padding/border dọc — nhờ vậy
   lề của block vẫn collapse xuyên qua wrapper đúng như khi chưa bọc, chế độ
   "Việt" trông y hệt bản gốc. Chế độ 2 cột dùng grid nên không còn collapse. */
.bi__cn{font-family:var(--font-han);line-height:1.85}
/* Hai dòng h1 đầu bài giờ nằm ở hai hàng khác nhau nên selector .markdown-body
   h1+h1 không còn trúng — dựng lại kiểu "tiêu đề phụ" theo vị trí hàng. */
.bi__row:not(:first-child) .bi__cell h1{font-size:19px;color:var(--ink-soft);font-weight:600;
  border-bottom:none;margin-top:-4px;padding-bottom:0}

/* Một cột — ẩn hẳn bên còn lại */
body.bi-vi .bi__cn,
body.bi-cn .bi__vi{display:none}

/* Hai cột song song — giữ nguyên mục lục bên phải như mọi chế độ khác,
   chỉ nới trần chiều rộng để nội dung dùng hết cột giữa thay vì dừng ở 860px */
body.bi-split .doc-wrap{max-width:none}
body.bi-split .bi__row{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}
body.bi-split .bi__cn{border-left:1.5px dashed var(--line);padding-left:26px}

/* Trộn xen kẽ — phân biệt bằng vạch vàng bên bản Trung */
body.bi-mix .bi__cn{border-left:3px solid var(--gold);padding-left:14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg,var(--gold-soft),transparent 62%)}

/* ─── Sơ đồ tư duy ─── */
.diagram{
  margin:0 0 22px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
.diagram__bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:linear-gradient(90deg,var(--pink-lite),var(--green-lite));
  border-bottom:1.5px solid var(--line);
}
.diagram__label{font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.6px;margin-right:auto}
.diagram__btn{
  padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;transition:.15s;
}
.diagram__btn:hover{border-color:var(--red-soft);color:var(--red-deep)}
.diagram__btn.is-on{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.diagram__view{padding:16px;overflow-x:auto}
.diagram__view[hidden]{display:none}
.diagram__graph svg{max-width:100%;height:auto;display:block;margin:0 auto;cursor:zoom-in}
.diagram__note{margin:10px 0 0;font-size:12px;color:var(--ink-faint);text-align:center}
.diagram__err{padding:14px 16px;font-size:13px;color:var(--red-deep);background:var(--pink-lite);
  border-radius:var(--r-sm)}

/* Sơ đồ dạng danh sách */
.mmlist,.mmlist ul{list-style:none;margin:0;padding:0}
.mmlist{font-size:14px}
.mmlist ul{margin-left:9px;padding-left:15px;border-left:2px dashed var(--red-soft)}
.mmlist li{position:relative;margin:4px 0}
.mmlist li>span{
  display:inline-block;padding:4px 13px;border-radius:999px;
  background:var(--pink-lite);border:1.5px solid var(--red-soft);
  font-size:13.5px;line-height:1.45;
}
.mmlist>li>span{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);font-weight:700;font-size:15px;
  padding:7px 18px;box-shadow:0 3px 10px rgba(241,156,170,.42)}
.mmlist ul>li>span{background:var(--green-lite);border-color:var(--green-soft)}
.mmlist ul ul>li>span{background:var(--blue-soft);border-color:var(--blue)}
.mmlist ul ul ul>li>span{background:var(--gold-soft);border-color:var(--gold)}

/* ─── Trạng thái ─── */
.skeleton{padding:8px 0}
.skeleton i{display:block;height:15px;margin-bottom:12px;border-radius:8px;
  background:linear-gradient(90deg,var(--line),#fff,var(--line));background-size:200% 100%;
  animation:sweep 1.3s linear infinite}
.skeleton i:nth-child(1){width:52%;height:26px;margin-bottom:22px}
.skeleton i:nth-child(3){width:88%}
.skeleton i:nth-child(5){width:70%}
@keyframes sweep{to{background-position:-200% 0}}

.msg{padding:34px 24px;text-align:center;background:var(--paper);
  border:1.5px dashed var(--red-soft);border-radius:var(--r-lg)}
.msg__ico{font-size:42px;display:block;margin-bottom:10px}
.msg h2{margin:0 0 6px;font-size:19px}
.msg p{margin:0;color:var(--ink-soft);font-size:14px}

/* ─── Trang chủ ─── */
/* Banner: ảnh nền cắt theo khung (cover) nên không méo ở mọi bề ngang.
   aspect-ratio giữ đúng tỉ lệ ảnh gốc 2709×1376; max-height chặn cho khỏi
   quá cao trên màn rộng. */
.home__banner{
  aspect-ratio:2709/1376;
  max-height:400px;
  margin-bottom:26px;
  background-color:var(--pink-lite);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  border:1.5px solid var(--red-soft);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
}

.home__hero{text-align:center;padding:26px 20px 30px;margin-bottom:26px;
  background:linear-gradient(160deg,var(--pink-lite),var(--green-lite));
  border:1.5px solid var(--red-soft);border-radius:var(--r-xl)}
.home__hero h1{font-size:29px;margin:0 0 4px;border:none;padding:0}
.home__hero .cn{font-family:var(--font-han);font-size:15px;letter-spacing:5px;color:var(--red-deep)}
.home__hero p{margin:12px 0 0;color:var(--ink-soft);font-size:14.5px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.card{
  display:block;padding:17px 19px;text-decoration:none;color:inherit;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:.17s;
}
.card:hover{transform:translateY(-3px);border-color:var(--red-soft);box-shadow:var(--sh-md);color:inherit}
.card__ico{font-size:26px;display:block;margin-bottom:7px}
.card__ttl{font-weight:700;font-size:15.5px;line-height:1.3}
.card__cn{font-family:var(--font-han);font-size:12px;color:var(--ink-faint);letter-spacing:1.5px;margin-top:1px}
.card__desc{font-size:12.8px;color:var(--ink-soft);margin-top:8px;line-height:1.55}
.card__meta{margin-top:11px;font-size:11.5px;color:var(--red-deep);font-weight:700}

/* ═══════════════ TÌM KIẾM ═══════════════ */
.search{position:fixed;inset:0;z-index:60;background:rgba(58,50,56,.34);
  backdrop-filter:blur(3px);padding:64px 18px 18px;display:flex;justify-content:center}
.search[hidden]{display:none}
.search__panel{width:min(660px,100%);max-height:78vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden}
.search__bar{display:flex;align-items:center;gap:11px;padding:15px 19px;border-bottom:1.5px solid var(--line);
  background:var(--pink-lite);font-size:18px}
.search__bar input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:16px;color:var(--ink)}
.search__bar input:focus{outline:none}
.search__close{border:none;background:none;color:var(--ink-faint);font-size:17px;padding:4px 8px;border-radius:8px}
.search__close:hover{background:var(--pink);color:var(--red-deep)}
.search__results{overflow-y:auto;padding:9px}
.search__empty{padding:28px 16px;text-align:center;color:var(--ink-faint);font-size:14px;margin:0}
.sr{display:block;padding:11px 14px;margin-bottom:3px;border-radius:var(--r-md);
  text-decoration:none;color:inherit;transition:.13s}
.sr:hover,.sr.is-cursor{background:var(--pink-lite);color:inherit}
.sr__top{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--red-deep);font-weight:700}
.sr__ttl{font-weight:700;font-size:14.5px;margin-top:2px}
.sr__ctx{font-size:12.8px;color:var(--ink-soft);margin-top:3px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr mark{background:var(--gold-soft);color:var(--red-deep);border-radius:4px;padding:0 2px;font-weight:700}

/* ═══════════════ PHÓNG TO SƠ ĐỒ ═══════════════ */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(58,50,56,.9);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox[hidden]{display:none}
.lightbox__stage{width:100%;height:100%;display:grid;place-items:center;cursor:grab;touch-action:none}
.lightbox__stage.grabbing{cursor:grabbing}
.lightbox__stage svg{max-width:none;transform-origin:center center}
.lightbox__close{position:absolute;top:16px;right:18px;z-index:2;width:44px;height:44px;
  border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:19px}
.lightbox__close:hover{background:#fff}
.lightbox__hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  padding:7px 16px;background:rgba(255,255,255,.9);border-radius:999px;font-size:12.5px;color:var(--ink-soft)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1180px){
  .layout{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .toc{display:none}
  .toc-mobile{display:block}
  .main{padding:22px 24px 80px}
  body.sidebar-collapsed .layout{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;z-index:55;width:min(300px,84vw);height:100dvh;
    padding-top:16px;background:var(--paper);box-shadow:var(--sh-lg);
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  }
  body.drawer-open .sidebar{transform:none}
  .sidebar__head{display:block}
  .scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(58,50,56,.36)}
  .scrim[hidden]{display:none}
  .main{padding:18px 16px 70px}
  .markdown-body{font-size:15.5px}
  .markdown-body h1{font-size:23px}
  .markdown-body h2{font-size:19px;margin-top:32px;padding:8px 12px 8px 14px}
  .markdown-body h3{font-size:16.5px}
  .markdown-body table{font-size:13.4px}
  .markdown-body th,.markdown-body td{padding:9px 11px}
  .pager{grid-template-columns:1fr}
  .pager a.next{grid-column:1}
  .search{padding:12px}
  .search__panel{max-height:88vh}
  /* Hẹp quá thì hai cột không đọc được — hạ xuống thành xen kẽ, vẫn giữ
     nguyên lựa chọn đã lưu để phóng to cửa sổ là quay lại hai cột ngay */
  body.bi-split .doc-wrap{max-width:860px}
  body.bi-split .bi__row{display:block}
  body.bi-split .bi__cn{border-left:3px solid var(--gold);padding-left:14px;
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    background:linear-gradient(90deg,var(--gold-soft),transparent 62%)}
}

@media (max-width:520px){
  /* Tên trang vẫn hiện trên điện thoại: banner ở trang chủ không có chữ,
     nên đây là chỗ duy nhất nhận diện được trang. */
  .topbar__name{font-size:16px}
  .main{padding:14px 12px 60px}
  .markdown-body blockquote{padding:13px 15px}
  .diagram__view{padding:12px}
  .card-grid{grid-template-columns:1fr}
  .gate__card{padding:40px 20px 26px}
  /* Xếp dọc nút → xuống dưới. Nằm cùng hàng thì nút + gap chiếm 60px mép phải,
     đẩy tâm ô input lệch 30px sang trái so với logo và tiêu đề bên trên — trên
     card hẹp của điện thoại thành hơn 11% chiều rộng, nhìn rõ là lệch. */
  .gate__field{flex-direction:column;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═══════════════ IN ẤN ═══════════════ */
/* Đề thi đặt <div class="page-break"></div> trước phần đáp án: trên màn hình
   không hiện gì, khi in thì đẩy đáp án sang trang mới để in riêng phần đề.
   Lệnh sang trang gắn lên phần tử KẾ TIẾP chứ không lên chính div: div rỗng
   cao 0 mà mang break-before thì Chrome xếp nó thành một trang trắng riêng. */
.page-break{display:none}
@media print{
  body{background:#fff;font-size:11.5pt}
  .page-break+*{break-before:page}
  .topbar,.cloud-band,.sidebar,.toc,.toc-mobile,.doc-toolbar,.pager,.scrim,.gate,.search,.lightbox{display:none!important}
  .layout{display:block}
  .main{padding:0}
  .doc-wrap{max-width:none}
  .answer__body{display:block!important}
  .answer__toggle::after{content:""}
  .diagram__view--graph{display:none!important}
  .diagram__view--list{display:block!important}
  .diagram__bar{display:none}
  .markdown-body h2{background:none;border-left:3px solid #000;break-after:avoid}
  .markdown-body h3,.markdown-body h4{break-after:avoid}
  .markdown-body table,.markdown-body blockquote,.answer,.diagram{break-inside:avoid}
  .table-scroll{overflow:visible;box-shadow:none}
  body.bi-split .bi__row{break-inside:avoid}
  a{color:#000;text-decoration:none}
}