@media only screen and (max-width: 1400px) {
    .heading .logo {
        max-width: 200px;
    }

    .heading .category-wrapper {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1395px) {
    .detail-filter .input-group {
        min-width: 250px;
    }

    .heading .logo {
        max-width: 220px;
    }

    /* main .products .item .buttons {
        width: 264px;
    } */
    main .content .products a.go-detail,
    main .content .products button {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1200px) {
    .heading .logo {
        max-width: 170px;
    }

    .max-xl-w-100 {
        width: 100% !important;
    }

    .main .content .products > .item,
    .main .category .list > .item {
        width: calc(33.3333% - 20px);
    }

    main .content .products button {
        font-size: 12px;
    }

    footer img {
        width: 60% !important;
        margin-left: 20%
    }

    .detail-filter .input-group {
        min-width: 200px !important;
    }

    .main div.swiper#content-images {
        max-height: 330px;
    }

    .heading .category-wrapper li a {
        padding: 12px;
    }
}

@media only screen and (max-width: 991px) {
    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-40 {
        width: 40% !important;
    }

    .md-ps-3 {
        padding: 0 !important;
    }

    .banner .banner-tabs .nav-link:last-child,
    .banner .banner-tabs .nav-link:first-child,
    #login-button {
        font-size: 16px;
    }

    .lg-box-shadow-none {
        box-shadow: none;
    }

    nav.bottom-nav .dropdown-menu {
        border: 1px solid rgba(0,0,0,.15) !important;
    }

    .heading button.app-btn {
        font-size: 14px;
    }

    button#recharge {
        display: none;
    }

    .container .banner .row {
        gap: 16px;
    }

    .container .banner > .row > .pe-0 {
        padding: 0 !important;
    }

    .main .content .products > .item,
    .main .category .list > .item {
        width: calc(50% - 7.5px);
    }

    main .content .products.random-list a.go-detail {
        font-size: 18px;
    }

    footer img {
        width: 100% !important;
        margin-left: 0;
    }

    .main div.swiper#content-images {
        max-height: 420px;
    }

    nav.bottom-nav {
        display: block !important;
    }

    footer {
        margin-top: 2rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 768px) {
    .login-code-sp {
        display: none;
    }

    .login-code-pc {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .max-md-w-100 {
        max-width: 100% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }

    main .products .item .buttons {
        padding-inline: 0;
    }

    main .content .products button {
        font-size: 12px;
    }

    .heading #login-button {
        display: none !important;
    }

    a.go-detail, a.app-btn, button.app-btn {
        font-size: 14px;
    }

    #card-payment-modal .bank-account,
    #card-payment-modal .qr-code,
    #card-payment-modal .instruction,
    #card-payment-modal form.generate-money {
        padding: 10px;
    }

    main.container .content .card .blog {
        width: 100%;
        margin-right: 0;
    }

    .main div.swiper#content-images {
        max-height: 330px;
    }

    .products .item .name * {
        margin: 0;
        padding: 0;
        min-height: 42px;
    }

    ul.pagination li a,
    ul.pagination li span,
    ul.pagination li button {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .main .category .list .item .buttons button {
        font-size: 11px !important;
    }

    .main .category .list .item > img {
        height: 92px;
        object-fit: cover;
    }

    .login-code-sp {
        display: block;
    }

    .login-code-pc {
        display: none;
    }

    .detail-filter.search-bar select.form-control,
    .detail-filter.search-bar .input-group {
        font-size: 16px;
    }

    .detail-filter.search-bar .buttons {
        width: 100%;
        justify-content: center;
    }

    .detail-filter.search-bar .buttons button {
        font-size: 16px;
    }

    main .content .products .product_title,
    main .content .products .name, .main .category .name {
        font-size: 14px;
    }

    main .content .products .item {
        font-size: 14px;
    }

    main .content .products .item .promotion {
        font-size: 14px;
    }

    .item-information .d-flex.justify-content-center button {
        justify-content: center !important;
        padding-block: 6px;
    }

    button#order_btn {
        font-size: 18px;
    }

    .swal2-popup {
        width: 92% !important;
    }

    .swal2-popup .swal2-icon {
        margin: 0 auto 15px;
    }

    .swal2-popup .swal2-actions {
        margin: 15px 0 0;
    }

    .swal2-popup .swal2-html-container {
        margin: 0.5em 0 0.2em;
        text-align: left;
    }

    .swal2-popup .swal2-title {
        font-size: 24px;
    }

    .swal2-popup .swal2-content {
        font-size: 16px;
        padding: 0;
    }

    .swal2-popup .swal2-styled {
        padding: 0.3em 1.5em
    }

    main.account .main-content {
        margin: 0;
    }

    main.account .col-content {
        padding: 0;
    }

    #payment-card-modal .payment-card,
    #installment-modal .note,
    #buy-now-modal .voucher,
    #buy-now-modal .confirm-payment,
    .announcement {
        padding: 12px;
        font-size: 14px;
    }

    #installment-modal table tr:first-child td,
    #buy-now-modal .confirm-payment tr:first-child td {
        font-size: 17px;
    }

    #installment-modal table td,
    #buy-now-modal .confirm-payment td {
        padding: 10px;
        font-size: 16px;
    }

    .modal .modal-header {
        padding: 12px;
    }

    .modal .modal-header > * {
        font-size: 18px;
    }

    .heading .user-info .info {
        display: none;
    }
    #card-payment-modal form.generate-money label {
        font-size: 14px;
    }

    nav.bottom-nav .dropdown-menu a {
        font-size: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .w-sm-70 {
        width: 70% !important;
    }

    .p-3-575 {
        padding: 1rem !important;
    }

    .md-ps-3 {
      padding: 1rem !important;
    }

    .breadcrumb {
        padding: 0 0 0 16px
    }

    main.account .account-content {
        padding: 0 16px;
    }

    .heading .d-flex.search-container {
        display: none !important;
    }

    .heading .d-none.search-sm-container {
        display: flex !important;
    }

    .container .banner > .row > .pe-0,
    .container .banner > .row > .p-0 {
        padding: 0 16px !important;
    }

    .seller {
        max-width: 180px;
    }

    .seller .card-body h5 {
        font-size: 16px;
    }

    .seller #seller-button {
        width: 60%;
    }

    #card-payment-modal .qr-code button,
    #card-payment-modal .bank-account td,
    #card-payment-modal .bank-account tr:first-child td {
        font-size: 16px;
        padding: 2px;
    }

    #card-payment-modal .qr-code button {
        font-size: 14px;
        padding: 8px;
    }

    #card-payment-modal .modal-body {
        padding: 8px;
    }

    .main .item-information h4 {
        font-size: 18px;
    }

    .main .account-info-detail h5 {
        font-size: 16px;
    }
    #card-payment-modal .instruction {
        font-size: 14px;
    }

}

@media only screen and (max-width: 494px) {
    .heading .logo {
        max-width: 176px;
    }

    .container .main .services > div {
        padding: 0 16px;
    }

    .container .main .services > div img {
        width: 60px;
        height: 60px;
    }

    nav.bottom-nav a {
        min-width: 63px;
        font-size: 13px;
    }

    main .content .products a.go-detail {
        font-size: 12px;
    }

    .main div.swiper#content-images {
        max-height: 280px;
    }

    .main .category .list .item .buttons button {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 464px) {
    .main div.swiper#content-images {
        max-height: 240px;
    }

    .heading .user-info .user-more .buttons {
        flex-direction: column;
    }

    .detail-filter.search-bar .buttons button {
        font-size: 14px;
    }

    .main .content .products > .item, .main .category .list > .item {
        width: 100%;
    }

    .main .category.home-section .list > .item {
        width: calc(50% - 7.5px);
    }

    .products .item .name * {
        min-height: unset;
        font-size: 14px;
        margin-bottom: 10px;
    }

    main .content .products .item .cash {
        flex-direction: column;
        gap: 0 !important;
    }

    h6.text-danger.w-100.mb-2 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 400px) {
    .main div.swiper#content-images {
        max-height: 200px;
    }

    .heading .user-info .user-more {
        width: 310px;
    }

    .item-information .d-flex.justify-content-center button {
        font-size: 18px;
    }
    #card-payment-modal .bank-account td {
        font-size: 14px;
    }
    .modal-dialog-centered {
        margin: 0;
    }
}

@media only screen and (max-width: 360px) {
    .item-information .d-flex.justify-content-center button {
        font-size: 16px;
    }

    main .content .products.random-list a.go-detail {
        font-size: 15px;
    }

    #installment-modal .modal-footer button {
        width: 100% !important;
        font-size: 16px;
    }


    #buy-now-modal .confirm-payment td,
    #buy-now-modal .confirm-payment tr:first-child td {
        font-size: 16px;
    }

    #installment-modal table td,
    #installment-modal .note,
    #installment-modal table tr:first-child td,
    #buy-now-modal .voucher .generate-voucher button,
    #buy-now-modal .voucher .generate-voucher input,
    #buy-now-modal .voucher .generate-voucher label,
    #buy-now-modal .voucher h5 {
        font-size: 14px;
    }

    #buy-now-modal .modal-body .confirm-payment {
        padding: 0;
    }

    #buy-now-modal .modal-footer button {
        font-size: 12px;
    }
}


@media only screen and (max-width: 330px) {
    main.account .account-content .information-content .withdraw > div > div {
        width: 100% !important;
    }
}

@media only screen and (max-width: 320px) {

    #heading {
        padding: 0 !important;
    }

    #heading > .borRad-8 {
        border-radius: 0;
    }

    .heading .logo {
        max-width: 160px;
    }

    .container .banner > .row > .pe-0,
    .container .banner > .row > .p-0 {
        padding: 0 !important;
    }

    nav.bottom-nav a {
        min-width: 43px;
        font-size: 11px;
    }

    .main div.swiper#content-images {
        max-height: 210px;
    }

    .item-information .d-flex.justify-content-center button {
        font-size: 14px;
    }
}