.app {
    overflow: hidden;
    background-color: #f5f5f5;
}

/* Header */
.header {
    background-color: var(--primary-color);
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
    color: var(--white-color);
}

.header__list {
    display: flex;
    column-gap: 12px;
}

.header__item {
    display: flex;
    align-items: center;
}

.header__item:hover, .header__item-icon:hover, .header__item-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.header__item-line {
    position: relative;
}

.header__item-line::before {
    content: "";
    display: block;
    position: absolute;
    border-left: 1px solid #ec8d8d;
    height: 14px;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.header__item-link {
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: var(--white-color);
}

.header__item-link-facebook {
    margin: 0 5px;
}

.header__item-icon {
    font-size: 16px;
}

.header__item-img {
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

/* header qr */
.header__qr {
    background-color: var(--white-color);
    width: 186px;
    position: absolute;
    left: 0;
    top: 150%;
    padding: 8px;
    border-radius: 2px;
    display: none;
    animation: fadeIn ease-in 0.3s;
    z-index: 1;
    box-shadow: 0 2px 10px #ccc;
}

.header__qr::before {
    position: absolute;
    left: 0;
    top: -16px;
    width: 100%;
    height: 25px;
    content: "";
    display: block;
    /*background-color: #3a5a98;*/
}

.header__item--has-qr:hover .header__qr {
    display: block;
}

.header__qr-link:nth-child(1) {
    margin-left: 11px;
}

.header__qr-link:nth-child(2) {
    margin-right: 11px;
}

.header__qr-img {
    width: 100%;
}

.header__qr-apps {
    display: flex;
    justify-content: space-between;
}

.header__qr-download-img {
    height: 15px;
}

/*Header notfication*/
.header__item--has-notify {
    position: relative;
}

.header__notify {
    position: absolute;
    top: 150%;
    width: 404px;
    right: 0;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--white-color);
    cursor: default;
    transform-origin: 90% top;
    animation: headerNotifyGrowth ease-in 0.3s;
    will-change: opacity,transform; /*Tối ưu chuyển động cho 2 thằng này*/
    display: none;
    z-index: 3;
    border-radius: 2px;
}

.header__item--has-notify:hover .header__notify {
    display: block;
}

    .header__notify::before {
        content: '';
        border-width: 20px 27px;
        border-style: solid;
        position: absolute;
        border-color: transparent transparent var(--white-color) transparent;
        right: 12px;
        top: -28px;
    }

    .header__notify::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 90px;
        height: 20px;
        top: -16px;
    }

@keyframes headerNotifyGrowth {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.header__notify-header {
    height: 40px;
    background-color: var(--white-color);
}

    .header__notify-header h3 {
        line-height: 40px;
        color: #666;
        margin: 0 0 0 12px;
        font-weight: 400;
        line-height: 40px;
    }

.header__notify-list {
    padding-left: 0;
}

.header__notify-item {
    display: flex;
}

    .header__notify-item:hover {
        background-color: #f7f7f7;
    }

.header__notify-item--viewed {
    background-color: rgb(238, 77, 45,0.09);
}

.header__notify-link {
    display: flex;
    width: 100%;
    padding: 12px;
    text-decoration: none;
}

    .header__notify-link .header__notify-img img {
        width: 48px;
        object-fit: contain;
        border: 1px solid var(--border-color);
    }

.header__notify-info {
    margin-left: 12px;
}

.header__notify-name {
    display: block;
    color: var(--text-color);
    font-weight: 400;
}

.header__notify-descriotion {
    display: block;
    font-size: 12px;
    line-height: 1.5rem;
    color: #756f6e;
    margin-top: 4px;
}

.header__notify-footer {
    display: flex;
}

.header__notify-footer-btn {
    text-decoration: none;
    color: var(--text-color);
    padding: 8px 16px;
    margin: auto;
    font-weight: 400;
}

/* Header Language */
.header__item--has-language {
    position: relative;
}

.header__navbar-user-menu {
    margin-top: 10px;
    position: absolute;
    z-index: 1;
    right: 0;
    padding-left: 0px;
    top: 100%;
    width: 160px;
    list-style: none;
    background-color: var(--white-color);
    transform-origin: 90% top;
    animation: headerNotifyGrowth ease-in 0.3s;
    will-change: opacity,transform; /*Tối ưu chuyển động cho 2 thằng này*/
    border-radius: 2px;
    right: 0;
    box-shadow: 0 2px 10px #ccc;
}

.header__item-language {
    display: none;
}

.header__item--has-language:hover .header__item-language {
    display: block;
}

    .header__navbar-user-menu::before {
        content: '';
        position: absolute;
        right: 4px; /*Tạo góc*/
        top: -24px;
        border-width: 16px 20px;
        border-style: solid;
        border-color: transparent transparent var(--white-color) transparent;
        cursor: pointer;
    }

    .header__navbar-user-menu::after {
        content: '';
        display: block;
        position: absolute; /*Cầu nối*/
        width: 46%;
        height: 30px;
        top: -16px;
        right: 0;
        /*background-color: #ee4d2d;*/
    }

.header__navbar-user:hover .header__navbar-user-manager {
    display: block;
}

.header__navbar-user-item--separate {
    border-top: 1px solid rgba(0,0,0,0.05);
}

.header__navbar-user-item a {
    margin: 8px 0;
    text-decoration: none;
    color: var(--text-color);
    padding: 4px 16px;
    display: block;
}

.header__item-language-item.active a {
    color: var(--primary-color);
}

/* Header Bottom */
.header__bottom {
    height: 100px;
    background-color: var(--white-color);
}

.header__logo-img {
    height: 46px;
}

.header__bottom-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.header__bottom-left {
    flex: 1;
    display: flex;
    column-gap: 16px;
    align-items: center;
}

.header__bottom-title {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    font-size: 20px;
    text-transform: capitalize;
    color: var(--primary-color);
    padding-left: 16px;
    border-left: 1px solid var(--primary-color);
}

/* .header__search {
    width: 621px;
    display: flex;
    align-items: center;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 2px;
}

.header__search-input {
    flex: 1;
    padding-left: 12px;
    font-family: var(--body-font);
}

.header__search-input::placeholder {
    color: var(--primary-color);
    font-family: var(--body-font);
}

.header__search-btn {
    width: 84px;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--white-color);
}

.header__search-btn:hover {
    opacity: .9;
}

.header__search-btn-icon {
    font-size: 20px;
} */

/* Header User */
.header__item--has-user {
    position: relative;
}

.header__item-user {
    display: none;
}

.header__item--has-user:hover .header__item-user {
    display: block;
}
/*  */
.cart {
    margin-top: 20px;
    color: var(--text-color);
}

.cart__instruct {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fffefb;
    border: 1px solid rgba(224, 168, 0, .4);
    border-radius: 2px;
    margin-bottom: 10px;
}

.cart__instruct-img {
    width: 20px;
    height: 20px;
}

.cart__instruct-text {
    font-size: 14px;
    margin-left: 8px;
}

.cart__header {
    display: flex;
    align-items: center;
    height: 55px;
    font-size: var(--normal-font-size);
    padding: 0 20px;
    margin-bottom: 10px;
    border-radius: 2px;
    background-color: var(--white-color);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
}

.cart__input {
    padding: 0 20px 0 20px;
}

.cart__checkout-input,
.cart__checkout-input-all {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    background-color: var(--white-color);
    border-radius: 0.25rem;
}

.cart__checkout-input:checked,
.cart__checkout-input-all:checked {
    background: var(--white-color);
}

.cart__checkout-input:checked::before,
.cart__checkout-input-all:checked::before {
    content: '✔️';
    display: block;
    color: var(--white-color);
    font-size: 13px;
    transform: translate(-1.5px, -4.5px);
}

.cart__header-sub {
    flex: 2;
}

.cart__header-type {
    flex: 1;
}

.cart__header-quantity,
.cart__header-cost,
.cart__header-money,
.cart__header-operation {
    flex: 1;
    text-align: center;
    color: #888;
}

.cart__container {
    max-height: 600px;
    overflow-y: auto;
}

.cart__container::-webkit-scrollbar {
    display: none;
}

.cart__body {
    position: relative;
    background-color: var(--white-color);
    border-radius: 2px;
    background-color: var(--white-color);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05);
    margin-bottom: 15px;
}

.cart__body:last-child {
    margin-bottom: 0;
}

/* No Cart */
.cart__no {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 60vh;
    row-gap: 20px
}

.cart__no-img {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    /* background-repeat: no-repeat; */
    background-position: center;
    background-size: contain;
}

.cart__no-sub {
    font-size: var(--normal-font-size);
}

/* Cart Item Loading */

.cart__body-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
}

.cart__body-header-loading {
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #ededed;
    display: flex;
    align-items: center;
}

.cart__body-header-input-loading {
    height: 16px;
    width: 16px;
    border-radius: 2px;
    background-color: #ededed;
    margin: 0 20px;
}

.cart__body-header-sub-loading {
    height: 16px;
    width: 40%;
    border-radius: 2px;
    background-color: #fafafa;
}

.cart__body-product-loading {
    display: flex;
    align-items: center;
    padding: 15px 20px 20px 20px;
    border-bottom: 1px solid #ededed;
}

.cart__body-product-img-loading {
    height: 80px;
    width: 80px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

.cart__body-product-img-icon-loading {
    font-size: 30px;
    color: #ededed;
}

.cart__body-product-info-loading {
    display: flex;
    width: 100%;
}

.cart__body-product-desc-loading {
    padding: 5px 0 0 10px;
    height: 50px;
    display: grid;
    width: 100%;
}

.cart__body-product-desc-line-loading {
    height: 16px;
    width: 40%;
    background-color: #fafafa;
    border-radius: 2px;
}

.cart__body-discount-loading {
    padding: 16px 0px 16px 40px;
    border-bottom: 1px solid #ededed;
}

.cart__body-discount-line-loading {
    height: 16px;
    width: 40%;
    background-color: #fafafa;
}

.cart__body-transport-loading {
    padding: 20px 0px 20px 40px;
}

.cart__body-transport-line-loading {
    height: 16px;
    width: 40%;
    background-color: #fafafa;
}

/* End CSS Cart Item Loading */

.cart__body-header {
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}

.cart__body-header span {
    padding: 2px 3px;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 10px;
    height: 18px;
    display: flex;
    align-items: center;
    border-radius: 2px;
}

.cart__body-header-text {
    margin-left: 10px;
}

.cart__body-header-chat {
    text-decoration: none;
    margin-left: 5px;
}

.cart__body-header-chat-icon {
    font-size: 20px;
    color: var(--primary-color);
}

.cart__body-product {
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 0 20px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.cart__body-product-info {
    flex: 2;
    display: flex;
    align-items: center;
}

.cart__body-prduct-desc {
    padding: 5px 20px 0 10px;
    flex: 1;
}

.cart__body-product-name {
    line-height: 2rem;
    max-height: 4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 5px;
}

.cart__body-product-type,
.cart__body-product-cost,
.cart__body-product-quantity,
.cart__body-product-money,
.cart__body-product-operation {
    text-align: center;
    flex: 1;
}

.cart__body-product-img {
    height: 80px;
    width: 80px;
    background-position: center;
    background-size: contain;
}

.cart__body-product-voucher {
    height: 18px;
}

.cart__body-product-cost {
    display: flex;
    column-gap: 10px;
    justify-content: center;
}

.cart__body-product-type {
    color: rgba(0, 0, 0, .54);
}

.cart__body-product-cost-old {
    color: rgba(0, 0, 0, .54);
    text-decoration: line-through;
}

.cart__body-product-operation .btn-tools {
    display: flex;
    justify-content: center;
}

.cart__count-btns {
    display: flex;
    justify-content: center;
}

.cart__body-discount {
    padding: 16px 0 16px 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.cart__body-discount-icon {
    font-size: 16px;
    color: var(--primary-color);
}

.cart__body-discount-sub {
    margin-left: 14px;
}

.cart__body-discount-link {
    text-decoration: none;
    margin-left: 24px;
    color: #05a;
}

.cart__body-transport {
    padding: 20px 0 20px 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.cart__body-transport-img {
    height: 20px;
    width: 20px;
}

.cart__body-transport-sub {
    margin-left: 15px;
}

.cart__body-transport-more {
    text-decoration: none;
    color: #05a;
    margin-left: 6px;
}

.cart__footer {
    position: sticky;
    bottom: -2px;
    left: 0;
    right: 0;
}

.cart__purchase {
    position: relative;
    background-color: var(--white-color);
}

.cart__purchase::before {
    position: absolute;
    content: "";
    background: linear-gradient(transparent,rgba(0,0,0,.06));
    height: 20px;
    width: 100%;
    left: 0;
    top: -20px;
}

.cart__purchase-voucher {
    display: flex;
    justify-content: flex-end;
    padding: 12px 30px 12px 0;
    font-size: var(--normal-font-size);
    border-bottom: 1px dashed rgba(0, 0, 0, .09);
    column-gap: 2rem;
}

.cart__purchase-voucher-title {
    display: flex;
}

.cart__purchase-voucher-sub {
    font-size: 15px;
    margin-left: 8px;
}

.cart__purchase-voucher-link {
    text-decoration: none;
    color: #05a;
}

.cart__purchase-payment {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
}

.cart__purchase-payment-desc {
    display: flex;
    flex: 1;
}

.cart__purchase-footer-delele {
    text-decoration: none;
    color: #05a;
}

.cart__purchase-payment-left {
    display: flex;
    align-items: center;
    column-gap: 2rem;
    flex: 1;
}

.cart__purchase-payment-right {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    column-gap: 16px;
    margin-right: 22px;
}

.cart__purchase-payment-total-sub span {
    margin-left: 5px;
    font-size: 24px;
    color: var(--primary-color);
}

.cart__like {
    margin: 40px 0 70px;
}

.cart__like-title {
    padding: 20px 0 10px;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .54);
}

.cart__like-product-item-img {
    position: relative;
}

.cart__like-product-item-progress {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fafafa;
}

.cart__like-product-item-spinner {
    border: 6px solid #ededed;
    border-top-color: transparent;
}

.cart button {
    outline: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 8px;
}

.cart .btn-tool {
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart .btn-tool__edit {
    background-color: #0298cf;
}

.cart .btn-tool__del {
    background-color: #f80000;
}

.cart .btn-tools i {
    color: white;
}

.cart__count-input {
    border: 1px solid var(--border-color);
    text-align: center;
    padding: 0.45rem 0.8rem;
    outline: 0;
}

.cart__btn-add,
.cart__btn-sub {
    background-color: #f5f5f5;
    width: 32px;
    height: 32px;
    outline: none;
    border: 1px solid #ccc;
    font-size: 14px;
    cursor: pointer;
}

.cart__count-input {
    height: 32px;
    width: 60px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    border-left: none;
    border-right: none;
    outline: none;
    display: block;
}

.cart__order {
    position: sticky;
    background-color: var(--white-color);
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 1rem;
}

.cart__checkout {
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.cart__checkout-label {
    font-size: 15px;
}

.cart__order-btn {
    min-width: 142px;
    height: 36px;
    background-color: var(--primary-color);
    text-decoration: none;
    border: none;
    border-radius: 2px;
    font-size: 1.5rem;
    padding: 0;
    color: var(--white-color);
    cursor: pointer;
    outline: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1.6rem;
}

/* Form Message */
.auth-form__msg {
    font-size: var(--normal-font-size);
}

.auth-form {
    margin-inline: 1.5rem;
}

@media screen and (max-width: 768px) {
    :root {
        --normal-font-size: 16px;
    }

    .header__cart-mobile {
        background-color: var(--white-color);
        padding-left: 12px;
        background-image: linear-gradient(#fff, #fff);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        padding: 8px 12px 8px 12px;
    }

    .header__mobile-container {
        height: var(--header-with-search-height);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart__mobile {
        color: var(--text-color);
        margin: calc(20px + var(--header-with-search-height)) 0 20px 0;
    }

    .cart__mobile-item {
        position: relative;
        background-color: var(--white-color);
        margin-bottom: 12px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    }

    /* Cart Loading */

    .cart__mobile-item-loading {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: var(--white-color);
    }

    .cart__mobile-item-loading-header {
        padding: 16px 12px; 
        display: flex;
        align-items: center;
    }

    .cart__mobile-item-loading-check {
        width: 20px;
        height: 20px;
        background-color: #ededed;
        margin: auto 12px auto 0; 
        border-radius: 2px;
    }

    .cart__mobile-item-loading-header-shop {
        height: 18px;
        width: 30%;
        background-color: #ededed;
        border-radius: 2px;
    }

    .cart__mobile-item-loading-header-fix {
        height: 18px;
        width: 10%;
        background-color: #ededed;
        border-radius: 2px;
        margin-left: auto;
    }

    .cart__mobile-item-loading-body {
        padding: 0 12px;
    }
    
    .cart__mobile-item-loading-body-item {
        display: flex;
        padding: 12px 0;
    }

    .cart__mobile-item-loading-body-item-img {
        width: 84px;
        height: 84px;
        background-color: #ededed;
        border-radius: 2px;
    } 

    .cart__mobile-item-loading-body-item-info {
        width: 100%;
        flex: 1;
        margin-left: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cart__mobile-item-loading-body-item-info-1 {
        height: 18px;
        width: 100%;
        background-color: #ededed;
        border-radius: 2px;
    }

    .cart__mobile-item-loading-body-item-info-2 {
        height: 18px;
        width: 50%;
        background-color: #ededed;
        border-radius: 2px;
    }

    .cart__mobile-item-loading-body-item-info-3 {
        height: 36px;
        width: 25%;
        background-color: #ededed;
        border-radius: 2px;
    }

    /* ------------ */

    .cart__mobile-item-header {
        padding: 16px 12px;
        display: flex;
        align-items: center;
        font-size: var(--normal-font-size);
        justify-content: space-between;
    }

    .cart__mobile-item-box {
        margin-right: 12px;
        display: flex;
        align-items: center;
    }

    .cart__mobile-item-input {
        height: 18px;
        width: 18px;
        accent-color: var(--primary-color);
    }

    .cart__mobile-item-header-shop {
        flex: 1;
        display: flex;
        align-items: center;
        text-align: left;
    }

    .cart__mobile-item-header-shop-icon-store {
        font-size: 18px;
        margin-right: 8px;
        color: var(--primary-color);
    }

    .cart__mobile-item-header-shop-favorite {
        font-size: 13px;
        background-color: var(--primary-color);
        margin-right: 8px;
        padding: 2px 4px;
        color: var(--white-color);
        border-radius: 2px;
    }

    .cart__mobile-item-header-shop-icon-arrow {
        font-size: 26px;
        margin-left: 10px;
        color: rgba(0, 0, 0, .54);
    }

    .cart__mobile-item-header-fix {
        color: rgba(0, 0, 0, .54);
        cursor: pointer;
    }

    .cart__mobile-item-body {
        position: relative;
        height: 224px;
        border-top: 1px solid var(--border-color);
        overflow: hidden;
    }

    .cart__mobile-item-body-container {
        position: relative;
        /* height: 224px; */
        width: 100%;
        transition: all .3s ease;
    }
    
    .cart__mobile-item-body-product {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        padding: 20px 12px 12px 12px;
        column-gap: 12px;
    }
    
    .cart__mobile-item-body-container.move {
        transform: translateX(-200px);
    }

    .cart__mobile-item-body-product-similar {
        font-size: var(--normal-font-size);
        background-color: #f79113;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        width: 100px;
        cursor: pointer;
    }

    .cart__mobile-item-body-product-delete {
        font-size: var(--normal-font-size);
        background-color: #ee4e2e;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-color);
        padding: 12px;
        cursor: pointer;
    }

    .cart__mobile-item-body-tools {
        position: absolute;
        margin-top: 20px;
        transform: translateX(100%);
        display: flex;
        height: 100%;
        width: 100%;
    }

    .cart__mobile-item-body-left {
        display: flex;
        height: 100px;
    }

    .cart__mobile-item-product-img {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .cart__mobile-item-body-right {
        display: flex;
        flex-direction: column;
    }

    .cart__mobile-item-product-name {
        font-size: var(--normal-font-size);
        line-height: 1.8rem;
        height: 1.8rem;
        /* overflow: hidden; */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;

    }

    .cart__mobile-item-product-type {
        font-size: var(--normal-font-size);
        margin-top: 6px;
        padding: 6px;
        background-color: #f2f2f2;
        border-radius: 2px;
        color: #565656;
        display: flex;
        align-items: center;
    }

    .cart__mobile-item-product-type-icon {
        font-size: 18px;
        color: #3a3a46;
        margin-left: 8px;
    }

    .cart__mobile-item-product-voucher {
        margin-top: 12px;
        display: flex;
        align-items: center;
    }

    .cart__mobile-item-product-voucher-img {
        height: 18px;
    }

    .cart__mobile-item-product-change-sub span {
        font-size: 12px;
        color: var(--primary-color);
        border-radius: 2px;
        margin-top: 4px;
        display: inline-block;
        border: 1px solid var(--primary-color);
        padding: 0 2px;
    }

    .cart__mobile-item-product-price {
        display: flex;
        margin-top: 12px;
        column-gap: 6px;
        font-size: var(--normal-font-size);
    }

    .cart__mobile-item-product-price-old {
        color: rgba(0, 0, 0, .54);
        text-decoration: line-through;
    }

    .cart__mobile-item-product-price-new {
        color: var(--primary-color);
    }

    .cart__mobile-item-product-quantity {
        display: flex;
        height: 32px;
        font-size: var(--normal-font-size);
        /* margin-top: 12px; */
    }

    .cart__mobile-item-product-quantity-btn-plus,
    .cart__mobile-item-product-quantity-btn-less {
        height: 32px;
        width: 32px;
        text-align: center;
        line-height: 32px;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .cart__mobile-item-product-quantity-btn-plus {
        border-left: 1px solid var(--border-color);
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        cursor: pointer;
    }

    .cart__mobile-item-product-quantity-btn-less {
        border-right: 1px solid var(--border-color);
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        cursor: pointer;
    }

    .cart__mobile-item-product-quantity-input {
        width: 64px;
        border: none;
        outline: none;
        text-align: center;
        border: 1px solid var(--border-color);
    }

    .cart__mobile-voucher {
        padding: 16px 12px;
        font-size: var(--normal-font-size);
        border-top: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .cart__mobile-voucher-icon-more {
        font-size: 18px;
        margin-right: 12px;
        color: rgba(0, 0, 0, .54);
    }

    .cart__mobile-voucher span {
        flex: 1;
    }

    .cart__mobile-voucher-icon-arrow {
        font-size: 18px;
        color: rgba(0, 0, 0, .54);
    }

    .cart__mobile-free-ship {
        padding: 16px 12px;
        display: flex;
        align-items: center;
        column-gap: 12px;
        font-size: var(--normal-font-size);
        border-top: 1px solid var(--border-color);
        cursor: pointer;
    }

    .cart__mobile-free-ship-icon {
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .cart__mobile-voucher-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .4);
        display: none;
        z-index: 9;
    }

    .cart__mobile-voucher-bottom-sheet-overlay.show {
        display: block;
    }

    .cart__mobile-voucher-bottom-sheet-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);
        font-size: var(--normal-font-size);
        background-color: var(--white-color);
        border-radius: 4px 4px 0 0; 
        box-shadow: 0 4px 20px 0 rgba(28, 28, 51, .16);
        animation: showBottomSheet .4s ease forwards;
        transition: all .3s ease;
        z-index: 10;
    }

    @keyframes showBottomSheet {
        to {
            bottom: 0;
        }
    }

    .cart__mobile-voucher-bottom-sheet-container.show {
        transform: translateY(0);
    }

    .cart__mobile-voucher-bottom-sheet-header {
        padding: 16px;
        display: flex;
        justify-content: space-between;
    }

    .cart__mobile-voucher-bottom-sheet-header-icon {
        font-size: 18px;
        color: #8e8e8e;
    }

    .cart__mobile-voucher-bottom-sheet-box {
        padding: 0 16px 16px 16px;
        display: flex;
        justify-content: space-between;
        height: 60px;
    }

    .cart__mobile-voucher-bottom-sheet-input {
        border: none;
        outline: none;
        flex: 1;
        font-size: var(--normal-font-size);
        padding-left: 16px;
        border: 1px solid var(--border-color);
        border-radius: 2px;
    }

    .cart__mobile-voucher-bottom-sheet-input:focus {
        border: 1px solid #888;
    }

    .cart__mobile-voucher-bottom-sheet-btn {
        border: none;
        margin-left: 12px;
        font-size: 14px;
        background-color: #bdbdbd;
        border-radius: 2px;
        color: var(--white-color);
    }

    .cart__mobile-voucher-bottom-sheet-card {
        padding: 60px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cart__mobile-voucher-bottom-sheet-card-box {
        position: relative;
        height: 60px;
        width: 120px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        border: 2px solid #bdbdbd;
    }

    .cart__mobile-voucher-bottom-sheet-card-line span {
        height: 40px;
        display: inline-block;
        width: 6px;
        border-radius: 4px;
        background-color: #eaeaea;
    }

    .cart__mobile-voucher-bottom-sheet-card-text {
        font-size: 46px;
        margin-left: 20px;
        color: #bfbfbf;
    }

    .cart__mobile-voucher-bottom-sheet-card-left-circle {
        position: absolute;
        height: 20px;
        width: 20px;
        left: -10px;
        border-left-color: transparent;
        border-radius: 50%;
        background-color: #fff;
        border-right: 3px solid #bdbdbd;
    }

    .cart__mobile-voucher-bottom-sheet-card-right-circle {
        position: absolute;
        height: 20px;
        width: 20px;
        right: -10px;
        border-left-color: transparent;
        border-radius: 50%;
        background-color: #fff;
        border-left: 3px solid #bdbdbd;
    }

    .cart__mobile-voucher-bottom-sheet-card-plus-1 {
        position: absolute;
        font-weight: bold;
        color: #ececec;
        top: -30px;
        left: 10px;
    }

    .cart__mobile-voucher-bottom-sheet-card-plus-2 {
        position: absolute;
        font-weight: bold;
        color: #ececec;
        bottom: -30px;
        right: -10px;
    }

    .cart__mobile-voucher-bottom-sheet-card-round-1 {
        position: absolute;
        top: -40px;
        width: 10px;
        height: 10px;
        border: 2px solid #ececec;
        border-radius: 50%;
    }

    .cart__mobile-voucher-bottom-sheet-card-round-2 {
        position: absolute;
        bottom: -30px;
        width: 10px;
        height: 10px;
        border: 2px solid #ececec;
        border-radius: 50%;
    }

    .cart__mobile-voucher-bottom-sheet-sub {
        text-align: center;
        padding-bottom: 100px;
    }

    .cart__mobile-voucher-bottom-sheet-sub-title {
        margin-bottom: 16px;
    }

    .cart__mobile-voucher-bottom-sheet-sub-desc {
        color: #727272;
    }

    .cart__mobile-transport-bottom-sheet-overlay {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .4);
        z-index: 9;
        display: none;
    }

    .cart__mobile-transport-bottom-sheet-overlay.show {
        display: block;
    }

    .cart__mobile-transport-bottom-sheet-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);
        font-size: var(--normal-font-size);
        background-color: var(--white-color);
        border-radius: 4px 4px 0 0; 
        box-shadow: 0 4px 20px 0 rgba(28, 28, 51, .16);
        animation: showBottomSheet .4s ease forwards;
        transition: all .3s ease;
        z-index: 10;
    }

    .cart__mobile-transport-bottom-sheet-container.show {
        transform: translateY(0);
    }

    .cart__mobile-transport-bottom-sheet-header {
        padding: 16px;
        text-align: center;
        text-transform: capitalize;
    }

    .cart__mobile-transport-bottom-sheet-list {
        border-bottom: 1px solid var(--border-color);
    }

    .cart__mobile-transport-bottom-sheet-item {
        display: flex;
        border-top: 1px solid var(--border-color);
        height: 60px;
        padding: 16px;
        line-height: 20px;
    }

    .cart__mobile-transport-bottom-sheet-item-col-1,
    .cart__mobile-transport-bottom-sheet-item-col-2 {
        flex: 1;
    }

    .cart__mobile-transport-bottom-sheet-item-col-3 {
        flex: 2;
        text-transform: capitalize;
    }

    .cart__mobile-transport-bottom-sheet-btn {
        margin: 16px;
        padding: 12px;
        color: var(--white-color);
        border-radius: 2px;
        text-align: center;
        background-color: var(--primary-color);
        cursor: pointer;
    }

    .cart__mobile-transport-bottom-sheet-btn:hover {
        opacity: .9;
    }

    .cart__mobile-checkout {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: var(--normal-font-size);
        background-color: var(--white-color);
        box-shadow: 0 0 1px rgba(0, 0, 0, .4);
        z-index: 2;
    }

    .cart__mobile-checkout-voucher {
        display: flex;
        justify-content: space-between;
        padding: 16px 12px;
        align-items: center;
    }

    .cart__mobile-checkout-voucher.hide {
        display: none;
    }

    .cart__mobile-checkout-voucher-title,
    .cart__mobile-checkout-voucher-code {
        display: flex;
        align-items: center;
        column-gap: 12px;
    }

    .cart__mobile-checkout-voucher-code {
        color: rgba(0, 0, 0, .54);
    }

    .cart__mobile-checkout-voucher-icon-more,
    .cart__mobile-checkout-voucher-icon-arrow {
        font-size: 18px;
        color: rgba(0, 0, 0, .54);
    }

    .cart__mobile-checkout-money {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 12px;
        border-top: 1px solid var(--border-color);
    }

    .cart__mobile-checkout-money-left {
        display: flex;
        align-items: center;
    }

    .cart__mobile-checkout-money-right {
        display: flex;
        align-items: center;
        column-gap: 12px;
    }

    .cart__mobile-checkout-money-text span {
        color: var(--primary-color);
    }

    .cart__mobile-checkout-money-btn {
        background-color: var(--primary-color);
        color: var(--white-color);
        padding: 12px;
        border-radius: 4px;
        cursor: pointer;
    }

    .cart__mobile-checkout-money-btn:hover {
        opacity: .8;
    }

    .cart__mobile-checkout-money-text.hide,
    .cart__mobile-checkout-money-btn.hide {
        display: none;
    }

    .cart__mobile-checkout-money-btn-delete {
        border: 1px solid #bababa;
        padding: 12px;
        border-radius: 4px;
        display: none;
        cursor: pointer;
    }

    .cart__mobile-checkout-money-btn-delete.show {
        display: block;
    }

    .cart__like {
        margin: 0;
    }

    .cart__like-title {
        position: relative;
        text-align: center;
        padding-top: 6px;
    }

    .cart__like-title::before {
        position: absolute;
        content: '';
        height: 2px;
        left: 0;
        top: 40%;
        width: 100%;
        background-color: var(--border-color);
    }

    .cart__like-title::after {
        position: absolute;
        content: 'Có thể bạn cũng thích';
        line-height: 20px;
        text-transform: none;
        height: 20px;
        top: 12%;
        width: 200px;
        left: 28%;
        background-color: #f5f5f5;
    }

    .cart__delete {
        border-radius: 4px;
        font-size: var(--normal-font-size);
        background-color: var(--white-color);
    }

    .cart__delete-msg {
        padding: 20px 30px 26px 30px;
    }

    .cart__delete-btns {
        display: flex;
        border-top: 1px solid var(--border-color);
    }
    
    .cart__delete-btn-agree,
    .cart__delete-btn-no {
        flex: 1;
        text-align: center;
        padding: 16px 0;
        cursor: pointer;
    }

    .cart__delete-btn-agree {
        border-left: 1px solid var(--border-color);
        color: var(--primary-color);
    }

}