/* =========================================================
   Kiểu chữ cho phần xem trước Markdown (.md-body)
   Dùng chung cho trang và file HTML xuất ra (biến có giá trị mặc định nền sáng)
   ========================================================= */
.md-body {
  --_text: var(--md-text, #1d2a25);
  --_muted: var(--md-muted, #5b6b65);
  --_border: var(--md-border, #dbe5df);
  --_soft: var(--md-soft, #f3f7f5);
  --_code-bg: var(--md-code-bg, #f4f7f5);
  --_link: var(--md-link, #0b7a57);
  --_mark: var(--md-mark, #fff1a8);
  color: var(--_text);
  font-family: var(--md-font, "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.md-body > *:first-child { margin-top: 0 !important; }
.md-body > *:last-child { margin-bottom: 0 !important; }
.md-body p, .md-body ul, .md-body ol, .md-body blockquote, .md-body table, .md-body pre, .md-body dl, .md-body details, .md-body .mermaid-box, .md-body .katex-display, .md-body figure { margin: 0 0 1em; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  margin: 1.5em 0 .6em; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: 16px;
}
.md-body h1 { font-size: 2em; font-weight: 800; letter-spacing: -.02em; padding-bottom: .3em; border-bottom: 1px solid var(--_border); }
.md-body h2 { font-size: 1.5em; padding-bottom: .25em; border-bottom: 1px solid var(--_border); }
.md-body h3 { font-size: 1.25em; }
.md-body h4 { font-size: 1.05em; }
.md-body h5 { font-size: .95em; }
.md-body h6 { font-size: .9em; color: var(--_muted); }
.md-body a { color: var(--_link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.md-body a:hover { text-decoration-thickness: 2px; }
.md-body strong { font-weight: 700; }
.md-body mark { background: var(--_mark); color: inherit; padding: 0 .15em; border-radius: 3px; }
.md-body img { max-width: 100%; height: auto; border-radius: 6px; }
.md-body hr { height: 0; margin: 1.8em 0; border: 0; border-top: 2px solid var(--_border); }
.md-body ul, .md-body ol { padding-left: 1.7em; }
.md-body li + li, .md-body li > ul, .md-body li > ol { margin-top: .25em; }
.md-body li > ul, .md-body li > ol { margin-bottom: 0; }
.md-body li > p { margin-bottom: .4em; }
.md-body .task-list-item { list-style: none; position: relative; }
.md-body .task-list-item > label { display: inline; }
.md-body .task-list-item-checkbox { position: absolute; left: -1.45em; top: .38em; width: 1em; height: 1em; margin: 0; accent-color: var(--_link); cursor: pointer; }
.md-body .task-list-item-checkbox[disabled] { cursor: default; }
.md-body .contains-task-list { padding-left: 1.6em; }

.md-body blockquote { padding: .2em 1em; color: var(--_muted); border-left: 4px solid var(--_border); }
.md-body blockquote > :last-child { margin-bottom: 0; }

/* Hộp ghi chú kiểu GitHub */
.md-body .alert { --_a: #1f6feb; color: var(--_text); border-left-color: var(--_a); background: color-mix(in srgb, var(--_a) 7%, transparent); border-radius: 0 8px 8px 0; padding: .7em 1em; }
.md-body .alert-title { display: flex; align-items: center; gap: .45em; margin-bottom: .35em; font-weight: 700; color: var(--_a); }
.md-body .alert-title .ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-body .alert-tip { --_a: #1a7f37; }
.md-body .alert-important { --_a: #8250df; }
.md-body .alert-warning { --_a: #b7791f; }
.md-body .alert-caution { --_a: #cf222e; }

/* Code */
.md-body code, .md-body kbd, .md-body samp { font-family: var(--md-mono, ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace); font-size: .88em; }
.md-body :not(pre) > code { padding: .15em .4em; border-radius: 6px; background: var(--_code-bg); border: 1px solid var(--_border); }
.md-body pre { position: relative; padding: 14px 16px; overflow: auto; border-radius: 10px; background: var(--_code-bg); border: 1px solid var(--_border); line-height: 1.55; }
.md-body pre code { padding: 0; background: none; border: 0; font-size: .86em; white-space: pre; }
.md-body pre.hljs { color: inherit; }
.md-body pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 6px; right: 10px; font: 600 .68rem/1 var(--md-font, system-ui, sans-serif);
  text-transform: uppercase; letter-spacing: .04em; color: var(--_muted); opacity: .7; pointer-events: none;
}
.md-body kbd { padding: .1em .45em; border: 1px solid var(--_border); border-bottom-width: 2px; border-radius: 5px; background: var(--_soft); }

/* Bảng */
.md-body table { display: block; width: max-content; max-width: 100%; overflow: auto; border-collapse: collapse; border-spacing: 0; }
.md-body th, .md-body td { padding: 7px 13px; border: 1px solid var(--_border); }
.md-body th { font-weight: 700; background: var(--_soft); }
.md-body tr:nth-child(2n) td { background: color-mix(in srgb, var(--_soft) 55%, transparent); }
.md-body table.front-matter { font-size: .85em; }
.md-body table.front-matter th { text-align: left; color: var(--_muted); font-weight: 600; }

/* Chú thích cuối trang */
.md-body .footnotes-sep { margin-top: 2.2em; }
.md-body .footnotes { font-size: .88em; color: var(--_muted); }
.md-body .footnote-ref a, .md-body .footnote-backref { text-decoration: none; }

/* Công thức */
.md-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: .2em 0; }
.md-body eq { display: inline; }
.md-body eqn { display: block; overflow-x: auto; }
.md-body section.eqno { display: flex; align-items: center; }

/* Sơ đồ */
.md-body .mermaid-box { display: flex; justify-content: center; padding: 12px; overflow: auto; border-radius: 10px; border: 1px solid var(--_border); background: var(--md-diagram-bg, #fff); }
.md-body .mermaid-box svg { max-width: 100%; height: auto; }
.md-body .mermaid-box .mermaid-src { display: none; margin: 0; width: 100%; border: 0; background: none; }
.md-body .mermaid-box:not(.is-done):not(.is-error) .mermaid-src { display: block; opacity: .55; }
.md-body .mermaid-box.is-error { display: block; border-color: #e5a5a5; }
.md-body .mermaid-box.is-error .mermaid-src { display: block; opacity: .8; }
.md-body .mermaid-err { color: #b42318; font-size: .85em; }
.md-body .mermaid-err pre { margin: .4em 0 .6em; padding: 8px 10px; background: rgba(180,35,24,.06); border-color: rgba(180,35,24,.25); white-space: pre-wrap; }

.md-body details { padding: .5em .9em; border: 1px solid var(--_border); border-radius: 8px; }
.md-body summary { cursor: pointer; font-weight: 600; }
.md-body .page-break { break-after: page; page-break-after: always; height: 0; }

@media print {
  .md-body { font-size: 11.5pt; }
  .md-body pre, .md-body table, .md-body .mermaid-box, .md-body img, .md-body blockquote { break-inside: avoid; }
  .md-body h1, .md-body h2, .md-body h3 { break-after: avoid; }
  .md-body a { color: inherit; }
  .md-body pre code { white-space: pre-wrap; }
}