/* ========== GRID ========== */
.dcc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
@media (max-width:1200px){.dcc-grid{grid-template-columns:repeat(9,1fr)}}
@media (max-width:992px){.dcc-grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.dcc-grid{grid-template-columns:repeat(1,1fr)}}

/* ========== CARD ========== */
.dcc-card{
  grid-column:span 4;background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid #f2f2f2;display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.06)
}
@media (max-width:992px){.dcc-card{grid-column:span 6}}
@media (max-width:640px){.dcc-card{grid-column:span 1}}

.dcc-thumb{position:relative;aspect-ratio:16/9;background:#fafafa}
.dcc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dcc-badges{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.dcc-badge{background:#fff;border-radius:24px;padding:6px 12px;font-size:12px;box-shadow:0 6px 16px rgba(0,0,0,.12)}

.dcc-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px}
.dcc-title{font-size:20px;line-height:1.3;margin:0}
.dcc-title a{color:#1f2937;text-decoration:none}
.dcc-title a:hover{text-decoration:underline}

/* ========== META ROW (1 dòng, co giãn) ========== */
.dcc-meta-rows{font-size:14px;color:#374151}
.dcc-meta-row{
  display:flex;align-items:center;gap:10px;
  flex-wrap:nowrap;white-space:nowrap;overflow:hidden
}
.dcc-meta-item{
  display:inline-flex;align-items:center;gap:8px;
  min-width:0;white-space:nowrap;color:#6b7280;     font-size: 10px;

}

/* SVG icons (dùng <i class="dcc-i dcc-i-..."></i>) */
.dcc-i{
  width:10px;height:10px;flex:0 0 18px;opacity:.75;
  background-repeat:no-repeat;background-size:10px 10px;background-position:center;
  filter:grayscale(100%)
}
.dcc-i-stack{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%2399A1AA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="12" height="8" rx="2"/><path d="M5 14h8"/></svg>')
}
.dcc-i-clock{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%2399A1AA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="7.2"/><path d="M9 5.4V9l2.6 1.6"/></svg>')
}
.dcc-i-play{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%2399A1AA"><path d="M6.5 5.5v7l6-3.5-6-3.5z"/></svg>')
}

/* Responsive co nhỏ để không rớt hàng */
@media (max-width:768px){
  .dcc-meta-row{gap:12px}
  .dcc-i{width:16px;height:16px;background-size:16px 16px;flex:0 0 16px}
  .dcc-meta-rows{font-size:13.5px}
}
@media (max-width:480px){
  .dcc-meta-row{gap:5px}
  .dcc-i{width:15px;height:15px;background-size:15px 15px;flex:0 0 15px}
  .dcc-meta-rows{font-size:13px}
}

/* ========== TEACHER ========== */
.dcc-teacher{display:flex;align-items:center;gap:12px;margin-top:4px}
.dcc-teacher-avatar{width:44px;height:44px;border-radius:999px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.dcc-teacher-name{font-weight:700;color:#111827}
.dcc-teacher-title{font-size:13px;color:#6b7280;margin-top:2px}

/* ========== ACTIONS ========== */
.dcc-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.dcc-btn{
  appearance:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:12px;font-weight:700;background:#f59e0b;color:#fff;box-shadow:0 6px 14px rgba(245,158,11,.25)
}
.dcc-btn:hover{filter:brightness(.96)}
.dcc-btn--ghost{background:#fff;color:#111827;border:1px solid #e5e7eb;box-shadow:none}
.dcc-btn--ghost:hover{background:#f9fafb}

/* (tùy chọn) nút Zalo nếu dùng */
.dcc-btn--zalo{background:#0068ff;color:#fff;box-shadow:0 6px 14px rgba(0,104,255,.25)}
.dcc-btn--zalo:hover{filter:brightness(.95)}