:root{--bg:#f4f7fc;--surface:#fff;--ink:#16263d;--soft:#5d6c80;--line:#e3eaf4;--shadow:0 1px 2px rgba(20,50,90,.05),0 12px 30px rgba(20,50,90,.09)}
@media (prefers-color-scheme:dark){:root{--bg:#0a1526;--surface:#102039;--ink:#e8f0fc;--soft:#9db0cd;--line:#1f3556;--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.45)}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Sukhumvit Set","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:48px 20px 40px;min-height:100vh;display:flex;flex-direction:column}
.top{text-align:center;margin-bottom:34px}
.mark{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;background:linear-gradient(135deg,#4a93d4,#2f5fc4);box-shadow:var(--shadow)}
h1{margin:0 0 6px;font-size:26px;letter-spacing:.5px}
.top p{margin:0;color:var(--soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:transform .15s,border-color .15s;min-height:250px}
a.card:hover{transform:translateY(-3px);border-color:#4a93d4}
a.card:focus-visible{outline:3px solid #4a93d4;outline-offset:2px}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff}
.ico svg{width:28px;height:28px}
.c-team .ico{background:linear-gradient(135deg,#4a93d4,#2f5fc4)}
.c-mcn .ico{background:linear-gradient(135deg,#12a67a,#0d7f5e)}
.c-forum .ico{background:linear-gradient(135deg,#d9862a,#b4651a)}
.body{display:flex;flex-direction:column;gap:3px;flex:1}
.body b{font-size:19px}
.body em{font-style:normal;font-size:11.5px;letter-spacing:1px;color:var(--soft)}
.body small{font-size:13.5px;color:var(--soft);margin-top:8px}
.go{font-weight:700;color:#2f5fc4}
.c-mcn .go{color:#0d8a66}
.c-forum .go{color:#b4651a}
@media (prefers-color-scheme:dark){.go{color:#7fb2ff}.c-mcn .go{color:#3cd39c}.c-forum .go{color:#f0a352}}
.card.off{opacity:.65;cursor:not-allowed}
.go.soon{color:var(--soft)}
.qrbox{text-align:center;margin-top:34px}
.qr{display:inline-block;background:#fff;padding:14px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);width:min(170px,52vw);box-sizing:content-box}
.qr svg{display:block;width:100%;height:auto}
.qrbox b{display:block;margin-top:12px;font-size:17px}
.qrbox span{color:var(--soft);font-size:14px}
@media (min-width:1400px){.qr{width:250px}.qrbox b{font-size:20px}.qrbox span{font-size:16px}}
footer{margin-top:auto;padding-top:36px;text-align:center;color:var(--soft);font-size:12.5px}
.hid{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--soft);opacity:.4;text-decoration:none;transition:opacity .15s,background .15s}
.hid svg{width:17px;height:17px}
.hid:hover,.hid:focus-visible{opacity:.95;background:var(--surface);outline:none;box-shadow:0 0 0 1px var(--line)}
@media (max-width:820px){.cards{grid-template-columns:1fr}.card{min-height:0}.wrap{padding-top:32px}}