/**
 * Section 06 — Testimonials. CLONE ban mau Fabrica.
 * Bang so day du xem template-parts/home/section-danh-gia.php.
 *
 * Noi dung da lat sang danh gia khach THAT (27/08) — xem dau file PHP.
 */

/* Khe doc do `.w22-than` lo (xem --w22-khe-section) — section chi co le ngang. */
.w22-danh-gia {
	padding-inline: var(--w22-le);
}

.w22-danh-gia__khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

/* ---------- Khoi dau: luoi 4 cot, khe 4 ---------- */
.w22-danh-gia__dau {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-danh-gia__nhan {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-danh-gia__cham {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--w22-toi);
}

.w22-danh-gia__cham svg {
	width: 100%;
	height: 100%;
}

.w22-danh-gia__tieu {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

/*
 * Ban mau: 144px / 132.48px = cao dong 0.92.
 * KHONG chep `overflow:hidden` cua ban mau — chu Viet co dau hai tang o co nay
 * se bi xen mu. Khong co overflow thi cao dong chat van an toan cho MOT dong;
 * o kho hep de xuong hai dong nen phai noi ra (xem @600).
 */
.w22-danh-gia__tieu-de {
	font-size: var(--w22-chu-144);
	line-height: 0.92;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-danh-gia__nam {
	font-size: var(--w22-chu-36);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

/* ---------- Luoi the ---------- */
.w22-danh-gia__luoi {
	margin-top: 90px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- Cot 1: the gioi thieu ----------
 * Ban mau dat CHIEU CAO 630 cho rieng the nay, ba cot kia gian theo hang luoi.
 * Dung `min-height` chu khong `height`: chu Viet dai hon, can cho no no ra.
 */
.w22-dg-gioi {
	min-height: 630px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-dg-gioi__tren {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

/* "4.9" va "/5" canh DAY voi nhau (do that: hai mep duoi deu o 366). */
.w22-dg-gioi__diem {
	display: flex;
	align-items: flex-end;
	flex: none;
	font-size: 56px;
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
}

.w22-dg-gioi__diem span {
	margin-bottom: 2px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}


/* Ba khuc hai mau: xam - den - xam. */
.w22-dg-gioi__chu {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-dg-gioi__chu span {
	color: var(--w22-muc-mo);
}

.w22-dg-gioi__duoi {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.w22-dg-gioi__tin {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.w22-dg-gioi__hieu {
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/*
 * 🔴 PHAI co `flex-wrap: wrap`.
 * Ban mau la `flex row` nhung o 1440 tong be ngang cua hai khoi (136 + 12 + 151
 * = 299) VUOT o chua 279 nen khoi sao TUT XUONG HANG DUOI; len 1920 (o chua
 * 317) thi no nam canh dai mat. Bang so khong lo ra chuyen nay — anh ghep moi
 * thay: khong wrap thi chu "Duoc khach hang khap noi tin dung" bi bop lai.
 * Khe 12px dung chung cho ca hai chieu.
 */
.w22-dg-gioi__hang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* ---------- Dai mat nguoi dung ----------
 * Ban mau: 5 o 40x40 cach nhau 24 => chong nhau 16. Vien 3px ve bang ::after
 * (phu len, khong chiem cho) mau nen trang => tach cac o khoi nhau.
 */
.w22-dg-mat {
	display: flex;
	align-items: center;
	flex: none;
}

.w22-dg-mat > li {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	flex: none;
}

.w22-dg-mat > li + li {
	margin-left: -16px;
}

.w22-dg-mat > li::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px solid var(--w22-nen);
	border-radius: 11px;
	pointer-events: none;
}

.w22-dg-mat img {
	width: 100%;
	height: 100%;
	border-radius: 11px;
	object-fit: cover;
}

.w22-dg-mat__so {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--w22-muc-2);
}

.w22-dg-mat__so span {
	font-size: 11px;
	line-height: 1.3;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
}

.w22-dg-gioi__sao {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.w22-sao {
	display: block;
	width: 56px;
	height: 12px;
	flex: none;
	fill: var(--w22-sao);
}

.w22-dg-gioi__sao p {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
}

.w22-dg-gioi__sao span {
	color: rgba(21, 21, 21, 0.6);
}

/* ---------- Nut moi tu van ---------- */
.w22-dg-nut {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	border-radius: 50px;
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
	font-size: var(--w22-chu-18);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	transition: background-color var(--w22-vua-tg) var(--w22-duong-cong);
	/* 🔴 khung chu cuon phai cao hon line-height, khong thi xen dau tieng Viet */
	--cuon-cao: 28px;
}

/* Ban mau: nen dam them khi hover (#0a0a0a -> #000). */
.w22-dg-nut:hover {
	background: #000;
}

/* ---------- Cot 2-4: the danh gia ---------- */
.w22-dg-the {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-dg-the__nguoi {
	display: flex;
	align-items: center;
	gap: var(--w22-khe-2);
	flex: none;
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-dg-the__mat {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 7px;
	object-fit: cover;
}

/* Link sang trang du an, dat vao cho ban mau de 5 ngoi sao. */
.w22-dg-the__xem {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(10, 10, 10, 0.3);
	transition: text-decoration-color 0.25s ease;
}

.w22-dg-the__xem:hover {
	text-decoration-color: currentColor;
}

.w22-dg-the__danh {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.w22-dg-the__ten {
	font-size: var(--w22-chu-18);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-dg-the__vai {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
	opacity: 0.6;
}

.w22-dg-the__loi {
	flex: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--w22-khe-4);
	padding: 30px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-dg-the__dinh {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex: none;
}

/* Chi la hoa tiet — ban mau de con tro `default`, khong bam duoc. */
.w22-dg-the__cong {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--w22-toi);
	opacity: 0.3;
}

.w22-dg-the__cong svg {
	width: 100%;
	height: 100%;
}

.w22-dg-the__chu {
	font-size: 26px;
	line-height: 1.15;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-2);
}

/* Cot 3: DAO — loi khen len tren (chu canh tren), the nguoi xuong duoi. */
.w22-dg-the--dao .w22-dg-the__nguoi {
	order: 2;
}

.w22-dg-the--dao .w22-dg-the__dinh {
	order: 2;
}

/* ---------- Hieu ung vao man ----------
 * 🔴 Section nay CO hieu ung that (khac section 05 — xem bay §15 trong
 * AGENTS.md). Chi MO DAN, KHONG dich chuyen. ~800ms, do tre so le mo TU GIUA
 * RA NGOAI: the 3 = 0 · the 2 = 70 · the 4 = 170 · the 1 = 270 (dat bang bien
 * --dg-tre ngay tren tung the trong file PHP).
 * Duong cong chep tu chinh phep do (lay mau tung khung hinh), khong uom bezier.
 */
.w22-danh-gia [data-w22-hien] {
	transform: none;
	transition: opacity 800ms var(--w22-cong-hien) var(--dg-tre, 0ms);
}

.w22-danh-gia [data-w22-hien].w22-da-hien {
	transform: none;
}

:root {
	--w22-cong-hien: linear(
		0,
		0.07 5.4%,
		0.22 12.9%,
		0.392 20.6%,
		0.503 26%,
		0.628 32.9%,
		0.754 41.5%,
		0.859 52%,
		0.916 60.9%,
		0.951 69.1%,
		0.974 77.5%,
		0.987 86.1%,
		0.995 94.5%,
		1
	);
}

/* ---------- Man hep ----------
 * So lieu lay dung cua ban mau; moc 1024/600 la cua theme (xem AGENTS.md).
 */
@media (max-width: 1024px) {
	.w22-danh-gia__dau {
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
	}

	.w22-danh-gia__tieu {
		grid-column: auto;
		gap: var(--w22-khe-2);
	}

	.w22-danh-gia__tieu-de {
		font-size: 99px;
	}

	.w22-danh-gia__nam {
		font-size: 30px;
	}

	.w22-danh-gia__luoi {
		margin-top: 60px;
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Ban mau ep CA HAI hang deu 500. Chi dat min-height cho the gioi thieu thi
	 * hang 2 co lai theo noi dung (do duoc 1045 thay vi 1206) — phai dat cho ca
	 * the danh gia.
	 */
	.w22-dg-gioi,
	.w22-dg-the {
		min-height: 500px;
	}

	.w22-dg-the__chu {
		font-size: 23px;
	}
}

@media (max-width: 600px) {
	.w22-danh-gia__nhan {
		font-size: 13px;
	}

	/*
	 * Giu nguyen cao dong 0.92 cua ban mau.
	 * Da chup kiem: o 390 tieu de gon MOT dong; o 360 xuong HAI dong nhung soi
	 * anh phong to thi hai dong van khong cham nhau — moc cua "a" o dong tren
	 * va mu "e" o dong duoi con khe, dau nang duoi "e" khong dinh "©2025".
	 * Neu sau nay doi chu dai hon thi phai chup lai truoc khi tin.
	 */
	.w22-danh-gia__tieu-de {
		font-size: 62px;
	}

	.w22-danh-gia__nam {
		font-size: 23px;
	}

	.w22-danh-gia__luoi {
		margin-top: 30px;
		grid-template-columns: 1fr;
	}

	.w22-dg-gioi {
		min-height: 0;
		padding: 24px;
	}

	/* Ban mau xep DOC diem va doan chu o kho dien thoai. */
	.w22-dg-gioi__tren {
		flex-direction: column;
		gap: var(--w22-khe-2);
	}

	.w22-dg-gioi__diem {
		font-size: 42px;
	}

	/*
	 * `min-height:0` lam `space-between` het tac dung (the co lai bang noi dung)
	 * nen phai tu dat khe. Ban mau do duoc 20px giua khoi tren va khoi duoi.
	 */
	.w22-dg-gioi__duoi {
		margin-top: 20px;
		gap: var(--w22-khe-3);
	}

	.w22-dg-the {
		min-height: 400px;
	}

	.w22-dg-the__nguoi,
	.w22-dg-the__loi {
		padding: 24px;
	}

	.w22-dg-the__chu {
		font-size: 22px;
	}

	/*
	 * Ban mau o kho dien thoai: MOI the deu thanh kieu "loi khen tren, nguoi
	 * duoi", nhung BEN TRONG the loi khen thi tro lai thu tu thuong
	 * (sao o tren, chu don xuong day).
	 */
	.w22-dg-the__nguoi {
		order: 2;
	}

	.w22-dg-the--dao .w22-dg-the__dinh {
		order: 0;
	}
}