@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--navy:#18305f;--blue:#2f59ca;--text:#10244d;--muted:#72809a;--line:#e5eaf3;--soft:#f4f7fd;--lav:#f0ecff;--peach:#fff0e4;--sky:#eaf2ff;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Noto Sans Thai',sans-serif;color:var(--text);background:#fff;line-height:1.75}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#3b6be1,#2149af);display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px rgba(47,89,202,.22)}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#8490a8;margin-top:-4px}.menu{display:flex;gap:34px;font-weight:700;font-size:14px}.menu a{padding:26px 0;position:relative}.menu a.active,.menu a:hover{color:var(--blue)}.menu a.active:after{content:'';position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--blue)}.mobile-toggle{display:none;border:0;background:none;font-size:25px}.hero{padding:88px 0 120px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:800;color:var(--blue);text-transform:uppercase}.hero h1,.page-head h1{font-size:62px;line-height:1.2;margin:12px 0 24px;letter-spacing:-2px}.accent{color:var(--blue)}.lead{font-size:17px;color:var(--muted);max-width:650px}.actions{display:flex;gap:20px;align-items:center;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:white;padding:14px 24px;border-radius:9px;font-weight:800;box-shadow:0 12px 28px rgba(47,89,202,.18)}.btn:hover{transform:translateY(-1px)}.link-arrow{color:var(--blue);font-weight:800}.hero-art{border-radius:28px;overflow:hidden;min-height:430px;background:linear-gradient(135deg,#d9e5f8,#fbefe0);position:relative;box-shadow:inset 0 0 0 1px rgba(24,48,95,.05)}.desk{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 52%,rgba(112,77,46,.12) 52%),linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,.08));}.window{position:absolute;left:8%;top:8%;right:8%;bottom:34%;background:linear-gradient(#bcd7f1 0 58%,#5ea0c7 59% 66%,#91b1a9 67%);border-radius:20px}.window:after{content:'';position:absolute;width:80px;height:160px;left:44%;bottom:0;background:linear-gradient(90deg,transparent 15%,#c9d2dd 15% 22%,transparent 22% 36%,#b9c3cf 36% 43%,transparent 43% 58%,#dbe3ec 58% 66%,transparent 66%);clip-path:polygon(50% 0,100% 100%,0 100%)}.book{position:absolute;left:18%;bottom:13%;width:57%;height:120px;background:#fffaf2;border-radius:12px;transform:perspective(400px) rotateX(50deg) rotateZ(-4deg);box-shadow:0 14px 20px rgba(29,48,81,.18);border:1px solid #ddd}.mug{position:absolute;right:18%;bottom:29%;width:70px;height:75px;background:#d4c2ad;border-radius:6px 6px 18px 18px;box-shadow:0 12px 20px rgba(0,0,0,.12)}.mug:after{content:'';position:absolute;right:-24px;top:16px;width:30px;height:30px;border:7px solid #d4c2ad;border-left:0;border-radius:0 20px 20px 0}.section{padding:88px 0}.section.soft{background:var(--soft)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px}.section h2{font-size:38px;line-height:1.25;margin:10px 0}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.topic{padding:34px;border-radius:18px;min-height:260px;position:relative}.topic:nth-child(1){background:var(--sky)}.topic:nth-child(2){background:var(--lav)}.topic:nth-child(3){background:var(--peach)}.topic .icon{font-size:38px;color:var(--blue);margin-bottom:24px}.topic:nth-child(2) .icon{color:#7660cb}.topic:nth-child(3) .icon{color:#e4792b}.topic h3{font-size:24px;margin:5px 0}.topic p{color:var(--muted);margin:0}.topic .go{position:absolute;right:26px;bottom:24px;color:var(--blue)}.articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.article-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.article-visual{height:220px;position:relative}.visual-one{background:linear-gradient(140deg,#eedfca,#9db4d6)}.visual-two{background:linear-gradient(140deg,#d4ead7,#93afd1)}.article-visual:before{content:'';position:absolute;left:8%;right:8%;bottom:14%;height:44%;border-radius:8px;background:rgba(255,255,255,.78);box-shadow:0 10px 30px rgba(24,48,95,.18);transform:rotate(-2deg)}.article-visual:after{content:'✎  ≡  ✓   ◇';position:absolute;left:17%;bottom:28%;font-size:35px;color:#7184ad;letter-spacing:16px}.visual-two:after{content:'▦  ◫  ▤';left:23%;font-size:46px}.article-body{padding:28px}.meta{color:var(--blue);font-size:13px;font-weight:800}.article-body h3{font-size:22px;line-height:1.45;margin:8px 0}.article-body p{color:var(--muted)}.cta{text-align:center;padding:110px 20px}.cta h2{font-size:40px;max-width:720px;margin:14px auto 28px}.site-footer{background:var(--navy);color:#dbe4f5;padding:58px 0 20px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:60px}.footer-title{color:#fff;font-weight:800}.footer-links a{display:block;margin:8px 0;color:#dbe4f5}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:50px;padding-top:18px;font-size:12px;color:#9fb0cf}.page-head{padding:56px 0 45px;border-bottom:1px solid var(--line)}.page-head h1{font-size:54px;margin:0 0 10px}.course-list,.article-list{padding:30px 0 90px}.course-row{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}.course-icon{height:180px;border-radius:18px;display:grid;place-items:center;font-size:54px}.course-row:nth-child(1) .course-icon{background:var(--sky);color:var(--blue)}.course-row:nth-child(2) .course-icon{background:var(--lav);color:#7660cb}.course-row:nth-child(3) .course-icon{background:var(--peach);color:#e4792b}.course-row h2{margin:2px 0;font-size:28px}.course-row p{color:var(--muted)}.number{font-weight:800;color:var(--blue);font-size:13px}.article-row{display:grid;grid-template-columns:70px 1fr 30px;gap:22px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}.article-row .num{font-size:19px;color:#9aa8c2;font-weight:700}.article-row h2{font-size:23px;margin:6px 0}.article-row p{color:var(--muted);margin:0}.about-grid{display:grid;grid-template-columns:300px 1fr;gap:90px;padding:75px 0}.big-num{font-size:78px;line-height:1;color:var(--blue);font-weight:700}.about-copy h2{font-size:38px;line-height:1.45;margin-top:0}.about-copy p{color:var(--muted);font-size:16px}.company-box{margin-top:34px;padding:28px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}.company-box h3{margin:0 0 10px;font-size:20px}.company-box p{margin:5px 0;color:#52617b}.line-float{position:fixed;right:24px;bottom:24px;z-index:50;background:#06c755;color:#fff;border-radius:999px;padding:13px 18px;font-weight:800;box-shadow:0 12px 30px rgba(6,199,85,.28)}.line-float:hover{transform:translateY(-2px)}
@media(max-width:800px){.nav{height:68px}.menu{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 20px;flex-direction:column;gap:0}.menu.open{display:flex}.menu a{padding:12px}.mobile-toggle{display:block}.brand{font-size:20px}.hero{padding:54px 0 70px}.hero-grid{grid-template-columns:1fr;gap:38px}.hero h1,.page-head h1{font-size:42px}.hero-art{min-height:330px}.cards3,.articles-grid,.footer-grid,.about-grid{grid-template-columns:1fr}.course-row{grid-template-columns:1fr;gap:20px}.course-icon{height:150px}.section{padding:64px 0}.section h2{font-size:32px}.cta h2{font-size:32px}.footer-grid{gap:28px}.about-grid{gap:28px}.article-row{grid-template-columns:45px 1fr 20px}.container{width:min(100% - 28px,1180px)}.line-float{right:14px;bottom:14px;padding:11px 15px}}