/* =====================================================================
   MEGA MENU "Danh mục" — dùng chung TOÀN SITE (luôn tải, thuộc header)
   Menu dọc của Flatsome (location 'vertical'). Cấu trúc item:
   cấp 1 = nhóm · li.mega-head / li.mega-all = hàng tiêu đề · cấp 2 = cột · cấp 3 = link
   ===================================================================== */
.header-vertical-menu__opener { background: rgba(0,0,0,.15); border-radius: 8px; color: var(--gv-white); font-weight: 600; margin-right: 12px; padding: 0 14px; width: auto; }
.header-vertical-menu__fly-out { z-index: 60; background: var(--gv-white); border: 1px solid var(--gv-border-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); width: 260px; padding: 6px 0; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li { border-top: 0; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a { color: var(--gv-ink); font-size: 14px; font-weight: 500; padding: 9px 16px; text-transform: none; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li:hover > a { background: var(--gv-primary-soft); color: var(--gv-primary); }
.header-vertical-menu__fly-out .nav-dropdown { background: var(--gv-white); border: 1px solid var(--gv-border-2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); color: var(--gv-text-2); }

/* Panel: lưới 4 cột, co giãn theo màn hình */
.header-vertical-menu__fly-out .nav-vertical-fly-out > li:hover > .nav-dropdown,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.current-dropdown > .nav-dropdown {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; align-content: start;
	padding: 24px 28px 28px; border-radius: 14px; min-height: 100%;
	width: clamp(640px, calc(100vw - 680px), 920px) !important; /* ghi đè width inline của menu item */
}
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > .nav-dropdown { max-height: calc(100vh - 120px); overflow-y: auto; }
.header-vertical-menu__fly-out .nav-dropdown > li { float: none; width: auto; margin: 0; padding: 0; border: 0; }

/* Hàng tiêu đề: tên nhóm (trái) + Xem tất cả (phải) */
.header-vertical-menu__fly-out .nav-dropdown > li.mega-head { grid-column: 1 / 4; margin-bottom: 22px; }
.header-vertical-menu__fly-out .nav-dropdown > li.mega-all { grid-column: 4; margin-bottom: 22px; text-align: right; }
.header-vertical-menu__fly-out .nav-dropdown > li.mega-head > a { font-size: 22px; font-weight: 700; color: var(--gv-text); padding: 0; border: 0; text-transform: none; }
.header-vertical-menu__fly-out .nav-dropdown > li.mega-all > a { font-size: 13px; font-weight: 600; color: var(--gv-accent); padding: 0; border: 0; text-transform: none; }
.header-vertical-menu__fly-out .nav-dropdown > li.mega-all > a:after { content: " \203A"; }

/* Cột + link */
.header-vertical-menu__fly-out .nav-dropdown > li.nav-dropdown-col { margin-bottom: 22px; }
.header-vertical-menu__fly-out .nav-dropdown > li.nav-dropdown-col > a { display: block; font-size: 14px; font-weight: 700; color: var(--gv-ink); text-transform: none; padding: 0 0 10px; border: 0; }
.header-vertical-menu__fly-out .nav-dropdown > li.nav-dropdown-col > a:after { content: " \203A"; color: var(--gv-muted-2); font-weight: 400; }
.header-vertical-menu__fly-out .nav-dropdown .nav-column { padding: 0; margin: 0; }
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li { border: 0; margin: 0; }
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li > a { display: block; font-size: 14px; font-weight: 400; color: var(--gv-text-2); text-transform: none; padding: 6px 0; border: 0; }
.header-vertical-menu__fly-out .nav-dropdown .nav-column > li > a:hover { color: var(--gv-primary); }

/* ---- Menu mobile (ngăn kéo): tab Menu | Danh mục, danh mục trượt 3 cấp ----
   Bật bằng Flatsome → Header → Mobile: Sidebar tabs (tab 2 = nav-vertical), hiệu ứng "Slide", 3 cấp (theme_mod mobile_submenu_levels).
   Ảnh nhỏ cấp 1: .gv-menu-thumb (inc/mobile-menu.php), ẩn ở desktop. */
.gv-menu-thumb { display: none; }
#main-menu.mobile-sidebar { background: var(--gv-white); }

/* Tab */
.mobile-sidebar .sidebar-menu-tabs { margin: 0; padding: 10px 14px; gap: 6px; border: 0; background: var(--gv-white); }
.mobile-sidebar .sidebar-menu-tabs__tab { flex: 1; margin: 0; border: 0 !important; text-align: center; }
.mobile-sidebar .sidebar-menu-tabs__tab-link { display: block; padding: 10px 8px; border-radius: 99px; background: var(--gv-bg); color: var(--gv-text-2); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mobile-sidebar .sidebar-menu-tabs__tab-link:before, .mobile-sidebar .sidebar-menu-tabs__tab-link:after { display: none !important; }
.mobile-sidebar .sidebar-menu-tabs__tab.active .sidebar-menu-tabs__tab-link { background: var(--gv-primary); color: var(--gv-white); }

/* Hàng chung */
.mobile-sidebar .nav-sidebar > li, .mobile-sidebar .nav-sidebar .sub-menu > li { border-color: var(--gv-border-soft); }
.mobile-sidebar .nav-sidebar > li > a, .mobile-sidebar .nav-sidebar .sub-menu > li > a { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 6px 8px 14px; border: 0; color: var(--gv-text); font-size: 14px; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; }
.mobile-sidebar .nav-sidebar li > a:active { background: var(--gv-bg); }

/* Mũi tên mở cấp tiếp: nút tròn xám */
.mobile-sidebar .nav-sidebar li:not(.nav-slide-header) > button.toggle { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0; padding: 0; opacity: 1; color: var(--gv-muted); }
.mobile-sidebar .nav-sidebar li:not(.nav-slide-header) > button.toggle i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gv-bg); font-size: 14px; opacity: 1; }

/* Cấp 1: ảnh danh mục */
.mobile-sidebar .nav-sidebar li > a > span { flex: 1; min-width: 0; }
.mobile-sidebar .gv-menu-thumb { display: block; flex: none; width: 36px; height: 36px; padding: 3px; border: 1px solid var(--gv-border); border-radius: 10px; background: var(--gv-white); object-fit: contain; }

/* Thanh quay lại ở đầu mỗi cấp */
.mobile-sidebar .nav-slide-header { position: sticky; top: 0; z-index: 2; margin: 0; padding: 0 !important; border-bottom: 1px solid var(--gv-border); background: var(--gv-white); }
.mobile-sidebar .nav-slide-header > button.toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; padding: 0 14px; border: 0; background: none; color: var(--gv-text); font-size: 16px; font-weight: 800; text-transform: none; text-align: left; opacity: 1; }
.mobile-sidebar .nav-slide-header > button.toggle i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gv-bg); color: var(--gv-accent); font-size: 16px; opacity: 1; }

/* Cấp 2 */
.mobile-sidebar .nav-sidebar .sub-menu > li > a { font-weight: 500; font-size: 14px; color: var(--gv-text-2) !important; }
.mobile-sidebar .nav-sidebar .mega-head { display: none !important; }  /* tiêu đề lặp của mega menu desktop */
.mobile-sidebar .nav-sidebar .mega-all { padding: 10px 14px 6px; border: 0 !important; }
.mobile-sidebar .nav-sidebar .mega-all > a { justify-content: center; min-height: 44px !important; padding: 0 16px !important; border-radius: 10px; background: var(--gv-primary-soft); color: var(--gv-accent) !important; font-weight: 700 !important; }
.mobile-sidebar .nav-sidebar .mega-col > a { color: var(--gv-text) !important; font-weight: 700 !important; }

/* Cấp 3: link cuối, chữ thường, gọn */
.mobile-sidebar .nav-sidebar .sub-menu .sub-menu > li > a { min-height: 48px; padding-left: 14px; font-size: 15px; font-weight: 400; color: var(--gv-text-2); }
.mobile-sidebar .nav-sidebar .sub-menu .sub-menu > li > a:before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gv-border-3); }
/* Flatsome ép .nav-uppercase → viết thường cho mọi cấp trong ngăn kéo */
.mobile-sidebar .nav-sidebar a, .mobile-sidebar .nav-sidebar button { text-transform: none !important; }