.body
{
    width: 100%;
    height: 2000px;
    margin: 0px auto;
    
    
}
.banner
{
    width:100%;
    height: 50px;
    background-color: red;
    animation: hieuung 2s linear 0.5s infinite reverse forwards;
}
@keyframes hieuung {
    to
    {
        border-radius: 50%;
    }
}
.banner h1
{
    text-align: center;
    animation: my 200ms infinite;
    @-webkit-keyframes: my 700ms infinite;
    font-family: verdana;
}
@-webkit-keyframes my {
    0% { color: #17cf11; } 
    60% { color: #fff;  } 
    100% { color: #17cf11;  } 
}
.bottom
{
    width: 100%;
    height: 1700px;
   

}
.footer
{
    width: 100%;
    height: 100px;
    background-color: blue;
}
.bottom .top
{
    width: 100%;
    height: 50px;
    background-color: blueviolet;

}
.bottom .top ul li
{
    list-style: none;
   float: left;
   padding-left: 35px;
}
.bottom .top ul li a
{
    text-decoration: none;
    color: white;
    font-size: 30px;
}
.bottom .top ul li a:hover , .bottom .top ul li a:active, .bottom .top ul li a:focus
{
    
    color:rgb(24, 233, 188);
    position: relative;
    animation-delay: 2s;
    animation: move 1s infinite;
}
@keyframes move{
    from {left: 0px;}
    to { left: 14px;}
}
/* .bottom .top ul li a[data-bubble]:after 
{
    content:attr(data-bubble);
    position:absolute;
    top:0;
    right:0.5em;
    height:1.5em;
    line-height:1.5em;
    padding:0 .46em;
    text-align:center;
    text-shadow:0 0.063em 0 rgba(0,0,0,.2);
    background-color:#eee;
    color:#364652;
    box-shadow:0 0.063em 0.063em rgba(0,0,0,.2);
    border-radius:4em;
    z-index:-1;
    will-change: transform;
}
    .bottom .top ul li a:hover[data-bubble]:after, .bottom .top ul li a:active[data-bubble]:after, .bottom .top ul li a:focus[data-bubble]:after {
    -webkit-animation:ease bubbleover .4s;
    animation:ease bubbleover .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    top:-1.25em; /* If pseudo animation not supported [see https://css-tricks.com/transitions-and-animations-on-css-generated-content/], simple hover fallback happens*/
    /* z-index:1;
    }

    @-webkit-keyframes bubbleover {
    0%   {
        -webkit-transform:translate(0, 1em);
        z-index:-1
        }
        50% {
        -webkit-transform:translate(0, -.5em);
        z-index:-1
        } 
        100% {
        -webkit-transform:translate(0, 0);
        z-index:1;
        }
    }

    @keyframes bubbleover {
        0%   {
        top:0;
        transform:translate(0, 0);
        z-index:-1;
        }
        50% {
        transform:translate(0, -12px);
        z-index:-1
        } 
        100% {
        transform:translate(0, 6px);
        z-index:1;
        } 
    }*/
.bottom .bettwen
{
    width: 100%;
    height: 1700px;
   background-color: #364652;
   
}
.bottom .bettwen .tren
{
    width: 100%;
    height: 800px;
    /* background-image: url("/img/pexels-david-jakab-974173.jpg"); */
    /* background-color: #cccccc; */
    height: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.bottom .bettwen .tren .mot
{
    width: 33%;
    height: 800px;
    float:left;
}
.bottom .bettwen .tren .hai
{
    width: 33%;
    height: 800px;
    float:left;
    
}
.bottom .bettwen .tren .ba
{
    width: 33%;
    height: 800px;
    float:left;
}
.bottom .bettwen .tren .mot img
{
    width: 500px;
    height: 800px;
}
/* .bottom .bettwen .tren .hai img1
{
    width: 480px;
    height: 800px;
    
}
.bottom .bettwen .tren .ba img2
{
    width: 480px;
    height: 800px;
} */


/* .bottom .duoi .tren h2
{
    font-size: 30px;
    text-align: center;
    padding: 420px 0px 0px 0px;
    
}
.bottom .duoi .tren h2:hover
{
    /* transform: rotate(20deg); */
    /* transform: skewY(20deg); */
    /* transform: scale(1.5); */
   /* position: relative;
    animation: mymove 8s infinite;
/*}
/* @keyframes mymove {
    from {left: 0px;}
    to {left: 100px;}
} */
.bottom .bettwen .tren a
{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    color: chartreuse;
    padding-left: 700px;    
    text-decoration: none;
}
.bottom .bettwen .duoi
{
    width: 100%;
    height: 800px;
    /* background-image: url("/img/chiasekt.jpeg"); */
    background-color: chocolate;
    height: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    animation: mymove1 8s infinite;
}
@keyframes mymove1{
    from { right:0px;}
    to{ right:100px;}
}