/**
 * Hiệu ứng trang chủ — đợt 1 (GSAP 3.15 + Lenis), đi kèm assets/js/fx.js.
 * Chỉ thêm chuyển động (transform/opacity/clip-path/mask), không đổi layout.
 * Tắt: tt_fx_enabled() trong functions/actions.php trả về false.
 *
 * @format
 */

/* ---------- Lenis ---------- */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

/* ---------- Thanh tiến trình cuộn ---------- */
.fx-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 1000;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, #1b58f4, #3bd8f2 70%, #ff8a00);
	box-shadow: 0 0 10px rgba(59, 216, 242, 0.7);
}

/* ---------- Intro ---------- */
.fx-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	color: #fff;
	background: radial-gradient(120% 90% at 50% 45%, #0c3fe0 0%, #08207f 34%, #040c42 68%, #01040f 100%);
	cursor: pointer;
	visibility: visible;
}
/* JS tách nền ra lớp riêng để logo bay ra ngoài khi nền kéo lên */
.fx-loader:has(.fx-loader__bg) {
	background: none;
}
.fx-loader__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 45%, #0c3fe0 0%, #08207f 34%, #040c42 68%, #01040f 100%);
	will-change: transform;
}
.fx-loader__mark svg,
.fx-loader__word svg {
	will-change: transform, opacity;
}
.fx-loader__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46rem;
	height: 46rem;
	margin: -23rem 0 0 -23rem;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(0, 210, 255, 0), rgba(0, 210, 255, 0.55), rgba(70, 100, 255, 0) 55%, rgba(0, 210, 255, 0));
	-webkit-mask: radial-gradient(circle, transparent 61.5%, #000 62.7%, #000 66%, transparent 67.5%);
	mask: radial-gradient(circle, transparent 61.5%, #000 62.7%, #000 66%, transparent 67.5%);
	animation: fxSpin 6s linear infinite;
	opacity: 0;
}
.fx-loader__logo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
}
.fx-loader__mark,
.fx-loader__word {
	line-height: 0;
}
.fx-loader__mark svg {
	width: 6.6rem;
	height: auto;
	overflow: visible;
}
.fx-loader__word {
	overflow: hidden;
	padding: 0.2rem 0;
}
.fx-loader__word svg {
	width: 16.4rem;
	height: auto;
	overflow: visible;
}
@media (max-width: 1199px) {
	.fx-loader__mark svg {
		width: max(6.6rem, 3.6rem + 32px);
	}
	.fx-loader__word svg {
		width: max(16.4rem, 9rem + 80px);
	}
	.fx-loader__tag {
		font-size: max(0.9rem, 10px);
	}
	.fx-loader__glow {
		width: 92vw;
		height: 92vw;
		margin: -46vw 0 0 -46vw;
	}
}
/* mobile: logo intro gọn lại (~60% bề ngang màn), không tràn sát mép */
@media (max-width: 767px) {
	.fx-loader__logo {
		gap: 2.6vw;
	}
	.fx-loader__mark svg {
		width: 15vw;
	}
	.fx-loader__word svg {
		width: 37vw;
	}
	.fx-loader__tag {
		font-size: 9px;
	}
}
.fx-loader__mark path {
	fill-opacity: 0;
	stroke: #7fe9ff;
	stroke-width: 0.6;
}
.fx-loader__tag {
	position: relative;
	font-size: 0.9rem;
	font-weight: 300;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	opacity: 0;
}
.fx-loader__tag b {
	font-weight: 700;
}
@keyframes fxSpin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Tiêu đề section: tách dòng (mask) — đệm để không cắt dấu tiếng Việt ---------- */
.fx-split > div {
	padding: 0.16em 0.14em 0.12em 0;
	margin: -0.16em -0.14em -0.12em 0;
}

/* ---------- Hero ---------- */
.fx-js .hero {
	overflow: hidden;
}
.fx-js .hero .swiper-glb {
	will-change: transform;
}
.fx-js .mount-img img {
	will-change: transform;
}

/* ---------- Dịch vụ: tab (folder phát sáng, vệt sáng quét, trôi nhẹ) ---------- */
@media (min-width: 1200px) {
	.tab-ctrl-slider .tab-ctrl-item {
		animation: fxBob 6s ease-in-out infinite;
	}
	.tab-ctrl-slider .swiper-slide:nth-child(2n) .tab-ctrl-item {
		animation-delay: -2s;
	}
	.tab-ctrl-slider .swiper-slide:nth-child(3n) .tab-ctrl-item {
		animation-delay: -4s;
	}
	.tab-ctrl-slider .tab-ctrl-item img {
		transition: filter 0.6s ease;
	}
	.tab-ctrl-slider .tab-ctrl-item.active img {
		filter: brightness(1.18) drop-shadow(0 0 1.1rem rgba(0, 190, 255, 0.65));
	}
	/* vệt sáng quét qua folder đang chọn — mask theo đúng hình folder */
	.tab-ctrl-slider .tab-ctrl-item::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 335 / 246;
		z-index: -1;
		pointer-events: none;
		-webkit-mask: url('../images/ser-folder1.png') top left / 100% auto no-repeat;
		mask: url('../images/ser-folder1.png') top left / 100% auto no-repeat;
		background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
		background-position: 120% 0;
		opacity: 0;
	}
	.tab.fx-in .tab-ctrl-slider .tab-ctrl-item.active::after {
		opacity: 1;
		animation: fxSweep 5s ease-in-out 0.8s infinite;
	}

	/* nội dung panel: từng dòng trượt vào, đường kẻ tự vẽ */
	.tab.fx-in .tab-panel-item.active .tab-info {
		animation: fxRowIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--fx-i, 0) * 0.12s + 0.15s);
	}
	.tab.fx-in .tab-panel-item.active .tab-panel-line {
		transform-origin: left;
		animation: fxLine 1s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--fx-i, 0) * 0.12s + 0.1s);
	}
	.tab.fx-in .tab-panel-item.active .tab-panel-btn {
		animation: fxRowIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
	}
	/* viền panel sáng nhịp thở */
	.tab-panel-bg::after {
		content: '';
		position: absolute;
		inset: 0.3rem;
		border-radius: 1rem;
		box-shadow: 0 0 2.6rem rgba(0, 160, 255, 0.55), inset 0 0 2rem rgba(90, 150, 255, 0.25);
		opacity: 0.25;
		pointer-events: none;
		animation: fxPulse 4.5s ease-in-out infinite;
	}

	/* vệt sáng chạy dọc vòng nền bên trái (mask theo chính ảnh vòng) */
	.tab-bg {
		position: relative;
	}
	.fx-ringlight {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		-webkit-mask: url('../images/ser-ring.png') center / 100% 100% no-repeat;
		mask: url('../images/ser-ring.png') center / 100% 100% no-repeat;
	}
	.fx-ringlight i {
		position: absolute;
		left: 0;
		top: -40%;
		width: 100%;
		height: 40%;
		background: linear-gradient(180deg, transparent, rgba(160, 235, 255, 0.95) 50%, transparent);
		animation: fxRingRun 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
	}

	/* hạt sáng bay lên */
	.fx-particles {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 0;
	}
	.fx-particles span {
		position: absolute;
		bottom: -10px;
		border-radius: 50%;
		background: rgba(160, 225, 255, 0.85);
		box-shadow: 0 0 6px rgba(0, 210, 255, 0.8);
		animation: fxRise linear infinite;
	}

}
@keyframes fxBob {
	0%,
	100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -0.25rem;
	}
}
@keyframes fxSweep {
	0% {
		background-position: 120% 0;
	}
	35%,
	100% {
		background-position: -20% 0;
	}
}
@keyframes fxRowIn {
	from {
		opacity: 0;
		transform: translateX(1.4rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes fxLine {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
@keyframes fxPulse {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.85;
	}
}
@keyframes fxRingRun {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(350%);
	}
}
@keyframes fxRise {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	15% {
		opacity: 0.9;
	}
	100% {
		transform: translateY(-60vh);
		opacity: 0;
	}
}
/* ---------- Vì sao chọn: sóng sáng lan ra từ vòng khi xuất hiện ---------- */
.fx-js .why-icon {
	scale: var(--fx-s, 1);
	translate: calc(var(--fx-ix, 0) * 1px) calc(var(--fx-iy, 0) * 1px);
}
/* hover 3D: vòng sáng lên khi rê chuột */
@media (min-width: 1200px) {
	.why-img {
		transform-style: preserve-3d;
		cursor: pointer;
	}
	.why-img .why-round {
		transition: filter 0.5s ease;
	}
	.why-img:hover .why-round {
		filter: brightness(1.25) saturate(1.2);
	}
}
.fx-ripple {
	position: absolute;
	inset: 12%;
	pointer-events: none;
	z-index: 0;
}
.fx-ripple i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 170, 60, 0.9);
	box-shadow: 0 0 1.2rem rgba(255, 140, 0, 0.6), inset 0 0 1rem rgba(59, 216, 242, 0.4);
	opacity: 0;
}
.why-img.fx-pulse .fx-ripple i {
	animation: fxRipple 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.why-img.fx-pulse .fx-ripple i + i {
	animation-delay: 0.35s;
}
@keyframes fxRipple {
	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}
	100% {
		transform: scale(1.55);
		opacity: 0;
	}
}

/* ---------- Giá trị cốt lõi: dải đang sáng (giống hover) chạy theo cuộn ---------- */
.values-item.is-on .values-name > img.values-line {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.values-item.is-on .values-texts::after {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.values-item.is-on .values-name {
	font-weight: 700;
}
.values-item.is-on .values-texts {
	color: #fff;
}

/* ====================== ĐỢT 2 ====================== */
/* Dự án: ảnh trôi trong khung — chỉ giữ chuyển tiếp clip-path khi đổi ảnh */
.project-img img {
	transition-property: clip-path;
	will-change: transform;
}
/* Câu chuyện: núi trôi chậm (thuộc tính translate/scale riêng, không đụng transform gốc) */
.story-bg img {
	scale: 1.1;
	translate: 0 var(--fx-py, 0%);
	will-change: translate;
}
/* Liên hệ: mũi tên nền trượt vào */
.contact-bg {
	translate: var(--fx-x, 0%) 0;
	will-change: translate, opacity;
}
/* Liên hệ: gạch chân sáng chạy ra khi gõ */
.contact-item .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}
.contact-item .wpcf7-form-control-wrap::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, #3bd8f2, #1b58f4 70%, #ff8a00);
	box-shadow: 0 0 8px rgba(59, 216, 242, 0.7);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.contact-item:focus-within .wpcf7-form-control-wrap::after {
	transform: scaleX(1);
}
/* Giá trị cốt lõi: nút "Xem thêm" nằm trên mảng cam của dải cuối khi dải đó sáng */
.values-btn {
	position: relative;
	z-index: 2;
}
/* Máy cảm ứng (iPhone…): :hover bị "dính" sau khi chạm → dải đã chạm qua vẫn bật nền cam
   chồng lên dải đang chọn. Chỉ dải đang mở (.is-open, mobile.js) mới sáng; bỏ ô đánh dấu khi chạm của iOS. */
html {
	-webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
	.values-item:hover:not(.is-open) .values-texts::after {
		clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
	}
	.values-item:hover:not(.is-open) .values-texts {
		color: transparent;
	}
	.values-item:hover:not(.is-open) .values-name {
		font-weight: 300;
	}
	.values-item:hover:not(.is-open) .values-name > img.values-line {
		clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
	}
}
/* Khách hàng: rê chuột logo nổi lên */
.fields .logo img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.fields .logo:hover img {
	transform: translateY(-0.3rem) scale(1.06);
	filter: drop-shadow(0 0.5rem 0.8rem rgba(27, 88, 244, 0.35));
}
/* Header ẩn khi cuộn xuống */
.header {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.header.fx-hide {
	transform: translateY(-130%);
}

/* ====================== TỐI ƯU ======================
 * 14 quầng sáng nền của site dùng filter: blur(200px) trên khối 400–2100px → trình duyệt vẽ rất nặng
 * (khựng ~280ms lần đầu cuộn tới, mobile còn nặng hơn). Thay bằng radial-gradient trên lớp ::before
 * nới rộng 2σ — dáng/độ loang tính theo đúng ellipse làm mờ σ = 10rem (200px tại 1920), gần như không tốn vẽ.
 */
.services-gradient1, .services-gradient2, .services-gradient3, .solution-gradient, .project-gradient, .fields-gradient, .why-gradient1, .why-gradient2, .values-gradient, .contact-gradient, .news-gradient, .job-gradient1, .job-gradient2, .foot-gradient {
	filter: none !important;
	background: none !important;
	/* lớp sáng ::before nới rộng 20rem → không được chặn bấm nút của khối bên cạnh (mũi tên/chấm Khách hàng) */
	pointer-events: none !important;
}
.services-gradient1::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.887) 0%, rgba(27, 88, 244, 0.874) 10%, rgba(27, 88, 244, 0.835) 20%, rgba(27, 88, 244, 0.765) 30%, rgba(27, 88, 244, 0.659) 40%, rgba(27, 88, 244, 0.522) 50%, rgba(27, 88, 244, 0.370) 60%, rgba(27, 88, 244, 0.230) 70%, rgba(27, 88, 244, 0.123) 80%, rgba(27, 88, 244, 0.056) 90%, rgba(27, 88, 244, 0.021) 100%);
	pointer-events: none;
}
.services-gradient2::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.726) 0%, rgba(27, 88, 244, 0.713) 10%, rgba(27, 88, 244, 0.677) 20%, rgba(27, 88, 244, 0.614) 30%, rgba(27, 88, 244, 0.525) 40%, rgba(27, 88, 244, 0.414) 50%, rgba(27, 88, 244, 0.295) 60%, rgba(27, 88, 244, 0.186) 70%, rgba(27, 88, 244, 0.102) 80%, rgba(27, 88, 244, 0.048) 90%, rgba(27, 88, 244, 0.019) 100%);
	pointer-events: none;
}
.services-gradient3::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.726) 0%, rgba(27, 88, 244, 0.713) 10%, rgba(27, 88, 244, 0.677) 20%, rgba(27, 88, 244, 0.614) 30%, rgba(27, 88, 244, 0.525) 40%, rgba(27, 88, 244, 0.414) 50%, rgba(27, 88, 244, 0.295) 60%, rgba(27, 88, 244, 0.186) 70%, rgba(27, 88, 244, 0.102) 80%, rgba(27, 88, 244, 0.048) 90%, rgba(27, 88, 244, 0.019) 100%);
	pointer-events: none;
}
.solution-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.881) 0%, rgba(27, 88, 244, 0.868) 10%, rgba(27, 88, 244, 0.829) 20%, rgba(27, 88, 244, 0.758) 30%, rgba(27, 88, 244, 0.653) 40%, rgba(27, 88, 244, 0.517) 50%, rgba(27, 88, 244, 0.367) 60%, rgba(27, 88, 244, 0.228) 70%, rgba(27, 88, 244, 0.122) 80%, rgba(27, 88, 244, 0.056) 90%, rgba(27, 88, 244, 0.021) 100%);
	pointer-events: none;
}
.project-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.624) 0%, rgba(27, 88, 244, 0.608) 10%, rgba(27, 88, 244, 0.559) 20%, rgba(27, 88, 244, 0.484) 30%, rgba(27, 88, 244, 0.392) 40%, rgba(27, 88, 244, 0.294) 50%, rgba(27, 88, 244, 0.202) 60%, rgba(27, 88, 244, 0.128) 70%, rgba(27, 88, 244, 0.073) 80%, rgba(27, 88, 244, 0.038) 90%, rgba(27, 88, 244, 0.018) 100%);
	pointer-events: none;
}
.fields-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.722) 0%, rgba(27, 88, 244, 0.711) 10%, rgba(27, 88, 244, 0.677) 20%, rgba(27, 88, 244, 0.624) 30%, rgba(27, 88, 244, 0.550) 40%, rgba(27, 88, 244, 0.456) 50%, rgba(27, 88, 244, 0.342) 60%, rgba(27, 88, 244, 0.223) 70%, rgba(27, 88, 244, 0.122) 80%, rgba(27, 88, 244, 0.054) 90%, rgba(27, 88, 244, 0.019) 100%);
	pointer-events: none;
}
.why-gradient1::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.401) 0%, rgba(27, 88, 244, 0.392) 10%, rgba(27, 88, 244, 0.363) 20%, rgba(27, 88, 244, 0.318) 30%, rgba(27, 88, 244, 0.261) 40%, rgba(27, 88, 244, 0.200) 50%, rgba(27, 88, 244, 0.141) 60%, rgba(27, 88, 244, 0.091) 70%, rgba(27, 88, 244, 0.054) 80%, rgba(27, 88, 244, 0.029) 90%, rgba(27, 88, 244, 0.014) 100%);
	pointer-events: none;
}
.why-gradient2::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.829) 0%, rgba(27, 88, 244, 0.810) 10%, rgba(27, 88, 244, 0.753) 20%, rgba(27, 88, 244, 0.660) 30%, rgba(27, 88, 244, 0.540) 40%, rgba(27, 88, 244, 0.406) 50%, rgba(27, 88, 244, 0.279) 60%, rgba(27, 88, 244, 0.173) 70%, rgba(27, 88, 244, 0.096) 80%, rgba(27, 88, 244, 0.047) 90%, rgba(27, 88, 244, 0.021) 100%);
	pointer-events: none;
}
.values-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.862) 0%, rgba(27, 88, 244, 0.850) 10%, rgba(27, 88, 244, 0.813) 20%, rgba(27, 88, 244, 0.748) 30%, rgba(27, 88, 244, 0.651) 40%, rgba(27, 88, 244, 0.523) 50%, rgba(27, 88, 244, 0.377) 60%, rgba(27, 88, 244, 0.237) 70%, rgba(27, 88, 244, 0.127) 80%, rgba(27, 88, 244, 0.057) 90%, rgba(27, 88, 244, 0.021) 100%);
	pointer-events: none;
}
.contact-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.751) 0%, rgba(27, 88, 244, 0.740) 10%, rgba(27, 88, 244, 0.705) 20%, rgba(27, 88, 244, 0.651) 30%, rgba(27, 88, 244, 0.579) 40%, rgba(27, 88, 244, 0.489) 50%, rgba(27, 88, 244, 0.378) 60%, rgba(27, 88, 244, 0.253) 70%, rgba(27, 88, 244, 0.139) 80%, rgba(27, 88, 244, 0.060) 90%, rgba(27, 88, 244, 0.020) 100%);
	pointer-events: none;
}
.news-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.751) 0%, rgba(27, 88, 244, 0.740) 10%, rgba(27, 88, 244, 0.705) 20%, rgba(27, 88, 244, 0.651) 30%, rgba(27, 88, 244, 0.579) 40%, rgba(27, 88, 244, 0.489) 50%, rgba(27, 88, 244, 0.378) 60%, rgba(27, 88, 244, 0.253) 70%, rgba(27, 88, 244, 0.139) 80%, rgba(27, 88, 244, 0.060) 90%, rgba(27, 88, 244, 0.020) 100%);
	pointer-events: none;
}
.job-gradient1::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.981) 0%, rgba(27, 88, 244, 0.974) 10%, rgba(27, 88, 244, 0.944) 20%, rgba(27, 88, 244, 0.880) 30%, rgba(27, 88, 244, 0.769) 40%, rgba(27, 88, 244, 0.612) 50%, rgba(27, 88, 244, 0.432) 60%, rgba(27, 88, 244, 0.265) 70%, rgba(27, 88, 244, 0.139) 80%, rgba(27, 88, 244, 0.061) 90%, rgba(27, 88, 244, 0.023) 100%);
	pointer-events: none;
}
.job-gradient2::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.743) 0%, rgba(27, 88, 244, 0.728) 10%, rgba(27, 88, 244, 0.684) 20%, rgba(27, 88, 244, 0.610) 30%, rgba(27, 88, 244, 0.508) 40%, rgba(27, 88, 244, 0.390) 50%, rgba(27, 88, 244, 0.272) 60%, rgba(27, 88, 244, 0.170) 70%, rgba(27, 88, 244, 0.094) 80%, rgba(27, 88, 244, 0.046) 90%, rgba(27, 88, 244, 0.020) 100%);
	pointer-events: none;
}
.foot-gradient::before {
	content: '';
	position: absolute;
	inset: -20rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(27, 88, 244, 0.799) 0%, rgba(27, 88, 244, 0.784) 10%, rgba(27, 88, 244, 0.737) 20%, rgba(27, 88, 244, 0.658) 30%, rgba(27, 88, 244, 0.550) 40%, rgba(27, 88, 244, 0.422) 50%, rgba(27, 88, 244, 0.294) 60%, rgba(27, 88, 244, 0.183) 70%, rgba(27, 88, 244, 0.100) 80%, rgba(27, 88, 244, 0.048) 90%, rgba(27, 88, 244, 0.020) 100%);
	pointer-events: none;
}

/* Tuyết rơi trước núi */
.fx-snow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
}

/* Vòng sáng xoay ở dịch vụ: làm mờ chính ảnh (1 lần) rồi xoay bằng GPU,
   thay vì làm mờ khung cha → trình duyệt phải làm mờ lại mỗi khung hình */
.ring-blur {
	filter: none;
}
.ring-blur .ring-light img {
	filter: blur(22px);
}
.ring-light img {
	will-change: transform;
}

/* ---------- Lớp nền sáng dưới con trỏ ---------- */
.fx-glow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 997;
	width: 72rem;
	height: 72rem;
	margin: -36rem 0 0 -36rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 216, 242, 0.3) 0%, rgba(27, 88, 244, 0.2) 22%, rgba(27, 88, 244, 0.09) 42%, transparent 68%);
	/* screen: chỉ làm sáng nền tối, chữ/icon trắng vẫn trắng */
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.4s ease;
}
html.cursor-on .fx-glow {
	opacity: 1;
}
.fx-intro .fx-glow {
	opacity: 0 !important;
}

/* ---------- Thanh cuộn tuỳ biến (thay thanh cuộn mặc định, chỉ máy có chuột) ---------- */
html.has-sb {
	scrollbar-width: none;
}
html.has-sb::-webkit-scrollbar,
html.has-sb body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
.fx-sb {
	--w: 4px;
	position: fixed;
	right: 3px;
	top: 0.6rem;
	bottom: 0.6rem;
	z-index: 1001;
	width: 1.4rem;
	opacity: 0.45;
	cursor: pointer;
	touch-action: none;
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-sb.is-on,
.fx-sb:hover,
.fx-sb.is-drag {
	opacity: 1;
}
.fx-sb.is-off {
	display: none;
}
/* ray mảnh, mờ dần 2 đầu */
.fx-sb::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--w) / 2 - 0.5px);
	width: 1px;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22) 12%, rgba(255, 255, 255, 0.22) 88%, rgba(255, 255, 255, 0));
}
.fx-sb__thumb {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	cursor: grab;
	will-change: transform;
}
/* viên kéo: gradient xanh cyan → xanh TABViet, đầu chấm cam */
.fx-sb__thumb i {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--w);
	border-radius: 99px;
	background: linear-gradient(180deg, #3bd8f2, #1b58f4 55%, #1545c1);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0.6rem rgba(59, 216, 242, 0.55);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
}
.fx-sb__thumb i::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 99px 99px 0 0;
	background: var(--orange, #ff6a00);
}
/* 3 chấm cầm nắm hiện khi rê chuột */
.fx-sb__thumb i::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 2px;
	margin: -1px 0 0 -1px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff;
	opacity: 0;
	transition: opacity 0.3s;
}
.fx-sb:hover,
.fx-sb.is-drag {
	--w: 8px;
}
.fx-sb:hover .fx-sb__thumb i::after,
.fx-sb.is-drag .fx-sb__thumb i::after {
	opacity: 0.9;
}
.fx-sb.is-drag .fx-sb__thumb {
	cursor: grabbing;
}
.fx-sb.is-drag .fx-sb__thumb i {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 4px rgba(59, 216, 242, 0.18), 0 0 1rem rgba(59, 216, 242, 0.7);
}
/* nhãn % cạnh viên kéo */
.fx-sb__pct {
	position: absolute;
	top: 50%;
	right: calc(var(--w) + 0.55rem);
	padding: 0.25rem 0.5rem;
	border-radius: 99px;
	background: #1b58f4;
	box-shadow: 0 0 0.6rem rgba(27, 88, 244, 0.6);
	color: #fff;
	font-size: 0.55rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(0.4rem, -50%);
	transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-sb:hover .fx-sb__pct,
.fx-sb.is-drag .fx-sb__pct {
	opacity: 1;
	transform: translate(0, -50%);
}
/* lúc intro còn che thì ẩn */
.fx-intro .fx-sb {
	opacity: 0;
	pointer-events: none;
}

/* dừng animation CSS lặp vô tận khi khối đang khuất màn (JS gắn .fx-off) */
.fx-off *,
.fx-off *::before,
.fx-off *::after {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.fx-loader__glow,
	.fx-ringlight,
	.fx-particles,
	.tab-ctrl-slider .tab-ctrl-item,
	.tab-panel-bg::after {
		animation: none !important;
	}
}