/*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) } 
 }
@keyframes mymove { 
 0% { transform: rotate(0deg); } 
 
 100% { transform: rotate(360deg); } 
 }
 
 
 @keyframes shake { 
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
 }
 

 
 @-webkit-keyframes shine { 100% { left: 125%; } 
 }
 
 @keyframes shine { 100% { left: 125%; } 
 }
 
 @-webkit-keyframes about-left { 
 0% { transform: translate(0px, 0px); } 
 25% { transform: translate(25%, 0px); } 
 50% { transform: translate(25%, 40px); } 
 75% { transform: translate(0%, 40px); } 
 100% { transform: translate(0%, 0px); } 
 }
 
 @-webkit-keyframes about-right { 
 0% { transform: translate(0px, 0px); } 
 25% { transform: translate(-65%, 0px); } 
 50% { transform: translate(-65%, -100px); } 
 75% { transform: translate(0%, -100px); } 
 100% { transform: translate(0px, 0px); } 
 }
 
@keyframes rotation { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(180deg); } 
 }
 
.slideInDown1 { -webkit-animation-name:slideInDown1; animation-name:slideInDown1 } 
/*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) } 
.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; } 
/*Xoay*/
.dichvu__item:hover .dichvu__img { transform: rotateY(360deg); transition: all 0.6s linear; } 
/*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; } 
/*Nhấp nháy*/
.blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } @-moz-keyframes blinker { 
 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } 
 }@-webkit-keyframes blinker { 
 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } 
 }@keyframes blinker { 
 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } 
 }
.xoaylogo img { animation: mymove 3s; } 
.hover_shake img:hover { animation: shake 0.5s; transform: translate3d(0, 0, 0); perspective: 1000px; animation-iteration-count: infinite; } 
.hover_shake1 img { animation: shake 0.5s; transform: translate3d(0, 0, 0); perspective: 1000px; animation-iteration-count: infinite; } 
.img_hover { overflow: hidden; position: relative; padding: 0; z-index: 0; } 
.img_hover:before { position: absolute; top: 0; left: -85%; z-index: 22; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 
.img_hover:hover:before { -webkit-animation: shine .6s; animation: shine .6s; } 
.img-hover img:hover { transition: all 0.3s; transform: translateY(-5px); } 
.img-hover img { transition: all 0.3s; } 


/* https://css-tricks.com/css-hover-effects-background-masks-3d/ */
.hover-trick { --b: 0.1em; --c: #000; color: #0000; padding-block: var(--b); background: linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 40% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat; -webkit-background-clip: text,padding-box; background-clip: text,padding-box; transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s)); } 
 .hover-trick:hover { --_p: 85%; --_s: .3s; } 
 
.hover-run { --c: #D30202; color: #515151; background: 
linear-gradient(90deg,#fff 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat; -webkit-background-clip: text,padding-box; background-clip: text,padding-box; transition: 0.5s; } 
.hover-run:hover { --_p: 100%;border-radius: 5px;} 
.hover-run:hover a { color: #fff !important;} 
.hover-run:hover img { filter: brightness(0) saturate(100%) invert(100%) sepia(96%) saturate(19%) hue-rotate(359deg) brightness(104%) contrast(100%);}