/* =============================================================
 * HEADER — Tokenized to design contract.
 * Markup không đổi. Visual giữ nguyên cơ bản; radius + transition
 * được tăng cường nhẹ. Setago brand colors khai báo local ở :root.
 * ============================================================= */

:root {
	--setago-orange: #EB6528;
	--setago-cream:  #ffffff;
	--setago-ink:    #1a1a1a;
}

/** menu toggle button **/

.toggle-nav, .icon-bar {
	width: 24px;
	flex-direction: column;
	height: 20px;
	justify-content: space-between;
	border-radius: var(--radius-xs);
}

.toggle-nav .bar, .icon-bar .bar {
	height: 3px;
	background: var(--color-neutral-800);
	width: 24px;
	border-radius: var(--radius-xs);
}

.toggle-nav .bar:nth-child(2), .icon-bar .bar:nth-child(2) {
	width: 86% !important;
}

.icon-bar {
	cursor: auto !important;
}

.icon-bar .bar {
	background: var(--color-text);
	height: 2px;
}

.icon-bar .bar:nth-child(2) {
	width: 20px;
}

/** end menu toggle button **/

/** mid header **/
.mid-header {
	background: var(--header-background);
	padding: var(--space-2) 0;
}

.mid-header .logo-wrapper {
	max-width: 248px;
	display: block;
}
.mid-header .toggle-nav {
	width: 24px;
	flex-direction: column;
	height: 20px;
	justify-content: space-between;
	border-radius: var(--radius-xs);
}

.mid-header .toggle-nav .bar {
	height: 3px;
	background: var(--color-primary);
	width: 24px;
	border-radius: var(--radius-xs);
}

.mid-header .toggle-nav .bar:nth-child(2) {
	width: 75%;
}

@media (max-width:992px) {
	.mid-header .logo-wrapper {
		margin: auto;
	}
}

/** end mid header **/

/** header right **/
.header-right {
	font-size: var(--font-size-sm);
}

.header-right .fas {
	font-size: var(--font-size-2xl);
}

.header-right a {
	color: var(--header-color);
}

.header-right a:hover {
	text-decoration: none;
}

/** end header right **/

/** mini cart **/
.mini-cart .no-item {
	text-align: center;
}

.mini-cart .no-item p {
	margin: 0 auto;
}

.mini-cart > a {
	position: relative;
}

/* Count badge: flex-centred so the digit always sits dead-centre, and a
   min-width + padding so a 2-digit count grows into a pill instead of
   overflowing the circle. */
.mini-cart > a .count_item {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--setago-orange);
	border-radius: var(--radius-pill);
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	color: var(--color-text-inverse);
	font-size: 10px;
	line-height: 1;
	top: -6px;
	right: -8px;
}

/* Mini-cart dropdown popup */
.mini-cart .top-cart-content {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

/** end mini-cart **/


/** search **/

#search-header .custom-input-group {
	z-index: var(--z-dropdown);
}

#search-header .custom-input-group .input-group-field {
	background: var(--color-neutral-200);
	border-radius: var(--radius-pill);
	transition: border-color var(--duration-base) var(--ease-out),
				box-shadow var(--duration-base) var(--ease-out);
}

#search-header .custom-input-group .input-group-field:focus {
	box-shadow: var(--shadow-focus);
}

@media (max-width:991px) {
	#search-header .custom-input-group .input-group-field {
		height: 35px;
		font-size: var(--font-size-xs);
	}

	#search-header {
		order: 1;
		margin-top: var(--space-2);
	}
}

@media (max-width:375px) {
	#search-header .custom-input-group .input-group-field {
		padding-right: 45px;
	}

	#search-header .btn {
		padding: var(--space-1) var(--space-2);
	}
}

#search-header .search-dropdow .search__list {
	display: block !important;
	white-space: nowrap;
	overflow: auto;
}

#search-header .search-dropdow .search__list > li {
	display: inline-block;
}

.search-overlay {
	position: fixed;
	z-index: -1;
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100vh;
	top: 0 !important;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-slow) var(--ease-out);
}

.search-overlay.active {
	opacity: 1;
	z-index: var(--z-overlay);
	visibility: visible;
}

.search__list a {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	transition: color var(--duration-fast) var(--ease-out);
}

.search__list a:hover {
	color: var(--header-color);
}

/** end search **/


/** subheader **/
.subheader {
	--subheader-padding: 0px;
	background: var(--subheader-background);
	color: var(--subheader-color);
	display: flex;
	align-items: center;
	padding-top: var(--space-2);
}

.subheader .toogle-nav-wrapper {
	padding: var(--space-4) 0 var(--space-5);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	border: 1px;
	color: var(--subheader-background);
	background: var(--subheader-color);
	font-weight: var(--font-weight-medium);
}

.subheader .navigation-wrapper {
	font-weight: var(--font-weight-regular);
}

.subheader .toogle-nav-wrapper .icon-bar {
	width: 20px;
	height: 18px;
	margin-left: var(--space-4);
}

.subheader .toogle-nav-wrapper .icon-bar .bar {
	background: var(--subheader-background);
	width: 20px;
}

@media (max-width:991px) {
	.subheader {
		display: none;
	}
}

.subheader .container {
	display: grid;
	grid-template-columns: calc(20% - 24px) 1fr;
	justify-content: space-between;
	align-items: center;
	grid-gap: var(--space-4);
}

@media (max-width:1024px) {
	.subheader .container {
		grid-template-columns: calc(25% - 24px) 1fr;
	}
}

.subheader .container > * {
	padding-bottom: var(--space-2);
}

.shop-policises {
	justify-content: flex-start;
}

.shop-policises li {
	display: flex;
	align-items: center;
}

.shop-policises li + * {
	margin-left: var(--space-4);
}

.shop-policises div {
	width: 40px;
	height: 40px;
	padding: var(--space-1);
	margin-right: var(--space-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width:991px) {
	.shop-policises div {
		width: 32px;
		height: 32px;
	}
}

.shop-policises .link {
	font-size: var(--font-size-base);
	transition: color var(--duration-base) var(--ease-out);
}

@media (min-width:992px) {
	.shop-policises .link {
		color: var(--subheader-color);
	}

	.shop-policises .link:hover {
		color: var(--color-secondary);
	}
}

/** end subheader **/


/** ega-header **/
.header_sticky {
	position: fixed;
	transform: translateY(-120px);
	top: 0px !important;
	left: 0;
	width: 100%;
	z-index: -1;
	transition: transform var(--duration-slow) var(--ease-out);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	background: var(--color-bg-surface);
}

.header_sticky.active {
	z-index: var(--z-modal);
	transform: translateY(0);
	opacity: 1;
}

.header_sticky .mid-header {
	font-size: var(--font-size-sm);
	padding: 0;
}

.header_sticky .mid-header:after {
	content: none !important;
}

.header_sticky .toogle-nav-wrapper {
	margin: -5px 0;
}

.header_sticky .toogle-nav-wrapper:hover ~ .sticky-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background: rgba(0, 0, 0, 0.3);
	left: 0;
	top: 0;
}

.header_sticky .toogle-nav-wrapper .navigation-wrapper {
	margin-top: 0;
}

.header_sticky .navigation {
	--nav-height: 75vh;
}

.header_sticky #search-header {
	order: 0 !important;
	margin: 0 !important;
}


.ega-header:not(.header_sticky) {
	top: 0;
	position: sticky;
	position: -webkit-sticky;
	z-index: var(--z-modal);
	background: var(--color-bg-surface);
}

.ega-header.active {
	box-shadow: var(--shadow-md);
}

.ega-header .header-wrap {
	height: 65px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}

.ega-header .header-wrap .header-right {
	display: flex;
	justify-content: flex-end;
}

.ega-header .header-wrap .header-right__icons {
	display: flex;
	align-items: center;
	width: auto;
	gap: var(--space-5);
}

.ega-header .header-wrap .header-right__icons .icon {
	font-size: var(--font-size-3xl);
}

.ega-header .header-wrap .header-right__icons .icon-action__search {
	cursor: pointer;
}

.ega-header .header-wrap .header-right__icons #icon-account {
	position: relative;
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action {
	position: absolute;
	background: var(--color-neutral-800);
	border-radius: var(--radius-md);
	color: var(--color-text-inverse);
	transition: opacity var(--duration-base) var(--ease-out),
				visibility var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
	opacity: 0;
	visibility: hidden;
	text-align: left;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	top: calc(100% + 10px);
	width: 95px;
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action a {
	display: block;
	padding: var(--space-2);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action:before {
	background: transparent;
	content: '';
	position: absolute;
	bottom: 100%;
	height: 10px;
	left: 0;
	width: 100%;
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action:after {
	background: var(--color-neutral-800);
	content: '';
	height: 14px;
	position: absolute;
	transform: rotate(45deg);
	width: 14px;
	z-index: -1;
	left: calc(50% - 7px);
	top: -7px;
}

.ega-header .header-wrap .header-right__icons #icon-account:hover .account-action {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	z-index: 99;
}


.ega-header .mega-menu-content {
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	margin-top: 13px;
	padding: var(--space-1) 58px var(--space-2) var(--space-7);
	background-color: var(--color-bg-surface);
	border: 1px solid var(--color-border-strong);
	border-top: 2px solid var(--color-secondary);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: var(--shadow-md);
	height: auto;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: opacity var(--duration-slow) var(--ease-out),
				visibility var(--duration-slow) var(--ease-out);
}

.ega-header .mega-menu-content .nav-links {
	--col-menu: 3;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--col-menu)), 1fr));
}

.ega-header .mega-menu-content .nav-links__item {
	padding: var(--space-1) var(--space-2);
}

.ega-header #primary-menu {
	display: flex;
	justify-content: center;
}

.ega-header.header_sticky {
	position: fixed;
}

.ega-header.header_sticky .header-wrap {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	justify-items: center;
}
.ega-header.header_sticky .ega-form-search {
	width: 650px !important;
	max-width: 100%;
}
#ega-smartsearch-search-suggestion {
	width: 640px !important;
}

.ega-header.header_sticky .ega-header-layer {
	display: none;
	position: absolute;
	content: "";
	background: var(--color-neutral-1000);
	width: 100%;
	height: 100vh;
	opacity: .6;
	left: 0;
}

.ega-header.header_sticky.active .ega-header-layer {
	display: block;
}

header.ega-header .navigation--horizontal {
	width: auto;
	position: initial;
	justify-content: center;
}

header.ega-header .navigation--horizontal .navigation-arrows {
	display: none;
}

header.ega-header .navigation--horizontal .navigation-arrows i {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--radius-circle);
	transition: background-color var(--duration-base) var(--ease-out);
}

header.ega-header .navigation--horizontal .navigation-arrows i:not(.disabled):hover {
	background: rgba(238, 238, 238, 0.4);
}

header.ega-header .navigation--horizontal .navigation-arrows i.disabled {
	cursor: not-allowed;
	opacity: 0.3;
}

header.ega-header .navigation-wrapper {
	overflow: visible;       /* let dropdowns escape the 65px row */
	max-height: 65px;
}
/* When the nav itself is in scroll-overflow mode, clip the wrapper too so
   the arrows reveal the right content slice instead of items spilling out. */
header.ega-header .navigation-wrapper:has(.navigation.overflow) {
	overflow: hidden;
}

header.ega-header .navigation-wrapper.overflow + .navigation-arrows {
	display: flex;
	align-items: center;
}

@media(max-width: 991px) {
	.ega-header.header_sticky .header-wrap {
		grid-template-columns: 1fr;
		padding-left: 0;
		padding-right: 0;
	}
	.ega-header.header_sticky #logo,
	.ega-header.header_sticky .header-right {
		display: none !important;
	}
}

@media (max-width:991px) {
	.ega-header .header-wrap {
		padding: 0 var(--space-4);
		grid-template-columns: auto 1fr 100px;
	}

	.ega-header .header-wrap .header-right__icons {
		width: auto;
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.ega-header .header-wrap #logo {
		text-align: center;
	}
	#ega-smartsearch-search-suggestion,
	.ega-header.header_sticky .ega-form-search {
		width: 100% !important;
	}

	#ega-smartsearch-search-suggestion {
		width: calc(100% - 10px) !important;
	}
}

/* Logo: 30% smaller than its natural render. scale() keeps the reduction exact
   regardless of the source image size; origin left so it stays anchored to the
   start of the header row (the sticky clone re-centres it below). */
.ega-header .logo-wrapper {
	transform: scale(0.63);
	transform-origin: left center;
}
.ega-header.header_sticky .logo-wrapper {
	transform-origin: center;
}

/* Logo hover swap — fade default logo out, hover logo in. Triggered by hovering
   the whole HEADER or by scrolling down (.active on the in-flow header,
   .header_sticky on the sticky clone) — NOT by hovering the logo itself. */
.logo-wrapper--hover {
	position: relative;
	display: inline-block;
}
.logo-wrapper--hover .logo-default,
.logo-wrapper--hover .logo-hover {
	transition: opacity 0.3s ease;
}
.logo-wrapper--hover .logo-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.ega-header:hover .logo-wrapper--hover .logo-default,
.ega-header.active .logo-wrapper--hover .logo-default,
.ega-header.header_sticky .logo-wrapper--hover .logo-default {
	opacity: 0;
}
.ega-header:hover .logo-wrapper--hover .logo-hover,
.ega-header.active .logo-wrapper--hover .logo-hover,
.ega-header.header_sticky .logo-wrapper--hover .logo-hover {
	opacity: 1;
}

/* Non-homepage: header bg is always white (the transparent-over-hero rule only
   targets #template-index), so the hover (dark) logo must show permanently —
   even at the top of the page before any scroll/hover/sticky. */
body:not(#template-index) .logo-wrapper--hover .logo-default {
	opacity: 0;
}
body:not(#template-index) .logo-wrapper--hover .logo-hover {
	opacity: 1;
}

/** end ega-header **/


/** navigation **/

.navigation {
	--nav-height: 313px;
	min-height: 100%;
	overflow: visible;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 100%;
	width: 100%;
}

/* Only clip when JS marks the nav as overflowing (then arrows handle scroll). */
.navigation.overflow {
	overflow-x: auto;
	overflow-y: hidden;
}

.navigation::-webkit-scrollbar {
	display: none;
}

.navigation .list-group-item {
	padding: 0;
	border-bottom: 0;
	background: transparent;
}

.navigation .list-group-item:hover > a:after {
	filter: brightness(0.9);
}

.navigation .list-group-item > a {
	text-decoration: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	background: var(--main-menu-bg);
	color: var(--color-neutral-900);
	padding: var(--space-5) var(--space-4);
	position: relative;
	font-weight: var(--font-weight-regular);
}
.navigation .list-group-item > a span {
	color: var(--color-neutral-900);
}

.navigation .list-group-item > a:hover {
	color: var(--color-primary);
}

.navigation .list-group-item > a:after {
	background: var(--main-menu-color);
	background-color: currentColor;
	bottom: calc(1.25rem - 5px);
	content: "";
	height: 2px;
	left: 1rem;
	position: absolute;
	width: 0;
	transition: width var(--duration-slow) var(--ease-out);
}
.navigation .list-group-item > a > img {
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
	margin-right: var(--space-1);
}
@media(min-width: 1024px) {
	.navigation .list-group-item:hover > a:after {
		width: calc(100% - 30px);
	}
}
.navigation .list-group-item > a > span img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: var(--space-1);
	animation: pulsate 1s ease-in alternate;
	animation-iteration-count: infinite;
}

.navigation .list-group-item > a i,
.navigation .list-group-item > a svg {
	margin-left: var(--space-2);
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
	transition:
		color var(--duration-base) var(--ease-out),
		fill var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out);
}

/* Force every path inside the menu arrow svg to follow text color (some
   sprite paths inherit fill="none" from their parent <symbol> in shadow
   tree which can leak through in certain browsers). */
.navigation .list-group-item > a svg path,
.navigation .list-group-item > a svg use {
	fill: currentColor;
}

@media (min-width:992px) {
	.navigation .list-group-item > a i,
	.navigation .list-group-item > a svg {
		transform: rotate(45deg);
		margin-top: -3px;
	}
}

.header_sticky .navigation .list-group-item > a i,
.header_sticky .navigation .list-group-item > a svg {
	transform: rotate(0deg);
}

.navigation .menu-item {
	position: initial;
}
.navigation .menu-item:has(> .submenu.default) {
	position: relative;  /* narrow dropdown anchors to its own item */
}

/* ---------- Submenu base (shared by mega-menu + default) ----------
   Uses opacity/visibility instead of display so we can transition.
   `padding-top` acts as a transparent "bridge" so the cursor can move from
   the header pill into the dropdown without losing :hover state. */
.navigation .submenu {
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 0;
	margin-left: 0;
	z-index: 900;
	font-size: var(--font-size-base);
	background: transparent;  /* visual card is on the inner list */
	box-shadow: none;
	transition:
		opacity var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out),
		visibility 0s linear var(--duration-base);
}

/* Inner list is the actual visual card (so submenu's top padding stays a
   transparent bridge zone). */
.navigation .submenu__list {
	display: grid;
	grid-template-columns: repeat(var(--col-menu), 1fr);
	grid-gap: var(--space-3) var(--space-4);
	padding: var(--space-5);
	margin: 0;
	list-style: none;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* Bridge gap between pill and card. The mega-menu submenu's containing block
   is the fixed .ega-header, so `top: 100%` lands at the header's bottom edge
   (≈80px from header top) — well below the pill (≈60px). That ~20px dead-zone
   was killing :hover during mouse travel. We start the mega-menu submenu
   higher (calc(100% - 20px)) and expand padding-top so the transparent bridge
   covers the full path from pill to card. Default dropdown anchors to its
   own .menu-item so it doesn't need the lift. */
.navigation .submenu.mega-menu {
	top: calc(100% - 20px);
	padding-top: 34px;        /* 20px lift + 14px visual breathing room */
}

.navigation .submenu.default {
	padding-top: 14px;
}

@media (min-width: 992px) {
	.navigation .menu-item:hover > .submenu,
	.navigation .submenu:hover {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			opacity var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out),
			visibility 0s linear 0s;
	}
}

.navigation .submenu__col {
	display: flex;
	flex-direction: column;
	align-items: start;
	font-size: var(--font-size-base);
	gap: var(--space-1);
}

.navigation .submenu__col .submenu__item {
	margin: 0;
	width: 100%;
}

.navigation .submenu__item a {
	display: inline-block;
	padding: 4px 0;
	transition: color var(--duration-base) var(--ease-out);
}

.submenu__col .submenu__item:not(.submenu__item--main) a {
	color: var(--color-text-muted);
}
.submenu__col .submenu__item:not(.submenu__item--main) a:hover {
	color: var(--setago-orange);
}

.navigation .submenu__item--main {
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-2);
}
.navigation .submenu__item--main a {
	color: var(--color-text-primary);
}
.navigation .submenu__item--main a:hover {
	color: var(--setago-orange);
}

/* ---------- Default (narrow) dropdown ---------- */
.navigation .submenu.default {
	width: 260px;
	max-width: 90vw;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
}

@media (min-width: 992px) {
	.navigation .menu-item:hover > .submenu.default,
	.navigation .submenu.default:hover {
		transform: translateX(-50%) translateY(0);
	}
}

.navigation .submenu.default .submenu__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-2);
}

.navigation .submenu.default .submenu__item {
	width: 100%;
}

.navigation .submenu.default .submenu__item a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-weight: var(--font-weight-medium);
	transition: background var(--duration-fast) var(--ease-out),
				color var(--duration-fast) var(--ease-out);
}

.navigation .submenu.default .submenu__item a:hover {
	background: var(--setago-cream);
	color: var(--setago-orange);
}

/** end navigation **/


/* ============================================================
   Setago — header redesign (2026-05)
   Default (non-homepage / scrolled): cream bg + orange pill nav.
   Homepage at top: transparent over hero + white text + smoke fade.
   Driven by JS toggle .ega-header.active on scroll.
   ============================================================ */

/* Floating header bar — fixed at top:20px so it does NOT consume flow space
   (hero on homepage extends to viewport top). 80px tall, 20px from top. */
.ega-header:not(.header_sticky) {
	background: var(--setago-cream);
	position: fixed;
	top: 20px;
	left: 0;
	right: 0;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	height: 80px;
	border-radius: var(--radius-pill);
	z-index: var(--z-modal);
	transition: background-color var(--duration-slow) var(--ease-out),
				box-shadow var(--duration-slow) var(--ease-out),
				transform var(--duration-slow) var(--ease-out);
}

/* Slide up & out when scrolling DOWN — JS toggles .is-hidden */
.ega-header:not(.header_sticky).is-hidden {
	transform: translateY(calc(-100% - 30px));
}

/* Non-homepage: push content below the fixed header (80 + 20 top = 100) */
body:not(#template-index) {
	padding-top: 100px;
}

@media (min-width: 1200px) {
	.ega-header:not(.header_sticky) {
		max-width: 1230px;
	}
}

@media (min-width: 1800px) {
	.ega-header:not(.header_sticky) {
		max-width: 1650px;
	}
}

.ega-header:not(.header_sticky).active {
	box-shadow: var(--shadow-lg);
}

/* Override Bootstrap .container — 1340px max comes from outer .ega-header */
.ega-header .header-wrap.container {
	max-width: 100%;
	height: 100%;
	padding: 0 50px;
}

/* Right-side icons centered inside 80px row */
.ega-header .header-wrap .header-right {
	display: flex;
	align-items: center;
	height: 100%;
}

.ega-header .header-wrap .header-right__icons {
	align-items: center;
}

/* Wishlist: heart icon with a corner count badge (mirrors the cart badge). */
.ega-header .header-wrap .header-right__icons .wishlist-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-2xl) !important;
	line-height: 1;
	transition: opacity var(--duration-base) var(--ease-out);
}

.ega-header .header-wrap .header-right__icons .wishlist-link i {
	vertical-align: middle !important;
	line-height: 1;
}

/* Count badge — same shape/centering as .mini-cart .count_item so the digit
   sits dead-centre instead of floating beside the heart. */
.ega-header .header-wrap .header-right__icons .wishlist-link span {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	background: var(--setago-orange);
	border-radius: var(--radius-pill);
	color: var(--color-text-inverse);
	font-size: 10px;
	line-height: 1;
}

/* Grid row fills 80px floating bar */
.ega-header .header-wrap {
	height: 100%;
}

/* Nav strip: 60px tall, centered inside 80px bar */
.ega-header .navigation--horizontal {
	height: 60px;
}

/* Homepage at top: transparent bar over hero, smoke fade behind.
   :not(:hover) — khi hover, fallback về state "scrolled" (cream bg). */
#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) {
	background: transparent;
	box-shadow: none;
}

/* Smoke gradient on body pseudo (not header) — header transform would
   otherwise turn position:fixed of pseudo into absolute. Uses :has().
   z-index --z-overlay (800) — below header (--z-modal 900) so smoke
   sits BEHIND the floating bar, not on top of it. */
body#template-index::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	background: linear-gradient(
		to bottom,
		rgba(30, 30, 30, 0.55) 0%,
		rgba(30, 30, 30, 0.25) 45%,
		rgba(30, 30, 30, 0) 100%
	);
	pointer-events: none;
	z-index: var(--z-overlay);
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
}

body#template-index:has(.ega-header:not(.header_sticky):not(.active):not(.is-hidden):not(:hover))::before {
	opacity: 1;
}

/* Header right icons: white when transparent over hero.
   :not(:hover) — khi hover header, icons quay về dark mặc định. */
#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .header-right a,
#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .header-right .header-icon,
#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .toggle_form_search {
	color: var(--color-text-inverse);
}

#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .toggle-nav .bar {
	background: var(--color-text-inverse);
}

/* Smooth color flip on hover for icons + burger bar */
.ega-header .header-right a,
.ega-header .header-right .header-icon,
.ega-header .toggle_form_search {
	transition: color var(--duration-base) var(--ease-out);
}
.ega-header .toggle-nav .bar {
	transition: background-color var(--duration-base) var(--ease-out);
}

/* Pill nav — orange pills with white text on every state */
.ega-header .navigation {
	gap: var(--space-2);
	flex-wrap: nowrap;
	align-items: center;
}

/* Default pill: dark text on light bg with subtle border. Only .is-active is
   solid orange + white. Top-of-hero overrides to glass-white below. */
.ega-header .navigation .list-group-item > a {
	background: transparent;
	color: var(--setago-ink);
	height: 40px;
	padding: 0 18px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: background-color var(--duration-base) var(--ease-out),
				color var(--duration-base) var(--ease-out),
				border-color var(--duration-base) var(--ease-out),
				transform var(--duration-fast) var(--ease-out);
}

/* Top of homepage: non-active pills go glass-white over dark hero.
   :not(:hover) — khi hover header, pills quay về dark default. */
#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .navigation .list-group-item:not(.is-active) > a {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--color-text-inverse);
}

/* Wrapper border around whole nav block */
.ega-header .navigation--horizontal {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-2);
	transition: border-color var(--duration-slow) var(--ease-out);
}

#template-index .ega-header:not(.header_sticky):not(.active):not(:hover) .navigation--horizontal {
	border-color: rgba(255, 255, 255, 0.3);
}

.ega-header .navigation .list-group-item > a > span {
	color: inherit;
}

.ega-header .navigation .list-group-item > a:hover {
	background: var(--setago-orange);
	color: var(--color-text-inverse);
	border-color: transparent;
	transform: translateY(-1px);
}

/* Active link: solid brand orange + white on every state */
.ega-header .navigation .list-group-item.is-active > a,
.ega-header .navigation .list-group-item > a.is-active {
	background: var(--setago-orange);
	color: var(--color-text-inverse);
	border-color: transparent;
}

/* Hover hand-off: when any nav item is being hovered, the original active
   item drops its orange so only the hovered item shows the pill. The hovered
   item already gets the orange via the :hover rule above.
   :not(:hover) keeps things sane when the active item itself is the one hovered. */
.ega-header .navigation:has(.list-group-item:hover) .list-group-item.is-active:not(:hover) > a {
	background: transparent;
	color: var(--setago-ink);
	border-color: rgba(0, 0, 0, 0.12);
}

/* Kill legacy underline pseudo on pill links */
.ega-header .navigation .list-group-item > a:after {
	content: none !important;
}

/* Mini-cart badge in orange to match palette */
.ega-header .mini-cart > a .count_item {
	background: var(--setago-orange);
}

/* Header sticky:fixed shouldn't clip smoke ::before */
.ega-header:not(.header_sticky) {
	overflow: visible;
}

/* Mobile/tablet: keep the floating rounded pill like desktop — just inset it
   slightly from the screen edges instead of going edge-to-edge. The horizontal
   nav stays hidden (markup d-none d-lg-flex) and the burger opens the modal. */
@media (max-width: 991px) {
	.ega-header:not(.header_sticky) {
		top: 12px;
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
		margin: 0;
		border-radius: var(--radius-pill);
		height: 60px;
	}
	body:not(#template-index) {
		padding-top: 84px;
	}
	.ega-header .header-wrap.container {
		padding: 0 var(--space-6);
	}
	/* Fit elements to the 60px mobile pill */
	.ega-header .header-wrap #logo img {
		max-height: 52px;
		width: auto;
	}
	.ega-header .header-wrap .header-right__icons {
		gap: var(--space-4);
	}
	.ega-header .header-wrap .header-right__icons .icon {
		width: 20px;
		height: 20px;
	}
	.ega-header .header-wrap .header-right__icons .wishlist-link {
		font-size: var(--font-size-xl) !important;
	}
	.ega-header .navigation {
		gap: var(--space-1);
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.ega-header .navigation .list-group-item > a {
		height: 36px;
		padding: 0 var(--space-3);
		font-size: var(--font-size-xs);
	}
	#template-index .ega-header:not(.header_sticky):not(.active)::before {
		height: 160px;
	}
}

/* Small phones (≤480px): a touch less side padding + icon gap than tablet so
   logo / icon row don't crowd each other on 320–414px viewports. */
@media (max-width: 480px) {
	.ega-header .header-wrap.container {
		padding: 0 var(--space-4);
	}
	.ega-header .header-wrap .header-right {
		gap: var(--space-3);
	}
	.ega-header .header-wrap .header-right__icons {
		gap: var(--space-3);
	}
	.ega-header .navigation .list-group-item > a {
		padding: 0 var(--space-2);
		font-size: 11px;
	}
}