/**
 * N2N-AFE — dark header/footer + full dark theme toggle.
 */

/* ── Semantic tokens (light content / dark chrome) ── */
body.n2n-site-modern {
	--n2n-chrome-bg: #0b1628;
	--n2n-chrome-bg-soft: rgba(11, 22, 40, 0.88);
	--n2n-chrome-border: rgba(255, 255, 255, 0.1);
	--n2n-chrome-text: rgba(255, 255, 255, 0.9);
	--n2n-chrome-muted: rgba(255, 255, 255, 0.72);
	--n2n-chrome-accent: #d4b84a;
	--n2n-footer-bg: #071a2e;
	--n2n-footer-bg-deep: #051220;
	--n2n-footer-heading: #ffffff;
	--n2n-footer-text: #e8eef5;
	--n2n-footer-link: #f8fafc;
	--n2n-footer-muted: #b8c5d6;
	--n2n-footer-border: rgba(255, 255, 255, 0.12);
}

/* ── Header: refined dark chrome ── */
body.n2n-site-modern #header {
	position: relative;
	z-index: 200;
}

body.n2n-site-modern .header-bg-container,
body.n2n-site-modern .header-bg-color,
body.n2n-site-modern .header-bg-image {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

body.n2n-site-modern #header,
body.n2n-site-modern .header,
body.n2n-site-modern .header-wrapper,
body.n2n-site-modern .header-main,
body.n2n-site-modern .header-top,
body.n2n-site-modern .header-bottom,
body.n2n-site-modern .wide-nav {
	background: var(--n2n-chrome-bg) !important;
	border-color: var(--n2n-chrome-border) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

body.n2n-site-modern .header-main {
	min-height: 76px;
	height: auto !important;
}

body.n2n-site-modern .header-inner {
	min-height: 76px;
	align-items: center;
}

body.n2n-site-modern .header .top-divider,
body.n2n-site-modern .header-main .top-divider {
	background: var(--n2n-chrome-border) !important;
	opacity: 1;
}

/* Logo zone */
body.n2n-site-modern #logo {
	position: relative;
	width: auto !important;
	max-width: 240px;
	flex: 0 0 auto !important;
	margin-right: 8px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

body.n2n-site-modern #logo a {
	display: block;
	line-height: 0;
}

body.n2n-site-modern #logo img {
	max-height: 46px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

body.n2n-site-modern #logo .header-logo-dark {
	display: none !important;
}

body.n2n-site-modern #logo .header_logo {
	display: block !important;
	filter: brightness(1.12) contrast(1.02);
}

/* Main navigation — modern pill style */
body.n2n-site-modern .header-nav-main.nav-uppercase > li > a,
body.n2n-site-modern .header-nav-main > li > a.nav-top-link {
	text-transform: none !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	padding: 10px 16px !important;
	border-radius: 999px;
	color: var(--n2n-chrome-muted) !important;
	transition: color 0.2s ease, background 0.2s ease;
}

body.n2n-site-modern .header .header-main .nav > li > a,
body.n2n-site-modern .header .header-main .nav-dark-color li a,
body.n2n-site-modern .header .header-main .nav > li > a.nav-top-link,
body.n2n-site-modern .header .nav > li > a,
body.n2n-site-modern .header .nav > li.html {
	color: var(--n2n-chrome-muted) !important;
}

body.n2n-site-modern .header-nav-main > li.active > a,
body.n2n-site-modern .header-nav-main > li.current-menu-item > a,
body.n2n-site-modern .header .header-main .nav-dark-color li a:hover,
body.n2n-site-modern .header .header-main .nav-dark-color li.active > a,
body.n2n-site-modern .header .nav > li.active > a,
body.n2n-site-modern .header .nav > li > a:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.1);
}

body.n2n-site-modern .header .header-main .nav-dark-color li.active > a::after,
body.n2n-site-modern .header-nav-main.nav-line-bottom > li > a:before,
body.n2n-site-modern .header-nav-main.nav-line-grow > li > a:before,
body.n2n-site-modern .header-nav-main.nav-line > li > a:before {
	display: none !important;
}

body.n2n-site-modern .header-nav-main > li > a .icon-angle-down {
	margin-left: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* CTA + search */
body.n2n-site-modern .header-button .button.primary {
	min-height: 42px;
	padding: 0 20px !important;
	border: 1px solid rgba(212, 184, 74, 0.45) !important;
	border-radius: 999px !important;
	background: rgba(212, 184, 74, 0.14) !important;
	color: #f8e8a8 !important;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none !important;
}

body.n2n-site-modern .header-button .button.primary:hover {
	background: rgba(212, 184, 74, 0.28) !important;
	color: #ffffff !important;
}

body.n2n-site-modern .header-search a,
body.n2n-site-modern .header .nav-icon,
body.n2n-site-modern .header button.nav-icon,
body.n2n-site-modern .header .icon-menu,
body.n2n-site-modern .header .icon-search {
	color: var(--n2n-chrome-text) !important;
}

body.n2n-site-modern .header-search > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
}

body.n2n-site-modern .header-search > a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
}

/* Dropdown */
body.n2n-site-modern .header .nav-dropdown {
	background: #101f33 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
	padding: 8px !important;
}

body.n2n-site-modern .header .nav-dropdown li a {
	padding: 10px 14px !important;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 14px;
}

body.n2n-site-modern .header .nav-dropdown li a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--n2n-chrome-accent) !important;
}

body.n2n-site-modern .header.stuck,
body.n2n-site-modern .header.transparent.stuck {
	background: rgba(11, 22, 40, 0.96) !important;
	backdrop-filter: blur(14px);
}

body.n2n-site-modern .header.stuck .header-main {
	min-height: 68px;
}

body.n2n-site-modern .header.stuck #logo img {
	max-height: 40px !important;
}

body.n2n-site-modern .stuck .header-main .nav > li > a {
	line-height: 1.2 !important;
}

/* ── Footer: UX Builder block (#footer.footer-wrapper) + widget rows ── */
body.n2n-site-modern #footer,
body.n2n-site-modern .footer-wrapper,
body.n2n-site-modern .footer,
body.n2n-site-modern .footer-widgets,
body.n2n-site-modern .footer-1,
body.n2n-site-modern .footer-2,
body.n2n-site-modern .absolute-footer {
	background: var(--n2n-footer-bg-deep) !important;
	color: var(--n2n-footer-text) !important;
	border-color: var(--n2n-footer-border) !important;
}

/* Remove old light background image from UX Builder footer section */
body.n2n-site-modern #footer .setion-footer,
body.n2n-site-modern #footer .section {
	background: var(--n2n-footer-bg) !important;
}

body.n2n-site-modern #footer .section-bg,
body.n2n-site-modern #footer .section-bg.bg-loaded,
body.n2n-site-modern #footer .section-bg.fill,
body.n2n-site-modern #footer .bg-fill {
	background-color: var(--n2n-footer-bg) !important;
	background-image: none !important;
}

body.n2n-site-modern #footer .section-content {
	position: relative;
	z-index: 2;
}

/* Headings */
body.n2n-site-modern #footer h1,
body.n2n-site-modern #footer h2,
body.n2n-site-modern #footer h3,
body.n2n-site-modern #footer h4,
body.n2n-site-modern #footer h5,
body.n2n-site-modern #footer h6,
body.n2n-site-modern #footer .col-info-footer h5,
body.n2n-site-modern #footer .widget-title,
body.n2n-site-modern .footer .widget-title {
	color: var(--n2n-footer-heading) !important;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Body text, lists, widgets */
body.n2n-site-modern #footer p,
body.n2n-site-modern #footer li,
body.n2n-site-modern #footer span,
body.n2n-site-modern #footer .text,
body.n2n-site-modern #footer .col-inner,
body.n2n-site-modern #footer .footer-widgets .widget,
body.n2n-site-modern #footer .footer-widget-contact p,
body.n2n-site-modern .footer p,
body.n2n-site-modern .footer .text {
	color: var(--n2n-footer-text) !important;
	font-size: 15px;
	line-height: 1.75;
}

/* Links */
body.n2n-site-modern #footer a:not(.button):not(.icon),
body.n2n-site-modern #footer #menu-gioi-thieu a,
body.n2n-site-modern #footer .footer-widget-contact a,
body.n2n-site-modern .footer a:not(.button):not(.icon),
body.n2n-site-modern #menu-gioi-thieu a {
	color: var(--n2n-footer-link) !important;
	text-decoration: none;
}

body.n2n-site-modern #footer a:not(.button):not(.icon):hover,
body.n2n-site-modern #footer #menu-gioi-thieu a:hover,
body.n2n-site-modern #footer .footer-widget-contact a:hover,
body.n2n-site-modern .footer a:not(.button):not(.icon):hover,
body.n2n-site-modern #menu-gioi-thieu a:hover {
	color: var(--n2n-chrome-accent) !important;
}

body.n2n-site-modern #footer #menu-gioi-thieu a {
	display: block;
	padding: 7px 0 7px 14px;
	font-size: 15px;
	font-weight: 500;
}

body.n2n-site-modern #footer #menu-gioi-thieu a::before {
	background: rgba(255, 255, 255, 0.55) !important;
	width: 6px;
	height: 2px;
}

body.n2n-site-modern #footer #menu-gioi-thieu a:hover::before {
	background: var(--n2n-chrome-accent) !important;
}

/* Copyright */
body.n2n-site-modern #footer .copyright-footer,
body.n2n-site-modern #footer .absolute-footer .copyright-footer,
body.n2n-site-modern .copyright-footer,
body.n2n-site-modern .copyright-footer a {
	color: var(--n2n-footer-muted) !important;
	font-size: 14px;
}

body.n2n-site-modern #footer .copyright-footer a:hover,
body.n2n-site-modern .copyright-footer a:hover {
	color: var(--n2n-chrome-accent) !important;
}

/* Footer logo — brighten if designed for light backgrounds */
body.n2n-site-modern #footer .img-inner img {
	filter: brightness(1.08) contrast(1.05);
}

/* Social icons */
body.n2n-site-modern #footer .social-icon-ft a,
body.n2n-site-modern #footer .follow-icons a.icon,
body.n2n-site-modern #footer .social-icons a,
body.n2n-site-modern .footer .social-icons a {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}

body.n2n-site-modern #footer .social-icon-ft a:hover,
body.n2n-site-modern #footer .follow-icons a.icon:hover,
body.n2n-site-modern #footer .social-icons a:hover,
body.n2n-site-modern .footer .social-icons a:hover {
	color: var(--n2n-footer-bg-deep) !important;
	background: var(--n2n-chrome-accent) !important;
	border-color: var(--n2n-chrome-accent) !important;
}

/* Hide duplicate Flatsome absolute footer (copyright already in UX block) */
body.n2n-site-modern #footer > .absolute-footer {
	display: none !important;
}

/* Top border accent */
body.n2n-site-modern #footer .setion-footer {
	border-top: 3px solid rgba(0, 78, 151, 0.65);
}

/* ── Theme toggle button ── */
body.n2n-site-modern .n2n-theme-toggle-item {
	display: flex;
	align-items: center;
	margin-left: 6px;
}

body.n2n-site-modern .n2n-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--n2n-chrome-text);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.n2n-site-modern .n2n-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
	transform: translateY(-1px);
}

body.n2n-site-modern .n2n-theme-toggle__sun,
body.n2n-site-modern .n2n-theme-toggle__moon {
	font-size: 15px;
	line-height: 1;
}

body.n2n-site-modern .n2n-theme-toggle__moon {
	display: none;
}

html.n2n-theme-dark body.n2n-site-modern .n2n-theme-toggle__sun,
body.n2n-site-modern.n2n-theme-dark .n2n-theme-toggle__sun {
	display: none;
}

html.n2n-theme-dark body.n2n-site-modern .n2n-theme-toggle__moon,
body.n2n-site-modern.n2n-theme-dark .n2n-theme-toggle__moon {
	display: inline-block;
}

/* ══════════════════════════════════════════
   Full dark theme (content area)
   ══════════════════════════════════════════ */

html.n2n-theme-dark body.n2n-site-modern,
body.n2n-site-modern.n2n-theme-dark {
	--n2n-bg: #0b1628;
	--n2n-card: #132238;
	--n2n-text: #e2e8f0;
	--n2n-muted: #94a3b8;
	--n2n-navy: #f1f5f9;
	--n2n-slate: #cbd5e1;
	--n2n-blue-soft: rgba(0, 102, 196, 0.18);
	--n2n-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	--n2n-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.45);
	color: var(--n2n-text);
	background: var(--n2n-bg);
}

html.n2n-theme-dark body.n2n-site-modern #main,
body.n2n-site-modern.n2n-theme-dark #main {
	background: var(--n2n-bg);
}

html.n2n-theme-dark body.n2n-site-modern .widget-title,
html.n2n-theme-dark body.n2n-site-modern .entry-title,
html.n2n-theme-dark body.n2n-site-modern .product-content h4,
body.n2n-site-modern.n2n-theme-dark .widget-title,
body.n2n-site-modern.n2n-theme-dark .entry-title,
body.n2n-site-modern.n2n-theme-dark .product-content h4 {
	color: var(--n2n-text);
}

html.n2n-theme-dark body.n2n-site-modern .product-list .item-product,
html.n2n-theme-dark body.n2n-site-modern .item-product,
html.n2n-theme-dark body.n2n-site-modern .blog-item,
html.n2n-theme-dark body.n2n-site-modern .product-item,
body.n2n-site-modern.n2n-theme-dark .product-list .item-product,
body.n2n-site-modern.n2n-theme-dark .item-product,
body.n2n-site-modern.n2n-theme-dark .blog-item,
body.n2n-site-modern.n2n-theme-dark .product-item {
	background: var(--n2n-card);
	border-color: rgba(255, 255, 255, 0.08);
}

html.n2n-theme-dark body.n2n-site-modern input[type="text"],
html.n2n-theme-dark body.n2n-site-modern input[type="email"],
html.n2n-theme-dark body.n2n-site-modern input[type="tel"],
html.n2n-theme-dark body.n2n-site-modern input[type="url"],
html.n2n-theme-dark body.n2n-site-modern textarea,
html.n2n-theme-dark body.n2n-site-modern select,
body.n2n-site-modern.n2n-theme-dark input[type="text"],
body.n2n-site-modern.n2n-theme-dark input[type="email"],
body.n2n-site-modern.n2n-theme-dark input[type="tel"],
body.n2n-site-modern.n2n-theme-dark input[type="url"],
body.n2n-site-modern.n2n-theme-dark textarea,
body.n2n-site-modern.n2n-theme-dark select {
	background: #0f1d32;
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--n2n-text);
}

/* Homepage dark sections */
html.n2n-theme-dark #n2n-home,
body.n2n-theme-dark #n2n-home {
	--n2n-bg: #0b1628;
	--n2n-text: #e2e8f0;
	--n2n-muted: #94a3b8;
	--n2n-navy: #f1f5f9;
	--n2n-blue-soft: rgba(0, 102, 196, 0.22);
	background: var(--n2n-bg);
}

html.n2n-theme-dark #n2n-home .n2n-products,
body.n2n-theme-dark #n2n-home .n2n-products {
	background: #0f1d32;
}

html.n2n-theme-dark #n2n-home .n2n-pillar-card,
html.n2n-theme-dark #n2n-home .n2n-timeline__card,
html.n2n-theme-dark #n2n-home .n2n-choose__quote,
html.n2n-theme-dark #n2n-home .n2n-stat-card,
body.n2n-theme-dark #n2n-home .n2n-pillar-card,
body.n2n-theme-dark #n2n-home .n2n-timeline__card,
body.n2n-theme-dark #n2n-home .n2n-choose__quote,
body.n2n-theme-dark #n2n-home .n2n-stat-card {
	background: #132238;
	border-color: rgba(255, 255, 255, 0.08);
}

html.n2n-theme-dark #n2n-home .n2n-section__head h2,
html.n2n-theme-dark #n2n-home .n2n-about__content h2,
html.n2n-theme-dark #n2n-home .n2n-choose__content h2,
html.n2n-theme-dark #n2n-home .n2n-pillar-card h3,
body.n2n-theme-dark #n2n-home .n2n-section__head h2,
body.n2n-theme-dark #n2n-home .n2n-about__content h2,
body.n2n-theme-dark #n2n-home .n2n-choose__content h2,
body.n2n-theme-dark #n2n-home .n2n-pillar-card h3 {
	color: var(--n2n-text);
}

html.n2n-theme-dark #n2n-home .product-item,
html.n2n-theme-dark #n2n-home .blog-item,
html.n2n-theme-dark #n2n-home .n2n-products .product-carousel .owl-nav button,
body.n2n-theme-dark #n2n-home .product-item,
body.n2n-theme-dark #n2n-home .blog-item,
body.n2n-theme-dark #n2n-home .n2n-products .product-carousel .owl-nav button {
	background: #132238 !important;
	box-shadow: var(--n2n-shadow);
	color: var(--n2n-text) !important;
}

html.n2n-theme-dark #n2n-home .n2n-partners__logo,
body.n2n-theme-dark #n2n-home .n2n-partners__logo {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Mobile off-canvas menu */
html.n2n-theme-dark body.n2n-site-modern .mfp-content .sidebar-menu,
html.n2n-theme-dark body.n2n-site-modern .mobile-sidebar,
body.n2n-site-modern.n2n-theme-dark .mfp-content .sidebar-menu,
body.n2n-site-modern.n2n-theme-dark .mobile-sidebar {
	background: #0a2540;
	color: var(--n2n-chrome-text);
}

@media (max-width: 849px) {
	body.n2n-site-modern .n2n-theme-toggle {
		width: 36px;
		height: 36px;
	}

	body.n2n-site-modern #logo {
		max-width: 180px;
		padding: 8px 10px;
	}

	body.n2n-site-modern #logo img {
		max-height: 38px !important;
	}

	body.n2n-site-modern .header-main,
	body.n2n-site-modern .header-inner {
		min-height: 64px;
	}

	body.home.n2n-site-modern #header .header-bg-color {
		background: rgba(8, 18, 32, 0.9) !important;
	}
}