:root{--bg:#f6f7fb;--card:#fff;--tx:#14161f;--mut:#6b7185;--ac:#6d5efc;--bd:#e4e6ef}
:root[data-theme=dark]{--bg:#0d0f17;--card:#161926;--tx:#e8eaf3;--mut:#8b91a8;--ac:#8f84ff;--bd:#252a3d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 system-ui,"Noto Sans Thai","Segoe UI",sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--bd);z-index:5;padding:10px 0 6px}
.bar{display:flex;gap:10px;align-items:center}
.logo{font-weight:800;font-size:1.5rem;color:var(--tx);text-decoration:none;letter-spacing:-.03em}
.logo span{color:var(--ac)}
#q{flex:1;padding:9px 14px;border-radius:99px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font:inherit}
#theme{border:1px solid var(--bd);background:var(--card);color:var(--tx);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.1rem}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}
.chip{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:4px 14px;border-radius:99px;cursor:pointer;white-space:nowrap;font:inherit;font-size:.9rem}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.hero{margin:18px 0;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,var(--ac),#2fb9ff);color:#fff}
.hero h2{margin:0 0 6px;font-size:1.05rem}.hero p{margin:0 0 10px}
#trending button{background:rgba(255,255,255,.2);border:0;color:#fff;border-radius:99px;padding:2px 11px;margin:0 6px 6px 0;cursor:pointer;font:inherit;font-size:.85rem}
.meta{display:flex;justify-content:space-between;color:var(--mut);font-size:.85rem;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card img{width:100%;height:160px;object-fit:cover;background:var(--bd)}
.card .b{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:1.02rem;line-height:1.35}
.card a{color:inherit;text-decoration:none}.card h3 a:hover{color:var(--ac)}
.card p{margin:0;color:var(--mut);font-size:.9rem}
.info{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.78rem;color:var(--mut)}
.tag{background:color-mix(in srgb,var(--ac) 15%,transparent);color:var(--ac);padding:1px 9px;border-radius:99px}
#more{display:block;margin:24px auto;padding:10px 28px;border-radius:99px;border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;font:inherit}
footer{color:var(--mut);font-size:.8rem;padding:30px 16px}