/* =========================
   RESET
========================= */
.menuMain,
.menuMain ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .menuMain li {
        position: relative;
    }

        /* =========================
   LINK
========================= */
        .menuMain li > a {
            display: block;
            padding: 14px 52px 14px 16px;
            color: #222;
            text-decoration: none;
            font-size: 15px;
            line-height: 1.4;
            transition: .25s;
            white-space: nowrap;
        }

        /* =========================
   SUBMENU CHUNG
========================= */
        .menuMain li > ul {
            display: none;
            background: #fff;
        }

            /* LEVEL 2 */
            .menuMain li > ul > li > a {
                padding-left: 30px;
                font-size: 14px;
            }

            /* LEVEL 3 */
            .menuMain li > ul > li > ul > li > a {
                padding-left: 45px;
            }

            /* LEVEL 4 */
            .menuMain li > ul > li > ul > li > ul > li > a {
                padding-left: 60px;
            }

    /* =========================
   BUTTON OPEN MOBILE
========================= */
    .menuMain .openSub {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

        .menuMain .openSub i {
            transition: .25s;
            pointer-events: none;
        }

    /* ACTIVE */
    .menuMain li.active > .openSub i {
        transform: rotate(180deg);
    }

    .menuMain li.active > a {
        background: #f3f7ff;
        color: #0d47a1;
        font-weight: 600;
    }

/* =========================================================
   DESKTOP
========================================================= */
@media(min-width:992px) {

    /* MENU ROOT */
    .menuMain {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 999;
    }

        .menuMain > li {
            position: relative;
            border: none;
        }

            .menuMain > li > a {
                padding: 16px 20px;
            }

        /* ẨN NÚT MOBILE */
        .menuMain .openSub {
            display: none;
        }

        /* CHỈ ẨN MOBILE ITEM */
        .menuMain > li.mobile {
            display: none;
        }

        /* =========================
       SUBMENU LEVEL 2
    ========================= */
        .menuMain > li > ul {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 260px;
            background: #fff;
            border: 1px solid #e5e5e5;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
            display: block;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: .25s ease;
            z-index: 999;
        }

        /* HOVER MENU CẤP 1 */
        .menuMain > li:hover > ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            display:block!important;
        }

        /* =========================
       SUBMENU CẤP 2-3-4
    ========================= */
        .menuMain li ul li {
            position: relative;
            border-bottom: 1px solid #f1f1f1;
        }

            .menuMain li ul li:last-child {
                border-bottom: none;
            }

            .menuMain li ul li a {
                padding: 13px 40px 13px 16px !important;
                font-size: 14px;
                white-space: nowrap;
            }

            /* SUBMENU CON */
            .menuMain li ul li > ul {
                position: absolute;
                top: 0;
                left: 100%;
                min-width: 260px;
                background: #fff;
                border: 1px solid #e5e5e5;
                box-shadow: 0 10px 30px rgba(0,0,0,.08);
                display: block;
                opacity: 0;
                visibility: hidden;
                transform: translateX(10px);
                transition: .25s ease;
                z-index: 999;
            }

            /* HOVER RA MENU CON */
            .menuMain li ul li:hover > ul {
                opacity: 1;
                visibility: visible;
                transform: translateX(0);
                display:block!important;
            }

        /* HOVER EFFECT */
        .menuMain li:hover > a {
            background: #f3f7ff;
            color: #0d47a1;
        }

        /* MENU CẤP 4 SCROLL */
        .menuMain li ul li ul li ul {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:991px) {

    .menuMain {
        display: block;
    }

        .menuMain li {
            border-bottom: 1px solid #eee;
        }

            .menuMain li > ul {
                background: #f7f7f7;
            }
}