/*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 my { 
    0% { color: #000; } 
   
    50% { color: #f00; } 
   
    100% { color: #000; } 
    }
   
   @-moz-keyframes my { 
    0% { color: #000; } 
   
    50% { color: #f00; } 
   
    100% { color: #000; } 
    }
   
   @-o-keyframes my { 
    0% { color: #000; } 
   
    50% { color: #f00; } 
   
    100% { color: #000; } 
    }
   
   @keyframes my { 
    0% { color: #000; } 
   
    50% { color: #000; } 
   
    100% { color: #000; } 
    }
   
   .number-hotline { -webkit-animation: my 700ms infinite; -moz-animation: my 700ms infinite; -o-animation: my 700ms infinite; animation: my 700ms infinite;font-family: RobotoBold; }
   
   
   @-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 } 


/* 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%)}
  }