*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto', sans-serif}
a{text-decoration:none}
html,body{background-color:#000000;}
img{max-width:100%}
section{max-width:1667px;width:100%;margin:auto;height: 100%;position:relative}
.wrapper{position:relative}
/* sec 1 */
section#sec-1{}
.txthdn{position: absolute;width: 38vw;top: 3vh;right: 19%;animation: zoom-in-zoom-out 1.5s ease-out infinite;}
.vongtrongiua{position: absolute;width: 20vw;top: 45%;left: 55%;max-width: 332px;animation:  rotate-scale 2s ease infinite;cursor:pointer;z-index:10}
.vongtronngoai{position: absolute;width: 32%;top: 34%;left: 51.6%;max-width: 584px;animation:  zoom-in-zoom-out 1s ease infinite;mix-blend-mode: screen}


/* sec 2 */
section#sec-2{display:none}
.sec-2-bg{position:relative;z-index:10;}
.countdown{position: absolute;top: 5%;left: 52%;color: white;font-size: 2vw;font-weight: bold;z-index:10;display:none;width: 4.2%;text-align: center;}
.cauhoiso{position: absolute;right: 25%;color: white;top: 20%;font-size: 1.6vw;z-index:10;display:none}
.tieude{position: absolute;right: 15%;color: white;top: 30%;font-size: 1.3vw;width: 14%;z-index:10;display:none}
.hinh{position: absolute;left: 23.8%;color: white;top: 18%;width: 40%;z-index: 1;text-align:center;display: flex;align-items: center;justify-content: center;height: 48%;max-height: 453px;}
.dapan{position: absolute;left: 23%;color: white;bottom: 13%;width: 42%;height: 18%;z-index: 10;display:none}
.dapan div{position: absolute; width: 39%;font-size: 0.8vw;display: flex;align-items: center;justify-content: center;height:25%;padding:0 10px}
.dapan div a{color:#bfbfbf;display:block;width:100%;text-align:center;transition:all 1s}
.dapan div a:hover, .dapan div a:active{color:#fff}
.dapan1{top: 12%;;left: 4%;}
.dapan2{top: 12%;right: 4%;}
.dapan3{bottom: 8%;left: 4%;}
.dapan4{bottom: 8%;right: 4%;}

.chon{text-shadow: 1px 1px 2px #fffb00, 0 0 1em white, 0 0 0.2em #ffb300;}
.dung{text-shadow: 1px 1px 2px red, 0 0 1em white, 0 0 0.2em #f00!important;animation: zoom-in-zoom-out 1.5s ease-out infinite}

/* sec 3 */
section#sec-3{display:none}
.tongsocau{position: absolute;left: 20%;color: white;top: 40%;font-size: 1.4vw;z-index: 10;}
.tongsocau span{color:red;font-size:1.5vw}
.vongtrongiua2{position: absolute;width: 16vw;top: 54.2%;left: 27.5%;max-width: 258px;animation:  rotate-scale 2s ease infinite;cursor:pointer;z-index:10}
.vongtronngoai2{position: absolute;width: 27.6vw;top: 43.5%;left: 24%;max-width: 450px;animation:  zoom-in-zoom-out 1s ease infinite;mix-blend-mode: screen}
.reset{position: absolute;width: 8vw;top: 61%;left: 31.6%;max-width:117px;cursor:pointer;z-index:11}

/* keyframe */
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}

@keyframes rotate-scale {
0% {
  transform:rotate(180deg) scale(0.8, 0.8);;
 }	
50%{
	transform:rotate(360deg) scale(0.85, 0.85);
}	
 100% {
  transform:rotate(180deg) scale(0.8, 0.8);
 }
}


/* media */
/* Landscape */
@media only screen 
  and (min-device-width: 568px)  
  and (max-device-width: 926px)  
  and (orientation: landscape) { 
	section{display:block}
	
}


/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (orientation: portrait) {
	section{display:flex;align-items:center;justify-content:center;}
} 

@media only screen 
  and (min-device-width: 568px)  
  and (max-device-width: 926px)  {
	  
	 
  }