/* CSS Document */



/**********************************************************/
/************************ Product *************************/

.product--container{ width: 90%; margin: 0 auto; }

.nav--category{ text-align: center; }
.nav--category ul{ display: flex; flex-flow: row wrap; align-items: center; justify-content: center; }
.nav--category ul li{ margin: 10px; }
.nav--category ul li a{ display: flex; align-items: center; gap: 10px; background-color: var(--Purple-50); padding: 6px 20px; border-radius: 30px; font-size: 16px; font-weight: 500; color: var(--primary); }
.nav--category ul li a span{ display: inline-flex; align-items: center; justify-content: center; background-image: url('../images/icon/bg-icon.svg'); background-repeat: no-repeat; background-size: cover; width: 40px; height: 40px; }
.nav--category ul li a span img{ width: 30px; }
.nav--category ul li a.active, .nav--category ul li a:hover{ background-color: var(--Purple-700); color: var(--white); }

.i-btn{ display: inline-block; margin: 20px 0; font-size: 16px; color: var(--grey200); text-decoration: underline; }
.i-btn:hover{ text-decoration: underline; color: var(--Purple-700); }
.i-btn:focus{ text-decoration: underline; color: var(--grey200);  }
.paragraph { height: 70px; overflow: hidden;  }
.paragraph_all { overflow: visible; height: auto; }

#nav--category ul.collapse:not(.show) {
  height: 70px !important;
  overflow: hidden;
  display: flex;
}

#nav--category ul.collapsing {
  min-height: 70px !important;
}

#nav--category a.i-btn.collapsed:after  {
  content: 'View more categories';
}

#nav--category a.i-btn:not(.collapsed):after {
  content: 'Hide';
}


.product--search{ max-width: 420px; margin: 30px auto; }
.product--search .form-control{ border: 1px solid var(--grey150); border-radius: 24px; color: var(--black); height: calc(2.25em + 0.75rem + 2px); padding: 0.75rem 1rem; border-right: 0; }
.btn--search{ border-color: var(--grey150); border-left: 0; }
.btn--search img{ filter: var(--filter-grey150); }


.product--search .form-control::-webkit-input-placeholder,
.product--search .form-control::-moz-placeholder,
.product--search .form-control:-ms-input-placeholder,
.product--search .form-control::-ms-input-placeholder,
.product--search .form-control::placeholder {
  color: var(--grey200);
}



.product--list{ max-width: 920px; width: 100%; margin: 50px auto 0; }
.product--list .boxcard{ margin: 20px; }
.product--list .boxcard-body h3, .product--list .boxcard-body p{ 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left; 
}

@media (max-width: 991px){

  .product--list .boxcard{ margin: 20px 0; }

}
@media (max-width: 576px){

  .product--container{ width: 100%; }

  .nav--category ul li{ margin: 4px; }
  .nav--category ul li a{ gap: 5px; padding: 5px 13px; font-size: 14px; }
  .nav--category ul li a span{ width: 30px; height: 30px; }
  .nav--category ul li a span img{ width: 25px; }
  .paragraph{ height: 50px; }
  .paragraph_all { height: auto; }
  #nav--category ul.collapse:not(.show){ height: 50px !important; }

  .product--list{ margin-top: 20px; }
  .product--list .row{ margin-right: -5px; margin-left: -5px; }
  .product--list .row > [class*="col-"]{ padding-left: 5px; padding-right: 5px; }

}




/**********************************************************/
/**********************************************************/


.product--detail{ margin-bottom: 100px; }

.product--img{ display: flex; align-items: center; }
.product--img .product--thumb{ width: 100px; }
.product--img .product--big{ width: calc(100% - 200px); position: relative;  display: flex; align-items: center; justify-content: center; background-color: var(--Purple-50); border-radius: 24px; padding: 50px 0; }
.product--img .product--thumb ul{ display: flex; flex-direction: column; flex-wrap: wrap; }
.product--img .product--thumb li{ width: 70px; margin: 5px 0; }
.product--img .product--thumb li a{ display: flex; align-items: center; justify-content: center; background-color: var(--Purple-50); border-radius: 10px; padding: 10px 0; border: 1px solid var(--Purple-50); }
.product--img .product--thumb li a:hover{ background-color: var(--Purple-100); }
.product--img .product--thumb li a.active{ border-color: var(--Purple-500); }
.product--img .product--thumb li img{ width: 50px; }


.made_easy{ position: absolute; top: 20px; right: 20px; z-index: 9; }
.made_easy img{ width: 60px; }


@media (max-width: 1599px){

  .product--img .product--big{ width: calc(100% - 150px); }

}
@media (max-width: 1199px){

  .product--img .product--big{ width: calc(100% - 120px); }

}
@media (max-width: 991px){


  .product--img .product--thumb{ width: 70px; }
  .product--img .product--big{ width: calc(100% - 70px); }
  .product--img .product--thumb li{ width: 60px; margin: 3px 5px; }
  .product--img .product--thumb li img{ width: 40px; }


}
@media (max-width: 767px){

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

  .product--img{ flex-direction: column-reverse; margin-bottom: 30px; }
  .product--img .product--thumb,
  .product--img .product--big{ width: 100%; }
  .product--img .product--big{ margin-bottom: 10px; }
  .product--img .product--thumb li{ width: 75px; margin: 0 5px; }
  .product--img .product--thumb li img{ width: 50px; }

  .product--img .product--thumb ul{ justify-content: left; flex-direction: row; flex-wrap: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 10px; }
  .product--img .product--thumb li a{ width: 75px; }

}




.boxproduct--detail h1{ font-size: var(--txt-h2); color: var(--Purple-900); margin-bottom: 10px; }
.boxproduct--detail p{ color: var(--black); }

.title-detaiil{ font-family: var(--font-head); font-size: 16px; line-height: 1.5; color: var(--primary); margin-bottom: 10px; }


.boxproduct--qualification ul li{ position: relative; color: var(--primary); padding-left: 25px; margin-bottom: 10px; }
.boxproduct--qualification ul li::before{ content: ''; position: absolute; top: 0; left: 0; background-image: url('../images/icon/icn-bullet.svg'); width: 17px; height: 20px; background-repeat: no-repeat; background-size: cover; }


.boxproduct--quantity ul{ display: flex; flex-flow: row wrap; align-items: center; gap: 20px; }
.boxproduct--quantity a{ display: block; background-color: var(--Purple-100); font-size: 16px; color: var(--Purple-700); border-radius: 24px; padding: 6px 16px; }
.boxproduct--quantity a:hover,
.boxproduct--quantity a.active{ background-color: var(--Purple-700); color: var(--white); }


.boxproduct--texture{ display: flex; align-items: center; gap: 20px; }
.boxproduct--texture li img{ width: 65px; border-radius: 50%; }


.boxproduct--shop,
.boxproduct--shop ul{ display: flex; align-items: center; gap: 20px; }


.slide--recommend .owl-carousel .owl-nav{ top: calc(50% - 25px); }