body{
    margin: 0;
    padding: 0;
}

#container{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    font-family:Arial, sans-serif;
    max-width: 640px;
}
.page_content{
    top: 0 !important;
    width:640px;
    height:320px;
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: all 500ms ease-in-out !important;
    transition: all 500ms ease-in-out !important;
    position: absolute; overflow:hidden;
    box-sizing: border-box;
    border: 0px solid rgba(0, 0, 0, 0.0);
} 
img{
    position: absolute;
}

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

.canhdao { position:absolute;  z-index:800; left: -10px; top: 30px; animation: canhdao 16s ease-out infinite 0s; }

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

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

.willow { position:absolute;  z-index:142; left: 470px; top: -22px; animation: willow 16s ease-out infinite 0s; visibility: hidden;  }

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

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

.xu { position:absolute;  z-index:380; left: 239px; top: 79px; animation: xu 16s ease-out infinite 0s; }

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

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

.boy-red { position:absolute;  z-index:304; animation: boy-red 16s ease-out infinite 0s; }

.boy-brown { position:absolute;  z-index:301; animation: boy-brown 16s ease-out infinite 0s; }

.girl-blue { position:absolute;  z-index:313; animation: girl-blue 16s ease-out infinite 0s; }

.girl-violet { position:absolute;  z-index:320; animation: girl-violet 16s ease-out infinite 0s; }

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

.ngap-tran { position:absolute;  z-index:311; left: 110px; top: 242px; animation: ngap-tran 16s ease-out infinite 0s; }

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


@keyframes bg1 {
    0% {opacity:1; }
    100% {opacity:1; }
	}


@keyframes canhdao {
    0% {opacity:1; transform: rotate(0deg);}
    20% {opacity:1; transform: rotate(15deg);}
	40% {opacity:1; transform: rotate(-8deg);}
	50% {opacity:1; transform: rotate(5deg);}
	53%, 100% {opacity:0; transform: rotate(0deg);}
}

@keyframes don {
    0%, 1% {opacity:0; transform: translateX(-20px);}
    6%, 50% {opacity:1; transform: translateX(0px);}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes xu {
    0%, 1% {opacity:0; transform: rotate(0deg); left: 225px;}
    6% {opacity:1; transform: rotate(-10deg); left: 239px;}
    20% {opacity:1; transform:  rotate(10deg) ;left: 230px;}   
	30% {opacity:1; transform:  rotate(-15deg) ;left: 239px;}   
	40% {opacity:1; transform:  rotate(15deg); left: 230px;}   
	50% {opacity:1; transform:  rotate(-10deg); left: 239px;}   
	53%, 100% {opacity:0; transform: rotate(0deg); left: 239px;}   
}
  
@keyframes tet {
    0%, 1% {opacity:0; transform: translateX(35px) scale(2,2);}
    4%, 50% {opacity:1; transform:  translateX(0px) scale(1,1);}
    53%, 100% {opacity:0; transform: translateX(0px) scale(1,1);}   
}
  
@keyframes thoivang {
    0%, 2% {opacity:0; transform: translateX(-25px) ;}
    5%, 50% {opacity:1; transform:  translateX(0px) ;}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes boy-red {
    0%, 3% {opacity:0; transform: translateY(10px) ;}
    5% {opacity:1; transform:  translateY(-5px) ;}
	7%, 50% {opacity:1; transform:  translateY(0px) ;}
    53%, 100% {opacity:0; transform: translateY(0px);}   
}

@keyframes boy-brown {
    0%, 4% {opacity:0; transform: translateX(10px) ;}
    6% {opacity:1; transform:  translateX(-5px) ;}
	8%, 50% {opacity:1; transform:  translateX(0px) ;}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes girl-blue {
    0%, 4% {opacity:0; transform: translateX(-10px) ;}
    6% {opacity:1; transform:  translateX(5px) ;}
	8%, 50% {opacity:1; transform:  translateX(0px) ;}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes girl-violet {
    0%, 5% {opacity:0; transform: translateX(-10px) ;}
    7% {opacity:1; transform:  translateX(5px) ;}
	9%, 50% {opacity:1; transform:  translateX(0px) ;}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes meo {
    0%, 6% {opacity:0; transform: translateY(10px) ;}
    8% {opacity:1; transform:  translateY(0px) ;}
	10%, 50% {opacity:1; transform:  translateY(0px) ;}
    53%, 100% {opacity:0; transform: translateY(0px);}   
}

@keyframes taynam {
    0%, 6% {opacity:0; transform: translateY(10px) ;}
    8% {opacity:1; transform:  translateY(-5px) ;}
	10%, 11% {opacity:1; transform:  translateY(0px) ;}
    12%, 100% {opacity:0; transform: translateY(0px);}   
}

@keyframes sumvay {
    0%, 7% {opacity:0; transform: translateX(10px) ;}
    9% {opacity:1; transform:  translateX(-5px) ;}
	11%, 50% {opacity:1; transform:  translateX(0px) ;}
    53%, 100% {opacity:0; transform: translateX(0px);}   
}

@keyframes ngap-tran {
    0%, 7% {opacity:0; transform: translateX(-10px) scale(1,1);}
    9% {opacity:1; transform:  translateX(5px) scale(1,1);}
	11%, 19% {opacity:1; transform:  translateX(0px) scale(1,1);}
    20%  {opacity:1; transform:  translateX(0px) scale(0.8,0.8);}   
	21% {opacity:1; transform:  translateX(0px) scale(1,1);}   
	22% {opacity:1; transform:  translateX(0px) scale(0.8,0.8);}
	23% {opacity:1; transform:  translateX(0px) scale(1,1);}   	
	24% {opacity:1; transform:  translateX(0px) scale(0.8,0.8);}   
	25%, 50% {opacity:1; transform:  translateX(0px) scale(1,1);}   
	53%, 100% {opacity:0; transform:  translateX(0px) scale(1,1);}   
}

@keyframes thoigian {
    0%, 8% {opacity:0; transform: translateY(10px);}
    10%, 50% {opacity:1; transform:  translateY(0px);}
	53%, 100% {opacity:0; transform: translateY(0px);}   
}

@keyframes bg2 {
    0%, 10% {opacity:0; }
    11%, 50% {opacity:1; visibility: visible;}
	53%, 100% {opacity:0; ;}   
}

@keyframes willow {
    0%, 11% {opacity:0; left: 470px; top: -22px; }
    12%, 13% {opacity:1; left: 470px; top: -22px; visibility: visible;}
	17%, 50% {opacity:1; left: 477px; top: 48px; }
	53%, 100% {opacity:0; left: 477px; top: 48px ;}   
}


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

.giai-1 { position:absolute;  z-index:401; left: -10px; top: 24px; animation: giai-1 16s ease-out infinite 0s; visibility: hidden; }

.giai-2 { position:absolute;  z-index:405; animation: giai-2 16s ease-out infinite 0s; visibility: hidden; }

.giai-3 { position:absolute;  z-index:406; animation: giai-3 16s ease-out infinite 0s; visibility: hidden; }

.giai-kk { position:absolute;  z-index:407; animation: giai-kk 16s ease-out infinite 0s; visibility: hidden; }

.tong120 { position:absolute;  z-index:404; left: 274px; top: 10px; animation: tong120 16s ease-out infinite 0s; visibility: hidden;}

.cta { position:absolute;  z-index:415; left: 229px; top: 257px; animation: cta 16s ease-out infinite 0s; visibility: hidden; }

.hoa { position:absolute;  z-index:402; left: 301px; top: 139px; animation: hoa 16s ease-out infinite 0s; visibility: hidden; }

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

.sao1 { position:absolute;  z-index:420; left: 68px; top: 0px; animation: sao1 16s ease-out infinite 0s; visibility: hidden; mix-blend-mode: screen; }

.sao2 { position:absolute;  z-index:420; left: 169px; top: 47px; animation: sao2 16s ease-out infinite 0s; visibility: hidden; mix-blend-mode: screen; }

.sao3 { position:absolute;  z-index:420; left: 307px; top: 54px; animation: sao3 16s ease-out infinite 0s; visibility: hidden; mix-blend-mode: screen; }

.sao4 { position:absolute;  z-index:420; left: 458px; top: 82px; animation: sao4 16s ease-out infinite 0s; visibility: hidden; mix-blend-mode: screen; }


@keyframes bg3 {
    0%, 53% {opacity:0; }
    54%, 100% {opacity:1; visibility: visible;}
}

@keyframes giai-1 {
    0%, 54% {opacity:0;left: -10px; top: 94px ;}
    55%, 56%  {opacity:1; left: -10px; top: 94px; visibility: visible;}
	60%, 100% {opacity:1;left: -10px; top: 24px ;}
}

@keyframes giai-2 {
    0%, 59% {opacity:0; transform: translateY(20px) ;}
    62%, 100% {opacity:1; transform:  translateY(0px); visibility: visible;}
}


@keyframes giai-3 {
    0%, 60% {opacity:0; transform: translateY(20px) ;}
    63%, 100% {opacity:1; transform:  translateY(0px); visibility: visible;}
}

@keyframes giai-kk {
    0%, 61% {opacity:0; transform: translateY(20px) ;}
    64%, 100% {opacity:1; transform:  translateY(0px); visibility: visible;}
}

@keyframes tong120 {
    0%, 63% {opacity:0; transform: translateY(20px) scale(0,0);}
    65% {opacity:1; transform:  translateY(0px) scale(1,1); visibility: visible;}
	66% {opacity:1; transform:  translateY(0px) scale(0.8,0.8);}
	67%, 100% {opacity:1; transform:  translateY(0px) scale(1,1);}
}

@keyframes cta {
    0%, 67% {opacity:0; transform: translateY(20px) scale(2,2);}
    69% {opacity:1; transform:  translateY(0px) scale(1,1); visibility: visible;}
	70% {opacity:1; transform:  translateY(0px) scale(1.1,1.1);}
	71%, 100% {opacity:1; transform:  translateY(0px) scale(1,1);}
}

@keyframes hoa {
    0%, 62% {opacity:0; transform: translateX(-20px) rotate(30deg);}
    65% {opacity:1; transform:  translateX(0px) rotate(60deg); visibility: visible;}
	75%, 100% {opacity:1; transform:  translateX(0px) rotate(120deg);}
}

@keyframes text {
    0%, 62% {opacity:0; transform: translateX(-100px) ;}
    75%, 100% {opacity:1; transform: translateX(0px) ; visibility: visible;}	
}


@keyframes sao1 {
    0%, 77% {opacity:0; transform: scale(1,1) rotate(0deg);}
    81%  {opacity:1; transform: scale(1,1) rotate(50deg); visibility: visible;  }
	90%, 100%  {opacity:0; transform: scale(1.1,1.1) rotate(90deg);  }
	}

@keyframes sao2 {
    0%, 76% {opacity:0; transform: scale(1,1) rotate(0deg);}
    82%  {opacity:1; transform: scale(1,1) rotate(50deg); visibility: visible;  }
	91%, 100%  {opacity:0; transform: scale(1.1,1.1) rotate(90deg);  }
	}

@keyframes sao3 {
    0%, 77% {opacity:0; transform: scale(1,1) rotate(0deg);}
    83%  {opacity:1; transform: scale(1,1) rotate(50deg); visibility: visible;  }
	92%, 100%  {opacity:0; transform: scale(1.1,1.1) rotate(90deg);  }
	}

@keyframes sao4 {
    0%, 78% {opacity:0; transform: scale(1,1) rotate(0deg);}
    84%  {opacity:1; transform: scale(1,1) rotate(50deg); visibility: visible;  }
	93%, 100%  {opacity:0; transform: scale(1.1,1.1) rotate(90deg);  }
	}