:root{
  --green:#006F45; --green-2:#005536; --bright:#0BA84D; --orange:#FA9D1C;
  --ink:#14231C; --gray:#5F6E66; --bg:#FFFFFF; --soft:#E9F4EE; --soft-o:#FEF1DC;
  --rule:#D8E6DE; --red:#C0392B; --card:#FFFFFF; --page:#F6FAF7;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E6EFEA; --gray:#9FB2A8; --bg:#0F1B15; --soft:#16271F; --soft-o:#2E2414;
    --rule:#24382D; --card:#13221A; --page:#0B1510;
  }
}
:root[data-theme="dark"]{
  --ink:#E6EFEA; --gray:#9FB2A8; --bg:#0F1B15; --soft:#16271F; --soft-o:#2E2414;
  --rule:#24382D; --card:#13221A; --page:#0B1510;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:6px;padding:11px 20px;font-weight:600;font-size:15px;text-decoration:none;transition:background .15s}
.btn-o{background:var(--orange);color:#1b1206}
.btn-o:hover{background:#ffb144}
.btn-g{background:var(--bright);color:#fff}
.btn-g:hover{background:#099441}
.btn-line{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn-sm{padding:7px 13px;font-size:14px}
.hide{display:none!important}

/* logo mark */
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark svg{height:34px;width:auto}
.mark b{font-size:13px;line-height:1.2;font-weight:600;color:var(--gray);max-width:150px}

/* ---------- PUBLIC ---------- */
.topstrip{background:var(--green-2);color:#d6eadf;font-size:13.5px}
.topstrip .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
header.pub{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--rule)}
header.pub .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
header.pub .mark{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin:0}
header.pub .mark svg{height:34px;width:auto;display:block}
header.pub .mark b{margin:0;max-width:170px;font-size:12.5px;line-height:1.25;font-weight:600;color:var(--gray)}
nav.main{display:flex;flex:1 1 auto;flex-wrap:nowrap;align-items:center;justify-content:center;align-self:center;height:36px;gap:2px;margin:0 22px;padding:0;min-width:0}
nav.main a{display:flex;align-items:center;height:36px;padding:0 11px;border-radius:6px;text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);white-space:nowrap}
nav.main a:hover,nav.main a.on{color:var(--green);background:var(--soft)}
.hdr-act{display:flex;align-items:center;align-self:center;gap:8px;flex:0 0 auto}
.hdr-act .btn{white-space:nowrap}
.burger{display:none;background:none;border:0;padding:8px;color:var(--ink)}
@media (max-width:1280px){
  nav.main{display:none}
  .burger{display:block}
  .hdr-act .btn-o{display:none}
  nav.main.open{display:flex;position:absolute;left:0;right:0;top:78px;height:auto;flex-direction:column;align-items:stretch;background:var(--bg);padding:12px 20px;border-bottom:1px solid var(--rule);z-index:45}
}

.hero{background:var(--green);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;padding-top:84px;padding-bottom:96px;position:relative;z-index:2}
.stripes{position:absolute;right:-120px;top:40px;width:720px;z-index:1;opacity:.95}
.stripes i{display:block;height:74px;margin-bottom:22px;transform:skewX(-22deg);border-radius:0 38px 0 38px}
.stripes i:nth-child(1){background:var(--bright);width:78%;margin-left:22%}
.stripes i:nth-child(2){background:var(--orange);width:78%;margin-left:14%}
.stripes i:nth-child(3){background:rgba(255,255,255,.1);width:78%;margin-left:6%}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.02em;max-width:14ch}
.hero p.lead{font-size:18px;color:#cfe6d9;margin:22px 0 32px;max-width:52ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.meet{background:var(--bg);color:var(--ink);border-radius:14px;padding:26px;align-self:center;box-shadow:0 24px 60px rgba(0,40,24,.35)}
.meet h3{font-size:15px;color:var(--gray);font-weight:600}
.meet .date{display:flex;gap:18px;align-items:center;margin:14px 0 16px}
.meet .day{background:var(--green);color:#fff;border-radius:10px;width:78px;text-align:center;padding:8px 0;flex-shrink:0}
.meet .day b{display:block;font-size:32px;line-height:1.1}
.meet .day small{font-size:12px;color:#cfe6d9}
.meet .topic{font-weight:700;font-size:18px;line-height:1.35}
.meet ul{list-style:none;border-top:1px solid var(--rule);padding-top:14px;margin-bottom:18px;font-size:14.5px;color:var(--gray)}
.meet li{padding:3px 0}
.meet .count{font-size:13.5px;background:var(--soft-o);color:var(--ink);border-radius:6px;padding:8px 12px;margin-bottom:14px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:60px}.stripes{width:480px;right:-220px;top:10px;opacity:.35}}

.stats{background:var(--soft)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-top:34px;padding-bottom:34px}
.stats div{padding:6px}
.stats b{display:block;font-size:40px;font-weight:800;color:var(--green);line-height:1.1}
.stats span{color:var(--gray);font-size:14.5px}
@media (max-width:700px){.stats .wrap{grid-template-columns:repeat(2,1fr);gap:16px}}

section.blk{padding:80px 0}
section.blk.alt{background:var(--page)}
.h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-bottom:12px}
.sub{color:var(--gray);max-width:62ch;margin-bottom:40px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.quote{border-left:4px solid var(--orange);padding:6px 0 6px 20px;font-size:20px;font-weight:600;line-height:1.45;margin:20px 0}
.visual{background:var(--green);border-radius:14px;min-height:320px;position:relative;overflow:hidden;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.visual .stripes{right:-260px;top:26px;width:560px;opacity:.9}
.visual p{position:relative;z-index:2;font-size:15px;color:#cfe6d9;max-width:34ch}
.visual strong{position:relative;z-index:2;font-size:26px;line-height:1.2}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}
.fmt{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:26px}
.fmt .ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--green);margin-bottom:16px}
.fmt h3{font-size:19px;margin-bottom:6px}
.fmt p{color:var(--gray);font-size:15px}
.fmt .when{margin-top:14px;font-size:14px;font-weight:600;color:var(--green)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative}
.steps li{list-style:none;padding:0 18px 0 0;position:relative}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;margin-bottom:16px;position:relative;z-index:1}
.steps li::after{content:"";position:absolute;top:22px;left:44px;right:0;height:2px;background:var(--rule)}
.steps li:last-child::after{display:none}
.steps h4{font-size:17px;margin-bottom:4px}
.steps p{font-size:14.5px;color:var(--gray)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:28px}.steps li::after{display:none}}

.ws-list{display:grid;gap:14px}
.ws{display:grid;grid-template-columns:86px 1fr auto;gap:20px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:16px 20px}
.ws .d{text-align:center;border-right:1px solid var(--rule);padding-right:16px}
.ws .d b{display:block;font-size:28px;color:var(--green);line-height:1}
.ws .d small{color:var(--gray);font-size:12.5px}
.ws h4{font-size:17px;line-height:1.35}
.ws p{font-size:14px;color:var(--gray)}
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--soft);color:var(--green)}
.tag.o{background:var(--soft-o);color:#a15e00}
.tag.r{background:#fbe5e2;color:var(--red)}
.tag.g{background:var(--bright);color:#fff}
@media (max-width:640px){.ws{grid-template-columns:70px 1fr}.ws .act{grid-column:1/-1}}

.news{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.news .img{height:170px;background:var(--green);position:relative;overflow:hidden}
.news .img .stripes{width:380px;right:-140px;top:22px}
.news .img .stripes i{height:34px;margin-bottom:12px}
.news .img.v2{background:#0b5a3a}.news .img.v3{background:#3f4b1c}
.news .bd{padding:18px 20px 22px}
.news h4{font-size:17px;line-height:1.4;margin:8px 0 6px}
.news p{font-size:14.5px;color:var(--gray)}

.members{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:860px){.members{grid-template-columns:repeat(2,1fr)}}
.mem{text-align:center;padding:18px 10px;border-radius:12px;background:var(--card);border:1px solid var(--rule)}
.av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-weight:700;color:#fff;background:var(--green);font-size:20px}
.mem b{display:block;font-size:15px}
.mem small{color:var(--gray);font-size:13px}

.cta-band{background:var(--orange);color:#1b1206}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:40px;padding-bottom:40px;flex-wrap:wrap}
.cta-band h3{font-size:26px;line-height:1.25;max-width:26ch}
.cta-band .btn{background:var(--green);color:#fff}

footer.pub{background:#0a2a1c;color:#b8cfc2;font-size:14.5px}
footer.pub .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:40px}
footer.pub h5{color:#fff;font-size:15px;margin-bottom:12px}
footer.pub a{display:block;text-decoration:none;padding:3px 0}
footer.pub a:hover{color:#fff}
footer.pub .bottom{border-top:1px solid #1d4432;padding:16px 0;font-size:13px}
@media (max-width:760px){footer.pub .wrap{grid-template-columns:1fr}}

.page-hd{background:var(--green);color:#fff;padding:56px 0 48px;position:relative;overflow:hidden}
.page-hd .stripes{width:520px;top:10px;right:-200px}
.page-hd h1{font-size:clamp(28px,4vw,42px);line-height:1.15;position:relative;z-index:2}
.page-hd p{color:#cfe6d9;position:relative;z-index:2;margin-top:8px;max-width:60ch}
.prose h3{font-size:21px;margin:34px 0 10px;color:var(--green)}
.prose p,.prose li{color:var(--ink);max-width:72ch}
.prose ol,.prose ul{padding-left:22px}
.prose li{margin:5px 0}
.org{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.org div{background:var(--soft);border-radius:10px;padding:14px;font-weight:600;font-size:14.5px;text-align:center}
@media (max-width:760px){.org{grid-template-columns:1fr 1fr}}
.fee{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.fee div{border:1px solid var(--rule);border-radius:12px;padding:18px}
.fee b{font-size:26px;color:var(--green);display:block}

/* ---------- LOGIN ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .l{background:var(--green);color:#fff;position:relative;overflow:hidden;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .l .stripes{top:180px;right:-200px;width:620px}
.login .l h2{font-size:34px;line-height:1.15;position:relative;z-index:2;max-width:14ch}
.login .r{display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.lform{width:100%;max-width:400px}
.lform h1{font-size:26px;margin-bottom:4px}
.field{margin:16px 0}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--rule);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bright);outline:none}
.demo-acc{margin-top:26px;border-top:1px solid var(--rule);padding-top:18px}
.demo-acc p{font-size:13.5px;color:var(--gray);margin-bottom:10px}
.acc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;margin-bottom:8px;color:var(--ink)}
.acc:hover{border-color:var(--bright)}
.acc .av{width:38px;height:38px;font-size:14px;margin:0}
.acc span{flex:1;font-size:14.5px}
.acc small{display:block;color:var(--gray);font-size:12.5px}
@media (max-width:860px){.login{grid-template-columns:1fr}.login .l{min-height:220px;padding:28px}.login .l h2{font-size:26px}}

/* ---------- PORTAL ---------- */
.portal{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--page)}
.side{background:var(--green);color:#dcefe4;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .mark b{color:#cfe6d9}
.side nav{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.08)}
.side nav a.on{background:#fff;color:var(--green);font-weight:600}
.side nav a svg{width:19px;height:19px;flex-shrink:0}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid rgba(255,255,255,.15)}
.side .me .av{width:38px;height:38px;font-size:14px;margin:0;background:var(--orange);color:#1b1206}
.side .me div{flex:1;font-size:14px;line-height:1.3}
.side .me small{color:#a9cdb9;font-size:12.5px}
.side .me button{background:none;border:0;color:#cfe6d9;padding:6px}
.main{padding:28px 32px 90px;min-width:0}
.ptop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ptop h1{font-size:26px;line-height:1.25}
.ptop p{color:var(--gray);font-size:14.5px}
.tabbar{display:none}
@media (max-width:900px){
  .portal{grid-template-columns:1fr}.side{display:none}.main{padding:18px 16px 96px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--rule);z-index:50;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;text-align:center;font-size:11px;text-decoration:none;color:var(--gray);padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.on{color:var(--green);font-weight:600}
  .mobile-top{display:flex!important}
}
.mobile-top{display:none;align-items:center;justify-content:space-between;background:var(--green);margin:-18px -16px 18px;padding:12px 16px}
.mobile-top .mark b{color:#cfe6d9}
.mobile-top button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:6px;padding:6px 10px;font-size:13px}

.panel{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px}
.panel h3{font-size:17px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.g2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px){.g2,.g3{grid-template-columns:1fr}}
.kpi{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 20px}
.kpi small{color:var(--gray);font-size:13.5px}
.kpi b{display:block;font-size:26px;font-weight:700;margin-top:2px;line-height:1.2}
.kpi.pos b{color:var(--bright)}.kpi.neg b{color:var(--red)}.kpi.bal{background:var(--green);border-color:var(--green);color:#fff}.kpi.bal small{color:#cfe6d9}
.stack>*+*{margin-top:18px}
.role-note{display:flex;gap:10px;align-items:center;background:var(--soft-o);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:18px}
.role-note.g{background:var(--soft)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl{overflow-x:auto}
th{text-align:left;font-weight:600;color:var(--gray);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.in{color:var(--bright)}.out{color:var(--red)}
.bar{height:8px;background:var(--soft);border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--bright);border-radius:8px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar input,.toolbar select{padding:9px 12px;border:1.5px solid var(--rule);border-radius:8px;font:inherit;font-size:14.5px;background:var(--card);color:var(--ink)}
.toolbar input{flex:1;min-width:200px}
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pc{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px;text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.pc:hover{border-color:var(--bright)}
.pc .top{display:flex;gap:12px;align-items:center}
.pc .av{width:50px;height:50px;margin:0;font-size:17px}
.pc b{font-size:16px;display:block;line-height:1.3}
.pc small{color:var(--gray);font-size:13.5px}
.pc p{font-size:14px;color:var(--gray)}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.kanban{grid-template-columns:1fr}}
.col{background:var(--soft);border-radius:12px;padding:12px;min-height:120px}
.col h4{font-size:14.5px;display:flex;justify-content:space-between;margin:2px 4px 10px}
.task{background:var(--card);border-radius:9px;padding:12px;margin-bottom:9px;border:1px solid var(--rule);font-size:14.5px}
.task b{display:block;margin-bottom:6px;line-height:1.35}
.task .meta{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;color:var(--gray)}
.task .mv{display:flex;gap:4px}
.task .mv button{border:1px solid var(--rule);background:var(--bg);color:var(--ink);border-radius:5px;padding:1px 8px;font-size:13px}
.goal{display:grid;grid-template-columns:1fr 60px;gap:6px 12px;align-items:center;margin:12px 0}
.goal span{font-size:14.5px}.goal em{font-style:normal;text-align:right;font-weight:600;font-size:14px}
.goal .bar{grid-column:1/-1}
.list-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.list-row:last-child{border-bottom:0}
.pill-group{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1.5px solid var(--rule);background:var(--card);color:var(--ink);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:500}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
.ok{color:var(--bright);font-weight:700}.no{color:var(--rule);font-weight:700}

/* drawer / modal */
.shade{position:fixed;inset:0;background:rgba(5,25,15,.5);z-index:80;display:flex;justify-content:flex-end}
.drawer{background:var(--bg);width:min(560px,100%);height:100%;overflow-y:auto;animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:.4}}
.drawer .cover{background:var(--green);color:#fff;padding:26px 24px 24px;position:relative;overflow:hidden}
.drawer .cover .stripes{width:420px;right:-190px;top:12px;opacity:.5}
.drawer .cover .av{width:80px;height:80px;font-size:26px;margin:0 0 12px;background:#fff;color:var(--green);position:relative;z-index:2}
.drawer .cover h2{font-size:24px;position:relative;z-index:2;line-height:1.25}
.drawer .cover p{color:#cfe6d9;position:relative;z-index:2}
.drawer .x{position:absolute;right:14px;top:14px;z-index:3;background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:6px;padding:6px 10px}
.drawer .bd{padding:22px 24px}
.drawer dl{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;font-size:14.5px}
.drawer dt{color:var(--gray)}
.drawer h4{font-size:15px;margin:22px 0 8px;color:var(--green)}
.center-modal{align-items:center;justify-content:center;padding:16px}
.modal{background:var(--bg);border-radius:14px;width:min(480px,100%);padding:24px;max-height:92vh;overflow:auto}
.modal h3{font-size:20px;margin-bottom:4px}
.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:8px;font-size:14.5px;z-index:99}
.theme-t{background:none;border:1px solid var(--rule);color:var(--ink);border-radius:6px;padding:6px 9px}