html,
body,
.body {
    font-family: var(--bs-body-font-family), 'Kanit', 'Tahoma', sans-serif;
    background-color: var(--bs-white);
}

@font-face {
    font-family: 'SUKHUMVIT';
    src: url('font/SUKHUMVITSET-BOLD.ttf') format('ttf'),
    url('font/SUKHUMVITSET-BOLD.woff') format('woff');
}

@font-face {
    font-family: 'BaiJamjuree';
    src: url('font/BaiJamjuree-Light.ttf') format('ttf'),
    url('font/BaiJamjuree-Light.woff') format('woff');
}

/*var(--bs-head-font-family);*/
/*font-size: var(--bs-font-24)*/
:root {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-theme: #F1553E;
    --bs-vine: #7B3A3B;
    --bs-gray: #878787;
    --bs-light-gray: #ECECEC;
    --bs-dark-gray: #393939;
    --bs-white: #FFFFFF;
    --bs-yellow: #FBB02A;
    --bs-font-16: 16px;
    --bs-font-18: 18px;
    --bs-font-20: 20px;
    --bs-font-24: 24px;
    --bs-head-font-family: 'SUKHUMVIT', Arial, sans-serif;
    --bs-body-font-family: 'BaiJamjuree', Arial, sans-serif;
}

/*body::-webkit-scrollbar {*/
/*    display: none; !* for Chrome, Safari, and Opera *!*/
/*}*/

.font_heading {
    font-family: var(--bs-head-font-family);
}

.font_body {
    font-family: var(--bs-body-font-family);
}

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

.content-index {
    padding: 0 64px;
}

/*Breadcrumbs*/
.viewBreadcrumbsProduct {
    color: var(--bs-vine);
    background-color: unset;
    font-weight: bold;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.viewBreadcrumbsProduct a {
    color: var(--bs-vine);

}

.viewBreadcrumbsProduct .latest {
    color: var(--bs-theme);

}

.viewBreadcrumbsProduct > li + li:before {
    padding: 0 5px;
    color: var(--bs-light-gray);
    content: ">";
}

/*Breadcrumbs*/

.img-flash-sale img {
    max-height: 156px;
    max-width: 185px;
    /*width: 100%;*/
}

.box-search-input {
    width: 89%;
    border-radius: 0;
    float: left;
}

.input-radius-right {
    border-radius: 0 30px 30px 0;
    width: 11%;
    height: 37.6px;
}

.box-dropdown-search button {
    overflow: hidden;
    padding: 8px;
}

.box-input-search button {
    padding: 0 30%;
}

.hide {
    display: none !important;
}

.pointer {
    cursor: pointer;
}

/* footer*/
.link-footer {
    color: var(--bs-gray);
    text-decoration: none;
}

.link-footer:hover {
    color: var(--bs-gray);
    text-decoration: underline;
}

.display-justify-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* footer*/

.box-filter {
    background: var(--bs-white);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px;
    margin-right: 10px;
    height: 100%;
}

.box-filter-select {
    background: #FBFBFB;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #E7E7E7;
    border-radius: 16px;
    padding: 20px;
    height: 100%;
}

.btn-filte {
    padding: 5px 10px;
    align-items: center;
    background: #FFEDEB;
    border-radius: 20px;
    font-size: 14px;
    color: var(--bs-theme);

}

.btn-filte:hover {
    color: var(--bs-theme);
    text-decoration: underline;
}

.btn-copy {
    padding: 5px 10px;
    align-items: center;
    background: var(--bs-vine);
    border-radius: 20px;
    font-size: 14px;
    color: var(--bs-white);

}

.btn-copy:hover {
    color: var(--bs-white);
    text-decoration: underline;
}

.btn-product-1 .box-btn-add-to-cart {
    padding: 10px;
}

.box-promotion-tab {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    width: 100%;
}

.box-promotion-tab-mobile {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.product-2 {
    width: 33.33%;
    padding: 10px;
    float: left;
}

.set-img-default img {
    max-width: 450px;
}

.menu-category-new {
    /*padding: 10px;*/
    width: 100%;
}

.head-promotion {
    border-radius: 15px 15px 0 0;
    background: linear-gradient(90deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    box-shadow: 0.89943px -8.09488px 21.58634px 0 rgba(214, 2, 2, 0.15);
    color: #FFF;
    text-shadow: -4px 0 0 var(--bs-theme);
    font-style: italic;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    width: fit-content;
    padding: 0 5%;
}

.tagSeo {
    font-size: 14px;
    color: #393939;
}

.tagSeo {
    text-decoration: none;
}

.tagSeo:hover {
    color: var(--bs-theme);
}

.image-captcha {
    cursor: pointer;
    width: 200px;
}

/*searchButtonDownload*/
.searchButtonDownload {
    border: 1px solid var(--bs-theme);
    background-color: var(--bs-theme);
    color: var(--bs-white);
    padding: 0 15px;
    font-size: var(--bs-font-18);
    margin-left: -10px !important;
}

.searchButtonDownload:hover {
    background-color: var(--bs-yellow);
    border: 1px solid var(--bs-theme);
}

.searchInputDownload {
    border: 1px solid var(--bs-theme);
    font-size: var(--bs-font-18);
}

/*searchButtonDownload*/
.searchTypeDownload {
    margin: 0 auto;
    width: 50%;
}

/*download_1*/
.download {
    width: 20%;
    float: left;
    height: 160px;
    overflow: hidden;
    padding: 15px 0;
    border-right: 1px solid var(--bs-light-gray);
    border-bottom: 1px solid var(--bs-light-gray);
}

.imgDownload {
    height: 180px;
    overflow: hidden;
    width: 50%;
    float: left;
    padding: 0 10px;
}

.imgDownload img {
    width: 100%;
    max-width: 90px;
    max-height: 130px;

}

.textBoxDownload {
    width: 50%;
    float: left;
    font-size: 12px;
    padding-right: 5px;
}

.textDownload {
    height: 75px;
    line-height: 2;
    overflow: hidden;
}

.sizeDownload {
    height: 35px;
    padding-top: 20px;
}

.boxBtnDownload {
    font-size: 13px;
}

/*download_1*/

.e-book {
    width: 100%;
    padding: 20px;
    border: 1px solid var(--bs-light-gray);
    border-radius: 25px;
    text-align: center;
}

.redeem-product {
    background-color: var(--bs-theme);
    color: var(--bs-white);
    width: fit-content;
    padding: 5px;
    font-size: 10px;
    border-radius: 2px;
}

.arx-content img {
    max-width: 750px;
}

.comment_views iframe {
    max-width: 560px;
    width: 100%;
}

.check-text-sub {
    margin-left: 20px;
}

.tab-promotion {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #FFEDEB;
    border-radius: 6px;
    margin-left: 10px;
}

.tab-promotion img {
    width: 44px;
}

.tab-promotion-step {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #FFEDEB;
    border-radius: 6px;
    margin-left: 10px;
    text-align: center;
}

.tab-promotion-step-1, .tab-promotion-step-2, .tab-promotion-step-3 {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.tab-promotion-step-1 {
    background-color: #FFE9C2;
}

.tab-promotion-step-2 {
    background-color: #FFEDEB;
}

.tab-promotion-step-3 {
    background-color: #D0E0FF;
}

.promotion-step-other {
    background: #efefef;
    padding: 16px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.promotion-step-other:hover {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray);
}

.text-news2-subject {
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.area-subject {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#tab-category-desktop {
    display: none;
}

.text-search {
    background-color: var(--bs-yellow);
    display: flex;
    align-items: center;
    color: white;
    padding: 0 10px;
}

.HW-100P {
    height: 100%;
}

.one-product {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 14px 28px 14px;
    text-align: center;
    width: 16.7%;
    height: 342px;
}

.twelve-product {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 14px 28px 14px;
    text-align: center;
    width: 17.7%;
    padding: 10px;
}

.twelve-product .text {
    font-weight: 400;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 48px;
    padding: 0 10px;
    margin-bottom: 10px;
}

/*.text-name-product-6 {*/
/*    color: var(--bs-black);*/
/*    text-decoration: none;*/
/*}*/

/*.text-name-product-6:hover {*/
/*    color: var(--bs-vine);*/
/*}*/

.price-top-seller {
    margin: 0 5px;
    display: flex;
    flex-direction: column;
}

.comment_views img {
    width: 100%;
}

li.cycle-tab-item {
    text-align: center;
}

.contain-map {
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px;
}

.tab-detail-product {
    width: 100%;
    padding: 0 292px;
}

.tab-detail-product img {
    width: 100%;
}

.force-overflow {
    min-height: 450px;
}

.scrollbar {
    height: 125px;
    overflow-y: scroll;
}

#form-address-area {
    max-height: 350px;
    overflow-y: scroll;
}

.style-4::-webkit-scrollbar-track {
    background-color: #F9F9F9;
    border-radius: 10px;
}

.style-4::-webkit-scrollbar {
    width: 10px;
    background-color: var(--bs-white);
}

.style-4::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9e90 0%, #FFF 100%);
    border-radius: 5px;
}

.percent-promotion {
    font-size: 12px;
    background: var(--bs-theme);
    display: flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 3px;
    color: white;
}

.product-pro-order {
    margin-bottom: 15px;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
}

.text-product-summary label {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.tab-detail-product iframe {
    width: 100%;
}

.filter-search {
    height: 37.6px;
    background: white;
    padding: 5px;
    border-radius: 30px 0 0 30px;
    display: flex;
    align-items: center;
    color: var(--bs-theme);
    justify-content: space-around;
}

#topMenuSearch1:focus {
    outline: none;
    box-shadow: 0 0 0 0 white;
    border-color: white;
}

.time-flash-sale {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-order-status {
    display: flex;
    align-items: center;
}

.img-coupon-mini {
    height: 20px;
    margin-right: 5px;
    max-width: 30px;
}

/*size1 desktop1200*/
@media only screen and (min-width: 1200px) {
    .no-order {
        width: 20%;
    }

    .text-order-status {
        font-size: var(--bs-font-24);
        margin-top: 40px;
    }

    .display-center-product-set {
        display: flex;
        justify-content: center;
    }

    .btn-cart-view-box {
        display: flex;
        align-items: center;
    }

    .container-login-main {
        padding-top: 4%;
    }

    .tab-promotion-step-1, .tab-promotion-step-2, .tab-promotion-step-3 {
        margin-right: 10px;
    }

    .tab-promotion-step-1 img, .tab-promotion-step-2 img, .tab-promotion-step-3 img {
        width: 45px;
    }

    .image-head-footer-search img {
        height: 80px;
    }

    .text-search {
        font-size: 26px;
        height: 80px;
    }

    .padding-center-desktop {
        padding-left: 5px;
        padding-right: 15px;
    }

    .promotion-product-list {
        height: 170px;
    }

    #tab-category-desktop {
        display: block !important;
    }

    .area-subject {
        padding: 15px 15px 0 0;
    }

    .image-news {
        border-radius: 16px 0 0 16px;
    }

    .text-news2-subject {
        font-size: var(--bs-font-16);
        color: var(--bs-gray);
        margin-top: 20px;
    }

    .img-redeem {
        max-height: 140px;
    }

    .footer-for-buy {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-amount-product, .footer-add-product {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px;
    }

    .footer-add-product {
        width: 20%;
    }

    .head-promotion {
        font-size: 38px;
    }

    .header-coupon {
        font-size: 60px;
    }

    .product-list {
        max-height: 230px;
    }

    .text-sort {
        text-align: right !important;
    }

    /*.sort-type-1 {*/
    /*    width: 25% !important;*/
    /*}*/
    /*.sort-type-2 {*/
    /*    width: 50% !important;*/
    /*}*/
    .six-product, .promotion-product {
        width: 17.6% !important;
        /*height: 345px !important;*/
    }

    .box-preview {
        background: var(--bs-white);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        padding: 20px;
        height: 100%;
    }

    .box-btn-product {
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .box-img {
        margin-right: 15px;
    }

    .avatar-user {
        width: 10%;
    }

    .username-user {
        width: 90%;
    }

    .count-coin .font-coin {
        font-size: var(--bs-font-20);
    }

    .count-coin .font-count-coin {
        font-size: 35px;
    }

    .count-coin img {
        margin-right: 20px;
    }

    .count-coin {
        justify-content: center;
        align-items: center;
    }

    .font-brand-head {
        font-size: 40px;
    }

    .form-payment {
        padding: 20px 20%;
    }

    .prompt-pay-box {
        display: flex;
        justify-content: center;
    }

    .scroll-bar {
        position: relative;
        height: 100%;
    }

    .scroll-area {
        max-height: 150px;
        overflow-x: hidden;
    }

    .top-frame {
        border-radius: 0 0 30px 30px;
    }

    .product-in-cart {
        display: table;
    }

    .text-name-flash-sale {
        padding: 16px 10px 0 0;
    }

    .img-flash-sale {
        margin-right: 10px;
        width: 185px;
    }

    .head-content {
        font-size: var(--bs-font-20) !important;
        min-height: 60px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .center-first-1 {
        width: 100%;
        overflow: hidden;
        max-height: 644px;
        border-radius: 12px;
    }

    .center-first-2 {
        width: 100%;
        overflow: hidden;
        max-height: 310px;
        border-radius: 12px;
    }

    .center-first-1, .center-first-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .one-product, .one-product-new, .twelve-product {
        width: 17.6% !important;
    }

    .product-9 {
        width: 20% !important;
    }


    .text-home-form {
        font-size: 40px;
        padding: 0 120px;
        border-radius: 15px 15px 0 0;
    }

    .text-head-3 {
        font-size: 38px;
        padding: 0 120px;
        border-radius: 15px 15px 0 0;
    }

    #container-max-width {
        max-width: 1300px !important;
    }

    .content-flash-sale {
        margin-top: 20px;
    }

    .line-head {
        height: 16px;
    }

    .flash-sale {
        text-align: center;
    }

    .head-index-img {
        width: 474px;
    }

    .height-light-main {
        width: 59%;
        padding-right: 16.5px;
        max-height: 350px;
    }

    .mySlides img {
        width: 100%;
    }

    .height-light-sub1, .height-light-sub2 {
        height: 163px;
    }

    .menuCategory {
        width: 720%;
        min-width: 730px;
        padding: 25px !important;
    }

    #contentMain {
        padding-top: 125px;
    }

    .dropdown {
        margin-left: 10%;
    }


    .width-search {
        width: 50% !important;
    }

    .bg-footer-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        background: var(--bs-theme);
        padding: 0 65px;
    }

    .display-desktop-tablet {
        display: flex;
    }

    .display-desktop {
        display: block;
    }

    .display-tablet, .display-tablet-mobile {
        display: none;
    }

    .display-mobile {
        display: none;
    }

    .display-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*.logo {*/
    /*    margin: 6px 0px 7px 60px;*/
    /*}*/
    .box-search {
        width: 45%;
        margin-left: 30px;
    }

    .cart-area {
        margin-left: 30px;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .logo-footer {
        padding: 55px 39px 47.89px 83px;
    }

    .data-footer {
        padding-left: 39px;
        padding-right: 71.5px;
    }

    .address-footer {
        padding-left: 71.5px;
        padding-right: 71.5px;
    }

    .contact-footer {
        padding-left: 71.5px;
        padding-right: 71.5px;
    }

    .logo-footer, .data-footer, .address-footer, .contact-footer {
        width: 25%;
    }

    .index-icon {
        display: flex;
        justify-content: center;
    }

    .index-icon .icon-box {
        margin: 0 40px;
    }

    .font-brand-head {
        font-size: 40px;
    }

    .btn-dot {
        bottom: 5%;
    }

    .head-news {
        font-size: 40px;
    }

    .sub-news {
        font-size: 35px;
    }

    .detail-news {
        font-size: var(--bs-font-16);
    }

    .link-video {
        min-height: 500px;
    }

    .head-text {
        font-size: 60px;
    }

}

/*size2 desktop1000*/
@media only screen and (max-width: 1200px) and (min-width: 1001px) {
    .condition-coupon-3 {
        font-size: 14px !important;
    }

    .condition-coupon-4 {
        font-size: 14px !important;
    }

    .btn-coupon-4 {
        font-size: 14px !important;
    }

    .btn-coupon-3 {
        font-size: 14px !important;
    }

    .no-order {
        width: 20%;
    }

    .text-order-status {
        font-size: var(--bs-font-24);
        margin-top: 40px;
    }

    .display-center-product-set {
        display: flex;
        justify-content: center;
    }

    .tab-detail-product {
        width: 100%;
        padding: 0 30px;
    }

    .btn-cart-view-box {
        display: flex;
        align-items: center;
    }

    .container-login-main {
        padding-top: 7%;
    }

    #profile {
        padding: 0;
        width: 100%;
    }

    .tab-promotion-step-1, .tab-promotion-step-2, .tab-promotion-step-3 {
        margin-right: 10px;
    }

    .tab-promotion-step-1 img, .tab-promotion-step-2 img, .tab-promotion-step-3 img {
        width: 25px;
    }

    .image-head-footer-search img {
        height: 70px;
    }

    .text-search {
        font-size: var(--bs-font-18);
        height: 70px;
    }

    .padding-center-desktop {
        padding-left: 5px;
        padding-right: 15px;
    }

    .promotion-product-list {
        overflow: scroll;
        height: 190px;
    }

    .one-product {
        margin: 0 5px 28px;
        width: 18.7%;
        height: 288px;
    }

    .twelve-product {
        margin: 0 5px 28px;
        width: 18.7%;
        padding: 5px;
    }

    .img-twelve-product {
        height: 155px !important;
    }

    .product-9 {
        width: 25% !important;
        height: 290px !important;
        padding: 5px;
    }

    .img-one-product {
        height: 135px !important;
    }

    .btn-cart {
        font-size: 14px !important;
    }

    .product-9 .product-sale-out {
        padding: 7px !important;
    }

    .product-9 .date-open-sale {
        padding: 8px 5px !important;
        margin-top: 5px !important;
    }

    .product-9 .text {
        font-size: 14px !important;
        height: 45px !important;
    }

    .product-sale-out, .date-open-sale, .date-cancel-sale, .date-temporarity-sale {
        margin-top: 5px !important;
    }

    .btn-product-1 .box-btn-add-to-cart {
        padding: 5px !important;
    }

    .img-content {
        height: 140px !important;
    }

    #tab-category-desktop {
        display: block !important;
    }

    .area-subject {
        padding: 15px 15px 0 0;
    }

    .box-news2-subject a {
        font-weight: 500;
        font-size: var(--bs-font-18) !important;
        margin-top: 10px;
        color: var(--bs-vine);
    }

    .text-news2-subject {
        font-size: var(--bs-font-16);
        color: var(--bs-gray);
        margin-top: 10px;
    }

    .img-redeem {
        max-height: 140px;
    }

    .footer-for-buy {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-amount-product, .footer-add-product {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }

    .footer-amount-product {
        width: 30%;
    }

    .footer-add-product {
        width: 20%;
    }

    .header-coupon {
        font-size: 50px;
    }

    .product-list {
        max-height: 230px;
    }

    .font-price-list {
        font-size: var(--bs-font-16) !important;
    }

    .price-product-list {
        font-size: var(--bs-font-16) !important;
    }

    .promotion-product-list {
        font-size: 14px;
    }

    .name-publisher-product-list {
        font-size: 14px;
    }

    .name-product-list a {
        font-size: var(--bs-font-16) !important;
    }

    .img-product-list img {
        max-width: 90px !important;
        max-height: 150px !important;
    }

    .text-sort {
        text-align: center !important;
    }

    /*.sort-type-1 {*/
    /*    width: 100% !important;*/
    /*}*/
    /*.sort-type-2 {*/
    /*    width: 100% !important;*/
    /*    margin-top: 10px;*/
    /*}*/
    .box-preview {
        background: var(--bs-white);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        padding: 20px;
        height: 100%;
    }

    .box-btn-product {
        height: 65px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .six-product, .promotion-product {
        width: 29.7% !important;
        /*height: 330px !important;*/
    }

    .box-img {
        margin-right: 15px;
    }

    .avatar-user {
        width: 10%;
    }

    .username-user {
        width: 90%;
    }

    .count-coin .font-coin {
        font-size: var(--bs-font-20);
    }

    .count-coin .font-count-coin {
        font-size: 35px;
    }

    .count-coin img {
        margin-right: 20px;
    }

    .count-coin {
        justify-content: center;
        align-items: center;
    }

    .tab-status {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab-status-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-payment {
        padding: 20px 20%;
    }

    .prompt-pay-box {
        display: flex;
        justify-content: center;
    }

    .scroll-bar {
        position: relative;
        height: 100%;
    }

    .scroll-area {
        max-height: 300px;
        overflow-x: hidden;
    }

    .top-frame {
        border-radius: 0 0 30px 30px;
    }

    .product-in-cart {
        display: table;
    }

    .img-flash-sale {
        margin-right: 10px;
    }

    .product-flash-sale {
        height: 170px !important;
    }

    .date-open-sale, .product-sale-out {
        font-size: 14px !important;
    }

    .head-content {
        font-size: var(--bs-font-18) !important;
    }

    .center-first-1 {
        width: 100%;
        overflow: hidden;
        max-height: 515px;
        border-radius: 12px;
    }

    .center-first-2 {
        width: 100%;
        overflow: hidden;
        max-height: 249px;
        border-radius: 12px;
    }

    .center-first-1, .center-first-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .text-home-form {
        font-size: 50px;
        padding: 0 120px;
        border-radius: 15px 15px 0 0;
    }

    .text-head-3 {
        font-size: 38px;
        padding: 0 120px;
        border-radius: 15px 15px 0 0;
    }

    .content-flash-sale {
        margin-top: 20px;
    }

    .line-head {
        height: 16px;
    }

    .flash-sale {
        text-align: center;
    }

    .head-index-img {
        width: 474px;
    }

    .height-light-main {
        width: 58%;
        padding-right: 24px;
        height: 350px;
    }

    .mySlides img {
        width: 100%;
    }

    .height-light-sub1, .height-light-sub2 {
        height: 163px;
    }

    .menuCategory {
        width: 870%;
        min-width: 730px;
        padding: 25px !important;
    }

    #contentMain {
        padding-top: 100px;
    }

    .dropdown {
        margin-left: 10%;
    }

    .width-search {
        width: 50% !important;
    }

    .bg-footer-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        background: var(--bs-theme);
        padding: 0 65px;
    }

    .display-desktop-tablet {
        display: flex;
    }

    .display-tablet, .display-tablet-mobile {
        display: none;
    }

    .display-desktop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .display-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-search {
        width: 45%;
        margin-left: 30px;
    }

    .logo-footer {
        padding: 55px 39px 47.89px 83px;
    }

    .data-footer {
        padding-left: 39px;
        padding-right: 71.5px;
    }

    .address-footer {
        padding-left: 71.5px;
        padding-right: 71.5px;
    }

    .contact-footer {
        padding-left: 71.5px;
        padding-right: 71.5px;
    }

    .logo-footer, .data-footer, .address-footer, .contact-footer {
        width: 25%;
    }

    .index-icon {
        display: flex;
        justify-content: center;
    }

    .index-icon .icon-box {
        margin: 0 48px;
    }

    .btn-dot {
        bottom: 5%;
    }

    .font-brand-head {
        font-size: 25px;
    }

    .head-news {
        font-size: 32px;
    }

    .sub-news {
        font-size: 28px;
    }

    .detail-news {
        font-size: 14px;
    }

    .link-video {
        min-height: 270px;
    }

    .head-text {
        font-size: 40px;
    }

}

/*size3 tablet500*/
@media only screen and (max-width: 1000px) and (min-width: 501px) {
    .btn-coupon-4 {
        font-size: 14px !important;
    }

    .btn-coupon-3 {
        font-size: 14px !important;
    }

    .condition-coupon-3 {
        font-size: 12px !important;
        top: 11% !important;
        left: 44% !important;
    }

    .condition-coupon-4 {
        font-size: 12px !important;
        top: 10% !important;
        left: 42% !important;
    }

    .text-order-status {
        font-size: var(--bs-font-20);
        margin-top: 25px;
    }

    .condition-coupon-popup {
        padding-top: 25% !important;
    }

    .box-img {
        width: 40px !important;
        height: 40px !important;
    }

    .box-img img {
        width: 40px;
    }

    .container-login-main {
        padding-top: 8%;
    }

    .btn-cart-view-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #profile {
        padding: 0;
        width: 100%;
    }

    .product-9 {
        width: 25% !important;
    }

    .tab-promotion-step-1, .tab-promotion-step-2, .tab-promotion-step-3 {
        display: flex;
        align-items: center;
        padding: 5px;
        text-align: center;
        flex-direction: column;
        margin-right: 10px;
    }

    .contain-map {
        padding: 10px;
    }

    .tab-promotion-step-1 img, .tab-promotion-step-2 img, .tab-promotion-step-3 img {
        width: 20px;
    }

    .searchTypeDownload {
        width: 100%;
    }

    .download {
        width: 33%;
    }

    .image-head-footer-search img {
        height: 60px;
    }

    .text-search {
        font-size: var(--bs-font-18);
        height: 60px;
    }

    .best-product {
        margin: 0 !important;
    }

    .area-subject {
        padding: 15px;
    }

    .image-news {
        border-radius: 16px 16px 0 0;
    }

    .box-news2-subject a {
        font-weight: 500;
        font-size: var(--bs-font-16) !important;
        margin-top: 10px;
        color: var(--bs-vine);
    }

    .text-news2-subject {
        font-size: 14px;
        color: var(--bs-gray);
        margin-top: 10px;
    }

    .data-product-redeem {
        font-size: 14px;
    }

    .search-mobile {
        top: 0 !important;
    }

    .img-redeem {
        max-height: 140px;
    }

    .price-product-summary {
        display: flex;
        align-items: center;
    }

    .footer-for-buy {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .footer-amount-product, .footer-add-product {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }

    .footer-amount-product {
        width: 100%;
    }

    .footer-add-product {
        width: 100%;
    }

    .header-coupon {
        font-size: 40px;
    }

    .img-content {
        height: 100px !important;
    }

    .box-content {
        height: 280px !important;
    }

    .product-list {
        max-height: 230px;
    }

    .font-price-list {
        font-size: var(--bs-font-16) !important;
    }

    .price-product-list {
        justify-content: center !important;
        align-items: center !important;
        font-size: var(--bs-font-16) !important;
    }

    .promotion-product-list {
        font-size: 14px;
    }

    .name-publisher-product-list {
        font-size: 14px;
    }

    .name-product-list a {
        font-size: var(--bs-font-16) !important;
    }

    .img-product-list img {
        max-width: 90px !important;
        max-height: 150px !important;
    }

    /*.sort-type-1 {*/
    /*    width: 70% !important;*/
    /*}*/
    /*.sort-type-2 {*/
    /*    width: 30% !important;*/
    /*    display: flex;*/
    /*    justify-content: flex-end;*/
    /*}*/
    .box-preview {
        background: var(--bs-white);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        padding: 20px;
    }

    .box-btn-product {
        height: 65px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .six-product, .promotion-product {
        width: 46% !important;
        /*height: 345px !important;*/
    }

    .box-img {
        margin-right: 15px;
    }

    .avatar-user {
        width: 15%;
    }

    .username-user {
        width: 85%;
    }

    .head-review {
        font-size: var(--bs-font-16) !important;
    }

    .short-product-review {
        font-size: 14px !important;
    }

    .name-product-review {
        font-size: var(--bs-font-16) !important;
    }

    .count-coin .font-coin {
        font-size: 14px;
    }

    .count-coin .font-count-coin {
        font-size: var(--bs-font-20);
    }

    .count-coin {
        align-items: center;
        flex-direction: column;
    }

    .prompt-pay-box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .transfer-box {
        margin-bottom: 10px !important;
    }

    .display-tablet-mobile {
        display: block;
    }

    .step-bar li:after {
        left: -30% !important;
        width: 60% !important;
    }

    .del-bin {
        position: relative;
        bottom: 7px !important;
        left: 98% !important;
    }

    .img-product-summary img {
        max-width: 85px !important;
        max-height: 115px !important;
    }

    .top-frame {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 99;
        padding: 7px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .product-in-cart {
        display: table;
    }

    .box-login {
        margin: 40px 0 !important;
        padding: 20px !important;
    }

    .icon-box img {
        width: 60px;
    }

    .text-name-flash-sale {
        padding: 0 15px 10px 15px;
    }

    .text-name-flash-sale p {
        height: 48px;
    }

    .img-flash-sale {
        height: 200px;
        overflow: hidden;
    }

    .text-flash-sale {
        min-height: 140px;
        margin-top: 5%;
    }

    .product-flash-sale {
        height: 372px !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .date-open-sale, .product-sale-out {
        font-size: 14px !important;
    }

    .head-content {
        font-size: var(--bs-font-16) !important;
    }

    .center-first-1 {
        width: 100%;
        overflow: hidden;
        max-height: 515px;
        border-radius: 12px;
    }

    .center-first-2 {
        width: 100%;
        overflow: hidden;
        max-height: 249px;
        border-radius: 12px;
    }

    .center-first-1, .center-first-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .one-product, .one-product-new {
        margin: 0 5px 28px;
        width: 23%;
        height: 340px;
    }

    .tab-detail-product {
        padding: 0 15px !important;
    }

    .twelve-product {
        margin: 0 5px 28px;
        width: 23%;
        padding: 5px;
    }

    .product-9 {
        width: 50% !important;
    }

    .text-home-form {
        font-size: 35px;
        padding: 0 120px;
        border-radius: 15px 15px 0px 0px;
    }

    .text-head-3 {
        font-size: 25px;
        padding: 0 120px;
        border-radius: 15px 15px 0px 0px;
    }

    .btn-dot {
        bottom: 5%;
    }

    .line-head {
        height: 10px;
    }

    .flash-sale {
        text-align: center;
    }

    .head-index-img {
        width: 374px;
    }

    .height-light-main {
        width: 100%;
        height: 220px;
    }

    .mySlides img {
        width: 100%;
    }

    .height-light-sub {
        display: none;
    }

    .menuCategory {
        width: 400%;
        min-width: 630px;
        padding: 25px !important;
    }

    #contentMain {
        padding-top: 0px;
        margin-top: 15%;
    }

    .dropdown {
        margin-left: 10%;
    }

    .display-desktop-tablet {
        display: flex;
    }

    .bg-footer-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        background: var(--bs-theme);
        padding: 0px 65px;
    }

    .display-desktop {
        display: none;
    }

    .display-tablet {
        display: flex;
    }

    .display-mobile {
        display: none;
    }

    .cart-area {
        margin-left: 15px;
    }

    .display-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-search {
        width: 45%;
        margin-left: 30px;
    }

    .logo-footer {
        padding: 20px;
    }

    .data-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .address-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contact-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .logo-footer {
        width: 100%;
    }

    .data-footer, .address-footer, .contact-footer {
        width: 33.33%;
    }

    .text-center-tablet {
        text-align: center;
    }

    .index-icon {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .font-brand-head {
        font-size: var(--bs-font-20);
    }

    .link-video {
        min-height: 130px;
    }

    .head-text {
        font-size: 30px;
    }

    /*.box-preview {*/
    /*width: 100%;*/
    /*}*/
    .box-FFF6F4 {
        justify-content: center;
    }

    .tabbable-line > .nav-tabs > li > a {
        font-size: var(--bs-font-16) !important;
    }

    .img-twelve-product {
        max-height: 165px;
        overflow: hidden;
        border: solid 0.5px #dedede;
    }

    .time-flash-sale {
        flex-direction: column;
    }
}

/*size4 mobile*/
@media only screen and (max-width: 501px) {
    .padding-coupon {
        padding: 5px 22% !important;
    }

    .condition-coupon-4 {
        font-size: 10px !important;
    }

    .btn-coupon-4 {
        font-size: 10px !important;
    }

    .btn-coupon-3 {
        font-size: 10px !important;
    }

    .alert-order {
        font-size: var(--bs-font-18) !important;
    }

    .text1 {
        margin: 0 !important;
    }

    .box {
        margin-top: 0 !important;
    }

    .margin-contact {
        margin-top: 20px;
    }

    .text-contact {
        font-size: 22px !important;
    }

    .condition-not-match-2 {
        font-size: var(--bs-font-16) !important;
        bottom: 29px !important;
        padding: 2px !important;
        right: 11px !important;
        width: 69% !important;
    }

    .name-promotion {
        font-size: 11px !important;
    }

    .coupon-text-3 {
        text-align: center;
    }

    .condition-coupon-3 {
        top: 20% !important;
        left: 46% !important;
        font-size: var(--bs-font-16) !important;
    }

    .condition-coupon-4 {
        top: 12% !important;
        left: 43% !important;
    }

    .display-desktop-tablet-center {
        display: none;
    }

    .text-order-status {
        font-size: var(--bs-font-18);
        margin-top: 20px;
    }

    .type_shipping {
        height: 98px !important;
    }

    .time-flash-sale {
        flex-direction: column;
    }

    .tab-product .nav-link {
        padding: 10px 5px !important;
    }

    .detail-box img {
        width: 100%;
    }

    .box-img {
        width: 30px !important;
        height: 30px !important;
    }

    .box-img img {
        width: 30px;
    }

    .rating-md {
        font-size: var(--bs-font-20) !important;
    }

    .btn-cart-view-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-style {
        font-size: 12px;
    }

    .cookie-consent-top-wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
    }

    .text1 {
        font-size: 14px !important;
    }

    .text2 {
        font-size: 14px !important;
    }

    .box p {
        font-size: 14px !important;
    }

    .dash-line {
        border: none !important;
    }

    #profile {
        padding: 0;
        width: 100%;
    }

    .cycle-tab-item-mobile-50P {
        width: 50%;
    }

    .cycle-tab-item-mobile-33P {
        width: 33.33%;
    }

    .cycle-tab-item-mobile-25P {
        width: 25%;
    }

    .tabbable-line > .nav-tabs > li > a {
        font-size: 14px !important;
    }

    .padding-img-mobile {
        padding: 0 15%;
    }

    .box-FFF6F4 {
        justify-content: center;
    }

    .review-icon img {
        width: 20px;
    }

    .review-icon {
        font-size: 12px;
    }

    .box-product-flash-sale.col-6.col-md-4.margin-bottom-15.product-4 {
        padding: 0 6px;
    }

    .tab-promotion-step-1, .tab-promotion-step-2, .tab-promotion-step-3 {
        display: flex;
        align-items: center;
        padding: 5px;
        text-align: center;
        flex-direction: column;
        margin-right: 10px;
    }

    .contain-map {
        padding: 15px;
    }

    .tab-promotion-step-1 img, .tab-promotion-step-2 img, .tab-promotion-step-3 img {
        width: 20px;
    }

    .searchTypeDownload {
        width: 100%;
    }

    .download {
        width: 50%;
    }

    .brand-box-right {
        margin-top: 10px;
    }

    .image-head-footer-search img {
        height: 60px;
    }

    .text-search {
        font-size: var(--bs-font-20);
        height: 60px;
    }

    .img-one-product {
        height: 130px !important;
    }

    .best-product {
        margin: 0 !important;
    }

    .area-subject {
        padding: 10px;
    }

    .image-news {
        border-radius: 16px 16px 0 0;
    }

    .box-news2-subject a {
        font-weight: 500;
        font-size: var(--bs-font-16) !important;
        margin-top: 10px;
        color: var(--bs-vine);
    }

    .text-news2-subject {
        font-size: 14px;
        color: var(--bs-gray);
        margin-top: 10px;
    }

    .data-product-redeem {
        margin-bottom: 15px;
    }

    .img-redeem {
        max-height: 140px;
    }

    .price-product-summary {
        display: flex;
        align-items: center;
    }

    .footer-for-buy {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .footer-amount-product, .footer-add-product {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 5px;
    }

    .header-coupon {
        font-size: 30px;
    }

    .box-content {
        height: 335px !important;
    }

    .img-content {
        height: 145px !important;
    }

    .img-product-list {
        width: 50% !important;
    }

    .detail-product-list {
        width: 50% !important;
    }

    .promotion-product-list {
        width: 100% !important;
        font-size: 14px;
        margin-top: 10px;
    }

    .font-price-list {
        font-size: var(--bs-font-16) !important;
    }

    .price-product-list {
        justify-content: center !important;
        align-items: center !important;
        font-size: var(--bs-font-16) !important;
    }

    .name-publisher-product-list {
        font-size: 14px;
    }

    .name-product-list a {
        font-size: var(--bs-font-16) !important;
    }

    .content-product-list {
        width: 100% !important;
    }

    .box-btn-product-list {
        width: 100% !important;
    }

    /*.sort-type-1 {*/
    /*    width: 60% !important;*/
    /*}*/
    /*.sort-type-2 {*/
    /*    width: 40% !important;*/
    /*    display: flex;*/
    /*    justify-content: flex-end;*/
    /*}*/
    .box-preview {
        width: 100% !important;
    }

    .product-2 {
        width: 50%;
        padding: 5px;
    }

    .box-btn-product {
        height: 65px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .six-product, .promotion-product {
        width: 47% !important;
        /*height: 345px !important;*/
        margin: 0 0 10px 10px !important;
    }

    .box-img {
        margin-right: 15px;
    }

    .avatar-user {
        width: 20%;
    }

    .username-user {
        width: 80%;
    }

    .btn-review {
        width: 100% !important;
    }

    .count-coin .font-coin {
        font-size: 12px;
    }

    .count-coin .font-count-coin {
        font-size: var(--bs-font-20);
    }

    .count-coin {
        align-items: center;
        flex-direction: column;
    }

    .padding-s-LR-15P {
        padding: 0 15%;
    }

    .prompt-pay-box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .transfer-box {
        margin-bottom: 10px !important;
    }

    /*article*/
    .feature1 {
        height: 100px !important;
        font-size: 12px;
    }

    .feature1 input {
        height: 100px !important;
    }

    input[type=radio]:checked ~ .type_shipping {
        height: 98px !important;
    }

    /*article*/
    .display-tablet-mobile {
        display: block;
    }

    .step-bar li:after {
        left: -30% !important;
        width: 60% !important;
    }

    .step-bar li {
        font-size: 14px;
    }

    article {
        font-size: 14px !important;
    }

    .del-bin {
        position: relative;
        bottom: 50px !important;
        left: 98% !important;
    }

    .img-product-summary img {
        max-width: 85px !important;
        max-height: 115px !important;
    }

    .product-in-cart {
        display: none;
    }

    .head-login-left p {
        display: none;
    }

    .site-login {
        margin: 5% !important;
    }

    .logo-login {
        display: none;
    }

    .text-name-flash-sale {
        padding: 0 15px 10px 15px;
    }

    .text-name-flash-sale p {
        height: 48px;
    }

    .text-flash-sale {
        min-height: 137px;
    }

    .img-flash-sale img {
        max-height: 170px;
        width: auto;
    }

    .img-flash-sale {
        height: 200px;
        overflow: hidden;
    }

    .product-flash-sale {
        height: 300px !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 10px !important;
    }

    .date-open-sale {
        margin-top: 20px !important;
        font-size: 14px !important;
    }

    .product-1 .product-sale-out {
        margin-top: 17px !important;
    }

    .product-9 .product-sale-out {
        margin-top: 13px !important;
    }

    .product-sale-out {
        margin-top: 12px !important;
        font-size: 14px !important;
    }

    .btn-product-1 {
        margin-top: 8px;
    }

    .btn-cart {
        font-size: 14px !important;
    }

    .highlight-mobile {
        padding: 0 !important;
    }

    .box-head-coupon img {
        max-width: 60px;
    }

    .header-coupon {
        font-size: 22px !important;
    }

    .head-content {
        font-size: var(--bs-font-16) !important;
    }

    .center-first-1 {
        width: 100%;
        overflow: hidden;
        max-height: 515px;
        border-radius: 12px;
    }

    .center-first-2 {
        width: 100%;
        overflow: hidden;
        max-height: 249px;
        border-radius: 12px;
    }

    .center-first-1, .center-first-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .one-product, .one-product-new {
        width: 45% !important;
        height: 295px !important;
    }

    .tab-detail-product {
        padding: 0 !important;
    }

    .twelve-product {
        width: 45% !important;
    }

    .img-twelve-product {
        height: 125px !important;
    }

    .product-9 {
        width: 50% !important;
    }

    .text-home-form {
        font-size: var(--bs-font-18);
        padding: 0 24px;
        border-radius: 4px 4px 0px 0px;
    }

    .text-head-3 {
        font-size: var(--bs-font-18);
        padding: 0 24px;
        border-radius: 4px 4px 0px 0px;
    }

    .btn-dot {
        bottom: 5%;
    }

    .line-head {
        height: 4px;
    }

    .flash-sale {
        text-align: left;
    }

    .head-index-img {
        width: 240px;
    }

    .height-light-main {
        width: 100%;
        /*height: 147px;*/
    }

    .mySlides img {
        width: 100%;
    }

    .height-light-sub {
        display: none;
    }

    .container-login-main {
        margin-top: 70px;
    }

    #contentMain {
        margin-top: 120px;
    }

    .top-frame {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 99;
        padding: 7px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .width-search {
        width: 12% !important;
    }

    .display-desktop {
        display: none !important;
    }

    .display-tablet {
        display: none;
    }

    .display-desktop-tablet {
        display: none;
    }

    .logo-area {
        text-align: center;
    }

    .logo {
        margin: 6px 0px 7px 0px;
    }

    .box-search {
        width: 95%;
        margin: 0px 10px;
    }

    .logo-footer {
        padding: 20px;
    }

    .data-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .address-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contact-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .logo-footer, .data-footer, .address-footer, .contact-footer {
        width: 100%;
    }

    .bg-footer-copy {
        background: var(--bs-theme);
        padding: 20px;
    }

    .index-icon {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .icon-box img {
        width: 50px;
    }

    .icon-box p {
        font-size: 12px;
    }

    .icon-box {
        width: 20%;
    }

    .one-product-new, .one-product, .twelve-product {
        margin: 0 2% 5% 2% !important;
    }

    .margin-top-mobile-20 {
        margin-top: 20px;
    }

    .font-brand-head {
        font-size: var(--bs-font-20);
    }

    .head-news {
        font-size: 14px;
    }

    .sub-news {
        font-size: var(--bs-font-20);
    }

    .detail-news {
        font-size: 10px;
    }

    .head-text {
        font-size: var(--bs-font-20);
    }

    .n-ppost-name {
        right: 0 !important;
        width: auto !important;
    }

    .condition-coupon-popup {
        padding-top: 25% !important;
    }
}

/*font size css*/
.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: var(--bs-font-16);
}

.font-18 {
    font-size: var(--bs-font-18);
}

.font-20 {
    font-size: var(--bs-font-20);
}

.font-24 {
    font-size: var(--bs-font-24);
}

.font-28 {
    font-size: 28px;
}

.font-30 {
    font-size: 30px;
}

.font-35 {
    font-size: 35px;
}

.font-40 {
    font-size: 40px;
}

.font-60 {
    font-size: 60px;
}

/*font size*/
/*color font*/
.font-08A217 {
    color: #08A217;
}

.font-FA9824 {
    color: #FA9824;
}

.color-797979 {
    color: #797979;
}

.color-878787 {
    color: var(--bs-gray);
}

.font-white {
    color: white;
}

.font-F1553E {
    color: var(--bs-theme);
}

a.font-F1553E:hover {
    color: var(--bs-vine);
}

.font-gray {
    color: var(--bs-gray);
}

.font-vine {
    color: var(--bs-vine);
}

a.font-vine:hover {
    color: var(--bs-theme);
}

a.font-black:hover {
    color: #252525;
}

.font-black {
    color: #000;
}

/*color font*/
.bg-white {
    background-color: white;
}

.input-border-white {
    border-color: var(--bs-white);
}

/*height*/
.H-70PX {
    height: 70px;
}

.H-40PX {
    height: 40px;
}

.max-height-30px {
    max-height: 30px;
}

.min-height-150px {
    min-height: 150px;
}

/*width*/
.width-fit-content {
    width: fit-content;
}

.min-width-250px {
    min-width: 250px;
}

.max-width-55px {
    max-width: 55px;
}

.max-width-60px {
    max-width: 60px;
}

.max-width-70px {
    max-width: 70px;
}

.max-width-150px {
    max-width: 150px;
}

.max-width-500px {
    max-width: 500px;
}

.W-40PX {
    width: 40px;
}

.W-700PX {
    width: 700px;
}

.W-10P {
    width: 10%;
}

.W-15P {
    width: 15%;
}

.W-20P {
    width: 20%;
}

.W-22P5P {
    width: 22.5%;
}

.W-25P {
    width: 25%;
}

.W-30P {
    width: 30%;
}

.W-40P {
    width: 40%;
}

.W-45P {
    width: 45%;
}

.W-50P {
    width: 50%;
}

.W-60P {
    width: 60%;
}

.W-70P {
    width: 70%;
}

.W-75P {
    width: 75%;
}

.W-80P {
    width: 80%;
}

.W-85P {
    width: 85%;
}

.W-90P {
    width: 90%;
}

.W-100P {
    width: 100%;
}

/*width*/

/*button*/
.btn-confirm-cod {
    background-color: #cafde3;
    border: 1px solid #cafde3;
    border-radius: 32px;
}

.bg-icon {
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 0;
}

.btn-ebook {
    border-radius: 6px;
    background-color: var(--bs-theme);
    color: var(--bs-white);
    width: 154px;
}

.btn-ebook:hover {
    border: 1px solid var(--bs-theme);
    background-color: var(--bs-white);
    color: var(--bs-theme);
}

.btn-pre-order {
    width: 100%;
    text-align: center;
    background-color: var(--bs-theme);
    border: 1px solid var(--bs-theme);
    border-radius: 32px;
    font-size: var(--bs-font-16);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: inset 0px 0px 0px #ffedec;
}

.btn-pre-order:hover {
    color: var(--bs-white);
    background-color: #ffab9d;
}

.btn-product-7 .product-sale-out {
    padding: 4px;
    text-align: center;
    background-color: var(--bs-vine);
    color: white;
    border-radius: 19px;
}

.btn-product-7 .date-open-sale {
    font-size: 14px;
    padding: 4px;
    text-align: center;
    background-color: var(--bs-theme);
    color: white;
    border-radius: 19px;
}

.btn-sell-out {
    padding: 4px;
    text-align: center;
    background-color: var(--bs-vine);
    color: white;
    border-radius: 19px;
}

.btn-product-6 .product-sale-out {
    padding: 4px;
    text-align: center;
    background-color: var(--bs-vine);
    color: white;
    border-radius: 19px;
}

.btn-product-6 .date-cancel-sale {
    padding: 4px;
    text-align: center;
    background-color: var(--bs-theme);
    color: white;
    border-radius: 19px;
}

.btn-sell-date {
    font-size: 14px;
    padding: 4px;
    text-align: center;
    background-color: var(--bs-theme);
    color: white;
    border-radius: 19px;
}

.btn-del-file {
    background: #111111;
    opacity: 0.6;
    border-radius: 2px;
    color: white;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
}

.btn-del-file:hover {
    color: white;
    background: black;
}

.btn-review {
    border: 1px solid var(--bs-theme);
    border-radius: 32px;
    color: var(--bs-theme);
}

.btn-F3F3F3 {
    background: #F3F3F3;
}

.btn-7B3A3B {
    background-color: var(--bs-vine);
    border: solid 1px var(--bs-vine);
}

.btn-filter {
    border: solid 1px var(--bs-theme);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 5px 10px 5px 10px;
    color: var(--bs-theme);
}

.btn-filter:hover {
    color: var(--bs-theme);
    border: solid 1px var(--bs-theme);
}

.btn-filter img {
    width: 20px;
}

.btn-cart {
    width: 100%;
    text-align: center;
    background-color: white;
    border: 1px solid var(--bs-theme);
    border-radius: 32px;
    font-size: var(--bs-font-16);
    color: var(--bs-theme);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: inset 0px 0px 0px #ffedec;
}

.btn.btn-cart.btn-e-book {
    background-color: #ffedec;
}

.btn.btn-cart.btn-e-book:hover {
    background-color: white !important;
}

.btn-cart:hover, .btn-review:hover {
    color: var(--bs-theme) !important;
    background-color: #ffedec !important;
}


.btn-buy {
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    color: white;
    width: 100%;
    padding: 4px;
    /*transition: color .2s ease-in-out, box-shadow .2s ease-in-out;*/
}

.btn-buy:hover {
    color: #fff;
    background: linear-gradient(270deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
}

.btn-see-all {
    background: var(--bs-vine);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    color: white;
    width: 178px;
    font-size: var(--bs-font-18);
}

.btn-see-all:hover,
.btn-login:hover {
    background: #E01B16;
    color: white;
}

.btn-get-coupon {
    background: linear-gradient(294.89deg, #F2B856 -1.19%, #FCF5B0 146.58%);
    width: 150px;
    border-radius: 25px;
    color: #E01B16;
    font-weight: bold;
    font-size: var(--bs-font-20);
    box-shadow: 0px 2px 11px 0px #7A7A7A4D;
}

.btn-cant-get-coupon {
    background: linear-gradient(294.89deg, #F2B856 -1.19%, #FCF5B0 146.58%);
    width: 150px;
    border-radius: 25px;
    color: #E01B16;
    font-weight: bold;
    font-size: var(--bs-font-20);
    box-shadow: 0px 2px 11px 0px #7A7A7A4D;
    mix-blend-mode: luminosity;
}

.btn-description {
    background: rgba(17, 17, 17, 0.6);
    border-radius: 25px;
    color: white;
    padding: 10px 25px;
}

.btn-description:hover {
    color: white;
    background: rgba(0, 0, 0, 0.6);
}

.btn-slid-tabs {
    box-shadow: 0 1px 13px 0px #00000040;
    background: var(--bs-theme);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 0 0 24px;
}

.btn-login {
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    color: white;
}

.btn-login:hover {
    background: linear-gradient(90.32deg, var(--bs-yellow) 0.08%, var(--bs-theme) 106.32%);
}

.btn-B1B1B1 {
    background: #B1B1B1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    color: white;
    width: 100%;
    cursor: no-drop !important;
}

.btn-confirm-coupon {
    background: var(--bs-theme);
    color: white;
}

.btn-confirm-coupon:hover {
    background: var(--bs-vine);
    color: white;
}

.btn-cancel-order {
    background: #EEEEEE;
    border-radius: 32px;
    color: var(--bs-gray);
}

.btn-detail-order {
    background: var(--bs-white);
    border: 1px solid var(--bs-theme);
    border-radius: 32px;
    color: var(--bs-theme);
}

.btn-detail-order:hover {
    background: var(--bs-theme);
    color: var(--bs-white);
}

.btn-payment {
    background: var(--bs-theme);
    color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
}

.btn-address {
    text-align: center;
    background-color: white;
    border: 1px solid var(--bs-theme);
    border-radius: 32px;
    font-size: var(--bs-font-16);
    color: var(--bs-theme);
    padding: 5px 10px;
    font-weight: 500;
    text-decoration: none;
}

.btn-address:hover {
    background-color: var(--bs-theme);
    color: var(--bs-white);
    text-decoration: none;
}

.btn-facebook {
    width: 48%;
    background: #1877F2;
    border: none;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    color: var(--bs-white);
    font-weight: 600;
    font-size: var(--bs-font-16);
    text-align: center;
    padding: 10px;
}

.btn-google {
    width: 48%;
    background: var(--bs-white);
    border: 1px solid #7F7F7F;
    color: #2B2B2B;
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--bs-font-16);
    text-align: center;
    padding: 10px;

}

.btn-social {
    display: flex;
    justify-content: space-between;
}

.btn-book {
    border: 1px solid #CDCDCD;
    background: var(--bs-white);
    border-radius: 4px;
    color: #111111;
    padding: 5px 10px;
}

.btn-book:hover {
    background-color: var(--bs-theme);
    color: var(--bs-white);
}

/*news*/
.btn_new_2 {
    color: var(--bs-theme);
    font-size: var(--bs-font-16);
    margin-top: 35px;
    display: flex;
    justify-content: flex-end;
}

.btn_new_2:hover {
    color: var(--bs-theme);
}

.btn-search {
    background: var(--bs-theme);
    color: var(--bs-white);
}

.btn-order {
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    padding: 8px 80px;
    border: none;
    color: var(--bs-white);

}

.btn-promotion-product-all {
    background-color: var(--bs-yellow);
    border: 1px solid var(--bs-yellow);
    color: var(--bs-white);
}

.btn-promotion {
    background: #EBF2FF;
    border-radius: 3px;
    color: #1855CA;
}

.btn-search-mobile {
    background-color: white;
    border-radius: 0 30px 30px 0;
    border: #cdcdcd 1px solid;
}

/*news*/
/*button*/

/*box shadow*/
.box-shadow-000000 {
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.06);
}

/*box shadow*/

/*padding*/
.padding-coupon {
    padding: 0;
}

.padding-0 {
    padding: 0 !important;
}

.padding-4 {
    padding: 4px;
}

.padding-8 {
    padding: 8px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-30 {
    padding: 30px;
}

.padding-40 {
    padding: 40px;
}

.padding-left-right-4 {
    padding: 0 4px;
}

.padding-left-right-15 {
    padding: 0 15px;
}

.padding-left-20 {
    padding-left: 20px;
}

.padding-left-40 {
    padding: 0 0 0 40px;
}

.padding-top-5 {
    padding-top: 5px;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-0-6 {
    padding: 0 6px;
}

.padding-0-10 {
    padding: 0 10px;
}

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

.padding-0-60 {
    padding: 0 60px;
}

.padding-10-0 {
    padding: 10px 0;
}

.padding-0-5P {
    padding: 0 5%;
}

.padding-0-12P {
    padding: 0 12%;
}

.padding-0-20P {
    padding: 0 20%;
}

.padding-0-25P {
    padding: 0 25%;
}

.padding-10-20 {
    padding: 10px 20px;
}

.padding-20-60 {
    padding: 20px 60px;
}

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

.padding-30-0 {
    padding: 30px 0;
}

.padding-30-80 {
    padding: 30px 80px;
}

.padding-right-5 {
    padding-right: 5px;
}

.padding-right-10 {
    padding-right: 10px;
}

.padding-top-bottom-15 {
    padding: 15px 0;
}

.padding-bottom-0 {
    padding-bottom: 0
}

.padding-bottom-15 {
    padding-bottom: 15px;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}

.padding-top-0 {
    padding-top: 0px;
}

.padding-15P {
    padding: 15%;
}

/*padding*/

/*margin*/
.margin-0 {
    margin: 0px !important;
}

.margin-10 {
    margin: 10px;
}

.margin-left-right-5 {
    margin: 0 5px;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-left-20 {
    margin-left: 20px;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-14 {
    margin-top: 14px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-35 {
    margin-top: 35px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-90 {
    margin-bottom: 90px;
}

.margin-left-right-10 {
    margin: 0px 10px;
}

.margin-top-bottom-10 {
    margin: 10px 0;
}

.margin-top-bottom-15 {
    margin: 15px 0;
}

.margin-top-bottom-20 {
    margin: 20px 0;
}

.margin-bottom-30P {
    margin-bottom: 30%;
}

.margin-bottom-35P {
    margin-bottom: 35%;
}

.margin-top-bottom-50 {
    margin: 50px 0;
}

/*margin*/

/*display*/
.display-flax {
    display: flex;
}

.display-align-center-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.display-justify-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

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

.display-align-justify-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.display-end-space-between {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.display-align-center-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.display-center-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.display-column-flex-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.text-webkit-center {
    text-align: -webkit-center;
}

/*display*/

/*input radius*/
.input-search-mobile {
    border-radius: 30px 0px 0px 30px;
    border: #cdcdcd 1px solid;
}

.input-border-F1553E {
    border: 1px solid var(--bs-theme);
    border-radius: 8px 0px 0px 8px;
}

.border-radius-57 {
    border-radius: 57px;
}

.input-radius-left {
    border-radius: 30px 0px 0px 30px;
}

.border-radius-12 {
    border-radius: 12px;
}

.border-bottom {
    border-bottom: solid 1px #DEDEDE;
}

.border-F1553E {
    border: solid 1px var(--bs-theme);
}

/*input radius*/

.line-top-frame {
    height: 6px;
    background: var(--bs-yellow);
}

.top-frame {
    background: var(--bs-theme);
}

.search-mobile {
    position: fixed;
    width: 100%;
    top: 70px;
    z-index: 98;
    padding: 5px;
    background-color: white;
}

.back-color {
    background: var(--bs-white);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 0px 0px 30px 30px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99;
}

.line-white {
    margin: 0px 20px;
    background-color: white;
    width: 1px;
}

.line-CDCDCD {
    background-color: #CDCDCD;
    width: 1px;
    margin: 10px 0px;
}

.bg-footer {
    width: 100%;
    float: left;
    background: #FCFCFC;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    padding-bottom: 15px;
    margin-top: 100px;
}

.bg-footer-copy {
    width: 100%;
    float: left;
}

.logo-footer, .data-footer, .address-footer, .contact-footer {
    float: left;
}

.cart-area {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.cart-area:hover {
    text-decoration: none;
    color: var(--bs-white);
}

.user-area {
    display: flex;
    align-items: center;
}

.category-box {
    background: var(--bs-vine);
    color: var(--bs-white);
    width: 140px;
    font-size: var(--bs-font-16);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px;
}

.tag-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
}

.tag-menu a {
    color: var(--bs-vine);
    font-size: var(--bs-font-16);
    overflow: hidden;
    -webkit-box-orient: vertical;
    height: 25px;
    text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bs-white);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    /*width: 100%;*/
}

.tag-menu-publisher {
    color: var(--bs-theme);
    width: 100px;
    font-size: var(--bs-font-16);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px;
}

.dropdown-publisher-book {
    display: none;
    position: absolute;
    background-color: var(--bs-white);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
}

/*.dropdown-content a {*/
/*    color: black;*/
/*    text-decoration: none;*/
/*    display: block;*/
/*}*/

.publisher-book:hover .dropdown-publisher-book {
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.show {
    display: block !important;
}

.menu-ul-category {
    margin: 0px;
    padding: 0px;
}

/*.dropdown-content div {*/
/*    color: black;*/
/*    text-decoration: none;*/
/*    display: block;*/
/*}*/

.dropdown-profile {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-content-profile {
    display: none;
    position: absolute;
    background-color: var(--bs-white);
    min-width: 260px;
    overflow: auto;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 3px;
    top: 40px;
    left: -70px;
}

.dropdown-content-profile div {
    color: black;
    text-decoration: none;
    display: block;
    padding: 4px 12px 4px 12px;
}

.dropdown-content-profile a {
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    border-radius: 4px;
    font-size: 14px;
}

.dropdown-content-profile a:hover {
    color: var(--bs-theme);
    background-color: #FFEDEB;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    padding: 10px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

a.dropdown-item.item-category {
    padding: 5px 10px;
    font-size: var(--bs-font-16);
}

.item-category {
    padding: 5px 10px;
    font-size: var(--bs-font-16);
}

.dropdown-item.item-category a:hover {
    background-color: #FFEDEB;
}

.dropdown-item.item-category:hover {
    background-color: #FFEDEB;
    border-radius: 4px;
}

.dropdown-item-link {
    color: #0a0a0a;
    text-decoration: none;
}

.dropdown-item-link:hover {
    color: #0a0a0a;
    text-decoration: none;
}

.name-list-brands {
    padding: 12px;
}

.name-list-brands a {
    color: #0a0a0a;
}

.name-list-brands:hover {
    background-color: var(--bs-theme);

}

.name-list-brands a:hover {
    color: #FFEDEB;
}

.groupMenuCategory {
    width: 25%;
    float: left;
    padding: 0px 15px;
    font-size: 14px;
}

.categoryMain a {
    color: var(--bs-theme);
}

.categoryMain, .categoryNotMain {
    padding: 2px 0px;
}

.categoryMain:hover, .categoryNotMain:hover {
    background-color: #ffedea;
}

.height-light-main {
    float: left;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.height-light-sub {
    float: left;
    width: 41%;
}

.height-light-sub1, .height-light-sub2 {
    overflow: hidden;
}

.height-light-sub1 {
    margin-bottom: 16.5px;
}

/* Slideshow container */
.slideshow-container {
    margin: auto;
    overflow: hidden;
    width: 100%;
    border-radius: 12px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    opacity: 0.5;
}

.dot.active,
.dot:hover {
    background-color: var(--bs-theme);
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.btn-dot {
    text-align: center;
    position: absolute;
}

.mySlides {
    text-align: center;
}

.index-icon .icon-box {
    text-align: center;
    color: var(--bs-vine);
    font-size: var(--bs-font-20);
}

.index-icon .icon-box p {
    margin-top: 4px;
}

.line-head {
    background: linear-gradient(272.85deg, var(--bs-yellow) 12.78%, #FD6C5F 144.45%);
    /*margin-bottom: 20px;*/
}

.time-duration {
    width: 70%;
    float: left;
    box-shadow: 0 2px 11px 0 #7A7A7A4D;
    border-radius: 25px;
    padding: 8px;
    font-size: var(--bs-font-16);
    display: flex;
    align-items: center;
}

.time-duration-inactive.active,
.time-duration-inactive:hover {
    background: var(--bs-theme);
    border-radius: 21px;
    padding: 8.5px 23.38px;
    width: fit-content;
    display: flex;
    align-items: center;
    color: white;
    float: left;
}

.time-duration-inactive.active::before,
.time-duration-inactive:hover::before {
    content: url('../../../image/icon/time-active.svg');
    margin-right: 10px;
    padding-top: 7px;
}

.time-duration-inactive::before {
    content: url('../../../image/icon/time-inactive.svg');
    margin-right: 10px;
    padding-top: 7px;
}

.time-duration-inactive {
    background: #CDCDCD;
    border-radius: 21px;
    padding: 8.5px 23.38px;
    width: fit-content;
    display: flex;
    align-items: center;
    color: white;
    float: left;
}

.line-between-time {
    width: 1px;
    height: 15.3px;
    background: #ACACAC;
    margin: 0px 16px;
    float: left;
}

.real-time {
    display: flex;
    width: 30%;
    float: left;
    align-items: center;
    color: var(--bs-theme);
    margin-top: 15px;
}

/*#Hours, #Minutes, #Seconds {*/
/*border: solid 1px #CDCDCD;*/
/*padding: 8px;*/
/*width: 60px;*/
/*border-radius: 8.8px;*/
/*color: #F1553E;*/
/*text-align: center;*/
/*}*/

.time-down-view-tab .item-counter-down {
    border: solid 1px #CDCDCD;
    padding: 8px !important;
    width: 60px;
    border-radius: 8.8px !important;
    color: var(--bs-theme) !important;
    background: var(--bs-white) !important;
    text-align: center;
    display: unset !important;
    font-size: 30px !important;
}

.items-product-flash {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-flash-sale {
    width: 100%;
    display: flex;
    border-radius: 16px;
    background: #F6F6F6;
    border: 1px solid #E0E0E0;
    height: 180px;
    padding: 15px;
}

.text-download {
    text-decoration: none;
}

.text-flash-sale {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*padding: 20px;*/
}

.text-flash-sale p {
    font-weight: bold;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    margin: unset;
    height: 48px;
}

.count-sale {
    font-size: 14px;
    color: var(--bs-gray);
}

.progress-sale {
    display: -ms-flexbox;
    display: flex;
    height: 10px;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #E5E5E5;
    border-radius: 20px;
}

.progress-bar-sale {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    transition: width 0.6s ease;
}

.content-form {
    float: left;
    width: 100%;
}

.line-short {
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    width: 155px;
    height: 5px;
}

.header-coupon {
    font-weight: bold;
    color: var(--bs-vine);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-head-coupon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.condition-coupon {
    position: absolute;
    color: white;
    padding-top: 25%;
}

/*coupon-2*/
.width-coupon {
    width: 100%;
}

.condition-coupon-3 {
    color: #333333;
    position: absolute;
    top: 11%;
    left: 44%;
    text-align: center;
    font-size: 14px;
}

.condition-coupon-4 {
    color: #333333;
    position: absolute;
    top: 15%;
    left: 42%;
    text-align: center;
    font-size: var(--bs-font-20);
}

.coupon-text-3 {
    position: relative;
    float: left;
    width: 100%;
}

.btn-coupon-3 {
    color: var(--bs-white) !important;
    background: var(--bs-theme) !important;
    border-radius: 32px;
    font-size: var(--bs-font-20);
    padding: 2px 15px;
}

.btn-coupon-3:hover {
    border: solid 1px var(--bs-theme);
    color: var(--bs-theme) !important;
    background: var(--bs-white) !important;
}

.btn-coupon-4 {
    color: var(--bs-white) !important;
    background: #dedede !important;
    border-radius: 32px;
    font-size: var(--bs-font-20);
    padding: 2px 15px;
}

/*coupon-2*/

.condition-coupon-popup {
    position: absolute;
    color: white;
    padding-top: 40%;
}

.condition-not-match {
    position: absolute;
    background-color: var(--bs-danger);
    color: white;
    font-size: 12px;
    bottom: 5px;
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
}

.condition-not-match-2 {
    position: absolute;
    background-color: var(--bs-danger);
    color: white;
    font-size: 12px;
    bottom: 21px;
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
    right: 8px;
    text-align: center;
    width: 69%;
}

.coupon-text {
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
    align-items: center;
}

.text-home-form {
    font-weight: 600;
    background-color: #D72314;
    color: white;
}

.header-home-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}

.text-head-3 {
    font-style: italic;
    font-weight: 600;
    color: var(--bs-white);
    text-shadow: -4px 0px 0px #EC4839;
}

.header-banner-3 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    box-shadow: 0.899431px -8.09488px 21.5863px rgba(214, 2, 2, 0.15);
    border-radius: 14.3909px 14.3909px 0px 0px;
    padding: 10px;
    width: fit-content;
}

.header-3 {
    display: flex;
    justify-content: center;
}

.box-tab-conten.tab-content {
    padding: 5px;
    box-shadow: none;
}

.box-product {
    margin-top: 20px;
}

.product-9 {
    float: left;
    width: 20%;
    height: 350px;
    padding: 5px;
}

.icon-rank-9 {
    position: absolute;
    display: flex;
    justify-content: center;
    right: 8px;
    top: -7px;
}

.icon-rank-9 span {
    color: white;
    font-size: var(--bs-font-20);
    font-weight: 400;
    position: absolute;
    top: 5px;
}

.box-product-9 {
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    width: 100%;
}

.product-9 .product-sale-out {
    padding: 9px;
}

.product-9 .product-sale-out {
    margin-top: 11px !important;
}

.product-9 .text {
    font-weight: 400;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 48px;
    padding: 0 10px;
    text-decoration: none;
}

.five-product {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    margin: 0 10px;
}

.six-product {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    margin: 0 10px 10px 10px;
    width: 17.5%;
    /*height: 335px;*/
    position: relative;
}

.img-six-product {
    height: 160px;
    padding-top: 15px;
}

.img-promotion-product {
    height: 160px;
    padding-top: 25px;
}

.img-six-product img, .img-promotion-product img {
    max-width: 149px;
    max-height: 140px;
}

.promotion-product {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    margin: 0 10px 10px 10px;
    border: 0.5px solid var(--bs-theme);
    width: 17.5%;
    height: 332px;
    position: relative;
}

.promotion-product > .flash-sale img {
    width: 100%;
}

.flash-sale-product {
    display: flex;
    position: absolute;
}

.img-one-product {
    height: 185px;
    overflow: hidden;
}

.img-twelve-product {
    height: 185px;
    overflow: hidden;
}

.img-five-product {
    height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-five-product img {
    width: 100%;
    max-height: 245px;
}

.box-price-product5 {
    color: var(--bs-vine);
    font-size: var(--bs-font-20);
    font-weight: 700;
    display: flex;
    justify-content: center;
}

.box-btn-cart-product5 .box-btn-add-to-cart {
    margin: 18px 0;
    padding: 0 15px;
}

.one-product .text {
    font-weight: 400;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 48px;
    padding: 0 10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.five-product .text {
    font-weight: bold;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    height: 48px;
    padding: 0 10px;
    text-align: center;
}

.six-product .text {
    font-weight: 400;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    height: 47px;
    text-align: left;
    text-decoration: none;
    padding: 0 10px;
    color: var(--bs-black);
}

.six-product .text:hover{
    color: var(--bs-vine);
}

.promotion-product .text {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    height: 47px;
    text-align: left;
    padding: 0 10px;
    text-decoration: none;
}

.one-product-new .text {
    font-weight: bold;
    font-size: var(--bs-font-16);
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    height: 48px;
    padding: 0 10px;
}

.one-product-new {
    float: left;
    background: var(--bs-white);
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 14px 28px 14px;
    text-align: center;
    width: 16.7%;
}

.one-product-new .img-one-product {
    padding-top: 10px;
}

.date-open-sale {
    background: var(--bs-theme);
    border-radius: 0 0 8px 8px;
    font-size: var(--bs-font-16);
    color: white;
    padding: 10px;
    margin-top: 6px;
    width: 100%;
}

.date-cancel-sale {
    background: var(--bs-theme);
    border-radius: 0 0 8px 8px;
    font-size: var(--bs-font-16);
    color: white;
    padding: 10px;
    margin-top: 8px;
}

.date-temporarity-sale {
    background: var(--bs-yellow);
    border-radius: 0 0 8px 8px;
    font-size: var(--bs-font-16);
    color: white;
    padding: 10px;
    margin-top: 8px;
}

.product-sale-out {
    background: var(--bs-vine);
    border-radius: 0 0 8px 8px;
    font-size: var(--bs-font-16);
    color: white;
    padding: 10px;
    margin-top: 8px;
}

.img-one-product img, .img-flash-sale img, .img-five-product img, .img-six-product img, .img-promotion-product img, .img-product-list img, .img-ten-product img {
    border: solid 0.5px #dedede;
}

.seller-left {
    width: 25%;
    float: left;
    background: var(--bs-theme);
    height: 100%;
}

.seller-right {
    width: 75%;
    float: left;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    height: 100%;
}

.bg-img-left {
    background: url('image/seller-left.png');
}

.bg-img-right {
    background: url('image/seller-right.png');
}

.best-product {
    margin: 20px;
    background-color: white;
    border-radius: 16px;
    padding: 10px;
}

.category-set {
    margin: 20px;
    color: white;
}

.category-set-sub, .category-set-active {
    cursor: pointer;
}

.category-set-sub {
    color: white;
    padding: 10px;
    text-decoration: none;
}

.category-set-sub:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8464635854341737) 85%, rgba(241, 85, 62, 0.5019257703081232) 100%);
    color: var(--bs-theme);
    border-radius: 6px;
    border-left: solid 10px var(--bs-yellow);
}

.category-set-sub.active {
    background-color: white !important;
    padding: 10px;
    color: var(--bs-theme) !important;
    border-radius: 6px;
    border-left: solid 10px var(--bs-yellow);
}

.icon-rank {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    justify-content: center;
}

.icon-rank span {
    color: white;
    font-size: var(--bs-font-20);
    font-weight: 400;
    position: absolute;
    top: 5px;
}

.box-btn-description {
    position: absolute;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    align-items: center;
    color: #111111;
    font-weight: 500;
    font-size: var(--bs-font-20);
}

.head-content a {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: var(--bs-font-20);
    color: var(--bs-vine);
    text-align: center;
    max-height: 60px;
    font-weight: bold;
    text-decoration: none;
}

.box-news2-subject a {
    font-weight: bold;
    font-size: 32px;
    margin-top: 10px;
    color: var(--bs-vine);
}

.short-content {
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 14px;
    min-height: 63px;
    margin: 10px 0;
}

.short-content > p {
    margin: 0;
}

.line-content {
    height: 2px;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
    margin: 15px 0 30px 0;
}

.read-more a {
    color: var(--bs-theme) !important;
    text-decoration: none;
}

.read-more a:hover {
    font-weight: bold;
}

.box-content {
    background: var(--bs-white);
    border-radius: 16px;
    filter: drop-shadow(0px 1px 13px rgba(0, 0, 0, 0.15));
    margin-bottom: 15px;
}

.img-content {
    height: 200px;
    overflow: hidden;
}

.img-content img {
    border-radius: 16px 16px 0 0;
    /*min-height: 120px;*/
    /*max-height: 200px;*/
}

.text-content {
    padding: 10px 16px;
    min-height: 175px;
}

.box-best-seller {
    width: 100%;
}

/*Sidenav*/
/*คู่มือ https://www.w3schools.com/howto/howto_js_sidenav.asp*/
/*left*/
.sidenav-left {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: #F5F5F5;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align: center;
}

/*.sidenav-left a {*/
/*padding: 8px 8px 8px 32px;*/
/*text-decoration: none;*/
/*font-size: 25px;*/
/*color: #818181;*/
/*display: block;*/
/*transition: 0.3s;*/
/*}*/

.sidenav-left a:hover {
    color: var(--bs-theme);
    text-decoration: none;
}

.sidenav-left .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.link-category-mobile {
    font-size: var(--bs-font-16);
    padding: 5px 20px;
    color: black;
    cursor: pointer;
}

.link-category-mobile:hover {
    color: var(--bs-theme);
}

@media screen and (max-height: 450px) {
    .sidenav-left {
        padding-top: 15px;
    }

    .sidenav-left a {
        font-size: var(--bs-font-18);
    }
}

@media only screen and (max-width: 958px) and (min-width: 768px) {
    .img-one-product > .HW-100P {
        height: auto;
        width: 100%;
        /*max-height: 200px;*/
    }
}

/*rigth*/
.sidenav-right {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav-right a {
    padding: 10px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav-right a:hover {
    color: #f1f1f1;
}

.sidenav-right .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {

    .sidenav-right {
        padding-top: 15px;
    }

    .sidenav-right a {
        font-size: var(--bs-font-18);
    }
}

/*Sidenav*/

/*navbar-footer*/
/*คู่มือ https://www.w3schools.com/howto/howto_css_bottom_nav.asp*/
.navbar-footer {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.navbar-footer a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar-footer a:hover {
    background: #f1f1f1;
    color: black;
}

.navbar-footer a.active {
    background-color: #04AA6D;
    color: white;
}

.main {
    padding: 16px;
    margin-bottom: 30px;
}

/*navbar-footer*/

.link-login {
    color: white;
    text-decoration: none;
}

.link-login:hover {
    color: white;
    text-decoration: none;
}

.img-chevron {
    cursor: pointer;
}

.box-left-right {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-login {
    width: 100%;
}

.site-login {
    background: url('image/bg-login.png');
    margin: 0 4%;
}

.box-login {
    background-color: white;
    margin: 70px 0;
    padding: 25px 30px;
    border-radius: 30px;
}

.container-login-main {
    background-color: var(--bs-theme);
}

.login-footer {
    margin-top: 0px !important;
}

.logo-login {
    text-align: center;
    margin-top: 5%;
}

.header-login-nav {
    background-color: white;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 99;
}

.row-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--bs-font-20);
}

.head-login-left {
    display: flex;
    align-items: flex-end;
}

.member-register a {
    color: var(--bs-theme);
    font-size: var(--bs-font-20);
}

.line-login {
    height: 2px;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
}

.text-login {
    display: flex;
    align-items: center;
}

.max-width-logo-login {
    max-width: 70%;
}

.img-cart {
    display: flex;
}

#icon-form-search-mobile .count_purchase {
    background: var(--bs-theme);
    color: white;
    top: -4px;
}

.count_purchase {
    position: relative;
    background: white;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    right: 15px;
    top: -10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    color: var(--bs-theme);
}

.footer-mobile {
    margin-top: 30px;
    margin-bottom: 90px;
    background: linear-gradient(90.32deg, var(--bs-theme) 0.08%, var(--bs-yellow) 106.32%);
}

.footer-menu {
    /*padding: 0 15px;*/
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    bottom: 0;
    z-index: 90;
    width: 100%;
    background: white;
    position: fixed;
}

.footer-menu-icon {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.menu-fix-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    color: #0a0a0a;
    font-size: 14px;
}

.menu-fix-mobile-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    color: var(--bs-theme);
    font-size: 14px;
}

.link-menu-mobile a:hover {
    text-decoration: none;
}

.link-menu-mobile {
    width: 20%;
    text-decoration: none;
}

.img-product-summary img {
    max-width: 66px;
    max-height: 91px;
}

.text-product-summary label a {
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.text-product-summary {
    width: 100%;
}

.amount-product-summary {
    width: 50px;
    text-align: center;
    border: 1px solid #EEEEEE;
    border-radius: 0;
}

.header-summary {
    padding-bottom: 10px;
    border-bottom: 1px solid #CDCDCD
}

.choose-coupon {
    cursor: pointer;
    background: #F5F5F5;
    border-radius: 4px;
    color: var(--bs-vine);
    font-size: var(--bs-font-16);
    padding: 10px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

/*toggle switch*/
.check-box {
    height: 20px;
}

.checkbox-coin[type="checkbox"] {
    position: relative;
    appearance: none;
    width: 45px;
    height: 24px;
    border: 1px solid #AEAEAE;
    background: white;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.4s;
}

.checkbox-coin:checked[type="checkbox"] {
    background: var(--bs-theme);
    border: 1px solid var(--bs-theme);
}

.checkbox-coin:disabled[type="checkbox"] {
    cursor: no-drop;
}

.checkbox-coin::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 1.5px;
    left: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    transition: 0.4s;
}

.checkbox-coin:checked[type="checkbox"]::after {
    left: 50%;
}

/*toggle switch*/

.price-product-summary {
    font-size: var(--bs-font-18);
    color: var(--bs-theme);
}

.summary-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #FFEDEB;
    border-radius: 8px;
    padding: 10px;
}

.del-bin {
    position: absolute;
    top: -15px;
    right: 3px;
    width: fit-content;;
}

.coupon_area_header {
    background: var(--bs-theme);
    color: white;
}

/*step-bar*/
.step-bar {
    counter-reset: step;
}

.step-bar li {
    list-style: none;
    display: inline-block;
    width: 30.33%;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.step-bar li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 0 auto;
    background-color: #fff;
}

.step-bar li:after {
    content: "";
    position: absolute;
    width: 85%;
    height: 1px;
    background-color: #DEDEDE;
    top: 20px;
    left: -43%;
    z-index: 0;
}

.step-bar li:first-child:after {
    content: none;
}

.step-bar li.step-bar-active {
    color: var(--bs-theme);
}

.step-bar li.step-bar-active:before {
    border-color: var(--bs-theme);
}

.step-bar li.step-bar-active + li:after {
    background-color: #DEDEDE;
}

/*step-bar*/

.text-shipping-notice {
    padding: 15px;
    background: #F8F8F8;
    border-radius: 8px;
    color: var(--bs-vine);
    float: left;
    width: 100%;
    font-weight: 400;
}

.sticky {
    position: -webkit-sticky;
    position: sticky !important;
    top: 20%;
}

.result-product-item {
    padding: 10px;
    border: 1px solid #CDCDCD;
    margin-bottom: 15px;
    border-radius: 4px;
}

.result-product-item .img-product-summary img {
    max-width: 55px;
    max-height: 75px;
}

.transfer-box {
    width: 315px;
    border-radius: 16px;
    filter: drop-shadow(0px -1px 18px rgba(0, 0, 0, 0.1));
    background: white;
    padding: 16px;
    margin: 0 21px;
}

.payment-summary {
    padding: 24px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.payment-edit-box {
    background: #F8F8F8;
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    padding: 10px;
}

/*fah part*/

.contain-contact {
    margin-top: 30px;
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px;
}

.contain-cer {
    margin-top: 10px;
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px auto;
}

.text-head h3 {
    font-size: 28px;
    color: var(--bs-vine);
    margin-top: 20px;
    font-weight: bold;
}

.contact-us {
    display: flex;
    border-bottom: 1px solid var(--bs-theme);
    margin-top: 30px;
    align-items: center;
}

.dash-line {
    border-right: dashed 1px #DEDEDE;
}

.text1 {
    font-style: normal;
    font-weight: 400;
    font-size: var(--bs-font-20);
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.text1 h3 {
    font-style: normal;
    font-weight: 400;
    font-size: var(--bs-font-18);
    margin-left: 10px;
    margin-top: -15px;
    text-decoration-line: underline;
}

.text2 {
    font-style: normal;
    font-weight: 400;
    font-size: var(--bs-font-20);
    margin-left: 10px;
    margin-top: 20px;

}

.box {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: auto;
    height: auto;
    background: #FFEDEB;
    border: 1px solid var(--bs-theme);
    border-radius: 8px;
    float: left;
    margin-top: 30px;
}

.box h3 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    margin-left: 10px;
    margin-top: 20px;
    color: var(--bs-theme);
}

.box p {
    font-style: normal;
    font-weight: 400;
    font-size: var(--bs-font-18);
    line-height: 25px;
    margin: 0;
}

.text-zoom h4 {
    font-size: var(--bs-font-18);
    margin-top: 10px;
    text-decoration: underline;
}

.name-promotion {
    margin: 8px;
    padding: 10px;
    background: #FFF2F0;
    border-radius: 8px;
    color: var(--bs-vine);
    font-size: var(--bs-font-16);
}

.name-promotion-one {
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.contain-news {
    margin-top: 30px;
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 0;
}

.contain-filter {
    background: #FBFBFB;
    border: solid 1px #DEDEDE;
    border-radius: 16px;
    padding: 10px;
    margin-top: 15px;
    width: 100%;
}

.contain-highlight {
    margin-top: 30px;
    margin-bottom: 20px;
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 0;
}

/* Tabs panel */
.tabbable-panel {
    border: 1px solid #eee;
    padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
    border: none;
    margin: 0;
}

.tabbable-line > .nav-tabs > li {
    padding: 0 15px;
}

.tabbable-line > .nav-tabs > li > a {
    border: 0;
    margin-right: 0;
    color: #737373;
    font-size: var(--bs-font-18);
    text-decoration: none;
}

.tabbable-line > .nav-tabs > li > a > i {
    color: #a6a6a6;
}

.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
    border-bottom: 4px solid #fbcdcf;
}

.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
    border: 0;
    background: none !important;
    color: var(--bs-gray);
    text-decoration: none;
}

.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
    margin-top: 0px;
}

.tabbable-line > .nav-tabs > li.active {
    border-bottom: 4px solid #f3565d;
    position: relative;
}

.tabbable-line > .nav-tabs > li.active > a {
    border: 0;
    color: var(--bs-theme);
    font-weight: 500;
    font-size: var(--bs-font-18);
}

.tabbable-line > .nav-tabs > li.active > a > i {
    color: #404040;
}

.coin-show img {
    margin-right: 8px;
}

.coin-show {
    color: var(--bs-vine) !important;
}

.transfer-qr {
    border: solid 1px var(--bs-theme);
    border-radius: 4px;
    max-width: 410px;
}

.head-transfer-qr {
    background: var(--bs-theme) var(--bs-theme);
    font-size: var(--bs-font-24);
    color: white;
    padding: 12px;
}

.body-transfer-qr {
    padding: 30px;
}

/*page css*/
.page-style {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.page-style .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: 8px;
    line-height: 1.25;
    color: #212B36;
    background-color: #fff;
    border: 1px solid #DFE3E8;
    border-radius: 8px;
}

.page-style .page-item.active .page-link {
    background-color: var(--bs-white);
    border-color: var(--bs-theme);
    color: var(--bs-theme);
}

.page-style .page-link:hover {
    z-index: 2;
    color: #DFE3E8;
    text-decoration: none;
    background-color: #919EAB;
    border-color: #dee2e6;
}

.page-style .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
    border-radius: 8px;
}

.page-style .page-item:last-child .page-link,
.page-style .page-item:first-child .page-link {
    border-radius: 8px;
}

/*page css*/

.hover-text:hover {
    text-decoration: underline;
    color: var(--bs-theme);
}

.menu-profile, .menu-profile-active {
    padding: 8px;
}

.menu-profile {
    color: #0a0a0a;
    text-decoration: none;
}

.menu-profile:hover, .menu-profile-active:hover {
    text-decoration: none;
    color: var(--bs-theme);
}

.menu-profile-active {
    color: var(--bs-theme);
    text-decoration: none;
    font-weight: bold;
}

.card-tag {
    margin-top: 10px;
}

/*.tag-all{*/
/*    color: #F1553E;*/
/*    text-decoration: none;*/
/*}*/

.tag-box.active-tag {
    color: var(--bs-theme);
    text-decoration: none;
    background-color: #FFEDEB;
}

.tag-box {
    background: var(--bs-light-gray);
    border-radius: 80px;
    padding: 5px 10px;
    font-size: var(--bs-font-16);
    margin-right: 10px;
    color: var(--bs-gray);
    margin-bottom: 10px;
    text-decoration: none;
}

.tag-box:hover {
    background-color: #FFEDEB;
    color: var(--bs-theme);
    text-decoration: none;
}

/*article*/
.feature1 {
    position: relative;
    float: left;
    border: solid 1px var(--bs-theme);
    border-radius: 6px;
    height: 68px;
    width: 100%;
    font-size: var(--bs-font-16);
}

.product-redeem {
    position: relative;
    float: left;
    border: solid 1px var(--bs-theme);
    border-radius: 6px;
    width: 100%;
    font-size: var(--bs-font-16);
    margin-bottom: 15px;
    height: 220px;
}

.product-redeem input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    height: 220px;
}

.feature1 input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    opacity: 0;
    cursor: pointer;
}

.feature1 input:disabled {
    cursor: no-drop;
    background-color: #F5F4F4;
}

input[type=radio]:checked ~ .type_shipping {
    background: #FFEDEB;
    border-radius: 6px;
    height: 66px;
}

input[type=radio]:checked ~ .redeem-item {
    background: #FFEDEB;
    border-radius: 6px;
    height: 218px;
}

.type_shipping {
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 66px;
}

.redeem-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
}

.img-redeem {
    width: 70%;
    overflow: hidden;
}

.text-redeem {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}

.item-address, .item-address-tax {
    position: relative;
    float: left;
    border: 1px solid #CDCDCD;
    border-radius: 6px;
    height: 100px;
    width: 100%;
    font-size: var(--bs-font-16);
}

.item-address-tax-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-address input, .item-address-tax input, .item-address-active input, .item-address-tax-active input {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 98px;
    opacity: 0;
    cursor: pointer;
}

input[type=radio]:checked ~ .address-name {
    background: #FAFFFA;
    border-radius: 6px;
    height: 98px;
}

.item-address-active, .item-address-tax-active {
    position: relative;
    float: left;
    border: 1px solid #1E8B03;
    border-radius: 6px;
    height: 100px;
    width: 100%;
    font-size: var(--bs-font-16);
}

.box-address {
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
}

.text-address-name-active, .text-address-name-tax-active {
    color: #1E8B03 !important;
}

.text-address-name, .text-address-name-tax {
    color: var(--bs-vine);
}

.address-name {
    padding: 10px;
    display: flex;
    align-items: center;
    height: 99px;
}

/*article*/
.head-address {
    font-weight: 500;
    font-size: var(--bs-font-18);
}

.card-border {
    border-bottom: 2px solid #EFEFEF;
}

.item-address-re {
    border: solid 0.5px #CDCDCD;
    padding: 12px;
    border-radius: 8px;
}

.edit-text {
    color: var(--bs-vine);
    font-weight: 500;
    font-size: var(--bs-font-18);
    text-decoration-line: underline;
    display: flex;
    justify-content: flex-end;
}

.text-head-address {
    margin-left: -6px;
}

.container-regis {
    width: 100%;
    background: var(--bs-theme);
    padding-bottom: 60px;
}

.card-regis {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 52px;
    background: var(--bs-white);
    border-radius: 30px;
    width: 100%;
}

.register-head {
    width: 100%;
}

.register-head h2 {
    position: absolute;
    font-size: 30px;
    margin-top: 30px;

}

.input-box {
    background: var(--bs-white);
    border: 1px solid #DEDEDE;
    border-radius: 50px;
    width: 100%;
    padding: 8px 16px;
}

.line-40 {
    width: 40%;
    border: 1px solid #979797;
}

.line-or {
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.login-account {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
}

/*brand-page*/

.box-slide {
    background: var(--bs-white);
}

.blog .carousel-indicators {
    left: 0;
    top: auto;
    bottom: -40px;

}

.carousel-inner {
    margin-bottom: 60px;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    cursor: pointer;
    background-color: #111111;
}

.carousel-indicators .active {
    background-color: var(--bs-theme);;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.box-shadow-text {
    background: linear-gradient(0deg, rgba(80, 80, 80, 0.6) 13.77%, rgba(80, 80, 80, 0) 106.32%);
    border-radius: 0px 0px 16px 16px;
}

.contain-brand {
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 0 0 16px 16px;
    padding: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.logoread {
    display: block;
    width: 100%;
    margin-left: -90px;

}

.contain-book {
    margin-top: 30px;
    background: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 20px;
}

.suggest-bar {
    font-size: 48px;
    color: var(--bs-white);
    text-shadow: -4px 0px 0px var(--bs-vine);
    background: #D72314;
    box-shadow: 0.899431px -8.09488px 21.5863px rgba(214, 2, 2, 0.15);
    border-radius: 14.3909px 14.3909px 0px 0px;
    padding: 0 70px;
    display: flex;
}

.suggest-content {
    background: var(--bs-white);
}

.brand-box-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.font-brand-head {
    position: absolute;
    color: var(--bs-white);
}

.brand-head {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*brand-page*/

.tab-status-history {
    text-align: center;
    display: flex;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.tab-status:hover {
    color: var(--bs-theme);
    text-decoration: none;
}

.tab-status {
    color: var(--bs-gray);
    width: 25%;
    padding: 15px;
    text-decoration: none;
}

.tab-status-active {
    color: var(--bs-theme);
    width: 25%;
    padding: 15px;
    text-decoration: none;
}

.tab-status-active:hover {
    color: var(--bs-theme);
    text-decoration: none;
    border-bottom: 4px solid var(--bs-theme);
}

.tab-status-active {
    border-bottom: 4px solid var(--bs-theme);
}

.link-order-detail {
    color: var(--bs-theme);
}

.link-order-detail:hover {
    color: var(--bs-theme);
}

.menu-profile-mobile {
    height: 55px;
    background-color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/*product*/

.clear-filter {
    display: flex;
    justify-content: flex-end;
}

.text-line {
    text-decoration: underline;
}

.discount {
    color: var(--bs-white);
    background-color: #ED1C24;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 12px;
}

.box-product-view-name {
    font-size: 28px;
    max-height: 80px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    /*padding-top: 5px;*/
}

.box-product-view-short {
    font-weight: 400;
    font-size: var(--bs-font-16);
    margin-top: 5px;
    height: 70px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
}

.line-height-40 {
    line-height: 40px;
}

.btn-cart-view-box {
    margin-bottom: 15px;
}

.btn-cart-view-box button,
.btn-cart-view-box input {
    height: 25px;
    padding: 0 10px;
}

.box-cart-sale-page .btn-cart-view-box,
.box-cart-sale-page .btn-cart-add-to-cart {
    display: flex;
    justify-content: center;
}

.minus-box {
    margin-right: 5px;
}

.minus-box button,
.plus-box button {
    box-shadow: inset 0 0 0 0 #ffedec;
    margin-right: 5px;
    transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.minus-box button:hover,
.plus-box button:hover {
    color: var(--bs-theme);
    box-shadow: inset 200px 0 0 0 #ffedec;
}

.quantity-box {
    width: 50px;
    text-align: center;
}

.plus-box {
    margin-right: 5px;
    margin-left: 5px;
}

.stock-box {
    border-right: 1px solid #E3E3E3;
    border-radius: 4px 0px 0px 4px;
    padding-right: 10px;
}

.slide-product {
    margin-bottom: 0px;
}

.text-all {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.tab-content {
    padding: 20px;
    background-color: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 0px 0px 20px 20px;
}

.tab-content-flash {
    background-color: unset !important;
    box-shadow: unset !important;
    border-radius: unset !important;
    padding: 0 !important;
}

.tab-content-mobile {
    background-color: var(--bs-white);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06);
    border-radius: 0px 0px 20px 20px;
    padding: 10px 5px;
}

.tab-product .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: var(--bs-theme);
    border-radius: 8px 8px 0px 0px;
    color: var(--bs-white);
    border-bottom: 3px solid var(--bs-yellow);
}

.tab-product .nav-link {
    background: #E8E8E8;
    border-radius: 8px 8px 0 0;
    color: var(--bs-gray);
    /*padding: 10px 30px;*/
}

.box-detail {
    padding: 10px 0;

}

.box-detail-color {
    background: #F5F5F5;
    padding: 10px 0;
}

/*product*/

.text-line-through {
    text-decoration: line-through;
}

.font-F1553E-line {
    color: var(--bs-theme);
    text-decoration: underline;
    cursor: pointer;
}

.box-video {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.link-menu-p-mobile {
    color: #000;
    text-decoration: none;
}

.link-menu-p-mobile:hover {
    color: var(--bs-theme);
    text-decoration: none;
}

.text-alert-payment {
    background: #FFEDEB;
    border: 1px solid var(--bs-theme);
    border-radius: 4px;
    padding: 16px;
}

.text-border {
    border-left: 3px solid var(--bs-theme);
    padding: 0 10px;
}

.box-FFF6F4 {
    margin-top: 20px;
    background: #FFF6F4;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.border-line {
    padding: 0 10px;
    border-right: 1px solid var(--bs-gray);
}

.border-line-date {
    padding: 0 10px;
    border-left: 1px solid var(--bs-gray);
}

.review-icon {
    display: flex;
    align-items: flex-end;
}

.review-rating {
    background: var(--bs-white);
    border: 1px solid var(--bs-theme);
    border-radius: 20px;
    padding: 5px 15px;
    color: var(--bs-theme);
}

.review-rating:hover {
    background-color: #ffedec;
}

.review-rating-gray {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray);
    border-radius: 20px;
    padding: 5px 15px;
    color: var(--bs-gray);
}

.review-rating-gray:hover {
    border: 1px solid var(--bs-theme);
    background: var(--bs-white);
    color: var(--bs-theme);
}

.review-item {
    background: var(--bs-white);
    border: 1px solid #CDCDCD;
    border-radius: 8px;
    padding: 24px;
}

.box-img {
    width: 60px;
    height: 60px;
    background-color: var(--bs-yellow);
    border-radius: 30px;
}

.box-img-admin {
    width: 60px;
    height: 60px;
    background-color: var(--bs-yellow);
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.review-img {
    display: flex;
    align-items: center;
}

.box-review {
    background: #F9F9F9;
    border-radius: 8px;
    padding: 15px 20px;
}

/*new-view*/
.video-sale {
    display: flex;
    justify-content: center;
    padding: 50px;
}

.link-video {
    display: flex;
    justify-content: center;
}

.box-video-news {
    width: 70%;
    border: 10px solid var(--bs-theme);
    border-radius: 10px;
}

.box-news {
    background-color: var(--bs-white);
}

.text-news {
    padding: 20px 50px 20px 20px;
}

.detail-box {
    background-color: var(--bs-white);
    padding-top: 10px;
}

.detail-box img {
    max-width: 900px;
}

/*.detail-box-right{*/
/*background-color: #FFFFFF;*/
/*padding: 10px 20px 50px 50px;*/
/*}*/

.detail-box-view-news {
    background-color: var(--bs-white);
    padding: 50px 20px 50px 50px;
    text-align: center;
}

.detail-box-view-news img {
    width: 100%;
}

.background-box {
    background-color: var(--bs-white);
    padding: 0 0 30px 0;
}

.book-content {
    text-align: center;
}

.img-detail {
    background-color: var(--bs-white);
    padding: 50px 30px 20px 30px;
}

.img-detail-2 {
    background-color: var(--bs-white);
    padding: 0px 30px 30px 30px;
}

.bg-detail {
    background-color: var(--bs-white);
}

.discount-box {
    height: 55px;
}

.box-img-news {
    padding: 10px 40px;
}

.button-control {
    display: flex;
    justify-content: center;
}

/*.bg-icon {*/
/*    background: none;*/
/*    border: none;*/
/*}*/

.count-coin {
    display: flex;
    background-color: white;
    border-radius: 4px;
    border: solid 1px #CDCDCD;
    padding: 15px;
}

.view_product_img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: contain;
}

/*slick-list*/
.slick-list {
    width: 100%;
    float: left;
}

.box-slick-top,
.box-slick-bottom {
    display: list-item;
    list-style: none;
    height: 40px;
    padding: 0;
}

.box-slick-top button,
.box-slick-bottom button {
    left: 0;
    right: 0;
    width: 100%;
}

/*slick-list*/

.button-icon {
    display: flex;
    align-items: center;
}

/*promotion page*/

.head-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.discount-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line-head-w50 {
    background: linear-gradient(272.85deg, var(--bs-yellow) 12.78%, #FD6C5F 144.45%);
    height: 5px;
    width: 50%;
}

.head-text {
    color: var(--bs-vine);
}

.box-image-preview {
    height: 100%;
    overflow: hidden;
    padding: 0 12%;
}

.box-image-preview img {
    /*min-height: 564px;*/
    /*max-height: 564px;*/
    /*object-fit: cover;*/
    width: 100%;
}

/*.slider-main .slick-slide{*/
/*!*width: 100% !important;*!*/
/*!*position: fixed  !important;*!*/
/*}*/

/*.slider-main .slick-list{*/
/*height: 100%;*/
/*}*/

.star-review {
    display: flex;
    align-items: baseline;
    height: 55px;
}

.text-one-line {
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.text-two-line {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.name-product-review {
    font-size: var(--bs-font-24);
}

.short-product-review {
    font-size: var(--bs-font-16);
    color: #797979;
}

.btn-review {
    width: 30%;
}

.head-review {
    font-size: var(--bs-font-20);
    color: var(--bs-theme);
    border-left: solid 5px var(--bs-theme);
    padding-left: 10px;
}

.picture_input, .video_input {
    display: none;
}

.picture, .video {
    width: 17%;
    aspect-ratio: 1/1;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    border: 1px dashed var(--bs-gray);
    border-radius: 6px;
    cursor: pointer;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    float: left;
    margin: 5px;
    font-size: 12px;
}

.picture:hover, .video:hover {
    color: #777;
    background: #ccc;
}

.picture_img, .video_img {
    max-width: 100%;
}

.file-reviews {
    max-width: 20%;
    float: left;
    margin-right: 10px;
}

.file-reviews img, video {
    max-width: 100%;
}

.border-add-file {
    float: left;
    margin: 5px;
    width: 17%;
    aspect-ratio: 1/1;
    background: #ddd;
    border: 1px dashed var(--bs-gray);
    border-radius: 6px;
    outline: none;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.border-add-file img, video {
    max-width: 100%;
}

.border-none {
    border: none;
}

.labelCheckbox {
    margin-top: 10px;
}

/*all-product*/

.head-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-menu {
    background: none;
    border: none;
}

.check-text {
    margin: 0 5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

input[type='checkbox'] {
    accent-color: var(--bs-theme);
}

.text-all {
    font-size: 14px;
    color: var(--bs-gray);
    text-decoration: underline;
    cursor: pointer;
    /*display: flex;*/
    /*justify-content: center;*/
}

.line-border {
    border-bottom: 1px solid var(--bs-gray);
}

.price-box {
    width: 30%;
    text-align: center;
}

.price-box-2 {
    width: 68%;
    padding-left: 10px;
}

.filter-box {
    background: #FFEDEB;
    border-radius: 20px;
    padding: 7px 20px;
    color: var(--bs-theme);
    display: flex;
}

.text-sort {
    text-align: right;
}

.test-box {
    background-color: var(--bs-theme);
}

#modal-main-image-preview {
    width: 100%;
}

.box-modal-image {
    min-height: 140px;
    overflow: hidden;
    margin: 0;
    padding: 5px;
}

.box-modal-image img {
    width: 100%;
}

.avatar-user {
    float: left;
}

.username-user {
    float: left;
}

.tab-menu-filter {
    padding: 0 20% 10% 20%;
}

/*.sort-type-1,*/
/*.sort-type-2 {*/
/*    float: left;*/
/*}*/

/*.sort-type-1 {*/
/*    width: 25%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.sort-type-2 {*/
/*    width: 50%;*/
/*}*/

.sort-type-v2 {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sort-type-v2-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.product-list {
    width: 100%;
    background: var(--bs-white);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 20px;
    float: left;
    position: relative;
}

.flash-sale-product-list {
    display: flex;
    position: absolute;
}

.img-product-list img {
    max-width: 129px;
    max-height: 182px;
}

.content-product-list {
    float: left;
    width: 60%;
}

.promotion-product-list {
    float: left;
    width: 40%;
    background: #F9F9F9;
    border-radius: 4px;
    padding: 10px;
}

.name-product-list a {
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: var(--bs-font-18);
    text-decoration: none;
}

.name-product-list a:hover {
    text-decoration: none;
    color: var(--bs-vine);
}

.price-product-list {
    height: 30px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.price-product-left {
    height: 60px;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}

.box-btn-product-list {
    display: flex;
    align-items: flex-end;
    width: 50%;
}

.promotion-product-list img {
    max-height: 30px;
    max-width: 30px;
}

.font-price-list {
    color: var(--bs-vine);
    font-size: var(--bs-font-20);
    margin-right: 10px;
    font-weight: bold;
}

.img-product-list {
    float: left;
    width: 30%;
}

.detail-product-list {
    float: left;
    width: 70%;
}

/*collapse*/
.scrollbar-collapse {
    max-height: 700px;
    overflow: auto;
}

/*collapse*/

/*loading*/
.loader {
    width: 16em;
    height: 8em;
    position: relative;
    overflow: hidden;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

.loader::before {
    width: inherit;
    height: 0.2em;
    background-color: hsla(0, 0%, 85%);
}

.loader::after {
    box-sizing: border-box;
    width: 50%;
    height: inherit;
    border: 0.2em solid hsla(0, 0%, 85%);
    border-radius: 50%;
    left: 25%;
}

.loader span {
    position: absolute;
    width: 5%;
    height: 10%;
    background-color: var(--bs-theme);
    border-radius: 50%;
    bottom: 0.2em;
    left: -5%;
    animation: 2s linear infinite;
    transform-origin: 50% -3em;
    animation-name: run, rotating;
}

.loader span:nth-child(2) {
    animation-delay: 0.075s;
}

.loader span:nth-child(3) {
    animation-delay: 0.15s;
}

@keyframes run {
    0% {
        left: -5%;
    }
    10%, 60% {
        left: calc((100% - 5%) / 2);
    }
    70%, 100% {
        left: 100%;
    }
}

@keyframes rotating {
    0%, 10% {
        transform: rotate(0deg);
    }
    60%, 100% {
        transform: rotate(-1turn);
    }
}

.load-center {
    margin: 0;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*loading*/

/*order*/

.box-order {
    margin: 20px 0;
    text-align: -webkit-center;
    border-bottom: 1px solid #dedede;
    padding: 20px 0;
}

.box-btn-order {
    display: flex;
    justify-content: center;
}

.input-order {
    width: 100%;
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    padding: 10px;
}

.box-tracking {
    justify-content: center;
    background-color: #FFFF;
    z-index: 2;
    text-align: center;
}

.box-detail-track {
    justify-content: center;
    background-color: #FFFF;
}

.img-track {
    display: flex;
    align-items: center;
}

.img-asksekung {
    display: flex;
    justify-content: flex-end;
}

.img-thankyou {
    display: flex;
    align-items: flex-end;
    width: 50%;
}

.box-date {
    padding-right: 10px;
    border-right: 1px solid #D6D6D6;
}

.head-order {
    display: flex;
    align-items: center;
}

.head-table {
    background: var(--bs-vine);
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    color: var(--bs-white);
    padding: 15px;
}

.detail-table {
    background: var(--bs-white);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    margin-top: 14px;
    padding: 10px;
}

.text-align-left {
    text-align: left;
}

.text-table {
    display: flex;
    justify-content: center;
    align-items: center;
}

.track-copy {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.copy-track {
    background: var(--bs-vine);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--bs-white);
    text-align: center;
    position: absolute;
    margin-right: 10px;
    cursor: pointer;
}

/*order*/

/*position*/
.position-relative {
    position: relative;
}

/*position*/

/*border*/
.border-F1553E {
    border: 1px solid var(--bs-theme);
}

/*border*/

.box-btn-product-list > .box-btn-add-to-cart {
    width: 100%;
}

.n-ppost-name {
    padding: 10px;
    top: 29%;
    /*right: 15px;*/
    right: -90px;
    margin-top: 10px;
    width: 300px;
    /*max-width: 430px;*/
    /*max-height: 150px;*/
    opacity: 0;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    -webkit-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear;
    font-size: var(--bs-font-16);
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.n-ppost:hover + .n-ppost-name {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.promotion-list img {
    max-width: 40px;
}

.card-menu-category {
    padding: 10px 14px;
    margin: 4px 0;
    background-color: white;
}

.card-menu-publisher {
    padding: 10px 14px;
    margin: 4px 0;
    background-color: white;
    display: flex;
    float: left;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.publisher-mobile {
    width: 45%;
    float: left;
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin: 6px;
    color: var(--bs-theme);
}

/*profile-password*/

.input-password {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.icon-eye {
    margin-right: 15px;
}

/*profile-password*/

/*checkbox coupon*/
.chk-con {
    display: block;
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 25px;
    height: 25px;
}

/* Hide the browser's default checkbox */
.chk-con input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 15px;
}

/* On mouse-over, add a grey background color */
.chk-con:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chk-con input:checked ~ .checkmark {
    background-color: var(--bs-theme);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chk-con input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chk-con .checkmark:after {
    left: 9px;
    top: 3px;
    width: 7px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*checkbox coupon*/

.image-product-redeem {
    position: absolute;
    top: -20px;
    left: -55px;
}

.image-product-step {
    position: absolute;
    top: -30px;
    left: -55px;
}

.data-product-redeem {
    padding: 15px;
    background-color: #F6F6F6;
    float: left;
    border: 1px solid #E0E0E0;
    border-radius: 16px;
    height: 115px;
}

.w-iframe iframe {
    width: 100%;
}

.w-iframe img {
    width: 100%;
}

/*.img-one-product a {*/
/*    display: block;*/
/*}*/

.head-category-mobile {
    padding: 15px;
    text-align: center;
    background: var(--bs-theme);
    color: var(--bs-white);
    font-size: var(--bs-font-18);
}

/*cookie-consent*/
.cookie-consent-controls-toggle,
.cookie-consent-details-toggle {
    display: none;
}

.cookie-consent-popup.open {
    display: block;
    opacity: 1;
    animation-name: show;
    animation-duration: 1s;
    animation-timing-function: ease;
    background: var(--Orange-Gr, linear-gradient(179deg, var(--bs-theme) 0.47%, #FC6C2E 139.09%));
    color: var(--bs-white);
    /*width: 500px;*/
    border: 1px solid var(--bs-theme);
    /*border-radius: 15px;*/
    padding: 10px;
    text-align: center;
}

.cookie-consent-popup.open {
    display: block;
    opacity: 1;
    animation-name: show;
    animation-duration: 1s;
    animation-timing-function: ease;
}

.cookie-consent-controls {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-out;
    -moz-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;
}

.cookie-consent-controls.open {
    margin: 0 0 30px 0;
    max-height: 600px;
}

.cookie-consent-details {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-out;
    -moz-transition: max-height 0.5s ease-out;
    transition: max-height 0.5s ease-out;
}

.cookie-consent-details.open {
    max-height: 600px;
}

@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.cookie-consent-top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.cookie-consent-message {
    margin: 0;
}

/*cookie-consent*/

.gallery-product img {
    /*width: 30%;*/
    width: 150px;
}

.gallery-item img {
    width: 5%;
}

#myCarousel {
    --f-carousel-slide-height: 60%;
    --f-carousel-spacing: 10px;
    height: 240px;
}

.f-carousel__slide img {
    max-height: 240px;
    max-width: 245px;
}

.f-carousel__slide {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
}

.f-carousel {
    --f-button-width: 38px;
    --f-button-height: 38px;

    --f-button-svg-width: 16px;
    --f-button-svg-height: 16px;
    --f-button-svg-stroke-width: 2.5;

    --f-button-color: rgb(71 85 105);
    --f-button-border-radius: 50%;
    --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);

    --f-button-bg: #fff;
    --f-button-hover-bg: #f9f9f9;
    --f-button-active-bg: #f0f0f0;
}

.product-stock-zero {
    position: absolute;
    background-color: var(--bs-danger);
    color: white;
    width: 100%;
    height: 25px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px 4px 0 0;
}

.toast-custom-serazu {
    background-color: var(--bs-vine) !important;
    color: white !important;
    font-weight: bold; /* ตัวอักษรหนา */
    width: 205px !important;
}

.close-filter-mobile {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 5px;
    right: 25px;
}

.alert-order {
    font-size: var(--bs-font-20);
    background-color: var(--bs-theme);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
}

.lazy-loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: gray;
    font-size: 0.9em;
    z-index: 2;
}

.lazy-container.loaded .lazy-image {
    opacity: 1;
}

.lazy-container.loaded .lazy-loading-text {
    display: none;
}

.detail-address-receipt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company-id {
    background: var(--bs-gray);
    color: var(--bs-white);
    width: fit-content;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 14px;
}

.box-btn-add-to-cart {
    padding: 0 10px 10px 10px;
}