/**
 * Chan trang — CLONE ban mau Fabrica, thong tin lien he THAT.
 * Bang so day du + hai hieu ung + cac cho khac ban mau: footer.php.
 */

.w22-chan {
	background: var(--w22-nen);

	/*
	 * Hover link chan trang: do duoc ~500ms, VOT QUA ~6.7% roi lui ve (spring
	 * nhe) — lay mau tung khung bang sampler rAF, khong uom bang mat.
	 * Cung ho voi duong cong nut cua Section 08/09/10/12.
	 */
	--ch-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-chan__tren {
	padding: 200px var(--w22-le) 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

.w22-chan__tren .w22-chan__khung {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* ======================================================================
   Khoi tren: cau dan | dang ky nhan bai
   ====================================================================== */
.w22-chan__moi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
}

.w22-chan__moi-trai {
	padding-right: 80px;
}

/*
 * Thut dong dau: ban mau nhet 18 dau cach vao chinh chuoi + white-space:
 * pre-wrap (18 x 0,2278em = 4,1em) — cung thu thuat voi Section 09/10. O day
 * dung `text-indent` cho sach, ket qua trung khit vi doan nay KHONG tach tu
 * (bay §31 chi dinh khi moi tu la mot inline-block).
 */
.w22-chan__dan {
	max-width: 600px;
	text-indent: 4.1em;
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

/* Nguoc voi cac section khac: phan DAU mo, cum CUOI den. */
.w22-chan__dan-mo {
	color: var(--w22-muc-mo);
}

.w22-chan__moi-phai {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.w22-chan__tieu {
	font-size: 38px;
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc-2);
}

/* ---------- Form dang ky nhan bai (noi that 27/08, xem inc/dang-ky.php) ---------- */
.w22-chan__form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

/*
 * Ban mau boc hai o trong MOT <label> khe 35, roi form khe 40 giua label va nut.
 * De ba con phang trong form thi khe giua hai o thanh 40 + dem — form cao them
 * 24,8px va keo lech ca chan trang. Bang so bat duoc ngay o dong «form».
 */
.w22-chan__o-nhom {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.w22-chan__o {
	position: relative;
	width: 100%;
	padding-bottom: 20px;
}

.w22-chan__o::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
}

/*
 * `display: block` la BAT BUOC: input mac dinh inline-block nen o chua con
 * chua them khe duong co so (~4,8px) — form cao len va keo lech ca chan trang.
 */
.w22-chan__nhap {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--w22-chu-18);
	/* Do that: hop input cao dung 20px (khong phai 21,6 cua line-height 1,2). */
	line-height: 20px;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-chan__nhap::placeholder {
	color: var(--w22-muc);
	opacity: 0.4;
}

.w22-chan__nhap:focus {
	outline: none;
}

.w22-chan__o:focus-within::after {
	background: var(--w22-muc);
}

/*
 * Bay chong may gui — day ra ngoai man thay vi `display: none`: may gui thuong
 * bo qua o bi an han, con o day thi no van dien vao va tu lo mat.
 */
.w22-chan__bay {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Loi nhan ket qua — CHI hien sau khi bam nut, nen khong tinh vao bang so cua
 * trang thai mac dinh.
 * 🔴 Dung `--w22-nen-the` (#fff), KHONG dung `--w22-nen` nhu khoi bao Section 13:
 * `--w22-nen` la #f5f5f5, dung bang nen khoi «Top» cua chan trang → tang hinh.
 */
.w22-chan__bao {
	max-width: 470px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--w22-nen-the);
	font-size: var(--w22-chu-14);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-chan__bao--loi,
.w22-chan__bao--spam {
	background: #fdecec;
}

.w22-chan__form-ta {
	max-width: 290px;
	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 "Dang ky" (y het nut Section 10/12) ---------- */
.w22-chan__nut {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding: 9px 11px 9px 12px;
	background: var(--w22-toi);
	border: 0;
	border-radius: 50px;
	overflow: hidden;
	color: var(--w22-tren-toi);
	cursor: pointer;
	transition: background-color 420ms var(--ch-cong);
}

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

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

.w22-chan__nut-a,
.w22-chan__nut-b {
	display: block;
	font-family: inherit;
	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(--ch-cong),
		opacity 420ms var(--ch-cong);
}

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

.w22-chan__nut:hover .w22-chan__nut-a,
.w22-chan__nut:focus-visible .w22-chan__nut-a {
	transform: translateY(0);
	opacity: 1;
}

.w22-chan__nut:hover .w22-chan__nut-b,
.w22-chan__nut:focus-visible .w22-chan__nut-b {
	transform: translateY(20px);
	opacity: 0;
}

.w22-chan__nut-cham {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
}

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

.w22-chan__nut:hover .w22-chan__nut-cham i:nth-child(1),
.w22-chan__nut:focus-visible .w22-chan__nut-cham i:nth-child(1) {
	opacity: 0;
}

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

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

/* ======================================================================
   Khoi «Links»: lien he | dieu huong + mang xa hoi + logo
   ====================================================================== */
.w22-chan__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
}

/* Dau + 16x16 net 2px mo .3 — moc dau moi cot. */
.w22-chan__cong {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	opacity: 0.3;
}

.w22-chan__cong i {
	position: absolute;
	background: var(--w22-muc);
}

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

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

.w22-chan__cot-lh {
	padding-right: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 80px;
}

.w22-chan__lien-he {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

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

.w22-chan__mail {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--w22-muc-2);
}

/* Cham tron 18x18 co dau + trang — giong cham cua the blog Section 12. */
.w22-chan__mail-cham {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--w22-toi);
	border-radius: var(--w22-bo-tron);
}

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

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

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

/*
 * Gach chan 2px nam duoi hop chu 4px va KHONG chiem cho (ban mau dat absolute
 * ngoai hop) — de dem duoi thi hop link cao 43,4 thay vi 37,4.
 */
.w22-chan__mail-chu {
	position: relative;
	font-size: var(--w22-chu-34);
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

.w22-chan__mail-chu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	height: 2px;
	background: var(--w22-muc);
}

/* ---------- Cot phai: hai nhom link + logo ---------- */
.w22-chan__cot-nav {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

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

.w22-chan__nhom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 80px;
}

.w22-chan__nhom-trong {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.w22-chan__nhan {
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-chan__ds {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	list-style: none;
}

/*
 * Hover: chu day sang phai 15px va cham 8x8 hien ra o mep trai. Dat khe bang
 * padding cua chinh link (khong phai `gap` cua flex) de luc nghi no ve dung 0 —
 * cung bai hoc voi bay §16.
 */
.w22-chan__muc {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--w22-muc);
	transition: padding-left 500ms var(--ch-cong);
}

.w22-chan__muc-cham {
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: var(--w22-muc);
	border-radius: var(--w22-bo-tron);
	opacity: 0;
	transition: opacity 500ms var(--ch-cong);
}

.w22-chan__muc:hover,
.w22-chan__muc:focus-visible {
	padding-left: 15px;
}

.w22-chan__muc:hover .w22-chan__muc-cham,
.w22-chan__muc:focus-visible .w22-chan__muc-cham {
	opacity: 0.25;
}

.w22-chan__muc-chu,
.w22-chan__mxh-chu {
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
}

.w22-chan__mxh {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--w22-muc);
}

/* Khung cao 11 giu HAI ban mui ten chong nhau; hover thi ca hai truot 16px. */
.w22-chan__mui {
	position: relative;
	display: block;
	width: 10px;
	height: 11px;
	overflow: hidden;
	color: var(--w22-muc);
	opacity: 0.3;
}

.w22-chan__mui svg {
	display: block;
	transition: transform 500ms var(--ch-cong);
}

.w22-chan__mui svg:nth-child(1) {
	position: absolute;
	left: 0;
	top: -16px;
}

.w22-chan__mxh:hover .w22-chan__mui svg,
.w22-chan__mxh:focus-visible .w22-chan__mui svg {
	transform: translateY(16px);
}

/* ---------- Logo lon (fit-text — xem bay §1 trong footer.php) ---------- */
.w22-chan__logo {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/*
 * Chu lon "Web22." phu tron be ngang cot (kieu fit-text cua ban mau).
 * 🔴 He so PHU THUOC CHUOI: "fabrica®" la 3,575 px/1px co chu nen he so cu la
 * 0,2797; "Web22." do duoc 3,3903 nen phai doi thanh 1/3,3903 = 0,29496.
 * Giu he so cu thi chu hut ~5% be ngang cot.
 */
.w22-chan__logo-lon {
	font-size: calc(0.29496 * 100cqw);
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
	white-space: nowrap;
}

.w22-chan__logo-phu {
	font-size: 58px;
	line-height: 1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

/* ======================================================================
   Thanh day
   ====================================================================== */
.w22-chan__day {
	padding: 42px var(--w22-le);
	background: linear-gradient(90deg, #0a0a0a 0%, #050505 85%);
	color: var(--w22-tren-toi);
}

.w22-chan__day-luoi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--w22-khe-the);
	align-items: center;
}

.w22-chan__ban-quyen {
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	opacity: 0.6;
}

.w22-chan__day-links {
	display: flex;
	align-items: center;
	gap: 40px;
}

.w22-chan__day-links a {
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 280ms var(--ch-cong);
}

.w22-chan__day-links a:hover,
.w22-chan__day-links a:focus-visible {
	text-decoration-color: currentColor;
}

/* ======================================================================
   Tablet
   ====================================================================== */
@media (max-width: 1024px) {
	.w22-chan__tren {
		padding: 140px var(--w22-le) 100px;
	}

	.w22-chan__tren .w22-chan__khung {
		gap: 70px;
	}

	.w22-chan__dan {
		font-size: 28px;
	}

	.w22-chan__tieu {
		font-size: 30px;
	}

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

	.w22-chan__mail-chu {
		font-size: 30px;
	}

	/* Khe trong cot va giua hai khoi cua cot phai deu HEP LAI o kho nay. */
	.w22-chan__cot-lh,
	.w22-chan__nhom {
		gap: 70px;
	}

	.w22-chan__cot-nav {
		gap: 90px;
	}

	.w22-chan__nhan {
		font-size: 13px;
	}

	.w22-chan__muc-chu,
	.w22-chan__mxh-chu {
		font-size: 19px;
	}

	.w22-chan__logo-phu {
		font-size: 44px;
	}

	.w22-chan__ban-quyen {
		font-size: 13px;
	}

	.w22-chan__day-links a {
		font-size: var(--w22-chu-14);
	}
}

/* ======================================================================
   Dien thoai
   ====================================================================== */
@media (max-width: 600px) {
	.w22-chan__tren {
		padding: 50px var(--w22-le);
	}

	.w22-chan__tren .w22-chan__khung {
		gap: 40px;
	}

	/*
	 * 🔴 «Điều hướng» va «Mạng xã hội» VAN NAM CANH NHAU o kho nay (do that:
	 * hai cot 173px trong khung 350). Xep doc la sai — anh ghep moi lo, bang
	 * so khong bat duoc vi tung khoi con van dung co.
	 */
	.w22-chan__moi,
	.w22-chan__links {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.w22-chan__moi-trai,
	.w22-chan__cot-lh {
		padding-right: 0;
	}

	.w22-chan__cot-lh,
	.w22-chan__nhom,
	.w22-chan__cot-nav {
		gap: 40px;
	}

	/* Do that: form 30 · nhom o 24 (ban desktop la 40 · 35). */
	.w22-chan__form {
		gap: 30px;
	}

	.w22-chan__o-nhom {
		gap: 24px;
	}

	.w22-chan__dan {
		font-size: 24px;
	}

	.w22-chan__tieu {
		font-size: 24px;
	}

	.w22-chan__form-ta {
		font-size: 13px;
	}

	.w22-chan__mail-chu {
		font-size: 26px;
	}

	.w22-chan__nhan {
		font-size: var(--w22-chu-12);
	}

	.w22-chan__muc-chu,
	.w22-chan__mxh-chu {
		font-size: var(--w22-chu-18);
	}

	.w22-chan__logo-phu {
		font-size: var(--w22-chu-34);
	}

	/* Do that: thanh day o kho nay le ngang 24 (khong theo token 20) va dem doc 40. */
	.w22-chan__day {
		padding: 40px 24px;
	}

	.w22-chan__day-luoi {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.w22-chan__day-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.w22-chan__ban-quyen {
		font-size: var(--w22-chu-12);
	}

	.w22-chan__day-links a {
		font-size: 13px;
	}
}

/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.w22-chan__muc,
	.w22-chan__muc-cham,
	.w22-chan__mui svg,
	.w22-chan__nut,
	.w22-chan__nut-a,
	.w22-chan__nut-b,
	.w22-chan__nut-cham i,
	.w22-chan__day-links a {
		transition: none;
	}
}