:root{
  --bg:#f5f7fb;--card:#fff;--ink:#14213d;--mute:#64708a;--line:#e4e8f1;
  --pri:#0b4a8b;--pri2:#2f6fd1;--navy:#06264d;--hot:#e8483f;--acc:#eaf1fb;--good:#2b8a3e;--bad:#e03131;
  --c-work:#3b5bdb;--c-activity:#e8590c;--c-news:#0c8599;--c-knowledge:#2b8a3e;--c-resource:#ae3ec9;
  --r:18px;--sh:0 1px 2px rgba(20,33,61,.04),0 10px 30px rgba(20,33,61,.08);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1117;--card:#161b26;--ink:#e7eaf2;--mute:#99a2b8;--line:#262d3d;
  --pri:#4d8fe0;--pri2:#74a8f0;--navy:#071a33;--hot:#f06a62;--acc:#17243a;
  --c-work:#748ffc;--c-activity:#ff922b;--c-news:#3bc9db;--c-knowledge:#69db7c;--c-resource:#da77f2;
  --sh:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:180px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 "Sarabun",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Prompt","Sarabun",sans-serif;line-height:1.3}
a{color:var(--pri)}img{max-width:100%}
.wrap{max-width:1140px;margin:auto;padding:0 16px}

/* Top bar (Astra style: utility bar + white header + navy nav) */
.utility{background:var(--navy);color:#cdd8ec;font-size:.82rem}
.utility .wrap{display:flex;justify-content:space-between;gap:12px;height:34px;align-items:center}
.utility span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.utility a{color:#fff;text-decoration:none}
.top{position:sticky;top:0;z-index:20;background:var(--card);box-shadow:0 2px 12px rgba(10,30,70,.08)}
.topin{display:flex;align-items:center;gap:18px;height:72px}
.search{flex:1;max-width:420px;margin-left:auto;display:flex;border:2px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s}
.search:focus-within{border-color:var(--pri)}
.search input{border:0;margin:0;border-radius:0;background:transparent;box-shadow:none!important}
.search button{border-radius:0;padding:0 16px;font-size:1.3rem;background:var(--hot)}
.navbar{background:var(--pri)}
.navbar .mainnav{display:flex;gap:0;margin:0;overflow-x:auto;scrollbar-width:none}
.navbar .mainnav a{color:#e6ecf8;border-radius:0;padding:13px 18px;font-weight:600}
.navbar .mainnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.navbar .mainnav a.on{background:var(--hot);color:#fff}
.tabbar{display:none}
@media (max-width:980px){
  .burger{display:none!important}
  .navbar{display:none}
  .topin{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:10px}
  .search{max-width:none;flex:1 1 100%;order:3}
  .utility{display:none}
  .top{position:static}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(10,30,70,.08);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px 7px;font-size:.72rem;font-weight:600;color:var(--mute);text-decoration:none;min-height:56px;justify-content:center}
  .tabbar a i{font-style:normal;font-size:1.25rem;line-height:1;filter:grayscale(1);opacity:.7}
  .tabbar a.on{color:var(--pri)}.tabbar a.on i{filter:none;opacity:1}
  body{padding-bottom:70px}
  nav.toc{top:0}
}

/* Home banner + profile */
.banner{display:grid;grid-template-columns:1fr 280px;gap:18px;margin-top:20px}
.slider{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:var(--pri)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;aspect-ratio:16/8;min-height:300px;overflow:hidden;color:#fff;text-decoration:none}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 26px 34px;background:linear-gradient(transparent,rgba(5,15,40,.85))}
.slide .cap h2{margin:8px 0 2px;font-size:clamp(1.15rem,2.6vw,1.7rem)}.slide .cap time{opacity:.85;font-size:.88rem}
.slide.intro{background:linear-gradient(135deg,var(--navy) 0%,var(--pri) 60%,#2f6fd1 100%);display:flex;align-items:center}
.slide.intro .si{position:relative;padding:28px 32px}
.slide.intro h1{margin:.5rem 0 .2rem;font-size:clamp(1.6rem,4vw,2.6rem)}.slide.intro p{margin:0;opacity:.9}
.dots{position:absolute;right:18px;bottom:14px;display:flex;gap:6px}
.dots button{width:9px;height:9px;padding:0;border-radius:99px;background:rgba(255,255,255,.5);transition:.3s}
.dots button.on{width:26px;background:#fff}
.profile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;box-shadow:var(--sh)}
.profile .avatar{width:120px;height:120px;margin-bottom:10px;background:linear-gradient(135deg,var(--pri),var(--hot))}
.profile b{font:600 1.1rem "Prompt"}.profile small{color:var(--mute);font-size:.86rem}
.profile .btn{margin-top:auto;margin-top:14px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.feat{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.25s}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--pri)}
.feat i{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.5rem;background:var(--acc);border:2px solid color-mix(in srgb,var(--pri) 30%,transparent)}
.feat b{display:block;font:600 1rem "Prompt"}.feat small{color:var(--mute);font-size:.84rem}
@media (max-width:900px){
  .banner{grid-template-columns:1fr;margin-top:12px}
  .profile{flex-direction:row;flex-wrap:wrap;text-align:left;justify-content:flex-start;padding:14px;gap:2px 12px}
  .profile .avatar{width:56px;height:56px;margin:0}
  .profile b,.profile small{flex-basis:calc(100% - 70px)}
  .profile .btn{display:none}
  .features{grid-template-columns:1fr 1fr;gap:10px}
  .feat{padding:12px;gap:10px;flex-direction:column;text-align:center}
  .feat i{width:46px;height:46px}
  .slide{min-height:220px;aspect-ratio:4/3}
  .slide .cap{padding:40px 16px 30px}
  .slide.intro .si{padding:20px}
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand b{display:block;font:600 1rem "Prompt";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;color:var(--mute);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.logo{flex:none;width:40px;height:40px;border-radius:12px;overflow:hidden;display:grid;place-items:center;color:#fff;font:600 1.1rem "Prompt";background:linear-gradient(135deg,var(--pri),var(--pri2))}
.logo img{width:100%;height:100%;object-fit:cover}
.mainnav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--mute);font-weight:500;font-size:.95rem;white-space:nowrap;transition:.2s}
.mainnav a:hover{color:var(--ink);background:var(--acc)}
.mainnav a.on{color:var(--pri);background:var(--acc)}
.burger{display:none;margin-left:auto;background:none;color:var(--ink);font-size:1.5rem;padding:4px 10px}

/* Hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:64px 0 32px;background:linear-gradient(135deg,var(--navy) 0%,var(--pri) 55%,var(--pri2) 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.b1{width:440px;height:440px;background:#4dabf7;top:-170px;right:-80px}
.b2{width:340px;height:340px;background:#e599f7;bottom:-190px;left:-60px}
.heroin{position:relative;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.avatar{width:148px;height:148px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.3));flex:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.avatar img,.avatar span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#2c3e8f;color:#fff;font:600 3rem "Prompt"}
.eyebrow{display:inline-block;font-size:.82rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);padding:4px 12px;border-radius:99px}
.hero h1{margin:.5rem 0 .2rem;font-size:clamp(1.8rem,4.4vw,2.8rem)}
.hero .role{margin:0;font-size:1.12rem;font-weight:500}.hero .org{margin:0;opacity:.85}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.stats{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:36px}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 16px;color:#fff;text-decoration:none;backdrop-filter:blur(8px);transition:transform .2s,background .2s}
.stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.stat b{display:block;font:700 1.8rem "Prompt"}.stat span{font-size:.88rem;opacity:.9}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:12px;text-decoration:none;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.light{background:#fff;color:var(--pri)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.6)}
.btn.ghost{background:var(--acc);color:var(--pri)}

/* Page head */
.phead{background:linear-gradient(135deg,var(--navy),var(--pri) 60%,var(--pri2));color:#fff;padding:44px 0 34px}
.phead h1{margin:0;font-size:clamp(1.6rem,3.6vw,2.3rem)}.phead p{margin:.3rem 0 0;opacity:.88}
.years{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.years span{font-size:.88rem;opacity:.85;margin-right:4px}
.years a{color:#fff;text-decoration:none;font:600 .95rem "Prompt";padding:5px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.35);transition:.2s}
.years a:hover{background:rgba(255,255,255,.15)}.years a.on{background:#fff;color:var(--pri);border-color:#fff}

/* Home blocks */
.blk{margin:44px 0}
.bh{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.bh h2{margin:0;font-size:1.5rem;position:relative;padding-bottom:6px}
.bh h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.bh a{text-decoration:none;font-weight:600;white-space:nowrap}
.newsgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.newslist{display:flex;flex-direction:column;gap:10px}
.newslist a{display:block;padding:14px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.2s}
.newslist a:hover{border-color:var(--pri);transform:translateX(4px)}
.newslist time{display:block;font-size:.8rem;color:var(--c-news);font-weight:600}
@media (max-width:760px){.newsgrid{grid-template-columns:1fr}}
.pagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pabox{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.25s}
.pabox:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}
.pabox small{color:var(--mute)}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--acc)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.06)}
.thumb.ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--pri2) 18%,var(--acc)))}
.thumb.ph span{font:600 1.15rem "Prompt";color:var(--pri)}
.play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-style:normal}
.cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta time{font-size:.8rem;color:var(--mute)}
.cb h4{margin:2px 0;font-size:1.02rem}
.cb p{margin:0;font-size:.9rem;color:var(--mute)}
.ind{margin-top:auto;padding-top:8px;color:var(--pri);font-size:.8rem}
.tag{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:99px;color:#fff;background:var(--c-work)}
.t-activity{--tc:var(--c-activity)}.t-news{--tc:var(--c-news)}.t-knowledge{--tc:var(--c-knowledge)}.t-resource{--tc:var(--c-resource)}.t-work{--tc:var(--c-work)}
.tag.t-activity,.tag.t-news,.tag.t-knowledge,.tag.t-resource,.tag.t-work{background:var(--tc)}
.thumb.ph.t-activity span,.thumb.ph.t-news span,.thumb.ph.t-knowledge span,.thumb.ph.t-resource span{color:var(--tc)}
.empty{color:var(--mute);font-size:.92rem;margin:0;padding:14px 18px;border:1px dashed var(--line);border-radius:12px}

/* PA sections */
nav.toc{position:sticky;top:118px;z-index:10;background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav.toc .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
nav.toc a{flex:none;padding:7px 14px;border-radius:99px;text-decoration:none;color:var(--mute);font-weight:500;font-size:.92rem;transition:.2s}
nav.toc a:hover{color:var(--ink);background:var(--acc)}
nav.toc a.on{color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
section.d{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:24px 0;padding:28px;box-shadow:var(--sh)}
.dh{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dh h2{margin:0;font-size:1.35rem;flex:1}
.num{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font:600 1.05rem "Prompt";background:linear-gradient(135deg,var(--pri),var(--pri2))}
.sub{margin-top:24px}
.sub h3{display:flex;align-items:center;gap:10px;font-size:1.02rem;margin:0 0 12px;padding-left:12px;border-left:3px solid var(--pri)}
.sub h3 small{font:500 .78rem "Sarabun";color:var(--pri);background:var(--acc);padding:1px 9px;border-radius:99px}
.challenge{margin:0 0 12px;padding:16px 20px;border-radius:14px;background:var(--acc);border-left:4px solid var(--pri2);font-size:1.05rem}

/* List page */
.filter{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 8px}
.filter input{flex:1 1 220px;margin:0}.filter select{flex:1 1 180px;margin:0;width:auto}
.count{color:var(--mute);font-size:.9rem}
.pager{display:flex;gap:6px;justify-content:center;margin:30px 0}
.pager a{min-width:40px;text-align:center;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.pager a.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* Single post */
.post{max-width:880px;padding-top:26px;padding-bottom:40px}
.crumb{font-size:.88rem;color:var(--mute);margin-bottom:14px}.crumb a{text-decoration:none}
.post h1{font-size:clamp(1.6rem,3.6vw,2.3rem);margin:10px 0}
.pmeta{display:flex;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:.92rem;margin-bottom:20px}
.pmeta a{text-decoration:none}
.hero-img{margin:0 0 22px}.hero-img img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r);cursor:zoom-in;box-shadow:var(--sh)}
.video{position:relative;aspect-ratio:16/9;margin:0 0 22px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.body{font-size:1.06rem;line-height:1.9}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.h2{font-size:1.25rem;margin:34px 0 14px}.h2 small{font:500 .85rem "Sarabun";color:var(--mute)}
.gal{columns:3 220px;column-gap:10px}
.gal img{width:100%;margin-bottom:10px;border-radius:12px;cursor:zoom-in;break-inside:avoid;transition:opacity .2s}
.gal img:hover{opacity:.85}
dialog#lbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
dialog#lbox::backdrop{background:rgba(5,8,15,.9)}
dialog#lbox img{max-width:92vw;max-height:88vh;border-radius:10px;display:block}
dialog#lbox button{position:fixed;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:1.6rem;cursor:pointer}
dialog#lbox .x{top:16px;right:16px}.pv{left:16px;top:50%}.nx{right:16px;top:50%}

/* About */
.about{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}
.avatar.big{width:180px;height:180px}
.about h2{margin:0}.about .role{color:var(--mute);margin:.2rem 0 1rem}
.about>div:last-child{flex:1 1 320px}
.contact{margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--acc)}

/* Footer */
.foot{margin-top:60px;background:var(--card);border-top:1px solid var(--line);padding:34px 0;color:var(--mute);font-size:.92rem}
.fin{display:grid;grid-template-columns:1.2fr 2fr auto;gap:24px;align-items:start}
.fin b{color:var(--ink)}
.fin div:nth-child(2){display:flex;flex-wrap:wrap;gap:6px 18px}.fin a{text-decoration:none}
@media (max-width:760px){.fin{grid-template-columns:1fr}}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:600px){
  .hero{padding-top:40px}.heroin{gap:18px}.avatar{width:100px;height:100px}
  section.d{padding:20px 16px;border-radius:14px}.dh h2{font-size:1.15rem}
}

/* Admin & forms */
.box{max-width:420px;margin:60px auto;background:var(--card);padding:28px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh)}
label{display:block;margin:12px 0;font-weight:500;font-size:.93rem}
input,textarea,select{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 20%,transparent)}
button{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;padding:10px 20px;border-radius:10px;font:500 1rem "Sarabun";cursor:pointer;transition:filter .2s}
button:hover{filter:brightness(1.1)}
.err{color:var(--bad)}.ok{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent);padding:10px 14px;border-radius:10px}
table{width:100%;border-collapse:collapse}td,th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.adm{padding:24px 16px}
.adm nav{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.adm nav a{padding:6px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.adm .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.adm .imgs{display:flex;flex-wrap:wrap;gap:10px}
.adm .imgs label{margin:0;text-align:center;font-size:.8rem}
.adm .imgs img{width:110px;height:80px;object-fit:cover;border-radius:8px;display:block}
.adm .imgs input{width:auto}
.adm .tag{margin-right:4px}
.inline{display:inline}.btn-del{background:var(--bad);padding:5px 12px;font-size:.88rem}
.hint{color:var(--mute);font-size:.82rem;font-weight:400}

/* ================= Pastel Art theme (Divi-inspired) ================= */
:root{
  --bg:#fdf8ff;--card:#ffffff;--ink:#2b2350;--mute:#7a7396;--line:#efe6fb;
  --pri:#7c5cff;--pri2:#ff7eb6;--navy:#3b2d7a;--hot:#ff6f91;--acc:#f4efff;
  --p1:#ffd6e7;--p2:#d8f3ff;--p3:#e5dcff;--p4:#fff1c9;--p5:#d6f8e6;--p6:#ffe2cf;
  --c-work:#7c5cff;--c-activity:#ff8a5c;--c-news:#2bb5d8;--c-knowledge:#2fbf71;--c-resource:#d45cff;
  --r:24px;--sh:0 2px 4px rgba(124,92,255,.05),0 14px 34px rgba(124,92,255,.12);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#17132a;--card:#211b3a;--ink:#f1edff;--mute:#b3aad6;--line:#342c57;
  --pri:#a48bff;--pri2:#ff9cc8;--navy:#120e24;--hot:#ff8fab;--acc:#2a2348;
  --p1:#4a2a3d;--p2:#1f3a4a;--p3:#332a5c;--p4:#4a3f22;--p5:#1f4334;--p6:#4a3326;
}}
h1,h2,h3,h4,.brand b,.feat b,.profile b,.num,.stat b{font-family:"Mitr","Prompt",sans-serif;font-weight:500}
body{background:
  radial-gradient(900px 500px at 100% -10%,color-mix(in srgb,var(--p1) 70%,transparent),transparent 60%),
  radial-gradient(800px 500px at -10% 30%,color-mix(in srgb,var(--p2) 60%,transparent),transparent 60%),
  radial-gradient(700px 500px at 110% 80%,color-mix(in srgb,var(--p3) 60%,transparent),transparent 60%),var(--bg);background-attachment:fixed}

/* header */
.utility{background:linear-gradient(90deg,var(--pri),var(--pri2))}
.top{background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(16px);box-shadow:0 4px 20px rgba(124,92,255,.08)}
.logo{border-radius:16px;background:linear-gradient(135deg,var(--pri),var(--pri2));transform:rotate(-4deg)}
.search{border-radius:99px;border-color:var(--line);background:var(--card)}
.search input{padding-left:18px}
.search button{background:linear-gradient(135deg,var(--pri),var(--pri2));border-radius:99px;margin:3px;padding:0 14px}
.navbar{background:transparent;border-top:1px solid var(--line)}
.navbar .mainnav{gap:6px;padding-top:8px;padding-bottom:8px}
.navbar .mainnav a{color:var(--ink);border-radius:99px;padding:8px 18px}
.navbar .mainnav a:hover{background:var(--acc);color:var(--pri)}
.navbar .mainnav a.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 16px rgba(124,92,255,.3)}
nav.toc{top:132px}

/* buttons & tags */
.btn{border-radius:99px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 20px rgba(124,92,255,.25)}
.btn.light{background:#fff;color:var(--pri)}.btn.ghost{background:var(--acc);color:var(--pri);box-shadow:none}
.tag{border-radius:99px;padding:3px 12px}
button{border-radius:99px}

/* banner */
.slider{border-radius:28px}
.slide.intro{background:linear-gradient(135deg,#8f6bff 0%,#c27dff 45%,#ff8fb8 100%)}
.slide.intro::before,.slide.intro::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.slide.intro::before{width:220px;height:220px;right:6%;top:-40px;background:radial-gradient(circle,#ffe9a8 0 40%,transparent 41%);opacity:.9}
.slide.intro::after{width:120px;height:120px;right:28%;bottom:-30px;border:14px solid rgba(255,255,255,.35)}
.slide.intro h1::after{content:" ✨"}
.slide .cap{background:linear-gradient(transparent,rgba(43,35,80,.82))}
.profile{border-radius:28px;background:linear-gradient(180deg,var(--p3),var(--card) 55%)}
.profile .avatar{background:linear-gradient(135deg,var(--pri),var(--pri2),#ffd36e)}

/* feature tiles: pastel each */
.feat{border:0;border-radius:24px}
.feat:nth-child(1){background:var(--p3)}.feat:nth-child(2){background:var(--p6)}.feat:nth-child(3){background:var(--p5)}.feat:nth-child(4){background:var(--p1)}
.feat i{background:#fff;border:0;box-shadow:0 6px 14px rgba(43,35,80,.1)}
.feat:hover{transform:translateY(-4px) rotate(-1deg)}

/* section headings with sparkle */
.bh h2::after{height:6px;width:56px;background:linear-gradient(90deg,var(--pri),var(--pri2),#ffd36e)}
.bh h2::before{content:"✦ ";color:var(--pri2)}
.phead{background:linear-gradient(135deg,#8f6bff,#c27dff 50%,#ff8fb8);position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-80px;border-radius:50%;background:radial-gradient(circle,#ffe9a8 0 38%,transparent 39%);opacity:.8}

/* cards: Divi-like colorful tiles */
.card{border:0;border-radius:24px;box-shadow:0 2px 6px rgba(43,35,80,.05)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.thumb{margin:10px 10px 0;border-radius:18px}
.grid .card:nth-child(6n+1) .thumb{background:var(--p1)}.grid .card:nth-child(6n+2) .thumb{background:var(--p2)}
.grid .card:nth-child(6n+3) .thumb{background:var(--p3)}.grid .card:nth-child(6n+4) .thumb{background:var(--p4)}
.grid .card:nth-child(6n+5) .thumb{background:var(--p5)}.grid .card:nth-child(6n+6) .thumb{background:var(--p6)}
.thumb.ph{background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7) 0 18%,transparent 19%),radial-gradient(circle at 15% 85%,rgba(255,255,255,.5) 0 12%,transparent 13%)}
.thumb.ph span{font-family:"Mitr";font-size:1.25rem}
.ind{color:var(--pri)}

/* PA & blocks */
section.d{border:0;border-radius:28px}
.num{border-radius:14px;background:linear-gradient(135deg,var(--pri),var(--pri2));transform:rotate(-6deg)}
.pabox{border:0;border-radius:24px}
.pagrid .pabox:nth-child(5n+1){background:var(--p3)}.pagrid .pabox:nth-child(5n+2){background:var(--p2)}
.pagrid .pabox:nth-child(5n+3){background:var(--p5)}.pagrid .pabox:nth-child(5n+4){background:var(--p4)}.pagrid .pabox:nth-child(5n+5){background:var(--p1)}
.challenge{background:linear-gradient(135deg,var(--p4),var(--p1));border-left:0;border-radius:20px}
.newslist a{border:0;border-radius:18px}
.newslist a:nth-child(3n+1){border-left:5px solid var(--c-news)}.newslist a:nth-child(3n+2){border-left:5px solid var(--pri2)}.newslist a:nth-child(3n+3){border-left:5px solid #ffc94d}
.sub h3{border-left:0;padding-left:0}.sub h3::before{content:"";width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--pri),var(--pri2));transform:rotate(45deg)}
.pager a.on{background:linear-gradient(135deg,var(--pri),var(--pri2));border:0}
.foot{background:linear-gradient(180deg,transparent,var(--p3));border-top:0}

/* mobile tab bar */
@media (max-width:980px){
  .tabbar{border-radius:22px 22px 0 0;border-top:0;box-shadow:0 -6px 24px rgba(124,92,255,.15)}
  .tabbar a.on{color:var(--pri)}
  .tabbar a.on i{background:linear-gradient(135deg,var(--p3),var(--p1));border-radius:12px;padding:3px 10px}
  nav.toc{top:0}
}

/* ================= Green Education watercolor theme ================= */
:root{
  --bg:#fbf9f0;--card:#fffefa;--ink:#24452a;--mute:#6d7f68;--line:#e6ecd6;
  --pri:#3f8f3a;--pri2:#7cbf4e;--navy:#1f5a2a;--hot:#f2a93b;--acc:#eef6e1;--sky:#cfe9f5;
  --p1:#e3f2c9;--p2:#d9eff8;--p3:#fff2c2;--p4:#eaf5d8;--p5:#d8efe2;--p6:#fde6cf;
  --c-work:#3f8f3a;--c-activity:#e88b3a;--c-news:#3a9ac4;--c-knowledge:#5aa83a;--c-resource:#8a6ac4;
  --r:26px;--sh:0 2px 4px rgba(63,110,40,.05),0 14px 32px rgba(63,110,40,.12);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141c14;--card:#1c271c;--ink:#e8f2e0;--mute:#a7b9a0;--line:#2d3d2c;
  --pri:#86c66a;--pri2:#b4dd84;--navy:#0f1a10;--hot:#f2b85c;--acc:#223322;--sky:#1d3340;
  --p1:#2a3b22;--p2:#1f3540;--p3:#3d3820;--p4:#26361f;--p5:#1f3a2c;--p6:#3d2e20;
}}
h1,h2,h3,h4,.brand b,.feat b,.profile b,.num,.stat b{color:inherit}
body{background:
  radial-gradient(700px 420px at 105% -5%,color-mix(in srgb,var(--sky) 80%,transparent),transparent 65%),
  radial-gradient(700px 500px at -10% 35%,color-mix(in srgb,var(--p1) 80%,transparent),transparent 62%),
  radial-gradient(600px 400px at 100% 85%,color-mix(in srgb,var(--p3) 70%,transparent),transparent 62%),var(--bg);background-attachment:fixed}
h1,h2,.bh h2{color:var(--navy)}
@media (prefers-color-scheme:dark){h1,h2,.bh h2{color:var(--pri2)}}

/* decorations */
.deco{position:absolute;pointer-events:none;z-index:0}
.deco.branch{width:min(42%,360px);top:-6px}
.deco.branch.tl{left:-10px}
.deco.branch.tr{right:-10px;transform:scaleX(-1)}
.deco.sun{width:90px;top:22px;left:7%;animation:bob 6s ease-in-out infinite}
.deco.cloud{width:130px;opacity:.95;animation:drift 18s ease-in-out infinite alternate}
.deco.cloud.c1{top:30%;right:8%}.deco.cloud.c2{top:62%;left:4%;width:100px;animation-duration:24s}
.deco.sprout{width:64px;left:50%;bottom:62px;transform:translateX(-50%)}
.deco.hills{left:0;bottom:-2px;width:100%;height:70px}
.deco.hills.top{position:relative;display:block;height:50px;margin-top:-50px}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes drift{to{transform:translateX(-30px)}}
@media (prefers-reduced-motion:reduce){.deco{animation:none!important}}

/* header */
.utility{background:linear-gradient(90deg,var(--navy),var(--pri))}
.logo{background:linear-gradient(135deg,var(--pri),var(--pri2));transform:rotate(-4deg);border-radius:50% 50% 50% 12px}
.search button,.btn,.navbar .mainnav a.on,.pager a.on,.num{background:linear-gradient(135deg,var(--pri),var(--pri2))}
.btn{box-shadow:0 8px 20px rgba(63,143,58,.25)}
.btn.light{background:#fff;color:var(--pri)}
.btn.outline{border-color:var(--pri);color:var(--pri);background:rgba(255,255,255,.6)}
.navbar .mainnav a.on{box-shadow:0 6px 16px rgba(63,143,58,.28)}
.navbar .mainnav a:hover{color:var(--pri)}

/* intro slide = watercolor scene */
.slide.intro{background:linear-gradient(180deg,#e4f3fa 0%,#f6fbef 55%,#fbf9f0 100%);color:var(--ink);justify-content:center;text-align:center}
.slide.intro::before,.slide.intro::after{display:none}
.slide.intro .si{z-index:1;padding:40px 24px 120px;max-width:620px}
.slide.intro .si::before{content:"";position:absolute;inset:6px -20px 70px;z-index:-1;border-radius:46% 54% 50% 50%/55% 50% 50% 45%;background:radial-gradient(ellipse at center,rgba(214,238,170,.85),rgba(214,238,170,.35) 60%,transparent 72%);filter:blur(4px)}
.slide.intro h1{color:#2f7a30;font-size:clamp(1.7rem,4.4vw,2.8rem)}
.slide.intro h1::after{content:" 🌱"}
.slide.intro p{color:var(--ink)}
.slide.intro .eyebrow{background:rgba(255,255,255,.75);border-color:#cfe3b2;color:var(--pri)}
@media (prefers-color-scheme:dark){.slide.intro{background:linear-gradient(180deg,#1d3340,#1c271c 60%)}.slide.intro h1{color:var(--pri2)}}
.slide .cap{background:linear-gradient(transparent,rgba(25,55,25,.82))}
.dots button.on{background:#fff}

/* page header scene */
.phead{background:linear-gradient(180deg,#dff0f8 0%,#f3f9e8 70%,var(--bg) 100%);color:var(--ink);padding:54px 0 70px;position:relative;overflow:hidden}
.phead::after{display:none}
.phead .wrap{position:relative;z-index:1}
.phead p{opacity:1;color:var(--mute)}
.phead .deco.sun{left:auto;right:16%;top:16px;width:72px}
.years a{color:var(--pri);border-color:#bfdca2;background:rgba(255,255,255,.7)}
.years a.on{background:var(--pri);color:#fff;border-color:var(--pri)}
@media (prefers-color-scheme:dark){.phead{background:linear-gradient(180deg,#1d3340,var(--bg))}}

/* profile & tiles */
.profile{background:linear-gradient(180deg,var(--p1),var(--card) 60%)}
.profile .avatar{background:linear-gradient(135deg,var(--pri2),#f7c844)}
.feat:nth-child(1){background:var(--p1)}.feat:nth-child(2){background:var(--p6)}.feat:nth-child(3){background:var(--p2)}.feat:nth-child(4){background:var(--p3)}
.bh h2::before{content:"🍃 "}
.bh h2::after{background:linear-gradient(90deg,var(--pri),var(--pri2),#f7c844);border-radius:6px;filter:url(#wc)}
.challenge{background:linear-gradient(135deg,var(--p3),var(--p1))}
.sub h3::before{background:var(--pri2);border-radius:60% 0 60% 0;transform:rotate(0)}
.newslist a:nth-child(3n+1){border-left-color:var(--c-news)}.newslist a:nth-child(3n+2){border-left-color:var(--pri2)}.newslist a:nth-child(3n+3){border-left-color:#f7c844}

/* cards with watercolor wash */
.card,.pabox,section.d,.feat,.profile,.newslist a{position:relative}
.grid .card:nth-child(6n+1) .thumb{background:var(--p1)}.grid .card:nth-child(6n+2) .thumb{background:var(--p2)}
.grid .card:nth-child(6n+3) .thumb{background:var(--p3)}.grid .card:nth-child(6n+4) .thumb{background:var(--p4)}
.grid .card:nth-child(6n+5) .thumb{background:var(--p5)}.grid .card:nth-child(6n+6) .thumb{background:var(--p6)}
.thumb{border-radius:20px 20px 20px 6px}
.thumb.ph{background-image:radial-gradient(ellipse at 75% 25%,rgba(255,255,255,.75) 0 16%,transparent 30%),radial-gradient(ellipse at 20% 85%,rgba(124,191,78,.25) 0 14%,transparent 34%)}
.thumb.ph span::before{content:"🌿 "}
.pagrid .pabox:nth-child(5n+1){background:var(--p1)}.pagrid .pabox:nth-child(5n+2){background:var(--p2)}
.pagrid .pabox:nth-child(5n+3){background:var(--p3)}.pagrid .pabox:nth-child(5n+4){background:var(--p5)}.pagrid .pabox:nth-child(5n+5){background:var(--p6)}
section.d::before{content:"";position:absolute;right:18px;top:16px;width:44px;height:22px;opacity:.35;background:radial-gradient(ellipse at 50% 50%,var(--pri2) 0 45%,transparent 47%);border-radius:50%;transform:rotate(-25deg)}

/* footer */
.foot{background:linear-gradient(180deg,#9fd06f 0,#cfe9a8 50px,var(--p4) 100%);padding-top:0;color:var(--ink)}
.foot .fin{padding-top:24px}.foot a{color:var(--navy)}
@media (prefers-color-scheme:dark){.foot{background:var(--card)}}

/* mobile */
@media (max-width:980px){
  .tabbar{box-shadow:0 -6px 24px rgba(63,110,40,.15)}
  .tabbar a.on i{background:linear-gradient(135deg,var(--p1),var(--p3))}
  .deco.branch{width:55%}.deco.sun{width:60px;top:14px}.deco.cloud{width:90px}.deco.cloud.c2{display:none}
  .slide.intro .si{padding:34px 16px 100px}
}
@media (max-width:900px){.slide{aspect-ratio:auto;min-height:380px}}

/* ================= Cover banner + profile card (green & gold) ================= */
:root{--gold:#d9a93a;--gold2:#f3d77a;--deep:#0f5a2e}
@media (prefers-color-scheme:dark){:root{--deep:#7fc76a;--gold:#e8c25a;--gold2:#f6e29a}}
.banner{grid-template-columns:1fr}
.coverwrap{margin-top:18px}
.coverwrap img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 18px 40px rgba(15,90,46,.18);border:4px solid #fff;outline:1px solid var(--line)}

.pcard{position:relative;margin-top:22px;display:grid;grid-template-columns:200px 1fr minmax(260px,360px);gap:20px 28px;align-items:center;
  padding:28px;border-radius:30px;background:
  radial-gradient(400px 220px at 0% 0%,color-mix(in srgb,var(--p1) 90%,transparent),transparent 70%),
  radial-gradient(380px 220px at 100% 100%,color-mix(in srgb,var(--p3) 90%,transparent),transparent 70%),var(--card);
  box-shadow:var(--sh);border:1px solid var(--line);overflow:hidden}
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--deep),var(--pri2),var(--gold),var(--deep))}
.pc-photo{position:relative;justify-self:center}
.ring{width:190px;height:190px;border-radius:50%;padding:6px;background:conic-gradient(from 200deg,var(--gold),var(--gold2),var(--pri2),var(--deep),var(--gold));box-shadow:0 12px 30px rgba(15,90,46,.25)}
.ring img,.ring span{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%;display:grid;place-items:center;border:5px solid var(--card);background:var(--acc);font:600 4rem "Mitr";color:var(--deep)}
.pc-photo .leaf{position:absolute;width:44px;height:22px;border-radius:50% 0;background:linear-gradient(135deg,#b9e07a,#4f9a3a);opacity:.95}
.pc-photo .l1{left:-6px;bottom:24px;transform:rotate(-35deg)}.pc-photo .l2{right:-8px;top:18px;transform:rotate(145deg);width:34px;height:17px}
.pc-org{display:inline-block;font-size:.85rem;color:var(--mute);margin-bottom:4px}
.pc-name{margin:0;font:600 clamp(1.6rem,3.4vw,2.3rem) "Mitr";color:var(--deep)!important;line-height:1.25}
.pc-pos{display:inline-block;margin:8px 0 4px;padding:4px 18px;border-radius:99px;font:500 1.05rem "Mitr";color:#4a3300;background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 4px 12px rgba(217,169,58,.35)}
.pc-rank{margin:6px 0 12px;color:var(--ink);font-weight:500;line-height:1.6}
.pc-contact{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:99px;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s,box-shadow .2s}
.pill:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.pill.tel{background:var(--deep);color:#fff}
.pill.line{background:#06c755;color:#fff}.pill.line b{background:#fff;color:#06c755;border-radius:6px;padding:0 5px;font-size:.72rem}
.pill.mail{background:var(--acc);color:var(--deep)}
.pc-duty{align-self:stretch;padding:18px 18px 12px;border-radius:22px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.pc-duty h3{margin:0 0 10px;font:500 1.02rem "Mitr";color:var(--deep)}
.pc-duty ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-duty li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--acc);font-weight:500;font-size:.95rem;line-height:1.4}
.pc-duty li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 .9rem "Mitr";font-style:normal;color:#4a3300;background:linear-gradient(135deg,var(--gold2),var(--gold))}
.pc-duty li span{flex:none}
.pc-tag{grid-column:1/-1;text-align:center;padding:14px 18px;border-radius:18px;background:linear-gradient(90deg,var(--deep),#2f8a3f,var(--deep));color:#fff}
.pc-tag b{display:block;font:500 clamp(1.05rem,2.4vw,1.35rem) "Mitr"}
.pc-tag small{display:block;opacity:.85;margin-top:2px}
@media (prefers-color-scheme:dark){.pc-tag{background:linear-gradient(90deg,#1f4a26,#2c6a35,#1f4a26)}.pill.tel{color:#0f1a10}}
@media (max-width:980px){
  .pcard{grid-template-columns:150px 1fr;padding:22px}
  .ring{width:150px;height:150px}
  .pc-duty{grid-column:1/-1}
}
@media (max-width:600px){
  .coverwrap{margin-top:10px;padding:0 10px}.coverwrap img{border-width:3px;border-radius:16px}
  .pcard{grid-template-columns:1fr;text-align:center;padding:20px 16px;gap:14px;border-radius:24px}
  .ring{width:140px;height:140px}
  .pc-contact{justify-content:center}
  .pill{flex:1 1 100%;justify-content:center;padding:11px 16px}
  .pc-duty{text-align:left}
}

/* ================= PA dashboard ================= */
:root{--b0:#3f8f3a;--b1:#3a9ac4;--b2:#e88b3a;--b3:#d9a93a;--b4:#8a6ac4}
.c0{--cc:var(--b0)}.c1{--cc:var(--b1)}.c2{--cc:var(--b2)}.c3{--cc:var(--b3)}.c4{--cc:var(--b4)}
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:26px 0 10px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:var(--sh)}
.dcard h3{margin:0 0 14px;font:500 1.02rem "Mitr";color:var(--navy)}
.dcard h3 small{font:400 .82rem "Sarabun";color:var(--mute);margin-left:6px}
@media (prefers-color-scheme:dark){.dcard h3{color:var(--pri2)}}
.ringcard{grid-column:span 5;display:flex;align-items:center;gap:22px;background:linear-gradient(135deg,var(--p1),var(--card) 70%)}
.ring2{--v:0;flex:none;width:132px;height:132px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,var(--card) 76%,transparent 77%),conic-gradient(var(--pri) calc(var(--v)*1%),var(--line) 0)}
.ring2 b{font:600 2rem "Mitr";color:var(--pri);line-height:1}.ring2 small{color:var(--mute);font-size:.8rem}
.ringcard h3{margin-bottom:4px}
.big{margin:0;font:600 2rem "Mitr";color:var(--ink)}.big span{font:400 1rem "Sarabun";color:var(--mute)}
.muted{margin:4px 0 0;color:var(--mute);font-size:.92rem}
.kpis{grid-column:span 7;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:2px;justify-content:center;box-shadow:var(--sh)}
.kpi i{font-style:normal;font-size:1.4rem}
.kpi b{font:600 1.9rem "Mitr";color:var(--ink);line-height:1.2}.kpi b.sm{font-size:1.05rem;padding:6px 0}
.kpi span{color:var(--mute);font-size:.86rem}
.k1{background:var(--p1)}.k2{background:var(--p2)}.k3{background:var(--p3)}.k4{background:var(--p6)}
.bars{grid-column:span 7}
.bar{display:grid;grid-template-columns:minmax(150px,42%) 1fr 42px;align-items:center;gap:12px;padding:7px 0;text-decoration:none;color:var(--ink)}
.bar:hover .bl{color:var(--pri)}
.bl{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{height:12px;border-radius:99px;background:var(--acc);overflow:hidden}
.bf{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 70%,#fff),var(--cc));transition:width 1s ease}
.bv{font:500 .9rem "Mitr";text-align:right;color:var(--mute)}
.dash>.dcard:nth-child(4){grid-column:span 5}
.stack{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--acc);margin-bottom:14px}
.stack span{background:var(--tc)}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.legend li{display:flex;align-items:center;gap:8px;font-size:.9rem}
.legend i{width:12px;height:12px;border-radius:4px;background:var(--tc)}
.legend b{margin-left:auto;font-family:"Mitr";font-weight:500}
.months{grid-column:1/-1}
.mchart{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;height:150px;align-items:end}
.mc{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.mb{width:100%;max-width:38px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--pri2),var(--pri))}
.mv{font:500 .8rem "Mitr";color:var(--pri)}
.mc small{color:var(--mute);font-size:.75rem}

/* tools */
.patools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 6px;position:sticky;top:118px;z-index:9;padding:10px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px}
.seg button{background:none;color:var(--mute);padding:7px 16px;font-size:.92rem;box-shadow:none}
.seg button.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.ghostbtn{background:var(--card);color:var(--pri);border:1px solid var(--line);padding:8px 16px;font-size:.92rem}

/* indicator sections */
.pa{background:var(--card);border:1px solid var(--line);border-radius:24px;margin:16px 0;padding:20px 22px;box-shadow:var(--sh)}
.pah{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.pah .num{width:46px;height:46px;font-size:1.15rem;background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 75%,#fff),var(--cc));transform:none;border-radius:14px}
.pat{flex:1;min-width:0}
.pat h2{margin:0;font-size:1.2rem}
.pam{display:flex;align-items:center;gap:10px;margin-top:4px}
.mini{width:120px;height:7px;border-radius:99px;background:var(--acc);overflow:hidden}
.mini span{display:block;height:100%;background:var(--pri);border-radius:99px}
.pam small{color:var(--mute);font-size:.85rem}
.leaf{border-radius:16px;margin-top:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,var(--card));overflow:hidden}
.leaf summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;font-weight:500}
.leaf summary::-webkit-details-marker{display:none}
.leaf summary::after{content:"›";margin-left:6px;color:var(--mute);font-size:1.3rem;transition:transform .2s}
.leaf[open] summary::after{transform:rotate(90deg)}
.leaf.none summary{cursor:default;color:var(--mute)}.leaf.none summary::after{visibility:hidden}
.st{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:#fff;background:var(--pri)}
.leaf.none .st{background:transparent;border:2px dashed color-mix(in srgb,var(--mute) 50%,transparent)}
.lt{flex:1;min-width:0}
.cnt{flex:none;font-size:.8rem;padding:2px 10px;border-radius:99px;background:var(--acc);color:var(--pri);font-weight:600}
.cnt.no{background:transparent;color:var(--mute);font-weight:400}
.leafbody{padding:4px 16px 16px}
.pa>.leafbody{padding:0 0 6px}
#palist[data-f="has"] .leaf.none,#palist[data-f="none"] .leaf.has{display:none}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.grid.sm .cb p{display:none}
.grid.sm .cb h4{font-size:.95rem}
.grid.sm .ind{display:none}

@media (max-width:980px){
  .ringcard,.kpis,.bars,.dash>.dcard:nth-child(4){grid-column:1/-1}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .patools{top:0}
}
@media (max-width:600px){
  .dash{gap:12px;margin-top:16px}
  .dcard{padding:16px;border-radius:18px}
  .ringcard{gap:14px}.ring2{width:104px;height:104px}.ring2 b{font-size:1.6rem}.big{font-size:1.6rem}
  .kpi{padding:12px;border-radius:16px}.kpi b{font-size:1.5rem}
  .bar{grid-template-columns:1fr 38px;gap:4px 10px}.bl{grid-column:1/-1}
  .mchart{gap:4px;height:120px}.mc small{font-size:.65rem}
  .pa{padding:16px 14px;border-radius:18px}.pah .num{width:40px;height:40px}.pat h2{font-size:1.05rem}
  .leaf summary{padding:11px 12px;gap:10px;font-size:.93rem}
  .leafbody{padding:4px 10px 12px}
  .grid.sm{grid-template-columns:1fr 1fr;gap:10px}
  .grid.sm .cb{padding:10px}.grid.sm .meta time{display:none}
  .seg button{padding:7px 11px;font-size:.85rem}
}

/* ปีงบประมาณบนการ์ด / ภาพรวมทุกปี */
.meta .fy{font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:99px;color:var(--navy);background:var(--p3);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
@media (prefers-color-scheme:dark){.meta .fy{color:var(--gold2)}}
.mchart.yrs{justify-content:start;gap:18px}
.mchart.yrs .mc{text-decoration:none;cursor:pointer}
.mchart.yrs .mc:hover .mb{filter:brightness(1.1);transform:scaleY(1.03);transform-origin:bottom}
.mchart.yrs .mb{max-width:56px;transition:.2s}
.mchart.yrs small{font:500 .85rem "Mitr";color:var(--ink)}
.challenge .cy{display:block;font:500 .9rem "Mitr";color:var(--pri);margin-bottom:4px}
.pmeta .fy{font-weight:600;color:var(--navy);background:var(--p3);padding:2px 12px;border-radius:99px}