@font-face { font-family:'NotoThai'; font-weight:400; src:url('fonts/NotoSansThai-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'NotoThai'; font-weight:700; src:url('fonts/NotoSansThai-Bold.ttf') format('truetype'); font-display:swap; }
* { box-sizing:border-box; }
body { font-family:'NotoThai','Noto Sans Thai','DejaVu Sans',sans-serif; font-size:16px; line-height:1.7; color:#222; margin:0; background:#f4f6f9; }
main { max-width:900px; margin:0 auto; padding:32px 24px 80px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.06); }
h1 { color:#15315c; border-bottom:2.5px solid #15315c; padding-bottom:6px; font-size:1.7em; line-height:1.4; }
h2 { color:#1a3a6b; border-bottom:1px solid #c9d6ea; padding-bottom:4px; margin-top:36px; font-size:1.35em; }
h3 { color:#243b5c; margin-top:28px; font-size:1.15em; }
h4 { color:#243b5c; margin-top:22px; font-size:1.02em; }
table { border-collapse:collapse; width:100%; margin:10px 0; display:block; overflow-x:auto; }
th,td { border:1px solid #99a; padding:6px 10px; font-size:.92em; vertical-align:top; }
th { background:#eef2f8; text-align:left; }
code { font-family:'DejaVu Sans Mono',monospace; font-size:.88em; background:#f3f3f3; padding:0 4px; border-radius:3px; }
img { max-width:100%; border:1px solid #ccc; border-radius:4px; margin:8px 0; box-shadow:0 1px 4px rgba(0,0,0,.1); }
blockquote { border-left:3px solid #1a3a6b; margin:10px 0; padding:5px 16px; color:#3a4658; background:#f7f9fc; border-radius:0 4px 4px 0; }
a { color:#16794a; text-decoration:none; } a:hover { text-decoration:underline; }
hr { border:none; border-top:1px solid #dde; margin:24px 0; }
ul,ol { margin:8px 0; padding-left:24px; } li { margin:3px 0; }
@media (max-width:600px){ body{font-size:15px;} main{padding:20px 14px 60px;} }