/**
 * Section 02 — Projects. CLONE ban mau Fabrica.
 * Bang so day du xem template-parts/home/section-du-an.php.
 */

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

/* Khac section 01: KHONG full-bleed — container chan o 1520 roi can giua. */
.w22-du-an__khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

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

.w22-du-an__dem {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/* Tieu de chiem 2 cot giua. */
.w22-du-an__tieu-de {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.w22-du-an__tieu-de h2 {
	font-size: var(--w22-chu-144);
	line-height: 0.92;   /* 132.48 / 144 */
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-du-an__nam {
	margin-top: 23px;
	font-size: var(--w22-chu-36);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-du-an__mo-ta {
	padding: 64px 0 0 40px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/* ---------- Luoi du an: 2 cot x 3 hang, khe 4 ---------- */
.w22-du-an__luoi {
	margin-top: 90px;   /* do lai 27/08: khe khoi dau -> luoi la 90, khong phai 91 */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- The du an ---------- */
.w22-the-da {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
	color: var(--w22-muc);
}

/* Thanh dau: nen trang bo 18, pad 18/24, cao 58. */
.w22-the-da__dau {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	height: 58px;
	padding: 18px 24px;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

.w22-the-da__ten {
	font-size: var(--w22-chu-18);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
}

.w22-the-da__nam {
	font-size: var(--w22-chu-12);
	line-height: 1.3;   /* 15,6 / 12 — do lai 27/08, truoc de 1.33 ra 15,96 */
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	margin-bottom: 2px;
}

/* Ban mau: chi CON SO mo di, dau "/" van dam. */
.w22-the-da__nam span {
	opacity: 0.6;
}

/* Ba cham 8px, cach nhau 11 -> khe 3. */
.w22-the-da__cham {
	margin-left: auto;
	margin-bottom: 3px;
	display: flex;
	gap: 3px;
	flex: none;
}

.w22-the-da__cham i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--w22-net);
	transition: background-color var(--w22-vua-tg) var(--w22-duong-cong);
}

/*
 * Khoi anh: nen trang bo 18, ti le giu nguyen o moi kho man.
 * Do lai 27/08 tren ca bon kho: 682x499,312 · 758x555 · 480x351,4 · 350x256,3
 * — deu ra 1,36587. Truoc lam tron thanh 682/499 nen thap hon ban mau 0,3px.
 */
.w22-the-da__than {
	position: relative;
	aspect-ratio: 682 / 499.312;
	border-radius: 18px;
	background: var(--w22-nen-the);
}

/* Khung anh thut 4px moi mep, bo 16, cat anh phong to. */
.w22-the-da__khung {
	position: absolute;
	inset: var(--w22-khe-the);
	border-radius: 16px;
	overflow: hidden;
	transition: inset var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-the-da__anh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--w22-cham) var(--w22-duong-cong);
}

/* Lop phu lam anh toi lai — ban mau .15, hover .2. */
.w22-the-da__phu {
	position: absolute;
	inset: 0;
	background: var(--w22-toi);
	opacity: 0.15;
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

/*
 * 🔴 `.w22-the-da__logo` DA BO (27/08). Ban mau de logo khach de giua anh the;
 * ta khong co logo khach ma luat theme cam bia, nen ca ba cho dung the nay
 * (Section 02 · trang /work/ · khoi "Dự án khác") deu khong ve logo nua.
 */

/* ---------- Hover (do that tren ban mau) ---------- */
.w22-the-da:hover .w22-the-da__phu {
	opacity: 0.2;
}

/* Khung anh no het thut 4px. */
.w22-the-da:hover .w22-the-da__khung {
	inset: 0;
}

.w22-the-da:hover .w22-the-da__anh {
	transform: scale(1.13);
}

/* 🔴 Chi tiet dat gia cua ban mau: ba cham doi thanh den giao thong. */
.w22-the-da:hover .w22-the-da__cham i:nth-child(1) { background: #fd5f59; }
.w22-the-da:hover .w22-the-da__cham i:nth-child(2) { background: #ffbb2c; }
.w22-the-da:hover .w22-the-da__cham i:nth-child(3) { background: #25c93d; }

/* ---------- Man hep ----------
 * 🔴 VA LAI 27/08. Truoc day phan nay uom bang mat chu khong do: theme cho
 * Section 02 XEP DOC ngay tu 1024 va tu ha co chu theo cam tinh. Do that ban
 * mau o 1024 thi no VAN LA LUOI 4 COT nhu 1440, chi nho lai; mai toi kho dien
 * thoai moi xep doc. Sai keo theo: h2 88 thay vi 99, mo ta 16 thay vi 14, luoi
 * 1 cot thay vi 2, khe dau->luoi 264 thay vi 202.
 *
 * Do duoc (ban mau, y tinh tu dinh section):
 *   1024: "(27)" 14/19,6 · h2 99/91,08 · ©2025 y112 30/30 · mo ta 14/19,6
 *         dem-trai 40 dem-tren 52 · khe khoi dau -> luoi 60
 *    390: xep doc, khe 16 · "(27)" 13/18,2 · h2 62/57,04 · ©2025 y105 23/23
 *         · mo ta 13/18,2 khong dem · khe khoi dau -> luoi 30
 */
@media (max-width: 1024px) {
	.w22-du-an__dem {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}

	.w22-du-an__tieu-de h2 {
		font-size: 99px;
	}

	.w22-du-an__nam {
		margin-top: 21px;
		font-size: var(--w22-chu-30);
	}

	.w22-du-an__mo-ta {
		padding: 52px 0 0 40px;
		font-size: var(--w22-chu-14);
	}

	.w22-du-an__luoi {
		margin-top: 60px;
	}

	/* The: chi co chu la nho lai, hinh khoi giu nguyen (do that ca hai trang). */
	.w22-the-da__ten {
		font-size: var(--w22-chu-15);
		line-height: 1.2;
	}
}

@media (max-width: 600px) {
	.w22-du-an__dau {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.w22-du-an__dem {
		font-size: 13px;
	}

	.w22-du-an__tieu-de {
		grid-column: auto;
	}

	.w22-du-an__tieu-de h2 {
		font-size: 62px;
	}

	.w22-du-an__nam {
		margin-top: 14px;
		font-size: 23px;
	}

	.w22-du-an__mo-ta {
		padding: 0;
		font-size: 13px;
	}

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

	/* Ca cai the co lai mot nac, khong chi doi dem ngang nhu truoc. */
	.w22-the-da__dau {
		height: 50px;
		padding: 16px 20px;
		gap: 16px;
		border-radius: 14px;
	}

	.w22-the-da__cham {
		gap: 2px;
		margin-bottom: 2px;
	}

	.w22-the-da__cham i {
		width: 6px;
		height: 6px;
	}

	.w22-the-da__than {
		border-radius: 14px;
	}

	.w22-the-da__khung {
		border-radius: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-the-da__anh,
	.w22-the-da__khung,
	.w22-the-da__phu,
	.w22-the-da__cham i {
		transition: none;
	}
}