/* Menu chính */
.menu-main > ul {
    position: relative;
    display: flex;
    align-items: center;
}

/*
 * Không position relative cho li cấp 1
 * để .sub-menu có thể căn theo toàn bộ ul
 */
.menu-main > ul > li {
    position: static;
}

/* =========================
   SUB MENU CẤP 1
   ========================= */

.menu-main > ul > li > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    /* Đây là phần quan trọng */
    width: 92vw;
    max-width: 1200px;
    box-sizing: border-box;
    padding: 20px 25px;
    margin: 0;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .15);
    z-index: 9999;
    width: 100%;
    max-width: 100%;
}

/* Hover menu chính */
.menu-main > ul > li:hover > .sub-menu {
    display: grid;
    column-gap: 15px;
}


/* =========================
   SỐ LƯỢNG CỘT
   ========================= */

/* 1 item */
.menu-main > ul > li > .sub-menu:has(> li:only-child) {
    grid-template-columns: 1fr;
}

/* 2 item */
.menu-main > ul > li > .sub-menu:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 item */
.menu-main > ul > li > .sub-menu:has(> li:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Từ 4 item */
.menu-main > ul > li > .sub-menu:has(> li:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Các item bên trong */
.menu-main > ul > li > .sub-menu > li {
    min-width: 0;
    margin-bottom: 20px;
    border: unset;
}

.menu-main > ul > li > .sub-menu > li:after {
    opacity: 0;
}

.menu-main > ul > li > .sub-menu > li > ul {
    display: block;
    box-shadow: unset;
    position: unset;
    padding-left: 0;
    width: auto;
}

.menu-main > ul > li > .sub-menu > li > ul a {
    font-family: 'UTMNEOSANSINTEL';
    font-size: 14px;
}


/* Link */
.menu-main > ul > li > .sub-menu > li > a {
    display: block;
    /* padding: 8px 10px; */
    color: #333;
    text-decoration: none;
    border: unset;
}


/* Hover link */
.menu-main > ul > li > .sub-menu > li > a:hover {
    color: #d00;
}


.sub-menu-C > li {
    border-bottom: unset!Important;
    border-top: 1px dashed #ddd;
    float: unset!important;
    margin-top: 5px;
}

.menu-main > ul > li {
    /* position: static; */
}

.menu-main {
    position: relative;
}