/* Kha Dental header — bright, restrained, and aligned to the gold brand system. */
:root {
	--kha-header-gold: #a77a3a;
	--kha-header-gold-dark: #886126;
	--kha-header-ink: #2e2b27;
	--kha-header-muted: #7b756d;
	--kha-header-line: #ece4d8;
	--kha-header-soft: #faf8f4;
}

.site-header {
	position: relative;
	z-index: 9000;
	background: #fff;
	border-top: 2px solid var(--kha-header-gold);
	box-shadow: none;
	transition: transform .3s ease, box-shadow .3s ease;
}
.site-header .nevo-section-inner { background: #fff; }
.site-header .desktop-header .bottom-header .nevo-section-inner,
.site-header .desktop-header .bottom-header .nevo-section-inner::before {
	background: transparent !important;
}
.site-header .desktop-header .main-header { height: 94px; }
.site-header .desktop-header .main-header .inside-header {
	display: grid;
	grid-template-columns: minmax(200px, .7fr) minmax(420px, 1.6fr) minmax(260px, .8fr);
	gap: clamp(24px, 3vw, 52px);
	width: 100%;
	max-width: 1380px !important;
	margin-inline: auto;
	padding: 0 36px !important;
}
.site-header .desktop-header .main-header .header-col { min-width: 0; }
.site-header .desktop-header .main-header .col-start,
.site-header .desktop-header .main-header .col-end { flex: none; }
.site-header .desktop-header .main-header .col-center { width: 100%; }
.site-header .site-logo,
.site-header .site-logo a { display: inline-flex; align-items: center; }
.site-header .desktop-header .site-logo img {
	display: block;
	width: auto;
	max-width: 240px;
	max-height: 64px;
	transition: max-height .25s ease, max-width .25s ease;
}

/* Desktop search: dropped from the top bar in favour of direct contact info
   (see .kha-header-contact below) — still reachable from the mobile drawer. */
.site-header .desktop-header .main-header .header-search { display: none !important; }

/* Contact info bar: phone / email / address, injected by header-contact.js
   since the theme's header builder only offers search/button/language slots
   here, not a plain contact-info block. */
.site-header .desktop-header .main-header .col-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.kha-header-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2vw, 30px);
	width: 100%;
}
.kha-header-contact__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	color: var(--kha-header-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}
a.kha-header-contact__item:hover { color: var(--kha-header-gold-dark); }
.kha-header-contact__item--address {
	flex: 0 0 auto;
	white-space: nowrap;
}
.kha-header-contact__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--kha-header-soft);
	color: var(--kha-header-gold);
}
.kha-header-contact__icon svg { width: 16px; height: 16px; }
.kha-header-contact__text { overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1200px) and (max-width: 1380px) {
	.kha-header-contact__item--address { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.kha-header-contact__item--address,
	.kha-header-contact__item--email { display: none; }
}

/* Appointment and language controls */
.site-header .desktop-header .header-button .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 19px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
	background: var(--kha-header-gold);
	border: 1px solid var(--kha-header-gold);
	border-radius: 6px !important;
	box-shadow: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.site-header .desktop-header .header-button .button:hover {
	color: #fff;
	background: var(--kha-header-gold-dark);
	border-color: var(--kha-header-gold-dark);
	box-shadow: none;
	transform: translateY(-1px);
}
.site-header .desktop-header .header-button .button svg,
.site-header .desktop-header .header-button .button svg path { color: #fff; fill: currentColor; }
.site-header .desktop-header .header-button .button:active { transform: translateY(0) scale(.98); }
.site-header .khal-switcher--desktop { margin-left: 10px; }
.site-header .khal-btn {
	height: 44px;
	padding: 0 12px;
	color: var(--kha-header-gold);
	background: #fff;
	border: 1px solid rgba(167,122,58,.55);
	border-radius: 6px;
	box-shadow: none;
}
.site-header .khal-btn:hover,
.site-header .khal-switcher.is-open .khal-btn { color: #fff; background: var(--kha-header-gold); border-color: var(--kha-header-gold); }
.site-header .khal-btn:hover svg,
.site-header .khal-switcher.is-open .khal-btn svg { color: #fff; stroke: currentColor; }
.site-header .khal-menu {
	top: calc(100% + 10px);
	padding: 6px;
	background: #fff;
	border: 1px solid var(--kha-header-line);
	border-top: 2px solid var(--kha-header-gold);
	border-radius: 0 0 7px 7px;
	box-shadow: 0 16px 35px rgba(71,50,25,.12);
}
.site-header .khal-menu a { border-radius: 4px; }
.site-header .khal-menu a:hover,
.site-header .khal-menu a.is-active { color: var(--kha-header-gold-dark); background: var(--kha-header-soft); }
.site-header .khal-code { border-radius: 3px; background: var(--kha-header-gold); }

/* Main navigation: solid gold band, matching the reference layout, instead
   of a plain white bar. */
.site-header .desktop-header .bottom-header {
	height: 54px;
	background: linear-gradient(108deg, #74501f 0%, #a97834 36%, #d8ad58 68%, #8a5d24 100%);
	border-top: 0;
	border-bottom: 0;
}
.site-header .desktop-header .bottom-header .inside-header {
	width: 100%;
	max-width: 1380px !important;
	margin-inline: auto;
	padding: 0 36px !important;
}
.site-header .bottom-header .header-col.col-center { width: 100%; }
.site-header .nevo-nav-menu.menu-primary {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	margin: 0;
	flex-wrap: nowrap;
}
.site-header .menu-primary > li { display: flex; align-items: stretch; margin: 0; padding: 0; }
.site-header .menu-primary > li > a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s ease;
}
.site-header .menu-primary > li > a::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.site-header .menu-primary > li:hover > a,
.site-header .menu-primary > li:focus-within > a,
.site-header .menu-primary > li.current-menu-item > a,
.site-header .menu-primary > li.current-menu-ancestor > a { color: #fff9ec; }
.site-header .menu-primary > li:hover > a::after,
.site-header .menu-primary > li:focus-within > a::after,
.site-header .menu-primary > li.current-menu-item > a::after,
.site-header .menu-primary > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.site-header .menu-primary > li > a .nevo-icon { color: rgba(255,255,255,.8); }
.site-header .menu-primary > li > a svg { width: 12px; height: 12px; }
.site-header .desktop-header .header-button .button:focus-visible,
.site-header .khal-btn:focus-visible {
	outline: 2px solid var(--kha-header-gold);
	outline-offset: 3px;
}
.site-header .menu-primary > li > a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* Dropdowns */
.site-header .menu-primary .sub-menu {
	min-width: 245px;
	padding: 7px 0;
	overflow: visible;
	background: #fff;
	border: 1px solid var(--kha-header-line);
	border-top: 2px solid var(--kha-header-gold);
	border-radius: 0 0 7px 7px;
	box-shadow: 0 18px 40px rgba(64,45,22,.13);
}
.site-header .menu-primary > li:nth-last-child(2) > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(245px, 1fr));
	width: 510px;
	max-height: min(70vh, 650px);
	overflow-y: auto;
	overflow-x: hidden;
	/* "Bảng Giá" sits near the right end of the nav at every width the
	   desktop bar is shown at, not just the narrow 992–1199px band this was
	   previously scoped to — a left-aligned 510px-wide dropdown from there
	   runs off the right edge of the viewport. Open it leftward instead. */
	right: 0;
	left: auto;
}
.site-header .menu-primary .sub-menu li { margin: 0; }
.site-header .menu-primary .sub-menu a {
	min-height: 42px;
	padding: 10px 20px;
	color: var(--kha-header-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	border-bottom: 1px solid #f3eee7;
	transition: color .18s ease, background .18s ease;
}
.site-header .menu-primary .sub-menu li:last-child > a { border-bottom: 0; }
.site-header .menu-primary .sub-menu li:hover > a,
.site-header .menu-primary .sub-menu li:focus-within > a { padding-left: 20px; color: var(--kha-header-gold-dark); background: var(--kha-header-soft); }
.site-header .menu-primary .sub-menu .nevo-icon { color: var(--kha-header-gold); }
.site-header .menu-primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0,0,0);
}

/* Sticky state */
.site-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 10px 30px rgba(68,49,25,.1);
	animation: none;
}
.site-header.is-stuck .desktop-header .main-header { height: 74px; }
.site-header.is-stuck .desktop-header .site-logo img { max-width: 190px; max-height: 50px; }
.site-header.is-stuck .desktop-header .bottom-header { height: 48px; }
.site-header.is-stuck .menu-primary > li > a { padding-top: 0; padding-bottom: 0; }
.site-header.is-stuck.is-hidden { box-shadow: none; transform: translateY(-110%); }
body.admin-bar .site-header.is-stuck { top: 32px; }

/* Mobile header and drawer */
@media (max-width: 991px) {
	.site-header { border-top-width: 2px; }
	.site-header .mobile-header .main-header { height: 78px; }
	.site-header .mobile-header .main-header .inside-header {
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		width: 100%;
		padding: 0 18px !important;
	}
	.site-header .mobile-header .header-col { min-width: 0; margin: 0; }
	.site-header .mobile-header .col-start { justify-self: start; }
	.site-header .mobile-header .col-center { justify-self: center; }
	.site-header .mobile-header .col-end { justify-self: end; }
	.site-header .mobile-header .site-logo img { width: auto; max-width: 178px; max-height: 48px; }
	.site-header .mobile-header .menu-toggle {
		/* The theme's own .d-flex utility class on this button carries
		   !important (display:flex !important), which silently wins over a
		   plain display:grid here — leaving justify-content at its flex
		   default (start) instead of centered, so the icon hugs the left
		   edge of the box instead of sitting in the middle. Match the flex
		   display it actually ends up with and center explicitly. */
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		color: var(--kha-header-ink);
		background: var(--kha-header-soft);
		border: 1px solid var(--kha-header-line);
		border-radius: 5px;
		transition: color .2s ease, border-color .2s ease, background .2s ease;
	}
	.site-header .mobile-header .menu-toggle:hover,
	.site-header .mobile-header .menu-toggle:focus-visible { color: var(--kha-header-gold-dark); background: #fff; border-color: var(--kha-header-gold); }
	.site-header .mobile-header .menu-toggle svg { width: 19px; height: 19px; }
	.site-header .khal-switcher--mobile { right: 18px; }
	.site-header .khal-switcher--mobile .khal-btn { height: 40px; padding: 0 10px; }
	.site-header.is-stuck .mobile-header .main-header { height: 68px; }
	.site-header.is-stuck .mobile-header .site-logo img { max-height: 42px; }

	.nevo-vertical-header .popup-body { width: min(88vw, 390px); background: #fff; }
	.nevo-vertical-header .popup-header { min-height: 72px; padding: 0 22px; border-bottom: 1px solid var(--kha-header-line); }
	.nevo-vertical-header .popup-title { color: var(--kha-header-ink); font-size: 21px; font-weight: 600; }
	.nevo-vertical-header .button-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--kha-header-ink); background: var(--kha-header-soft); border-radius: 5px; }
	.nevo-vertical-header .popup-content { padding: 22px; }
	.nevo-vertical-header .header-search .search-form { height: 48px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--kha-header-line); border-radius: 6px; box-shadow: none; }
	.nevo-vertical-header .header-search .search-field { height: 46px; padding-left: 15px; background: #fff; border: 0; }
	.nevo-vertical-header .header-search button.search-submit { top: 0; right: 0; bottom: auto; display: grid; place-items: center; width: 48px; height: 46px; padding: 0; color: #fff; background: var(--kha-header-gold); border: 0; border-radius: 0 5px 5px 0 !important; transform: none; }
	.nevo-vertical-header .header-search button.search-submit,
	.nevo-vertical-header .header-search button.search-submit:hover,
	.nevo-vertical-header .header-search button.search-submit:focus { color: #fff !important; background: var(--kha-header-gold) !important; }
	.nevo-vertical-header .header-search button.search-submit .nevo-icon,
	.nevo-vertical-header .header-search button.search-submit svg,
	.nevo-vertical-header .header-search button.search-submit svg path { color: #fff !important; fill: #fff !important; opacity: 1 !important; visibility: visible !important; }
	.nevo-vertical-header .menu-mobile { margin: 0; }
	.nevo-vertical-header .menu-mobile > li { border-top: 0; border-bottom: 1px solid var(--kha-header-line); }
	.nevo-vertical-header .menu-mobile li > a { min-height: 50px; padding: 13px 4px; color: var(--kha-header-ink); font-size: 15px; font-weight: 550; }
	.nevo-vertical-header .menu-mobile .nevo-toggle { width: 44px; height: 44px; padding: 0; color: var(--kha-header-gold-dark); background: transparent; border: 0; }
	.nevo-vertical-header .menu-mobile .sub-menu { width: 100%; padding-bottom: 8px; background: var(--kha-header-soft); }
	.nevo-vertical-header .menu-mobile .sub-menu li { margin-left: 14px; border-top: 1px solid var(--kha-header-line); }
	.nevo-vertical-header .menu-mobile .sub-menu a { min-height: 44px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; }
}

@media (max-width: 420px) {
	.site-header .mobile-header .main-header .inside-header { padding-inline: 14px !important; }
	.site-header .mobile-header .site-logo img { max-width: 158px; }
	.site-header .khal-switcher--mobile { right: 14px; }
	.site-header .khal-switcher--mobile .khal-globe { display: none; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.site-header .desktop-header .main-header .inside-header {
		grid-template-columns: minmax(190px, .8fr) minmax(300px, 1.2fr) minmax(250px, .8fr);
		gap: 20px;
		padding-inline: 26px !important;
	}
	.site-header .desktop-header .site-logo img { max-width: 205px; }
	.site-header .desktop-header .bottom-header .inside-header { padding-inline: 26px !important; }
	.site-header .menu-primary > li > a { padding-inline: 6px; font-size: 13px; }
	.site-header .desktop-header .header-button .button { padding-inline: 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header *, .nevo-vertical-header, .nevo-vertical-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}