/* Menu danh mục dọc (OT Vertical Menu): panel mega kiểu Tin Học Ngôi Sao khi rê vào mục cấp 1 (desktop) */
@media (min-width: 850px) {
	#mega_menu { --hp-vm-panel: 900px; }
	#mega_menu > li > a { padding: .6em 1em; font-size: 14px; color: #222; }
	#mega_menu > li:hover, #mega_menu > li.sfHover { background: #fff1f1; }
	#mega_menu > li:hover > a, #mega_menu > li.sfHover > a { color: #e30613; font-weight: 600; }
	.sf-vertical.sf-arrows > li:hover > .sf-with-ul:after, .sf-vertical.sf-arrows > .sfHover > .sf-with-ul:after { border-left-color: #e30613; }
	/* Panel cấp 2: rộng, nhiều cột */
	#mega_menu > li > ul.sub-menu {
		display: none; position: absolute; left: 100%; top: 0; z-index: 99; box-sizing: border-box;
		width: var(--hp-vm-panel); min-height: 100%; padding: 18px 22px 12px; background: #fff;
		border: 1px solid #eee; border-left: 3px solid #e30613; box-shadow: 8px 8px 24px rgba(0, 0, 0, .12);
		flex-wrap: wrap; align-content: flex-start; gap: 6px 0; white-space: normal;
	}
	/* !important: superfish (JS plugin) gán inline display:block khi rê chuột, đè display:flex → các nhóm xếp dọc 1 cột */
	#mega_menu > li > ul.sub-menu { display: none !important; } /* superfish giữ inline display:block ~0.8s sau khi rời → ẩn cứng */
	#mega_menu > li:hover > ul.sub-menu, #mega_menu > li.sfHover > ul.sub-menu { display: flex !important; opacity: 1 !important; visibility: visible !important; height: auto !important; }
	/* Mỗi nhóm = 1 cột */
	#mega_menu > li > ul.sub-menu > li { width: 25%; padding: 0 14px 12px 0; box-sizing: border-box; background: none; float: none; }
	#mega_menu > li > ul.sub-menu > li:hover { background: none; }
	#mega_menu > li > ul.sub-menu > li > a { display: block; padding: 0 0 6px; margin-bottom: 6px; border: 0; border-bottom: 1px solid #f0f0f0; font-weight: 700; font-size: 13px; text-transform: uppercase; color: #e30613; }
	#mega_menu > li > ul.sub-menu > li > a:hover { background: none; text-decoration: underline; }
	#mega_menu > li > ul.sub-menu > li > a.sf-with-ul { padding-right: 0; }
	#mega_menu > li > ul.sub-menu > li > a.sf-with-ul:after { display: none; }
	#mega_menu > li > ul.sub-menu > li > a > img { display: none; } /* icon danh mục chỉ ở cấp 1 */
	/* Mục con cấp 3: danh sách tĩnh trong cột */
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu { display: block !important; position: static; box-shadow: none; min-width: 0; background: none; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li { background: none; white-space: normal; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li > a { border: 0; padding: 3px 0; font-size: 13px; color: #333; line-height: 1.4; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover { background: none; color: #e30613; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li > a.sf-with-ul { padding-right: 0; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li > a.sf-with-ul:after { display: none; }
	/* Cấp 4 trở xuống: ẩn trong panel */
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu ul { display: none !important; }
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu > li > a > img { display: none; }
	/* Nhóm nhiều mục con: cột cao hơn thì cho cuộn nhẹ */
	#mega_menu > li > ul.sub-menu > li > ul.sub-menu { max-height: 320px; overflow: auto; }
	@media (max-width: 1199px) { #mega_menu > li > ul.sub-menu > li { width: 33.33%; } }
}