/* =============================================================================
   sections.css — CSS riêng của từng section, mỗi section một khối.

   Quy ước: chỉ dùng token khai ở main.css, không viết mã màu cứng. Section mới
   thêm khối vào CUỐI file, theo thứ tự xuất hiện trong sections-map.php.

   Ba breakpoint: 1024 / 900 / 768. Mốc 900 dành riêng cho việc giấu ảnh chân
   dung ở hero trang Webinar, đúng như bản gốc.

   Giá trị lấy từ src/theme/assets/css/, vốn lấy từ
   design/ban-do-hanh-phuc-website.dc.html.
   ========================================================================== */

/* Ảnh nền mờ dùng chung ở vài section. Section mang ảnh nền phải có
   position: relative, và nội dung phải nâng z-index lên trên. */
.cba-video,
.cba-cta__panel,
.cba-pricing__inner,
.cba-form {
	position: relative;
}

.cba-video__bg,
.cba-cta__bg,
.cba-pricing__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
	z-index: 0;
}

.cba-video__bg {
	opacity: 0.08;
}

.cba-cta__bg,
.cba-pricing__bg {
	opacity: 0.16;
	border-radius: inherit;
}

/* ============ hero — trang chủ ============ */

.cba-hero {
	padding-top: 64px;
	padding-bottom: 56px;
}

.cba-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 52px;
	align-items: center;
}

.cba-hero .cba-eyebrow--plain {
	font-family: var(--cba-font-display);
	font-style: italic;
	font-size: 19px;
	color: var(--cba-primary);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 14px;
}

.cba-hero__title {
	font-size: 56px;
	line-height: 1.08;
	margin: 0 0 24px;
}

.cba-hero__title em {
	color: var(--cba-primary);
}

.cba-hero__lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--cba-muted);
	margin: 0 0 32px;
	max-width: 460px;
}

.cba-hero__lead p:last-child {
	margin-bottom: 0;
}

.cba-hero__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.cba-hero__figure {
	position: relative;
}

/* Vòm trên là nét nhận dạng của thiết kế — bo góc trên rất lớn, góc dưới nhỏ. */
.cba-hero__photo {
	border-radius: 230px 230px 24px 24px;
	overflow: hidden;
	aspect-ratio: 3 / 3.4;
	box-shadow: var(--cba-shadow-hero);
}

.cba-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-hero__badge {
	position: absolute;
	bottom: 28px;
	left: -26px;
	background: var(--cba-surface);
	border-radius: 16px;
	padding: 16px 22px;
	box-shadow: var(--cba-shadow-badge);
}

.cba-hero__badge-value {
	display: block;
	font-family: var(--cba-font-display);
	font-size: 28px;
	color: var(--cba-primary);
	font-weight: 600;
	line-height: 1;
}

.cba-hero__badge-label {
	display: block;
	font-size: 12.5px;
	color: var(--cba-muted);
	margin-top: 3px;
}

/* ============ hero-mission — trang Sứ mệnh ============ */

.cba-hero-mission {
	position: relative;
	height: 420px;
	overflow: hidden;
}

.cba-hero-mission__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cba-hero-mission__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(46, 35, 40, 0.72), rgba(143, 58, 82, 0.35));
}

.cba-hero-mission__inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--cba-white, #fff);
}

.cba-hero-mission__title {
	font-size: 52px;
	line-height: 1.1;
	margin: 0;
	color: var(--cba-white, #fff);
}

.cba-hero-mission__subtitle {
	font-style: italic;
	font-weight: 400;
}

/* ============ intro — lời chào ============ */

.cba-intro {
	padding-top: 64px;
	padding-bottom: 64px;
}

.cba-intro__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 48px;
	align-items: center;
}

.cba-intro__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cba-intro__photo {
	border-radius: var(--cba-radius-card);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: var(--cba-shadow-media);
}

/* Ảnh thứ hai tụt xuống để hai khung so le, không thẳng hàng cứng. */
.cba-intro__photo--offset {
	margin-top: 20px;
}

.cba-intro__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-intro__title {
	font-size: 38px;
	margin: 0 0 10px;
}

.cba-intro__lead {
	font-size: var(--cba-text);
	color: var(--cba-secondary);
	font-weight: 500;
	margin: 0 0 18px;
}

.cba-intro__points {
	margin-bottom: 22px;
}

.cba-intro__points li {
	font-size: var(--cba-text);
	line-height: 1.7;
	color: var(--cba-muted-soft);
}

.cba-intro__closing {
	font-size: var(--cba-text);
	line-height: 1.75;
	color: var(--cba-muted-soft);
	margin: 0 0 20px;
}

.cba-intro__closing p:last-child {
	margin-bottom: 0;
}

.cba-signature {
	border-left: 3px solid var(--cba-primary);
	padding-left: 16px;
	font-family: var(--cba-font-display);
	font-style: italic;
	font-size: 17px;
	color: var(--cba-secondary);
	margin: 0;
}

.cba-signature__role {
	display: block;
	font-size: 13px;
	font-style: normal;
	color: var(--cba-muted);
}

/* ============ story — dải ảnh và nội dung ============ */

.cba-story--band {
	padding-top: 72px;
	padding-bottom: 72px;
}

.cba-story--band .cba-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

/* Ảnh bên phải: đảo thứ tự bằng grid chứ không đổi thứ tự trong HTML, để trình
   đọc màn hình vẫn nghe nội dung trước ảnh minh hoạ. */
.cba-story--media-right .cba-story__media {
	order: 2;
}

.cba-story__media {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3.2;
	box-shadow: var(--cba-shadow-lift);
	margin: 0;
}

.cba-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-story .cba-eyebrow--plain {
	font-family: var(--cba-font-display);
	font-style: italic;
	font-size: 19px;
	color: var(--cba-primary);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 12px;
}

.cba-story__title {
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 22px;
}

.cba-story__body {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--cba-muted);
	margin: 0 0 30px;
	max-width: 440px;
}

/* Biến thể trang Sứ mệnh: lead giữa, copy trái + chân dung phải. */
.cba-story--mission {
	padding-bottom: 72px;
}

.cba-story--mission .cba-story__lead {
	max-width: 900px;
	margin: 0 auto;
	padding: 64px 0 20px;
	text-align: center;
	font-size: 18px;
	line-height: 1.8;
	color: var(--cba-muted-soft);
}

.cba-story--mission .cba-story__lead p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.cba-story--mission .cba-story__lead .accent,
.cba-story--mission .cba-story__lead em {
	color: var(--cba-primary);
	font-style: italic;
}

.cba-story--mission .cba-story__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 52px;
	align-items: start;
	padding-top: 44px;
}

.cba-story--mission .cba-story__title {
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 20px;
}

.cba-story--mission .cba-story__body {
	max-width: none;
	columns: unset;
	font-size: 15.5px;
	line-height: 1.78;
	margin: 0;
}

.cba-story--mission .cba-story__media {
	aspect-ratio: auto;
	position: sticky;
	top: 100px;
	margin-top: 0;
}

.cba-story--mission .cba-story__media img {
	height: auto;
	object-fit: cover;
}

/* ============ video và lĩnh vực ============ */

.cba-video {
	background: var(--cba-surface);
	border-top: 1px solid var(--cba-hairline);
	border-bottom: 1px solid var(--cba-hairline);
	padding-top: 72px;
	padding-bottom: 72px;
}

.cba-video__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 52px;
	align-items: center;
}

.cba-video__title {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 24px;
}

.cba-video__lead {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cba-muted-soft);
	margin: 0 0 20px;
}

.cba-video .embed {
	box-shadow: var(--cba-shadow-embed);
}

/* ============ consult — tư vấn cá nhân ============ */

.cba-consult {
	padding-top: 72px;
	padding-bottom: 40px;
	/* Menu dính ở đầu trang che mất tiêu đề khi nhảy tới #tu-van. */
	scroll-margin-top: 80px;
}

.cba-consult__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 52px;
	align-items: start;
}

.cba-consult__media {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 3 / 3.7;
	box-shadow: var(--cba-shadow-lift);
	position: sticky;
	top: 100px;
	margin: 0;
}

.cba-consult__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-consult__title {
	font-size: 38px;
	margin: 0 0 24px;
}

.cba-consult__facts {
	margin-bottom: 22px;
}

.cba-consult__price {
	display: inline-block;
	background: var(--cba-blush);
	color: var(--cba-secondary);
	font-weight: 600;
	font-size: 16px;
	padding: 14px 24px;
	border-radius: 14px;
	margin: 0 0 30px;
}

/* Số thứ tự do CSS counter sinh, không nằm trong dữ liệu — thêm bớt bước không
   phải đánh số lại bằng tay. */
.cba-steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* KHÔNG dùng display:flex ở đây. Nội dung mỗi bước là chữ chạy có xen <em> nhấn
   mạnh; trong một flex container, MỖI đoạn chữ và MỖI thẻ <em> thành một flex
   item riêng, nên câu bị chẻ thành nhiều cột với khoảng cách 14px chen vào giữa.
   Trên desktop chỉ thấy chữ thưa bất thường, còn ở bề ngang điện thoại thì mỗi
   mảnh xuống dòng riêng, có mảnh chỉ còn một chữ. Số thứ tự đặt tuyệt đối, chữ
   giữ nguyên dòng chảy bình thường. */
.cba-steps__item {
	counter-increment: step;
	position: relative;
	padding-left: 42px;
	font-size: var(--cba-text);
	line-height: 1.65;
	color: var(--cba-muted-soft);
}

.cba-steps__item::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cba-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Trong danh sách gạch và các bước, từ nhấn đậm chứ không nghiêng — nghiêng ở
   cỡ chữ nhỏ này đọc mệt. */
.cba-steps__item em,
.ticks--sm em,
.cba-package em {
	font-style: normal;
	font-weight: 600;
	color: var(--cba-secondary);
}

/* ============ features — các gói huấn luyện ============ */

.cba-features {
	padding-top: 68px;
	padding-bottom: 68px;
}

.cba-features__title {
	font-size: 34px;
	margin: 0 0 20px;
	max-width: 760px;
}

.cba-features__intro {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--cba-muted-soft);
	max-width: 900px;
}

.cba-features__cta {
	margin: 10px 0 44px;
	padding: 14px 30px;
}

.cba-package {
	background: var(--cba-surface);
	border-radius: 20px;
	padding: 32px 28px;
}

.cba-package__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	margin-bottom: 18px;
}

.cba-package__title {
	font-size: 20px;
	margin: 0 0 14px;
}

.ticks--sm li {
	font-size: var(--cba-text);
	line-height: 1.6;
	padding-left: 20px;
}

.ticks--sm li::before {
	width: 6px;
	height: 6px;
	top: 8px;
}

/* ============ cta — dải kêu gọi ============ */

.cba-cta {
	padding-top: 64px;
	padding-bottom: 64px;
}

.cba-cta__panel {
	background: linear-gradient(135deg, var(--cba-secondary), var(--cba-primary));
	border-radius: 26px;
	padding: 52px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
	color: #fff;
}

.cba-cta__title {
	position: relative;
	z-index: 1;
	font-size: 30px;
	line-height: 1.25;
	margin: 0;
	max-width: 640px;
	color: #fff;
}

/* Trên nền gradient đậm, từ nhấn giữ nguyên màu trắng — đổi sang màu nhấn là
   mất tương phản. */
.cba-cta__title em {
	color: #fff;
	font-style: italic;
}

.cba-cta__panel .cba-btn {
	position: relative;
	z-index: 1;
}

/* ============ pricing — bảng giá ============ */

.cba-pricing {
	padding-top: 12px;
	padding-bottom: 72px;
}

.cba-pricing__title,
.cba-pricing__rule,
.cba-pricing__grid {
	position: relative;
	z-index: 1;
}

.cba-pricing__title {
	font-size: 34px;
	text-align: center;
	margin: 0 0 8px;
}

.cba-pricing__rule {
	width: 60px;
	height: 3px;
	background: var(--cba-primary);
	border-radius: 2px;
	margin: 0 auto 40px;
}

.cba-pricing__grid {
	align-items: start;
}

.cba-plan {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: 22px;
	padding: 34px 28px;
	text-align: center;
	position: relative;
}

.cba-plan--featured {
	border: 2px solid var(--cba-primary);
	box-shadow: var(--cba-shadow-featured);
}

.cba-plan__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cba-primary);
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 5px 16px;
	border-radius: var(--cba-radius-pill);
	white-space: nowrap;
}

.cba-plan__name {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cba-primary);
	font-weight: 600;
	margin: 0 0 14px;
}

.cba-plan__price {
	font-family: var(--cba-font-display);
	font-size: 34px;
	color: var(--cba-ink);
	margin: 0;
	line-height: 1.2;
}

/* Gói nổi bật có giá dài hơn (kèm đơn vị thời gian) nên hạ cỡ để không xuống dòng. */
.cba-plan--featured .cba-plan__price {
	font-size: 26px;
}

.cba-plan__meta {
	font-size: 14px;
	color: var(--cba-secondary);
	font-weight: 500;
	margin: 4px 0 22px;
}

.cba-plan__features {
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 11px;
	text-align: left;
}

.cba-plan__features li {
	font-size: var(--cba-text);
	line-height: 1.55;
	color: var(--cba-muted-soft);
	padding-bottom: 11px;
	border-bottom: 1px solid var(--cba-blush);
}

.cba-plan__features li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cba-plan .cba-btn {
	padding: 13px;
	font-size: 14.5px;
}

.cba-plan .cba-btn--ghost {
	color: var(--cba-secondary);
}

/* ============ form — khối biểu mẫu ============ */

.cba-form {
	padding-top: 72px;
	padding-bottom: 72px;
	scroll-margin-top: 80px;
}

.cba-form--photo {
	background: var(--cba-ink);
}

.cba-form__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.28;
	pointer-events: none;
}

.cba-form__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

/* Không có cột giới thiệu (hai trang đăng ký): thẻ biểu mẫu đứng giữa trang,
   rộng vừa phải, và nút gửi trải hết bề ngang — đúng bản thiết kế tĩnh. */
.cba-form--solo .cba-form__inner {
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}

.cba-form--solo .cba-form__card .ff-btn-submit {
	width: 100%;
}

.cba-form--photo .cba-form__intro {
	color: #fff;
}

.cba-form--photo .cba-form__title {
	color: #fff;
}

/* cba_heading() sinh <em> cho *từ nhấn*, mà `h2 em` ở main.css đặt màu THẲNG
   lên <em> nên thắng màu trắng thừa kế từ tiêu đề. Không có dòng này thì từ nhấn
   ra màu mận đậm trên nền ảnh tối. Giống hệt ca đã xử lý ở .cba-cta__title em. */
.cba-form--photo .cba-form__title em {
	color: #fff;
	font-style: italic;
}

.cba-form--photo .cba-form__note {
	color: #e8d3d8;
}

.cba-form--photo .cba-eyebrow--plain {
	color: var(--cba-rose-pale);
}

.cba-form__title {
	font-size: 38px;
	line-height: 1.2;
	margin: 0 0 18px;
}

.cba-form__note {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cba-muted-soft);
	margin: 0;
	max-width: 420px;
}

.cba-form__card {
	background: var(--cba-surface);
	border-radius: 22px;
	padding: 34px 32px;
	box-shadow: var(--cba-shadow-overlay);
}

/* Fluent Forms dựng markup riêng; kéo nó về đúng tông thay vì để lộ giao diện
   mặc định của plugin. */
.cba-form__card .ff-el-input--label label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cba-muted-soft);
}

.cba-form__card .ff-btn-submit {
	background: var(--cba-primary);
	border-color: var(--cba-primary);
	border-radius: var(--cba-radius-pill);
	padding: 14px 30px;
	font-weight: 500;
}

.cba-form__card .ff-btn-submit:hover {
	background: var(--cba-secondary);
	border-color: var(--cba-secondary);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
	.cba-hero__inner,
	.cba-intro__inner,
	.cba-story--band .cba-story__inner,
	.cba-video__inner,
	.cba-consult__inner,
	.cba-form__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cba-hero__title {
		font-size: 42px;
	}

	.cba-hero__badge {
		left: 16px;
	}

	.cba-consult__media {
		position: static;
	}

	.cba-story--mission .cba-story__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cba-story--mission .cba-story__media {
		position: static;
	}

	.cba-hero-mission__title {
		font-size: 40px;
	}

	.cba-intro__title,
	.cba-consult__title,
	.cba-form__title {
		font-size: 30px;
	}

	.cba-story__title {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
	.cba-hero {
		padding-top: 36px;
	}

	.cba-hero-mission {
		height: 300px;
	}

	.cba-hero-mission__title {
		font-size: 28px;
	}

	.cba-hero__title {
		font-size: 34px;
	}

	/* Vòm hero thu lại: bán kính 230px trên khung hẹp nuốt gần hết ảnh. */
	.cba-hero__photo {
		border-radius: 140px 140px 20px 20px;
	}

	.cba-cta__panel {
		padding: 36px 26px;
	}

	.cba-cta__title {
		font-size: 24px;
	}

	.cba-form__card {
		padding: 26px 20px;
	}

	.cba-package {
		padding: 26px 22px;
	}
}

.cba-form__card-title {
	font-size: 24px;
	margin: 0 0 20px;
}

/* =============================================================================
   TRANG WEBINAR — 10 section, port từ 24-webinar.css.
   ========================================================================== */

/* ============ hero-webinar ============ */

.cba-hero-webinar {
	position: relative;
	overflow: hidden;
	background: var(--cba-ink);
}

.cba-hero-webinar__bg,
.cba-hero-webinar__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Lớp phủ là bắt buộc, không phải trang trí: chữ trắng trên vùng sáng của ảnh
   tụt xuống dưới ngưỡng đọc được nếu bỏ nó đi. */
.cba-hero-webinar__veil {
	position: absolute;
	inset: 0;
	/* Nửa sau của gradient phải ĐI QUA token: --cba-secondary do mu-plugin bơm
	   theo màu chủ site nhập trong admin, viết cứng rgba(143,58,82) thì đổi màu
	   thương hiệu xong hero vẫn giữ tông mận cũ. Dòng đầu là bản dự phòng cho
	   trình duyệt chưa hỗ trợ color-mix. */
	background: linear-gradient(120deg, rgba(46, 35, 40, 0.86), rgba(143, 58, 82, 0.62));
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--cba-ink) 86%, transparent),
		color-mix(in srgb, var(--cba-secondary) 62%, transparent)
	);
}

.cba-hero-webinar__inner {
	position: relative;
	padding-top: 76px;
	padding-bottom: 72px;
	color: #fff;
	text-align: center;
}

.cba-hero-webinar__logo img {
	margin: 0 auto 24px;
	max-height: 96px;
	width: auto;
}

.cba-hero-webinar__lead {
	font-family: var(--cba-font-display);
	font-size: 30px;
	line-height: 1.45;
	margin: 0 auto 34px;
	max-width: 860px;
	color: #fff;
	font-weight: 500;
}

.cba-hero-webinar__lead strong,
.cba-hero-webinar__lead em {
	color: var(--cba-rose-pale);
	font-style: italic;
	font-weight: inherit;
}

.cba-hero-webinar__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	align-items: center;
	margin-bottom: 32px;
}

.cba-fact {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 14px;
	padding: 14px 22px;
	text-align: left;
}

.cba-fact__label {
	display: block;
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var(--cba-rose-pale);
}

.cba-fact__value {
	display: block;
	font-size: 16px;
	font-weight: 500;
	margin-top: 3px;
}

.cba-hero-webinar__special {
	max-width: 760px;
	margin: 0 auto;
	font-size: 15.5px;
	line-height: 1.75;
	color: #f0d9de;
}

.cba-hero-webinar__special p {
	margin: 0;
	display: inline;
}

.cba-hero-webinar__special-label {
	font-weight: 600;
	color: #fff;
}

.cba-hero-webinar__special strong {
	color: var(--cba-rose-pale);
}

.cba-hero-webinar__portrait {
	position: absolute;
	right: 4%;
	bottom: 0;
	width: 320px;
	z-index: 1;
}

.cba-hero-webinar__portrait img {
	width: 100%;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

/* ============ pain-points ============ */

.cba-pain__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 44px;
	align-items: center;
}

.cba-pain__media {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	box-shadow: var(--cba-shadow-lift);
	margin: 0;
}

.cba-pain__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-pain__title {
	font-size: 34px;
	margin: 0 0 26px;
}

.cba-pain__list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	gap: 12px;
}

.cba-pain__list li {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: 14px;
	padding: 14px 22px;
	font-size: 16px;
	color: var(--cba-secondary);
}

.cba-pain__text {
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--cba-muted-soft);
}

/* ============ cards — dành cho ai / kết quả ============ */

.cba-cards--outcomes .cba-section-head__title {
	font-size: 32px;
	line-height: 1.4;
	max-width: 900px;
	/* Khớp bản tĩnh: max-width không có margin auto thì khối lệch trái. */
	margin-inline: auto;
}

.cba-cards--outcomes .card__title {
	font-size: 18px;
	line-height: 1.35;
	color: var(--cba-secondary);
}

.cba-cards__note {
	margin: 30px auto 0;
	max-width: 780px;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cba-muted);
	background: var(--cba-blush);
	border-radius: 14px;
	padding: 18px 24px;
}

/* ============ team — giới thiệu huấn luyện viên ============ */

.cba-coach__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 48px;
	align-items: start;
}

.cba-coach__media {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--cba-shadow-lift);
}

.cba-coach__media img {
	width: 100%;
}

.cba-coach__title {
	font-size: 34px;
	margin: 0 0 6px;
}

.cba-coach__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--cba-secondary);
	margin: 0 0 4px;
}

.cba-coach__role {
	font-family: var(--cba-font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--cba-primary);
	margin: 0 0 22px;
}

.cba-coach__stats {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 26px 0 0;
}

.cba-coach__stats li {
	background: var(--cba-blush);
	color: var(--cba-secondary);
	font-weight: 600;
	font-size: 14.5px;
	border-radius: var(--cba-radius-pill);
	padding: 12px 22px;
}

/* ============ journey ============ */

.cba-journey__list {
	list-style: none;
	counter-reset: journey;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cba-journey__step {
	counter-increment: journey;
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	padding: 30px 28px;
	position: relative;
}

.cba-journey__step::before {
	content: counter(journey);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cba-primary);
	color: #fff;
	font-family: var(--cba-font-display);
	font-size: 18px;
	margin-bottom: 18px;
}

.cba-journey__media {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin-bottom: 18px;
}

.cba-journey__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cba-journey__step-title {
	font-size: 17px;
	line-height: 1.35;
	color: var(--cba-secondary);
	margin: 0 0 10px;
}

.cba-journey__text {
	font-size: var(--cba-text);
	line-height: 1.65;
	color: var(--cba-muted-soft);
	margin: 0;
}

/* ============ recap ============ */
/* BEGIN recap CTA — centered facts+buy (design.dc); petals decorative left */

.cba-recap {
	position: relative;
	overflow: hidden;
}

.cba-recap__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

.cba-recap__media {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	width: min(280px, 28vw);
	max-width: 280px;
	pointer-events: none;
	opacity: 0.92;
	z-index: 0;
}

.cba-recap__media img {
	width: 100%;
	height: auto;
	display: block;
}

.cba-recap__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.cba-recap__facts {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.cba-recap__facts li {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: var(--cba-text);
	line-height: 1.4;
	color: #fff;
}

.cba-recap__buy {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cba-recap__buy-label {
	margin: 0 0 18px;
	font-family: var(--cba-font-display);
	font-size: 24px;
	line-height: 1.3;
	color: var(--cba-rose-pale);
}

@media (max-width: 720px) {
	.cba-recap__media {
		display: none;
	}

	.cba-recap__inner {
		min-height: 0;
	}

	.cba-recap__buy-label {
		font-size: 20px;
	}
}

/* END recap CTA */

/* ============ testimonials ============ */

.cba-testimonials .cba-section-head {
	max-width: 820px;
	margin-inline: auto;
}

.cba-testimonials .cba-section-head__subtitle {
	font-size: 16px;
	line-height: 1.8;
	max-width: 820px;
}

.cba-testimonial {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.cba-testimonial__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cba-surface-soft, #f3eef1);
}

.cba-testimonial__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cba-testimonial__quote {
	margin: 0;
	padding: 20px 22px 12px;
	font-size: var(--cba-text);
	line-height: 1.7;
	color: var(--cba-muted-soft);
}

.cba-testimonial__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 22px 22px;
	font-size: 14px;
}

.cba-testimonial__avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.cba-testimonial__role {
	display: block;
	color: var(--cba-muted);
	font-size: 13px;
}

/* ============ faq ============ */

.cba-faq .cba-section-head {
	max-width: 900px;
	margin-inline: auto;
}

.cba-faq__group {
	border: 1px solid var(--cba-hairline);
	border-radius: 14px;
	background: var(--cba-surface);
	margin-bottom: 12px;
	padding: 4px 22px;
}

.cba-faq__question {
	cursor: pointer;
	font-family: var(--cba-font-display);
	font-size: 17px;
	color: var(--cba-secondary);
	padding: 16px 0;
	list-style: none;
}

/* Bỏ mũi tên mặc định của trình duyệt rồi tự vẽ, để dấu hiệu đóng mở nhất quán
   giữa Safari và các trình duyệt khác. */
.cba-faq__question::-webkit-details-marker {
	display: none;
}

.cba-faq__question::after {
	content: "+";
	float: right;
	color: var(--cba-primary);
	font-size: 22px;
	line-height: 1;
}

.cba-faq__group[open] .cba-faq__question::after {
	content: "–";
}

.cba-faq__answer {
	padding: 0 0 18px;
}

/* ============ coach-contact ============ */

.cba-contact__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	padding: 28px 32px;
}

.cba-contact__media img {
	width: 120px;
	height: 120px;
	border-radius: 14px;
	object-fit: cover;
}

.cba-contact__name {
	font-family: var(--cba-font-display);
	font-size: 22px;
	color: var(--cba-secondary);
	margin: 0 0 4px;
}

.cba-contact__role {
	font-size: var(--cba-text);
	color: var(--cba-muted);
	margin: 0 0 12px;
}

.cba-contact__label {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--cba-primary);
	margin: 0 0 6px;
}

.cba-contact__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 6px;
	font-size: var(--cba-text);
	color: var(--cba-muted-soft);
}

/* ============ RESPONSIVE — Webinar ============ */

/* Mốc 900 dùng đúng một việc, y như bản gốc: ảnh chân dung ở hero đè lên chữ
   khi khung hẹp lại, nên giấu nó đi. */
@media (max-width: 900px) {
	.cba-hero-webinar__portrait {
		display: none;
	}
}

@media (max-width: 1024px) {
	.cba-pain__inner,
	.cba-coach__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cba-journey__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.cba-hero-webinar__lead {
		font-size: 25px;
	}
}

@media (max-width: 768px) {
	.cba-journey__list {
		grid-template-columns: 1fr;
	}

	.cba-hero-webinar__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.cba-hero-webinar__lead {
		font-size: 21px;
	}

	.cba-pain__title,
	.cba-coach__title {
		font-size: 26px;
	}

	.cba-contact__inner {
		padding: 22px 20px;
	}
}

/* ============ KHU VỰC BÀI VIẾT ============

   Dùng cho trang Chia sẻ, trang chuyên mục, kết quả tìm kiếm và bài viết chi
   tiết. Bản thiết kế xếp danh sách bên trái, cột widget hẹp bên phải; chưa xếp
   widget nào thì .cba-archive__inner--wide thu về một cột (xem sidebar.php). */

.cba-archive__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}

.cba-archive__inner--wide {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}

.cba-archive__list {
	display: grid;
	gap: 20px;
}

.cba-archive__empty {
	margin: 0;
	padding: 40px 28px;
	background: var(--cba-surface);
	border-radius: var(--cba-radius-card);
	box-shadow: var(--cba-shadow-card);
	color: var(--cba-muted);
	text-align: center;
}

/* --- thẻ bài viết --- */

.cba-post-card {
	display: grid;
	grid-template-columns: 150px 64px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 18px;
	background: var(--cba-surface);
	border-radius: var(--cba-radius-card);
	box-shadow: var(--cba-shadow-card);
}

/* Không có ảnh đại diện thì đừng chừa cột trống. */
.cba-post-card:not(:has(.cba-post-card__media)) {
	grid-template-columns: 64px minmax(0, 1fr);
}

.cba-post-card__media {
	display: block;
	overflow: hidden;
	border-radius: 12px;
}

.cba-post-card__media img {
	display: block;
	width: 100%;
	height: 130px;
	object-fit: cover;
}

.cba-post-card__date {
	margin: 0;
	padding: 10px 6px;
	background: var(--cba-blush);
	border-radius: 12px;
	color: var(--cba-primary);
	text-align: center;
	line-height: 1.2;
}

.cba-post-card__day {
	display: block;
	font-family: var(--cba-font-display);
	font-size: 22px;
	font-weight: 600;
}

.cba-post-card__month {
	display: block;
	font-size: 12px;
}

.cba-post-card__title {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.35;
}

.cba-post-card__title a {
	color: var(--cba-ink);
	text-decoration: none;
}

.cba-post-card__title a:hover,
.cba-post-card__title a:focus-visible {
	color: var(--cba-primary);
}

.cba-post-card__excerpt {
	color: var(--cba-muted);
	font-size: var(--cba-text);
}

.cba-post-card__excerpt p {
	margin: 0;
}

/* --- cột widget --- */

.cba-widget {
	margin-bottom: 20px;
	padding: 20px 22px;
	background: var(--cba-surface);
	border-radius: var(--cba-radius-card);
	box-shadow: var(--cba-shadow-card);
}

.cba-widget__title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cba-hairline);
	font-size: 17px;
}

.cba-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: var(--cba-text);
}

.cba-widget a {
	color: var(--cba-ink);
	text-decoration: none;
}

.cba-widget a:hover,
.cba-widget a:focus-visible {
	color: var(--cba-primary);
}

.cba-widget .post-date,
.cba-widget .rss-date {
	display: block;
	color: var(--cba-muted);
	font-size: 13px;
}

/* --- bài viết chi tiết --- */

.cba-single {
	padding: 32px;
	background: var(--cba-surface);
	border-radius: var(--cba-radius-card);
	box-shadow: var(--cba-shadow-card);
}

.cba-single__meta {
	margin: 12px 0 0;
	color: var(--cba-muted);
	font-size: 14px;
	text-align: center;
}

.cba-single__media {
	margin: 0 0 24px;
}

.cba-single__content > :first-child {
	margin-top: 0;
}

.cba-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.post-navigation {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--cba-hairline);
	display: grid;
	gap: 12px;
	font-size: 15px;
}

.post-navigation span {
	display: block;
	color: var(--cba-muted);
	font-size: 13px;
}

.pagination {
	margin-top: 8px;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 10px;
	background: var(--cba-surface);
	border-radius: 10px;
	color: var(--cba-ink);
	text-align: center;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--cba-primary);
	color: #fff;
}

@media (max-width: 1024px) {
	.cba-archive__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.cba-post-card {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	/* Ảnh chuyển lên trên, trải hết bề ngang thẻ. */
	.cba-post-card__media {
		grid-column: 1 / -1;
	}

	.cba-post-card__media img {
		height: 180px;
	}

	.cba-single {
		padding: 22px;
	}
}

/* Đám mây thẻ: WordPress gán font-size riêng cho từng thẻ theo số bài, cho ra
   chữ to nhỏ lộn xộn. Bản thiết kế vẽ chúng thành các viên thuốc đều nhau, nên
   phải !important — kích cỡ kia nằm ở thuộc tính style inline. */
.cba-widget .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cba-widget .tagcloud a {
	padding: 6px 12px;
	background: var(--cba-blush);
	border-radius: var(--cba-radius-pill);
	color: var(--cba-primary);
	font-size: 13px !important;
	text-decoration: none;
}

.cba-widget .tagcloud a:hover,
.cba-widget .tagcloud a:focus-visible {
	background: var(--cba-rose-pale);
}

/* ============ TRANG WOOCOMMERCE ============

   WooCommerce mang sẵn stylesheet riêng; ở đây chỉ chỉnh những chỗ nó đụng vào
   ngôn ngữ thiết kế: nút, giá, và thẻ sản phẩm trên trang Cửa hàng. */

.cba-woo .woocommerce-breadcrumb {
	margin-bottom: 18px;
	color: var(--cba-muted);
	font-size: 14px;
}

.cba-woo .woocommerce-breadcrumb a {
	color: var(--cba-muted);
}

.cba-woo h1.page-title,
.cba-woo .product_title {
	font-family: var(--cba-font-display);
	font-size: 32px;
	margin: 0 0 16px;
}

.cba-woo ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cba-font-display);
	font-size: 19px;
}

/* Độ đặc hiệu phải đủ cao: WooCommerce đặt màu giá bằng MÃ MÀU CỨNG #958e09
   (ô liu) trong luật `.woocommerce div.product p.price`, không qua biến --wc-*,
   nên trỏ lại biến không ăn thua. Thêm .cba-section vào đầu để vượt qua nó thay
   vì dùng !important. */
.cba-woo .price,
.cba-woo ul.products li.product .price,
.cba-section.cba-woo div.product p.price,
.cba-section.cba-woo div.product span.price,
.cba-section.cba-woo ul.products li.product .price {
	color: var(--cba-primary);
	font-weight: 600;
}

.cba-woo .price del {
	color: var(--cba-muted);
	font-weight: 400;
}

/* Nút của WooCommerce dùng lại hình dáng nút của theme.
   Phải kể cả `.woocommerce` chứ không riêng `.cba-woo`: trang Tài khoản và
   trang Thông tin tài khoản dựng bằng shortcode nên đi qua singular.php, KHÔNG
   qua hook woocommerce_before_main_content — chúng không có lớp .cba-woo, mà
   shortcode thì luôn tự bọc trong <div class="woocommerce">. Không có nhánh này
   thì nút "Đăng nhập" ra màu xám mặc định.
   `input#submit.submit` là nút gửi của khung bình luận WordPress, dùng lại cho
   form đánh giá sản phẩm — nó không mang class .button nào. */
.cba-woo .button,
.cba-woo button.button,
.cba-woo input.button,
.cba-woo a.button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.cba-woo input#submit.submit,
.woocommerce input#submit.submit,
.comment-form #submit.submit {
	background: var(--cba-primary);
	color: #fff;
	border: 0;
	border-radius: var(--cba-radius-pill);
	padding: 11px 22px;
	font-weight: 500;
	cursor: pointer;
}

.cba-woo .button:hover,
.cba-woo button.button:hover,
.cba-woo input.button:hover,
.cba-woo a.button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.cba-woo input#submit.submit:hover,
.woocommerce input#submit.submit:hover,
.comment-form #submit.submit:hover {
	background: var(--cba-secondary);
	color: #fff;
}

/* WooCommerce 10 đặt `.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
   #respond input#submit` nền #e9e6ed. :where() không cộng specificity nhưng hai ID
   (#respond + #submit) cho (2,1,1) — thắng `.comment-form #submit.submit` (1,2,0)
   và `.woocommerce input#submit.submit` (1,2,1). Nút "Gửi đi" của form đánh giá
   không mang .button, chỉ id="submit" class="submit". Gọi đúng ID, không đụng
   các .button khác. */
#respond input#submit.submit,
#review_form #respond input#submit {
	background: var(--cba-primary);
	color: #fff;
	border: 0;
	border-radius: var(--cba-radius-pill);
	padding: 11px 22px;
	font-weight: 500;
	cursor: pointer;
}

#respond input#submit.submit:hover,
#review_form #respond input#submit:hover {
	background: var(--cba-secondary);
	color: #fff;
}

/* Nút chính của trang sản phẩm mang thêm class .alt, vốn có nền riêng của
   WooCommerce (tím xanh) và thắng luật .button ở trên — phải gọi tên nó. */
.cba-woo .button.alt,
.cba-woo button.button.alt,
.cba-woo .single_add_to_cart_button {
	background: var(--cba-primary);
	color: #fff;
}

.cba-woo .button.alt:hover,
.cba-woo button.button.alt:hover,
.cba-woo .single_add_to_cart_button:hover {
	background: var(--cba-secondary);
	color: #fff;
}

/* Tutor LMS dựng trang khoá học bằng template của chính nó, ngoài mọi hook của
   WooCommerce, nên nút "Thêm vào giỏ hàng" ở đó là .tutor-btn-primary — màu xanh
   mặc định của Tutor, lạc hẳn giữa trang. */
.tutor-btn.tutor-btn-primary {
	background-color: var(--cba-primary);
	border-color: var(--cba-primary);
	color: #fff;
}

.tutor-btn.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:focus {
	background-color: var(--cba-secondary);
	border-color: var(--cba-secondary);
	color: #fff;
}

.cba-woo ul.products li.product img {
	border-radius: var(--cba-radius-card);
}

/* Nhãn "Giảm giá!": WooCommerce đặt nền #958e09 cứng trong luật `span.onsale`,
   nên phải khớp đúng thẻ span mới thắng được. */
.cba-woo span.onsale,
.woocommerce span.onsale {
	background-color: var(--cba-secondary);
	border-radius: var(--cba-radius-pill);
	color: #fff;
}


/* ============ ĐIỆN THOẠI: TRANG PLUGIN ============ */

@media (max-width: 600px) {
	/* WooCommerce xếp hai sản phẩm một hàng ở bề ngang này. Với tên khoá học
	   tiếng Việt dài, thẻ bị bóp đến mức tên xuống ba dòng và nút "Thêm vào giỏ
	   hàng" xuống hai dòng, cao thấp lệch nhau giữa hai thẻ. Một cột đọc gọn hơn
	   hẳn, và cửa hàng này chỉ có hai sản phẩm. */
	.cba-woo ul.products,
	.woocommerce ul.products {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Thêm .type-product để vượt luật `li.product{width:48%}` của
	   woocommerce-smallscreen.css — file đó nạp SAU stylesheet theme nên cùng độ
	   đặc hiệu là nó thắng, và thẻ chỉ rộng 48% cột dù lưới đã một cột. */
	.cba-woo ul.products li.product.type-product,
	.woocommerce ul.products li.product.type-product {
		width: 100%;
		margin: 0;
		float: none;
	}
}

@media (max-width: 768px) {
	/* Hàng thông tin đầu trang khoá học của Tutor là hai cột: cột trái là chuyên
	   mục, cột phải co theo hai nút Yêu thích và Chia sẻ. Ở bề ngang điện thoại
	   cột phải chiếm gần hết, ép cột trái còn khoảng 40px nên "Chuyên mục chưa
	   phân loại" xuống mỗi dòng một chữ. Xếp chồng hai cột lại. */
	.tutor-course-details-top .tutor-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.tutor-course-details-top .tutor-col,
	.tutor-course-details-top .tutor-col-auto {
		width: 100%;
		flex: none;
		max-width: 100%;
	}
}

/* --- khối block của WooCommerce (giỏ hàng, "Mới trong cửa hàng") ---

   Trang Giỏ hàng và Thanh toán dựng bằng BLOCK, không phải shortcode, nên chúng
   không mang class .woocommerce và không nhận luật nút ở trên. Nút của block là
   .wp-block-button__link, mặc định đen. */

.wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-cart .wp-block-button__link {
	background-color: var(--cba-primary);
	color: #fff;
	border-radius: var(--cba-radius-pill);
}

.wp-block-button__link.add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-cart .wp-block-button__link:hover {
	background-color: var(--cba-secondary);
	color: #fff;
}

/* Nhãn khuyến mại của khối block là <div>, KHÔNG phải <span> như bản shortcode —
   dễ nhầm vì hai nơi cùng một ý nghĩa. Luật thắng của WooCommerce có hai class,
   nên phải viết đủ tổ tiên rồi thêm tên thẻ mới vượt được. */
.wc-block-grid__product div.wc-block-grid__product-onsale,
.wc-block-grid__product-image div.wc-block-grid__product-onsale,
div.wc-block-grid__product-onsale {
	background: var(--cba-secondary);
	border-color: var(--cba-secondary);
	border-radius: var(--cba-radius-pill);
	color: #fff;
}

.wc-block-grid__product-title {
	font-family: var(--cba-font-display);
}

.wc-block-grid__product-price .woocommerce-Price-amount {
	color: var(--cba-primary);
}

/* ============ BỐ CỤC TRANG SẢN PHẨM VÀ CỬA HÀNG ============

   Bản tĩnh: src/theme/assets/css/26-product.css và 22-courses-archive.css.
   WooCommerce giữ markup của nó; ở đây chỉ xếp lại thành lưới hai cột, thẻ
   bo góc, và giá Lora — đúng ngôn ngữ thị giác đã duyệt. */

.cba-woo div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: start;
	padding: 48px 0;
}

.woocommerce .cba-section.cba-woo div.product div.woocommerce-product-gallery,
.woocommerce .cba-section.cba-woo div.product div.images,
.woocommerce .cba-section.cba-woo div.product div.summary,
.woocommerce .cba-section.cba-woo div.product .product-gallery,
.woocommerce .cba-section.cba-woo div.product .product-summary {
	float: none;
	width: 100%;
	max-width: none;
}

.cba-woo div.product .woocommerce-product-gallery,
.cba-woo div.product .product-gallery {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--cba-shadow-lift);
	margin: 0;
}

.cba-woo div.product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
}

.cba-woo span.onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
}

.cba-woo div.product .summary,
.cba-woo div.product .product-summary {
	margin: 0;
}

.cba-woo .product_title {
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.cba-woo div.product p.price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 24px;
	font-family: var(--cba-font-display);
	font-size: 26px;
}

.cba-woo div.product p.price del {
	font-size: 14px;
	font-family: var(--cba-font-body);
}

.cba-woo div.product form.cart {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.cba-woo .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-field);
	overflow: hidden;
	background: var(--cba-surface);
}

.cba-woo .quantity .qty {
	width: 64px;
	border: 0;
	text-align: center;
	padding: 12px 4px;
	background: transparent;
	color: var(--cba-ink);
}

.cba-woo div.product .product_meta {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--cba-hairline);
	font-size: 14px;
	color: var(--cba-muted);
}

.cba-woo div.product .woocommerce-tabs,
.cba-woo div.product .related.products,
.cba-woo div.product .up-sells {
	grid-column: 1 / -1;
}

.cba-woo .woocommerce-tabs {
	padding-bottom: 48px;
	max-width: 760px;
}

.cba-woo .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	padding: 0;
	margin: 0 0 20px;
	list-style: none;
	border-bottom: 1px solid var(--cba-hairline);
}

.cba-woo .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.cba-woo .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 12px;
	font-size: 15px;
	color: var(--cba-muted-soft);
	border-bottom: 2px solid transparent;
}

.cba-woo .woocommerce-tabs ul.tabs li.active a {
	color: var(--cba-primary);
	border-bottom-color: var(--cba-primary);
}

.cba-woo .woocommerce-Tabs-panel h2 {
	font-size: 26px;
	margin: 0 0 14px;
}

.cba-woo .woocommerce-Tabs-panel,
.cba-woo .woocommerce-product-details__short-description,
.cba-woo div.product .summary .woocommerce-product-details__short-description {
	font-size: var(--cba-text);
	line-height: 1.75;
}

/* ============ courses-grid — Học online ============
   Port từ src/theme/assets/css/22-courses-archive.css. */

.cba-courses__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 28px;
}

.cba-courses__sort {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: auto;
	max-width: 100%;
	font-size: var(--cba-text);
	color: var(--cba-muted-soft);
}

.cba-courses__sort select {
	width: auto;
	min-width: 280px;
	max-width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--cba-border-soft);
	border-radius: 10px;
	font-size: var(--cba-text);
	color: var(--cba-muted-soft);
	background: var(--cba-surface);
}

.cba-course-card {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cba-course-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
	background: var(--cba-blush);
	flex-shrink: 0;
}

.cba-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cba-course-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cba-course-card__title {
	font-size: 21px;
	margin: 0 0 10px;
	line-height: 1.3;
}

.cba-course-card__title a {
	color: var(--cba-ink);
}

.cba-course-card__title a:hover {
	color: var(--cba-primary);
}

.cba-course-card__author {
	font-size: 13.5px;
	color: #8a747a;
	margin: 0 0 18px;
}

.cba-course-card__price {
	margin: auto 0 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	font-family: var(--cba-font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--cba-primary);
	line-height: 1.2;
}

.cba-course-card__price del {
	font-family: var(--cba-font-body);
	font-size: 14px;
	font-weight: 400;
	color: #a99097;
}

.cba-course-card__price ins {
	text-decoration: none;
}

.cba-course-card .cba-btn {
	align-self: stretch;
	text-align: center;
}

.cba-course-card--empty {
	border: 1px dashed var(--cba-border-soft);
	background: transparent;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	text-align: center;
}

.cba-course-card--empty .cba-course-card__body {
	justify-content: center;
	align-items: center;
	padding: 32px 24px;
}

.cba-course-card--empty .cba-course-card__title {
	font-style: italic;
	font-size: 20px;
	color: var(--cba-primary);
	margin: 0 0 8px;
}

.cba-course-card--empty .card__text {
	font-size: var(--cba-text);
	color: #8a747a;
	margin: 0;
	max-width: 240px;
}

@media (max-width: 1024px) {
	.cba-courses .grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.cba-courses .grid--3 {
		grid-template-columns: 1fr;
	}

	.cba-courses__toolbar {
		justify-content: stretch;
	}

	.cba-courses__sort,
	.cba-courses__sort select {
		width: 100%;
		min-width: 0;
	}
}

/* Cửa hàng: mỗi sản phẩm một thẻ như .course-card của bản tĩnh. */
.cba-woo .woocommerce-products-header {
	text-align: center;
	padding: 24px 0 8px;
}

.cba-woo .woocommerce-products-header .page-title {
	font-size: 44px;
	margin: 0;
}

.cba-woo .shop-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding-top: 24px;
	padding-bottom: 48px;
}

.cba-woo .shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 96px;
}

.cba-woo .shop-sidebar .cba-widget__title {
	font-size: 16px;
	margin: 0 0 12px;
}

.cba-woo .shop-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cba-woo .shop-sidebar li {
	padding: 6px 0;
	border-bottom: 1px solid var(--cba-hairline);
	font-size: 14px;
}

.cba-woo .shop-sidebar .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
}

/* Woo dùng jQuery UI slider, mặc định tím #a46497 — lệch tông hồng-mận. */
.cba-woo .shop-sidebar .ui-slider .ui-slider-range,
.cba-woo .shop-sidebar .ui-widget-header,
.cba-woo .price_slider .ui-slider-range {
	background-color: var(--cba-primary);
	border: 0;
}

.cba-woo .shop-sidebar .ui-slider .ui-slider-handle,
.cba-woo .price_slider .ui-slider-handle {
	background-color: var(--cba-primary);
	border-color: var(--cba-primary);
	box-shadow: none;
}

.cba-woo ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 28px 0 48px;
}

.cba-woo ul.products::before,
.cba-woo ul.products::after {
	content: none;
	display: none;
}

.cba-woo ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.cba-woo ul.products li.product a img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

.cba-woo ul.products li.product .woocommerce-loop-product__title {
	font-size: 21px;
	line-height: 1.3;
	padding: 24px 24px 0;
	margin: 0 0 10px;
}

.cba-woo ul.products li.product .price {
	padding: 0 24px;
	margin: 0 0 18px;
	font-family: var(--cba-font-display);
	font-size: 26px;
}

.cba-woo ul.products li.product .button {
	margin: auto 24px 24px;
	text-align: center;
}

/* Giỏ hàng / thanh toán (Woo blocks).
   Bản tĩnh: checkout-layout 1.4fr / 0.6fr, gap 44px. Woo mặc định width 65% +
   padding-right ~4.5% làm khoảng giữa hai cột quá rộng, và bước có số thứ tự
   thụt trái 36px — đúng các khoảng "space?" trên bản live. */
.woocommerce-cart .cba-section,
.woocommerce-checkout .cba-section {
	padding-top: 36px;
	padding-bottom: 56px;
}

.woocommerce-cart .cba-singular__title,
.woocommerce-checkout .cba-singular__title,
.woocommerce-account .cba-singular__title {
	font-size: 36px;
	margin: 0 0 16px;
}

.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
	max-width: 100%;
	margin-inline: 0;
}

.woocommerce-cart .wc-block-components-sidebar-layout,
.woocommerce-checkout .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 0;
}

.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Form thanh toán không đóng khung; chỉ cột tóm tắt đơn hàng có thẻ. */
.wc-block-cart-items {
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	overflow: hidden;
	background: var(--cba-surface);
}

.woocommerce-checkout .wc-block-checkout__main {
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	order: 0;
}

.wp-block-woocommerce-cart-order-summary-block,
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	padding: 26px 24px;
	order: 1;
}

/* Bỏ số thứ tự bước — thụt 36px làm lệch mép trái so với ô nhập. */
.woocommerce-checkout .wc-block-components-checkout-step--with-step-number {
	padding: 0;
	margin: 0 0 28px;
}

.woocommerce-checkout .wc-block-components-checkout-step:first-child {
	margin-top: 0;
}

.woocommerce-checkout .wc-block-components-checkout-step__title::before {
	content: none;
	display: none;
}

.woocommerce-checkout .wc-block-components-checkout-step__heading-container {
	margin-bottom: 12px;
}

.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--cba-font-display);
	font-size: 22px;
	font-weight: 500;
	margin: 0;
}

.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-checkout__terms,
.woocommerce-checkout .wc-block-components-radio-control__description {
	font-size: var(--cba-text);
	line-height: 1.6;
}

@media (max-width: 900px) {
	.woocommerce-cart .wc-block-components-sidebar-layout,
	.woocommerce-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.woocommerce-checkout .wc-block-checkout__sidebar,
	.woocommerce-checkout .wc-block-components-sidebar {
		position: static;
		order: -1;
	}
}

/* ============ TRANG KHOÁ HỌC VÀ BÀI HỌC (Tutor LMS) ============

   Tutor cướp template_include nên hierarchy single-courses.php không chạy.
   Giữ markup của plugin (đăng ký, chương trình học, video) và chỉ đổi bố cục
   cho khớp bản tĩnh: src/theme/assets/css/25-course.css. */

.tutor-page-wrap {
	--tutor-color-primary: var(--cba-primary);
	--tutor-color-primary-rgb: 184, 80, 104;
	background: var(--cba-paper);
}

/* Avatar chữ cái của Tutor lấy --tutor-color-primary; vẫn gọi tên lớp để
   thắng luật nền xanh nếu biến chưa kịp lan. */
.tutor-avatar .tutor-avatar-text {
	background-color: var(--cba-primary);
	color: #fff;
}

/* Tutor cắt intro ở ~200px (class + style="height: 200px") rồi phủ :before
   linear-gradient trắng — chữ và bullet gần như tan trên nền giấy kem. Bản tĩnh
   hiện đủ intro, không fade, không nút "+ Hiển thị thêm". height:auto !important
   để thắng inline; ẩn overlay và control chỉ trên trang chi tiết khoá. */
.tutor-course-details-page .tutor-toggle-more-collapsed,
.tutor-course-details-content.tutor-toggle-more-collapsed {
	height: auto !important;
	overflow: visible;
}

.tutor-course-details-page .tutor-toggle-more-collapsed:before,
.tutor-course-details-content.tutor-toggle-more-collapsed:before {
	content: none;
	display: none;
	background: none;
}

.tutor-course-details-page .tutor-btn-show-more[data-tutor-toggle-more],
.tutor-course-details-tab .tutor-btn-show-more {
	display: none;
}

/* Danh sách trong phần giới thiệu: Tutor bọc .tutor-color-secondary; marker
   và chữ phải là mực/rose của theme, không phụ thuộc overlay đã tắt. */
.tutor-course-details-content,
.tutor-course-details-content .tutor-color-secondary,
.tutor-course-details-content .tutor-color-secondary p,
.tutor-course-details-content .tutor-color-secondary li,
.tutor-course-details-content ul,
.tutor-course-details-content li {
	color: var(--cba-ink);
}

.tutor-course-details-content ul {
	padding-left: 1.25em;
}

.tutor-course-details-content li::marker,
.tutor-course-details-content .tutor-color-secondary li::marker {
	color: var(--cba-primary);
}

.tutor-course-details-page.tutor-container {
	max-width: var(--cba-container);
	padding-top: 40px;
	padding-bottom: 72px;
}

.tutor-course-details-page h1,
.tutor-course-details-title h1,
.tutor-course-details-top h1 {
	font-family: var(--cba-font-display);
	font-size: 38px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--cba-ink);
}

.tutor-course-details-page img,
.tutor-course-thumbnail img,
.tutor-video-player {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--cba-shadow-lift);
}

.tutor-single-course-sidebar {
	position: sticky;
	top: 96px;
}

.tutor-card,
.tutor-single-course-sidebar-more,
.tutor-course-single-sidebar-wrapper {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	box-shadow: var(--cba-shadow-card);
}

.tutor-nav {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--cba-hairline);
	padding: 0;
	margin: 0 0 24px;
}

.tutor-nav-item a,
.tutor-nav-link {
	padding-bottom: 12px;
	font-size: 15px;
	color: var(--cba-muted-soft);
	border-bottom: 2px solid transparent;
}

.tutor-nav-item.is-active a,
.tutor-nav-item.is-active .tutor-nav-link,
.tutor-nav-link.is-active {
	color: var(--cba-primary);
	border-bottom-color: var(--cba-primary);
}

.tutor-accordion,
.tutor-course-content-list,
.tutor-accordion-item {
	border-color: var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	background: var(--cba-surface);
}

.tutor-accordion-item-header,
.tutor-course-content-list-item {
	background: var(--cba-blush);
	color: var(--cba-secondary);
	font-size: 17px;
}

.tutor-course-content-list-item-title,
.tutor-accordion-item-header {
	font-family: var(--cba-font-display);
}

.tutor-course-content-list-item a,
.tutor-course-content-list-item-title {
	color: var(--cba-ink);
}

.tutor-course-content-list-item a:hover {
	color: var(--cba-primary);
}

/* Bài học: khung hẹp, tiêu đề Lora — bản tĩnh page--lesson. */
.tutor-course-single-content-wrapper,
.tutor-lesson-single-main-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px var(--cba-gutter) 72px;
}

.tutor-course-single-content-wrapper h1,
.tutor-lesson-single-main-content h1 {
	font-family: var(--cba-font-display);
	font-size: 36px;
	margin: 0 0 24px;
}

.tutor-next-previous-pagination-wrap {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--cba-hairline);
	padding-top: 24px;
	margin-top: 32px;
}

/* ============ ĐIỆN THOẠI: BỐ CỤC SẢN PHẨM / KHOÁ HỌC ============ */

@media (max-width: 1024px) {
	.cba-woo div.product,
	.cba-woo .shop-layout,
	.tutor-course-details-page .tutor-row {
		grid-template-columns: 1fr;
	}

	.tutor-single-course-sidebar,
	.cba-woo .shop-sidebar {
		position: static;
	}

	.cba-woo .woocommerce-products-header .page-title {
		font-size: 36px;
	}
}

@media (max-width: 768px) {
	.cba-woo div.product {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 28px;
	}

	.cba-woo .product_title,
	.tutor-course-details-page h1,
	.tutor-course-details-title h1,
	.tutor-course-single-content-wrapper h1 {
		font-size: 28px;
	}

	.cba-woo .woocommerce-products-header .page-title {
		font-size: 26px;
	}

	.cba-woo ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.cba-woo .woocommerce-tabs ul.tabs,
	.tutor-nav {
		gap: 18px;
		overflow-x: auto;
	}

	.tutor-next-previous-pagination-wrap {
		flex-direction: column;
	}

	.wp-block-woocommerce-cart-order-summary-block,
	.wc-block-components-sidebar {
		position: static;
	}
}