/* ==========================================================================
   Trang Liên hệ – form gửi thông tin
   ==========================================================================
   Bố cục theo bản gốc: bốn ô đầu xếp hai cột, ô Tiêu đề và Nội dung trải hết
   hàng, nút gửi bo tròn nằm giữa. Mỗi ô là một viên thuốc viền mảnh, biểu tượng
   nét cam bên trái ngăn với chỗ nhập bằng một vạch dọc nhạt.
   -------------------------------------------------------------------------- */

.lh-form { width: 100%; }

.lh-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.lh-form__field {
	display: flex;
	align-items: center;
	gap: .9rem;
	min-height: 58px;
	padding: 0 1.1rem;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
	transition: border-color .2s ease, box-shadow .2s ease;
}

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

/* Tiêu đề và Nội dung chiếm trọn hàng */
.lh-form__field--rong { grid-column: 1 / -1; }

/* Ô Nội dung cao hơn, bo góc mềm thay vì bo tròn hẳn.
   Ràng theo :has(textarea) chứ không chỉ theo vị trí cuối: form rút gọn có ô
   cuối trải hết hàng là Email — ô nhập một dòng — mà lại ăn nguyên bộ kiểu
   dáng dành cho ô Nội dung thì méo hẳn. */
.lh-form__field--rong:last-child:has(textarea) {
	align-items: flex-start;
	padding-block: 1rem;
	border-radius: 22px;
}

/* Biểu tượng: nét cam, ngăn với chỗ nhập bằng vạch dọc */
.lh-form__icon {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-right: .9rem;
	border-right: 1px solid rgb(0 0 0 / 10%);
	color: var(--primary-color, #f36f21);
	line-height: 0;
}

.lh-form__field--rong:last-child:has(textarea) .lh-form__icon { align-self: flex-start; }

/* WordPress bọc biểu tượng và ô nhập vào chung một thẻ <p>; cho chính thẻ đó
   thành hàng ngang, nếu không biểu tượng bị đẩy xuống dòng riêng. */
.lh-form__field > p {
	display: flex;
	align-items: center;
	gap: .9rem;
	width: 100%;
	margin: 0;
}

.lh-form__field--rong:last-child:has(textarea) > p { align-items: flex-start; }

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

.lh-form__input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	line-height: 1.6;
	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.lh-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.lh-form__input:has(option[value=""]:checked) { color: #9aa1ab; }
select.lh-form__input option { color: var(--secondary-color, #111827); }

.lh-form__input:focus { outline: none; box-shadow: none; }
.lh-form__input::placeholder { color: #9aa1ab; }

textarea.lh-form__input {
	/* CF7 dựng textarea 10 dòng nên ô cao quá khổ; ép về chiều cao của mẫu */
	min-height: 0;
	height: 150px;
	resize: vertical;
}

/* Nút gửi */
.lh-form__submit { margin-top: 1.5rem; text-align: center; }

.lh-form__btn {
	min-width: 240px;
	padding: 14px 40px;
	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;
}

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

/* Lời nhắc lỗi của Contact Form 7 nằm gọn dưới mỗi ô */
.dknt-group--lien-he .wpcf7-not-valid-tip {
	margin-top: .2rem;
	font-size: 13px;
}

.dknt-group--lien-he .wpcf7-response-output {
	margin: 1rem 0 0;
	border-radius: 10px;
	font-size: 14px;
}

@media (max-width: 767.98px) {
	.lh-form__grid { grid-template-columns: minmax(0, 1fr); }
	.lh-form__btn { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Bố cục trang: nội dung liên hệ bên trái, form bên phải như bản gốc.
   .wrap-content vốn khai một cột nội dung cứng, nên phải khai lại ở đây.
   -------------------------------------------------------------------------- */
/* Ảnh lịch bên trái hẹp, form bên phải rộng — cùng tỉ lệ với .kh-formwrap
   dùng ở trang khóa học và dịch vụ, để các form trong site nhìn như một. */
.la-lien-he {
	display: grid;
	grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
	gap: 2.5rem;
	/* stretch để hai thẻ cao bằng nhau; trước để start nên thẻ lịch cao hơn
	   thẻ form 84px, nhìn như hai khối rời nhau */
	align-items: stretch;
}



.la-lien-he .dknt-group { margin-block: 0; }

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

@media (max-width: 991.98px) {
	.la-lien-he { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* Contact Form 7 đặt nút và vòng quay chờ chung một thẻ <p>; vòng quay tuy
   trong suốt vẫn chiếm chỗ nên nút bị đẩy lệch khỏi tâm. */
.lh-form__submit > p {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

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

/* ==========================================================================
   Ảnh lịch khai giảng ở cột trái trang Liên hệ
   ==========================================================================
   Cột trái chỉ có mấy dòng thông tin nên ngắn hơn hẳn cột form bên phải. Đặt
   ảnh lịch khai giảng vào đây vừa lấp chỗ trống vừa để người xem biết kỳ tới
   học khi nào mà không phải sang trang khác.
   -------------------------------------------------------------------------- */





.lh-lich img {
	width: auto;
	/* ảnh gốc khổ dọc 669x1083; để tự do thì nó cao gấp rưỡi cột form */
	max-width: min(100%, 330px);
	height: auto;
	display: block;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

@media (max-width: 991.98px) {
	.lh-lich { margin-top: 1.5rem; }
	.lh-lich img { margin-inline: auto; }
}

/* ==========================================================================
   Trang Liên hệ dựng theo mẫu khách gửi
   ========================================================================== */

/* ---- tiêu đề giữa trang ---- */

.lh-dau { text-align: center; }

.lh-dau__tieude {
	margin: 0 0 .75rem;
	color: var(--secondary-color, #171717);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
}

.lh-dau__tieude span { color: var(--primary-color, #ff6700); }

/* Đoạn dẫn lấy từ nội dung bài nên phải ghi đè lề mặc định của .content-main */
.content-main.lh-dau__phu {
	max-width: 640px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.content-main.lh-dau__phu p {
	margin: 0;
	color: #6b7280;
	font-size: 16px;
	line-height: 1.7;
}

/* ---- bốn thẻ thông tin ---- */

.lh-the-luoi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.lh-the {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.25rem;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgb(0 0 0 / 5%);
}

.lh-the__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--primary-color, #ff6700);
	color: #fff;
}

.lh-the__noi { min-width: 0; }

.lh-the__nhan {
	margin: 0 0 .3rem;
	color: var(--secondary-color, #171717);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lh-the__chinh {
	display: block;
	margin: 0;
	color: var(--primary-color, #ff6700);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	word-break: break-word;
}

a.lh-the__chinh:hover { text-decoration: underline; }

.lh-the__phu {
	margin: .3rem 0 0;
	color: #9aa1ab;
	font-size: 13px;
	line-height: 1.5;
}

.lh-the__kenh {
	display: inline-block;
	margin: .15rem .7rem .15rem 0;
	color: var(--primary-color, #ff6700);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lh-the__kenh:hover { text-decoration: underline; }

/* ---- dải kêu gọi tư vấn ---- */

.lh-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	overflow: hidden;
	margin-top: 2.5rem;
	padding: 1.75rem 2rem;
	border-radius: 16px;
	background: linear-gradient(100deg, #ff6700 0%, #ff8534 100%);
	color: #fff;
}

.lh-cta__chu { flex: 1 1 320px; min-width: 0; }

.lh-cta__tieude {
	margin: 0 0 .35rem;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 800;
	line-height: 1.3;
}

.lh-cta__phu { margin: 0; font-size: 15px; line-height: 1.6; opacity: .95; }

.lh-cta__nut {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.6rem;
	border-radius: 999px;
	background: #fff;
	color: var(--primary-color, #ff6700);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform .2s ease, box-shadow .2s ease;
}

.lh-cta__nut:hover {
	color: var(--primary-color, #ff6700);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
}

/* Ảnh người đứng nhô lên khỏi dải, chỉ đủ chỗ mới hiện */
.lh-cta__anh { display: none; }

@media (min-width: 1200px) {
	.lh-cta { padding-right: 220px; }
	.lh-cta__anh {
		position: absolute;
		right: 1.5rem;
		top: 0;
		bottom: 0;
		display: block;
		width: 170px;
	}
	/* Ảnh gốc khổ dọc 860x1105; dải chỉ cao ~114px nên nếu để cao tự do thì
	   ảnh vẽ ra 270px và bị khung cắt mất phần trên — đúng chỗ có mặt người.
	   Ép cao bằng dải rồi lấy phần trên: thấy trọn đầu và vai. */
	.lh-cta__anh img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: center 8%;
	}
}

@media (max-width: 1199.98px) {
	.lh-the-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
	.lh-the-luoi { grid-template-columns: minmax(0, 1fr); }
	.lh-cta { padding: 1.5rem 1.25rem; }
	.lh-cta__nut { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Hai thẻ ở trang Liên hệ: lịch khai giảng và form đăng ký
   ==========================================================================
   Dùng lại đúng bộ giá trị của .lh-the ở hàng thẻ thông tin phía trên (viền
   mảnh 8%, bo 14px, đổ bóng nhẹ) để cả trang nhìn như một bộ.
   -------------------------------------------------------------------------- */

.lh-lich,
.dknt-group--lien-he {
	display: flex;
	flex-direction: column;
	margin: 0;
	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%);
}

/* ---- hàng tiêu đề dùng chung cho cả hai thẻ ---- */

.lh-hop__dau {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .35rem;
	color: var(--secondary-color, #171717);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.lh-hop__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--primary-color, #ff6700);
	color: #fff;
}

.lh-hop__icon svg { width: 20px; height: 20px; }

.lh-hop__phu {
	margin: 0 0 1.1rem;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.6;
}

/* ---- ruột thẻ lịch khai giảng ---- */

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

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

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

@media (max-width: 991.98px) {
	.lh-lich__anh img { max-height: none; }
}

.lh-form__note {
	margin: .8rem 0 0;
	color: #9aa1ab;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}