/* Mobile menu - sử dụng mặc định của Flatsome theme */
/* ========== MOBILE MENU OVERLAY – GLASSMORPHISM (center overlay) ==========
 * Flatsome render menu mobile dạng "center overlay": trượt từ trên xuống.
 * Lớp kính = nền .mfp-bg (mặc định trắng đục 95%) -> đổi sang trong + blur.
 * KHÔNG đụng tới vị trí/animation/đóng của theme, chỉ chỉnh phần nhìn.
 */
@media only screen and (max-width: 849px) {

	/* Lớp kính mờ xuyên thấu – màng trắng mỏng, nhìn rõ nội dung phía sau */
	.mfp-bg.off-canvas-center,
	.off-canvas-center.mfp-bg.mfp-ready {
		background-color: rgba(255, 255, 255, 0.22) !important;
		opacity: 1 !important;
		-webkit-backdrop-filter: blur(14px) saturate(200%);
		backdrop-filter: blur(14px) saturate(200%);
	}

	/* Vùng nội dung menu: giữ trong suốt để thấy lớp kính, thêm chút padding */
	.off-canvas-center .mfp-content {
		background: transparent !important;
		padding-top: 0 !important;
	}

	.off-canvas-center #main-menu.mobile-sidebar {
		background: transparent !important;
	}

	.off-canvas-center .sidebar-menu {
		padding: 56px 18px 32px !important;
	}

	/* ----- Ô tìm kiếm: pill kính, nút tròn primary (giữ nút absolute của theme) ----- */
	.off-canvas-center .mfp-content .searchform,
	.off-canvas-center .mfp-content .searchform-wrapper {
		max-width: 360px !important;
		margin: 0 auto 24px !important;
	}

	.off-canvas-center .mfp-content form.searchform,
	.off-canvas-center .mfp-content .searchform {
		position: relative !important;
		display: block !important;
		padding: 0 !important;
		background: rgba(255, 255, 255, 0.75);
		-webkit-backdrop-filter: blur(12px) saturate(160%);
		backdrop-filter: blur(12px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 999px !important;
		box-shadow: 0 10px 28px rgba(40, 123, 56, 0.14);
	}

	.off-canvas-center .mfp-content form.searchform input.search-field,
	.off-canvas-center .mfp-content .searchform input[type="search"],
	.off-canvas-center .mfp-content .searchform input[type="text"] {
		display: block !important;
		width: 100% !important;
		height: 50px !important;
		margin: 0 !important;
		padding: 0 58px 0 22px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 999px !important;
		box-shadow: none !important;
		font-size: 0.95rem;
		line-height: 50px;
		color: var(--uten-text-main, #333333);
		text-align: left;
	}

	.off-canvas-center .mfp-content .searchform input::placeholder {
		color: #6b8070;
		opacity: 1;
	}

	.off-canvas-center .mfp-content .searchform input:focus {
		outline: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.off-canvas-center .mfp-content .searchform .ux-search-submit,
	.off-canvas-center .mfp-content .searchform button[type="submit"],
	.off-canvas-center .mfp-content .searchform .submit-button,
	.off-canvas-center .mfp-content .searchform button.icon {
		position: absolute !important;
		top: 50% !important;
		right: 5px !important;
		transform: translateY(-50%);
		width: 42px !important;
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 50% !important;
		background: linear-gradient(135deg, var(--uten-primary, #287b38), #1a5225) !important;
		color: #fff !important;
		box-shadow: 0 6px 16px color-mix(in srgb, var(--uten-primary, #287b38) 35%, transparent) !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.off-canvas-center .mfp-content .searchform .ux-search-submit:hover,
	.off-canvas-center .mfp-content .searchform button[type="submit"]:hover {
		transform: translateY(-50%) scale(1.06);
		box-shadow: 0 10px 22px color-mix(in srgb, var(--uten-primary, #287b38) 45%, transparent) !important;
	}

	.off-canvas-center .mfp-content .searchform .ux-search-submit i,
	.off-canvas-center .mfp-content .searchform button[type="submit"] i,
	.off-canvas-center .mfp-content .searchform .ux-search-submit svg {
		font-size: 16px;
		color: #fff !important;
	}

	/* ----- Danh sách menu: giữ căn giữa của theme, chữ phẳng + kẻ mảnh ----- */
	.off-canvas-center .nav-sidebar.nav-vertical {
		max-width: 360px;
		margin: 0 auto;
	}

	.off-canvas-center .nav-sidebar.nav-vertical > li {
		border: none !important;
	}

	.off-canvas-center .nav-sidebar.nav-vertical > li + li {
		border-top: 1px solid rgba(40, 123, 56, 0.1) !important;
	}

	.off-canvas-center .nav-sidebar.nav-vertical > li > a {
		justify-content: center;
		padding: 16px 18px !important;
		margin: 4px 0;
		border-radius: 14px;
		color: var(--uten-text-main, #333333) !important;
		font-size: 0.88em !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em;
		transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
	}

	.off-canvas-center .nav-sidebar.nav-vertical > li > a:hover,
	.off-canvas-center .nav-sidebar.nav-vertical > li.active > a,
	.off-canvas-center .nav-sidebar.nav-vertical > li.current-menu-item > a,
	.off-canvas-center .nav-sidebar.nav-vertical > li.current-menu-parent > a {
		background: rgba(255, 255, 255, 0.65) !important;
		color: var(--uten-primary, #287b38) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7),
			0 8px 22px color-mix(in srgb, var(--uten-primary, #287b38) 16%, transparent);
	}

	/* Mũi tên mở submenu */
	.off-canvas-center .nav-sidebar.nav-vertical > li .toggle {
		color: var(--uten-text-main, #333333);
	}

	.off-canvas-center .nav-sidebar.nav-vertical > li.active > a .toggle,
	.off-canvas-center .nav-sidebar.nav-vertical > li > a:hover .toggle {
		color: var(--uten-primary, #287b38);
	}

	/* Submenu lồng (nếu có) – khung kính nhẹ */
	.off-canvas-center .nav-sidebar.nav-vertical ul.children,
	.off-canvas-center .nav-sidebar.nav-vertical ul.sub-menu {
		background: rgba(255, 255, 255, 0.4);
		border-radius: 12px;
		margin: 4px 0 8px;
		padding: 6px 0;
	}

	.off-canvas-center .nav-sidebar.nav-vertical ul.children > li > a,
	.off-canvas-center .nav-sidebar.nav-vertical ul.sub-menu > li > a {
		font-size: 0.95em !important;
		color: #555555 !important;
	}

	/* ----- Nút đóng (X): tròn, kính ----- */
	.off-canvas-center .mfp-close,
	.off-canvas-center.mfp-bg ~ .mfp-wrap .mfp-close {
		position: fixed !important;
		top: 12px !important;
		right: 12px !important;
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.85) !important;
		-webkit-backdrop-filter: blur(10px) saturate(160%);
		backdrop-filter: blur(10px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.9) !important;
		box-shadow: 0 8px 22px rgba(40, 123, 56, 0.18) !important;
		color: var(--uten-text-main, #333333) !important;
		opacity: 1 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
		z-index: 1100;
	}

	.off-canvas-center .mfp-close svg {
		width: 22px;
		height: 22px;
		stroke-width: 2.4;
		color: var(--uten-text-main, #333333);
	}

	.off-canvas-center .mfp-close:hover {
		background: #fff !important;
		transform: rotate(90deg);
		box-shadow: 0 12px 28px rgba(40, 123, 56, 0.22) !important;
	}

	/* Fallback cho trình duyệt không hỗ trợ backdrop-filter */
	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.mfp-bg.off-canvas-center,
		.off-canvas-center.mfp-bg.mfp-ready {
			background-color: rgba(255, 255, 255, 0.96) !important;
		}
	}

}

/* ========== MOBILE MENU DRAWER (LEFT / RIGHT) – GLASSMORPHISM ==========
 * Áp dụng khi cài đặt menu mobile sang kiểu trượt trái/phải.
 * Giữ nguyên vị trí, animation, kích thước của theme, chỉ đổi nền + style.
 */
@media only screen and (max-width: 849px) {

	/* Backdrop: tối nhẹ + blur để nhìn xuyên thấu */
	.off-canvas-left .mfp-bg,
	.off-canvas-right .mfp-bg,
	.off-canvas-left.mfp-bg.mfp-ready,
	.off-canvas-right.mfp-bg.mfp-ready {
		background-color: rgba(26, 82, 37, 0.35) !important;
		opacity: 1 !important;
		-webkit-backdrop-filter: blur(6px) saturate(160%);
		backdrop-filter: blur(6px) saturate(160%);
	}

	/* Panel drawer: kính mờ xuyên thấu (thay vì nền trắng đục 95%) */
	.off-canvas-left .mfp-content,
	.off-canvas-right .mfp-content {
		background: rgba(255, 255, 255, 0.22) !important;
		-webkit-backdrop-filter: blur(18px) saturate(200%);
		backdrop-filter: blur(18px) saturate(200%);
		border: none !important;
		box-shadow: 0 0 50px rgba(26, 82, 37, 0.25) !important;
	}

	/* Sidebar menu bên trong panel */
	.off-canvas-left .sidebar-menu,
	.off-canvas-right .sidebar-menu {
		padding: 56px 0 32px !important;
		background: transparent !important;
	}

	/* Ô tìm kiếm: pill kính – chiếm hết chiều ngang panel */
	.off-canvas-left .mfp-content .searchform-wrapper,
	.off-canvas-right .mfp-content .searchform-wrapper,
	.off-canvas-left .mfp-content .ux-search-box,
	.off-canvas-right .mfp-content .ux-search-box {
		margin: 0 0 18px !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.off-canvas-left .mfp-content form.searchform,
	.off-canvas-right .mfp-content form.searchform,
	.off-canvas-left .mfp-content .searchform,
	.off-canvas-right .mfp-content .searchform {
		position: relative !important;
		display: block !important;
		padding: 0 !important;
		background: rgba(255, 255, 255, 0.65);
		-webkit-backdrop-filter: blur(10px) saturate(160%);
		backdrop-filter: blur(10px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 999px !important;
		box-shadow: 0 8px 20px rgba(40, 123, 56, 0.12);
	}

	.off-canvas-left .mfp-content form.searchform input.search-field,
	.off-canvas-right .mfp-content form.searchform input.search-field,
	.off-canvas-left .mfp-content .searchform input[type="search"],
	.off-canvas-right .mfp-content .searchform input[type="search"],
	.off-canvas-left .mfp-content .searchform input[type="text"],
	.off-canvas-right .mfp-content .searchform input[type="text"] {
		display: block !important;
		width: 100% !important;
		height: 48px !important;
		margin: 0 !important;
		padding: 0 54px 0 18px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 999px !important;
		box-shadow: none !important;
		font-size: 0.93rem;
		line-height: 48px;
		color: var(--uten-text-main, #333333);
	}

	.off-canvas-left .mfp-content .searchform input::placeholder,
	.off-canvas-right .mfp-content .searchform input::placeholder {
		color: #6b8070;
		opacity: 1;
	}

	.off-canvas-left .mfp-content .searchform input:focus,
	.off-canvas-right .mfp-content .searchform input:focus {
		outline: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.off-canvas-left .mfp-content .searchform .ux-search-submit,
	.off-canvas-right .mfp-content .searchform .ux-search-submit,
	.off-canvas-left .mfp-content .searchform button[type="submit"],
	.off-canvas-right .mfp-content .searchform button[type="submit"] {
		position: absolute !important;
		top: 50% !important;
		right: 4px !important;
		transform: translateY(-50%);
		width: 40px !important;
		height: 40px !important;
		min-height: 40px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 50% !important;
		background: linear-gradient(135deg, var(--uten-primary, #287b38), #1a5225) !important;
		color: #fff !important;
		box-shadow: 0 6px 14px color-mix(in srgb, var(--uten-primary, #287b38) 35%, transparent) !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.off-canvas-left .mfp-content .searchform .ux-search-submit:hover,
	.off-canvas-right .mfp-content .searchform .ux-search-submit:hover,
	.off-canvas-left .mfp-content .searchform button[type="submit"]:hover,
	.off-canvas-right .mfp-content .searchform button[type="submit"]:hover {
		transform: translateY(-50%) scale(1.06);
		box-shadow: 0 10px 20px color-mix(in srgb, var(--uten-primary, #287b38) 45%, transparent) !important;
	}

	.off-canvas-left .mfp-content .searchform .ux-search-submit i,
	.off-canvas-right .mfp-content .searchform .ux-search-submit i,
	.off-canvas-left .mfp-content .searchform .ux-search-submit svg,
	.off-canvas-right .mfp-content .searchform .ux-search-submit svg {
		font-size: 16px;
		color: #fff !important;
	}

	/* Danh sách menu: chữ phẳng + kẻ mảnh + hover kính */
	.off-canvas-left .nav-sidebar.nav-vertical > li,
	.off-canvas-right .nav-sidebar.nav-vertical > li {
		border: none !important;
	}

	.off-canvas-left .nav-sidebar.nav-vertical > li + li,
	.off-canvas-right .nav-sidebar.nav-vertical > li + li {
		border-top: 1px solid rgba(212, 232, 212, 0.75) !important;
	}

	.off-canvas-left .nav-sidebar.nav-vertical > li > a,
	.off-canvas-right .nav-sidebar.nav-vertical > li > a {
		padding: 15px 20px !important;
		margin: 3px 10px;
		border-radius: 12px;
		color: var(--uten-text-main, #333333) !important;
		font-size: 0.88em !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em;
		transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
	}

	.off-canvas-left .nav-sidebar.nav-vertical > li > a:hover,
	.off-canvas-left .nav-sidebar.nav-vertical > li.active > a,
	.off-canvas-left .nav-sidebar.nav-vertical > li.current-menu-item > a,
	.off-canvas-left .nav-sidebar.nav-vertical > li.current-menu-parent > a,
	.off-canvas-right .nav-sidebar.nav-vertical > li > a:hover,
	.off-canvas-right .nav-sidebar.nav-vertical > li.active > a,
	.off-canvas-right .nav-sidebar.nav-vertical > li.current-menu-item > a,
	.off-canvas-right .nav-sidebar.nav-vertical > li.current-menu-parent > a {
		background: rgba(255, 255, 255, 0.55) !important;
		color: var(--uten-primary, #287b38) !important;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
			0 6px 16px color-mix(in srgb, var(--uten-primary, #287b38) 14%, transparent);
	}

	/* Mũi tên submenu */
	.off-canvas-left .nav-sidebar.nav-vertical > li .toggle,
	.off-canvas-right .nav-sidebar.nav-vertical > li .toggle {
		color: var(--uten-text-main, #333333);
	}

	.off-canvas-left .nav-sidebar.nav-vertical > li.active > a .toggle,
	.off-canvas-left .nav-sidebar.nav-vertical > li > a:hover .toggle,
	.off-canvas-right .nav-sidebar.nav-vertical > li.active > a .toggle,
	.off-canvas-right .nav-sidebar.nav-vertical > li > a:hover .toggle {
		color: var(--uten-primary, #287b38);
	}

	/* Submenu lồng */
	.off-canvas-left .nav-sidebar.nav-vertical ul.children,
	.off-canvas-left .nav-sidebar.nav-vertical ul.sub-menu,
	.off-canvas-right .nav-sidebar.nav-vertical ul.children,
	.off-canvas-right .nav-sidebar.nav-vertical ul.sub-menu {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 10px;
		margin: 4px 10px 8px;
		padding: 6px 0;
	}

	.off-canvas-left .nav-sidebar.nav-vertical ul.children > li > a,
	.off-canvas-left .nav-sidebar.nav-vertical ul.sub-menu > li > a,
	.off-canvas-right .nav-sidebar.nav-vertical ul.children > li > a,
	.off-canvas-right .nav-sidebar.nav-vertical ul.sub-menu > li > a {
		font-size: 0.92em !important;
		color: #555555 !important;
		padding-left: 22px !important;
	}

	/* Nút đóng (X): tròn, kính – ghim cố định */
	.off-canvas-left .mfp-close,
	.off-canvas-right .mfp-close {
		position: fixed !important;
		top: 12px !important;
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.85) !important;
		-webkit-backdrop-filter: blur(10px) saturate(160%);
		backdrop-filter: blur(10px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, 0.9) !important;
		box-shadow: 0 8px 22px rgba(40, 123, 56, 0.18) !important;
		color: var(--uten-text-main, #333333) !important;
		opacity: 1 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
		z-index: 1100;
	}

	/* Drawer trái: nút X nằm phải (trong panel) */
	.off-canvas-left .mfp-close {
		right: 12px !important;
		left: auto !important;
	}

	/* Drawer phải: nút X nằm trái (trong panel) */
	.off-canvas-right .mfp-close {
		left: 12px !important;
		right: auto !important;
	}

	.off-canvas-left .mfp-close svg,
	.off-canvas-right .mfp-close svg {
		width: 22px;
		height: 22px;
		stroke-width: 2.4;
		color: var(--uten-text-main, #333333);
	}

	.off-canvas-left .mfp-close:hover,
	.off-canvas-right .mfp-close:hover {
		background: #fff !important;
		transform: rotate(90deg);
		box-shadow: 0 12px 28px rgba(40, 123, 56, 0.22) !important;
	}

	/* Fallback */
	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.off-canvas-left .mfp-content,
		.off-canvas-right .mfp-content {
			background: rgba(255, 255, 255, 0.95) !important;
		}
		.off-canvas-left .mfp-bg,
		.off-canvas-right .mfp-bg {
			background-color: rgba(26, 82, 37, 0.65) !important;
		}
	}

}