/**
 * Phone Z Store — glassmorphism header + mega menu
 * Inspired by:
 * - https://codepen.io/themrsami/pen/YPzvmyY (glass nav + dropdown)
 * - https://codepen.io/tisonmuhammad/pen/qrjEbK (mega menu columns)
 * - https://freefrontend.com/css-glassmorphism/
 */

#header {
	--phonez-primary: #1e73be;
	--phonez-primary-glow: rgba(30, 115, 190, 0.45);
	--phonez-glass: saturate(180%) blur(14px);
	--phonez-nav-bg: rgba(22, 72, 120, 0.82);
	/* Độ trong suốt panel mega menu khi hover — số cuối: 0 = trong hoàn toàn, 1 = đục */
	--phonez-dropdown-opacity: 0.95;
	--phonez-dropdown-glass: rgba(255, 255, 255, var(--phonez-dropdown-opacity));
	--phonez-dropdown-blur: 20px;
	--phonez-border: rgba(255, 255, 255, 0.14);
	--phonez-text: #ffffff;
	--phonez-text-muted: rgba(255, 255, 255, 0.75);
	--phonez-shadow: 0 4px 30px rgba(0, 0, 0, 0.18);
	--phonez-radius: 12px;
	--phonez-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glass header bar */
.header-main {
	background: var(--phonez-nav-bg) !important;
	backdrop-filter: var(--phonez-glass);
	-webkit-backdrop-filter: var(--phonez-glass);
	border-bottom: 1px solid var(--phonez-border);
	box-shadow: var(--phonez-shadow);
}

.stuck .header-main {
	background: rgba(18, 62, 105, 0.92) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.header-main .header-inner.flex-row {
	align-items: center;
}

.header-main .header-nav-main.nav {
	align-items: center;
	gap: 4px;
}

/* ─── Desktop ─── */
@media screen and (min-width: 850px) {

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

	.header-main .header-nav-main.nav > li > a.nav-top-link {
		position: relative;
		display: inline-flex !important;
		align-items: center;
		gap: 0.4em;
		padding: 10px 16px !important;
		margin: 0;
		line-height: 1.35 !important;
		border: 1px solid transparent !important;
		border-radius: var(--phonez-radius) !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--phonez-text) !important;
		font-size: 1em;
		font-weight: 600;
		text-transform: none !important;
		letter-spacing: 0.02em;
		text-decoration: none;
		transition: all var(--phonez-transition);
	}

	.header-main .header-nav-main.nav > li > a.nav-top-link .icon-angle-down {
		margin: 0;
		font-size: 0.75em;
		transition: transform var(--phonez-transition);
	}

	.header-main .header-nav-main.nav > li.has-dropdown:hover > a.nav-top-link .icon-angle-down {
		transform: rotate(180deg);
	}

	.header-main .header-nav-main.nav > li > a.nav-top-link:hover,
	.header-main .header-nav-main.nav > li:hover > a.nav-top-link {
		color: #fff !important;
		background: rgba(255, 255, 255, 0.1) !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 16px var(--phonez-primary-glow);
	}

	.header-main .header-nav-main.nav > li.active > a.nav-top-link,
	.header-main .header-nav-main.nav > li.current-menu-item > a.nav-top-link,
	.header-main .header-nav-main.nav > li.current-menu-ancestor > a.nav-top-link {
		color: #fff !important;
		background: rgba(255, 255, 255, 0.12) !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
	}

	/* Active indicator dot (themrsami) */
	.header-main .header-nav-main.nav > li.active > a.nav-top-link::after,
	.header-main .header-nav-main.nav > li.current-menu-item > a.nav-top-link::after,
	.header-main .header-nav-main.nav > li.current-menu-ancestor > a.nav-top-link::after {
		content: "";
		position: absolute;
		bottom: 4px;
		left: 50%;
		transform: translateX(-50%);
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
	}

	.header-main .header-nav-main.nav-box > li > a {
		background: transparent !important;
		border: 1px solid transparent !important;
	}

	.stuck .header-main .header-nav-main.nav > li > a.nav-top-link {
		padding: 8px 14px !important;
	}

	/* Shared dropdown panel (menu only — not search) */
	.header-main .nav > li.has-dropdown:not(.header-search-dropdown) > .nav-dropdown,
	.header-main .nav > li.menu-item-has-children:not(.header-search-dropdown) > .nav-dropdown {
		margin-top: 12px !important;
		padding: 16px 12px 12px !important;
		background: var(--phonez-dropdown-glass) !important;
		backdrop-filter: blur(var(--phonez-dropdown-blur)) saturate(160%);
		-webkit-backdrop-filter: blur(var(--phonez-dropdown-blur)) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.65) !important;
		border-top: 4px solid var(--phonez-primary) !important;
		border-bottom: 4px solid var(--phonez-primary) !important;
		border-radius: var(--phonez-radius) !important;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(30, 115, 190, 0.08) !important;
		color: #1a1a1a !important;
	}

	/* Ghi đè Flatsome .dark — nền trắng nên chữ phải tối */
	.header-main .nav-dropdown.nav-dropdown-default.dark,
	.header-main .nav-dropdown.nav-dropdown-default.dark li,
	.header-main .nav-dropdown.nav-dropdown-default.dark li > a,
	.header-main .nav-dropdown.nav-dropdown-default.dark .nav-column li > a {
		color: #333 !important;
	}

	.header-main .nav-dropdown.nav-dropdown-default.dark > li.menu-item > a {
		display: block !important;
		padding: 10px 14px !important;
		font-size: 0.9rem !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		color: #333 !important;
		background: transparent !important;
		border-radius: 8px !important;
		text-transform: none !important;
	}

	.header-main .nav-dropdown.nav-dropdown-default.dark > li.menu-item > a:hover {
		color: var(--phonez-primary) !important;
		background: rgba(30, 115, 190, 0.1) !important;
	}

	/* Mega menu — grid, đủ rộng tránh chữ đè */
	.header-main .nav > li.has-dropdown:not(.header-search-dropdown) > .nav-dropdown:has(.nav-dropdown-col) {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(200px, 1fr));
		gap: 8px 16px;
		align-items: start;
		width: max-content;
		min-width: min(95vw, 1080px);
		max-width: min(95vw, 1080px);
	}

	@media screen and (max-width: 1100px) {
		.header-main .nav > li.has-dropdown:not(.header-search-dropdown) > .nav-dropdown:has(.nav-dropdown-col) {
			grid-template-columns: repeat(3, minmax(200px, 1fr));
			min-width: min(95vw, 680px);
		}
	}

	/* Dropdown 1 cột (Phụ kiện, giỏ hàng con, …) */
	.header-main .nav > li.has-dropdown:not(.header-search-dropdown) > .nav-dropdown:not(:has(.nav-dropdown-col)) {
		display: block !important;
		width: auto;
		min-width: 240px;
		max-width: 320px;
		padding: 8px !important;
	}

	.header-main .nav-dropdown > li.nav-dropdown-col {
		float: none !important;
		width: auto !important;
		min-width: 0;
		max-width: none;
		padding: 0 4px 8px;
		margin: 0;
		border-right: 1px solid rgba(30, 115, 190, 0.12);
		box-sizing: border-box;
	}

	.header-main .nav-dropdown > li.nav-dropdown-col:last-child {
		border-right: none;
	}

	/* Tiêu đề cột: Google Pixel, Samsung, Sony, Oppo, iPhone */
	.header-main .nav-dropdown > li.nav-dropdown-col > a {
		display: block !important;
		padding: 10px 10px 12px !important;
		margin-bottom: 6px;
		font-size: 1.05rem !important;
		font-weight: 800 !important;
		line-height: 1.3 !important;
		letter-spacing: 0.02em;
		color: var(--phonez-primary) !important;
		text-transform: none !important;
		border-bottom: 2px solid rgba(30, 115, 190, 0.25) !important;
		background: transparent !important;
		border-radius: 0 !important;
		white-space: normal !important;
		transition: color var(--phonez-transition);
	}

	.header-main .nav-dropdown > li.nav-dropdown-col > a:hover {
		color: #155a94 !important;
		background: transparent !important;
		transform: none !important;
	}

	.header-main .nav-dropdown .nav-column {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.header-main .nav > li:not(.header-search-dropdown) .nav-dropdown .nav-column li > a {
		display: block !important;
		padding: 8px 10px !important;
		line-height: 1.45 !important;
		font-size: 0.85rem !important;
		font-weight: 500 !important;
		color: #333 !important;
		text-align: left;
		text-transform: none;
		text-decoration: none;
		border-radius: 8px !important;
		background: transparent !important;
		border: none !important;
		white-space: normal !important;
		word-wrap: break-word;
		overflow-wrap: anywhere;
		transition: background-color var(--phonez-transition), color var(--phonez-transition);
	}

	.header-main .nav > li:not(.header-search-dropdown) .nav-dropdown .nav-column li > a:hover {
		background: rgba(30, 115, 190, 0.1) !important;
		color: var(--phonez-primary) !important;
		transform: none !important;
		padding-left: 10px !important;
	}

	.header-main .nav-dropdown-has-arrow li.has-dropdown:after {
		border-bottom-color: rgba(255, 255, 255, 0.92) !important;
	}

	/* Search icon (bên phải) */
	.header-main li.header-search-dropdown > a.is-small {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0 !important;
		border-radius: var(--phonez-radius) !important;
		border: 1px solid transparent !important;
		background: rgba(255, 255, 255, 0.08) !important;
		color: var(--phonez-text) !important;
		transition: all var(--phonez-transition);
	}

	.header-main li.header-search-dropdown:hover > a.is-small,
	.header-main li.header-search-dropdown.current-dropdown > a.is-small {
		background: rgba(255, 255, 255, 0.18) !important;
		border-color: var(--phonez-border) !important;
	}

	/* Panel khi bấm icon search — không dùng layout mega menu */
	.header-main li.header-search-dropdown > .nav-dropdown {
		display: block !important;
		left: auto !important;
		right: 0 !important;
		width: 340px !important;
		min-width: 0 !important;
		max-width: calc(100vw - 20px) !important;
		margin-top: 10px !important;
		padding: 14px !important;
		background: rgba(255, 255, 255, 0.96) !important;
		backdrop-filter: blur(16px) saturate(160%);
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		border: 1px solid rgba(30, 115, 190, 0.2) !important;
		border-top: 3px solid var(--phonez-primary) !important;
		border-radius: var(--phonez-radius) !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
	}

	.header-main li.header-search-dropdown > .nav-dropdown > li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
	}

	.header-main li.header-search-dropdown .header-search-form,
	.header-main li.header-search-dropdown .header-search-form-wrapper,
	.header-main li.header-search-dropdown .searchform-wrapper,
	.header-main li.header-search-dropdown .searchform,
	.header-main li.header-search-dropdown .search-form {
		width: 100% !important;
		max-width: 100% !important;
	}

	.header-main li.header-search-dropdown .searchform .flex-row {
		display: flex !important;
		align-items: stretch;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		background: #fff !important;
		border: 1px solid rgba(30, 115, 190, 0.35) !important;
		border-radius: 999px !important;
		overflow: hidden;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
		transition: border-color var(--phonez-transition), box-shadow var(--phonez-transition);
	}

	.header-main li.header-search-dropdown .searchform .flex-row:focus-within {
		border-color: var(--phonez-primary) !important;
		box-shadow: 0 0 0 3px var(--phonez-primary-glow);
	}

	.header-main li.header-search-dropdown .search-field {
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		border: none !important;
		background: transparent !important;
		padding: 12px 16px !important;
		font-size: 0.9rem !important;
		line-height: 1.4 !important;
		min-height: 44px;
		color: #222 !important;
	}

	.header-main li.header-search-dropdown .search-field::placeholder {
		color: #888 !important;
	}

	.header-main li.header-search-dropdown .ux-search-submit {
		flex: 0 0 auto !important;
		border-radius: 0 !important;
		min-height: 44px;
		min-width: 48px;
		background: var(--phonez-primary) !important;
		color: #fff !important;
	}

	.header-main li.header-search-dropdown .ux-search-submit:hover {
		background: #155a94 !important;
	}

	.header-main li.header-search-dropdown .ux-search-submit .icon-search {
		color: #fff !important;
	}

	.header-main li.header-search-dropdown .live-search-results {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
	}

	.header-main .header-nav-main.nav-right > li > a.header-cart-link,
	.header-main .header-nav-main.nav-right > li > a.nav-top-not-logged-in {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0 !important;
		line-height: 1 !important;
		border-radius: var(--phonez-radius) !important;
		border: 1px solid transparent !important;
		background: rgba(255, 255, 255, 0.08) !important;
		color: var(--phonez-text) !important;
		transition: all var(--phonez-transition);
	}

	.header-main .header-nav-main.nav-right > li > a.header-cart-link:hover,
	.header-main .header-nav-main.nav-right > li > a.nav-top-not-logged-in:hover {
		background: rgba(255, 255, 255, 0.18) !important;
		border-color: var(--phonez-border) !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px var(--phonez-primary-glow);
	}
}

/* ─── Mobile glass sidebar ─── */
@media screen and (max-width: 849px) {

	#main-menu.mobile-sidebar {
		background: rgba(18, 48, 78, 0.95);
		backdrop-filter: blur(16px) saturate(180%);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
	}

	#main-menu .sidebar-menu {
		padding: 20px 16px 28px;
	}

	#main-menu .header-search-form {
		margin-bottom: 16px;
	}

	#main-menu .header-search-form .searchform .flex-row {
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid var(--phonez-border, rgba(255, 255, 255, 0.14));
		overflow: hidden;
	}

	#main-menu .header-search-form .search-field,
	#main-menu .header-search-form input[type="search"],
	#main-menu .header-search-form input[type="text"] {
		color: #fff !important;
		-webkit-text-fill-color: #fff;
		caret-color: #fff;
		padding: 12px 16px !important;
		line-height: 1.4 !important;
		font-size: 0.9375rem;
		font-weight: 500;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		opacity: 1;
	}

	#main-menu .header-search-form .search-field::placeholder,
	#main-menu .header-search-form input[type="search"]::placeholder,
	#main-menu .header-search-form input[type="text"]::placeholder {
		color: rgba(255, 255, 255, 0.72) !important;
		opacity: 1;
	}

	#main-menu .header-search-form .search-field::-webkit-input-placeholder,
	#main-menu .header-search-form input[type="search"]::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.72) !important;
		opacity: 1;
	}

	#main-menu .header-search-form .search-field::-moz-placeholder,
	#main-menu .header-search-form input[type="search"]::-moz-placeholder {
		color: rgba(255, 255, 255, 0.72) !important;
		opacity: 1;
	}

	#main-menu .nav-sidebar > li > a {
		display: flex;
		align-items: center;
		gap: 0.55em;
		margin-bottom: 6px;
		padding: 14px 16px !important;
		line-height: 1.4 !important;
		font-size: 1rem;
		font-weight: 600;
		color: #fff !important;
		text-decoration: none;
		text-transform: none;
		background: rgba(255, 255, 255, 0.06) !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: var(--phonez-radius, 12px) !important;
		box-shadow: none !important;
		transition: all 0.25s ease;
	}

	#main-menu .nav-sidebar > li > a:hover,
	#main-menu .nav-sidebar > li.active > a,
	#main-menu .nav-sidebar > li.current-menu-item > a {
		background: rgba(255, 255, 255, 0.14) !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
		color: #fff !important;
		transform: translateX(4px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	}

	/* Submenu chung: nav, tài khoản WooCommerce (ul.children), v.v. */
	#main-menu .nav-sidebar-ul.children,
	#main-menu .nav-sidebar-ul,
	#main-menu .nav-sidebar ul.children,
	#main-menu .nav-sidebar ul.sub-menu,
	#main-menu .account-item > ul.children {
		margin: 4px 0 12px;
		padding: 8px 8px 8px 14px;
		background: rgba(0, 0, 0, 0.2);
		border-left: 3px solid rgba(255, 255, 255, 0.55);
		border-radius: 0 8px 8px 0;
		list-style: none;
	}

	#main-menu .nav-sidebar-ul.children li > a,
	#main-menu .nav-sidebar-ul li > a,
	#main-menu .nav-sidebar ul.children li > a,
	#main-menu .nav-sidebar ul.sub-menu li > a,
	#main-menu .account-item > ul.children li > a,
	#main-menu .account-item > ul.children li > a:visited,
	#main-menu .woocommerce-MyAccount-navigation-link > a,
	#main-menu .header-newsletter-item > a,
	#main-menu .header-newsletter-item .header-newsletter-title {
		padding: 9px 12px !important;
		font-size: 0.9rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.92) !important;
		-webkit-text-fill-color: rgba(255, 255, 255, 0.92);
		border: none !important;
		border-radius: 6px !important;
		background: transparent !important;
		opacity: 1 !important;
		text-decoration: none;
	}

	#main-menu .nav-sidebar-ul.children li > a:hover,
	#main-menu .nav-sidebar-ul li > a:hover,
	#main-menu .nav-sidebar ul.children li > a:hover,
	#main-menu .nav-sidebar ul.sub-menu li > a:hover,
	#main-menu .account-item > ul.children li > a:hover,
	#main-menu .woocommerce-MyAccount-navigation-link > a:hover,
	#main-menu .header-newsletter-item > a:hover {
		background: rgba(255, 255, 255, 0.12) !important;
		color: #fff !important;
		-webkit-text-fill-color: #fff;
	}

	#main-menu .nav-sidebar ul.children li.current-menu-item > a,
	#main-menu .account-item > ul.children li.is-active > a,
	#main-menu .woocommerce-MyAccount-navigation-link.is-active > a {
		color: #fff !important;
		font-weight: 600;
		background: rgba(255, 255, 255, 0.1) !important;
	}

	/* Phần tử Flatsome khác trong sidebar (social, html…) */
	#main-menu .sidebar-menu a:not(.button) {
		color: rgba(255, 255, 255, 0.9);
	}

	#main-menu .sidebar-menu .social-icons a,
	#main-menu .sidebar-menu .follow-icons a {
		color: #fff !important;
		opacity: 0.85;
	}

	/* Mục có submenu: link + nút mũi tên (Flatsome inject button.toggle) */
	#main-menu .nav-sidebar > li.has-child,
	#main-menu .nav-sidebar > li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	#main-menu .nav-sidebar > li.has-child > a,
	#main-menu .nav-sidebar > li.menu-item-has-children > a {
		flex: 1 1 auto;
		min-width: 0;
		margin-bottom: 0;
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		border-right: none !important;
	}

	#main-menu .nav-sidebar > li.has-child > button.toggle,
	#main-menu .nav-sidebar > li.menu-item-has-children > button.toggle {
		flex: 0 0 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 48px;
		min-height: 48px;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 0 var(--phonez-radius, 12px) var(--phonez-radius, 12px) 0 !important;
		background: rgba(255, 255, 255, 0.14) !important;
		color: #fff !important;
		box-shadow: none !important;
		opacity: 1;
		cursor: pointer;
		transition: background 0.25s ease, border-color 0.25s ease;
	}

	#main-menu .nav-sidebar > li.has-child > button.toggle:hover,
	#main-menu .nav-sidebar > li.menu-item-has-children > button.toggle:hover,
	#main-menu .nav-sidebar > li.has-child.active > button.toggle {
		background: rgba(255, 255, 255, 0.24) !important;
		border-color: rgba(255, 255, 255, 0.28) !important;
	}

	#main-menu .nav-sidebar > li.has-child > button.toggle i,
	#main-menu .nav-sidebar > li.menu-item-has-children > button.toggle i,
	#main-menu .nav-sidebar > li.has-child > button.toggle i::before,
	#main-menu .nav-sidebar > li.menu-item-has-children > button.toggle i::before {
		color: #fff !important;
		opacity: 1;
		font-size: 1.35em;
		line-height: 1;
		transition: transform 0.25s ease;
	}

	#main-menu .nav-sidebar > li.has-child.active > button.toggle i {
		transform: rotate(180deg);
	}

	#main-menu .nav-sidebar > li.has-child > ul.sub-menu,
	#main-menu .nav-sidebar > li.has-child > ul.children,
	#main-menu .nav-sidebar > li.menu-item-has-children > ul {
		flex: 0 0 100%;
		width: 100%;
		margin-top: 0;
	}

	#main-menu .header-search-form .ux-search-submit {
		background: var(--phonez-primary, #1e73be) !important;
		color: #fff !important;
	}

	#main-menu .header-search-form .ux-search-submit .icon-search {
		color: #fff !important;
		opacity: 1;
	}
}

/* Fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header-main {
		background: #1a5f9e !important;
	}

	.header-main .nav-dropdown {
		background: #fff !important;
	}
}