/* Header menu hover pill like Tân Phát Digital (https://tanphatdigital.com/) */
/* Works with Flatsome main nav: .header-nav-main .nav > li > a */

.header-nav-main .nav > li { margin: 0 8px }

.header-nav-main .nav > li > a {
	position: relative;
	z-index: 1;
	border-radius: 9999px;
	padding: 10px 22px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	transition: color .2s ease;
}

.header-nav-main .nav > li > a::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: rgba(255,255,255,0.12);
	box-shadow: 0 2px 12px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.06);
	transform: scale(.94);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease, background .18s ease;
	z-index: -1;
}

/* Hover/Focus */
.header-nav-main .nav > li:hover > a::before,
.header-nav-main .nav > li > a:focus-visible::before {
	opacity: 1;
	transform: scale(1);
	background: rgba(255,255,255,0.14);
}

/* Active/current item */
.header-nav-main .nav > li.current-menu-item > a,
.header-nav-main .nav > li.current_page_item > a,
.header-nav-main .nav > li.current-menu-ancestor > a { color:#fff !important }

.header-nav-main .nav > li.current-menu-item > a::before,
.header-nav-main .nav > li.current_page_item > a::before,
.header-nav-main .nav > li.current-menu-ancestor > a::before {
	opacity: 1;
	transform: scale(1);
	background: rgba(255,255,255,0.18);
}

/* Dark header compatibility */
.header .nav-dark .nav > li > a::before { background: rgba(255,255,255,0.14) }

/* Accessibility */
.header-nav-main .nav > li > a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255,255,255,.22);
	border-radius: 9999px;
}

@media (max-width: 849px) {
	/* On mobile (off-canvas), keep default Flatsome styles */
	.header-nav-main .nav > li > a::before { display: none }
}