/*
 * Hero trang chủ — Figma node 20:33 (1440×851, nằm ngay dưới header 85px)
 *
 * Header trang chủ trong suốt đè lên hero, nên hero chừa phía trên một dải navy cao bằng header
 * (khớp Figma: header navy + gradient hero bắt đầu từ navy) rồi mới tới khung ảnh 1440×851.
 * Khung ảnh co giãn theo chiều rộng (851/1440 = 59.097vw), tối thiểu 640px cho mobile.
 */

.vg-hero {
	--vg-header-h: 85px;
	--vg-hero-h: max(59.097vw, 640px);

	position: relative;
	overflow: hidden;
	padding-top: var(--vg-header-h);
	background-color: var(--vg-color-primary);
	color: #fff;
}

@media (max-width: 999.98px) {
	.vg-hero {
		--vg-header-h: 70px; /* chiều cao header tablet/mobile trong Blocksy */
	}
}

/* Các lớp nền: ảnh → gradient → vòng tròn → tiền cảnh */
.vg-hero__bg {
	position: absolute;
	top: var(--vg-header-h);
	left: 0;
	right: 0;
	height: var(--vg-hero-h);
	overflow: hidden;
	pointer-events: none;
}

/* Ảnh 2560×1600 neo mép trên, cao 105.76% khung như Figma → đáy ảnh (dòng chú thích) luôn bị cắt */
.vg-hero__photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% * 900 / 851);
	object-fit: cover;
	object-position: center top;
}

.vg-hero__gradient {
	position: absolute;
	top: 0;
	left: -10px;
	right: -10px;
	height: calc(var(--vg-hero-h) * 457 / 851);
	background: linear-gradient(
		180deg,
		rgb(22, 45, 82) 0%,
		rgba(29, 53, 92, 0.948) 21.357%,
		rgba(31, 57, 100, 0.873) 37.552%,
		rgba(35, 64, 112, 0.754) 54.51%,
		rgba(39, 72, 126, 0.619) 65.37%,
		rgba(59, 109, 189, 0) 100%
	);
}

.vg-hero__rings {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(var(--vg-hero-h) * 785 / 851);
	height: auto;
	max-width: none;
	transform: translateX(-50%);
}

/* Nội dung: vị trí theo Figma (VINHOMES y=67, THE GALLERY y=90, subtitle y=174, nút y=237) */
.vg-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: var(--vg-hero-h);
	padding: 67px 16px 0;
	text-align: center;
}

.vg-hero__eyebrow,
.vg-hero__title {
	margin: 0;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-family: var(--vg-font-heading);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.vg-hero__eyebrow {
	font-size: 20px;
	font-weight: 700;
	background-image: linear-gradient(147.65deg, #f5c3a8 0.62%, #f79878 54.63%, #f5c3a8 102.12%);
}

.vg-hero__title {
	max-width: 471px;
	margin-top: -7px;
	font-size: var(--vg-h1-size);
	font-weight: 900;
	background-image: linear-gradient(
		119.42deg,
		#fee8dd 0.62%,
		#f5c0a5 14.74%,
		#f79879 47.91%,
		#f79878 60.48%,
		#f5c3a8 77.11%,
		#fee8dd 102.12%
	);
	/* text-shadow sẽ đè lên chữ gradient (background-clip: text) → dùng drop-shadow */
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 6px rgba(7, 18, 36, 0.25));
}

.vg-hero__subtitle {
	margin: 0;
	color: #fff;
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.005em;
}

.vg-hero__cta {
	margin-top: 42px;
}

@media (max-width: 689.98px) {
	.vg-hero__content {
		padding-top: 48px;
	}

	.vg-hero__cta {
		margin-top: 32px;
	}
}