@charset "utf-8";
/* CSS Document */

body { margin:0px; padding:0px;}

.bg { width:970px; height:250px; background-image:url("images/BG.jpg"); position:relative; overflow:hidden; z-index:100;}

.triangle { position:absolute; z-index:203; animation: triangle 16s ease-out infinite 0s, chuyen 2s infinite 1s;; mix-blend-mode: screen; }

.h1 { position:absolute; z-index:201; animation: h1 16s ease-out infinite 0s; }

.h2 { position:absolute; z-index:202; animation: h2 16s ease-out infinite 0s; visibility: hidden; }

.h3 { position:absolute; z-index:203; animation: h3 16s ease-out infinite 0s; visibility: hidden; }

.logo { position:absolute; z-index:600; animation: logo 16s ease-out infinite 0s; }

.sohuu { position:absolute; z-index:502; animation: sohuu 16s ease-in infinite 0s;}

.thanhtoan { position:absolute; z-index:501; animation: thanhtoan 16s ease-out infinite 0s;  visibility: hidden; }

.sao1 { position:absolute; z-index:700; left: 393px; top: 1px; animation: sao1 16s ease-out infinite 0s; mix-blend-mode: screen; }

.sao2 { position:absolute; z-index:700; left: 470px; top: 1px; animation: sao2 16s ease-out infinite 0s; mix-blend-mode: screen; }

.saogiua { position:absolute; z-index:699; animation: saogiua 16s ease-out infinite 0s; mix-blend-mode: screen; }

.saologo { position:absolute; z-index:705; left: 142px; top: 29px; animation: saologo 16s ease-out infinite 0s; mix-blend-mode: screen; }

.sao3 { position:absolute; z-index:710; left: 47px; top: 84px; animation: sao3 16s ease-out infinite 0s; mix-blend-mode: screen; }

.sao4 { position:absolute; z-index:710; left: 288px; top: 84px; animation: sao4 16s ease-out infinite 0s; mix-blend-mode: screen; }

.sao5 { position:absolute; z-index:716; left: -10px; top: 80px; animation: sao5 16s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden; }

.sao6 { position:absolute; z-index:716; left: 315px; top: 80px; animation: sao6 16s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden; }

.xoet1 { position:absolute; z-index:715; left: -31px; top: 175px; animation: xoet1 16s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden; }

.xoet2 { position:absolute; z-index:715; left: 228px; top: 205px; animation: xoet2 16s ease-out infinite 0s; mix-blend-mode: screen; visibility: hidden; }


@keyframes triangle {
    0% {opacity:1;}
    50% {opacity:0.8;}
    100% {opcity:1;}
}

@keyframes chuyen {
    from {mix-blend-mode:screen;}
    to {mix-blend-mode:lighten;}
}

@keyframes h1 {
    0% {opacity:1; transform:  scale(1,1) translateX(0px);}
    6%, 8% {opacity:1; transform: scale(1.1,1.1) translateX(10px);}
    14%, 20% {opacity:1; transform: scale(1,1) translateX(0px);}
    27%, 100% {opacity:0; transform: scale(1,1) translateX(0px);}
    
}

@keyframes h2 {
    0%, 20% {opacity:0; transform: scale(1,1);}
    27%, 30% {opacity:1; transform: scale(1,1); visibility: visible;}
    40%, 42% {opacity:1; transform: scale(1.1,1.1);}
    49%, 50% {opacity:1; transform: scale(1,1);}
    57%, 100% {opacity:0; transform: scale(1,1);}
}

@keyframes h3 {
    0%, 50% {opacity:0; transform: translateX(0px);}
    57%, 60% {opacity:1; transform: translateX(0px); visibility: visible;}
    70%, 72% {opacity:1; transform: translateX(0px);}
    79%, 80% {opacity:1; transform: translateX(0px);}
    87%, 100% {opacity:1; transform: translateX(0px);}
}



@keyframes saologo {
    0%, 3% {opacity:1; transform: rotate(0deg) scale(0,0); }
    7% {opacity:1; transform: rotate(360deg) scale(2,2);}
    15%, 29% {opacity:0; transform: rotate(360deg) scale(1,1);}
    30% {opacity:1; transform: rotate(0deg) scale(0,0); }
    37% {opacity:1; transform: rotate(360deg) scale(2,2);}
    45%, 100% {opacity:0; transform: rotate(360deg) scale(1,1);}
    
}

@keyframes sohuu {
    0%, 4% {opacity:0; transform: translateX(-20px);}
    8%, 50% {opacity:1; transform: translateX(0px);}
    52%, 100% {opacity:0; transform: translateX(0px);}
}

@keyframes sao3 {
    0%, 8% {opacity:1; transform: rotate(0deg) scale(0,0); left: 47px;}
    15% {opacity:1; transform: rotate(360deg) scale(1,1); left: 288px;}
    20% {opacity:1; transform: rotate(420deg) scale(1,1); left: 288px;}
    25%, 100% {opacity:0; transform: rotate(420deg) scale(0,0); left: 288px;}
}

@keyframes sao4 {
    0%, 8% {opacity:1; transform: rotate(0deg) scale(0,0); left: 288px;}
    15% {opacity:1; transform: rotate(360deg) scale(1,1); left: 47px;}
    20% {opacity:1; transform: rotate(420deg) scale(1,1); left: 47px;}
    25%, 100% {opacity:0; transform: rotate(420deg) scale(0,0); left: 47px;}
}

@keyframes saogiua {
    0%, 16% {opacity:0; transform: translateY(80px);}
    30% {opacity:1; transform: translateY(-50px);}
    100% {opacity:1; transform: translateY(0px);}
}


@keyframes sao1 {
    0%, 20% {opacity:1; transform: rotate(0deg) scale(0,0); left: 412px; top: 59px;}
    35%, 40% {opacity:1; transform: rotate(360deg) scale(1,1); left: 393px; top: 1px;}
    45% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 393px; top: 1px;}
    55% {opacity:1; transform: rotate(720deg) scale(1,1); left: 393px; top: 1px;}
    65% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 393px; top: 1px;}
    75% {opacity:1; transform: rotate(720deg) scale(1,1); left: 393px; top: 1px;}
    85% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 393px; top: 1px;}
    95%, 100% {opacity:1; transform: rotate(360deg) scale(1,1); left: 393px; top: 1px;}
}

@keyframes sao2 {
    0%, 20% {opacity:1; transform: rotate(0deg) scale(0,0); left: 454px; top: 57px;}
    35%, 40% {opacity:1; transform: rotate(360deg) scale(1,1); left: 470px; top: 1px;}
    45% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 470px; top: 1px;}
    55% {opacity:1; transform: rotate(720deg) scale(1,1); left: 470px; top: 1px;}
    65% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 470px; top: 1px;}
    75% {opacity:1; transform: rotate(720deg) scale(1,1); left: 470px; top: 1px;}
    85% {opacity:1; transform: rotate(360deg) scale(0.2,0.2); left: 470px; top: 1px;}
    95%, 100% {opacity:1; transform: rotate(360deg) scale(1,1); left: 470px; top: 1px;}
}

@keyframes thanhtoan {
    0%, 53% {opacity:0; transform: translateX(-20px);}
    58%, 100% {opacity:1; transform: translateX(0px); visibility: visible;}
    
}

@keyframes sao5 {
    0%, 60% {opacity:1; transform: rotate(0deg) scale(0,0); left: -10px;}
    67% {opacity:1; transform: rotate(360deg) scale(1,1); left: 163px; visibility: visible;}
    72% {opacity:1; transform: rotate(420deg) scale(1,1); left: 163px;}
    77%, 100% {opacity:0; transform: rotate(420deg) scale(0,0); left: 163px;}
}

@keyframes sao6 {
    0%, 60% {opacity:1; transform: rotate(0deg) scale(0,0); left: 315px;}
    67% {opacity:1; transform: rotate(360deg) scale(1,1); left: 163px; visibility: visible;}
    72% {opacity:1; transform: rotate(420deg) scale(1,1); left: 163px;}
    77%, 100% {opacity:0; transform: rotate(420deg) scale(0,0); left: 163px;}
}

@keyframes xoet1 {
    0%, 77% {opacity:0; transform: scale(1,1); left: -50px;}
    84% {opacity:1; transform: scale(1,1);  left: 228px; visibility: visible;}
    89% {opacity:0;transform: scale(1,1); left: 228px;}
    92%, 100% {opacity:0;transform: scale(0,0);  left: 228px;}
}

@keyframes xoet2 {
    0%, 77% {opacity:0; transform: scale(1,1); left: 228px;}
    84% {opacity:1; transform: scale(1,1);  left: -50px; visibility: visible;}
    89%, 100% {opacity:0;transform: scale(1,1); left: -50px;}
    92%, 100% {opacity:0;transform: scale(0,0);  left: -50px;}
}