/* ==========================================================================
   Khối dùng chung cho mọi trang: ảnh + chữ hai cột, danh sách dấu tích
   ==========================================================================
   Trang khóa học đã có sẵn các khối này nhưng kiểu dáng bị bó trong
   .single-product .content-main. Ở đây khai lại không kèm điều kiện đó để
   chèn được ở trang tĩnh, bài viết hay bất cứ đâu.

   Quy tắc trong product.css có độ đặc hiệu cao hơn nên trang khóa học vẫn giữ
   nguyên diện mạo cũ, không bị đụng chạm.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------- khối ảnh + chữ hai cột */

.kh-2cot {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	align-items: start;
	margin: 1.5rem 0 1.75rem;
}

/* biến thể đảo bên: ảnh bên trái */
.kh-2cot--dao .kh-2cot__anh { order: 1; }
.kh-2cot--dao .kh-2cot__text { order: 2; }

.kh-2cot__anh { min-width: 0; }
.kh-2cot__anh p { margin: 0; text-align: center; }

.kh-2cot__anh img,
.kh-2cot__anh .wp-block-image img {
	/* ảnh dọc rất cao so với cột chữ; chặn lại cho hai cột đỡ lệch nhau */
	width: auto;
	max-width: 100%;
	max-height: 520px;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

.kh-2cot__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: .9rem;
	min-width: 0;
}

.kh-2cot__text > p { margin: 0; font-size: 16px; line-height: 1.75; }

/* Cột dùng khối "Cột" của WordPress: bỏ đệm mặc định để hai bên sát lưới */
.kh-2cot > .wp-block-column { padding: 0; }

@media (max-width: 767.98px) {
	.kh-2cot { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ------------------------------------------- danh sách dấu tích dạng khung */

.kh-list {
	display: grid;
	gap: .7rem;
	margin: .25rem 0;
	padding-left: 0;
	list-style: none;
}

/* Khối Danh sách của WordPress bọc thêm <ul> bên trong, gỡ đệm mặc định */
.kh-list li { margin: 0; }

.kh-list > li {
	position: relative;
	padding: .75rem 1rem .75rem 2.9rem;
	border: 1px solid rgb(0 0 0 / 7%);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
	font-size: 15.5px;
	line-height: 1.6;
	text-align: left;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.kh-list > li:hover {
	border-color: rgb(243 111 33 / 45%);
	box-shadow: 0 6px 18px rgb(243 111 33 / 12%);
	transform: translateY(-1px);
}

.kh-list > li::before {
	content: "✓";
	position: absolute;
	top: 50%;
	left: .8rem;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: rgb(243 111 33 / 12%);
	color: var(--primary-color, #f36f21);
	font-size: 13px;
	font-weight: 700;
}

/* Hai cột cho danh sách dài, dùng khi cần rút ngắn chiều dài trang */
.kh-list--2cot { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 767.98px) {
	.kh-list--2cot { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Tiêu đề mục trong trang tĩnh (giới thiệu, dịch vụ…)
   --------------------------------------------------------------------------
   Trang khóa học đã có kiểu riêng cho <h2>; trang tĩnh thì rơi về kiểu mặc
   định của Bootstrap nên chữ đen, mảnh, to quá khổ. Cho khớp với phần còn lại
   của site: cam thương hiệu, in đậm, viết hoa.
   -------------------------------------------------------------------------- */
.content-main:not(.baonoidung-khoahoc) h2 {
	margin: 2rem 0 1rem;
	color: var(--primary-color, #f36f21);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

.content-main h3 {
	margin: 1.5rem 0 .75rem;
	color: var(--secondary-color, #111827);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

/* Đoạn kết nhấn mạnh, dùng chung với trang khóa học */
.content-main .kh-cau-ket {
	margin: 1.25rem 0 0;
	padding: .75rem 0 .75rem 1rem;
	border-left: 3px solid var(--primary-color, #f36f21);
	font-size: 16px;
	line-height: 1.75;
}

@media (max-width: 767.98px) {
	.content-main:not(.baonoidung-khoahoc) h2 { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   Ảnh đứng riêng trong bài: giới hạn khổ cho vừa mắt
   --------------------------------------------------------------------------
   Ảnh chụp thường rộng 1600px, để tự do thì nó chiếm trọn bề ngang cột và đẩy
   chữ ra xa nhau. Giới hạn lại rồi căn giữa, chữ bám sát nhau hơn.
   Ảnh trong khối hai cột không áp luật này vì đã có khổ riêng.
   -------------------------------------------------------------------------- */
/* Chỉ bắt ảnh thật sự đứng một mình trong đoạn. Bộ chọn hậu duệ (p img) tóm
   luôn cả icon 11-18px nằm cùng dòng với chữ ở trang liên hệ, biến mỗi icon
   thành một khối riêng nằm giữa dòng — tách hẳn khỏi chữ đi cùng nó.
   Theme bọc ảnh trong thẻ liên kết phóng to nên phải kể thêm nhánh <a>. */
.content-main p > img:only-child,
.content-main p > a:only-child > img {
	max-width: min(100%, 760px);
	width: auto;
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: 10px;
}

.content-main .kh-2cot p img { max-width: 100%; border-radius: 14px; }

/* ==========================================================================
   Bề ngang nội dung dùng chung: trang tĩnh và bài dịch vụ
   ==========================================================================
   Trang khóa học đã có lề 2,5cm khai trong product.css. Trang giới thiệu và
   bài dịch vụ trước đây trải hết bề ngang (lề chỉ 1,76cm) nên nhìn không ăn
   nhập với nhau. Ở đây lặp lại đúng cách làm đó cho hai loại trang còn lại.
   -------------------------------------------------------------------------- */
.la-be-ngang-chuan.wrap-content {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 2.5cm;
	/* .wrap-content của bản gốc khai cột nội dung cứng 1300px, phải cho co lại */
	grid-template-columns: [main-start] 0 [content-start] minmax(0, 1fr) [content-end] 0 [main-end];
}

/* Khử lề âm gutter Bootstrap ở hai mép ngoài, gutter giữa các cột giữ nguyên */
.la-be-ngang-chuan > .row { margin-inline: 0; }
.la-be-ngang-chuan > .row > [class*="col-"]:first-child { padding-left: 0; }
.la-be-ngang-chuan > .row > [class*="col-"]:last-child { padding-right: 0; }

.la-be-ngang-chuan .content-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

@media (max-width: 991.98px) {
	.la-be-ngang-chuan.wrap-content { padding-inline: 1.5cm; }
}

@media (max-width: 575.98px) {
	.la-be-ngang-chuan.wrap-content { padding-inline: 1rem; }
}

/* ==========================================================================
   Khối ảnh + chữ trình bày theo hướng của chính tấm ảnh
   ==========================================================================
   Một cách trình bày duy nhất không vừa cho mọi ảnh: ảnh dọc thì cao hơn cột
   chữ, ảnh ngang thì thấp hơn hẳn và để lại mảng trắng. Nay tách làm hai kiểu.
   -------------------------------------------------------------------------- */

/* ---- ảnh dọc: hai cột, ảnh cao bằng danh sách bên cạnh ---- */

.kh-2cot--anh-doc { align-items: stretch; }

.kh-2cot--anh-doc .kh-2cot__anh {
	display: flex;
	min-height: 100%;
}

.kh-2cot--anh-doc .kh-2cot__anh p { width: 100%; margin: 0; }

.kh-2cot--anh-doc .kh-2cot__anh img {
	width: 100%;
	height: 100%;
	max-height: none;
	/* ảnh phải kéo cao bằng cột chữ nên có cắt bớt; lấy phần trên để giữ mặt người */
	object-fit: cover;
	object-position: center 25%;
}

.kh-2cot--anh-doc .kh-2cot__text { justify-content: flex-start; }

/* ---- ảnh ngang: một cột, ảnh nằm dưới cùng ---- */

.kh-1cot {
	display: block;
	margin: 1.25rem 0 1.75rem;
}

.kh-1cot > p { margin: 0 0 1rem; font-size: 16px; line-height: 1.75; }

.kh-1cot__anh { margin-top: 1.5rem; }
.kh-1cot__anh p { margin: 0; text-align: center; }

.kh-1cot__anh img {
	width: auto;
	max-width: min(100%, 760px);
	height: auto;
	display: block;
	margin-inline: auto;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}

@media (max-width: 767.98px) {
	.kh-2cot--anh-doc { grid-template-columns: minmax(0, 1fr); }
	.kh-2cot--anh-doc .kh-2cot__anh img { height: auto; max-height: 520px; }
}

/* ==========================================================================
   Khối "Đội ngũ giảng viên" trong trang Giới thiệu
   ==========================================================================
   Ba ảnh chân dung đều là ảnh dọc. Khung vuông 1:1 mà trang lưu trữ cũ dùng
   cắt mất 12-17% phía trên, tức cắt đúng vào mặt người. Ở đây ảnh đã được thu
   nhỏ sẵn đúng tỉ lệ 0,76 nên chỉ cần để nó tự giãn: KHÔNG khai object-fit,
   không ép aspect-ratio, không đặt height cố định — có vậy mặt mới còn nguyên.
   -------------------------------------------------------------------------- */

.gv-luoi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 1.75rem;
	margin: 1.25rem 0 1.75rem;
}

.gv-the { margin: 0; }

.gv-the img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
}

.gv-the figcaption {
	padding-top: .85rem;
	text-align: center;
}

.gv-the figcaption strong {
	display: block;
	color: var(--secondary-color, #111827);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

.gv-the figcaption span {
	display: block;
	margin-top: .35rem;
	color: #6b7280;
	font-size: 13.5px;
	line-height: 1.55;
}

@media (max-width: 575.98px) {
	.gv-luoi { gap: 1.25rem; }
}