/**
 * CMP LMS — Account (Tutor Starter dashboard style).
 */

.cmp-account-hub {
	--cmp-biz-primary: var(--ts-primary);
	--cmp-biz-orange: var(--ts-primary-dark);
	--cmp-biz-text: #344050;
	--cmp-biz-muted: var(--ts-muted);
	--cmp-biz-border: var(--ts-border);
	--cmp-biz-bg-soft: var(--ts-surface-soft);
	padding: 28px 0 56px;
	background: #fff;
}

body.cmp-account-dashboard-active .cmp-account-hub {
	background: var(--cmp-dash-page-bg, #f9fafd);
}

body.cmp-account-dashboard-active.cmp-tutor-starter-layout,
body.cmp-account-dashboard-active.cmp-tutor-starter-layout .tutor-dashboard-content,
body.cmp-account-dashboard-active.cmp-tutor-starter-layout .cmp-quiz-attempts {
	color: var(--cmp-biz-text, #344050);
}

body.cmp-account-dashboard-active .tutor-dashboard-content .tutor-form-label,
body.cmp-account-dashboard-active .tutor-dashboard-content .tutor-form-control,
body.cmp-account-dashboard-active .tutor-dashboard-content .tutor-table td,
body.cmp-account-dashboard-active .tutor-dashboard-content .tutor-table th {
	color: inherit;
}

.cmp-account-hub .cmp-hub-container {
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 20px;
}

.cmp-account-page-header {
	margin: 0 0 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cmp-biz-border);
}

.cmp-account-page-header__title {
	margin: 0 0 8px;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: var(--cmp-biz-text);
	line-height: 1.25;
}

.cmp-account-page-header__lead {
	margin: 0;
	font-size: 0.95rem;
	color: var(--cmp-biz-muted);
	max-width: 640px;
}

body.cmp-account-dashboard-active .tutor-dashboard .tutor-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.cmp-account-dashboard-active .tutor-dashboard .tutor-card {
	border: 1px solid var(--cmp-biz-border);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(26, 43, 60, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.cmp-account-dashboard-active .tutor-dashboard .tutor-card:hover {
	box-shadow: 0 8px 24px rgba(0, 102, 255, 0.12);
	transform: translateY(-2px);
}

/* Icon tròn trong các thẻ thống kê (Tổng lượt làm/Đạt/...) đang dùng
   --tutor-color-primary — biến màu customizer riêng của theme cha Tutor
   Starter, mặc định #3e64de, KHÔNG liên quan tới --ts-primary mà cả site đã
   đổi sang xanh BizNext — nên icon này vẫn hiện màu xanh cũ, lệch tông với
   phần còn lại của dashboard. Ép về đúng 1 màu brand. */
body.cmp-account-dashboard-active .tutor-dashboard-content .tutor-round-box {
	color: var(--ts-primary) !important;
	background: var(--ts-primary-soft) !important;
}

body.cmp-account-dashboard-active .tutor-nav-link.is-active {
	color: var(--cmp-dash-nav-icon, #2c7be5);
	border-color: var(--cmp-dash-nav-icon, #2c7be5);
}

/* —— Dashboard sidebar: Falcon-style nav —— */
body.cmp-account-dashboard-active .tutor-dashboard.tutor-frontend-dashboard {
	background: transparent;
}

body.cmp-account-dashboard-active .cmp-account-page-header {
	margin-bottom: 20px;
	padding-bottom: 16px;
}

body.cmp-account-dashboard-active .cmp-account-page-header__title {
	color: var(--cmp-biz-text, #344050);
}

body.cmp-account-dashboard-active .tutor-dashboard.tutor-frontend-dashboard .tutor-pb-80 {
	padding-bottom: 2.5rem !important;
}

/* Trang Bảng điều khiển (dashboard/dashboard.php) tự in lại tiêu đề "Dashboard"
   ("Bảng Điều Khiển") ngay trong nội dung — trùng với tiêu đề trang do theme
   render ở trên (cmp-account-page-header__title: "Bảng điều khiển trung tâm").
   Ẩn bản trùng này đi, chỉ ảnh hưởng đúng trang index (đây là selector con
   trực tiếp của .tutor-dashboard-content, chỉ khớp template dashboard.php). */
body.cmp-account-dashboard-active .tutor-dashboard-content > .tutor-dashboard-title {
	display: none;
}

body.cmp-account-dashboard-active .tutor-dashboard-left-menu {
	margin-bottom: 1.5rem;
}

body.cmp-account-dashboard-active .tutor-dashboard-permalinks {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: var(--cmp-dash-card-bg, #fff);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	box-shadow: var(--cmp-dash-card-shadow);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item {
	margin: 0 0 2px;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	color: var(--cmp-dash-nav-fg, #344050) !important;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item-link:hover {
	background: var(--cmp-dash-nav-hover-bg) !important;
	color: var(--cmp-dash-nav-fg, #344050) !important;
}

/* Tutor Starter (theme cha) tự có 1 rule mặc định cho mục active, cụ thể hơn
   rule của CMP (nhiều class hơn: .tutor-dashboard .tutor-dashboard-left-menu
   .tutor-dashboard-permalinks li.active a) nên luôn thắng phần "background"
   (không !important nhưng specificity cao hơn) — chỉ "color" của CMP thắng
   được vì có !important. Kết quả: nền xanh mặc định của Tutor Starter (đậm,
   #3e64de) + chữ xanh brand mới của CMP => chữ chìm vào nền (tương phản kém).
   Thêm !important cho background (và cho icon ở dưới) để CMP luôn thắng, chủ
   động chọn 1 tổ hợp tương phản rõ: nền xanh brand đặc + chữ/icon trắng. */
body.cmp-account-dashboard-active .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
body.cmp-account-dashboard-active .tutor-dashboard-menu-item-link.is-active {
	background: var(--ts-primary) !important;
	color: #fff !important;
	font-weight: 600;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
body.cmp-account-dashboard-active .tutor-dashboard-menu-item-link.is-active .tutor-dashboard-menu-item-icon {
	color: #fff !important;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	min-width: 1.35rem;
	margin: 0 !important;
	font-size: 1rem;
	color: var(--cmp-dash-nav-icon, #2c7be5);
	opacity: 1;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-item-text {
	margin-left: 0 !important;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-divider {
	height: 0;
	margin: 0.65rem 0.75rem;
	padding: 0;
	border: none;
	border-top: 1px solid var(--ts-border, #e3e6eb);
	list-style: none;
}

body.cmp-account-dashboard-active .tutor-dashboard-menu-divider-header {
	margin: 0.5rem 0 0.35rem;
	padding: 0.35rem 0.75rem 0.15rem;
	list-style: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cmp-dash-nav-muted, #748194);
}

/* User block (avatar + name) — Falcon card trên menu */
body.cmp-account-dashboard-active .tutor-header-left-side.tutor-dashboard-header {
	padding: 1rem;
	margin-bottom: 0.75rem;
	background: var(--cmp-dash-card-bg, #fff);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	box-shadow: var(--cmp-dash-card-shadow);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

body.cmp-account-dashboard-active .tutor-dashboard-header-avatar img,
body.cmp-account-dashboard-active .tutor-dashboard-header-avatar .tutor-avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--cmp-dash-nav-active-bg);
}

body.cmp-account-dashboard-active .tutor-dashboard-header-username,
body.cmp-account-dashboard-active .tutor-dashboard-header-display-name {
	color: var(--cmp-dash-nav-fg, #344050) !important;
}

body.cmp-account-dashboard-active .tutor-dashboard-header-greetings {
	color: var(--cmp-dash-nav-muted, #748194) !important;
	font-size: 0.75rem;
}

body.cmp-account-dashboard-active .tutor-dashboard-header-stats .tutor-ratings-stars {
	color: #f4c150;
}

/* "(1 Đánh giá)" bị vỡ chữ giữa dòng (vd. "(1" / "Đánh" / "giá)" mỗi cụm 1
   dòng) — do .tutor-ratings của Tutor core là flex KHÔNG có flex-wrap, nên
   khi card hồ sơ bị ép hẹp bằng đúng chiều rộng sidebar (xem
   .tutor-header-left-side.tutor-dashboard-header ở khối @media 992px bên
   dưới), flexbox co nhỏ khối chứa cụm chữ này lại và để chữ tự ngắt dòng bên
   trong. Ép cụm số + cụm "(N Đánh giá)" luôn nằm nguyên 1 dòng (không co,
   không ngắt chữ giữa dòng); cho phép cả cụm rơi xuống dòng dưới hàng sao
   (flex-wrap) nếu thực sự không đủ chỗ, thay vì vỡ chữ. */
body.cmp-account-dashboard-active .tutor-dashboard-header-stats .tutor-ratings {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

body.cmp-account-dashboard-active .tutor-dashboard-header-stats .tutor-ratings-average,
body.cmp-account-dashboard-active .tutor-dashboard-header-stats .tutor-ratings-count {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Desktop: sidebar cột trái (user + menu), nội dung bên phải */
@media (min-width: 992px) {
	body.cmp-account-dashboard-active .tutor-dashboard.tutor-frontend-dashboard .tutor-container {
		display: grid;
		grid-template-columns: var(--cmp-dash-sidebar-width, 17.875rem) minmax(0, 1fr);
		column-gap: 1.5rem;
		row-gap: 1rem;
		align-items: start;
	}

	/* .tutor-frontend-dashboard-header có class "tutor-d-flex" của Tutor core,
	   mà Tutor core set `.tutor-d-flex{display:flex!important}` — !important đó
	   thắng "display:contents" (không !important) ở dưới, nên contents KHÔNG
	   bao giờ áp dụng được, khiến 2 khối con (card trái, nút phải) không lọt
	   được vào grid 2 cột mà bị ép chung vào 1 ô hẹp (đây là nguyên nhân card
	   Admin + nút "New Course" bị dồn cục, lệch, và cả mảng bên phải bị trống).
	   Fix: không cố "biến mất" phần tử này nữa — để nó chiếm trọn 2 cột grid
	   (grid-column: 1 / -1) rồi dùng chính flex (justify-content:space-between)
	   sẵn có của nó để canh card trái / nút phải. */
	body.cmp-account-dashboard-active .tutor-frontend-dashboard-header {
		grid-column: 1 / -1;
		grid-row: 1;
		align-items: flex-start;
		margin: 0.75rem 0.75rem 0;
		gap: 1rem;
	}

	body.cmp-account-dashboard-active .tutor-header-left-side.tutor-dashboard-header {
		width: 100%;
		max-width: var(--cmp-dash-sidebar-width, 17.875rem);
		margin: 0;
		padding: 1rem;
		background: var(--cmp-dash-card-bg, #fff) !important;
		border: 1px solid rgba(0, 0, 0, 0.04) !important;
		box-shadow: var(--cmp-dash-card-shadow) !important;
		border-radius: var(--cmp-dash-nav-radius, 0.5rem) !important;
	}

	body.cmp-account-dashboard-active .tutor-header-right-side {
		width: auto;
		margin-top: 0 !important;
		justify-content: flex-end;
		align-items: center;
	}

	body.cmp-account-dashboard-active .tutor-frontend-dashboard-maincontent {
		display: contents;
	}

	body.cmp-account-dashboard-active .tutor-dashboard-left-menu {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		max-width: var(--cmp-dash-sidebar-width, 17.875rem);
		margin-bottom: 0;
		position: sticky;
		top: calc(var(--cmp-header-stack-top, 72px) + 1rem);
		background: var(--cmp-dash-sidebar-bg, #edf2f9);
		padding: 0 0.75rem 0.75rem;
		border-radius: 0 0 var(--cmp-dash-nav-radius, 0.5rem) var(--cmp-dash-nav-radius, 0.5rem);
	}

	/* Menu trực tiếp trên nền xám Falcon (không bọc thẻ trắng) */
	body.cmp-account-dashboard-active .tutor-dashboard-permalinks {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0.25rem 0;
	}

	body.cmp-account-dashboard-active .tutor-frontend-dashboard-maincontent > .tutor-col-md-8,
	body.cmp-account-dashboard-active .tutor-frontend-dashboard-maincontent > .tutor-col-lg-9 {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		max-width: 100%;
	}

	body.cmp-account-dashboard-active .tutor-dashboard-content {
		background: var(--cmp-dash-card-bg, #fff);
		border-radius: var(--cmp-dash-nav-radius, 0.5rem);
		box-shadow: var(--cmp-dash-card-shadow);
		border: 1px solid rgba(0, 0, 0, 0.04);
		padding: 1.5rem;
	}
}

@media (max-width: 991px) {
	body.cmp-account-dashboard-active .tutor-dashboard-permalinks {
		display: none;
	}

	body.cmp-account-dashboard-active .tutor-dashboard-left-menu.is-menu-open .tutor-dashboard-permalinks,
	body.cmp-account-dashboard-active .tutor-dashboard-left-menu.tutor-dashboard-menu-open .tutor-dashboard-permalinks {
		display: block;
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1040;
		width: min(18rem, 88vw);
		max-height: 100vh;
		overflow-y: auto;
		margin: 0;
		padding: 1rem 0.5rem 2rem;
		background: var(--cmp-dash-sidebar-bg, #edf2f9);
		box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
	}

	body.cmp-account-dashboard-active .tutor-header-left-side.tutor-dashboard-header {
		border: none;
		box-shadow: none;
		padding: 0.5rem 0;
		margin-bottom: 0;
		background: transparent;
	}
}

/* —— Auth canvas —— */
body.cmp-account-auth-active.cmp-lms-canvas {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: linear-gradient(160deg, var(--ts-surface-soft, #f0f4f8) 0%, var(--ts-surface, #fff) 45%, var(--ts-surface-soft, #f0f4f8) 100%);
	min-height: 100vh;
	font-family: var(--ts-font-body, "Be Vietnam Pro", system-ui, sans-serif);
	color: var(--cmp-biz-text, #1a2b3c);
}

body.cmp-account-auth-active.cmp-lms-canvas .cmp-lms-canvas-wrap {
	min-height: 100vh;
	width: 100%;
}

.cmp-account-auth {
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
}

.cmp-account-auth *,
.cmp-account-auth *::before,
.cmp-account-auth *::after {
	box-sizing: border-box;
}

.cmp-account-auth__inner {
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}

.cmp-account-auth__card {
	background: #fff;
	border: 1px solid var(--cmp-biz-border, #e8eef4);
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 8px 32px rgba(26, 43, 60, 0.08);
	width: 100%;
}

.cmp-account-auth__brand {
	text-align: center;
	margin-bottom: 12px;
}

.cmp-account-auth__brand a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--cmp-biz-text, #1a2b3c);
	font-weight: 700;
	font-size: 1.1rem;
}

.cmp-account-auth__logo {
	max-height: 48px;
	width: auto;
}

.cmp-account-auth__logo-fallback {
	display: none;
}

.cmp-account-auth__logo-fallback.is-visible {
	display: inline;
}

.cmp-account-auth__title {
	margin: 0 0 8px;
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--cmp-biz-text, #1a2b3c);
	line-height: 1.25;
}

.cmp-account-auth__lead {
	margin: 0 0 18px;
	font-size: 0.975rem;
	color: var(--cmp-biz-muted, #5c6b7a);
	line-height: 1.5;
}

.cmp-account-auth__notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 0.875rem;
}

.cmp-account-auth__notice--success {
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #c8e6c9;
}

.cmp-account-auth__notice--info {
	background: #e3f2fd;
	color: #0d47a1;
	border: 1px solid #bbdefb;
}

.cmp-account-auth__footer {
	margin-top: 20px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-account-auth__footer a {
	color: var(--cmp-biz-primary, var(--ts-primary));
	font-weight: 600;
	text-decoration: none;
}

.cmp-account-auth__footer a:hover {
	text-decoration: underline;
}

.cmp-account-auth__viewport {
	width: 100%;
}

.cmp-account-auth--split {
	padding: 0;
	align-items: stretch;
}

.cmp-account-auth--split .cmp-account-auth__viewport {
	display: grid;
	grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
	max-width: none;
	width: 100%;
	min-height: 100vh;
	margin: 0;
	background: #fff;
}

.cmp-account-auth--split .cmp-account-auth__inner {
	max-width: 568px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px clamp(24px, 4vw, 52px);
	order: 1;
}

.cmp-account-auth--split .cmp-account-auth__card {
	border: none;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	width: 100%;
}

.cmp-account-auth__brand--fallback {
	display: block;
}

.cmp-account-auth__panel {
	order: 2;
	background-color: #eef4ff;
	background-image:
		linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0.9) 5%, rgba(255, 255, 255, 0) 26%),
		url("../images/auth-illustration.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	background-size: 100% 100%, cover;
}

.cmp-account-auth__panel-brand,
.cmp-account-auth__panel-body {
	display: none;
}

@media (max-width: 860px) {
	.cmp-account-auth--split .cmp-account-auth__viewport {
		grid-template-columns: 1fr;
	}

	.cmp-account-auth__panel {
		display: none;
	}

	.cmp-account-auth__brand--fallback {
		display: block;
	}

	.cmp-account-auth--split .cmp-account-auth__inner {
		max-width: 568px;
		padding: 40px 24px;
	}
}

.cmp-account-auth__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.cmp-account-auth__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.cmp-account-auth__btn--primary {
	background: var(--cmp-biz-primary, var(--ts-primary));
	color: #fff;
}

.cmp-account-auth__btn--primary:hover {
	background: #005299;
	color: #fff;
}

.cmp-account-auth__btn--ghost {
	background: #fff;
	color: var(--cmp-biz-text, #1a2b3c);
	border: 1px solid var(--cmp-biz-border, #e8eef4);
}

.cmp-account-auth__btn--ghost:hover {
	border-color: var(--cmp-biz-primary, var(--ts-primary));
	color: var(--cmp-biz-primary, var(--ts-primary));
}

.cmp-account-auth .tutor-login-wrap,
.cmp-account-auth .tutor-template-segment {
	padding: 0;
	max-width: none;
}

.cmp-account-auth .tutor-fs-5.tutor-color-black {
	display: none;
}

.cmp-account-auth #tutor-registration-wrap .tutor-fs-5 {
	display: none;
}

.cmp-account-auth .tutor-btn-primary,
.cmp-account-auth .tutor-btn.tutor-btn-primary {
	background: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-color: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-radius: 8px;
	width: 100%;
	min-height: 50px;
	padding: 12px 20px;
	font-size: 1rem;
}

.cmp-account-auth .tutor-form-control {
	display: block;
	width: 100%;
	border-radius: 8px;
	border: 1px solid var(--cmp-biz-border, #e8eef4);
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.4;
}

.cmp-account-auth #tutor-login-form,
.cmp-account-auth #tutor-registration-wrap {
	width: 100%;
}

/* Nút "Đăng nhập/Đăng ký bằng Google" — plugin cmp-google-login tự in ra
   <style> riêng (mặc định co theo nội dung, không full-width). Selector 2 lớp
   dưới đây có độ ưu tiên cao hơn nên luôn thắng, bất kể thứ tự nạp CSS, để nút
   Google có chiều rộng và chiều cao bằng nút "Đăng nhập"/"Đăng ký" thường. */
.cmp-account-auth .cmp-google-login {
	margin-top: 16px;
	width: 100%;
}

.cmp-account-auth .cmp-google-login__button-wrap {
	display: block;
	width: 100%;
}

.cmp-account-auth .cmp-google-login__button {
	width: 100%;
	min-height: 50px;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 1rem;
}

.cmp-account-auth #tutor-login-form .tutor-mb-20,
.cmp-account-auth #tutor-login-form .tutor-mb-32 {
	margin-bottom: 16px;
}

.cmp-account-auth #tutor-login-form .tutor-mb-32 {
	margin-bottom: 20px;
}

.cmp-account-auth #tutor-login-form .tutor-d-flex.tutor-justify-between {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.cmp-account-auth #tutor-login-form .tutor-form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.cmp-account-auth #tutor-login-form .tutor-btn-ghost {
	padding: 0;
	min-height: auto;
	font-size: 0.875rem;
	white-space: nowrap;
}

.cmp-account-auth .tutor-text-center.tutor-mt-20 {
	display: none;
}

/* —— Student registration form —— */
.cmp-student-register-form #tutor-registration-wrap {
	padding: 0;
}

.cmp-student-register-form .tutor-form-group label {
	font-weight: 500;
	color: var(--cmp-biz-text, #1a2b3c);
}

/* Tutor mặc định margin-bottom 32px cho mỗi .tutor-form-group — với 6 field
   cộng dồn khiến form rất cao, phải cuộn trang. Giảm lại cho gọn. */
.cmp-student-register-form .tutor-form-group {
	margin-bottom: 14px;
}

/* Đánh dấu * đỏ cho các field bắt buộc — toàn bộ field text/password của form
   đăng ký (Họ, Tên, Tên đăng nhập, Email, Mật khẩu, Xác nhận mật khẩu) đều
   required nên áp dụng chung cho mọi label trong .tutor-form-group. Riêng
   field Email giờ không bắt buộc (JS gắn class .cmp-field-optional) nên bỏ
   dấu * cho field này. */
.cmp-student-register-form .tutor-form-group label::after {
	content: "*";
	color: #e53935;
	margin-left: 4px;
	font-weight: 700;
}

.cmp-student-register-form .tutor-form-group.cmp-field-optional label::after {
	content: none;
}

.cmp-student-register-form .tutor-form-control,
.cmp-student-register-form input[type="text"],
.cmp-student-register-form input[type="email"],
.cmp-student-register-form input[type="password"] {
	border-radius: 8px;
	border-color: var(--cmp-biz-border, #e8eef4);
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.4;
	width: 100%;
	/* Tutor's .tutor-form-group input[type=...] có sẵn text-indent:15px (dùng
	   thay padding-left ở bản gốc) — cộng dồn với padding-left ở trên thành
	   ~31px, khiến nội dung/placeholder bị đẩy quá xa mép trái. Bỏ text-indent,
	   chỉ dùng padding. */
	text-indent: 0;
}

/* Nút ẩn/hiện mật khẩu — Tutor có sẵn markup .show-hide-btn cho field mật
   khẩu đầu tiên nhưng không có JS xử lý click (chỉ tính độ mạnh mật khẩu),
   nên ẩn nó đi và dùng bộ nút tự viết (script trong auth-shell.php) áp dụng
   thống nhất cho mọi input mật khẩu (đăng nhập, mật khẩu, xác nhận mật khẩu). */
.tutor-password-field .show-hide-btn {
	display: none !important;
}

/* Field "Xác nhận mật khẩu" có icon check-mark (.tutor-form-icon-reverse) của
   Tutor neo bên phải (right:0, rộng 40px) — cùng vị trí với nút ẩn/hiện mật
   khẩu tự viết ở trên (right:6px, rộng 32px), 2 icon chồng lên nhau khi mật
   khẩu khớp. Ẩn icon check-mark của Tutor, chỉ giữ 1 icon để tránh vỡ layout. */
.cmp-student-register-form .tutor-form-icon-reverse {
	display: none !important;
}

.cmp-password-toggle-wrap {
	position: relative;
	width: 100%;
	/* Một số field (VD: Xác nhận mật khẩu) bọc trong .tutor-form-wrap có sẵn
	   display:flex — nếu không có flex-grow, wrapper này sẽ co theo nội dung
	   (~input mặc định ~20ch) thay vì giãn hết chỗ trống. */
	flex: 1 1 auto;
	min-width: 0;
}

.cmp-password-toggle-wrap input[type="password"],
.cmp-password-toggle-wrap input[type="text"] {
	/* Icon rộng 32px, cách mép phải 6px (chiếm 6-38px tính từ mép phải) — 44px
	   chỉ còn 6px hở, mật khẩu dài chữ chạm sát icon. Tăng lên 50px cho thoáng. */
	padding-right: 50px !important;
}

/* Edge/IE tự vẽ icon "con mắt" (reveal) + icon "x" (clear) riêng của trình
   duyệt ngay trong input password/text — đè lên đúng góc phải, cùng chỗ với
   icon con mắt tự viết ở trên, gây chồng 2 icon ("vỡ" giao diện) mỗi khi field
   đổi qua lại giữa type="password"/"text". Tắt hẳn icon gốc của trình duyệt. */
.cmp-password-toggle-wrap input[type="password"]::-ms-reveal,
.cmp-password-toggle-wrap input[type="password"]::-ms-clear,
.cmp-password-toggle-wrap input[type="text"]::-ms-reveal,
.cmp-password-toggle-wrap input[type="text"]::-ms-clear {
	display: none;
}

.cmp-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--cmp-biz-muted, #5c6b7a);
	cursor: pointer;
	padding: 0;
	border-radius: 6px;
}

.cmp-password-toggle:hover {
	color: var(--cmp-biz-primary, var(--ts-primary));
	background: rgba(0, 0, 0, 0.04);
}

.cmp-password-toggle svg {
	width: 18px;
	height: 18px;
}

/* Widget đồng ý chính sách (plugin Consent CMP, CMP_Register_Form) — theme màu
   mặc định của plugin là indigo (#4f46e5) + góc vuông (radius 0px), lệch hẳn
   với tông xanh + bo góc mềm của cả site. Plugin hỗ trợ tuỳ biến qua CSS
   variables ngay trên .cmp-consent (xem DOCUMENTATION.md mục 10) nên ghi đè ở
   đây thay vì đụng vào class nội bộ của plugin. Ẩn luôn hàng điều khiển
   "Ẩn danh sách / Đồng ý tất cả" ở header — form chỉ có 1 mục duy nhất nên
   hàng này thừa, bật/tắt mục đó là đủ.

   Bản "siêu gọn": nén hết khoảng đệm/khoảng cách qua CSS variables của plugin,
   rồi ghi đè trực tiếp một số class con (padding của card mục, cỡ chữ, cỡ nút
   switch) vì các phần đó plugin không expose thành variable. Mục tiêu là để cả
   khối chỉ còn cao bằng khoảng 1 hàng label + switch, không còn cảm giác
   "card" to như mặc định. */
.cmp-register-consent {
	margin-top: 4px;
}

.cmp-register-consent .cmp-consent {
	--cmp-accent: var(--cmp-biz-primary, var(--ts-primary));
	--cmp-accent-hover: var(--ts-primary-dark);
	--cmp-accent-strong: var(--ts-primary-dark);
	--cmp-accent-gradient: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
	--cmp-accent-soft: var(--ts-primary-soft, rgba(25, 80, 209, 0.1));
	--cmp-accent-border: var(--cmp-biz-primary, var(--ts-primary));
	--cmp-text: var(--cmp-biz-text, #1a2b3c);
	--cmp-muted: var(--cmp-biz-muted, #5c6b7a);
	--cmp-border: var(--cmp-biz-border, #e8eef4);
	--cmp-surface: #ffffff;
	--cmp-subtle: var(--cmp-biz-bg-soft, #f6f8fc);
	--cmp-radius: 10px;
	--cmp-radius-sm: 8px;
	--cmp-gap: 6px;
	--cmp-font-size: 0.875rem;
	--cmp-font-family: inherit;
	padding: 12px 14px;
}

.cmp-register-consent .cmp-consent__header-controls {
	display: none;
}

.cmp-register-consent .cmp-consent__header {
	gap: 2px 12px;
}

.cmp-register-consent .cmp-consent__title {
	font-size: 0.875rem;
	line-height: 1.3;
}

.cmp-register-consent .cmp-consent__subtitle {
	margin-top: 0;
	font-size: 0.75rem;
	line-height: 1.3;
}

.cmp-register-consent .cmp-consent__list {
	gap: 6px;
}

.cmp-register-consent .cmp-consent__item {
	padding: 8px 10px;
}

.cmp-register-consent .cmp-consent__item-head {
	gap: 8px;
}

.cmp-register-consent .cmp-consent__label {
	font-size: 0.8125rem;
}

.cmp-register-consent .cmp-consent__description {
	margin-top: 2px;
	font-size: 0.75rem;
	line-height: 1.35;
}

.cmp-register-consent .cmp-consent__toggle-text {
	font-size: 0.75rem;
}

.cmp-register-consent .cmp-consent__item-controls {
	gap: 8px;
}

/* Switch mặc định của plugin (46×26) không có variable riêng — thu nhỏ về cỡ
   "sm" plugin đã định nghĩa sẵn (38×22, thumb 16×16) cho gọn tay hơn. */
.cmp-register-consent .cmp-consent__switch {
	width: 38px;
	height: 22px;
}

.cmp-register-consent .cmp-consent__switch-thumb {
	width: 16px;
	height: 16px;
}

.cmp-register-consent .cmp-consent__switch.is-on .cmp-consent__switch-thumb {
	transform: translateX(16px);
}

/* Xác thực email bằng mã OTP trước khi cho phép đăng ký (CMP_Register_OTP) */
.cmp-otp {
	margin: 4px 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--cmp-biz-border, #e8eef4);
	border-radius: 8px;
	background: var(--cmp-biz-bg-soft, #f6f8fc);
}

.cmp-otp__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.cmp-otp__send-btn,
.cmp-otp__verify-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid var(--cmp-biz-primary, var(--ts-primary));
	background: #fff;
	color: var(--cmp-biz-primary, var(--ts-primary));
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}

.cmp-otp__send-btn:hover:not(:disabled),
.cmp-otp__verify-btn:hover:not(:disabled) {
	background: var(--cmp-biz-primary, var(--ts-primary));
	color: #fff;
}

.cmp-otp__send-btn:disabled,
.cmp-otp__verify-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cmp-otp__status {
	font-size: 0.8125rem;
	line-height: 1.4;
}

.cmp-otp__status--info {
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-otp__status--success {
	color: #1b5e20;
	font-weight: 600;
}

.cmp-otp__status--error {
	color: #c62828;
	font-weight: 600;
}

.cmp-otp__code-row {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.cmp-otp__code-input {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 8px;
	border: 1px solid var(--cmp-biz-border, #e8eef4);
	padding: 10px 14px;
	font-size: 0.95rem;
	letter-spacing: 0.15em;
}

/* Nút "Đăng ký học viên" bị khoá cho tới khi xác thực email xong */
.cmp-student-register-form .tutor-btn-primary.cmp-otp-locked {
	opacity: 0.5;
	cursor: not-allowed;
}

.cmp-student-register-form .tutor-btn-primary {
	background: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-color: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-radius: 8px;
	font-weight: 600;
	width: 100%;
	min-height: 50px;
	padding: 12px 20px;
	font-size: 1rem;
}

/* Ghép cặp field (Họ+Tên, Mật khẩu+Xác nhận...) trên 1 dòng — markup của Tutor
   đã có sẵn .tutor-form-row/.tutor-form-col-6 nhưng chưa được style layout nên
   trước đây mọi field bị xếp dọc thành 1 cột dài dù màn hình rộng. */
.cmp-student-register-form .tutor-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.cmp-student-register-form .tutor-form-col-6 {
	flex: 1 1 calc(50% - 8px);
	min-width: 0;
}

.cmp-student-register-form .tutor-form-col-12 {
	flex: 1 1 100%;
}

/* Riêng dòng Mật khẩu/Xác nhận mật khẩu: để full-width từng field (không ghép
   cặp) vì nhãn + placeholder dài, ghép cặp nửa cột sẽ bị cắt chữ/quá hẹp khi
   cộng thêm khoảng chừa cho nút ẩn/hiện mật khẩu. */
.cmp-student-register-form .tutor-form-row:has(input[type="password"]) .tutor-form-col-6 {
	flex: 1 1 100%;
}

/* Tutor's .tutor-form-wrap có sẵn "width:1%" (chỉ đúng khi nằm trong 1 flex-row
   input-group khác) — ở đây nó bọc riêng field "Xác nhận mật khẩu" nên bị hẹp
   sai. Ép lại 100% cho đúng với field còn lại. */
.cmp-student-register-form .tutor-form-wrap {
	width: 100%;
}

/* Card giờ nằm trong khung split-screen (.cmp-account-auth--split), tự giãn
   theo cột phải nên không cần giới hạn max-width riêng như trước. */

@media (max-width: 575px) {
	.cmp-student-register-form .tutor-form-col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.cmp-account-profile-page .cmp-account-profile-card {
	padding: 28px;
	margin-bottom: 40px;
}

.cmp-account-profile-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--cmp-biz-border, #e8eef4);
}

.cmp-account-profile-card__avatar img,
.cmp-account-profile-card__avatar .tutor-avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.cmp-account-profile-card__name {
	margin: 0 0 6px;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cmp-biz-text, #1a2b3c);
}

.cmp-account-profile-card__email {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-account-profile-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cmp-account-profile-card__body .tutor-fs-5.tutor-fw-medium.tutor-mb-24 {
	display: none;
}

.cmp-lms-shell.cmp-lms-profile-page {
	max-width: none;
	padding: 0;
	background: #fff;
}

.cmp-account-settings-page .cmp-account-settings-card {
	padding: 28px;
	margin-bottom: 40px;
}

.cmp-account-settings-card__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--cmp-biz-border, #e8eef4);
}

.cmp-account-settings-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cmp-settings-tab__title {
	margin: 0 0 24px;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--cmp-biz-text, #1a2b3c);
}

.cmp-settings-nav__list {
	margin: 0;
}

.cmp-settings-tab__intro {
	margin-top: 0;
}

.cmp-settings-tab__notice {
	margin: 0;
	padding: 16px;
	border-radius: 8px;
	background: #f5f8fb;
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-account-settings-page .cmp-settings-content .tutor-dashboard-setting-profile {
	padding-top: 0;
}

.cmp-account-settings-page .cmp-settings-content > .tutor-fs-4.tutor-fw-medium.tutor-mb-24,
.cmp-account-settings-page .cmp-settings-content > .tutor-dashboard-content-inner > .tutor-mb-32:first-child,
.cmp-account-settings-page .cmp-settings-content .tutor-dashboard-setting-withdraw > .tutor-mb-32:first-child,
.cmp-account-settings-page .cmp-settings-content .tutor-dashboard-setting-withdraw > .tutor-fs-4.tutor-fw-medium.tutor-mb-24 {
	display: none;
}

.cmp-account-settings-page .cmp-settings-content .tutor-btn-primary {
	background: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-color: var(--cmp-biz-primary, var(--ts-primary)) !important;
	border-radius: 8px;
	font-weight: 600;
}

.cmp-lms-shell.cmp-lms-settings-page {
	max-width: none;
	padding: 0;
	background: #fff;
}

.cmp-account-logout-notice {
	/* max-width: 1200px; */
	margin: 0 auto 0;
	padding: 14px 20px;
	background: #e8f5e9;
	color: #1b5e20;
	border-bottom: 1px solid #c8e6c9;
	text-align: center;
	font-size: 0.95rem;
}

.cmp-account-section-head {
	margin: 0 0 20px;
}

.cmp-account-section-head__title {
	margin: 0 0 6px;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--cmp-biz-text, #1a2b3c);
}

.cmp-account-section-head__desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--cmp-biz-muted, #5c6b7a);
}

/* —— Quiz attempts management —— */
.cmp-quiz-attempts {
	margin-bottom: 24px;
}

.cmp-quiz-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.cmp-quiz-stats__card {
	background: var(--cmp-dash-card-bg, #fff);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	box-shadow: var(--cmp-dash-card-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
	padding: 18px 16px;
	text-align: center;
}

.cmp-quiz-stats__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cmp-dash-nav-icon, #2c7be5);
	line-height: 1.2;
}

.cmp-quiz-stats__card--pass .cmp-quiz-stats__value {
	color: #00864e;
}

.cmp-quiz-stats__card--fail .cmp-quiz-stats__value {
	color: #c0392b;
}

.cmp-quiz-stats__card--pending .cmp-quiz-stats__value {
	color: #e5780b;
}

.cmp-quiz-stats__label {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--cmp-dash-nav-muted, #748194);
}

.cmp-quiz-filters {
	padding: 20px;
	margin-bottom: 20px;
	background: var(--cmp-dash-card-bg, #fff);
	border: 1px solid var(--cmp-biz-border);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	box-shadow: var(--cmp-dash-card-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.cmp-quiz-filters__form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: end;
}

.cmp-quiz-filters__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cmp-biz-text);
}

.cmp-quiz-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cmp-quiz-table-wrap {
	padding: 0;
	overflow: hidden;
	background: var(--cmp-dash-card-bg, #fff);
	border: 1px solid var(--cmp-biz-border);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	box-shadow: var(--cmp-dash-card-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.cmp-quiz-table-wrap .tutor-table-responsive {
	margin: 0;
}

.cmp-quiz-table tbody td {
	color: var(--cmp-biz-text, #344050);
}

.cmp-quiz-filters .tutor-form-control,
.cmp-quiz-filters .tutor-form-select {
	color: var(--cmp-biz-text, #344050);
	background-color: #fff;
}

.cmp-quiz-table thead th {
	background: var(--cmp-dash-sidebar-bg, #edf2f9);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cmp-dash-nav-muted, #748194);
	border-bottom: 1px solid var(--cmp-biz-border);
}

.cmp-quiz-table__quiz {
	font-weight: 600;
	color: var(--cmp-biz-text);
}

.cmp-quiz-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.cmp-quiz-badge--pass {
	background: #e8f5e9;
	color: #1b5e20;
}

.cmp-quiz-badge--fail {
	background: #ffebee;
	color: #b71c1c;
}

.cmp-quiz-badge--pending {
	background: #fff3e0;
	color: #e65100;
}

/* Cấp chứng chỉ học viên (CMP_Certificate_Issuance) — cũng dùng hệ class
   .tutor-card/.tutor-grid/.tutor-table/.tutor-badge-label/.tutor-progress-bar
   sẵn có, chỉ thêm hiệu ứng hover cho thẻ khóa học + canh khoảng cách cột
   tiến độ (Tutor core không có sẵn layout ngang cho progress bar + %). */
.cmp-cert-issuance-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

/* Nút chuyển chế độ xem lưới/danh sách — trạng thái do JS inline trong
   render_courses_view() điều khiển (đọc/ghi localStorage), CSS chỉ lo giao
   diện, không có logic ẩn/hiện gì ở đây. */
.cmp-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	background: var(--cmp-biz-bg-soft, #f6f8fc);
	border: 1px solid var(--cmp-biz-border, #e8eef4);
	border-radius: 8px;
	flex-shrink: 0;
}

.cmp-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--cmp-biz-text-muted, #6b7280);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cmp-view-toggle__btn:hover {
	color: var(--cmp-biz-primary, var(--ts-primary));
}

.cmp-view-toggle__btn.is-active {
	background: #fff;
	color: var(--cmp-biz-primary, var(--ts-primary));
	box-shadow: 0 1px 3px rgba(30, 30, 44, 0.1);
}

/* Lưới thẻ khóa học — mặc định view "grid" (có ảnh), JS đổi data-cmp-view
   sang "list" khi người dùng bấm nút danh sách hoặc đã lưu lựa chọn trước
   đó trong localStorage. */
.cmp-cert-issuance__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.cmp-cert-issuance-card {
	display: block;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cmp-cert-issuance-card:hover {
	border-color: var(--cmp-biz-primary, var(--ts-primary));
	box-shadow: var(--ts-shadow-sm, 0 2px 12px rgba(30, 30, 44, 0.06));
	transform: translateY(-2px);
}

.cmp-cert-issuance-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cmp-biz-bg-soft, #f6f8fc);
}

.cmp-cert-issuance-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.cmp-cert-issuance-card:hover .cmp-cert-issuance-card__thumb img {
	transform: scale(1.04);
}

.cmp-cert-issuance-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--cmp-biz-text, #1e1e2c);
	line-height: 1.4;
}

.cmp-cert-issuance-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--cmp-biz-text-muted, #6b7280);
}

/* View "danh sách" — ẩn ảnh, mỗi khóa học 1 dòng ngang gọn thay vì thẻ lưới. */
.cmp-cert-issuance__grid[data-cmp-view="list"] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cmp-cert-issuance__grid[data-cmp-view="list"] .cmp-cert-issuance-card {
	display: flex;
}

.cmp-cert-issuance__grid[data-cmp-view="list"] .cmp-cert-issuance-card__thumb {
	display: none;
}

.cmp-cert-issuance__grid[data-cmp-view="list"] .tutor-card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.cmp-cert-issuance__grid[data-cmp-view="list"] .cmp-cert-issuance-card__meta {
	margin-top: 0;
	flex-shrink: 0;
}

.cmp-cert-issuance__progress {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
}

.cmp-cert-issuance__progress .tutor-progress-bar {
	flex: 1 1 auto;
}

.cmp-cert-issuance__actions form {
	display: inline-block;
	margin: 0;
}

/* Trình tạo chứng chỉ (cmp_lms_render_certificate_builder_page) — thẻ dùng
   .tutor-card/.tutor-grid/.tutor-badge-label/.tutor-iconic-btn sẵn có của
   Tutor core, chỉ riêng khung ảnh thumbnail là cần CSS mới vì chứng chỉ có
   thể ngang hoặc dọc (không cố định tỉ lệ như ảnh khóa học 16:9). */
.cmp-cert-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	background: var(--cmp-biz-bg-soft, #f6f8fc);
	border-bottom: 1px solid var(--cmp-biz-border, #e8eef4);
	border-radius: var(--ts-radius-md, 12px) var(--ts-radius-md, 12px) 0 0;
	overflow: hidden;
}

.cmp-cert-card__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cmp-cert-card__thumb--empty {
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px;
	text-align: center;
}

.cmp-cert-card__thumb--empty .tutor-icon-certificate-landscape {
	font-size: 2rem;
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-cert-card__thumb-hint {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--cmp-biz-muted, #5c6b7a);
}

.cmp-cert-card__title {
	color: var(--cmp-biz-text, #1a2b3c);
}

.cmp-quiz-empty {
	padding: 40px 24px;
	text-align: center;
}

.cmp-quiz-empty__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cmp-biz-text);
}

.cmp-quiz-empty__desc {
	margin: 0 0 20px;
	font-size: 0.875rem;
	color: var(--cmp-biz-muted);
}

.cmp-quiz-detail__toolbar {
	margin-bottom: 16px;
}

.cmp-quiz-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cmp-dash-nav-icon, #2c7be5);
	text-decoration: none;
}

.cmp-quiz-detail__back:hover {
	text-decoration: underline;
}

.cmp-quiz-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	padding: 16px 20px;
	margin-bottom: 20px;
	border: 1px solid var(--cmp-biz-border);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
}

.cmp-quiz-detail__meta-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cmp-dash-nav-muted, #748194);
}

.cmp-quiz-detail__body {
	padding: 20px;
	border: 1px solid var(--cmp-biz-border);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
}

body.cmp-account-dashboard-active .cmp-quiz-attempts .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-24,
body.cmp-account-dashboard-active .cmp-quiz-attempts .tutor-fs-4.tutor-fw-medium.tutor-mb-24 {
	display: none;
}

/* —— My courses (instructor tabs) —— */
.cmp-my-courses {
	margin-bottom: 24px;
}

.cmp-my-courses__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0;
	margin: 0 0 24px;
	list-style: none;
	border-bottom: 1px solid var(--cmp-biz-border, rgba(0, 0, 0, 0.08));
}

.cmp-my-courses__tabs .tutor-nav-item {
	margin: 0;
}

.cmp-my-courses__tabs .tutor-nav-link {
	display: inline-block;
	padding: 10px 16px;
	margin-bottom: -1px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cmp-dash-nav-muted, #748194);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cmp-my-courses__tabs .tutor-nav-link:hover,
.cmp-my-courses__tabs .tutor-nav-link.is-active {
	color: var(--cmp-dash-nav-icon, #2c7be5);
	border-bottom-color: var(--cmp-dash-nav-icon, #2c7be5);
}

.cmp-my-courses__grid {
	margin-bottom: 8px;
}

.cmp-my-courses-empty {
	background: var(--cmp-dash-card-bg, #fff);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--cmp-dash-nav-radius, 0.5rem);
}

.cmp-my-courses-empty__title {
	margin: 0 0 8px;
}

.cmp-my-courses-empty__desc {
	margin: 0;
}

body.cmp-my-courses-page .cmp-my-courses .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-16 {
	display: none;
}

/* —— Standalone dashboard layout (left sidebar) —— */
body.cmp-account-dashboard-layout-active .cmp-account-dashboard-layout .cmp-hub-container.tutor-container {
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 20px;
}

body.cmp-account-dashboard-layout-active .cmp-account-dashboard-layout .tutor-dashboard-content .cmp-account-page-header {
	margin-top: 0;
	border-bottom: 1px solid var(--cmp-biz-border);
}

body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile {
	display: none;
}

@media (max-width: 991px) {
	body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		background: var(--cmp-dash-card-bg, #fff);
		border-top: 1px solid var(--cmp-biz-border);
		box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.08);
	}

	body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile .tutor-row {
		display: flex;
		margin: 0;
	}

	body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		padding: 0.65rem 0.25rem;
		text-decoration: none;
		color: var(--cmp-dash-nav-muted, #748194);
		font-size: 0.6875rem;
	}

	body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile a.active,
	body.cmp-account-dashboard-layout-active #tutor-dashboard-footer-mobile a:hover {
		color: var(--cmp-dash-nav-icon, #2c7be5);
	}

	body.cmp-account-dashboard-layout-active .cmp-account-dashboard-layout {
		padding-bottom: 4.5rem;
	}
}

@media (max-width: 991px) {
	.cmp-quiz-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cmp-quiz-filters__form {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.cmp-quiz-table-wrap .tutor-table-mobile tbody tr {
		display: block;
		margin-bottom: 12px;
		padding: 12px;
		border: 1px solid var(--cmp-biz-border);
		border-radius: var(--cmp-dash-nav-radius, 0.5rem);
	}

	.cmp-quiz-table-wrap .tutor-table-mobile tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
		border: none;
	}

	.cmp-quiz-table-wrap .tutor-table-mobile tbody td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--cmp-dash-nav-muted, #748194);
		flex-shrink: 0;
	}
}

@media (max-width: 767px) {
	.cmp-account-hub {
		padding-top: 16px;
	}

	.cmp-account-auth__card {
		padding: 24px 20px;
	}
}