:root {
  --nen: #0b0f16; --nen2: #111723; --nen3: #172030; --vien: #233044;
  --chu: #e6ebf2; --chu2: #9aa7b8; --nhan: #38bdf8; --nhan2: #0ea5e9;
  --xanh: #4ade80; --vang: #fbbf24; --do: #f87171;
  --code: #0f1520;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --nen: #ffffff; --nen2: #f6f8fb; --nen3: #eef2f7; --vien: #dbe2eb;
    --chu: #1b2430; --chu2: #5b6878; --nhan: #0369a1; --nhan2: #0284c7;
    --xanh: #15803d; --vang: #a16207; --do: #b91c1c; --code: #f3f6fa;
  }
}
:root[data-theme="light"] {
  --nen: #ffffff; --nen2: #f6f8fb; --nen3: #eef2f7; --vien: #dbe2eb;
  --chu: #1b2430; --chu2: #5b6878; --nhan: #0369a1; --nhan2: #0284c7;
  --xanh: #15803d; --vang: #a16207; --do: #b91c1c; --code: #f3f6fa;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: var(--nen); color: var(--chu);
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--nhan); text-decoration: none; }
a:hover { text-decoration: underline; }

.dau { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center;
  gap: 14px; padding: 0 18px; background: color-mix(in srgb, var(--nen) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--vien); }
.logo { display: flex; align-items: center; gap: 9px; color: var(--chu); font-weight: 700;
  white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo small { color: var(--chu2); font-weight: 500; border-left: 1px solid var(--vien);
  padding-left: 9px; }
.tim { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.tim input { width: 100%; background: var(--nen2); border: 1px solid var(--vien); color: var(--chu);
  border-radius: 8px; padding: 8px 12px; font-size: 14.5px; }
.tim input:focus { outline: 2px solid var(--nhan2); outline-offset: 0; }
.kq-tim { position: absolute; top: 44px; left: 0; right: 0; max-height: 70vh; overflow: auto;
  background: var(--nen2); border: 1px solid var(--vien); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.kq-tim a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--vien); color: var(--chu); }
.kq-tim a:hover, .kq-tim a.chon { background: var(--nen3); text-decoration: none; }
.kq-tim b { color: var(--nhan); font-weight: 600; }
.kq-tim small { display: block; color: var(--chu2); font-size: 13px; line-height: 1.45; }
.kq-tim mark { background: color-mix(in srgb, var(--vang) 35%, transparent); color: inherit; }
.kq-tim .trong { padding: 12px 14px; color: var(--chu2); }
.nut-menu, .nut-sang-toi { background: none; border: 1px solid var(--vien); color: var(--chu);
  border-radius: 8px; width: 38px; height: 36px; font-size: 18px; cursor: pointer; }
.nut-menu { display: none; }

.khung { display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; max-width: 1440px;
  margin: 0 auto; }
.trai { position: sticky; top: 60px; height: calc(100vh - 60px); overflow: auto;
  padding: 18px 12px 40px 18px; border-right: 1px solid var(--vien); }
.trai .nhom { margin: 18px 0 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--chu2); }
.trai .nhom:first-child { margin-top: 0; }
.trai a { display: block; padding: 6px 10px; border-radius: 7px; color: var(--chu);
  font-size: 14.5px; line-height: 1.45; }
.trai a:hover { background: var(--nen3); text-decoration: none; }
.trai a.on { background: color-mix(in srgb, var(--nhan2) 16%, transparent); color: var(--nhan);
  font-weight: 600; }
.phai { position: sticky; top: 60px; height: calc(100vh - 60px); overflow: auto;
  padding: 28px 16px; font-size: 13.5px; }
.phai .tieu-de-muc { font-weight: 700; color: var(--chu2); margin-bottom: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; }
.phai a { display: block; color: var(--chu2); padding: 4px 0 4px 10px; border-left: 2px solid var(--vien);
  line-height: 1.4; }
.phai a:hover { color: var(--nhan); text-decoration: none; }
.phai a.on { color: var(--nhan); border-left-color: var(--nhan); }

.noi-dung { padding: 34px 48px 60px; min-width: 0; }
article { max-width: 820px; }
article h1 { font-size: 34px; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
article h2 { font-size: 24px; margin: 44px 0 12px; padding-top: 8px; border-top: 1px solid var(--vien); }
article h3 { font-size: 18.5px; margin: 28px 0 8px; }
article h2 .headerlink, article h3 .headerlink { opacity: 0; margin-left: 8px; font-weight: 400;
  color: var(--chu2); }
article h2:hover .headerlink, article h3:hover .headerlink { opacity: 1; text-decoration: none; }
article p, article li { color: var(--chu); }
article ul, article ol { padding-left: 24px; }
article li { margin: 4px 0; }
article img { max-width: 100%; border-radius: 8px; border: 1px solid var(--vien); }
article hr { border: none; border-top: 1px solid var(--vien); margin: 30px 0; }
code { background: var(--code); border: 1px solid var(--vien); border-radius: 5px; padding: 1px 6px;
  font: 0.88em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-word; }
pre { background: var(--code); border: 1px solid var(--vien); border-radius: 10px; padding: 14px 16px;
  overflow-x: auto; position: relative; }
pre code { background: none; border: none; padding: 0; font-size: 13.5px; word-break: normal; }
.nut-chep { position: absolute; top: 8px; right: 8px; background: var(--nen3); color: var(--chu2);
  border: 1px solid var(--vien); border-radius: 6px; font-size: 12px; padding: 3px 9px; cursor: pointer; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; display: block;
  overflow-x: auto; }
th, td { text-align: left; padding: 9px 12px; border: 1px solid var(--vien); vertical-align: top; }
th { background: var(--nen2); font-weight: 600; }
.admonition { border: 1px solid var(--vien); border-left: 4px solid var(--nhan2); border-radius: 8px;
  padding: 10px 16px; margin: 18px 0; background: var(--nen2); }
.admonition > p { margin: 6px 0; }
.admonition-title { font-weight: 700; }
.admonition.warning { border-left-color: var(--vang); }
.admonition.warning .admonition-title { color: var(--vang); }
.admonition.danger { border-left-color: var(--do); }
.admonition.danger .admonition-title { color: var(--do); }
.admonition.tip { border-left-color: var(--xanh); }
.admonition.tip .admonition-title { color: var(--xanh); }
.admonition.note .admonition-title { color: var(--nhan); }
.the { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.the a { display: block; border: 1px solid var(--vien); border-radius: 12px; padding: 16px;
  background: var(--nen2); color: var(--chu); }
.the a:hover { border-color: var(--nhan2); text-decoration: none; }
.the b { display: block; color: var(--nhan); margin-bottom: 4px; }
.the span { color: var(--chu2); font-size: 14px; line-height: 1.5; }
.chuyen { display: flex; justify-content: space-between; gap: 14px; margin-top: 50px; }
.chuyen a { flex: 1; max-width: 48%; border: 1px solid var(--vien); border-radius: 10px;
  padding: 12px 16px; color: var(--chu); font-weight: 600; }
.chuyen a:hover { border-color: var(--nhan2); text-decoration: none; }
.chuyen a.sau { text-align: right; margin-left: auto; }
.chuyen small { display: block; color: var(--chu2); font-weight: 400; font-size: 12.5px; }
.chan { margin-top: 50px; padding-top: 18px; border-top: 1px solid var(--vien); color: var(--chu2);
  font-size: 13px; max-width: 820px; }
.man-che { display: none; }

@media (max-width: 1180px) {
  .khung { grid-template-columns: 250px minmax(0, 1fr); }
  .phai { display: none; }
}
@media (max-width: 860px) {
  .khung { display: block; }
  .nut-menu { display: block; }
  .logo small { display: none; }
  .trai { position: fixed; top: 60px; left: 0; bottom: 0; width: 280px; height: auto; z-index: 30;
    background: var(--nen); transform: translateX(-100%); transition: transform .2s; }
  body.mo-menu .trai { transform: none; }
  body.mo-menu .man-che { display: block; position: fixed; inset: 60px 0 0 0; z-index: 25;
    background: rgba(0,0,0,.45); }
  .noi-dung { padding: 22px 16px 40px; }
  article h1 { font-size: 27px; }
  article h2 { font-size: 21px; }
  .dau { gap: 8px; padding: 0 12px; }
  .logo span { display: none; }
}
article h1 .headerlink { display: none; }
.admonition.question { border-left-color: #a78bfa; } .admonition.question .admonition-title { color: #a78bfa; }