/**
 * Main nav — thanh menu điều hướng (Flatsome header bottom, #wide-nav).
 * Đồng bộ với banner trang chủ: nền navy chuyển màu, điểm nhấn xanh phát sáng,
 * mục E-Shop là nút cam nổi bật (cùng màu nút Add to cart) + tag Freeship.
 * Markup tag/icon E-Shop: inc/main-nav.php
 */

:root {
	--smt-nav-bg-1: #0b2550;
	--smt-nav-bg-2: #123a73;
	--smt-nav-bg-3: #1a4f93;
	--smt-nav-glow: #26b4e9;
	--smt-nav-link: rgba(255, 255, 255, 0.82);
	--smt-nav-cta-1: #ff8a3d;
	--smt-nav-cta-2: #e8572a;
}

/* ===== Thanh nền ===== */
#wide-nav.header-bottom {
	position: relative;
	min-height: 56px;
	background: linear-gradient(90deg, var(--smt-nav-bg-1) 0%, var(--smt-nav-bg-2) 55%, var(--smt-nav-bg-3) 100%);
	box-shadow: 0 6px 18px rgba(8, 28, 64, 0.18);
}

/* Đường sáng mảnh ở mép dưới */
#wide-nav.header-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(38, 180, 233, 0.85) 30%, rgba(124, 92, 255, 0.75) 70%, transparent 100%);
	opacity: 0.7;
	pointer-events: none;
}

#wide-nav .header-bottom-nav {
	align-items: center;
	gap: 4px;
}

/* ===== Nút Product Categories ===== */
#wide-nav .smt-cat-mega__toggle {
	padding: 11px 18px;
	border-radius: 10px;
	background: linear-gradient(135deg, #2fc0f0 0%, #1e8fd8 100%);
	box-shadow: 0 6px 16px rgba(38, 180, 233, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	letter-spacing: 0.05em;
}

#wide-nav .smt-cat-mega__toggle:hover,
#wide-nav .smt-cat-mega.is-open .smt-cat-mega__toggle {
	filter: brightness(1.05);
	box-shadow: 0 8px 22px rgba(38, 180, 233, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#wide-nav .header-bottom-nav > li.html.custom {
	margin-right: 18px;
}

/* ===== Mục menu thường ===== */
#wide-nav .header-bottom-nav > li.menu-item {
	margin: 0 4px;
}

#wide-nav .header-bottom-nav > li.menu-item > a.nav-top-link {
	position: relative;
	padding: 8px 12px;
	color: var(--smt-nav-link);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: 8px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Gạch chân sáng chạy từ giữa ra */
#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop) > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #26b4e9, #7c5cff);
	box-shadow: 0 0 8px rgba(38, 180, 233, 0.7);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop) > a.nav-top-link:hover,
#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop).active > a.nav-top-link,
#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop).current-menu-item > a.nav-top-link {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06);
}

#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop) > a.nav-top-link:hover::after,
#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop).active > a.nav-top-link::after,
#wide-nav .header-bottom-nav > li.menu-item:not(.smt-nav-eshop).current-menu-item > a.nav-top-link::after {
	transform: scaleX(1);
}

/* ===== Nút E-Shop nổi bật ===== */
#wide-nav .header-bottom-nav > li.smt-nav-eshop {
	margin: 0 8px;
}

#wide-nav .header-bottom-nav > li.smt-nav-eshop > a.nav-top-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px 8px 14px;
	color: #fff;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--smt-nav-cta-1) 0%, var(--smt-nav-cta-2) 100%);
	box-shadow: 0 6px 16px rgba(232, 87, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	animation: smt-nav-eshop-glow 2.8s ease-in-out infinite;
}

#wide-nav .header-bottom-nav > li.smt-nav-eshop > a.nav-top-link:hover,
#wide-nav .header-bottom-nav > li.smt-nav-eshop.current-menu-item > a.nav-top-link {
	color: #fff;
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 10px 22px rgba(232, 87, 42, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.smt-nav-eshop__icon {
	flex: 0 0 auto;
	display: block;
}

.smt-nav-eshop__tag {
	display: inline-block;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smt-nav-cta-2);
	background: #fff;
	border-radius: 999px;
}

@keyframes smt-nav-eshop-glow {
	0%, 100% { box-shadow: 0 6px 16px rgba(232, 87, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
	50% { box-shadow: 0 6px 22px rgba(255, 138, 61, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
	#wide-nav .header-bottom-nav > li.smt-nav-eshop > a.nav-top-link {
		animation: none;
	}
}

/* ===== Menu mobile (off-canvas) ===== */
.mobile-sidebar .nav-sidebar li.smt-nav-eshop > a,
.off-canvas .nav-sidebar li.smt-nav-eshop > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--smt-nav-cta-2);
	font-weight: 700;
}

.mobile-sidebar .nav-sidebar li.smt-nav-eshop .smt-nav-eshop__tag,
.off-canvas .nav-sidebar li.smt-nav-eshop .smt-nav-eshop__tag {
	color: #fff;
	background: linear-gradient(135deg, var(--smt-nav-cta-1), var(--smt-nav-cta-2));
}