/**
 * Section 01 — Hero. CLONE ban mau Fabrica.
 * Xem bang so day du trong template-parts/home/section-hero.php.
 */

.w22-hero {
	position: relative;
}

/* ---------- Man dau: cao dung 100vh, nen sang ---------- */
.w22-hero__man {
	height: 100vh;
	height: 100dvh;
	min-height: 640px;
	padding-top: calc(var(--w22-header-cao) + 1px); /* do duoc 61 khi header 60 */
	background: var(--w22-nen);
}

/*
 * The toi: ban mau thut 4px moi mep (trai/phai/duoi), khong thut tren.
 * Container pad: 0 4px 4px.
 */
.w22-hero__the {
	position: relative;
	/* Ban mau: the cao 835 khi khung trong cao 839 -> tru dung khe 4px o day. */
	height: calc(100% - var(--w22-khe-the));
	margin-inline: var(--w22-khe-the);
	overflow: hidden;
	background: var(--w22-toi);
	padding: var(--w22-khe-7) var(--w22-le);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--w22-tren-toi);
}

/*
 * Do that: video nam trong div boc opacity .7 + filter grayscale(1),
 * phia sau la nen den #0a0a0a — nho vay video toi va xam han di.
 * Thieu lop nay la video sang trung, lech han ban mau (da tra gia).
 */
.w22-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.7;
	filter: grayscale(1);
}

.w22-hero__tren,
.w22-hero__cong,
.w22-hero__duoi {
	position: relative;
	z-index: 1;
}

/* ---------- Khoi tren: ten thuong hieu + danh sach dich vu ---------- */
.w22-hero__tren {
	display: flex;
	align-items: center;
}

/* Ban mau: Company chiem 75% Top, Services 25%. */
.w22-hero__cong-ty {
	flex: 0 0 75%;
	max-width: 75%;
	padding-right: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

/*
 * Chu "Web22." (da lat sang that 26/08 — truoc do la "fabrica®").
 * 🔴 BAY: getComputedStyle cua ban mau bao font-size 201.1px, NHUNG Framer boc
 * chu trong SVG "fit text" roi KEO GIAN ca khoi — co chu render THAT lon hon.
 * Dat dung 201.1px chi ra 599px, ban mau 765px. Phai suy nguoc tu BE NGANG:
 *   he so Inter w600 ls-0.06em (do bang chinh font tu host): "fabrica" 2,9803
 *   px/1px co chu · "Web22." 3,3903. Chuoi doi thi he so doi — phai tinh lai.
 *   Giu dung be ngang cua ban mau: 765@1440 / 1071@1920
 *   -> co chu 225,64px @1440 · 315,90px @1920.
 * Cao dong dat theo chieu cao hop cua ban mau (khong phai 1.2 mac dinh).
 */
.w22-hero__ten {
	display: flex;
	align-items: flex-start;
	margin: 0;
	font-weight: var(--w22-dam);
	white-space: nowrap;
}

/*
 * 🔴 letter-spacing PHAI dat ngay tren the co font-size to.
 * Dat o the CHA (h1, font-size 32px) thi -0.06em ra -1.92px roi ke thua xuong
 * duoi dang do dai co dinh -> chu phinh ra 860 thay vi 765. Da tra gia mot vong.
 */
.w22-hero__chu {
	font-size: calc(18.804vw - 45.1px);
	line-height: 0.814;  /* giu dung ti le hop chu cua ban mau */
	letter-spacing: var(--w22-gian-to);
}

/*
 * Dau cham cuoi wordmark LUON coral — cam nang §A3 goi day la diem nhan dien
 * va cam doi mau. Day la mau DUY NHAT ngoai he den-trang cua ban mau.
 */
/*
 * (Khong con dung — giu lai ghi chu vi bay nay se gap lai o cho khac)
 * 🔴 Dau ® KHONG dung glyph "®" cua Inter: Inter ve no be nhu chi so tren,
 * trong khi ban mau la VONG TRON TO (do tren anh: duong kinh ~104px, net ~9px)
 * — vi Framer keo gian hop glyph cho day 117x193. Ve lai bang SVG de chu dong.
 * Hop 117x193 @1440 -> 164x270 @1920: width = calc(9.792vw - 23.9px).
 */
.w22-hero__r {
	flex: none;
	width: calc(9.792vw - 23.9px);
	aspect-ratio: 117 / 193;
	display: flex;
	align-items: center;
	justify-content: center;
}

.w22-hero__r svg {
	width: 89%;   /* 104 / 117 */
	height: auto;
}

/* "Studio": 65.5px @1440 -> 91.6px @1920 (cung bay keo gian nhu tren). */
.w22-hero__studio {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	font-size: calc(5.455vw - 13.1px);
	line-height: 1.192;  /* 78 / 65.5 */
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
}

/* O dem ben phai "Studio" — do duoc 14% be ngang khoi Title. */
.w22-hero__dem {
	flex: 0 0 14%;
}

/* Danh sach dich vu: 4 dong, cao dong 22, cach nhau 33-34. */
.w22-hero__dich-vu {
	flex: 0 0 25%;
	max-width: 25%;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.w22-hero__dich-vu li {
	font-size: var(--w22-chu-18);
	line-height: 1.2;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
}

/* ---------- Bon dau + chia deu ---------- */
.w22-hero__cong {
	display: flex;
	justify-content: space-between;
	padding-inline: 4px;
	font-size: 22px;
	line-height: 1;
	font-weight: 300;
	color: var(--w22-tren-toi-mo-2);
}

/* ---------- Khoi duoi ---------- */
.w22-hero__duoi {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-end;
	gap: var(--w22-khe-4);
}

.w22-hero__cau {
	max-width: 490px;
	font-size: var(--w22-chu-22);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	/* Ban mau canh GIUA trong khoi (soi anh: tam 3 dong ~282/280/266). */
	text-align: center;
}

/* Ban mau: cau dau trang dac, phan sau trang 70%. */
.w22-hero__cau span {
	color: var(--w22-tren-toi-mo);
}

.w22-hero__ban-quyen {
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	color: var(--w22-tren-toi);
	white-space: nowrap;
}

.w22-hero__ban-quyen sup,
.w22-hero__noi sup {
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
}

/* ---------- Goc phai khoi duoi: DE TRONG ----------
 * Ban mau de o day mot the trang 340x186 co anh nhan su, ben duoi la nut
 * "Let's talk". Da bo anh (anh stock) nen bo luon the; 27/08 anh Hien chot bo
 * NOT nut "Trao doi nhanh" — hero khong con loi moi hanh dong nao.
 * 🔴 GIU nguyen luoi `1fr auto 1fr` cua .w22-hero__duoi: cot 3 nay bo trong
 * chinh la thu giu dong ban quyen dung o GIUA the nhu ban mau. Rut ve 2 cot la
 * ban quyen lech sang phai.
 * Cac lop chung .w22-cuon--cham da chuyen ve base.css (nut Section 03 con dung).
 */

/* ---------- Dai logo khach: DA BO HAN (27/08) ----------
 * Ban mau de o day dai 6 logo khach. Ta khong co logo khach nen tung thay
 * bang 6 du an that; den khi Section 02 cung lat sang du an that thi hai cho
 * ra y het nhau. Anh Hien chot bo dai nay, giu Section 02 lam cho khoe du an
 * duy nhat. Hero nay chi con mot man toi 100vh.
 */

/* ---------- Man hep ---------- */
@media (max-width: 1024px) {
	.w22-hero__the {
		padding: var(--w22-khe-5) var(--w22-le);
	}

	.w22-hero__tren {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--w22-khe-4);
	}

	.w22-hero__cong-ty {
		flex: none;
		max-width: 100%;
		width: 100%;
		padding-right: 0;
		align-items: flex-start;
	}

	/* Co chu nam o __chu, KHONG o __ten — de nham thi chu tut con 32px. */
	.w22-hero__chu {
		font-size: 23vw;
	}

	.w22-hero__dich-vu {
		flex: none;
		max-width: 100%;
	}

	.w22-hero__dich-vu li {
		font-size: var(--w22-chu-16);
	}

	.w22-hero__cong {
		display: none;
	}

	.w22-hero__duoi {
		grid-template-columns: 1fr;
		gap: var(--w22-khe-3);
	}

}

@media (max-width: 600px) {
	.w22-hero__cau {
		font-size: var(--w22-chu-18);
	}
}