:root{
  --ground:#EEF1F6; --paper:#FFFFFF; --panel:#F4F7FB;
  --ink:#0F1E33; --muted:#586A85; --faint:#8494AC;
  --line:#DCE3EE; --line-strong:#C6D0DE;
  --brand:#1C3F6E; --brand-ink:#16345E; --brand-soft:#E9EFF8;
  --gold:#A9791F; --gold-solid:#C9971F; --gold-soft:#F5EAD0;
  --go:#2E7D57; --sky:#3E6FB0; --crit:#B23B3B;
  --shadow:0 1px 2px rgba(15,30,51,.05), 0 10px 30px -14px rgba(15,30,51,.16);
  --hero-a:#0B1A30; --hero-b:#123156; --hero-c:#1B4A85;
  --hero-ink:#EAF1FB; --hero-faint:#9DB6D8; --hero-line:#2C4C78;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#0A1422; --paper:#101F36; --panel:#0E1B30; --ink:#E7EDF7; --muted:#9DAEC8; --faint:#6E819E;
  --line:#20344F; --line-strong:#2C4468; --brand:#7BA3D6; --brand-ink:#9CBEE6; --brand-soft:#152946;
  --gold:#D7B25A; --gold-solid:#D7B25A; --gold-soft:#2A2413; --go:#5FBF8E; --sky:#6E97CC; --crit:#E88585;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -16px rgba(0,0,0,.7);
  --hero-a:#060F1E; --hero-b:#0C2138; --hero-c:#12345C;
}}
:root[data-theme="dark"]{
  --ground:#0A1422; --paper:#101F36; --panel:#0E1B30; --ink:#E7EDF7; --muted:#9DAEC8; --faint:#6E819E;
  --line:#20344F; --line-strong:#2C4468; --brand:#7BA3D6; --brand-ink:#9CBEE6; --brand-soft:#152946;
  --gold:#D7B25A; --gold-solid:#D7B25A; --gold-soft:#2A2413; --go:#5FBF8E; --sky:#6E97CC; --crit:#E88585;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -16px rgba(0,0,0,.7);
  --hero-a:#060F1E; --hero-b:#0C2138; --hero-c:#12345C;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; font-size:113%;}
body{margin:0; color-scheme:light; background:var(--ground); color:var(--ink); font-family:"Sarabun","Segoe UI",system-ui,sans-serif; font-size:1rem; line-height:1.75; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif; line-height:1.3;}
.mono{font-family:"IBM Plex Mono","IBM Plex Sans Thai",monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1140px; margin:0 auto; padding:0 22px;}
.narrow{max-width:900px;}
a{color:var(--brand-ink)}
img{max-width:100%}
.code{font-family:"IBM Plex Mono",monospace; font-size:.85em; color:var(--gold); font-weight:600;}
[hidden]{display:none !important;}
.eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700;}
h2.sec{font-size:clamp(1.4rem,3.2vw,1.9rem); font-weight:700; margin:.3rem 0 .5rem; text-wrap:balance;}
.lead{color:var(--muted); font-size:1.03rem; margin:0 0 26px;}
.center-head{text-align:center; margin-bottom:8px;}
.center{text-align:center}

/* Nav */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-in{max-width:1140px; margin:0 auto; padding:0 22px; height:62px; display:flex; align-items:center; gap:14px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); white-space:nowrap;}
.brand .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(150deg,var(--brand),var(--brand-ink)); color:#fff; display:grid; place-items:center; font-size:1.1rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.brand b{font-family:"IBM Plex Sans Thai"; font-weight:700; font-size:1rem; line-height:1.1;}
.brand small{display:block; font-size:.62rem; font-weight:600; color:var(--faint); letter-spacing:.03em;}
.logo-img{height:48px; width:auto; display:block; background:#fff; padding:3px 7px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); flex:none;}
footer .fbrand .logo-img{height:46px;}
@media (max-width:520px){ .logo-img{height:40px;} }
.nav-links{display:flex; gap:1px; margin-left:auto; align-items:center;}
.nav-links a{color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:600; padding:.5em .72em; border-radius:8px; white-space:nowrap;}
.nav-links a:hover{color:var(--brand-ink); background:var(--brand-soft);}
.nav-links a.active{color:var(--brand-ink); background:var(--brand-soft);}
.burger{display:none; margin-left:auto; background:var(--panel); border:1px solid var(--line-strong); color:var(--ink); width:40px; height:38px; border-radius:9px; cursor:pointer; font-size:1.15rem;}
@media (max-width:980px){
  .nav-links{position:fixed; top:62px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:8px 14px 14px; gap:2px; box-shadow:var(--shadow); margin-left:0;}
  .nav-links a{padding:.7em .6em; font-size:.95rem;}
  .burger{display:grid; place-items:center;}
  .nav-links[hidden]{display:none !important;}
}

/* Hero (home) */
.hero{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c)); color:var(--hero-ink); border-bottom:3px solid var(--gold);}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.hero .wrap{position:relative; padding:64px 22px 66px; text-align:center;}
.hero .eyebrow{color:var(--hero-faint); font-size:clamp(1rem,2.1vw,1.25rem); font-weight:700; letter-spacing:.03em; text-transform:none; text-wrap:balance;}
.hero h1{font-size:clamp(2.3rem,6.5vw,4rem); font-weight:700; margin:.5rem 0 .1rem; letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.3);}
.hero .th{font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:600; color:#fff; margin:0 0 16px;}
.hero .sub{color:var(--hero-faint); font-size:1.06rem; max-width:62ch; margin:0 auto 28px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;}
.cta{display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:700; font-size:.95rem; padding:.72em 1.3em; border-radius:12px; cursor:pointer;}
.cta.primary{background:var(--gold-solid); color:#1a1405; border:none;}
.cta.ghost{background:rgba(255,255,255,.08); color:var(--hero-ink); border:1px solid var(--hero-line);}
.cta.blue{background:var(--brand); color:#fff; border:none;}
.cta:hover{filter:brightness(1.06)}
.hchip{display:inline-flex; align-items:center; gap:.5em; background:rgba(255,255,255,.07); border:1px solid var(--hero-line); border-radius:999px; padding:.5em 1em; font-size:.86rem; font-weight:600; color:var(--hero-ink);}
.hchip b{color:var(--gold-solid);}

/* Inner page header */
.page-head{background:linear-gradient(150deg,var(--hero-a),var(--hero-c)); color:var(--hero-ink); border-bottom:3px solid var(--gold);}
.page-head .wrap{padding:40px 22px 44px;}
.crumb{font-size:.82rem; color:var(--hero-faint);}
.crumb a{color:var(--hero-faint); text-decoration:none;} .crumb a:hover{color:#fff;}
.page-head h1{font-size:clamp(1.7rem,4vw,2.6rem); font-weight:700; margin:.5rem 0 .3rem;}
.page-head p{color:var(--hero-faint); font-size:1.03rem; max-width:70ch; margin:0;}

/* Stats */
.stats{background:var(--paper); border-bottom:1px solid var(--line);}
.stats .wrap{padding:26px 22px;}
/* single KPI (index): หน่วยงานที่ทำแบบประเมินแล้ว */
.stat-solo{display:flex; align-items:center; justify-content:center; gap:26px; padding:14px 0;}
.stat-solo-ic{flex:none; width:78px; height:78px; border-radius:20px; display:grid; place-items:center;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(23,42,91,.10);}
.stat-solo-main{text-align:left; line-height:1.15;}
.stat-solo .n{font-family:"IBM Plex Mono",monospace; font-weight:700; color:var(--brand-ink);
  font-size:clamp(2.6rem,7vw,3.8rem); line-height:1;}
.stat-solo .l{font-weight:700; font-size:1.12rem; margin-top:6px; color:var(--ink);}
.stat-solo .e{font-size:.82rem; color:var(--faint); margin-top:3px;}
@media (max-width:560px){ .stat-solo{flex-direction:column; gap:14px; text-align:center;} .stat-solo-main{text-align:center;} }

section{padding:48px 0;}
.band{background:linear-gradient(150deg,var(--brand-ink),var(--brand)); color:#fff;}
.band .wrap{text-align:center;}
.band h2{font-size:clamp(1.3rem,3vw,1.9rem); margin:0 0 8px;}
.band p{color:#dbe6f5; max-width:70ch; margin:0 auto; font-size:1rem;}
.band .en{color:var(--gold-solid); font-weight:600; font-size:.95rem; margin-top:6px;}

.cards{display:grid; gap:16px;}
.g4{grid-template-columns:repeat(4,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){ .g4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:880px){ .g3{grid-template-columns:1fr;} .g2{grid-template-columns:1fr;} }
@media (max-width:560px){ .g4{grid-template-columns:1fr;} }
.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);}
.pad{padding:22px 24px;}

/* nav card (home) */
.navcard{display:block; text-decoration:none; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); transition:.15s;}
.navcard:hover{border-color:var(--brand); transform:translateY(-3px);}
.navcard .ic{font-size:1.7rem;}
.navcard b{display:block; margin:8px 0 4px; font-size:1.05rem;}
.navcard p{margin:0; color:var(--muted); font-size:.92rem;}
.navcard .go{display:inline-block; margin-top:10px; color:var(--brand-ink); font-weight:600; font-size:.86rem;}

/* function block (core) */
.fn .tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--brand); padding:.22em .62em; border-radius:6px;}
.fn h3{font-size:1.15rem; font-weight:700; margin:11px 0 4px;}
.fn h3 span{color:var(--faint); font-weight:500; font-size:.85rem;}
.fn p{margin:0 0 8px; font-size:.95rem; color:var(--muted);}
.fn ul{margin:0; padding-left:18px;} .fn li{font-size:.92rem; margin-bottom:4px;}
.fn h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin:12px 0 4px;}

/* steps (assessment progress chips — base only; assessment.html styles the pills) */
.step{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px 18px; position:relative;}

/* target groups */
.tg{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:900px){ .tg{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .tg{grid-template-columns:1fr;} }
.tgc{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.tgc .ic{width:46px; height:46px; margin:0 auto 10px; border-radius:12px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:1.3rem;}
.tgc b{display:block; font-size:.98rem;} .tgc small{color:var(--faint); font-size:.8rem; margin-top:auto;}

/* forms columns */
.fcol{padding:22px;}
.fcol .badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-weight:700; color:#fff; background:var(--brand); padding:.3em .7em; border-radius:8px; font-size:.9rem;}
.fcol h3{font-size:1.15rem; margin:12px 0 2px;}
.fcol .desc{color:var(--muted); font-size:.92rem; margin:0 0 12px;}
.fcol ol{margin:0 0 4px; padding-left:20px;} .fcol li{font-size:.92rem; margin-bottom:5px;}

.chk{display:grid; grid-template-columns:repeat(3,1fr); gap:9px 22px;}
@media (max-width:820px){ .chk{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .chk{grid-template-columns:1fr;} }
.chk div{display:flex; gap:9px; align-items:flex-start; font-size:.93rem;}
.chk .ok{flex:none; color:var(--go); font-weight:700;}

.rc{display:block; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);}
.rc:hover{border-color:var(--brand); transform:translateY(-2px); transition:.15s;}
.rc .ico{font-size:1.5rem;} .rc b{display:block; margin-top:8px; font-size:.98rem;} .rc small{color:var(--faint); font-size:.82rem;}

/* prose */
.prose h3{font-size:1.2rem; margin:26px 0 8px;}
.prose h3:first-child{margin-top:0;}
.prose p{margin:0 0 12px;}
.prose ul,.prose ol{margin:0 0 14px; padding-left:22px;} .prose li{margin-bottom:5px;}
.prose .card{margin:16px 0;}
.dl{display:grid; grid-template-columns:200px 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.dl div{background:var(--paper); padding:12px 16px;}
.dl .k{font-weight:600; color:var(--brand-ink); font-size:.92rem;}
.dl .v{font-size:.95rem;}
@media (max-width:640px){ .dl{grid-template-columns:1fr;} .dl .k{border-bottom:none; padding-bottom:2px;} }

details.faq{background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden;}
details.faq summary{cursor:pointer; padding:15px 46px 15px 18px; font-weight:600; font-size:.98rem; position:relative; list-style:none;}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; position:absolute; right:18px; top:12px; font-size:1.3rem; color:var(--gold); transition:transform .2s;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .a{padding:0 18px 16px; color:var(--muted); font-size:.94rem;}
.faq-group{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:26px 0 10px;}

/* Footer */
footer{background:var(--hero-a); color:var(--hero-faint); padding:44px 0 22px; font-size:.9rem; line-height:1.85;}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:30px;}
@media (max-width:820px){ .fgrid{grid-template-columns:1fr;} }
footer h3{color:#fff; font-size:.98rem; margin:0 0 12px;}
footer a{color:var(--hero-faint); text-decoration:none;}
footer a:hover{color:var(--gold-solid);}
footer .flinks{display:flex; flex-direction:column; gap:6px;}
footer .fbrand{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
footer .fbrand .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(150deg,var(--sky),var(--brand)); display:grid; place-items:center; font-size:1.1rem;}
.fbot{border-top:1px solid var(--hero-line); margin-top:30px; padding-top:16px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.82rem;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}