* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, ::before, ::after {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
body {
    font-size:14px;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: capitalize;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #262626;
    font-weight:500;
    margin:0;
    padding:0;
}
html {
    overflow:hidden;
    overflow-y:auto;
}
a, a:hover {
    text-decoration: none;
}
html body, body #wrapper {
    overflow-x: hidden;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
table,
table thead,
tbody,
tr,
td,
th {
 border: none;
}
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #262626;
    letter-spacing: -0.01rem;
    margin-bottom: 1rem;
    line-height: 1;
    font-weight: 700;
}
a:active,
button:active,
.btn:active,
button:focus,
.btn:focus{
    outline: none;
    box-shadow: none;
    border: none;
}
.container {
    max-width: 1440px;
    padding: 0 20px;
}
@media only screen and (max-width: 991px) {
    .container {
        padding: 0 15px;
    }
}
.btn {
    box-shadow: none;
}
.btn:hover {
    transform: revert;
    box-shadow: none;
}
.btn:not(.btn-link):hover {
    transform: revert;
    box-shadow: none;
}
.text-main-color {
    color: #c92910;
}
.text-hint-color {
    color: #c27d37;
}
.text-custom-color {
    color: #969696;
}
.text-dark-color {
    color: #262626;
}
/* Video Preview Styles */
.video-container {
    position: relative;
    display: inline-block;
}

.video-container a video,
.video-container a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.video-container a {
    position: relative;
    display: block;
    text-decoration: none;
    height: 100%;
    width: 100%;
}

.video-preview {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: none;
}

.video-play-overlay i {
    color: white;
    font-size: 10px;
    margin-left: 3px; 
}

.video-container:hover .video-preview {
    opacity: 0.8;
}

.video-container:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}


@media (max-width: 768px) {
    .video-play-overlay {
        width: 30px;
        height: 30px;
    }
    
    .video-play-overlay i {
        font-size: 10px;
    }
}
/* top */
.header-top {  background: #262626; border-radius: 0; }
.header-top .container { height: 40px; }
.language-select { height: 100%; display: flex; align-items: center; margin-left: -8px; }
.language-select .language-currency { display: flex; align-items: center; padding: 2px 8px; border-radius: 20px; }
.language-select .language-currency:hover,
.language-select .language-currency.show { background: #ffffff1a; }
.language-select .language-icon,
.language-select .currency-icon { display: flex; align-items: center; }
.language-select .language-icon:after { content: '';  display: inline-block; width: 14px; height: 14px; margin-right: 5px; background: url("../img/icon/lang.png") no-repeat center; background-size: cover; }
.language-select .currency-icon:after { content: '';  display: inline-block; width: 14px; height: 14px; margin-right: 5px; background: url("../img/icon/currency.png") no-repeat center; background-size: cover; }
.language-select .language-currency span { font-size: 12px; color: #fff; font-weight: 500; }
.language-select .language-currency .link-color { margin-left: 5px; color: #fff; font-weight: 600; }
.language-select .dropdown-toggle:after { content: none; color: #fff; font-size: 15px; font-weight: 500!important; }
.language-select .dropdown-menu { transform: revert !important; left: 0 !important; margin-top: -5px !important; box-shadow: 0 5px 10px 1px #0000001a; padding: 16px; max-width: 328px; width: 328px }
.language-select .dropdown-menu .selector-label { font-size: 14px; color: #676767; font-weight: 500; margin-bottom: 10px; }
.language-select .dropdown-menu .selector-options { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.language-select .dropdown-menu .dropdown-item { padding: 0; font-size: 12px; font-weight: 500; color: #565656; text-transform: capitalize; width: 92px; height: 34px; background: #fff; border-radius: 4px; border: 1px solid #eeeeee; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.language-select .dropdown-menu .dropdown-item:hover { border: 1px solid #c92910; color: #c92910; }


.navbar-nav .nav-item {  font-size: 14px; color: #989898; font-weight: 400; }
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active { color: #c92910; }
.navbar-nav .item-help { margin-right: 30px; }
.navbar-nav .item-user a .user-icon:before { color: #fff; }
.navbar-nav .nav-item span { font-size: 12px; color: #fff; font-weight: 400; }
.navbar-nav .nav-item a.hover:before { content: none; }
.navbar-nav .dropdown-menu { box-shadow: 0 5px 10px 1px #0000001a; padding: 16px; }
.navbar-nav .dropdown-menu.show { top: calc(100% + 5px) !important; left: auto!important; right: 0 !important; transform: revert!important; }
.navbar-nav .dropdown-menu .dropdown-item { font-weight: 500; font-size: 14px; color: #565656; padding: 5px 0; }
.navbar-nav .dropdown-menu .dropdown-item:hover { color: #c92910; }
.navbar-nav .dropdown-menu .dropdown-item i { font-size: 18px; }
@media only screen and (max-width: 991px) {
    .navbar-nav .item-help { margin-right: 20px; }
}
/* header-navbar */
.header-navbar { padding-top: 0; min-height: 80px; }
.header-navbar .logo-img { height: auto !important; margin-right: 60px; }
.header-navbar .logo-img img { height: 36px; max-width: revert; max-height: revert; }
.header-navbar .navbar-collapse:not(.show) {  }
.header-navbar .navbar-other .navbar-nav>.nav-item .nav-link { position: relative; }
.header-navbar .navbar-other .navbar-nav .nav-item .badge-cart { position: absolute !important; top: 0; left: auto !important; right: -50%; }
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-collapse .nav-link { color: #999 !important; }
    .navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid { padding: 0 15px; }
}
@media only screen and (max-width: 991px) {
    .header-navbar .logo-img img { height: 30px; }
}

#offcanvas-search { padding: 16px 0; }
#offcanvas-search .form-control { height: 42px; border-radius: 6px; box-shadow: none; border: 1px solid #eee; padding: 8px 10px; font-size: 14px; color: #262626;  }
#offcanvas-search .form-control:focus,
#offcanvas-search .form-control:hover { border-color: #c92910; }
#offcanvas-search .form-control:focus { background: #fff; }
.mobile-search .select2-container { border: 1px solid #eee; border-radius: 4px; }
.mobile-search .select2-container .select2-selection--single { border-bottom-color: transparent !important; }
.mobile-search .select2-container .select2-selection--single .select2-selection__rendered { height: 42px; line-height: 42px; }

/* page cart */
.offcanvas-header { padding-bottom: 24px; margin-bottom: 30px; border-bottom: 1px solid #eee; }
.offcanvas-header h3 { font-size: 20px; }
.offcanvas-header .btn-close:before { font-size: 20px; width: 30px; height: 30px; line-height: 1; background: none; }
.offcanvas-body .cart-img,
.offcanvas-body .cart-img a { display: inline-block; width: 96px !important; height: 96px !important; }
.offcanvas-body .cart-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.offcanvas-body .shopping-cart-item .product-quantity .form-control { width: 80px; height: 34px; box-shadow: none; padding: 5px 10px; border-radius: 4px; }
.offcanvas-body .product-sm-removal .remove-product { background: #c92910; color: #fff; }
.offcanvas-footer .offcanvas-btn-shop { background:#c92910; font-size: 14px; color: #fff; border-radius: 8px; }
.offcanvas-footer .offcanvas-btn-cart { background:#ff6f00; font-size: 14px; color: #fff; border-radius: 8px }

/* app search*/
.mobile-search { margin-bottom: 15px; }

/* home banner */
.banner-layout { position: relative }
.banner-layout .banner-layout-bg { height: 700px; }
.banner-layout .banner-layout-bg img { width: 100%; height: 100%; object-fit: cover; }
.banner-layout .banner-layout-main { position: absolute; inset: 0; }
.banner-layout .banner-search .search-main-title { font-weight: 600; font-size: 42px; color: #fff; line-height: 1.4; margin-bottom: 60px; text-align: center; }
.banner-layout .banner-search .searchField .search-input { position: relative; background: #fff; border-radius: 40px; }
.banner-layout .banner-search .searchField .search-input .form-control { position: relative; height: 80px; color: #000; background: transparent; font-size: 18px; border-radius: 40px; border: none; padding: 12px 216px 12px 16px; z-index: 99; }
.banner-layout .banner-search .searchField .search-input .form-control:focus { border: none; box-shadow: none; }
.banner-layout .banner-search .searchField .search-input .form-control::-webkit-input-placeholder { color: #ccc; font-size: 18px; }
.banner-layout .banner-search .searchField .search-input .search-placeholder { display: flex; height: 80px; gap: 16px; cursor: text; position: absolute; top: 0; left: 16px; width: calc(100% - 232px); align-items: center; z-index: 88; }
.banner-layout .banner-search .searchField .search-input .placeholder-text { font-size: 18px; color: #acacac; margin-right: 16px;   text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.banner-layout .banner-search .searchField .search-input:hover .placeholder-text{ color: #565656; }
.banner-layout .banner-search .searchField .search-input .search-btn { position: absolute; top: 8px; right: 16px; width: 200px; height: 64px; box-shadow: 0 3px 5px 1px #0000001a; border-radius: 40px; border: none; background: #c92910; color: #fff; font-size: 18px; font-weight: 700; margin-right: -5px; transition: all .3s; z-index: 101 }
.banner-layout .banner-search .searchField .search-input .search-btn:hover { background: #b71900;  }
.banner-layout .banner-search .search-step { margin-top: 60px; }
.banner-layout .banner-search .search-step .search-step-lines { display: flex; gap: 12px; justify-content: space-between; text-align: center; }
.banner-layout .banner-search .search-step .search-step-symbol { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.39); color: #fff; opacity: .9; font-size: 16px; margin: 0 auto 20px; font-weight: 700; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.banner-layout .banner-search .search-step .site-step-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 12px; }
.banner-layout .banner-search .search-step .site-step-content { font-size: 14px; line-height: 1.4; color: #fffc; }
.banner-layout .banner-search .search-step .search-step-line { border-right: 1px dashed rgba(255,255,255,.8); }
@media only screen and (max-width: 767px) {
    .banner-layout .banner-layout-main .container { justify-content: center; }
    .banner-layout .banner-search .search-main-title { text-align: center; font-size: 28px; margin-bottom: 48px; }
    .banner-layout .banner-search .searchField .search-input .form-control { height: 60px; font-size: 15px; padding: 8px 180px 8px 12px; }
    .banner-layout .banner-search .searchField .search-input .form-control::-webkit-input-placeholder { font-size: 15px; }
    .banner-layout .banner-search .searchField .search-input .search-btn { height: 48px; top: 6px; font-size: 15px; right: 12px; width: 168px; }
    .banner-layout .banner-search .searchField .search-input .search-placeholder { height: 60px; width: calc(100% - 198px); }
    .banner-layout .banner-search .searchField .search-input .placeholder-text { font-size: 15px; margin-right: 0; }
    .banner-layout .banner-search .searchField .search-input .placeholder-icon svg{ width: 32px; height: 32px; }
    .banner-layout .banner-search .search-step { margin-top: 48px; }
    .banner-layout .banner-search .search-step .search-step-lines { flex-direction: column; gap: 24px;  }
    .banner-layout .banner-search .search-step .site-step-item { text-align: center; }
    .banner-layout .banner-search .search-step .search-step-symbol { margin: 0 auto 20px; }
    .banner-layout .banner-search .search-step .search-step-line { border-bottom: 1px dashed rgba(255,255,255,.3); border-right: none;  }
}
@media only screen and (max-width: 576px) {
    .banner-layout .banner-search .search-main-title { text-align: center; font-size: 24px; margin-bottom: 32px; }
    .banner-layout .banner-search .searchField .search-input .form-control {  padding: 8px 140px 8px 12px; }
    .banner-layout .banner-search .searchField .search-input .search-btn { width: 128px; }
    .banner-layout .banner-search .searchField .search-input .search-placeholder { width: calc(100% - 158px); gap: 10px;  }
    .banner-layout .banner-search .search-step { margin-top: 32px; }
}


.shopping-services { position: relative; padding: 48px 0; }
.shopping-services .container { position: relative; z-index: 66; }
.shopping-services .card { flex-grow: 1; flex-shrink: 1; flex-basis: 0; height: 160px; padding: 0; box-sizing: border-box; border-radius: 8px;  background: #fff; }
.shopping-services .card:nth-child(1) { background: #fff url("../img/main/activity-vip.png") no-repeat 100% 100%; background-size: 128px; }
.shopping-services .card:nth-child(2) { background: #fff url("../img/main/activity-guide.png") no-repeat 100% 100%; background-size: 128px; }
.shopping-services .card:nth-child(3) { background: #fff url("../img/main/activity-join.png") no-repeat 100% 100%; background-size: 128px; }
.shopping-services .card:nth-child(4) { background: #fff url("../img/main/activity-estimate.png") no-repeat 100% 100%; background-size: 128px; }
.shopping-services .card a { display: inline-flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; color: #262626; text-align: left; padding: 24px 16px; }
.shopping-services .card .card-item-left { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.shopping-services .card .card-title { font-weight: 700; font-size: 18px; line-height: 1; margin-bottom: 12px;  }
.shopping-services .card .card-content { font-weight: 500; font-size: 14px; line-height: 1.5; max-width: 186px; }
.shopping-services .card .card-item-btn { font-size: 14px; color: #c92910; }
.shopping-services .card .card-item-icon { border-radius: 8px; overflow: hidden; }
.shopping-services .card .card-item-icon img { width: 100px; height: 100px; }
@media only screen and (max-width: 991px) {
    .shopping-services .card {  flex-basis: 48%; }
}
@media only screen and (max-width: 576px) {
    .shopping-services .card { flex-basis: 100%;  height: 160px; }
}

/* home product */
.Current-all a { color: #c92910; font-size: 16px; font-weight: 500; }
.slide-product .avatar { display: none; }
.rating-container { display: none; }
.item { padding: 0 15px; }
.title_wrap { font-weight: 500; line-height: 1.3;  }
.title_wrap:hover a { color: #031838 !important }
.platform-logo { border-radius: 2px; font-size: 12px; padding: 2px 4px; color: #fff; margin-right: 4px;}
.taobao-icon { background-color: #ff6f00;}
.price { color: #c92910; font-size: 16px; font-weight: 600; }
.price sup { top: 0 }
.price .striped-price { font-size: 16px; }
.item figure .item-compare,
.item figure .item-like,
.item figure .item-link,
.item figure .item-view,
.swiper-slide figure .item-compare,
.swiper-slide figure .item-like,
.swiper-slide figure .item-link,
.swiper-slide figure .item-view { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; line-height: 0.8rem; }
.item figure .item-compare, .swiper-slide figure .item-compare { display: none; }
.item figure .item-cart, .swiper-slide figure .item-cart { padding: 10px 12px; font-size: 15px; font-weight: 500; }
.item figure .item-cart i, .swiper-slide figure .item-cart i { margin: 0; font-size: 18px; }

/* home category */
.recommend-category-wrapper { background: #eaeef6; }
.category-main-title { font-size: 32px; font-weight: 700; margin-bottom: 40px; text-align: center; }
.category-wrapper-content .swiper-wrapper { gap: 24px; padding: 0 !important }
.category-wrapper-content .swiper-slide { flex-grow: 1; flex-shrink: 1; flex-basis: 0; background-color: #fff; width: min(342px, (100% - 72px) / 4) !important; padding: 16px 16px 24px; text-align: left; }
.category-wrapper-content .swiper-slide .brand_image_div { display: inline-block; width: 100% !important; height: 100% !important; }
.category-wrapper-content .swiper-slide .brand_image_div img { width: 100%; height: 100% ; object-fit: cover; border-radius: 0; }
.category-wrapper-content .swiper-slide  .category-item-title { font-size: 24px; line-height: 1; color: #262626; padding-top: 24px; }
.category-wrapper-content .category-btn .btn-style { display: inline-flex; justify-content: center; align-items: center; width: 200px; height: 64px; box-shadow: 0 3px 5px 1px #0000001a; border-radius: 40px; background: #c92910; color: #fff; font-size: 18px; font-weight: 700; transition: all .3s; }
.category-wrapper-content .category-btn .btn-style:hover { background: #b71900; }
@media only screen and (max-width: 991px) {
    .category-wrapper-content .category-item {  flex-basis: 48%; }
}
@media only screen and (max-width: 767px) {
    .category-wrapper-content .category-item {  flex-basis: 100%; }
    .category-wrapper-content .category-btn .btn-style { height: 48px; font-size: 15px; width: 168px;  }
}

/* home shopping */
.shopping-steps { background: #f5f5f5; padding:  48px 0; }
.shopping-steps .step-slogan { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 60px; }
.shopping-steps .step-container { margin: 0 -8px; display: flex; flex-wrap: wrap; }
.shopping-steps .step-container .step-item { padding: 8px; position: relative; }
.shopping-steps .step-container .step-item .step-item-unit {  display: flex; flex-direction: column; align-items: center; background: #fff; height: 100%; padding: 24px 16px; border-radius: 16px; }
.shopping-steps .step-container .step-item:before { content: none; position: absolute; right: -10px; top: 80px; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #c92910; }
.shopping-steps .step-container .step-item:after { content: none; position: absolute; right: -170px; top: 80px; transform: translateY(-50%); width: calc(100% - 80px); height: 1px; background: repeating-linear-gradient(to right, #c92910, #c92910 5px, transparent 5px, transparent 10px); }
.shopping-steps .step-container .step-item:nth-child(4):before,
.shopping-steps .step-container .step-item:nth-child(4):after { content: none }
.shopping-steps .step-container .step-item .step-icon { max-width: 128px; margin-bottom: 32px; }
.shopping-steps .step-container .step-item .step-title { margin-bottom: 8px; font-weight: 700; font-size: 20px; line-height: 1; text-align: center; font-style: normal; }
.shopping-steps .step-container .step-item .step-content { color: #555353; line-height: 24px; font-weight: 500; font-size: 14px; text-align: center; }
@media only screen and (max-width: 1190px) {
    .shopping-steps .step-container .step-item .step-item-unit{  }
    .shopping-steps .step-container .step-item:after { right: -280px; }
    .shopping-steps .step-container .step-item:nth-child(2):before,
    .shopping-steps .step-container .step-item:nth-child(2):after { content: none }
}
@media only screen and (max-width: 991px) {
    .shopping-steps .step-container .step-item:after { right: -210px; }
}
@media only screen and (max-width: 767px) {
    .shopping-steps .step-container .step-item:before,
    .shopping-steps .step-container .step-item:after { content: none }
    .shopping-steps .step-container .step-item .step-content { text-align: center }
}

/* home advantages */
.platform-advantages-wrapper {  }
.platform-advantages-container { margin: 0 -15px; }
.platform-advantages-item { display: flex;  padding: 40px 16px; }
.platform-advantages-item .advantages-item-icon { width: 40px; height: 40px; margin-right: 16px; }
.platform-advantages-item .advantages-item-icon img { width: 48px; height: 48px; }
.platform-advantages-item .advantages-item-content .item-title { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.platform-advantages-item .advantages-item-content .item-desc { font-size: 14px;  font-weight: 500; color: #555353; text-align: left; }
@media only screen and (max-width: 1190px) {
    .platform-advantages-item {  padding: 32px 16px; }
}
@media only screen and (max-width: 767px) {
    .platform-advantages-item {  padding: 24px 16px; }
}

.footer-bar { background: #303030 }
.footer-bar .footer-logo-footer { width: auto; height: 48px; margin-bottom: 40px; }
.wrapper.bg-navy.angled.lower-end:after, .wrapper.bg-navy.angled.upper-end:before { content: none; }

/* products list */
.deeplink_wrapper .breadcrumb-item a { font-size: 15px; font-weight: 500; }
.deeplink_wrapper .breadcrumb-item a:hover { color: #303030; }
.shop-result-header { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: center; border-radius: 8px; padding: 20px; margin-bottom: 40px; background: url("../img/main/diy-order-banner.png") no-repeat center; background-size: cover;  }
.shop-result-header .shop-info { display: flex; align-items: center; gap: 16px; font-weight: 700; }
.shop-result-header .shop-info .shop-info-icon { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.shop-result-header .shop-info .shop-info-name { font-size: 16px; color: #fff; font-weight: 700; }
.shop-result-header .shop-platform { width: 64px; height: 64px; }
.products-title { font-size: 24px; }
.form-select { box-shadow: none; }
.avatar { background: #ff6f00 !important; }
.listing-page .header-card .header-shop h1 { margin-bottom: 0; font-size: 24px; }
.listing-page .header-card .header-shop p { margin: 5px 0 0 0; font-size: 14px; }
.listing-page .header-card .header-shop .avatar-shop { width: 88px; height: 88px; border-radius: 16px; overflow: hidden; }
.listing-page .header-card .header-shop .shop-plat { display: none; height: 24px; margin-top: 8px;  }
.listing-page .header-card .header-shop .shop-plat img { border-radius: 4px; overflow: hidden; }
.listing-page .header-card .header-plat { display: flex; align-items: center; }
.listing-page .header-card .header-plat .seller-profile-card { width: 88px; height: 88px; border-radius: 8px; }
@media only screen and (max-width: 576px) {
    .listing-page .header-card .header-shop h1 {  font-size: 20px; }
    .listing-page .header-card .header-shop .shop-plat { display: block; }
    .listing-page .header-card .header-plat { display: none; }
}

/* products page */
.shop-info-el { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; padding-bottom: 25px; margin-bottom: 80px; border-bottom: 3px solid #f0f0f8; }
.shop-info-el .shop-info-left { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.shop-info-el .shop-info-left .shop-icon { width: 24px; height: 24px; display: flex; }
.shop-info-el .shop-info-left .shop-icon img { width: 100%; height: 100%; object-fit: cover; }
.shop-info-el .shop-info-right .shop-link { font-size: 14px; color: #262626; display: flex; align-items: center; gap: 8px; }
.shop-info-el .shop-info-right .shop-link i { font-size: 18px; }
.shop-info-el .shop-info-right .shop-link:hover { color: #c92910;  }

.product-page-wrapper .product_other_images { height: auto !important; }
.product-page-wrapper .overflow-height { height: auto; }
.product-page-wrapper .overflow-height .swiper-vertical>.swiper-wrapper { flex-direction: revert; }
.product-page-wrapper .overflow-height .swiper-wrapper .swiper-img { width: 110px !important; margin-bottom: 0; }
.product-page-menu-function { margin-top: 35px;display: flex; align-items: center; justify-content: space-between;  line-height: 1; padding-bottom: 16px; border-bottom: 1px solid #eeeeee; }
.btn-function .btn-unit-menu { border: none; background: none; color: #262626; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; padding: 0; }
.btn-function .btn-unit-menu i { font-size: 16px; color: #565656; }
.btn-function .btn-unit-menu:before { content: none; }
.btn-function .btn-unit-menu.fa-heart { color: #262626 !important; }
.btn-function .btn-unit-menu.fa-heart i{ color: #c92910;  }
.btn-function .btn-unit-menu:hover { color: #c92910 !important;  }
.btn-affiliate-share { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #262626; cursor: pointer; }
.btn-affiliate-share i { font-size: 14px; color: #565656; }

.shipping-info-wrapper { margin-top: 16px; border: 1px solid #eee; }
.shipping-info-header { height: 48px; background: #f8f8f8; padding: 0 8px; display: flex; align-items: center; color: #262626; }
.shipping-info-content { border-top: 1px solid #eeeeee; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 8px; }
.shipping-info-content .info-content-item { color: #555; }
.shipping-info-content .info-content-item .content-item-value { text-transform: lowercase; }
.shipping-info-content .info-content-item .var-value { color:  #c92910; }
.shipping-info-footer { border-top: 1px solid #eeeeee; }
.shipping-info-footer ul { padding: 8px 0; }
.shipping-info-footer ul li { padding: 8px; display: flex; justify-content: space-between; color: #555; }
@media only screen and (max-width: 991px) {
    .product-page-preview-image-section-md, .sidebar-filter-sm { display: block; }
}
@media only screen and (max-width: 799px) {
    .shop-info-el { margin-bottom: 24px }
    .swiper-thumbs-container { display: block !important; }
}

.product-page-wrapper .post-title { margin-bottom: 0; font-size: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee;  }
.product-page-wrapper .post-header .price { font-size: 24px; padding-top: 24px;  }
.product-page-wrapper .post-header .price .striped-price { font-size: 24px;  font-weight: 700; }
.product-page-wrapper .post-header .product-buying-tip { font-size: 14px; color: #969696; margin-bottom: 24px; }
.product-page-wrapper .warehouse-estimation { padding: 20px 16px; border-radius: 8px; background-color: #f8f8f8; font-size: 14px; line-height: 1.5; color: #262626; letter-spacing: -0.01rem; }
.product-page-wrapper .warehouse-estimation .warehouse,
.product-page-wrapper .warehouse-estimation .estimation { padding: 8px 0; }
.product-page-wrapper .warehouse-estimation .circle { display: inline-flex; border-radius: 50%; width: 18px; height: 18px; padding: 2px;  align-items: center; justify-content: center; background-color: #c92910; color: #fff; margin-right: 8px; }
.product-page-wrapper .warehouse-estimation .el-text a { color: #c92910; }
.product-page-wrapper .size-helper { padding: 12px 16px; margin: 20px 0; background-color: #fcf4f2; border-radius: 4px; color: #c92910; display: flex; align-items: center; justify-content: space-between; }
.product-page-wrapper .size-helper i { font-size: 18px; }
@media only screen and (max-width: 799px) {
    .product-page-wrapper .post-title { margin-top: 24px; }
}

.product-attr { padding-bottom: 24px; border-bottom: 1px solid #eee; }
.product-attr .attr-title { width: 100%;  color: #969696;  }
.product-attr .attr-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 14px; flex-wrap: wrap; }
.product-attr .attr-list-wrapper { display: flex; gap: 16px; }
.product-attr .attr-list-item { padding: 4px 20px; height: 40px; border: 1px solid #ddd; background: none; color: #262626; font-weight: 500; border-radius: 4px; cursor: pointer; display: flex; align-items: center; transition: all.3s; }
.product-attr .attr-list-item.active,
.product-attr .attr-list-item:hover { color: #c92910; border-color: #c92910 !important; box-shadow: none; transform: revert; }
.product-attr .attr-list-item:active { background: none; }
.product-attr .attr-list-item .attr-item-image {  width: 32px; height: 32px; border-radius: 4px;  }
.product-attr .attr-list-item .n-ellipsis { padding: 0 16px;  font-size: 14px; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.product-attr .num-block {  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 14px; flex-wrap: wrap; }
.product-attr .num-block .num-in { margin-top: 0; padding: 0; width: 150px; border: 1px solid #ddd; border-radius: 4px; box-shadow: none;  }
.product-attr .num-block .num-in span { height: 44px; background: #f8f8f8; }
.product-attr .num-block .num-in .dis { border-radius: 4px 0 0 4px; }
.product-attr .num-block .num-in .plus { border-radius: 0 4px 4px 0; }
.product-attr .num-block .num-in input { color: #262626; }

.product-attr .attr-item {  display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.product-attr .attr-item .attr-item-value { width: calc( 100% - 136px );   }
.product-attr .attr-item .attr-item-value .attr-item-input { width: 100%; border: 1px solid #ddd; border-radius: 4px; min-height: 64px; padding: 12px; transition: all.3s; }
.product-attr .attr-item .attr-item-value .attr-item-input::-webkit-input-placeholder { color: #969696; }
.product-attr .attr-item .attr-item-value .attr-item-input:focus,
.product-attr .attr-item .attr-item-value .attr-item-input:hover { border-color: #d03050; box-shadow: none; outline: none; }

.product-purchase-tip { font-size: 12px; line-height: 1.2; color: #969696; padding: 16px 0; }
.product-risk-warning { line-height: 1.3; padding: 8px 12px; background-color: #fef6df; color: #c27d37; font-size: 12px; border-radius: 4px; }

.product-is-agree { padding: 16px 0;  }
.n-checkbox { display: flex; flex-flow: row; justify-content: start; align-items: center; gap: 10px; }
.n-checkbox .n-checkbox-box-wrapper { line-height: 0; }
.n-checkbox input[type='checkbox'] { width: 14px; height: 14px; border: 1px solid #ddd; border-radius: 2px; position: relative; transition: all.3s; }
.n-checkbox input[type='checkbox']:hover { border-color: #c92910; }
.n-checkbox input[type='checkbox']::before { content: ''; position: absolute; top: 4px; left: 3px; width: 8px; height: 4px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(-45deg); opacity: 0; z-index: 10; }
.n-checkbox input[type='checkbox']::after{ content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; background: #c92910; opacity: 0; z-index: 9; border-radius: 2px; }
.n-checkbox input[type='checkbox']:checked::before,
.n-checkbox input[type='checkbox']:checked::after { opacity: 1; }
.n-checkbox .n-checkbox-label { color: #c92910; font-size: 12px; }

.product-desc { color: #969696; font-size: 14px; line-height: 1.4; }
.add_to_cart { width: 128px; height: 38px; background: #ff6f00; border-radius: 4px !important; border: none; font-size: 14px; font-weight: 500; }
.go_to_cart { width: 128px; height: 38px; border-radius: 4px !important; border: none; font-size: 14px; font-weight: 500; }
.go_to_cart:hover { opacity: .8; }
.buy_now { width: 128px; height: 38px; background: #c92910; border-radius: 4px !important; border: none; font-size: 14px; font-weight: 500; }
.rounded .add_to_cart { align-items: center; backface-visibility: hidden; background: rgba(38, 43, 50, .8); bottom: -2.5rem; color: #fff; display: flex; font-size: 15px; font-weight: 500; height: auto; justify-content: center; left: 0; margin: 0; opacity: 1; padding: 12px; position: absolute; text-align: center; transition: all .3s ease-in-out; width: 100%; }
.rounded:hover .add_to_cart { bottom: 0; opacity: 1; }
.nav-tabs.nav-tabs-basic { gap: 24px; flex-wrap: revert; min-width: 468px; }
.nav-tabs.nav-tabs-basic .nav-link { font-size: 14px; font-weight: 500; color: #262626; border-color: transparent; padding: 8px; margin-right: 0; }
.nav-tabs.nav-tabs-basic .nav-link:hover { color: #c92910; border-color: transparent; }
.nav-tabs.nav-tabs-basic .nav-link.active { color: #c92910; border-color: #c92910 ; }
.tab-content { margin-top: 24px; }
.product-parameter-title .label-title { font-size: 16px; font-weight: 700; color: #262626; line-height: 1; margin-bottom: 24px; }
.parameter-container .parameter-product-attr { width: 100%; border-radius: 16px; display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid #eeeeee; }
.parameter-container .parameter-product-attr .product-attr-item { width: 50%; color: #262626; font-size: 14px;  border-bottom: 1px solid #eeeeee; display: flex; }
.parameter-container .parameter-product-attr .product-attr-item span { display: inline-flex; padding: 24px 16px; }
.parameter-container .parameter-product-attr .product-attr-item .attr-label { width: 30%; background: #f8f8f8; }
.parameter-container .parameter-product-attr .product-attr-item .attr-value { width: 70%; }
/*.tab-content .description { color: #565656; }*/
/* estimation */
.bg-custom { background: #f8f8f8 }
@media only screen and (max-width: 767px){
    .description_img div { width: 100% !important; }
}
@media only screen and (max-width: 576px){
    #product-tab nav { overflow: hidden; overflow-x: scroll; padding: 0 10px 20px; }
}

/* estimation banner */
.estimation-top-banner { width: 100%; height: 200px; background: url("../img/main/estimation-banner.png") no-repeat center; background-size: cover; border-radius: 8px; padding: 46px 40px; color: #fff; display: flex; flex-direction: column;   }
.estimation-top-banner-title h2 { font-size: 36px; font-weight: 700; line-height: 1; color: #fff; }
.estimation-top-banner-desc { font-size: 16px; line-height: 1.4; }

.estimation-tips { margin-top: 16px; padding: 12px 20px; background-color: #fef6df; color: #c27d37; font-size: 12px; line-height: 1.6; border-radius: 8px; }

.estimation-calculator { background: #fff; padding: 32px; margin-top: 16px; }
.estimation-form-label { position: relative }
.estimation-form-label h3 { color: #262626; font-weight: 700; font-size: 18px; line-height: 1; margin-bottom: 32px; }
.estimation-form-label:before { position: absolute; left: -12px; content: ""; width: 4px; height: 100%; background-color: #c92910; border-radius: 2px;}

/* estimation form */
.estimation-form-Lists { display: flex; flex-wrap: wrap; margin: 0 -10px; border-bottom: 2px solid #eee; }
.form-List { padding: 0 10px; display: flex; flex-wrap: wrap; margin-bottom: 24px; align-items: center; }
.form-List .form-List-label { width: 120px;  }
.form-List .form-List-label .form-List-label-title { color: #262626; font-size: 14px; font-weight: 500; }
.form-List .form-List-label .form-List-label-important { color: #d03050; font-size: 14px; }
.form-List .form-List-wrapper { width: calc( 100% - 120px ); }
.form-List .form-List-content { position: relative; }
.form-List .form-input-input { position: relative; }
.form-List .form-input-input .form-input-el { width: 100%; height: 40px; border-radius: 4px; border: 1px solid #ddd; background: #fff; padding: 0 10px; transition: all.3s }
.form-List .form-input-input #country { padding: 0 68px 0 10px; }
.form-List .form-input-input .form-input-el:focus,
.form-List .form-input-input .form-input-el:hover { border-color: #d03050; box-shadow: none; outline: none; }
.form-List .form-input-input .form-input-el.cur-status { border-color: #d03050; }
.form-List .form-input-input .form-input-el::-webkit-input-placeholder { color: #bbb; font-size: 14px; }
.form-List .form-input-input #clear-btn { position: absolute; display: none; top: 50%; right: 46px; transform: translateY(-50%); line-height: 0; border: none; background: transparent; }
.form-List .form-input-input #clear-btn span { display: inline-block; width: 13px; height: 13px; background: #ccc; border-radius: 13px; font-size: 11px; line-height: 12px; color: #fff; transition: all.3s; }
.form-List .form-input-input #clear-btn span:hover {  background:  #c92910; }

#suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #eee; border-top: none; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.suggestion-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s;  font-size: 14px; color: #565656; }
.suggestion-item:hover { background-color: #f5f5f5; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item .country-sign { width: 20px; margin-right: 8px; flex-shrink: 0; }
.suggestion-item .country-sign img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.suggestion-item .country-name { font-size: 14px; color: #333; }

.form-List .form-input-btn { position: absolute; width: 50px; height: 40px; top: 0; right: 0; display: flex; justify-content: center; align-items: center; border: none; background: transparent; cursor: pointer; }
.form-List .form-input-btn i { color: #767676; font-size: 18px; }
.form-input-dropdown { display: none; width: 100%;  padding: 12px 20px; background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: absolute; top: 100%; left: 0; z-index: 48 }
.form-input-dropdown .choose-tabs-el { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid #efeff5; }
.form-input-dropdown .choose-tabs-el .tab-title { font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; transition: all.3s; cursor: pointer; }
.form-input-dropdown .choose-tabs-el .tab-title:before { content: ''; position: absolute; width: 100%; height: 2px; bottom: -1px; background: transparent;  transition: all.3s; }
.form-input-dropdown .choose-tabs-el .tab-title:hover,
.form-input-dropdown .choose-tabs-el .tab-title.active { color: #c92910; }
.form-input-dropdown .choose-tabs-el .tab-title.active:before { background: #c92910; }
.choose-item-tab { display: none; padding-top: 10px; max-height: 320px; overflow: hidden; overflow-y: scroll; }
.choose-item-tab .choose-item-value { display: flex; flex-wrap: wrap;  }
.choose-item-tab .choose-item-value .item-value { display: flex; width: 33.3333%; padding-right: 10px; height: 52px; align-items: center; cursor: pointer; }
.choose-item-tab .choose-item-value .item-value .country-sign { width: 36px; }
.choose-item-tab .choose-item-value .item-value .country-sign img { width: 32px; }
.choose-item-tab .choose-item-value .item-value .country-name { margin-left: 8px; font-size: 12px; line-height: 1.2; color: #767676; transition: all.3s; }
.choose-item-tab .choose-item-value .item-value:hover .country-name { color: #c92910;  }
@media only screen and (max-width: 767px) {
    .estimation-top-banner { padding: 24px;  }
}
@media only screen and (max-width: 576px) {
    .form-input-dropdown .choose-tabs-el { gap: 14px; }
    .choose-item-tab .choose-item-value .item-value { width: 50%; }
}
@media only screen and (max-width: 480px) {
    .estimation-calculator { padding: 32px 24px }
}

.category-container { width: 100%; height: 40px; background: #fff; border: 1px solid #ddd; padding: 0 40px 0 10px; border-radius: 4px; cursor: pointer; transition: all .3s; display: flex; flex-wrap: wrap; gap: 5px; align-items: center;}
.category-container::before { content: " Item Category"; color: #999; }
.category-container.empty { font-style: revert; color: #262626; }
.category-container.empty::before { content: none; }
.category-container.Highlight { border-color: #c92910;  }
.category-actions { position: absolute; display: none; top: 46%; right: 50px; transform: translateY(-50%); line-height: 1; border: none; background: transparent;  }
.category-actions .clear-all { display: inline-block; width: 13px; height: 13px; background: #ccc; border-radius: 13px; font-size: 9px; line-height: 12px; color: #fff; text-align: center; transition: all.3s }
.category-actions .clear-all:hover { background: #c92910; }

.category-popup { display: none; position: absolute; top: 100%; background: white; border: 1px solid #ddd; padding: 0; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 48; overflow-y: auto; width: 100%; }
.category-popup .popover-shared { display: flex; }
.category-popup .popover-shared .choose-tabs-el { width: 180px; border-right: 1px solid #ccc; max-height: 320px; overflow: hidden; overflow-y: scroll; }
.category-popup .popover-shared .choose-tabs-el .tab-title { padding: 10px 15px; }
.category-popup .popover-shared .choose-tabs-el .tab-title.active {  background: #e7e7e7; color: #c92910;  }
.category-popup .popover-shared .choose-tabs-el .tab-title:hover {  background: #f5f5f5;  }
.category-popup .popover-shared .choose-tabs-el .tab-title.active:hover { background: #e7e7e7; }
.category-popup .popover-shared .tabs-content { width: calc( 100% - 180px ); }
.category-popup .popover-shared .choose-item-tab { padding-top: 0; }
.category-item { padding: 6px 10px; margin: 4px 0; cursor: pointer; display: flex; align-items: center; }
.category-item:hover { background-color: #f5f5f5; }
.category-item input { margin-right: 8px; -webkit-appearance: revert !important; }
.category-item label { margin-bottom: 0; }
.selected-category { display: inline-flex; align-items: center; background-color: #e0e0e0; padding: 3px 8px; border-radius: 3px; margin-right: 5px; background-image: none; font-style: normal; color: #262626; }
.remove-btn { margin-left: 5px; cursor: pointer; color: #888; }
.remove-btn:hover { color:  #c92910; }

.form-List .input-way .form-input-el { padding: 0 15px 0 10px; }
.specification { display: flex; gap: 16px; width: calc( 100% - 120px ) }
.specification .specification-unit .form-List-wrapper { width: 100%; }
.btn-wrapper { text-align: right; }
.btn-wrapper .submit-btn { margin-top: 24px; width: 128px; height: 38px; background: #c92910; color: #fff; font-size: 14px; line-height: 1; padding: 12px 16px; border-radius: 2px; border: none; transition: all.3s; }
.btn-wrapper .submit-btn:hover { background: #b71900; }
@media only screen and (max-width: 1200px) {
    .form-List .form-List-label { width: 100%; margin-bottom: 10px; }
    .form-List .form-List-wrapper,
    .specification { width: 100% }
}
@media only screen and (max-width: 991px) {
    .specification .specification-unit { width: calc( 33.3333% - 11px ); }
}
@media only screen and (max-width: 576px) {
    .specification { gap: 12px; }
    .specification .specification-unit { width: calc( 33.3333% - 8px ); }
}


/* diy-order form */
.diy-order-top-banner { width: 100%; height: auto; background: url("../img/main/diy-order-banner.png") no-repeat center; background-size: cover; border-radius: 8px; padding: 40px 80px; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  }
.top-banner-content { width: 30%; }
.top-banner-title h2 { font-size: 36px; font-weight: 700; line-height: 1; color: #fff; }
.top-banner-desc { font-size: 24px; line-height: 1.4; font-weight: 600; }
.top-banner-step { width: calc( 70% - 40px ); }
.diy-order-step-lines { display: flex; gap: 12px; justify-content: space-between; }
.diy-order-step-lines .site-step-item { text-align: center; }
.diy-order-step-lines .diy-order-step-symbol { width: 24px; height: 24px; margin: 0 auto; background: #ffffff4d; color: #fff; opacity: .9; font-size: 16px; font-weight: 700; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.diy-order-step-lines .site-step-title { margin-top: 10px; font-size: 14px; letter-spacing: 0; }
.diy-order-step-lines .diy-order-step-line {  border-right: 1px dashed rgba(255, 255, 255, .3); }
@media only screen and (max-width: 991px) {
    .diy-order-top-banner { padding: 32px; }
}
@media only screen and (max-width: 767px) {
    .diy-order-top-banner { padding: 24px; }
    .top-banner-content { width: 100%; text-align: center; margin-bottom: 40px; }
    .top-banner-step { width: 100%;  }
    .diy-order-step-lines {  flex-direction: column; gap: 24px; }
    .diy-order-step-lines .diy-order-step-line { border-bottom: 1px dashed rgba(255, 255, 255, .3); border-right: none;  }
}


.diy-order-calculator { background: #fff; padding: 32px; margin-top: 16px; }
.diy-order-form-label { position: relative }
.diy-order-form-label h3 { color: #262626; font-weight: 700; font-size: 18px; line-height: 1; margin-bottom: 32px; }
.diy-order-form-label:before { position: absolute; left: -12px; content: ""; width: 4px; height: 100%; background-color: #c92910; border-radius: 2px;}
.diy-order-form-Lists { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.diy-order-calculator .form-List { display: block; padding-right: 80px; }
.diy-order-calculator .form-List .form-List-label { width: 100%; margin-bottom: 10px; }
.diy-order-calculator .form-List .form-List-wrapper { width: 100%;  }
.diy-order-calculator .form-List .form-input-input .form-input-el.form-textarea { min-height: 120px; padding: 10px; }
@media only screen and (max-width: 991px) {
    .diy-order-calculator .form-List { padding-right: 32px; }
}
@media only screen and (max-width: 767px) {
    .diy-order-form-Lists { margin: 0; }
    .diy-order-calculator .form-List { padding: 0; }
}
@media only screen and (max-width: 480px) {
    .diy-order-calculator { padding: 32px 24px; }
}

.upload-container { display: flex; flex-wrap: wrap; }
.upload-container #fileInput { display: none; }
.upload-container .preview-area { display: flex; flex-wrap: wrap; }
.upload-container .preview-item { position: relative; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #eee; border-radius: 4px; overflow: hidden; }
.upload-container .preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-container .remove-img { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: #c92910; color: white; border-radius: 50%; text-align: center; line-height: 20px; cursor: pointer; font-size: 12px; }
.upload-container .upload-box { width: 100px; height: 100px; border: 1px dashed #ccc; margin-bottom: 10px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; color: #565656; transition: all 0.3s; background: #f9f9f9; }
.upload-container .upload-box:hover { border-color: #c92910; color: #c92910;  }
.upload-container .upload-box .upload-icon { font-size: 32px; font-weight: 300;  }
.upload-container.upload-icon { font-size: 24px; margin-bottom: 5px; }

.fee-input-wrap { margin: 0 -15px; display: flex; flex-wrap: wrap; position: relative; align-items: center; }
.form-List .fee-input-wrap .form-input-input .form-input-el { -moz-appearance: textfield; padding: 0 78px 0 10px;  }
.fee-input-wrap .form-input-el::-webkit-inner-spin-button,
.fee-input-wrap .form-input-el::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fee-input-wrap .label-cny { position: absolute; width: 78px; height: 38px; top: 1px; right: 16px; background: #f5f5f5; color: #262626; display: flex; justify-content: center; align-items: center; border-radius: 0 4px 4px 0  }
.fee-input-wrap .form-input-tip .tip { display: inline-block; font-size: 12px; color: #c27d37; letter-spacing: -0.01rem;  }
@media only screen and (max-width: 991px) {
    .fee-input-wrap .form-input-tip .tip { padding-top: 12px; }
}

.number-input { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; transition: all.3s; }
.number-input.conduct,
.number-input:hover { border-color: #c92910; }
.number-input input { width: 74px; height: 40px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 16px; outline: none; }
.number-input input::-webkit-inner-spin-button,
.number-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.number-input button { width: 40px; height: 40px; background: #f5f5f5; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all.3s; }
.number-input button:hover { color: #c92910;  }
.number-input button:active {background: #d0d0d0; }
.number-input button:disabled { color: #ccc; cursor: not-allowed; background: #f5f5f5; }

.diy-order-tips { margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #eeeeee;  }
.diy-order-tips .tips-label span { font-size: 12px; color: #acacac; }
.diy-order-tips .tips-label span b { color: #262626; }

.diy-order-footer { margin-top: 16px; gap: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.n-form-item { display: flex; flex-flow: row; justify-content: start; align-items: center; gap: 10px; }
.n-form-item .form-item-checkbox { line-height: 0; }
.n-form-item input[type='checkbox'] { width: 14px; height: 14px; border: 1px solid #ddd; border-radius: 2px; position: relative; transition: all.3s; }
.n-form-item input[type='checkbox']:hover { border-color: #c92910; }
.n-form-item input[type='checkbox']::before { content: ''; position: absolute; top: 4px; left: 3px; width: 8px; height: 4px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(-45deg); opacity: 0; z-index: 10; }
.n-form-item input[type='checkbox']::after{ content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; background: #c92910; opacity: 0; z-index: 9; border-radius: 2px; }
.n-form-item input[type='checkbox']:checked::before,
.n-form-item input[type='checkbox']:checked::after { opacity: 1; }
.n-form-item .user-protocol { color: #acacace6; font-size: 12px; line-height: 1.5; font-weight: 400; }
.n-form-item .user-protocol .user-protocol-link { color: #29b6ff; }

.diy-order-buy { display: flex; flex-wrap: wrap; gap: 24px; }
.product-price .price { font-size: 14px; color: #565656; font-weight: 500; }
.product-price .price .price-value { display: inline-block; font-weight: 700; font-size: 24px; color: #c92910; letter-spacing: -0.03rem; }
.btn-group { display: flex; gap: 16px; }
.btn-group .custom-btn { display: flex; justify-content: center; align-items: center; width: 128px; height: 38px; border-radius: 4px; padding: 12px 16px; color: #fff; font-size: 14px; border: none; }
.btn-group .custom-btn.custom-btn-cart { background: #ff6f00; transition: all .3s; }
.btn-group .custom-btn.custom-btn-buy { background: #c92910; transition: all .3s; }
.btn-group .custom-btn.custom-btn-cart:hover { background: #e2690c; }
.btn-group .custom-btn.custom-btn-buy:hover { background: #b71900; }

.bg-image-custom { background: url("../img/main/signin-bg.png") no-repeat center; background-size: cover; }

/* sign in / sign up */
.signin-pages,
.signup-pages { padding: 64px 0; }
.signin-pages .modal-dialog,
.signup-pages .modal-dialog { top: auto; transform: revert !important; background: #fff; }
.title-box h2 { font-size: 24px; font-weight: 500; color: #262626; }
.title-box .lead { font-size: 14px; color: #565656; }
.form-control { height: 46px; }
.signin-pages .submit_btn,
.signup-pages .btn-primary { width: 100%; margin-top: 10px; height: 40px; background-color: #c92910; border-radius: 4px !important; border: none; }
.link-item-blank { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 35px; }
.link-item-blank p,
.link-item-blank p a { color: #565656; font-size: 12px; }
.link-item-blank p a.go-register { color:  #c92910; }
.link-item-blank p a:hover { color:  #c92910;  }

/* favorite */
.favorite-page .add_to_cart { color: #fff; }
.favorite-page .add_to_cart:hover { background: #ff6f00; opacity: .8; }

/* process cart */
.page-section-wrapper { background: #fff; padding: 24px 16px; border-radius: 8px; margin-bottom: 24px; }
.page-section-wrapper .label-title { font-size: 16px; font-weight: 700; color: #262626; line-height: 1; margin-bottom: 24px; }
.country-select-wrapper { padding-top: 24px; border-top: 1px solid #eee; }
.country-select-wrapper .select-info-item { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #262626; margin-bottom: 12px; }
.country-select-wrapper .select-info-item .label-number { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #c92910; color: #fff; }
.country-select-wrapper .select-info-item .item-content span { font-size: 14px; font-weight: 500; letter-spacing: 0.01rem; }
.country-select-wrapper .select-info-item .item-content span.lines-can-use .lines-can-use-label { font-size: 12px; color: #acacac; padding-right: 10px; }
.country-select-wrapper .select-info-item .item-content span.lines-can-use .lines-can-use-qty { font-size: 12px; color: #c92910; }

.country-select-wrapper .form-List-wrapper { display: inline-flex; }
.country-select-wrapper .form-List-content { position: relative; margin: 0 10px; }
.country-select-wrapper .form-input-input { position: relative; width: 400px; }
.country-select-wrapper .form-input-input .form-input-el { width: 100%; height: 34px; border-radius: 4px; border: 1px solid #ddd; background: #fff; padding: 0 10px; transition: all .3s; }
.country-select-wrapper .form-input-input #country { padding: 0 68px 0 10px; }
.country-select-wrapper .form-input-input .form-input-el:focus,
.country-select-wrapper .form-input-input .form-input-el:hover { border-color: #d03050; box-shadow: none; outline: none; }
.country-select-wrapper .form-input-input .form-input-el.cur-status { border-color: #d03050; }
.country-select-wrapper .form-input-input .form-input-el::-webkit-input-placeholder { color: #bbb; font-size: 14px; }
.country-select-wrapper .form-input-input #clear-btn { position: absolute; display: none; top: 50%; right: 46px; transform: translateY(-50%); line-height: 0; border: none; background: transparent; }
.country-select-wrapper .form-input-input #clear-btn span { display: inline-block; width: 13px; height: 13px; background: #ccc; border-radius: 13px; font-size: 11px; line-height: 12px; color: #fff; transition: all.3s; }
.country-select-wrapper .form-input-input #clear-btn span:hover {  background:  #c92910; }
.country-select-wrapper .form-input-suffix .form-input-btn { position: absolute; width: 48px; height: 34px; top: 0; right: 0; display: flex; justify-content: center; align-items: center; border: none; background: transparent; cursor: pointer; }
.country-select-wrapper .form-input-suffix .form-input-btn i { color: #767676; font-size: 16px; }

.header-shop-name { padding: 20px 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; box-shadow: 0 0 0 .05rem rgba(8, 60, 130, .06), 0 0 1.25rem rgba(30, 34, 40, .04);  }
.shop-info { display: flex; align-items: center; }
.shop-info .shop-info-icon i { font-size: 22px; color: #ff6f00; }
.shop-info .shop-info-name { font-size: 16px; line-height: 1; color: #262626; font-weight: 600; margin-left: 8px; }
.btn-cart-clear .btn-clear { border: 2px solid #c92910; color: #c92910; }
.btn-cart-clear .btn-clear:hover { box-shadow: none; transform: revert; }

.cart-table-wrapper { border: 1px solid #eee; border-radius: 8px; overflow: hidden; overflow-x: scroll; }
.table-cart-label { margin-bottom: 0; min-width: 1320px; }
.table-cart-label thead tr { background: #f8f8f8; border-bottom: 1px solid #eee; border-radius: 8px 8px 0 0; }
.table-cart-label thead th,
.table-cart-label tbody td { border: none; }
.table-cart-label .table-item-title { color: #262626; padding: 16px 8px; text-align: center; }
.table-cart-label .table-item-title:first-child { text-align: left; }
.table-cart-label .table-item-content { padding: 16px 8px; vertical-align: middle; text-align: center;  }
.table-cart-label .table-item-title.title-name,
.table-cart-label .table-item-content.content-name { padding-left: 16px; }
.table-cart-label .table-item-title.title-function,
.table-cart-label .table-item-content.content-function { padding-right: 16px; }
.table-cart-label .table-item-content.content-name { display: flex; align-items: center; text-align: left; }
.table-cart-label .cart-product-desc-list { font-size: 14px; color: #262626; font-weight: 500; border-bottom: 1px solid #eee; }
.table-cart-label .cart-product-desc-list:last-child { border-bottom: none; }
.content-name .cart-img { width: 96px !important; height: 96px !important; }
.content-name .cart-img a { display: inline-block; width: 96px ; height: 96px;  }
.content-name .cart-img img { width: 96px !important; height: 96px !important; }
.content-name .post-product { display: flex; flex-direction: column; justify-content: space-between; }
.content-name .post-title a { font-size: 14px; color: #262626; font-weight: 600; margin-bottom: 10px;  }
.content-name .post-sku { font-size: 14px; color: #565656; font-weight: 500; }
.content-name .move-to-cart { max-width: 120px; }
.content-name .move-to-cart:hover { color: #fff; }

.remark-section { align-items: center !important; }
.remark-section .remark-display { background-color: #f8f8f8; border-color: #dedede; min-height: 48px; width: 168px; white-space: revert; text-align: left;  }
.remark-section .remark-edit-form .form-control { height: auto; box-shadow: none; border-color: #dedede; padding: 8px; }
.remark-section .remark-edit-form .btn { width: 60px; height: 30px; display: flex; justify-content: center; align-items: center; padding: 0 8px;  }
.remark-section .remark-edit-form .save-confirm { background: #c92910; color: #fff; }
.remark-section .remark-edit-form .save-cancel { background: #dedede; color: #565656; }
.remark-section .remark-edit-form .btn:hover { opacity: .8; }

.content-services .services-container { max-height: revert; overflow-y: revert; display: flex; flex-direction: column; gap: 5px;  }
.content-services .service-item { margin-bottom: 0; padding: 0; border-radius: 0; border: none; }
.content-services .service-item:hover { transform: revert; background: none; border: none; box-shadow: none; }
.content-services .service-item .btn-service { margin: 0 auto; padding: 4px; height: 34px; border: 1px solid #999; border-radius: 4px; min-width: 112px; max-width: 150px;background: #fff; display: flex; align-items: center; justify-content: center; }
.content-services .service-item .btn-service .service-object { font-size: 13px; color: #565656; line-height: 1; }
.content-services .service-item .btn-service:hover { border-color:  #c92910; }
.content-services .service-item .btn-service:hover .service-object { color: #c92910; }
@media only screen and (max-width: 768px) {
    .content-services .service-item { padding: 0 !important; }
}
.content-quantity .form-control { height: 34px; margin-top: 0; border: 1px solid #999; width: 112px; padding: 0 4px; box-shadow: none; border-radius: 4px; }
.content-quantity .form-control:hover { border-color: #c92910; }
.content-quantity .num-in span { width: 25%; height: 32px; }
.content-quantity .num-in span:hover:after,
.content-quantity .num-in span:hover:before { background-color: #c92910 }
.content-quantity .num-in input { height: 32px; width: 50%; color: #565656; font-weight: 500; padding: 0; }
.table-cart-label .title-subtotal { width: 10%; }
.table-cart-label .content-function .link_cursor { display: inline-block; padding: 0 8px; }
.table-cart-label .content-function .link_cursor .remove-product { color: #c92910; }
.table-cart-label .content-function .link_cursor .for-later { color: #007bff; }
.total-responsive { border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.total-responsive .total-product-price { margin: 20px 0; text-align: right; line-height: 1.8; }
.total-responsive .total-label { font-size: 14px; color: #969696; font-weight: 500; margin-right: 8px; }
.total-responsive .total-value .price { display: inline-block; }
.total-responsive .total-value .text-color { color: #262626; }
.protocol { display: flex; justify-content: flex-end; margin: 20px 0; flex-wrap: wrap; }
.protocol .pointer a { color: #262626; font-size: 14px; }
.protocol .pointer a:hover { color: #c92910; }
.cart-is-agree .n-checkbox { justify-content: flex-end; }
.cart-is-agree .n-checkbox .n-checkbox-label { font-size: 14px; color: #262626; }
.checkout-method { text-align: right; }
.checkout-method .btn-settlement { background-color: #c92910; border-radius: 4px; color: #fff; font-size: 14px; }
.checkout-method .btn-settlement:hover { transform: revert; box-shadow: none; background-color: #b62710;  }
.checkout-method .btn-settlement:focus { outline: none !important; box-shadow: none !important;  }
.checkout-method .btn-settlement:active { border-color: transparent !important; color: #fff !important; }
.reminder { color: #c27d37; font-size: 12px; margin-top: 20px; text-align: right; }

.modal.show .modal-dialog { position: relative; top: 50%; transform: translateY(-50%) !important;  }
.modal-dialog { border-radius: 8px; padding: 32px 28px; top: 50%; transform: translateY(-60%) !important;  background: #fff;}
.modal-content { box-shadow: none; }
.modal-content .modal-header { background: none; border-bottom: 1px solid #eee; padding: 0; padding-bottom: 16px; justify-content: space-between; }
.modal-content .modal-header .modal-title { font-size: 16px; }
.modal .modal-content .modal-header .btn-close { position: revert; margin: 0; padding: 0; color: #767676; }
.modal .modal-content .modal-header .btn-close:before { background: none; color: #767676; font-size: 24px; width: auto; height: auto; line-height: 1; }
.modal-content .modal-body { padding: 0;  }
.modal-content .modal-body .service-details { padding-top: 20px; }
.modal-content .modal-body .service-title { font-size: 14px; color: #262626; font-weight: 500; margin-bottom: 10px; line-height: 1; }
.modal-content .modal-body .service-description { font-size: 14px; color: #969696; font-weight: 500; margin-bottom: 0; line-height: 1.4; }
.modal-content .modal-body .service-content { padding-top: 16px; }
.modal-content .modal-body .service-item-container { display: flex; gap: 12px; }
.modal-content .modal-body .service-item-container .item-container { width: 64px; height: 64px; border-radius: 4px; }
.modal-content .modal-body .service-item-container .item-container img ,.modal-content .modal-body .service-item-container .item-container video { width: 100%; height: 100%; cursor: pointer; object-fit: cover; border-radius: 4px; }
.modal-content .modal-body .service-quantity-selector { padding: 20px 0; margin-top: 20px; border-radius: 0; border: none; border-top: 1px solid #eee; }
.modal-content .modal-body .service-quantity-selector .form-label { font-size: 14px; color: #262626; font-weight: 500; margin-bottom: 0; }
.modal-content .modal-body .service-item-input { display: flex; justify-content: space-between; align-items: center; }
.modal-content .modal-body .service-item-input .service-quantity { display: flex; align-items: center; border: 1px solid #999; border-radius: 4px; width: 128px; margin-left: auto; }
.modal-content .modal-body .service-item-input .service-quantity:hover { border-color: #c92910; }
.modal-content .modal-body .service-item-input .btn-outline-secondary { width: 32px; height: 32px; color: #969696; border: none; padding: 0; }
.modal-content .modal-body .service-item-input .btn-outline-secondary:focus { outline: none !important; box-shadow: none !important; }
.modal-content .modal-body .service-item-input .btn-outline-secondary:hover { background: none; color: #c92910 }
.modal-content .modal-body .service-item-input .form-control { -moz-appearance: textfield; width: 64px; height: 32px; padding: 0; border: none !important; border-radius: 0 !important; font-size: 14px !important; color: #565656; }
.modal-content .modal-body .service-item-input .form-control:focus { outline: none !important; box-shadow: none !important; }
.modal-content .modal-body .service-item-input .form-control::-webkit-outer-spin-button,
.modal-content .modal-body .service-item-input .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.modal-content .modal-body .service-fee { margin-top: 20px; }
.modal-content .modal-body .service-fee .total-service-price { background: #f9f3ef; border-color: #f3dece; }
.modal-content .modal-footer { padding: 0; padding-top: 20px; gap: 20px; border-color: #eee; background: none; }
.modal-content .modal-footer .btn-nl { min-width: 120px; height: 36px; margin: 0; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; transition: all .3s; background: none; display: flex; align-items: center; justify-content: center; }
.modal-content .modal-footer .btn-nl.btn-secondary { border-color: #eee; color: #262626; }
.modal-content .modal-footer .btn-nl.btn-secondary:hover { border-color: #c92910; color: #c92910; }
.modal-content .modal-footer .btn-nl.btn-success { background: #c92910; color: #fff; }
.modal-content .modal-footer .btn-nl.btn-success:hover { background: #b62710; }
@media only screen and (max-width: 767px) {
    .address-modal-ms.modal.show .modal-dialog { top: 60%; }
}
@media only screen and (max-width: 576px) {
    .address-modal-ms.modal.show .modal-dialog { top: 70%; }
}

/* checkout */
.checkout-submit-info { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.checkout-submit-info .submit-info-left { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.checkout-submit-info .submit-info-left .checkout-status { font-size: 18px; color: #262626; font-weight: 700; }
.checkout-submit-info .submit-info-left .checkout-payment-reminder { font-size: 14px; color: #969696; }
.checkout-submit-info .submit-info-left .checkout-payment-reminder .deadline { color: #29b6ff; }
.checkout-submit-info .submit-info-right .order-info-value { font-size: 18px; color: #262626; font-weight: 700; margin-left: 8px; }
@media only screen and (max-width: 991px) {
    .checkout-submit-info { align-items: flex-end; }
    .checkout-submit-info .submit-info-left { flex-direction: column; gap: 5px; align-items: revert; }
}

.address-selection-area { border-top: 1px solid #eee; padding: 20px 0; }
.address-selection-area .address-card { background: none; border-radius: 8px; border: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.address-selection-area .address-card:hover { box-shadow: none; border-color: #c92910; transform: revert; }
.address-selection-area .address-card.selected { background: rgba(201, 41, 16, 0.02); border-color: rgba(201, 41, 16, 0.2); box-shadow: none; }
.address-selection-area .address-card .address-item { margin-bottom: 0; }
.address-selection-area .address-card .address-name { color: #262626; font-size: 14px; }
.address-selection-area .address-card .address-details { color: #656565; }
.address-selection-area .address-card .address-mobile { color: #c92910; }
.address-selection-area .address-card .address-type-badge { background: #ff6f00; }
.address-selection-area .add-address-card { border: 1px dashed #dee2e6; background: #f8f8f8; border-radius: 8px; padding: 32px 20px; margin-bottom: 0; }
.address-selection-area .add-address-card:hover { border-color: #c92910; transform: revert; background: #f8f8f8; }
.address-selection-area .add-address-card .add-address-icon { background: #acacac; width: 42px; height: 42px; }
.address-selection-area .add-address-card:hover .add-address-icon { transform: revert; background: #c92910;  }
.address-selection-area .add-address-card:hover .add-address-text { color: #c92910; }


.form-check-input { position: revert; margin: 0; width: 18px; height: 18px; }
.form-check-input:checked { background-color: #c92910; border-color: #c92910; }
.shipping-methods { margin-bottom: 24px; }
.shipping-methods-wrapper .step-shipping ul { display: flex; flex-wrap: wrap; gap: 30px; }
.shipping-methods-wrapper .step-shipping li { display: flex; align-items: center; width: calc( 25% - 22.5px ); gap: 16px; border: 1px solid #eee; border-radius: 8px; padding: 24px 16px; transition: all .3s; cursor: pointer; }
.shipping-methods-wrapper .step-shipping li:hover { border-color: #c92910; }
.shipping-methods-wrapper .step-shipping li.selected { border-color: rgba(201, 41, 16, 0.2); background: rgba(201, 41, 16, 0.02); }
.shipping-methods-wrapper .step-shipping .shipping-item label { margin: 0; line-height: 1 }
.shipping-methods-wrapper .step-shipping .shipping-item img { width: 36px; height: auto; border-radius: 3px; }
@media only screen and (max-width: 1199px) {
    .shipping-methods-wrapper .step-shipping ul { gap: 16px; }
    .shipping-methods-wrapper .step-shipping li { width: calc( 25% - 12px ); }
}
@media only screen and (max-width: 991px) {
    .shipping-methods-wrapper .step-shipping li {  width: calc( 50% - 8px ); }
}
@media only screen and (max-width: 576px) {
    .shipping-methods-wrapper .step-shipping li {  width: 100%; }
    .payment-methods-wrapper .step-payment .payment-item img {  width: 24px; }
}

.form-check { padding: 24px 16px; border: 1px solid #eee; border-radius: 8px; transition: all .3s; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; cursor: pointer; }
.form-check .balance-label { display: flex; align-items: center; gap: 10px; }
.form-check .form-check-input { margin-left: 0; }
.form-check .balance-icon img {  width: 36px; height: auto; border-radius: 3px; }
.form-check .form-check-label #available_balance { font-size: 18px; margin-left: 5px; font-weight: 600; }

.payment-methods-wrapper .step-payment ul { display: flex; flex-wrap: wrap; gap: 30px; }
.payment-methods-wrapper .step-payment li { display: flex; align-items: center; width: calc( 25% - 22.5px ); gap: 16px; border: 1px solid #eee; border-radius: 8px; padding: 24px 16px; transition: all .3s; cursor: pointer; }
.payment-methods-wrapper .step-payment li:hover { border-color: #c92910; }
.payment-methods-wrapper .step-payment li.selected { border-color: rgba(201, 41, 16, 0.2); background: rgba(201, 41, 16, 0.02); }
.payment-methods-wrapper .step-payment .payment-item label { margin: 0; line-height: 1 }
.payment-methods-wrapper .step-payment .payment-item img { width: 36px; height: auto; border-radius: 3px; }
@media only screen and (max-width: 1199px) {
    .payment-methods-wrapper .step-payment ul { gap: 16px; }
    .payment-methods-wrapper .step-payment li { width: calc( 25% - 12px ); }
}
@media only screen and (max-width: 991px) {
    .payment-methods-wrapper .step-payment li {  width: calc( 50% - 8px ); }
}
@media only screen and (max-width: 576px) {
    .payment-methods-wrapper .step-payment li {  width: 100%; }
}

.payment-methods-info .alert { padding: 24px 16px; border-radius: 8px; }
.payment-methods-info .alert-warning span,
.payment-methods-info .alert-info span { display: inline-block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.payment-methods-info .alert-warning li { color: #c27d37; font-size: 13px; line-height: 1.6; font-weight: 500; }
.payment-methods-info .alert-info { color: #2b92b7; }
.payment-methods-info .alert-info ul { display: flex; flex-wrap: wrap; gap: 20px; }
.payment-methods-info .alert-info li,
.payment-methods-info .alert-info p {  font-size: 13px; line-height: 1.6;  }
.payment-methods-expand { padding-top: 40px; border-bottom: 1px solid #ddd; }
@media only screen and (max-width: 576px) {
    .payment-methods-info .alert-info ul { gap: 10px; }
}

.product-checkout-wrapper { padding-top: 20px; border-top: 1px solid #eee; }
.product-checkout-title .clearfix { font-size: 14px; color: #969696; margin-bottom: 20px; font-weight: 500; }
.product-checkout .shopping-cart-item { border-bottom: 1px solid #eee; }
.product-checkout .shopping-cart-item .checkout-img a { display: inline-block; }
.product-checkout .shopping-cart-item .checkout-img,
.product-checkout .shopping-cart-item .checkout-img a {  width: 96px !important; height: 96px !important; }
.product-checkout .shopping-cart-item .checkout-img img {  width: 100% !important; height: 100% !important; object-fit: cover !important; }
.product-checkout .shopping-cart-item .post-name { margin-left: 15px; }
.product-checkout .shopping-cart-item .post-title { font-size: 14px; font-weight: 600; color: #262626; margin-bottom: 10px; max-width: 618px; }
.product-checkout .shopping-cart-item .post-title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.product-checkout .shopping-cart-item .small .qty span,
.product-checkout .shopping-cart-item .small .net-amount span,
.product-checkout .shopping-cart-item .small .tax-title span { color: #969696; font-size: 12px; }
@media only screen and (max-width: 576px) {
    .product-checkout .shopping-cart-item .checkout-img,
    .product-checkout .shopping-cart-item .checkout-img a {  width: 80px !important; height: 80px !important; }
    .product-checkout .shopping-cart-item .post-name { margin-left: 0; }
}

#promo_code_form { margin-top: 24px; }
#promocode-list label { margin-bottom: 0 !important }
#promocode-list .list-group-item { gap: 20px; margin-top: 0 !important; padding: 16px; }
#promocode-list .list-group-item .promo-code-img { width: 80px; height: 80px }
#promocode-list .list-group-item .text-start { display: flex; gap: 20px; align-items: center; }
#promocode-list .list-group-item .text-start .copy-promo-code { padding: 6px 10px !important; border-radius: 4px; border-color: #acacac }
#promocode-list .list-group-item .text-start small { color: #c92910 !important; font-size: 14px; font-weight: 600; }


#add-address-modal .form-control { box-shadow: none; border-color: #eee; border-radius: 4px; height: 42px; padding: 8px 10px; font-size: 14px; color: #262626; }
#add-address-modal .form-control:focus,
#add-address-modal .form-control:hover { border-color: #c92910; }
#add-address-modal .form-control::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
#add-address-modal .custom-control { min-height: auto; padding-left: 24px;  line-height: 16px;  }
#add-address-modal .custom-control .custom-control-label { font-size: 12px; color: #969696 }
#add-address-modal .custom-control .custom-control-label:before,
#add-address-modal .custom-control .custom-control-label:after { top: 0; border-radius: 4px; width: 16px; height: 16px; }
#add-address-modal .Address-type-items { display: flex; flex-wrap: wrap; gap: 16px; }
#add-address-modal .Address-type-items .form-check { padding: 12px 16px; gap: 16px; margin: 0; }
#add-address-modal .Address-type-items .form-check .form-check-input { margin-right: 0; }
#add-address-modal .Address-type-items .form-check .form-check-label { margin-bottom: 0; cursor: pointer; }
#add-address-modal .form-submit { padding-top: 20px; border-top: 1px solid #eee; }
#add-address-modal .form-submit .btn { width: 128px; height: 40px; padding: 0 10px; line-height: 40px; background: #c92910; font-size: 14px; font-weight: 500; color: #fff; border-radius: 4px; }
#add-address-modal .form-submit .btn:hover { background: #b62710; }
@media only screen and (max-width: 767px) {
    #add-address-modal.modal.show .modal-dialog { top:60% }
}
@media only screen and (max-width: 576px) {
    #add-address-modal.modal.show .modal-dialog { top: 70% }
}

.cart-total-price { padding-bottom: 40px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.cart-total-price .cart-products-table { text-align: right; padding-bottom: 20px; line-height: 1.8;  }
.cart-total-price .total-price-unit .price { display: inline-block; }
.cart-total-price .total-price-unit .total-label { font-size: 14px; color: #969696; font-weight: 500; margin-right: 8px; }
.cart-total-price .total-price-unit .total-value { font-size: 16px; }
.checkout-modal .modal-content,
.checkout-modal .modal-content .modal-body{ position: revert; }
.checkout-modal.modal .btn-close { top: 20px; right: 20px; }
.product-checkout-wrapper .input-group { justify-content: flex-end; }
.product-checkout-wrapper .input-group a { color: #ff6f00; }
.product-checkout-wrapper .input-group .form-control { max-width: 480px; box-shadow: none;  border: 1px solid #eee; border-right: none; font-size: 14px; color: #262626; }
.product-checkout-wrapper .input-group .form-control:focus { border: 1px solid #eee; border-right: none; color: #969696; box-shadow: none; background-color: #fff; font-size: 14px !important; font-weight: 500; }
.product-checkout-wrapper .input-group .input-group-append .btn-primary { padding: 0; height: 46px; background: #ff6f00; min-width: 120px; border: none; font-size: 14px; font-weight: 500; }
.product-checkout-wrapper .order-btn { text-align: right; }
.product-checkout-wrapper .order-btn .btn-primary { padding: 0; height: 40px; background: #c92910; min-width: 128px; border: none; font-size: 14px; font-weight: 500; border-radius: 4px; }
.product-checkout-wrapper .order-btn .btn-primary:hover { transform: revert; box-shadow: none; background: #b62710; }

.address-card { border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; background: #fff; position: relative; }
.address-card:hover { border-color: #007bff; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); transform: translateY(-2px); }
.address-card.selected { border-color: #007bff; background: rgba(0, 123, 255, 0.05); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); }
.address-card input[type="radio"] { position: absolute; top: 15px; right: 15px; transform: scale(1.2); }
.address-type-badge { display: inline-block; padding: 4px 12px; background: #007bff; color: white; border-radius: 20px; font-size: 12px; font-weight: 500; text-transform: uppercase; margin-bottom: 8px; }
.address-name { font-weight: 600; color: #333; margin-bottom: 5px; font-size: 16px; }
.address-details { color: #666; line-height: 1.4; margin-bottom: 5px; }
.address-mobile { color: #007bff; font-weight: 500; }
.add-address-card { border: 2px dashed #dee2e6; border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background: #f8f9fa; margin-bottom: 15px; }
.add-address-card:hover { border-color: #007bff; background: rgba(0, 123, 255, 0.05); transform: translateY(-2px); }
.add-address-icon { width: 50px; height: 50px; border-radius: 50%; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 24px; transition: all 0.3s ease; }
.add-address-card:hover .add-address-icon { background: #0056b3; transform: scale(1.1); }
.add-address-text { color: #666; font-weight: 500; margin: 0; }
.add-address-card:hover .add-address-text { color: #007bff; }

@media (max-width: 768px) {
    .address-card, .add-address-card { margin-bottom: 10px; }
    .address-card { padding: 15px; }
}

/* estimation */
.estimation-wrapper { padding-top: 20px; border-top: 1px solid #eee; }
.estimation-wrapper .estimation-title { font-size: 14px; color: #969696; margin-bottom: 20px; font-weight: 500; }
.estimation-wrapper .estimation-form { padding: 20px; border: 1px solid #eee; border-radius: 8px; }
.estimation-wrapper .estimation-form .form-group { margin-bottom: 20px; }
.estimation-wrapper .estimation-form .form-group label { font-size: 14px; color: #262626; font-weight: 500; margin-bottom: 10px; }
.estimation-wrapper .estimation-form .form-group input { width: 100%; height: 40px; border-radius: 4px; border: 1px solid #ddd; background: #fff; padding: 0 10px; box-shadow: none; }


#suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.suggestion-item { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; }
.suggestion-item:hover { background-color: #f5f5f5; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item .country-sign {width: 20px;margin-right: 8px; flex-shrink: 0; }
.suggestion-item .country-sign img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.suggestion-item .country-name {font-size: 14px; color: #333; }

#clear-btn { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); background: none; border: none; font-size: 18px; color: #999; cursor: pointer; padding: 2px 6px; border-radius: 50%; transition: all 0.2s; }
#clear-btn:hover { background-color: #f0f0f0; color: #666; }
.calculation-result { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 24px; margin-top: 20px; }
.calculation-result h4 { color: #c92910; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.result-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef; }
.result-item:last-child { border-bottom: none; }
.result-item .label { font-weight: 500; color: #495057; }
.result-item .value { font-weight: 600; color: #c92910; font-size: 16px; }
.form-input-el.error { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.error-focus { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3), 0 0 10px rgba(255, 68, 68, 0.5) !important; border: 2px solid #ff4444 !important; border-radius: 4px; transition: all 0.3s ease;}
.submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.express-templates-result { background: #fff; border-radius: 8px; padding: 24px; margin-top: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.express-templates-result h4 { color: #333; font-size: 20px; font-weight: 600; margin-bottom: 20px; border-bottom: 2px solid #c92910; padding-bottom: 8px; }
.express-list { display: flex; flex-direction: column; gap: 16px; }
.express-card { border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; transition: all 0.3s ease; }
.express-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #c92910; }
.express-header { display: flex; align-items: center; padding: 16px 20px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; }
.express-icon { width: 40px; height: 40px; margin-right: 16px; flex-shrink: 0; }
.express-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.express-basic-info { flex: 1; margin-right: 16px; }
.express-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; }
.express-features { display: flex; gap: 16px; flex-wrap: wrap; }
.feature { font-size: 12px; color: #666; background: #e9ecef; padding: 2px 8px; border-radius: 12px; }
.express-price { text-align: right; flex-shrink: 0; }
.price-label { font-size: 12px; color: #666; display: block; }
.price-value { font-size: 18px; font-weight: 700; color: #c92910; }
.express-details { padding: 20px; background: #fff; }
.detail-section { margin-bottom: 16px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section h5 { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.detail-section p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; }
.billing-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.billing-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8f9fa; border-radius: 4px; font-size: 12px; }
.express-actions { padding: 12px 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; }
.btn-detail { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #666; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn-detail:hover { background: #c92910; border-color: #c92910; color: #fff; }
.no-express { text-align: center; padding: 40px 20px; color: #999; font-size: 16px; }

@media (max-width: 768px) {
    .express-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .express-icon { margin-right: 0; }
    .express-features { flex-direction: column; gap: 8px; }
    .billing-info { grid-template-columns: 1fr; }
}
/* my account */

/* meter menu bar */
.meter-menu-bar { padding: 24px 16px; background: #fff; border-radius: 8px; }
.meter-menu-bar .profile-avatar { text-align: center; margin-bottom: 40px; margin-top: 16px; }
.meter-menu-bar .profile-avatar .profile_image .avatar { height: 96px !important; width: 96px !important; }
.meter-menu-bar .profile-avatar .profile-name { display: flex; align-items: center; justify-content: center; }
.meter-menu-bar .profile-avatar .profile-user-name { font-size: 16px; }
.meter-menu-bar .profile-avatar .profile-user-vip { display: inline-block; padding: 4px; background: #c92910; transform: skewX(-12deg); margin-left: 5px; border-radius: 3px; font-size: 12px; color: #fff; font-weight: 600; line-height: 1; }
.meter-menu-bar .menu-item { box-shadow: none;  margin-bottom: 6px; }
.meter-menu-bar .menu-item.bg-light-color { background: rgba(201, 41, 16, 0.05);  }
.meter-menu-bar .menu-item:hover { background: #f6f6f6; }
.meter-menu-bar .menu-item a { display: flex; flex-wrap: wrap; align-items: center; flex-direction: row-reverse; justify-content: left; padding: 15px; }
.meter-menu-bar .menu-item .card-header { padding: 0; border-bottom: none; line-height: 1; color: #767676; }
.meter-menu-bar .menu-item .card-body { padding: 0; flex: revert; line-height: 1; width: 22px; height: 22px; margin-right: 16px; color: #969696; }
.meter-menu-bar .menu-item .card-body svg { fill: #969696; }
.meter-menu-bar .menu-item.bg-light-color .card-header,
.meter-menu-bar .menu-item.bg-light-color .card-body { color: #c92910; }
.meter-menu-bar .menu-item.bg-light-color .card-body svg { fill: #c92910; }
@media only screen and (max-width: 991px) {
    .meter-menu-bar { background: none; padding: 0; margin-bottom: 24px; }
    .meter-menu-bar .menu-outer-wrap { display: flex; gap: 10px; justify-content: space-between; }
    .meter-menu-bar .menu-item { margin-bottom: 0; width: 100px; min-width: 100px; height: 100px; min-height: 100px; text-align: center; }
    .meter-menu-bar .menu-item:hover { background: rgba(201, 41, 16, 0.05); }
    .meter-menu-bar .menu-item a { flex-direction: column; justify-content: center; padding: 10px; height: 100%; width: 100%; }
    .meter-menu-bar .menu-item .card-header { width: 100%; font-size: 12px; line-height: 1.4; height: 40px; }
    .meter-menu-bar .menu-item .card-body { margin-right: 0; }
}

/* profile */
.profile-wrap { box-shadow: none; border: none; border-top: 1px solid #eee; border-radius: 0; }
.profile-wrap .profile_image { margin: 20px 0; }
.profile-wrap .col-form-label { color: #262626; font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.profile-wrap .col-form-label span { color: #c92910;  }
.profile-wrap .form-control { width: 100%; height: 40px; border-radius: 4px; border: 1px solid #ddd; background: #fff; padding: 0 10px; box-shadow: none; }
.profile-wrap .form-control:not([type=file]):hover { border-color: #c92910;  }
.profile-wrap .form-control:not([type=file]):focus { border-color: #c92910;  }
.profile-wrap .form-control[type=file] { line-height: 40px; }
.profile-wrap .form-row { margin: 0 -10px; }
.profile-wrap .form-row .form-group { padding: 0 10px; }
.profile-wrap .profile-info-submit-btn { text-align: right; }
.profile-wrap .profile-info-submit-btn .submit_btn { background: #c92910; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 500; }
.profile-wrap .profile-info-submit-btn .submit_btn:hover { background: #b71900; }

/* orders */
.orders-section { border-top: 1px solid #eee; }
.orders-section .orders-card { margin-top: 20px; box-shadow: none; border-radius: 8px; border: 1px solid #eee; }
.orders-section .card-header { padding: 16px; background: #f8f8f8;  }
.orders-section .card-header .card-item-header { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.orders-section .card-header .card-item-header p { margin-bottom: 0; }
.orders-section .card-body { padding: 16px; }
.orders-section .card-body .media { display: flex;  }
.orders-section .card-body .media-body-item { border-bottom: 1px solid #eee; padding: 16px 0; min-height: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.orders-section .card-body .media-body-item h5 { font-size: 14px; color: #262626; font-weight: 600; max-width: 35%; line-height: 1.4; }
.orders-section .card-body .media-body-item .media-body-decs { display: flex; flex-direction: column; flex-wrap: wrap; max-width: 218px; }
.orders-section .card-body .media-body-item .media-body-decs p { margin: 0 5px; }
.orders-section .card-body .media-body-item img { width: 80px; height: 80px }
.orders-section .card-body .operate { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 24px 0; }
.orders-section .card-body .operate .visible p { margin: 10px 0 0; font-size: 14px; color: #262626; }
.orders-section .card-body .operate .visible p span { display: inline-block; }
.orders-section .card-body .operate .visible p .state { color: #c92910; }
.orders-section .card-body .btn-order-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.orders-section .card-body .btn { font-size: 14px; font-weight: 500; padding: 8px 18px; line-height: 22px; }
.orders-section .card-body .btn-order-info { border-radius: 4px; border: 1px solid #c92910;  color: #c92910; }
.orders-section .card-body .btn-order-number { border-radius: 4px; background: #c92910; color: #fff; }
.orders-section .card-body .btn-order-cancel { border-radius: 4px; background: #c3c3c3; color: #fff; }
.orders-section .card-body .btn-order-info:hover { background: #c92910; color: #fff; }
.orders-section .card-body .btn-order-number:hover { background: #b71900; }
.orders-section .card-body .btn-order-cancel:hover {background: #ababab; }
@media only screen and (max-width: 767px) {
    .orders-section .card-body .media-body-item { flex-wrap: wrap; }
    .orders-section .card-body .media-body-item h5 { max-width: 100%; }
    .orders-section .card-body .media-body-item .media-body-decs { flex-direction: revert; max-width: 100%; }
}
/* order-details */
.settings-tab-content { border-top: none; border-radius: 8px; }
.settings-tab-content hr { border-color: #dedede; }
.settings-tab-content .card-header { padding: 0; border-bottom: 1px solid #eee; }
.settings-tab-content .card-header .return-list-btn { border: 2px solid #c92910; border-radius: 4px; color: #c92910; }
.settings-tab-content .card-header .return-list-btn:hover { background: #c92910; color: #fff; }
.settings-tab-content .card-body { padding: 24px 16px; }
.settings-tab-content .card-body .media-body h5 { font-size: 16px; line-height: 1.2;  }
.settings-tab-content .card-body .img-fluid figure img { width: 180px !important; height: 180px !important; }
.settings-tab-content .card-body .schedule .process-wrapper { width: calc(100% - 180px); }
.settings-tab-content .card-body .schedule .process-wrapper.line .btn-circle { width: 32px; height: 32px; background: #c3c3c3; border-color: #c3c3c3; }
.settings-tab-content .card-body .schedule .process-wrapper.line .btn-circle .number { font-size: 18px; }
.settings-tab-content .card-body .schedule .process-wrapper.line .active .btn-circle { background: #3f78e0; border-color: #3f78e0; }
.settings-tab-content .card-body .schedule .process-wrapper.line h5 { font-size: 15px; }
.settings-tab-content .card-body .schedule .process-wrapper.line p { margin-top: 5px; }
.settings-tab-content .card-body .schedule #progressbar div.active:after { background: #c92910; }
@media (min-width: 992px) {
    .process-wrapper.line [class*=col-]:after { top: 16px; left: 44px; }
}
@media only screen and (max-width: 1024px) {
    .process-wrapper.line [class*=col-]:after { top: 16px !important; left: 44px; width: calc(100% - 32px) !important; }
    .settings-tab-content .card-body .schedule .process-wrapper { width: 100%; }

}
@media only screen and (max-width: 767px) {
    .process-wrapper.line [class*=col-]:last-child:after { border-top: 1px solid rgba(164, 174, 198, .2); content: ""; height: 1px; position: absolute; top: 16px ; left: 44px; width: calc(100% - 62px); }
    .settings-tab-content .card-body .schedule .process-wrapper { width: 100%; }
}

/* reward */
.top-banner { width: 100%; height: 434px; background: url("../img/users/reward_banner.png") no-repeat 50%; background-size: cover; border-radius: 8px; }
.top-banner-warp { width: 70%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 48px; }
.top-banner .top-banner-title { max-width: 588px; margin-bottom: 20px }
.top-banner .top-banner-content { width: 100%; margin-bottom: 20px; }
.top-banner .top-banner-desc { font-size: 32px; color: #fff; font-weight: 600; margin-bottom: 16px; }
.top-banner .top-banner-actions { display: flex; gap: 20px; flex-wrap: wrap; }
.top-banner .top-banner-actions .bnt-apply,
.top-banner .top-banner-actions .bnt-reward { width: 180px; height: 48px; padding: 6px 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; border-radius: 48px; border: none; }
.top-banner .top-banner-actions .bnt-apply { background: #000; color: #fff; }
.top-banner .top-banner-actions .bnt-reward { background: #fff; color: #262626; }
.top-banner .top-banner-actions .bnt-apply:hover { background: #262626 }
.top-banner .top-banner-actions .bnt-reward:hover {background: #dedede; }
@media only screen and (max-width: 767px) {
    .top-banner-warp { width: 100%; padding: 32px 24px; }
    .top-banner .top-banner-content { text-align: left; }
    .top-banner .top-banner-desc { font-size: 24px; }
    .top-banner .top-banner-actions .bnt-apply,
    .top-banner .top-banner-actions .bnt-reward { width: 168px; height: 40px; font-size: 16px; }
}
.operating-instructions { border-top: 1px solid #eee; padding: 40px 0 20px 0; border-bottom: 1px solid #eee; margin-bottom: 24px; }
.operating-instructions .operation-step { margin: 0 -10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; }
.operating-instructions .operation-step:before { content: ''; position: absolute; left: 10%; right: 10%; width: 80%; top: 32px; border-top: 1px dashed #c92910; z-index: 9; }
.operating-instructions .operation-step .step-item { width: 20%; padding: 0 10px; display: flex;  flex-direction: column; align-items: center; text-align: center; }
.operating-instructions .operation-step .step-item .step-item-icon { width: 64px; height: 64px; border-radius: 50%; background-color: #c92910; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10;  }
.operating-instructions .operation-step .step-item .step-item-text { margin: 10px 0; font-size: 14px; font-weight: 600; min-height: 42px; }
.operating-instructions .operation-step .step-line { flex: 1; border-top: 1px dashed #c92910; height: 1px; display: none }
@media only screen and (max-width: 767px) {
    .operating-instructions .operation-step { gap: 20px; margin: 0; }
    .operating-instructions .operation-step:before { content: none; }
    .operating-instructions .operation-step .step-item { width: 100%; flex-direction: revert; gap: 20px; padding: 0; }
    .operating-instructions .operation-step .step-item .step-item-icon { width: 48px; height: 48px; }
    .operating-instructions .operation-step .step-item .step-item-text { min-height: auto; }
    .operating-instructions .operation-step .step-line { display: block; }
}

.reward-won-list { border: 1px solid #eee; border-radius: 8px; }
.reward-won-list .reward-won-list-header { padding: 24px 16px; background-color: #c92910; color: #fff; text-align: center; border-radius: 8px 8px 0 0; }
.reward-won-list .reward-won-list-title { font-size: 20px; }
.reward-won-list .reward-won-list-desc { font-size: 14px }
.reward-won-list .reward-won-list-body { padding: 12px 16px; }
.reward-won-list .swiper-slide { height: 180px; overflow: hidden; position: relative; }
.reward-won-list .swiper-slide .swiper-slide-content {  display: flex; flex-wrap: wrap; transition: transform 0.5s ease; }
.reward-won-list .swiper-slide .swiper-slide-content .user-item { height: 45px; line-height: 45px; width: 33.3333%; padding: 0 10px; box-sizing: border-box; }
.reward-won-list .swiper-slide .swiper-slide-content .user-item .user-reward { font-size: 12px; color: #343434; font-weight: 500; }
@media only screen and (max-width: 767px) {
    .reward-won-list .swiper-slide .swiper-slide-content .user-item { width: 50%; }
}
@media only screen and (max-width: 413px) {
    .reward-won-list .swiper-slide .swiper-slide-content .user-item { width: 100%; }
}
.reward-description-content { border-top: 1px solid #eee; padding: 20px 0; }
.reward-description-content .description-item-title { font-size: 14px; color: #262626; font-weight: 600; margin-bottom: 10px; }
.reward-description-content p { font-size: 13px; color: #767676; line-height: 1.5; margin-bottom: 5px; }

.apply-reward-item { margin-top: 24px; }
.apply-reward-item .section-item-title { font-size: 14px; color: #262626; font-weight: 500; margin-bottom: 12px; }
.apply-reward-item .payload-item-link .n-input_input { height: 34px; width: 100%; border: 1px solid #eee; border-radius: 4px; padding: 0 10px; color: #262626; font-size: 14px; transition: all .3s; }
.apply-reward-item .payload-item-link .n-input_input:focus { border-color: #c92910; outline: none; box-shadow: none; }
.apply-reward-item .payload-item-link .n-input_input:hover { border-color: #c92910;  }
.apply-reward-item .payload-item-link .n-input_input::-webkit-input-placeholder { color: #969696; font-size: 14px; }
.apply-reward-item .social-media-option { display: flex; flex-wrap: wrap; gap: 24px; }
.apply-reward-item .custom-radio { display: flex; align-items: center; }
.apply-reward-item .custom-radio .custom-radio_icon { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #dedede; background: #fff; display: flex; justify-content: center; align-items: center; }
.apply-reward-item .custom-radio .custom-radio_icon svg { display: none; }
.apply-reward-item .custom-radio.checked .custom-radio_icon { background: #c92910; border-color: #c92910; }
.apply-reward-item .custom-radio.checked .custom-radio_icon svg { display: block; }
.apply-reward-item .custom-radio .custom-radio_label { margin-left: 8px; font-size: 14px; font-weight: 500; }
.apply-reward-item .desc-hint { padding: 8px 10px; margin-bottom: 16px; font-size: 12px; line-height: 1; color: #664d03; background-color: #fff3cd; border: 1px solid #ffe69c; border-radius: 3px; }
.apply-reward-item .desc-content h5,
.apply-reward-item .desc-content p { font-size: 12px; color: #262626; margin-bottom: 12px; line-height: 1.5; }
.apply-reward-item .desc-content p a:hover { color: #c92910; }

#reward-List-modal .modal-header { border-bottom: none; }
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading { display: none; }
.reward-history-table { border: 1px solid #eee; border-radius: 8px; }
.reward-history-table table { margin-bottom: 0; }
.reward-history-table thead { background: #f8f8f8;  }
.reward-history-table thead th { border: none; box-shadow: none; border-right: 1px solid #eee; font-size: 14px; color: #535353; font-weight: 500; text-align: center; padding: 16px 8px; }
.reward-history-table thead th:last-child { border-right: none }
.reward-history-table tbody { border: none !important; padding: 10px 8px; }
.reward-history-table tbody tr { border-bottom: 1px solid #eee; background: none;  }
.reward-history-table tbody tr:last-child { border-bottom: none; }
.reward-history-table tbody td {  padding: 16px 8px; vertical-align: middle; font-size: 14px; color: #262626; font-weight: 500; border: none; box-shadow: none; text-align: center; border-right: 1px solid #eee; }
.reward-history-table tbody td:last-child { border-right: none }

/* vip */
.vip-top-wrapper { width: 100%; background: url("../img/users/vip-membership-bg.png") no-repeat 50%; background-size: cover; border-radius: 8px; padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.vip-top-wrapper .user-vip-info { background: #fff; display: flex; flex-direction: column; align-items: center; padding: 24px 16px; border-radius: 8px; box-shadow: 0 5px 10px 1px #0000000d; width: 210px; height: 210px; }
.user-vip-info .user-avatar .avatar { width: 58px !important; height: 58px !important; }
.user-vip-info .user-name .profile-user-name { display:inline-block; margin-top: 16px; font-size: 15px; color: #262626; font-weight: 600; }
.user-grade-info { display: flex; width: 100%; gap: 12px; margin-top: 20px;  justify-content: space-between; }
.user-grade-info .user-grade-info-item { text-align: center;}
.user-grade-info .user-grade-info-item .grade-value { font-size: 20px; font-weight: 700; color: #c92910; }
.user-grade-info .user-grade-info-item .grade-label { font-size: 13px; color: #969696; }
.vip-grade-info { width: calc( 100% - 242px ); }
.vip-grade-info .progress-info-title { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; }
.vip-grade-info .progress-info-title h2 { font-size: 22px; font-weight: 600; margin-bottom: 0; }
.vip-grade-info .progress-info-title .progress-info-content { font-size: 12px; color: #969696; }
.vip-grade-info .vip-progress .badge { border-radius: 4px; background:  #c92910; line-height: 12px; }
.vip-grade-info .vip-progress .progress { height: 12px; border-radius: 4px; }
.vip-grade-info .vip-progress .progress-bar { font-size: 0.525rem; height: 12px; line-height: 12px; border-radius: 12px; background: #c92910; font-weight: 400; }
.vip-grade-welfare.card { box-shadow: none; }
.vip-grade-welfare .card-header { padding: 0; }
.vip-grade-welfare .card-body { padding: 20px 0; }
@media only screen and (max-width: 767px) {
    .vip-top-wrapper .user-vip-info ,
    .vip-grade-info { width: 100%; }

}
@media only screen and (max-width: 576px) {
    .vip-grade-info .vip-progress small:last-child { display: none; }
}


.table-responsive { border: 1px solid #eee; border-radius: 8px; overflow: hidden; overflow-x: scroll; }
.table-responsive .table-striped { margin-bottom: 0; min-width: 1000px; }
.table-responsive .table-striped thead { background: #f8f8f8; padding: 10px 8px; }
.table-responsive .table-striped thead th { border: none; box-shadow: none; font-size: 14px; color: #262626; font-weight: 600; padding: 20px 10px; }
.table-responsive .table-striped thead th:first-child { padding-left: 20px; }
.table-responsive .table-striped thead th:last-child { padding-right: 20px; }
.table-responsive .table-striped tbody { border: none !important; padding: 10px 8px; }
.table-responsive .table-striped tbody tr { border-bottom: 1px solid #eee; background: none;  }
.table-responsive .table-striped tbody tr:last-child { border-bottom: none; }
.table-responsive .table-striped tbody td { padding: 20px 10px; vertical-align: middle; font-size: 14px; color: #262626; font-weight: 500; border: none; box-shadow: none; }
.table-responsive .table-striped tbody td:first-child { padding-left: 20px; }
.table-responsive .table-striped tbody td:last-child { padding-right: 20px; }

.vip-growth-desc .desc-content { box-shadow: none; border: none; }
.vip-growth-desc .card-header { background: #c92910; padding: 16px 24px; }
.vip-growth-desc .card-header h3 {  color: #fff; font-size: 20px; }
.vip-growth-desc .card-body { border: 1px solid #eee; border-top: none; padding: 12px 24px; border-radius: 0 0 8px 8px; }
.vip-growth-desc .card-body h6 { font-size: 16px; margin-top: 20px;  }
.vip-growth-desc .card-body .list-unstyled li { padding: 6px 0; }
.vip-growth-desc .card-body .list-unstyled li i { width: 14px; text-align: center; }


/* refer and earn */
.recommend-page-main { padding-bottom: 24px; border-bottom: 1px solid #eee; }
.recommend-banner .banner-images { height: 140px; border-radius: 8px; overflow: hidden; }
.recommend-banner .banner-images img { width: 100%; height: 100%; object-fit: cover; }
.recommend-process-wrapper { margin-top: 20px; width: 100%; padding: 0 88px; display: flex; align-items: center; }
.recommend-process-wrapper .process-item { position: relative; display: flex; align-items: center; justify-content: center;  }
.recommend-process-wrapper .process-item .process-item-number { width: 20px; height: 20px; border-radius: 50%; background-color: #fcf4f2; color: #c92910; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.recommend-process-wrapper .process-item .process-item-desc { width: max-content; position: absolute; top: 25px; color: #969696; font-size: 12px; }
.recommend-process-wrapper .process-line { width: 50%; border: 1px dashed #c92910; }
.invited-input-wrapper { margin-top: 48px; padding: 0 88px; }
.invited-input-wrapper .invited-input { width: 100%; height: 40px; border-radius: 40px; border: 1px solid #dedede; background: #fafafc; cursor: not-allowed; padding: 0 15px; position: relative; }
.invited-input-wrapper .affiliate_border { border: none; width: 100%; height: 100%; display: flex; align-items: center; }
.invited-input-wrapper .affiliate_border .referral-code { color: #969696; }
.invited-input-wrapper .copy-button { width: 128px; height: 40px; border-radius: 40px; position: absolute; right: 0; top: 0; background: #c92910; font-weight: 500; color: #fff; transition: all .3s; }
.invited-input-wrapper .copy-button:hover { background: #b62710; }
.invited-input-wrapper .copy-button:active { outline: none; box-shadow: none; border: none; background-color: #b62710; color: #fff; }
.invited-input-wrapper .invited-input-desc { margin-top: 8px; line-height: 1; color: #c27d37; font-size: 12px; }
@media only screen and (max-width: 767px) {
    .recommend-process-wrapper { flex-direction: column; align-items: revert; padding: 0; gap: 12px; }
    .recommend-process-wrapper .process-item { justify-content: left; gap: 12px; }
    .recommend-process-wrapper .process-item .process-item-desc { width: auto; position: revert; }
    .recommend-process-wrapper .process-line { width: 100%; }
    .invited-input-wrapper { margin-top: 24px; padding: 0; }
    .invited-input-wrapper .affiliate_border .referral-code { font-size: 12px; }
}
@media only screen and (max-width: 576px) {
    .invited-input-wrapper .invited-input { height: auto; border-radius: 0; border: none; background: transparent; padding: 0; }
    .invited-input-wrapper .affiliate_border { height: 48px; border-radius: 4px;  background: #f3f3f3; padding: 0 10px; }
    .invited-input-wrapper .copy-button { position: revert; border-radius: 4px; margin-top: 12px; height: 38px; }
}

.my-affiliate-wrapper { margin-top: 24px; }
.affiliate-content { background: #fcf4f2; padding: 24px 16px; border-radius: 8px; display: flex; gap: 24px; width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.my-affiliate-left { width: 30%; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.my-affiliate-left .affiliate-amount { font-weight: 700; font-size: 24px; line-height: 1; color: #262626; }
.my-affiliate-left .affiliate-amount-desc { font-size: 14px; line-height: 1; color: #969696; }
.my-affiliate-left .affiliate-action { width: 100%; display: flex; justify-content: space-around; }
.my-affiliate-left .affiliate-action .btn { width: 128px; height: 38px; font-size: 14px; font-weight: 500; border: 1px solid transparent; border-radius: 4px; transition: all .3s; }
.my-affiliate-left .affiliate-action .btn-record { border-color: #c92910; color: #c92910; }
.my-affiliate-left .affiliate-action .btn-claim { background: #c92910; color: #fff; }
.my-affiliate-left .affiliate-action .btn-record:hover,
.my-affiliate-left .affiliate-action .btn-claim:hover { opacity: .8; }
.my-affiliate-right { width: 100%; }
.my-affiliate-right .affiliate-detail { display: flex; flex-wrap: wrap; padding: 20px 0; background: #fff; border-radius: 8px; }
.my-affiliate-right .affiliate-detail .affiliate-detail-item { width: 33.33333%; padding: 0 10px; border-right: 1px solid #eee; text-align: center; }
.my-affiliate-right .affiliate-detail .affiliate-detail-item:last-child { border-right: 0; }
.my-affiliate-right .affiliate-detail .affiliate-detail-item .item-title { font-weight: 700; font-size: 18px; line-height: 1.5; }
.my-affiliate-right .affiliate-detail .affiliate-detail-item .info-pointer { font-size: 14px; color: #969696; line-height: 1.8; }
.my-affiliate-right .affiliate-detail .affiliate-detail-item .info-pointer a { color: #262626; }
@media only screen and (max-width: 576px) {
    .my-affiliate-right .affiliate-detail .affiliate-detail-item { width: 100%; border-right: none; border-bottom: 1px solid #eee; margin-bottom: 16px; padding-bottom: 16px; display: flex; justify-content: space-between; flex-flow: row-reverse; }
    .my-affiliate-right .affiliate-detail .affiliate-detail-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
}

.my-privilege-wrapper { margin-top: 24px; }
.my-privilege-wrapper .privilege-title { display: flex; align-items: flex-end; margin-bottom: 24px; }
.my-privilege-wrapper .privilege-title .label-title { margin-bottom: 0; }
.my-privilege-wrapper .privilege-title .point-wrapper { font-size: 14px; font-weight: 500; margin-left: 24px; line-height: 1; }
.my-privilege-wrapper .privilege-title .point-wrapper .point-point { color: #c92910; }
.my-privilege-wrapper .privilege-title .point-icon { font-size: 10px; font-weight: 200; margin-left: 12px; line-height: 15px; color: #676767; text-align: center; position: relative; cursor: pointer; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #969696 }
.my-privilege-wrapper .point-icon-wrapper { position: absolute; transform:  translateY(-100%) translateX(calc(-50% + 12px)); display: none; opacity: 0; transition: all .3s; z-index: 9; }
.my-privilege-wrapper .point-icon-content { position: relative; background: #262626; border-radius: 4px; color: #fff; font-size: 13px; text-align: left; font-weight: 500; line-height: 1.5; width: 300px; padding: 12px; margin-bottom: 10px; box-shadow: 0 10px 20px 1px rgba(0, 0, 0, .1); }
.my-privilege-wrapper .point-icon-content .point-arrow { position: absolute; top: calc( 100% - 4px ); width: 8px; height: 8px; background: #262626; transform: translateX(calc(8px / -2)) rotate(45deg); left: calc(50% - 6px);  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12); }
.my-privilege-wrapper .privilege-title .point-icon:hover { color: #fff; background: #c92910; border-color: #c92910; }
.my-privilege-wrapper .privilege-title .point-icon:hover .point-icon-wrapper { display: block; opacity: 1;  transform:  translateY(calc(-100% - 16px)) translateX(calc(-50% + 12px)); }

.my-privilege-wrapper .privilege-table { display: flex; flex-wrap: wrap; border: 1px solid #eee; border-radius: 8px; }
.my-privilege-wrapper .privilege-table-item { border-right: 1px solid #eee; width: 20%; }
.my-privilege-wrapper .item-header { display: flex; height: 60px; justify-content: center; align-items: center; padding: 10px; background: #f8f8f8; border-bottom: 1px solid #eee; }
.my-privilege-wrapper .item-header .item-header-title { font-size: 14px; color: #262626; }
.my-privilege-wrapper .item-body { padding: 24px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.my-privilege-wrapper .item-body .privilege-name,
.my-privilege-wrapper .item-body .privilege-value { font-size: 13px; color: #969696; }
.my-privilege-wrapper .item-body .privilege-rate { font-size: 18px; color: #262626; font-weight: 600; }
.my-privilege-wrapper .privilege-table-item.active .item-header { background: #fcf4f2; border-color: transparent;  }
.my-privilege-wrapper .privilege-table-item.active .item-header .item-header-title { color: #c92910; }
.my-privilege-wrapper .privilege-table-item.active .item-body { background: #fcf4f2; }
@media only screen and (max-width: 767px) {
    .my-privilege-wrapper .privilege-table-item { width: 33.3333% }
    .my-privilege-wrapper .privilege-table-item:last-child,
    .my-privilege-wrapper .privilege-table-item:nth-last-child(2){ width: 50% }
}
@media only screen and (max-width: 576px) {
    .my-privilege-wrapper .privilege-table-item { width: 50% }
    .my-privilege-wrapper .privilege-table-item:last-child { width: 100% }
}
.affiliate-faq-wrapper { margin-top: 24px; }
.affiliate-faq-wrapper .affiliate-faq-content { border: 1px solid #eeeeee; border-radius: 8px; padding: 0 16px; }
.affiliate-faq-wrapper .collapse-item { border-bottom: 1px solid #eee; }
.affiliate-faq-wrapper .collapse-item:last-child {  border-bottom: none;  }
.affiliate-faq-wrapper .collapse-item .collapse-item-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.affiliate-faq-wrapper .collapse-item .collapse-item-title { display: flex; align-items: center; gap: 10px; }
.affiliate-faq-wrapper .collapse-item-header { cursor: pointer; position: relative; }
.affiliate-faq-wrapper .collapse-item-header .collapse-item-expand i { font-size: 18px; color: #acacac; transition: all .3s; }
.affiliate-faq-wrapper .collapse-item-header.active .collapse-item-expand i {  transform: rotate(180deg);  }
.collapse-item-body {  max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.affiliate-faq-wrapper .collapse-content-inner { padding-bottom: 16px; }
.affiliate-faq-wrapper .collapse-content-inner p { font-size: 12px; color: #676767; line-height: 1.6; margin-bottom: 0; }

#reward-claim-modal .modal-header { margin-bottom: 0; }
.affiliate-reward-apply .apply-tips { padding: 8px; border-radius: 4px; background-color: #c27d371a; color: #c27d37; margin-bottom: 24px; line-height: 1; }
.affiliate-reward-apply .affiliate-modal-title { font-size: 14px; color: #262626; margin-bottom: 16px; }
.affiliate-reward-apply .form-category { display: flex; flex-wrap: wrap; gap: 16px; }
.affiliate-reward-apply .form-category .custom-tab { width: 160px; height: 40px; padding: 0 20px; display: flex; align-items: center;  justify-content: center; background-color: #f6f6f6; cursor: pointer; border-radius: 4px; color: #262626; font-size: 14px; line-height: 1.4; }
.affiliate-reward-apply .form-category .custom-tab.active { border: 1px solid #c92910; color: #c92910; background-color: #fcf4f2; }
.affiliate-reward-apply .tab-account-info { display: none; }
.affiliate-reward-apply .tab-account-info:first-child { display: block; }

.affiliate-reward-apply .account-setting-wrapper { margin-top: 16px; background: #29b6ff1a; border-radius: 4px; padding: 8px; color: #29b6ff; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.affiliate-reward-apply .account-setting-wrapper .btn-add-card { height: 24px; padding: 6px 8px; font-size: 12px; background: #29b6ff; color: #fff; border-radius: 4px; font-weight: 500; }
.affiliate-reward-apply .account-setting-wrapper .btn-add-card:hover { opacity: .8; }
.affiliate-reward-apply .account-input-wrapper .account-input-item { margin-top: 24px;  }
.affiliate-reward-apply .account-input-item .account-title { margin-bottom: 6px; font-size: 14px; color: #262626; }
.affiliate-reward-apply .account-input-item .account-title span { color: #c92910; }
.affiliate-reward-apply .account-input-item .account-input_input { position: relative; }
.affiliate-reward-apply .account-input-item .account-input_input .account-input { width: 100%; height: 34px; border: 1px solid #eee; padding: 0 12px; border-radius: 4px; transition: all .3s; }
.affiliate-reward-apply .account-input-item .account-input_input .account-input.n-input-text { padding: 0 180px 0 12px; }
.affiliate-reward-apply .account-input-item .account-input_input .account-input:hover { border: 1px solid #c92910; }
.affiliate-reward-apply .account-input-item .account-input_input .account-input:focus { outline: none; border: 1px solid #c92910; box-shadow: none; }
.affiliate-reward-apply .account-input-item .account-input_input .input_suffix { position: absolute; height: 34px; top: 0; right: 10px; font-size: 14px; line-height: 34px; }
.affiliate-reward-apply .account-input-item .account-input_input .input_suffix span { margin-left: 5px; color: #c92910; }
.affiliate-reward-apply .apply-action { display: flex; justify-content: flex-end; gap: 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid #eee; }
.affiliate-reward-apply .apply-action .btn { width: 128px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 4px; border: 1px solid transparent; font-weight: 500; font-size: 14px; }
.affiliate-reward-apply .apply-action .modal-close { border-color: #dedede; color: #676767;  }
.affiliate-reward-apply .apply-action .submit-info { background: #c92910; color: #fff; }
.affiliate-reward-apply .apply-action .modal-close:hover { border-color: #c92910; color: #c92910;  }
.affiliate-reward-apply .apply-action .submit-info:hover { background: #b62710; }

.modal-pagination { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 20px; }
.modal-pagination .pages-wrapper { display: flex; gap: 5px }
.modal-pagination .pager-item { width: 32px; height: 32px; background: #fff; border-radius: 4px; border: 1px solid #dedede; padding: 0 5px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #565656; cursor: pointer; transition: all .3s; }
.modal-pagination .previous-page,
.modal-pagination .next-page { font-size: 16px; }
.modal-pagination .pager-item:hover { border-color: #c92910; color: #c92910;  }
.modal-pagination .pager-item.cur-status { background: #c92910; color: #fff; }
.modal-pagination .pager-item.no-clicks { cursor: not-allowed; background: #f8f8f8; border-color: #eee }

.reward-invited-banner { background: url("../img/users/reward-invited-banner.png") no-repeat 50%; background-size: cover; border-radius: 8px; height: 108px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.reward-invited-banner .banner-info-item { width: 50%; padding: 0 12px; text-align: center; color: #fff; }
.reward-invited-banner .banner-info-item .info-item-value { font-size: 22px; }
.reward-invited-banner .banner-info-item .info-item-title { font-size: 14px; margin-top: 8px; }
.modal-content .modal-header .modal-title .label-desc { display: inline-block; margin-left: 16px; color: #c27d37; font-weight: 500; font-size: 12px; line-height: 1; }
@media only screen and (max-width: 991px) {
    .modal-content .modal-header .modal-title .label-desc { margin-left: 0; }
}

/* user center */
.user-info .profile_image .avatar { height: 80px !important; width: 80px !important; }
.user-info .username-wrapper { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.user-info .username-wrapper .user-name {  font-size: 16px; color: #262626; font-weight: 500; }
.user-info .username-wrapper .user-vip { display: inline-block; padding: 4px; background: #c92910; transform: skewX(-12deg);  border-radius: 3px; font-size: 12px; color: #fff; font-weight: 600; line-height: 1; }
.user-info .user-id-email { margin-top: 28px; display: flex; align-items: center; justify-content: space-around; gap: 12px; font-size: 12px; color: #565656; font-weight: 500; }
.user-info .user-id-email a i { font-size: 16px; color: #565656; font-weight: 500; margin-left: 5px; }
.user-info .user-id-email a:hover i { color: #c92910; }

.balance-credits .balance-credits-item { height: 100%; }
.balance-credits .balance-info { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 60%; border-bottom: 1px solid #eee; }
.balance-credits .balance-info .balance-info-value span { font-size: 22px; font-weight: 600; color: #262626; }
.balance-credits .balance-info .balance-info-label { font-size: 16px; font-weight: 500; color: #262626; display: flex; align-items: center; }
.balance-credits .balance-info .balance-info-label i {  font-size: 18px; color: #262626; margin-right: 5px; }
.balance-credits .balance-item-btn { height: 40%; }
.balance-credits .balance-item-btn .button-group { display: flex; justify-content: center; align-items: flex-end; gap: 12px;  height: 100%; padding-top: 20px;  }
.balance-credits .balance-item-btn .button-group .btn { width: 128px; height: 38px; border-radius: 4px; font-size: 14px; font-weight: 500; border: 1px solid transparent; padding: 0 10px; display: flex; align-items: center; justify-content: center; }
.balance-credits .balance-item-btn .button-group .btn-add-money { border-color: #c92910; color: #c92910; }
.balance-credits .balance-item-btn .button-group .btn-withdraw { background: #c92910; color: #fff; }
.balance-credits .balance-item-btn .button-group .btn:hover { opacity: .8; }

.coupon-exchange { margin-bottom: 24px; }
.coupon-exchange .coupon-input { max-width: 640px; width: 100%; height: 40px; position: relative; }
.coupon-exchange .coupon-input .coupon-input_input { width: 100%; height: 40px; padding: 0 140px 0 12px; font-size: 14px; color: #262626; border: 1px solid #eee; border-radius: 40px; transition: all .3s; }
.coupon-exchange .coupon-input .coupon-input_input:focus { outline: none; border-color: #c92910; }
.coupon-exchange .coupon-input .coupon-input_input::-webkit-input-placeholder { color: #969696; }
.coupon-exchange .coupon-input .coupon-input_btn { position: absolute; top: 0; right: 0; width: 128px; height: 40px; padding: 0 10px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; color: #fff; background: #c92910; border: none; border-radius: 40px; }
.coupon-exchange .coupon-input .coupon-input_btn:hover { background: #b62710; }

.coupon-content .coupon-tabs { border-bottom: 1px solid #eee; display: flex; gap: 32px; align-items: center; }
.coupon-content .coupon-tabs .coupon-tab { padding-bottom: 10px; border-bottom: 2px solid transparent; font-size: 14px; color: #262626;  cursor: pointer; line-height: 1; }
.coupon-content .coupon-tabs .coupon-tab.active { border-color: #c92910; color: #c92910; }
.coupon-content .coupon-tab-wrapper { padding-top: 20px; }
.coupon-content .coupon-tab-wrapper .coupon-tab-item { display: none; }
.coupon-content .coupon-tab-wrapper .coupon-tab-item:first-child { display: block; }
.coupon-content .coupon-tab-wrapper .coupon-tab-item .no-data { height: 120px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; }
.coupon-content .coupon-validity { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.coupon-content .coupon-validity .coupon-item { padding: 10px; width: 33.3333%; }
.coupon-content .coupon-item-content { position: relative; border-radius: 8px; overflow: hidden; }
.coupon-content .coupon-item-content:after,
.coupon-content .coupon-item-content:before { width: 24px; height: 24px; content: ''; position: absolute; top: 122px; border-radius: 50%; background: #fff;  }
.coupon-content .coupon-item-content:after { right: -12px; }
.coupon-content .coupon-item-content:before { left: -12px; }
.coupon-content .coupon-item-content .coupon-top { background: #fcf4f2; height: 136px; text-align: center; padding: 24px 16px;  border-bottom: 2px dashed #c92910; }
.coupon-content .coupon-item-content .coupon-top .c-type-name { font-size: 14px; color: #c92910; font-weight: 600; line-height: 1; margin-bottom: 8px; }
.coupon-content .coupon-item-content .coupon-top .c-type-limit { font-size: 12px; color: #c92910; font-weight: 500; line-height: 1.4; }
.coupon-content .coupon-item-content .coupon-top .coupon-price { font-size: 16px; color: #c92910; font-weight: 600; line-height: 1; margin-bottom: 20px; }
.coupon-content .coupon-item-content .coupon-top .coupon-price span { font-size: 28px; line-height: 1; margin-left: 5px; }
.coupon-content .coupon-item-content .coupon-bottom { background: #f8f8f8; border-top: none; padding: 24px 16px; text-align: center; }
.coupon-content .coupon-item-content .coupon-bottom .rule-item { font-size: 14px; color: #262626; margin-bottom: 8px; }
.coupon-content .coupon-item-content .coupon-bottom .rule-item span {  padding: 4px 16px; font-size: 12px; line-height: 1; color: #664d03; background-color: #fff3cd; border-radius: 3px; }
.coupon-content .coupon-item-content .coupon-bottom .c-use-btn { width: 128px; height: 38px; border-radius: 36px; background: #c92910; color: #fff; font-size: 14px; font-weight: 500; padding: 0 12px; margin-top: 20px; }
.coupon-content .coupon-item-content .coupon-bottom .c-use-btn:hover { background: #b62710; }

.coupon-content .coupon-used { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.coupon-content .coupon-used .coupon-item { padding: 10px; width: 33.3333%; }
.coupon-content .coupon-used .coupon-item-content .coupon-top { background: #c3c3c3; border-color: #fff; }
.coupon-content .coupon-used .coupon-item-content .coupon-top .c-type-name,
.coupon-content .coupon-used .coupon-item-content .coupon-top .c-type-limit,
.coupon-content .coupon-used .coupon-item-content .coupon-top .coupon-price { color: #fff;  }
.coupon-content .coupon-used .coupon-item-content .coupon-bottom .rule-item { color: #969696; }
.coupon-content .coupon-used .coupon-item-content .coupon-bottom .rule-item span {  color: #969696; background-color: #dedede; }
.coupon-content .coupon-used .coupon-item-content .coupon-bottom .c-use-btn { cursor: not-allowed; background: #c3c3c3; }

.coupon-content .coupon-expired { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.coupon-content .coupon-expired .coupon-item { padding: 10px; width: 33.3333%; }
.coupon-content .coupon-expired .coupon-item-content .coupon-top { background: #c3c3c3; border-color: #fff; }
.coupon-content .coupon-expired .coupon-item-content .coupon-top .c-type-name,
.coupon-content .coupon-expired .coupon-item-content .coupon-top .c-type-limit,
.coupon-content .coupon-expired .coupon-item-content .coupon-top .coupon-price { color: #fff;  }
.coupon-content .coupon-expired .coupon-item-content .coupon-bottom .rule-item { color: #969696; }
.coupon-content .coupon-expired .coupon-item-content .coupon-bottom .rule-item span {  color: #969696; background-color: #dedede; }
.coupon-content .coupon-expired .coupon-item-content .coupon-bottom .c-use-btn { cursor: not-allowed; background: #c3c3c3; }
@media only screen and (max-width: 767px) {
    .coupon-content .coupon-validity .coupon-item,
    .coupon-content .coupon-used .coupon-item,
    .coupon-content .coupon-expired .coupon-item { width: 50% }
}
@media only screen and (max-width: 576px) {
    .coupon-content .coupon-tabs { overflow: hidden; overflow-x: scroll; gap: 12px; }
    .coupon-content .coupon-tabs .coupon-tab { min-width: 140px; text-align: center; }
    .coupon-content .coupon-validity .coupon-item,
    .coupon-content .coupon-used .coupon-item,
    .coupon-content .coupon-expired .coupon-item { width: 100% }
    .coupon-content .coupon-item-content { display: flex; height: 100%; }
    .coupon-content .coupon-item-content .coupon-top { width: 50%; height: 100%; text-align: left; border-bottom: none; border-right:  2px dashed #c92910; display: flex; flex-direction: column; justify-content: space-between; }
    .coupon-content .coupon-item-content .coupon-bottom { width: 50%; padding: 24px 12px; }
    .coupon-content .coupon-item-content:after,
    .coupon-content .coupon-item-content:before { transform: translateX(-50%); left: 50%; }
    .coupon-content .coupon-item-content:before { top: -12px; }
    .coupon-content .coupon-item-content:after { right: revert; bottom: -12px; top: auto; }
}


.amount-form-wrapper { margin-top: 24px; }
.amount-form-wrapper .amount-form-input { margin-bottom: 20px; position: relative; }
.amount-form-wrapper .amount-form-input .form-control { width: 100%; height: 40px; box-shadow: none; border: 1px solid #eee; border-radius: 4px; color: #262626; font-size: 14px; padding: 0 80px 0 12px;  -moz-appearance: textfield; }
.amount-form-wrapper .amount-form-input .form-control:focus { border-color: #c92910; }
.amount-form-wrapper .amount-form-input .form-control::-webkit-inner-spin-button,
.amount-form-wrapper .amount-form-input .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.amount-form-wrapper .amount-form-input .conversion { position: absolute; height: 40px; line-height: 40px; padding: 0 12px; right: 0; bottom: 0; }

.payment-method-wrapper { margin-top: 24px; }
.payment-method-wrapper .shipped-details ul { display: flex; flex-wrap: wrap; gap: 20px; }
.payment-method-wrapper .shipped-details li { display: flex; align-items: center; width: calc( 50% - 10px ); gap: 12px; border: 1px solid #eee; border-radius: 8px; padding: 16px; transition: all .3s; cursor: pointer; }
.payment-method-wrapper .shipped-details li:hover { border-color: #c92910; }
.payment-method-wrapper .shipped-details li.selected { border-color: rgba(201, 41, 16, 0.2); background: rgba(201, 41, 16, 0.02); }
.payment-method-wrapper .shipped-details .tab_border { line-height: 1; }
.payment-method-wrapper .shipped-details .tab_border label { margin: 0;  }
.payment-method-wrapper .shipped-details .tab_border img { width: 24px; height: auto; border-radius: 3px; }

.withdrawal-form-wrapper { margin-top: 24px; }
.withdrawal-form-wrapper .withdrawal-form-input { margin-bottom: 20px; position: relative }
.withdrawal-form-wrapper .withdrawal-form-input .form-control { width: 100%; height: 40px; box-shadow: none; border: 1px solid #eee; border-radius: 4px; color: #262626; font-size: 14px; padding: 0 80px 0 12px; -moz-appearance: textfield; }
.withdrawal-form-wrapper .withdrawal-form-input .form-control:focus { border-color: #c92910; }
.modal-footer .btn { width: 128px; height: 36px; border-radius: 4px; border: 1px solid transparent; font-size: 14px; font-weight: 500; margin: 0; }
.modal-footer .close-modal { border-color: #dedede; color: #565656; }
.modal-footer .submit-modal { background: #c92910; color: #fff; }
.modal-footer .close-modal:hover { border-color: #c92910; color: #c92910; }
.modal-footer .submit-modal:hover { background: #b62710;  }
.withdrawal-form-wrapper .withdrawal-form-input .form-control::-webkit-inner-spin-button,
.withdrawal-form-wrapper .withdrawal-form-input .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.withdrawal-form-wrapper .withdrawal-form-input .conversion { position: absolute; height: 40px; line-height: 40px; padding: 0 12px; right: 0; bottom: 0; }

.favorite-list-items {  padding-top: 24px; margin-top: 24px; border-top: 1px solid #eee; }
.favorite-list-items .list-item { display: flex;  margin: 0 -15px;  }
.favorite-list-items .list-item-images { width: 25%; }
.favorite-list-items .list-item-images .product-image { width: 100%; }
.favorite-list-items .list-item-images .product-image figure { border-radius: 4px; overflow: hidden; }
.favorite-list-items .list-item-images .product-image figure img { max-height: 220px; height: auto !important; }
.favorite-list-items .list-item-content { width: 75%;  padding: 0 15px; }
.favorite-list-items .list-item-content .product-content { height: 100%; display: flex; flex-direction: column; justify-content: space-around; }
.favorite-list-items .list-item-content .list-product-name { max-width: 680px; margin-bottom: 24px; }
.favorite-list-items .list-item-content .list-product-title { font-size: 16px; color: #262626; font-weight: 600; margin-bottom: 10px; line-height: 1.2; text-wrap: revert!important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.favorite-list-items .list-item-content .list-product-desc { font-size: 14px; color: #969696; font-weight: 500; margin-bottom: 0; }
@media only screen and (max-width: 991px) {
    .favorite-list-items .list-item-images { width: 30%; }
    .favorite-list-items .list-item-content { width: 70%; }
}
@media only screen and (max-width: 767px) {
    .favorite-list-items .list-item-images { width: 35%; }
    .favorite-list-items .list-item-content { width: 65%; }
    .favorite-list-items .list-item-content .list-product-title { font-size: 15px; }
}
@media only screen and (max-width: 576px) {
    .favorite-list-items .list-item-images { width: 40%; }
    .favorite-list-items .list-item-content { width: 60%; }
}

/* address */
.card-form { box-shadow: none; padding-top: 24px; border-top: 1px solid #eee; border-radius: 0; }
.card-form-wrapper .form-control { box-shadow: none; border-radius: 4px; border-color: #eee; height: 42px; padding: 8px 10px; font-size: 14px; color: #262626; }
.card-form-wrapper .form-control:focus,
.card-form-wrapper .form-control:hover { border-color: #c92910; }
.card-form-wrapper .form-control::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
.select2-container .select2-selection--multiple, .select2-container .select2-selection--single { border-color: #eee !important; background-color: #fff !important; box-shadow: none !important; height: 42px !important;  }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: 42px !important; }
.select2-container.select2-container--open .select2-selection--single { border-color: #c92910 !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { line-height: 42px !important; }
select.form-control:not([size]):not([multiple]) { height: 42px !important; }
.card-form-wrapper .control-label { margin-right: 1rem; }
.card-form-wrapper .add-submit-btn { padding-top: 24px; border-top: 1px solid #eee; }
.card-form-wrapper .add-submit-btn .btn { width: 128px; height: 40px; padding: 0 10px; line-height: 40px; background: #c92910; font-size: 14px; font-weight: 500; color: #fff; border-radius: 4px; }
.card-form-wrapper .add-submit-btn .btn:hover { background: #b62710; }

.fixed-table-toolbar .search .search-input { height: 42px; border-radius: 6px; box-shadow: none; border-color: #eee; padding: 8px 10px; font-size: 14px; color: #262626; min-width: 268px; }
.fixed-table-toolbar .search .search-input:focus,
.fixed-table-toolbar .search .search-input:hover { border-color: #c92910; }
.fixed-table-toolbar .search .search-input::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
.fixed-table-toolbar .columns-right { gap: 10px; margin-left: 10px !important; }
.fixed-table-toolbar .columns-right .btn { background-color: #acacac !important; border: none; padding: 8px; display: flex; justify-content: center; align-items: center; height: 42px; width: 60px; border-radius: 6px; }
.fixed-table-toolbar .columns-right .btn:focus,
.fixed-table-toolbar .columns-right .btn:active { outline: none; border: none; box-shadow: none; }

.bootstrap-table .fixed-table-container .fixed-table-body { overflow: hidden; overflow-x: scroll;  }
.fixed-table-body .fixed-table-loading .loading-wrap .loading-text { font-size: 18px !important; font-weight: 500; color: #262626; }
.fixed-table-body .fixed-table-loading .loading-wrap .animation-dot { padding: 0; }
.fixed-table-body .table-bordered { min-width: 1010px; }
.fixed-table-body .table-bordered .thead-light { background: #fafafc; border-bottom: 1px solid #eee; }
.fixed-table-body .table-bordered .thead-light tr th { background: none; border: none; font-size: 12px; font-weight: 500; padding: 16px 10px; text-align: center; width: auto !important; max-width: revert !important; }
.fixed-table-body .table-bordered .thead-light tr th .th-inner { padding: 0; }
.fixed-table-body .table-bordered tbody tr {  border-bottom: 1px solid #eee; }
.fixed-table-body .table-bordered tbody tr td { padding: 18px 10px; font-size: 13px; color: #565656; text-align: center; border: none; width: auto !important; max-width: revert !important; }
.fixed-table-body .table-bordered tbody tr:hover { background: none; }
.fixed-table-body .table-bordered tbody tr td .edit-address { padding: 6px 12px; border: none; border-radius: 4px; }
.fixed-table-body .table-bordered tbody tr td .delete-address { padding: 6px 12px; border: none; border-radius: 4px; background: #c92910 !important; }
.fixed-table-body .table-bordered tbody tr td .default-address { padding: 6px 12px; border: none; border-radius: 4px; }
.fixed-table-body .table-bordered tbody tr td .btn i { font-size: 12px; }


.pagination-detail { font-size: 12px; color: #969696; }
.pagination-detail .page-list .btn.dropdown-toggle { box-shadow: 0 0 1.25rem rgba(30, 34, 40, .04); width: 68px; height: 30px; line-height: 1; background: none !important; border: 2px solid #acacac; border-radius: 4px; padding: 6px 10px; color: #262626; font-size: 14px; align-items: center; }
.pagination-detail .page-list .btn.dropdown-toggle:after { width: 16px; height: 16px; }
.modal-header .close { padding: 0; margin: 0; }
.edit-modal-lg .form-check-label { margin-bottom: 10px; }
.edit-modal-lg .form-control { box-shadow: none; border-color: #eee; border-radius: 4px; height: 42px; padding: 8px 10px; font-size: 14px; color: #262626; }
.edit-modal-lg .form-control:focus,
.edit-modal-lg .form-control:hover { border-color: #c92910; }
.edit-modal-lg .form-control::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
.edit-modal-lg .Address-type-items { display: flex; flex-wrap: wrap; gap: 20px; }
.edit-modal-lg .Address-type-items .form-check { padding: 12px 16px; gap: 16px; margin: 0; }
.edit-modal-lg .Address-type-items .form-check .form-check-input { margin-right: 0; }
.edit-modal-lg .Address-type-items .form-check .form-check-label { margin-bottom: 0; cursor: pointer; }
.edit-modal-lg .form-submit { padding-top: 20px; border-top: 1px solid #eee; }
.edit-modal-lg .form-submit .btn { width: 128px; height: 40px; padding: 0 10px; line-height: 40px; background: #c92910; font-size: 14px; font-weight: 500; color: #fff; border-radius: 4px; }
.edit-modal-lg .form-submit .btn:hover { background: #b62710; }

/* wallet */
.balance-card-wrapper { padding-top: 24px; border-top: 1px solid #eee; }
.balance-card-wrapper .balance-card { background-color: #fcf4f2; border-radius: 8px; padding: 24px 16px; gap: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap }
.balance-card-wrapper .balance-data { display: flex; align-items: center; justify-content: space-between; gap: 40px; color: #262626; }
.balance-card-wrapper .balance-data .balance-label { display: flex; align-items: center; gap: 10px; }
.balance-card-wrapper .balance-data .balance-label i { font-size: 18px; }
.balance-card-wrapper .balance-data .balance-label span { font-size: 14px; }
.balance-card-wrapper .balance-data .balance-sum { font-size: 24px; font-weight: 600; }
.balance-card-wrapper .balance-action { display: flex ; justify-content: center; align-items: flex-end; gap: 12px; }
.balance-card-wrapper .balance-action .btn { width: 128px; height: 38px; border-radius: 4px; font-size: 14px; font-weight: 500; border: 1px solid transparent; padding: 0 10px; display: flex; align-items: center; justify-content: center; }
.balance-card-wrapper .balance-action .btn-add-money { border-color: #c92910; color: #c92910; }
.balance-card-wrapper .balance-action .btn-withdraw { background: #c92910; color: #fff; }
.balance-card-wrapper .balance-action .btn:hover { opacity: .8; }
.ship-details-wrapper .title-balance,.ship-details-wrapper .conversion{ font-size: 12px; font-weight: 500; color: #dc3545; }
@media only screen and (max-width: 576px) {
    .balance-card-wrapper .balance-data { width: 100% }
}


.section-title-btn { margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.section-title-btn .label-title { margin-bottom: 0; }
.section-title-btn .viewmorebtn { width: 128px; height: 40px; padding: 0 10px; line-height: 40px; background: #c92910; font-size: 14px; font-weight: 500; color: #fff; border-radius: 4px; }
.section-title-btn .viewmorebtn:hover { background: #b62710; }
.display_fields .form-control { height: 42px; border-radius: 6px; box-shadow: none; border-color: #eee; padding: 8px 10px; font-size: 14px; color: #262626;  }
.display_fields .form-control:focus,
.display_fields .form-control:hover { border-color: #c92910; }
.display_fields .form-control:focus { background: #fff; }
.display_fields .form-control::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
.display_fields .ask_question {  width: 128px; height: 38px; border-radius: 4px; font-size: 14px; font-weight: 500;  background: #c92910; color: #fff;  border: 1px solid transparent; padding: 0 10px; display: flex; align-items: center; justify-content: center; }
.display_fields .ask_question:hover { background: #b62710; }
.fixed-table-container .table-bordered tbody td .btn { padding: 6px 12px ; border: none; border-radius: 4px; }

#address-modal .form-horizontal { margin-top: 24px; }
#address-modal .form-horizontal .form-control { height: 42px; border-radius: 6px; box-shadow: none; border-color: #eee; padding: 8px 10px; font-size: 14px; color: #262626;  }
#address-modal .form-horizontal .form-control:focus,
#address-modal .form-horizontal .form-control:hover { border-color: #c92910; }
#address-modal .form-horizontal .form-control:focus { background: #fff; }
#address-modal .form-horizontal .btn{  width: 128px; height: 38px; border-radius: 4px; font-size: 14px; font-weight: 500;  background: #c92910; color: #fff;  border: 1px solid transparent; padding: 0 10px; display: flex; align-items: center; justify-content: center; }
#address-modal .form-horizontal .btn:hover { background: #b62710; }

#ticket_modal .direct-chat .card-header { padding: 16px 24px; }
#ticket_modal .direct-chat .card-body { padding: 24px; }
#ticket_modal .direct-chat .card-body .direct-chat-messages { overflow: hidden; overflow-y: scroll; }
#ticket_modal .direct-chat .card-body .ticket_msg { display: flex; flex-direction: column; gap: 20px; padding-right: 16px; }
#ticket_modal .direct-chat .card-body .ticket_msg .text-center p { margin-bottom: 0; }
#ticket_modal .direct-chat .card-body .direct-chat-infos { line-height: 20px; }
#ticket_modal .direct-chat .card-body .direct-chat-text { margin-right: 0; }
#ticket_modal .direct-chat .card-footer { padding: 18px 24px; }
#ticket_modal .direct-chat .card-footer .form-control { height: 42px; border-radius: 4px; border-color: #eee; padding: 8px 10px; font-size: 14px; color: #262626; }
#ticket_modal .direct-chat .card-footer .form-control::-webkit-input-placeholder { font-size: 14px; font-weight: 500; color: #969696 }
#ticket_modal .direct-chat .input-group-append .btn {  width: 68px; height: 34px; border-radius: 4px; font-size: 14px; font-weight: 500;  background: #c92910; color: #fff;  border: 1px solid transparent; padding: 0 10px; display: flex; align-items: center; justify-content: center; }
#ticket_modal .direct-chat .input-group-append .btn:hover { background: #b62710; }

/* chat */
.card-content-top .chat-scroll { background: #fff !important; border: 1px solid #dedede !important; border-radius: 8px !important; box-shadow: none; padding: 0 !important; overflow: revert !important }
.select2-container .select2-selection--multiple { border: 1px solid transparent !important; border-bottom-color: #dedede !important; border-radius: 8px 8px 0 0; }
.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection { border-color: #c92910 !important; }
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered { height: 100%; padding: 0; }
.select2-container .select2-search--inline { float: revert; height: 100%; }
.select2-container .select2-search--inline .select2-search__field { height: 100%; width: 100% !important; border-radius: 0; box-shadow: none; border: none; padding: 12px 10px; font-size: 14px; color: #262626; margin-top: 0; }
.select2-container .select2-search--inline .select2-search__field:focus,
.select2-container .select2-search--inline .select2-search__field:hover { border-color: #c92910; }
.select2-results { border: 1px solid #dedede; box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.06); margin-left: -1px; }
.select2-results__option { font-size: 14px; color: #565656; }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background: #c92910; color: #fff; }

#add-scroll-js { border: none; border-top: none; padding: 12px 10px; background: #fff; border-radius: 0 0 8px 8px; }
#add-scroll-js .chat-card-header { padding: 12px 0 !important; }
#add-scroll-js .chat-card-header:last-child { border-bottom: none !important; }
#add-scroll-js .chat-card-header h4 { margin-bottom: 0; font-size: 14px !important; }

.card-content-bottom { margin-top: 24px; }
.card-content-bottom .chat-theme-light { border: 1px solid #dedede !important; background: #fff !important; box-shadow: none; border-radius: 8px !important; }
.card-content-bottom .chat-box .chat-form { background: #f3f3f3; }

.faq-title { font-size: 28px; text-align: center; color: #262626; margin: 24px 0; }
.faq-body { box-shadow: none; }
.faq-content-wrapper { padding: 0; display: flex; flex-wrap: wrap; }
.faq-app-menu-btn { display: none; }
.faq-content-menu { width: 280px; border-right: 1px solid #eee;  padding-right: 24px  }
.faq-content-menu .menu-item { width: 100%; border-bottom: 1px solid #eee; }
.faq-content-menu .menu-item .menu-title {  padding: 16px 0; cursor: pointer; font-size: 14px; color: #262626; }
.faq-content-menu .menu-item .menu-title.active { color: #c92910; }
.faq-content-menu .menu-item .submenu { display: none; padding-left: 16px;  list-style: none; }
.faq-content-menu .menu-item .submenu li { cursor: pointer; margin-bottom: 16px; font-size: 12px; color: #565656; }
.faq-content-menu .menu-item .submenu li.current-tab { color: #c92910; }

.faq-content-area { flex: 1; margin-left: 20px; }
.faq-content { display: none; }
.faq-content.show-active { display: block; }
.accordion-wrapper .card.plain { border-bottom: none; }
.accordion-wrapper .card.plain .card-header { padding: 6px 0; position: relative;  }
.accordion-wrapper .card.plain .card-header:after { content: ''; top: 0; left: 24px; right: 24px; position: absolute; height: 1px; background: #eee; transition: all .2s; }
.accordion-wrapper .card.plain .card-header.show-mark:after { opacity: 0; }
.accordion-wrapper .card.plain .card-header button { padding: 12px 24px;  color: #c92910; line-height: 1; border-radius: 6px; background: rgba(201, 41, 16, 0.05);  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; font-size: 14px; }
.accordion-wrapper .card.plain:first-child .card-header:after { content: none; }
.accordion-wrapper .card.plain .card-header button:before { position: revert; margin: 0 ; color: #c92910 !important; }
.accordion-wrapper .card.plain .card-header button.collapsed { background: none; }
.accordion-wrapper .card.plain .card-header button.collapsed:after { background: #eee; }
.accordion-wrapper .card.plain .card-header button.collapsed,
.accordion-wrapper .card.plain .card-header button.collapsed:before { color: #262626 !important; }
.accordion-wrapper .card.plain .card-header button:hover,
.accordion-wrapper .card.plain .card-header button:hover:before { color: #c92910 !important; }
.accordion-wrapper .card.plain .accordion-collapse .card-body { padding: 12px 24px; margin-bottom: 6px; }
.accordion-wrapper .card.plain .accordion-collapse .card-body p { margin-bottom: 8px; }
.accordion-wrapper .card.plain .accordion-collapse .card-body p:last-child { margin-bottom: 0; }
.accordion-wrapper .card.plain .accordion-collapse .card-body ul li { margin-bottom: 8px; }
.accordion-wrapper .card.plain .accordion-collapse .card-body a { margin: 0 5px; color: #c92910; text-decoration: underline; }
.accordion-wrapper .card.plain .accordion-collapse .card-body ul li b { margin-right: 5px; }
.accordion-wrapper .card.plain .accordion-collapse .card-body table { width: 100%; }
.accordion-wrapper .card.plain .accordion-collapse .card-body table tr td { padding: 10px 16px; border-bottom: 1px solid #dedede; }
@media only screen and (max-width: 991px) {
    .faq-menu { width: 100%; position: relative; }
    .faq-app-menu-btn { padding: 0 8px 12px 8px; border-bottom: 2px solid #dedede; font-size: 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
    .faq-app-menu-btn.show-menu { border-color: transparent;  }
    .faq-app-menu-btn .fa-angle-down { transition: all .3s }
    .faq-app-menu-btn.show-menu .fa-angle-down { color: #c92910; transform: rotate(180deg); }
    .faq-app-menu-btn.show-menu .fa-angle-down:before { content: "\f00d"; }
    .faq-app-menu-btn span { font-weight: 600; font-size: 14px; margin-left: 10px; }
    .faq-content-menu { width: 100%; max-height: 468px; display: none; overflow: hidden; overflow-y: scroll; position: absolute; left: 0; top: calc(100% - 2px); background: #fff; padding: 0 16px; border-radius: 8px; border: 1px solid #dedede; box-shadow: 0 0 1.25rem rgba(30, 34, 40, .04); z-index: 99; }
    .faq-content-menu .menu-item { width: auto;  }
    .faq-content-menu .menu-item .menu-title { border-bottom: 1px solid transparent;  }
    .faq-content-menu .menu-item .menu-title.active { border-color: #c92910; }
    .faq-content-menu .menu-item .submenu {  width: 100%; display: none; flex-wrap: wrap; align-items: center; }
    .faq-content-menu .menu-item .submenu.sub-show { display: flex; }
    .faq-content-menu .menu-item .submenu li { margin: 16px 0;  }
    .faq-content-area { width: 100%; margin-top: 24px; margin-left: 0; }
    .faq-content-docs {  }
    .accordion-wrapper .card.plain .card-header button { padding: 12px 16px; }
    .accordion-wrapper .card.plain .card-header button.collapsed {  background: #f8f8f8; }
    .accordion-wrapper .card.plain .card-header:after { content: none; }
}