:root{--navy:#0d1b2a;--navy2:#13263d;--gold:#c9a227;--gold2:#e3c45a;--bg:#f6f4ee;--card:#fffdf8;--ink:#1a2433;--muted:#6b7686;--line:#e3ddd0;--link:#13539e}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Noto Sans Thai','Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.72;font-size:16.5px}
a{color:var(--link);text-decoration:none}a:hover{color:var(--gold);text-decoration:underline}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:10px 18px;box-shadow:0 2px 14px rgba(0,0,0,.18);flex-wrap:wrap}
.brand{color:#fff!important;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;text-decoration:none!important}
.brand .sub{color:var(--gold2);font-weight:500;font-size:13px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.topnav{display:flex;gap:6px;flex-wrap:wrap}
.topnav a{color:#dfe6f0!important;padding:6px 11px;border-radius:8px;font-size:14px;text-decoration:none!important}
.topnav a:hover{background:var(--navy2);color:var(--gold2)!important}
.breadcrumb{max-width:920px;margin:0 auto;padding:12px 20px 0;color:var(--muted);font-size:13.5px}
.breadcrumb a{color:var(--muted)}
main{max-width:920px;margin:0 auto;padding:22px 20px 60px}
main.home{max-width:1100px}
h1{font-size:30px;line-height:1.3;color:var(--navy);margin:.4em 0 .5em;font-weight:700}
h2{font-size:22px;color:var(--navy);margin:1.5em 0 .6em;padding-left:12px;border-left:5px solid var(--gold);font-weight:700}
h3{font-size:18px;color:var(--navy2);margin:1.2em 0 .4em;font-weight:600}
blockquote{margin:1em 0;padding:12px 16px;background:#fbf6e6;border-left:4px solid var(--gold);border-radius:0 8px 8px 0;color:#4a4636}
table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14.5px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.05);border-radius:8px;overflow:hidden;display:block;overflow-x:auto}
th{background:var(--navy);color:#fff;padding:9px 12px;text-align:left;font-weight:600;white-space:nowrap}
td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top}
tr:nth-child(even) td{background:#faf8f2}
ul,ol{padding-left:1.4em}li{margin:.28em 0}
code{background:#eef0f4;padding:1.5px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,Menlo,monospace}
hr{border:none;border-top:1px solid var(--line);margin:2em 0}
details{margin:1.4em 0;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
details>summary{cursor:pointer;padding:13px 16px;font-weight:600;color:var(--navy);background:#f1ece0;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:'📄 ';}
details[open]>summary{border-bottom:1px solid var(--line)}
details>:not(summary){padding:6px 18px 16px;color:#3a4350;font-size:15px;line-height:1.8}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:14px;margin:.2em 0 1em}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff!important;padding:9px 16px;border-radius:9px;font-weight:600;font-size:14.5px;text-decoration:none!important;border:1px solid var(--navy)}
.btn:hover{background:var(--navy2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#241d00!important}
.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:transparent;color:var(--navy)!important;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);background:#fff}
/* hero */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:16px;padding:30px 28px;margin-bottom:22px;box-shadow:0 8px 30px rgba(13,27,42,.2)}
.hero h1{color:#fff;margin:0 0 6px;font-size:32px}
.hero p{color:#cfd8e6;margin:.2em 0;max-width:720px}
.hero .stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(201,162,39,.35);border-radius:10px;padding:8px 14px}
.stat b{color:var(--gold2);font-size:20px;display:block;line-height:1.1}.stat span{font-size:12.5px;color:#c2cbd9}
/* search */
.searchbox{margin:8px 0 4px}
.searchbox input{width:100%;padding:13px 16px;font-size:16px;border:2px solid var(--line);border-radius:11px;font-family:inherit;background:#fff}
.searchbox input:focus{outline:none;border-color:var(--gold)}
#sresults{margin-top:10px}
#sresults a{display:block;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:9px;margin:7px 0;color:var(--ink)!important;text-decoration:none!important}
#sresults a:hover{border-color:var(--gold);background:#fff}
#sresults .rt{font-weight:600;color:var(--navy)}
#sresults .rm{font-size:13px;color:var(--muted)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:14px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;text-decoration:none!important;color:var(--ink)!important;transition:.15s;display:block}
.card:hover{border-color:var(--gold);box-shadow:0 6px 20px rgba(13,27,42,.1);transform:translateY(-2px)}
.card .ce{font-size:28px}.card .ct{font-weight:700;color:var(--navy);margin:6px 0 3px;font-size:16px}
.card .cm{font-size:13px;color:var(--muted)}
.vidlist a.vrow{display:flex;justify-content:space-between;gap:12px;padding:9px 4px;border-bottom:1px solid var(--line);color:var(--ink)!important;text-decoration:none!important}
.vidlist a.vrow:hover{background:#fff}
.vidlist .vt{color:var(--navy)}.vidlist .vv{color:var(--muted);font-size:13.5px;white-space:nowrap}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.pager a{max-width:46%;font-size:14px}
.foot{max-width:920px;margin:0 auto;padding:24px 20px 50px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.foot .muted{margin-top:6px;font-size:12px}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.tag{font-size:12px;background:#eef0f4;color:#46506a;padding:2px 9px;border-radius:20px}
@media(max-width:600px){body{font-size:16px}.hero h1{font-size:25px}h1{font-size:24px}main{padding:16px 14px 50px}}