/* ============================================================================
   HAI THẺ NGÀY của mục "Chương trình sắp tới" — nạp SAU trang-ca-nhan.css.

   Hai đợt độc lập, cùng nội dung, hai nhóm học viên. Thẻ ngày để riêng và
   phần "một ngày đó gồm gì" để chung bên dưới: chép lịch sáng/chiều ra hai
   chỗ là hai chỗ phải sửa mỗi lần đổi giờ.
   ========================================================================= */

.slots {
  margin-top: 38px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slot {
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .3s var(--spring), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.slot:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: var(--shadow-hi); }

/* Ngày là thứ người đọc tìm trên trang này, nên nó là dòng to nhất của thẻ. */
.slot h3 {
  margin-top: 14px;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -.028em;
}
.slot-sub { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.6; }

.slot-meta {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid; gap: 13px;
}
.slot-meta div { min-width: 0; }
.slot-meta dt {
  font-size: 12.2px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.slot-meta dd { margin: 4px 0 0; font-size: 14.8px; color: var(--text); line-height: 1.5; }

/* Đợt đã diễn ra: lùi xuống một bậc, huy hiệu màu xám, để mắt dừng ở đợt sắp tới. */
.slot-done { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.slot-done h3 { color: var(--text-2); }
.slot-done .badge {
  border-color: var(--line-hi);
  background: color-mix(in srgb, var(--text-3) 12%, transparent);
  color: var(--text-3);
}
.slot-done .badge::before { background: var(--text-3); }

/* Khối nội dung chung nằm ngay dưới hai thẻ ngày, không cần chừa thêm khoảng. */
.slots + .event { margin-top: 16px; }

@media (max-width: 760px) {
  .slots { grid-template-columns: 1fr; }
  .slot { padding: 20px; }
}

/* ── SÁU THẺ "MÌNH ĐANG LÀM GÌ" ───────────────────────────────────────────
   Lưới ba cột đều nhau, KHÁC với lưới bento lệch của mục chủ đề bên dưới.
   Cố ý: đây là danh sách việc, đọc để so sánh, nên đều nhau lại dễ quét mắt
   hơn. Chỗ cần lệch là mục chủ đề, nơi có một chủ đề nặng hơn hẳn. */
.servs {
  margin-top: 40px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.serv-note { margin-top: 26px; font-size: 14.6px; }
.serv-note a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 1px;
}
.serv-note a:hover { border-bottom-color: var(--accent); }

@media (max-width: 980px) { .servs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .servs { grid-template-columns: 1fr; } }

/* ĐÃ DÍNH 05/09: sáu thẻ này xếp lộn xộn (thẻ 1 chiếm cả hàng, thẻ 4 cũng vậy).
   Thủ phạm nằm ở style.css của bộ khung: luật lưới bento viết là
   `.card:nth-child(1) { grid-column: span 4 }`, KHÔNG có tiền tố `.cards`,
   nên nó với tay sang mọi thẻ .card ở bất kỳ lưới nào. Phải ép lại ở đây. */
.servs .card:nth-child(n) { grid-column: span 1; }