/* ==========================================================================
   PROTECH — light futuristic design system
   Palette theo logo: cyan #2AA9DF → navy #0E2A4E trên nền trắng lạnh.
   ========================================================================== */

:root {
	--bg: #f5f8fc;
	--surface: #ffffff;
	--ink: #0b1d3a;
	--ink-soft: #47597a;
	--navy: #0e2a4e;
	--navy-deep: #081a33;
	--blue: #1b5fa8;
	--cyan: #2aa9df;
	--cyan-soft: #7fd0f2;
	--hairline: rgba(11, 29, 58, 0.08);
	--hairline-strong: rgba(11, 29, 58, 0.14);
	--shell: rgba(11, 29, 58, 0.04);
	--grad-accent: linear-gradient(98deg, var(--cyan) 0%, var(--blue) 55%, var(--navy) 115%);
	--shadow-soft: 0 30px 90px -42px rgba(14, 42, 78, 0.35);
	--shadow-float: 0 18px 60px -28px rgba(14, 42, 78, 0.28);
	--font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
	--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;
	--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
	--radius-xl: 2rem;
	--radius-core: calc(2rem - 0.4rem);
	--container: 1280px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html { background: var(--bg); }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Trang chủ: body trong suốt để lộ canvas 3D fixed phía sau */
body.home { background: transparent; }

.city-canvas {
	position: fixed; inset: 0; z-index: -1;
	width: 100%; height: 100%;
	pointer-events: none;
}

/* Vignette điện ảnh: che mép/góc thô của cảnh 3D, dồn mắt vào trung tâm khung hình */
.city-canvas__vignette {
	position: fixed; inset: 0; z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 95% at 50% 38%, transparent 42%, var(--bg) 100%),
		linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 82%, var(--bg) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 200;
	background: var(--navy); color: #fff; padding: 0.6rem 1.2rem; border-radius: 0 0 0.8rem 0;
}
.skip-link:focus { left: 0; }

/* Grain overlay — cố định, không chặn tương tác */
.grain {
	position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection { background: rgba(42, 169, 223, 0.28); }

/* ---------- Eyebrow pill ---------- */

.eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--blue);
	border: 1px solid rgba(27, 95, 168, 0.22);
	background: rgba(42, 169, 223, 0.07);
	border-radius: 999px; padding: 0.42rem 0.95rem;
	margin: 0 0 1.4rem;
}
.eyebrow::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.eyebrow--light { color: var(--cyan-soft); border-color: rgba(127, 208, 242, 0.3); background: rgba(127, 208, 242, 0.08); }

/* ---------- Buttons: pill + orb icon lồng trong ---------- */

.btn {
	display: inline-flex; align-items: center; gap: 0.85rem;
	border-radius: 999px; padding: 0.55rem 0.6rem 0.55rem 1.6rem;
	font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
	letter-spacing: 0.01em; white-space: nowrap;
	transition: transform 0.7s var(--ease-spring), box-shadow 0.7s var(--ease-out), background-color 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
	will-change: transform;
}
.btn:active { transform: scale(0.97); }

.btn__orb {
	display: grid; place-items: center;
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	transition: transform 0.7s var(--ease-spring), background-color 0.7s var(--ease-out);
}
.btn__orb svg { width: 1.05rem; height: 1.05rem; }
.btn:hover .btn__orb { transform: translate(3px, -3px) scale(1.06); }

.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-float); }
.btn--primary:hover { box-shadow: 0 24px 70px -24px rgba(14, 42, 78, 0.5); }
.btn--primary .btn__orb { background: rgba(255, 255, 255, 0.14); color: #fff; }
.btn--primary:hover .btn__orb { background: var(--cyan); }

.btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--hairline-strong); }
.btn--ghost:hover { border-color: rgba(42, 169, 223, 0.5); background: rgba(42, 169, 223, 0.05); }
.btn--ghost .btn__orb { background: rgba(11, 29, 58, 0.06); color: var(--navy); }

.btn--light { background: #fff; color: var(--navy); }
.btn--light .btn__orb { background: rgba(14, 42, 78, 0.08); color: var(--navy); }
.btn--light:hover .btn__orb { background: var(--cyan); color: #fff; }

.btn--sm { padding: 0.35rem 0.4rem 0.35rem 1.15rem; font-size: 0.88rem; }
.btn--sm .btn__orb { width: 1.9rem; height: 1.9rem; }

/* ---------- Double-bezel shell ---------- */

.bezel {
	background: var(--shell);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	padding: 0.4rem;
	box-shadow: var(--shadow-soft);
}
.bezel__core {
	background: var(--surface);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius-core);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
	overflow: hidden;
	position: relative;
}

/* ---------- Nav: fluid island pill ---------- */

.site-nav {
	position: fixed; inset-inline: 0; top: 0; z-index: 120;
	display: flex; justify-content: center;
	padding: 1.1rem var(--gutter) 0;
	pointer-events: none;
	transition: transform 0.6s var(--ease-out);
}
.site-nav.is-hidden { transform: translateY(-130%); }
.site-nav__pill {
	pointer-events: auto;
	display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 12px 50px -18px rgba(14, 42, 78, 0.3);
	border-radius: 999px;
	padding: 0.55rem 0.6rem 0.55rem 1.2rem;
	max-width: 100%;
	transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out), background-color 0.8s var(--ease-out);
}
.site-nav.is-scrolled .site-nav__pill {
	transform: translateY(-2px) scale(0.985);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 18px 60px -20px rgba(14, 42, 78, 0.38);
}
.site-nav__brand img { width: 120px; height: auto; }

.site-nav__links { display: flex; align-items: center; gap: 0.25rem; }
.site-nav__links a,
.site-nav__link {
	font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
	padding: 0.45rem 0.85rem; border-radius: 999px;
	transition: color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.site-nav__links a:hover { color: var(--navy); background: rgba(42, 169, 223, 0.09); }

.site-nav__actions { display: flex; align-items: center; gap: 0.5rem; }

.site-nav__burger {
	display: none;
	position: relative; width: 2.6rem; height: 2.6rem;
	border: 1px solid var(--hairline-strong); border-radius: 50%;
	background: transparent; cursor: pointer;
}
.site-nav__burger span {
	position: absolute; left: 50%; top: 50%;
	width: 1.05rem; height: 1.5px; background: var(--navy);
	transition: transform 0.6s var(--ease-spring);
}
.site-nav__burger span:first-child { transform: translate(-50%, calc(-50% - 3px)); }
.site-nav__burger span:last-child { transform: translate(-50%, calc(-50% + 3px)); }
.site-nav__burger.is-open span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.site-nav__burger.is-open span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* Overlay menu mobile */
.nav-overlay {
	position: fixed; inset: 0; z-index: 110;
	background: rgba(245, 248, 252, 0.88);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	display: flex; flex-direction: column; justify-content: center; gap: 3rem;
	padding: 6.5rem var(--gutter) 3rem;
	opacity: 0; visibility: hidden;
	transition: opacity 0.7s var(--ease-out), visibility 0s linear 0.7s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.nav-overlay__links { display: flex; flex-direction: column; gap: 0.4rem; }
.nav-overlay__link {
	display: flex; align-items: baseline; gap: 1rem;
	font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 600;
	color: var(--navy);
	transform: translateY(3rem); opacity: 0;
	transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
	transition-delay: 0s;
}
.nav-overlay.is-open .nav-overlay__link {
	transform: translateY(0); opacity: 1;
	transition-delay: calc(0.08s + var(--i) * 0.06s);
}
.nav-overlay__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cyan); letter-spacing: 0.15em; }
.nav-overlay__meta { display: flex; gap: 2rem; color: var(--ink-soft); }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: 100dvh;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(8rem, 16vh, 11rem) 0 clamp(4rem, 8vh, 6rem);
	overflow: clip;
}
.hero__veil {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(58% 62% at 28% 45%, rgba(245, 248, 252, 0.9) 0%, rgba(245, 248, 252, 0.5) 55%, rgba(245, 248, 252, 0) 100%);
}
.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow { margin-bottom: 2rem; }

.hero__title {
	font-size: clamp(2.9rem, 7.6vw, 5.9rem);
	font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
	margin: 0 0 2rem; max-width: 22ch;
}
.hero__line-mask { display: block; overflow: hidden; padding-block: 0.06em; }
.hero__line { display: inline-block; transform: translateY(115%); }
.hero__line--accent {
	background: var(--grad-accent);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

.hero__desc { max-width: 46ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-bottom: 2.6rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(3rem, 7vh, 5rem); }

.hero__stats {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px; max-width: 760px;
	background: var(--hairline);
	border-block: 1px solid var(--hairline);
}
.hero__stat { background: var(--bg); padding: 1.3rem 1.4rem 1.3rem 0; }
.hero__stat + .hero__stat { padding-left: 1.4rem; }
.hero__stat-value {
	display: block; font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; color: var(--navy);
}
.hero__stat-label { font-size: 0.82rem; color: var(--ink-soft); }

.hero__scroll-hint {
	position: absolute; right: var(--gutter); bottom: 2.2rem; z-index: 2;
	display: flex; align-items: center; gap: 0.8rem; color: var(--ink-soft);
}
.hero__scroll-line { position: relative; width: 1px; height: 3.4rem; background: var(--hairline-strong); overflow: hidden; }
.hero__scroll-line::after {
	content: ""; position: absolute; inset-inline: 0; top: -40%;
	height: 40%; background: var(--cyan);
	animation: scroll-drip 2.2s var(--ease-out) infinite;
}
@keyframes scroll-drip { to { top: 110%; } }

[data-hero-fade] { opacity: 0; transform: translateY(1.6rem); }

/* ---------- Marquee ---------- */

.marquee {
	border-block: 1px solid var(--hairline);
	background: var(--surface);
	overflow: hidden; padding: 1.15rem 0;
}
.marquee__track { display: flex; width: max-content; animation: marquee-slide 36s linear infinite; }
.marquee__group { display: flex; align-items: center; }
.marquee__item { font-size: 0.8rem; color: var(--ink-soft); padding-inline: 1.6rem; }
.marquee__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: 0.7; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Section chung ---------- */

.section { padding-block: clamp(5rem, 10vw, 8rem); }

/* Giới thiệu ↔ Lĩnh vực đứng sát nhịp nhau hơn */
.about { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.services { padding-top: clamp(2.5rem, 5vw, 4rem); }

.section__head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 2rem; margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.section__title {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	font-weight: 600; letter-spacing: -0.03em; line-height: 1.08;
	max-width: 22ch;
}
.section__title--light { color: #fff; }
.section__desc { color: var(--ink-soft); max-width: 52ch; margin-top: 1.4rem; }
.section__desc--right { max-width: 36ch; margin-top: 0; padding-bottom: 0.4rem; }
.section__desc--light { color: rgba(214, 231, 246, 0.75); }

/* Reveal mặc định (JS animate xong sẽ gắn .is-revealed để trả element về trạng thái sạch) */
[data-reveal] { opacity: 0; transform: translateY(3.4rem); filter: blur(6px); }
[data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
html.no-motion [data-reveal], html.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* Tiêu đề tách chữ: bản thân tiêu đề hiện, từng từ trượt lên trong mask */
.section__title.is-split { opacity: 1; transform: none; filter: none; }
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: 0.08em; margin-block: -0.08em; }
.w { display: inline-block; will-change: transform; }

/* Thanh tiến trình đọc trang */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130;
	background: var(--grad-accent);
	transform: scaleX(0); transform-origin: 0 50%;
	pointer-events: none;
}

/* Nút lên đầu trang */
.to-top {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 100;
	width: 2.9rem; height: 2.9rem; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--hairline-strong);
	color: var(--navy); cursor: pointer;
	box-shadow: var(--shadow-float);
	opacity: 0; visibility: hidden; transform: translateY(0.8rem);
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { color: var(--cyan); border-color: rgba(42, 169, 223, 0.5); }
.to-top svg { width: 1.1rem; height: 1.1rem; }

/* Nội dung section nổi trên canvas 3D */
.home-main { position: relative; }
.home-main .section .container, .home-main .marquee { position: relative; z-index: 1; }

/* Veil trắng mờ đảm bảo chữ đọc được trên nền city 3D (city vẫn ghosting qua) */
.home-main .about,
.home-main .services,
.home-main .news {
	background: linear-gradient(180deg, rgba(245, 248, 252, 0.78) 0%, rgba(245, 248, 252, 0.86) 50%, rgba(245, 248, 252, 0.78) 100%);
}

/* Đường liên kết chạy dọc trang theo scroll */
.scroll-connector {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	pointer-events: none; z-index: 0;
}
.scroll-connector path { stroke-linecap: round; }
.scroll-connector circle { transition: opacity 0.6s var(--ease-out); }

/* ---------- About ---------- */

.about__grid {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}

/* Panel nền cho cột chữ — trang chủ có canvas 3D fixed toàn trang phía sau,
   nếu không có nền riêng thì chữ/icon nhạt bị chìm vào hoạ tiết toà nhà. */
.about__copy {
	background: linear-gradient(165deg, #ffffff 0%, #eef5fb 100%);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: clamp(2rem, 4vw, 3.2rem);
}

.about__points { display: flex; flex-direction: column; margin: 2.6rem 0; }
.about__point {
	display: flex; gap: 1.4rem; padding: 1.4rem 0;
	border-top: 1px solid var(--hairline-strong);
	transition: transform 0.6s var(--ease-out);
}
.about__point:hover { transform: translateX(6px); }
.about__point:last-child { border-bottom: 1px solid var(--hairline-strong); margin-bottom: 2.2rem; }
.about__point-num { color: rgba(11, 29, 58, 0.45); margin-left: auto; padding-top: 0.3rem; }
.about__point-icon {
	flex: none;
	width: 2.9rem; height: 2.9rem; border-radius: 0.9rem;
	display: grid; place-items: center;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.14);
	border: 1px solid rgba(42, 169, 223, 0.35);
}
.about__point-icon .icon { width: 1.4rem; height: 1.4rem; }
.about__point h3 { font-size: 1.15rem; margin-bottom: 0.3rem; color: var(--ink); }
.about__point p { color: #3a4d6e; font-size: 0.95rem; max-width: 46ch; }
.about__copy .section__desc { color: #3a4d6e; }

.about__photo {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
}
.about__photo ~ .about__circuit { opacity: 0.5; mix-blend-mode: screen; }
.about__photo ~ .about__visual-orb { display: none; }
.about__visual-core:has(.about__photo) .about__visual-badge strong { color: #fff; }
.about__visual-core:has(.about__photo)::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(8, 26, 51, 0) 40%, rgba(8, 26, 51, 0.72) 100%);
}
.about__visual-core:has(.about__photo) .about__visual-badge { z-index: 2; }

.about__visual-core { min-height: 460px; background: linear-gradient(165deg, #ffffff 0%, #eaf3fb 100%); }
.about__circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit-trace {
	stroke: rgba(27, 95, 168, 0.18); stroke-width: 1.2;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	transition: stroke-dashoffset 2.2s var(--ease-out) 0.35s;
}
.about__visual.is-revealed .circuit-trace { stroke-dashoffset: 0; }
html.no-motion .circuit-trace { stroke-dashoffset: 0; }
.circuit-node { fill: var(--surface); stroke: var(--cyan); stroke-width: 1.4; }
.circuit-node--pulse { animation: node-pulse 2.6s var(--ease-out) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes node-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.5); } }

.about__visual-orb {
	position: absolute; width: 260px; height: 260px; right: -60px; top: -60px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(42, 169, 223, 0.35), rgba(27, 95, 168, 0.08) 60%, transparent 75%);
	filter: blur(2px);
}
.about__visual-badge {
	position: absolute; left: 1.8rem; bottom: 1.8rem;
	display: flex; flex-direction: column; gap: 0.5rem;
}
.about__visual-badge .mono { color: var(--cyan); }
.about__visual-badge strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; color: var(--navy); }

/* ---------- Services bento ---------- */

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; perspective: 1400px; }

.bento__card {
	grid-column: span 12;
	background: var(--shell);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	padding: 0.4rem;
	transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out), border-color 0.8s var(--ease-out);
	will-change: transform;
}
.bento__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-soft);
	border-color: rgba(42, 169, 223, 0.4);
}
.bento__card-core {
	position: relative; height: 100%;
	display: flex; flex-direction: column; gap: 1.6rem;
	background: var(--surface);
	border-radius: var(--radius-core);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	overflow: hidden;
}
.bento__card-core::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(42, 169, 223, 0.09), transparent 65%);
	opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.bento__card:hover .bento__card-core::after { opacity: 1; }

/* Ảnh minh hoạ PNG (nền trong suốt) neo góc phải, tự co theo card — thay cho icon cũ */
.bento__illustration {
	position: absolute; z-index: 0; pointer-events: none;
	right: clamp(-0.5rem, -1vw, 0.5rem); bottom: clamp(-0.5rem, -1vw, 0.5rem);
	width: auto; max-width: 46%; height: auto; max-height: calc(100% - 1rem);
	object-fit: contain; object-position: bottom right;
	transition: transform 0.9s var(--ease-out);
}
.bento__card:hover .bento__illustration { transform: translateY(-4px) scale(1.03); }

.bento__media {
	position: relative;
	margin: -0.35rem -0.35rem 0;
	border-radius: calc(var(--radius-core) - 0.15rem);
	overflow: hidden;
	aspect-ratio: 16 / 8.5;
	flex: none;
}
.bento__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}
.bento__card:hover .bento__media img { transform: scale(1.06); }
.bento__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14, 42, 78, 0) 55%, rgba(14, 42, 78, 0.18) 100%);
}

.bento__body { position: relative; z-index: 1; }
.bento__body--has-image { max-width: 72%; }
.bento__index { color: rgba(11, 29, 58, 0.35); display: block; margin-bottom: 0.7rem; }
.bento__title { display: block; font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -0.015em; margin-bottom: 0.7rem; }
.bento__desc { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; }
.bento__card-core { justify-content: flex-start; }

.bento__arrow {
	position: absolute; z-index: 2; top: 1.4rem; right: 1.4rem;
	width: 2.3rem; height: 2.3rem; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	border: 1px solid var(--hairline);
	color: var(--ink-soft);
	transition: transform 0.7s var(--ease-spring), background-color 0.7s var(--ease-out), color 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
}
.bento__arrow .icon { width: 1rem; height: 1rem; }
.bento__card:hover .bento__arrow {
	transform: translate(2px, -2px);
	background: var(--navy); border-color: var(--navy); color: #fff;
}

@media (min-width: 900px) {
	.is-span-3 { grid-column: span 3; }
	.is-span-4 { grid-column: span 4; }
	.is-span-5 { grid-column: span 5; }
	.is-span-7 { grid-column: span 7; }
	.bento__card { min-height: 300px; }
	.is-span-7 .bento__desc { max-width: 46ch; }
	/* Card hẹp: chữ nhỏ lại để tiêu đề 2 từ (Smart Factory, Smart City...) vừa một hàng */
	.is-span-3 .bento__title { font-size: clamp(1rem, 1.3vw, 1.2rem); }
	.is-span-3 .bento__body--has-image { max-width: 78%; }

	/* Card featured: nền gradient + lưới chấm + quầng cyan, icon và tiêu đề lớn hơn */
	.bento__card--featured .bento__card-core {
		background:
			radial-gradient(rgba(27, 95, 168, 0.08) 1px, transparent 1.5px) 0 0 / 18px 18px,
			linear-gradient(135deg, #ffffff 0%, #e9f3fb 100%);
	}
	.bento__card--featured .bento__card-core::before {
		content: ""; position: absolute; right: -14%; top: -42%;
		width: 62%; aspect-ratio: 1; border-radius: 50%;
		background: radial-gradient(circle, rgba(42, 169, 223, 0.18), transparent 65%);
		pointer-events: none;
		transition: transform 1s var(--ease-out);
	}
	.bento__card--featured:hover .bento__card-core::before { transform: scale(1.25); }
	.bento__card--featured .bento__title { font-size: clamp(1.55rem, 2.1vw, 1.95rem); }
	.bento__card--featured .bento__desc { font-size: 0.98rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
	.bento__card { grid-column: span 6; }
}

/* ---------- Solution Explorer (Lĩnh vực) ---------- */

.explorer {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 4vw, 4.5rem);
	align-items: start;
}

/* Cột trái ghim: heading + sân khấu 3D đứng yên trong khi list cuộn */
.explorer__side {
	position: sticky;
	top: 5.5rem;
	align-self: start;
}
.explorer__heading { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.explorer__lead { margin-top: 1rem; margin-bottom: 1.8rem; font-size: 0.98rem; max-width: 46ch; }

.explorer__list { display: flex; flex-direction: column; }

.explorer__item {
	position: relative;
	display: flex; align-items: flex-start; gap: 1.1rem;
	width: 100%; text-align: left;
	background: none; border: 0; cursor: pointer;
	font-family: inherit; color: inherit;
	padding: 1.15rem 0.6rem 1.15rem 0.2rem;
	border-top: 1px solid var(--hairline);
	transition: background-color 0.5s var(--ease-out), padding-left 0.6s var(--ease-out);
}
.explorer__item:last-child { border-bottom: 1px solid var(--hairline); }
.explorer__item:hover { background: rgba(42, 169, 223, 0.04); padding-left: 0.6rem; }
.explorer__item.is-active { padding-left: 0.6rem; }

.explorer__beam {
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 2px; background: var(--grad-accent);
	transform: scaleY(0); transform-origin: top;
	transition: transform 0.7s var(--ease-out);
}
.explorer__item.is-active .explorer__beam { transform: scaleY(1); }

.explorer__num { color: rgba(11, 29, 58, 0.35); padding-top: 0.35rem; transition: color 0.5s var(--ease-out); }
.explorer__item.is-active .explorer__num { color: var(--cyan); }

.explorer__icon {
	flex: none;
	width: 2.7rem; height: 2.7rem; border-radius: 0.85rem;
	display: grid; place-items: center;
	color: var(--ink-soft);
	background: rgba(11, 29, 58, 0.04);
	border: 1px solid var(--hairline);
	transition: all 0.6s var(--ease-out);
}
.explorer__icon .icon { width: 1.35rem; height: 1.35rem; }
.explorer__item.is-active .explorer__icon {
	color: #fff; background: var(--navy); border-color: var(--navy);
	box-shadow: 0 10px 30px -10px rgba(14, 42, 78, 0.5);
}

.explorer__text { display: flex; flex-direction: column; min-width: 0; }
.explorer__title {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.015em;
	color: var(--ink);
	transition: color 0.5s var(--ease-out);
}
.explorer__item.is-active .explorer__title { color: var(--navy); }
.explorer__sub { font-size: 0.85rem; color: var(--cyan); font-weight: 600; }

/* Mô tả mở ra mượt khi active */
.explorer__desc {
	display: block; max-height: 0; overflow: hidden;
	color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6;
	opacity: 0; transform: translateY(0.4rem);
	transition: max-height 0.7s var(--ease-out), opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), margin-top 0.7s var(--ease-out);
	margin-top: 0;
}
.explorer__item.is-active .explorer__desc {
	max-height: 10rem; opacity: 1; transform: none; margin-top: 0.5rem;
}

.explorer__link {
	display: inline-flex; align-items: center; gap: 0.35rem;
	font-weight: 600; font-size: 0.88rem; color: var(--blue);
	margin-top: 0.5rem;
}
.explorer__link .icon { width: 0.85rem; height: 0.85rem; transition: transform 0.5s var(--ease-spring); }
.explorer__link:hover .icon { transform: translate(2px, -2px); }

.explorer__stage-core {
	aspect-ratio: 16 / 10.5;
	background:
		radial-gradient(60% 55% at 50% 62%, rgba(42, 169, 223, 0.12) 0%, rgba(42, 169, 223, 0) 70%),
		linear-gradient(170deg, #ffffff 0%, #e9f2fa 100%);
}
.explorer__stage-core canvas {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important;
	cursor: grab;
}
.explorer__stage-core canvas:active { cursor: grabbing; }

.explorer__watermark {
	position: absolute; top: 0.6rem; right: 1.4rem;
	font-size: clamp(5rem, 9vw, 8rem); font-weight: 500;
	color: rgba(14, 42, 78, 0.06);
	letter-spacing: -0.04em; line-height: 1;
	user-select: none;
}
.explorer__hint {
	position: absolute; left: 1.4rem; bottom: 1.2rem;
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: var(--ink-soft); opacity: 0.75;
}
.explorer__hint svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 899px) {
	.explorer { grid-template-columns: 1fr; }
	.explorer__side { position: relative; top: 0; }
	.explorer__stage-core { aspect-ratio: 4 / 3; }
}

/* ---------- Sustainability (dải navy) ---------- */

.sustain {
	position: relative;
	background:
		radial-gradient(80% 90% at 85% -10%, rgba(42, 169, 223, 0.22), transparent 60%),
		radial-gradient(60% 80% at 8% 110%, rgba(27, 95, 168, 0.35), transparent 60%),
		linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
	border-radius: clamp(1.6rem, 4vw, 3rem);
	margin-inline: clamp(0.6rem, 1.6vw, 1.6rem);
	overflow: clip;
}
.sustain__glow {
	position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
	background-image:
		linear-gradient(rgba(127, 208, 242, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 208, 242, 0.07) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, transparent 100%);
}
.sustain__head { max-width: 640px; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

.sustain__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.sustain__card {
	position: relative;
	display: flex; flex-direction: column; gap: 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(127, 208, 242, 0.16);
	border-radius: 1.6rem;
	padding: 2rem;
	min-height: 260px;
	color: #eaf4fc;
	overflow: hidden;
	transform: rotate(calc((var(--i) - 1) * 0.6deg));
	transition: transform 0.8s var(--ease-out), background-color 0.8s var(--ease-out), border-color 0.8s var(--ease-out);
}

/* Số ghost khổng lồ phía sau + vệt shine quét qua khi hover */
.sustain__card::before {
	content: counter(sustain, decimal-leading-zero);
	counter-increment: none;
	position: absolute; right: 0.6rem; bottom: -1.6rem;
	font-family: var(--font-display); font-weight: 700;
	font-size: 7rem; line-height: 1; letter-spacing: -0.05em;
	color: rgba(127, 208, 242, 0.07);
	pointer-events: none;
}
.sustain__card:nth-child(1)::before { content: "01"; }
.sustain__card:nth-child(2)::before { content: "02"; }
.sustain__card:nth-child(3)::before { content: "03"; }
.sustain__card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(127, 208, 242, 0.14) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 1.1s var(--ease-out);
	pointer-events: none;
}
.sustain__card:hover::after { transform: translateX(120%); }
.sustain__card:hover {
	transform: translateY(-8px) rotate(0deg);
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(127, 208, 242, 0.4);
}
.sustain__card-icon {
	width: 3.2rem; height: 3.2rem; border-radius: 1rem;
	display: grid; place-items: center;
	color: var(--cyan-soft);
	background: rgba(127, 208, 242, 0.08);
	border: 1px solid rgba(127, 208, 242, 0.2);
	margin-bottom: 0.4rem;
	transition: transform 0.7s var(--ease-spring), background-color 0.7s var(--ease-out);
}
.sustain__card-icon .icon { width: 1.6rem; height: 1.6rem; }
.sustain__card:hover .sustain__card-icon { transform: translateY(-3px) scale(1.05); background: rgba(127, 208, 242, 0.16); }
.sustain__card-num { color: var(--cyan-soft); }
.sustain__card h3 { font-size: 1.35rem; color: #fff; }
.sustain__card p { color: rgba(214, 231, 246, 0.72); font-size: 0.95rem; margin-top: auto; }
.sustain__card-arrow {
	position: absolute; top: 1.6rem; right: 1.6rem;
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	display: grid; place-items: center;
	border: 1px solid rgba(127, 208, 242, 0.3); color: var(--cyan-soft);
	transition: transform 0.7s var(--ease-spring), background-color 0.7s var(--ease-out);
}
.sustain__card-arrow .icon { width: 1rem; height: 1rem; }
.sustain__card:hover .sustain__card-arrow { transform: translate(2px, -2px); background: rgba(42, 169, 223, 0.25); }

@media (max-width: 899px) {
	.sustain__card { transform: none; }
}

/* ---------- News ---------- */

.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }

.news__card {
	display: flex; flex-direction: column; gap: 0.9rem;
	transition: transform 0.8s var(--ease-out);
}
.news__card:hover { transform: translateY(-6px); }

.news__thumb {
	aspect-ratio: 3 / 2; border-radius: 1.4rem; overflow: hidden;
	border: 1px solid var(--hairline);
	background: linear-gradient(160deg, #ffffff, #e8f2fa);
}
.news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.news__card:hover .news__thumb img { transform: scale(1.05); }
.news__thumb-fallback {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: rgba(27, 95, 168, 0.4);
}
.news__thumb-fallback .icon { width: 3rem; height: 3rem; }

.news__meta { color: var(--cyan); }
.news__title { font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; }
.news__more {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.88rem; font-weight: 600; color: var(--blue);
}
.news__more .icon { width: 0.9rem; height: 0.9rem; transition: transform 0.6s var(--ease-spring); }
.news__card:hover .news__more .icon { transform: translate(2px, -2px); }

/* ---------- CTA band ---------- */

/* CTA: dải navy full-bleed khép trang — tạo nhịp sáng → tối → sáng → tối */
.cta-band {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 7rem);
	background:
		radial-gradient(85% 90% at 82% -5%, rgba(42, 169, 223, 0.18), transparent 55%),
		radial-gradient(60% 80% at 5% 105%, rgba(27, 95, 168, 0.3), transparent 60%),
		linear-gradient(172deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.cta-band .bezel {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(127, 208, 242, 0.16);
	box-shadow: 0 40px 110px -50px rgba(0, 0, 0, 0.6);
}
.cta-band .bezel__core { border-color: rgba(127, 208, 242, 0.14); box-shadow: none; }
.cta-band__core {
	padding: clamp(3rem, 7vw, 5.5rem);
	background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 70%);
	text-align: left;
	color: #fff;
}
.cta-band__mesh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta-band__mesh::before,
.cta-band__mesh::after {
	content: ""; position: absolute;
	width: 70%; aspect-ratio: 1; border-radius: 50%;
	filter: blur(10px);
	animation: orb-drift 16s var(--ease-out) infinite alternate;
	will-change: transform;
}
.cta-band__mesh::before {
	right: -20%; top: -45%;
	background: radial-gradient(circle, rgba(42, 169, 223, 0.42) 0%, transparent 65%);
}
.cta-band__mesh::after {
	left: -22%; bottom: -55%;
	background: radial-gradient(circle, rgba(27, 95, 168, 0.5) 0%, transparent 65%);
	animation-delay: -8s; animation-direction: alternate-reverse;
}
@keyframes orb-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-8%, 10%, 0) scale(1.25); }
}
.cta-band__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.cta-band__title { position: relative; font-size: clamp(2rem, 4vw, 3.1rem); max-width: 18ch; letter-spacing: -0.03em; color: #fff; }
.cta-band__desc { position: relative; color: rgba(214, 231, 246, 0.78); max-width: 52ch; margin-top: 1.2rem; }
.cta-band__contact { position: relative; display: inline-block; margin-top: 2rem; color: rgba(214, 231, 246, 0.65); }

/* Form tư vấn bên phải */
.cta-form {
	position: relative;
	display: flex; flex-direction: column; gap: 1rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(127, 208, 242, 0.2);
	border-radius: 1.5rem;
	padding: clamp(1.4rem, 2.5vw, 2rem);
}
.cta-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cta-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cta-form__field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cta-form__field .mono { color: var(--cyan-soft); font-size: 0.62rem; }
.cta-form__field input,
.cta-form__field textarea {
	box-sizing: border-box;
	width: 100%; min-width: 0;
	font-family: var(--font-body); font-size: 0.95rem;
	color: var(--ink);
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0.85rem;
	padding: 0.75rem 1rem;
	outline: none; resize: vertical;
	transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.cta-form__field input::placeholder,
.cta-form__field textarea::placeholder { color: rgba(71, 89, 122, 0.5); }
.cta-form__field input:focus,
.cta-form__field textarea:focus {
	border-color: var(--cyan);
	box-shadow: 0 0 0 3px rgba(42, 169, 223, 0.3);
}
.cta-form__submit { align-self: flex-start; margin-top: 0.4rem; border: 0; cursor: pointer; }
.cta-form__notice { font-size: 0.9rem; padding: 0.7rem 1rem; border-radius: 0.8rem; }
.cta-form__notice--ok { background: rgba(74, 222, 128, 0.12); color: #b9f3cf; border: 1px solid rgba(74, 222, 128, 0.3); }
.cta-form__notice--err { background: rgba(248, 113, 113, 0.12); color: #ffd0d0; border: 1px solid rgba(248, 113, 113, 0.3); }

@media (max-width: 899px) {
	.cta-band__grid { grid-template-columns: 1fr; }
	.cta-form__row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--hairline); background: var(--surface); }
.site-footer__top {
	display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem;
}
.site-footer__brand img { width: 180px; }
.site-footer__brand p { color: var(--ink-soft); font-size: 0.95rem; max-width: 34ch; margin-top: 1.4rem; }
.site-footer__contact { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.6rem; color: var(--blue); text-transform: none; letter-spacing: 0.04em; }
.site-footer__contact span { display: inline-flex; align-items: center; gap: 0.6rem; }
.site-footer__contact .icon { width: 1.05rem; height: 1.05rem; color: var(--cyan); flex: none; }

.site-footer__col { display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__col h3 { color: rgba(11, 29, 58, 0.4); margin-bottom: 0.6rem; font-weight: 500; }
.site-footer__col a { color: var(--ink-soft); font-size: 0.93rem; transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.site-footer__col a:hover { color: var(--cyan); }

.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	border-top: 1px solid var(--hairline);
	padding-block: 1.6rem 2rem;
	font-size: 0.85rem; color: var(--ink-soft);
}
.site-footer__legal { display: flex; gap: 1.6rem; }
.site-footer__legal a:hover { color: var(--cyan); }

/* ---------- Wordmark PROTECH khổng lồ cuối trang ---------- */

.footer-wordmark {
	overflow: hidden;
	padding: clamp(1rem, 3vw, 2.5rem) 0 0;
	background: var(--surface);
	line-height: 0.78;
	user-select: none;
}
.footer-wordmark__text {
	display: flex; justify-content: space-between;
	padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
	font-family: var(--font-display);
	font-size: clamp(4rem, 17.5vw, 17rem);
	font-weight: 700; letter-spacing: -0.03em;
	transform: translateY(6%);
}
.footer-wordmark__letter {
	display: inline-block;
	transform: translateY(110%);
	background: linear-gradient(180deg, var(--cyan) -20%, var(--blue) 45%, var(--navy) 105%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	transition: transform 1.1s var(--ease-out);
}
.footer-wordmark.is-inview .footer-wordmark__letter { transform: translateY(0); }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(1) { transition-delay: 0s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(2) { transition-delay: 0.05s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(3) { transition-delay: 0.1s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(4) { transition-delay: 0.15s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(5) { transition-delay: 0.2s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(6) { transition-delay: 0.25s; }
.footer-wordmark.is-inview .footer-wordmark__letter:nth-child(7) { transition-delay: 0.3s; }
.footer-wordmark__letter:hover { transform: translateY(-4%) !important; transition-duration: 0.5s; }
html.no-motion .footer-wordmark__letter { transform: none; }

/* ---------- Cursor glow (desktop) ---------- */

.cursor-glow {
	position: fixed; z-index: 95; pointer-events: none;
	width: 520px; height: 520px; left: 0; top: 0;
	margin: -260px 0 0 -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42, 169, 223, 0.09) 0%, rgba(42, 169, 223, 0) 60%);
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}
@media (hover: none), (max-width: 899px) { .cursor-glow { display: none; } }

/* ---------- Trang thường ---------- */

.page-plain { padding: clamp(9rem, 16vh, 12rem) 0 clamp(4rem, 8vw, 6rem); min-height: 70vh; }
.page-plain__head { margin-bottom: 2.5rem; }
.page-plain__content { max-width: 72ch; color: var(--ink-soft); }
.page-plain__content h2, .page-plain__content h3 { color: var(--ink); margin: 2rem 0 0.8rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
	.site-nav__links { display: none; }
	.site-nav__burger { display: block; }
}

@media (max-width: 899px) {
	.about__grid { grid-template-columns: 1fr; }
	.about__visual { order: -1; }
	.about__visual-core { min-height: 280px; }
	.sustain__cards { grid-template-columns: 1fr; gap: 0.85rem; }
	.sustain__card { min-height: 0; padding: 1.5rem; }
	.news__grid { grid-template-columns: 1fr; gap: 1rem; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__stat { padding: 1.1rem 1rem; }
	.hero__scroll-hint { display: none; }
	/* Gọn mobile: bớt khoảng trắng, card nhỏ lại, bỏ trang trí không cần thiết */
	.scroll-connector { display: none; }
	.section__head { margin-bottom: 2.2rem; gap: 1.2rem; }
	.section__desc { margin-top: 1rem; }

	/* Bento 2 cột trên mobile — card nén gọn */
	.bento { gap: 0.7rem; }
	.bento__card { grid-column: span 6; min-height: 0; padding: 0.3rem; }
	.bento__card-core { gap: 0.85rem; padding: 1rem; }
	.bento__body--has-image { max-width: 74%; }
	.bento__illustration { max-width: 40%; }
	.bento__index { margin-bottom: 0.3rem; font-size: 0.62rem; }
	.bento__title { font-size: 1.05rem; margin-bottom: 0.45rem; }
	.bento__desc { font-size: 0.82rem; line-height: 1.5; }
	.bento__arrow { top: 0.9rem; right: 0.9rem; width: 1.9rem; height: 1.9rem; }
	.bento__arrow .icon { width: 0.85rem; height: 0.85rem; }

	.about__point { padding: 1.1rem 0; gap: 1.1rem; }
	.about__points { margin: 2rem 0; }

	/* Tin tức: card nằm ngang — thumbnail vuông bên trái, nội dung bên phải */
	.news__card {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		column-gap: 1rem; row-gap: 0.35rem;
		align-content: start;
	}
	.news__thumb {
		grid-row: 1 / span 3; grid-column: 1;
		aspect-ratio: 1; border-radius: 0.9rem;
	}
	.news__thumb-fallback .icon { width: 1.9rem; height: 1.9rem; }
	.news__meta { font-size: 0.62rem; }
	.news__title { font-size: 1.02rem; line-height: 1.4; }
	.news__more { font-size: 0.82rem; }
}

@media (max-width: 560px) {
	.site-footer__top { grid-template-columns: 1fr; gap: 1.8rem; padding-block: 2.8rem 2rem; }
	.section { padding-block: 3.6rem; }
	.btn { font-size: 0.92rem; }
	.site-nav__actions .btn { display: none; }
	.hero { padding-top: 6.5rem; padding-bottom: 3rem; }
	.eyebrow { font-size: 0.58rem; letter-spacing: 0.16em; padding: 0.34rem 0.75rem; }
	.hero__eyebrow { margin-bottom: 1.4rem; }
	.hero__title { margin-bottom: 1.4rem; }
	.hero__desc { margin-bottom: 1.8rem; }
	.hero__actions { margin-bottom: 2.4rem; gap: 0.7rem; }
	.hero__stat { padding: 0.85rem 0.9rem; }
	.hero__stat-value { font-size: 1.45rem; }
	.hero__stat-label { font-size: 0.74rem; }
	.marquee { padding: 0.8rem 0; }
	.marquee__item { padding-inline: 1.1rem; }
	.about { padding-bottom: 2rem; }
	.services { padding-top: 2rem; }
	.sustain { margin-inline: 0.5rem; }
	.cta-band { padding-block: 3.6rem; }
	.cta-band__core { padding: 1.8rem 1.3rem; }
	.to-top { right: 0.85rem; bottom: 0.85rem; width: 2.7rem; height: 2.7rem; }
}

/* ==========================================================================
   Trang con (Giới thiệu, Lĩnh vực, Bền vững, Tuyển dụng, Liên hệ, Truyền thông)
   ========================================================================== */

.page-sub { position: relative; }

/* Hero trang con */
.page-hero {
	position: relative;
	padding: clamp(8.5rem, 16vh, 12rem) 0 clamp(2.5rem, 5vw, 4rem);
	overflow: clip;
}
.page-hero__glow {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(55% 70% at 78% 10%, rgba(42, 169, 223, 0.12), transparent 60%),
		radial-gradient(rgba(27, 95, 168, 0.05) 1px, transparent 1.5px) 0 0 / 22px 22px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
.page-hero__title {
	font-size: clamp(2.4rem, 5.6vw, 4.4rem);
	font-weight: 600; letter-spacing: -0.03em; line-height: 1.06;
	max-width: 20ch; margin-bottom: 1.6rem;
}
.page-hero__desc { color: var(--ink-soft); max-width: 56ch; font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* Section nền tint nhẹ để tách nhịp trên trang con */
.section--tint { background: linear-gradient(180deg, rgba(233, 242, 250, 0.55), rgba(245, 248, 252, 0)); }

/* Duo: 2 card tầm nhìn / sứ mệnh */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.duo__card {
	position: relative;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	background: var(--surface);
	padding: clamp(1.8rem, 3.5vw, 3rem);
	box-shadow: var(--shadow-float);
	overflow: hidden;
}
.duo__card--dark {
	background:
		radial-gradient(80% 90% at 85% -10%, rgba(42, 169, 223, 0.25), transparent 60%),
		linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
	border-color: rgba(127, 208, 242, 0.2);
	color: #eaf4fc;
}
.duo__icon {
	display: grid; place-items: center;
	width: 3.2rem; height: 3.2rem; border-radius: 1rem;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.09);
	border: 1px solid rgba(42, 169, 223, 0.18);
	margin-bottom: 1.6rem;
}
.duo__card--dark .duo__icon { color: var(--cyan-soft); background: rgba(127, 208, 242, 0.1); border-color: rgba(127, 208, 242, 0.25); }
.duo__icon .icon { width: 1.6rem; height: 1.6rem; }
.duo__label { color: var(--cyan); margin-bottom: 0.8rem; }
.duo__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 1rem; }
.duo__card--dark .duo__title { color: #fff; }
.duo__desc { color: var(--ink-soft); font-size: 0.98rem; }
.duo__card--dark .duo__desc { color: rgba(214, 231, 246, 0.75); }

/* Values: lưới giá trị cốt lõi / phúc lợi */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.values--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.values__card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.6rem;
	padding: 1.8rem;
	transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
}
.values__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: rgba(42, 169, 223, 0.35); }
.values__icon {
	display: grid; place-items: center;
	width: 2.9rem; height: 2.9rem; border-radius: 0.9rem;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.09);
	border: 1px solid rgba(42, 169, 223, 0.18);
	margin-bottom: 1.2rem;
}
.values__icon .icon { width: 1.4rem; height: 1.4rem; }
.values__num { position: absolute; top: 1.6rem; right: 1.6rem; color: rgba(11, 29, 58, 0.3); }
.values__title { font-size: 1.3rem; }
.values__title--sm { font-size: 1.12rem; }
.values__sub { color: var(--cyan); font-weight: 600; font-size: 0.85rem; margin: 0.2rem 0 0.7rem; }
.values__desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin-top: 0.5rem; }

/* Stats band trang con */
.hero__stats--wide { max-width: none; }
.stats-band { padding-block: clamp(2rem, 4vw, 3rem); }

/* Members: công ty thành viên */
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.members__card {
	border-top: 2px solid var(--cyan);
	background: var(--surface);
	border-radius: 0 0 1.4rem 1.4rem;
	padding: 1.8rem;
	box-shadow: var(--shadow-float);
	transition: transform 0.7s var(--ease-out);
}
.members__card:hover { transform: translateY(-6px); }
.members__num { color: var(--cyan); display: block; margin-bottom: 0.9rem; }
.members__title { font-size: 1.25rem; margin-bottom: 0.6rem; }
.members__desc { color: var(--ink-soft); font-size: 0.94rem; }

/* CTA cuối trang con: dải navy bo góc */
.subpage-cta { padding-block: clamp(3rem, 6vw, 5rem); }
.subpage-cta__inner {
	background:
		radial-gradient(80% 100% at 85% -10%, rgba(42, 169, 223, 0.25), transparent 60%),
		linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
	border-radius: var(--radius-xl);
	padding: clamp(2.5rem, 6vw, 4.5rem);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.subpage-cta__inner .section__title { max-width: 24ch; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.subpage-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.subpage-cta--on-dark { padding-top: 0; }

.btn--ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.btn--ghost-light:hover { border-color: rgba(127, 208, 242, 0.6); background: rgba(127, 208, 242, 0.08); }
.btn--ghost-light .btn__orb { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Domains: block lĩnh vực xen kẽ */
.domains { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.domain {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(2.2rem, 4.5vw, 3.5rem);
	border-top: 1px solid var(--hairline);
}
.domain:last-child { border-bottom: 1px solid var(--hairline); }
.domain--flip .domain__visual { order: 2; }
.domain__visual {
	position: relative;
	display: grid; place-items: center;
	aspect-ratio: 16 / 9.5;
	border-radius: 1.6rem;
	background:
		radial-gradient(rgba(27, 95, 168, 0.08) 1px, transparent 1.5px) 0 0 / 18px 18px,
		linear-gradient(150deg, #ffffff 0%, #e9f3fb 100%);
	border: 1px solid var(--hairline);
	overflow: hidden;
}
.domain__watermark {
	position: absolute; right: 1rem; bottom: -1.2rem;
	font-size: clamp(5rem, 9vw, 7.5rem); font-weight: 500;
	color: rgba(14, 42, 78, 0.06); letter-spacing: -0.04em; line-height: 1;
}
.domain__icon {
	display: grid; place-items: center;
	width: 5rem; height: 5rem; border-radius: 1.5rem;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.1);
	border: 1px solid rgba(42, 169, 223, 0.2);
}
.domain__icon .icon { width: 2.5rem; height: 2.5rem; }
.domain__num { color: var(--cyan); }
.domain__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 0.5rem; }
.domain__sub { color: var(--cyan); font-weight: 600; margin: 0.3rem 0 1rem; }
.domain__desc { color: var(--ink-soft); max-width: 56ch; }
.domain__features {
	list-style: none; margin: 1.4rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.4rem;
}
.domain__features li {
	position: relative; padding-left: 1.3rem;
	font-size: 0.92rem; color: var(--ink-soft);
}
.domain__features li::before {
	content: ""; position: absolute; left: 0; top: 0.52em;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--cyan); box-shadow: 0 0 8px rgba(42, 169, 223, 0.6);
}

/* Trang Bền vững: nền navy toàn trang */
.page-sub--dark {
	background:
		radial-gradient(80% 60% at 80% -5%, rgba(42, 169, 223, 0.16), transparent 60%),
		linear-gradient(175deg, var(--navy) 0%, var(--navy-deep) 100%);
	color: #eaf4fc;
}
.page-sub--dark .page-hero__title { color: #fff; }
.page-sub--dark .page-hero__desc { color: rgba(214, 231, 246, 0.75); }
.page-sub--dark .eyebrow { color: var(--cyan-soft); border-color: rgba(127, 208, 242, 0.3); background: rgba(127, 208, 242, 0.08); }
.page-sub--dark .page-hero__glow {
	background:
		radial-gradient(55% 70% at 78% 10%, rgba(42, 169, 223, 0.18), transparent 60%),
		radial-gradient(rgba(127, 208, 242, 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
.sustain__cards--page { counter-reset: none; }
.sustain__card-heading { font-family: var(--font-display); font-size: 1.35rem; color: #fff; line-height: 1.2; margin: 0; }

/* Cam kết: số liệu lớn trên nền tối */
.commitments__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: rgba(127, 208, 242, 0.18);
	border-block: 1px solid rgba(127, 208, 242, 0.18);
}
.commitments__item { background: transparent; padding: 2rem 1.6rem; backdrop-filter: none; background: rgba(8, 26, 51, 0.5); }
.commitments__value {
	display: block; font-family: var(--font-display); font-weight: 600;
	font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.02em;
	color: var(--cyan-soft); margin-bottom: 0.5rem;
}
.commitments__label { color: rgba(214, 231, 246, 0.72); font-size: 0.92rem; max-width: 30ch; }

/* Steps: quy trình tuyển dụng */
.steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem;
	counter-reset: step;
}
.steps__item {
	position: relative;
	border-top: 1px solid var(--hairline-strong);
	padding-top: 1.4rem;
}
.steps__num { color: var(--cyan); display: block; margin-bottom: 0.8rem; }
.steps__title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.steps__desc { color: var(--ink-soft); font-size: 0.92rem; }

/* Jobs: danh sách vị trí đang tuyển */
.jobs { display: flex; flex-direction: column; }
.jobs__row {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 1.5rem 0.4rem;
	border-top: 1px solid var(--hairline);
	transition: background-color 0.5s var(--ease-out), padding-left 0.5s var(--ease-out);
}
.jobs__row:last-child { border-bottom: 1px solid var(--hairline); }
.jobs__row:hover { background: rgba(42, 169, 223, 0.05); padding-left: 1rem; }
.jobs__title { font-size: 1.2rem; margin-bottom: 0.2rem; }
.jobs__meta { color: var(--ink-soft); }
.jobs__action {
	display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
	font-weight: 600; font-size: 0.9rem; color: var(--blue);
}
.jobs__action .icon { width: 0.9rem; height: 0.9rem; transition: transform 0.5s var(--ease-spring); }
.jobs__row:hover .jobs__action .icon { transform: translate(2px, -2px); }

/* Contact */
.contact { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.contact__grid {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.contact__channel { display: flex; gap: 1.1rem; padding: 1.3rem 0; border-top: 1px solid var(--hairline); }
.contact__channel:last-of-type { border-bottom: 1px solid var(--hairline); }
.contact__channel-icon {
	flex: none;
	display: grid; place-items: center;
	width: 2.9rem; height: 2.9rem; border-radius: 0.9rem;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.09);
	border: 1px solid rgba(42, 169, 223, 0.18);
}
.contact__channel-icon .icon { width: 1.35rem; height: 1.35rem; }
.contact__channel-label { color: var(--cyan); display: block; margin-bottom: 0.25rem; }
.contact__channel-value { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--navy); }
a.contact__channel-value:hover { color: var(--cyan); }
.contact__note { margin-top: 2rem; color: var(--ink-soft); }
.contact__note .mono { color: var(--cyan); margin-bottom: 0.5rem; }

/* Form liên hệ trên nền sáng */
.cta-form--on-light { background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow-soft); }
.cta-form--on-light .cta-form__field .mono { color: var(--blue); }
.cta-form--on-light .cta-form__field input,
.cta-form--on-light .cta-form__field textarea { border-color: var(--hairline-strong); }
.cta-form--on-light .cta-form__notice--ok { background: rgba(34, 160, 90, 0.1); color: #1c7a48; border-color: rgba(34, 160, 90, 0.3); }
.cta-form--on-light .cta-form__notice--err { background: rgba(220, 70, 70, 0.08); color: #b03030; border-color: rgba(220, 70, 70, 0.3); }

/* Phân trang tin tức */
.news__pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }
.news__pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.news__pagination a, .news__pagination span {
	display: grid; place-items: center;
	min-width: 2.6rem; height: 2.6rem; padding-inline: 0.8rem;
	border-radius: 999px; border: 1px solid var(--hairline-strong);
	font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft);
	transition: all 0.4s var(--ease-out);
}
.news__pagination a:hover { border-color: rgba(42, 169, 223, 0.5); color: var(--navy); }
.news__pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Bài viết chi tiết */
.page-hero--article { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-hero__title--article { max-width: 26ch; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.article__meta { color: var(--ink-soft); }
.article__cover { margin-bottom: clamp(2rem, 4vw, 3rem); }
.article__cover img { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--hairline); }
.article__content { max-width: 72ch; color: var(--ink-soft); font-size: 1.05rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.article__content h2, .article__content h3 { color: var(--ink); margin: 2.2rem 0 0.9rem; }
.article__content p + p { margin-top: 1.1rem; }
.article__content img { border-radius: 1.2rem; margin-block: 1.5rem; }
.article__content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article__content blockquote {
	margin: 1.8rem 0; padding: 0.4rem 0 0.4rem 1.4rem;
	border-left: 2px solid var(--cyan);
	color: var(--ink); font-family: var(--font-display); font-size: 1.15rem;
}
.article__nav {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
	border-top: 1px solid var(--hairline);
	padding-block: 2rem clamp(3rem, 6vw, 5rem);
}
.article__nav-link { display: flex; flex-direction: column; gap: 0.4rem; }
.article__nav-link--next { text-align: right; grid-column: 2; }
.article__nav-link .mono { color: var(--cyan); }
.article__nav-title { font-family: var(--font-display); font-weight: 600; color: var(--navy); transition: color 0.4s var(--ease-out); }
.article__nav-link:hover .article__nav-title { color: var(--cyan); }

/* Tabs lọc chuyên mục */
.filter-tabs {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter-tabs__tab {
	display: inline-flex; align-items: center;
	padding: 0.45rem 1.1rem; border-radius: 999px;
	border: 1px solid var(--hairline-strong);
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-soft);
	transition: all 0.4s var(--ease-out);
}
.filter-tabs__tab:hover { border-color: rgba(42, 169, 223, 0.5); color: var(--navy); }
.filter-tabs__tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Giá trị cốt lõi bản đầy đủ: hàng lớn */
.value-rows { display: flex; flex-direction: column; }
.value-row {
	display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: clamp(1.2rem, 3vw, 3rem);
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--hairline);
}
.value-row:last-child { border-bottom: 1px solid var(--hairline); }
.value-row__head { display: flex; align-items: flex-start; gap: 1rem; }
.value-row__num { color: rgba(11, 29, 58, 0.3); padding-top: 0.6rem; }
.value-row__title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 0.8rem; }
.value-row__sub { color: var(--cyan); font-size: 0.55em; font-weight: 600; vertical-align: middle; margin-left: 0.5rem; }
.value-row__desc { color: var(--ink); font-size: 1.05rem; max-width: 60ch; }
.value-row__proof { color: var(--ink-soft); font-size: 0.92rem; max-width: 60ch; margin-top: 0.7rem; padding-left: 1rem; border-left: 2px solid rgba(42, 169, 223, 0.4); }

/* Lĩnh vực liên quan */
.related-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.related-domains__card {
	display: flex; align-items: center; gap: 1.1rem;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.3rem;
	padding: 1.1rem 1.3rem;
	transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.related-domains__card:hover { transform: translateY(-4px); border-color: rgba(42, 169, 223, 0.4); box-shadow: var(--shadow-float); }
.related-domains__icon {
	flex: none; display: grid; place-items: center;
	width: 2.7rem; height: 2.7rem; border-radius: 0.85rem;
	color: var(--blue);
	background: rgba(42, 169, 223, 0.09);
	border: 1px solid rgba(42, 169, 223, 0.18);
}
.related-domains__icon .icon { width: 1.35rem; height: 1.35rem; }
.related-domains__text { display: flex; flex-direction: column; min-width: 0; }
.related-domains__title { font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.related-domains__sub { font-size: 0.82rem; color: var(--ink-soft); }
.related-domains__arrow { margin-left: auto; color: var(--ink-soft); }
.related-domains__arrow .icon { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-spring); }
.related-domains__card:hover .related-domains__arrow .icon { transform: translate(2px, -2px); color: var(--cyan); }

/* Trang sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.sitemap-col__head { color: rgba(11, 29, 58, 0.4); margin: 0 0 1rem; font-weight: 500; }
.sitemap-col__head + .sitemap-list + .sitemap-col__head { margin-top: 2.2rem; }
.sitemap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.sitemap-list a { color: var(--ink); font-weight: 500; transition: color 0.3s var(--ease-out); }
.sitemap-list a:hover { color: var(--cyan); }
.sitemap-list ul {
	list-style: none; margin: 0.45rem 0 0.6rem; padding: 0 0 0 1.1rem;
	display: flex; flex-direction: column; gap: 0.4rem;
	border-left: 1px solid var(--hairline-strong);
}
.sitemap-list ul a { color: var(--ink-soft); font-weight: 400; font-size: 0.95rem; }

/* Card năng lực (trang chi tiết lĩnh vực) */
.values--four-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Hero trang dịch vụ: chữ trái + ảnh minh hoạ phải ---------- */
.domain-hero { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.domain-hero__grid {
	display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.domain-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.domain-hero__stage {
	position: relative;
	aspect-ratio: 4 / 3.4;
	background:
		radial-gradient(65% 55% at 50% 60%, rgba(42, 169, 223, 0.1) 0%, rgba(42, 169, 223, 0) 70%),
		linear-gradient(165deg, #ffffff 0%, #e9f2fa 100%);
}
.domain-hero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.domain-hero__stage:has(img)::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(8, 26, 51, 0) 45%, rgba(8, 26, 51, 0.7) 100%);
}
.domain-hero__badge {
	position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1;
	color: var(--blue); opacity: 0.8;
}
.domain-hero__stage:has(img) .domain-hero__badge { color: #fff; opacity: 0.9; }

/* ---------- Dải ảnh minh hoạ (giữa kiến trúc giải pháp và quy trình) ---------- */
.domain-media__core {
	position: relative;
	aspect-ratio: 21 / 8;
}
.domain-media__core img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.domain-media__core::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(8, 26, 51, 0.62) 0%, rgba(8, 26, 51, 0.1) 55%, rgba(8, 26, 51, 0) 75%);
}
.domain-media__caption {
	position: absolute; left: clamp(1.2rem, 3vw, 2.2rem); top: 50%; transform: translateY(-50%);
	z-index: 1; max-width: 26ch;
}
.domain-media__caption .mono { color: var(--cyan); display: block; margin-bottom: 0.5rem; }
.domain-media__caption strong {
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.3; color: #fff;
}

/* ---------- Feature card có spec kỹ thuật ---------- */
.feature-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.feature-card {
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.6rem;
	padding: clamp(1.5rem, 2.5vw, 2.1rem);
	transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); border-color: rgba(42, 169, 223, 0.35); }
.feature-card__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; }
.feature-card__num { color: rgba(11, 29, 58, 0.3); }
.feature-card__title { font-size: 1.3rem; margin-bottom: 0.6rem; }
.feature-card__desc { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; }
.feature-card__specs {
	list-style: none; margin: 1.2rem 0 0; padding: 1.1rem 0 0;
	border-top: 1px dashed var(--hairline-strong);
	display: flex; flex-direction: column; gap: 0.5rem;
}
.feature-card__specs li {
	position: relative; padding-left: 1.35rem;
	font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em;
	color: var(--blue);
}
.feature-card__specs li::before {
	content: ""; position: absolute; left: 0; top: 0.4em;
	width: 0.55rem; height: 0.55rem;
	border: 1.5px solid var(--cyan); border-radius: 2px;
	transform: rotate(45deg);
}

/* ---------- Kiến trúc giải pháp 4 lớp (stack từ ứng dụng xuống hiện trường) ---------- */
.arch { display: flex; flex-direction: column; gap: 0.7rem; perspective: 1200px; }
.arch__layer {
	display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: 1.5rem; align-items: center;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.2rem;
	padding: 1.2rem 1.5rem;
	margin-inline: calc(var(--depth) * clamp(0.4rem, 1.5vw, 1.6rem));
	box-shadow: var(--shadow-float);
	transition: transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.arch__layer:hover { transform: translateX(4px); border-color: rgba(11, 29, 58, 0.16); }
.arch__label { display: flex; align-items: baseline; gap: 0.8rem; }
.arch__num { color: var(--cyan); }
.arch__title { font-size: 1.08rem; }
.arch__items {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.45rem 1.6rem;
}
.arch__items li {
	position: relative; padding-left: 1rem;
	font-size: 0.88rem; color: var(--ink-soft);
}
.arch__items li::before {
	content: ""; position: absolute; left: 0; top: 0.55em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--cyan); opacity: 0.7;
}

/* Chip chuẩn & công nghệ */
.stack-chips {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.stack-chips__label { color: var(--ink-soft); margin-right: 0.6rem; }
.stack-chips__chip {
	display: inline-flex; align-items: center;
	padding: 0.4rem 0.95rem; border-radius: 999px;
	border: 1px solid rgba(27, 95, 168, 0.25);
	background: rgba(42, 169, 223, 0.06);
	font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
	color: var(--blue);
	transition: all 0.4s var(--ease-out);
}
.stack-chips__chip:hover { border-color: var(--cyan); background: rgba(42, 169, 223, 0.12); transform: translateY(-2px); }

/* ---------- Use case theo loại công trình ---------- */
.usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.usecase {
	display: flex; flex-direction: column; gap: 0.7rem;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.6rem;
	padding: 1.8rem;
	transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.usecase:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.usecase__title { font-size: 1.2rem; }
.usecase__context { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.usecase__result {
	margin-top: auto; padding-top: 1rem;
	border-top: 1px dashed var(--hairline-strong);
	color: var(--navy); font-weight: 500; font-size: 0.94rem; line-height: 1.55;
}
.usecase__result-label {
	display: block; color: var(--cyan); margin-bottom: 0.35rem;
}

/* Card "bài toán": viền trái cam nhạt cảnh báo, phân biệt với card giải pháp */

/* Dải số liệu cam kết trên trang chi tiết lĩnh vực */
.domain-stats { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.domain-stats__inner {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background:
		radial-gradient(80% 100% at 85% -10%, rgba(42, 169, 223, 0.22), transparent 60%),
		linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
	border-radius: var(--radius-xl);
	overflow: hidden;
}
.domain-stats__item {
	padding: clamp(1.8rem, 3.5vw, 2.8rem);
	border-right: 1px solid rgba(127, 208, 242, 0.14);
}
.domain-stats__item:last-child { border-right: 0; }
.domain-stats__value {
	display: block; font-family: var(--font-display); font-weight: 600;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: -0.02em;
	color: var(--cyan-soft); margin-bottom: 0.5rem;
}
.domain-stats__label { color: rgba(214, 231, 246, 0.75); font-size: 0.92rem; max-width: 28ch; }

/* FAQ accordion */
.faq__grid {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.faq__head { position: sticky; top: 6rem; }
.faq__list { display: flex; flex-direction: column; gap: 0.85rem; }
.faq__item {
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 1.3rem;
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.faq__item[open] { border-color: rgba(42, 169, 223, 0.4); box-shadow: var(--shadow-float); }
.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.2rem 1.4rem;
	font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
	color: var(--navy);
	cursor: pointer; list-style: none;
	transition: color 0.4s var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue); }
.faq__toggle {
	position: relative; flex: none;
	width: 1.9rem; height: 1.9rem; border-radius: 50%;
	border: 1px solid var(--hairline-strong);
	transition: transform 0.5s var(--ease-spring), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.faq__toggle::before, .faq__toggle::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 0.75rem; height: 1.5px; background: currentColor;
	transform: translate(-50%, -50%);
}
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.5s var(--ease-out); }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); color: #fff; }
.faq__a {
	padding: 0 1.4rem 1.3rem;
	color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65;
	max-width: 62ch;
}

/* Steps 5 cột cho quy trình triển khai lĩnh vực */
.steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Link "Xem chi tiết" dưới block lĩnh vực */
.domain__more { margin-top: 1.4rem; }

/* Nội dung soạn thảo trên nền tối */
.article__content--on-dark { color: rgba(214, 231, 246, 0.78); }
.article__content--on-dark h2, .article__content--on-dark h3 { color: #fff; }

/* Responsive trang con */
@media (max-width: 899px) {
	.duo { grid-template-columns: 1fr; }
	.values, .values--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.values__card { padding: 1.2rem; }
	.values__title { font-size: 1.1rem; }
	.values__title--sm { font-size: 1rem; }
	.values__desc { font-size: 0.85rem; }
	.members { grid-template-columns: 1fr; }
	.domain { grid-template-columns: 1fr; gap: 1.2rem; }
	.domain--flip .domain__visual { order: 0; }
	.domain__visual { aspect-ratio: 16 / 7; }
	.domain__features { grid-template-columns: 1fr; }
	.commitments__grid { grid-template-columns: 1fr; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact__grid { grid-template-columns: 1fr; }
	.subpage-cta__inner { flex-direction: column; align-items: flex-start; }
	.jobs__row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
	.article__nav { grid-template-columns: 1fr; }
	.article__nav-link--next { text-align: left; grid-column: auto; }
	.value-row { grid-template-columns: 1fr; gap: 0.8rem; }
	.related-domains { grid-template-columns: 1fr; }
	.sitemap-grid { grid-template-columns: 1fr; }
	.values--four-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.domain-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; }
	.domain-hero__stage { aspect-ratio: 16 / 10; }
	.domain-media__core { aspect-ratio: 4 / 3.4; }
	.domain-media__caption { max-width: 90%; }
	.feature-cards { grid-template-columns: 1fr; gap: 0.85rem; }
	.arch__layer { grid-template-columns: 1fr; gap: 0.6rem; margin-inline: 0; padding: 1.1rem 1.2rem; }
	.usecases { grid-template-columns: 1fr; gap: 0.85rem; }
	.domain-stats__inner { grid-template-columns: 1fr; }
	.domain-stats__item { border-right: 0; border-bottom: 1px solid rgba(127, 208, 242, 0.14); padding: 1.5rem 1.6rem; }
	.domain-stats__item:last-child { border-bottom: 0; }
	.faq__grid { grid-template-columns: 1fr; }
	.faq__head { position: static; }
}
@media (max-width: 560px) {
	.steps { grid-template-columns: 1fr; }
	.values, .values--three { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	[data-reveal], [data-hero-fade], .hero__line { opacity: 1 !important; transform: none !important; filter: none !important; }
}