@font-face{font-family:Mali;src:url('assets/Mali-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Sarabun;src:url('assets/Sarabun-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--blue:#174bd2;--ink:#132956;--muted:#526582;--line:#dbe5f4;--paper:#f3f7ff;--yellow:#ffcd48;--radius:24px;font-family:Sarabun,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.75}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #dd9300;outline-offset:5px}img{display:block;max-width:100%;object-fit:contain}h1,h2,h3,.display{font-family:Mali,Sarabun,sans-serif;line-height:1.5}h1{font-size:clamp(1.9rem,3.3vw,3.1rem);margin:0 0 12px}h2{font-size:1.5rem;margin:0 0 14px}h3{font-size:1.12rem}p{margin:0 0 16px}button{border:0}main,.topbar,footer{max-width:1360px;margin:auto;padding:24px 36px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:.88rem;font-weight:700;letter-spacing:.06em}.brand small{display:block;font-family:Mali;font-size:1.05rem;letter-spacing:0}.brand-mark{display:grid;place-items:center;background:var(--blue);color:white;width:48px;height:48px;border-radius:16px;font-family:Mali;font-size:1.5rem;box-shadow:0 4px 0 #0b2c86}.topbar nav{display:flex;gap:24px;font-size:1rem}.topbar nav a{text-decoration:none;padding:6px 0}.topbar nav a:hover{color:var(--blue)}.intro{display:grid;grid-template-columns:1fr 270px;align-items:center;gap:32px;background:var(--blue);border-radius:32px;padding:32px 42px;color:white;overflow:hidden;position:relative}.intro h1 span{color:var(--yellow)}.intro p{font-size:1.15rem;max-width:620px;margin:0}.intro img{width:230px;height:230px;filter:drop-shadow(0 8px 0 #102e8b30);animation:float 4s ease-in-out infinite}.eyebrow{display:block;font-size:.88rem;letter-spacing:.12em;font-weight:700;margin-bottom:10px}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:28px 0 14px}.section-title h2{margin:0}.section-title span{font-size:.95rem;color:var(--muted)}.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grade-card{display:flex;gap:18px;align-items:center;background:white;border:2px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;box-shadow:0 5px 0 #dce7f7;transition:transform .18s,border-color .18s}.grade-card:hover{transform:translateY(-5px);border-color:var(--accent,var(--blue))}.grade-number{font-family:Mali;font-size:2rem;display:grid;place-items:center;width:74px;height:84px;flex:none;background:var(--tint,#eaf1ff);border-radius:20px;color:var(--accent,var(--blue))}.grade-card h3{margin:0 0 5px}.grade-card p{font-size:.95rem;color:var(--muted);margin:0}.note{padding:18px 22px;background:#fff9df;border:1px solid #eed389;border-radius:16px;margin-top:28px;font-size:.95rem}.note a{color:#573e00}.crumbs{font-size:.95rem;margin-bottom:18px;display:flex;gap:10px;flex-wrap:wrap;color:var(--muted)}.crumbs a{color:var(--blue)}.grade-banner{border-left:6px solid var(--blue);padding:10px 0 10px 24px;margin-bottom:26px}.grade-banner h1{margin-bottom:8px}.grade-banner p{color:var(--muted);margin:0}.subjects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.subject-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 18px;border:2px solid var(--line);border-bottom:5px solid var(--accent);border-radius:var(--radius);background:white;text-decoration:none;transition:transform .18s}.subject-card:hover{transform:translateY(-5px);border-color:var(--accent)}.subject-card img{width:128px;height:128px}.subject-card h2{font-size:1.15rem;margin:14px 0 8px;color:var(--accent)}.subject-card p{font-size:.95rem;color:var(--muted);margin:0 0 14px}.subject-card .go{margin-top:auto;font-weight:bold;color:var(--accent)}.panel{padding:28px;background:white;border:1px solid var(--line);border-radius:var(--radius);margin:20px 0}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 22px;border-radius:14px;text-decoration:none;font-weight:bold}.primary{background:var(--blue);color:white;box-shadow:0 4px 0 #102f87}.secondary{border:1px solid var(--line);background:white;color:var(--ink)}footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.875rem;color:var(--muted);margin-top:30px;border-top:1px solid var(--line)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;left:16px;top:-80px;z-index:20;background:white;padding:12px}.skip:focus{top:10px}@keyframes float{50%{transform:translateY(-7px) rotate(2deg)}}
@media(min-width:2200px){:root{font-size:clamp(16px,.85vw,26px)}main,.topbar,footer{max-width:2100px}.intro img{width:310px;height:310px}.intro{grid-template-columns:1fr 350px}.grade-number{width:100px;height:110px}.subject-card img{width:180px;height:180px}}
@media(max-width:1000px){.subjects{grid-template-columns:repeat(2,1fr)}.grades{grid-template-columns:repeat(2,1fr)}.intro{grid-template-columns:1fr 190px;padding:26px}.intro img{width:190px;height:190px}.grade-card{padding:18px}.grade-number{width:62px;height:72px}}
@media(max-width:600px){main,.topbar,footer{padding:18px}.topbar{align-items:flex-start}.topbar nav{gap:8px;flex-direction:column;font-size:.875rem}.brand{font-size:.75rem}.brand small{font-size:.9rem}.intro{grid-template-columns:1fr 88px;gap:2px;padding:24px 20px}.intro img{width:96px;height:140px}.intro h1{font-size:1.8rem}.intro p{font-size:1rem}.eyebrow{font-size:.75rem}.grades{gap:12px}.grade-card{display:block;padding:16px}.grade-number{width:55px;height:60px;font-size:1.6rem;margin-bottom:12px}.grade-card h3{font-size:1rem}.grade-card p{font-size:.875rem}.subjects{gap:12px}.subject-card{padding:16px 10px}.subject-card img{width:95px;height:95px}.subject-card h2{font-size:1rem}.subject-card p{font-size:.875rem}.panel{padding:22px 18px}.section-title{align-items:flex-start;flex-direction:column;gap:4px}.note{padding:16px;font-size:.875rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}