:root{
  --navy:#0F2A43; --blue:#1B6FA8; --blue2:#2E8BCC; --sky:#EAF2F9;
  --ink:#0F2A43; --mut:#5A6B7C; --faint:#90A1B2; --line:#E1E8EF; --card:#FFFFFF; --bg:#F4F7FA;
  --ok:#1E9E6A; --okbg:#E6F6EF; --warn:#D97706; --warnbg:#FEF3E2;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#E8EEF4; --mut:#A9B8C6; --faint:#7C8CA0; --line:#24364A; --card:#152636; --bg:#0D1B28; --sky:#15304A; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Sarabun,system-ui,sans-serif;font-size:15px;line-height:1.6}
h1,h2,h3{font-family:Kanit,system-ui,sans-serif;font-weight:600;margin:0}
a{color:inherit;text-decoration:none}
main{max-width:1180px;margin:0 auto;padding:48px 24px 64px}
.loading{color:var(--faint)}

.head h1{font-size:38px;letter-spacing:-.3px}
.head p{margin:8px 0 0;color:var(--mut);font-size:15.5px;max-width:760px}

.hero{margin:34px 0 42px;border-radius:20px;padding:30px 34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(105deg,var(--navy) 0%,#1B4C77 55%,var(--blue) 100%);color:#fff;
  box-shadow:0 10px 28px rgba(15,42,67,.22)}
.hero .ic{width:58px;height:58px;border-radius:15px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:26px;flex:none}
.hero .tx{flex:1;min-width:230px}
.hero h2{font-size:25px}
.hero p{margin:4px 0 0;color:#CBDCEB;font-size:14.5px}
.hero .go{background:#fff;color:var(--navy);border-radius:11px;padding:13px 24px;font-family:Kanit;font-weight:500;font-size:15.5px;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:transform .12s}
.hero .go:hover{transform:translateX(3px)}

.sec{display:flex;align-items:center;gap:11px;margin:38px 0 16px}
.sec .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none}
.sec h3{font-size:19px}
.sec .ln{flex:1;height:1px;background:var(--line)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;gap:16px;
  transition:transform .12s, box-shadow .12s, border-color .12s;position:relative}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,42,67,.12);border-color:var(--blue2)}
.card .ic{width:50px;height:50px;border-radius:13px;background:var(--sky);display:grid;place-items:center;font-size:23px;flex:none}
.card .bd{flex:1;min-width:0}
.card h4{font-family:Kanit;font-weight:500;font-size:17.5px;margin:0;padding-right:100px}
.card .en{font-size:12.5px;color:var(--faint);margin-top:1px;padding-right:100px}
.card .ds{font-size:14px;color:var(--mut);margin-top:7px}
.card .mt{font-size:12.5px;color:var(--faint);margin-top:10px;display:flex;align-items:center;gap:6px}
.card.soon{opacity:.72;border-style:dashed}

.tag{position:absolute;top:16px;right:16px;font-size:11.5px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.t-pub{background:var(--okbg);color:var(--ok)}
.t-auth{background:var(--warnbg);color:var(--warn)}
.t-ext{background:var(--sky);color:var(--blue)}
.t-soon{background:var(--line);color:var(--mut)}

footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
@media(max-width:560px){ main{padding:32px 16px 48px} .head h1{font-size:29px} .hero{padding:24px} }