/* 1. Tokens + base. Light "notebook" palette: moss + turmeric. Dark mode swaps the tokens only. */
:root {
  --giay: #FBFCF8; --mat: #FFFFFF; --muc: #1F2A24; --muc2: #4B5750; --ke: #D8DED6; --ke2: #ECF0EA;
  --reu: #2E4A3B; --reu-nhat: #E4ECE6; --nghe: #D9A21B; --nghe-nhat: #FBF1D6; --nghe-dam: #7A5300; --link: #2F6B4F;
  --tren-reu: #FFFFFF; --chu-nghe: #2B2002;
  --de: "Newsreader", Georgia, serif;
  --than: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --khung: 1180px; --cot: 720px; --le: 28px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --giay: #121714; --mat: #1A211D; --muc: #E3EAE5; --muc2: #A9B5AE; --ke: #2F3A34; --ke2: #242C27;
    --reu: #8FBFA3; --reu-nhat: #22332A; --nghe: #E3B23C; --nghe-nhat: #3A3118; --nghe-dam: #F0CF7A; --link: #9CD3B4;
    --tren-reu: #0F1712; --chu-nghe: #221A02;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; background: var(--giay); color: var(--muc); font-family: var(--than); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--nghe); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--de); color: var(--muc); line-height: 1.2; text-wrap: balance; }
.tde { font-family: var(--de); margin: 0; }
.an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bo-qua { position: absolute; left: -999px; top: 8px; background: var(--reu); color: var(--tren-reu); padding: 8px 12px; z-index: 100; }
.bo-qua:focus { left: 8px; }
[hidden] { display: none !important; }
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.2; border-radius: 8px; padding: 10px 14px; background: var(--reu); color: var(--tren-reu); -webkit-text-fill-color: var(--tren-reu); text-decoration: none; border: 1px solid var(--reu); cursor: pointer; font-family: var(--than); }
.nut:hover { filter: brightness(1.08); text-decoration: none; }
.nut.vien { background: transparent; color: var(--reu); -webkit-text-fill-color: var(--reu); }