:root{--bg:#0a1020;--surface:#121d33;--surface2:#192945;--text:#eef4ff;--muted:#aab8d1;--cyan:#70d9ea;--gold:#f2c66d;--line:#293b5c;--shadow:0 18px 55px #0005}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 85% -5%,#263d64 0,transparent 34%),var(--bg);color:var(--text);font-family:Tahoma,"Noto Sans Thai",sans-serif;line-height:1.8}
a{color:inherit;text-decoration:none}.container{width:min(1160px,92%);margin:auto}
.topbar{position:sticky;top:0;z-index:20;background:#0a1020ed;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:15px;font-weight:900;letter-spacing:.08em;color:var(--cyan);white-space:nowrap}.navlinks{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.navlinks a{font-size:13px;color:var(--muted);padding:8px 0;border-bottom:2px solid transparent}.navlinks a:hover,.navlinks a.active{color:var(--gold);border-color:var(--gold)}
.hero{padding:72px 0 58px}.eyebrow,.kicker{color:var(--gold);font-size:12px;letter-spacing:.15em;font-weight:800}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.15;margin:13px 0}.hero p{max-width:720px;color:var(--muted);font-size:17px}.accent{color:var(--cyan)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-weight:700}.button.primary{background:linear-gradient(110deg,#61cddd,#7a91ed);color:#081222;border:0}.button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:23px}
.pagehead{padding:45px 0 25px;border-bottom:1px solid var(--line)}.pagehead h1{font-size:clamp(30px,4vw,46px);margin:7px 0}.pagehead p{color:var(--muted);margin:0;max-width:780px}
.content{padding:32px 0 65px}.section-title{font-size:25px;margin:0 0 15px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:block;background:linear-gradient(145deg,var(--surface),#10192b);border:1px solid var(--line);border-radius:18px;padding:21px;box-shadow:var(--shadow)}.card h2,.card h3{margin:5px 0 8px}.card p{margin:0;color:var(--muted)}.card:hover{border-color:#5c91b3;transform:translateY(-2px);transition:.18s}
.cardnum{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.12em}.tile-icon{font-size:26px;color:var(--gold)}.muted{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:24px;align-items:start}.article{background:linear-gradient(145deg,var(--surface),#10192b);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,34px)}.article h2{margin-top:26px;font-size:23px}.article h2:first-child{margin-top:0}.article p,.article li{color:#d1dced}.article strong{color:var(--gold)}
.sidebox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px;position:sticky;top:90px}.sidebox h3{margin:0 0 10px}.sidebox a{display:block;padding:7px 9px;margin:3px 0;color:var(--muted);border-radius:8px;font-size:14px}.sidebox a:hover{background:var(--surface2);color:var(--cyan)}
.formula{font-size:clamp(24px,4vw,34px);color:var(--gold);font-weight:800;text-align:center;padding:16px;margin:18px 0;background:#0d172a;border:1px solid var(--line);border-radius:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px;margin:14px 0 20px}table{border-collapse:collapse;width:100%;min-width:320px;background:#101a2d}th,td{padding:11px 15px;text-align:center;border-bottom:1px solid var(--line)}th{background:#1c2c49;color:var(--cyan)}tr:last-child td{border-bottom:0}
.callout{border-left:3px solid var(--gold);padding:13px 17px;background:#1a2942;border-radius:0 12px 12px 0;margin:18px 0;color:#d9e4f5}
.pill{display:inline-block;background:#203653;color:var(--cyan);padding:3px 10px;border-radius:30px;font-size:12px;font-weight:bold}
.quizbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}.quizanswers{display:grid;gap:10px;margin:18px 0}.quizanswers button{font:inherit;text-align:left;color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:12px 15px;cursor:pointer}.quizanswers button:hover{border-color:var(--cyan)}.quizanswers button:disabled{cursor:default;opacity:.95}.quizfeedback{min-height:34px;color:var(--gold)}.quizmeta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px}
.footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:13px;margin-top:35px}.footerin{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
@media(max-width:850px){.nav{align-items:flex-start;flex-direction:column;padding:13px 0}.navlinks{gap:12px}.layout{grid-template-columns:1fr}.sidebox{position:static}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid,.grid.two{grid-template-columns:1fr}.hero{padding:48px 0}.navlinks{gap:9px}.navlinks a{font-size:12px}.article{padding:19px}.pagehead{padding-top:32px}}