/*
 * G Dynamic Flatsome Menu - Mobile compatibility & Liquid Glass
 * Mục tiêu: bám cách hiển thị native của Flatsome, chỉ tinh chỉnh ngoại hình.
 */
@media (max-width: 849px) {
	body.gdfm-mobile-menu-enabled .mfp-bg,
	body.gdfm-mobile-menu-enabled .mfp-wrap.gdfm-main-menu-wrap {
		z-index: 999990 !important;
	}

	body.gdfm-mobile-menu-enabled .mfp-wrap.gdfm-main-menu-wrap .mfp-container,
	body.gdfm-mobile-menu-enabled .mfp-wrap.gdfm-main-menu-wrap .mfp-content {
		z-index: 999991 !important;
	}

	body.gdfm-mobile-menu-enabled .mfp-wrap.gdfm-main-menu-wrap .mfp-content {
		width: min(var(--gdfm-mobile-panel-width, 290px), 88vw) !important;
		max-width: min(var(--gdfm-mobile-panel-width, 290px), 88vw) !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu.mobile-sidebar {
		position: relative;
		width: min(var(--gdfm-mobile-panel-width, 290px), 88vw) !important;
		min-height: 100%;
		background:
			radial-gradient(circle at 14% 4%, rgba(255,255,255,.16), transparent 30%),
			linear-gradient(var(--gdfm-mobile-gradient-angle, 160deg),
				rgba(var(--gdfm-mobile-accent-rgb, 0,121,174), var(--gdfm-mobile-glass-opacity, .90)) 0%,
				rgba(var(--gdfm-mobile-accent-end-rgb, 3,47,69), .96) 62%,
				rgba(2, 16, 25, .98) 100%) !important;
		-webkit-backdrop-filter: blur(var(--gdfm-mobile-glass-blur, 24px)) saturate(175%);
		backdrop-filter: blur(var(--gdfm-mobile-glass-blur, 24px)) saturate(175%);
		border-left: 1px solid rgba(255, 255, 255, calc(var(--gdfm-mobile-divider-opacity, .16) + .04));
		border-radius: var(--gdfm-mobile-panel-radius, 0) 0 0 var(--gdfm-mobile-panel-radius, 0);
		box-shadow: -18px 0 52px rgba(0, 22, 35, var(--gdfm-mobile-shadow-opacity, .42)), inset 1px 0 rgba(255,255,255,.08);
		isolation: isolate;
		overflow: hidden;
	}

	body.gdfm-mobile-menu-enabled #main-menu.mobile-sidebar::before,
	body.gdfm-mobile-menu-enabled #main-menu.mobile-sidebar::after {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: 0;
	}

	body.gdfm-mobile-menu-enabled #main-menu.mobile-sidebar::before {
		inset: 0;
		background:
			linear-gradient(116deg, rgba(255,255,255,.12), transparent 28%, rgba(255,255,255,.04) 52%, transparent 78%),
			radial-gradient(circle at 82% 16%, rgba(148,231,255,.12), transparent 33%);
		mix-blend-mode: screen;
	}

	body.gdfm-mobile-menu-enabled #main-menu.mobile-sidebar::after {
		width: 180px;
		height: 180px;
		right: -92px;
		bottom: 12%;
		border-radius: 50%;
		background: rgba(var(--gdfm-mobile-accent-rgb, 0,121,174), .24);
		filter: blur(40px);
	}

	body.gdfm-mobile-menu-enabled #main-menu .sidebar-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li {
		position: relative;
		z-index: 1;
		background: transparent !important;
		margin: 0 !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar {
		padding: 0 !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li {
		border-bottom: 1px solid rgba(255,255,255, var(--gdfm-mobile-divider-opacity, .16)) !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li:last-child,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li:last-child {
		border-bottom: 0 !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li {
		min-height: var(--gdfm-mobile-item-height, 50px);
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li > a,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li > a {
		display: flex !important;
		align-items: center !important;
		min-height: var(--gdfm-mobile-item-height, 50px);
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-right: 16px !important;
		text-decoration: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li > a {
		padding-left: 16px !important;
		color: rgba(255,255,255,.96) !important;
		font-weight: 600;
		text-shadow: 0 1px 1px rgba(0, 22, 32, .35);
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li > a {
		padding-left: 28px !important;
		color: rgba(255,255,255,.84) !important;
		font-size: .95em;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li:hover > a,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.active > a,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-menu-item > a,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-menu-parent > a,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-menu-ancestor > a {
		color: #fff !important;
		background: linear-gradient(90deg, rgba(var(--gdfm-mobile-accent-rgb, 0,121,174), var(--gdfm-mobile-hover-opacity, .16)), rgba(255,255,255,.03)) !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > a {
		padding-right: calc(var(--gdfm-mobile-item-height, 50px) + 12px) !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > .toggle {
		position: absolute !important;
		top: 0 !important;
		right: 4px !important;
		z-index: 4;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: var(--gdfm-mobile-item-height, 50px) !important;
		height: var(--gdfm-mobile-item-height, 50px) !important;
		min-width: var(--gdfm-mobile-item-height, 50px) !important;
		min-height: var(--gdfm-mobile-item-height, 50px) !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: rgba(255,255,255,.72) !important;
		line-height: 1 !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > .toggle:focus,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > .toggle:hover {
		background: transparent !important;
		color: #fff !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > .toggle i,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.menu-item-has-children > .toggle .icon-angle-down {
		display: block !important;
		width: var(--gdfm-mobile-icon-size, 18px) !important;
		height: var(--gdfm-mobile-icon-size, 18px) !important;
		margin: 0 !important;
		font-size: var(--gdfm-mobile-icon-size, 18px) !important;
		line-height: var(--gdfm-mobile-icon-size, 18px) !important;
		text-align: center;
		transform-origin: 50% 50%;
		transition: transform .2s ease, color .2s ease;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.active > .toggle i,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-dropdown > .toggle i,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.active > .toggle .icon-angle-down,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-dropdown > .toggle .icon-angle-down {
		transform: rotate(180deg);
		color: #fff;
	}

	body.gdfm-mobile-menu-enabled #main-menu li.g-dynamic-submenu > a > .icon-angle-down {
		display: none !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .sub-menu::before,
	body.gdfm-mobile-menu-enabled #main-menu .sub-menu::after,
	body.gdfm-mobile-menu-enabled #main-menu .nav-dropdown::before,
	body.gdfm-mobile-menu-enabled #main-menu .nav-dropdown::after,
	body.gdfm-mobile-menu-enabled #main-menu li.current-menu-item::before,
	body.gdfm-mobile-menu-enabled #main-menu li.current-menu-item::after {
		content: none !important;
		display: none !important;
		border: 0 !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		display: none;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.active > .sub-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.current-dropdown > .sub-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar > li.gdfm-force-open > .sub-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li.active > .sub-menu,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li.current-dropdown > .sub-menu {
		display: block !important;
	}

	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li > a:hover,
	body.gdfm-mobile-menu-enabled #main-menu .nav-sidebar .sub-menu > li.current-menu-item > a {
		background: rgba(255,255,255,.03) !important;
		color: #fff !important;
	}

	body.gdfm-mobile-menu-overlay-header .mfp-wrap.gdfm-main-menu-wrap.off-canvas,
	body.gdfm-mobile-menu-overlay-header .mfp-wrap.gdfm-main-menu-wrap.off-canvas-right,
	body.gdfm-mobile-menu-overlay-header .mfp-wrap.gdfm-main-menu-wrap.off-canvas-left {
		top: 0 !important;
		height: 100dvh !important;
		z-index: 1000000 !important;
	}

	body.gdfm-mobile-menu-overlay-header .mfp-wrap.gdfm-main-menu-wrap .mfp-container,
	body.gdfm-mobile-menu-overlay-header .mfp-wrap.gdfm-main-menu-wrap .mfp-content {
		top: 0 !important;
		bottom: 0 !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		z-index: 1000001 !important;
	}

	body.gdfm-mobile-menu-overlay-header #main-menu.mobile-sidebar {
		min-height: 100dvh !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + var(--gdfm-mobile-top-space, 64px)) !important;
	}

	body.gdfm-mobile-menu-overlay-header #main-menu .sidebar-menu {
		min-height: calc(100dvh - var(--gdfm-mobile-top-space, 64px));
	}

	body.gdfm-mobile-menu-enabled .gdfm-mobile-close {
		position: absolute;
		top: calc(env(safe-area-inset-top, 0px) + 10px);
		right: 12px;
		z-index: 12;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(255,255,255,.24);
		border-radius: 13px;
		background: rgba(255,255,255,.12);
		-webkit-backdrop-filter: blur(14px) saturate(170%);
		backdrop-filter: blur(14px) saturate(170%);
		box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(0,20,31,.22);
		color: #fff;
		cursor: pointer;
	}

	body.gdfm-mobile-menu-enabled .gdfm-mobile-close::before,
	body.gdfm-mobile-menu-enabled .gdfm-mobile-close::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
	}

	body.gdfm-mobile-menu-enabled .gdfm-mobile-close::before { transform: rotate(45deg); }
	body.gdfm-mobile-menu-enabled .gdfm-mobile-close::after  { transform: rotate(-45deg); }

	@media (prefers-reduced-motion: reduce) {
		body.gdfm-mobile-menu-enabled #main-menu *,
		body.gdfm-mobile-menu-enabled #main-menu *::before,
		body.gdfm-mobile-menu-enabled #main-menu *::after {
			transition-duration: .01ms !important;
			animation-duration: .01ms !important;
		}
	}
}