@media (min-width: 1280px) {
    .menu-header > ul {
        display: flex;
    }
    .menu-header ul li {
        position: relative;
    }
    .menu-header > ul > li > a {
        display: inline-block;
        padding: 1.25rem;
        color: #fff;
    }
    .menu-header > ul > li:hover > a,
    .menu-header > ul > li > a.active {
        color: var(--cl-quaternary);
    }
    .menu-header > ul > li > ul {
        position: absolute;
        top: calc(100% + 1rem);
        left: 0;
        white-space: nowrap;
        background: linear-gradient(90deg, #662872 52%, #d449cb 100%);
        border-radius: 0.4rem;
        color: #fff;
        z-index: 1;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(1rem);
        transition: transform 0.4s, visibility 0.4s;
    }
    .menu-header > ul > li:hover > ul {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .menu-header > ul > li > ul::before {
        content: "";
        position: absolute;
        top: -2rem;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .menu-header ul ul li a {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        display: block;
    }
    .menu-header > ul > li > ul > li {
        transition: all 0.3s;
    }
    .menu-header ul ul > li:hover > a {
        color: var(--cl-primary);
    }
    .menu-header ul ul > li:hover {
        background: var(--cl-quaternary);
    }
    .menu-header ul ul > li:first-child {
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
    }
    .menu-header > ul > li > ul > li:first-child:before {
        content: "";
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        background: #662872;
        position: absolute;
        left: 2rem;
        width: 1.25rem;
        height: 0.625rem;
        top: -0.625rem;
        transition: all 0.3s;
    }
    .menu-header > ul > li > ul > li:hover:before {
        background: var(--cl-quaternary);
    }
    .menu-header ul ul > li:last-child {
        border-bottom-left-radius: 0.4rem;
        border-bottom-right-radius: 0.4rem;
    }
    .menu-header ul ul ul {
        position: absolute;
        left: 100%;
        top: 0;
        background: linear-gradient(90deg, #662872 52%, #d449cb 100%);
        border-radius: 0.4rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s;
        transform: translateY(1rem);
    }
    .menu-header ul ul ul::before{
        content: "";
        left: -5px;
        width: 5px;
        top: 0;
        height: 100%;
        position: absolute;
    }
    .menu-header ul ul li:hover > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
        margin-left: 5px;
    }
    .show-item-menu {
        display: none;
    }
    label[for="click-menu_account"] ul::before {
        content: "";
        top: 100%;
        right: 0;
        width: 200%;
        height: 2rem;
    }
    label[for="click-menu_account"]:has(input:checked) ul {
        visibility: visible;
        pointer-events: all;
        opacity: 1;
        top: 5rem;
    }
    .menu-info a.active,
    .menu-info a:hover {
        background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transform: translateX(0);
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {
    .menu-header > ul > li > a {
        font-size: 1rem;
        padding: 0.5rem;
    }
    .btn-login span {
        font-size: 0.8rem;
    }
    a[title="Logo"] .img-contain {
        max-width: 4rem;
    }
}
@media (min-width: 1024px) {
    .unread-news::before {
        content: "\f111";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 10px;
        visibility: hidden;
    }
    .unread-news.active::before {
        color: #ff3b3b;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .coating-r::before {
        content: "";
        background: linear-gradient(
            90deg,
            rgba(253, 245, 255, 0) 0%,
            #fdf5ff 100%
        );
        position: absolute;
        top: 0;
        right: 0;
        width: 10.9375rem;
        height: 100%;
        z-index: 2;
    }
}
@media not all and (min-width: 1280px) {
    .menu-header {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(320px, 80%);
        z-index: 99;
        background: #fff;
        transition: all 0.4s;
        transform: translateX(-100%);
    }
    .menu-header > ul {
        display: flex;
        flex-direction: column;
    }
    .menu-header > ul > li > a {
        padding: 0.25rem 1rem;
        display: block;
    }
    .menu-header > ul > li {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
    }
    .menu-header > ul > li > a {
        width: calc(100% - 2.5rem);
    }
    .menu-header > ul > li > ul {
        width: 100%;
        order: 1;
    }
    .show-item-menu {
        width: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .show-item-menu i {
        transform: rotate(-90deg);
        transition: all 0.7s;
    }
    .menu-header > ul > li > ul > li > a {
        padding: 0.25rem 1.5rem;
        display: block;
    }
    .menu-header > ul > li > ul {
        max-height: 0;
        transition: max-height 0.7s ease-in-out;
        overflow: hidden;
    }
    .menu-header > ul > li > ul > li {
        border-top: 1px solid #ccc;
    }
    .menu-header > ul > li.active > ul {
        max-height: 37.5rem;
    }
    .menu-header > ul > li.active .show-item-menu > i {
        transform: rotate(0);
    }
    .bg-overlay {
        transition: all 0.4s;
        transform: translateX(100%);
    }
    header.active .menu-header,
    header.active .bg-overlay {
        transform: translateX(0);
    }
    .sidebar-account {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(320px, 80%);
        background: #fff;
        transition: all 0.4s;
        z-index: 101;
        transform: translateX(-100%);
    }
    .menu-info a.active,
    .menu-info a:hover {
        background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .sidebar-account {
        padding: 1rem;
    }
    .bg-layout-sidebar-account {
        transform: translateX(100%);
        transition: all 0.4s;
        z-index: 100;
    }
    .sidebar-account.active,
    .bg-layout-sidebar-account.active {
        transform: translateX(0);
    }
}
@media not all and (min-width: 576px) {
}
@media (max-width: 1279px) {
    .menu-header > ul > li > a {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        font-size: 1.25rem;
    }
}