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

    #root {
        background: #f6d482 url(../imgs/bg-main-tablet.webp) no-repeat top center;
    }

    .container {
        max-width: 1200px;
        padding: 0 30px !important;
    }

    .container-md {
        max-width: 840px;
    }

    .col-xl-8,
    .col-xl-4 {
        width: 100%;
    }

    .products-section {
        margin-bottom: 65px !important;
    }

    .products-section .products-grid {
        gap: 42px;
        row-gap: 10px;
    }

    .products-section .login-box {
        margin-bottom: 22px;
    }

    .products-section .products-list {
        padding-bottom: 12px;
    }

    .cart-container:not(.show) {
        display: none;
    }

    .cart-container.show {
        position: absolute;
        bottom: 60px;
        left: 0;
        padding: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cart-container>h4 {
        display: block !important;
        text-align: center;
        height: 51px;
        width: 100%;
        padding: 12px 27px 32px 27px;
        margin: 0;
        box-shadow: rgba(0, 0, 0, 0.05) 0 0 25px 6px;
    }

    .cart-container>.close {
        display: block !important;
        background: transparent;
        border: none;
        outline: none;
        right: 30px;
        top: 15px;
    }

    .products-section .cart-container .cart-box {
        max-width: 520px;
        background: unset;
    }

    .products-section .cart-container .cart-box h4 {
        display: none;
    }

    .cart-container-tablet {
        display: flex;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 9px 30px !important;
        height: 60px;
        align-items: center;
    }

    .cart-container-tablet .cart-total {
        gap: 12px;
    }

    .cart-container-tablet .cart-total .cart-icon {
        background: #3fa4f9;
        display: flex;
        width: fit-content;
        gap: 10px;
        padding: 8px;
        border-radius: 3px;
        font-size: 20px;
        color: #fff;
        align-items: center;
        height: 40px;
    }

    .cart-container-tablet .cart-total .cart-icon .amount {
        padding-top: 4px;
    }

    .cart-container-tablet .cart-total .total-price span:nth-child(1) {
        font-size: 18px;
        line-height: 18px;
    }

    .cart-container-tablet .cart-total .total-price span:nth-child(2) {
        font-size: 24px;
        line-height: 24px;
    }

    .cart-container-tablet .next-step {
        width: 204px;
        height: 40px;
        border-radius: 3px;
        background: #3fa4f9;
        border: none;
        color: #fff;
        padding-right: 7px;
        position: relative;
        font-size: 24px;
    }

    .cart-container-tablet .next-step::after {
        content: "";
        position: absolute;
        right: 16%;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        width: 15px;
        height: 7px;
        background: url(../imgs/icon-dropdown.png) no-repeat 0 0 / 100% 100%;
    }

    .cart-container-tablet .next-step:hover {
        background-color: #61c1fd;
    }

    .cart-container-tablet .next-step.disable {
        filter: grayscale(0.9);
        cursor: not-allowed;
    }

    #payment-success .status-payment::before,
    #payment-failed .status-payment::before,
    #payment-success .description-payment::before,
    #payment-failed .description-payment::before {
        background: url(../imgs/bg-ticket-tablet.png) no-repeat 0 0 / 100% 100%;
    }

    #payment-success, #payment-failed {
        margin-top: 36px;
        padding-top: 18px;
    }

    #payment-success .status-payment, #payment-failed .status-payment {
        min-height: 300px;
    }

    #payment-success .status-payment .user-info, #payment-failed .status-payment .user-info {
        margin-top: 26px;
    }

    #payment-success .description-payment, #payment-failed .description-payment {
        padding-top: 30px;
    }
}

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

    #root {
        background: #f6d482 url(../imgs/bg-main-mobile.webp) no-repeat top center;
    }

    .container {
        max-width: 576px;
        padding: 0 11px !important;
    }

    /* .container-md {
        max-width: 840px;
    } */

    .hero-section {
        gap: 0;
    }

    .hero-section .game-name {
        font-size: 35px;
        letter-spacing: -1px;
    }

    header .user-info {
        padding-right: 30px;
    }

    header .search {
        width: fit-content;
    }

    header .search input {
        width: 208px;
    }

    header .user-info ul.menu {
        right: -30px !important;
        width: 212px !important;
    }

    header .user-info .btn-user {
        width: 43px;
        height: 43px;
        font-size: 26px;
        border-radius: 50%;
        padding: 0;
    }

    header .user-info .btn-user::after {
        right: -26px;
        width: 19px;
        height: 10px;
    }

    #userAvatar {
        text-align: center;
        line-height: 43px;
    }

    header .user-group {
        padding: 0;
        width: 258px;
    }
    
    header .container > div {
        width: fit-content;
    }
    header .d-sm-none {
        display: block !important;
    }
    
    header .d-sm-block {
        display: none !important;
    }

    header > .container {
        justify-content: space-between;
    }

    .products-section .login-box .more-options::before {
        left: 30%;
    }

    .products-section .login-box .more-options::after {
        right: 30%;
    }

    .products-section .login-box {
        padding: 14px 10px 32px 10px;
    }

    .products-section .products-list {
        padding: 16px 10px 10px 28px;
    }

    .products-section .products-list .btn-filter button {
        padding: 2px 25px;
    }

    .products-section .products-grid {
        justify-content: center;
        padding-right: 18px;
    }

    footer .container {
        gap: 10px;
    }

    .footer-logo {
        flex-shrink: 0;
    }

    footer .company-text-small {
        font-size: 16px;
    }

    #root.status-page .hero-section {
        display: none !important;
    }

    #payment-success .status-payment::before,
    #payment-failed .status-payment::before,
    #payment-success .description-payment::before,
    #payment-failed .description-payment::before {
        background: url(../imgs/bg-ticket-mobile.png) no-repeat 0 0 / 100% 100%;
    }

    #id-character {
        width: 220px;
        max-width: 210px;
    }
}