@media screen and (max-width: 1000px) {
    .box-product, .history {
        flex-direction: column;
    }

    .box-product ul,
    .history .history-tab, .history-content {
        margin-right: 0;
        width: 100%;
    }

    .history .history-tab {
        display: flex;
        flex-wrap: wrap;
    }

    .box-product .nav-fill .nav-item,
    .history .history-tab .item {
        margin-right: 5px;
    }

    .footer-mobile {
        display: block;
    }
    body {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 992px) {
    .banner {
        margin: 0 15px;
        padding: 20px 10px;
    }

    .banner .banner-highlight {
        flex-direction: column;
        align-items: center !important;
    }

    .banner .banner-highlight .left {
        margin-bottom: 25px;
    }

    .list-history {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrapper {
        background-image: url(../images/bg-home.png);
        background-size: cover;
    }

    .navbar-collapse {
        position: relative !important;
        background: none;
        color: #fff;
    }

    .fixed-header .navbar-collapse {
        color: #000;
    }

    .fixed-header .navbar-collapse .navbar-list li span {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    body * {
        font-size: 14px;
    }

    .box-recommend.card .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .box-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .iq-sidebar {
        width: 100%;
        left: -100%;
    }

    .banner .banner-highlight .left {
        width: 100%;
    }

    .banner .banner-menu {
        display: none !important;
    }

    .box-product ul {
        display: none;
    }

    .box-product ul li {
        width: 100%;
    }

    .result {
        display: block;
    }
}

@media screen and (max-width: 515px) {
    .banner .banner-menu .item {
        margin: 30px 10px 0;
        max-width: calc(100% / 3 - 20px);
    }

    .box-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 684px) {
    .banner .banner-highlight .right .menu-bottom a {
        padding: 0 5px;
    }
}