/* Pxl Title — hero + ornament (cùng palette landing). */

.pxl-title-block {
	color: var(--ink);
	font-family: "Be Vietnam Pro", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.pxl-title-block *,
.pxl-title-block *::before,
.pxl-title-block *::after {
	box-sizing: border-box;
}

.pxl-title-block .shell {
	max-width: 780px;
	margin: 0 auto;
	padding: 0px;
	position: relative;
	z-index: 1;
}

.pxl-title-block section.hero {
	text-align: center;
}

.orn {
	width: 100%;
	justify-content: center;
}

.pxl-title-block .orn,
.orn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #E9926B
}

.pxl-title-block .orn .l,
.orn .l {
	width: 48px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #E9926B);
}

.pxl-title-block .orn .l.r,
.orn .l.r {
	background: linear-gradient(90deg, #E9926B, transparent);
}

.pxl-title-block .orn .d,
.orn .d {
	width: 6px;
	height: 6px;
	background: #E9926B;
	transform: rotate(45deg);
	box-shadow: 0 0 10px color-mix(in srgb, #E9926B 60%, transparent);
}

.pxl-title-block .orn .d.h,
.orn .d.h {
	background: transparent;
	border: 1px solid #E9926B;
}

.pxl-title-block section.hero .pxl-title-heading {
	font-family: "Be Vietnam Pro", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 6vw, 58px);
	line-height: 1.28;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	-webkit-text-fill-color: transparent;
	background: #E9926B;
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 12px #d4b89640);
}

.pxl-title-block section.hero h2.pxl-title-heading {
	font-size: clamp(30px, 5.2vw, 50px);
}

.pxl-title-block section.hero h3.pxl-title-heading {
	font-size: clamp(26px, 4.5vw, 42px);
}

.pxl-title-block section.hero h4.pxl-title-heading {
	font-size: clamp(22px, 3.8vw, 34px);
}

.pxl-title-block section.hero h5.pxl-title-heading,
.pxl-title-block section.hero h6.pxl-title-heading {
	font-size: clamp(18px, 3.2vw, 26px);
	letter-spacing: 0.08em;
}

.pxl-title-block section.hero .pxl-title-heading em {
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* Tiêu đề có số lớn: <span class="big5">5</span> Ưu điểm của dự án */
.pxl-title-block section.hero .pxl-title-heading--has-big5 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35em;
	color: #E9926B;
	-webkit-text-fill-color: #E9926B;
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	filter: drop-shadow(0 0 10px color-mix(in srgb, #E9926B 28%, transparent));
}

.pxl-title-block section.hero .pxl-title-heading .big5 {
	font-family: "Be Vietnam Pro", var(--font-sans), sans-serif;
	font-feature-settings: "lnum";
	font-variant-numeric: tabular-nums;
	font-size: 88px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	color: #E9926B;
	-webkit-text-fill-color: #E9926B;
	display: inline-flex;
	vertical-align: baseline;
}

/* Fade-in tiêu đề (UX: none | up | down | left | right) */
.pxl-title-block section.hero .pxl-title-heading.pxl-title-fade--up {
	animation: pxl_title_fade_in_up 0.75s ease forwards;
}

.pxl-title-block section.hero .pxl-title-heading.pxl-title-fade--down {
	animation: pxl_title_fade_in_down 0.75s ease forwards;
}

.pxl-title-block section.hero .pxl-title-heading.pxl-title-fade--left {
	animation: pxl_title_fade_in_left 0.75s ease forwards;
}

.pxl-title-block section.hero .pxl-title-heading.pxl-title-fade--right {
	animation: pxl_title_fade_in_right 0.75s ease forwards;
}

@keyframes pxl_title_fade_in_up {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pxl_title_fade_in_down {
	from {
		opacity: 0;
		transform: translateY(-22px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pxl_title_fade_in_left {
	from {
		opacity: 0;
		transform: translateX(22px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pxl_title_fade_in_right {
	from {
		opacity: 0;
		transform: translateX(-22px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.pxl-title-block section.hero .desc {
	font-family: var(--font-sans);
	color: var(--ink-2);
	letter-spacing: 0.04em;
	margin-top: 12px;
	font-size: 19px;
	font-style: normal;
}

.pxl-title-block section.hero .desc.pxl-desc-wave {
	font-style: normal;
	font-weight: 500;
	font-size: 22px;
	color: #fff;
}

/* Trùng Framer trong index.html: opacity/y keyframes + 4s + delay i*80ms */
.pxl-title-block section.hero .desc.pxl-desc-wave .pxl-desc-wave-word {
	animation: pxl_desc_framer_bundle 4s infinite;
	animation-delay: calc(var(--i) * 0.08s);
}

@keyframes pxl_desc_framer_bundle {
	0% {
		opacity: 0;
		transform: translateY(15px);
		animation-timing-function: ease-out;
	}

	10% {
		opacity: 1;
		transform: translateY(0);
		animation-timing-function: linear;
	}

	90% {
		opacity: 1;
		transform: translateY(0);
		animation-timing-function: ease-in;
	}

	100% {
		opacity: 0;
		transform: translateY(15px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.pxl-title-block section.hero .pxl-title-heading[class*="pxl-title-fade--"] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.pxl-title-block section.hero .desc.pxl-desc-wave .pxl-desc-wave-word {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}
}

@media screen and (max-width: 480px) {
	.pxl-title-block section.hero h2.pxl-title-heading {
		font-size: clamp(20px, 5.2vw, 24px);
	}

	.pxl-title-block section.hero .pxl-title-heading--has-big5 .big5 {
		font-size: 60px;
	}

	.pxl-title-block section.hero .pxl-title-heading--has-big5 {
		gap: 0.25em;
	}

	.pxl-title-block section.hero h3.pxl-title-heading {
		font-size: clamp(18px, 4.5vw, 22px);
	}

	.pxl-title-block section.hero h4.pxl-title-heading {
		font-size: clamp(16px, 3.8vw, 18px);
	}

	.pxl-title-block section.hero h5.pxl-title-heading,
	.pxl-title-block section.hero h6.pxl-title-heading {
		font-size: clamp(14px, 3.2vw, 16px);
	}

	.pxl-title-block section.hero .desc {
		font-size: 16px;
	}
}