/**
 * Trang chi tiết khóa học (sản phẩm).
 *
 * Viết lại gọn sau nhiều lần chỉnh chồng lên nhau: mỗi thành phần chỉ có một
 * quy tắc duy nhất, xếp theo thứ tự xuất hiện trên trang. Màu lấy từ biến của
 * theme nên đổi màu thương hiệu là cả trang đổi theo.
 */

/* ==========================================================================
   1. Bố cục chung
   ========================================================================== */

.single-product .row-main-single { margin-bottom: 1.5rem; }

/* ==========================================================================
   2. Cột ảnh
   ========================================================================== */

.single-product .main-thumbnail {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 10px;
	background: #fff;
}

.single-product .main-thumbnail > a,
.single-product .main-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-product .list-gallery-single a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 6px;
}

.single-product .list-gallery-single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   3. Cột thông tin: tiêu đề, bảng, nút đăng ký
   ========================================================================== */

.single-product .title-single-post {
	font-size: 30px;
	line-height: 1.3;
	margin-bottom: .75rem;
}

.single-product .div-sku-tt { color: #6b7280; font-size: 15px; }

/* Bảng thông tin: viền bo góc, mỗi dòng một biểu tượng */
.khoahoc-meta {
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.khoahoc-meta__row {
	display: grid;
	grid-template-columns: 190px 1fr;
	align-items: center;
}

.khoahoc-meta__row + .khoahoc-meta__row { border-top: 1px solid rgb(0 0 0 / 12%); }

.khoahoc-meta__label {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1rem 1.1rem;
	border-right: 1px solid rgb(0 0 0 / 12%);
	background: #fafafa;                       /* ô nhãn nền xám rất nhạt như mẫu */
	font-weight: 600;
	color: var(--secondary-color, #111827);
}

.khoahoc-meta__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgb(243 111 33 / 10%);
	color: var(--primary-color, #f36f21);
}

.khoahoc-meta__value {
	padding: 1rem 1.1rem;
	line-height: 1.75;
	background: #fff;
}

.khoahoc-cta { margin: 1.5rem 0 .5rem; text-align: center; }

.khoahoc-cta-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 8px;
	background: var(--primary-color, #f36f21);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.khoahoc-cta-btn:hover,
.khoahoc-cta-btn:focus-visible {
	background: #c9500c;
	color: #fff;
	box-shadow: 0 8px 20px rgb(243 111 33 / 35%);
	transform: translateY(-1px);
}

.khoahoc-cta-btn:active { transform: translateY(0); }

/* ==========================================================================
   4. Nội dung bài
   ========================================================================== */

/* Vùng nội dung: các hàng trong section là con của lưới .wrap-content nên bị co
   lại; cho chúng chiếm trọn hàng rồi mới giới hạn bề rộng đọc thoải mái. */
/* Chỉ các hàng phía dưới mới cần chiếm trọn; hàng đầu (ảnh + bảng thông tin)
   giữ nguyên hai cột như thiết kế, không đụng vào. */
.single-product > .row:not(.row-main-single),
.single-product > .kh-feedback {
	grid-column: 1 / -1;
	width: 100%;
}

.single-product .content-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.single-product .content-main p {
	line-height: 1.85;
	margin-bottom: 1.1rem;
	text-align: justify;
}

.single-product .content-main img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.single-product .content-main p:has(img) { text-align: center; }

.single-product .content-main h2 { font-size: 26px; line-height: 1.35; margin-bottom: 1rem; }
.single-product .content-main h3 { font-size: 22px; line-height: 1.4; }
.single-product .content-main > p strong { font-size: 20px; line-height: 1.5; }

/* danh sách trong bài: dấu tích cam */
.single-product .content-main ul { list-style: none; padding-left: 0; }

.single-product .content-main ul > li {
	position: relative;
	padding-left: 1.65rem;
	margin-bottom: .65rem;
	line-height: 1.8;
	text-align: justify;
}

.single-product .content-main ul > li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--primary-color, #f36f21);
	font-weight: 700;
}

/* ==========================================================================
   5. Nội dung khóa học: dropdown đóng/mở
   ========================================================================== */

.kh-noidung { margin: 1.25rem 0 2rem; border: 0; }

.kh-noidung .kh-item {
	margin-bottom: .75rem;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.kh-noidung .accordion-button {
	padding: 1.15rem 1.35rem;
	background: #fff;
	color: var(--secondary-color, #111827);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	box-shadow: none;
}

.kh-noidung .accordion-button:not(.collapsed) {
	background: linear-gradient(90deg, rgb(243 111 33 / 12%), rgb(243 111 33 / 3%));
	color: var(--primary-color, #f36f21);
}

.kh-noidung .accordion-button:focus {
	border-color: transparent;
	box-shadow: 0 0 0 .2rem rgb(243 111 33 / 20%);
}

.kh-noidung .kh-so {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: .8rem;
	border-radius: 50%;
	background: var(--primary-color, #f36f21);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.kh-noidung .accordion-body { padding: 1.35rem 1.5rem 1.1rem; }
.kh-noidung .accordion-body p { margin-bottom: 1.15rem; line-height: 1.9; text-align: justify; }
.kh-noidung .accordion-body li { margin-bottom: .8rem; line-height: 1.85; }

/* ==========================================================================
   6. Khối thông tin bổ sung (yêu cầu, dành cho ai, giảng viên)
   ========================================================================== */

.khoahoc-block { margin-bottom: 2rem; }
.khoahoc-block > h2 { font-size: 26px; margin-bottom: .9rem; }
.khoahoc-block ul { padding-left: 0; list-style: none; }
.khoahoc-block li { margin-bottom: .55rem; line-height: 1.75; }
/* Ảnh chân dung đều là ảnh dọc; khung vuông cắt từ giữa là mất đầu người.
   Lệch điểm cắt hẳn lên trên để giữ khuôn mặt. */
.khoahoc-giangvien img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	object-position: center 18%;
}

/* ==========================================================================
   7. Phản hồi học viên: băng chuyền ba thẻ, nút lùi/tới hai đầu
   ========================================================================== */

.kh-feedback {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem;
	margin: 1.5rem 0 2rem;
	padding: .5rem 0 1rem;
}

.kh-feedback__khung { overflow: hidden; padding: .5rem 0; }

.kh-feedback__track {
	display: flex;
	gap: 1.5rem;
	will-change: transform;
}

/* Nút lùi / tới hai đầu băng chuyền */
.kh-feedback__nut {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 50%;
	background: #fff;
	color: var(--secondary-color, #111827);
	box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.kh-feedback__nut:hover,
.kh-feedback__nut:focus-visible {
	border-color: var(--primary-color, #f36f21);
	background: var(--primary-color, #f36f21);
	color: #fff;
	transform: translateY(-1px);
}

.kh-feedback__nut[hidden] { display: none; }

/* Khi số phản hồi vừa đủ một khung thì không trượt, chỉ xếp ngang */
.kh-feedback--du-cho { grid-template-columns: minmax(0, 1fr); }

.kh-fb {
	position: relative;
	flex: 0 0 calc((100% - 3rem) / 3);
	margin: 0;
	padding: 1.5rem 1.6rem;
	border: 1px solid rgb(0 0 0 / 7%);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 22px rgb(0 0 0 / 6%);
}

.kh-fb__quote {
	position: absolute;
	top: 1.1rem;
	right: 1.3rem;
	color: rgb(0 0 0 / 22%);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.kh-fb__head { display: flex; align-items: flex-start; gap: 1rem; }

.kh-fb__avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.kh-fb__avatar--trong { background: rgb(243 111 33 / 12%); }

.kh-fb__info { display: flex; flex-direction: column; gap: .25rem; padding-right: 1.5rem; }
.kh-fb__name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.kh-fb__course { font-size: 14px; line-height: 1.45; color: #4b5563; }
.kh-fb__stars { color: #f5a623; font-size: 15px; letter-spacing: 3px; }

/* Phản hồi dài ngắn rất khác nhau; cắt còn sáu dòng để ba thẻ trong một hàng
   cao bằng nhau, phần còn lại mở ra bằng nút "Xem thêm". */
.kh-fb__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
	margin: 1rem 0 0;
	font-size: 15px;
	font-style: italic;
	line-height: 1.7;
	color: #374151;
}

.kh-fb--mo .kh-fb__text {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.kh-fb__them {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .65rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-color, #f36f21);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.kh-fb__them[hidden] { display: none; }

.kh-fb__them:hover,
.kh-fb__them:focus-visible { text-decoration: underline; }

.kh-fb__them svg { transition: transform .2s ease; }
.kh-fb--mo .kh-fb__them svg { transform: rotate(180deg); }

@media (max-width: 991.98px) {
	.kh-fb { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 767.98px) {
	.kh-fb { flex-basis: 100%; padding: 1.25rem; }
	.kh-fb__avatar { width: 60px; height: 60px; }
	.kh-feedback { gap: .35rem; }
	.kh-feedback__nut { width: 38px; height: 38px; }
}

/* ==========================================================================
   9. Màn hình nhỏ
   ========================================================================== */

@media (max-width: 991.98px) {
	.single-product .title-single-post { font-size: 26px; }
}

@media (max-width: 991.98px) {
	.single-product .content-main { padding-inline: 0; }
}

@media (max-width: 767.98px) {
	.single-product .title-single-post { font-size: 24px; }
	.single-product .content-main h2 { font-size: 21px; }
	.kh-noidung .accordion-button { font-size: 16px; }
	.kh-formwrap .wpcf7-submit { width: 100%; margin-left: 0; }
	.khoahoc-meta th { width: 120px; }
}

@media (max-width: 575.98px) {
	.single-product .content-main { padding-inline: 0; }
	.kh-feedback__title { font-size: 21px; }
}


/* ==========================================================================
   Form đăng ký: giữ nguyên giao diện gốc của bản gốc, chỉ cho khối trải rộng
   hết hàng vì nay nó nằm cuối trang thay vì ở cột phải.
   ========================================================================== */

.kh-formwrap { width: 100%; }
.kh-formwrap [class*="position-sticky"] { position: static; }

/* ==========================================================================
   Ảnh giới thiệu nổi sang phải, nội dung chạy bên trái
   ========================================================================== */

.single-product .content-main p.kh-anh-phai {
	float: right;
	width: 42%;
	margin: 0 0 1rem 2rem;
	text-align: center;
}

/* Ảnh dọc vốn cao hơn khối chữ bên trái nên bị thừa xuống dưới; giới hạn chiều
   cao để hai bên kết thúc ngang nhau, phần dư cắt gọn thay vì kéo dài trang. */
.single-product .content-main p.kh-anh-phai img {
	margin: 0;
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	object-position: top center;
	border-radius: 8px;
}

/* mốc tiêu đề kế tiếp không bị ảnh đè */
.single-product .content-main p.kh-anh-phai + p { margin-top: 0; }

@media (max-width: 767.98px) {
	.single-product .content-main p.kh-anh-phai {
		float: none;
		width: 100%;
		margin: 0 0 1.25rem;
	}
}

/* ==========================================================================
   Hàng hai cột: danh sách các ý bên trái, ảnh minh họa bên phải.
   Hai đoạn văn trước và sau vẫn trải hết bề rộng nội dung.
   ========================================================================== */

.single-product .content-main .kh-2cot {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* hai bên bằng nhau */
	gap: 1.75rem;
	align-items: stretch;   /* hai cột cao bằng nhau */
	margin: 1.25rem 0 1.5rem;
}

.single-product .content-main .kh-2cot__text ul { margin-bottom: 0; }
.single-product .content-main .kh-2cot__anh p { margin: 0; text-align: center; }

.single-product .content-main .kh-2cot__anh img {
	width: 100%;
	height: auto;
	max-height: none;
	border-radius: 8px;
}

@media (max-width: 767.98px) {
	.single-product .content-main .kh-2cot { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Biến thể đảo bên: ảnh trái, nội dung phải (mục giảng viên) */
.single-product .content-main .kh-2cot--dao .kh-2cot__anh { order: 1; }
.single-product .content-main .kh-2cot--dao .kh-2cot__text { order: 2; }

/* Câu kết dưới danh sách: nhấn mạnh bằng chữ nghiêng đậm và vạch màu bên trái */
.single-product .content-main .kh-cau-ket {
	margin: 1rem 0 0;
	padding: .75rem 0 .75rem 1rem;
	border-left: 3px solid var(--primary-color, #f36f21);
	color: var(--secondary-color, #111827);
	font-size: 16px;
	line-height: 1.75;
	text-align: left;
}

/* Cột chữ canh giữa theo chiều dọc so với ảnh. Không kéo giãn các ý cho vừa
   chiều cao ảnh nữa: cách đó làm khoảng hở giữa các ý rộng hẹp thất thường,
   mỗi khối một kiểu. Nay mọi ý cách nhau đúng một khoảng cố định. */
.single-product .content-main .kh-2cot__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .75rem;
}

.single-product .content-main .kh-2cot__text ul {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-bottom: 0;
}

.single-product .content-main .kh-2cot__text ul > li { margin-bottom: 0; }
.single-product .content-main .kh-2cot__text > p { margin-bottom: 0; }

/* Ảnh chính bo góc, bỏ viền cứng cho gần mẫu */
.single-product .main-thumbnail { border: 0; border-radius: 14px; }

@media (max-width: 575.98px) {
	.khoahoc-meta__row { grid-template-columns: 1fr; }
	.khoahoc-meta__label { border-right: 0; padding-bottom: .35rem; }
	.khoahoc-meta__value { padding-top: 0; }
}

/* Mục giảng viên: ảnh hồ sơ dọc nên cột ảnh hẹp hơn, chữ rộng ra và canh giữa
   theo chiều dọc cho cân với ảnh. */
.single-product .content-main .kh-2cot--gv {
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	align-items: center;
}

/* mục giảng viên: chữ bên trái, ảnh bên phải */
.single-product .content-main .kh-2cot--gv .kh-2cot__text { order: 1; }
.single-product .content-main .kh-2cot--gv .kh-2cot__anh { order: 2; }

.single-product .content-main .kh-2cot--gv .kh-2cot__text {
	justify-content: center;
	font-size: 17px;
}

.single-product .content-main .kh-2cot--gv .kh-2cot__text > p { margin-bottom: .5rem; }

@media (max-width: 767.98px) {
	.single-product .content-main .kh-2cot--gv { grid-template-columns: 1fr; }
}

/* Điểm nổi bật của giảng viên: gọn, có dấu tích cam như các danh sách khác */
.single-product .content-main .kh-gv-diem {
	margin: .35rem 0 0;
	padding-left: 0;
	list-style: none;
}

.single-product .content-main .kh-gv-diem > li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .4rem;
	line-height: 1.6;
	font-size: 15.5px;
	text-align: left;
}

.single-product .content-main .kh-gv-diem > li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary-color, #f36f21);
	font-weight: 700;
}

/* ==========================================================================
   Form đăng ký tư vấn: tiêu đề màu thương hiệu, lưới ba cột, nút rộng hết hàng
   ========================================================================== */

.la-form {
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

/* Trước là dải cam đặc chữ trắng 26px. Đổi sang kiểu thẻ nhẹ cho khớp với hai
   thẻ ở trang Liên hệ, để mọi form trong site nhìn như một bộ. */
.la-form__head {
	/* Đệm ngang bằng đúng phần thân form bên dưới cho thẳng lề. Trước đây khối
	   này là dải cam nên đệm nằm sẵn trong nền; bỏ nền mà quên trả lại đệm thì
	   chữ dính sát mép viền thẻ. */
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.5rem 1.75rem 0;
	background: none;
	color: var(--secondary-color, #171717);
	text-align: left;
}

/* WordPress tự bọc nội dung trong thẻ <p>, làm icon và chữ thành hai khối
   riêng xếp chồng lên nhau thay vì nằm cùng hàng. display:contents gỡ thẻ bọc
   khỏi bố cục, để icon và chữ thành con trực tiếp của hàng flex. */
.la-form__head > p { display: contents; margin: 0; }

.la-form__head .lh-hop__icon { flex: 0 0 auto; }

.la-form__head strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.la-form__line {
	display: block;
	width: 54px;
	height: 3px;
	margin: .75rem auto 0;
	border-radius: 2px;
	background: rgb(255 255 255 / 85%);
}

.la-form__body { padding: 2rem 1.75rem; }

.la-form__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 1.75rem;
}

.la-form__field {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .35rem 1rem;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: 10px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.la-form__field:focus-within {
	border-color: var(--primary-color, #f36f21);
	box-shadow: 0 0 0 3px rgb(243 111 33 / 12%);
}

.la-form__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--primary-color, #f36f21);
}

.la-form .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }

.la-form__input {
	width: 100%;
	padding: .85rem 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: var(--secondary-color, #111827);
}

/* --- ô chọn ---------------------------------------------------------------
   Mũi tên mặc định của trình duyệt vẽ đè lên chữ khi ô hẹp, chữ dài lại bị cắt
   cụt không dấu hiệu gì. Tự vẽ mũi tên và chừa chỗ cho nó, chữ dài thì thêm ba
   chấm. Dòng nhắc (giá trị rỗng) để màu mờ như chữ gợi ý của các ô kia. */
select.la-form__input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 14px 14px no-repeat;
	cursor: pointer;
	text-overflow: ellipsis;
}

select.la-form__input:has(option[value=""]:checked) { color: #9aa1ab; }
select.la-form__input option { color: var(--secondary-color, #111827); }

.la-form__input:focus { outline: none; }
.la-form textarea.la-form__input { min-height: 58px; resize: vertical; }

.la-form__submit { margin-top: 1.75rem; }

.la-form__btn {
	display: block;
	width: 100%;
	padding: 1.05rem 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--primary-color, #f36f21);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.la-form__btn:hover {
	background: #c9500c;
	box-shadow: 0 8px 22px rgb(243 111 33 / 30%);
}

@media (max-width: 991.98px) {
	.la-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
	.la-form__grid { grid-template-columns: 1fr; gap: 1rem; }
	.la-form__body { padding: 1.5rem 1.15rem; }
	.la-form__head strong { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Sửa form đăng ký: biểu tượng nằm ngang hàng với chữ gợi ý, viền bao quanh,
   và bề rộng khớp với vùng nội dung phía trên.
   -------------------------------------------------------------------------- */

/* CF7 bọc mỗi trường trong <span> và <p> riêng, khiến biểu tượng bị đẩy xuống
   dòng — ép lại thành một hàng ngang. */
.la-form__field {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	text-align: left;
}

.la-form__field > .wpcf7-form-control-wrap,
.la-form__field > span,
.la-form__field > p {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: block;
}

.la-form__icon { flex: 0 0 auto; line-height: 0; }

.la-form__field .la-form__input {
	display: block;
	width: 100%;
	min-height: 46px;
}

/* ô nội dung cao hơn nhưng biểu tượng vẫn nằm trên cùng cho cân */
.la-form__field:has(textarea) { align-items: flex-start !important; }
.la-form__field:has(textarea) .la-form__icon { padding-top: .9rem; }

/* viền bao quanh toàn form */
.la-form { border: 1px solid rgb(0 0 0 / 18%); }

/* bề rộng bằng đúng vùng nội dung phía trên */
.single-product .kh-formwrap {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

@media (max-width: 575.98px) {
	.single-product .kh-formwrap { padding-inline: 1.1rem; }
}

/* WordPress tự bọc nội dung ô vào một thẻ đoạn văn, nên biểu tượng và ô nhập
   nằm chung một khối. Cho chính thẻ đó thành hàng ngang. */
.la-form__field > p {
	display: flex;
	align-items: center;
	gap: .9rem;
	width: 100%;
	margin: 0;
	line-height: normal;
	text-align: left;
}

.la-form__field > p > .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
.la-form__field:has(textarea) > p { align-items: flex-start; }

/* Các ô trong lưới giữ chiều cao riêng, không kéo cao bằng ô nội dung */
.la-form__grid { align-items: start; }

.la-form__field { min-height: 66px; }

/* ô nội dung chỉ cao hơn chút, không chiếm cả hàng */
.la-form textarea.la-form__input {
	min-height: 46px;
	height: 46px;
	padding-top: .6rem;
	padding-bottom: .6rem;
	resize: vertical;
}

.la-form__field:has(textarea) { align-items: center !important; }
.la-form__field:has(textarea) > p { align-items: center; }
.la-form__field:has(textarea) .la-form__icon { padding-top: 0; }

/* --------------------------------------------------------------------------
   Lề trang: toàn bộ nội dung trang khóa học cách mép ngoài đúng 2,5cm mỗi bên,
   phần bên trong trải rộng hết phần còn lại.
   -------------------------------------------------------------------------- */
.single-product.wrap-content {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 2.5cm;
}

.single-product .content-main,
.single-product .kh-formwrap {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* Bài dịch vụ dùng chung khối form này nên cũng cần bỏ đệm ngang thừa */
.la-be-ngang-chuan .kh-formwrap { max-width: none; margin-inline: 0; padding-inline: 0; }

@media (max-width: 991.98px) {
	.single-product.wrap-content { padding-inline: 1.5cm; }
}

@media (max-width: 575.98px) {
	.single-product.wrap-content { padding-inline: 1rem; }
}

/* Hàng đầu trang dùng gutter Bootstrap (lề âm 12px) nên mép ảnh và mép bảng
   lệch ra ngoài lề chung; khử lề âm, bỏ padding ở hai mép ngoài nhưng giữ
   khoảng hở giữa cột ảnh và cột thông tin. */
.single-product .row-main-single {
	width: 100%;
	margin-inline: 0;
}

.single-product .row-main-single > .col1 { padding-left: 0; padding-right: 1.25rem; }
.single-product .row-main-single > .col2 { padding-right: 0; padding-left: 1.25rem; }

/* .wrap-content của bản gốc khai cột nội dung cứng 1300px, nên khối bên trong
   tràn qua lề vừa đặt. Cho cột co theo phần còn lại để lề hai bên đúng bằng
   padding của section. */
.single-product.wrap-content {
	grid-template-columns: [main-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [main-end];
}

/* Các hàng còn lại (nội dung, form, khóa liên quan) cũng dùng gutter Bootstrap;
   khử lề âm và chỉ bỏ padding ở hai mép ngoài, gutter giữa các cột giữ nguyên. */
.single-product > .row { margin-inline: 0; }
.single-product > .row > [class*="col-"]:first-child { padding-left: 0; }
.single-product > .row > [class*="col-"]:last-child { padding-right: 0; }

/* ==========================================================================
   Hai khối "ảnh + chữ": vấn đề học viên gặp phải và hồ sơ giảng viên
   ==========================================================================
   Trước đây các ý chỉ là dòng chữ trần cạnh một tấm ảnh lớn nên cột chữ trông
   trống trải, chữ nhỏ và rời rạc. Nay mỗi ý là một thẻ có nền và dấu tích
   trong vòng tròn, đặt cân với ảnh.
   -------------------------------------------------------------------------- */

.single-product .content-main .kh-2cot { gap: 2rem; }

/* Ảnh hai khối: bo góc, đổ bóng nhẹ cho tách khỏi nền trắng */
.single-product .content-main .kh-2cot__anh img {
	border-radius: 14px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

/* Mỗi ý chỉ là một dòng chữ có dấu tích, không đóng khung */
.single-product .content-main .kh-2cot__text ul > li,
.single-product .content-main .kh-gv-diem > li {
	position: relative;
	margin: 0;
	padding: .15rem 0 .15rem 1.75rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 15.5px;
	line-height: 1.7;
	text-align: left;
}

.single-product .content-main .kh-2cot__text ul > li:hover,
.single-product .content-main .kh-gv-diem > li:hover {
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

/* Dấu tích cam để trần, không bọc vòng tròn */
.single-product .content-main .kh-2cot__text ul > li::before,
.single-product .content-main .kh-gv-diem > li::before {
	content: "✓";
	position: absolute;
	top: .15rem;
	left: 0;
	width: auto;
	height: auto;
	margin-top: 0;
	border-radius: 0;
	background: none;
	color: var(--primary-color, #f36f21);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

/* Chữ trong thẻ bỏ canh đều hai bên: dòng ngắn mà canh đều sẽ hở chữ */
.single-product .content-main .kh-2cot__text ul > li,
.single-product .content-main .kh-2cot__text ul > li * { text-align: left; }

/* Đoạn dẫn phía trên danh sách */
.single-product .content-main .kh-2cot__text > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
}

/* Hồ sơ giảng viên: các ý xếp một cột, đọc theo mạch từ trên xuống */
.single-product .content-main .kh-2cot__text ul.kh-gv-diem {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .7rem;
	margin: .25rem 0 0;
}

.single-product .content-main .kh-2cot--gv .kh-2cot__text { gap: 1rem; }

@media (max-width: 767.98px) {
	.single-product .content-main .kh-2cot { gap: 1.25rem; }
}

/* Cân lại khối giảng viên: ảnh hồ sơ dạng dọc rất cao, thu hẹp cột ảnh và nới
   thẻ bên chữ để hai cột gần bằng nhau, đỡ hụt một mảng trắng bên trái. */
.single-product .content-main .kh-2cot--gv { grid-template-columns: minmax(0, 1fr) minmax(0, 39%); }

.single-product .content-main .kh-2cot--gv .kh-gv-diem { gap: .8rem; }

.single-product .content-main .kh-2cot--gv .kh-gv-diem > li {
	padding-block: .15rem;
	font-size: 16px;
}

@media (max-width: 767.98px) {
	/* nhắc lại sau các quy tắc ở trên: màn hình hẹp thì ảnh và chữ xếp dọc */
	.single-product .content-main .kh-2cot--gv { grid-template-columns: 1fr; }
}

/* Bỏ khung rồi thì không cần thu hẹp danh sách nữa: các ý chạy thẳng lề cột. */
.single-product .content-main .kh-2cot--gv ul.kh-gv-diem { margin-inline: 0; }

/* ==========================================================================
   Khối đăng ký cuối trang: ảnh lịch khai giảng bên trái, form bên phải
   ========================================================================== */

.kh-formwrap {
	display: grid;
	grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
	/* stretch để thẻ ảnh và thẻ form cao bằng nhau */
	align-items: stretch;
	gap: 2rem;
	margin-top: 2rem;
}

.kh-formwrap--khong-anh { grid-template-columns: minmax(0, 1fr); }

/* Ảnh lịch nằm trong một thẻ có tiêu đề, dựng giống hệt thẻ ở trang Liên hệ
   (dùng lại chính các lớp .lh-hop__* khai trong contact.css, tệp đó nạp ở mọi
   trang). Thẻ là cột dọc: tiêu đề — vùng ảnh co giãn — dòng chú thích. Vùng ảnh
   nhận phần cao còn lại và giới hạn ảnh trong đó, nên hai cột luôn cao bằng
   nhau mà ảnh vẫn giữ nguyên tỉ lệ, không cắt không méo. */
.kh-formwrap__anh {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
}

.kh-formwrap__anhbox {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin-top: 1rem;
}

.kh-formwrap__anhbox img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

.kh-formwrap__chu {
	margin: 1rem 0 0;
	color: #9aa1ab;
	font-size: 13px;
	line-height: 1.55;
	text-align: center;
}

/* Khung viền của form vốn nằm ở .la-form, lồng sâu dưới mấy lớp bọc của
   Contact Form 7 nên không giãn theo cột — thẻ ảnh cao 790px mà khung form chỉ
   496px. Chuyển khung thẻ lên chính ô lưới rồi cho chuỗi lớp bọc giãn theo,
   thế là hai thẻ cao bằng nhau. */
.kh-formwrap__form {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
}

.kh-formwrap__form > .wpcf7,
.kh-formwrap__form > .wpcf7 > form {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* .la-form thôi tự vẽ khung, vì ô lưới đã là thẻ rồi */
.kh-formwrap .la-form {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.kh-formwrap .la-form__body { flex: 0 0 auto; padding: 0; }

/* Form còn bốn ô nên thấp hơn hẳn thẻ ảnh lịch bên trái. Dồn cả cụm — tiêu đề,
   dòng dẫn, lưới ô, nút — vào giữa cột để khoảng trống chia đều trên dưới,
   thay vì tiêu đề dính đỉnh còn khoảng trống dồn hết xuống chân thẻ. */
.kh-formwrap .la-form { justify-content: center; }

/* Bốn ô xếp hai cột hai hàng cho vừa bề ngang còn lại */
.la-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
	.kh-formwrap { grid-template-columns: minmax(0, 1fr); }

	/* Xếp một cột thì không còn hàng để giãn theo, nên bỏ trần chiều cao của
	   vùng ảnh — để nguyên thì max-height 100% tính theo một khung vốn co theo
	   nội dung, ảnh dễ sập. */
	.kh-formwrap__anh {
		max-width: 520px;
		margin-inline: auto;
	}

	.kh-formwrap__anhbox img { max-height: none; }
}

@media (max-width: 575.98px) {
	/* nhắc lại sau quy tắc hai cột ở trên: điện thoại thì mỗi ô một hàng */
	.la-form__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Bảng thông tin khóa học: ô nhãn phải cao bằng ô giá trị, nếu không hàng nào
   có nội dung hai dòng (như Địa chỉ) sẽ hở ra mảng trắng phía trên và dưới
   mảng nền xám. */
.khoahoc-meta__row { align-items: stretch; }

.khoahoc-meta__label { background: #fff4ec; }


/* Bảng thông tin theo mẫu: cột nhãn nền cam rất nhạt, đường kẻ cũng màu cam
   nhạt, biểu tượng để nét trần không bọc vòng tròn. */
.khoahoc-meta { border-color: rgb(243 111 33 / 22%); }

.khoahoc-meta__row + .khoahoc-meta__row { border-top-color: rgb(243 111 33 / 22%); }

.khoahoc-meta__label { border-right-color: rgb(243 111 33 / 22%); }

.khoahoc-meta__icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--primary-color, #f36f21);
}

/* Dòng địa chỉ dài hơn bề ngang ô nên "TP.HCM" bị rớt xuống dòng riêng; thu
   cột nhãn và bớt đệm ngang để mỗi mục nằm gọn một dòng. */
.khoahoc-meta__row { grid-template-columns: 138px 1fr; }
.khoahoc-meta__label { padding-inline: .9rem; gap: .55rem; }
.khoahoc-meta__value { padding-inline: .8rem; }

@media (max-width: 575.98px) {
	.khoahoc-meta__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ô "Chọn khóa học": danh sách xổ xuống tự dựng
   ==========================================================================
   Danh sách của thẻ <select> do hệ điều hành vẽ nên mỗi trình duyệt một kiểu
   nền. Ở đây ô gốc vẫn nằm trong form để gửi dữ liệu, phần nhìn thấy do trang
   tự vẽ: nền trắng, rê chuột tới đâu dòng đó nền cam.
   -------------------------------------------------------------------------- */

.kh-chon { position: relative; flex: 1 1 auto; min-width: 0; }

/* ô gốc chỉ để gửi dữ liệu, không hiện ra */
.kh-chon__goc {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.kh-chon__nut {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 1.6;
	color: var(--secondary-color, #111827);
	text-align: left;
	cursor: pointer;
}

.kh-chon__nhan { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chưa chọn gì thì chữ mờ như chữ gợi ý của các ô khác */
.kh-chon--trong .kh-chon__nhan { color: #9aa1ab; }

.kh-chon__mui {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: .2rem;
	border-right: 2px solid #6b7280;
	border-bottom: 2px solid #6b7280;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}

.kh-chon--mo .kh-chon__mui { transform: translateY(2px) rotate(-135deg); }

.kh-chon__bang {
	position: absolute;
	z-index: 30;
	top: calc(100% + .6rem);
	/* Trước đây căng cả hai mép nên bảng rộng bằng nguyên hàng, nhìn như tràn
	   màn hình. Nay neo mép trái, cho rộng vừa đủ đọc rồi dừng. */
	left: -1rem;
	right: auto;
	width: max-content;
	min-width: calc(100% + 2rem);
	max-width: min(460px, calc(100vw - 3rem));
	max-height: 280px;
	overflow-y: auto;
	padding: .4rem;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

.kh-chon__nhom {
	padding: .5rem .75rem .3rem;
	color: var(--primary-color, #f36f21);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.kh-chon__muc {
	padding: .6rem .75rem;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--secondary-color, #111827);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.kh-chon__muc:hover,
.kh-chon__muc:focus,
.kh-chon__muc:focus-visible {
	outline: none;
	background: var(--primary-color, #f36f21);
	color: #fff;
}

.kh-chon__muc--dang-chon {
	background: rgb(243 111 33 / 12%);
	font-weight: 600;
}

.kh-chon__muc--dang-chon:hover { background: var(--primary-color, #f36f21); }

/* ==========================================================================
   Khối ảnh + chữ: bỏ khoảng hở, siết chiều cao ảnh
   ==========================================================================
   Lưới kéo cột chữ cao bằng ảnh, rồi nội dung bị dồn vào giữa nên hở đều trên
   và dưới — nhìn như mất một mảng trắng giữa đoạn dẫn và danh sách. Nay chữ
   bắt đầu ngay từ dòng đầu, còn ảnh dọc bị giới hạn chiều cao để hai cột
   không lệch nhau quá xa.
   -------------------------------------------------------------------------- */
.single-product .content-main .kh-2cot { align-items: start; }

.single-product .content-main .kh-2cot__text,
.single-product .content-main .kh-2cot--gv .kh-2cot__text { justify-content: flex-start; }

.single-product .content-main .kh-2cot__anh img {
	max-height: 520px;
	width: auto;
	max-width: 100%;
	display: block;
	margin-inline: auto;
}

/* Ảnh đứng riêng trong bài khóa học: giới hạn khổ như các trang khác.
   Quy tắc chung ở khoi-mau.css bị .single-product .content-main img (đặc hiệu
   cao hơn) chặn mất, nên phải nhắc lại ở đây. */
.single-product .content-main p > img:only-child,
.single-product .content-main p > a:only-child > img {
	max-width: min(100%, 760px);
	width: auto;
	height: auto;
	display: block;
	margin-inline: auto;
}

.single-product .content-main .kh-2cot p img { max-width: 100%; }

/* ==========================================================================
   Khối giảng viên: hai cột kết thúc cùng một điểm
   ==========================================================================
   Cột chữ cao 295px còn cột ảnh 520px — ảnh thò xuống 225px. Ảnh là poster đặc
   chữ (logo, 8 dòng thành tích, dải liên hệ ở đáy) nên cắt thì mất nội dung,
   thu nhỏ thì chữ trong poster không đọc nổi. Vậy làm đầy cột chữ thay vì ép
   ảnh: đoạn dẫn đã đưa vào trong cột, phần còn thiếu chia đều cho các khoảng
   giữa những ý liệt kê.

   Phải khai sau quy tắc .single-product .content-main .kh-2cot { align-items:
   start } ở trên — hai bộ chọn cùng độ đặc hiệu nên cái đứng sau mới thắng.
   -------------------------------------------------------------------------- */
.single-product .content-main .kh-2cot--gv { align-items: stretch; }

.single-product .content-main .kh-2cot--gv .kh-2cot__text ul.kh-gv-diem {
	flex: 1 1 auto;
	align-content: space-between;
}

@media (max-width: 767.98px) {
	/* xếp một cột thì không còn gì để cân theo, trả các ý về khoảng cách thường */
	.single-product .content-main .kh-2cot--gv .kh-2cot__text ul.kh-gv-diem {
		flex: 0 1 auto;
		align-content: start;
	}
}

/* --------------------------------------------------------------------------
   Đồng bộ với form trang Liên hệ

   Hai form dùng hai bộ lớp riêng (la-form ở trang chủ · khóa học · dịch vụ,
   lh-form ở trang liên hệ) nên không dùng chung quy tắc được; phải chép lại
   đúng số đo bên kia: ô bo tròn hẳn, biểu tượng ngăn bằng vạch dọc, nút bấm
   bo tròn nằm giữa. Đặt cuối tệp để đè các quy tắc cũ phía trên.
   -------------------------------------------------------------------------- */

.la-form__grid { gap: 1rem 1.25rem; }

.la-form__field {
	min-height: 58px;
	padding: 0 1.1rem;
	border-color: rgb(0 0 0 / 10%);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

/* hai ô dài trải hết hàng, giống ô Tiêu đề và Nội dung bên trang liên hệ */
.la-form__field--rong { grid-column: 1 / -1; }

.la-form__icon {
	padding-right: .9rem;
	border-right: 1px solid rgb(0 0 0 / 10%);
}

.la-form__field .la-form__input {
	min-height: 0;
	padding: 0;
	line-height: 1.6;
}

/* Ô Nội dung cao hơn, bo góc mềm thay vì bo tròn hẳn */
.la-form__field:has(textarea) {
	align-items: flex-start !important;
	padding-block: 1rem;
	border-radius: 22px;
}

.la-form__field:has(textarea) > p { align-items: flex-start; }

.la-form__field:has(textarea) .la-form__icon {
	align-self: flex-start;
	padding-top: 0;
}

.la-form textarea.la-form__input {
	min-height: 0;
	height: 150px;
	resize: vertical;
}

.la-form__submit { margin-top: 1.5rem; text-align: center; }

.la-form__btn {
	display: inline-block;
	width: auto;
	min-width: 240px;
	padding: 14px 40px;
	border-radius: 999px;
	font-size: 16px;
}

/* Contact Form 7 xếp nút và vòng quay chờ chung một hàng. Vòng quay tuy trong
   suốt nhưng vẫn chiếm 72px (rộng 24px, hai lề 24px), nên nút bị đẩy lệch
   trái 36px khỏi tâm khối. Kéo vòng quay ra khỏi dòng để nút nằm đúng giữa —
   cùng cách đã dùng cho form trang liên hệ. */
.la-form__submit,
.la-form__submit > p {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.la-form__submit > p { width: 100%; }
.la-form__submit { margin-top: 1.5rem; }

.la-form__submit .wpcf7-spinner {
	position: absolute;
	right: 0;
	margin: 0;
}

/* Dòng dẫn dưới tiêu đề form.

   Nó là thẻ đứng riêng giữa .la-form__head và .la-form__body, không nằm trong
   khối nào nên không hưởng đệm ngang của chúng — chữ chạy sát mép viền thẻ
   (đo được 1px). Cho đúng bằng lề của tiêu đề và thân form. */
.la-form > .lh-hop__phu {
	margin: .4rem 0 0;
	padding: 0 1.75rem;
}

/* ==========================================================================
   Phân loại học phí — bộ chọn Offline / Online thay cho dòng chữ gộp cũ
   ========================================================================== */

.khoahoc-phanloai {
	margin-top: 1.1rem;
}

.khoahoc-phanloai__nhan {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .65rem;
	color: var(--secondary-color, #111827);
	font-weight: 600;
}

.khoahoc-phanloai__ds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .75rem;
}

.khoahoc-phanloai__o {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .8rem 1rem;
	border: 1.5px solid rgb(0 0 0 / 12%);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Ô chọn thật vẫn nằm trong luồng để đọc màn hình và bàn phím dùng được,
   chỉ giấu khỏi mắt. */
.khoahoc-phanloai__o input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.khoahoc-phanloai__o:hover {
	border-color: rgb(243 111 33 / 45%);
}

.khoahoc-phanloai__o:has(input:checked) {
	border-color: var(--primary-color, #f36f21);
	background: #fff6ef;
	box-shadow: 0 4px 14px rgb(243 111 33 / 14%);
}

.khoahoc-phanloai__o:has(input:focus-visible) {
	outline: 2px solid var(--primary-color, #f36f21);
	outline-offset: 2px;
}

.khoahoc-phanloai__ten {
	color: #4a4a4a;
	font-size: 14px;
}

.khoahoc-phanloai__o:has(input:checked) .khoahoc-phanloai__ten {
	color: var(--primary-color, #f36f21);
	font-weight: 600;
}

.khoahoc-phanloai__gia {
	color: var(--secondary-color, #111827);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* ==========================================================================
   Nút "Đăng ký ngay" và hộp popup
   ========================================================================== */

.khoahoc-dangky {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-width: 240px;
	margin-top: 1.4rem;
	padding: 14px 36px;
	border: 0;
	border-radius: 999px;
	background: var(--primary-color, #f36f21);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.khoahoc-dangky:hover,
.khoahoc-dangky:focus-visible {
	background: #d95c15;
	box-shadow: 0 8px 22px rgb(243 111 33 / 30%);
	transform: translateY(-1px);
}

.la-popup {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.la-popup[hidden] { display: none; }

.la-popup__nen {
	position: absolute;
	inset: 0;
	background: rgb(17 24 39 / 55%);
	opacity: 0;
	transition: opacity .2s ease;
}

.la-popup__hop {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	padding: 2rem 2rem 1.75rem;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 24px 60px rgb(0 0 0 / 24%);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(14px) scale(.98);
	transition: opacity .2s ease, transform .2s ease;
}

.la-popup--hien .la-popup__nen { opacity: 1; }

.la-popup--hien .la-popup__hop {
	opacity: 1;
	transform: none;
}

/* Khóa cuộn nền để hộp không trôi theo khi người dùng lăn chuột */
body.la-popup-mo { overflow: hidden; }

.la-popup__dong {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 5%);
	color: #4a4a4a;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.la-popup__dong:hover,
.la-popup__dong:focus-visible {
	background: var(--primary-color, #f36f21);
	color: #fff;
}

.la-popup__dau {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-right: 2.5rem;
	font-size: 20px;
	color: var(--secondary-color, #111827);
}

.la-popup__phu {
	margin: .55rem 0 1.35rem;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.6;
}

/* --- form trong hộp: y hệt form liên hệ, chỉ còn ba ô ------------------- */

/* Ô cuối trải hết hàng ở đây là Email chứ không phải Nội dung; phần kiểu dáng
   riêng cho ô Nội dung đã ràng theo :has(textarea) trong contact.css nên không
   dính vào, chỉ còn chỉnh khoảng cách và bề rộng nút. */
.lh-form--popup .lh-form__submit { margin-top: 1.25rem; }
.lh-form--popup .lh-form__btn { min-width: 100%; }

@media screen and (max-width: 610px) {
	.lh-form--popup .lh-form__grid { grid-template-columns: minmax(0, 1fr); }

	.la-popup__hop {
		padding: 1.5rem 1.25rem 1.25rem;
		border-radius: 18px;
	}

	.khoahoc-dangky {
		width: 100%;
		min-width: 0;
	}
}

/* Giá gốc gạch ngang, chỉ hiện khi khóa đang có giá khuyến mãi. */
.khoahoc-meta__gia-cu {
	margin-left: .6rem;
	color: #9aa1ab;
	font-size: 14px;
	font-weight: 400;
}

/* Ảnh lớn đầu trang khóa học: khung vuông 1:1 như mọi thẻ khóa học khác.
   Ảnh nguồn đúng tỉ lệ vuông thì không mất gì; ảnh dọc hay ngang thì cắt gọn
   vào khung thay vì kéo dài cả cột. */
.wp-img-main {
	overflow: hidden;
	border-radius: 12px;
}

.wp-img-main img.imgmain {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
}