@import "https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#f8faff;font-family:Noto Sans Thai,Kanit,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 0,#5b7cfa1f,#0000 24rem),radial-gradient(circle at 90% 8%,#9d5bff1a,#0000 23rem),#f8faff;min-width:320px;margin:0}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}main{overflow:hidden}.navbar{justify-content:space-between;align-items:center;width:min(1160px,100% - 40px);height:82px;margin:0 auto;display:flex}.brand{color:#1b2a52;align-items:center;gap:10px;font-family:Kanit,sans-serif;font-size:1.25rem;font-weight:700;display:inline-flex}.brand-icon{color:#fff;background:linear-gradient(135deg,#4f6df5,#8058e8);border-radius:12px;place-items:center;width:39px;height:39px;display:grid;box-shadow:0 8px 18px #4f6df540}.nav-actions{color:#526078;align-items:center;gap:24px;font-size:.94rem;font-weight:600;display:flex}.nav-actions a:hover{color:#4f6df5}.button{border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:46px;padding:0 19px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.button:hover{transform:translateY(-2px)}.button-outline{color:#41506b;background:#fff;border-color:#dbe2f0;min-height:40px}.button-primary{color:#fff;background:linear-gradient(135deg,#4d69ef,#7957e8);box-shadow:0 12px 24px #4b66eb45}.button-secondary{color:#40506c;background:#fff;border-color:#dce3f2}.hero{text-align:center;width:min(960px,100% - 40px);margin:0 auto;padding:84px 0 88px}.hero-badge,.eyebrow{color:#536de8;font-size:.88rem;font-weight:700}.hero-badge{background:#ffffffd1;border:1px solid #dbe2ff;border-radius:999px;align-items:center;gap:7px;padding:8px 13px;display:inline-flex}.hero h1{color:#172033;letter-spacing:-.045em;max-width:760px;margin:24px auto 18px;font-family:Kanit,sans-serif;font-size:clamp(2.65rem,6vw,4.55rem);line-height:1.18}.hero h1 span{color:#526ce9}.hero-description{color:#5b6880;max-width:625px;margin:0 auto;font-size:1.09rem;line-height:1.9}.hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:31px;display:flex}.hero-stats{background:#ffffffb8;border:1px solid #e1e7f4;border-radius:16px;justify-content:center;gap:0;width:min(540px,100%);margin:58px auto 0;padding:17px 0;display:flex}.hero-stats div{flex-direction:column;flex:1;gap:2px;display:flex}.hero-stats div+div{border-left:1px solid #e1e7f4}.hero-stats strong{color:#25375d;font-family:Kanit,sans-serif;font-size:1.42rem}.hero-stats span{color:#758098;font-size:.81rem}.section{width:min(1160px,100% - 40px);margin:0 auto;padding:84px 0}.section-heading{text-align:center;max-width:670px;margin:0 auto 38px}.section-heading h2,.cta-section h2{color:#1d2945;margin:9px 0 12px;font-family:Kanit,sans-serif;font-size:clamp(1.8rem,3.5vw,2.55rem);line-height:1.3}.section-heading p:not(.eyebrow){color:#65718a;margin:0;line-height:1.8}.subject-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.subject-card{background:#fff;border:1px solid #e1e7f3;border-radius:20px;flex-direction:column;min-height:360px;padding:22px;transition:transform .22s,box-shadow .22s;display:flex;box-shadow:0 8px 22px #2d44750d}.subject-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #2d44751f}.subject-card-top{justify-content:space-between;align-items:center;display:flex}.subject-icon{border-radius:15px;place-items:center;width:54px;height:54px;display:grid}.blue .subject-icon{color:#2e63df;background:#e8efff}.purple .subject-icon{color:#8149d9;background:#f1e8ff}.orange .subject-icon{color:#db7423;background:#fff0e2}.green .subject-icon{color:#219860;background:#e4f8ef}.subject-code{color:#7b869d;font-size:.76rem;font-weight:700}.subject-card h3{color:#253250;margin:20px 0 8px;font-family:Kanit,sans-serif;font-size:1.23rem;line-height:1.35}.subject-card p{color:#68758d;min-height:69px;margin:0;font-size:.9rem;line-height:1.7}.topic-list{flex-wrap:wrap;gap:7px;margin:17px 0 20px;display:flex}.topic-list span{color:#68758d;background:#f4f6fb;border-radius:7px;padding:4px 8px;font-size:.72rem;font-weight:600}.subject-button{color:#455ec7;background:#f1f4ff;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:auto;padding:11px 10px;font-weight:700;display:flex}.subject-button:hover{color:#fff;background:#536de8}.section-soft{background:#f0f4fc;width:100%;margin-top:24px;padding-left:max(20px,50% - 580px);padding-right:max(20px,50% - 580px)}.feature-grid{grid-template-columns:repeat(4,1fr);gap:17px;display:grid}.feature-card{background:#fff;border:1px solid #e0e7f4;border-radius:17px;padding:24px}.feature-icon{border-radius:13px;place-items:center;width:46px;height:46px;display:grid}.blue-icon{color:#3970df;background:#e9efff}.purple-icon{color:#8c55db;background:#f2eaff}.orange-icon{color:#da792b;background:#fff0e4}.green-icon{color:#289b64;background:#e6f8f0}.feature-card h3{color:#273552;margin:16px 0 7px;font-family:Kanit,sans-serif;font-size:1.1rem}.feature-card p{color:#6a768e;margin:0;font-size:.88rem;line-height:1.75}.cta-section{color:#fff;background:radial-gradient(circle at 85% 20%,#8e7fffa6,#0000 16rem),linear-gradient(120deg,#304eaf,#5f49c5);border-radius:24px;justify-content:space-between;align-items:center;gap:30px;width:min(1060px,100% - 40px);margin:88px auto;padding:46px;display:flex}.cta-section h2{color:#fff}.cta-section p:not(.eyebrow){color:#fffc;max-width:620px;margin:0;line-height:1.75}.eyebrow.light{color:#dfe6ff}.button-light{color:#4c51ad;background:#fff;flex:none}footer{color:#79849a;border-top:1px solid #e1e6f0;justify-content:space-between;gap:16px;width:min(1160px,100% - 40px);margin:0 auto;padding:26px 0 32px;font-size:.82rem;display:flex}@media (width<=920px){.subject-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.subject-card p{min-height:auto}}@media (width<=620px){.navbar{width:min(100% - 28px,1160px);height:72px}.nav-actions a{display:none}.nav-actions{gap:0}.hero{width:min(100% - 30px,960px);padding:62px 0 58px}.hero h1{font-size:2.55rem}.hero-description{font-size:.98rem}.section{width:min(100% - 30px,1160px);padding:61px 0}.subject-grid,.feature-grid{grid-template-columns:1fr}.section-soft{width:100%;padding-left:15px;padding-right:15px}.cta-section{flex-direction:column;align-items:flex-start;width:min(100% - 30px,1060px);margin:60px auto;padding:30px 24px}.button-light{width:100%}footer{flex-direction:column;width:min(100% - 30px,1160px)}}