.menu {
    z-index: 100;
    padding: 0;
    background: #fff
}

.menu .logo {
    padding: 20px 0
}

.menu ul {
    list-style: none;
    margin: auto;
    width: 100%
}

/* .menu ul li a {
    font: 600 18px/1.2222222222 var(--font-family);
    color: var(--secondary-color)
} */

.menu ul .menu-list_item {
    padding: 10px 20px;
    background: #ebedef;
    margin-top: 10px;
    color: var(--primary-color);
    border-radius: 4px
}

.menu ul .menu-list_item.active {
    background: var(--primary-color);
    color: var(--secondary-color)
}

.menu ul .menu-cat-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--primary-color)
}

.menu ul .menu-cat_item {
    text-align: center;
    background: #fff;
    border: 1px solid var(--secondary-color);
    padding: 10px;
    border-radius: 6px;
    color: var(--secondary-color)
}

.menu ul .menu-cat_item:hover {
    background: var(--primary-color)
}

.menu ul.menu-main>li>:is(a:not(.stretched-link, .logo), span:not(.d-inline-block)) {
    padding: 34px 0;
    text-transform: uppercase;
    /* Cỡ cứng 22px làm hàng menu kịch mép ở 1200px, nên đổi sang cỡ co theo màn.
       Sau đó hạ thêm một bậc nữa: ở 1440 chữ 19,8px làm các mục chỉ cách nhau
       18px, nhìn sít. Hạ trần từ 22px xuống 18px cho thoáng. */
    font: 600 clamp(15px, calc(18 / 1600 * 100vw), 18px)/1.2222222222 var(--font-family);
    color: var(--secondary-color)
}

.menu ul.menu-main>li>:is(a:not(.stretched-link, .logo), span:not(.d-inline-block)).active,
.menu ul.menu-main>li>:is(a:not(.stretched-link, .logo), span:not(.d-inline-block)):hover {
    color: var(--primary-color)
}

.menu ul.menu-main>li ul>li>a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: var(--primary-color)
}






.menu span.d-inline-block {
    cursor: default;
}
/* --------------------------------------------------------------------------
   Nút "Lịch khai giảng" giữ nguyên khổ
   --------------------------------------------------------------------------
   Hàng menu là flex nowrap. Khi chật, trình duyệt bóp đều mọi mục kể cả nút,
   làm chữ trong nút xuống dòng. Khóa nút lại, để phần chữ menu co thay. */
.menu ul.menu-main > li:last-child { flex: 0 0 auto; }
.menu ul.menu-main > li > .menu-btn { white-space: nowrap; }