:root{
    --border-color: #ababab;
    --pager-ul-li-hover-bg-color: #ababab;
    --pager-ul-li-selected-bg-color: #ababab;
}
html, body{background-color: #DA0000;}
form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow-x:hidden;}
img{border-radius: 5px;}
.main{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-width: 100%; padding: 0px; margin: 0px; background-color: #fff;}
.container{position:relative; top: 0px; left: 0px; width: 1320px; height:auto; max-width: 100%; padding: 0px 15px; margin: 0px auto;}
.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 10; background-color: #DA0000; background-image: url(../images/banner-bg.jpg); background-repeat: no-repeat; background-size:cover; background-position:center;}
.banner .container{ display:grid; grid-template-columns: max-content 1fr; grid-column-gap: 15px; height: 100%; align-items:center;}
.banner .logo{position:relative; top: 0px; left: 0px; width: calc(100vw / 10); height: 100%; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: auto calc(100% - 40px); background-position: center;}
.banner .banner-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; text-align:left;}
.banner .banner-title > div{position:relative; top: 0px; left: 0px; width: max-content; height:auto; white-space:nowrap; overflow:hidden; pointer-events:none;}
.banner .banner-title span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:block; font-size: 20px; line-height: 28px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px;
                           background: #F9ED87;
                            background: linear-gradient(to bottom, #F9ED87 40%, #977A01   100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
}
.banner .banner-title span:last-child{font-weight: bold; letter-spacing: 2px; font-size: 28px; line-height: 36px;}
.banner .poster{background-image: url(../images/poster.png); background-repeat:no-repeat; background-position:center bottom; background-size: contain; display:none;}

.top-menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 40px; padding: 0px; border-bottom: 1px solid #ababab; /*background: rgb(158,0,1);
        background: linear-gradient(0deg, rgba(158,0,1,1) 0%, rgba(218,0,0,1) 100%);*/
        /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
          background-color: #f1f1f1; z-index: 2;
}
.top-menu .container {min-height: 40px; display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 10px; align-items: center;}
/*.top-menu .container > ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style:none; text-align: left; z-index: 2;}
.top-menu .container > ul > li{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align:middle; padding: 0px; margin: 0px;}
.top-menu .container > ul > li > a{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 0px 8px; margin: 0px; line-height: 48px; font-weight: 400; text-transform:uppercase; color: #444; display:block; transition: 0.3s;}
.top-menu .container > ul > li > a:hover{color: #D71920;}
.top-menu .container > ul > li:has(ul) > a{padding-right: 20px;}
.top-menu .container > ul > li:has(ul) > a:after{content: "\f107"; position:absolute; top: 0px; left: auto; right: 5px; font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.top-menu .container > ul > li.active > a{color: #D71920;}
.top-menu .container > ul > li:before{content: ""; position:absolute; top: 5px; left: 50%; right: auto; bottom: 5px; width: 100%; height:auto; transform:translateX(-50%); border-radius: 5px; background: #AA0000; display:block; transition: 0.3s; filter:opacity(0); -webkit-filter: opacity(0);}
.top-menu .container > ul > li.active:before{filter:opacity(1); -webkit-filter: opacity(1);}
.top-menu .container > ul > li.active > a{color: #fff;}
.top-menu .container > ul > li:not(:last-child){margin-right: 20px;}
.top-menu .container > .mobile-menu-icon{position:absolute; top: 0px; left: 15px; width: auto; height: 100%; aspect-ratio: 1; display: none;}
.top-menu .container > .mobile-menu-icon:before{content: "\f0c9"; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-size: 30px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
    */
.top-menu .search-box{position:relative; width: 250px; height:auto; padding: 0px; margin: 0px;}
.top-menu .search-box:after{content: "\f002"; position:absolute; top: 50%; left:auto; right: 8px; transform:translateY(-50%); font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.top-menu .search-box .keyword{padding-right: 32px; font-weight: 300;}

.main-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 100vh;}

.slick-list, .slick-track{height: 100%;}

.head-line{position:relative; top: 0px; left: 0px; width: 100%; height:auto; color: #D71920; padding: 5px 0px;}
.head-line .container{display:grid; grid-template-columns: max-content 1fr; grid-column-gap: 15px;}
.head-line .container:after{content: ""; position:absolute; top:auto; left:15px; right: 15px; bottom: 0px; width: auto; height: 1px; background-color: #D71920;}
.head-line .head-line-date{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:grid; grid-template-columns: max-content 1fr; grid-column-gap: 5px; align-items:center;}
.head-line .head-line-date:before{content: "\f073"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.direction{position:relative; top: 0px; left: 0px; width: 100%; height:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.direction .container .direction-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:hidden;}
.direction .container:after{content: ""; position:absolute; top:auto; left: 15px; bottom: 0px; right: 15px; width: auto; height: 1px; background: linear-gradient(90deg, rgba(0,136,204,1) 0%, transparent 50%, transparent 100%);}
.direction .container a{position:relative; display:inline-block; vertical-align: middle; padding: 5px 20px 5px 0px; line-height: 30px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: #666;}
.direction .container a:hover{color: #0088cc;}
.direction .container a:not(:last-child):after{content: "\f105"; position:absolute; top: 50%; left:auto; right: 5px; transform:translateY(-50%); font-weight: 300; font-family: "Font Awesome 5 Pro";}
.direction .container a:last-child{padding-right: 0px;}
.direction .container a:first-child{padding-left: 25px;}
.direction .container a:first-child:before{content: "\f80a"; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); font-weight: 300; font-family: "Font Awesome 5 Pro";}

.list-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:grid; grid-template-columns: 1fr 100px; grid-column-gap: 10px; grid-row-gap: 10px; align-content:center; align-items:center;}
.list-box .head{position:relative; top: 0px; left: 0px; width: auto; padding: 5px 0px; margin: 0px; text-transform:uppercase; font-weight: 700; font-size: 17px; line-height: 22px;}
.list-box .link{position:relative; top: 0px; left: 0px; width:auto; height:auto;}
.list-box .link a{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 5px; color: #0084F3;}
.list-box .link a:before{content: "\f0da"; position:relative; top: 0px; left: 0px; margin-right: 5px; font-weight: 900; font-family: "Font Awesome 5 Pro"; display:inline-block;}
.list-box .link a:hover{color: #a00;}
.list-box .body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; grid-column-start: 1; grid-column-end: 3;}

.main-home{display:grid; grid-template-columns: 1fr 350px; grid-column-gap: 20px; padding-top: 15px; padding-bottom: 15px;}
.main-home .left-content{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.main-home .right-content{position:relative; top: 0px;  left: 0px; width: 100%; height:auto; display:grid; grid-template-columns: 1fr; grid-auto-rows:max-content; grid-column-gap: 20px; grid-row-gap: 20px;}

.gallery-home{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px;}

.chi-dao-dieu-hanh{
    padding: 10px; border: 1px solid #eee; border-radius: 5px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(253,240,240,1) 100%);
}
.chi-dao-dieu-hanh .head{grid-column-start: 1; grid-column-end: 3; text-align: center;}
.chi-dao-dieu-hanh .head:after{content: ""; position:absolute; top: auto; left: 50%; bottom: 0px; width: 80px; height: 2px; transform:translateX(-50%); background-color: #d71920;}
.chi-dao-dieu-hanh .body{height: 300px; overflow:hidden;}
.chi-dao-dieu-hanh .body .marquee{position:absolute; top: 0px; left: 0px; width: 100%; height:auto; text-align:justify;}
.chi-dao-dieu-hanh .body a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; padding: 5px 5px 5px 20px;}
.chi-dao-dieu-hanh .body a:before{content: "\f14a"; position:absolute; top: 5px; left: 0px; width:auto; height:auto; color: inherit; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.video-box{grid-row-gap: 0px; border-radius: 5px; overflow:hidden;}
.video-box .head{grid-column-start: 1; grid-column-end: 3; font-weight: 400; background-color: #feeea9; padding-left: 10px;}
.video-box .head:before{content: ""; position:absolute; top: 50%; left: 0px; width: 2px; height: 50%; transform:translateY(-50%); background-color: #d71920;}
.video-box .player{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9;}
.video-box video{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9; display:block;}
.video-box video[poster]{width: 100%; height: 100%; object-fit:cover;}
.video-box .play-list{position:relative; top: 0px; left: 0px; width: 100%; height: 164px; overflow:auto; padding: 5px; background-color: #feeea9;}
.video-box .play-list ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px;}
.video-box .play-list ul li{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 5px 5px 15px; margin: 0px; text-align:justify; display:block; cursor:pointer;}
.video-box .play-list ul li:hover{color: #d71920;}
.video-box .play-list ul li:before{content: "\f105"; position:absolute; top: 5px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.web-link{grid-row-gap: 0px; border-radius: 5px; overflow:hidden;}
.web-link .head{grid-column-start: 1; grid-column-end: 3; padding-left: 10px; font-weight: 400; display:none;}
.web-link .head:before{content: ""; position:absolute; top: 50%; left: 0px; width: 2px; height: 50%; transform:translateY(-50%); background-color: #d71920;}
.web-link .body{display:grid; grid-template-columns: 1fr; grid-row-gap: 15px;}
.web-link .body a{position:relative; top: 0px;left: 0px; width: 100%; height:auto; display:block; padding: 0px; margin: 0px;}
.web-link .body a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border-radius: 8px; border: 1px solid #ddd;}

.news-summary{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:grid; grid-template-columns: 1fr 1fr; grid-column-gap: 25px; grid-row-gap: 25px;}

.contact-info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-bottom: 20px;}
.contact-info span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block;}
.contact-info span:first-child{font-weight: 400; font-size: 18px; text-transform: uppercase;}
.map{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border: 1px solid #ababab; border-radius:5px; overflow:hidden;}
.map iframe{position:relative; top: 0px; left: 0px; width:100%; height:auto; display:block; aspect-ratio:4/3; border: 0px;}
.contact-form .row{grid-template-columns: repeat(10, 1fr);}

.hit-counter{background-color: #feeea9; border-radius: 5px; overflow:hidden; height:max-content;}
.hit-counter .head{grid-column-start: 1; grid-column-end: 3; font-weight: 400; padding-left: 10px;}
.hit-counter .head:before{content: ""; position:absolute; top: 50%; left: 0px; width: 2px; height: 50%; transform:translateY(-50%); background-color: #d71920;}
.hit-counter .body{padding: 15px; text-align:center; font-size: 20px; letter-spacing: 1px; font-weight: bold;}

.bottom-menu > ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style:none; text-align: center;}
.bottom-menu > ul > li{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align:middle; padding: 0px; margin: 0px; font-weight: 400;}
.bottom-menu > ul > li > a{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 0px 8px; margin: 0px; line-height: 48px; font-weight: 400; text-transform:uppercase; color: #D71920; display:block; transition: 0.3s;}
.bottom-menu > ul > li.active > a{color: #fff;}
.bottom-menu > ul > li:before{content: ""; position:absolute; top: 5px; left: 50%; right: auto; bottom: 5px; width: 100%; height:auto; transform:translateX(-50%); border-radius: 5px; background: #AA0000; display:block; transition: 0.3s; filter:opacity(0); -webkit-filter: opacity(0);}
.bottom-menu > ul > li.active:before{filter:opacity(1); -webkit-filter: opacity(1);}
.bottom-menu > ul > li:not(:last-child){margin-right: 20px;}
.bottom-menu > ul > li:hover > ul{display:none;}

.footer{position:relative; width: 100%; height: auto; padding: 15px 0px; background: #be1e2d url('../images/bg-footer.png') repeat-x center top; background-size: cover; border-top: 2px solid #d71921;}
.footer .container{display:block; text-align:center;}
.footer .container .info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin-top: 200px;}
.footer .container .info span{position:relative; display:block; line-height: 24px;}
.footer .container .info span:first-child{font-weight: bold; font-size: 18px; text-transform: uppercase; color: #be1e2d; line-height: 28px;}

.coppyright{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; background-color: #be1e2d; color: #fff;}
.coppyright span{position:relative; top: 0px; left: 0px; display:block;}

.supporter{position:fixed; top: auto; left: auto; right: 15px; bottom: 15px; width: max-content; height:auto; padding: 5px; margin: 0px; border-radius: 5px; cursor:pointer; color: #fff; 
           background-image: linear-gradient(#42A1EC, #0070C9); border: 1px solid #0077CC; display:grid; grid-template-columns:max-content 1fr max-content; grid-column-gap: 10px; 
           overflow:hidden; transform:translateY(0); filter: opacity(1); -webkit-filter: opacity(1); transition: 0.5s;}
.supporter:before{content: "\f82d"; position:relative; top: 0px; left: 0px; font-size: 20px; font-weight: 900; font-family: "Font Awesome 5 Pro";}
.supporter:after{content: "\f106"; position:relative; top: 0px; left: 0px; font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.supporter .supporter-list{position:absolute; top: auto; left: auto; right: 0px; bottom: calc(100% + 5px); width: max-content; height:auto; max-width: 300px; padding: 5px; border-radius: 5px; border: 1px solid #0077CC; 
                           background-color: rgba(0, 112, 201, 0.65); backdrop-filter: blur(30px); transform:translateY(calc(100% + 40px)); filter: opacity(0); -webkit-filter: opacity(0); transition: 0.3s;
                           z-index: -1;
}
.supporter.hide{transform:translateY(100px); filter: opacity(0); -webkit-filter: opacity(0);}
.supporter.show{overflow:visible;}
.supporter.show .supporter-list{transform:translateY(0px); filter: opacity(1); -webkit-filter: opacity(1); z-index: 1;}
.supporter.show:after{content: "\f107";}
.supporter.show .supporter-list a{position:relative; top: 0px; left: 0px; width: auto; height:auto; border-bottom: 1px solid #0077CC; padding: 5px 5px 5px 55px; color: #fff; margin: 0px; 
                                  display:block; background-image: url(../images/support-icon.png); background-repeat:no-repeat; background-position:center left 5px; background-size: 40px;
                                  transition: 0.3s; line-height: 40px;
}
.supporter.show .supporter-list a:hover{background-color: rgba(0, 112, 201, 0.65); border-radius: 5px;}
.supporter.show .supporter-list a span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block;}
.supporter.show .supporter-list a span:first-child{font-weight: 500;}
.supporter.show .supporter-list a:last-child{border-bottom: 0px;}

@media (max-width: 1200px) {
    
}

@media (max-width: 950px) {
    .banner{min-height: 104px;}
    .banner .logo{min-width: 104px;}
    .banner .poster{display:none;}   
    .banner .banner-title{grid-row-start: unset; grid-row-end: unset;}
    .top-menu .container{grid-template-columns: 1fr;}
    .top-menu .search-box{display:none;}

    .main-home{grid-template-columns: 1fr; grid-row-gap: 20px;}
    .main-home .right-content{display:grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; grid-row-gap: 20px;}
}

@media (max-width: 750px) {
    .banner .banner-title span{font-size: 18px;}
    .banner .banner-title span:last-child{font-size: 24px; letter-spacing: 1px;}
    .footer{background-image: url(../images/bg-footer-mobile.png); border-top: 0px;}
    .footer .container .bottom-menu{display:none;}
    .footer .container .info{margin-top: 0px;}
}

@media (max-width: 600px) {
    .banner{min-height: 70px;}
    .banner .logo{min-width: 70px; background-position: center left; background-size: auto calc(100% - 20px);}
    .banner .banner-title {padding: 10px 0px;}
    .banner .banner-title span{font-size: 16px; letter-spacing: unset; line-height: 22px;}
    .banner .banner-title span:last-child{font-size: 18px; letter-spacing: 1px; line-height: 28px;}
    .head-line .container{grid-template-columns: 1fr; padding: 0px;}
    .head-line .container:after{left: 0px; right: 0px;}
    .head-line .head-line-date{display:none;}
    .hot-news .view-port a p{display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient:vertical; overflow:hidden;}
    .top-menu{display:grid; grid-template-columns: max-content 1fr; overflow:hidden;}
    .top-menu:before{color: #000;}
    .top-menu .container{max-width: 100%; width: 100%; text-align:right; padding: 0px 5px; display:block;}
    .top-menu .search-box{display: inline-block; top: 50%; transform:translateY(-50%);}
}

@media (max-width: 450px) {
    .banner .container{padding: 0px 5px;}
    .banner .banner-title span{font-size: 14px; letter-spacing: unset; line-height: 22px;}
    .banner .banner-title span:last-child{font-size: 16px; letter-spacing: unset; line-height: 22px;}
    .main-home .right-content{grid-template-columns: 1fr;}
    .news-summary{grid-template-columns: 1fr;}
}