/* ===== Tokens (đổi ở đây là đổi toàn site) ===== */
:root {
	--color-primary: #f5a623;   /* bị Customizer ghi đè */
	--color-dark: #1c1f26;
	--color-navy: #0b1f3a;      /* màu navy của logo, dùng cho tiêu đề section */
	--color-line: #e6e8ec;      /* viền mảnh của thẻ */
	--color-text: #333;
	--color-muted: #6b7280;
	--color-bg-alt: #f5f5f4;
	--font-base: 'Be Vietnam Pro', system-ui, sans-serif;
	--container: 1440px;   /* rộng tối đa của khung nội dung (đã gồm lề 2 bên) */
	--gutter: clamp(16px, 3vw, 40px); /* lề trái/phải của .container */
	--radius: 6px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-base); color: var(--color-text); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 800px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; top: 16px; left: 16px;
	padding: 8px 16px; background: #fff; z-index: 1000;
}

/* ===== Header ===== */
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Header cố định (position: fixed) ở MỌI trang: khi thu gọn lúc cuộn, chiều cao header đổi nhưng KHÔNG làm dịch bố cục trang.
   (Header sticky nằm trong luồng bố cục sẽ gây vòng lặp: thu gọn → trang ngắn lại → cuộn lùi về ngưỡng → phình ra → nhấp nháy.) */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: var(--color-dark); color: #fff;
	transition: background-color .35s, box-shadow .35s;
}
/* Trang chủ: trong suốt, nằm đè lên hero */
.site-header--overlay {
	position: fixed; left: 0; right: 0;
	background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
}
/* Khi đã cuộn: nền tối, có bóng */
.site-header.is-scrolled { background: rgba(20, 24, 33, .97); box-shadow: 0 6px 24px rgba(0,0,0,.25); }

.admin-bar .site-header { top: 32px; }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 28px; transition: padding .35s; }
.is-scrolled .site-header__inner { padding-block: 12px; }

/* Logo mặc định: biểu tượng SVG + tên site + khẩu hiệu (chữ trắng, in hoa) */
.site-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.site-logo__mark { width: 50px; height: 50px; flex: none; transition: width .35s, height .35s; }
.site-logo__roof { fill: none; stroke: var(--color-primary); stroke-width: 4.5; stroke-linecap: square; stroke-linejoin: miter; transition: translate .3s; }
.site-logo__towers { fill: currentColor; }
.site-logo__windows { fill: none; stroke: var(--color-dark); stroke-width: 2; }
.site-logo:hover .site-logo__roof { translate: 0 -2px; }
.site-logo__text { display: grid; line-height: 1.1; }
.site-title { color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.site-logo__tagline { margin-top: 5px; font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.is-scrolled .site-logo__mark { width: 40px; height: 40px; }
/* Logo ảnh (Tùy biến → Nhận diện trang web): dùng bản chữ trắng vì header luôn nền tối */
.custom-logo-link { display: block; line-height: 0; }
.custom-logo { width: auto; height: 60px; transition: height .35s; }
.is-scrolled .custom-logo { height: 46px; }

/* Cột phải: 2 hàng, căn phải */
.site-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; transition: gap .35s; }
.is-scrolled .site-header__right { gap: 0; } /* hàng trên đã thu về 0 → bỏ luôn khoảng cách để menu thẳng hàng với logo */

/* Hàng trên: hotline + mạng xã hội. Thu gọn khi cuộn */
/* overflow: hidden để thu gọn mượt khi cuộn; padding + margin âm chừa chỗ cho nút nhấc lên và bóng đổ khi hover */
.site-header__top { display: flex; align-items: center; gap: 22px; max-height: 80px; padding-block: 14px; margin-block: -14px; overflow: hidden; transition: max-height .35s, opacity .35s, padding .35s, margin .35s; }
.is-scrolled .site-header__top { max-height: 0; opacity: 0; padding-block: 0; margin-block: 0; }

.header-hotline { display: flex; align-items: baseline; gap: 8px; color: #fff; text-decoration: none; }
.header-hotline span { font-size: .9rem; opacity: .85; }
.header-hotline strong { font-size: 1.25rem; font-weight: 500; color: var(--color-primary); letter-spacing: .02em; }

/* Mạng xã hội: nút tròn nền trắng, logo mang màu thương hiệu thật.
   Rê chuột: nền đổi sang màu thương hiệu, logo chuyển trắng. */
.icon--brand { fill: currentColor; stroke: none; }

.social-links { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social-link {
	--brand: var(--color-primary);
	display: grid; place-items: center; width: 36px; height: 36px;
	border-radius: 50%; background: #fff; color: var(--brand);
	box-shadow: 0 3px 10px rgba(0,0,0,.25);
	transition: background-color .25s, color .25s, translate .25s, box-shadow .25s;
}
.social-link:hover, .social-link:focus-visible { background: var(--brand); color: #fff; translate: 0 -3px; box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.social-link .icon { width: 18px; height: 18px; }

.social-link--facebook { --brand: #1877f2; }
.social-link--facebook .icon { width: 20px; height: 20px; }
.social-link--youtube { --brand: #ff0000; }
.social-link--youtube .icon { width: 20px; height: 20px; }
.social-link--tiktok { --brand: #010101; }
.social-link--tiktok .icon { width: 17px; height: 17px; filter: drop-shadow(-1.2px -1px 0 #25f4ee) drop-shadow(1.2px 1px 0 #fe2c55); } /* viền lệch xanh/hồng như logo TikTok */
.social-link--zalo { --brand: #0068ff; }
.social-link--zalo .icon { width: 25px; height: 25px; }
.social-link--mail .icon { width: 18px; height: 18px; }

/* Hàng dưới: menu */
.main-nav ul { display: flex; gap: 44px; margin: 0; padding: 0; list-style: none; }
.main-nav a { color: rgba(255,255,255,.82); font-size: 1.05rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.main-nav a:hover { color: #fff; }
.main-nav .current-menu-item > a { color: #fff; font-weight: 700; }
/* Vạch cam dưới chữ: quét từ trái sang phải khi hover */
.main-nav a { position: relative; display: inline-block; padding-block: 6px; }
.main-nav a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--color-primary);
	transform: scaleX(0); transform-origin: right;
	transition: transform .35s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-ancestor > a::after { transform: scaleX(1); }

.menu-toggle, .header-call { display: none; }

/* Màn hình 1025–1200px: menu còn 1 hàng nhưng chật → thu khoảng cách */
@media (min-width: 1025px) and (max-width: 1200px) {
	.site-header__inner { gap: 24px; }
	.main-nav ul { gap: 28px; }
	.main-nav a { font-size: 1rem; }
	.site-header__top { gap: 16px; }
}

/* ===== Header: tablet & mobile ===== */
@media (max-width: 1024px) {
	.site-header__inner { gap: 8px; padding-block: 16px; }
	.site-header__top { display: none; }
	/* Menu mở: header chuyển nền đặc để liền khối với bảng menu */
	.site-header.is-menu-open { background: var(--color-dark); }

	/* Nút gọi nhanh: đẩy sang phải, đứng cạnh nút menu */
	.header-call {
		display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto;
		border-radius: 50%; background: var(--color-primary); color: #fff;
		animation: call-pulse 2.4s infinite;
	}
	.header-call .icon { width: 20px; height: 20px; }

	/* Nút ☰ → ✕ khi mở menu */
	.menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
	.menu-toggle__bar,
	.menu-toggle__bar::before,
	.menu-toggle__bar::after { display: block; width: 24px; height: 2px; background: #fff; position: relative; transition: background-color .2s, top .25s, rotate .25s; }
	.menu-toggle__bar::before,
	.menu-toggle__bar::after { content: ''; position: absolute; left: 0; }
	.menu-toggle__bar::before { top: -7px; }
	.menu-toggle__bar::after { top: 7px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { top: 0; rotate: 45deg; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after { top: 0; rotate: -45deg; }

	/* Bảng menu xổ xuống: nền đặc để không lộ chữ hero phía sau */
	.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px 16px 16px; background: var(--color-dark); box-shadow: 0 16px 30px rgba(0,0,0,.35); }
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav a { display: block; padding-block: 12px; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s, padding-left .2s; }
	.main-nav a::after { display: none; }
	.main-nav a:hover,
	.main-nav .current-menu-item > a { color: var(--color-primary); padding-left: 8px; }
}

/* Vòng sóng lan ra quanh nút gọi, màu theo màu chủ đạo */
@keyframes call-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 60%, transparent); }
	70%  { box-shadow: 0 0 0 12px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (max-width: 480px) {
	.site-logo { gap: 10px; }
	.site-logo__mark { width: 38px; height: 38px; }
	.site-title { font-size: 1.05rem; }
	.site-logo__tagline { font-size: .58rem; letter-spacing: .2em; }
	.custom-logo { height: 42px; }
}

.site-title, .main-nav a, .header-hotline strong { font-family: 'Montserrat', var(--font-base); }


/* ===== Buttons ===== */
.btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-dark); }
.btn--outline { border: 2px solid #fff; color: #fff; }

/* Nút tách đôi dùng chung: [ CHỮ | → ]. Hover: nền quét trái → phải, mũi tên nhích phải.
   Mặc định dùng trên nền tối (quét trắng); .btn-split--light dùng trên nền sáng (quét navy). */
.btn-split {
	--sweep: #fff; --sweep-text: var(--color-dark);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: stretch; padding: 0; border-radius: 0;
	background: var(--color-primary); color: #fff; text-decoration: none;
	font-family: 'Montserrat', var(--font-base); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.btn-split--light { --sweep: var(--color-navy); --sweep-text: #fff; }
.btn-split::before {
	content: ''; position: absolute; inset: 0; z-index: -1; /* isolation giữ lớp nền này nằm dưới chữ nhưng vẫn trong nút */
	background: var(--sweep); transform: scaleX(0); transform-origin: right;
	transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.btn-split__text { display: flex; align-items: center; min-height: 58px; padding: 0 28px 0 32px; transition: color .45s; }
.btn-split__icon {
	display: grid; place-items: center; width: 58px;
	background: rgba(0,0,0,.14); /* ô mũi tên đậm hơn nền nút → tự đúng với mọi màu chủ đạo */
	transition: background-color .45s;
}
.btn-split__icon .icon { width: 20px; height: 20px; stroke-width: 2.2; transition: translate .3s; }
.btn-split:hover::before, .btn-split:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn-split:hover .btn-split__text, .btn-split:focus-visible .btn-split__text { color: var(--sweep-text); }
.btn-split:hover .btn-split__icon, .btn-split:focus-visible .btn-split__icon { background: var(--color-primary); }
.btn-split:hover .btn-split__icon .icon, .btn-split:focus-visible .btn-split__icon .icon { translate: 4px 0; }
.btn-split:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* ===== Sections ===== */
.section { padding-block: 80px; }
.section--alt { background: var(--color-bg-alt); }
.section__title { margin: 0 0 40px; font-size: 2rem; text-align: center; }
.section__more { margin-top: 40px; text-align: center; }
.page-title { margin: 0 0 32px; }

/* ===== Hero: slider toàn màn hình ===== */
.hero {
	position: relative; overflow: hidden;
	height: 100vh; height: 100svh; min-height: 620px; max-height: 920px;
	background: var(--color-dark); color: #fff;
}
.hero__slide {
	position: absolute; inset: 0; display: flex; align-items: center;
	opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Ảnh nền: phóng nhẹ rồi thu về khi slide hiện (hiệu ứng Ken Burns) */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; }
.hero__slide.is-active .hero__bg { transform: scale(1); }
/* Lớp phủ tối để chữ trắng luôn đọc được */
.hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10,14,22,.5), rgba(10,14,22,.3) 45%, rgba(10,14,22,.65)); }

/* padding-top bù chiều cao header, padding-bottom chừa chỗ cho 3 thẻ đè lên */
.hero__content { position: relative; z-index: 1; width: 100%; padding-block: 110px 150px; text-align: center; }
.hero__title {
	margin: 0; padding-left: .14em; /* bù letter-spacing ở ký tự cuối để chữ căn giữa chuẩn */
	font-family: 'Montserrat', var(--font-base); font-size: clamp(2.6rem, 8.5vw, 7.2rem); font-weight: 800;
	line-height: 1.05; letter-spacing: .14em; text-transform: uppercase; text-wrap: balance;
	text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero__subtitle {
	margin: 18px 0 0;
	font-family: 'Montserrat', var(--font-base); font-size: clamp(1rem, 2vw, 1.55rem); font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	text-wrap: balance; /* chia đều các dòng khi xuống dòng, tránh rớt 1 chữ lẻ */
}
.hero__btn { margin-top: 36px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* Chữ trượt lên lần lượt khi slide hiện */
.hero__title, .hero__subtitle, .hero__btn { opacity: 0; translate: 0 30px; transition: opacity .8s, translate .8s; }
.is-active .hero__title, .is-active .hero__subtitle, .is-active .hero__btn { opacity: 1; translate: 0 0; }
.is-active .hero__subtitle { transition-delay: .15s; }
.is-active .hero__btn { transition-delay: .3s; }

/* Mũi tên 2 bên: dải tối dọc mép màn hình */
.hero__arrow {
	position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
	display: grid; place-items: center; width: 40px; height: 140px;
	border: 0; background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
	transition: background-color .25s;
}
.hero__arrow:hover, .hero__arrow:focus-visible { background: var(--color-primary); }
.hero__arrow--prev { left: 0; }
.hero__arrow--next { right: 0; }
.hero__arrow .icon { width: 22px; height: 22px; }

/* 3 thẻ dịch vụ đè lên mép dưới hero */
.hero-cards { position: relative; z-index: 2; margin-top: -130px; }
.hero-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.hero-card {
	position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
	background: var(--color-dark); color: #fff; text-decoration: none;
	box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.hero-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(10,14,22,.88)); }
.hero-card__icon {
	position: absolute; top: 22px; right: 22px; z-index: 1;
	display: grid; place-items: center; width: 50px; height: 50px;
	border: 2px solid #fff; border-radius: 50%;
	transition: background-color .25s, border-color .25s, rotate .25s;
}
.hero-card__icon .icon { width: 20px; height: 20px; }
.hero-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 24px; }
.hero-card__title { margin: 0; font-family: 'Montserrat', var(--font-base); font-size: 1.25rem; font-weight: 700; }
.hero-card__text { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.85); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card:hover .hero-card__img { transform: scale(1.07); }
.hero-card:hover .hero-card__icon { background: var(--color-primary); border-color: var(--color-primary); rotate: 45deg; }

@media (max-width: 1024px) {
	.hero-cards__grid { gap: 20px; }
	.hero__arrow { width: 34px; height: 96px; }
}
/* Tablet: thẻ hẹp → cao hơn, bỏ mô tả, chữ và icon nhỏ lại để tên không đè icon */
@media (min-width: 768px) and (max-width: 1024px) {
	.hero-card { aspect-ratio: 4 / 3; }
	.hero-card__text { display: none; }
	.hero-card__title { font-size: 1.05rem; }
	.hero-card__body { padding: 16px 18px; }
	.hero-card__icon { top: 14px; right: 14px; width: 40px; height: 40px; }
}
@media (max-width: 767px) {
	.hero { min-height: 560px; }
	/* padding-inline chừa chỗ 2 bên cho mũi tên, để mũi tên nằm giữa chiều cao mà không đè chữ */
	.hero__content { padding-block: 90px 110px; padding-inline: 38px; }
	.hero__arrow { width: 30px; height: 64px; }
	.hero-cards { margin-top: -80px; }
	.hero-cards__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
/* Điện thoại: giảm cỡ và giãn chữ để "CHÀO MỪNG" nằm trên 1 dòng */
@media (max-width: 480px) {
	.hero__title { font-size: 2.3rem; letter-spacing: .08em; padding-left: .08em; }
	.hero__subtitle { letter-spacing: .04em; }
}
/* Điện thoại xoay ngang (màn hình thấp): hero vừa 1 màn hình, header gọn lại */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
	.site-header__inner { padding-block: 8px; }
	.custom-logo { height: 38px; }
	.site-logo__mark { width: 36px; height: 36px; }
	.hero { min-height: 340px; max-height: none; }
	.hero__content { padding-block: 64px 90px; }
	.hero__title { font-size: 2.6rem; }
	.hero__subtitle { margin-top: 10px; font-size: 1rem; }
	.hero__btn { margin-top: 18px; }
	.hero__btn .btn-split__text { min-height: 46px; padding: 0 20px 0 24px; }
	.hero__btn .btn-split__icon { width: 46px; }
	.hero__arrow { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__slide, .hero__bg, .hero__title, .hero__subtitle, .hero__btn, .hero-card__img,
	.btn-split::before, .btn-split__text, .btn-split__icon, .btn-split__icon .icon { transition: none; }
	.hero__bg { transform: none; }
}

/* ===== Tiêu đề section (dùng chung, căn giữa) ===== */
.section-heading { margin-bottom: 50px; text-align: center; }
.section-heading__title {
	margin: 0; font-family: 'Montserrat', var(--font-base); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800;
	line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--color-dark); text-wrap: balance;
}
.section-heading__highlight { color: var(--color-primary); }
.section-heading__desc { margin: 8px auto 0; max-width: 560px; color: var(--color-muted); }
/* Đường trang trí: 2 vạch màu chủ đạo, giữa là ô vuông navy */
.section-heading__divider {
	display: block; width: 140px; height: 8px; margin: 18px auto 0;
	background:
		linear-gradient(var(--color-navy), var(--color-navy)) center / 8px 8px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) left center / 58px 3px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right center / 58px 3px no-repeat;
}

/* ===== Section Giới thiệu: ảnh + thẻ navy số năm | tiêu đề, cam kết, nút ===== */
.about { padding-block: 110px; }
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }

.about__media { position: relative; padding: 0 0 56px 28px; }
/* Khung viền màu chủ đạo lệch sau ảnh */
.about__media::before { content: ''; position: absolute; left: 0; top: -28px; width: 62%; height: 62%; border: 4px solid var(--color-primary); }
.about__img { position: relative; width: 84%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 28px 60px rgba(11,31,58,.22); }

/* Thẻ navy số năm kinh nghiệm, đè góc dưới phải ảnh */
.about__badge {
	position: absolute; right: 0; bottom: 0; width: 56%; overflow: hidden;
	display: grid; gap: 8px; padding: 34px 32px;
	background: var(--color-navy); color: #fff; box-shadow: 0 22px 44px rgba(11,31,58,.3);
}
.about__badge::before { content: ''; position: absolute; left: 0; top: 0; width: 120px; height: 80px; background: rgba(255,255,255,.07); clip-path: polygon(0 0, 100% 0, 0 100%); }
.about__years { position: relative; font-family: 'Montserrat', var(--font-base); font-size: clamp(3rem, 5vw, 4.2rem); font-weight: 800; line-height: 1; color: var(--color-primary); }
.about__years-label { position: relative; font-size: .98rem; font-weight: 600; line-height: 1.45; }

.about__body .section-heading { margin-bottom: 22px; }
.about__text { margin: 0 0 34px; font-size: 1.02rem; line-height: 1.75; color: var(--color-muted); max-width: 58ch; }

.about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; margin: 0 0 40px; padding: 0; list-style: none; }
.about__feature { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.about__feature-icon {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary);
	transition: background-color .3s, color .3s;
}
.about__feature-icon .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.about__feature:hover .about__feature-icon { background: var(--color-primary); color: #fff; }
.about__feature-title { margin: 4px 0 4px; font-family: 'Montserrat', var(--font-base); font-size: 1.05rem; font-weight: 700; color: var(--color-navy); }
.about__feature-text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--color-muted); }

.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.about__call { display: flex; align-items: center; gap: 14px; color: var(--color-navy); text-decoration: none; }
.about__call-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--color-navy); color: #fff; transition: background-color .25s; }
.about__call-icon .icon { width: 20px; height: 20px; }
.about__call small { display: block; font-size: .82rem; color: var(--color-muted); }
.about__call strong { display: block; font-family: 'Montserrat', var(--font-base); font-size: 1.2rem; font-weight: 700; }
.about__call:hover .about__call-icon { background: var(--color-primary); }

@media (max-width: 1024px) {
	.about { padding-block: 90px; }
	.about__grid { grid-template-columns: 1fr; gap: 64px; }
	.about__media { max-width: 600px; }
}
@media (max-width: 560px) {
	.about { padding-block: 70px; }
	.about__media { padding: 0 0 40px 16px; }
	.about__media::before { top: -16px; }
	.about__img { width: 90%; }
	.about__badge { width: 64%; padding: 22px 20px; }
	.about__years-label { font-size: .85rem; }
	.about__features { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.about__feature-icon, .about__call-icon { transition: none; }
}

/* ===== Section Dịch vụ: thẻ trắng, ảnh cắt hình mái nhà + icon tròn ở đỉnh mái ===== */
.section--services { padding-block: 90px; background: var(--color-bg-alt); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.svc-card {
	position: relative; display: flex; flex-direction: column;
	container-type: inline-size; /* cho phép dùng đơn vị cqw = % chiều rộng thẻ */
	background: #fff; color: inherit; text-decoration: none;
	box-shadow: 0 2px 12px rgba(11,31,58,.06);
	transition: translate .35s, box-shadow .35s;
}
/* Mép dưới ảnh là hình mái nhà: 2 góc dưới thấp, giữa nhô lên (ăn vào thân thẻ trắng) */
.svc-card__media { aspect-ratio: 3 / 2; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s; }
/* Icon tròn đặt đúng đỉnh mái (80% chiều cao ảnh), nửa trên đè lên ảnh */
.svc-card__badge {
	/* Đỉnh mái = 80% chiều cao ảnh (--media-h, khai báo ở khối "Vừa 1 màn hình" cuối file) */
	position: absolute; left: 50%; top: calc(var(--media-h, 100cqw * 2 / 3) * .8); translate: -50% -50%;
	display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
	background: var(--color-primary); color: #fff; border: 4px solid #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,.18);
	transition: rotate .45s, background-color .3s;
}
.svc-card__badge .icon { width: 26px; height: 26px; stroke-width: 2; }
.svc-card__body { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 38px 26px 28px; text-align: center; }
.svc-card__title { margin: 0 0 12px; font-family: 'Montserrat', var(--font-base); font-size: .98rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase; color: var(--color-dark); }
.svc-card__text {
	margin: 0 0 18px; font-size: .92rem; line-height: 1.65; color: var(--color-muted);
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-card__more { margin-top: auto; font-weight: 700; color: var(--color-primary); transition: letter-spacing .3s; }

.svc-card:hover { translate: 0 -6px; box-shadow: 0 20px 40px rgba(11,31,58,.14); }
.svc-card:hover .svc-card__media img { scale: 1.07; }
.svc-card:hover .svc-card__badge { rotate: 360deg; background: var(--color-navy); }
.svc-card:hover .svc-card__more { letter-spacing: .04em; }
.svc-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }

@media (max-width: 1024px) {
	.svc-grid { gap: 20px; }
	.svc-card__body { padding: 36px 18px 24px; }
	.svc-card__title { font-size: .9rem; }
}
@media (max-width: 767px) {
	.section--services { padding-block: 70px; }
	.svc-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.svc-card, .svc-card__media img, .svc-card__badge, .svc-card__more { transition: none; }
}

/* Biến thể tiêu đề: chữ trắng trên nền tối, căn trái */
.section-heading--dark .section-heading__title { color: #fff; }
.section-heading--dark .section-heading__desc { color: rgba(255,255,255,.7); }
/* Nền tối: ô vuông giữa đường trang trí đổi sang trắng (navy sẽ chìm vào nền) */
.section-heading--dark .section-heading__divider {
	background:
		linear-gradient(#fff, #fff) center / 8px 8px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) left center / 58px 3px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right center / 58px 3px no-repeat;
}
.section-heading--left { text-align: left; }
.section-heading--left .section-heading__desc { margin-inline: 0; }
.section-heading--left .section-heading__divider { margin-inline: 0; }

/* ===== Section Dự án: dải navy + lưới ảnh ghép tràn viền (kiểu Wilmër) ===== */
.projects__head { padding-block: 80px 34px; background: var(--color-navy); }
.projects__head-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.projects__head .section-heading { margin-bottom: 0; }

/* Nút "Xem tất cả": chữ + ô vuông màu chủ đạo chứa mũi tên */
.view-all { flex: none; display: inline-flex; align-items: center; gap: 16px; color: #fff; font-weight: 700; text-decoration: none; }
.view-all__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--color-primary); transition: translate .3s; }
.view-all__icon .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.view-all:hover .view-all__icon { translate: 4px 0; }

/* Tab lọc theo loại dự án */
.project-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.project-filter__btn {
	padding: 9px 20px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.85);
	font: 600 .9rem 'Montserrat', var(--font-base); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s;
}
.project-filter__btn:hover { border-color: #fff; color: #fff; }
.project-filter__btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Lưới ghép: 4 cột, ô 1 và ô 6 rộng gấp đôi → [TO][nhỏ][nhỏ] / [nhỏ][nhỏ][TO] */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 340px; grid-auto-flow: dense; background: var(--color-navy); }
.mosaic__item { position: relative; overflow: hidden; color: #fff; text-decoration: none; background: var(--color-dark); }
.mosaic__item:nth-child(6n + 1), .mosaic__item:nth-child(6n + 6) { grid-column: span 2; }
.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .8s; }
.mosaic__item::after { content: ''; position: absolute; inset: 0; background: rgba(11,31,58,.86); opacity: 0; transition: opacity .4s; }
.mosaic__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 30px 34px; opacity: 0; translate: 0 16px; transition: opacity .4s, translate .4s; }
.mosaic__cat { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.mosaic__title { margin: 0; font-family: 'Montserrat', var(--font-base); font-size: 1.4rem; font-weight: 700; line-height: 1.3; }
.mosaic__text { margin: 8px 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.8); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mosaic__plus {
	position: absolute; top: 26px; right: 26px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
	background: var(--color-primary); scale: 0; transition: scale .35s cubic-bezier(.3, 1.5, .5, 1);
}
.mosaic__plus .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.mosaic__item:hover .mosaic__img, .mosaic__item:focus-visible .mosaic__img { scale: 1.07; }
.mosaic__item:hover::after, .mosaic__item:focus-visible::after { opacity: 1; }
.mosaic__item:hover .mosaic__info, .mosaic__item:focus-visible .mosaic__info { opacity: 1; translate: 0 0; }
.mosaic__item:hover .mosaic__plus, .mosaic__item:focus-visible .mosaic__plus { scale: 1; }
.mosaic__item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

/* Màn hình cảm ứng: luôn hiện tên trên nền gradient tối */
@media (hover: none) {
	.mosaic__item::after { opacity: 1; background: linear-gradient(transparent 40%, rgba(11,31,58,.9)); }
	.mosaic__info { opacity: 1; translate: 0 0; padding: 22px; }
	.mosaic__text { display: none; }
}
@media (max-width: 1024px) {
	.projects__head-inner { flex-direction: column; align-items: flex-start; }
	.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
	.mosaic__item:nth-child(6n + 1), .mosaic__item:nth-child(6n + 6) { grid-column: span 2; }
}
@media (max-width: 767px) {
	.projects__head { padding-block: 60px 28px; }
	.mosaic { grid-auto-rows: 230px; }
	.mosaic__title { font-size: 1.2rem; }
	/* Tab lọc: 1 hàng cuộn ngang thay vì xuống nhiều hàng */
	.project-filter { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
	.project-filter::-webkit-scrollbar { display: none; }
	.project-filter__btn { flex: none; }
}
/* Điện thoại dọc: 1 cột */
@media (max-width: 560px) {
	.mosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.mosaic__item:nth-child(6n + 1), .mosaic__item:nth-child(6n + 6) { grid-column: auto; }
}
/* Đang lọc: bỏ ô to/nhỏ, các ô còn lại chia đều hết chiều ngang → không còn ô trống */
.mosaic.is-filtered { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mosaic.is-filtered .mosaic__item:nth-child(n) { grid-column: auto; }
@media (prefers-reduced-motion: reduce) {
	.mosaic__img, .mosaic__item::after, .mosaic__info, .mosaic__plus, .view-all__icon { transition: none; }
}

/* ===== Section Quy trình: 4 vòng tròn icon nối bằng mũi tên cong ===== */
.process { --step-gap: 30px; padding-block: 100px; }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px var(--step-gap); margin: 0; padding: 0; list-style: none; }
.process__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.process__icon {
	position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
	background: var(--color-navy); color: #fff; box-shadow: 0 14px 30px rgba(11,31,58,.2);
	transition: background-color .3s, translate .3s;
}
.process__icon > .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.process__num {
	position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--color-primary); color: #fff; border: 3px solid #fff;
	font-family: 'Montserrat', var(--font-base); font-size: .78rem; font-weight: 800;
}
/* Mũi tên cong đặt giữa khoảng trống của 2 bước; mũi tên chẵn lật ngược để tạo đường lượn sóng */
.process__arrow {
	position: absolute; top: 34px; left: calc(100% + var(--step-gap) / 2); translate: -50% 0; width: 76px; height: 26px;
	fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
/* Thân: nét đứt navy nhạt. Đầu: nét liền màu chủ đạo, hướng theo tiếp tuyến cuối đường cong */
.process__arrow-line { stroke: color-mix(in srgb, var(--color-navy) 35%, transparent); stroke-width: 1.6; stroke-dasharray: 3 4; }
.process__arrow-head { stroke: var(--color-primary); stroke-width: 2.2; }
.process__step:nth-child(even) .process__arrow { scale: 1 -1; }
.process__title { margin: 26px 0 8px; font-family: 'Montserrat', var(--font-base); font-size: 1.15rem; font-weight: 700; color: var(--color-navy); }
.process__time {
	display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 12px; border-radius: 99px;
	background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: color-mix(in srgb, var(--color-primary) 70%, #000);
	font-size: .8rem; font-weight: 700;
}
.process__time .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.process__text { margin: 0; max-width: 28ch; font-size: .93rem; line-height: 1.65; color: var(--color-muted); }
.process__step:hover .process__icon { background: var(--color-primary); translate: 0 -6px; }
.process__cta { display: flex; justify-content: center; margin-top: 56px; }

@media (max-width: 1024px) {
	.process { padding-block: 80px; }
	.process__steps { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
	.process__arrow { display: none; }
}
@media (max-width: 560px) {
	.process { padding-block: 64px; }
	.process__steps { grid-template-columns: 1fr; row-gap: 44px; }
	.process__cta .btn-split { width: 100%; }
	.process__cta .btn-split__text { flex: 1; justify-content: center; }
}

/* ===== Section Tin tức: 1 bài lớn + 2 bài ngang ===== */
.news { padding-block: 100px; }
.news__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 28px; }
.news-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: #fff; box-shadow: 0 6px 24px rgba(11,31,58,.07); transition: translate .35s, box-shadow .35s;
}
.news-card--big { grid-row: span 2; }
.news-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-line); }
.news-card__img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s; }
.news-card__date {
	position: absolute; left: 20px; bottom: 0; display: grid; justify-items: center; padding: 10px 14px; line-height: 1.1;
	background: var(--color-primary); color: #fff; font-family: 'Montserrat', var(--font-base);
}
.news-card__date strong { font-size: 1.5rem; font-weight: 800; }
.news-card__date span { font-size: .72rem; font-weight: 600; }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 30px 28px; }
.news-card__cat { margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.news-card__title { margin: 0 0 10px; font-family: 'Montserrat', var(--font-base); font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--color-navy); }
.news-card--big .news-card__title { font-size: 1.45rem; }
.news-card__title a { color: inherit; text-decoration: none; transition: color .25s; }
.news-card__title a::after { content: ''; position: absolute; inset: 0; } /* cả thẻ bấm được */
.news-card__excerpt { margin: 0 0 18px; font-size: .93rem; line-height: 1.65; color: var(--color-muted); }
.news-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-navy); }
.news-card__more .icon { width: 16px; height: 16px; stroke-width: 2.2; color: var(--color-primary); transition: translate .25s; }
/* Bài nhỏ: ảnh bên trái, chữ bên phải */
.news-card:not(.news-card--big) { flex-direction: row; }
.news-card:not(.news-card--big) .news-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 220px; }
.news-card:not(.news-card--big) .news-card__body { padding: 24px 26px; }

.news-card:hover { translate: 0 -5px; box-shadow: 0 20px 40px rgba(11,31,58,.13); }
.news-card:hover .news-card__img { scale: 1.06; }
.news-card:hover .news-card__title a { color: var(--color-primary); }
.news-card:hover .news-card__more .icon { translate: 4px 0; }
.news-card:focus-within { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.news__more { display: flex; justify-content: center; margin-top: 48px; }

@media (max-width: 1024px) {
	.news { padding-block: 80px; }
	.news__grid { grid-template-columns: 1fr; }
	.news-card--big { grid-row: auto; }
}
@media (max-width: 640px) {
	.news { padding-block: 64px; }
	.news-card:not(.news-card--big) { flex-direction: column; }
	.news-card:not(.news-card--big) .news-card__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
	.news-card__body, .news-card:not(.news-card--big) .news-card__body { padding: 22px 20px 24px; }
	.news-card--big .news-card__title { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.process__icon, .news-card, .news-card__img, .news-card__title a, .news-card__more .icon { transition: none; }
}

/* ===== Section Liên hệ: khối đôi (thẻ navy gọi điện | thẻ nhận báo giá) + icon tròn ở giữa ===== */
button.btn-split { border: 0; cursor: pointer; }
.contact { padding-block: 100px; }
.contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.contact__call {
	display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: 280px; padding: 48px 56px;
	color: #fff;
	background:
		repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 23px),
		repeating-linear-gradient(20deg, rgba(255,255,255,.03) 0 1px, transparent 1px 37px),
		var(--color-navy);
}
.contact__phone { display: flex; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.contact__phone-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); transition: scale .3s; }
.contact__phone-icon .icon { width: 24px; height: 24px; }
.contact__phone:hover .contact__phone-icon { scale: 1.08; }
.contact__phone-label { display: block; font-family: 'Montserrat', var(--font-base); font-size: 1.3rem; font-weight: 700; }
.contact__phone-number { display: block; font-family: 'Montserrat', var(--font-base); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; }
.contact__phone-number b { font-weight: 800; }
.contact__info { display: grid; gap: 10px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.14); font-size: .95rem; color: rgba(255,255,255,.82); }
.contact__info li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.contact__info .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--color-primary); }
.contact__info a { color: inherit; text-decoration: none; }
.contact__info a:hover { color: #fff; text-decoration: underline; }

/* Icon tròn nằm giữa 2 thẻ */
.contact__badge {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
	display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
	background: #fff; color: var(--color-navy); box-shadow: 0 12px 30px rgba(11,31,58,.2);
}
.contact__badge .icon { width: 38px; height: 38px; stroke-width: 1.6; }

.contact__quote {
	display: flex; flex-direction: column; justify-content: center; padding: 48px 56px 48px 72px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23dfe2ea' stroke-width='1'%3E%3Cpath d='M-20 60c40-30 80 20 130-10s90 10 150-20M-20 100c50-30 90 25 140-5s80 5 140-25M-20 140c40-20 90 30 140 0s90 0 140-30M-20 180c50-25 80 20 130-5s100 10 150-15M-20 220c40-20 100 25 140 0s90 5 140-20M-20 20c50-25 90 15 140-5s90 5 140-15'/%3E%3C/svg%3E") 0 0 / 240px,
		var(--color-bg-alt);
}
.contact__title { margin: 0 0 6px; font-family: 'Montserrat', var(--font-base); font-size: 1.5rem; font-weight: 800; color: var(--color-navy); }
.contact__desc { margin: 0 0 22px; font-size: .95rem; color: var(--color-muted); }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact__form input {
	min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--color-line); border-radius: 0; background: #fff;
	font: inherit; font-size: .95rem; color: var(--color-navy); transition: border-color .2s, box-shadow .2s;
}
.contact__form input::placeholder { color: #8c93a8; }
.contact__form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
.contact__submit { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.contact__submit .btn-split__text { min-height: 52px; }
.contact__submit .btn-split__icon { width: 52px; }
.contact__status { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid; font-size: .95rem; font-weight: 600; background: #fff; }
.contact__status--sent { border-color: #1f9d55; color: #17713e; }
.contact__status--invalid, .contact__status--error { border-color: #d64545; color: #b02a2a; }

@media (max-width: 1024px) {
	.contact { padding-block: 80px; }
	.contact__grid { grid-template-columns: 1fr; gap: 20px; }
	.contact__badge { display: none; }
	.contact__call, .contact__quote { padding: 40px; }
}
@media (max-width: 560px) {
	.contact { padding-block: 60px; }
	.contact__call, .contact__quote { padding: 32px 22px; }
	.contact__phone { gap: 14px; }
	.contact__phone-icon { width: 48px; height: 48px; }
	.contact__form { grid-template-columns: 1fr; }
	.contact__submit { justify-self: stretch; }
	.contact__submit .btn-split__text { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.contact__phone-icon, .contact__form input { transition: none; }
}

/* ===== Cards ===== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.card { overflow: hidden; background: #fff; border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.card__body { padding: 20px; }
.card__title { margin: 0 0 8px; font-size: 1.125rem; }
.card__title a { text-decoration: none; }
.card__meta { font-size: .875rem; color: var(--color-muted); }

/* ===== Entry (page/single) ===== */
.entry__title { margin: 0 0 8px; }
.entry__meta { margin-bottom: 24px; color: var(--color-muted); }
.entry__thumb { margin-bottom: 24px; }

/* ===== Footer (navy, 4 cột + thanh bản quyền) ===== */
.site-footer { position: relative; overflow: hidden; background: var(--color-navy); color: rgba(255,255,255,.75); font-size: .95rem; }
/* 2 mảng chấm mờ trang trí ở góc */
.site-footer::before, .site-footer::after {
	content: ''; position: absolute; width: 380px; height: 300px; pointer-events: none;
	background: radial-gradient(circle, rgba(255,255,255,.13) 1.3px, transparent 1.6px) 0 0 / 12px 12px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.site-footer::before { left: -90px; bottom: 30px; }
.site-footer::after { right: -70px; top: 0; }

.site-footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .8fr 1fr 1.25fr; gap: 48px; padding-block: 90px 70px; }
.site-footer .custom-logo { height: 84px; }
.site-footer__text { margin: 22px 0 24px; max-width: 34ch; line-height: 1.7; }
.social-links--footer .social-link { width: 38px; height: 38px; box-shadow: none; }

.site-footer__title {
	position: relative; margin: 0 0 26px; padding-bottom: 14px;
	font-family: 'Montserrat', var(--font-base); font-size: 1.15rem; font-weight: 700; color: #fff;
}
.site-footer__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--color-primary); }

.footer-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; transition: color .2s, translate .2s; }
.footer-links a::before { content: ''; width: 6px; height: 6px; border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); rotate: 45deg; flex: none; }
.footer-links a:hover { color: #fff; translate: 4px 0; }
.footer-links .current-menu-item > a { color: #fff; }

.site-footer__company { margin: 0 0 14px; font-family: 'Montserrat', var(--font-base); font-size: .88rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: #fff; }
.footer-contact { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.footer-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; line-height: 1.6; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--color-primary); }
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: #fff; }

.site-footer__bar { position: relative; z-index: 1; background: rgba(0,0,0,.28); border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 20px; }
.site-footer__copy { margin: 0; }
.site-footer__copy b { color: var(--color-primary); font-weight: 600; }
.site-footer__company-link { text-decoration: none; }
.site-footer__company-link:hover b, .site-footer__company-link:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.footer-legal li + li { border-left: 1px solid rgba(255,255,255,.25); }
.footer-legal a { padding-inline: 14px; color: inherit; text-decoration: none; }
.footer-legal li:last-child a { padding-right: 0; }
.footer-legal a:hover { color: var(--color-primary); }

/* Nút lên đầu trang: hiện khi cuộn xuống (JS gắn .is-visible) */
.to-top {
	position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90;
	display: grid; place-items: center; width: 46px; height: 46px;
	background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25);
	opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .3s, visibility .3s, translate .3s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: var(--color-navy); }
.to-top .icon { width: 22px; height: 22px; stroke-width: 2.4; }

/* Lề phải nhỏ hơn chỗ của nút lên đầu trang (vw < ~1500px): chừa chỗ để nút không đè chữ bản quyền */
@media (max-width: 1500px) {
	.site-footer__bar-inner { padding-right: 78px; }
}
@media (max-width: 1024px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-block: 70px 50px; }
}
@media (max-width: 560px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 40px; }
	.site-footer__bar-inner { flex-direction: column; text-align: center; padding-right: 16px; padding-bottom: 80px; }
	.footer-legal { justify-content: center; }
	.footer-legal li:first-child a { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.footer-links a, .to-top { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
	.main-nav a, .main-nav a::after,
	.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { transition: none; }
	.header-call { animation: none; }
}

/* =========================================================
   Nhịp chiều cao trang chủ: mỗi section ≈ 1 màn hình
   - Desktop (≥1025px): section cao tối thiểu = màn hình − header, nội dung căn giữa dọc;
     ảnh/khoảng cách co giãn theo chiều cao (svh). Màn hình rất thấp (≤680px) mới ẩn chữ phụ.
   - Tablet/mobile (≤1024px): danh sách thẻ thành hàng ngang vuốt được (scroll-snap).
   ========================================================= */
:root { --section-y: clamp(56px, 10svh, 110px); --header-h: 70px; }

.about, .section--services, .process, .news, .contact { padding-block: var(--section-y); }
.section-heading { margin-bottom: clamp(28px, 5.5svh, 56px); }
.section-heading__divider { margin-top: clamp(12px, 2svh, 18px); }
html { scroll-padding-top: 72px; } /* nhảy tới #section: chừa chỗ cho header cố định */

/* Giới thiệu */
.about__img { aspect-ratio: auto; height: clamp(320px, 66svh, 580px); }
.about__text { margin-bottom: clamp(20px, 3.5svh, 34px); }
.about__features { gap: clamp(18px, 3svh, 28px) 30px; margin-bottom: clamp(24px, 4svh, 40px); }

/* Dịch vụ: icon mái nhà bám theo --media-h */
.svc-card { --media-h: min(100cqw * 2 / 3, 32svh); }
.svc-card__media { aspect-ratio: auto; height: var(--media-h); }

/* Dự án */
.projects__head { padding-block: clamp(44px, 8svh, 80px) clamp(22px, 3.5svh, 34px); }
.project-filter { margin-top: clamp(18px, 3.5svh, 34px); }
/* Dự án: chiều cao hàng ảnh theo chiều rộng màn hình (không ép vừa 1 màn hình) → ảnh không bị dẹt.
   Lưới 4 cột: ô nhỏ ≈ 25vw rộng → hàng 24vw cho tỉ lệ gần 1:1, ô to (2 cột) ≈ 2:1 */
@media (min-width: 1025px) { .mosaic { grid-auto-rows: clamp(280px, 24vw, 460px); } }

/* Quy trình */
.process__title { margin-top: clamp(18px, 3svh, 26px); }
.process__cta { margin-top: clamp(32px, 6svh, 56px); }

/* Tin tức: KHÔNG ép vừa 1 màn hình — cao tự nhiên theo nội dung (3 bài có ảnh + trích).
   Bài lớn: ảnh cao, có trích 3 dòng; bài nhỏ: tối đa 2 dòng tiêu đề + 2 dòng trích. */
.news { padding-block: clamp(72px, 11svh, 110px); }
.news__grid { gap: 28px; }
.news-card--big .news-card__media { aspect-ratio: auto; height: clamp(260px, 40svh, 400px); }
.news-card--big .news-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:not(.news-card--big) .news-card__media { min-height: 0; }
.news-card:not(.news-card--big) .news-card__title,
.news-card:not(.news-card--big) .news-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card--big .news-card__body { padding: 30px 34px 32px; }
.news__more { margin-top: clamp(40px, 6svh, 56px); }

/* ---- Desktop: mỗi section lấp đầy 1 màn hình, nội dung căn giữa dọc (chỉ trang chủ; trang con để chiều cao tự nhiên) ---- */
@media (min-width: 1025px) {
	.home .about, .home .section--services, .home .process, .home .contact {
		min-height: calc(100svh - var(--header-h));
		display: flex; flex-direction: column; justify-content: center;
	}
}
/* Màn hình rất thấp (≤ 680px, vd 1366×768 trừ thanh trình duyệt): mới ẩn chữ phụ */
@media (min-width: 1025px) and (max-height: 680px) {
	.section-heading__desc { display: none; }
	.about__feature-text { display: none; }
	.about__features { gap: 14px 30px; }
	.svc-card__text { -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 12px; }
	.svc-card__body { padding-block: 34px 20px; }
	.news .section-heading__desc { display: block; } /* Tin tức giữ đủ nội dung */
	.process__text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---- Tablet + mobile: hàng ngang vuốt được ---- */
@media (max-width: 1024px) {
	html { scroll-padding-top: 76px; }
	.hero-cards__grid, .svc-grid, .news__grid, .mosaic {
		display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: none;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.hero-cards__grid::-webkit-scrollbar, .svc-grid::-webkit-scrollbar, .news__grid::-webkit-scrollbar, .mosaic::-webkit-scrollbar { display: none; }
	.hero-cards__grid > *, .svc-grid > *, .news__grid > *, .mosaic > * { scroll-snap-align: start; }

	/* Lưới trong .container: tràn sát mép màn hình, giữ lề 16px khi cuộn.
	   .hero-cards__grid tự là .container nên chỉ cần margin auto */
	.svc-grid, .news__grid { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.hero-cards__grid { margin-inline: auto; scroll-padding-inline: var(--gutter); }
	.hero-cards__grid, .svc-grid, .news__grid { padding-block: 4px 24px; grid-auto-columns: 44%; gap: 20px; max-width: none; }

	/* Tin tức: mọi thẻ dạng ảnh trên, chữ dưới */
	.news-card--big { grid-row: auto; }
	.news-card, .news-card:not(.news-card--big) { flex-direction: column; }
	.news-card .news-card__media, .news-card--big .news-card__media, .news-card:not(.news-card--big) .news-card__media { flex: none; aspect-ratio: auto; height: clamp(150px, 26svh, 240px); min-height: 0; }
	.news-card--big .news-card__title { font-size: 1.15rem; }
	.news-card .news-card__excerpt { display: none; }

	/* Dự án: 1 hàng ảnh tràn viền; bỏ bố cục ô to/nhỏ */
	.mosaic, .mosaic.is-filtered { grid-auto-columns: 46%; grid-auto-rows: clamp(240px, 46svh, 420px); }
	.mosaic__item:nth-child(n), .mosaic.is-filtered .mosaic__item:nth-child(n) { grid-column: auto; }

	/* Giới thiệu: ảnh băng ngang, cam kết chỉ icon + tên */
	.about__grid { gap: clamp(40px, 6svh, 64px); }
	.about__media { max-width: none; padding-bottom: 0; }
	.about__img { width: 100%; height: clamp(200px, 30svh, 320px); object-position: center 35%; }
	.about__badge { width: auto; right: 20px; bottom: -24px; padding: 18px 22px; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
	.about__years { font-size: 2.4rem; }
	.about__years-label { max-width: 16ch; font-size: .85rem; }
	.about__feature { align-items: center; }
	.about__feature-title { margin: 0; }
	.about__feature-text { display: none; }

	/* Quy trình */
	.process__icon { width: 76px; height: 76px; }
	.process__icon > .icon { width: 32px; height: 32px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.process__steps { grid-template-columns: repeat(4, 1fr); --step-gap: 16px; column-gap: 16px; }
	.process__text { font-size: .85rem; }
	.process__title { font-size: 1rem; }
}
/* Tablet nằm ngang (thấp) */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 820px) {
	.section-heading__desc { display: none; }
	.about__grid { gap: 36px; }
	.about__img { height: clamp(160px, 24svh, 260px); }
	.news-card .news-card__media, .news-card--big .news-card__media, .news-card:not(.news-card--big) .news-card__media { height: clamp(140px, 22svh, 200px); }
}

/* ---- Mobile: thấy 1 thẻ, ló thẻ kế tiếp ---- */
@media (max-width: 767px) {
	.hero-cards__grid, .svc-grid, .news__grid { grid-auto-columns: 82%; gap: 14px; }
	.mosaic, .mosaic.is-filtered { grid-auto-columns: 84%; grid-auto-rows: clamp(220px, 48svh, 380px); }
	.hero-card { aspect-ratio: auto; height: clamp(170px, 30svh, 240px); }
	.hero-cards { margin-top: -70px; }

	/* Quy trình: hàng ngang vuốt được */
	.process__steps {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
	}
	.process__steps::-webkit-scrollbar { display: none; }
	.process__step { scroll-snap-align: start; padding: 26px 18px 22px; background: var(--color-bg-alt); }

	/* Giới thiệu */
	.about__img { height: clamp(170px, 26svh, 260px); }
	.about__text { font-size: .95rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	.about__features { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
	.about__feature { grid-template-columns: 40px 1fr; gap: 10px; }
	.about__feature-icon { width: 40px; height: 40px; }
	.about__feature-icon .icon { width: 20px; height: 20px; }
	.about__feature-title { font-size: .9rem; }
	.about__call { display: none; } /* header mobile đã có nút gọi */
	.about__actions .btn-split { width: 100%; }
	.about__actions .btn-split__text { flex: 1; justify-content: center; }

	.section-heading__desc { font-size: .92rem; }
	.svc-card__body { padding: 32px 18px 20px; }

	/* Tin tức */
	.news-card .news-card__media, .news-card--big .news-card__media, .news-card:not(.news-card--big) .news-card__media { height: clamp(140px, 22svh, 210px); }
	.news-card__title, .news-card--big .news-card__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.news-card__more { display: none; } /* cả thẻ đã bấm được */
	.news-card__body, .news-card:not(.news-card--big) .news-card__body { padding: 18px 18px 20px; }

	/* Liên hệ: địa chỉ/email/giờ đã có ở footer */
	.contact__info { display: none; }
	.contact__call { min-height: 0; }

	/* Footer: Liên kết + Dịch vụ cạnh nhau */
	.site-footer__text { display: none; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; padding-block: 44px 32px; gap: 26px 20px; }
	.site-footer__brand, .site-footer__grid > :last-child { grid-column: 1 / -1; }
	.footer-links { gap: 8px; }
	.footer-contact { gap: 10px; }
	.site-footer__title { margin-bottom: 16px; }
	.site-footer__bar-inner { padding-bottom: 66px; }
}
/* Điện thoại màn hình thấp (≤ 760px cao) */
@media (max-width: 767px) and (max-height: 760px) {
	:root { --section-y: 44px; }
	.section-heading__desc { display: none; }
	.svc-card { --media-h: min(100cqw * 2 / 3, 26svh); }
	.svc-card__text { -webkit-line-clamp: 2; line-clamp: 2; }
	.about__text { -webkit-line-clamp: 3; line-clamp: 3; }
	.news__more { margin-top: 18px; }
}
@media (max-width: 400px) {
	.contact__call, .contact__quote { padding: 26px 18px; }
}

/* ---- Tinh chỉnh theo vùng hiển thị thực tế (đã trừ thanh trình duyệt) ---- */
/* Desktop thấp: Giới thiệu/Dịch vụ thấp nhẹ */
@media (min-width: 1025px) and (max-height: 820px) {
	.about { padding-block: clamp(44px, 7svh, 80px); }
	.about__img { height: clamp(300px, 62svh, 520px); }
	.svc-card { --media-h: min(100cqw * 2 / 3, 26svh); }
	.section--services { padding-block: clamp(44px, 8svh, 90px); }
}
/* Tablet nằm ngang (≥ 900px rộng): Giới thiệu và Liên hệ chia 2 cột như desktop thay vì xếp chồng */
@media (min-width: 900px) and (max-width: 1024px) {
	.about__grid { grid-template-columns: .9fr 1.1fr; gap: 40px; }
	.about__img { height: clamp(260px, 56svh, 460px); }
	.about__badge { bottom: 16px; }
	.contact__grid { grid-template-columns: 1fr 1fr; }
	.contact__call, .contact__quote { padding: 32px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 820px) {
	.news__more { margin-top: 16px; }
	.news-card .news-card__media, .news-card--big .news-card__media, .news-card:not(.news-card--big) .news-card__media { height: clamp(130px, 20svh, 190px); }
	.news, .about, .contact { padding-block: 40px; }
}
@media (min-width: 768px) and (max-width: 899px) {
	.about__img { height: clamp(180px, 24svh, 280px); }
}
/* Section dùng flex dọc: .container có margin auto sẽ co theo nội dung → ép giãn hết chiều ngang */
@media (min-width: 1025px) {
	.about > .container, .section--services > .container, .process > .container, .news > .container, .contact > .container { width: 100%; }
}
@media (max-width: 1024px) {
	.news-card .news-card__excerpt, .news-card:not(.news-card--big) .news-card__excerpt { display: none; }
}

/* ---- Rà soát responsive (footer, nút) ---- */
/* Footer: logo luôn cách hàng mạng xã hội, kể cả khi đoạn giới thiệu bị ẩn trên mobile */
.site-footer__brand .social-links { margin-top: 22px; }
.site-footer__text { margin-bottom: 0; }
/* Link footer xuống 2 dòng: mũi tên bám dòng đầu thay vì căn giữa */
.footer-links a { align-items: flex-start; }
.footer-links a::before { margin-top: .62em; }

/* Tablet: khối thương hiệu 1 hàng riêng (logo trái, mạng xã hội phải), 3 cột link bên dưới */
@media (min-width: 768px) and (max-width: 1024px) {
	.site-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
	.site-footer__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
	.site-footer__brand .site-footer__text { margin: 0; flex: 1 1 260px; }
	.site-footer__brand .social-links { margin-top: 0; }
	.site-footer .custom-logo { height: 70px; }
}
@media (max-width: 767px) {
	.site-footer .custom-logo { height: 64px; }
	.site-footer__brand .social-links { margin-top: 18px; }
	.footer-links a { font-size: .92rem; }
	/* Nút tách đôi: chữ không xuống dòng trên màn hẹp */
	.btn-split { letter-spacing: .06em; font-size: .82rem; }
	.btn-split__text { padding-inline: 20px 16px; white-space: nowrap; }
}
@media (max-width: 360px) {
	.btn-split { font-size: .76rem; letter-spacing: .04em; }
	.btn-split__text { padding-inline: 14px 12px; }
}

/* =========================================================
   Nút liên hệ nổi (Gọi / Zalo / Messenger) — xếp dọc phía trên nút lên đầu trang
   ========================================================= */
.float-contact {
	--fc-size: 54px;
	position: fixed; right: 20px; bottom: calc(20px + 46px + 16px + env(safe-area-inset-bottom, 0px)); z-index: 95;
	display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.float-contact__btn {
	--fc-bg: var(--color-primary);
	position: relative; display: grid; place-items: center; width: var(--fc-size); height: var(--fc-size);
	border-radius: 50%; background: var(--fc-bg); color: #fff; text-decoration: none;
	box-shadow: 0 8px 22px rgba(0,0,0,.25);
	animation: fc-in .55s cubic-bezier(.2,.8,.3,1.2) calc(.6s + var(--i, 0) * .12s) both;
	transition: scale .25s, box-shadow .25s;
}
.float-contact__btn:hover, .float-contact__btn:focus-visible { scale: 1.08; box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.float-contact__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.float-contact__icon { position: relative; z-index: 1; display: grid; place-items: center; }
.float-contact__icon .icon { width: 26px; height: 26px; }

/* Màu từng kênh */
.float-contact__btn--phone { --fc-bg: #1fae5b; }
.float-contact__btn--zalo { --fc-bg: #0068ff; }
.float-contact__btn--zalo .icon { width: 34px; height: 34px; }
.float-contact__btn--messenger { --fc-bg: linear-gradient(45deg, #0099ff, #a033ff 60%, #ff5280); background: var(--fc-bg); }

/* Gọi: 2 vòng sóng lan ra + icon rung theo nhịp */
.float-contact__btn--phone::before, .float-contact__btn--phone::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%; background: #1fae5b; z-index: 0;
	animation: fc-wave 2s ease-out infinite;
}
.float-contact__btn--phone::after { animation-delay: 1s; }
.float-contact__btn--phone .icon { animation: fc-ring 2.4s ease-in-out 1.4s infinite; transform-origin: 50% 50%; }
/* Zalo: nhún nhẹ */
.float-contact__btn--zalo .float-contact__icon { animation: fc-bob 3s ease-in-out 1.2s infinite; }

/* Nhãn trượt ra bên trái khi rê chuột / focus (desktop) */
.float-contact__label {
	position: absolute; right: calc(100% + 12px); top: 50%; translate: 10px -50%;
	padding: 8px 14px; border-radius: 99px; white-space: nowrap;
	background: #fff; color: var(--color-navy); box-shadow: 0 6px 18px rgba(0,0,0,.18);
	font-family: 'Montserrat', var(--font-base); font-size: .85rem; font-weight: 700;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, translate .25s, visibility .25s;
}
.float-contact__label::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: inherit; rotate: 45deg; translate: 0 -50%; }
.float-contact__btn:hover .float-contact__label, .float-contact__btn:focus-visible .float-contact__label { opacity: 1; visibility: visible; translate: 0 -50%; }

@keyframes fc-in { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fc-wave { 0% { scale: 1; opacity: .5; } 100% { scale: 1.55; opacity: 0; } }
@keyframes fc-ring {
	0%, 50%, 100% { rotate: 0deg; }
	5%, 15%, 25% { rotate: -18deg; }
	10%, 20%, 30% { rotate: 18deg; }
	35% { rotate: 0deg; }
}
@keyframes fc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

@media (hover: none) { .float-contact__label { display: none; } }
@media (max-width: 767px) {
	.float-contact { --fc-size: 48px; right: 14px; gap: 12px; bottom: calc(14px + 46px + 14px + env(safe-area-inset-bottom, 0px)); }
	.float-contact__icon .icon { width: 22px; height: 22px; }
	.float-contact__btn--zalo .icon { width: 30px; height: 30px; }
	.to-top { right: 15px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
	.float-contact__btn, .float-contact__btn::before, .float-contact__btn::after,
	.float-contact__btn .icon, .float-contact__icon { animation: none !important; }
	.float-contact__btn--phone::before, .float-contact__btn--phone::after { display: none; }
}
/* Nút lên đầu trang: tròn, cùng trục giữa với cụm nút liên hệ (54px tại right 20 → tâm cách mép 47px) */
.to-top { border-radius: 50%; right: 24px; }
@media (max-width: 767px) { .to-top { right: 15px; } }

/* ---- Icon Zalo chính thức (bong bóng chat xanh + chữ trắng, nhiều màu) ---- */
.icon--logo { stroke: none; } /* icon nhiều màu: không kế thừa nét viền currentColor */

/* Nút Zalo nhỏ ở header/footer: nền trắng, KHÔNG đổi sang nền xanh khi hover (bong bóng xanh sẽ chìm mất) */
.social-link--zalo .icon { width: 28px; height: 28px; }
.social-link--zalo:hover, .social-link--zalo:focus-visible { background: #fff; }

/* Nút Zalo nổi: bản thân bong bóng là nút, không có nền tròn */
.float-contact__btn--zalo { background: none; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(0,60,160,.35)); }
.float-contact__btn--zalo:hover, .float-contact__btn--zalo:focus-visible { box-shadow: none; filter: drop-shadow(0 12px 18px rgba(0,60,160,.45)); }
.float-contact__btn--zalo .float-contact__icon, .float-contact__btn--zalo .icon { width: 100%; height: 100%; }
.float-contact__btn--zalo:focus-visible { outline-offset: 5px; border-radius: 16px; }
@media (max-width: 767px) { .float-contact__btn--zalo .icon { width: 100%; height: 100%; } }

/* ---- Zalo: icon chính thức là hình vuông bo góc có nền xanh sẵn ---- */
/* Header/footer: thu nhỏ để nằm gọn trong nút tròn trắng (hình vuông bo góc 26px lọt trong vòng tròn 36px) */
.social-link--zalo .icon { width: 26px; height: 26px; }
/* Nút nổi: bản thân icon là nút, bo góc theo icon (24%), bóng đổ theo hình icon */
.float-contact__btn--zalo { border-radius: 24%; background: none; filter: none; box-shadow: 0 8px 22px rgba(0,60,160,.35); }
.float-contact__btn--zalo:hover, .float-contact__btn--zalo:focus-visible { filter: none; box-shadow: 0 12px 28px rgba(0,60,160,.45); }
.float-contact__btn--zalo:focus-visible { border-radius: 24%; }

/* ---- Zalo nổi: chỉ còn hình (lưỡi liềm + chữ xanh), không nền, không viền ---- */
.float-contact__btn--zalo { border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
.float-contact__btn--zalo:hover, .float-contact__btn--zalo:focus-visible { box-shadow: none; filter: drop-shadow(0 5px 9px rgba(0,0,0,.36)); }
.float-contact__btn--zalo:focus-visible { outline-offset: 4px; border-radius: 12px; }

/* ---- Messenger nổi: logo chính thức là vòng tròn xanh đặc (không dùng nền gradient cũ) ---- */
.float-contact__btn--messenger { background: none; }
.float-contact__btn--messenger .float-contact__icon, .float-contact__btn--messenger .icon { width: 100%; height: 100%; }

/* =========================================================
   Nút liên hệ nổi dạng "speed dial" trên điện thoại (≤767px)
   - Desktop: danh sách nút hiện đầy đủ như cũ, nút gộp bị ẩn.
   - Điện thoại: JS gắn .has-dial → chỉ còn 1 nút "Liên hệ", bấm vào mới bung các kênh lên trên kèm nhãn.
   - Không có JS: giữ nguyên cụm nút đầy đủ (không gắn .has-dial).
   ========================================================= */
.float-contact__list { display: flex; flex-direction: column; align-items: flex-end; gap: inherit; }
.float-contact__toggle { display: none; }

@media (max-width: 767px) {
	.float-contact.has-dial { right: 12px; } /* nút gộp 52px cùng trục giữa với nút lên đầu trang (46px, right 15) */
	.float-contact.has-dial .float-contact__toggle {
		--fc-size: 52px;
		position: relative; display: grid; place-items: center; width: var(--fc-size); height: var(--fc-size);
		padding: 0; border: 0; border-radius: 50%; cursor: pointer;
		background: var(--color-primary); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.28);
		animation: fc-in .55s cubic-bezier(.2,.8,.3,1.2) .6s both;
		transition: background-color .25s, box-shadow .25s, scale .2s;
		-webkit-tap-highlight-color: transparent;
	}
	.float-contact.has-dial .float-contact__toggle:active { scale: .94; }
	.float-contact.has-dial .float-contact__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
	/* Vòng sóng nhắc nhẹ (dừng khi đã mở) */
	.float-contact.has-dial .float-contact__toggle::before {
		content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--color-primary); z-index: -1;
		animation: fc-wave 2.4s ease-out 1.6s infinite;
	}
	.float-contact__toggle-icon { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s, rotate .35s cubic-bezier(.3,.7,.3,1.3), scale .3s; }
	.float-contact__toggle-icon .icon { width: 24px; height: 24px; stroke-width: 2; }
	.float-contact__toggle-icon--close { opacity: 0; rotate: -90deg; scale: .6; }
	.float-contact__toggle-icon--close .icon { width: 26px; height: 26px; stroke-width: 2.4; }

	/* Danh sách kênh: nằm phía trên nút gộp, ẩn mặc định */
	.float-contact.has-dial .float-contact__list {
		position: absolute; right: 3px; bottom: calc(100% + 14px);
		visibility: hidden; pointer-events: none; transition: visibility 0s linear .35s;
	}
	.float-contact.has-dial .float-contact__btn {
		--fc-size: 46px;
		animation: none; opacity: 0; translate: 0 18px; scale: .5;
		transition: opacity .2s, translate .3s cubic-bezier(.2,.8,.3,1.25), scale .3s cubic-bezier(.2,.8,.3,1.25), box-shadow .25s;
	}

	/* Lớp phủ tối phía sau khi mở: bấm ra ngoài để đóng */
	.float-contact.has-dial::before {
		content: ''; position: fixed; inset: 0; z-index: -1;
		background: rgba(11,31,58,.55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
	}

	/* ---- Trạng thái mở ---- */
	.float-contact.has-dial.is-open::before { opacity: 1; visibility: visible; transition: opacity .3s; }
	.float-contact.has-dial.is-open .float-contact__list { visibility: visible; pointer-events: auto; transition: none; }
	.float-contact.has-dial.is-open .float-contact__btn {
		opacity: 1; translate: 0 0; scale: 1;
		transition-delay: calc((2 - var(--i, 0)) * 55ms); /* nút gần nút gộp bung trước */
	}
	.float-contact.has-dial.is-open .float-contact__toggle { background: var(--color-navy); }
	.float-contact.has-dial.is-open .float-contact__toggle::before { animation: none; opacity: 0; }
	.float-contact.has-dial.is-open .float-contact__toggle-icon--open { opacity: 0; rotate: 90deg; scale: .6; }
	.float-contact.has-dial.is-open .float-contact__toggle-icon--close { opacity: 1; rotate: 45deg; scale: 1; }
	/* Nhãn kênh luôn hiện khi mở (điện thoại không có hover) */
	.float-contact.has-dial.is-open .float-contact__label {
		display: block; opacity: 1; visibility: visible; translate: 0 -50%;
		transition-delay: calc((2 - var(--i, 0)) * 55ms + .1s);
	}
	.float-contact.has-dial .float-contact__label { display: block; font-size: .82rem; padding: 7px 13px; }
	/* Khi mở: ẩn nút lên đầu trang để không chen giữa lớp phủ */
	body:has(.float-contact.is-open) .to-top { opacity: 0; visibility: hidden; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.float-contact.has-dial .float-contact__toggle, .float-contact.has-dial .float-contact__toggle::before { animation: none; }
	.float-contact.has-dial .float-contact__toggle::before { display: none; }
	.float-contact.has-dial .float-contact__btn, .float-contact__toggle-icon, .float-contact.has-dial .float-contact__label { transition-duration: .01s !important; transition-delay: 0s !important; }
	.float-contact.has-dial .float-contact__btn { translate: none; scale: 1; }
}

/* ---- Icon mạng xã hội chính thức (Facebook, TikTok, Zalo, Gmail): tự mang nền và màu, không có nút tròn trắng phía sau ---- */
.social-links .social-link.social-link--logo { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.social-links .social-link.social-link--logo:hover, .social-links .social-link.social-link--logo:focus-visible { background: none; box-shadow: none; translate: 0 -3px; }
.social-link.social-link--logo .icon { width: 28px; height: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); transition: filter .25s; }
.social-link.social-link--logo:hover .icon, .social-link.social-link--logo:focus-visible .icon { filter: drop-shadow(0 6px 9px rgba(0,0,0,.4)); }
.social-link.social-link--logo.social-link--mail .icon { width: 29px; height: 22px; }
.social-links--footer .social-link.social-link--logo .icon { width: 32px; height: 32px; }
.social-links--footer .social-link.social-link--logo.social-link--mail .icon { width: 33px; height: 25px; }
.social-link.social-link--logo:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }
/* Hàng icon mạng xã hội: căn giữa theo chiều dọc để icon Gmail (thấp hơn) không bị lệch lên trên */
.social-links { align-items: center; }

/* =========================================================
   Hiệu ứng xuất hiện khi cuộn (chỉ trang chủ)
   - Chỉ chạy khi <html> có class js-reveal (đặt trong <head>, bỏ qua nếu người dùng bật "giảm chuyển động").
   - Dùng animation (không dùng transition) để KHÔNG ghi đè hiệu ứng rê chuột của các thẻ.
   - Danh sách selector phải khớp với mảng REVEAL trong main.js.
   - Nhóm: UP (trồi lên) · LEFT/RIGHT (trượt ngang) · POP (bật ra) · DRAW (vẽ dần từ trái) · ZOOM (phóng nhẹ)
   ========================================================= */
html.js-reveal { --rv-y: 36px; --rv-x: 56px; --rv-ease: cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 1024px) { html.js-reveal { --rv-y: 18px; --rv-x: 24px; } }
/* Phần tử đang trượt ngang ngoài mép màn hình không được làm trang xuất hiện thanh cuộn ngang */
html.js-reveal body { overflow-x: clip; }

/* Độ trễ riêng của từng phần tử = độ lệch theo thứ tự (JS đặt --rv-d) + độ trễ nền (--rv-base) */
:is(.section-heading__desc) { --rv-base: 100ms; }
:is(.section-heading__divider) { --rv-base: 220ms; }
.about__badge { --rv-base: 500ms; }
.about__text { --rv-base: 300ms; }
.about__feature { --rv-base: 380ms; }
.about__actions { --rv-base: 750ms; }
.hero-card { --rv-base: 500ms; }
.svc-card__badge { --rv-base: 350ms; }
.process__icon { --rv-base: 200ms; }
.process__arrow { --rv-base: 500ms; }
.contact__badge { --rv-base: 300ms; }

html.js-reveal :is(
	.section-heading__title, .section-heading__desc, .about__text, .about__feature, .about__actions, .hero-card, .svc-card,
	.project-filter, .process__step, .process__cta, .news-card, .news__more, .site-footer__brand, .site-footer__col,
	.about__media, .contact__call, .contact__quote,
	.about__badge, .contact__badge, .process__icon, .svc-card__badge,
	.section-heading__divider, .process__arrow, .mosaic__item
) { --rv-delay: calc(var(--rv-d, 0ms) + var(--rv-base, 0ms)); }

/* Trạng thái ẩn trước khi cuộn tới */
html.js-reveal :is(
	.section-heading__title, .section-heading__desc, .about__text, .about__feature, .about__actions, .hero-card, .svc-card,
	.project-filter, .process__step, .process__cta, .news-card, .news__more, .site-footer__brand, .site-footer__col,
	.about__media, .contact__call, .contact__quote,
	.about__badge, .contact__badge, .process__icon, .svc-card__badge,
	.section-heading__divider, .process__arrow, .mosaic__item
):not(.is-in) { opacity: 0; }

/* Chạy hiệu ứng khi phần tử vào màn hình (JS thêm .is-in) */
html.js-reveal :is(
	.section-heading__title, .section-heading__desc, .about__text, .about__feature, .about__actions, .hero-card, .svc-card,
	.project-filter, .process__step, .process__cta, .news-card, .news__more, .site-footer__brand, .site-footer__col
).is-in { animation: rv-up .85s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal :is(.about__media, .contact__call).is-in { animation: rv-left .95s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .contact__quote.is-in { animation: rv-right .95s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal :is(.about__badge, .contact__badge, .process__icon, .svc-card__badge).is-in { animation: rv-pop .7s cubic-bezier(.3, 1.5, .5, 1) var(--rv-delay) backwards; }
html.js-reveal :is(.section-heading__divider, .process__arrow).is-in { animation: rv-draw .9s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .mosaic__item.is-in { animation: rv-zoom .9s var(--rv-ease) var(--rv-delay) backwards; }

@keyframes rv-up    { from { opacity: 0; transform: translateY(var(--rv-y)); } to { opacity: 1; transform: none; } }
@keyframes rv-left  { from { opacity: 0; transform: translateX(calc(var(--rv-x) * -1)); } to { opacity: 1; transform: none; } }
@keyframes rv-right { from { opacity: 0; transform: translateX(var(--rv-x)); } to { opacity: 1; transform: none; } }
@keyframes rv-pop   { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes rv-draw  { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rv-zoom  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Thanh tiến độ cuộn trang (mép trên màn hình) */
.scroll-progress {
	position: fixed; left: 0; top: 0; z-index: 200; width: 100%; height: 3px; pointer-events: none;
	background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%;
}
.admin-bar .scroll-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .scroll-progress { top: 46px; } }

/* Trang con: header fixed không chiếm chỗ trong luồng → chừa chỗ phía trên nội dung bằng chiều cao header lúc chưa thu gọn.
   --header-full được JS đo chính xác lúc tải trang; giá trị dự phòng dưới đây khớp từng breakpoint (143 / 92 / 76px). */
.has-solid-header { padding-top: var(--header-full, 143px); }
@media (max-width: 1024px) { .has-solid-header { padding-top: var(--header-full, 92px); } }
@media (max-width: 480px) { .has-solid-header { padding-top: var(--header-full, 76px); } }

/* ===== Banner trang con: ảnh nền tối + tiêu đề + breadcrumb ===== */
.page-banner { position: relative; overflow: hidden; isolation: isolate; background: var(--color-navy); color: #fff; }
.page-banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Lớp phủ navy đậm bên trái (chỗ chữ) nhạt dần sang phải để vẫn thấy ảnh */
.page-banner::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(11,31,58,.95) 0%, rgba(11,31,58,.82) 45%, rgba(11,31,58,.55) 100%);
}
/* Chấm trang trí góc phải, cùng kiểu chân trang */
.page-banner::after {
	content: ''; position: absolute; right: -60px; top: -20px; z-index: -1; width: 380px; height: 300px; pointer-events: none;
	background: radial-gradient(circle, rgba(255,255,255,.22) 1.3px, transparent 1.6px) 0 0 / 12px 12px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.page-banner__inner { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(44px, 7vw, 84px); }
.page-banner__eyebrow {
	margin: 0 0 10px; font-family: 'Montserrat', var(--font-base); font-size: .85rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary);
}
.page-banner__title {
	margin: 0; max-width: 22ch; font-family: 'Montserrat', var(--font-base); font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 800;
	line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
.page-banner__divider {
	display: block; width: 140px; height: 8px; margin-top: 20px;
	background:
		linear-gradient(#fff, #fff) center / 8px 8px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) left center / 58px 3px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right center / 58px 3px no-repeat;
}
.page-banner__desc { margin: 18px 0 0; max-width: 60ch; color: rgba(255,255,255,.8); }

.breadcrumbs { margin-top: 26px; max-width: 100%; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; color: rgba(255,255,255,.75); }
.breadcrumbs li + li::before {
	content: ''; width: 6px; height: 6px; margin-inline: 12px; flex: none;
	border-top: 1.6px solid var(--color-primary); border-right: 1.6px solid var(--color-primary); rotate: 45deg;
}
.breadcrumbs a { color: #fff; text-decoration: none; transition: color .2s; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--color-primary); }
.breadcrumbs li[aria-current] span { color: var(--color-primary); font-weight: 600; display: block; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
	.page-banner::before { background: linear-gradient(rgba(11,31,58,.9), rgba(11,31,58,.78)); }
	.page-banner__title { letter-spacing: .02em; }
	.page-banner__divider { margin-top: 16px; }
	.breadcrumbs { margin-top: 20px; }
	.breadcrumbs ol { font-size: .85rem; }
	.breadcrumbs li[aria-current] span { max-width: 24ch; }
}

/* Banner trang con: ảnh nền thu nhỏ dần, chữ trượt lên lần lượt (tắt khi người dùng bật giảm chuyển động) */
@keyframes banner-zoom { from { scale: 1.08; } to { scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.page-banner__bg { animation: banner-zoom 1.6s cubic-bezier(.2,.7,.2,1) both; }
	.page-banner__inner > * { --rv-y: 22px; animation: rv-up .7s cubic-bezier(.2,.7,.2,1) both; }
	.page-banner__inner > :nth-child(2) { animation-delay: .08s; }
	.page-banner__inner > :nth-child(3) { animation-delay: .16s; }
	.page-banner__inner > :nth-child(4) { animation-delay: .24s; }
	.page-banner__inner > :nth-child(5) { animation-delay: .32s; }
}

/* ===== Trang Dự án: "hồ sơ công trình" =====
   Thẻ dự án: ảnh phủ chữ, khung ngắm 4 góc kiểu bản vẽ co lại khi rê chuột, nút mũi tên xoay vào, các thẻ khác mờ đi.
   Lưới bento: thẻ đầu tiên to gấp đôi; thẻ cuối kéo rộng để hàng cuối không bị hổng (xem content-project.php). */
.proj-archive { padding-block: clamp(40px, 6vw, 88px); }
.proj-filter { margin-bottom: clamp(28px, 4vw, 48px); }
.proj-filter ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.proj-filter a {
	position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 22px; border: 1px solid var(--color-line); background: #fff; color: var(--color-navy);
	font: 600 .9rem 'Montserrat', var(--font-base); text-decoration: none; transition: background-color .3s, border-color .3s, color .3s, translate .3s;
}
.proj-filter a::after { /* gạch chân quét từ trái sang khi rê chuột */
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.proj-filter a:hover { border-color: var(--color-navy); translate: 0 -2px; }
.proj-filter a:hover::after, .proj-filter a[aria-current]::after { transform: scaleX(1); }
.proj-filter a[aria-current] { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.proj-filter a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.proj-filter__n { display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 12px; background: color-mix(in srgb, var(--color-navy) 9%, transparent); font-size: .75rem; font-weight: 700; transition: background-color .3s, color .3s; }
.proj-filter a[aria-current] .proj-filter__n { background: var(--color-primary); color: #fff; }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(250px, 22vw, 360px); grid-auto-flow: dense; gap: 22px; }
.proj-grid--few { grid-template-columns: repeat(2, 1fr); }
.proj-card { position: relative; overflow: hidden; isolation: isolate; background: var(--color-navy); color: #fff; box-shadow: 0 10px 30px rgba(11,31,58,.14); transition: opacity .4s, filter .4s, box-shadow .4s; }
.proj-card--feature { grid-column: span 2; grid-row: span 2; }
.proj-card--wide { grid-column: span 2; }
.proj-card--full { grid-column: 1 / -1; }
.proj-card__media { position: absolute; inset: 0; z-index: -1; }
.proj-card__img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.proj-card__media:not(:has(img)) { /* chưa có ảnh: nền navy + bản vẽ mặt bằng mờ */
	background: var(--color-navy) url("../images/blueprint.svg") center / 70% no-repeat; background-blend-mode: soft-light;
}
.proj-card__media:not(:has(img))::before { content: ''; position: absolute; inset: 0; background: url("../images/blueprint.svg") center / 70% no-repeat; filter: invert(1); opacity: .12; }
.proj-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,31,58,.94) 0%, rgba(11,31,58,.55) 34%, rgba(11,31,58,0) 62%); transition: background-color .5s; }
.proj-card::after { /* khung ngắm 4 góc */
	content: ''; position: absolute; inset: 18px; z-index: 3; pointer-events: none; opacity: .65; transition: inset .45s cubic-bezier(.2, .7, .2, 1), opacity .45s;
	--c: var(--color-primary); --l: 28px; --t: 3px;
	background:
		linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
.proj-card__go {
	position: absolute; right: 30px; top: 30px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--color-primary); color: #fff; scale: 0; rotate: -90deg; transition: scale .4s cubic-bezier(.3, 1.4, .5, 1), rotate .5s;
}
.proj-card__go .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.proj-card__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 36px; transition: translate .45s cubic-bezier(.2, .7, .2, 1); }
.proj-card__cat { display: inline-block; margin-bottom: 10px; padding: 5px 12px; background: var(--color-primary); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.proj-card__title { margin: 0; font: 700 1.25rem/1.35 'Montserrat', var(--font-base); text-wrap: balance; }
.proj-card--feature .proj-card__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.proj-card__title a { color: inherit; text-decoration: none; }
.proj-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 4; } /* cả thẻ bấm được */
.proj-card__text { margin: 10px 0 0; max-width: 52ch; line-height: 1.6; color: rgba(255,255,255,.85); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-card__facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .88rem; color: rgba(255,255,255,.88); }
.proj-card__facts li { display: inline-flex; align-items: center; gap: 7px; }
.proj-card__facts .icon { width: 16px; height: 16px; flex: none; color: var(--color-primary); }
.proj-card:hover .proj-card__img { scale: 1.08; }
.proj-card:hover .proj-card__media::after { background: linear-gradient(to top, rgba(11,31,58,.96) 0%, rgba(11,31,58,.7) 48%, rgba(11,31,58,.28) 100%); }
.proj-card:hover::after, .proj-card:focus-within::after { inset: 10px; opacity: 1; }
.proj-card:hover .proj-card__go { scale: 1; rotate: 0deg; }
.proj-card:hover .proj-card__info { translate: 0 -4px; }
.proj-card:focus-within { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (hover: hover) {
	.proj-grid:has(.proj-card:hover) .proj-card:not(:hover) { opacity: .6; filter: saturate(.6); }
}

/* Phân trang (dùng chung cho mọi trang danh sách) */
.pagination { margin-top: clamp(36px, 5vw, 56px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers {
	display: grid; place-items: center; min-width: 46px; height: 46px; padding-inline: 12px; border: 1px solid var(--color-line); background: #fff;
	color: var(--color-navy); font: 600 .95rem 'Montserrat', var(--font-base); text-decoration: none; transition: background-color .25s, border-color .25s, color .25s;
}
.pagination a.page-numbers:hover { border-color: var(--color-navy); }
.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }
.pagination .icon { width: 18px; height: 18px; stroke-width: 2.2; }

/* ===== Chi tiết dự án: ảnh hero + khối thông số kiểu khung tên bản vẽ ===== */
.pj-hero { padding-top: clamp(32px, 4vw, 56px); }
.pj-hero__head { max-width: 900px; margin-bottom: clamp(24px, 3vw, 36px); }
.pj-hero__title { margin: 0; font: 800 clamp(1.9rem, 4vw, 3.1rem)/1.15 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .01em; color: var(--color-navy); text-wrap: balance; }
.pj-hero__lead { margin: 16px 0 0; font-size: 1.12rem; line-height: 1.75; color: var(--color-muted); max-width: 62ch; }
.pj-hero__media { position: relative; overflow: hidden; margin: 0; height: clamp(260px, 40vw, 580px); background: var(--color-line); box-shadow: 0 24px 50px rgba(11,31,58,.2); }
.pj-hero__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.pj-hero__media::after { /* khung ngắm 4 góc trên ảnh hero */
	content: ''; position: absolute; inset: 22px; pointer-events: none; --c: #fff; --l: 34px; --t: 3px; opacity: .85;
	background:
		linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
.pj-spec { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: -56px clamp(0px, 4vw, 64px) 0; background: #fff; border: 1px solid var(--color-navy); border-top: 5px solid var(--color-primary); box-shadow: 0 20px 44px rgba(11,31,58,.16); }
.pj-spec__cell { padding: 22px 26px 24px; }
.pj-spec__cell + .pj-spec__cell { border-left: 1px solid var(--color-line); }
.pj-spec dt { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.pj-spec dt .icon { width: 18px; height: 18px; color: var(--color-primary); }
.pj-spec dd { margin: 0; font: 700 1.12rem/1.4 'Montserrat', var(--font-base); color: var(--color-navy); }

.proj-single { padding-block: clamp(40px, 5vw, 80px); }
.proj-single__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.proj-single__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.proj-single__cats a { padding: 5px 14px; background: var(--color-navy); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .25s; }
.proj-single__cats a:hover { background: var(--color-primary); }
.proj-single__title { margin: 0 0 24px; font-family: 'Montserrat', var(--font-base); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.25; color: var(--color-navy); text-wrap: balance; }
.proj-single__main .entry__content { line-height: 1.8; }
.entry__content > :first-child { margin-top: 0; }
.entry__content img { height: auto; }
.pj-content h3 { margin: 1.8em 0 .8em; padding-left: 16px; border-left: 4px solid var(--color-primary); font: 700 1.3rem/1.35 'Montserrat', var(--font-base); color: var(--color-navy); }
/* Thư viện ảnh trong bài: lưới 2–3 cột, rê chuột phóng nhẹ, bấm để xem lớn (main.js [data-lightbox]) */
.pj-content .wp-block-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px !important; margin: 0 0 1.6em; padding: 0; }
.pj-content .wp-block-gallery .wp-block-image, .pj-content .wp-block-gallery figure { position: relative; overflow: hidden; margin: 0 !important; aspect-ratio: 4 / 3; width: 100% !important; display: block !important; flex: none !important; } /* !important: thắng CSS gốc của khối gallery WordPress */
.pj-content .wp-block-gallery img, .pj-content img { cursor: zoom-in; }
.pj-content .wp-block-gallery img { width: 100% !important; height: 100% !important; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.pj-content .wp-block-gallery figure:hover img { scale: 1.08; }
.pj-content .wp-block-gallery figure::after { content: ''; position: absolute; inset: 0; background: rgba(11,31,58,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 34px no-repeat; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pj-content .wp-block-gallery figure:hover::after { opacity: 1; }
.proj-single__side { position: sticky; top: calc(var(--header-h, 80px) + 24px); display: grid; gap: 24px; }
.proj-info { background: #fff; border: 1px solid var(--color-line); border-top: 4px solid var(--color-primary); box-shadow: 0 6px 24px rgba(11,31,58,.07); }
.proj-info__title { margin: 0; padding: 20px 26px; font: 700 1.1rem 'Montserrat', var(--font-base); color: var(--color-navy); border-bottom: 1px solid var(--color-line); }
.svc-nav__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 7px; border-radius: 13px; background: color-mix(in srgb, var(--color-navy) 9%, transparent); font-size: .78rem; font-weight: 700; transition: background-color .25s, color .25s; }
.svc-nav__list a:hover .svc-nav__count, .svc-nav__list a[aria-current] .svc-nav__count { background: var(--color-primary); color: #fff; }
.svc-pager__link--next { grid-column: 2; }

.side-cta { padding: 28px 26px; background: var(--color-navy); color: #fff; }
.side-cta__title { margin: 0 0 10px; font: 700 1.25rem/1.35 'Montserrat', var(--font-base); text-wrap: balance; }
.side-cta p { margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: .95rem; }
.side-cta .btn-split { display: flex; }
.side-cta .btn-split__text { flex: 1; min-height: 54px; padding-inline: 22px; }
.side-cta .btn-split__icon { width: 54px; }
.side-cta__phone { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; color: #fff; font: 700 1.15rem 'Montserrat', var(--font-base); text-decoration: none; transition: color .25s; }
.side-cta__phone .icon { width: 20px; height: 20px; color: var(--color-primary); }
.side-cta__phone:hover { color: var(--color-primary); }
.proj-related .section-heading { margin-bottom: clamp(28px, 4vw, 44px); }

/* Xem ảnh phóng to (dialog tạo bằng JS) */
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
.lightbox::backdrop { background: rgba(8,16,30,.92); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .3s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: min(92vw, 1500px); max-height: 86dvh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__btn { position: fixed; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background-color .25s; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--color-primary); outline: none; }
.lightbox__btn .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.lightbox__btn--close { right: 20px; top: 20px; }
.lightbox__btn--prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: 20px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: fixed; left: 0; right: 0; bottom: 18px; text-align: center; font-size: .9rem; letter-spacing: .12em; color: rgba(255,255,255,.75); }

@media (max-width: 1200px) {
	.proj-single__grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1024px) {
	.proj-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; grid-auto-rows: clamp(230px, 34vw, 340px); }
	.proj-card--feature { grid-column: span 2; grid-row: span 1; }
	.proj-card--full { grid-column: span 2; }
	.proj-card--feature .proj-card__text { display: none; }
	.proj-single__grid { grid-template-columns: 1fr; }
	.proj-single__side { position: static; grid-template-columns: 1fr 1fr; align-items: stretch; }
	.pj-hero__media { height: auto; aspect-ratio: 16 / 9; }
	.pj-spec { margin-inline: clamp(0px, 3vw, 28px); }
}
@media (max-width: 767px) {
	.proj-filter ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
	.proj-filter ul::-webkit-scrollbar { display: none; }
	.proj-filter li { flex: none; }
	.proj-filter a { padding: 9px 16px; font-size: .85rem; }
	.proj-grid, .proj-grid--few { grid-template-columns: 1fr; grid-auto-rows: clamp(230px, 64vw, 340px); }
	.proj-card--feature, .proj-card--wide, .proj-card--full { grid-column: auto; grid-row: auto; }
	.proj-card__info { padding: 22px 22px 24px; }
	.proj-card::after { inset: 12px; --l: 22px; }
	.proj-card__go { right: 22px; top: 22px; width: 42px; height: 42px; }
	.proj-single__side { grid-template-columns: 1fr; }
	.pj-hero__media { height: auto; aspect-ratio: 4 / 3; }
	.pj-hero__media::after { inset: 12px; --l: 24px; }
	.pj-spec { margin: -40px 0 0; grid-template-columns: 1fr 1fr; }
	.pj-spec__cell { padding: 16px 16px 18px; }
	.pj-spec__cell:nth-child(odd) { border-left: 0; }
	.pj-spec__cell:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
	.pj-spec dd { font-size: 1rem; }
	.lightbox__btn { width: 44px; height: 44px; }
	.lightbox__btn--prev { left: 8px; }
	.lightbox__btn--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.proj-card, .proj-card__img, .proj-card__go, .proj-card::after, .proj-card__info, .proj-filter a, .proj-filter a::after, .pj-content .wp-block-gallery img { transition: none; }
	.pj-hero__media img { top: 0; height: 100%; }
	.lightbox[open] { animation: none; }
}
@media (hover: none) {
	.proj-card__go { scale: 1; rotate: 0deg; }
}

/* ===== Chi tiết dịch vụ: lời dẫn + danh sách dịch vụ bên cạnh ===== */
.svc-single__lead { margin: 0 0 24px; padding-left: 20px; border-left: 4px solid var(--color-primary); font-size: 1.12rem; line-height: 1.7; font-weight: 500; color: var(--color-navy); }
.svc-nav__list { margin: 0; padding: 8px 0; list-style: none; }
.svc-nav__list a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 26px;
	color: var(--color-navy); font-weight: 600; text-decoration: none; transition: background-color .25s, color .25s;
}
.svc-nav__list a .icon { width: 18px; height: 18px; flex: none; color: var(--color-primary); transition: translate .25s; }
.svc-nav__list a:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.svc-nav__list a:hover .icon { translate: 4px 0; }
.svc-nav__list a[aria-current] { background: var(--color-navy); color: #fff; }
.svc-nav__list a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* ===== Trang Liên hệ: "hồ sơ tiếp nhận công trình" =====
   1. Bàn tiếp nhận (lời mời + trạng thái giờ làm việc + hotline + kênh nhắn tin | khung tên bản vẽ)
   2. Phiếu yêu cầu (3 bước tiếp theo | form có tiến độ hồ sơ)  3. Bản đồ toàn khổ  4. Câu hỏi thường gặp.
   Hiệu ứng xuất hiện dùng các lớp .rv* chung. */

/* --- 1. Bàn tiếp nhận --- */
.ct-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 120px); }
.ct-hero::before { /* giấy kẻ ô mờ dần */
	content: ''; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(rgba(11,31,58,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask: radial-gradient(ellipse 70% 80% at 15% 25%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 15% 25%, #000, transparent 75%);
}
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.ct-lead { margin: 0 0 26px; font-size: 1.05rem; line-height: 1.8; color: var(--color-muted); max-width: 56ch; }

/* Trạng thái giờ làm việc (JS tính theo lịch trong Tùy biến) */
.ct-status { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 8px 16px 8px 12px; border-radius: 99px; background: color-mix(in srgb, #1f9d55 11%, transparent); color: #17713e; font: 600 .88rem 'Montserrat', var(--font-base); }
.ct-status[hidden] { display: none; }
.ct-status__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #1f9d55; flex: none; }
.ct-status__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ct-ping 1.8s ease-out infinite; }
.ct-status.is-closed { background: color-mix(in srgb, var(--color-navy) 7%, transparent); color: var(--color-navy); }
.ct-status.is-closed .ct-status__dot { background: #9aa3b5; }
.ct-status.is-closed .ct-status__dot::after { animation: none; }
@keyframes ct-ping { 0% { scale: 1; opacity: .7; } 100% { scale: 2.8; opacity: 0; } }

/* Hotline lớn: ô vuông cam có sóng vuông lan ra + số gạch chân chạy khi rê chuột */
.ct-hotline { display: inline-flex; align-items: center; gap: 22px; margin-bottom: 36px; color: var(--color-navy); text-decoration: none; }
.ct-hotline__icon { position: relative; display: grid; place-items: center; flex: none; width: 70px; height: 70px; background: var(--color-primary); color: #fff; }
.ct-hotline__icon::before, .ct-hotline__icon::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--color-primary); animation: ct-ring 2.6s ease-out infinite; }
.ct-hotline__icon::after { animation-delay: 1.3s; }
.ct-hotline__icon .icon { position: relative; width: 30px; height: 30px; transition: rotate .3s; }
.ct-hotline:hover .ct-hotline__icon .icon { animation: fc-ring 1s ease-in-out; }
.ct-hotline__body small { display: block; margin-bottom: 4px; font: 700 .76rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.ct-hotline__body strong {
	display: inline-block; padding-bottom: 4px; font: 800 clamp(1.9rem, 3.8vw, 3rem)/1.1 'Montserrat', var(--font-base); letter-spacing: .01em; font-variant-numeric: tabular-nums;
	background: linear-gradient(var(--color-primary), var(--color-primary)) left bottom / 0 4px no-repeat; transition: background-size .5s cubic-bezier(.2,.7,.2,1), color .3s;
}
.ct-hotline:hover strong, .ct-hotline:focus-visible strong { background-size: 100% 4px; }
.ct-hotline:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; }
@keyframes ct-ring { 0% { scale: 1; opacity: .7; } 100% { scale: 1.6; opacity: 0; } }

/* Kênh nhắn tin */
.ct-channels__label { margin: 0 0 12px; font: 700 .76rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.ct-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 660px; }
.ct-channel {
	--ch: var(--color-primary);
	position: relative; overflow: hidden; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; align-items: center; height: 100%;
	padding: 14px 14px 14px 16px; background: #fff; border: 1px solid var(--color-line); color: var(--color-navy); text-decoration: none;
	transition: translate .3s, box-shadow .3s, border-color .3s;
}
.ct-channel--zalo { --ch: #0068ff; }
.ct-channel--messenger { --ch: #0866ff; }
.ct-channel--mail { --ch: #ea4335; }
.ct-channel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ch); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.ct-channel__logo { display: grid; place-items: center; width: 38px; height: 38px; }
.ct-channel__logo .icon { width: 100%; height: 100%; }
.ct-channel--mail .ct-channel__logo .icon { width: 32px; height: auto; }
.ct-channel__text b { display: block; font: 700 .95rem 'Montserrat', var(--font-base); }
.ct-channel__text small { display: block; font-size: .78rem; line-height: 1.35; color: var(--color-muted); }
.ct-channel__go .icon { width: 18px; height: 18px; color: #9aa3b5; transition: color .3s, rotate .3s; }
.ct-channel:hover, .ct-channel:focus-visible { translate: 0 -3px; border-color: color-mix(in srgb, var(--ch) 35%, var(--color-line)); box-shadow: 0 14px 30px rgba(11,31,58,.1); }
.ct-channel:hover::after, .ct-channel:focus-visible::after { transform: scaleX(1); }
.ct-channel:hover .ct-channel__go .icon, .ct-channel:focus-visible .ct-channel__go .icon { color: var(--ch); rotate: 45deg; }
.ct-channel:focus-visible { outline: 2px solid var(--ch); outline-offset: 2px; }

/* Khung tên bản vẽ: thẻ navy cắt 2 góc, khung viền trong, các dòng như ô của khung tên */
.ct-board { position: relative; isolation: isolate; padding: 16px; background: var(--color-navy); color: #fff; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.ct-board::before { /* bản vẽ mặt bằng trắng mờ */
	content: ''; position: absolute; z-index: -1; right: -70px; bottom: -50px; width: 440px; aspect-ratio: 640 / 460; background: #fff; opacity: .06;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.ct-board > * { position: relative; border-inline: 1px solid rgba(255,255,255,.18); }
.ct-board__head { padding: 26px 28px 22px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.ct-board__kicker { display: block; font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); }
.ct-board__title { margin: 8px 0 0; font: 800 clamp(1.02rem, 1.5vw, 1.2rem)/1.4 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.ct-board__rows { margin: 0; }
.ct-board__row { display: grid; grid-template-columns: 148px minmax(0, 1fr); border-bottom: 1px solid rgba(255,255,255,.12); transition: background-color .3s; }
.ct-board__row:hover { background: rgba(255,255,255,.04); }
.ct-board__row dt { padding: 17px 10px 17px 28px; font: 700 .74rem/1.5 'Montserrat', var(--font-base); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ct-board__row dt span { margin-right: 10px; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ct-board__row dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px 12px 18px; border-left: 1px solid rgba(255,255,255,.12); }
.ct-board__value { min-width: 0; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.ct-board__value a { color: inherit; text-decoration: none; transition: color .2s; }
.ct-board__value a:hover { color: var(--color-primary); }
.ct-copy {
	position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
	background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); transition: background-color .25s, border-color .25s, color .25s;
}
.ct-copy .icon { grid-area: 1 / 1; width: 16px; height: 16px; transition: opacity .2s, scale .25s; }
.ct-copy .icon:last-child { opacity: 0; scale: .4; stroke-width: 2.6; }
.ct-copy:hover, .ct-copy:focus-visible { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ct-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ct-copy.is-copied { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.ct-copy.is-copied .icon:first-child { opacity: 0; scale: .4; }
.ct-copy.is-copied .icon:last-child { opacity: 1; scale: 1; }
.ct-copy.is-copied::after { content: attr(data-done); position: absolute; right: 0; bottom: calc(100% + 8px); padding: 5px 10px; white-space: nowrap; background: #fff; color: var(--color-navy); font: 700 .74rem 'Montserrat', var(--font-base); box-shadow: 0 6px 16px rgba(0,0,0,.2); animation: ct-tip .25s ease-out; }
@keyframes ct-tip { from { opacity: 0; translate: 0 4px; } }
.ct-board__foot { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(255,255,255,.18); }
.ct-board__foot span { padding: 12px 16px 14px 28px; font: 800 .92rem 'Montserrat', var(--font-base); font-variant-numeric: tabular-nums; }
.ct-board__foot span + span { border-left: 1px solid rgba(255,255,255,.12); padding-left: 18px; }
.ct-board__foot small { display: block; margin-bottom: 2px; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* --- 2. Phiếu yêu cầu --- */
.ct-request { padding-block: clamp(56px, 8vw, 120px); background: var(--color-bg-alt); scroll-margin-top: 70px; }
.ct-request__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); box-shadow: 0 30px 70px rgba(11,31,58,.12); }

.ct-next { position: relative; isolation: isolate; overflow: hidden; padding: clamp(32px, 4vw, 56px); background: var(--color-navy); color: #fff; }
.ct-next::before {
	content: ''; position: absolute; z-index: -1; left: -60px; bottom: -40px; width: 420px; aspect-ratio: 640 / 460; background: #fff; opacity: .06;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.ct-next__title { margin: 0 0 32px; font: 800 clamp(1.35rem, 2.2vw, 1.75rem)/1.25 'Montserrat', var(--font-base); text-wrap: balance; }
.ct-next__list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.ct-next__list::before { content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; border-left: 2px dashed rgba(255,255,255,.2); }
.ct-next__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.ct-next__item:last-child { padding-bottom: 0; }
.ct-next__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-navy); border: 2px solid rgba(255,255,255,.25); color: var(--color-primary); transition: background-color .3s, border-color .3s, color .3s, scale .3s; }
.ct-next__icon .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.ct-next__item:hover .ct-next__icon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; scale: 1.06; }
.ct-next__time { display: inline-block; margin: 2px 0 4px; font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.ct-next__name { margin: 0 0 4px; font: 700 1.08rem 'Montserrat', var(--font-base); }
.ct-next__text { margin: 0; font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.72); }
.ct-next__safe { display: flex; gap: 12px; margin: 32px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.ct-next__safe .icon { flex: none; width: 22px; height: 22px; color: var(--color-primary); }
.ct-next__safe a { color: #fff; text-underline-offset: 3px; }
.ct-next__safe a:hover { color: var(--color-primary); }

.ct-form { padding: clamp(28px, 4vw, 56px); background: #fff; }
.ct-form__title { margin: 0 0 6px; font: 800 clamp(1.35rem, 2.2vw, 1.75rem)/1.25 'Montserrat', var(--font-base); color: var(--color-navy); }
.ct-form__desc { margin: 0 0 24px; color: var(--color-muted); }
.ct-form__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

/* Tiến độ hồ sơ: 5 đoạn = 5 mục của form */
.ct-progress { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; margin-bottom: 4px; }
.ct-progress[hidden] { display: none; }
.ct-progress__label { font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .16em; text-transform: uppercase; color: var(--color-navy); }
.ct-progress__value { font: 800 .85rem 'Montserrat', var(--font-base); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ct-progress__bar { position: relative; grid-column: 1 / -1; height: 6px; background: color-mix(in srgb, var(--color-navy) 9%, transparent); }
.ct-progress__bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), #fff calc(20% - 3px) 20%); }
.ct-progress__fill { display: block; height: 100%; width: var(--p, 0%); background: var(--color-primary); transition: width .6s cubic-bezier(.2,.7,.2,1), background-color .4s; }
.ct-progress.is-full .ct-progress__fill { background: #1f9d55; }
.ct-progress.is-full .ct-progress__value { color: #1f9d55; }

/* Ô nhập có nhãn nổi + icon + gạch chân chạy khi focus */
.ff { position: relative; min-width: 0; }
.ff--wide { grid-column: 1 / -1; }
.ff input, .ff textarea {
	display: block; width: 100%; height: 60px; padding: 24px 16px 6px 48px; border: 1px solid var(--color-line); border-radius: 0; background: #fff;
	font: inherit; font-size: .98rem; color: var(--color-navy); -webkit-appearance: none; appearance: none; transition: border-color .25s, box-shadow .25s;
}
.ff textarea { height: auto; min-height: 150px; padding-top: 30px; line-height: 1.6; resize: vertical; }
.ff input:focus, .ff textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.ff__icon { position: absolute; left: 16px; top: 20px; display: grid; color: #9aa3b5; pointer-events: none; transition: color .25s; }
.ff__icon .icon { width: 20px; height: 20px; }
.ff label { position: absolute; left: 48px; top: 19px; font-size: .95rem; color: var(--color-muted); pointer-events: none; transform-origin: left top; transition: translate .25s, scale .25s, color .25s; }
.ff label b { color: #d64545; }
.ff :is(input, textarea):focus + label, .ff :is(input, textarea):not(:placeholder-shown) + label { translate: 0 -11px; scale: .78; font-weight: 600; color: var(--color-navy); }
.ff:focus-within .ff__icon { color: var(--color-primary); }
.ff::after { content: ''; position: absolute; left: 0; right: 0; top: 58px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.ff--area::after { top: auto; bottom: 0; }
.ff:has(.ff__hint--note)::after { bottom: 27px; }
.ff:focus-within::after { transform: scaleX(1); }
.ff :is(input, textarea):user-invalid { border-color: #d64545; }
.ff:has(:user-invalid) :is(.ff__icon, label) { color: #b02a2a; }
.ff:has(:user-invalid)::after { background: #d64545; }
.ff__hint { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .78rem; color: var(--color-muted); transition: max-height .3s, opacity .3s, margin .3s; }
.ff:focus-within .ff__hint, .ff:has(:user-invalid) .ff__hint { max-height: 40px; margin-top: 6px; opacity: 1; }
.ff:has(:user-invalid) .ff__hint { color: #b02a2a; }
.ff__hint--note { display: flex; justify-content: space-between; gap: 12px; max-height: none; margin-top: 6px; opacity: 1; }
.ff__count { flex: none; font-variant-numeric: tabular-nums; }
.ff__count.is-near { color: #b45309; font-weight: 700; }

/* Chọn dịch vụ: thẻ bấm (radio) */
.ct-pick { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.ct-pick legend { margin-bottom: 10px; padding: 0; font-size: .9rem; font-weight: 600; color: var(--color-navy); }
.ct-pick__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chip { position: relative; cursor: pointer; }
.ct-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-chip__box { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--color-line); background: #fff; font-size: .9rem; font-weight: 600; color: var(--color-navy); transition: background-color .25s, border-color .25s, color .25s, translate .25s; }
.ct-chip__box .icon { width: 18px; height: 18px; color: var(--color-primary); transition: rotate .4s; }
.ct-chip:hover .ct-chip__box { border-color: var(--color-navy); translate: 0 -2px; }
.ct-chip input:checked + .ct-chip__box { background: var(--color-navy); border-color: var(--color-navy); color: #fff; animation: ct-pop .35s cubic-bezier(.3,1.6,.5,1); }
.ct-chip input:checked + .ct-chip__box .icon { rotate: 360deg; }
.ct-chip input:focus-visible + .ct-chip__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@keyframes ct-pop { 50% { scale: 1.06; } }

.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.ct-form__submit .btn-split__text { min-height: 56px; }
.ct-form__submit .btn-split__icon { width: 56px; }
.ct-form__submit.is-sending { cursor: progress; opacity: .85; }
.ct-form__submit.is-sending .btn-split__icon .icon { animation: ct-send .8s ease-in-out infinite; }
@keyframes ct-send { 50% { translate: 6px 0; opacity: .4; } }
.ct-form__or { margin: 0; font-size: .9rem; color: var(--color-muted); }
.ct-form__or a { margin-left: 4px; font: 800 1rem 'Montserrat', var(--font-base); color: var(--color-navy); text-decoration: none; white-space: nowrap; transition: color .2s; }
.ct-form__or a:hover { color: var(--color-primary); }

/* Gửi thành công: con dấu "Đã tiếp nhận" đóng xuống */
.ct-done { display: grid; justify-items: center; align-content: center; height: 100%; padding-block: 20px; text-align: center; }
.ct-stamp { width: 190px; margin-bottom: 18px; color: var(--color-primary); rotate: -12deg; animation: ct-stamp .75s cubic-bezier(.3,1.5,.5,1) .2s both; }
.ct-stamp svg { display: block; width: 100%; overflow: visible; }
.ct-stamp__ring { fill: none; stroke: currentColor; stroke-width: 4; }
.ct-stamp__ring--thin { stroke-width: 1.5; stroke-dasharray: 4 5; }
.ct-stamp text { fill: currentColor; font: 800 14.5px 'Montserrat', sans-serif; letter-spacing: 2.4px; transform-origin: 100px 100px; animation: ct-spin 24s linear infinite; }
.ct-stamp__check { fill: none; stroke: var(--color-navy); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: ct-draw .5s ease-out .85s forwards; }
@keyframes ct-stamp { from { opacity: 0; scale: 2.2; rotate: -40deg; } }
@keyframes ct-spin { to { rotate: 360deg; } }
@keyframes ct-draw { to { stroke-dashoffset: 0; } }
.ct-done__title { margin: 0 0 8px; font: 800 clamp(1.35rem, 2.2vw, 1.7rem)/1.3 'Montserrat', var(--font-base); color: var(--color-navy); }
.ct-done__text { margin: 0 0 26px; max-width: 44ch; color: var(--color-muted); }
.ct-done__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 26px; }
.ct-done__call { display: inline-flex; align-items: center; gap: 8px; font: 800 1.05rem 'Montserrat', var(--font-base); color: var(--color-navy); text-decoration: none; }
.ct-done__call .icon { width: 20px; height: 20px; color: var(--color-primary); }
.ct-done__call:hover { color: var(--color-primary); }

/* --- 3. Bản đồ toàn khổ --- */
.ct-map { position: relative; background: var(--color-navy); }
.ct-map__frame { position: relative; height: clamp(440px, 62vh, 620px); overflow: hidden; }
.ct-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.06); transition: filter .7s; }
.ct-map:hover iframe, .ct-map:focus-within iframe { filter: none; }
.ct-map__pulse { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--color-primary); border-radius: 50%; pointer-events: none; animation: ct-radar 2.6s ease-out infinite; }
.ct-map__corner { position: absolute; width: 34px; height: 34px; border: 0 solid var(--color-primary); pointer-events: none; }
.ct-map__corner--tl { left: 22px; top: 22px; border-width: 3px 0 0 3px; }
.ct-map__corner--tr { right: 22px; top: 22px; border-width: 3px 3px 0 0; }
.ct-map__corner--bl { left: 22px; bottom: 22px; border-width: 0 0 3px 3px; }
.ct-map__corner--br { right: 22px; bottom: 22px; border-width: 0 3px 3px 0; }
@keyframes ct-radar { 0% { scale: 1; opacity: .9; } 100% { scale: 5; opacity: 0; } }
.ct-map__wrap { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.ct-map__card { position: relative; width: min(400px, 100%); padding: 34px 32px; background: #fff; border-top: 4px solid var(--color-primary); box-shadow: 0 30px 60px rgba(11,31,58,.3); pointer-events: auto; }
.ct-map__kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem 'Montserrat', var(--font-base); letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary); }
.ct-map__kicker .icon { width: 16px; height: 16px; }
.ct-map__title { margin: 8px 0 12px; font: 800 1.5rem/1.25 'Montserrat', var(--font-base); color: var(--color-navy); }
.ct-map__addr { margin: 0 0 12px; font-weight: 600; line-height: 1.6; color: var(--color-navy); }
.ct-map__hours { display: flex; gap: 10px; margin: 0 0 24px; font-size: .9rem; line-height: 1.6; color: var(--color-muted); }
.ct-map__hours .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--color-primary); }
.ct-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ct-map__actions .btn-split__text { min-height: 52px; padding-inline: 24px 22px; }
.ct-map__actions .btn-split__icon { width: 52px; }
.ct-map__open { display: inline-flex; align-items: center; gap: 6px; font: 700 .9rem 'Montserrat', var(--font-base); color: var(--color-navy); text-decoration: none; transition: color .2s; }
.ct-map__open .icon { width: 16px; height: 16px; transition: rotate .3s; }
.ct-map__open:hover { color: var(--color-primary); }
.ct-map__open:hover .icon { rotate: 45deg; }

/* --- 4. Câu hỏi thường gặp --- */
.ct-faq { padding-block: clamp(56px, 8vw, 120px); }
.ct-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.ct-faq__intro { position: sticky; top: 110px; }
.ct-faq__lead { margin: 0 0 28px; line-height: 1.8; color: var(--color-muted); max-width: 44ch; }
.ct-faq__call { display: inline-flex; align-items: center; gap: 16px; padding: 12px 24px 12px 12px; background: var(--color-navy); color: #fff; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: background-color .3s; }
.ct-faq__call-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--color-primary); transition: background-color .3s; }
.ct-faq__call-icon .icon { width: 24px; height: 24px; }
.ct-faq__call small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ct-faq__call b { font: 800 1.2rem 'Montserrat', var(--font-base); font-variant-numeric: tabular-nums; }
.ct-faq__call:hover, .ct-faq__call:focus-visible { background: var(--color-primary); }
.ct-faq__call:hover .ct-faq__call-icon, .ct-faq__call:focus-visible .ct-faq__call-icon { background: var(--color-navy); }
.ct-faq__list { border-top: 1px solid var(--color-line); }
.ct-faq__item { border-bottom: 1px solid var(--color-line); interpolate-size: allow-keywords; }
.ct-faq__item summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px; gap: 16px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; }
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.ct-faq__num { font: 800 1.1rem 'Montserrat', var(--font-base); color: color-mix(in srgb, var(--color-navy) 25%, transparent); font-variant-numeric: tabular-nums; transition: color .3s; }
.ct-faq__q { font: 700 1.05rem/1.45 'Montserrat', var(--font-base); color: var(--color-navy); transition: color .3s; }
.ct-faq__toggle { position: relative; width: 38px; height: 38px; border: 1px solid var(--color-line); transition: background-color .3s, border-color .3s; }
.ct-faq__toggle::before, .ct-faq__toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--color-primary); transition: rotate .35s, background-color .3s; }
.ct-faq__toggle::after { rotate: 90deg; }
.ct-faq__item summary:hover .ct-faq__q { color: var(--color-primary); }
.ct-faq__item[open] .ct-faq__num { color: var(--color-primary); }
.ct-faq__item[open] .ct-faq__toggle { background: var(--color-navy); border-color: var(--color-navy); }
.ct-faq__item[open] .ct-faq__toggle::before, .ct-faq__item[open] .ct-faq__toggle::after { background: #fff; rotate: 180deg; }
.ct-faq__body { padding: 0 54px 24px 60px; }
.ct-faq__body p { margin: 0; line-height: 1.8; color: var(--color-muted); }
/* Mở/đóng mượt (trình duyệt hỗ trợ ::details-content; trình duyệt cũ mở ngay) */
.ct-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.2,.7,.2,1), content-visibility .45s allow-discrete; }
.ct-faq__item[open]::details-content { block-size: auto; }

.ct-extra { padding-block: 0 clamp(48px, 6vw, 90px); }

/* --- Responsive --- */
@media (max-width: 1200px) {
	.ct-board__row { grid-template-columns: 128px minmax(0, 1fr); }
	.ct-board__row dt { padding-left: 22px; }
	.ct-board__head, .ct-board__foot span:first-child { padding-left: 22px; }
}
@media (max-width: 1024px) {
	.ct-hero__grid, .ct-request__grid, .ct-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.ct-faq__intro { position: static; }
	.ct-board { max-width: 760px; }
}
@media (max-width: 900px) {
	.ct-map { background: #fff; }
	.ct-map__frame { height: 380px; }
	.ct-map__wrap { position: relative; inset: auto; display: block; padding-bottom: 8px; }
	.ct-map__card { width: 100%; margin-top: -70px; }
	.ct-faq { padding-top: 56px; }
}
@media (max-width: 767px) {
	.ct-form__form { grid-template-columns: minmax(0, 1fr); }
	.ct-hotline { gap: 16px; }
	.ct-hotline__icon { width: 58px; height: 58px; }
	.ct-hotline__icon .icon { width: 26px; height: 26px; }
	.ct-form__foot { flex-direction: column; align-items: stretch; }
	.ct-form__submit .btn-split__text { flex: 1; justify-content: center; }
	.ct-form__or { text-align: center; }
	.ct-map__corner { width: 24px; height: 24px; }
	.ct-map__corner--tl, .ct-map__corner--tr { top: 12px; }
	.ct-map__corner--bl, .ct-map__corner--br { bottom: 12px; }
	.ct-map__corner--tl, .ct-map__corner--bl { left: 12px; }
	.ct-map__corner--tr, .ct-map__corner--br { right: 12px; }
	.ct-faq__item summary { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 12px; padding: 18px 0; }
	.ct-faq__toggle { width: 34px; height: 34px; }
	.ct-faq__q { font-size: .98rem; }
	.ct-faq__body { padding: 0 0 20px 42px; }
}
@media (max-width: 560px) {
	.ct-board { padding: 10px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
	.ct-board__head { padding: 22px 18px 18px; }
	.ct-board__row { grid-template-columns: minmax(0, 1fr); }
	.ct-board__row dt { padding: 14px 18px 0; }
	.ct-board__row dd { padding: 4px 12px 14px 18px; border-left: 0; }
	.ct-board__foot span, .ct-board__foot span:first-child { padding: 10px 10px 12px 14px; font-size: .82rem; }
	.ct-board__foot span + span { padding-left: 12px; }
	.ct-channels { grid-template-columns: minmax(0, 1fr); }
	.ct-next { padding: 30px 20px; }
	.ct-form { padding: 28px 18px; }
	.ct-map__card { padding: 28px 22px; }
	.ct-map__frame { height: 320px; }
	.ct-chip__box { padding: 9px 13px; font-size: .86rem; }
}
@media (max-width: 480px) {
	.ct-hotline__body small { font-size: .68rem; letter-spacing: .1em; }
	.ct-stamp { width: 160px; }
	.ct-faq__call { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ct-status__dot::after, .ct-hotline__icon::before, .ct-hotline__icon::after, .ct-map__pulse, .ct-stamp text { animation: none; }
	.ct-hotline__icon::before, .ct-hotline__icon::after, .ct-map__pulse { display: none; }
	.ct-stamp, .ct-chip input:checked + .ct-chip__box, .ct-hotline:hover .ct-hotline__icon .icon { animation: none; }
	.ct-stamp__check { animation: none; stroke-dashoffset: 0; }
	.ct-faq__item::details-content { transition: none; }
	.ct-channel, .ct-chip__box, .ct-map__frame iframe, .ff::after { transition: none; }
}

/* ===== Trang Giới thiệu =====
   Ý tưởng: nền bản vẽ kiến trúc (Wilmër), chữ khổng lồ rỗng ruột, thẻ navy có góc cắt và thanh năng lực (Contio).
   Mọi hiệu ứng xuất hiện dùng class .rv* (xem khối "Hiệu ứng xuất hiện" bên dưới), tắt khi người dùng bật giảm chuyển động. */
.ab-eyebrow { margin: 0 0 10px; font: 700 .85rem 'Montserrat', var(--font-base); letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); }
.ab-title { margin: 0; font: 800 clamp(1.9rem, 3.6vw, 2.8rem)/1.15 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .02em; color: var(--color-navy); text-wrap: balance; }
.ab-title span { color: var(--color-primary); }
.ab-rule { display: block; width: 140px; height: 8px; margin: 20px 0 26px;
	background:
		linear-gradient(var(--color-navy), var(--color-navy)) center / 8px 8px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) left center / 58px 3px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) right center / 58px 3px no-repeat; }

/* --- 1. Câu chuyện: collage 2 ảnh + thẻ navy góc cắt | chữ + thanh năng lực --- */
.ab-story { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 8vw, 120px); }
.ab-story::before { /* bản vẽ mặt bằng mờ làm nền */
	content: ''; position: absolute; z-index: -1; right: -60px; top: 20px; width: min(760px, 70vw); aspect-ratio: 640 / 460;
	background: var(--color-navy); opacity: .06;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.ab-story__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.ab-story__media { position: relative; padding: 0 0 70px 30px; }
.ab-story__media::before { content: ''; position: absolute; left: 0; top: -26px; width: 58%; height: 58%; border: 4px solid var(--color-primary); }
.ab-story__frame { position: relative; overflow: hidden; background: var(--color-line); box-shadow: 0 28px 60px rgba(11,31,58,.2); }
.ab-story__frame img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.ab-story__frame--main { width: 82%; aspect-ratio: 4 / 5; }
.ab-story__frame--sub { position: absolute; right: 0; top: 34%; width: 44%; aspect-ratio: 3 / 4; border: 8px solid #fff; }
/* Thẻ navy số năm: góc dưới trái cắt vát (kiểu Contio) */
.ab-story__badge {
	position: absolute; left: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; width: min(58%, 260px); padding: 26px 28px 30px 34px;
	background: var(--color-navy); color: #fff; box-shadow: 0 22px 44px rgba(11,31,58,.3);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.ab-story__badge strong { font: 800 clamp(2.6rem, 4.4vw, 3.6rem)/1 'Montserrat', var(--font-base); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ab-story__badge span { font-size: .95rem; font-weight: 600; line-height: 1.45; }

.ab-lead { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.75; font-weight: 500; color: var(--color-navy); max-width: 58ch; }
.ab-text { margin: 0 0 28px; line-height: 1.8; color: var(--color-muted); max-width: 58ch; }
.skills { display: grid; gap: 18px; margin: 0 0 34px; padding: 0; list-style: none; max-width: 520px; }
.skill__head { display: flex; justify-content: space-between; margin-bottom: 8px; font: 700 .92rem 'Montserrat', var(--font-base); color: var(--color-navy); }
.skill__head b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.skill__bar { height: 8px; background: color-mix(in srgb, var(--color-navy) 10%, transparent); }
.skill__fill { display: block; height: 100%; width: var(--pct); background: var(--color-primary); transition: width 1.5s cubic-bezier(.2, .7, .2, 1) .3s; }
html.js-reveal .skill:not(.is-in) .skill__fill { width: 0; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.about-page__content { padding-block: clamp(32px, 5vw, 64px); }

/* --- 2. Số liệu: nền navy + bản vẽ + chữ viết tắt khổng lồ rỗng ruột (kiểu Wilmër) --- */
.stats { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 7vw, 92px); background: var(--color-navy); color: #fff; }
.stats::before { /* bản vẽ mặt bằng trắng mờ */
	content: ''; position: absolute; z-index: -1; left: -80px; top: -40px; width: min(720px, 80vw); aspect-ratio: 640 / 460;
	background: #fff; opacity: .07;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.stats__mark {
	position: absolute; z-index: -1; right: 2%; top: 50%; translate: 0 -50%;
	font: 800 clamp(7rem, 22vw, 20rem)/1 'Montserrat', var(--font-base); letter-spacing: .04em; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.1); user-select: none; pointer-events: none;
}
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.stats__item { padding: 6px 20px; text-align: center; }
.stats__item + .stats__item { border-left: 1px solid rgba(255,255,255,.16); }
.stats__num { display: block; font: 800 clamp(2.6rem, 5vw, 4.2rem)/1.1 'Montserrat', var(--font-base); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.stats__label { display: block; margin-top: 8px; font-size: .95rem; color: rgba(255,255,255,.85); }

/* --- 3. Tầm nhìn / sứ mệnh / giá trị: thẻ lật sang navy khi rê chuột --- */
.values { padding-block: clamp(56px, 7vw, 100px); }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.values__card {
	position: relative; overflow: hidden; isolation: isolate; padding: 44px 32px 38px; text-align: center; background: #fff;
	box-shadow: 0 6px 24px rgba(11,31,58,.07); border-top: 4px solid var(--color-primary); transition: translate .4s, box-shadow .4s;
}
.values__card::before { /* nền navy quét từ dưới lên */
	content: ''; position: absolute; inset: 0; z-index: -1; background: var(--color-navy);
	transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.7, 0, .2, 1);
}
.values__num { position: absolute; right: 18px; top: 4px; font: 800 4.6rem/1 'Montserrat', var(--font-base); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-navy) 16%, transparent); transition: -webkit-text-stroke-color .4s; }
.values__icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: var(--color-navy); color: #fff; transition: background-color .4s, rotate .6s; }
.values__icon .icon { width: 30px; height: 30px; stroke-width: 1.7; }
.values__title { margin: 0 0 10px; font: 700 1.2rem 'Montserrat', var(--font-base); color: var(--color-navy); transition: color .4s; }
.values__text { margin: 0; line-height: 1.75; color: var(--color-muted); transition: color .4s; }
.values__card:hover { translate: 0 -8px; box-shadow: 0 24px 48px rgba(11,31,58,.18); }
.values__card:hover::before { transform: scaleY(1); }
.values__card:hover .values__icon { background: var(--color-primary); rotate: 360deg; }
.values__card:hover .values__title { color: #fff; }
.values__card:hover .values__text { color: rgba(255,255,255,.82); }
.values__card:hover .values__num { -webkit-text-stroke-color: rgba(255,255,255,.22); }

/* --- 4. Hành trình: "bản vẽ tiến độ" ---
   Đường dọc là thước đo có vạch chia, tự chạy màu cam theo thanh cuộn (đầu thước có mũi tên cao độ).
   Mỗi mốc là ký hiệu cao độ đánh số; thẻ là khung bản vẽ trên giấy kẻ ô với 2 dấu góc, nối vào thước bằng đường gióng nét đứt
   và mở ra bằng hiệu ứng quét từ phía thước. */
.tl { padding-block: clamp(64px, 8vw, 110px); }
.tl__track { position: relative; max-width: 1080px; margin-inline: auto; --tl-p: 0; }

/* Thước: vạch ngắn mỗi 12px, vạch dài mỗi 60px; hai lớp (xám nền, cam phần đã chạy) cùng một mẫu */
.tl__line, .tl__fill {
	background:
		repeating-linear-gradient(to bottom, var(--tick, #c3c9d4) 0 2px, transparent 2px 60px) center top / 26px 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--tick, #c3c9d4) 0 1px, transparent 1px 12px) center top / 12px 100% no-repeat,
		linear-gradient(var(--tick, #c3c9d4), var(--tick, #c3c9d4)) center top / 2px 100% no-repeat;
}
.tl__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; }
.tl__fill { --tick: var(--color-primary); position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--tl-p) * 100%); }
.tl__fill::after { /* mũi tên cao độ ở đầu phần đã chạy */
	content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--color-primary);
	clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 3px 4px rgba(11,31,58,.35));
}
.tl__list { position: relative; margin: 0; padding: 0; list-style: none; }
.tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 128px; padding-bottom: 56px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item:nth-child(odd) .tl__card { grid-column: 1; text-align: right; }
.tl__item:nth-child(even) .tl__card { grid-column: 2; }

/* Mốc: ký hiệu cao độ đánh số (vòng tròn + số), nền trắng che thước */
.tl__dot {
	position: absolute; left: 50%; top: 14px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-left: -24px;
	border-radius: 50%; background: #fff; border: 3px solid #c3c9d4; color: var(--color-muted);
	font: 800 .95rem 'Montserrat', var(--font-base); transition: border-color .4s, background-color .4s, color .4s, scale .4s;
}
.tl__item.is-active .tl__dot { border-color: var(--color-primary); background: var(--color-navy); color: #fff; scale: 1.12; box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* Đường gióng nét đứt nối thẻ với mốc */
.tl__item::before { content: ''; position: absolute; top: 37px; height: 0; width: 80px; border-top: 2px dashed #b4bcc9; transition: border-color .4s; }
.tl__item:nth-child(odd)::before { right: calc(50% + 24px); }
.tl__item:nth-child(even)::before { left: calc(50% + 24px); }
.tl__item.is-active::before { border-color: var(--color-primary); }

/* Thẻ: giấy kẻ ô + dấu góc cam (trên-trái và dưới-phải) */
.tl__card {
	position: relative; padding: 30px 34px 32px; overflow: hidden; isolation: isolate;
	background-color: #fff;
	background-image: linear-gradient(rgba(11,31,58,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,31,58,.05) 1px, transparent 1px);
	background-size: 22px 22px;
	border: 1px solid var(--color-line); box-shadow: 0 8px 28px rgba(11,31,58,.07); transition: border-color .4s, box-shadow .4s;
}
.tl__card::before, .tl__card::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--color-primary); transition: width .5s, height .5s; }
.tl__card::before { left: -1px; top: -1px; border-width: 3px 0 0 3px; }
.tl__card::after { right: -1px; bottom: -1px; border-width: 0 3px 3px 0; }
.tl__item.is-active .tl__card { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line)); box-shadow: 0 18px 40px rgba(11,31,58,.14); }
.tl__item.is-active .tl__card::before, .tl__item.is-active .tl__card::after { width: 46px; height: 46px; }
.tl__num { /* số thứ tự mờ làm nền, đặt phía xa thước */
	position: absolute; z-index: -1; top: 2px; font: 800 5.4rem/1 'Montserrat', var(--font-base); color: color-mix(in srgb, var(--color-navy) 6%, transparent); user-select: none;
}
.tl__item:nth-child(odd) .tl__num { left: 16px; }
.tl__item:nth-child(even) .tl__num { right: 16px; }
.tl__kicker { display: block; margin-bottom: 6px; font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary); }
.tl__label { margin: 0 0 4px; font: 800 1.55rem/1.2 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .02em; color: var(--color-navy); }
.tl__title { margin: 0 0 10px; font: 600 1.02rem 'Montserrat', var(--font-base); color: var(--color-primary); }
.tl__text { margin: 0; line-height: 1.75; color: var(--color-muted); }

/* --- 5. Cam kết: ảnh trượt nhẹ (parallax) | bảng navy 4 cam kết --- */
.commit { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; background: var(--color-navy); color: #fff; }
.commit__media { position: relative; overflow: hidden; }
.commit__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.commit__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(11,31,58,.55)); }
.commit__panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 80px); }
.commit__panel::before {
	content: ''; position: absolute; z-index: -1; right: -90px; bottom: -70px; width: 520px; aspect-ratio: 640 / 460;
	background: #fff; opacity: .07;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.commit__inner { width: 100%; max-width: 560px; }
.commit__inner .section-heading { margin-bottom: 30px; }
.commit__list { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.commit__item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.commit__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid rgba(255,255,255,.3); color: var(--color-primary); transition: background-color .3s, color .3s, border-color .3s; }
.commit__icon .icon { width: 26px; height: 26px; stroke-width: 1.7; }
.commit__item:hover .commit__icon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.commit__title { margin: 2px 0 4px; font: 700 1.1rem 'Montserrat', var(--font-base); }
.commit__text { margin: 0; line-height: 1.65; color: rgba(255,255,255,.78); }

/* Quy trình + liên hệ ở trang này: xen kẽ nền cho nhịp trang */
.commit + .process { background: var(--color-bg-alt); }

/* --- Hiệu ứng xuất hiện dùng chung (.rv, .rv-left, .rv-right, .rv-zoom, .rv-pop): JS (main.js) thêm .is-in khi cuộn tới --- */
html.js-reveal :is(.rv, .rv-left, .rv-right, .rv-zoom, .rv-pop, .rv-wipe-l, .rv-wipe-r) { --rv-delay: calc(var(--rv-d, 0ms) + var(--rv-base, 0ms)); }
html.js-reveal :is(.rv, .rv-left, .rv-right, .rv-zoom, .rv-pop, .rv-wipe-l, .rv-wipe-r):not(.is-in) { opacity: 0; }
html.js-reveal .rv.is-in { animation: rv-up .85s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .rv-left.is-in { animation: rv-left .95s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .rv-right.is-in { animation: rv-right .95s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .rv-zoom.is-in { animation: rv-zoom 1s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .rv-pop.is-in { animation: rv-pop .7s cubic-bezier(.3, 1.5, .5, 1) var(--rv-delay) backwards; }
html.js-reveal :is(.rv-wipe-l, .rv-wipe-r).is-in { animation: rv-wipe-l 1s var(--rv-ease) var(--rv-delay) backwards; }
html.js-reveal .rv-wipe-r.is-in { animation-name: rv-wipe-r; }
@keyframes rv-wipe-l { from { clip-path: inset(0 0 0 100%); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@keyframes rv-wipe-r { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
.ab-story__frame--sub { --rv-base: 250ms; }
.ab-story__badge { --rv-base: 500ms; }

@media (max-width: 900px) {
	.ab-story__grid { grid-template-columns: 1fr; }
	.ab-story__media { max-width: 560px; }
}
@media (max-width: 1024px) {
	.stats__list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.stats__item:nth-child(3) { border-left: 0; }
	.values__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; gap: 20px; }
	.commit { grid-template-columns: 1fr; min-height: 0; }
	.commit__media { height: clamp(240px, 42vw, 360px); }
	.commit__media::after { background: linear-gradient(transparent 50%, rgba(11,31,58,.6)); }
}
/* Dòng thời gian một bên (thước dọc sang trái): từ 900px trở xuống, để thẻ đủ rộng cho chữ */
@media (max-width: 900px) {
	.tl__line { left: 22px; }
	.tl__item { grid-template-columns: 1fr; padding-left: 72px; padding-bottom: 30px; }
	.tl__item:nth-child(n) .tl__card { grid-column: 1; text-align: left; }
	.tl__dot { left: 22px; width: 42px; height: 42px; margin-left: -21px; top: 10px; font-size: .85rem; }
	.tl__item:nth-child(n)::before { left: 44px; right: auto; width: 28px; top: 31px; }
	.tl__item:nth-child(n) .tl__num { left: auto; right: 14px; font-size: 4rem; }
	.tl__card { padding: 24px 24px 26px; }
	.tl__label { font-size: 1.35rem; }
}
@media (max-width: 480px) {
	.tl__item { padding-left: 58px; }
	.tl__line { left: 17px; }
	.tl__dot { left: 17px; width: 36px; height: 36px; margin-left: -18px; font-size: .78rem; }
	.tl__item:nth-child(n)::before { left: 35px; width: 23px; top: 28px; }
	.tl__item:nth-child(n) .tl__num { display: none; } /* số mờ nền đè lên chữ ở màn hình hẹp; số đã có trên mốc */
	.tl__card { padding: 20px 18px 22px; }
	.tl__label { font-size: 1.2rem; }
	.tl__title { font-size: .96rem; }
}
@media (max-width: 560px) {
	.ab-story__media { padding: 0 0 56px 16px; }
	.ab-story__media::before { top: -16px; }
	.ab-story__badge { padding: 20px 20px 24px 26px; }
	.stats__item { padding-inline: 10px; }
	.stats__label { font-size: .85rem; }
	.values__card { padding: 36px 22px 30px; }
	.commit__item { grid-template-columns: 48px 1fr; gap: 14px; }
	.commit__icon { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.values__card, .values__card::before, .values__icon, .tl__dot, .tl__card, .commit__icon, .skill__fill { transition: none; }
	.ab-story__frame img, .commit__media img { top: 0; height: 100%; }
}

/* ===== Trang Dịch vụ: hàng lớn xen kẽ, ảnh hình đầu hồi mái nhà =====
   Ảnh cắt theo hình đầu hồi (đỉnh mái nhọn), có khối cam lệch phía sau, icon dịch vụ đặt đúng đỉnh mái và thẻ navy số thứ tự ở góc.
   Ảnh trượt nhẹ khi cuộn (parallax, xem main.js [data-parallax]). Hàng chẵn đảo bên. ≤900px: xếp dọc. */
.svc-archive { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 100px); --off: 18px; }
.svc-archive::before, .svc-archive::after { /* bản vẽ mặt bằng mờ làm nền, hai góc đối diện */
	content: ''; position: absolute; z-index: -1; width: min(620px, 60vw); aspect-ratio: 640 / 460; background: var(--color-navy); opacity: .045;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.svc-archive::before { right: -120px; top: 180px; }
.svc-archive::after { left: -140px; bottom: 80px; rotate: 180deg; }
.svc-archive .section-heading { margin-bottom: clamp(40px, 6vw, 80px); }

.svc-rows { display: grid; gap: clamp(64px, 9vw, 120px); }
.svc-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 7vw, 112px); align-items: center; }
.svc-row:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.svc-row:nth-child(even) .svc-row__media { order: 2; }

.svc-row__media, .svc-single__media { position: relative; display: block; filter: drop-shadow(0 26px 34px rgba(11,31,58,.2)); }
.svc-row__media { padding-top: 34px; }
.svc-row__frame, .svc-row__media::before, .svc-single__media::before { clip-path: polygon(0 15%, 50% 0, 100% 15%, 100% 100%, 0 100%); }
.svc-row__media::before, .svc-single__media::before { /* khối cam lệch phía sau ảnh */
	content: ''; position: absolute; inset: 34px 0 0; z-index: 0; background: var(--color-primary); translate: var(--off, 18px) var(--off, 18px);
}
.svc-single__media::before { inset: 0; --off: 14px; }
.svc-row__frame { position: relative; z-index: 1; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-line); }
.svc-row__frame img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.svc-single__media { margin-bottom: 34px; }
.svc-single__media .svc-row__frame { aspect-ratio: 16 / 9; }

.svc-row__icon { /* icon đặt ngay đỉnh mái */
	position: absolute; left: 50%; top: 34px; z-index: 2; display: grid; place-items: center; width: 68px; height: 68px; translate: -50% -50%;
	border-radius: 50%; background: var(--color-primary); color: #fff; border: 5px solid #fff; box-shadow: 0 8px 20px rgba(11,31,58,.25);
	transition: rotate .6s, background-color .3s;
}
.svc-row__icon .icon { width: 28px; height: 28px; stroke-width: 1.9; }
.svc-row:hover .svc-row__icon { rotate: 360deg; background: var(--color-navy); }
.svc-row__no { /* thẻ navy số thứ tự, góc dưới bên ngoài ảnh */
	position: absolute; z-index: 2; left: calc(var(--off) * -1); bottom: 0; display: grid; place-items: center; width: 92px; height: 92px;
	background: var(--color-navy); color: #fff; font: 800 2rem/1 'Montserrat', var(--font-base); clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.svc-row__no::after { content: ''; position: absolute; left: 50%; bottom: 16px; width: 28px; height: 3px; margin-left: -14px; background: var(--color-primary); }

.svc-row__eyebrow { margin: 0 0 10px; font: 700 .85rem 'Montserrat', var(--font-base); letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); }
.svc-row__title { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.3rem)/1.2 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .02em; color: var(--color-navy); text-wrap: balance; }
.svc-row__title a { color: inherit; text-decoration: none; transition: color .25s; }
.svc-row__title a:hover { color: var(--color-primary); }
.svc-row__text { margin: 0 0 22px; font-size: 1.05rem; line-height: 1.8; color: var(--color-muted); max-width: 52ch; }
.svc-row__list { display: grid; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; }
.svc-row__list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--color-navy); }
.svc-row__list li span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--color-primary); color: #fff; }
.svc-row__list li .icon { width: 14px; height: 14px; stroke-width: 3; }

/* Dải kêu gọi hành động cuối trang */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(44px, 6vw, 76px); color: #fff; background: linear-gradient(100deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #7a3d00)); }
.cta-band::before {
	content: ''; position: absolute; z-index: -1; right: -60px; top: -90px; width: min(620px, 80vw); aspect-ratio: 640 / 460; background: #fff; opacity: .16;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.cta-band__text { display: flex; align-items: center; gap: 22px; max-width: 700px; }
.cta-band__icon { position: relative; display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--color-navy); }
.cta-band__icon .icon { width: 32px; height: 32px; stroke-width: 1.7; }
.cta-band__icon::after { content: ''; position: absolute; inset: -8px; border: 2px solid #fff; border-radius: 50%; opacity: 0; }
.cta-band__title { margin: 0 0 6px; font: 800 clamp(1.35rem, 2.6vw, 2rem)/1.25 'Montserrat', var(--font-base); text-wrap: balance; }
.cta-band__text p { margin: 0; color: rgba(255,255,255,.92); line-height: 1.7; }
.cta-band .btn-split { --sweep: #fff; --sweep-text: var(--color-navy); background: var(--color-navy); }
.cta-band .btn-split__icon { background: rgba(255,255,255,.12); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.cta-band__phone { display: inline-flex; align-items: center; gap: 12px; color: #fff; font: 800 1.3rem 'Montserrat', var(--font-base); text-decoration: none; transition: color .25s; }
.cta-band__phone span { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; transition: background-color .25s, border-color .25s, color .25s; }
.cta-band__phone .icon { width: 20px; height: 20px; }
.cta-band__phone:hover { color: var(--color-navy); }
.cta-band__phone:hover span { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
@keyframes cta-ring { 0% { opacity: .7; scale: .85; } 100% { opacity: 0; scale: 1.35; } }
@media (prefers-reduced-motion: no-preference) { .cta-band__icon::after { animation: cta-ring 2.4s ease-out infinite; } }

/* Chi tiết dịch vụ: nhãn, nội dung có gạch đầu dòng đánh dấu, nút dịch vụ trước/sau, danh sách dịch vụ có icon */
.svc-single__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .85rem 'Montserrat', var(--font-base); letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); }
.svc-single__eyebrow span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-navy); color: #fff; }
.svc-single__eyebrow .icon { width: 16px; height: 16px; }
.svc-single .entry__content h3 { margin: 1.9em 0 .7em; padding-left: 16px; border-left: 4px solid var(--color-primary); font: 700 1.3rem/1.35 'Montserrat', var(--font-base); color: var(--color-navy); }
.svc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.svc-pager__link { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--color-line); background: #fff; color: var(--color-navy); font: 700 1rem/1.35 'Montserrat', var(--font-base); text-decoration: none; transition: border-color .25s, background-color .25s, color .25s, translate .25s; }
.svc-pager__link small { display: block; margin-bottom: 4px; font: 600 .72rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); transition: color .25s; }
.svc-pager__link .icon { width: 22px; height: 22px; flex: none; color: var(--color-primary); transition: color .25s, translate .25s; }
.svc-pager__link--next { justify-content: flex-end; text-align: right; }
.svc-pager__link:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.svc-pager__link:hover small { color: rgba(255,255,255,.7); }
.svc-pager__link--prev:hover .icon { translate: -4px 0; }
.svc-pager__link--next:hover .icon { translate: 4px 0; }
.svc-nav__list a { justify-content: flex-start; }
.svc-nav__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--color-navy) 8%, transparent); color: var(--color-navy); transition: background-color .25s, color .25s; }
.svc-nav__list a .svc-nav__icon .icon { width: 18px; height: 18px; color: inherit; }
.svc-nav__name { flex: 1; }
.svc-nav__list a:hover .svc-nav__icon { background: var(--color-primary); color: #fff; }
.svc-nav__list a[aria-current] .svc-nav__icon { background: var(--color-primary); color: #fff; }
.svc-nav__list a > .icon:last-child { width: 18px; height: 18px; flex: none; }

@media (max-width: 1024px) {
	.svc-row, .svc-row:nth-child(even) { gap: clamp(32px, 5vw, 56px); }
}
@media (max-width: 900px) {
	.svc-row, .svc-row:nth-child(n) { grid-template-columns: 1fr; gap: 44px; }
	.svc-row:nth-child(even) .svc-row__media { order: 0; }
	.svc-row__media { max-width: 600px; }
}
@media (max-width: 767px) {
	.svc-pager { grid-template-columns: 1fr; }
	.cta-band__text { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
	.svc-archive { --off: 10px; }
	.svc-row__icon { width: 56px; height: 56px; border-width: 4px; }
	.svc-row__icon .icon { width: 24px; height: 24px; }
	.svc-row__no { width: 72px; height: 72px; font-size: 1.5rem; }
	.svc-row__no::after { bottom: 12px; }
	.svc-pager__link { padding: 16px 18px; }
	.cta-band__actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.svc-row__icon, .svc-pager__link, .svc-nav__icon { transition: none; }
	.svc-row__frame img { top: 0; height: 100%; }
}

/* ===== Chi tiết dự án: thông số chi tiết, cảm nhận chủ nhà, video, thư viện ảnh dạng mosaic ===== */
.proj-info__list { margin: 0; padding: 6px 26px 12px; }
.proj-info__row { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.proj-info__row:last-child { border-bottom: 0; }
.proj-info__row dt { display: flex; align-items: center; gap: 10px; font: 700 .74rem 'Montserrat', var(--font-base); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.proj-info__row dt .icon { width: 18px; height: 18px; color: var(--color-primary); }
.proj-info__row dd { margin: 5px 0 0 28px; font-weight: 600; line-height: 1.5; color: var(--color-navy); }

.pj-quote { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 7vw, 100px); background: var(--color-navy); color: #fff; text-align: center; }
.pj-quote::before {
	content: ''; position: absolute; z-index: -1; left: -80px; bottom: -120px; width: min(680px, 80vw); aspect-ratio: 640 / 460; background: #fff; opacity: .06;
	-webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat;
}
.pj-quote__fig { max-width: 880px; margin: 0 auto; }
.pj-quote__mark { display: block; height: .55em; font: 800 clamp(5rem, 11vw, 8rem)/1 'Montserrat', var(--font-base); color: var(--color-primary); }
.pj-quote__text { margin: 18px 0 0; font: 600 clamp(1.2rem, 2.3vw, 1.8rem)/1.6 'Montserrat', var(--font-base); text-wrap: balance; }
.pj-quote__by { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; color: var(--color-primary); }
.pj-quote__by::before, .pj-quote__by::after { content: ''; width: 36px; height: 2px; background: var(--color-primary); }

.pj-video { margin-top: clamp(32px, 4vw, 48px); }
.pj-video__title { margin: 0 0 18px; padding-left: 16px; border-left: 4px solid var(--color-primary); font: 700 1.3rem/1.35 'Montserrat', var(--font-base); color: var(--color-navy); }
.pj-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-navy); box-shadow: 0 16px 40px rgba(11,31,58,.18); }
.pj-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pj-video__link { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }

/* Thư viện ảnh dạng mosaic: ảnh đầu to gấp đôi (2×2), các ảnh còn lại lấp quanh; 6 ảnh vừa đủ lưới 3×3 */
.pj-content .wp-block-gallery { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: clamp(120px, 13vw, 190px); grid-auto-flow: dense; }
.pj-content .wp-block-gallery .wp-block-image, .pj-content .wp-block-gallery figure { aspect-ratio: auto !important; height: 100% !important; }
.pj-content .wp-block-gallery figure:first-child { grid-column: span 2; grid-row: span 2; }

/* Nội dung dự án: danh sách có dấu tích cam (giống trang dịch vụ) */
:is(.svc-single .entry__content, .pj-content) ul:not(.wp-block-gallery) { display: grid; gap: 12px; margin: 0 0 1.4em; padding: 0; list-style: none; }
:is(.svc-single .entry__content, .pj-content) ul:not(.wp-block-gallery) li { position: relative; padding-left: 38px; font-weight: 500; color: var(--color-navy); }
:is(.svc-single .entry__content, .pj-content) ul:not(.wp-block-gallery) li::before {
	content: ''; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%;
	background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.pj-content p { margin: 0 0 1.2em; }
.pj-content > p:first-child { font-size: 1.12rem; font-weight: 500; line-height: 1.8; color: var(--color-navy); }

@media (max-width: 560px) {
	.pj-content .wp-block-gallery { grid-template-columns: 1fr 1fr !important; grid-auto-rows: clamp(100px, 30vw, 150px); }
	.pj-content .wp-block-gallery figure:first-child { grid-column: span 2; }
}

/* ===== Tin tức (kiểu tạp chí) =====
   Trang chủ tin: 1 bài nổi bật ảnh phủ chữ có khung ngắm + 3 bài mới; thanh chuyên mục + tìm kiếm; lưới thẻ (hàng cuối lẻ thì thẻ cuối kéo rộng).
   Bài viết: ảnh lớn, thanh chia sẻ dọc, mục lục cuộn theo, kiểu chữ bài viết riêng, bài trước/sau dạng ảnh. Trang 404 và tìm kiếm cùng phong cách. */
.nw-index { padding-block: clamp(40px, 6vw, 88px); }
.nw-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; margin-bottom: clamp(44px, 6vw, 80px); }

/* Bài nổi bật */
.nw-lead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(440px, 38vw, 590px); background: var(--color-navy); color: #fff; box-shadow: 0 24px 50px rgba(11,31,58,.2); }
.nw-lead__media { position: absolute; inset: 0; z-index: -1; }
.nw-lead__img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s cubic-bezier(.2, .7, .2, 1); }
.nw-lead__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,31,58,.96) 0%, rgba(11,31,58,.62) 38%, rgba(11,31,58,.05) 70%); }
.nw-lead::before { /* khung ngắm 4 góc */
	content: ''; position: absolute; inset: 20px; z-index: 3; pointer-events: none; opacity: .7; transition: inset .45s cubic-bezier(.2, .7, .2, 1), opacity .45s;
	--c: var(--color-primary); --l: 30px; --t: 3px;
	background:
		linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
.nw-lead:hover::before, .nw-lead:focus-within::before { inset: 12px; opacity: 1; }
.nw-lead:hover .nw-lead__img { scale: 1.06; }
.nw-lead__body { width: 100%; padding: clamp(28px, 4vw, 52px); }
.nw-lead__cat { display: inline-block; margin-bottom: 14px; padding: 6px 14px; background: var(--color-primary); font: 700 .72rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; }
.nw-lead__title { margin: 0; max-width: 24ch; font: 800 clamp(1.5rem, 2.8vw, 2.4rem)/1.25 'Montserrat', var(--font-base); text-wrap: balance; }
.nw-lead__title a { color: inherit; text-decoration: none; }
.nw-lead__title a::after { content: ''; position: absolute; inset: 0; z-index: 4; }
.nw-lead__excerpt { margin: 14px 0 0; max-width: 58ch; line-height: 1.7; color: rgba(255,255,255,.86); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-lead__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.nw-lead__meta, .nw-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: .92rem; }
.nw-lead__meta span, .nw-meta span { display: inline-flex; align-items: center; gap: 8px; }
.nw-lead__meta .icon, .nw-meta .icon { width: 17px; height: 17px; color: var(--color-primary); }
.nw-lead__go { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--color-primary); color: #fff; transition: rotate .5s, background-color .3s; }
.nw-lead__go .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.nw-lead:hover .nw-lead__go { rotate: 45deg; background: #fff; color: var(--color-navy); }

/* Cột "Bài mới" + danh sách thu nhỏ dùng chung */
.nw-side { display: grid; grid-template-rows: auto repeat(3, 1fr); padding: 6px 28px 10px; background: #fff; border: 1px solid var(--color-line); border-top: 4px solid var(--color-primary); box-shadow: 0 6px 24px rgba(11,31,58,.07); }
.nw-side__title { margin: 0; padding: 20px 0 14px; font: 800 1.15rem 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .04em; color: var(--color-navy); }
.nw-side__item { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--color-line); color: inherit; text-decoration: none; transition: translate .3s; }
.nw-side__item:hover { translate: 6px 0; }
.nw-side__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-line); }
.nw-side__thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s; }
.nw-side__item:hover .nw-side__thumb img { scale: 1.1; }
.nw-side__text { display: grid; gap: 4px; min-width: 0; }
.nw-side__cat { font: 700 .7rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.nw-side__name { font: 700 .98rem/1.4 'Montserrat', var(--font-base); color: var(--color-navy); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s; }
.nw-side__item:hover .nw-side__name { color: var(--color-primary); }
.nw-side__meta { font-size: .82rem; color: var(--color-muted); }

/* Thanh chuyên mục + tìm kiếm */
.nw-bar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 18px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.nw-bar .proj-filter { margin: 0; min-width: 0; }
.nw-bar .proj-filter ul { justify-content: flex-start; gap: 8px; }
.nw-bar .proj-filter a { padding: 11px 18px; }
.nw-search { position: relative; width: min(100%, 320px); }
.nw-search input { width: 100%; height: 50px; padding: 0 56px 0 18px; border: 1px solid var(--color-line); border-radius: 0; background: #fff; font: inherit; font-size: .95rem; color: var(--color-navy); transition: border-color .2s, box-shadow .2s; }
.nw-search input::placeholder { color: #8c93a8; }
.nw-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
.nw-search button { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 50px; height: 50px; border: 0; background: var(--color-navy); color: #fff; cursor: pointer; transition: background-color .25s; }
.nw-search button:hover, .nw-search button:focus-visible { background: var(--color-primary); outline: none; }
.nw-search button .icon { width: 20px; height: 20px; }
.nw-search--big { width: min(100%, 640px); margin-inline: auto; }
.nw-search--big input { height: 62px; padding-left: 24px; font-size: 1.05rem; }
.nw-search--big button { width: 62px; height: 62px; }
.nw-searchbox { margin-bottom: clamp(32px, 5vw, 56px); text-align: center; }
.nw-searchbox__count { margin: 18px 0 0; color: var(--color-muted); }
.nw-searchbox__count b { color: var(--color-navy); }
.nw-subhead { margin: clamp(36px, 5vw, 60px) 0 24px; padding-left: 16px; border-left: 4px solid var(--color-primary); font: 800 1.35rem 'Montserrat', var(--font-base); color: var(--color-navy); }
.nw-empty { padding: clamp(24px, 4vw, 56px) 0; text-align: center; }
.nw-empty__icon { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; background: var(--color-navy); color: #fff; }
.nw-empty__icon .icon { width: 34px; height: 34px; stroke-width: 1.7; }
.nw-empty h2 { margin: 0 0 8px; font: 800 1.5rem 'Montserrat', var(--font-base); color: var(--color-navy); }
.nw-empty p { margin: 0; color: var(--color-muted); }

/* Lưới thẻ */
.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.nw-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; box-shadow: 0 6px 24px rgba(11,31,58,.07); transition: translate .4s, box-shadow .4s; }
.nw-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.nw-card:hover { translate: 0 -8px; box-shadow: 0 24px 48px rgba(11,31,58,.15); }
.nw-card:hover::after, .nw-card:focus-within::after { transform: scaleX(1); }
.nw-card:focus-within { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.nw-card__media { position: relative; display: block; flex: none; aspect-ratio: 16 / 10; background: var(--color-navy); }
.nw-card__media:not(:has(img)) { background: var(--color-navy) url("../images/blueprint.svg") center / 80% no-repeat; background-blend-mode: soft-light; }
.nw-card__img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.nw-card__media { overflow: hidden; }
.nw-card:hover .nw-card__img { scale: 1.08; }
.nw-card__cat { position: absolute; left: 0; top: 18px; z-index: 1; padding: 6px 14px 6px 18px; background: var(--color-navy); color: #fff; border-left: 3px solid var(--color-primary); font: 700 .7rem 'Montserrat', var(--font-base); letter-spacing: .14em; text-transform: uppercase; }
.nw-card__date { position: absolute; right: 18px; bottom: 0; /* tab dính mép dưới ảnh */ z-index: 2; display: grid; place-items: center; min-width: 62px; padding: 8px 10px; background: var(--color-primary); color: #fff; line-height: 1.1; box-shadow: 0 8px 18px rgba(11,31,58,.25); }
.nw-card__date strong { font: 800 1.45rem 'Montserrat', var(--font-base); }
.nw-card__date span { font-size: .72rem; font-weight: 600; }
.nw-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.nw-card__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .85rem; color: var(--color-muted); }
.nw-card__meta .icon { width: 16px; height: 16px; color: var(--color-primary); }
.nw-card__title { margin: 0 0 12px; font: 700 1.2rem/1.4 'Montserrat', var(--font-base); color: var(--color-navy); text-wrap: balance; }
.nw-card__title a { color: inherit; text-decoration: none; transition: color .25s; }
.nw-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.nw-card:hover .nw-card__title a { color: var(--color-primary); }
.nw-card__excerpt { margin: 0 0 20px; line-height: 1.7; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 800 .8rem 'Montserrat', var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--color-navy); }
.nw-card__more .icon { width: 16px; height: 16px; stroke-width: 2.4; color: var(--color-primary); transition: translate .3s; }
.nw-card:hover .nw-card__more .icon { translate: 6px 0; }
.nw-card--wide { grid-column: span 2; flex-direction: row; }
.nw-card--full { grid-column: 1 / -1; flex-direction: row; }
.nw-card--wide .nw-card__media, .nw-card--full .nw-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 280px; }
.nw-card--wide .nw-card__body, .nw-card--full .nw-card__body { justify-content: center; padding: 32px 40px; }
.nw-card--full .nw-card__title { font-size: 1.5rem; }

/* ===== Bài viết ===== */
.nw-post-hero { padding-top: clamp(32px, 4vw, 56px); }
.nw-post-hero__head { max-width: 940px; margin-bottom: clamp(24px, 3vw, 36px); }
.nw-post-hero__title { margin: 0 0 18px; font: 800 clamp(1.8rem, 3.8vw, 3rem)/1.2 'Montserrat', var(--font-base); color: var(--color-navy); text-wrap: balance; }
.nw-meta { color: var(--color-muted); }
.nw-post-hero__media { position: relative; overflow: hidden; margin: 0; height: clamp(260px, 38vw, 560px); background: var(--color-line); box-shadow: 0 24px 50px rgba(11,31,58,.2); }
.nw-post-hero__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.nw-post-hero__media::after { /* khung ngắm 4 góc */
	content: ''; position: absolute; inset: 22px; pointer-events: none; --c: #fff; --l: 34px; --t: 3px; opacity: .85;
	background:
		linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
.nw-post { padding-block: clamp(40px, 5vw, 80px); }
.nw-post__grid { display: grid; grid-template-columns: 56px minmax(0, 760px) 340px; justify-content: center; gap: 48px; align-items: start; }
.nw-post__rail { position: sticky; top: calc(var(--header-h, 80px) + 28px); }
.nw-post__side { position: sticky; top: calc(var(--header-h, 80px) + 24px); display: grid; gap: 24px; }

.nw-share { display: flex; gap: 10px; }
.nw-share--rail { flex-direction: column; }
.nw-share__btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; color: var(--color-navy); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, translate .25s; }
.nw-share__btn .icon { width: 20px; height: 20px; }
.nw-share__btn:hover, .nw-share__btn:focus-visible { background: var(--color-primary); border-color: var(--color-primary); color: #fff; translate: 0 -3px; outline: none; }
.nw-share__btn.is-copied { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.nw-share__btn.is-copied::after { content: attr(data-done); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; padding: 6px 12px; background: var(--color-navy); color: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.nw-share--rail .nw-share__btn.is-copied::after { bottom: auto; left: calc(100% + 10px); top: 50%; translate: 0 -50%; }

/* Kiểu chữ bài viết */
.nw-content { font-size: 1.08rem; line-height: 1.9; color: #2b3345; overflow-wrap: break-word; }
.nw-content > :first-child { margin-top: 0; }
.nw-content > p:first-child { font-size: 1.25rem; font-weight: 500; line-height: 1.8; color: var(--color-navy); }
.nw-content p { margin: 0 0 1.4em; }
.nw-content strong { color: var(--color-navy); }
.nw-content a { color: var(--color-navy); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.nw-content a:hover { color: var(--color-primary); }
.nw-content h2, .nw-content h3 { scroll-margin-top: calc(var(--header-h, 80px) + 24px); color: var(--color-navy); font-family: 'Montserrat', var(--font-base); text-wrap: balance; }
.nw-content h2 { position: relative; margin: 2.2em 0 .8em; padding-left: 20px; font-size: 1.65rem; font-weight: 800; line-height: 1.3; }
.nw-content h2::before { content: ''; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; background: var(--color-primary); }
.nw-content h3 { margin: 1.8em 0 .6em; font-size: 1.3rem; font-weight: 700; line-height: 1.35; }
.nw-content ul, .nw-content ol { margin: 0 0 1.5em; padding: 0; list-style: none; counter-reset: nw-ol; }
.nw-content li { position: relative; margin-bottom: .6em; padding-left: 32px; }
.nw-content ul li::before { content: ''; position: absolute; left: 6px; top: .78em; width: 9px; height: 9px; background: var(--color-primary); rotate: 45deg; }
.nw-content ol li { counter-increment: nw-ol; }
.nw-content ol li::before { content: counter(nw-ol); position: absolute; left: 0; top: .28em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-navy); color: #fff; font: 700 .78rem 'Montserrat', var(--font-base); }
.nw-content blockquote { position: relative; margin: 2em 0; padding: 28px 32px 28px 78px; background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); font: 600 1.18rem/1.7 'Montserrat', var(--font-base); color: var(--color-navy); }
.nw-content blockquote::before { content: '\201C'; position: absolute; left: 20px; top: 6px; font: 800 5rem/1 'Montserrat', var(--font-base); color: var(--color-primary); }
.nw-content blockquote p { margin: 0; }
.nw-content figure { margin: 2em 0; }
.nw-content img { height: auto; }
.nw-content figcaption { margin-top: 10px; font-size: .88rem; text-align: center; color: var(--color-muted); }
.nw-content table { display: block; width: 100%; margin: 1.8em 0; overflow-x: auto; border-collapse: collapse; font-size: .98rem; line-height: 1.6; }
.nw-content th { padding: 14px 16px; background: var(--color-navy); color: #fff; font: 700 .85rem 'Montserrat', var(--font-base); text-align: left; letter-spacing: .04em; white-space: nowrap; }
.nw-content td { padding: 13px 16px; border-bottom: 1px solid var(--color-line); }
.nw-content tr:nth-child(even) td { background: var(--color-bg-alt); }

/* Cuối bài */
.nw-article__foot { display: grid; gap: 26px; margin-top: clamp(36px, 5vw, 56px); }
.nw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.nw-tags span { font-weight: 700; color: var(--color-navy); }
.nw-tags a { padding: 6px 14px; border: 1px solid var(--color-line); color: var(--color-navy); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; }
.nw-tags a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nw-sharebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; border-block: 1px solid var(--color-line); }
.nw-sharebar > span { font: 700 .85rem 'Montserrat', var(--font-base); letter-spacing: .1em; text-transform: uppercase; color: var(--color-navy); }
.nw-about { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; padding: 28px 30px; background: var(--color-bg-alt); border-left: 5px solid var(--color-primary); }
.nw-about > div { flex: 1 1 260px; }
.nw-about__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--color-navy); color: #fff; }
.nw-about__icon .icon { width: 28px; height: 28px; stroke-width: 1.7; }
.nw-about__title { margin: 0 0 6px; font: 800 1.1rem 'Montserrat', var(--font-base); color: var(--color-navy); }
.nw-about p { margin: 0; color: var(--color-muted); line-height: 1.6; font-size: .95rem; }

.nw-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(32px, 4vw, 48px); }
.nw-pager__tile { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 160px; background: var(--color-navy); color: #fff; text-decoration: none; }
.nw-pager__tile--next { grid-column: 2; text-align: right; }
.nw-pager__tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: scale .7s, opacity .4s; }
.nw-pager__tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,31,58,.92), rgba(11,31,58,.2)); }
.nw-pager__tile:hover img { scale: 1.08; opacity: .8; }
.nw-pager__text { padding: 22px 24px; font: 700 1rem/1.4 'Montserrat', var(--font-base); text-wrap: balance; }
.nw-pager__text small { display: block; margin-bottom: 6px; font: 700 .7rem 'Montserrat', var(--font-base); letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.nw-related .section-heading { margin-bottom: clamp(28px, 4vw, 44px); }

/* Mục lục: dính theo khi cuộn, mục đang đọc được đánh dấu */
.nw-toc { background: #fff; border: 1px solid var(--color-line); border-top: 4px solid var(--color-primary); box-shadow: 0 6px 24px rgba(11,31,58,.07); }
.nw-toc__title, .nw-toc summary { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 24px; font: 800 1rem 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .04em; color: var(--color-navy); }
.nw-toc__title .icon, .nw-toc summary .icon { width: 20px; height: 20px; color: var(--color-primary); }
.nw-toc__list { position: relative; max-height: 52vh; margin: 0 24px 20px; padding: 0 0 0 4px; overflow-y: auto; list-style: none; border-left: 2px solid var(--color-line); scrollbar-width: thin; }
.nw-toc__item a { position: relative; display: block; padding: 8px 10px 8px 16px; color: var(--color-muted); font-size: .92rem; line-height: 1.45; text-decoration: none; transition: color .25s, padding .25s; }
.nw-toc__item--3 a { padding-left: 30px; font-size: .86rem; }
.nw-toc__item a::before { content: ''; position: absolute; left: -6px; top: 0; bottom: 0; width: 2px; background: var(--color-primary); transform: scaleY(0); transition: transform .3s; }
.nw-toc__item a:hover { color: var(--color-navy); }
.nw-toc__item.is-active a { color: var(--color-navy); font-weight: 700; }
.nw-toc__item.is-active a::before { transform: scaleY(1); }
.nw-toc--inline { display: none; margin-bottom: 28px; }
.nw-toc--inline summary { cursor: pointer; list-style: none; }
.nw-toc--inline summary::-webkit-details-marker { display: none; }
.nw-toc--inline summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); rotate: 45deg; transition: rotate .3s; }
.nw-toc--inline[open] summary::after { rotate: 225deg; }

/* Trang 404 */
.nw-404 { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 88px); }
.nw-404::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -40px; width: min(900px, 120vw); aspect-ratio: 640 / 460; translate: -50% 0; background: var(--color-navy); opacity: .05; -webkit-mask: url("../images/blueprint.svg") center / contain no-repeat; mask: url("../images/blueprint.svg") center / contain no-repeat; }
.nw-404__box { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.nw-404__num { display: block; font: 800 clamp(7rem, 22vw, 15rem)/1 'Montserrat', var(--font-base); letter-spacing: .04em; background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-navy))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nw-404__title { margin: 8px 0 12px; font: 800 clamp(1.4rem, 3vw, 2.1rem)/1.3 'Montserrat', var(--font-base); color: var(--color-navy); text-wrap: balance; }
.nw-404__text { max-width: 56ch; margin: 0 auto 28px; color: var(--color-muted); line-height: 1.75; }
.nw-404__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.nw-404__links a { display: grid; justify-items: center; gap: 12px; padding: 26px 14px; background: #fff; border: 1px solid var(--color-line); border-bottom: 4px solid var(--color-primary); color: var(--color-navy); font: 700 .95rem 'Montserrat', var(--font-base); text-decoration: none; box-shadow: 0 6px 20px rgba(11,31,58,.06); transition: translate .3s, box-shadow .3s; }
.nw-404__links a span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-navy); color: #fff; transition: background-color .3s, rotate .5s; }
.nw-404__links a span .icon { width: 24px; height: 24px; }
.nw-404__links a:hover { translate: 0 -6px; box-shadow: 0 18px 36px rgba(11,31,58,.14); }
.nw-404__links a:hover span { background: var(--color-primary); rotate: 360deg; }

@media (max-width: 1280px) {
	.nw-post__grid { grid-template-columns: minmax(0, 760px) 320px; gap: 40px; }
	.nw-post__rail { display: none; }
}
@media (max-width: 1024px) {
	.nw-bar { grid-template-columns: minmax(0, 1fr); }
	.nw-top { grid-template-columns: 1fr; }
	.nw-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	.nw-card--wide, .nw-card--full { grid-column: span 2; }
	.nw-post__grid { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }
	.nw-post__side { position: static; }
	.nw-toc--side { display: none; }
	.nw-toc--inline { display: block; }
	.nw-post-hero__media { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
	.nw-lead { min-height: 420px; }
	.nw-lead::before { inset: 12px; --l: 22px; }
	.nw-lead__title { font-size: 1.45rem; }
	.nw-side { padding-inline: 20px; }
	.nw-side__item { grid-template-columns: 96px 1fr; gap: 14px; }
	.nw-search { width: 100%; }
	.nw-bar .proj-filter ul { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.nw-grid { grid-template-columns: 1fr; gap: 24px; }
	.nw-card--wide, .nw-card--full { grid-column: auto; flex-direction: column; }
	.nw-card--wide .nw-card__media, .nw-card--full .nw-card__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
		.nw-card--wide .nw-card__body, .nw-card--full .nw-card__body { justify-content: flex-start; padding: 24px 24px 26px; }
	.nw-card--full .nw-card__title { font-size: 1.2rem; }
	.nw-post-hero__media { height: auto; aspect-ratio: 4 / 3; }
	.nw-post-hero__media::after { inset: 12px; --l: 24px; }
	.nw-content { font-size: 1.02rem; line-height: 1.85; }
	.nw-content > p:first-child { font-size: 1.12rem; }
	.nw-content h2 { font-size: 1.4rem; }
	.nw-content blockquote { padding: 24px 22px 24px 58px; font-size: 1.05rem; }
	.nw-content blockquote::before { left: 14px; font-size: 4rem; }
	.nw-pager { grid-template-columns: 1fr; }
	.nw-pager__tile--next { grid-column: auto; }
	.nw-about { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.nw-lead__img, .nw-lead::before, .nw-lead__go, .nw-side__item, .nw-side__thumb img, .nw-card, .nw-card::after, .nw-card__img, .nw-card__more .icon,
	.nw-share__btn, .nw-pager__tile img, .nw-toc__item a, .nw-toc__item a::before, .nw-404__links a, .nw-404__links a span { transition: none; }
	.nw-post-hero__media img { top: 0; height: 100%; }
}

/* ===== Đoạn văn dài: căn đều hai bên =====
   Chỉ áp cho các đoạn nội dung dài (bài viết, dự án, dịch vụ, trang, giới thiệu). Dòng cuối đoạn vẫn căn trái; tiêu đề, trích dẫn,
   bảng và thẻ nhỏ giữ nguyên căn trái/giữa để không bị khoảng trắng loang giữa các từ. */
:is(.nw-content, .entry__content, .pj-content) :is(p, li) { text-align: justify; text-align-last: left; text-justify: inter-word; hyphens: manual; }
:is(.nw-content, .entry__content) :is(blockquote, td, th, figcaption, .wp-block-gallery) :is(p, li), .nw-content blockquote p { text-align: left; }
:is(.svc-single__lead, .ab-lead, .ab-text, .svc-row__text, .about__text, .pj-hero__lead, .nw-lead__excerpt, .cform__desc, .cta-band__text p) { text-align: justify; text-align-last: left; text-justify: inter-word; }
.nw-post-hero__head, .pj-hero__head { text-align: left; }
@media (max-width: 420px) {
	/* màn hình rất hẹp (~35 ký tự/dòng): căn đều dễ tạo khe hở lớn, trả về căn trái cho dễ đọc */
	:is(.nw-content, .entry__content, .pj-content) :is(p, li),
	:is(.svc-single__lead, .ab-lead, .ab-text, .svc-row__text, .about__text, .pj-hero__lead, .nw-lead__excerpt, .cform__desc, .cta-band__text p) { text-align: left; }
}


/* ===== Trang Chính sách & Văn bản pháp lý (page-policy.php) ===== */
.policy-page { padding-block: clamp(48px, 6vw, 90px); }
.policy-page__container { max-width: 1180px; }

/* Tiêu đề & meta văn bản */
.policy-header { margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: 24px; border-bottom: 1px solid var(--color-line); }
.policy-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; font-size: .88rem; color: var(--color-muted); }
.policy-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 4px; background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-navy); font: 700 .75rem 'Montserrat', var(--font-base); letter-spacing: .1em; text-transform: uppercase; }
.policy-doc-id { font-family: monospace; font-weight: 700; color: var(--color-navy); padding-inline: 8px; border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.policy-date, .policy-time { display: inline-flex; align-items: center; gap: 6px; }
.policy-date .icon, .policy-time .icon { width: 16px; height: 16px; color: var(--color-primary); }

.policy-title { margin: 0 0 10px; font: 800 clamp(1.8rem, 3.5vw, 2.6rem)/1.2 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .02em; color: var(--color-navy); text-wrap: balance; }
.policy-sub { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--color-primary); }
.policy-divider { display: block; width: 80px; height: 3px; margin-top: 18px; background: var(--color-primary); }

/* Bố cục 2 cột */
.policy-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }

.policy-sidebar { position: sticky; top: 110px; }
.policy-toc { background: #fff; border: 1px solid var(--color-line); border-top: 4px solid var(--color-primary); box-shadow: 0 8px 24px rgba(11,31,58,.06); }
.policy-toc .nw-toc__title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px; font: 700 .9rem 'Montserrat', var(--font-base); text-transform: uppercase; letter-spacing: .08em; color: var(--color-navy); border-bottom: 1px solid var(--color-line); }
.policy-toc .nw-toc__title .icon { width: 18px; height: 18px; color: var(--color-primary); }
.policy-toc .nw-toc__list { max-height: calc(100vh - 240px); overflow-y: auto; padding: 14px 18px 18px; margin: 0; }
.policy-toc .nw-toc__item a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid transparent; font-size: .88rem; color: var(--color-muted); text-decoration: none; transition: all .25s ease; }
.policy-toc .nw-toc__item a:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
.policy-toc .nw-toc__item.is-active a { color: var(--color-navy); font-weight: 700; border-left-color: var(--color-navy); }

/* Nội dung văn bản chính sách */
.policy-content { background: #fff; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--color-line); box-shadow: 0 8px 30px rgba(11,31,58,.04); }
.policy-lead { font-size: 1.08rem; line-height: 1.85; color: var(--color-navy); padding: 20px 24px; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-alt)); border-left: 4px solid var(--color-primary); margin-bottom: 36px; border-radius: 0 4px 4px 0; }

.policy-content h2 { margin: 2.2em 0 .8em; padding-bottom: 10px; font: 800 clamp(1.2rem, 2vw, 1.45rem)/1.3 'Montserrat', var(--font-base); color: var(--color-navy); text-transform: uppercase; letter-spacing: .02em; border-bottom: 2px solid color-mix(in srgb, var(--color-line) 80%, transparent); scroll-margin-top: 130px; }
.policy-content h2:first-of-type { margin-top: 0; }
.policy-content p { margin: 0 0 1.25em; line-height: 1.85; color: var(--color-text); }
.policy-content ul { margin: 0 0 1.5em; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.policy-content ul li { position: relative; padding-left: 28px; line-height: 1.75; color: var(--color-text); }
.policy-content ul li::before { content: ''; position: absolute; left: 8px; top: 11px; width: 6px; height: 6px; background: var(--color-primary); border-radius: 1px; }

/* Thẻ liên hệ bảo mật ở chân bài */
.policy-footer-card { margin-top: 48px; padding: 32px; background: var(--color-navy); color: #fff; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 24px; align-items: center; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.policy-footer-card__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, #fff 10%, transparent); border: 2px solid var(--color-primary); color: var(--color-primary); }
.policy-footer-card__icon .icon { width: 30px; height: 30px; }
.policy-footer-card__title { margin: 0 0 8px; font: 700 1.25rem 'Montserrat', var(--font-base); color: #fff; }
.policy-footer-card__desc { margin: 0 0 20px; font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.8); }
.policy-footer-card__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.policy-contact-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--color-primary); color: #fff; text-decoration: none; font: 700 .9rem 'Montserrat', var(--font-base); border-radius: 0; transition: all .25s ease; }
.policy-contact-btn .icon { width: 18px; height: 18px; }
.policy-contact-btn:hover { background: #fff; color: var(--color-navy); }
.policy-contact-btn--mail { background: transparent; border: 1px solid rgba(255,255,255,.3); }
.policy-contact-btn--mail:hover { background: rgba(255,255,255,.15); color: #fff; }

@media (max-width: 1024px) {
	.policy-grid { grid-template-columns: 1fr; }
	.policy-sidebar { position: static; }
	.policy-toc--side { display: none; }
	.policy-sidebar .nw-toc--inline { display: block; margin-bottom: 24px; }
}
@media (max-width: 640px) {
	.policy-footer-card { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
	.policy-footer-card__icon { width: 48px; height: 48px; }
	.policy-footer-card__icon .icon { width: 24px; height: 24px; }
}