:root{
  --deep:#062a4a; --blue:#0b6cb1; --sky:#38a9e8; --ice:#eaf5fc; --line:#d7e6f1;
  --ink:#17303f; --muted:#5b7386; --white:#fff; --gold:#f2b544;
  --radius:16px; --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Sarabun","Noto Sans Thai",-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.85;font-size:17px}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* header */
.topbar{background:var(--deep);color:#cfe6f7;font-size:14px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.topbar a{color:#cfe6f7}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;color:var(--deep)}
.brand .drop{width:42px;height:42px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);background:linear-gradient(140deg,var(--sky),var(--blue))}
.brand b{display:block;font-size:19px;line-height:1.2}
.brand span{font-size:12px;color:var(--muted);letter-spacing:.5px}
nav.main{display:flex;flex-wrap:wrap;gap:4px}
nav.main a{padding:8px 12px;border-radius:10px;color:var(--deep);font-weight:500;font-size:15px}
nav.main a:hover{background:var(--ice)}
nav.main a.active{background:var(--blue);color:#fff}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:600;background:var(--blue);color:#fff;border:2px solid var(--blue);transition:.2s}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn.ghost{background:transparent;color:var(--deep);border-color:var(--line)}
.btn.ghost:hover{background:var(--ice);color:var(--deep);border-color:var(--sky)}
/* hero */
.hero{position:relative;color:#fff;background:var(--deep)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.hero .wrap{position:relative;padding:90px 20px}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.25;margin-bottom:18px}
.hero p.lead{font-size:19px;max-width:720px;color:#dcefff}
.hero .cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.pagehead{background:linear-gradient(120deg,var(--deep),var(--blue));color:#fff;padding:60px 0}
.pagehead h1{font-size:clamp(26px,4vw,40px)}
.pagehead p{color:#d7ecfb;margin-top:8px}
/* sections */
section{padding:64px 0}
section.alt{background:var(--ice)}
h2{font-size:clamp(23px,3.2vw,33px);color:var(--deep);line-height:1.35;margin-bottom:14px}
h3{font-size:21px;color:var(--deep);margin:26px 0 8px}
h4{font-size:18px;color:var(--deep);margin:18px 0 6px}
p{margin-bottom:14px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:7px}
.eyebrow{display:inline-block;background:var(--ice);color:var(--blue);border:1px solid var(--line);padding:4px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:12px}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.card:hover{box-shadow:0 14px 34px rgba(11,108,177,.12);transform:translateY(-3px)}
.card .body{padding:20px}
.card h3{margin-top:0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.stat b{display:block;font-size:32px;color:var(--blue)}
.stat span{font-size:14px;color:var(--muted)}
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:36px;align-items:center}
.media img{border-radius:var(--radius)}
figure{margin:0 0 18px}
figure img{border-radius:var(--radius)}
figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;text-align:center}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;font-size:15.5px}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
th{background:var(--ice);color:var(--deep)}
.note{background:var(--ice);border-left:5px solid var(--sky);padding:18px 20px;border-radius:12px;margin-bottom:18px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.faq b{color:var(--deep)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gal img{border-radius:12px;aspect-ratio:4/3;object-fit:cover}
.cta-band{background:linear-gradient(120deg,var(--blue),var(--deep));color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#dbeeff}
footer.site{background:var(--deep);color:#c6ddee;padding:52px 0 24px;font-size:15px}
footer.site a{color:#c6ddee}
footer.site a:hover{color:#fff}
footer.site h4{color:#fff;margin-top:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.copy{border-top:1px solid rgba(255,255,255,.15);margin-top:32px;padding-top:16px;font-size:13.5px;text-align:center}
form label{display:block;font-weight:600;color:var(--deep);margin-bottom:6px}
form input,form select,form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;margin-bottom:14px;background:#fff}
form input:focus,form textarea:focus{outline:2px solid var(--sky)}