/* Mekong Dragon — website. Token nhúng thẳng để site chạy độc lập,
   giá trị lấy nguyên từ build/tokens.css. */

:root {
  --m-vuon:#3F4927; --m-phusa:#8C7C69; --m-duaxiem:#8A9956;
  --m-sauri:#C88B41; --m-buoi:#D6A49A; --m-bunkho:#2F2722;
  --m-phusa-04:#F9F7F5; --m-phusa-08:#F3F0EC; --m-phusa-16:#E7E1DA;
  --m-phusa-32:#C9BDB1; --m-vuon-08:#EEF0EA; --m-vuon-16:#DEE2D4;
  --m-vuon-70:#2E361C; --m-duaxiem-20:#E5EAD7; --m-sauri-12:#F7ECDE;
  --m-bunkho-60:#766960; --m-bunkho-80:#51463E;

  --paper:var(--m-phusa-04); --paper-alt:var(--m-phusa-08);
  --ink:var(--m-bunkho); --ink-muted:var(--m-bunkho-60);
  --brand:var(--m-vuon); --brand-alt:var(--m-vuon-70);
  --rule:var(--m-phusa-16); --accent:var(--m-sauri);

  --font-display:'Lora','Iowan Old Style',Georgia,serif;
  --font-text:'IBM Plex Sans',-apple-system,'Segoe UI',system-ui,sans-serif;

  --t-xs:.76rem; --t-sm:.9rem; --t-base:1rem; --t-md:1.14rem;
  --t-lg:1.42rem; --t-xl:1.9rem; --t-2xl:2.5rem; --t-3xl:3.3rem;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --lh-tight:1.16; --lh-body:1.65;
}

/* Mekong Dragon — bộ chữ tự chứa.
   Lora (tiêu đề) + IBM Plex Sans (nội dung). Subset: latin, latin-ext, vietnamese.
   Tải sẵn về máy để tài liệu mở được offline và in ra luôn đúng chữ. */

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXEKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbM4jw8V78x9OWIhqbQ5g1voKE7-jfBVSl7w.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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXEKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbM4jw8V78x9OWIhqbQ5g0voKE7-jfBVSl7w.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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXEKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbM4jw8V78x9OWIhqbQ5g6voKE7-jfBVQ.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;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU.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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU.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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU.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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}

/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbSB4ZhRNU.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;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbSB4ZhRNU.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;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYbSB4Zh.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;
}

/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoqB2nPWc3ZyhTjcV.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;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoqF2nPWc3ZyhTjcV.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;
}

/* latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoq92nPWc3ZyhTg.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;
}

/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwX7I_FMl_GW8g.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;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwT7I_FMl_GW8g.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;
}

/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwr7I_FMl_E.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;
}

/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwX7I_FMl_GW8g.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;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwT7I_FMl_GW8g.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;
}

/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwr7I_FMl_E.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;
}

/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwX7I_FMl_GW8g.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;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwT7I_FMl_GW8g.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;
}

/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwr7I_FMl_E.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;
}

/* vietnamese */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwX7I_FMl_GW8g.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;
}

/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwT7I_FMl_GW8g.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;
}

/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/0QIvMX1D_JOuMwr7I_FMl_E.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;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:var(--t-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-5)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--brand);color:#fff;padding:var(--s-3);z-index:99}

/* ── Thanh trên ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(249,247,245,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top__in{display:flex;align-items:center;gap:var(--s-5);min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand);
  font-family:var(--font-display);font-weight:600;font-size:var(--t-md);white-space:nowrap}
.mark{width:26px;height:26px;flex:none;color:var(--brand)}
.nav{display:flex;gap:var(--s-5);margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink-muted);font-size:var(--t-sm);padding:6px 0;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--brand)}
.nav a.on{color:var(--brand);border-bottom-color:var(--accent)}
.lang{margin-left:var(--s-4);font-size:var(--t-sm);text-decoration:none;color:var(--brand);
  border:1px solid var(--rule);border-radius:999px;padding:5px 14px;white-space:nowrap}
.lang:hover{background:var(--m-vuon-08)}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:26px;
  color:var(--brand);cursor:pointer;line-height:1}

/* ── Khối chung ─────────────────────────────────────────── */
section{padding:var(--s-8) 0}
section.tight{padding:var(--s-7) 0}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--brand);line-height:var(--lh-tight);margin:0 0 var(--s-4)}
h1{font-size:var(--t-3xl);font-weight:600;max-width:20ch}
h2{font-size:var(--t-2xl);font-weight:600;max-width:24ch}
h3{font-size:var(--t-lg);font-weight:600;margin-top:var(--s-6)}
h4{font-size:var(--t-base);font-weight:600;margin-bottom:var(--s-2)}
p{margin:0 0 var(--s-4);max-width:70ch}
ul,ol{margin:0 0 var(--s-4);padding-left:1.2em;max-width:70ch}
li{margin-bottom:var(--s-2)}
.lede{font-size:var(--t-md);color:var(--ink-muted);max-width:64ch}
.eyebrow{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--m-phusa);margin-bottom:var(--s-3)}
.muted{color:var(--ink-muted);font-size:var(--t-sm)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{background:var(--brand);color:var(--m-phusa-04);padding:var(--s-8) 0}
.hero h1{color:var(--m-phusa-04);font-size:var(--t-3xl);max-width:16ch}
.hero .tag{font-family:var(--font-display);font-size:var(--t-lg);color:var(--m-duaxiem-20);
  margin:0 0 var(--s-5)}
.hero p{color:var(--m-duaxiem-20);max-width:56ch}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:center}
.hero img{border-radius:4px}

/* ── Nút ────────────────────────────────────────────────── */
.btn{display:inline-block;text-decoration:none;font-size:var(--t-sm);font-weight:600;
  padding:12px 22px;border-radius:3px;background:var(--accent);color:var(--m-bunkho);
  border:1px solid transparent}
.btn:hover{background:#B87C36}
.btn--ghost{background:none;color:var(--m-phusa-04);border-color:var(--m-duaxiem)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--dark{background:var(--brand);color:var(--m-phusa-04)}
.btn--dark:hover{background:var(--brand-alt)}
.btns{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}

/* ── Lưới thẻ ───────────────────────────────────────────── */
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:var(--s-5)}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none;color:inherit;display:block;padding:0;overflow:hidden}
.card--link img{border-radius:0}
.card--link .body{padding:var(--s-5)}
.card--link:hover{border-color:var(--m-phusa-32)}
.card--link h3{margin-top:0}

/* ── Ô số liệu ──────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.stat{background:var(--paper-alt);border-radius:4px;padding:var(--s-5)}
.stat b{display:block;font-family:var(--font-display);font-size:var(--t-xl);
  color:var(--brand);line-height:1;margin-bottom:6px}
.stat span{font-size:var(--t-xs);color:var(--ink-muted);display:block;line-height:1.4}

/* ── Dải nhấn ───────────────────────────────────────────── */
.band{background:var(--m-vuon-08);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof{background:var(--m-sauri-12);border-left:3px solid var(--accent);padding:var(--s-5) var(--s-6);
  border-radius:0 4px 4px 0;margin:var(--s-6) 0}
.proof p:last-child{margin-bottom:0}
.proof strong{font-size:var(--t-md)}
.claim{font-family:var(--font-display);font-size:var(--t-xl);color:var(--brand);
  line-height:var(--lh-tight);max-width:26ch;margin:0 0 var(--s-5)}

/* ── Bảng ───────────────────────────────────────────────── */
.tbl{overflow-x:auto;margin:var(--s-5) 0}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px}
th{background:var(--brand);color:var(--m-phusa-04);text-align:left;padding:10px 14px;
  font-weight:600;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase}
td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:nth-child(even){background:var(--paper-alt)}

/* ── Lịch mùa vụ ────────────────────────────────────────── */
.cal{min-width:640px;border-collapse:collapse;font-size:var(--t-xs)}
.cal th{background:none;color:var(--ink-muted);text-transform:uppercase;text-align:center;padding:6px 2px}
.cal th:first-child{text-align:left}
.cal td{border:0;padding:3px 2px;text-align:center}
.cal td:first-child{text-align:left;font-weight:600;color:var(--brand)}
.cal tbody tr{background:none}
.cal i{display:block;height:20px;border-radius:2px}
.cal .peak{background:var(--m-vuon)}
.cal .some{background:var(--m-duaxiem)}
.cal .none{background:var(--m-phusa-16)}
.legend{display:flex;gap:var(--s-6);flex-wrap:wrap;font-size:var(--t-xs);color:var(--ink-muted)}
.legend span::before{content:"";display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px}
.legend .k1::before{background:var(--m-vuon)}
.legend .k2::before{background:var(--m-duaxiem)}
.legend .k3::before{background:var(--m-phusa-16)}

/* ── Form ───────────────────────────────────────────────── */
.form{display:grid;gap:var(--s-4);max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--brand)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:var(--t-base);color:var(--ink);
  padding:11px 13px;border:1px solid var(--m-phusa-32);border-radius:3px;background:#fff;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .note{font-size:var(--t-xs);color:var(--ink-muted);margin:0}

/* ── Bài viết ───────────────────────────────────────────── */
.post-meta{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--m-phusa);margin-bottom:var(--s-3)}
.prose{max-width:66ch}
.prose h2{font-size:var(--t-lg);margin-top:var(--s-7)}

/* ── Mascot ─────────────────────────────────────────────── */
.with-mascot{display:grid;grid-template-columns:1fr 200px;gap:var(--s-6);align-items:center}
.with-mascot img{width:100%}

/* ── Chân trang ─────────────────────────────────────────── */
.foot{background:var(--brand);color:var(--m-duaxiem-20);margin-top:var(--s-8);padding:var(--s-7) 0}
.foot__in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:var(--s-6)}
.foot p{color:var(--m-duaxiem-20);font-size:var(--t-sm);margin:0 0 var(--s-3)}
.foot a{color:var(--m-duaxiem-20)}
.foot__mark{display:flex;align-items:center;gap:10px;color:var(--m-phusa-04);
  font-family:var(--font-display);font-size:var(--t-md)}
.foot__mark .mark{color:var(--m-duaxiem)}
.foot__tag{font-family:var(--font-display);color:var(--m-duaxiem-20)!important;margin-top:var(--s-3);opacity:.9}
.foot__certs{font-size:var(--t-xs)!important;letter-spacing:.02em}
.foot__rights{font-size:var(--t-xs)!important;opacity:.75}

/* ── Màn hình hẹp ───────────────────────────────────────── */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .g3,.g4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__in{grid-template-columns:1fr 1fr}
  .with-mascot{grid-template-columns:1fr 150px}
}
@media (max-width:720px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;gap:0;padding:var(--s-3) var(--s-5)}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--rule)}
  .lang{margin-left:auto;order:2}
  .burger{order:3;margin-left:var(--s-3)}
  h1{font-size:var(--t-2xl)}
  h2{font-size:var(--t-xl)}
  .g2,.g3,.g4,.stats,.foot__in{grid-template-columns:1fr}
  .with-mascot{grid-template-columns:1fr}
  .with-mascot img{max-width:180px;margin:0 auto}
  section{padding:var(--s-7) 0}
}