/** Repair Center — Đăng ký khóa học sửa chữa (module 9).
 * Was a full-width dark section; the mockup actually places this as one
 * tall WHITE card on the right of the 7/8/9/10 composite grid (theme's
 * .vnt39-rc-row-grid, see category-sua-chua.php), photo stacked above the
 * text content rather than side by side — a wide 2-column split only
 * made sense for the old full-width layout, not this narrow tall column. */
.vnt39-rc-course { display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.vnt39-rc-course .container { display: flex; flex-direction: column; height: 100%; padding: 0; max-width: none; }
.vnt39-rc-course__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
/* Flatsome's base CSS forces h1-h6 to width:100% — override so this h2
 * sizes to its own text instead of pushing "Xem chi tiết" onto its own
 * line (same fix as booking-form's head, see that file for the full
 * explanation). */
.vnt39-rc-course__head h2 { width: auto; margin: 0; color: #111318; font-size: 18px; font-weight: 800; }
.vnt39-rc-course__all { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; color: #a30d1b; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vnt39-rc-course__all .vnt39-rc-icon { width: 14px; height: 14px; }
.vnt39-rc-course__row { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.vnt39-rc-course__art { flex: 1 1 auto; min-height: 140px; margin-bottom: 16px; border-radius: 10px; background: linear-gradient(135deg, #34373f, #1c1f26); overflow: hidden; }
/* Real photo (Repair Center → Repair Course → Ảnh khoá học) replaces the
 * dark placeholder gradient entirely — cropped to fill the same box. */
.vnt39-rc-course__art.has-image { background: none; }
.vnt39-rc-course__art-img { display: block; width: 100%; height: 100%; min-height: 140px; object-fit: cover; }
.vnt39-rc-course__copy { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.vnt39-rc-course__eyebrow { color: #a30d1b; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.vnt39-rc-course__copy b { color: #111318; font-size: 16px; font-weight: 800; line-height: 1.3; }
.vnt39-rc-course__copy ul { display: grid; gap: 7px; margin: 4px 0; padding: 0; list-style: none; }
.vnt39-rc-course__copy li { display: flex; align-items: center; gap: 8px; color: #344054; font-size: 12.5px; font-weight: 600; }
.vnt39-rc-course__copy li .vnt39-rc-icon { flex-shrink: 0; width: 15px; height: 15px; color: #21a453; }
.vnt39-rc-course__cta { display: flex; align-items: center; justify-content: center; margin-top: 6px; border-radius: 8px; padding: 12px; background: #a30d1b; color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.vnt39-rc-course__cta:hover { background: #8f0b18; }

@media (max-width: 849px) {
	.vnt39-rc-course { padding: 16px; }
	.vnt39-rc-course__art { min-height: 160px; }
}