/*test ring ring*/
@keyframes ring {
  from {
      transform:rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
      transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
      transform: rotate3d(0,0,1,15deg);
  }
  26%, 38%, 50%, 62%, 74% {
      transform: rotate3d(0,0,1,0deg);
  }
  29%, 41%, 53%, 65%, 77% {
      transform: rotate3d(0,0,1,-15deg);
  }
  80% {
      transform:rotate3d(0, 0, 1, 0deg);
  }
}
.animate__tada
{
  animation-name: ring;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}



/* Text nhap nhay */
@-webkit-keyframes myy { 
  0% { color: #00A54F; } 
 
  50% { color: #f00; } 
 
  100% { color: #00A54F; } 
  }
 
 @-moz-keyframes myy { 
  0% { color: #00A54F; } 
 
  50% { color: #f00; } 
 
  100% { color: #00A54F; } 
  }
 
 @-o-keyframes myy { 
  0% { color: #00A54F; } 
 
  50% { color: #f00; } 
 
  100% { color: #00A54F; } 
  }
 
 @keyframes myy { 
  0% { color: #00A54F; } 
 
  50% { color: #f00; } 
 
  100% { color: #00A54F; } 
  }
 
 .number_hotline {-webkit-animation: myy 700ms infinite;-moz-animation: myy 700ms infinite;-o-animation: myy 700ms infinite;animation: myy 700ms infinite;}
 
 
 @-webkit-keyframes rotate-center { 
  0% { -webkit-transform: rotate(0); transform: rotate(0); } 
 
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
  }
 
 @keyframes rotate-center { 
  0% { -webkit-transform: rotate(0); transform: rotate(0); } 
 
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
  }
 
.xoaytron { -webkit-animation: rotate-center 10s infinite; animation: rotate-center 10s infinite } 


@-webkit-keyframes rotating1 {
  /* from{
      -webkit-transform: rotate(0deg);
  } */
  to{
      -webkit-transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating1 2s linear infinite;
  animation: rotating1 2s infinite
}

/* hover dao hinhf*/
@keyframes key_one{0%{left:calc(100% - 500px);top:0px;z-index:2;}
25%{left:calc(100% - 500px);top:calc(100% - 380px);z-index:1;}
50%{left:0px;top:calc(100% - 380px);z-index:2;}
75%{left:0px;top:0px;z-index:1;}
100%{left:calc(100% - 500px);top:0px;z-index:2;}
}
@keyframes key_two{0%{left:0px;top:calc(100% - 380px);z-index:1;}
25%{left:0px;top:0px;z-index:2;}
50%{left:calc(100% - 500px);top:0px;z-index:1;}
75%{left:calc(100% - 500px);top:calc(100% - 380px);z-index:2;}
100%{left:0px;top:calc(100% - 380px);z-index:1;}
}
.keyframes_img{position:absolute;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;animation-duration:8s;animation-iteration-count:infinite;z-index:999999}
.intro-1{-webkit-animation-name:key_one;animation-name:key_one;top:0px;left:calc(100% - 500px);z-index:1;height:380px;}
.intro-2{top:calc(100% - 380px);left:0px;z-index:0;-webkit-animation-name:key_two;animation-name:key_two;height:380px;}


@keyframes changprd {0% {
    right:0%;
    top:0%;
    z-index:1;
  }50% {
    right:25%;
    top:10%;
  }100% {
    right:0%;
    top:0%;
    z-index:0;
  }
}

@keyframes changprd1 {0% {
    left:0%;
    top:10%;
    right:unset;
    z-index:0;
  }50% {
    left:25%;
    top:0%;
    right:unset;
  }100% {
    left:0%;
    top:10%;
    right:unset;
    z-index:1;
  }
}
.hinh-gioithieu {
  position:relative;
  width:100%;
}

.hinh1 img,
.hinh2 img {
  max-width:100%;
}

.hinh1 {
  animation-name:changprd;
  animation-duration:5s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.hinh2 {
  animation-name:changprd1;
  animation-duration:5s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

.hinh1,
.hinh2 {
  position:absolute;
}
.hinh2:before {
  content:'';
  border:10px solid #fff;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  width:100px;
  height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

/* Click phone */

.goidienthoai .content { box-sizing: border-box; width: 100%; max-width: 200px; position: absolute; bottom: -500px; left: 0; background-color: #ab0407ab; border: 3px solid #ab0407; border-bottom: none; z-index: 999; text-align: left; line-height: normal } 
.goidienthoai .content a { display: block; padding: 10px 15px; font-size: 14px; color: #fff; font-weight: bold; background: none } 
.goidienthoai .content.active { bottom: 100% } 
/* Hover dmc */
.items { padding: 10px 15px 0; margin: 0 auto; text-align: center; } 
.items:hover img { filter: brightness(1.05); } 
.items:hover a { color: #52A346; } 
.items > a { --deg: 100deg; --start-color: #000; display: block; position: relative; /*border: 5px solid transparent; */margin: 0 auto; transition: all 0.3s ease-out; } 
.items h3 a { text-align: center; margin: 12px 0px 0px; padding: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.2; } 
.items:hover img { animation: tada 2s infinite; } 
@keyframes tada { 
0% { transform: scaleX(1); } 
10%,
20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 
30%,
50%,
70%,
90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 
40%,
60%,
80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } 
to { transform: scaleX(1); } 
}
.bike { animation: mymove 5s linear 2s infinite; } 
@keyframes mymove { 
0% { left: 0px; } 

100% { left: 100%; } 
}

/* Text nhap nhay */
@-webkit-keyframes my { 
0% { color: #fff; } 

50% { color: #fff200; } 

100% { color: #fff; } 
}

@-moz-keyframes my { 
0% { color: #fff; } 

50% { color: #fff200; } 

100% { color: #fff; } 
}

@-o-keyframes my { 
0% { color: #fff; } 

50% { color: #fff200; } 

100% { color: #fff; } 
}

@keyframes my { 
0% { color: #fff; } 

50% { color: #fff200; } 

100% { color: #fff; } 
}

.price-per { -webkit-animation: my 700ms infinite; -moz-animation: my 700ms infinite; -o-animation: my 700ms infinite; animation: my 700ms infinite; } 
.content_product{overflow: hidden;/* height:400px; */}
.content_product.baonoidung{height: 100% !important;transition: all 0.6s linear;}
.readmore:hover {
   border-color: #DB1E24;
   color: #DB1E24;
}
.thugon:hover {
   border-color: #B97D47;
   color: #DB1E24;
}
.readmore:hover:after {
   content: '';
   width: 0;
   transition: 0.5s;
   right: 0;
   border-top: 6px solid #DB1E24;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   display: inline-block;
   vertical-align: middle;
   margin: -2px 0 0 5px;
}
.thugon:hover:after {
   content: '';
   width: 0;
   transition: 0.5s;
   right: 0;
   border-bottom: 6px solid #DB1E24;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   display: inline-block;
   vertical-align: middle;
   margin: -2px 0 0 5px;
}

.readmore {
   width: 100%;
   display: block;
   overflow: hidden;
   position: relative;
   line-height: 40px;
   font-size: 14px;
   transition: 0.5s;
   color: #502600;
   cursor: pointer;
   border-radius: 4px;
   text-align: center;
   text-decoration: none !important;
}
.small_readmore {
   text-align: center;
   background: #fff;
}

.small_thugon .thugon {
   display: inline-block;
   width: auto;
   padding: 0px 15px;
}
.small_thugon {
   text-align: center;
   background: #fff;
   border: solid 1px #E7E7E7;
   position: relative;
   left: -1px;
   width: 310px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}
.thugon {
   text-decoration: none !important;
   width: 100%;
   display: block;
   overflow: hidden;
   position: relative;
   line-height: 35px;
   transition: 0.5s;
   font-size: 14px;
   color: #DB1E24;
   cursor: pointer;
   border-radius: 4px;
   text-align: center;
   top: 3px;
}
.show-more::before {
   height: 55px;
   margin-top: -45px;
   display: block;
}
.small_readmore .readmore {
   display: inline-block;
   width: auto;
}
.readmore {
   width: 100%;
   display: block;
   overflow: hidden;
   position: relative;
   font-size: 14px;
   transition: 0.5s;
   color: #DB1E24;
   cursor: pointer;
   border-radius: 4px;
   text-align: center;
   text-decoration: none !important;
   justify-content: center;
}
.readmore:after {
   content: '';
   width: 0;
   transition: 0.5s;
   right: 0;
   border-top: 6px solid #DB1E24;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   display: inline-block;
   vertical-align: middle;
   margin: -2px 0 0 5px;
}
.thugon:after {
   content: '';
   width: 0;
   transition: 0.5s;
   right: 0;
   border-bottom: 6px solid #DB1E24;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   display: inline-block;
   vertical-align: middle;
   margin: -2px 0 0 5px;
}


.ringing-bell { display: block; } 
.faa-ring { color: red } @-webkit-keyframes ring { 
0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg) } 2% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 4% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg) } 6% { -webkit-transform: rotate(18deg); transform: rotate(18deg) } 8% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg) } 10% { -webkit-transform: rotate(22deg); transform: rotate(22deg) } 12% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg) } 14% { -webkit-transform: rotate(18deg); transform: rotate(18deg) } 16% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg) } 18% { -webkit-transform: rotate(12deg); transform: rotate(12deg) } 20% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 
}@keyframes ring { 
0% { -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg) } 2% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg) } 4% { -webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg) } 6% { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg) } 8% { -webkit-transform: rotate(-22deg); -ms-transform: rotate(-22deg); transform: rotate(-22deg) } 10% { -webkit-transform: rotate(22deg); -ms-transform: rotate(22deg); transform: rotate(22deg) } 12% { -webkit-transform: rotate(-18deg); -ms-transform: rotate(-18deg); transform: rotate(-18deg) } 14% { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg) } 16% { -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg) } 18% { -webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg) } 20% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 
}.faa-ring.animated, .faa-ring.animated-hover:hover, .faa-parent.animated-hover:hover>.faa-ring { -webkit-animation: ring 2s ease infinite; animation: ring 2s ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial } 


/* Hover Chuyen anh 2 hinh */
/* .pic-sanpham img { width:100%; } 
a.img2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: all 3s; } 
.pic-sanpham:hover a.img2 { opacity: 1; transition: all 1s; }  */

.scroll_main { position: absolute; bottom: 20px; left: 50%; cursor: pointer; transform: translateX(-50%); z-index: 11; } 
.scroll_main span { width: 85px; height: 122px; background: url(../images/scrool.png) no-repeat top center; cursor: pointer; -webkit-animation: DownUp 1s ease-in-out backwards infinite; -moz-animation: DownUp 1s ease-in-out backwards infinite; -o-animation: DownUp 1s ease-in-out backwards infinite; -ms-animation: DownUp 1s ease-in-out backwards infinite; display: block; } 
@-webkit-keyframes DownUp { 0%,
100% { -webkit-transform: translateY(-10px); } 
50% { -webkit-transform: translateY(10px); } 
}
@-moz-keyframes DownUp { 0%,
100% { -moz-transform: translateY(-10px); } 
50% { -moz-transform: translateY(10px); } 
}
@-o-keyframes DownUp { 0%,
100% { -o-transform: translateY(-10px); } 
50% { -o-transform: translateY(10px); } 
}
@keyframes DownUp { 0%,
100% { transform: translateY(-10px); } 
50% { transform: translateY(10px); } 
}


/*HOVER ROTATE */
.hrv-rotateY img { transition: all 0.9s ease 0s; }
.hrv-rotateY:hover { text-decoration: none; }
.hrv-rotateY:hover img { transition: all 0.7s ease 0s; transform: rotateY(180deg); text-decoration: none; }

/* Hover box after */
.box { position: relative; transition: 0.5s; -webkit-transition: 0.5s; } 

.box:hover::after, .box:hover::before { -webkit-transform: scale(1); } 

.box:hover .text-split1 { padding-top: 10px; transition: 0.5s; -webkit-transition: 0.5s; } 

.foo { position: relative; } 

.foo::after { position: absolute; border-bottom: 3px solid #2bacb5; border-left: 3px solid #2bacb5; -webkit-transform-origin: 0 100%; width: 100%; height: 100%; z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transform: scale(0); transition: 0.5s; pointer-events: none; } 
.foo::before { position: absolute; border-top: 3px solid #2bacb5; border-right: 3px solid #2bacb5; -webkit-transform-origin: 100% 0%; width: 100%; height: 100%; z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transform: scale(0); transition: 0.5s; pointer-events: none; }



@-webkit-keyframes rotating {
	from {
	  -webkit-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
  
	to {
	  -webkit-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  
  @keyframes rotating {
	from {
	  -ms-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -webkit-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
  
	to {
	  -ms-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -webkit-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  
  .hotline-fix {
	position: fixed;
	left: 20px;
	bottom: 90px;
	z-index: 11;
	}
  
  .hotline-fix:before {
	position: absolute;
	left: -14px;
	top: -14px;
	content: "";
	width: 76px;
	height: 76px;
	background: url(../images/dt1.png) no-repeat;
	-webkit-animation: rotating 5s linear infinite;
	-moz-animation: rotating 5s linear infinite;
	-ms-animation: rotating 5s linear infinite;
	-o-animation: rotating 5s linear infinite;
	animation: rotating 5s linear infinite;
  }
  
  .hotline-fix a {
	display: block;
	width: 208px;
	padding: 6px 0 6px 55px;
	border-radius: 24px;
	height: 48px;
	background: var(--color-red);
	color: #fef4f4;
	font-size: 13px;
	line-height: 1.2;
	position: relative;
	z-index: 1;
	}
  
  .hotline-fix a:before {
	position: absolute;
	left: 4px;
	top: 4px;
	content: "";
	width: 40px;
	height: 40px;
	background: #fff url(../images/dt2.png) no-repeat;
	-webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
	-moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
	-ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
	-o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
	animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
	border-radius: 50%;
  }
  
  @-moz-keyframes coccoc-alo-circle-img-anim {
	0% {
	  transform: rotate(0) scale(1) skew(1deg);
	}
  
	10%,
	30% {
	  -moz-transform: rotate(-25deg) scale(1) skew(1deg);
	}
  
	20%,
	40% {
	  -moz-transform: rotate(25deg) scale(1) skew(1deg);
	}
  
	100%,
	50% {
	  -moz-transform: rotate(0) scale(1) skew(1deg);
	}
  }
  
  @-webkit-keyframes coccoc-alo-circle-img-anim {
	0%,
	100%,
	50% {
	  -webkit-transform: rotate(0) scale(1) skew(1deg);
	}
  
	10%,
	30% {
	  -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
	}
  
	20%,
	40% {
	  -webkit-transform: rotate(25deg) scale(1) skew(1deg);
	}
  }
  
  @-o-keyframes coccoc-alo-circle-img-anim {
	0%,
	100%,
	50% {
	  -o-transform: rotate(0) scale(1) skew(1deg);
	}
  
	10%,
	30% {
	  -o-transform: rotate(-25deg) scale(1) skew(1deg);
	}
  
	20%,
	40% {
	  -o-transform: rotate(25deg) scale(1) skew(1deg);
	}
  }
  
  .hotline-fix a span {
	display: block;
	color: #ffd500;
	overflow: hidden;
	font-size: 17px;
	font-family: "RobotoBold";
	}