/**
 * Trang DANH SACH BLOG /blog/ — CLONE ban mau Fabrica `/blog`.
 * Bang so day du xem dau file `home.php`.
 *
 * The bai THUONG khong khai o day: dung lai `.w22-blog-the` cua Section 12
 * (`sections/blog.css`) — da doi chieu ban mau, hai noi trung khop tung so.
 * Duoi cung file nay chi ghi de dung MOT thu: chieu cao toi thieu 550 -> 520.
 */

/* ---------- Nhip doc rieng ----------
 * `.w22-than` mac dinh la nhip TRANG CHU (khe 190, khong dem tren). Trang /blog
 * cua ban mau: dem tren 340, khe giua khoi dau va luoi the 170.
 * Boc trong lop body de khong dung toi trang chu.
 */
.blog .w22-than,
.category .w22-than,
.tag .w22-than,
.search .w22-than {
	padding-top: 340px;
	gap: 170px;
}

.w22-tbl-dau,
.w22-tbl-luoi-khoi {
	padding-inline: var(--w22-le);
}

/* Giong Section 02/09/10/12 va trang /work/: chan 1520 roi can giua. */
.w22-tbl-khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

/* ---------- Khoi dau ---------- */
.w22-tbl-dau .w22-tbl-khung {
	display: flex;
	flex-direction: column;
	gap: 120px;
}

/*
 * Cao dong 0,96 dung y ban mau (142,08 / 148).
 * 🔴 Chat nhu vay chi AN TOAN KHI MOT DONG va khong co `overflow:hidden` o to
 * tien — dau hai tang cua tieng Viet tran ra ngoai hop dong nhung van hien
 * (cung cach da xu ly o h2 Section 06). Tieu de trang nay la "Blog." nen chac
 * chan mot dong. Trang danh muc dung lai lop nay thi ten danh muc dai co the
 * xuong hai dong — xem phan ghi de trong `archive.php`.
 */
.w22-tbl-h1 {
	font-size: var(--w22-chu-148);
	line-height: 0.96;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

/*
 * 🔴 Tieu de NHIEU DONG phai noi cao dong.
 * 0,96 chi an toan cho MOT dong ("Blog."). Ten danh muc va tu khoa tim kiem
 * bang tieng Viet dai hon nhieu, o 1024 tro xuong la xuong hai ba dong — luc do
 * dau hai tang cua dong duoi cham duoi dong tren. Noi len 1,02 nhu h2
 * Section 06 da xu ly.
 */
.w22-tbl-h1--dai {
	line-height: 1.02;
}

/* Luoi 4 cot khe 4: cot 1 nhan, cot 2-3 doan dan, cot 4 so dem. */
.w22-tbl-mo-ta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
	align-items: start;
}

.w22-tbl-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-tbl-cham {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--w22-toi);
}

.w22-tbl-cham svg {
	width: 100%;
	height: 100%;
}

/*
 * Doan dan 30/36 w500 — KHONG phai 16px nhu cac doan van khac. Do that o ban
 * mau: 30/36 @1440 va @1920 · 28/33,6 @1024 · 24/28,8 @390.
 * Mau chia hai khuc: may tu dau den dac, phan sau rgba(10,10,10,.6) — lo tach
 * tu `.w22-tu` lo phan mau, o day chi dat co chu va be ngang.
 */
.w22-tbl-dan {
	grid-column: 2 / span 2;
	text-indent: 3.63em;
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/*
 * Dong dau THUT VAO — bay §31. Ban mau nhet dau cach truoc chu roi
 * `white-space: pre-wrap`; ta tach tu o PHP nen dau cach mat, dung text-indent
 * cho tuong duong va tu co gian theo co chu. Do that: thut 109px @30px,
 * 102px @28px, 87px @24px — deu ra 3,63em nen mot con so dung cho ca ba kho.
 *
 * 🔴 text-indent KE THUA: moi tu la mot `inline-block` nen cung la khoi chua,
 * khong tra ve 0 thi TU NAO CUNG thut 3,63em va doan van no gap may lan.
 */
.w22-tbl-dan .w22-tu {
	text-indent: 0;
}

/*
 * Cot 4 — ban mau CHUA MOT KHOANG TRONG ben trai roi moi toi chu (khoi
 * <Filler> rong 106,3 + <Text> 222,7). Neo phai bang margin-left:auto cho ra
 * dung ket qua ma khong phai them the rong.
 */
.w22-tbl-dem {
	max-width: 223px;
	margin-left: auto;
	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;
}

.w22-tbl-dem span {
	color: var(--w22-muc);
	opacity: 1;
}

/* ---------- Luoi the ----------
 * Ban mau chia hai khoi: hang dau (the noi bat + 2 the) roi luoi 4 cot.
 * O day dung MOT luoi 4 cot, the noi bat chiem 2 cot — ra dung cung ket qua
 * ma khong phai tach truy van lam hai vong lap.
 */
.w22-tbl-luoi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

.w22-tbl-luoi.is-co-noi-bat > .w22-tbl-noi-bat {
	grid-column: span 2;
}

/* Chieu cao the o trang nay la 520, khac 550 cua Section 12. */
.w22-tbl-luoi .w22-blog-the {
	min-height: 520px;
}

/* ---------- The noi bat ---------- */
.w22-tbl-noi-bat {
	display: flex;
	min-height: 520px;
}

.w22-tbl-noi-bat__link {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 18px;
	background: var(--w22-toi);
	/* Bay §22: khoi chu nam trong <a>, canh trai cho chac. */
	text-align: left;
}

/*
 * 🔴 LAM NHOE NEN — ban mau KHONG co, va day la ho bay §40 lan thu hai.
 * Ban mau dung anh chan dung nghe thuat, khong co chu. Anh dai dien bai web22
 * la banner og 1200x630 CO SAN TIEU DE IN TRONG ANH. Cat vao khung 682x520
 * (mat 31% be ngang) thi chu trong anh vo thanh manh vun, roi chong len chinh
 * tieu de cua the — anh ghep lo ra ngay, bang so thi sach tron.
 * Lam nhoe bien no thanh mot nen co van, dung y do ban mau, ma khong con hai
 * lop chu danh nhau. Phong to 1,08 de vien nhoe khong ho mep.
 * (Nhoe cung nam trong ngon ngu san co cua ban mau: the nguoi Section 10 nhoe
 * blur(5px) khi hover.)
 */
.w22-tbl-noi-bat__anh {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(9px) saturate(0.8);
	transform: scale(1.08);
	transition: transform 620ms var(--w22-duong-cong);
}

.w22-tbl-noi-bat__link:hover .w22-tbl-noi-bat__anh,
.w22-tbl-noi-bat__link:focus-visible .w22-tbl-noi-bat__anh {
	transform: scale(1.13);
}

/*
 * 🔴 Lop toi — ban mau KHONG co (anh ben do toi san). Anh dai dien bai web22
 * la banner og nen SANG nen thieu lop nay la chu trang mat hut.
 * Dai chuyen tu day len, khong phai mot mau phang: phan tren van thay ro anh.
 */
.w22-tbl-noi-bat__phu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(10, 10, 10, 0.94) 0%,
		rgba(10, 10, 10, 0.82) 38%,
		rgba(10, 10, 10, 0.55) 72%,
		rgba(10, 10, 10, 0.4) 100%
	);
}

.w22-tbl-noi-bat__chu {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 40px;
	color: var(--w22-tren-toi);
}

.w22-tbl-noi-bat__ngay {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.7;
}

.w22-tbl-noi-bat__ten {
	max-width: 400px;
	font-size: 38px;
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: -0.05em;
}

.w22-tbl-noi-bat__ta {
	max-width: 400px;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.7;
}

/* ---------- Phan trang ----------
 * Ban mau khong co (chi 7 bai). Web22 433 bai nen bat buoc. Kieu dang bam
 * theo nut den bo tron cua ban mau.
 */
.w22-tbl-luoi-khoi .w22-tbl-khung {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.w22-tbl-luoi-khoi .navigation.pagination {
	display: flex;
	justify-content: center;
}

.w22-tbl-luoi-khoi .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.w22-tbl-luoi-khoi .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding-inline: 14px;
	border-radius: 50px;
	background: var(--w22-nen-the);
	font-size: var(--w22-chu-15);
	line-height: 1;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	transition:
		background-color var(--w22-vua-tg) var(--w22-duong-cong),
		color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-tbl-luoi-khoi .page-numbers:hover,
.w22-tbl-luoi-khoi .page-numbers:focus-visible {
	background: #ebebeb;
}

.w22-tbl-luoi-khoi .page-numbers.current {
	background: var(--w22-toi);
	color: var(--w22-tren-toi);
}

.w22-tbl-luoi-khoi .page-numbers.dots {
	background: none;
	min-width: 20px;
	padding-inline: 0;
}

.w22-tbl-trong {
	font-size: var(--w22-chu-20);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ============================================================ @1024 */
@media (max-width: 1024px) {
	.blog .w22-than,
	.category .w22-than,
	.tag .w22-than,
	.search .w22-than {
		padding-top: 260px;
		gap: 120px;
	}

	.w22-tbl-dau .w22-tbl-khung {
		gap: 90px;
	}

	.w22-tbl-h1 {
		font-size: 118px;
	}

	/* Ban mau @1024: hang dau 480 + 480, luoi duoi 2 cot 480. */
	.w22-tbl-luoi {
		grid-template-columns: repeat(2, 1fr);
	}

	.w22-tbl-luoi.is-co-noi-bat > .w22-tbl-noi-bat {
		grid-column: span 1;
	}

	/* 🔴 Khoi mo ta GIU NGUYEN 4 cot o 1024 — do that ban mau: doan dan van
	   rong 480 (dung 2 cot) va cot 4 van neo phai. Chi luoi THE moi rut ve 2. */
	.w22-tbl-dan {
		font-size: 28px;
	}

	.w22-tbl-nhan {
		font-size: var(--w22-chu-14);
	}

	.w22-tbl-dem {
		max-width: 155px;
		font-size: var(--w22-chu-14);
	}

	.w22-tbl-noi-bat__ten {
		font-size: 30px;
	}

	.w22-tbl-noi-bat__ngay {
		font-size: 11px;
	}

	.w22-tbl-noi-bat__ta {
		font-size: var(--w22-chu-14);
	}

	.w22-tbl-luoi-khoi .w22-tbl-khung {
		gap: 60px;
	}
}

/* ============================================================ @600 */
@media (max-width: 600px) {
	.blog .w22-than,
	.category .w22-than,
	.tag .w22-than,
	.search .w22-than {
		padding-top: 140px;
		gap: 60px;
	}

	.w22-tbl-dau .w22-tbl-khung {
		gap: 42px;
	}

	.w22-tbl-h1 {
		font-size: 64px;
	}

	.w22-tbl-luoi {
		grid-template-columns: 1fr;
	}

	.w22-tbl-mo-ta {
		grid-template-columns: 1fr;
		row-gap: 34px;
	}

	/* Ban mau BO HAN nhan o kho dien thoai — do that: khong con the chu "Blog". */
	.w22-tbl-nhan {
		display: none;
	}

	.w22-tbl-dan {
		grid-column: 1;
		font-size: 24px;
	}

	.w22-tbl-dem {
		max-width: 300px;
		margin-left: 0;
		font-size: 13px;
	}

	/* Ban mau @390: the noi bat cao 470, the thuong 420. */
	.w22-tbl-noi-bat {
		min-height: 470px;
	}

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

	.w22-tbl-noi-bat__chu {
		padding: 30px;
	}

	.w22-tbl-noi-bat__ten {
		font-size: 24px;
	}

	.w22-tbl-noi-bat__ta {
		font-size: 13px;
	}

	.w22-tbl-luoi-khoi .w22-tbl-khung {
		gap: 40px;
	}
}