:root { --ink:#172235; --muted:#657084; --line:#dfe4eb; --primary:#6658e8; --panel:#f8f9fc; font-family:"Noto Sans Thai",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--panel); }
a { color:var(--primary); font-weight:600; text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.site-header__inner { display:flex; width:min(920px,calc(100% - 40px)); min-height:70px; margin:auto; align-items:center; justify-content:space-between; gap:20px; }
.site-brand { font-size:18px; font-weight:700; }
.site-nav { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; }
.content-page { width:min(820px,calc(100% - 40px)); margin:44px auto 70px; padding:clamp(28px,6vw,60px); border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(31,25,89,.07); }
.eyebrow { margin:0 0 8px; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.08em; }
h1 { margin:0 0 18px; font-size:clamp(30px,5vw,45px); line-height:1.25; }
h2 { margin:38px 0 10px; font-size:21px; }
p,li { color:var(--muted); font-size:15px; line-height:1.85; }
ul,ol { padding-left:24px; }
.updated { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; }
@media(max-width:600px){.site-header__inner{align-items:flex-start;flex-direction:column;padding:18px 0}.content-page{margin-top:20px}.site-nav{gap:10px 16px}}