/**
 * CuuHo Giao Thong Phu Tho – Design system
 * Palette: Navy + Amber (chuyên nghiệp, dễ nhìn, không chói)
 */

:root {
	--cuuho-navy: #0B2D4A;
	--cuuho-navy-light: #134067;
	--cuuho-amber: #F5A623;
	--cuuho-amber-hover: #E09210;
	--cuuho-amber-soft: #FFF8EB;
	--cuuho-surface: #F4F7FA;
	--cuuho-white: #FFFFFF;
	--cuuho-text: #1A2B3C;
	--cuuho-muted: #5A7184;
	--cuuho-border: #E2EAF0;
	--cuuho-shadow: 0 4px 24px rgba(11, 45, 74, 0.08);
	--cuuho-shadow-hover: 0 12px 40px rgba(11, 45, 74, 0.14);
	--cuuho-radius: 16px;
	--cuuho-radius-sm: 10px;

	--lh-primary: var(--cuuho-amber);
	--lh-primary-hover: var(--cuuho-amber-hover);
	--lh-dark: var(--cuuho-navy);
}

/* ── Flatsome primary override ── */
.button.primary:not(.is-outline),
.button.alt:not(.is-outline),
input[type="submit"],
.submit-button {
	background-color: var(--cuuho-amber) !important;
	border-color: var(--cuuho-amber) !important;
	color: var(--cuuho-navy) !important;
	font-weight: 700 !important;
}
.button.primary:not(.is-outline):hover,
.button.alt:not(.is-outline):hover {
	background-color: var(--cuuho-amber-hover) !important;
	border-color: var(--cuuho-amber-hover) !important;
}
.button.is-outline,
.button.primary.is-outline {
	border-color: var(--cuuho-navy) !important;
	color: var(--cuuho-navy) !important;
}
.button.is-outline:hover {
	background-color: var(--cuuho-navy) !important;
	color: #fff !important;
}

.header-main { background-color: var(--cuuho-white) !important; }
.header-nav > li > a { color: var(--cuuho-text) !important; font-weight: 600; }
.header-nav > li.active > a,
.header-nav > li > a:hover { color: var(--cuuho-navy) !important; }

/* ── Section headings ── */
.cuuho-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}
.cuuho-section-head .cuuho-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cuuho-amber);
	background: var(--cuuho-amber-soft);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.cuuho-section-head h2 {
	color: var(--cuuho-navy) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	margin-bottom: 10px !important;
	line-height: 1.25 !important;
}
.cuuho-section-head p {
	color: var(--cuuho-muted);
	font-size: 1.05rem;
	margin: 0;
}

/* ── Hero ── */
.cuuho-hero .banner-bg,
.cuuho-hero .ux-banner-bg {
	background: linear-gradient(135deg, var(--cuuho-navy) 0%, var(--cuuho-navy-light) 50%, #1a5080 100%) !important;
}
.cuuho-hero .banner-bg img { opacity: 0.15 !important; }
.cuuho-hero .text-box {
	padding: 48px 40px !important;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cuuho-radius);
}
.cuuho-hero h1 {
	font-size: clamp(1.75rem, 4vw, 2.6rem) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	margin-bottom: 16px !important;
}
.cuuho-hero .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cuuho-amber);
	color: var(--cuuho-navy);
	font-weight: 800;
	font-size: 0.8rem;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
	letter-spacing: 0.04em;
}
.cuuho-hero .hero-desc {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 1.1rem;
	line-height: 1.7;
	margin-bottom: 28px !important;
}
.cuuho-hero .hero-btns .button {
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: var(--cuuho-radius-sm) !important;
	padding: 14px 28px !important;
	font-size: 0.95rem !important;
}
.cuuho-hero .hero-btns .button.white.is-outline {
	border-color: rgba(255,255,255,0.6) !important;
	color: #fff !important;
}
.cuuho-hero .hero-btns .button.white.is-outline:hover {
	background: rgba(255,255,255,0.15) !important;
}

/* ── Service cards ── */
.cuuho-services { background: var(--cuuho-surface) !important; }
/* ── Hide broken old UX images ── */
.cuuho-svc-card .ux-image-box img,
.cuuho-svc-card .image-wrap { display: none !important; }
.cuuho-stats .stat-box {
	background: var(--cuuho-white);
	border: 1px solid var(--cuuho-border);
	border-radius: var(--cuuho-radius);
	padding: 28px 16px;
	text-align: center;
	transition: box-shadow 0.2s ease;
}
.cuuho-stats .stat-box:hover {
	box-shadow: var(--cuuho-shadow);
}
.cuuho-stats .stat-num {
	font-size: 2rem;
	font-weight: 800;
	color: var(--cuuho-amber);
	line-height: 1;
	margin-bottom: 6px;
}
.cuuho-stats .stat-label {
	color: var(--cuuho-muted);
	font-size: 0.88rem;
	font-weight: 600;
}

/* ── About block ── */
.cuuho-about h3 {
	color: var(--cuuho-navy) !important;
	font-size: 1.5rem !important;
	font-weight: 800 !important;
}
.cuuho-about .about-tag {
	color: var(--cuuho-amber);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}
.cuuho-about p { color: var(--cuuho-muted); line-height: 1.75; }

/* ── Why us ── */
.cuuho-why .why-item {
	text-align: center;
	padding: 32px 24px;
}
.cuuho-why .why-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--cuuho-amber-soft);
	border: 2px solid rgba(245, 166, 35, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
}
.cuuho-why h4 {
	color: var(--cuuho-navy) !important;
	font-weight: 700 !important;
	margin-bottom: 8px !important;
}
.cuuho-why p { color: var(--cuuho-muted); font-size: 0.92rem; }

/* ── Area map section ── */
.cuuho-area {
	background: var(--cuuho-white) !important;
}
.cuuho-area-box {
	background: linear-gradient(135deg, var(--cuuho-navy), var(--cuuho-navy-light));
	border-radius: var(--cuuho-radius);
	padding: 40px 36px;
	color: #fff;
	text-align: center;
}
.cuuho-area-box h2 { color: #fff !important; margin-bottom: 12px !important; }
.cuuho-area-box p { color: rgba(255,255,255,0.85); margin-bottom: 24px; }

/* ── CTA bottom ── */
.cuuho-cta {
	background: linear-gradient(135deg, var(--cuuho-navy) 0%, #0a2540 100%) !important;
}
.cuuho-cta h2 { color: #fff !important; }
.cuuho-cta p { color: rgba(255,255,255,0.8) !important; }

/* ── Inner pages (simple header, not full banner heroes) ── */
.page .entry-header h1 {
	color: var(--cuuho-navy) !important;
}
.cuuho-page-hero:not(.cuuho-about-page-hero):not(.cuuho-svc-page-hero):not(.cuuho-contact-page-hero):not(.cuuho-pricing-page-hero) h1 {
	color: var(--cuuho-navy) !important;
}
.cuuho-page-hero:not(.cuuho-about-page-hero):not(.cuuho-svc-page-hero):not(.cuuho-contact-page-hero):not(.cuuho-pricing-page-hero) {
	background: var(--cuuho-surface);
	border-bottom: 3px solid var(--cuuho-amber);
	padding: 48px 0 32px;
	margin-bottom: 0;
}

/* ── Footer ── */
.footer-wrapper { background: var(--cuuho-navy) !important; }
.absolute-footer { display: none !important; }
.footer-1, .footer-2 { color: rgba(255,255,255,0.85); text-align: left !important; }
.footer-1 .cuuho-footer { text-align: left; width: 100%; }
.footer-1 > .row > .col,
.footer-2 > .row > .col {
	flex-basis: 100% !important;
	max-width: 100% !important;
}
.footer a { color: rgba(255,255,255,0.9) !important; }
.footer a:hover { color: var(--cuuho-amber) !important; }

/* ── Smooth scroll sections ── */
.section { scroll-margin-top: 80px; }

/* ── Hide broken old images in service cards ── */
.cuuho-svc-card .ux-image-box img,
.cuuho-svc-card .image-wrap { display: none !important; }

@media (max-width: 849px) {
	.cuuho-hero .text-box { padding: 32px 24px !important; }
	.cuuho-svc-card { margin-bottom: 16px; }
}