/**
 * Trang DANH SACH DU AN /work/ — CLONE ban mau Fabrica `/projects`.
 * Bang so day du xem dau file `archive-case_study.php`.
 *
 * The du an KHONG khai o day: dung lai `.w22-the-da` cua Section 02
 * (`sections/du-an.css`) — da doi chieu ban mau, hai trang giong het nhau.
 */

/* ---------- Nhip doc rieng cua trang nay ----------
 * `.w22-than` mac dinh la nhip TRANG CHU (khe 190, khong dem tren). Trang danh
 * sach cua ban mau chay nhip khac han: dem tren 340 va khe giua hai khoi 80.
 * Boc trong lop body de khong dung toi trang chu.
 */
.post-type-archive-case_study .w22-than {
	padding-top: 340px;
	gap: 80px;
}

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

/* Giong Section 02/09/10/12: chan 1520 roi can giua, khong full-bleed. */
.w22-tda-khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
}

/* ---------- Intro ----------
 * Luoi 4 cot khe 4. h1 chiem 2 cot dau, khoi chu bat dau o cot 3.
 */
.w22-tda-tieu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--w22-khe-the);
}

.w22-tda-h1 {
	grid-column: span 2;
	font-size: var(--w22-chu-144);
	line-height: 0.92; /* 132,48 / 144 — cung ti le voi Section 02 */
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

/*
 * 🔴 Be ngang 377 la CO DINH, khong phai be ngang cot: o 1440 cot chi rong 339
 * nen khoi nay tran sang phan khe, con o 1920 cot dung 377 thi vua khit. Chep
 * theo cot se hut 38px o 1440 (ho bay §45, nguoc chieu).
 * Canh DAY cho chan chu ngang chan chu h1.
 */
.w22-tda-chu {
	grid-column: 3 / span 2;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 377px;
	max-width: 100%;
	padding-bottom: 18px;
}

.w22-tda-nam,
.w22-tda-mo-ta {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-tda-mo-ta {
	opacity: 0.6;
}

/* ---------- Bo loc ---------- */
.w22-tda-loc {
	display: flex;
	align-items: center;
	gap: var(--w22-khe-the);
}

.w22-tda-o {
	position: relative;
	display: flex;
	align-items: center;
	height: 48px;
	border-radius: 14px;
	background: var(--w22-nen-the);
	overflow: hidden;
}

.w22-tda-o--tim {
	width: 270px;
	padding-inline: 15px;
	gap: 8px;
}

.w22-tda-o__icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-tda-o__icon svg {
	width: 100%;
	height: 100%;
}

/*
 * 🔴 `<input>` mac dinh la inline-block → o chua dư ~4,8px khoang trong duong
 * co so, day lech ca hang (bay §41 — da tra gia o form chan trang).
 */
.w22-tda-o__nhap {
	display: block;
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	appearance: none;
}

.w22-tda-o__nhap::placeholder {
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-tda-o__nhap::-webkit-search-cancel-button {
	appearance: none;
}

.w22-tda-o--chon {
	width: 150px;
}

.w22-tda-o__chon {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 32px 0 15px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	appearance: none;
	cursor: pointer;
}

/* Mui ten tu ve — `appearance:none` da go mui ten mac dinh cua trinh duyet. */
.w22-tda-o__mui {
	position: absolute;
	right: 15px;
	display: flex;
	width: 12px;
	height: 12px;
	color: var(--w22-muc);
	opacity: 0.6;
	pointer-events: none;
}

.w22-tda-o__mui svg {
	width: 100%;
	height: 100%;
}

/* ---------- Luoi the ---------- */
.w22-tda-luoi {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
}

/* Loc chay phia trinh duyet: an bang `hidden` de khong pha nhip luoi. */
.w22-tda-muc[hidden] {
	display: none;
}

.w22-tda-trong {
	margin-top: 40px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

/* ---------- Man hep ----------
 * 🔴 Diem ngat cua theme (1024/600) khong trung Framer (1200/810) — xem muc
 * "Con mot cho lech ban mau" trong AGENTS.md. Luoi the o day GIU 2 COT tai
 * 1024 (dung ban mau), chi ve 1 cot o <=600.
 * Rieng SO DO CUA THE (`.w22-the-da`) o kho hep nay nam trong `du-an.css` —
 * component dung chung voi Section 02, da va cho khop ban mau 27/08.
 */
@media (max-width: 1024px) {
	.post-type-archive-case_study .w22-than {
		padding-top: 260px;
		gap: 40px;
	}

	.w22-tda-tieu {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.w22-tda-h1 {
		grid-column: auto;
		font-size: 99px;
	}

	/*
	 * GIU dem duoi 18: ban mau chi bo no o kho dien thoai (do that — 1440/1920/
	 * 1024 deu `padding: 0 0 18px`, rieng 390 la 0).
	 */
	.w22-tda-chu {
		grid-column: auto;
		align-self: start;
	}

}

@media (max-width: 600px) {
	.post-type-archive-case_study .w22-than {
		padding-top: 140px;
		gap: 30px;
	}

	.w22-tda-tieu {
		gap: 16px;
	}

	.w22-tda-h1 {
		font-size: 62px;
	}

	.w22-tda-chu {
		width: 100%;
		padding-bottom: 0;
	}

	/*
	 * 🔴 Ban mau xep doc VA dao thu tu: o chon nhay LEN TREN o tim. Toa do moi
	 * lo (o tim y=399, o chon y=347) — bang so khong thay vi hai o van dung co.
	 */
	.w22-tda-loc {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.w22-tda-o--tim,
	.w22-tda-o--chon {
		width: 100%;
	}

	/*
	 * 🔴 Khe bo loc -> luoi TUT tu 40 xuong 4 o kho dien thoai (do that: bo loc
	 * ket thuc o y=447, luoi bat dau y=451). Bang so khong lo vi ca hai khoi van
	 * dung cỡ — ANH GHEP moi thay: ban dung day het luoi xuong 36px.
	 */
	.w22-tda-luoi {
		margin-top: var(--w22-khe-the);
		grid-template-columns: 1fr;
	}

}