@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Macondo&display=swap');
html,body {
 

/*  font-family: "Times New Roman", Times, serif;*/
/*  font-family: 'Source Serif Pro', serif;*/
/*font-family: 'Merriweather Sans', sans-serif;*/
font-family: 'Be Vietnam Pro', sans-serif;
}




header .navbar .navbar-nav .nav-link.active, header .navbar .navbar-nav .nav-link:hover {
	/*background: rgb(139 209 210 / 58%);*/

}
header .navbar .navbar-nav .nav-item {
	position: relative;
}
a {
	text-decoration: none;

	transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
a:hover {

}

.color-bg{
	background-color: #FFB5C6;
}
.bg-btn{
	background-color: #FF99CC;
}
.size-logo{
	width: 250px;
	height: 60px;
}

.bg-login{
	background-image: background-image: url('images/bg-slider-01.jpg');
}
.product-detail .progress-ratings {
  width: 267px;
  height: 128px;
}
.product-detail .progress-ratings .d-flex {
  margin-bottom:10px;
}
.product-detail .text-rating .rating-number {
  font-size: 48px;
  color: #212121;
  line-height: 1;
}
.product-detail .text-rating .rating-number span {
  font-size: 32px;
  color: #9e9e9e;
}
.product-detail .text-rating {
  margin-right: 60px;
}
.product-detail .show-rating{
  margin-bottom: 24px;
}
.rating {
  display: none;
  font-size: 16px;
  font-weight: bold;
  color: #feb914;
  white-space: nowrap; 
  line-height: 16px;
}
.rating .star {
  display: inline-block;
  position: relative;
  letter-spacing: 0.05em; 
}
.rating .star::before {
  display: inline-block;
  color: #ccc;
  content: '\2605';
  width: 14px;
  height: 14px; 
}
.rating .star::after {
  display: inline-block;
  position: absolute;
  content: '\2605';
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
  transition: all 0.1s linear;
  overflow: hidden; 
}
.rating:not([disabled]) .star:hover::after,
.rating .star.active::after {
  opacity: 1;
  width: 20px;
  height: 30px;
}
.comments-date {
  font-size: 12px;
  color: #757575;
}
.rating .star.active.half::after {
  width: 7px; 
}
.text-rating strong {
  font-size: 60px;
  font-weight: 400
}
.text-rating .rating {
  font-size: 33.25px;
  line-height: 1;
  margin-top: 5px;
}
.text-rating .rating .star::before {
  width: 25px;
  height: 12px;
}
.text-rating .rating:not([disabled]) .star:hover::after,
.text-rating .rating .star.active::after {
  opacity: 1;
  width: 50px;
  height: 60px;
}
.text-rating .rating .star.active.half::after {
  width: 15px; 
}
.text-rating small {
  color:#757575;
  font-size: 12px;
  margin-top: 5px;
}
.progress-rating {
  border-radius: 0;
  width: 138px !important;
  height: 12px;
}
.text-pro-rating {
  font-size: 12px;
  color: #212121;
}
.progress-rating .progress-bar{
  background-color:#feb914; 
  border-radius: 0;
}
.title-comment {
  font-size: 14px;
  color:#212121;
}
.number-rating {
  background: #feb914;
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  margin-left: 20px;
  font-size: 18px;
}
.list-comments .item-commets {
  border-bottom:1px solid #f1f1f1;
}
.list-comments .item-commets .comments-user {
  color:#808080;
  font-size: 12px;
}
.list-comments .item-commets .comments-content {
  font-size: 14px;
  color:#212121;
}
.list-products-item-ratings .rating {
  font-size: 12px;
}
.list-products-item-ratings .rating .star::before {
  width: 11px;
  height: 20px;
}
.list-products-item-ratings .rating:not([disabled]) .star:hover::after,
.list-products-item-ratings .rating .star.active::after {
  opacity: 1;
  width: 20px;
  height: 30px;
}
.list-products-item-ratings .rating .star.active.half::after {
  width: 5px; 
}
.list-products-item-ratings .text-mute {
  color:#ccc;
}

.ex3 {
  background-color: white;
  width: 100%;
  height: 420px;
  overflow: auto;

}

.fb{
  color:blue;
}
.ytb{
  color:red;
}

.intagram{
  color: orange;
}
*{
  margin:0;
  padding: 0;
}
body{
  width: 100%;
  height: 100%;
}
.cac-nut {
    width:  1000px;
    margin: auto;
    text-align:  center;
    margin-top: 100px;
}

.khoi{
  perspective: 1500px;
}
.hop-thoai {
    width:  500px;
    position:  absolute;
    top: 27%;
    left: 50%;
    margin-left:  -250px;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(-1500px) rotateY(70deg);
}
.hop-thoai img{
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
}
.hop-thoai button.close{
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  background:  red;
  width: 40px;
  height: 40px;
  color: #fafafa;
}
.bg-modal{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgb(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
}
.background{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgb(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
}
.show{
  opacity: 1;
  visibility: visible;
  transition: 0.6s;
}
.hop-thoai.show{
  opacity: 1;
  visibility: visible;
  animation: hien-ra 1s forwards; 
}
@-webkit-keyframes hien-ra{
  0%{
    transform: translateZ(-1500px) rotateY(70deg);
  }
  50%{
    transform: translateZ(0px) rotateY(70deg);
  }
  100%{
    transform: translateZ(0px) rotateY(0deg);
  }
}
.ngonngu{
  width: 150px;
  height: 40px;
  border: 0px;
}

.size-input-email{
 width: 245px;
 height: 40px;
}
.size-input-btn{
 width: 100px;height: 40px;
}
.bd-color{
  border-color: #3f4a3c33;
}

.slick-dots{
  margin-top: -15px;
}
.size-fb{
 width: 57px;
 height: 31px;
}
.size-tiktok{
  width: 40px;
 height: 36px;
}
.size-ytb{
 width: 65px;
 height: 32px;
}
.size-itg{
  width: 65px;
 height: 32px;
}
.size-zalo{
  width: 45px;
 height: 32px;
}



.size-fb1{
 width: 60px;
 height: 45px;
}
.size-tiktok1{
  width: 35px;
 height: 45px;
}
.size-ytb1{
 width: 60px;
 height: 35px;
}
.size-itg1{
  width: 60px;
 height: 40px;
}
.size-zalo1{
  width: 35px;
 height: 35px;
}
@media(max-width:3000px) {
  .imgSize{
    height: 100%;
  }

}
@media(max-width:400px) {
  .imgSize{
    height: 100%;
  }

}
.nones{
  coler:black;
}