@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body{

  font-family: 'Roboto', sans-serif;

    font-size: 15px;

    line-height: 22px;

}

.container-fluid {

  width: 100%;

  overflow: hidden;

}

.font-primary{

  font-family: 'Great Vibes', cursive;

}







    .slider-home  .owl-prev{

      position: absolute;

      right: 80px;

      bottom:20px;

    }

    .slider-home  .owl-next{

      position: absolute;

      right: 30px;

      bottom: 20px;

    }

 .owl-nav >div{

  background-color: #fff;

  width: 40px;

  height: 40px;

  text-align: center;

  line-height: 40px;

  color: #333;

  font-size: 15px;



  border: 1px solid #1e3d37;



  padding: 0;

    }

    .owl-prev{

      position: absolute;

      top: 50%;

      left: 0;

      transform: translateY(-50%);

      }

   .owl-next{

  

      position: absolute;

          

      top: 50%;

      right: 0;

          

      transform: translateY(-50%);

      }

      .slider-home  .owl-prev{

        left: 20px;

      }

      .slider-home  .owl-next{

        right: 20px;

      }

    .slider-home .owl-dots .owl-dot{

      width: 12px;

      height: 12px;

      border: 1px solid #ddd;

      border-radius: 50%;

      display: inline-block;

      margin:3px;

    }

    .slider-home .owl-dots .owl-dot.active{

      border: 1px solid #ed811e;

      background: #ed811e;

    }

    .slider-home .owl-dots{

      position: absolute;

      left: 50%;

      transform: translateX(-50%);

      bottom: 20px;

    }

    img {

        -webkit-transition: all 0.7s ease;

        transition: all 0.7s ease;

    }

    .support-online {

        position: fixed;

        z-index: 999;

        left: 15px;

        bottom: 30px;

        top: auto !important

      }



      .support-online a {

        position: relative;

        margin: 20px 10px;

        text-align: left;

        width: 40px;

        height: 40px

      }



      .support-online i {

        width: 40px;

        height: 40px;

        background: #43a1f3;

        color: #fff;

        border-radius: 100%;

        font-size: 20px;

        text-align: center;

        line-height: 1.9;

        position: relative;

        z-index: 999

      }



      .support-online a {

        display: block

      }



      .support-online a span {

        border-radius: 2px;

        text-align: center;

        background: #fb2644;

        padding: 9px;

        display: none;

        width: 180px;

        margin-left: 10px;

        position: absolute;

        color: #ffffff;

        z-index: 999;

        top: 0px;

        left: 40px;

        transition: all 0.2s ease-in-out 0s;

        -moz-animation: headerAnimation 0.7s 1;

        -webkit-animation: headerAnimation 0.7s 1;

        -o-animation: headerAnimation 0.7s 1;

        animation: headerAnimation 0.7s 1

      }



      .support-online a:hover span {

        display: block

      }



      .support-online a span::before {

        content: "";

        width: 0;

        height: 0;

        border-style: solid;

        border-width: 10px 10px 10px 0;

        border-color: transparent #fb2644 transparent transparent;

        position: absolute;

        left: -10px;

        top: 10px

      }



      .kenit-alo-circle-fill {

        width: 60px;

        height: 60px;

        top: -10px;

        position: absolute;

        -webkit-transition: all 0.1s ease-in-out;

        -moz-transition: all 0.1s ease-in-out;

        -ms-transition: all 0.1s ease-in-out;

        -o-transition: all 0.1s ease-in-out;

        transition: all 0.1s ease-in-out;

        -webkit-border-radius: 100%;

        -moz-border-radius: 100%;

        border-radius: 100%;

        border: 2px solid transparent;

        -webkit-transition: all .1s;

        -moz-transition: all .1s;

        -o-transition: all .1s;

        transition: all .1s;

        background-color: rgba(0, 175, 242, 0.5);

        opacity: .75;

        right: -10px

      }



      .kenit-alo-circle {

        width: 50px;

        height: 50px;

        top: -5px;

        right: -5px;

        position: absolute;

        background-color: transparent;

        -webkit-border-radius: 100%;

        -moz-border-radius: 100%;

        border-radius: 100%;

        border: 2px solid rgba(30, 30, 30, 0.4);

        opacity: .1;

        border-color: #0089B9;

        opacity: .5

      }



      .support-online .btn-support {

        cursor: pointer

      }



      @-webkit-keyframes pulse {

        0% {

          -webkit-transform: scale(1.1);

          transform: scale(1.1)

        }



        50% {

          -webkit-transform: scale(0.8);

          transform: scale(0.8)

        }



        100% {

          -webkit-transform: scale(1.1);

          transform: scale(1.1)

        }

      }



      @keyframes pulse {

        0% {

          -webkit-transform: scale(1.1);

          -ms-transform: scale(1.1);

          transform: scale(1.1)

        }



        50% {

          -webkit-transform: scale(0.8);

          -ms-transform: scale(0.8);

          transform: scale(0.8)

        }



        100% {

          -webkit-transform: scale(1.1);

          -ms-transform: scale(1.1);

          transform: scale(1.1)

        }

      }

      #scrollUp {

        background: #fff;

        color: #333;

        border: 1px solid #333;

        bottom: 40px;

        right: 40px;

        border-radius: 100px;

        height: 47px;

        width: 47px;

        font-size: 18px;

        text-align: center;

        line-height: 45px;

        box-shadow: 0 0 15px 0px rgb(50 50 50 / 20%);

        transition: 0.3s;

        display: inline-block;

        position: fixed;

        bottom: 62px;

        right: 10px;

        cursor: pointer;

        z-index: 99999;

      }

      #scrollUp:hover {

        background-color: #333;

        color: #fff;

      }







  .btn-active-view {

    background-image: linear-gradient(to right,#85b348,#92cc2e,#85b348);

    color: #fff;

    padding: 7px 20px;

    border-radius: 20px;

}

.hover-zoom:hover img{

  transform: scale(1.05);

}

.hover-zoom{

  overflow: hidden;

}

.item-product  .img img{

  height: 270px;

  object-fit: cover;

}

.item-product  img{

  height: 260px;

}

.item-product .title-3 {

  overflow: hidden;

    text-overflow: ellipsis;

    line-height: 23px;

    -webkit-line-clamp: 2;

    height: 46px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

}

.gellary-section .item img{

  width: 100%;

  height: 230px;

  object-fit: cover;

}









body{

  position: relative;

}

.nav-btn.navSidebar-button{

  position: fixed;

  right: 0;

  top: 30%;

  transform: translateY(-50%);

  background: #ed811e;

  width: 50px;

  height: 40px;

  text-align: center;

  border-radius: 5px;

}



ul.tabs li{

  background: none;

  color: #222;

  display: inline-block;

  padding: 10px 15px;

  cursor: pointer;

}



ul.tabs li.current{

  background: #a82225;

  color: #fff;

}



.tab-content{

  display: none;





}



.tab-content.current{

  display: inherit;

}





.slider-raleted-product  .owl-next{

  position: absolute;

  top: 36%;

  right: 0;

}

.slider-raleted-product  .owl-prev{

  position: absolute;

  top: 36%;

  left: 0;

}

.main-new .content-new  .item .img img{

  height: 300px;

}

.main-new .content-new  .item  .nav-img  .title-3 {

  overflow: hidden;

    text-overflow: ellipsis;

    line-height: 23px;

    -webkit-line-clamp: 2;

    height: 46px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

}

.main-new .content-new  .item  .nav-img .desc, .main-new-detail .other-new .item .nav-img .desc{

  overflow: hidden;

  text-overflow: ellipsis;

  line-height: 23px;

  -webkit-line-clamp: 3;

  height: 69px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

}

.content-content p{

  margin-bottom: 10px;

}

.other-new .item-product .img img{

   height: 200px;

}

.slider-other-new   .owl-next{

  position: absolute;

  top: 26%;

  right: 0;

}

.slider-other-new  .owl-prev{

  position: absolute;

  top: 26%;

  left: 0;

}

.map iframe {

  width: 100%;

  height: 500px;

}

.header-mobile .holine-mobile{

  right: 10px;

  position: absolute;

  bottom: -24px;

  

}

.header-mobile .logo{

  position: absolute;

  bottom: -18px;

  z-index: 11;

  left: 10px;

}

header .top-header  {

  display: none;

}



.header-phone .phone-1 .nav-phone-1{



  width: 214px;

  left: 50%;

  transform: translateX(-50%);

  display: none;

}

.header-phone .phone-2 .nav-phone-2{



  width: 214px;

  left: 50%;

  transform: translateX(-50%);

  display: none;

}

ul.tabs{

  border-bottom: 1px solid #ddd;

}

ul.tabs li{

  background: none;

  color: #222;

  display: inline-block;

  padding: 10px 15px;

  cursor: pointer;

  text-transform: uppercase;

}



ul.tabs li.current{

  background: #a82225;

  color: #fff;

}



.tab-content{

  display: none;

 

}



.tab-content.current{

  display: inherit;

}



.click-phone-1  i{

  padding-right: 5px;

}

.click-phone-2  i{

  padding-right: 5px;

}

.main-menu >ul>li{

  margin-left:10px!important;

}

.header-pc .cot-1{

  width: 14%;

}

.header-pc .cot-2{

  width: 86%;

}

.header-pc .content-header{

  position: relative;



}

.header-pc .content-header .main-logo{

  position: absolute;

  left: 10px;

  top: 0;

  z-index: 2;

}

.Menu-Section .title-primary {

  position: relative;



}

.Menu-Section .title-primary  .View-all {

  position: absolute;

  top: 2px;

  right: 0;

}

.gellary-section  .title-primary {

  position: relative;



}

.gellary-section .title-primary  .View-all {

  position: absolute;

  top: 2px;

  right: 0;

}

  @media only screen and (max-width: 1024px) {

  

  }

@media only screen and (max-width: 768px){

  .nav-btn.navSidebar-button{

    top: 16%;

  } 

  header .logo img{

    width: 100px;

    height: auto;

  }

  header>div>.absolute{

    position: static;

    padding: 10px 0;

  }

  header{

    position: relative;

  }

  .nav-btn.navSidebar-button{

        transform: inherit;

        top: 36px;

        right: 15px;

        position: absolute;

    }

    .slider-home .owl-dots{

      bottom: 10px;

    }

    .breadcrumb {

      margin-top: 35px;

    }

    .header-mobile .logo img {

      width: 130px!important;

      height: 130px!important;

  }

  }



@media only screen and (max-width: 736px){

  .item-product .img img{

    height: 173px;

  }

  .gellary-section .item img{

    height: 100px;

  }

  #main{

    width: 100%;

    overflow: hidden;

  }

  .header-phone .phone-2 .nav-phone-2{

    left: initial;

    right: 0;

    transform: initial;

    text-align: right;

  }

  .Menu-Section  .title-primary {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

  }

  .gellary-section  .title-primary {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

  }

  footer{

    margin-top: 20px!important;

  }

  .Menu-Section .title-primary .View-all{

    top: 0;

  }

  .gellary-section .title-primary .View-all{

    top: 0;

  }

  .header-mobile .logo img{

    width: 110px!important;

    height: 110px!important;

  }

}



@media only screen and (max-width: 676px){



}



footer .item iframe{

  width: 100%;

  max-height: 250px;

}

@media(max-width:1023px){

  .Services-home{

    padding-top: 40px;

  }

}



.phone-2 .nav-phone-2 a:last-child, .phone-1 .nav-phone-1 a:last-child{

  background: #017cc1;

  border-color: #017cc1;

}



.phone-2 .nav-phone-2 a:last-child:hover, .phone-1 .nav-phone-1 a:last-child:hover{

  background: #fff;

}



@media(max-width:767px){

  footer .item iframe{

    width: 80% !important;

    margin: 0 auto !important;

  }

}

@media(max-width:736px){

  .Services-home .top-icon a.text-f14{

    font-size: 9px;

  }

}