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

[Table of contents]
1. Slide
2. Banner

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

.slide-box-home {
    float: left;
    overflow: hidden;
}

.slide-v1 {
    height: 359px;
    width: 900px;
}

@media(max-width:1024px) {
    .slide-v1 {
        height: auto;
        width: 685px;
    }
}

.slide-v2 {
    width: 600px;
    height: 585px;
}

.slide-v3 {
    width: 685px;
    height: 390px;
}

.dots-slide {
    position: absolute;
}

.slide-v1 .dots-slide {
    bottom: 20px;
    right: 20px;
}

.slide-v2 .dots-slide {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.slide-v3 .dots-slide {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.dot-slide-home {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 3px;
    outline: none;
}

.dot-slide-home span:before {
    content: "\f111";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.slide-v3 .dot-slide-home span:before {
    color: rgba(43, 43, 43, 0.60);
}

.dots-slide .active,
.dot-slide-home:hover {
    transform: scale(1.3);
}

.box-banner-small {
    overflow: hidden;
}

.box-banner-small div a {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.box-banner-small div {
    overflow: hidden;
}

.box-banner-small img {
    float: left;
    max-width: 100%;
    max-height: 100%;
}

.display-table {
    display: table;
}

.title-box-v2 .name-title-box,
.title-box-v3 .name-title-box {
    padding: 9px 10px;
}

.title-box-v2 .menu-title-box ul li,
.title-box-v3 .menu-title-box ul li {
    margin: 9px 0;
}

.box-banner-small-v1 {
    height: 226px;
    width: 900px;
}

.box-banner-small-v1 img {
    width: 100%;
    height: auto;
}

.box-banner-small-v2 {
    height: 585px;
    width: 300px;
}

.box-banner-small-v2 div {
    width: 100%;
    height: 50%;
}

.box-banner-small-v3 {
    width: 185px;
    margin-bottom: -5px;
}

.box-banner-small-v3 img:nth-of-type(2) {
    margin-top: 15px;
}

.category-image {
    width: 685px;
}

.img-categorys-slide {
    width: 100%;
    height: 133px;
}

.category-image-slide p {
    color: #2b2b2b;
    font-size: 13px;
    text-align: center;
    padding: 1px 0 5px 0;
}

/*--- CSS title box product ---*/
.title-box {
    box-sizing: border-box;
}

.title-hot-bg {
    background: #eb1a21;
}

.title-hot-bg:before {
    content: '';
    width: 0;
    position: absolute;
    height: 0;
    top: 0;
    border-top: 50px solid #eb1a21;
    right: -25px;
    border-right: 25px solid transparent;
}

.good-deals-v2 .text-default-color {
    padding: 0 0 0 25px;
}

.list-products-category>div {
    height: 500px;
    margin: -1px 0 0 0;
}

.list-products-category-v2 {
    height: 250px;
    float: left;
}

.title-category:before {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    border-left: 20px solid;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.view-all-product-category a {
    color: #231f20;
    font-size: 15px;
    font-weight: bold;
    line-height: 41px;
    text-transform: uppercase;
}

.view-all-product-category a:after {
    content: "\f101";
    font-family: FontAwesome;
    font-size: 17px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #ff0000;
    margin: 0px 15px 0 5px;
}

.full-wd {
    display: flex;
}

.title-green-bg {
    background: #7cb342;
}

.title-green-bg:before {
    border-left-color: #7cb342;
}

.title-green-bd {
    border-left: 5px solid #7cb342;
    margin-bottom: 5px !important;
}

.title-jungle-green-bg {
    background: #2bafa4;
}

.title-jungle-green-bg:before {
    border-left-color: #2bafa4;
}

.title-jungle-green-bd {
    border-left: 5px solid #2bafa4;
    margin-bottom: 5px !important;
}

.title-turquoise-bg {
    background: #00bdd2;
}

.title-turquoise-bg:before {
    border-left-color: #00bdd2;
}

.title-turquoise-bd {
    border-left: 5px solid #00bdd2;
    margin-bottom: 5px !important;
}

.title-gold-bg {
    background: #f8b93e;
}

.title-gold-bg:before {
    border-left-color: #f8b93e;
}

.title-gold-bd {
    border-left: 5px solid #f8b93e;
    margin-bottom: 5px !important;
}

.title-violet-bg {
    background: #ca64c2;
}

.title-violet-bg:before {
    border-left-color: #ca64c2;
}

.title-violet-bd {
    border-left: 5px solid #ca64c2;
    margin-bottom: 5px !important;
}

.title-magenta-bg {
    background: #006666;
}

.title-magenta-bg:before {
    border-left-color: #006666;
}

.title-magenta-bd {
    border-left: 5px solid #f57aa5;
    margin-bottom: 5px !important;
}

.title-orchild-bg {
    background: #cccc00;
}

.title-orchild-bg:before {
    border-left-color: #cccc00;
}

.title-orchild-bd {
    border-left: 5px solid #6170bc;
    margin-bottom: 5px !important;
}

.name-title-box {
    min-width: 200px;
    color: #fff;
    font-weight: bold;
    padding: 14.5px 10px;
    text-transform: uppercase;
    /* margin: -1px 0 -1px -1px; */
    justify-content: center;
    /* display: flex; */
}

.name-title-box img {
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 15px;
}

.title-hot-bg img {
    left: 490px;
}

.name-title-box p {
    padding: 0 0 0 35px;
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.25px;

}

@media(min-width:1200px) {
    .name-title-box p {

        font-size: 18px;

    }
}

.title-hot-bg p {
    padding: 0 0 0 50px;
}

.menu-title-box ul li {
    list-style: none;
    float: left;
    padding: 0 15px;
    margin: 14.5px 0;
    border-right: 1px solid #dddddd;
}

.menu-title-box ul li:last-child {
    border: none;
}

.menu-title-box {
    float: right;
}

.menu-title-box li a {
    color: #231f20;
    letter-spacing: 0.25px;
    font-size: 14px;
    transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
}

@media(min-width:1200px) {
    .menu-title-box li a {
        font-size: 15px;
    }
}

.menu-title-box li a:hover {
    color: #000;
}

/*--- CSS BOX Product Category ---*/
.list-logo-category {
    height: 500px;
    overflow: hidden;
}

.list-logo-category-v1 {
    width: 200px;
}

.list-logo-category ul li {
    position: relative;
    list-style: none;
}

.list-logo-category ul li a {
    display: block;
}

.list-logo-category-v2 ul li {
    width: calc(100% / 6);
    float: left;
    height: 98px;
}

.list-logo-category-v1 ul li {
    height: calc(500px / 6);
}

.list-logo-category ul li a:hover img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.list-logo-category ul li img {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
}

.banner-category {
    overflow: hidden;
}

.banner-category img {
    width: 100%
}

.banner-category-v1 {
    height: 500px;
    width: 470px;
}

.banner-category-v2 {
    height: 207px;
}

.list-products-category {
    width: calc(100% - 670px);
    min-height: 500px;
}

.product-no-ranking img {
    /* max-height: 100%; */
    max-width: 100%;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.name-product-no-ranking {
    bottom: -22px;
    /* left: 30px; */
    /* width: calc(100% - 30px); */
    padding: 10px;
}

.product-no-ranking {
    overflow: hidden;
    min-height: calc(100% / 2);
    padding: 10px;
}

/*--- CSS Product Percent Two ---*/
.banner-percent-product {
    width: 100%;
    overflow: hidden;
}

.banner-percent-product img {
    float: left;
}

.view-all-product-category {
    margin: 3px 0;
}

/*--- CSS Slide Brand ---*/
.slide-box-home .item {
    justify-content: center !important;
    display: grid;
}

.slide-box-home .item img {
    object-fit: contain;
    height: 350px;
}

.nav-next .owl-prev,
.nav-prev .owl-next {
    display: none;
}

.nav-slide-brand {
    position: absolute;
    top: 85px;
}

@media(min-width:480px) and (max-width:1024px) {
    .nav-slide-brand {
        display: none;
    }
}

.nav-slide-brand button {
    background: none;
    border: 1px solid #dedede;
    color: #dedede;
    padding: 20px 10px;
    font-size: 25px;
    cursor: pointer;
    outline: none;
    transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
}

.nav-slide-brand button:hover {
    border: 1px solid #9a9a9a;
    color: #9a9a9a;
}

.nav-prev {
    left: -35px;
    top: 20%;
}

.nav-next {
    right: -35px;
    top: 20%;

}

.logo-brand-son {
    width: 100%;
    display: block;
    height: 120px;
    overflow: hidden;
}

.logo-brand-son img {
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/*-- CSS Home Page V2 --*/

/*-- CSS Deals --*/

.deals-col-2,
.deals-col-1,
.deals-row-2 {
    margin: 0 10px 10px 0;
}

.deals-col-2 img,
.deals-col-1 img,
.deals-row-2 img {
    width: 100%;
}

.deals-col-2 {
    width: calc(100% - 10px);
}

.deals-row-2,
.deals-col-1 {
    width: calc(100% / 2 - 10px);
}

.list-logo-category-v2 {
    height: 98px;
}

.deal-hot-v2 {
    height: 580px;
    display: flex;
    flex-direction: row;
}

.deal-hot-v2>div:nth-of-type(1) {
    width: calc(100% / 2 + 10px);
}

.deal-hot-v2>div:nth-of-type(2) {
    width: calc(100% / 2);
}

.deal-hot-v2>div:nth-of-type(2) .deals-col-2 {
    margin-bottom: 10px;
    width: 100%;
}

.deal-hot-v2>div:nth-of-type(2) .deals-col-1 {
    margin: 0 0 10px 10px;
}

.deal-hot-v2>div:nth-of-type(2) .deals-row-2,
.deal-hot-v2>div:nth-of-type(2) .deals-col-1 {
    width: calc(100% / 2 - 5px);
}

.box-content-product-home-v2 .product-no-ranking {
    height: 290px;
}

/*--- CSS Homage V3 ---*/

.banner-pecent-3-top>div {
    width: calc(100% / 3 - 10px);
}

.banner-pecent-3-top>div img {
    max-height: 100%;
    max-width: 100%;
}

.list-logo-top-v3 ul li {
    list-style: none;
    float: left;
    width: calc(100% / 6);
    position: relative;
    height: 120px;
    overflow: hidden;
}

.list-logo-top-v3 ul li img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    transform: translate(-50%, -50%);
}

.banner-category-v3 {
    width: 293px;
}

.box-content-product-home-v3 {
    width: calc(100% - 293px);
}

.banner-category-v3,
.box-content-product-home-v3,
.box-content-product-home-v3>div {
    height: 585px;
}
@media only screen and (max-width: 600px) {
    .slide-box-home .item {
        height: 20em;
    }
  }