:root{--navy:#1b1f3b;--navy2:#2a2f5a;--orange:#ff7a45;--paper:#fbfaf7;--ink:#1d1d26;--mut:#5d6075;--edu:#3a86ff;--games:#8338ec;--sport:#2a9d8f;--biz:#ff7a45;--well:#e05780}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Verdana,"Trebuchet MS","Noto Sans Thai",sans-serif}
h1,h2,h3,.logo{font-family:"Trebuchet MS","Gill Sans","Noto Sans Thai",sans-serif}
a{color:#3b3fb6}
a:hover{color:var(--orange)}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.1rem}
.mast{background:var(--navy);color:#fff}
.mrow{display:flex;align-items:center;gap:1rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.logo{font-size:1.6rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.02em}
.logo b{color:var(--orange);font-weight:800;margin-left:.15rem}
.tag{color:#b9bce0;font-size:.85rem}
.submit{margin-left:auto;background:var(--orange);color:#1b1f3b;text-decoration:none;font-weight:700;padding:.45rem .9rem;border-radius:999px;font-size:.88rem}
.submit:hover{color:#fff}
.tabs{background:var(--navy2);overflow-x:auto}
.tabrow{display:flex;gap:0;white-space:nowrap}
.tabs a{color:#dfe1f7;text-decoration:none;padding:.65rem .9rem;font-size:.86rem;border-bottom:4px solid transparent}
.tabs a.edu{border-color:var(--edu)}.tabs a.games{border-color:var(--games)}.tabs a.sport{border-color:var(--sport)}.tabs a.biz{border-color:var(--biz)}.tabs a.well{border-color:var(--well)}
.tabs a.cur,.tabs a:hover{background:rgba(255,255,255,.08);color:#fff}
.banner{background:radial-gradient(circle at 85% 20%,#3d4290 0,var(--navy) 60%);color:#fff;padding:3.5rem 0 3rem}
.banner h1{font-size:2.6rem;line-height:1.12;max-width:18ch;margin:0 0 1rem}
.banner p{max-width:64ch;color:#d9dbf3}
.btn{display:inline-block;background:var(--orange);color:var(--navy);padding:.6rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:700}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;margin-top:-1.6rem}
.sec{display:block;background:#fff;border-radius:10px;padding:1rem;text-decoration:none;color:var(--ink);box-shadow:0 4px 14px rgba(27,31,59,.12);border-bottom:6px solid}
.sec span{font-weight:800;font-size:1.4rem;opacity:.35}
.sec h2{font-size:1.02rem;margin:.3rem 0}
.sec p{font-size:.85rem;color:var(--mut);margin:0}
.sec.edu{border-color:var(--edu)}.sec.games{border-color:var(--games)}.sec.sport{border-color:var(--sport)}.sec.biz{border-color:var(--biz)}.sec.well{border-color:var(--well)}
.split{display:grid;grid-template-columns:3fr 2fr;gap:2.5rem;margin:3rem auto}
.panel{background:#fff;border:2px solid var(--navy);border-radius:10px;padding:.4rem 1.3rem 1rem}
.art{display:block;padding-top:2rem;padding-bottom:3rem}
.art.has-info{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2.5rem;align-items:start}
article{max-width:740px}
article h1{font-size:2.1rem;line-height:1.18;margin:.2rem 0 .4rem;color:var(--navy)}
article h2{font-size:1.28rem;margin:1.9rem 0 .4rem;color:var(--navy)}
.by{color:var(--mut);font-size:.85rem;margin:0 0 1rem}
.lede{font-size:1.1rem;color:#33354a;border-left:5px solid var(--orange);padding-left:1rem}
body.s-edu .lede{border-color:var(--edu)}body.s-games .lede{border-color:var(--games)}body.s-sport .lede{border-color:var(--sport)}body.s-well .lede{border-color:var(--well)}
.info{position:sticky;top:1rem;background:#fff;border-radius:10px;padding:1rem 1.2rem;box-shadow:0 2px 10px rgba(0,0,0,.07);font-size:.9rem}
.info h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .6rem;color:var(--mut)}
.info dt{font-weight:700;color:var(--navy)}
.info dd{margin:0 0 .7rem}
.cardlist{list-style:none;padding:0;display:grid;gap:.8rem}
.cardlist li{background:#fff;border-radius:8px;padding:.9rem 1.1rem;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.cardlist a{font-weight:700;font-size:1.05rem;display:block}
.cardlist span{color:var(--mut);font-size:.92rem}
.mf{display:grid;gap:.75rem;max-width:520px}
.mf label{display:grid;gap:.2rem;font-weight:700;font-size:.9rem}
.mf input,.mf textarea{font:inherit;padding:.5rem;border:2px solid #d5d6e4;border-radius:6px}
.mf button{justify-self:start;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.6rem 1.2rem;font:inherit;font-weight:700;cursor:pointer}
.small{font-size:.85rem;color:var(--mut)}
.ft{background:var(--navy);color:#c6c8e6;margin-top:2rem;padding:2rem 0}
.ft a{color:#fff;margin-right:1rem}
.ft .logo.small{font-size:1.2rem;color:#fff;margin:0}
@media (max-width:960px){.grid5{grid-template-columns:repeat(2,1fr);margin-top:1.2rem}.art.has-info{grid-template-columns:1fr}.info{position:static}.split{grid-template-columns:1fr}}
@media (max-width:560px){body{font-size:16px}.grid5{grid-template-columns:1fr}.banner h1{font-size:1.9rem}.tag{display:none}article h1{font-size:1.7rem}}
.ferr{display:block;color:#b3261e;font-size:.85rem;margin:-.4rem 0 .2rem}.ferr:empty{display:none}[aria-invalid=true]{outline:2px solid #b3261e}