:root{--deep:#06182f;--navy:#0b315f;--blue:#0875d1;--cyan:#48dff0;--ink:#17304e;--muted:#56708c;--paper:#f3f8fc;--line:#d8e8f4;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;background:var(--paper);color:var(--ink);line-height:1.85}.hero{background:linear-gradient(112deg,#05162e,#09366d 60%,#087fba);color:white;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 28%,rgba(85,229,244,.3),transparent 25%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}.hero-inner{width:min(1200px,92%);margin:auto;position:relative;padding:26px 0 75px}.brand{display:flex;align-items:center;gap:20px;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:20px}.brand img{width:190px;height:58px;object-fit:contain}.brand span{color:#a7ecf8;font-size:.76rem;letter-spacing:.18em}.hero-grid{display:grid;grid-template-columns:1.45fr .55fr;align-items:center;gap:50px;padding-top:58px}.eyebrow{font-weight:900;color:#67e7f2;letter-spacing:.1em;font-size:.85rem}.hero h1{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.16;margin:12px 0 17px}.hero-lead{font-size:1.08rem;color:#d8edff;max-width:680px}.orbit{width:285px;height:285px;border:2px solid rgba(106,234,246,.48);border-radius:50%;justify-self:end;display:grid;place-content:center;text-align:center;position:relative}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;inset:26px}.orbit:after{inset:-18px}.orbit i{position:absolute;width:17px;height:17px;border-radius:50%;background:#6de9f3;top:23px;left:45px;box-shadow:0 0 25px #5ee3f0}.orbit b{font-size:6rem;line-height:.8;color:#54dce9}.orbit span{font-weight:900;letter-spacing:.45em;margin-top:15px}.layout{width:min(1220px,94%);margin:-34px auto 75px;position:relative;display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start}aside{position:sticky;top:18px;background:#071d3a;color:white;border-radius:18px;padding:24px 15px;max-height:calc(100vh - 36px);overflow:auto;box-shadow:0 16px 40px rgba(9,48,91,.18)}aside>p{margin:0 10px 14px;color:#61e4f0;font-weight:900;letter-spacing:.12em}aside nav{display:grid;gap:3px}aside a{display:grid;grid-template-columns:34px 1fr;gap:7px;color:#d5e7f8;text-decoration:none;padding:8px 9px;border-radius:10px;font-size:.79rem;line-height:1.45}aside a span{color:#55deeb;font-weight:900}aside a:hover,aside a.active{background:#0d4483;color:white}.intro,.chapter{background:white;border:1px solid var(--line);box-shadow:0 12px 35px rgba(20,71,119,.07)}.intro{border-radius:24px;padding:clamp(28px,5vw,60px);margin-bottom:27px}.intro p:first-child{font-size:1.08rem;color:#294563}.chapter{display:grid;grid-template-columns:98px 1fr;border-radius:18px;margin-bottom:25px;overflow:hidden}.chapter.offset{transform:translateX(20px)}.chapter-tag{background:linear-gradient(180deg,#0a73ce,#0a3b77);color:white;display:flex;flex-direction:column;align-items:center;padding-top:40px}.chapter-tag span{font-size:1.6rem;font-weight:900;color:#71e7f2}.chapter-tag small{writing-mode:vertical-rl;letter-spacing:.18em;margin-top:14px;color:#b9e9f5}.chapter-body{padding:clamp(28px,5vw,58px)}h2{font-size:clamp(1.55rem,2.8vw,2.25rem);line-height:1.35;color:#082e60;margin:0 0 26px}h3{font-size:1.25rem;line-height:1.4;color:#0b68c3;margin:36px 0 13px;padding-bottom:9px;border-bottom:2px solid #d9eef8}p{margin:0 0 18px;color:#354d68}p+p{text-indent:1.35em}.detail-list{list-style:none;padding:0;margin:23px 0;display:grid;gap:10px}.detail-list li{position:relative;background:#eef9fd;border-left:4px solid #19a9d3;padding:13px 16px 13px 42px;border-radius:0 10px 10px 0}.detail-list li:before{content:"✓";position:absolute;left:15px;color:#0876ce;font-weight:900}.cta{display:block;width:min(360px,92%);position:relative;margin:31px auto;text-decoration:none;transition:.25s}.cta img{width:100%;display:block}.cta span{position:absolute;inset:0;display:grid;place-items:center;padding-right:58px;color:white;font-size:1.5rem;font-weight:900;text-shadow:0 2px 5px rgba(0,0,0,.3)}.cta:hover{transform:translateY(-4px);filter:drop-shadow(0 12px 15px rgba(15,112,204,.25))}figure{margin:38px 0 18px;padding:8px;background:#082f67;border-radius:16px;box-shadow:0 18px 36px rgba(10,55,105,.16)}figure img{display:block;width:100%;border-radius:10px}figcaption{color:#d8efff;text-align:center;padding:9px 8px 2px;font-size:.88rem}.sports{background:linear-gradient(135deg,#0c5796,#10a2c5)}.table-wrap{overflow:auto;margin:28px 0 5px;border-radius:12px;border:1px solid #cae3f2}table{border-collapse:collapse;width:100%;min-width:640px;background:white}th,td{padding:13px 15px;text-align:left;border-bottom:1px solid #dceaf3}th{background:#0b4f91;color:white}tbody tr:nth-child(even){background:#f1f9fd}footer{background:#05162d;color:#d7e6f7;padding:55px 0 22px}.footer-grid{width:min(1080px,92%);margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:60px}.footer-brand img{width:205px;height:65px;object-fit:contain}.footer-grid h2{color:white;font-size:1.25rem}.footer-grid ul{list-style:none;padding:0;margin:0}.footer-grid li{margin:9px 0}.footer-grid a{color:#63ddeb;text-decoration:none}.copyright{width:min(1080px,92%);margin:34px auto 0;text-align:center;border-top:1px solid rgba(255,255,255,.13);padding-top:22px;color:#92a8c0;text-indent:0}.to-top{position:fixed;right:20px;bottom:20px;width:47px;height:47px;border:0;border-radius:14px;background:#0875d1;color:white;font-size:1.25rem;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.22);opacity:0;transform:translateY(15px);transition:.2s}.to-top.show{opacity:1;transform:none}@media(max-width:920px){.hero-grid{grid-template-columns:1fr}.orbit{display:none}.layout{grid-template-columns:1fr}aside{position:relative;top:auto;max-height:none}aside nav{grid-template-columns:repeat(2,1fr)}.chapter.offset{transform:none}}@media(max-width:650px){.brand span{display:none}.hero-inner{padding-bottom:52px}aside nav{grid-template-columns:1fr}.chapter{grid-template-columns:1fr}.chapter-tag{height:55px;flex-direction:row;justify-content:flex-start;padding:0 20px;gap:10px}.chapter-tag small{writing-mode:horizontal-tb;margin:0}.chapter-body,.intro{padding:30px 21px}.footer-grid{grid-template-columns:1fr;gap:25px}p+p{text-indent:0}}