/* * {
    outline: 1px solid red;
} */

@media (max-width: 1199.98px) {
    .container {
        padding: 0 80px;
    }

    .action-wrapper i {
        padding: 0 15px;
        font-size: 1.5rem;
    }

    .nav a {
        padding: 20px 10px;
    }

    .sub-content figure {
        height: 200px;
    }

    .sub-content .img-content {
        object-fit: cover;
    }

    .sub-content {
        width: calc((100% - 30px) / 2);
        max-width: 250px;
    }

    .content-wrapper .main-content {
        justify-content: space-evenly;
    }

    .sub-footer input {
        width: 100%;
    }

    .footer-content .list-footer {
        flex-direction: column;
        align-items: baseline;
    }
    .main-content {
        padding: 0 25px;
    }

    .move-top {
        right: 25px;
        bottom: 10px;
    }
}

@media (max-width: 1020.98px) {
    .logo {
        width: 80%;
    }
    .nav a {
        font-size: 1.4rem;
    }
    .action-wrapper i {
        font-size: 1.4rem;
    }
}

@media (max-width: 991.98px) {
    .header {
        flex-wrap: wrap;
    }
    .logo {
        width: 100%;
    }
    .nav a {
        width: 100%;
    }

    .action-wrapper i {
        font-size: 1.8rem;
    }

    .hamburger-menu {
        display: block;
        position: absolute;
        left: 0px;
        bottom: -50px;
        font-size: 28px;
        color: #fff;
    }

    #input-hamburger ~ .navigation .nav {
        position: absolute;
        top: 0;
        left: 0;
        flex-direction: column;
        padding: 0 10px;
        background: #000;
        transform-origin: top;
        transform: scaleY(0);
        transition: transform 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }

    #input-hamburger:checked ~ .navigation .nav {
        display: flex;
        width: 100%;
        top: 128px;
        left: 0px;
        z-index: 10;
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }

    .nav-item > a {
        position: relative;
    }

    .nav-item > a > label {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1;
    }

    .nav a i {
        display: inline-block;
        rotate: 90deg;
        font-size: 1.8rem;
    }

    .nav-item .sub-nav {
        position: static;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transform: none;
        visibility: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .nav-item:has(.toggle-sub:checked) > .sub-nav {
        max-height: 500px;
        visibility: visible;
        overflow: visible;
        background: #eeeeee;
    }

    .sub-nav li {
        overflow: visible;
    }

    .footer-content {
        flex-wrap: wrap;
    }

    .footer-content .sub-footer {
        width: calc((100% - 60px) / 3);
    }

    .footer-content .list-footer {
        flex-direction: row;
    }
}

@media (max-width: 767.98px) {
    .inner {
        flex-wrap: wrap;
    }

    .content-wrapper {
        width: 100%;
    }

    .main .sidebar-wrapper {
        width: 100%;
        order: 1;
    }

    .container {
        padding: 0 15px;
    }

    .form-search {
        width: 100%;
        background: #eeeeee;
    }

    .form-search .input-search {
        background: #eeeeee;
    }
    .footer-content .sub-footer {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sub-content {
        width: 100%;
    }
    .sub-footer .logo {
        width: 30%;
    }
}