/**
 * Trang CHI TIET DU AN /work/{slug} — CLONE ban mau Fabrica `/projects/{slug}`.
 * Bang so day du xem dau file `single-case_study.php`.
 *
 * The du an o khoi "Dự án khác" dung lai `.w22-the-da` (sections/du-an.css),
 * nut den dung `.w22-nut-den` (base.css) — khong khai lai o day.
 */

/* ---------- Nhip doc rieng cua trang nay ----------
 * `.w22-than` chi con MOT con (<article>) nen khe cua no khong an — dat khe
 * ngay tren <article>.
 */
.single-case_study .w22-than {
	padding-top: 340px;
}

.w22-ct {
	display: flex;
	flex-direction: column;
	gap: 180px;
}

.w22-ct > section {
	padding-inline: var(--w22-le);
}

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

/* ---------- 1. Intro ---------- */
.w22-ct-dau .w22-ct-khung {
	display: flex;
	flex-direction: column;
	gap: 120px;
}

.w22-ct-h1 {
	font-size: 148px;
	line-height: 0.96;   /* 142,08 / 148 */
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-ct-noi {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

/* Hang "nhan | doan dan": luoi hai cot deu, khe 4. */
.w22-ct-dan {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
}

/*
 * Doan dan RONG 630 CO DINH o ca 1440 lan 1920 (cot rong 682 va 758) — day la
 * px cung that, khong phai ti le. O kho hep thi bam theo cot.
 */
.w22-ct-dan__chu {
	width: min(630px, 100%);
	/* Giu 18 dau cach dau chuoi de thut dong dau — xem ghi chu trong khuon PHP. */
	white-space: pre-wrap;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

/* ---------- Nhan nho: dau + tron den + chu ----------
 * `align-self: start` la BAT BUOC: nhan la o luoi, de mac dinh `stretch` thi
 * hop cao bang ca hang roi `align-items:center` day chu xuong giua — lech han
 * ban mau (nhan luon ngang dong dau cua doan ben canh).
 */
.w22-ct-nhan {
	display: inline-flex;
	align-self: start;
	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);
}

.w22-ct-nhan__cong {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50px;
	background: var(--w22-toi);
}

.w22-ct-nhan__cong i {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--w22-tren-toi);
	transform: translate(-50%, -50%);
}

.w22-ct-nhan__cong i:first-child {
	width: 2px;
	height: 8px;
}

.w22-ct-nhan__cong i:last-child {
	width: 8px;
	height: 2px;
}

/* ---------- Bang thong tin ----------
 * Cot TRAI de trong: day khoi nhan/gia tri sang nua phai bang margin thay vi
 * dung luoi, de <dl> giu dung cau truc the (dt/dd la con truc tiep cua div).
 */
.w22-ct-bang {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-ct-bang__hang {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: 19px;
}

/* Vien tren 1px ve bang ::after — khong chiem cho, giu chieu cao hang 59. */
.w22-ct-bang__hang::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	border-top: 1px solid var(--w22-net-2);
}

.w22-ct-bang__nhan {
	margin-left: calc(50% + var(--w22-khe-the) / 2);
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.5;
}

.w22-ct-bang__gia {
	margin-left: auto;
	display: flex;
	gap: 10px;
	text-align: right;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

/* Nhieu hang muc: moi cai co dau "/" mo dung truoc. */
.w22-ct-bang__muc {
	display: inline-flex;
	align-items: center;
	gap: var(--w22-khe-the);
}

.w22-ct-bang__muc i {
	font-style: normal;
	opacity: 0.24;
}

/* ---------- Hai anh doi ---------- */
.w22-ct-anh-doi {
	display: flex;
	gap: var(--w22-khe-the);
	padding-top: 20px;
}

.w22-ct-anh-doi .w22-ct-anh {
	flex: 1;
	min-width: 0;
	aspect-ratio: 682 / 547.3;
	border-radius: 25px;
}

/*
 * 🔴 Anh cua ta la anh chup TOAN TRANG (cao vai nghin px), khong phai anh chup
 * mot khung nhu ban mau. Neo mep TREN de lay dung phan dau trang; de mac dinh
 * `center` thi ra mot khuc giua trang, nhin nhu anh bi cat bay.
 */
.w22-ct-anh {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* ---------- 2. Khoi chu ---------- */
.w22-ct-khoi__luoi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

.w22-ct-khoi .w22-ct-nhan {
	grid-column: span 2;
	align-self: start;
}

.w22-ct-khoi__chu {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}

.w22-ct-khoi__lon {
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-ct-khoi__phu {
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

/* Ban mau de khe chu -> nut la 60, trong khi khe trong khoi chu la 40. */
.w22-ct-khoi__chu .w22-nut-den {
	margin-top: 20px;
}

/* ---------- 3. Bo anh lon ---------- */
.w22-ct-bo-anh .w22-ct-khung {
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-ct-anh--lon {
	aspect-ratio: 1368 / 837;
	border-radius: 25px;
}

/* ---------- 4. Du an khac ---------- */
.w22-ct-ke .w22-ct-khung {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.w22-ct-ke__dau {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.w22-ct-ke__hieu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--w22-chu-20);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
}

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

.w22-ct-ke__h2 {
	font-size: var(--w22-chu-144);
	line-height: 0.92;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-ct-ke__luoi {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
}

/* ---------- Man hep ---------- */
@media (max-width: 1024px) {
	.single-case_study .w22-than {
		padding-top: 260px;
	}

	.w22-ct {
		gap: 120px;
	}

	.w22-ct-dau .w22-ct-khung {
		gap: 80px;
	}

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

	.w22-ct-noi {
		gap: 90px;
	}

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

	.w22-ct-dan__chu {
		font-size: 19px;
	}

	/* Ban mau bo dem-tren 20 cua hai anh doi tu 1024 tro xuong. */
	.w22-ct-anh-doi {
		padding-top: 0;
	}

	/*
	 * 🔴 Tu 1024 tro xuong ban mau BO cot trai de trong: nhan chay ve sat le
	 * trai, gia tri van neo phai (do that: nhan o x=30 tai 1024, x=20 tai 390 —
	 * dung bang le ngang cua trang).
	 */
	.w22-ct-bang__nhan {
		margin-left: 0;
		font-size: 11px;
	}

	.w22-ct-bang__gia {
		font-size: var(--w22-chu-14);
	}

	.w22-ct-khoi__lon {
		font-size: 28px;
	}

	.w22-ct-khoi__phu {
		font-size: var(--w22-chu-16);
	}

	.w22-ct-khoi__chu {
		gap: 30px;
	}

	.w22-ct-ke .w22-ct-khung {
		gap: 80px;
	}

	.w22-ct-ke__dau {
		gap: 26px;
	}

	.w22-ct-ke__hieu {
		font-size: 19px;
	}

	.w22-ct-ke__h2 {
		font-size: 99px;
	}

	/* Khac trang danh sach: khoi nay chi co hai the nen ban mau xep DOC tu 1024. */
	.w22-ct-ke__luoi {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.single-case_study .w22-than {
		padding-top: 140px;
	}

	.w22-ct {
		gap: 50px;
	}

	.w22-ct-dau .w22-ct-khung {
		gap: 30px;
	}

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

	.w22-ct-noi {
		gap: 40px;
	}

	/* Nhan len tren, doan dan xuong duoi — khe 28. */
	.w22-ct-dan {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.w22-ct-nhan {
		font-size: 13px;
	}

	.w22-ct-dan__chu {
		font-size: var(--w22-chu-18);
	}

	.w22-ct-bang__gia {
		font-size: 13px;
	}

	.w22-ct-anh-doi {
		flex-direction: column;
	}

	.w22-ct-anh-doi .w22-ct-anh,
	.w22-ct-anh--lon {
		border-radius: 18px;
	}

	.w22-ct-khoi__luoi {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.w22-ct-khoi .w22-ct-nhan,
	.w22-ct-khoi__chu {
		grid-column: auto;
	}

	.w22-ct-khoi__lon {
		font-size: 24px;
	}

	.w22-ct-khoi__phu {
		font-size: var(--w22-chu-15);
	}

	.w22-ct-khoi__chu {
		gap: 20px;
	}

	.w22-ct-ke .w22-ct-khung {
		gap: 40px;
	}

	.w22-ct-ke__dau {
		gap: 17px;
	}

	.w22-ct-ke__hang {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--w22-khe-3);
	}

	.w22-ct-ke__h2 {
		font-size: 62px;
	}

	.w22-ct-ke__hieu {
		font-size: var(--w22-chu-18);
	}
}