:root {
  --primary: #4C9F70; --primary-dark: #357A52; --primary-light: #E7F6EC;
  --accent: #F5A623; --accent-light: #FFF6E6; --bg: #F4FAF6;
  --ink: #20342A; --ink-soft: #557064; --border: #DEEEE3;
  --head: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1.0625rem/1.7 var(--body); }
a { color: var(--primary-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(244,250,246,.9); backdrop-filter: blur(12px); border-bottom: 2px solid var(--ink); }
.bar { width: min(860px, 100% - 32px); margin-inline: auto; min-height: 64px; display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 800 1.3rem var(--head); margin-right: auto; }
.brand img { width: 38px; height: 38px; border-radius: 11px; border: 2px solid var(--ink); background: #fff; }
.back { font-weight: 800; text-decoration: none; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); }
.lang { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
.lang button { border: 0; background: transparent; font: 800 .85rem var(--body); padding: 8px 12px; cursor: pointer; color: var(--ink-soft); }
.lang button.active { background: var(--ink); color: #fff; }
main { width: min(860px, 100% - 32px); margin: 32px auto 64px; }
.card { background: #fff; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); padding: clamp(22px, 5vw, 44px); }
h1 { font: 800 clamp(1.9rem, 5vw, 2.7rem)/1.1 var(--head); margin: 8px 0 12px; }
h2 { font: 800 1.45rem/1.2 var(--head); margin: 32px 0 8px; }
h3 { font: 800 1.15rem/1.3 var(--head); margin: 20px 0 6px; }
p, ul, ol { margin: 8px 0; }
ul, ol { padding-left: 1.3em; }
li { margin: 4px 0; }
.tag { display: inline-block; font: 800 .8rem var(--body); letter-spacing: .06em; text-transform: uppercase; background: var(--primary-light); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; color: var(--primary-dark); }
.updated { color: var(--ink-soft); font-weight: 700; }
.box { background: var(--primary-light); border: 2px solid var(--ink); border-radius: 18px; padding: 16px 18px; margin: 16px 0; }
.box.warn { background: var(--accent-light); }
.table-wrap { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .97rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--border); }
th { background: var(--primary-light); font-weight: 800; }
footer { text-align: center; color: var(--ink-soft); padding: 0 16px 40px; font-weight: 600; }
html[data-lang="vi"] [lang="en"], html[data-lang="en"] [lang="vi"] { display: none !important; }