:root{--bg:#0b0f0c;--card:#121714;--text:#e6f2ea;--muted:#b7c6bd;--accent:#10b981;--accent-2:#0ea769;--line:#1e2a23;--ad:#0f1411}
.light{--bg:#fff;--card:#f7faf8;--text:#0f1a14;--muted:#4b5d51;--accent:#10b981;--accent-2:#0ea769;--line:#e6eee9;--ad:#edf7f1}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,100%);margin-inline:auto;padding:0 16px}
.topbar{border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:50}
.topbar .inner{display:flex;align-items:center;gap:12px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo img{width:42px;height:42px;border-radius:8px;object-fit:cover;border:2px solid var(--accent)}
.brand{display:flex;flex-direction:column}
.brand b{font-size:18px;letter-spacing:.3px}
.brand span{color:var(--muted);font-size:12px}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav li{list-style:none}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:var(--line)}
.chip{font-size:12px;background:rgba(16,185,129,.14);color:var(--accent);padding:2px 8px;border-radius:999px;margin-left:6px}
.toggles{display:flex;gap:8px;align-items:center}
.btn{background:var(--accent);border:none;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.hamb{display:none}
@media(max-width:960px){.nav{display:none}.hamb{display:inline-flex;margin-left:auto}}
.mnav{display:none}
.mnav.open{display:block;border-top:1px solid var(--line);background:var(--card)}
.mnav .m-list{margin:0;padding:0}
.mnav .m-list li{list-style:none;border-bottom:1px solid var(--line)}
.mnav .m-list a{display:block;padding:14px 20px}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:18px 0}
.slide,.mini{position:relative;overflow:hidden;border-radius:14px;background:#000}
.slide img,.mini img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#062e22;font-weight:700;font-size:12px;padding:4px 8px;border-radius:8px}
.cover{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.75))}
.caption{position:absolute;left:12px;right:12px;bottom:12px}
.caption h2{margin:0 0 6px;font-size:22px}
.caption p{margin:0;color:#d2e7dc;font-size:13px}
.hero-right{display:grid;grid-template-rows:1fr 1fr;gap:16px}
@media(max-width:960px){.hero{grid-template-columns:1fr}}
.section{margin:28px 0}
.section h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:20px}
.section h3 .bar{width:6px;height:18px;background:var(--accent);border-radius:3px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.grid.two-col-grid{grid-template-columns:2fr 1fr}
@media(max-width:960px){.grid.two-col-grid{grid-template-columns:1fr}}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.thumb{position:relative}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.meta{padding:12px}
.meta h4{margin:0 0 6px;font-size:16px}
.meta .info{font-size:12px;color:var(--muted)}
.ad{background:var(--ad);border:1px dashed var(--accent);border-radius:12px;padding:16px;text-align:center;color:var(--muted)}
.ad.sticky{position:sticky;top:80px}
.list{display:grid;gap:12px}
.list a{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding-right:8px}
.list img{width:120px;height:80px;object-fit:cover}
.list .t b{display:block}
.aside{display:grid;gap:16px}
.single{max-width:860px;margin:24px auto}
.single-title{margin:0 0 6px}
.single-meta{color:var(--muted);font-size:14px;margin-bottom:14px}
.single-thumb img{width:100%;border-radius:14px}
.single-content p{margin:0 0 1em}
footer{margin-top:40px;border-top:1px solid var(--line);background:var(--card)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:24px 0}
.foot h4{margin:0 0 10px}
.foot a{display:block;color:var(--muted);padding:4px 0}
.copy{border-top:1px solid var(--line);padding:12px 0;color:var(--muted);font-size:13px}
.pill{display:inline-block;font-size:11px;border:1px solid var(--line);color:var(--muted);padding:4px 8px;border-radius:999px;margin:4px 6px 0 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line)}
.table thead tr{background:var(--ad)}
.table .center{text-align:center}
.table .right{text-align:right}
.pagination{text-align:center;margin:20px 0}