:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0b74ff;
  --radius:12px;
  --shadow:0 8px 20px rgba(15,23,42,0.06);
  font-family:Arial, sans-serif;
}

body{ margin:0;background:var(--bg); }

.wrap{
  width:94%;
  max-width:1200px;
  margin:36px auto;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:#000;
  transition:0.2s ease;
  display:flex;
  flex-direction:column;
}

.card:hover{
  transform:translateY(-4px);
}

.thumb{
  position:relative;
  height:180px;
  background:#eee;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.play-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(0,0,0,0.60);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}

.play-badge .dot{
  width:8px;
  height:8px;
  background:red;
  border-radius:50%;
}

.card-body{
  padding:14px;
}

.title{
  font-size:17px;
  font-weight:600;
  margin-bottom:6px;
}

.desc{
  font-size:14px;
  color:var(--muted);
}