body {
    font-family: 'poppins', 'mitr', sans-serif;
    font-weight: 300;
}

/*-----------------------------------------
    LAYOUT
-------------------------------------------*/
.container-fluid.container-f30 {
    padding-left: 30px;
    padding-right: 30px;
}

.container-fluid.container-f60 {
    padding-left: 60px;
    padding-right: 60px;
}

.container.container-small {
    max-width: 1170px;
}
.scrollbar-style{
    height:350px;
    overflow-y: auto;
}
.style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.style-3::-webkit-scrollbar-thumb
{
	background-color: #58585a;
}

/*-----------------------------------------
    FONT STYLE
-------------------------------------------*/
.text-green {
    color: #8ec63f;
}

.text-darkGray {
    color: #363636;
}

.text-gray {
    color: #6f6f6f;
}

.fs-12 {
    font-size: 12px;
}

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

.fs-18 {
    font-size: 18px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

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

.fs-150 {
    font-size: 150px;
}

.fw-medium {
    font-weight: 500;
}

.material-icons.md-20 {
    font-size: 20px;
}

.text-link {
    color: #8ec63f;
}

.text-link:hover {
    color: #78a933;
}

/*-----------------------------------------
    BUTTON STYLE
-------------------------------------------*/
.link-noU{
    text-decoration: none;
}
.btn{
    position: relative;
    overflow: hidden;
    text-align: center;
    font-weight: 400;
    text-transform: none !important;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-green {
    background-color: #8ec63f;
    color: #fff;
}
.btn-green:after{
    content: '';
    position: absolute;
    border-radius: 4px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #649124;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-green.rounded-pill:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #649124;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-green:hover:after{
    width: 100%;
}
.btn-green:hover {
    color: #fff;
}
.btn-green-soft{
    background-color: rgba(132,204,22,.2);
    color: rgba(132,204,22,1);
    border-color: rgb(132,204,22,.05);
}
.btn-green-soft:hover, .btn-green-soft:focus{
    background-color: rgba(132,204,22,.1);
    border-color: rgb(132,204,22,.1);
    color: rgba(132,204,22,1);
}
.btn-grayM{
    background-color: #e6e6e6;
    color: #000;
}
.btn-grayM:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #d5d5d5;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-grayM:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-grayM:hover {
    color: #000;
}
.btn-red {
    background-color: #a90007;
    color: #fff;
}
.btn-red:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #760005;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-red:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-red:hover {
    color: #fff;
}
.btn-white {
    background-color: #fff;
    color: #000;
}
.btn-white:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #e3e3e3;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-white:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-white:hover {
    color: #000;
}
.btn-lightgreen {
    background-color: #fff;
    border: 1px solid #8ec63f;
    color: #8ec63f;
}

.btn-lightgreen:hover {
    background-color: #fff;
    border: 1px solid #78a933;
    color: #78a933;
}

.btn-yellow {
    background-color: #f8c315;
}

.btn-yellow:hover {
    background-color: #e2b10f;
}

.btn-gray {
    background-color: #fff;
    border: 1px solid #6c757e;
    color: #6c757e;
}

.btn-gray:hover {
    background-color: #6c757e;
    border: 1px solid #6c757e;
    color: #fff;
}

.btn-translucent {
    background-color: rgb(0, 0, 0, 0);
    border: 1px solid #fff;
    color: #fff;
}

.btn-translucent:hover {
    border: 1px solid #cfcfcf;
    color: #cfcfcf;
}

.btn-blue {
    background-color: #17a2b8;
    border: 1px solid #cfcfcf;
}

.btn-blue:hover {
    background-color: #0f8294;
    border: 1px solid #cfcfcf;
}

.btn-pop {
    background-color: unset;
    border: unset;
    color: #6f6f6f;
}
.btn-outline-secondary {
    background-color: #fff;
    color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:after{
    content: '';
    position: absolute;
    border-radius: 0px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #6c757d;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-outline-secondary:hover:after{
    width: 100%;
    border-radius: 0px;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #fff
}
.btn-outline-secondary.rounded-pill {
    background-color: #fff;
    color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary.rounded-pill:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #6c757d;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-outline-secondary.rounded-pill:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-outline-secondary.rounded-pill:hover {
    color: #fff;
    background-color: #fff
}

.btn-outline-dark {
    background-color: #fff;
    color: #212529;
    border-color: #212529;
}
.btn-outline-dark:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #212529;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-outline-dark:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: #fff
}

.btn-outline-green {
    background-color: #fff;
    color: #8ec63f;
    border-color: #8ec63f;
}
.btn-outline-green:after{
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #8ec63f;
    height: 100%;
    top: 0;
    z-index: -1;
}
.btn-outline-green:hover:after{
    width: 100%;
    border-radius: 50px;
}
.btn-outline-green:hover {
    color: #fff;
    background-color: #fff
}
/*-----------------------------------------
    BG COLOR
-------------------------------------------*/
.bg-gray {
    background-color: #f1f1f1;
}

.bg-gray2 {
    background-color: #ebebeb;
}

.bg-gray3 {
    background-color: #6c757e;
}

.bg-gray4 {
    background-color: #f8f9fb;
}

.bg-gray5 {
    background-color: #b5babe;
}

.bg-gray6 {
    background-color: #e1e1e1;
}

.bg-gray7 {
    background-color: #f2f2f2;
}

.bg-grayL {
    background-color: #e6e6e6;
}

.bg-green {
    background-color: #8ec63f;
}

.border-green {
    border-color: #8ec63f !important;
}

/*-----------------------------------------
    NAVBAR
-------------------------------------------*/
#desktopMenu {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

#linkMenuTop li a {
    color: #58585a;
    padding: 0.5rem 1rem;
    font-weight: 400;
}

#linkMenuTop li a:hover {
    border-bottom: 5px solid #8ec63f;
}

#linkMenuTop li.active .nav-link {
    border-bottom: 5px solid #8ec63f;
}

#linkMenuTop ul .show {
    border-left: 5px solid #8ec63f;
}

#navbarDropdown2 .dropdown-menu {
    left: 100%;
}

.dropdown-menu[data-bs-popper] {
    left: unset;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: unset !important;
}

.dropdown-item:hover {
    color: #58585a;
    border-bottom: 1px solid #8ec63f !important;
    border-right: 3px solid #8ec63f;
}

.tab a.active {
    color: #8ec63f !important;
    border-bottom: 1px solid #8ec63f !important;
    border-right: 3px solid #8ec63f;
}

.tab a {
    padding: 0.25rem 0.5rem !important;
}

.dropdown-item {
    border-right: 3px solid #eee;
}

#menuMega .tabcontent {
    display: n;
}

#menuMega .tabcontent a {
    text-decoration: none;
}

#menuMega .tabcontent a:hover {
    border: none;
    color: #78a933;
}

#myModal.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    padding-top: 10%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
#myModal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
#myModal .close {
    color: #000;
    font-size: 28px;
    font-weight: bold;
}

#myModal .close:hover,
#myModal .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#myModal .modal-header {
    padding: 2px 16px;
    color: #000;
    justify-content: end;
}

#myModal .modal-body {
    padding: 2px 5px;
}

/*-----------------------------------------
    FOOTER STYLE
-------------------------------------------*/
#footer {
    background-image: url('../images/img-footer.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#footer .nav-item a {
    color: rgba(0, 0, 0, .7) !important;
}

#footer a {
    text-decoration: none;
}

/*-----------------------------------------
    BannerTitle
-------------------------------------------*/
.bg-bannerTitleAbout {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/architecture-1448221_1920-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleContact {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/WEBBannerProduct2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleWWU {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/img-bannerCareer.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;
    height: 350px;
}

.bg-bannerTitleProductWarranty {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/pexels-shvets-production-7203788.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleNews {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/pexels-trang-doan-723072.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleProducts {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/jabraproducts.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleProductsAll {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/pexels-cottonbro-4568696.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleProductsSearch {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/iphone-technology-iphone-6-plus-apple-17663.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}

.bg-bannerTitleDetailFlag {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../images/bannerTitleDetailflag2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 350px;
}
.bg-cate{
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 550px;
}
.bg-cate:before{
    content:'';
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    top:0;
    left:0;
    width:100%;
    height:100%;
    position: absolute;
}
.boxBannerText{
    position: absolute;
    z-index: 1;
}

.topBannerTitle {
    margin-top: 180px;
}
.headBanner{
    position: relative;
}
.headBanner .boxBannerTitle{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:90%;
}
.headBanner .overlay-black{
    background: rgba(0,0,0,.4);
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
}
.bottomFoot {
    margin-top: 168px;
}

.boxBannerTitle {
    position: relative;
    height: 350px;
}

.boxBannerText {
    position: relative;
    color: #fff;
    height: 550px;
}

.titleBanner-center {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.breadcrumb{
    margin-bottom: 0;
}
.titleBanner-center .breadcrumb .breadcrumb-item a {
    color: #fff;
    text-decoration: none;
}

.titleBanner-center .breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #fff;
    content: var(--bs-breadcrumb-divider, "/");
}

.titleBanner-center .breadcrumb-item.active {
    color: #8ec63f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/*-----------------------------------------
    PILL TAB STYLE
-------------------------------------------*/
#pills-tabAbout.nav-pills .nav-item {
    margin-right: 10px;
}

#pills-tabAbout.nav-pills .nav-item:last-child {
    margin-right: 0;
}

#pills-tabAbout.nav-pills .nav-link.active {
    color: #fff;
    background-color: #8ec63f;
    border: 1px solid #8ec63f;
}

#pills-tabAbout.nav-pills .nav-link {
    background: #fff;
    border: 1px solid #8ec63f;
    border-radius: 8px;
    color: #000;
    padding: .75rem 1rem;
}

#pills-tabContact {
    border-bottom: 5px solid #8ec63f;
}

#pills-tabContact.nav-pills .nav-link.active {
    color: #fff;
    background-color: #8ec63f;
}

#pills-tabContact.nav-pills .nav-link {
    background: #fff;
    border-radius: 0px;
    color: #8ec63f;
    padding: .75rem 2rem;
}

#pills-tabForgot.nav-pills .nav-link.active {
    color: #fff;
    background-color: #6c757e;
    border: 1px solid #6c757e;
}

#pills-tabForgot.nav-pills .nav-link {
    background: #fff;
    border: 1px solid #6c757e;
    border-radius: 3px;
    color: #000;
}

#pills-tabCoupon.nav-pills .nav-item {
    margin-right: 10px;
    flex: inherit;
}

#pills-tabCoupon.nav-pills .nav-item:last-child {
    margin-right: 0;
}

#pills-tabCoupon.nav-pills .nav-link.active {
    color: #fff;
    background-color: #8ec63f;
    border: 1px solid #8ec63f;
}

#pills-tabCoupon.nav-pills .nav-link {
    background: #eee;
    border-radius: 0;
    color: #000;
}

/*-----------------------------------------
    PROGRESS BAR STYLE
-------------------------------------------*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    padding-left: 0;
}

#progressbar li {
    list-style-type: none;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    width: calc(100% / 6);
    float: left;
    position: relative;
    text-align: center;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    font-size: 14px;
    color: #fff;
    background: #6c757e;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    z-index: 1;
}

#progressbar li:after {
    content: '';
    width: 83%;
    height: 1px;
    background: #6c757e;
    position: absolute;
    left: -42%;
    top: 15px;
    z-index: 0;
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #8ec63f;
    color: white;
}

.warrantyStep #progressbar {
    margin-bottom: 0;
    overflow: hidden;
    counter-reset: step;
    padding-left: 0;
    display: flex;
    justify-content: center;
}

.warrantyStep #progressbar li {
    list-style-type: none;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    width: calc(100% / 4);
    float: left;
    position: relative;
    text-align: center;
}

.warrantyStep #progressbar li .bg-warrantyStep1 {
    width: 80px;
    height: 80px;
    margin: 1rem;
    border-radius: 50%;
    display: block;
    font-size: 40px;
    line-height: 2;
    color: #ddd;
    background-color: #fff;
    border: 1px solid #6c757e;
    margin: 0 auto 5px auto;
    z-index: 1;
    background-image: url(../images/step1.png);
    background-repeat: no-repeat;
    background-position: center;
}


.warrantyStep #progressbar li .bg-warrantyStep2 {
    width: 80px;
    height: 80px;
    margin: 1rem;
    border-radius: 50%;
    display: block;
    font-size: 40px;
    line-height: 2;
    color: #ddd;
    background-color: #fff;
    border: 1px solid #6c757e;
    margin: 0 auto 5px auto;
    z-index: 1;
    background-image: url(../images/step2.png);
    background-repeat: no-repeat;
    background-position: center;
}

.warrantyStep #progressbar li .bg-warrantyStep3 {
    width: 80px;
    height: 80px;
    margin: 1rem;
    border-radius: 50%;
    display: block;
    font-size: 40px;
    line-height: 2;
    color: #ddd;
    background-color: #fff;
    border: 1px solid #6c757e;
    margin: 0 auto 5px auto;
    z-index: 1;
    background-image: url(../images/step3.png);
    background-repeat: no-repeat;
    background-position: center;
}

.warrantyStep #progressbar li .bg-warrantyStep4 {
    width: 80px;
    height: 80px;
    margin: 1rem;
    border-radius: 50%;
    display: block;
    font-size: 40px;
    line-height: 2;
    color: #ddd;
    background-color: #fff;
    border: 1px solid #6c757e;
    margin: 0 auto 5px auto;
    z-index: 1;
    background-image: url(../images/step4.png);
    background-repeat: no-repeat;
    background-position: center;
}

.warrantyStep #progressbar span img {
    margin-top: 25%;
    margin-bottom: 25%;
}

.warrantyStep #progressbar li::before,
.warrantyStep #progressbar li::after {
    content: none;
}

.warrantyStep #progressbar li span:after {
    content: '';
    width: 60%;
    height: 1px;
    background: #6c757e;
    position: absolute;
    left: 71%;
    top: 40px;
    z-index: 0;
}

.warrantyStep #progressbar li:last-child span:after {
    content: none;
}

.warrantyStep #progressbar li.active .bg-warrantyStep1 {
    background-color: #8ec63f;
    background-image: url(../images/step1_active.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #8ec63f;
}

.warrantyStep #progressbar li.active .bg-warrantyStep2 {
    background-color: #8ec63f;
    background-image: url(../images/step2_active.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #8ec63f;
}

.warrantyStep #progressbar li.active .bg-warrantyStep3 {
    background-color: #8ec63f;
    background-image: url(../images/step3_active.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #8ec63f;
}

.warrantyStep #progressbar li.active .bg-warrantyStep4 {
    background-color: #8ec63f;
    background-image: url(../images/step4_active.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #8ec63f;
}

.cartStep #progressbar {
    margin-bottom: 0;
    overflow: hidden;
    counter-reset: step;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
}

.cartStep #progressbar li {
    list-style-type: none;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    width: calc(100% / 3);
}

.cartStep #progressbar li span {
    width: 80px;
    height: 80px;
    margin: 1rem;
    border-radius: 50%;
    display: block;
    font-size: 30px;
    line-height: 2.5;
    color: #fff;
    background-color: #898989;
    border: 1px solid #6c757e;
    margin: 0 auto 5px auto;
    z-index: 1;
}

.cartStep #progressbar li.active span {
    background-color: #8ec63f;
    border: 1px solid #8ec63f;
    color: #fff;
}

.cartStep #progressbar li::before,
.cartStep #progressbar li::after {
    content: none;
}

/*-----------------------------------------
    CARD STYLE
-------------------------------------------*/
.newsDContent img{
    max-width: 100%;
}
.newsDContent a{
    word-break: break-word;
}
.propertyPd{
    position: relative;
}
.propertyPd-img{
    height: 100%;
    max-width: 100%;
    overflow: hidden;
}
.propertyPd-img img{
    height:100%;
    width:100%;
    object-fit: cover;
}
.propertyPd .propertyPd-body{
    padding: 20px 40px;
}
.card-logoStore img {
    height: 75px;
    object-fit: contain;
    max-width: 100%;
}

.card-contact {
    border-radius: 10px;
}

.card-contact i {
    font-size: 24px;
}

.card-contact .flex-shrink-0 {
    width: 30px;
    text-align: center;
}

.card-product .labelS{
    position: absolute;
    top:5px;
    left:10px;  
    z-index: 10;
}
.card-product .labelS .s-promotion .badge,.card-product .labelS .s-sale .badge{ 
    font-size: 16px;
    border-radius: 0;
    text-transform: uppercase;
        padding: 0.5em 1em;
}
/*-----------------------------------------
    FORM STYLE
-------------------------------------------*/
input.form-contact,
select.form-contact,
textarea.form-contact {
    border-radius: 0rem;
    padding: 1rem 0.75rem;
    border-color: #fff;
}
.boxM{
    display: none;
}
/* -------------------------------------------
    table
------------------------------------------- */
table th{
    font-weight: 500;
}
.table>thead {
    border-bottom: 2px solid #000;
}

/* --------------------------------------------
    carousel
-------------------------------------------- */
.owl-carousel .item{
    text-align: center;
}
.owl-prev i, .owl-next i{
    transform: scale(.8)!important;
}
#bannerHomeEcom .owl-next i,
#bannerHomeEcom .owl-prev i{
    transform: scale(.8);
    color: #000;
}
#bannerHomeEcom2 .owl-next i,
#bannerHomeEcom2 .owl-prev i{
    transform: scale(.8);
    color: #fff;
}
#bannerHomeEcom2 .owl-dot span{
    width:15px;
    height:15px;
}
#bannerHomeEcom button.owl-prev,
#bannerHomeEcom button.owl-next {
    position: absolute;
    z-index: 10;
    top: 50%;
    width: 45px;
    height: 80px;
    border-radius: 0;
    background-color: rgba(238, 238, 238,.6);
}

#bannerHomeEcom button.owl-next {
    right: 0;
}

#bannerHomeEcom button.owl-prev {
    left: 0;
}

#bannerHomeEcom .owl-dots {
    margin-top: 5rem;
}

#bannerHomeEcom-corpor button.owl-prev,
#bannerHomeEcom-corpor button.owl-next {
    position: absolute;
    z-index: 10;
    top: 50%;
}

#bannerHomeEcom-corpor button.owl-next,
#bannerHomeEcom2 button.owl-next {
    right: 0;
}

#bannerHomeEcom-corpor button.owl-prev,
#bannerHomeEcom2 button.owl-prev {
    left: 0;
}

#bannerHomeEcom-corpor .owl-dots {
    margin-top: 5rem;
}

#ecomBrand .owl-nav,
#ecomBrand .owl-dots,
#bannerHomeEcom-corpor .owl-nav,
#corporBrand .owl-nav,
#corporBrand .owl-dots {
    display: none;
}

#bannerHomeEcom2 button.owl-next,
#bannerHomeEcom2 button.owl-prev,
#bannerHomeEcom2 button.owl-dot {
    color: #fff !important;
    font-size: 70px;
}

#bannerHomeEcom2 .owl-dots {
    position: relative;
    z-index: 10;
    bottom: 115px;
    text-align: right;
    padding-right: 3rem;
}

#bannerHomeEcom2 .owl-dots .active span {
    background: #8ec63f;
}
#productWeekSlide .owl-prev,
#productWeekSlide .owl-next{
    top:-30px;
}
#productWeekSlide .owl-prev i:hover,
#productWeekSlide .owl-next i:hover{
    color: #8ec63f;
}
#productWeekSlide .owl-next:before{
    width:5px;
    height: 32px;
    background: #ccc;
    content:'';
    position: absolute;
    right: 55px;
    top:12px
}
#productWeekSlide .owl-prev{
    left:90%;
}
#productWeekSlide .owl-next{
    right:0;
}
/* --------------------------------------------
    index
-------------------------------------------- */

#bannerHomeEcom .item img.bannerImageSlide {
    width: 100%;
    object-fit: cover;
    height: 600px;
}

#bannerHomeEcom2 .item img.bannerImageSlide {
    width: 100%;
    max-width: 100%;
}

#ecomBrand .item img.bannerImageSlide,
#corporBrand .item img.bannerImageSlide {
    /*width: 165px;*/
    max-width: 100%;
    height: 65px;
    filter: grayscale(100%);
    object-fit: contain;
}

#ecomBrand .item img.bannerImageSlide:hover,
#corporBrand .item img.bannerImageSlide:hover {
    filter: grayscale(0%);
}
#bannerHomeEcom-shop .owl-next{
    right:0%;
}
#bannerHomeEcom-shop .owl-prev{
    left:0%;
}
#bannerHomeEcom-corpor .item .overlayBanner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

#bannerHomeEcom-corpor .item img.bannerImageSlide{
    width: 100%;
    object-fit: cover;
    height: 600px;
}

#bannerHomeEcom-corpor .item .caption {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 30%;
}

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

#bannerHomeEcom-corpor .item .caption img {
    padding-right: 1rem;
    border-right: 1px solid #fff;
}

#bannerHomeEcom-corpor .item .caption h4 {
    padding-left: 1rem;
}

#weekProduct .weekProduct-head {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#weekProduct .wk-item-img img {
    object-fit: contain;
}
#box-news-item{
    position: relative;
}
#box-news-item .box-news-img{
    max-width:100%;
    padding-top:75%;
    position: relative;
    overflow: hidden;
    background: #8ec63f;
}
#box-news-item .box-news-img img{
    width:100%;
    height:100%;
    opacity: 1;
    transform: scale(1);
    transition: all .5s ease-in-out;
    top:0;
    left: 0;
    position: absolute;
}
#box-news-item .box-news-text {
    position: relative;
    top: -15px;
    left:50%;
    transform: translateX(-50%);
    padding:1rem;
    width:90%; 
    transition: top .5s ease-in-out;
}
#box-news-item .box-news-text h5 {
    text-transform: uppercase;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#box-news-item .box-news-text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#box-news-item:hover{
    cursor: pointer;
}
#box-news-item:hover .box-news-img img{
    transform: scale(1.05);
    opacity: .6;
}
#box-news-item:hover .box-news-text{
    top:-30px;
}
.headProfile a {
    text-decoration: none;
}

.no-list-style {
    list-style: none;
}

.productNotable {
    position: relative;
    padding:20px;
}

.productNotable::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-top: 15px solid #ebebeb;
    border-left: 15px solid #ebebeb;
}

.productNotable::after {
    content: " ";
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 100px;
    height: 100px;
    border-bottom: 15px solid #ebebeb;
    border-right: 15px solid #ebebeb;
    z-index: 2;
}
#bannerShop .owl-prev {
    left: 0%;
}
#bannerShop .owl-next {
    right: 0%;
}
#bannerShop.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    padding-left: 60px;
    width: 100%;
    margin-top: 0%;
    z-index: -256;
    position: absolute;
    z-index: 1;
    bottom: 0; 
}
/*-----------------------------------------
    Upload file
-------------------------------------------*/
.file-upload {
    background-color: #ffffff;
    max-width: 100%;
  }
  
  .file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #1FB264;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #15824B;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
  }
  
  .file-upload-btn:hover {
    background: #1AA059;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }
  
  .file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
  }
  
  .file-upload-content {
    display: none;
    text-align: center;
  }
  
  .file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
  }
  
  .image-upload-wrap {
    margin-top: 20px;
    border: 2px dashed #000;
    position: relative;
    border-radius: 10px;
  }
  
  .image-dropping,
  .image-upload-wrap:hover {
    background-color: #eee;
    border: 2px dashed #000;
  }
  
  .image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
  }
  .image-title{
    font-size: 14px;
  }
  .drag-text {
    text-align: center;
  }
  
  .drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #000;
    padding: 60px 0;
  }
  
  .file-upload-image {
    height: 400px;
    width: 300px;
    object-fit: contain;
    margin: auto;
    padding: 20px;
    border:1px solid #eee;
  }
  
  .remove-image {
    margin: 0;
    color: #fff;
    background: #cd4535;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 400;
  }
  
  .remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }
  
  .remove-image:active {
    border: 0;
    transition: all .2s ease;
  }
/* -------------------------------------------
    coupon
------------------------------------------- */
.shopCateSlide .owl-prev, .shopCateSlide .owl-next{
    width: 40px;
    height:40px;
    border-radius: 10px!important;
    background-color: white!important;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.shopCateSlide .owl-prev{
    left: -2.5%;
}
.shopCateSlide .owl-next{
    right: -2.5%;
}
.shopCateSlide .owl-prev i, .shopCateSlide .owl-next i{
    transform: scale(.5) translateY(-17px)!important;
    color: #8dc63f;
}
.col-md-20{
    width: 230px;
}
.col-md-80{
    width:calc(100% - 230px);
    padding-left: 0.75rem;
    padding-right: 0rem;
}
@media screen and (max-width:1199px){
    .col-md-20{
        width: 100%;
    }
    .col-md-80{
        width:100%;
        padding-left: 0rem;
        padding-right: 0rem;
    }
}
@media screen and (min-width: 1200px) and (max-width:1439px){
    .col-md-20{
    width: 208px;
}
.col-md-80{
    width:calc(100% - 208px);
}
}
#arrivalSlide .owl-next,#arrivalSlide .owl-prev{
    width:40px;
    height: 40px;
    line-height: 40px;
}
#arrivalSlide .owl-next{
    right: -5%;
}
#arrivalSlide .owl-prev{
    left: -5%;
}
.pd-boxNewArrivel{
    padding-left: 40px;
    padding-right: 40px;
}
@media screen and (max-width:767px){
    .pd-boxNewArrivel{
        padding-left: 10px;
        padding-right: 10px;
    }
    #arrivalSlide .owl-next{
        right: -10%;
    }
    #arrivalSlide .owl-prev{
        left: -10%;
    }
    .scrollbar-style{
        height:250px;
        overflow-y: auto;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    #arrivalSlide .owl-next{
        right: -7%;
    }
    #arrivalSlide .owl-prev{
        left: -7%;
    }
}
@media screen and (max-width:1023px){
    .pd-boxNewArrivel{
        padding-left: 10px;
        padding-right: 10px;
    }
    .col-md-20{
        width: 100%;
    }
    .col-md-80{
        width: 100%;
    }
}
.link-brandH{
    background-color: black;
    height:100%;
    display: block
}
.img-brandH{
    width: 100%;
}
.img-brandH:hover{
    opacity: .8;
}
.link-coupon{
    text-decoration: none;
}
.coupon-shop{
  display: flex;
  align-items: center;
  background: #fef1f3;
  border: 1px solid #fae7eb;
  border-radius: 8px;
  margin: auto;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  /*下面是生成的样式*/
  -webkit-mask-image: radial-gradient(circle at calc(100% - 88px) 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
-webkit-mask-size: 100%, 2px 4px;
-webkit-mask-repeat: repeat, repeat-y;
-webkit-mask-position: 0 -4px, calc(100% - 87px);
-webkit-mask-composite: source-out;
mask-composite: subtract;
}
.coupon-shop .coupon-right{
  width: 88px;
  text-align: center;
  font-size: 24px;
  color: #F22424
}
.coupon-shop .coupon-right span{
  font-size: 10px;
}
.coupon-shop .coupon-right button{
  font-size: 10px;
}
.coupon-shop .coupon-left{
  padding: 16px 12px 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: baseline;
}
.coupon-shop .coupon-title{
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #F22424;
  font-weight: 700;
}
.coupon-shop .coupon-info{
  margin: 0;
  font-size: 10px;
  color: #F22424;
}
.coupon-shop .coupon-time{
  font-size: 10px;
  color: #F22424;
  margin-top: 10px;
  margin-bottom: 0;
}
/* -------------------------------------------
    profile
------------------------------------------- */
.card-input-element {
    display: none;
}

.card-input {
    margin: 5px 5px 5px 0px;
    padding: 0px;
    border-width: 2px;
}

.card-input:hover {
    cursor: pointer;
}

.card-input-element:checked+.card-input {
    border-color: #8ec63f;
    border-width: 2px;
}

.card-input-element:checked+.card-input label {
    background-color: #8ec63f;
    border-color: #8ec63f !important;
}

/* .card-coupon.card-input-element:checked+.card-input {
    border-color: rgb(187, 187, 187);
}

.card-coupon.card-input-element:checked+.card-input .card-coupon-head {
    background-color: rgb(237, 247, 250);
}

.card-coupon.card-input-element:checked+.card-input .card-coupon-foot {
    background-color: #f8f9fa;
}

.card-coupon.card-input-element:checked+.card-input .card-coupon-foot a {
    background-color: #f8f9fa;
    border: 1px solid #8ec63f;
    color: #8ec63f !important;
}

.card-coupon.card-input-element:checked+.card-input .card-coupon-head i {
    color: #d4e9ff;
}

.card-coupon.card-input-element:checked+.card-input .card-coupon-head .text-pro {
    color: #474c52;
}

.selectColor .card-input-element:checked+.card-input {
    border: 2px solid #ddd;
} */

#favProduct a {
    text-decoration: none;
    color: unset;
}

#couponSelect .card-coupon-head.coupon-delivery i {
    color: #d4e9ff;
}
#couponSelect .card-coupon-head.coupon-shop i {
    color: #ffe9d4;
}
#couponSelect .card-coupon-head .fa-shopping-bag {
    float: right;
}

#couponSelect .card-coupon-head .text-pro {
    text-align: center;
    color: #000;
    position: absolute;
    top: 40%;
    left: 48%;
    transform: translate(-50%, -50%);
}

#couponSelect .card-coupon-head.coupon-delivery {
    background-color: #f0f8ff;
}
#couponSelect .card-coupon-head.coupon-shop {
    background-color: #fffbf7;
}
#couponSelect .card-coupon-foot a {
    background-color: #f8f9fa;
    border: 1px solid #8ec63f;
    color: #8ec63f !important;
}

#couponSelect .card-coupon-foot {
    background-color: #fcfcfc;
}


#couponSelectN .card-coupon-head i {
    color: #f1f1f1;
}

#couponSelectN .card-coupon-head .fa-shopping-bag {
    float: right;
}

#couponSelectN .card-coupon-head .text-pro {
    text-align: center;
    color: #7f7f7f;
    position: absolute;
    top: 40%;
    left: 48%;
    transform: translate(-50%, -50%);
}

#couponSelectN .card-coupon-head {
    background-color: #fafafa;
}

#couponSelectN .card-coupon-foot a {
    background-color: #ddd;
    border: 1px solid #eee;
    color: #fff !important;
}

#couponSelectN .card-coupon-foot {
    background-color: #fafafa;
}

.input-box {
    position: relative;
}

.input-box i {
    position: absolute;
    right: 13px;
    top: 10px;
}

#contentHisOrder .img-order img {
    width: 65px;
    height: 65px;
    object-fit: contain; 
}

.pagination .page-item.active .page-link {
    background-color: #8ec63f;
    border-color: #8ec63f;
    color: #fff;
}

.pagination .page-item .page-link {
    color: #000;
}

.tabProfile ul {
    border: 1px solid #f1f1f1;
    padding: 0;
}

.tabProfile li {
    list-style: none;
}

.tabProfile li.nav-item .nav-link {
    color: #363636;
    font-weight: 400;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.tabProfile li.nav-item .nav-link.active {
    color: #fff;
    background-color: #78a933;
    border-radius: 0;
}

.tabProfile .nav-pills .nav-link {
    background: #fff;
    color: #474c52;
    text-align: left;
    padding: 0.75rem 2rem;
}

#addInsue {
    border: 2px dashed #7f7f7f;
    padding: 6rem 0;
}

#addInsue2 {
    border: 2px dashed #7f7f7f;
    padding: 5.85rem 0;
}

.progressbar {
    counter-reset: step;
}

.progressbar li {
    list-style-type: none;
    width: 25%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

.progressbar li:before {
    width: 30px;
    height: 30px;
    content: counter(step);
    counter-increment: step;
    line-height: 30px;
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}

.progressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: #7d7d7d;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active {
    color: green;
}

.progressbar li.active:before {
    border-color: #55b776;
}

.progressbar li.active+li:after {
    background-color: #55b776;
}

.warrantyStep {
    max-width: 770px;
    margin: auto;
}

.warrantyForm {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border-radius: 6px;

}

.scanBarcode img {
    width: 30px;
    margin-right: 0.5rem;
}

#addListProduct {
    border: 2px dashed #7f7f7f;
    border-radius: 10px;
}

.btn-step {
    width: 50px;
    height: 50px;
    background-color: #585857;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 2.5;
    font-size: 20px;
    font-weight: 500;
}


.cardSend.card-input-element:checked+.card-input {
    border-color: #ddd;
}

.cardSend.card-input-element:checked+.card-input label {
    background-color: #fff;
}

.cardSend.card-input-element:checked+.card-input i {
    color: #007aff;
}

.cardSend.card-input-element.card-input i {
    color: #fff;
}


#productCart {
    position: relative;
    display: inline-block;
}

#productCart .numProduct {
    position: absolute;
    top: -10px;
    right: 0px;
    padding: 0.2rem 0.5rem;
    background-color: #5a5f63;
    color: white;
    font-size: 10px;
}

/*-----------------------------------------
    NEWS&ARTICLES
-------------------------------------------*/

.card-news-text .img-leftCard{
    max-width: 100%;
    width:100%;
    position: relative;
    padding-top:75%;
}
.card-news-text .img-leftCard img{
    height:100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;
}
.card-news-text  .card-body{
    padding: 1.5rem;
}
.card-news-text h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

.card-news-text .text-news{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 72px;
}

#news .progress {
    height: 0.25rem;
}

#news .cateNews li {
    display: flex;
    flex-wrap: nowrap;
    margin: 0.5rem 0;
}

#news .cateNews li a {
    text-decoration: none;
    color: #000;
    margin-left: 0.5rem;
}

#news .cateNews li a:hover {
    color: #ddd;
}


/*-----------------------------------------
    PRODUCTS
-------------------------------------------*/

.videoProducts {
    position: relative;
    background-color: #000;
    overflow: hidden;
}
.videoProducts img{
    opacity: 1;
    transition: all 500ms ease-in-out
}
.videoProducts:hover img{
    opacity: .6;
    transform: scale(1.05);
}
.videoProducts:hover a{
    color: #8ec63f;
}
.videoProducts a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width:100%;
    height:100%;
    color: #fff;
    transition: all 500ms ease-in-out
}

.text-head-product {
    display: flex;
    align-items: baseline;
}

.text-head-product img {
    width: 100px;
    margin: 1rem;
}

#categoryProducts .owl-nav {
    display: none;
}

.tabBanner {
    position: relative;
}

#categoryProducts .owl-dots {
    margin-top: 1%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    z-index: -1;
    opacity: 0.25;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
    z-index: 3;
}

.text-tab a {
    position: absolute;
    bottom: 30px;
}
.categorySlide .item{
    padding-top:50px;
}
.categorySlide .owl-nav.disabled{
    display: block!important;
}
.categorySlide .owl-nav button{
    background-color: #000!important;
    width:40px!important;
    height:40px!important;
    font-size: 28px!important;
    border-radius: 0!important;
}
.categorySlide .owl-nav button i{
    transform: scale(.5)!important;
    color: #fff;
}
.categorySlide .owl-prev,
.categorySlide .owl-next {
    top: 15px!important;
}
.categorySlide .owl-prev{
    left:89.5%;
}
.categorySlide .owl-next {
    right: 5px!important;
}
figure {
	position: relative;
    border-radius: 8px;
	max-width: 100%;
	height: 100%;
    overflow: hidden;
	background: #e6e6e6;
	text-align: center;
	cursor: pointer;
}
figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
    left:50%;
    transform:translateX(-50%);
}

figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}

figure figcaption,
figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.card-cate{
    padding:10px;
    position: relative;
    transition: all .5s ease;
}
.card-cate img{
    height:100px;
    object-fit: contain;
}
.card-cate:hover{
    background-color: #8ec63f;
    color: white;
}
.card-product{
    padding: 10px;
    position: relative;
    border: 1px solid #eee; 
}
.card-product:hover{
    cursor: pointer;
}
.card-product .figure {
    position: relative;
    width: 100%;
    /* can be omitted for a regular non-lazy image */
    height:100%;
    overflow: hidden;
}
.card-product .figure img.img-main{
    object-fit: contain;
    width: 100%;
    height:100%;
}
.card-product .figure img.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
    opacity: 0;
    transition: all .5s ease-in-out;
}
.card-product:hover .figure img.image-hover {
    opacity: 1;
}
.card-product .figure a, .card-product .figure div.bcd {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: #8ec63f;
    opacity: 0;
    transition: all .5s ease-in-out;
    transition-delay: 300ms;
    font-size: 12px;
    width:60%;
}
.card-product .figure a:after, .card-product .figure div.bcd:after {
    content: '';
    position: absolute;
    border-radius: 50px;
    bottom: 6px;
    left: 0;
    height: 2px;
    transition: width 0.4s;
    width: 0;
    background: #649124;
    height: 100%;
    top: 0;
    z-index: -1;
    transition-delay: .5s
}
.card-product .figure a:hover:after, .card-product:hover .figure div.bcd:after  {
    width: 100%;
    border-radius: 50px;
}
.card-product:hover .figure a, .card-product:hover .figure div.bcd {
    opacity: 1!important;
}
.card-product:hover .productName{
    color: #000;
    font-weight: 400;
}
.card-product .productName{
    font-size: 14px;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 5px;
}
.card-product h6{
    font-size: 14px;
    height:57.56px;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 5px;
}
.card-product .priceF{
    font-size: 16px;
    text-align: left;
    color: #8ec63f;
    margin-bottom: 0;
    font-weight: 500;
}
.card-product .priceS{
    font-size: 10px;
    text-align: left;
    color: #949494;
    margin-bottom: 0;
}
.card-product .rateB{
    font-size: 12px;
    text-align: left;
    margin-bottom: 0;
}
.star-full{
  color: #FFB03D;
}
.star-half{
  background: linear-gradient( to right, #FFB03D 0%, #FFB03D 50%, #d6d6d6 50% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.star-empty{
  color: #d6d6d6;
}
#productsCate .item a {
    position: absolute;
    font-size: 14px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    display: none;
}

#productsCate .item {
    cursor: pointer;
    position: relative;
}

#productsCate .item:hover h6 {
    color: #8ec63f;
}

#productsCate .item:hover a {
    display: block;
    color: #fff;
    background-color: #8ec63f;
}

#bannerProducts.owl-theme .owl-dots {
    margin-top: -30px;
    z-index: 2;
}

#bannerProducts .owl-prev {
    color: #fff;
    left: 0;
}

#bannerProducts .owl-next {
    color: #fff;
    right: 0;
}


/*-----------------------------------------
    PRODUCTS-DETAILFLAG
-------------------------------------------*/

label.favCheck input[type="checkbox"] {
display: none;
}

.custom-checkbox.favCheck {
margin-left: 2em;
position: relative;
cursor: pointer;
}

.custom-checkbox.favCheck .fa-star {
position: absolute;
top: 3px;
left: -1.25em;
}

.custom-checkbox.favCheck .fa-star.text-secondary {
color: gray;
}

.custom-checkbox.favCheck .fa-star.text-warning {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

.custom-checkbox.favCheck:hover .fa-star{
opacity: 0.5;
}

.custom-checkbox.favCheck input[type="checkbox"]:checked ~ .fa-star.text-warning {
opacity: 1;
}
#sync1{
    margin-bottom: 10px;
}
#sync1 img{
    height:400px;
    object-fit: contain;
}
#sync2 .item:hover{
    opacity: .8;
    cursor: pointer;
}
#sync2 .item{
    text-align: center;
    border:2px solid #ddd;
}
#sync2 .current .item{
    border-color: #8ec63f;
}
#sync2 img{
    height:100px;
    object-fit: contain;
}
#sortBy .accordion {
    background-color: #fff;
    color: #444;
    border-bottom: 1px solid #eee !important;
    cursor: pointer;
    border: none;
    padding: 10px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

#sortBy .active,
#sortBy .accordion:hover {
    background-color: #ccc;
}

#sortBy .accordion:after {
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

#sortBy .active:after {
    font-family: "Font Awesome 5 Free";
    content: "\f077";
}

#sortBy .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.dash li {
    list-style: none;
}

.dash li:before {
    content: "–";
    /* en dash */
    position: absolute;
    margin-left: -1.1em;
}

.galleriesProduct .demo {
    width: 100%;
}

.owl-theme .owl-dots {
    padding-left: 0 !important;
}
.shopB-desktop,.shopB-mobile{
    max-width: 100%;
    width: 100%;
}
/*-----------------------------------------
    sidenav shop
-------------------------------------------*/
.sidenav-shop .btn.btn-toggle{
    padding: .375rem 0rem;
    display: flex;
    align-items: center;
    width:100%;
}
.sidenav-shop .btn-toggle::after {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1rem;
    transform-origin: 0.5em 50%;
    transform: rotate(0deg);
}
.sidenav-shop .btn-toggle[aria-expanded="true"]::after {
    transform: rotate(-90deg);
}
#sidenavBrand .accordion-item{
    margin-bottom: 10px;
}
#sidenavBrand .accordion-item:first-of-type {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
}
#sidenavBrand .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#sidenavBrand .accordion-item:last-of-type {
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}
#sidenavBrand .accordion-item:last-of-type .accordion-button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#sidenavBrand .accordion-button{
    text-transform: uppercase;
    background-color: #ededed;
    color: #616161;
    font-weight: 600;
}
#sidenavBrand .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #8ec63f;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
#sidenavBrand .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}
#sidenavBrand .accordion-body {
    padding: .5rem .5rem;
    background-color: #ededed;
}
#sidenavBrand .sub1{
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    border-radius: 0;
}
#sidenavBrand .sub2{
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
}
#sidenavBrand .sub3{
    text-decoration: none;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
}
#sidenavBrand .sub3::before{
    content: '-';
    color: #212529;
    margin-right: 5px;
}
#sidenavBrand .sub1[aria-expanded="true"]{
  background-color: #dadada;
  font-weight: 600;
}
#sidenavBrand .sub2[aria-expanded="true"]{
  color: #8ec63f;
  font-weight: 600;
}
#sidenavBrand .accordion-item:not(:first-of-type) {
    border-top: 1px;
}
#sidenavBrand a:hover, #sidenavBrand .btn:hover{
    color: #8ec63f;
}
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%);
}
#shopCateLink{
    flex-direction: column;
    margin-bottom: 10px;
}
#shopCateLink .nav-link{
    padding: 0.5rem 0rem;
    color: black;
    border-bottom: 3px solid white;
}
#shopCateLink .nav-link.active{
    border-color: #8ec63f;
    color: #8ec63f;
    font-weight: 500;
}
#shopCateLink .nav-link:hover{
    border-color: #ddd;
    color: #000;
}
@media screen and (max-width:767px){
   #shopCateLink{
        width: 100%;
       flex-wrap: nowrap;
       white-space: nowrap;
       overflow-x: scroll;
       flex-direction: row;
    } 
    #shopCateLink .nav-link{
        padding: 0.5rem 1rem;
    }
}
/*-----------------------------------------
    RESPONSIVE
-------------------------------------------*/
@media screen and (max-width:767px){
    .card-product .labelS .s-promotion .badge, .card-product .labelS .s-sale .badge {
        font-size: 12spx;
    }
    .navbar-brand img{
        height:50px;
    }
    .topBannerTitle {
        margin-top: 138px;
        margin-bottom: 20px;
    }
    .shopB-desktop{
        display: none;
    }
    .shopB-mobile{
        display: block;
    }
    .productNotable {
        margin-top: 20px;
    }
}
@media screen and (min-width:768px){
    .shopB-desktop{
        display: block;
    }
    .shopB-mobile{
        display: none;
    }
}
@media screen and (min-width:320px) and (max-width:374px) {
    .container-fluid.container-f60 {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: end;
    }

    #bannerHomeEcom .item img.bannerImageSlide {
        height: 200px;
    }

    #bannerHomeEcom button.owl-prev,
    #bannerHomeEcom button.owl-next {
        background-color: unset;
    }

    #bannerHomeEcom-corpor .item img.bannerImageSlide,
    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: unset;
    }

    .owl-theme .owl-dots {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bannerHomeEcom2 .owl-dots {
        bottom: 0;
        text-align: center;
    }

    .owl-theme .owl-dots .owl-dot span {
        margin: 2px 4px !important;
    }

    #bannerHomeEcom2 button.owl-next,
    #bannerHomeEcom2 button.owl-prev {
        font-size: unset;
    }

    #headCart {
        display: none;
    }

    .fs-18 {
        font-size: 16px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 150px;
    }

    .boxBannerTitle {
        height: 150px;
    }

    #pills-tabAbout.nav-pills .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .bg-tabBanner1,
    .bg-tabBanner2,
    .bg-tabBanner3,
    .bg-tabBanner4,
    .bg-tabBanner5 {
        height: 160px;
    }

    .boxBannerText {
        height: 160px;
    }

    .text-tab a {
        bottom: 15px;
    }

    

    .bottomFoot {
        margin-top: 40px;
    }

    .cartStep #progressbar li span {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .btn-step {
        width: 30px;
        height: 30px;
        line-height: unset;
    }

    .warrantyStep #progressbar li .bg-warrantyStep1,
    .warrantyStep #progressbar li .bg-warrantyStep2,
    .warrantyStep #progressbar li .bg-warrantyStep3,
    .warrantyStep #progressbar li .bg-warrantyStep4 {
        width: 60px;
        height: 60px;
    }

    .warrantyStep #progressbar li span:after {
        top: 30px;
        left: 90%;
        width: 20%;
    }

    #progressbar li:after {
        width: 32%;
        left: -17%;
    }

    .table-bordered>:not(caption)>*>* {
        padding: 0;
    }

    #pills-tabCoupon.nav-pills .nav-item {
        margin-bottom: 10px;
    }

}

@media screen and (min-width:375px) and (max-width:413px) {
    #productWeekSlide .owl-prev {
        left: 59%;
    }
    .productNotable::after {
        bottom: 1px;
    }
    .container-fluid.container-f60 {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: end;
    }

    #bannerHomeEcom .item img.bannerImageSlide {
        height: 200px;
    }

    #bannerHomeEcom button.owl-prev,
    #bannerHomeEcom button.owl-next {
        background-color: unset;
    }

    #bannerHomeEcom-corpor .item img.bannerImageSlide,
    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: unset;
    }

    #headCart {
        display: none;
    }

    .owl-theme .owl-dots {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bannerHomeEcom2 .owl-dots {
        bottom: 0;
        text-align: center;
    }

    .owl-theme .owl-dots .owl-dot span {
        margin: 2px 4px !important;
    }

    #bannerHomeEcom2 button.owl-next,
    #bannerHomeEcom2 button.owl-prev {
        font-size: unset;
    }

    .fs-18 {
        font-size: 16px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 150px;
    }

    .boxBannerTitle {
        height: 150px;
    }

    #pills-tabAbout.nav-pills .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .bg-tabBanner1,
    .bg-tabBanner2,
    .bg-tabBanner3,
    .bg-tabBanner4,
    .bg-tabBanner5 {
        height: 160px;
    }

    .boxBannerText {
        height: 160px;
    }

    .text-tab a {
        bottom: 15px;
    }

    .bottomFoot {
        margin-top: 40px;
    }

    .cartStep #progressbar li span {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .btn-step {
        width: 30px;
        height: 30px;
        line-height: unset;
    }

    .warrantyStep #progressbar li .bg-warrantyStep1,
    .warrantyStep #progressbar li .bg-warrantyStep2,
    .warrantyStep #progressbar li .bg-warrantyStep3,
    .warrantyStep #progressbar li .bg-warrantyStep4 {
        width: 60px;
        height: 60px;
    }

    .warrantyStep #progressbar li span:after {
        top: 30px;
        left: 90%;
        width: 20%;
    }

    #progressbar li:after {
        width: 32%;
        left: -17%;
    }

    .table-bordered>:not(caption)>*>* {
        padding: 0;
    }

    #pills-tabCoupon.nav-pills .nav-item {
        margin-bottom: 10px;
    }
    .card-product .figure, .card-product .figure img.img-main, .card-product .figure img.image-hover  {
        height:100%;
    }

}

@media screen and (min-width:414px) and (max-width:424px) {
    #productWeekSlide .owl-prev {
        left: 64%;
    }
    .container-fluid.container-f60 {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: end;
    }

    #bannerHomeEcom .item img.bannerImageSlide {
        height: 200px;
    }

    #bannerHomeEcom button.owl-prev,
    #bannerHomeEcom button.owl-next {
        background-color: unset;
    }

    #bannerHomeEcom-corpor .item img.bannerImageSlide,
    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: unset;
    }

    #headCart {
        display: none;
    }

    .owl-theme .owl-dots {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bannerHomeEcom2 .owl-dots {
        bottom: 0;
        text-align: center;
    }

    .owl-theme .owl-dots .owl-dot span {
        margin: 2px 4px !important;
    }

    #bannerHomeEcom2 button.owl-next,
    #bannerHomeEcom2 button.owl-prev {
        font-size: unset;
    }

    .fs-18 {
        font-size: 16px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 150px;
    }

    .boxBannerTitle {
        height: 150px;
    }

    #pills-tabAbout.nav-pills .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .bg-tabBanner1,
    .bg-tabBanner2,
    .bg-tabBanner3,
    .bg-tabBanner4,
    .bg-tabBanner5 {
        height: 160px;
    }

    .boxBannerText {
        height: 160px;
    }

    .text-tab a {
        bottom: 15px;
    }

    .bottomFoot {
        margin-top: 40px;
    }

    .cartStep #progressbar li span {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .btn-step {
        width: 30px;
        height: 30px;
        line-height: unset;
    }

    .warrantyStep #progressbar li .bg-warrantyStep1,
    .warrantyStep #progressbar li .bg-warrantyStep2,
    .warrantyStep #progressbar li .bg-warrantyStep3,
    .warrantyStep #progressbar li .bg-warrantyStep4 {
        width: 60px;
        height: 60px;
    }

    .warrantyStep #progressbar li span:after {
        top: 30px;
        left: 90%;
        width: 20%;
    }

    #progressbar li:after {
        width: 32%;
        left: -17%;
    }

    .table-bordered>:not(caption)>*>* {
        padding: 0;
    }

    #pills-tabCoupon.nav-pills .nav-item {
        margin-bottom: 10px;
    }
}

@media screen and (min-width:425px) and (max-width:767px) {
    #productWeekSlide .owl-prev {
        left: 64%;
    }
    .container-fluid.container-f60 {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: end;
    }

    #bannerHomeEcom .item img.bannerImageSlide {
        height: 200px;
    }

    #bannerHomeEcom button.owl-prev,
    #bannerHomeEcom button.owl-next {
        background-color: unset;
    }

    #bannerHomeEcom-corpor .item img.bannerImageSlide,
    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 200px;
    }

    .owl-theme .owl-dots {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bannerHomeEcom2 .owl-dots {
        bottom: 0;
        text-align: center;
    }

    .owl-theme .owl-dots .owl-dot span {
        margin: 2px 4px !important;
    }

    #bannerHomeEcom2 button.owl-next,
    #bannerHomeEcom2 button.owl-prev {
        font-size: unset;
    }

    .fs-18 {
        font-size: 16px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 150px;
    }

    .boxBannerTitle {
        height: 150px;
    }

    #pills-tabAbout.nav-pills .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .bg-tabBanner1,
    .bg-tabBanner2,
    .bg-tabBanner3,
    .bg-tabBanner4,
    .bg-tabBanner5 {
        height: 100%;
    }

    .boxBannerText {
        height: 100%;
    }

    .text-tab a {
        bottom: 35px;
        right: 10px;
    }


    .bottomFoot {
        margin-top: 40px;
    }

    .cartStep #progressbar li span {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .btn-step {
        width: 30px;
        height: 30px;
        line-height: unset;
    }

    .warrantyStep #progressbar li .bg-warrantyStep1,
    .warrantyStep #progressbar li .bg-warrantyStep2,
    .warrantyStep #progressbar li .bg-warrantyStep3,
    .warrantyStep #progressbar li .bg-warrantyStep4 {
        width: 60px;
        height: 60px;
    }

    .warrantyStep #progressbar li span:after {
        top: 30px;
        left: 90%;
        width: 20%;
    }

    #progressbar li:after {
        width: 32%;
        left: -17%;
    }

    .table-bordered>:not(caption)>*>* {
        padding: 0;
    }

    #pills-tabCoupon.nav-pills .nav-item {
        margin-bottom: 10px;
    }

}

@media screen and (min-width:768px) and (max-width:991px) {
    #productWeekSlide .owl-prev {
        left: 81%;
    }
    .topBannerTitle {
    margin-top: 166px;
}
    .card-product .labelS .s-promotion .badge, .card-product .labelS .s-sale .badge {
        font-size: 10px;
    }
    .container-fluid.container-f60 {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: end;
    }

    #bannerHomeEcom .item img.bannerImageSlide {
        height: 200px;
    }

    #bannerHomeEcom button.owl-prev,
    #bannerHomeEcom button.owl-next {
        background-color: unset;
    }

    #bannerHomeEcom-corpor .item img.bannerImageSlide,
    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 200px;
    }

    .owl-theme .owl-dots {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bannerHomeEcom2 .owl-dots {
        bottom: 0;
        text-align: center;
    }

    .owl-theme .owl-dots .owl-dot span {
        margin: 2px 4px !important;
    }

    #bannerHomeEcom2 button.owl-next,
    #bannerHomeEcom2 button.owl-prev {
        font-size: unset;
    }

    .fs-18 {
        font-size: 16px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 150px;
    }

    .boxBannerTitle {
        height: 150px;
    }

    #pills-tabAbout.nav-pills .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .bg-tabBanner1,
    .bg-tabBanner2,
    .bg-tabBanner3,
    .bg-tabBanner4,
    .bg-tabBanner5 {
        height: 100%;
    }

    .boxBannerText {
        height: 100%;
    }

    .text-tab a {
        bottom: 35px;
        right: 10px;
    }

    .bottomFoot {
        margin-top: 40px;
    }

    .cartStep #progressbar li span {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .btn-step {
        width: 30px;
        height: 30px;
        line-height: unset;
    }

    .warrantyStep #progressbar li .bg-warrantyStep1,
    .warrantyStep #progressbar li .bg-warrantyStep2,
    .warrantyStep #progressbar li .bg-warrantyStep3,
    .warrantyStep #progressbar li .bg-warrantyStep4 {
        width: 60px;
        height: 60px;
    }

    .warrantyStep #progressbar li span:after {
        top: 30px;
        left: 90%;
        width: 20%;
    }

    #progressbar li:after {
        width: 32%;
        left: -17%;
    }

    .table-bordered>:not(caption)>*>* {
        padding: 0;
    }

    #pills-tabCoupon.nav-pills .nav-item {
        margin-bottom: 10px;
    }
    .card-news-text  .card-body{
        padding: .625rem;
    }
    .card-news-text h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 33.5px;
        font-size: 14px;
    }
    .card-news-text span.fs-12{
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-news-text .text-news{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 36px;
        font-size: 12px;
    }
    .card-news-text .btn{
        font-size: 12px;
    }
}

@media screen and (min-width:992px) and (max-width:1279px) {
    #productWeekSlide .owl-prev {
    left: 86%;
}
    .card-product .labelS .s-promotion .badge, .card-product .labelS .s-sale .badge {
        font-size: 10px;
    }
    .container-fluid.container-f60 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 430px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 250px;
    }

    .boxBannerTitle {
        height: 250px;
    }

    #linkMenuTop li a {
        padding: 0.5rem 0.5rem;
        font-size: 14px;
    }
    .btn-navbtn{
        font-size: 10px;
    }
    #linkMenuTop .nav-link{
        font-size: 11px;
    }
    #linkMenuTop .nav-link{
        padding: 0.5rem 0.25rem;
    }
    #icon-navtop .nav-link{
        font-size: 12px;
    }
    .topBannerTitle {
    margin-top: 171px;
    }
    .card-news-text  .card-body{
        padding: .875rem 1.5rem;
    }
    .card-news-text h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 38px;
        font-size: 1rem;
    }

    .card-news-text .text-news{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 36px;
        font-size: 12px;
    }
    .card-news-text .btn{
        font-size: 14px;
    }
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    #productWeekSlide .owl-prev {
    left: 88%;
}
    .container-fluid.container-f60 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 430px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 250px;
    }

    .boxBannerTitle {
        height: 250px;
    }
    .btn-navbtn{
        font-size: 12px;
    }
    #linkMenuTop .nav-link{
        font-size: 12px;
    }
    #linkMenuTop .nav-link{
        padding: 0.5rem 0.5rem;
    }
    #icon-navtop .nav-link{
        font-size: 12px;
    }
    .card-news-text  .card-body{
        padding: 1rem 1.5rem;
    }
    .card-news-text h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 43px;
        font-size: 1.125rem;
    }

    .card-news-text .text-news{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 58px;
        font-size: 13px;
    }
}

@media screen and (min-width:1360px) and (max-width:1439px) {
    #productWeekSlide .owl-prev {
    left: 88%;
}
    .container-fluid.container-f60 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 430px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 250px;
    }

    .boxBannerTitle {
        height: 250px;
    }

    .btn-navbtn{
        font-size: 14px;
    }
    #linkMenuTop .nav-link{
        font-size: 14px;
    }
    #linkMenuTop .nav-link{
        padding: 0.5rem 0.5rem;
    }
    #icon-navtop .nav-link{
        font-size: 14px;
    }
    .card-news-text  .card-body{
        padding: 1rem 1.5rem;
    }
    .card-news-text h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 43px;
        font-size: 1.125rem;
    }

    .card-news-text .text-news{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 58px;
        font-size: 13px;
    }
}

@media screen and (min-width:1440px) and (max-width:1599px) {
    .container-fluid.container-f60 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 430px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 250px;
    }

    .boxBannerTitle {
        height: 250px;
    }
    .btn-navbtn{
        font-size: 14px;
    }
    #linkMenuTop .nav-link{
        font-size: 14px;
    }
    #linkMenuTop .nav-link{
        padding: 0.5rem 0.5rem;
    }
    #icon-navtop .nav-link{
        font-size: 14px;
    }
}

@media screen and (min-width:1600px) and (max-width:1919px) {
    .container-fluid.container-f60 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bannerHomeEcom2 .item img.bannerImageSlide {
        height: 430px;
    }

    .bg-bannerTitleAbout,
    .bg-bannerTitleProducts,
    .bg-bannerTitleDetailFlag,
    .bg-bannerTitleProductWarranty,
    .bg-bannerTitleNews,
    .bg-bannerTitleContact,
    .bg-bannerTitleWWU,
    .bg-bannerTitleProductsSearch,
    .bg-bannerTitleProductsAll {
        height: 250px;
    }

    .boxBannerTitle {
        height: 250px;
    }

}

@media screen and (min-width:1920px) and (max-width:2559px) {}

@media screen and (min-width:2560px) {}