/* Thai Gov templates — built on the Colorpack design system (ColorPack font, ink/paper/ground neutrals,
   17px body, 12px cards on a soft shadow, 10px buttons, 1168px container, 64px bands, centred intros).
   Each template swaps only the palette (--p primary, --pd deep, --a accent, --tint) and the header/hero variant. */
@import url("https://cdn.jsdelivr.net/gh/Colorpack/colorpack-font@v1.0.0/fonts/webfonts/colorpack.css");
:root{
  /* Colorpack neutrals */
  --ink:#2d3236;--gray:#666;--paper:#fff;--ground:#f4f6f8;--line:#e1e6eb;
  /* palette slots (overridden per template) */
  --p:#1f5fa8;--pd:#17467c;--a:#f7941c;--on-a:#2d3236;--tint:#eaf6fc;
  /* Colorpack semantic */
  --green:#6cc04a;--orange:#f7941c;--red:#ef2b2c;
  --focus:#0b57d0;--shadow-card:0 2px 12px rgba(23,50,77,.10);--shadow-pop:0 16px 48px rgba(17,17,17,.14);
  --r-sm:8px;--r-md:10px;--r-lg:12px;
  --font:"ColorPack","Kanit","Noto Sans Thai",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--pd)}
a:hover{text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px;box-shadow:0 0 0 5px rgba(11,87,208,.25)}
.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:#fff;color:#000;padding:.6rem 1rem;z-index:100;border:2px solid var(--focus);border-radius:var(--r-md)}
.skip:focus{top:8px}
.wrap{width:min(1168px,100% - 40px);margin-inline:auto}
.ic{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* calm headings: size, not weight; only card titles bold */
h1,h2,h3{line-height:1.3;margin:0 0 .5em;font-weight:400;text-wrap:balance}
h3{font-weight:700;font-size:1.25rem}
.band{padding:48px 0;background:var(--paper)}
@media(min-width:960px){.band{padding:64px 0}}
.band-tint{background:var(--tint)}
.band-ground{background:var(--ground)}
/* centred intro: eyebrow → h2 → one line */
.intro{max-width:720px;margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;gap:12px}
.intro p{margin:0}
.eyebrow{font-size:1.125rem;line-height:1.5;color:var(--gray)}
.intro h2{font-size:1.5rem;margin:0}
@media(min-width:960px){.intro h2{font-size:1.75rem}}
.more{text-align:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;min-height:48px;border-radius:var(--r-md);border:2px solid var(--p);background:var(--p);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--pd);border-color:var(--pd)}
.btn.alt{background:transparent;color:var(--pd)}
.btn.alt:hover{background:var(--tint)}
.btn.gold{background:var(--a);border-color:var(--a);color:var(--on-a)}
.btn.gold:hover{filter:brightness(.95)}
.card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}

/* accessibility tools band (ink) */
.tools{background:var(--ink);color:#fff;font-size:.9375rem}
.tools .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;min-height:44px;padding-block:4px}
.tools a{color:#fff}
.tools .grp{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.tools button{min-width:44px;min-height:36px;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:999px;font:inherit;cursor:pointer}
.tools button[aria-pressed=true]{background:#fff;color:#000}

/* header — paper, logo left, pill menu */
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit}
.emblem{width:60px;height:60px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--p);border:2px solid var(--a);flex:none}
.emblem .ic{width:32px;height:32px}
.brand b{display:block;font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.3}
.brand small{color:var(--gray);font-size:.9375rem}
.hsearch{display:flex;gap:.4rem}
.hsearch input{font:inherit;padding:.5rem .9rem;border:2px solid var(--line);border-radius:var(--r-sm);min-width:220px;min-height:48px;background:var(--paper);color:var(--ink)}
.hsearch input:focus{border-color:var(--p)}
.hsearch button{min-height:48px;min-width:48px;border-radius:var(--r-md);border:0;background:var(--p);color:#fff;display:grid;place-items:center;cursor:pointer}
.brandbar{background:var(--paper)}
.brandbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:14px;flex-wrap:wrap}
nav.main{background:var(--paper);padding-bottom:12px}
nav.main ul{list-style:none;margin:0;padding:4px;display:flex;flex-wrap:wrap;gap:4px;border-radius:999px;background:var(--tint)}
nav.main a{display:flex;align-items:center;padding:0 18px;min-height:44px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700}
nav.main a:hover{background:var(--paper);box-shadow:0 1px 4px rgba(45,50,54,.10)}
nav.main a[aria-current]{background:var(--p);color:#fff}
.navtoggle{display:none;width:100%;background:var(--paper);color:var(--ink);border:0;border-top:1px solid var(--line);font:inherit;font-weight:700;padding:.8rem 20px;text-align:left;min-height:48px}
.hd-center .brandbar .wrap{flex-direction:column;text-align:center}
.hd-center .brand{flex-direction:column;gap:.4rem}
.hd-center nav.main ul{justify-content:center}
.hd-dark .brandbar,.hd-dark nav.main{background:var(--ink)}
.hd-dark .brand b,.hd-dark .brand small{color:#fff}
.hd-dark .emblem{background:#fff}
.hd-dark nav.main ul{background:rgba(255,255,255,.1)}
.hd-dark nav.main a{color:#fff}
.hd-dark nav.main a:hover{background:rgba(255,255,255,.18);box-shadow:none}
.hd-dark nav.main a[aria-current]{background:var(--a);color:var(--on-a)}
/* underline-tab variant (split) */
.hd-split nav.main{border-bottom:1px solid var(--line);padding:0}
.hd-split nav.main ul{background:transparent;border-radius:0;padding:0;gap:0}
.hd-split nav.main a{border-radius:0;min-height:52px}
.hd-split nav.main a:hover{background:var(--tint);box-shadow:none}
.hd-split nav.main a[aria-current]{background:transparent;color:var(--pd);box-shadow:inset 0 -4px 0 var(--a)}
/* single-row sticky variant (pill = Colorpack default header) */
.hd-pill .brandbar{position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.hd-pill nav.main{display:none}
.hd-pill .hsearch{display:none}
.inline-nav{display:none;gap:4px;flex-wrap:wrap;padding:4px;border-radius:999px;background:var(--tint)}
.hd-pill .inline-nav{display:flex}
.inline-nav a{display:flex;align-items:center;min-height:44px;padding:0 16px;color:var(--ink);text-decoration:none;font-weight:700;border-radius:999px}
.inline-nav a:hover{background:var(--paper)}
.inline-nav a[aria-current]{background:var(--p);color:#fff}

/* heroes */
.hero{color:#fff;position:relative;background:linear-gradient(120deg,var(--pd),var(--p))}
.hero h1{font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.25}
.hero p{max-width:60ch;font-size:1.1875rem}
.pattern::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.14),transparent 45%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px);pointer-events:none}
.slider{position:relative;overflow:hidden}
.slide{display:none;padding:5rem 0 6rem;position:relative;z-index:1}
.slide.on{display:block}
.slide h2{font-weight:400;line-height:1.25}
.slide-ctl{position:absolute;bottom:18px;left:0;right:0;z-index:3}
.slide-ctl .wrap{display:flex;gap:.6rem;align-items:center}
.slide-ctl button{min-width:44px;min-height:44px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;font:inherit;cursor:pointer}
.slide-ctl .dot{min-width:24px;min-height:24px;width:24px;height:24px}
.slide-ctl .dot[aria-current=true]{background:#fff;color:#000}
.hero-search{padding:4.5rem 0;text-align:center}
.hero-search .big{display:flex;max-width:680px;margin:1.5rem auto 1rem;background:#fff;border-radius:var(--r-lg);padding:6px}
.hero-search .big input{flex:1;border:0;font:inherit;font-size:1.1rem;padding:.7rem 1.2rem;background:transparent;color:#000;min-width:0}
.hero-search .big button{border:0;border-radius:var(--r-md);padding:0 1.6rem;background:var(--a);color:var(--on-a);font:inherit;font-weight:700;cursor:pointer;min-height:48px}
.chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.chips a{display:inline-block;padding:.35rem 1rem;border:1.5px solid rgba(255,255,255,.8);border-radius:999px;color:#fff;text-decoration:none}
.chips a:hover{background:#fff;color:#000}
.hero-split .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding-block:3.5rem}
.qcard{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-pop)}
.qcard h2{font-size:1.25rem;font-weight:700;color:var(--ink)}
.qcard ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.qcard a{display:flex;gap:.6rem;align-items:center;padding:.7rem;border-radius:var(--r-md);background:var(--tint);color:var(--ink);text-decoration:none;font-weight:700;min-height:48px}
.qcard a:hover{outline:2px solid var(--p)}
.hero-leader .wrap{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:center;padding-block:3rem}
.portrait{width:240px;height:290px;border-radius:120px 120px var(--r-lg) var(--r-lg);background:linear-gradient(#fff3,#fff1);border:4px solid var(--a);display:grid;place-items:end center;overflow:hidden;color:#fff}
.portrait svg{width:85%;height:85%}
.portrait-cap{margin-top:.6rem;text-align:center;font-size:.95rem}
.hero-tiles .wrap{padding-block:2.8rem 5.5rem}
/* service tiles = card grid */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
@media(min-width:960px){.tiles{gap:24px}}
.tiles a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:24px 16px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);font-weight:700;height:100%;transition:transform .15s,box-shadow .15s}
.tiles a:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.tiles .ico{width:56px;height:56px;border-radius:var(--r-lg);background:var(--tint);color:var(--pd);display:grid;place-items:center}
.tiles .ico .ic{width:28px;height:28px}
.svc-list .tiles{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.svc-list .tiles a{flex-direction:row;text-align:left}
.svc-round .tiles .ico{border-radius:50%;background:var(--p);color:#fff}
.svc-solid .tiles a{background:var(--p);color:#fff}
.svc-solid .tiles .ico{background:rgba(255,255,255,.18);color:#fff}
.overlap{margin-top:-3.5rem;position:relative;z-index:5;padding:0 0 48px}
.overlap .panel{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:32px 24px}
/* news */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
@media(min-width:960px){.news-grid{gap:24px}}
.news-card a{text-decoration:none;color:inherit;display:block;height:100%}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--p),var(--pd));display:grid;place-items:center;color:#fff}
.thumb .ic{width:44px;height:44px;opacity:.85}
.news-card .body{padding:20px 24px 24px}
.news-card h3{margin:.4rem 0 .3rem;color:var(--pd)}
.news-card:hover h3{text-decoration:underline}
time,.meta{color:var(--gray);font-size:.9375rem}
.tag{display:inline-block;background:var(--tint);color:var(--pd);border-radius:999px;padding:0 .8rem;font-size:.9375rem}
.news-featured{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.news-featured .big .thumb{aspect-ratio:16/10}
.news-featured ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start}
.news-featured li{display:flex;gap:.9rem;padding:16px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.datebox{flex:none;width:58px;text-align:center;background:var(--p);color:#fff;border-radius:var(--r-md);padding:.2rem;line-height:1.25}
.datebox b{display:block;font-size:1.4rem}
.datebox span{font-size:.8rem}
.news-list ul{list-style:none;margin:0;padding:0;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.news-list li{display:flex;gap:1rem;padding:14px 24px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.news-list li:last-child{border:0}
.news-list a{flex:1;font-weight:700;min-width:200px}
/* table */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.tbl caption{text-align:left;font-weight:700;padding:.2rem 0 .8rem;font-size:1.25rem}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--tint);color:var(--pd);font-weight:400;font-size:.9375rem}
.two{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.side{display:grid;gap:1rem;align-content:start;padding:24px}
.ita{background:var(--paper);border-radius:var(--r-lg);border:2px solid var(--a);padding:24px;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between}
.ita h2{margin:0;font-size:1.375rem;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stats div{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px;color:var(--gray)}
.stats b{display:block;font-size:2rem;font-weight:700;color:var(--pd);line-height:1.3}
.map{min-height:240px;border-radius:var(--r-lg);background:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,#0001 0 1px,transparent 1px 32px),var(--tint);display:grid;place-items:center;color:var(--pd)}
/* footer — ink band with a gold rule (Colorpack Government) */
footer.site{background:var(--ink);color:#fff;border-top:4px solid var(--a)}
footer.site a{color:#fff}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding-block:2.5rem}
footer.site h2{font-size:1.125rem;font-weight:700}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:.3rem;font-size:.9375rem}
.copy{background:rgba(0,0,0,.3);padding:.8rem 0;font-size:.9375rem}
.copy .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* cookie */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:760px;margin-inline:auto;background:#fff;color:#111;border:2px solid var(--p);border-radius:var(--r-lg);padding:1rem 1.2rem;box-shadow:var(--shadow-pop)}
.cookie[hidden]{display:none}
.cookie a{color:var(--pd)}
.cookie .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
/* dark UI (Colorpack dark tokens) */
.dark-ui{--ink:#f2f4f6;--gray:#a0a6ad;--paper:#1b1f24;--ground:#121417;--line:#2a3038;--tint:#14232c;--shadow-card:0 2px 12px rgba(0,0,0,.45);--shadow-pop:0 16px 48px rgba(0,0,0,.6)}
.dark-ui a,.dark-ui .tag,.dark-ui .tbl th,.dark-ui .stats b,.dark-ui .news-card h3,.dark-ui .tiles .ico,.dark-ui .btn.alt{color:#8fc3ff}
.dark-ui .btn.alt{border-color:#8fc3ff}
.dark-ui .emblem{color:#8fc3ff}
.dark-ui .cookie{color:#111}
.dark-ui .tools,.dark-ui footer.site,.dark-ui.hd-dark .brandbar,.dark-ui.hd-dark nav.main{background:#0c0e11}
.dark-ui .copy{background:#000}
.dark-ui .tiles a,.dark-ui .qcard a{color:var(--ink)}
/* high contrast mode */
body.hc{--ink:#fff;--gray:#fff;--paper:#000;--ground:#000;--line:#fff;--p:#000;--pd:#000;--tint:#000;--a:#ff0;--on-a:#000;--focus:#0ff;background:#000;color:#fff}
body.hc a{color:#ff0}
body.hc .btn,body.hc nav.main a,body.hc .inline-nav a,body.hc .tools a,body.hc footer a,body.hc .hero a,body.hc .tag,body.hc .tbl th,body.hc .stats b,body.hc .news-card h3{color:#ff0}
body.hc .btn{border-color:#ff0}
body.hc .hero,body.hc .tools,body.hc nav.main,body.hc footer.site,body.hc .brandbar{background:#000;border-block:2px solid #fff}
body.hc .card,body.hc .tiles a,body.hc .stats div,body.hc .qcard,body.hc .tbl,body.hc .news-list ul,body.hc .news-featured li{box-shadow:none;border:2px solid #fff}
body.hc .tiles .ico,body.hc .datebox,body.hc .thumb,body.hc .emblem,body.hc .qcard a,body.hc .portrait{background:#000;border:2px solid #ff0;color:#ff0}
body.hc nav.main ul,body.hc .inline-nav{background:#000}
body.hc nav.main a[aria-current],body.hc .inline-nav a[aria-current]{outline:2px solid #ff0}
body.hc .cookie{background:#000;color:#fff;border-color:#ff0}
body.hc .cookie a{color:#ff0}
body.hc .hsearch button,body.hc .hero-search .big button{background:#ff0;color:#000}
body.hc .hero-search .big{background:#000;border:2px solid #fff}
body.hc .hero-search .big input{color:#fff}
/* responsive */
@media(max-width:900px){
 .hero-split .wrap,.hero-leader .wrap,.news-featured,.two,footer.site .cols{grid-template-columns:1fr}
 .hero-leader .wrap{justify-items:center;text-align:center}
 .navtoggle{display:block}
 nav.main{padding:0}
 nav.main ul{display:none;flex-direction:column;border-radius:0}
 nav.main.open ul{display:flex}
 .hd-pill nav.main{display:block}
 .hd-pill .inline-nav{display:none}
 .hd-pill .brandbar{position:static}
 .hsearch input{min-width:0;width:100%}
 .overlap{margin-top:-2.5rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.tools,.cookie,nav.main,.navtoggle{display:none}}

/* photo layer: image under a brand-colour scrim so white text stays AA on any photo */
.hero-photo{position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,color-mix(in srgb,var(--pd) 92%,transparent),color-mix(in srgb,var(--pd) 84%,transparent) 55%,color-mix(in srgb,var(--pd) 79%,transparent)),var(--hero-img) center/cover no-repeat;transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px + var(--sy,0px)),0);transition:transform .35s ease-out;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{scale:1.06}to{scale:1.15}}
body.no-motion .hero-photo{animation:none}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none}}
body.hc .hero-photo{display:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb{background:var(--tint)}
.hero .deco{opacity:.3;width:min(34vw,420px)}
/* people photos: soften so faces never compete with the headline */
.t08 .hero-photo,.t14 .hero-photo{inset:-10px;filter:blur(3px)}
.t12 .hero-photo{inset:-16px;filter:blur(7px)}

/* Government Web Standard 3.0 bottom information area (earlier designs) */
.stdinfo{background:#f4f6f8;color:#2d3236;padding:36px 0 26px;font-size:.9375rem;line-height:1.7;border-top:1px solid #e1e6eb}.stdinfo .sg{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:28px}@media(max-width:900px){.stdinfo .sg{grid-template-columns:1fr}}.stdinfo address{font-style:normal}.stdinfo b{display:block;margin-bottom:4px}.stdinfo a{color:#17467c}.stdinfo .std-links{display:flex;flex-wrap:wrap;gap:0 18px;align-content:start}.stdinfo .std-links a,.stdinfo .std-pol a{display:inline-flex;align-items:center;min-height:44px}.stdinfo .std-pol{display:grid}.stdinfo .vs{margin:8px 0 0}.stdinfo .dc{margin:18px 0 0;color:#4a525a;border-top:1px solid #dde3e9;padding-top:14px}.stdinfo time{color:inherit}
.tools .tsearch{display:flex;align-items:center}.tools .tsearch input{min-height:36px;min-width:170px;padding:0 12px;border:1px solid rgba(255,255,255,.7);border-radius:999px 0 0 999px;background:transparent;color:#fff;font:inherit}.tools .tsearch input::placeholder{color:#e6e6e6}.tools .tsearch button{min-height:36px;min-width:40px;border:1px solid rgba(255,255,255,.7);border-left:0;border-radius:0 999px 999px 0;background:transparent;color:#fff;cursor:pointer}

body .stdinfo{background:#f4f6f8;color:#2d3236}body .stdinfo *{color:#2d3236}body .stdinfo a{color:#17467c}body .stdinfo .dc,body .stdinfo .dc *{color:#4a525a}