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

body{
    margin: 0;
    padding: 0;
}

#container{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    font-family:Arial, sans-serif;
    max-width: 300px;
}
.page_content{
    top: 0 !important;
    width:300px;
    height:250px;
    -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.00);
} 
img{
    position: absolute;
}
.bg { position:absolute; z-index:100; animation: bg 16s easa-in-out infinite 1s; }

.tuyendung { position:absolute; animation: tuyendung 16s ease-in-out infinite 1s; z-index:200;}

.cam { position:absolute; left:0px; top:42px; animation: cam 16s ease-in-out infinite 1s; z-index:350;}

.uv3 { position:absolute; left:0px; top:127px; animation: uv3 16s ease-in-out infinite 1s; z-index:250; }
.uv2 { position:absolute; left:46px; top:113px; animation: uv2 16s ease-in-out infinite 1s; z-index:252;}
.uv1 { position:absolute; left:107px; top:103px; animation: uv1 16s ease-in-out infinite 1s; z-index:270; }
.uv4 { position:absolute; left:176px; top:113px; animation: uv4 16s ease-in-out infinite 1s; z-index:260; }
.uv5 { position:absolute; right:0px; top:127px; animation: uv5 16s ease-in-out infinite 1s; z-index:258; }
.kinhlup { position:absolute; left:-60px; top:115px; animation: kinhlup 16s ease-in-out infinite 1s; z-index:380; }
.line { position:absolute; animation: line 16s ease-out infinite 1s; z-index:400;}

.thamgia { position:absolute; left:0px; top:92px; animation: thamgia 16s ease-in-out infinite 1s; z-index:351; visibility:hidden;}

.laptrinh { position:absolute; animation: laptrinh 16s ease-in-out infinite 1s; z-index:348; visibility:hidden;}
.tkweb { position:absolute; animation: tkweb 16s ease-in-out infinite 1s; z-index:347; visibility:hidden;}
.seo { position:absolute; animation: seo 16s ease-in-out infinite 1s; z-index:347;visibility:hidden;}
.sukien { position:absolute; animation: sukien 16s ease-in-out infinite 1s; z-index:347; visibility:hidden;}
.tiepnhan { position:absolute; animation: tiepnhan 16s ease-in-out infinite 1s; z-index:347; visibility:hidden;}
.khaithac { position:absolute; animation: khaithac 16s ease-in-out infinite 1s; z-index:347; visibility:hidden;}

.duyet { position:absolute; left:182px; top:90px; animation: duyet 16s ease-in-out infinite 1s; z-index:337; visibility:hidden;}

.happy { position:absolute; left:214px; top:112px; animation: happy 16s ease-in-out infinite 1s; z-index:338; visibility:hidden;}


.xem { position:absolute; animation: xem 16s ease-in-out infinite 1s; z-index:900;}


.sao1 { position:absolute; left:208px; top:97px; animation: sao1 16s ease-in-out infinite 1s; z-index:950; mix-blend-mode: screen; visibility:hidden;   }
.sao2 { position:absolute; left:240px; top:74px; animation: sao2 16s ease-in-out infinite 1s; z-index:950; mix-blend-mode: screen; visibility:hidden;  }
.sao3 { position:absolute; left:260px; top:111px; animation: sao3 16s ease-in-out infinite 1s; z-index:950; mix-blend-mode: screen; visibility:hidden;  }
 

@keyframes tuyendung {
	0%, 2% { opacity:0; transform:scale(0,0);}
	5%, 15% { opacity:1; transform:scale(1,1);}
	16% { opacity:1; transform:scale(0.9,0.9);}
	17% { opacity:1; transform:scale(1,1);}
	18% { opacity:1; transform:scale(0.9,0.9);}
	19%, 100% { opacity:1; transform:scale(1,1);}
}

@keyframes cam {
	0%, 6% { opacity:0; transform:translateX(-100px);}
	8% { opacity:1; transform:translateX(6px);}
	9% { opacity:1; transform:translateX(-6px);}
	10%, 100% { opacity:1; transform:translateX(0px);}
	}
	
@keyframes uv3 {
	0%, 8% { opacity:0; transform:translateX(-20px) scale(1,1); }
	9%, 16% { opacity:1; transform:translateX(0px) scale(1,1); }
	17% { opacity:1; transform:translateX(0px) scale(1.1,1.1); }
	19%, 27% { opacity:1; transform:translateX(0px) scale(1,1); }
	28%, 100% { opacity:0; transform:translateX(400px) scale(1,1); }
	}	

@keyframes uv2 {
	0%, 8.5% { opacity:0; transform:translateX(-20px) scale(1,1); }
	9.5%, 17% { opacity:1; transform:translateX(0px) scale(1,1); }
	19% { opacity:1; transform:translateX(0px) scale(1.1,1.1); }
	20%, 27.5% { opacity:1; transform:translateX(0px) scale(1,1); }
	28.5%, 100% { opacity:0; transform:translateX(400px) scale(1,1); }
	}	

@keyframes uv1 {
	0%, 9% { opacity:0; transform:translateX(-20px) scale(1,1); }
	10%, 18% { opacity:1; transform:translateX(0px) scale(1,1); }
	20% { opacity:1; transform:translateX(0px) scale(1.1,1.1); }
	21%, 28% { opacity:1; transform:translateX(0px) scale(1,1); }
	29%, 100% { opacity:0; transform:translateX(400px) scale(1,1); }
	}	

@keyframes uv4 {
	0%, 9.5% { opacity:0; transform:translateX(-20px) scale(1,1); }
	10.5%, 19% { opacity:1; transform:translateX(0px) scale(1,1); }
	21% { opacity:1; transform:translateX(0px) scale(1.1,1.1); }
	22%, 28.5% { opacity:1; transform:translateX(0px) scale(1,1); }
	29.5%, 100% { opacity:0; transform:translateX(400px) scale(1,1); }
	}	

@keyframes uv5 {
	0%, 10% { opacity:0; transform:translateX(-20px) scale(1,1); }
	11%, 20% { opacity:1; transform:translateX(0px) scale(1,1); }
	22% { opacity:1; transform:translateX(0px) scale(1.1,1.1); }
	23%, 29% { opacity:1; transform:translateX(0px) scale(1,1); }
	30%, 100% { opacity:0; transform:translateX(400px) scale(1,1); }
	}
	
@keyframes line {
	0%, 11% { opacity:1; transform:translateX(-350px);}
	15%, 100%  { opacity:1; transform:translateX(0px);}
	
	}	
	
@keyframes kinhlup {
	0%, 11% { opacity:1; transform:translateX(-160px);}
	25%, 100% { opacity:1; transform:translateX(350px);}
}

@keyframes thamgia {
	0%, 30% { opacity:0; transform:translateX(-100px);}
	32% { opacity:1; transform:translateX(6px); visibility:visible;}
	33% { opacity:1; transform:translateX(-6px);}
	34%, 100% { opacity:1; transform:translateX(0px);}
	}
	
@keyframes laptrinh {
	0%, 33% { opacity:0; transform:translateX(-20px);}
	34%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	
	
@keyframes tkweb {
	0%, 34% { opacity:0; transform:translateX(-20px);}
	35%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	

@keyframes seo {
	0%, 35% { opacity:0; transform:translateX(-20px);}
	36%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	

@keyframes sukien {
	0%, 36% { opacity:0; transform:translateX(-20px);}
	37%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	

@keyframes tiepnhan {
	0%, 37% { opacity:0; transform:translateX(-20px);}
	38%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	

@keyframes khaithac {
	0%, 38% { opacity:0; transform:translateX(-20px);}
	39%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}	

@keyframes duyet {
	0%, 39% { opacity:0; transform:translateX(100px);}
	45%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}

@keyframes happy {
	0%, 39% { opacity:0; transform:translateX(100px);}
	45%, 100% { opacity:1; transform:translateX(0px); visibility:visible;}
}

@keyframes xem {
	0%, 39% { opacity:0; transform: translateX(200px);}
	45%, 48% { opacity:1; transform: translateX(0px);}
	50% { opacity:0; transform: translateX(0px);}
	52% { opacity:1; transform:translateX(0px);}
	54% { opacity:0; transform:translateX(0px);}
	56% { opacity:1; transform:translateX(0px);}
	58% { opacity:0; transform:translateX(0px);}
	60% { opacity:1; transform:translateX(0px);}
	62% { opacity:0; transform:translateX(0px);}
	64%, 74% { opacity:1; transform:translateX(0px);}
	76% { opacity:0; transform:translateX(0px);}
	78% { opacity:1; transform:translateX(0px);}
	80% { opacity:0; transform:translateX(0px);}
	82% { opacity:1; transform:translateX(0px);}
	84% { opacity:0; transform:translateX(0px);}
	86% { opacity:1; transform:translateX(0px);}
	88% { opacity:0; transform:translateX(0px);}
	90%, 100% { opacity:1; transform:translateX(0px);}
}

@keyframes sao1 {
	0%, 45% { opacity:0; transform:scale(0.5,0.5);}
	46%, 48% { opacity:1; transform:scale(1,1); visibility:visible;}
	49%, 100% { opacity:0; transform:scale(5,5);}
}
	
@keyframes sao2 {
	0%, 46% { opacity:0; transform:scale(0.5,0.5);}
	47%, 49%  { opacity:1; transform:scale(1,1); visibility:visible;}
	50%, 100% { opacity:0; transform:scale(5,5);}
}
	
@keyframes sao3 {
	0%, 47% { opacity:0; transform:scale(0.5,0.5);}
	48%, 50% { opacity:1; transform:scale(1,1); visibility:visible;}
	51%, 100% { opacity:0; transform:scale(5,5);}
}