*{box-sizing: border-box;font-family:"Merriweather-Black";
}
body{background-image: url("img/chuacau.jpg");
background-attachment: fixed;
background-repeat: repeat;
background-size: 100% 100%;
font-family:"Merriweather-Black";}
ul{list-style-type: none;
background-color: #FFFF66;
border: 2px double #00FF00;
margin: 0;
padding: 0;
overflow: hidden;}
li{float: left;}
li a{text-decoration: none;
display: block;
color: #FF0000;
text-align: center;
padding: 20px;
font-size: 14px;
text-indent: 30px;
}
li a:hover{background-color: #0099CC;
font-size: 20px;}
img#chay{animation: chay 20s linear 0s infinite normal;position: relative;}
@keyframes chay{
	2%{right:12px ; top: 10px}
	100%{right:400px ; top: 10px}

}
li.tha{display: inline-block;}
.tha1{display: none;
position: absolute;
background-color: #FFFF66 ;
width: 220px;
z-index: 10;}
.tha1 a{color:#FF0000 ;padding:20px ;}
.tha1 a:hover{background-color: #0099CC;
font-size: 20px;}
.tha:hover .tha1{display:block;}
#left{background-color: #001100;height: 80px;
	border: 3px double 	#00FF00;
	outline: none;border-radius: 30px;
	
}
span#chao{position: relative;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
outline: none;animation: sang1 5s linear infinite;
display:flex;justify-content: center;text-align: center;font-size: 30px;}
@keyframes sang1{
    0%{
        color:#0e3742 ;
        text-shadow: none;
    }
    100%{color:#fff;
        text-shadow: 0 0 10px #03bcf4,
        0 0 30px #03bcf4,
        0 0 50px #03bcf4,
        0 0 90px #03bcf4,
        0 0 100px #03bcf4,
        0 0 150px #03bcf4;
       

    }
}
div#gioi{border: 2px double #00FF00 ;
border-radius: 40px;
background-color: #001100;
position: relative;
height: 400px;
margin-top: 20px;overflow: hidden;z-index: 5;}
#gioi:before{
    content: '';
position: absolute;
width: 300px;height: 2000%;
background: linear-gradient(#CCCCCC,#66FFFF);
margin-top: -250%;margin-left: 50%;
animation: dep 15s linear infinite;
}
@keyframes dep{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
  }
  #gioi:after{
    content: '';
    position: absolute;
    background: #001100;
    inset: 4px;border-radius: 40px;
  }
  
div#gioithieu{position: absolute;z-index: 5;
}
h1#phatsang{position: relative;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
outline: none;animation: sang 5s linear infinite;}
@keyframes sang{
    0%{
        color:#0e3742 ;
        text-shadow: none;
    }
    100%{color:#fff;
        text-shadow: 0 0 10px #03bcf4,
        0 0 30px #03bcf4,
        0 0 50px #03bcf4,
        0 0 90px #03bcf4,
        0 0 100px #03bcf4,
        0 0 150px #03bcf4;
       

    }
}
#gioithieu{border: 2px double #BBBBBB;
border-radius: 30px;margin: 30px;height: 330px;}
#gioi img{width: 42%; height: 350px;
top: 20px;position: absolute;right: 10px;
border: 2px solid #BBBBBB;
border-radius: 30px;}
div#lienhe{position: fixed;
right: 90px;top: 500px;
background-color: #001100;
border: 6px soid #001100;
box-shadow: 3px 3px 7px 4px #001100;
border-radius: 30px;height: 75px;z-index: 2;}
#lienhe p{position: relative;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
outline: none;animation: sang1 5s linear infinite;}
@keyframes sang1{
    0%{
        color:#0e3742 ;
        text-shadow: none;
    }
    100%{color:#fff;
        text-shadow: 0 0 10px #03bcf4,
        0 0 30px #03bcf4,
        0 0 50px #03bcf4,
        0 0 90px #03bcf4,
        0 0 100px #03bcf4,
        0 0 150px #03bcf4;
       

    }}
#tên{color: #33FF00;
font-size: 60px;margin-left: 530px;
color: 	#FFFF00;}
div#xe{float: left;border: 3px solid #66FF33;
border-radius: 30px;box-shadow: 2px 2px 3px 2px #66FF33;
width: 30%;position: relative;margin: 20px;}
#xe img{width: 370px;height: 400px;
object-fit: contain;margin: 10px;
}
p#noidung{font-size: 30px; text-align: center;
color:		#00FF00 ;margin-top: -10px;
}
#noidung a:hover{box-shadow:0 0 10px #03bcf4,
                            0 0 20px #03bcf4,
                            0 0 35px #03bcf4,
                            0 0 40px #03bcf4,
                            0 0 53px #03bcf4; 
}
p#cuoi1{color: 	#FFFF00; text-align: center;
}
/* điện thoại: max-width: 740px;*/
@media  screen and (max-width: 395px){
	ul{display: flex;
		flex-flow: column wrap;}
		#left{border-right: none;
			border-left: none;}
		body{   background-image: none;
background:#0c192c ;}
    #gioi img{display: none;}
    div#gioi{height: 520px;}
    div#gioithieu{height: 510px;margin: 3px;}
    div#gioithieu hr{margin-left: 70px;}
    div#gioithieu h1{margin-top: 40px;}
  #tên{margin-left: 34%;font-size: 40px;display: inline-block;}
  div#xe{clear: left;width: 89%;}
  #xe img{width: 93%;}
  
  	p#noidung{margin: 20px;color: #CCFFCC;}
div#lienhe{position: fixed;
    right: 20px;
    top: 550px;
    width: 200px;
    height: 80px;
    margin-left: 28%;}
}

@media only screen and (max-width: 514px){
	ul{display: flex;
		flex-flow: column wrap;}
		#left{border-right: none;
			border-left: none;}
		body{   background-image: none;
background:#0c192c ;}
    #gioi img{display: none;}
    div#gioi{height: 520px;}

    div#gioithieu{height: 510px;margin: 3px;}
    div#gioithieu hr{margin-left: 70px;}
    div#gioithieu h1{margin-top: 40px;}
  #tên{margin-left: 34%;font-size: 40px;display: inline-block;}
  div#xe{clear: left;width: 89%;}
  #xe img{width: 93%;}
  
  	p#noidung{margin: 20px;color: #CCFFCC;}
div#lienhe{position: fixed;
    right: 20px;
    top: 550px;
    width: 200px;
    height: 80px;
    margin-left: 28%;}
span#chao{font-size: 10px;margin-top: 18px;}

}
@media only screen and (max-width: 830px){
	body{   background-image: none;
background:#0c192c ;}
    #gioi img{display: none;}
    li a{text-indent: 30px;}
    #tên{margin-left: 37%;display: inline-block;}
    div#xe{clear: left;width: 95%;}
    #xe img{width: 93%;}
    
    p#noidung{margin: 20px;color: #CCFFCC;}
    span#chao{font-size: 15px;margin-top: 5px;}
}
@media only screen and (min-width: 800px) and (max-width: 1220px){
	body{   background-image: none;
background:#0c192c ;}
    div#xe{clear: left;width: 92%;}
     #tên{margin-left: 44%;font-size: 40px;display: inline-block;}
    #xe img{width: 92%;} 
    div#lienhe{position: fixed;
    right: 20px;
    top: 550px;
    width: 200px;
    height: 80px;
    margin-left: 28%;}
    p#noidung{margin: 20px;color: #CCFFCC;}
    span#chao{font-size: 20px;margin-top: 5px;}
}
@media screen and (max-width: 767px){
    body{  background-image: none;
background:#0c192c ;}
    #gioi img{display: none;}
    li a{text-indent: 30px;}
    #tên{margin-left: 37%;display: inline-block;}
    div#xe{clear: left;width: 92%;}
    #xe img{width: 93%;}
    
    p#noidung{margin: 20px;color: #CCFFCC;}
}



/* table: min-width: 740px; and max-width;1024px*/

.container{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.bubbles{
    position: relative;
    display: flex;
}
.bubbles span{
    position: relative;
    width: 30px;
    height: 30px;
    background: #4fc3dc;
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #4fc3dc44,
                 0 0  50px #4fc3dc,
                0 0  100px #4fc3dc;
    animation: animate 15s linear infinite;
    animation-duration: calc(125s / var(--i));

}
.bubbles span:nth-child(even){
    background: #ff2d75;
    box-shadow: 0 0 0 10px #ff2d7544,
    0 0  50px #ff2d75,
    0 0  100px #ff2d75;
}
@keyframes animate{
    0%{transform: translateY(100vh) scale(0);}
    100%{transform:translateY(-10vh) scale(1) ;}
}
.nen{position: fixed;
z-index: -2;}