/* =========================================================================
   03 — HEADER  (site-wide)
   Glass sticky header on the existing Flatsome structure. Restyles surfaces,
   nav links, dropdowns, search and the auth CTAs — no markup changes.
   ========================================================================= */

/* Header surfaces → deep dark */
.header-wrapper,
.header-main {
	background-color: transparent;
}
.header:not(.has-sticky) .header-bg-color,
.header .header-bg-color.fill {
	background-color: var(--s67-bg-deep) !important;
}
.header-bottom {
	background-color: var(--s67-bg) !important;
	border-top: 1px solid var(--s67-border);
}

/* Sticky header → frosted glass */
.header.has-sticky.stuck .header-main,
.stuck .header-wrapper {
	background: linear-gradient(180deg, rgba(10, 10, 13, 0.92) 0%, rgba(10, 10, 13, 0.80) 100%) !important;
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--s67-border);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.stuck .header-bg-color { background-color: transparent !important; }

/* Logo subtle warmth */
.header_logo img,
.header-logo img {
	filter: drop-shadow(0 1px 6px rgba(244, 196, 48, 0.14));
	transition: filter var(--s67-dur-base) var(--s67-ease);
}

/* Top bar */
.top-bar,
.header-top {
	background-color: var(--s67-bg-deepest) !important;
	border-bottom: 1px solid var(--s67-border);
}
.top-bar a, .header-top a { color: var(--s67-text-muted) !important; }
.top-bar a:hover, .header-top a:hover { color: var(--s67-gold-100) !important; }

/* --- Main nav links --- */
.header-nav > li > a,
.nav > li > a {
	color: var(--s67-text) !important;
	font-weight: 600;
	transition: color var(--s67-dur-fast) var(--s67-ease);
}
.header-nav > li > a:hover,
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current-menu-item > a,
.nav > li.current-menu-parent > a {
	color: var(--s67-gold-300) !important;
}

/* Underline accent */
.nav-line-bottom > li > a::before,
.nav-line-grow > li > a::before,
.nav-line > li > a::before {
	background: var(--s67-grad-gold) !important;
	height: 2px !important;
}

/* Pill nav (bottom nav) active state */
.nav-pills > li.active > a,
.nav-pills > li.current-menu-item > a {
	background: var(--s67-grad-gold-soft) !important;
	color: var(--s67-gold-100) !important;
	border-radius: var(--s67-radius-pill);
}
.nav-pills > li > a:hover {
	background: var(--s67-bg-elev-2) !important;
	border-radius: var(--s67-radius-pill);
}

/* HOT / LIVE menu icons keep their punch */
.nav .icon-hot, .nav .icon-live { filter: saturate(1.15); }

/* --- Dropdown panels --- */
.nav-dropdown {
	background: var(--s67-bg-elev-1) !important;
	border: 1px solid var(--s67-border) !important;
	box-shadow: var(--s67-shadow-lg) !important;
	border-radius: var(--s67-radius-md) !important;
	padding: var(--s67-space-2) !important;
}
.nav-dropdown a {
	color: var(--s67-text) !important;
	border-radius: var(--s67-radius-sm);
	transition: background var(--s67-dur-fast) var(--s67-ease), color var(--s67-dur-fast) var(--s67-ease);
}
.nav-dropdown li > a:hover,
.nav-dropdown li.active > a {
	background: var(--s67-bg-elev-2) !important;
	color: var(--s67-gold-100) !important;
}
.nav-dropdown.nav-dropdown-has-arrow:before { border-bottom-color: var(--s67-bg-elev-1) !important; }

/* --- Search field --- */
.header .searchform input[type="search"],
.header-search-form input,
.header .search-form input {
	background: var(--s67-bg-elev-1) !important;
	color: var(--s67-text) !important;
	border: 1px solid var(--s67-border) !important;
	border-radius: var(--s67-radius-pill) !important;
}
.header .searchform input[type="search"]::placeholder { color: var(--s67-text-dim); }
.header .searchform input[type="search"]:focus {
	border-color: var(--s67-border-gold) !important;
	box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.12);
}

/* --- Auth CTAs --- */
.header-button .button {
	border-radius: var(--s67-radius-pill) !important;
	padding: 0 1.2em !important;
	font-weight: 700;
	border-width: 1px !important;
}
/* Đăng ký (primary) → gold filled, the hero CTA (shadow handled in 99). */
.header-button .button.primary {
	background-image: var(--s67-grad-gold) !important;
	background-color: var(--s67-gold-300) !important;
	color: var(--s67-text-on-gold) !important;
	border-color: transparent !important;
}
.header-button .button.primary:hover {
	transform: translateY(-1px);
	color: var(--s67-text-on-gold) !important;
}
/* Đăng nhập (alert) → refined ghost so the gold CTA leads */
.header-button .button.alert {
	background: transparent !important;
	background-image: none !important;
	color: var(--s67-text) !important;
	border-color: var(--s67-border-strong) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.header-button .button.alert:hover {
	border-color: var(--s67-border-gold) !important;
	color: var(--s67-gold-100) !important;
	background: rgba(244, 196, 48, 0.06) !important;
	transform: translateY(-1px);
}

/* =========================================================================
   Header standout — make the bar read as distinct from the dark page:
   a slightly elevated surface, a gold bottom seam + soft shadow below.
   ========================================================================= */
.header { box-shadow: none; }

/* Refined elevated surface + a faint glass highlight on the top edge (neutral). */
.header .header-bg-color.fill {
	background-image: linear-gradient(180deg, #14141d 0%, #0a0a0e 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* Menu row (bottom): a touch darker than the logo row, with a faint light
   hairline along the top to separate the two parts of the header.
   Bottom edge keeps the crisp gold gradient hairline (no blur/glow). */
.header-bottom {
	background-color: #0c0c12 !important;
	border-style: solid !important;
	border-width: 0 0 1px 0 !important;
	border-image: linear-gradient(90deg, transparent 0%, rgba(241, 194, 51, 0.42) 32%, rgba(248, 215, 90, 0.85) 50%, rgba(241, 194, 51, 0.42) 68%, transparent 100%) 1 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* On mobile the nav row is hidden — carry the hairline on the main row */
@media (max-width: 849px) {
	.header-main {
		border-style: solid !important;
		border-width: 0 0 1px 0 !important;
		border-image: linear-gradient(90deg, transparent, rgba(241, 194, 51, 0.6), transparent) 1 !important;
	}
}