/* ===== Fix Category Dropdown Menu Overflow - FINAL ===== */

.megamenu li {
    min-width: 215px;
}

/* Set max-height và scroll cho vertical-menu */
.category-dropdown .vertical-menu.category-menu {
    max-height: 506px;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
}

    /* Custom scrollbar */
    .category-dropdown .vertical-menu.category-menu::-webkit-scrollbar {
        width: 6px;
    }

    .category-dropdown .vertical-menu.category-menu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    .category-dropdown .vertical-menu.category-menu::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

        .category-dropdown .vertical-menu.category-menu::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

/* Firefox scrollbar */
.category-dropdown .vertical-menu.category-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

    /* Ẩn megamenu gốc */
    .category-dropdown .vertical-menu.category-menu > li > .megamenu {
        display: none !important;
    }

/* Container cho megamenu */
#megamenu-container {
    pointer-events: none;
}

    /* Style cho megamenu clone */
    #megamenu-container .megamenu {
        pointer-events: auto !important;
        transition: opacity 0.15s ease;
    }

        /* Đảm bảo pointer-events */
        #megamenu-container .megamenu,
        #megamenu-container .megamenu *,
        #megamenu-container .megamenu a,
        #megamenu-container .megamenu li,
        #megamenu-container .megamenu ul {
            pointer-events: auto !important;
        }

            /* Reset list styles */
            #megamenu-container .megamenu ul {
                list-style: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            #megamenu-container .megamenu li {
                list-style: none !important;
            }

            /* ===== FIX 2 & 3: Color và Line-height cho links trong megamenu ===== */

            /* Style mặc định cho links trong megamenu */
            #megamenu-container .megamenu a {
                cursor: pointer !important;
                /* Giữ nguyên màu text của theme - KHÔNG override */
                color: inherit !important;
                text-decoration: none !important;
                display: block !important;
                /* FIX 3: Tăng line-height để thoáng hơn */
                line-height: 1.2 !important; /* Tăng từ ~1.5 lên 1.8 */
                padding-top: 4px !important;
                padding-bottom: 4px !important;
                transition: color 0.3s ease, background-color 0.3s ease !important;
            }

                /* Hover state cho links */
                #megamenu-container .megamenu a:hover {
                    /* Giữ nguyên hover effect của theme */
                    opacity: 0.8 !important;
                }

            /* Nếu theme có class specific cho links, giữ nguyên */
            #megamenu-container .megamenu .menu-title a {
                font-weight: 600 !important;
                /* Title có thể có line-height cao hơn */
                line-height: 1.6 !important;
                padding-top: 6px !important;
                padding-bottom: 6px !important;
            }

            /* Style cho h4.menu-title */
            #megamenu-container .megamenu h4.menu-title {
                line-height: 1.8 !important;
                margin-bottom: 8px !important;
                margin-top: 8px !important;
                font-size: 1.4rem !important;
            }

            /* Style cho hr.divider */
            #megamenu-container .megamenu hr.divider {
                margin-top: 10px !important;
                margin-bottom: 10px !important;
            }

            /* Style cho li trong megamenu - tăng spacing */
            #megamenu-container .megamenu > li {
                padding: 0 15px !important; /* Thêm padding cho columns */
            }

                #megamenu-container .megamenu > li > ul > li {
                    margin-bottom: 2px !important; /* Thêm khoảng cách giữa các items */
                }

            /* Fix cho megamenu 1 cột */
            #megamenu-container .megamenu:has(> li:only-child) {
                min-width: 300px;
                max-width: 400px;
            }

    /* Đảm bảo colors được kế thừa từ theme */
    #megamenu-container .megamenu {
        /* KHÔNG set color cố định, để theme tự xử lý */
    }

/* Responsive */
@media (max-width: 991px) {
    .category-dropdown .vertical-menu.category-menu {
        max-height: 400px;
    }

    /* Giảm line-height trên tablet */
    #megamenu-container .megamenu a {
        line-height: 1.6 !important;
    }
}

@media (max-width: 767px) {
    .category-dropdown .vertical-menu.category-menu {
        max-height: 350px;
    }

    #megamenu-container .megamenu {
        flex-direction: column !important;
        max-width: 95vw !important;
    }

        /* Mobile: line-height bình thường */
        #megamenu-container .megamenu a {
            line-height: 1.5 !important;
        }
}

/* ===== Đảm bảo theme colors được áp dụng ===== */

/* Nếu theme có dark mode hoặc specific colors, giữ nguyên */
body.dark-mode #megamenu-container .megamenu a,
.dark #megamenu-container .megamenu a {
    color: inherit !important;
}

/* Giữ nguyên hover effect của theme */
#megamenu-container .megamenu a:hover,
#megamenu-container .megamenu a:focus {
    color: inherit !important;
    /* Có thể thêm màu hover cụ thể nếu theme có */
}