body {
    background-image: url("../imgs/img-tet5.jpg");
    background-size: cover; 
}

.contain-tree-flower {
    opacity: 0;
}

.contain-tree-flower .tree-flower {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}

.contain-tree-flower:nth-child(1) {
    position: fixed;
    width: 30%;
    height: 60%;
    z-index: 9;
    top: 0px;
    left: -30%;
}
.contain-tree-flower:nth-child(2) {
    position: fixed;
    bottom: 10px;
    right: -30%;
    width: 28%;
    height: 65%;
    z-index: 8;
}

.lentern {
    position: absolute;
    z-index: 10;
    opacity: 1;
    transition: 4s;
    transform: rotate(-45deg);
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(2) {
    width: 10%;
    height: 30%;
    top: -50%;
    left: -50%;
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(3) {
    width: 15%;
    height: 25%;
    top: -50%;
    left: -50%;
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(4) {
    width: 10%;
    height: 36%;
    top: -50%;
    left: -50%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(2) {
    width: 11%;
    height: 30%;
    top: -150%;
    left: -250%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(3) {
    width: 17%;
    height: 23%;
    top: -150%;
    left: -250%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(4) {
    width: 10%;
    height: 33%;
    top: -150%;
    left: -250%;
}


.sky {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    box-shadow: inset 0px 0px 150px rgb(0, 0, 0);
    z-index: 10;
    display: none;
}

.family {
    position: fixed;
    opacity: 0;
    transition: 3s;
    
}
.family:nth-child(4) {
    left: 2.5%;
    bottom: 5px;
    width: 30%;
    height: 40%;
}
.family:nth-child(5) {
    left: 45%;
    bottom: 30px;
    width: 20%;
    height: 35%;
}
@keyframes animationTopDownTextTet {
    to {
        top: -12%;
    }
}
@keyframes animationTopDownNumber2020 {
    to {
        top: -11%;
    }
}
@keyframes animationTopDownSlogan {
    to {
        top: -15%;
    }
}
.textTet {
    position: fixed;
    top: -7%;
    width: 9%;
    height: 32%;
    left: 26%;
    z-index: 11;
    -webkit-animation: animationTopDownTextTet  1s linear 2.5s infinite alternate;
    -moz-animation: animationTopDownTextTet  1s linear 2.5s infinite alternate;
    opacity: 0;
}
.number {
    position: fixed;
    top: -8%;
    z-index: 11;
    opacity: 0;
}
.number:nth-child(7) {
    left: 35%;
    -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 2.8s infinite alternate;
    -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 2.8s infinite alternate;
}
.number:nth-child(8) {
    left: 40%;
    -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.1s infinite alternate;
    -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.1s infinite alternate;
}
.number:nth-child(9) {
    left: 45%;
    -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.4s infinite alternate;
    -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.4s infinite alternate;
}
.number:nth-child(10) {
    left: 50%;
    -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.7s infinite alternate;
    -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.7s infinite alternate;
}
.slogan {
    position: fixed;
    top: -10%;
    width: 10%;
    height: 33%;
    left: 55%;
    z-index: 11;
    -webkit-animation: animationTopDownSlogan 1.2s ease-in-out 3.9s infinite alternate;
    -moz-animation: animationTopDownSlogan 1.2s ease-in-out 3.9s infinite alternate;
    opacity: 0;
}
/* Container chứa đồng hồ đếm ngược */
.clock {
    width: 0px;
    height: 0px;
    top: 25%;
    left: 25%;
    font-family: 'Baloo Bhai', 'Arial';
    border-style: solid;
    border-width: 1.5px;
    border-color: rgba(212, 144, 61, 0.432);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.199);
    position: fixed;
}

.clock .lan:nth-child(2) {
    width: 20%;
    height: 60%;
    position: absolute;
    top: -57%;
    left: 15%;
    transform: rotateY(180deg);
}


@media only screen and (max-width: 414px) {
    .flower:nth-child(1) {
        width: 55%;
        height: 40%;
    }
    .flower:nth-child(2) {
        width: 55%;
        height: 45%;
    }
    .contain-tree-flower:nth-child(1) {
        width: 45%;
        height: 27%;
        top: 15%;
    }
    .contain-tree-flower:nth-child(2) {
        width: 43%;
        height: 30%;
        top: 60%;
    }
    .family:nth-child(4) {
        height: 30%;
        width: 50%;
        bottom: 0px;
    }
    .family:nth-child(5) {
        height: 25%;
        width: 45%;
        left: 60%;
        bottom: 0px;
    }
    @keyframes animationTopDownTextTet {
        to {
            top: -5%;
        }
    }
    @keyframes animationTopDownNumber2020 {
        to {
            top: -11%;
        }
    }
    @keyframes animationTopDownSlogan {
        to {
            top: -9%;
        }
    }
    .textTet {
        width: 20%;
        height: 20%;
        left: 5%;
    }
    .number {
        position: fixed;
        top: -8%;
        z-index: 11;
        width: 15%;
        height: 23%;
    }
    .number:nth-child(7) {
        left: 26%;
    }
    .number:nth-child(8) {
        left: 37%;
    }
    .number:nth-child(9) {
        left: 47%;
    }
    .number:nth-child(10) {
        left: 57%;
    }
    .slogan {
        left: 70%;
        height: 20%;
        width: 22%;
    }
    .clock {
        top: 35%;
        left: 2%;
        
    }
}