/**
 * Hero trang chủ.
 *
 * Hero là một bố cục dạng tranh: mọi phần tử đặt theo đúng tọa độ trong thiết kế 1920 × 1040
 * và co giãn tỉ lệ theo bề rộng khung (--u = 1px thiết kế). Khung tối đa 1920px, căn giữa.
 */

.hero {
	position: relative;
	background-color: var(--color-bg);
}

.hero__stage {
	--u: calc(100cqw / 1920);

	container-type: inline-size;
	position: relative;
	width: min(100%, var(--page-max));
	aspect-ratio: 1920 / 1040;
	margin-inline: auto;
}

/* Ảnh nền (phượng hoàng + phối cảnh). Đáy tan dần vào màu nền thay vì cắt ngang tòa nhà. */
.hero__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hero-bg) center top / 100% auto no-repeat; /* ảnh cao 1082, phần dư bị cắt ở đáy */
	-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

/* Màn rộng hơn 1920: ảnh không phủ hết bề ngang, làm mờ hai cạnh bên để không lộ mép cắt */
@media (min-width: 1921px) {
	.hero__stage::before {
		-webkit-mask-image:
			linear-gradient(to bottom, #000 82%, transparent),
			linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to bottom, #000 82%, transparent),
			linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		mask-composite: intersect;
	}
}

.hero__stage img {
	display: block;
	width: 100%;
	height: auto;
}

.hero__logo,
.hero__title,
.hero__stat,
.hero__buttons {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
}

/* Tọa độ theo Figma (đã quy đổi sang thiết kế rộng 1920) */
.hero__logo {
	--x: 355;
	--y: 165;
	--w: 156;
}

.hero__title {
	--x: 133;
	--y: 377;
	--w: 628;

	margin: 0;
}

.hero__stats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__stat {
	--stat-num: calc(115 * var(--u)); /* theo PDF/Figma ở màn 1920 */
	--stat-unit: calc(36 * var(--u));

	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-heading);
	transition: transform 450ms var(--ease-bounce);
}

.hero__stat:hover {
	transform: scale(1.12);
}

.hero__stat:nth-child(1) { --x: 116; --y: 553; --w: 205; } /* 1.577 */
.hero__stat:nth-child(2) { --x: 456; --y: 553; --w: 196; } /* 3.13 HA */
.hero__stat:nth-child(3) { --x: 129; --y: 703; --w: 227; } /* 05 TÒA NOXH */
.hero__stat:nth-child(4) { --x: 433; --y: 683; --w: 344; } /* QUÝ III / 2028 */

/* Chú thích dưới số liệu (chữ thật) */
.hero__stat-caption {
	margin-top: calc(4 * var(--u));
	color: #7a7a7a;
	font-size: max(calc(14 * var(--u)), 0.625rem);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.hero__stat:nth-child(4) .hero__stat-caption {
	margin-top: calc(10 * var(--u)); /* chừa chỗ cho đuôi chữ Q */
	padding-left: calc(60 * var(--u));
}

/* Hai nút kêu gọi */
.hero__buttons {
	--x: 116;
	--y: 865;
	--w: 600;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(21 * var(--u));
}

.hero__button {
	display: inline-flex;
	align-items: center;
	height: max(calc(57 * var(--u)), 2.25rem);
	padding: 0 calc(17 * var(--u));
	border: 1px solid var(--color-heading);
	font-family: var(--font-title);
	font-size: max(calc(25 * var(--u)), 0.9375rem);
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: filter var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.hero__button--solid {
	background: var(--color-heading);
	color: var(--color-white);
}

.hero__button--solid:hover {
	filter: brightness(1.08);
}

.hero__button--outline {
	background: var(--color-white);
	color: var(--color-heading);
}

.hero__button--outline:hover {
	background: #fff4ed;
}
/* ------------------------------------------------------------------------
 * Cụm nút liên hệ nhanh: nằm trong hero (không bám theo khi cuộn), đúng vị trí thiết kế
 * ---------------------------------------------------------------------- */

.floating-contact {
	--fc-size: max(calc(50 * var(--u)), 2.25rem);

	position: absolute;
	top: calc(619 * var(--u));
	left: calc(1756 * var(--u));
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--fc-size);
}

.floating-contact__toggle {
	display: grid;
	place-items: center;
	width: calc(var(--fc-size) * 0.59);
	height: calc(var(--fc-size) * 0.59);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.floating-contact__toggle:hover {
	opacity: 0.8;
}

.floating-contact__toggle img {
	width: 100%;
	height: 100%;
}

.floating-contact.is-collapsed .floating-contact__toggle {
	transform: rotate(180deg);
}

.floating-contact__list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--fc-size) * 0.3);
	margin-top: calc(var(--fc-size) * 0.1);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.floating-contact.is-collapsed .floating-contact__list {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
}

/* Nút tròn gradient theo Figma: dưới #F26E23 → trên #FCB618 */
.floating-contact__btn {
	display: grid;
	place-items: center;
	width: var(--fc-size);
	height: var(--fc-size);
	border-radius: var(--radius-pill);
	background: linear-gradient(to top, #f26e23, #fcb618);
	color: var(--color-white);
	box-shadow: 0 4px 12px rgb(238 70 35 / 0.25);
	transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.floating-contact__btn:hover {
	transform: scale(1.08);
	box-shadow: var(--shadow-raised);
}

/* Nút có sẵn hình tròn trong file SVG (360°, gọi điện) thì không vẽ nền */
.floating-contact__btn--image {
	background: none;
}

.floating-contact__btn--image img {
	width: 100%;
	height: 100%;
}

.floating-contact__text {
	font-size: calc(var(--fc-size) * 0.3);
	font-weight: var(--fw-bold);
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero__stat:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------------
 * Hiệu ứng khi tải trang:
 * logo + tagline hiện dần (0.6s) → 4 số liệu bay vào từ trái cùng lúc (0.8s) → 2 nút bay vào (0.6s).
 * fill-mode "backwards": chỉ giữ trạng thái ẩn trong lúc chờ, hết hiệu ứng không ảnh hưởng hover.
 * ---------------------------------------------------------------------- */

@keyframes hero-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes hero-fly-in {
	from {
		opacity: 0;
		translate: -80px 0;
	}
}

/* JS gắn .is-active khi hero vào màn hình và gỡ khi rời đi → hiệu ứng chạy lại mỗi lần quay về.
   Không có JS: không ẩn, không hiệu ứng. */
.js .hero:not(.is-active) :is(.hero__logo, .hero__title, .hero__stat, .hero__button) {
	opacity: 0;
}

.hero.is-active .hero__logo,
.hero.is-active .hero__title {
	animation: hero-fade-in 600ms var(--ease) backwards;
}

.hero.is-active .hero__stat {
	animation: hero-fly-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 600ms backwards;
}

.hero.is-active .hero__button {
	animation: hero-fly-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 1400ms backwards;
}

@media (prefers-reduced-motion: reduce) {
	.js .hero:not(.is-active) :is(.hero__logo, .hero__title, .hero__stat, .hero__button) {
		opacity: 1;
	}

	.hero.is-active :is(.hero__logo, .hero__title, .hero__stat, .hero__button) {
		animation: none;
	}
}

/* ------------------------------------------------------------------------
 * Desktop: cụm liên hệ nhanh cố định theo màn hình khi cuộn, sát mép phải
 * (nằm trong khoảng lề, không đè nội dung).
 * ---------------------------------------------------------------------- */
@media (min-width: 1280px) {
	.floating-contact {
		--fc-size: clamp(2.25rem, 0.75rem + 1.875vw, 3.125rem); /* 36 → 50 */

		position: fixed;
		top: auto;
		right: max(0.75rem, calc((100vw - var(--page-max)) / 2 + 0.75rem));
		bottom: clamp(1.5rem, 10vh, 6rem);
		left: auto;
		z-index: var(--z-floating);
	}
}