@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--green:#075746;--gold:#d9ad59;--ink:#143b32;--muted:#71827c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f9f6;color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif}header{display:flex;align-items:center;justify-content:space-between;padding:22px 5%;background:#fff;border-bottom:1px solid #e4eae4;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;text-decoration:none;color:var(--green)}small{display:block;font-size:9px;letter-spacing:1.3px;font-weight:400}.mark{background:var(--green);color:var(--gold);border-radius:50%;width:43px;height:43px;display:grid;place-items:center;font-size:28px}nav{display:flex;align-items:center;gap:26px;font-size:13px}a{color:inherit}nav a{text-decoration:none}button,.button{background:var(--green);color:#fff;border:0;border-radius:8px;padding:12px 20px;cursor:pointer;font:inherit;text-decoration:none;display:inline-block}button:hover,.button:hover{background:#127762}main{max-width:1320px;margin:auto;padding:0 5%}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;padding:74px 0 66px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;color:#6b8c7f}h1{font-size:clamp(34px,4.3vw,61px);line-height:1.32;letter-spacing:-1.5px;margin:22px 0}h1 em{font-style:normal;color:#198168}p{font-size:15px;line-height:1.9}.muted{color:var(--muted);font-size:12px}.visual{min-height:415px;background:radial-gradient(circle at 55% 45%,#e0eddf,#edf2e8);border:1px solid #dae5d6;border-radius:160px 30px 30px 30px;position:relative;overflow:hidden}.orbit{position:absolute;width:300px;height:300px;border:1px solid #a4c2a7;border-radius:50%;top:50px;left:calc(50% - 150px)}.orbit:before{content:'';position:absolute;inset:25px;border:1px dashed #a4c2a7;border-radius:50%}.core{position:absolute;top:113px;left:calc(50% - 82px);width:164px;height:164px;border-radius:40px;background:var(--green);color:var(--gold);font-size:70px;text-align:center;box-shadow:0 25px 45px #07574633;transform:rotate(-8deg)}.core small{font-size:11px;color:white;letter-spacing:2px;margin-top:-4px}.float{position:absolute;background:#fffffff0;padding:15px 20px;border:1px solid #d8e5d9;box-shadow:0 10px 35px #244b3710;border-radius:12px;font-size:14px}.float small{font-size:10px;letter-spacing:0;color:var(--muted);margin-top:5px}.a{top:38px;right:24px}.b{bottom:86px;left:20px}.c{bottom:47px;right:24px}.vlabel{position:absolute;bottom:17px;left:24px;font-size:9px;letter-spacing:2px;color:#718f7a}section{padding:35px 0;scroll-margin-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:20px}h2{font-size:29px;line-height:1.5;margin:12px 0 20px}h3{font-size:15px}.section-title p{font-size:12px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.metric{background:#fff;padding:22px;border:1px solid #e2e8df;border-radius:12px}.metric b{font-size:34px;display:block;color:var(--green);margin:10px 0}.metric span{font-size:11px;color:var(--muted)}.charts{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:20px}.charts>div{background:#fff;border:1px solid #e2e8df;border-radius:12px;padding:20px}.bar{display:grid;grid-template-columns:150px 1fr 25px;align-items:center;gap:10px;margin:12px 0;font-size:11px}.bar i{height:8px;background:#e7eee6;border-radius:5px;overflow:hidden}.bar i b{display:block;height:100%;background:#308572;border-radius:5px}.filters{display:flex;gap:12px;margin:15px 0}input,select,textarea{width:100%;border:1px solid #d8e1d8;border-radius:8px;background:white;color:var(--ink);padding:12px;font:inherit;font-size:13px}.filters input{flex:1}.filters select{width:190px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button{background:transparent;border:1px solid #dae3d9;color:#648071;font-size:12px;padding:8px 14px}.tabs button.active{background:var(--green);color:#fff;border-color:var(--green)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid #e0e7dd;border-radius:14px;overflow:hidden;transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #183d2910}.cover{height:158px;background:linear-gradient(125deg,#edf4e8,#d4e8dc);position:relative;display:flex;align-items:center;justify-content:center;font-size:50px;color:#17664f;overflow:hidden}.cover:before{content:'';width:190px;height:190px;border:1px solid #ffffff;position:absolute;right:-35px;top:-60px;border-radius:50%}.cover img{width:100%;height:100%;object-fit:cover}.cover span{position:absolute;top:14px;left:16px;color:#367354;font-size:10px;letter-spacing:2px}.cardbody{padding:22px}.tag{background:#ecf3eb;color:#467750;font-size:10px;border-radius:20px;padding:5px 10px}.card h3{font-size:18px;min-height:52px;line-height:1.5}.card p{font-size:12px;color:var(--muted);margin-bottom:20px}.cardfoot{border-top:1px solid #edf0e9;padding-top:15px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.cardfoot button{background:none;color:var(--green);padding:0;font-weight:700}.mission{display:grid;grid-template-columns:1fr 1fr;gap:50px;background:#eaf1e7;border-radius:16px;padding:35px;margin:35px 0}.mission p{font-size:14px}footer{background:#093c31;color:#c2d6cb;padding:40px 8%;font-size:12px}footer b{color:white}footer span{color:#8ead9d}dialog{border:0;border-radius:18px;padding:30px;width:min(760px,93vw);max-height:90vh;color:var(--ink);box-shadow:0 30px 90px #0004}dialog::backdrop{background:#092b25a0}dialog img{max-width:100%;border-radius:12px}dialog video{width:100%}.close{float:right;background:#eef3ec;color:var(--green);padding:5px 12px}.formrow{display:flex;gap:14px}label{display:block;font-size:12px;margin-bottom:13px;flex:1}label input,label select,label textarea{margin-top:5px}#detailbody p{white-space:pre-wrap}.upload{display:flex;gap:8px;align-items:center;margin-bottom:15px}.upload input[type=file]{font-size:10px}.upload button{font-size:11px;white-space:nowrap}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#143d32;color:#fff;border-radius:10px;padding:12px 20px;display:none;z-index:9}.empty{padding:30px;color:var(--muted);grid-column:1/-1}.resource{padding:20px;border:1px solid #dee6d9;border-radius:12px;background:white;text-decoration:none;font-size:13px}@media(max-width:850px){header{flex-wrap:wrap}nav{gap:15px;flex-wrap:wrap}.hero{grid-template-columns:1fr;padding-top:35px;gap:25px}.visual{min-height:370px}.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr}.mission{grid-template-columns:1fr;gap:0}.filters{flex-wrap:wrap}.filters select{width:calc(50% - 6px)}}@media(max-width:520px){.brand{font-size:16px}nav{font-size:11px;gap:12px}nav button{font-size:11px;padding:8px}.grid{grid-template-columns:1fr}.section-title{align-items:flex-start;flex-direction:column;gap:0}.metrics{gap:10px}.metric{padding:15px}.metric b{font-size:29px}.formrow{flex-wrap:wrap}.formrow label{min-width:40%}.bar{grid-template-columns:120px 1fr 20px}h2{font-size:25px}}@media print{header,footer,.filters,.tabs,button,.hero,.mission,#resources{display:none}main{padding:0}.grid{grid-template-columns:repeat(2,1fr)}.card{break-inside:avoid}dialog[open]{position:static;max-height:none;width:100%;box-shadow:none}}