/* PGZ999 — Blue / Yellow / White theme */
:root{
  --navy:#0b2a5b;
  --navy-2:#123a78;
  --blue:#1e63c8;
  --blue-soft:#eaf1fd;
  --yellow:#ffc617;
  --yellow-2:#ffe27a;
  --white:#ffffff;
  --ink:#132239;
  --muted:#54627a;
  --line:#dbe4f2;
  --radius:16px;
  --shadow:0 18px 40px -24px rgba(11,42,91,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Noto Sans Thai",system-ui,sans-serif;
  font-size:17px;
  line-height:1.95;
}
h1,h2,h3,.logo,.btn,.stat b{font-family:"Kanit",system-ui,sans-serif;line-height:1.4}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--white);box-shadow:0 2px 14px rgba(11,42,91,.25)}
.bar{display:flex;align-items:center;gap:18px;height:66px}
.logo{color:var(--white);font-weight:700;font-size:1.35rem;letter-spacing:.5px}
.logo span{color:var(--yellow)}
.logo:hover{text-decoration:none}
.nav{display:flex;gap:18px;margin-left:auto;font-size:.95rem}
.nav a{color:#d8e4f7}
.nav a:hover{color:var(--yellow);text-decoration:none}
.btn{
  display:inline-block;background:var(--yellow);color:#20303f;font-weight:600;
  padding:10px 20px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(255,198,23,.9);
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none}
.btn.big{padding:14px 28px;font-size:1.05rem}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);box-shadow:none}

/* Hero */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,#1a4b96 100%);
  color:var(--white);padding:52px 0 0;position:relative;overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 60%;height:60%;background:radial-gradient(closest-side,rgba(255,198,23,.28),transparent)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:2.5rem;margin:.4rem 0 1rem;color:var(--white)}
.hero p{color:#d9e5f7}
.pill{display:inline-block;background:rgba(255,198,23,.14);border:1px solid rgba(255,198,23,.55);color:var(--yellow-2);padding:5px 16px;border-radius:999px;font-size:.85rem;margin:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta-row .btn.ghost{color:var(--yellow);border-color:var(--yellow)}
.hero-fig{margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:34px;padding-bottom:34px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:14px 16px;text-align:center}
.stat b{display:block;color:var(--yellow);font-size:1.35rem}
.stat span{font-size:.9rem;color:#cddcf2}

/* Layout */
.layout{display:grid;grid-template-columns:260px 1fr;gap:42px;padding-top:44px;padding-bottom:56px}
.toc{position:sticky;top:90px;align-self:start;background:var(--blue-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.toc-title{margin:0 0 8px;font-weight:600;color:var(--navy);font-family:"Kanit",sans-serif}
.toc ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.toc li{margin:8px 0;line-height:1.6}
.toc a{color:var(--muted)}
.toc a:hover{color:var(--blue)}

/* Article */
.article{min-width:0}
.article h2{
  font-size:1.75rem;color:var(--navy);margin:2.6rem 0 1rem;padding-left:14px;
  border-left:6px solid var(--yellow);scroll-margin-top:86px;
}
.article h3{font-size:1.25rem;color:var(--blue);margin:2rem 0 .6rem}
.article p{margin:1rem 0;color:#28364d}
.article strong{color:var(--navy)}
.article ul,.article ol{margin:1rem 0;padding-left:1.4rem;color:#28364d}
.article li{margin:.45rem 0}
.article ul li::marker{color:var(--yellow)}
.article ol li::marker{color:var(--blue);font-weight:700}
.notice{
  background:#fffaea;border:1px solid #ffe08a;border-left:6px solid var(--yellow);
  border-radius:12px;padding:14px 18px;font-size:.95rem;color:#6a5a20;margin:0 0 8px;
}
.fig{margin:26px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.fig figcaption{background:var(--blue-soft);color:var(--muted);font-size:.9rem;padding:10px 16px;text-align:center}

/* FAQ */
.faq{background:var(--white);border:1px solid var(--line);border-radius:14px;margin:12px 0;box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 20px;font-family:"Kanit",sans-serif;
  font-weight:600;color:var(--navy);display:flex;gap:10px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";flex:0 0 26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:.9rem}
.faq[open] summary{border-bottom:1px solid var(--line)}
.faq-body{padding:4px 20px 14px}
.faq-body p{margin:.6rem 0;color:#3a4a63}

/* Footer */
.site-footer{background:var(--navy);color:#d7e3f6;padding:30px 0;text-align:center}
.site-footer p{margin:.3rem 0}
.site-footer .small{font-size:.85rem;color:#a9bdda}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .toc{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero h1{font-size:1.85rem}
  .article h2{font-size:1.4rem}
}