@font-face {
    font-family: UTM_Alexander;
    src: url("../fonts/UTM Alexander.ttf");
    font-display: swap;
}

/* CSS Document */
/*------------------ RESET CSS -----------------------*/
html, body, div, span, h1, h2, h3, h4, h5, h6, strong, ol, ul, li {
    border: 0px;
    outline: 0px;
    vertical-align: baseline;
    background: transparent;
}

html {
    /*height: -webkit-fill-available;*/
}

body {
    position: relative;
    overflow-x: hidden;
    font-size: 62.5%;
    font-family: Tahoma,arial,helvatica,sens-serif;
    font-size: 13px;
    margin: 0px;
    width: 100%;
    /*background: #b8130f url("../images/tet2019/bg.jpg") no-repeat top center;*/
    /*  background: url("../images/noel20/BG-Xmas.png")*/ /*,url("../images/tet2020/Nhan-vat.png") ,url("../images/tet2020/BG-middle.jpg")*/
    ;
    background-repeat: no-repeat;
    background-position: bottom center;
}

/*ol,ul{
	list-style:none;
}*/

#bg-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

#header ol, #header ul, #columLeft ol, #columLeft ul, #columnRight ol, #columnRight ul,
.submenutab ul, .ar_contentdetail ul, #scrollnhanvat ul {
    list-style: none;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

.clear {
    clear: both;
}

img {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    text-align: center;
    outline-style: none;
}

input {
    border: none;
    background: none;
}

p.dataempty {
    text-align: center;
    font-size: 12px;
    color: #3F3F3F;
    padding-top: 10px;
}
/*---------------END RESET-----------------*/
.bg {
    width: 100%;
    /*background: url("../images/nhan-vat-2023.png") no-repeat top left;*/
    z-index: -99;
    background-size: 90%;
    padding-bottom: 50px;
}

    .bg::after {
        content: '';
        position: fixed;
        left: 0px;
        bottom: 0;
        height: 100%;
        width: 100%;
        /*background: url(../newImages/char1.png) no-repeat left bottom, url(../newImages/char2.png) no-repeat right bottom, url(../newImages/BG.png) no-repeat top;*/
        /*background-size: 40% auto, 22% auto,100% auto;*/
        background: url(../Images/BG.png) no-repeat bottom;
        background-size: 100% auto;
        z-index: -1;
    }

.bg-bot {
    height: 100%;
    width: 100%;
    /*background: url("../newImages/footer.png") no-repeat bottom center;*/
    background: url("../Images/footer.png") no-repeat bottom center;
    position: absolute;
    bottom: 0;
    background-size: 100%;
}

#wrapper {
    width: 100%;
    max-width: 1524px;
    height: auto;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    z-index: 1;
}

/* #wrapper::before {
        content: '';
        background: url(../images/logo-button-and-boder.png) no-repeat no-repeat -273px -765px;
        width: 568px;
        height: 568px;
        position: absolute;
        right: -40px;
        top: 0;
        z-index: 0;
    }

    #wrapper::after {
        content: '';
        background: url(../images/logo-button-and-boder.png) no-repeat 0 -922px;
        width: 199px;
        height: 208px;
        position: absolute;
        left: 200px;
        top: 189px;
        z-index: 1;
    }*/





.logo {
    background: url("../Images/Logo_New.png") no-repeat;
    /*background: url("../images/logo-2023.png") no-repeat;*/
    height: 146px;
    width: 252px;
    margin: auto;
    /*position: relative;*/
    /* top: 0;
    left: 0;
    right: 0;*/
    z-index: 9999;
    position: absolute;
    right: 40px;
    top: 95px;
}







    .logo > a {
        position: absolute;
        width: 100%;
        height: 100%;
    }


.title-page {
    background: url("../images/text_t7.png") no-repeat center;
    background-size: contain;
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    width: 623px;
    height: 303px;
    margin: -75px 0 -245px 474px;
    padding-top: 200px;
}

.nv-trai {
    background: url(../Images/char1.png) no-repeat center;
    background-size: contain;
    z-index: 1;
    position: absolute;
    top: 579px;
    left: -195px;
    width: 682px;
    height: 689px;
}

.nv-phai {
    background: url(../Images/char2.png) no-repeat center;
    background-size: contain;
    z-index: 1;
    position: absolute;
    top: 600px;
    right: -152px;
    width: 397px;
    height: 694px;
}

#wrapmenu {
    position: relative;
    width: 100%;
    height: 429px;
    margin: 0px auto;
    /*background: transparent url("../newImages/khung_top.png") no-repeat top center;*/
    background: transparent url("../Images/khung_top.png") no-repeat top center;
    overflow: visible;
    z-index: 2;
}

.mainmenu {
    height: 49px;
    margin: 0 auto;
    padding: 0;
    width: 1160px;
    position: relative;
    /*padding-top: 330px;
    padding-left: 158px;*/
    padding-top: 365px;
    padding-left: 215px;
}

    .mainmenu li {
        list-style: none;
        float: left;
        margin: 0 0px;
    }

        .mainmenu li a {
            display: block;
            width: 198px;
            height: 60px;
            margin: 0 0px;
        }

#wrapmenu .mainmenu li .m_home {
    /*background: url(../newImages/btn_trangchu.png) no-repeat center center;*/
    background: url(../Images/btn_trangchu.png) no-repeat center center;
}

    #wrapmenu .mainmenu li .m_home:hover {
        /*background: url(../newImages/btn_trangchu_hover.png) no-repeat center center;*/
        background: url(../Images/btn_trangchu_hover.png) no-repeat center center;
    }

#wrapmenu .mainmenu li .m_sukien {
    /*background: url(../newImages/btn_sukien.png) no-repeat center center;*/
    background: url(../Images/btn_sukien.png) no-repeat center center;
}

    #wrapmenu .mainmenu li .m_sukien:hover {
        /*background: url(../newImages/btn_sukien_hover.png) no-repeat center center;*/
        background: url(../Images/btn_sukien_hover.png) no-repeat center center;
    }

#wrapmenu .mainmenu li .m_napthe {
    /*background: url(../newImages/btn_napthe.png) no-repeat center center;*/
    background: url(../Images/btn_napthe.png) no-repeat center center;
}

    #wrapmenu .mainmenu li .m_napthe:hover {
        /*background: url(../newImages/btn_napthe_hover.png) no-repeat center center;*/
        background: url(../Images/btn_napthe_hover.png) no-repeat center center;
    }

#wrapmenu .mainmenu li .m_forum {
    /*background: url(../newImages/btn_hotro.png) no-repeat center center;*/
    background: url(../Images/btn_hotro.png) no-repeat center center;
}

    #wrapmenu .mainmenu li .m_forum:hover {
        /*background: url(../newImages/btn_hotro_hover.png) no-repeat center center;*/
        background: url(../Images/btn_hotro_hover.png) no-repeat center center;
    }

#wrapmenu .mainmenu li .m_facebook {
    background: url(../Images/btn_fb.png) no-repeat center center;
}

    #wrapmenu .mainmenu li .m_facebook:hover {
        background: url(../Images/btn_fb_hover.png) no-repeat center center;
    }

.loop {
    background: url("../Images/khung_loop.png") repeat-y top center;
    width: 100%;/*99.46%;*/
    height: auto;
    position: relative;
    z-index: 1;
}

#header {
    background: url("../images/tetAL18/box_top.png") no-repeat top center;
    height: 123px;
}

#container {
    position: relative;
    width: 100%;
    height: auto;
    clear: both;
    z-index: 3;
    top: 0;
}

@keyframes play-left {
    0% {
        background-position: 0 -5280px;
    }
}

@keyframes play-right {
    0% {
        background-position: 0 -5280px;
    }
}

@keyframes light-slogan {
    0% {
        margin-left: -158px;
        background-position-x: 75px;
        background-position-y: -57px;
        opacity: 0.7;
    }

    20% {
        margin-left: 450px;
        background-position-x: -355px;
        background-position-y: -485px;
        opacity: 0.7;
    }

    21% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        margin-left: 450px;
        background-position-x: -355px;
        background-position-y: -485px;
    }
}


/*--------------------CONTAINER------------------*/

.maincontent {
    height: auto;
    padding: 10px 106px;
    min-height: 800px;
    margin-top: -1px;
    padding-bottom: 41px;
}



.linebottom {
    /*width: 101.44%;*/
    width: 100%;
    height: 114px;
    /*background: url("../newImages/khung_bot.png") no-repeat bottom center;*/
    background: url("../Images/khung_bot.png") no-repeat bottom center;
    margin-top: -28px;
    margin-bottom: 50px;
}

#changetab {
    margin: 0 auto 20px;
    padding: 0px;
    width: max-content;
}

    #changetab li {
        margin-left: 15px;
        margin-right: 15px;
        height: 39px;
        list-style: none;
        float: left;
    }


        #changetab li:first-child {
            border: none;
        }

    #changetab a {
        border-bottom: solid 1px #B27F7F;
        font-size: 16px;
        /*font-weight: bold;*/
        color: #4c0000;
        margin-left: 14px;
        padding-right: 15px;
        cursor: pointer;
        text-decoration: none;
        display: block;
        width: 230px;
        height: 39px;
        line-height: 40px;
        overflow: hidden;
        font-family: UTM_Alexander;
        /*font-weight: bold;*/
        text-transform: capitalize;
    }

    #changetab li:nth-last-of-type(1) > a {
        border-bottom: unset;
    }

    #changetab li:nth-last-of-type(2) > a {
        border-bottom: unset;
    }

    #changetab li:nth-last-of-type(3) > a {
        border-bottom: unset;
    }

    #changetab a:first-child {
    }

    #changetab li.active a, #changetab a:hover {
        color: #e42115;
        /*background: url("../images/hover.png") no-repeat top right;*/
    }

    #changetab a.tabsmore {
        padding: 0;
        font-size: 12px;
        color: #808080;
    }

        #changetab a.tabsmore:hover {
            color: #404040;
        }

/*---------------FOOTER--------------*/
#footer {
    width: 100%;
    height: 100px;
    clear: both;
}

.tab_container img {
    max-width: 830px;
    margin: 0 auto;
}

#boxtabs {
    margin-top: 30px;
    /*padding: 0 25px;*/
    padding: 0px 64px 0 122px;
}

    #boxtabs > table {
        background: url(../Images/box_text.png);
        background-size: cover;
        width: 925px;
        max-width: 100%;
        height: 366px;
        margin: 0px auto 65px !important;
        padding: 7px 12px 7px 12px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        /*border: solid 2px rgb(153,0,0);*/
    }

        #boxtabs > table::after {
            content: '';
            background: url(../images/chi-tiet-khung-nho.png) center center;
            width: 240px;
            height: 20px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -40px;
        }

    #boxtabs .tab_container {
        padding: 0 150px;
    }
/*#boxtabs::before {
        content: '';
        background: url(../images/tet2019/img.png) -263px -15px;
        width: 188px;
        height: 79px;
        position: absolute;
        transform: rotate(-45deg);
        left: 68px;
        top: -155px;
        z-index: 1;
    }*/
@keyframes ani_updown {
    0% {
        top: -10px;
    }

    50% {
        top: 0;
    }

    100% {
        top: -10px;
    }
}

@keyframes ani_appear_left {
    0% {
        left: -442px;
    }

    100% {
        left: 0;
    }
}

@keyframes ani_appear_right {
    0% {
        right: -442px;
    }

    100% {
        right: 0;
    }
}

#canvas_fall_flower, #canvas {
    position: absolute;
}



.drop {
    position: absolute;
    top: 0;
    opacity: 0;
}

.snow {
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background-color: #FFF;
    box-shadow: 0 0 10px #FFF
}


.animate {
    animation: falling 8.5s infinite ease-in;
}


@keyframes falling {
    0% {
        top: 0;
        opacity: 1;
    }

    100% {
        top: 1500px;
        opacity: 0
    }
}