*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
}

.container{
    width:100%;
    margin:0;
    border:1px solid #3366ff;
    padding:4px;
}

/*================= BANNER =================*/

.banner{
    height:45px;
    background:#ff0055;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:bannerColor 4s infinite alternate;
}

.banner p{
    font-family:"Times New Roman", serif;
    font-size:12px;
    font-weight:bold;
    animation:textZoom 2s infinite;
}

/*================= NỘI DUNG =================*/

.content{
    padding:22px 0 35px 0;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}

/*================= KHUNG CHUNG =================*/

.box{
    width:95px;
    height:95px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:gold;
    font-size:20px;
    font-weight:bold;
}

/*================= KHUNG 1 =================*/

.image-box{
    border:2px solid red;
    background-image:url("../images/bien.jpg");
    background-size:cover;
    background-position:center;
    animation:changeImage 4s infinite;
}

/*================= KHUNG 2 =================*/

.box2{
    background:#16dceb;
    border:3px dashed blue;
    border-radius:0 18px 0 18px;
}

/*================= KHUNG 3 =================*/

.box3{
    background:#16dceb;
    border:2px dotted deeppink;
    border-radius:18px 0 18px 0;
}

/*================= KHUNG 4 =================*/

.box4{
    background:#0b7d78;
    font-size:12px;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    animation:rotateBox 3s linear infinite;
    transform-origin:center;
}

/*================= ANIMATION =================*/

@keyframes bannerColor{

    0%{
        background:#ff0055;
    }

    50%{
        background:#ff00ff;
    }

    100%{
        background:#ff1493;
    }

}

@keyframes textZoom{

    0%{
        transform:scale(0.8);
    }

    50%{
        transform:scale(1.3);
    }

    100%{
        transform:scale(0.8);
    }

}

@keyframes changeImage{

    0%,45%{
        background-image:url("../images/bien.jpg");
    }

    50%,100%{
        background-image:url("../images/thanhpho.jpg");
    }

}

@keyframes rotateBox{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}