.air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(../img/wave.png);
  background-size: 1000px 100px
}
.titile-slider .air.air1{
  animation: wave 30s linear infinite;
  z-index: 4;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
.titile-slider .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 3;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
.titile-slider .air.air3{
  animation: wave 30s linear infinite;
  z-index: 2;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
.titile-slider .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 1;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: 1000px; 
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: -1000px; 
  }
}


/*-----------------------------------------------------*/
.block-snow{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 70;
}
.in-snow{
  position: relative;
  height: 100000px;
  width: 100%;
}
#snow{
  max-width: 1440px;


  overflow: hidden;

}
/*.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(white, white);
   Workaround for Chromium's selective color inversion 
  border-radius: 50%;
  filter: drop-shadow(0 0 10px white);
  z-index: 70;
}*/


/*--------------------------------------------------------*/

.snowflake {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
 @-moz-keyframes 
spin { 100% {
-moz-transform: rotate(360deg);
}
}
 @-webkit-keyframes 
spin { 100% {
-webkit-transform: rotate(360deg);
}
}
 @keyframes 
spin { 100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}


/*----------------------------------------------------*/

.animation-pulse{animation: buttonBoxShadow-black 2s infinite;transition: all .7s ease-in-out;}
.animation-pulse:hover{animation: buttonBoxShadow 2s infinite;transition: all .7s ease-in-out;}

@keyframes buttonBoxShadow {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--mau-background-chinh-hover);
        box-shadow: 0 0 0 0 var(--mau-background-chinh-hover);
    }

    70% {
        -moz-box-shadow: 0 0 0 20px transparent;
        box-shadow: 0 0 0 10px transparent
    }

    100% {
        -moz-box-shadow: 0 0 0 0 transparent;
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes buttonBoxShadow-black {
  0% {
      -moz-box-shadow: 0 0 0 0 var(--background-btn-about);
      box-shadow: 0 0 0 0 var(--background-btn-about);
  }

  70% {
      -moz-box-shadow: 0 0 0 20px transparent;
      box-shadow: 0 0 0 10px transparent
  }

  100% {
      -moz-box-shadow: 0 0 0 0 transparent;
      box-shadow: 0 0 0 0 transparent
  }
}

/*----------------------------------------------------*/

.logo-youtb{
  animation: buttonBoxShadow-ytb-black 2s infinite;  
  transition: all .7s ease-in-out;
  border-radius: 100%;
  width: inherit;
  height: inherit;
  display: flex;
  position: relative;
}
.logo-youtb:before{
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  animation: buttonBoxShadow-bf-black 2s infinite;
  animation-delay: 1s;
  transition: all .7s ease-in-out;
  border-radius: inherit;
}
.logo-youtb:after{
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  animation: buttonBoxShadow-af-black 2s infinite;
  animation-delay: 1.5s;
  transition: all .7s ease-in-out;
  border-radius: inherit;
}

/*.logo-youtb:hover{animation: buttonBoxShadow-ytb 2s infinite;transition: all .7s ease-in-out;}

@keyframes buttonBoxShadow-ytb {
    0% {
        -moz-box-shadow: 0 0 0 20px var(--mau-background-chinh-hover);
        box-shadow: 0 0 0 10px var(--mau-background-chinh-hover);
    }

    70% {
        -moz-box-shadow: 0 0 0 50px transparent;
        box-shadow: 0 0 0 25px transparent
    }

    100% {
        -moz-box-shadow: 0 0 0 100px transparent;
        box-shadow: 0 0 0 50px transparent
    }
}*/

@keyframes buttonBoxShadow-ytb-black {
  0% {
      -moz-box-shadow: 0 0 0 0px var(--background-btn-ytb);
      box-shadow: 0 0 0 0px var(--background-btn-ytb);
  }

  70% {
      -moz-box-shadow: 0 0 0 30px transparent;
      box-shadow: 0 0 0 15px transparent
  }

  100% {
      -moz-box-shadow: 0 0 0 0px transparent;
      box-shadow: 0 0 0 0px transparent
  }
}

@keyframes buttonBoxShadow-bf-black {
  0% {
      -moz-box-shadow: 0 0 0 0px var(--background-btn-ytb);
      box-shadow: 0 0 0 0px var(--background-btn-ytb);
  }

  70% {
      -moz-box-shadow: 0 0 0 60px transparent;
      box-shadow: 0 0 0 30px transparent
  }

  100% {
      -moz-box-shadow: 0 0 0 0px transparent;
      box-shadow: 0 0 0 0px transparent
  }
}

@keyframes buttonBoxShadow-af-black {
  0% {
      -moz-box-shadow: 0 0 0 0px var(--background-btn-ytb);
      box-shadow: 0 0 0 0px var(--background-btn-ytb);
  }

  70% {
      -moz-box-shadow: 0 0 0 100px transparent;
      box-shadow: 0 0 0 50px transparent
  }

  100% {
      -moz-box-shadow: 0 0 0 0px transparent;
      box-shadow: 0 0 0 0px transparent
  }
}

/*----------------------- ((( Hieu ung rung co song ))) --------------------------*/

.quick-alo-phone{
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: transparent;
  cursor: pointer;
  z-index: 109;
  transition: visibility .5s;
  bottom:100px;left: -50px;
}

.quick-alo-ph-circle{
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid var(--mau-chinh);
  opacity: .1;
  -webkit-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  -moz-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  -ms-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  -o-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.quick-alo-ph-circle-fill{
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  position: absolute;
  background-color: var(--mau-chinh);   
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: .1;
  -webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.quick-alo-ph-img-circle{
  width: 60px;
  height: 60px;
  top: 70px;
  left: 70px;
  position: absolute;
  background-color: var(--mau-chinh);
/*  background: url("../icon/hotline-f37821.png") no-repeat center center;*/
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 1;
  -webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  -moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  -ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  -o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.quick-alo-ph-img-circle:hover{background-color: var(--mau-background-chinh);}

@-moz-keyframes quick-alo-circle-anim{
0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}
30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}
100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}
}

@-webkit-keyframes quick-alo-circle-anim{
0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}
30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}
100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}
}

@-o-keyframes quick-alo-circle-anim{
0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}
30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}
100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}
}

@-moz-keyframes quick-alo-circle-fill-anim{
0%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-moz-transform:rotate(0) -moz-scale(1) skew(1deg);opacity:.2}
100%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}

@-webkit-keyframes quick-alo-circle-fill-anim{
0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.2}
100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}

@-o-keyframes quick-alo-circle-fill-anim{
0%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-o-transform:rotate(0) scale(1) skew(1deg);opacity:.2}
100%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}

@-moz-keyframes quick-alo-circle-img-anim{
0%{transform:rotate(0) scale(1) skew(1deg)}
10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-moz-transform:rotate(0) scale(1) skew(1deg)}
100%{-moz-transform:rotate(0) scale(1) skew(1deg)}
}

@-webkit-keyframes quick-alo-circle-img-anim{
0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}
}

@-o-keyframes quick-alo-circle-img-anim{
0%{-o-transform:rotate(0) scale(1) skew(1deg)}
10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-o-transform:rotate(0) scale(1) skew(1deg)}
100%{-o-transform:rotate(0) scale(1) skew(1deg)}
}

@-moz-keyframes fadeInRight{
0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}

@-webkit-keyframes fadeInRight{
0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}

@-o-keyframes fadeInRight{
0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}
100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}

/*----------------------------------------------------------------*/