/*Hiệu ứng menu*/
.centery, .centery-after:after, .centery-before:before { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.ease-in-200{-webkit-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; -ms-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in;}
@-webkit-keyframes slideInDown1 {
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes slideInDown1 {
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.slideInDown1{-webkit-animation-name:slideInDown1;animation-name:slideInDown1}
/**/
.fixed { position:fixed !important;left:0;right:0;top:0; z-index:999;animation: slideInDown1 1s 0s; }
/*Hieu ung*/
.hvr-float-shadow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}
.hvr-float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,transparent 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}
.hvr-float-shadow:active,.hvr-float-shadow:focus,.hvr-float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}
.hvr-float-shadow:active:before,.hvr-float-shadow:focus:before,.hvr-float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}

.hvr-sweep-to-top { display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent; position:relative; -webkit-transition-property:color; transition-property:color; -webkit-transition-duration:.3s; transition-duration:.3s}
.hvr-sweep-to-top:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#3a0304; -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-transition-property:transform; transition-property:transform; -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.hvr-sweep-to-top:active,.hvr-sweep-to-top:focus,.hvr-sweep-to-top:hover { color:#fff}
.hvr-sweep-to-top:active:before,.hvr-sweep-to-top:focus:before,.hvr-sweep-to-top:hover:before { -webkit-transform:scaleY(1); transform:scaleY(1)}
.hvr-sweep-to-right { display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent; position:relative; -webkit-transition-property:color; transition-property:color; -webkit-transition-duration:.3s; transition-duration:.3s}
.hvr-sweep-to-right:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#33cbcc; -webkit-transform:scaleX(0); transform:scaleX(0); -webkit-transform-origin:0 50%; transform-origin:0 50%; -webkit-transition-property:transform; transition-property:transform; -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.hvr-sweep-to-right:active,.hvr-sweep-to-right:focus,.hvr-sweep-to-right:hover { color:#fff}
.hvr-sweep-to-right:active:before,.hvr-sweep-to-right:focus:before,.hvr-sweep-to-right:hover:before { -webkit-transform:scaleX(1); transform:scaleX(1)}
.btn-hover {position: relative;padding: 10px 20px;border-radius: 7px;border: 1px solid rgb(61, 106, 255);font-size: 14px;text-transform: uppercase;font-weight: 600;letter-spacing: 2px;background: transparent;color: #fff;overflow: hidden;box-shadow: 0 0 0 0 transparent;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
.btn-hover:hover {background: rgb(61, 106, 255);box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
.btn-hover:hover::before {-webkit-animation: sh02 0.5s 0s linear;-moz-animation: sh02 0.5s 0s linear;animation: sh02 0.5s 0s linear;}
.btn-hover::before {content: '';display: block;width: 0px;height: 86%;position: absolute;top: 7%;left: 0%;opacity: 0;background: #fff;box-shadow: 0 0 50px 30px #fff;-webkit-transform: skewX(-20deg);-moz-transform: skewX(-20deg);-ms-transform: skewX(-20deg);-o-transform: skewX(-20deg);transform: skewX(-20deg);}
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}
  
.codepen-button{display:block;cursor:pointer;color:#fff;margin:0 auto;position:relative;text-decoration:none;font-weight:600;border-radius:6px;overflow:hidden;padding:3px;isolation:isolate}
.codepen-button::before{content:"";position:absolute;top:0;left:0;width:400%;height:100%;background:linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);background-size:25% 100%;animation:an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;animation-play-state:paused;translate:-5% 0;transition:translate .25s ease-out}
.codepen-button:hover::before{animation-play-state:running;transition-duration:.75s;translate:0 0}
@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
to{transform:translateX(-25%)}
}
.codepen-button span{position:relative;display:block;padding:1rem 1.5rem;font-size:1.1rem;background:#000;border-radius:3px;height:100%}


.btn-hover:active {box-shadow: 0 0 0 0 transparent;-webkit-transition: box-shadow 0.2s ease-in;-moz-transition: box-shadow 0.2s ease-in;transition: box-shadow 0.2s ease-in;}
  
.box{ position:relative;  transition:0.5s;  -webkit-transition:0.5s}
.box::before, .box::after{ 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}
.foo::before{ border-bottom:3px solid #e00c09;  border-left:3px solid #e00c09;  -webkit-transform-origin:0 100%}
.foo::after{ border-top:3px solid #e00c09;  border-right:3px solid #e00c09;  -webkit-transform-origin:100% 0%}
.box:hover::after, .box:hover::before{ -webkit-transform:scale(1)}

.hover_sang2{position:relative; overflow:hidden;}
.hover_sang2:before{position: absolute;top: 0;left: -85%;z-index: 10;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.hover_sang2:hover:before {transition: 1s;left: 100%;}
.hover_sang{ display: block; position: relative; overflow: hidden;}
.hover_sang:hover:before {left: 0;top: 0;}
.hover_sang:before {left: -100%;top: -100%;}
.hover_sang:after {bottom: -100%;right: -100%;}
.hover_sang:before, .hover_sang:after {display: block;}
.hover_sang:before, .hover_sang:after {background: rgba(255,255,255,0.3) none repeat scroll 0 0;content: "";height: 100%;position: absolute;-webkit-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;width: 100%;z-index: 8;}
.hover_sang:hover img {-webkit-transform: scale(1.2,1.2);-moz-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);-ms-transform: scale(1.2,1.2); transform: scale(1.2,1.2);}
.hover_sang img {transition: 0.7s;}
.hover_sang:hover:after {right: 0;bottom: 0;}


.hover_xam { position:relative; overflow:hidden; }
.hover_xam::before { content:""; background:rgba(255, 255, 255, .5); bottom:0; left:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }.hover_xam::after { content:""; background:rgba(255, 255, 255, .5); top:0; right:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }.hover_xam:hover::before, .hover_xam:hover::after { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-transition-duration:1.3s; -moz-transition-duration:1.3s; -ms-transition-duration:1.3s; -o-transition-duration:1.3s; transition-duration:1.3s; -khtml-opacity:0; -o-opacity:0; -ms-opacity:0; -webkit-opacity:0; -moz-opacity:0; opacity:0; height:100%; width:100%; }

/*Phone anima*/
.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animate__tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/* Loading */
.mask { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999999999; overflow: hidden; } 
.mask span:nth-child(1) { height: 30vh; top: 0; -webkit-transition-delay: .3s; transition-delay: .3s; } 
.mask span:nth-child(2) { height: 40vh; top: 30vh; -webkit-transition-delay: .5s; transition-delay: .5s; } 
.mask span:nth-child(3) { height: 30vh; top: 70vh; -webkit-transition-delay: .6s; transition-delay: .6s; } 
.mask span { width: 100%; position: absolute; right: 0; background: -webkit-linear-gradient(90deg,#fff 0,#fff 100%); background: linear-gradient(90deg,#fff 0,#fff 100%); -webkit-transition: width .9s ease-in-out; transition: width .9s ease-in-out; } 
.mask.hideg span { width: 0; } 
.mask.hideg { pointer-events: none; }
.loadicon { position: fixed; top: 50%; left: 50%; width: 200px; height: 140px; margin: -70px 0 0 -100px; z-index: 110000; } 
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; } 
#loading.finish { z-index: -9999; } 
#loading.finish .logo_2 span, #loading.finish .logo_2 img { display: none; } 
#loading .logo_2 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all ease 0.5s; } 
#loading .logo_2 span { display: block; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.5); -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-animation: Ani 2s infinite; animation: Ani 2s infinite; width: 120px; height: 120px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 2; z-index: 9999999999; } 
#loading .logo_2 img { position: relative; max-width: 80px; z-index: 4;} 
/* @-webkit-keyframes Ani { 
	0% { box-shadow:0 0 0 #242424; border:1px solid #242424; -webkit-transform:scale(0); transform:scale(0); } 
}
.start-animate { z-index: 999 !important; position: absolute; animation: star linear 1.75s infinite; -moz-animation: star linear 1.75s infinite; -webkit-animation: star linear 1.75s infinite; -o-animation: star linear 1.75s infinite; } 
@keyframes star { 
	0% { transform: rotate(0) scale(0); } 
	50% { transform: rotate(180deg) scale(1.5); } 
	100% { transform: rotate(360deg) scale(0); } 
} */
/*Line*/
.animate-border{position:relative;display:block;width:100px;height:3px;background:var(--color-main);overflow:hidden}
.animate-border:after{position:absolute;content:"";width:30px;height:3px;left:15px;bottom:0;border-left:10px solid #fff;border-right:10px solid #fff;-webkit-animation:animborder 2s linear infinite;animation:animborder 2s linear infinite}
@-webkit-keyframes animborder {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{-webkit-transform:translateX(113px);transform:translateX(113px)}
}
@keyframes animborder {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{-webkit-transform:translateX(113px);transform:translateX(113px)}
}
@keyframes xoay {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  
    100% { 
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg);
    }
  }