/**
 * Header + footer — light showroom chrome
 */

.header,
.header-wrapper,
#header,
.header-main,
.header-bottom,
.header-top {
	background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
	border-color: var(--color-border);
	color: var(--color-text-primary);
}

.header-wrapper {
	border-bottom: 1px solid var(--color-border);
}

.nav > li > a,
.header-nav > li > a,
.header .nav-dropdown > li > a,
.header-button,
.header-cart-link,
.header-account-link,
.header-search-form a,
.header-button span {
	color: var(--color-text-primary);
}

/* Horizontal header only — keep brand accent on hover/active */
.header-nav > li > a:hover,
.header .header-nav > li.active > a,
.header .header-nav .current-menu-item > a,
.header-cart-link:hover,
.header-cart-link:focus,
.header-cart-link:hover .header-cart-title,
.header-cart-link:focus .header-cart-title,
.header-cart-link:hover .cart-price,
.header-cart-link:focus .cart-price,
.header-cart-link:hover i,
.header-cart-link:focus i {
	color: var(--color-accent);
}

.nav-dropdown,
.nav-dropdown.nav-dropdown-default,
.html .nav-dropdown {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: none;
	border-radius: var(--radius-small);
}

.nav-dropdown > li > a {
	color: var(--color-text-secondary);
}

.nav-dropdown > li > a:hover {
	color: var(--color-text-primary);
	background-color: var(--color-section-soft);
}

/* -------------------------------------------------------------------------
   Vertical menu fly-out interior (ruột) — neutrals only, easy to scan
   Opener keeps brand accent; panel + nested dropdowns stay gray/black/white.
   ------------------------------------------------------------------------- */

.header-vertical-menu__opener {
	color: var(--color-on-accent) !important;
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent);
}

.header-vertical-menu__opener i,
.header-vertical-menu__opener .icon-menu,
.header-vertical-menu__opener .icon-angle-down {
	color: inherit !important;
}

.header-vertical-menu__fly-out,
.header-vertical-menu__fly-out.dark,
.header-vertical-menu__fly-out.has-shadow {
	background-color: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	border: 1px solid var(--color-border);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.header-vertical-menu__fly-out .ux-nav-vertical-menu,
.header-vertical-menu__fly-out .nav-vertical-fly-out {
	background-color: var(--color-surface) !important;
}

.header-vertical-menu__fly-out .nav-vertical-fly-out > li + li,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item {
	border-top-color: var(--color-border) !important;
	border-color: var(--color-border);
}

/* Top-level rows inside fly-out */
.header-vertical-menu__fly-out a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a,
.header-vertical-menu__fly-out .nav-top-link,
.header-vertical-menu__fly-out .menu-item > a {
	color: var(--color-text-primary) !important;
	background-color: transparent !important;
}

.header-vertical-menu__fly-out a:hover,
.header-vertical-menu__fly-out a:focus,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a:hover,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a:focus,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item.active > a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item.current-dropdown > a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item.current-menu-item > a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a:hover,
.header-vertical-menu__fly-out .menu-item > a:hover {
	color: var(--color-text-primary) !important;
	background-color: var(--color-section-soft) !important;
}

.header-vertical-menu__fly-out i,
.header-vertical-menu__fly-out .icon-angle-down,
.header-vertical-menu__fly-out svg {
	color: var(--color-text-secondary) !important;
	fill: currentColor;
}

/* Nested mega / side dropdown (ruột cấp 2) */
.header-vertical-menu__fly-out .nav-dropdown,
.header-vertical-menu__fly-out .nav-dropdown.nav-dropdown-default,
.header-vertical-menu__fly-out .nav-dropdown.dark,
.header-vertical-menu__fly-out .html .nav-dropdown,
.header-vertical-menu__fly-out .current-dropdown .nav-dropdown {
	background-color: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.header-vertical-menu__fly-out .nav-dropdown a,
.header-vertical-menu__fly-out .nav-dropdown > li > a,
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li > a,
.header-vertical-menu__fly-out .nav-dropdown .menu-item > a,
.header-vertical-menu__fly-out .nav-dropdown .html,
.header-vertical-menu__fly-out .nav-dropdown .html a,
.header-vertical-menu__fly-out .nav-dropdown h1,
.header-vertical-menu__fly-out .nav-dropdown h2,
.header-vertical-menu__fly-out .nav-dropdown h3,
.header-vertical-menu__fly-out .nav-dropdown h4,
.header-vertical-menu__fly-out .nav-dropdown h5,
.header-vertical-menu__fly-out .nav-dropdown h6,
.header-vertical-menu__fly-out .nav-dropdown p,
.header-vertical-menu__fly-out .nav-dropdown span,
.header-vertical-menu__fly-out .nav-dropdown li {
	color: var(--color-text-primary) !important;
	background-color: transparent !important;
}

.header-vertical-menu__fly-out .nav-dropdown > li > a,
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li > a {
	color: var(--color-text-secondary) !important;
}

.header-vertical-menu__fly-out .nav-dropdown a:hover,
.header-vertical-menu__fly-out .nav-dropdown a:focus,
.header-vertical-menu__fly-out .nav-dropdown > li > a:hover,
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li > a:hover,
.header-vertical-menu__fly-out .nav-dropdown.nav-dropdown-bold > li > a:hover,
.header-vertical-menu__fly-out .nav-dropdown .menu-item > a:hover {
	color: var(--color-text-primary) !important;
	background-color: var(--color-section-soft) !important;
}

/* Kill accent / primary bleed inside fly-out */
.header-vertical-menu__fly-out .nav-line > li > a:before,
.header-vertical-menu__fly-out [class*="label-"] > a:after {
	background-color: var(--color-text-secondary) !important;
}

.header-vertical-menu__fly-out .button,
.header-vertical-menu__fly-out .button.primary {
	background-color: var(--color-section-soft) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text-primary) !important;
}

.header-vertical-menu__fly-out .button:hover,
.header-vertical-menu__fly-out .button.primary:hover {
	background-color: var(--color-text-primary) !important;
	border-color: var(--color-text-primary) !important;
	color: var(--color-on-accent) !important;
}

.header.has-sticky .header-wrapper,
.sticky .header-wrapper,
.stuck .header-wrapper {
	background-color: color-mix(in srgb, var(--color-background) 96%, transparent);
	backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------
   Header search — identical on every page (incl. Woo product / shop)
   Woo `.woocommerce button.button` otherwise overrides the secondary submit.
   ------------------------------------------------------------------------- */

.header .searchform-wrapper,
.header-search-form .searchform-wrapper,
.header-wrapper .searchform-wrapper {
	width: 100%;
}

.header .searchform .flex-row,
.header-search-form .searchform .flex-row,
.header-wrapper .searchform .flex-row {
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium); /* 8px — softer than default 4px */
	background-color: var(--color-surface);
}

.header .searchform .search-field,
.header-search-form .searchform .search-field,
.header-wrapper .searchform .search-field,
.woocommerce .header .searchform .search-field,
.woocommerce .header-wrapper .searchform .search-field,
.single-product .header .searchform .search-field {
	height: var(--button-min-height);
	min-height: var(--button-min-height);
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--color-text-primary);
	font-family: var(--font-main);
	font-size: 14px;
	line-height: 1.2;
}

.header .searchform .search-field:focus,
.header-search-form .searchform .search-field:focus,
.header-wrapper .searchform .search-field:focus,
.woocommerce .header .searchform .search-field:focus,
.single-product .header .searchform .search-field:focus {
	border: 0;
	outline: none;
	box-shadow: none;
}

.header .searchform .flex-row:focus-within,
.header-search-form .searchform .flex-row:focus-within,
.header-wrapper .searchform .flex-row:focus-within {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
}

.header .searchform .ux-search-submit,
.header .searchform .submit-button,
.header-search-form .searchform .ux-search-submit,
.header-wrapper .searchform .ux-search-submit,
.woocommerce .header .searchform .ux-search-submit,
.woocommerce .header .searchform button.button,
.woocommerce .header .searchform button.button.secondary,
.woocommerce .header .searchform button.button.icon,
.woocommerce .header-wrapper .searchform button.button,
.single-product .header .searchform button.button,
.single-product .header .searchform button.button.secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--button-min-height);
	min-height: var(--button-min-height);
	height: var(--button-min-height);
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--color-border);
	border-radius: 0 !important; /* Flatsome form-flat / Woo radius resets */
	background-color: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	box-shadow: none !important;
	opacity: 1;
	text-shadow: none;
}

.header .searchform .ux-search-submit:hover,
.header .searchform .ux-search-submit:focus,
.header .searchform .submit-button:hover,
.header .searchform .submit-button:focus,
.woocommerce .header .searchform button.button:hover,
.woocommerce .header .searchform button.button:focus,
.woocommerce .header .searchform button.button.secondary:hover,
.single-product .header .searchform button.button:hover,
.single-product .header .searchform button.button:focus {
	background-color: var(--color-section-soft) !important;
	border-color: var(--color-border);
	border-left-color: var(--color-border);
	color: var(--color-accent) !important;
	opacity: 1;
}

/* form-flat: keep same chrome, drop pill radius so pages match */
.header .searchform-wrapper.form-flat input:not([type="submit"]),
.header .searchform-wrapper.form-flat select,
.header .searchform-wrapper.form-flat button,
.header .searchform-wrapper.form-flat .submit-button,
.woocommerce .header .searchform-wrapper.form-flat button.button {
	border-radius: 0 !important;
	background-color: transparent;
	box-shadow: none;
}

.transparent .header-main {
	background-color: transparent;
}

.mfp-content.mobile-sidebar,
.off-canvas .nav-sidebar,
.mobile-sidebar {
	background-color: var(--color-surface);
	color: var(--color-text-secondary);
}

.mobile-sidebar a,
.off-canvas .nav > li > a {
	color: var(--color-text-primary);
}

.mobile-sidebar a:hover,
.mobile-sidebar a:focus,
.off-canvas .nav > li > a:hover,
.off-canvas .nav > li > a:focus,
.off-canvas .nav > li.active > a,
.off-canvas .nav > li.current-menu-item > a {
	color: var(--color-text-primary);
	background-color: var(--color-section-soft);
}

.footer-wrapper,
footer.footer-wrapper,
.absolute-footer,
#footer,
.footer-1,
.footer-2 {
	background-color: var(--color-section-soft);
	color: var(--color-text-secondary);
	border-color: var(--color-border);
}

.absolute-footer {
	background-color: var(--color-background);
	border-top: 1px solid var(--color-border);
}

.footer-wrapper a,
.absolute-footer a {
	color: var(--color-text-secondary);
}

.footer-wrapper a:hover,
.absolute-footer a:hover {
	color: var(--color-text-primary);
}

/* UX Menu chevrons — match perceived weight of link text */
.footer-wrapper .ux-menu-link__icon,
.footer-wrapper .ux-menu-link__icon::before {
	color: var(--color-text-primary);
}

.footer-wrapper .ux-menu-link:hover .ux-menu-link__icon,
.footer-wrapper .ux-menu-link:hover .ux-menu-link__icon::before {
	color: var(--color-text-primary);
}

.footer-wrapper h1,
.footer-wrapper h2,
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper .widget-title {
	color: var(--color-text-primary);
}

.footer-wrapper .widget ul li {
	border-color: var(--color-border);
}

/* -------------------------------------------------------------------------
   Header contact CTA — tech / precision hotline chip
   ------------------------------------------------------------------------- */

.osram-header-contact {
	display: flex;
	align-items: center;
	margin: 0;
	list-style: none;
}

.osram-header-contact__list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osram-header-contact__list > li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.osram-header-contact__list > li::before,
.osram-header-contact__list > li::after {
	display: none !important;
	content: none !important;
}

.osram-header-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background-color: var(--color-surface);
	color: var(--color-text-primary) !important;
	font-family: var(--font-main);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none !important;
	text-decoration: none !important;
	transition:
		background-color var(--transition-fast) ease,
		border-color var(--transition-fast) ease,
		color var(--transition-fast) ease,
		transform var(--transition-fast) ease;
}

.osram-header-contact__link--ghost:hover,
.osram-header-contact__link--ghost:focus {
	border-color: var(--color-accent);
	color: var(--color-accent) !important;
}

.osram-header-contact__cta {
	position: relative;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
	min-height: 48px;
	padding: 10px 22px !important;
	gap: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 4%, transparent);
	transition:
		border-color var(--transition-fast) ease,
		box-shadow var(--transition-fast) ease,
		transform var(--transition-fast) ease,
		color var(--transition-fast) ease;
}

/* Border-chase light: short dash travels along perimeter */
.osram-header-contact__border-light {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}

.osram-header-contact__border-light-path {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 14 86;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 3px var(--color-accent-muted));
	animation: osram-border-chase 2.6s linear infinite;
}

.osram-header-contact__cta > *:not(.osram-header-contact__border-light) {
	position: relative;
	z-index: 1;
}

.osram-header-contact__cta:hover,
.osram-header-contact__cta:focus {
	border-color: var(--color-accent-muted);
	background: var(--color-surface) !important;
	color: var(--color-text-primary) !important;
	box-shadow: 0 4px 16px var(--color-accent-muted);
	transform: translateY(-1px);
}

.osram-header-contact__cta:hover .osram-header-contact__border-light-path,
.osram-header-contact__cta:focus .osram-header-contact__border-light-path {
	stroke: var(--color-accent);
	filter: drop-shadow(0 0 4px var(--color-accent));
	animation-duration: 1.8s;
}

.osram-header-contact__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-accent);
	line-height: 0;
}

.osram-header-contact__cta-icon i,
.osram-header-contact__cta-icon svg {
	margin: 0 !important;
	color: inherit !important;
	fill: currentColor;
	font-size: 16px;
}

.osram-header-contact__cta-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.osram-header-contact__cta-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.osram-header-contact__cta-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	line-height: 1;
}

.osram-header-contact__pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-accent);
	box-shadow: 0 0 0 0 var(--color-accent-muted);
	animation: osram-contact-pulse 2.2s ease-out infinite;
}

.osram-header-contact__cta-number {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-primary);
	line-height: 1.15;
}

.osram-header-contact__cta-arrow {
	width: 6px;
	height: 6px;
	margin: 0;
	border-top: 1.5px solid var(--color-accent);
	border-right: 1.5px solid var(--color-accent);
	transform: rotate(45deg);
	transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.osram-header-contact__cta:hover .osram-header-contact__cta-arrow,
.osram-header-contact__cta:focus .osram-header-contact__cta-arrow {
	transform: rotate(45deg) translate(1px, -1px);
	border-color: var(--color-accent);
}

.osram-header-contact__cta:hover .osram-header-contact__cta-icon,
.osram-header-contact__cta:focus .osram-header-contact__cta-icon {
	background: none;
	border: 0;
	opacity: 1;
}

.osram-header-contact__mobile-trigger {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background: var(--color-surface) !important;
	color: var(--color-accent) !important;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 4%, transparent);
	overflow: hidden;
	transition:
		border-color var(--transition-fast) ease,
		transform var(--transition-fast) ease,
		box-shadow var(--transition-fast) ease;
}

.osram-header-contact__mobile-trigger .osram-header-contact__border-light {
	inset: 0;
}

.osram-header-contact__mobile-trigger:hover,
.osram-header-contact__mobile-trigger:focus {
	border-color: var(--color-accent-muted);
	box-shadow: 0 4px 12px var(--color-accent-muted);
	transform: translateY(-1px);
}

.osram-header-contact__mobile-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	line-height: 0;
}

.osram-header-contact__mobile-icon i {
	color: inherit !important;
	margin: 0 !important;
}

@keyframes osram-border-chase {
	to {
		stroke-dashoffset: -100;
	}
}

@keyframes osram-contact-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--color-accent-muted);
	}
	70% {
		box-shadow: 0 0 0 8px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

.osram-header-contact,
.osram-header-contact__list,
.osram-header-contact__cta-item {
	overflow: visible;
}

@media (max-width: 849px) {
	.osram-header-contact__cta {
		min-height: 44px;
		padding: 9px 18px !important;
	}

	.osram-header-contact__cta-arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.osram-header-contact__pulse {
		animation: none;
		box-shadow: none;
	}

	.osram-header-contact__border-light-path {
		animation: none;
		stroke-dasharray: none;
		opacity: 0.35;
	}
}