/**
 * Section 12 — Blog. CLONE ban mau Fabrica (bo cuc), noi dung la BAI THAT.
 * Bang so day du + tham so ba hieu ung: template-parts/home/section-blog.php.
 */

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

	/*
	 * Vao man: spring bounce .1 dai 1.2s — quy tac `[data-w22-hien9]` khai o
	 * bang-gia.css, o day chi cap lai bien cho no ke thua xuong.
	 */
	--bg-cong: linear(
		0, 0.14 8.33%, 0.386 16.67%, 0.609 25%, 0.771 33.33%, 0.876 41.67%,
		0.938 50%, 0.973 58.33%, 0.99 66.67%, 0.998 75%, 1
	);

	/*
	 * Hover the bai: do duoc 485ms, hinh chu S RAT luoi o dau — 18% thoi gian
	 * dau anh moi nhich 3%, roi bung o quang 55-70%. Lay mau tung khung bang
	 * sampler rAF trong trang (bay §12: 7 moc la chua du, se ra goc gay).
	 */
	--bl-cong: linear(
		0, 0.003 10%, 0.029 18%, 0.054 25%, 0.089 32%, 0.139 39%, 0.212 46%,
		0.332 53%, 0.427 57%, 0.551 61%, 0.65 64%, 0.736 67%, 0.846 74%,
		0.914 82%, 0.958 88%, 0.988 96%, 1
	);

	/* Chu cuon trong nut: ~420ms, vot qua ~7% (cung ho voi Section 08/09/10). */
	--bl-nut-cong: linear(
		0, 0.132 3.75%, 0.332 7.5%, 0.545 11.75%, 0.807 18%, 0.967 24%,
		1.03 28%, 1.059 32.25%, 1.068 37.75%, 1.038 48.25%, 1.005 60.75%,
		0.996 73.25%, 0.998 88.75%, 1
	);
}

.w22-blog-khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 90px;
}

/* ======================================================================
   Hang tren: h2 | mo ta + nut — CANH DAY
   ====================================================================== */
.w22-blog-tren {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
	align-items: end;
}

/*
 * Hai tu dau mau #090909, phan sau rgba(10,10,10,.6) — lop `.w22-tu--mo` cua
 * so-lieu.css da dung dung mau nay.
 */
.w22-blog-tieu-de {
	font-size: var(--w22-chu-60);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
}

.w22-blog-tieu-de.w22-tu-hien .w22-tu {
	opacity: 1;
	transform: none;
}

.w22-blog-phu {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--w22-khe-3);
}

.w22-blog-mo-ta {
	max-width: 310px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Nut "Xem tat ca" (y het nut Section 10) ---------- */
.w22-blog-nut {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding: 9px 11px 9px 12px;
	background: var(--w22-toi);
	border-radius: 50px;
	overflow: hidden;
	color: var(--w22-tren-toi);
	transition: background-color 420ms var(--bl-nut-cong);
}

.w22-blog-nut:hover,
.w22-blog-nut:focus-visible {
	background: #000;
}

.w22-blog-nut__chu {
	position: relative;
	display: block;
	height: 12px;
	overflow: hidden;
}

.w22-blog-nut__a,
.w22-blog-nut__b {
	display: block;
	font-size: var(--w22-chu-12);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	white-space: nowrap;
	transition:
		transform 420ms var(--bl-nut-cong),
		opacity 420ms var(--bl-nut-cong);
}

.w22-blog-nut__a {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-20px);
	opacity: 0;
}

.w22-blog-nut:hover .w22-blog-nut__a,
.w22-blog-nut:focus-visible .w22-blog-nut__a {
	transform: translateY(0);
	opacity: 1;
}

.w22-blog-nut:hover .w22-blog-nut__b,
.w22-blog-nut:focus-visible .w22-blog-nut__b {
	transform: translateY(20px);
	opacity: 0;
}

/* Cham trang 8x8: ban mau chong HAI cham, cai duoi nhun tu .8 ve 1 khi hover. */
.w22-blog-nut__cham {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
}

.w22-blog-nut__cham i {
	position: absolute;
	inset: 0;
	background: var(--w22-tren-toi);
	border-radius: var(--w22-bo-tron);
	transition:
		transform 420ms var(--bl-nut-cong),
		opacity 420ms var(--bl-nut-cong);
}

.w22-blog-nut:hover .w22-blog-nut__cham i:nth-child(1),
.w22-blog-nut:focus-visible .w22-blog-nut__cham i:nth-child(1) {
	opacity: 0;
}

.w22-blog-nut__cham i:nth-child(2) {
	transform: scale(0.8);
}

.w22-blog-nut:hover .w22-blog-nut__cham i:nth-child(2),
.w22-blog-nut:focus-visible .w22-blog-nut__cham i:nth-child(2) {
	transform: scale(1);
}

/* ======================================================================
   Luoi ba the: [2 the bai] | [the anh]
   ====================================================================== */
.w22-blog-luoi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
}

.w22-blog-cot-bai {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
}

/* ---------- The bai ---------- */
.w22-blog-the {
	display: flex;
	min-height: 550px;
}

.w22-blog-the__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px;
	background: var(--w22-nen-the);
	border-radius: 18px;
	/* Bay §22: khoi chu nam trong link, canh trai cho chac. */
	text-align: left;
}

.w22-blog-the__tren {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/*
 * O anh 110 → 170 khi hover. Doi CHINH BE NGANG/CHIEU CAO (khong dung scale)
 * vi ban mau cung vay: bo goc giu dung 12px suot ca chang, scale se keo bo goc
 * phinh theo.
 *
 * 🔴 KHAC BAN MAU CO CHU DINH (anh Hien chot 26/08): ban mau de o VUONG
 * 110x110 vi anh cua no la chan dung doc. Anh dai dien bai that cua web22 la
 * banner og 1200x630 CO CHU — cat vuong thi chi con manh chu vo nghia (anh ghep
 * lan dau lo ra dung loi nay). Giu BE NGANG va nhip cua ban mau, ha chieu cao
 * theo dung ti le anh: 110x58 → 170x89.
 */
.w22-blog-the__o-anh {
	display: block;
	flex: none;
	width: 110px;
	height: 58px;
	border-radius: 12px;
	overflow: hidden;
	transition:
		width 485ms var(--bl-cong),
		height 485ms var(--bl-cong);
}

.w22-blog-the__anh {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dau + 18x18 tron den, goc phai tren, cach mep trong 10px. */
.w22-blog-cham {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
	background: var(--w22-toi);
	border-radius: var(--w22-bo-tron);
}

.w22-blog-cham i {
	position: absolute;
	background: var(--w22-tren-toi);
}

.w22-blog-cham i:nth-child(1) {
	left: 8px;
	top: 5px;
	width: 2px;
	height: 8px;
}

.w22-blog-cham i:nth-child(2) {
	left: 5px;
	top: 8px;
	width: 8px;
	height: 2px;
}

/*
 * Khoi chu duoi NEO DAY: khi hover no co lai 13px (khe 25 → 16 va 10 → 6) nen
 * doan trich dung yen con ngay va tieu de tut xuong. Do that ca hai trang thai.
 */
.w22-blog-the__duoi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	padding: 20px;
	transition: gap 485ms var(--bl-cong);
}

.w22-blog-the__link:hover .w22-blog-the__duoi,
.w22-blog-the__link:focus-visible .w22-blog-the__duoi {
	gap: 16px;
}

.w22-blog-the__link:hover .w22-blog-the__o-anh,
.w22-blog-the__link:focus-visible .w22-blog-the__o-anh {
	width: 170px;
	height: 89px;
}

.w22-blog-the__ngay {
	display: block;
	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-blog-the__chu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: gap 485ms var(--bl-cong);
}

.w22-blog-the__link:hover .w22-blog-the__chu,
.w22-blog-the__link:focus-visible .w22-blog-the__chu {
	gap: 6px;
}

/*
 * KHONG cat dong tieu de. Da thu chan 3 dong: o kho 1024 cot chi rong 190 nen
 * tieu de bai that (dai hon ban mau) bi XEN MAT CHU — ban mau cho no xuong
 * toi 4 dong. The cao 550 con dai, phan chu dai chi an vao khoang trang.
 */
.w22-blog-the__ten {
	font-size: var(--w22-chu-20);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-blog-the__ta {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- The anh (khoi trang tri, ban mau khong gan link) ---------- */
.w22-blog-anh {
	position: relative;
	display: flex;
	min-height: 550px;
	background: var(--w22-toi);
	border-radius: 18px;
	overflow: hidden;
}

.w22-blog-anh__nen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.78;
}

.w22-blog-anh__trong {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 0 60px;
}

.w22-blog-anh__tren {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-inline: 30px;
}

.w22-blog-anh__hieu {
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
}

/* Dau + 16x16 net 2px trang (giong dau + Section 10 nhung khong mo di). */
.w22-blog-cong {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.w22-blog-cong i {
	position: absolute;
	background: var(--w22-tren-toi);
}

.w22-blog-cong i:nth-child(1) {
	left: 7px;
	top: 0;
	width: 2px;
	height: 16px;
}

.w22-blog-cong i:nth-child(2) {
	left: 0;
	top: 7px;
	width: 16px;
	height: 2px;
}

.w22-blog-anh__lon {
	padding-right: 60px;
	font-size: 52px;
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	text-align: right;
	color: var(--w22-tren-toi);
}

/* ======================================================================
   Tablet
   ====================================================================== */
@media (max-width: 1024px) {
	.w22-blog-khung {
		gap: 60px;
	}

	/* Ban mau doi ti le hai cot o kho nay: 410 / 550 trong khung 964. */
	.w22-blog-tren {
		grid-template-columns: 410fr 550fr;
	}

	/* Do that: 50/55 — khong co token 50, dat thang nhu Section 10 dat 60. */
	.w22-blog-tieu-de {
		font-size: 50px;
	}

	.w22-blog-mo-ta {
		font-size: var(--w22-chu-14);
	}

	.w22-blog-the__duoi {
		padding: 14px;
	}

	.w22-blog-the__ta {
		font-size: var(--w22-chu-14);
	}

	.w22-blog-anh__trong {
		padding: 24px 0 40px;
	}

	.w22-blog-anh__tren {
		padding-inline: 24px;
	}

	.w22-blog-anh__lon {
		padding-right: 40px;
		font-size: 44px;
	}
}

/* ======================================================================
   Dien thoai
   ====================================================================== */
@media (max-width: 600px) {
	.w22-blog-khung {
		gap: 40px;
	}

	.w22-blog-tren {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.w22-blog-phu {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.w22-blog-mo-ta {
		max-width: 270px;
		font-size: 13px;
	}

	/* Do that: 32/35.2. */
	.w22-blog-tieu-de {
		font-size: 32px;
	}

	.w22-blog-luoi,
	.w22-blog-cot-bai {
		grid-template-columns: minmax(0, 1fr);
	}

	.w22-blog-the {
		min-height: 420px;
	}

	.w22-blog-the__duoi {
		padding: 20px;
	}

	.w22-blog-the__ta {
		font-size: 13px;
	}

	.w22-blog-anh {
		min-height: 430px;
	}

	.w22-blog-anh__trong {
		padding: 30px 0;
	}

	.w22-blog-anh__tren {
		padding-inline: 30px;
	}

	/* Kho nay ban mau doi ben: chu lon CANH TRAI. */
	.w22-blog-anh__lon {
		padding-right: 0;
		padding-left: 30px;
		font-size: 34px;
		text-align: left;
	}
}

/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.w22-blog-the__o-anh,
	.w22-blog-the__duoi,
	.w22-blog-the__chu,
	.w22-blog-nut,
	.w22-blog-nut__a,
	.w22-blog-nut__b,
	.w22-blog-nut__cham i {
		transition: none;
	}
}