/* =========================================================
   courses.css — Lưới & thẻ khóa học (Tutor LMS)
   Theme con caophantu.vn (Flatsome child) — thuần CSS
   Dùng design tokens từ :root của main.css qua var()
   Nạp riêng trên trang khóa học + trang chủ
   ========================================================= */

/* ---------------------------------------------------------
   1) LƯỚI KHÓA HỌC — .course-grid
   Mobile: 1 cột | Tablet ≥768: 2 cột | Desktop ≥1024: 3 cột
   --------------------------------------------------------- */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile mặc định 1 cột */
  gap: 1.25rem;
  width: 100%;
}

@media (min-width: 768px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); } /* tablet 2 cột */
}

@media (min-width: 1024px) {
  .course-grid { grid-template-columns: repeat(3, 1fr); } /* desktop 3 cột */
}

/* ---------------------------------------------------------
   2) THẺ KHÓA HỌC — .course-card (kế thừa .card-surface)
   Bố cục dọc, tràn ảnh ra mép, hover nâng nhẹ
   --------------------------------------------------------- */
.course-card {
  /* .card-surface đã có: nền trắng, padding ~2rem, border, shadow, radius, hover lift */
  display: flex;
  flex-direction: column;
  overflow: hidden;                    /* để ảnh tràn mép được bo theo thẻ */
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}

/* Hover: nâng nhẹ + đổ bóng sang trọng hơn */
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elegant);
}

/* ---------------------------------------------------------
   3) ẢNH / MEDIA — .course-card-media
   Tỉ lệ 16/10, tràn ra mép thẻ (margin âm = padding card ~2rem)
   --------------------------------------------------------- */
.course-card-media {
  position: relative;
  display: block;
  margin: -2rem -2rem 1rem;            /* tràn lên & 2 bên, cách nội dung 1rem */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0; /* chỉ bo góc trên */
  background: color-mix(in srgb, var(--emerald) 12%, var(--cream));
}

/* Ảnh phủ kín — thắng rule svg/img hung hãn của Flatsome cha */
.course-card-media img {
  width: 100%;
  height: 100%;
  max-width: none;                     /* chống Flatsome ép max-width */
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

/* Hover thẻ → phóng nhẹ ảnh */
.course-card:hover .course-card-media img {
  transform: scale(1.05);
}

/* SVG fallback (.icon) khi không có ảnh — căn giữa trên nền gradient nhạt */
.course-card-media .icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38%;
  height: 38%;
  color: var(--emerald);
  opacity: 0.85;
}

.course-card-media:has(.icon) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--emerald) 14%, var(--cream)),
    color-mix(in srgb, var(--teal) 10%, var(--ivory))
  );
}

/* ---------------------------------------------------------
   4) GIÁ — .course-card-price (pill nổi góc media)
   Nền vàng, chữ xanh đậm, bo tròn, bóng nhẹ
   --------------------------------------------------------- */
.course-card-price {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: var(--gold);
  color: var(--emerald-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  white-space: nowrap;
}

/* Tùy chọn: phân biệt khóa miễn phí bằng nền xanh lá (dùng [data-free]) */
.course-card-price[data-free] {
  background: var(--leaf);
  color: var(--emerald-deep);
}

/* ---------------------------------------------------------
   5) TIÊU ĐỀ — .course-card h3
   Font hiển thị, đậm, clamp 2 dòng
   --------------------------------------------------------- */
.course-card h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--emerald-deep);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

.course-card h3 a:hover {
  color: var(--emerald);
}

/* Chip danh mục — căn lề trái, cách tiêu đề chút */
.course-card .chip {
  align-self: flex-start;
  margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------
   6) META — .course-card-meta (số bài, thời lượng…)
   Hàng ngang, wrap, chữ nhỏ, icon xanh
   --------------------------------------------------------- */
.course-card-meta {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.course-card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.course-card-meta .icon-sm {
  width: 1rem;
  height: 1rem;
  color: var(--emerald);
  flex: none;
}

/* Đẩy link "Xem khóa học" xuống đáy thẻ cho lưới đều nhau */
.course-card .link-more {
  margin-top: auto;
}

/* ---------------------------------------------------------
   7) TRẠNG THÁI RỖNG — .course-empty
   Căn giữa, nền kem nhạt bo tròn, mời tạo khóa học
   --------------------------------------------------------- */
.course-empty {
  grid-column: 1 / -1;                 /* trải hết bề ngang lưới nếu nằm trong grid */
  text-align: center;
  padding: 3rem 1.5rem;
  background: color-mix(in srgb, var(--cream) 70%, var(--card));
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  color: var(--muted-foreground);
}

.course-empty .icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--emerald);
  opacity: 0.7;
}

.course-empty h3,
.course-empty .course-empty-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--emerald-deep);
}

.course-empty p {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   8) MOBILE (<768px) — thẻ gọn, chạm tốt
   Giảm padding card, h3 nhỏ hơn, ảnh bo nhỏ
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .course-card {
    padding: 1rem;                     /* gọn hơn ~2rem mặc định */
  }

  /* Ảnh tràn theo padding mới (1rem) + bo góc nhỏ hơn */
  .course-card-media {
    margin: -1rem -1rem 0.85rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    aspect-ratio: 16 / 10;
  }

  .course-card h3 {
    font-size: 1.05rem;
  }

  .course-card-meta {
    flex-wrap: nowrap;                 /* giữ 1 hàng trên mobile */
    gap: 0.35rem 0.9rem;
    margin-bottom: 0.85rem;
  }

  .course-card-price {
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.8rem;
  }

  .course-empty {
    padding: 2.25rem 1.25rem;
  }
}

/* =========================================================
   9) REBRAND TUTOR — trang chi tiết khóa học & trang học
   Ghi đè biến màu Tutor (mặc định xanh dương #3E64DE) sang xanh
   thương hiệu; chỉnh font + nút. KHÔNG sửa template Tutor (an toàn
   khi cập nhật plugin). Nạp cùng courses.css trên trang Tutor thật.
   ========================================================= */
:root {
  --tutor-color-primary: #17633A !important;
  --tutor-color-primary-hover: #124E2D !important;
  --tutor-color-primary-rgb: 23, 99, 58 !important;
  --tutor-color-primary-hover-rgb: 18, 78, 45 !important;
}

/* Font khớp thương hiệu cho toàn khu vực Tutor */
.tutor-wrap,
.tutor-course-details-page,
.tutor-course-single-content-wrapper,
.tutor-dashboard {
  font-family: var(--font-sans);
}

/* Nút Tutor: bo mềm + đậm như brand */
.tutor-wrap .tutor-btn,
.tutor-course-details-page .tutor-btn {
  border-radius: var(--radius-md);
  font-weight: 700;
}
.tutor-btn-primary {
  box-shadow: 0 10px 24px -18px rgba(23, 99, 58, 0.5);
}

/* Tiêu đề khóa học dùng font hiển thị + màu brand */
.tutor-course-details-title,
.tutor-course-name,
.tutor-course-details-page h1 {
  font-family: var(--font-display);
  color: var(--emerald-deep);
}

/* ---- Tinh trang chi tiết ---- */
/* Khung giá (sidebar) → card thương hiệu */
.tutor-sidebar-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-elegant) !important;
  overflow: hidden;
}
.tutor-sidebar-card .tutor-card-body {
  padding: 1.5rem !important;
}

/* Nút Đăng ký học: pill, đậm, cao thoáng */
.tutor-enroll-course-button.tutor-btn-primary {
  border-radius: 999px !important;
  padding-block: 0.85rem !important;
  font-size: 1rem !important;
}

/* Accordion "Nội dung khóa học": bo góc, viền mềm, active nền xanh nhạt */
.tutor-accordion .tutor-accordion-item {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.tutor-accordion-item-header {
  font-family: var(--font-display);
  font-weight: 700;
}
.tutor-accordion-item-header.is-active {
  background: color-mix(in srgb, var(--emerald) 8%, #fff) !important;
  color: var(--emerald-deep) !important;
}


/* ===== [Agent] REBRAND TRANG HỌC (lesson player) ===== */
/*
 * Caophantu.vn — Rebrand TRANG HỌC (Tutor LMS lesson / spotlight player)
 * CHỈ chỉnh layout/typography. KHÔNG khai báo lại --tutor-color-primary (đã override = #17633A ở chỗ khác).
 *
 * Các class chính nhắm tới:
 *   Khung tổng:       .tutor-course-single-content-wrapper (.tutor-spotlight-mode)
 *   Sidebar mục lục:  .tutor-course-single-sidebar-wrapper, .tutor-course-single-sidebar-title
 *   Topic (accordion):.tutor-course-topic, .tutor-accordion-item-header (.is-active), .tutor-accordion-item-body
 *   Mục bài học:      .tutor-course-topic-item (.is-active), .tutor-course-topic-item-icon/-title/-duration
 *   Tiến độ topic:    .tutor-course-topic-summary
 *   Header thanh trên:.tutor-course-topic-single-header (.tutor-single-page-top-bar), -title, .tutor-iconic-btn
 *   Vùng nội dung:    #tutor-single-entry-content, .tutor-course-topic-single-body, .tutor-video-player-wrapper
 *   Spotlight tabs:   .tutor-course-spotlight-wrapper, .tutor-course-spotlight-nav, .tutor-nav-link, .tutor-course-spotlight-tab
 *   Bài đọc:          .tutor-lesson-wrapper / .tutor-lesson-content (typography)
 *   Footer Next/Prev: .tutor-course-topic-single-footer, .tutor-single-course-content-prev/-next, .tutor-btn
 *   Nút Hoàn thành:   .tutor-topbar-mark-btn, .tutor-spotlight-mobile-progress-*
 */

/* ============================================================
 * KHUNG TỔNG TRANG HỌC
 * ============================================================ */
.tutor-course-single-content-wrapper {
	font-family: var(--font-sans, "Be Vietnam Pro", sans-serif);
	background-color: var(--cream, #F3FAF1);
}

/* ============================================================
 * SIDEBAR MỤC LỤC BÀI HỌC
 * ============================================================ */
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper {
	background-color: var(--card, #fff) !important;
	border-right: 1px solid var(--border, #DCEBE1) !important;
	flex: 0 0 340px !important;
	width: 340px !important;
}

/* Tiêu đề "Course Content" */
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-title {
	padding: 16px 20px !important;
	background-color: var(--cream, #F3FAF1) !important;
	border-bottom: 1px solid var(--border, #DCEBE1) !important;
}
.tutor-course-single-content-wrapper .tutor-course-single-sidebar-title span {
	font-family: var(--font-display, "Be Vietnam Pro", sans-serif);
	font-weight: 700 !important;
	color: var(--emerald-deep, #17633A) !important;
}

/* Header của topic (accordion) */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
	background-color: var(--card, #fff) !important;
	border-bottom: 1px solid var(--border, #DCEBE1) !important;
	color: var(--emerald-deep, #17633A) !important;
	font-family: var(--font-sans, "Be Vietnam Pro", sans-serif);
	font-weight: 600 !important;
	font-size: 15px !important;
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active {
	background-color: color-mix(in srgb, var(--emerald) 6%, #fff) !important;
	color: var(--emerald-deep, #17633A) !important;
}

/* Đếm tiến độ trong topic */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-summary {
	color: var(--muted-foreground, #5D7568) !important;
	font-weight: 600 !important;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
	background-color: var(--card, #fff) !important;
}

/* Từng mục bài học / quiz / assignment */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a {
	background-color: transparent !important;
	border-radius: var(--radius-md, 1rem) !important;
	margin: 2px 8px !important;
	padding: 9px 12px !important;
	transition: background-color .2s var(--ease-out, ease-out),
		color .2s var(--ease-out, ease-out) !important;
	width: auto !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item-title {
	color: var(--muted-foreground, #5D7568) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover a {
	background-color: color-mix(in srgb, var(--emerald) 5%, #fff) !important;
}

/* MỤC ĐANG HỌC — nổi bật nền xanh nhạt + viền trái */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a {
	background-color: color-mix(in srgb, var(--emerald) 8%, #fff) !important;
	box-shadow: inset 3px 0 0 0 var(--emerald, #34A866) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-icon,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-title,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover .tutor-course-topic-item-icon,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item:hover .tutor-course-topic-item-title {
	color: var(--emerald-deep, #17633A) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
	font-weight: 600 !important;
}

/* Tích hoàn thành = xanh emerald */
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item .tutor-form-check-circle[checked] {
	border-color: var(--emerald, #34A866) !important;
	background-color: var(--emerald, #34A866) !important;
}

.tutor-course-single-sidebar-wrapper .tutor-course-topic-item-duration {
	color: var(--muted-foreground, #5D7568) !important;
}

/* ============================================================
 * HEADER THANH TRÊN (top bar trang học)
 * ============================================================ */
.tutor-course-topic-single-header.tutor-single-page-top-bar,
.tutor-course-single-content-wrapper .tutor-course-topic-single-header {
	background: var(--emerald-deep, #17633A) !important;
	min-height: 64px !important;
	box-shadow: var(--shadow-soft, 0 2px 12px rgba(23,99,58,.08)) !important;
}
.tutor-course-topic-single-header .tutor-course-topic-single-header-title {
	font-family: var(--font-display, "Be Vietnam Pro", sans-serif);
	font-weight: 600 !important;
	color: #fff !important;
	letter-spacing: .2px;
}
.tutor-course-topic-single-header .tutor-iconic-btn {
	border-radius: var(--radius-md, 1rem) !important;
}
.tutor-course-topic-single-header .tutor-iconic-btn-secondary {
	background-color: rgba(255, 255, 255, .14) !important;
}
.tutor-course-topic-single-header .tutor-iconic-btn:hover {
	background-color: #fff !important;
	color: var(--emerald-deep, #17633A) !important;
}
/* Nút "Hoàn thành" trên top bar */
.tutor-course-topic-single-header .tutor-topbar-mark-btn {
	border-radius: 999px !important;
	font-weight: 700 !important;
	border-color: var(--gold, #E6BE5A) !important;
	color: var(--gold, #E6BE5A) !important;
}
.tutor-course-topic-single-header .tutor-topbar-mark-btn:hover {
	background-color: var(--gold, #E6BE5A) !important;
	border-color: var(--gold, #E6BE5A) !important;
	color: var(--emerald-deep, #17633A) !important;
}

/* ============================================================
 * VÙNG NỘI DUNG BÀI HỌC
 * ============================================================ */
#tutor-single-entry-content {
	background-color: var(--card, #fff) !important;
}
.tutor-course-single-content-wrapper .tutor-video-player-wrapper {
	background: #000;
}

/* Spotlight tabs (Overview / Exercise Files / Comments...) */
.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav {
	border-bottom: 1px solid var(--border, #DCEBE1) !important;
	gap: 4px;
}
.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav .tutor-nav-link {
	font-family: var(--font-sans, "Be Vietnam Pro", sans-serif);
	font-weight: 600 !important;
	color: var(--muted-foreground, #5D7568) !important;
	border-radius: var(--radius-md, 1rem) var(--radius-md, 1rem) 0 0 !important;
}
.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav .tutor-nav-link.is-active {
	color: var(--emerald-deep, #17633A) !important;
}

/* Bài học dạng văn bản: dễ đọc */
.tutor-course-spotlight-wrapper .tutor-course-spotlight-tab,
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper,
.tutor-course-spotlight-wrapper .tutor-lesson-content {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper,
.tutor-course-spotlight-wrapper .tutor-lesson-content {
	font-family: var(--font-sans, "Be Vietnam Pro", sans-serif);
	font-size: 1.0625rem !important;
	line-height: 1.7 !important;
	color: #243a2d;
}
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper h1,
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper h2,
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper h3,
.tutor-course-spotlight-wrapper .tutor-lesson-content h1,
.tutor-course-spotlight-wrapper .tutor-lesson-content h2,
.tutor-course-spotlight-wrapper .tutor-lesson-content h3 {
	font-family: var(--font-display, "Be Vietnam Pro", sans-serif);
	font-weight: 700;
	color: var(--emerald-deep, #17633A);
	line-height: 1.35;
}
.tutor-course-spotlight-wrapper .tutor-lesson-wrapper a,
.tutor-course-spotlight-wrapper .tutor-lesson-content a {
	color: var(--emerald, #34A866);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
 * FOOTER — Nút Previous / Next
 * ============================================================ */
.tutor-course-topic-single-footer {
	background-color: var(--ivory, #FFF8E8) !important;
	border-top: 1px solid var(--border, #DCEBE1) !important;
}
.tutor-course-topic-single-footer .tutor-btn {
	border-radius: 999px !important;
	font-family: var(--font-sans, "Be Vietnam Pro", sans-serif);
	font-weight: 700 !important;
	border-color: var(--emerald-deep, #17633A) !important;
	color: var(--emerald-deep, #17633A) !important;
	background-color: #fff !important;
	transition: transform .2s var(--ease-out, ease-out),
		background-color .2s var(--ease-out, ease-out),
		color .2s var(--ease-out, ease-out) !important;
}
.tutor-course-topic-single-footer .tutor-btn:hover {
	background-color: var(--emerald-deep, #17633A) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-elegant, 0 8px 24px rgba(23,99,58,.18)) !important;
}
.tutor-course-topic-single-footer .tutor-btn[disabled] {
	opacity: .45 !important;
	pointer-events: none;
}

/* ============================================================
 * THANH TIẾN ĐỘ + NÚT HOÀN THÀNH (mobile/sm)
 * ============================================================ */
.tutor-spotlight-mobile-progress-complete {
	background-color: var(--ivory, #FFF8E8) !important;
	border-radius: var(--radius-md, 1rem) !important;
	border: 1px solid var(--border, #DCEBE1) !important;
}
.tutor-spotlight-mobile-progress-complete .tutor-progress-bar .tutor-progress-value {
	background-color: var(--emerald, #34A866) !important;
}

/* ============================================================
 * RESPONSIVE — mobile ≤767px: sidebar co gọn / ẩn nền
 * ============================================================ */
@media (max-width: 767px) {
	.tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper {
		flex: 0 0 100% !important;
		width: 100% !important;
		border-right: none !important;
	}
	.tutor-course-spotlight-wrapper .tutor-course-spotlight-tab,
	.tutor-course-spotlight-wrapper .tutor-lesson-wrapper,
	.tutor-course-spotlight-wrapper .tutor-lesson-content {
		max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
	.tutor-course-spotlight-wrapper .tutor-lesson-wrapper,
	.tutor-course-spotlight-wrapper .tutor-lesson-content {
		font-size: 1rem !important;
	}
	.tutor-course-topic-single-header .tutor-course-topic-single-header-title {
		font-size: 15px !important;
	}
	.tutor-course-topic-single-footer .tutor-btn {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}


/* ===== [Agent] REBRAND TAB CHI TIẾT (mô tả/giáo trình/giảng viên/đánh giá) ===== */
/* ==========================================================================
   Cao Phan Tu — Rebrand CSS cho TAB & KHỐI ở TRANG CHI TIẾT khóa học (Tutor LMS)
   Phạm vi: thanh tab điều hướng, mô tả, giáo trình (curriculum), giảng viên,
            đánh giá/reviews, Q&A, mục tiêu "Bạn sẽ học được gì".
   Lưu ý: --tutor-color-primary đã được override sang xanh brand ở chỗ khác —
          file này KHÔNG khai báo lại, chỉ chỉnh layout/typography/viền.

   CÁC CLASS CHÍNH ĐƯỢC TARGET:
   - Nav/tab : .tutor-course-details-tab, .tutor-nav, .tutor-nav-item,
               .tutor-nav-link (.is-active), .tutor-nav-more, .tutor-tab-item
   - Mô tả   : .tutor-course-details-content, .tutor-course-details-widget-title
   - Mục tiêu/benefits/requirements/material :
               .tutor-course-details-widget, .tutor-course-details-widget-list,
               .tutor-icon-bullet-point
   - Giáo trình (curriculum) :
               .tutor-accordion, .tutor-accordion-item,
               .tutor-accordion-item-header, .tutor-accordion-item-body,
               .tutor-course-content-list, .tutor-course-content-list-item,
               .tutor-course-content-title
   - Giảng viên :
               .tutor-course-details-instructors, .tutor-instructor-designation
   - Đánh giá/reviews :
               .tutor-review-summary, .tutor-review-card, .tutor-card,
               .tutor-ratings, .tutor-ratings-stars, .tutor-ratings-average,
               .tutor-ratings-progress-bar, .tutor-review-individual-item
   ========================================================================== */

/* (Đã gỡ block :root trùng — token dùng chung từ main.css qua var(),
   tránh ghi đè --ease-out/shadow/font toàn site khi courses.css nạp sau.) */

/* ==========================================================================
   1) THANH TAB ĐIỀU HƯỚNG (nav) — gạch chân/active xanh brand, font đậm
   ========================================================================== */

.tutor-course-details-tab .tutor-nav,
.tutor-course-details-page .tutor-nav {
  border-bottom: 2px solid var(--border) !important;
  gap: .25rem;
  flex-wrap: wrap;
}

.tutor-course-details-tab .tutor-nav-item {
  margin: 0 !important;
}

.tutor-course-details-tab .tutor-nav-link {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  margin-bottom: -2px !important;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}

.tutor-course-details-tab .tutor-nav-link:hover {
  color: var(--emerald) !important;
  background: transparent !important;
}

.tutor-course-details-tab .tutor-nav-link.is-active {
  color: var(--emerald-deep) !important;
  background: transparent !important;
  border-bottom-color: var(--emerald) !important;
}

/* Dropdown "more" của nav */
.tutor-course-details-tab .tutor-nav-more-list .tutor-nav-link {
  border-bottom: 0 !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 0 !important;
}
.tutor-course-details-tab .tutor-nav-more-list .tutor-nav-link:hover {
  background: var(--cream) !important;
}

/* ==========================================================================
   2) TIÊU ĐỀ MỤC / WIDGET TITLE — dùng font-display
   ========================================================================== */

.tutor-course-details-widget-title,
.tutor-course-content-title,
.tutor-course-details-content > .tutor-fs-5,
.tutor-review-summary .tutor-fs-5,
.tutor-course-details-instructors > .tutor-fs-5 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--emerald-deep) !important;
  letter-spacing: -.01em;
}

/* Nội dung mô tả: typography mềm, dễ đọc */
.tutor-course-details-content {
  font-family: var(--font-sans);
  color: var(--muted-foreground);
  line-height: 1.75;
}
.tutor-course-details-content :is(h2, h3, h4) {
  font-family: var(--font-display) !important;
  color: var(--emerald-deep) !important;
  font-weight: 700;
}

/* ==========================================================================
   3) MỤC TIÊU / BENEFITS / REQUIREMENTS / MATERIAL — dấu tick xanh
   ========================================================================== */

.tutor-course-details-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.75rem;
}

.tutor-course-details-widget-list .tutor-d-flex {
  align-items: flex-start;
}

/* Biến icon bullet mặc định thành dấu tick xanh brand */
.tutor-course-details-widget-list .tutor-icon-bullet-point {
  color: var(--emerald) !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}
.tutor-course-details-widget-list .tutor-icon-bullet-point::before {
  content: "\e966"; /* icon-check của Tutor; nếu khác thì vẫn fallback màu xanh */
}

/* Fallback chắc cú: dùng pseudo-tick riêng cho list "Bạn sẽ học được gì" */
.tutor-course-details-widget-col-2 .tutor-course-details-widget-list .tutor-d-flex {
  position: relative;
}

/* ==========================================================================
   4) GIÁO TRÌNH / CURRICULUM (accordion) — card mềm, viền brand
   ========================================================================== */

.tutor-accordion .tutor-accordion-item {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: .75rem;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.tutor-accordion .tutor-accordion-item-header {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--emerald-deep) !important;
  background: var(--cream) !important;
  padding: 16px 20px !important;
  transition: background .25s var(--ease-out);
}
.tutor-accordion .tutor-accordion-item-header:hover {
  background: #e9f6ee !important;
}
.tutor-accordion .tutor-accordion-item-header.is-active {
  background: var(--cream) !important;
  border-bottom: 1px solid var(--border);
}

.tutor-accordion .tutor-accordion-item-body {
  background: var(--card);
}

.tutor-course-content-list-item {
  border-bottom: 1px solid var(--border) !important;
  transition: background .2s var(--ease-out);
}
.tutor-course-content-list-item:hover {
  background: var(--cream) !important;
}
.tutor-course-content-list-item-icon {
  color: var(--emerald) !important;
}
.tutor-course-content-list-item-title {
  color: var(--emerald-deep);
}

/* ==========================================================================
   5) GIẢNG VIÊN — khối card mềm
   ========================================================================== */

.tutor-course-details-instructors {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem;
}

/* Mỗi giảng viên: bo ảnh, tên dùng font-display */
.tutor-course-details-instructors img {
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--border);
}
.tutor-course-details-instructors .tutor-fw-bold {
  font-family: var(--font-display) !important;
  color: var(--emerald-deep) !important;
}
.tutor-instructor-designation {
  color: var(--emerald) !important;
  font-weight: 500;
}
.tutor-course-details-instructors .tutor-color-muted {
  color: var(--muted-foreground) !important;
}

/* ==========================================================================
   6) ĐÁNH GIÁ / REVIEWS — card mềm, sao vàng --gold
   ========================================================================== */

/* Khối tổng quan rating */
.tutor-review-summary {
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft);
}
.tutor-review-summary-average-rating,
.tutor-ratings-average {
  font-family: var(--font-display) !important;
  color: var(--emerald-deep) !important;
  font-weight: 700 !important;
}

/* Card từng review */
.tutor-review-card,
.tutor-reviews .tutor-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  background: var(--card) !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.tutor-review-card:hover,
.tutor-reviews .tutor-card:hover {
  box-shadow: var(--shadow-elegant) !important;
  transform: translateY(-2px);
}
.tutor-review-name,
.tutor-review-individual-item .tutor-fw-bold {
  font-family: var(--font-display) !important;
  color: var(--emerald-deep) !important;
}

/* SAO ĐÁNH GIÁ — giữ/đổi sang vàng brand */
.tutor-ratings-stars,
.tutor-ratings-stars i,
.tutor-star-rating-container i,
.tutor-individual-star-rating i,
[class*="tutor-icon-star"] {
  color: var(--gold) !important;
}

/* Thanh tiến trình phân bố rating: nền nhạt, fill vàng */
.tutor-ratings-progress-bar {
  background-color: var(--border) !important;
  border-radius: 999px !important;
}
.tutor-ratings-progress-bar .tutor-progress-value {
  background-color: var(--gold) !important;
  border-radius: 999px !important;
}

/* Form viết đánh giá */
.tutor-write-review-form .tutor-ratings-selectable i {
  color: var(--gold) !important;
}

/* ==========================================================================
   7) Q&A — card mềm khớp brand (nếu hiển thị ở tab chi tiết)
   ========================================================================== */

.tutor-course-details-tab .tutor-qna-question,
.tutor-course-details-tab [class*="tutor-qna"] .tutor-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  background: var(--card) !important;
}
.tutor-course-details-tab [class*="tutor-qna"] .tutor-fw-bold {
  font-family: var(--font-display) !important;
  color: var(--emerald-deep) !important;
}

/* ==========================================================================
   8) RESPONSIVE ≤767px
   ========================================================================== */

@media (max-width: 767px) {

  /* Tab cuộn ngang gọn nếu nhiều */
  .tutor-course-details-tab .tutor-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tutor-course-details-tab .tutor-nav::-webkit-scrollbar {
    display: none;
  }
  .tutor-course-details-tab .tutor-nav-item {
    flex: 0 0 auto;
  }
  .tutor-course-details-tab .tutor-nav-link {
    padding: 12px 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* Card giảng viên xếp dọc */
  .tutor-course-details-instructors .tutor-d-flex.tutor-align-center {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left;
  }
  .tutor-course-details-instructors .tutor-d-flex.tutor-mr-16 {
    margin: 0 0 12px 0 !important;
  }

  /* Widget & card thu padding */
  .tutor-course-details-widget,
  .tutor-course-details-instructors,
  .tutor-review-summary {
    padding: 1.25rem;
  }
}


/* ===== [Agent] REBRAND DASHBOARD HỌC VIÊN ===== */
/* =============================================================================
   Tutor LMS — Rebrand DASHBOARD HỌC VIÊN (caophantu.vn)
   Chỉ chỉnh layout/typography/viền/nền. KHÔNG khai báo lại --tutor-color-primary
   (đã được override sang xanh ở nơi khác).
   -----------------------------------------------------------------------------
   Các class chính được target:
   - .tutor-frontend-dashboard / .tutor-dashboard-student          (wrapper)
   - .tutor-frontend-dashboard-header                              (header bar)
   - .tutor-dashboard-header-info / -display-name / -username
     / -greetings / -stats                                        (header + info card)
   - .tutor-dashboard-left-menu                                   (sidebar)
   - .tutor-dashboard-permalinks  +  li / li.active a / a:hover    (menu items)
   - .tutor-dashboard-menu-item-link / -icon / .tutor-dashboard-menu-divider
   - .tutor-dashboard-content  +  > h3 / > h4                      (vùng nội dung)
   - .tutor-table  thead th / tbody td / tr zebra                  (bảng)
   - .tutor-pagination .tutor-pagination-numbers .page-numbers     (phân trang)
   - .tutor-btn / -outline-primary                                 (nút)
   - Responsive ≤767px
   ============================================================================= */

/* -----------------------------------------------------------------------------
   DESIGN TOKENS (scope vào dashboard để không rò rỉ ra ngoài)
   --------------------------------------------------------------------------- */
.tutor-frontend-dashboard {
  --emerald-deep: #17633A;
  --emerald: #34A866;
  --gold: #E6BE5A;
  --cream: #F3FAF1;
  --ivory: #FFF8E8;
  --sky-soft: #E8F7F4;
  --muted-foreground: #5D7568;
  --border: #DCEBE1;
  --card: #fff;
  --radius: 1.25rem;
  --radius-md: 1rem;
  --shadow-soft: 0 2px 12px rgba(23, 99, 58, .06), 0 1px 3px rgba(23, 99, 58, .05);
  --shadow-elegant: 0 12px 32px rgba(23, 99, 58, .12), 0 4px 10px rgba(23, 99, 58, .06);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
}

.tutor-frontend-dashboard,
.tutor-frontend-dashboard .tutor-dashboard-content {
  font-family: var(--font-sans) !important;
  color: var(--muted-foreground);
}

/* =============================================================================
   1. HEADER + INFO CARD (header-stats)
   ============================================================================= */
.tutor-frontend-dashboard .tutor-frontend-dashboard-header {
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 24px 28px !important;
  margin-bottom: 28px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-display-name h4,
.tutor-frontend-dashboard .tutor-dashboard-header-username {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--emerald-deep) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-greetings {
  color: var(--muted-foreground) !important;
}

/* Thẻ thống kê (header-stats) -> card brand */
.tutor-frontend-dashboard .tutor-dashboard-header-stats {
  gap: 14px !important;
  margin-top: 14px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-stats > * {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 12px 18px !important;
  line-height: 1.5 !important;
  color: var(--emerald-deep) !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}

.tutor-frontend-dashboard .tutor-dashboard-header-stats > *:hover {
  box-shadow: var(--shadow-elegant) !important;
  transform: translateY(-2px);
}

/* =============================================================================
   2. SIDEBAR MENU (left-menu / permalinks)
   ============================================================================= */
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 14px !important;
  margin: 0 15px 20px 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-permalinks li {
  margin-bottom: 4px;
}

.tutor-frontend-dashboard .tutor-dashboard-permalinks li a,
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link {
  border-radius: var(--radius-md) !important;
  padding: 11px 16px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: var(--muted-foreground) !important;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-icon {
  color: var(--emerald) !important;
}

/* Hover: nền xanh rất nhạt */
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover {
  background-color: var(--sky-soft) !important;
  color: var(--emerald-deep) !important;
}

/* Active: nền xanh nhạt + chữ xanh đậm (KHÔNG dùng nền primary đặc + chữ trắng) */
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a,
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a:hover {
  background-color: var(--cream) !important;
  color: var(--emerald-deep) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 0 var(--emerald) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a:before,
.tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a .tutor-dashboard-menu-item-icon {
  color: var(--emerald-deep) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-divider {
  border-top: 1px solid var(--border) !important;
  margin: 10px 0 !important;
}

/* =============================================================================
   3. CONTENT AREA
   ============================================================================= */
.tutor-frontend-dashboard .tutor-dashboard-content > h3,
.tutor-frontend-dashboard .tutor-dashboard-content > h4 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--emerald-deep) !important;
  margin: 0 0 22px !important;
}

/* =============================================================================
   4. BẢNG (tutor-table)
   ============================================================================= */
.tutor-frontend-dashboard .tutor-table {
  --tutor-table-border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-soft) !important;
}

/* Header bảng: nền cream, chữ xanh đậm */
.tutor-frontend-dashboard .tutor-table tr th {
  background: var(--cream) !important;
  color: var(--emerald-deep) !important;
  border-color: var(--border) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.tutor-frontend-dashboard .tutor-table tr td {
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
  background: var(--card) !important;
}

/* Zebra nhẹ */
.tutor-frontend-dashboard .tutor-table tbody tr:nth-child(even) td {
  background: var(--cream) !important;
}

.tutor-frontend-dashboard .tutor-table tbody tr:hover td {
  background: var(--sky-soft) !important;
}

.tutor-frontend-dashboard .tutor-table tr td > a:not(.tutor-btn):not(.tutor-iconic-btn):hover,
.tutor-frontend-dashboard .tutor-table tr td .tutor-table-link:hover {
  color: var(--emerald) !important;
}

/* =============================================================================
   5. NÚT (buttons) — bo tròn đậm
   ============================================================================= */
.tutor-frontend-dashboard .tutor-btn {
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.tutor-frontend-dashboard .tutor-btn.tutor-btn-outline-primary {
  border-color: var(--emerald) !important;
  color: var(--emerald-deep) !important;
}

.tutor-frontend-dashboard .tutor-btn.tutor-btn-outline-primary:hover {
  background-color: var(--emerald) !important;
  border-color: var(--emerald) !important;
  color: #fff !important;
}

/* =============================================================================
   6. PHÂN TRANG (pagination)
   ============================================================================= */
.tutor-frontend-dashboard .tutor-pagination ul.tutor-pagination-numbers .page-numbers {
  border-radius: 999px !important;
  min-width: 34px;
  height: 34px;
  padding: 0 10px !important;
  color: var(--muted-foreground) !important;
}

.tutor-frontend-dashboard .tutor-pagination ul.tutor-pagination-numbers .page-numbers:hover {
  background: var(--sky-soft) !important;
  color: var(--emerald-deep) !important;
}

/* Trang active xanh */
.tutor-frontend-dashboard .tutor-pagination ul.tutor-pagination-numbers .page-numbers.current {
  background: var(--emerald) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.tutor-frontend-dashboard .tutor-pagination ul.tutor-pagination-numbers .page-numbers.prev:hover,
.tutor-frontend-dashboard .tutor-pagination ul.tutor-pagination-numbers .page-numbers.next:hover {
  background: var(--emerald) !important;
  color: #fff !important;
}

/* =============================================================================
   7. RESPONSIVE ≤767px
   ============================================================================= */
@media (max-width: 767px) {

  /* Sidebar: hiện ra, cuộn ngang thay vì cột dọc */
  .tutor-frontend-dashboard .tutor-dashboard-left-menu {
    display: block !important;
  }

  .tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px 0 !important;
    padding: 10px !important;
    scrollbar-width: thin;
  }

  .tutor-frontend-dashboard .tutor-dashboard-permalinks li {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .tutor-frontend-dashboard .tutor-dashboard-permalinks li a {
    white-space: nowrap;
  }

  /* Active trên mobile dùng underline gold thay viền trái */
  .tutor-frontend-dashboard .tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a {
    box-shadow: inset 0 -3px 0 0 var(--gold) !important;
  }

  /* Info card / stats xếp 1 cột */
  .tutor-frontend-dashboard .tutor-dashboard-header-stats {
    flex-direction: column !important;
  }

  .tutor-frontend-dashboard .tutor-dashboard-header-stats > * {
    width: 100% !important;
  }

  .tutor-frontend-dashboard .tutor-frontend-dashboard-header {
    padding: 18px 18px !important;
  }

  /* Bảng cuộn ngang gọn */
  .tutor-frontend-dashboard .tutor-table {
    min-width: 600px;
  }
}


/* ===== [Agent] Khối bán hàng trang khóa ===== */
/* =========================================================================
 * Course Sales — khối bán hàng trang chi tiết khóa học (Tutor LMS).
 *
 * Đi kèm inc/course-sales.php. Dùng token thương hiệu đã có (main.css):
 *   --emerald-deep, --emerald, --gold, --cream, --card, --border,
 *   --radius, --radius-md, --shadow-soft, --font-display, --muted-foreground.
 *
 * Nháp để duyệt — sau khi đồng ý sẽ gộp vào assets/css/courses.css.
 * ====================================================================== */

.cph-cs {
	margin: 32px 0;
	display: grid;
	gap: 24px;
}

/* --- Tiêu đề mỗi khối --- */
.cph-cs-title {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--emerald-deep);
}

/* --- Lưới các ý: 1 cột (mobile) -> 2 cột (>=600px) --- */
.cph-cs-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 24px;
}

.cph-cs-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--muted-foreground);
	line-height: 1.5;
}

/* --- Icon check/users màu xanh --- */
.cph-cs-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--cream);
	color: var(--emerald);
}

.cph-cs-ico .icon-sm {
	width: 1rem;
	height: 1rem;
}

.cph-cs-text {
	flex: 1 1 auto;
}

/* --- Dải cam kết: nền cream/vàng nhạt, icon vàng, chữ đậm --- */
.cph-cs-guarantee {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--cream), rgba(230, 190, 90, 0.14));
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.cph-cs-guarantee__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--card);
	color: var(--gold);
}

.cph-cs-guarantee__ico .icon-sm {
	width: 1.25rem;
	height: 1.25rem;
}

.cph-cs-guarantee__text {
	font-weight: 700;
	color: var(--emerald-deep);
	line-height: 1.4;
}

/* --- Tablet/desktop: outcomes & audience thành 2 cột --- */
@media (min-width: 600px) {
	.cph-cs-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Mobile gọn --- */
@media (max-width: 480px) {
	.cph-cs {
		margin: 24px 0;
		gap: 20px;
	}

	.cph-cs-title {
		font-size: 1.125rem;
		margin-bottom: 12px;
	}

	.cph-cs-guarantee {
		padding: 14px 16px;
		gap: 10px;
	}
}