:root{
  --primary:#FF6F61;
  --secondary:#FFD166;
  --bg:#F7F7F7;
  --text:#333;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #eee}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand .logo{width:36px;height:36px;border-radius:12px;background:var(--primary);display:grid;place-items:center;color:#fff;font-weight:900}
nav a{padding:8px 12px;border-radius:10px}
nav a:hover{background:#f3f4f6}
.btn{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:10px 14px;cursor:pointer}
.hero{background:var(--bg);padding:32px 0 16px}
.search{position:relative;max-width:720px;margin:0 auto}
.search input{width:100%;padding:14px 44px 14px 14px;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.06);outline:none}
.search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--primary);color:#fff;border:none;border-radius:12px;padding:10px 12px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card img{width:100%;height:160px;object-fit:cover}
.card .p{padding:12px}
.card h3{margin:6px 0 2px;font-size:16px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--secondary);padding:4px 10px;border-radius:999px}
.metas{display:flex;gap:10px;color:#666;font-size:12px;margin-top:6px}
.section{margin:24px 0}
.section h2{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.ad{border:1px dashed #ddd;background:#fff;height:250px;border-radius:16px;display:grid;place-items:center;color:#888}
footer{margin-top:32px;background:#fff;border-top:1px solid #eee}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0;color:#666}
.form{background:#fff;border-radius:16px;padding:16px}
.form input,.form textarea,.form select{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:12px;margin:6px 0 12px}
.detail{max-width:960px;margin:0 auto}
.detail-hero{display:grid;grid-template-columns:1.5fr .9fr;gap:16px}
@media (max-width:900px){.detail-hero{grid-template-columns:1fr}}
.comments .item{border-top:1px solid #eee;padding:12px 0}
.empty{color:#999;font-size:14px}