*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans Thai',sans-serif;background:#fafafa;color:#111}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#111;color:#fff;z-index:10}
.brand{font-weight:700}
.nav a{color:#fff;text-decoration:none;margin-left:12px;opacity:.9}
.nav a:hover{opacity:1}
.container{max-width:1100px;margin:0 auto;padding:16px}
.hero{padding:8px 0 16px}
.ads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}
.ad-box{background:#fff;border:1px dashed #bbb;border-radius:10px;height:90px;display:flex;align-items:center;justify-content:center;color:#666}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;margin:12px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.grid-1{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
h1{font-size:clamp(22px,4vw,34px);margin:.2em 0}
h2{font-size:clamp(18px,3vw,24px);margin:.2em 0 .6em}
h3{font-size:14px;color:#444;margin:.2em 0 .4em}
input[type=file],select,button{padding:8px 10px;border-radius:8px;border:1px solid #ddd;margin:6px 6px 6px 0}
button{background:#111;color:#fff;border:0;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.ph{max-width:100%;height:auto;border:1px solid #eee;border-radius:8px;background:#fff}
canvas{max-width:100%;border:1px solid #eee;border-radius:8px;background:#fff}
.video{width:100%;max-height:360px;background:#000;border-radius:8px}
.status{color:#444;margin-top:6px}
.btn{display:inline-block;background:#06c;color:#fff;padding:10px 12px;border-radius:8px;text-decoration:none;margin-top:8px}
.btn.disabled{pointer-events:none;opacity:.5}
.note{font-size:12px;color:#666;margin-top:6px}
.footer{padding:18px;text-align:center;color:#666}
.small{font-size:12px;color:#888}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}.ad-box{height:70px}}