form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow-x:hidden; background-color: #f1f1f1;}
.main{position:relative; top: 0px; left: 0px; width: 1200px; height:auto; max-width: 100%; padding: 0px; margin: 0px auto;background-color: #fff; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;}
.container{position:relative; top: 0px; left: 0px; width: 1200px; height:auto; max-width: 100%; padding: 0px 15px; margin: 0px auto;}
.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; background: linear-gradient(135deg, #740001 0%, rgba(170,0,0,1) 80%, rgba(238,0,0,1) 100%);}
/*.banner:after{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; display:block; background-image: url(../images/yen-bai.png); background-size:contain; background-position: center right; background-repeat:no-repeat; filter:opacity(0.9); -webkit-filter: opacity(0.9);}*/
.banner .container{height: 100%; pointer-events:none;background-image: url(../images/bg-trong-dong.png); background-size:cover; background-position: center; background-repeat:no-repeat; z-index: 2;}
.banner .container:before{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; display:block; background-image: url(../images/co-dang.png); background-size:contain; background-position:center left; background-repeat:no-repeat;}
.banner .title{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-height: 100%; padding: 25px 25px 25px 130px; color: #fff; display:grid; align-content:center; align-items:center; overflow:hidden;}
.banner .title span{position:relative; top: 0px; left: 0px; width: max-content; height:auto; max-width: 100%; display:block; text-shadow: #333 1px 0 10px;}
.banner .title span:nth-child(1){text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #fff; margin-bottom: 10px; font-size: 14px;}
.banner .title span:nth-child(2){font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: 1px;}
.banner .title span:nth-child(3){font-weight: 500; font-size: 22px; text-transform: uppercase; line-height: 30px; letter-spacing: 3px;}
.top-menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; border-bottom: 1px solid #ababab; background-color: #f1f1f1; z-index: 2; padding: 10px; font-weight: 400; text-align:center; text-transform:uppercase;}
.top-menu.mark-filter{text-transform:unset;}
.top-menu.mark-filter > *{display:block;}
.top-menu.mark-filter > span:nth-child(1){color: #d60000;}
.top-menu.mark-filter > span:nth-child(2){text-transform:uppercase; font-size: 25px; line-height: 30px; padding: 10px 5px; font-weight: 500; letter-spacing: 2px; color: #770001;}
.top-menu.mark-filter > .filter-bar > *{position:relative; top: 0px; left: 0px; height: 40px; display:inline-block; vertical-align:middle; margin: 5px;}
.top-menu.mark-filter > .filter-bar > input{width: 200px; font-weight: 300;}
.top-menu.mark-filter > .filter-bar > select{width: 70px; font-weight: 300;}

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

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

.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";}

article{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
article p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 10px 0px;}

.new-letters-page{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.new-letters-page .container{display:grid; grid-template-columns: 1fr; grid-column-gap: 30px; padding-top: 20px; padding-bottom: 20px;}
.new-letters-page .competition-list{min-height: 242px;}
.new-letters-page .competition-list .item{display:inline-block; vertical-align:top; width: 250px; padding: 0px; margin: 10px; border: 1px solid #ababab; border-radius: 5px; overflow:hidden;}
.new-letters-page .competition-list .item img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4/3; display:block;}
.new-letters-page .competition-list .item span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; display:block; font-weight: 400; text-align: center;}

.footer{position:relative; width: 100%; height: auto; padding: 15px 0px; background-color: #aa0000; color: #fff; border-top: 5px solid #880000;}
.footer .container{display:grid; grid-template-columns: 1fr 350px; grid-column-gap: 20px; align-items:center;}
.footer .container .logo{width:auto; height: 100%; background-image:url(../images/footer-logo.png); background-size: contain; background-repeat:no-repeat; background-position:center left;}
.footer .container .info span{position:relative; display:block; text-align:justify;}
.footer .container .info span:first-child{font-size: 18px; line-height: 30px; letter-spacing: 1px;}
.footer .container .info .about{padding-bottom: 5px; margin-bottom: 15px; font-size: 18px; font-weight: 400; text-transform:uppercase; letter-spacing: 1px;}
.footer .container .info .about:after{content: ""; position:absolute; top: auto; left: 0px; bottom: 0px; width: 100%; height: 1px; background: linear-gradient(90deg, #fff 0%, transparent 40%, transparent 100%);}
.footer .container .info a{color: #fff;}
.footer .container .info a:hover{color: #fff; text-decoration:underline;}
.footer .container .info .contact{padding: 3px 3px 3px 35px; margin: 5px 0px;}
.footer .container .info .contact:before{content: ""; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); font-size: 25px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.footer .container .info .address{font-weight: 400; margin-top: 15px;}
.footer .container .info .address:before{content: "\f3c5"}
.footer .container .info .email:before{content: "\f0e0"; font-size: 20px;}
.footer .container .info .mobile:before{content: "\f879"; font-size: 20px;}
.footer .container .counter{position:relative; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 5px; grid-row-gap: 5px; padding: 10px; color: #fff; pointer-events:none;}
.footer .container .counter:before{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(171,171,171,0.65); border-radius: 5px; display:block;}
.footer .container .counter > label:first-child{grid-column-start: 1; grid-column-end: 4; font-size: 16px; line-height: 22px; padding-left: 25px;}
.footer .container .counter > label:first-child:before{content: "\f643"; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); font-weight: 900; font-family: "Font Awesome 5 Pro";}
.footer .container .counter label{position:relative; width: 100%; height:auto; display:block; font-size: 14px; line-height: 18px;}
.footer .container .counter span{position:relative; width: 100%; height:auto; display:block; font-weight: bold; letter-spacing: 1px;}
.footer .container .counter .item:last-child{grid-column-start: 2; grid-column-end: 4;}

.go-to-top{position:fixed; top: auto; left:auto; right: 15px; bottom: 15px; width: 45px; height: 45px; border: 1px solid rgba(136, 0, 0, 0.5); border-radius: 10px; cursor: pointer; background-color: rgba(170, 0, 0, 0.25); color: #fff; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);}
.go-to-top:before{content: "\f077"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.go-to-top:hover{background-color: rgba(136, 0, 0, 0.5);}

.grid{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.grid > div{position:relative !important; top: 0px !important; left: 0px !important; width: 100%; height:auto; border: 0px;} 
.grid .grid-header{border-top-left-radius: 5px; border-top-right-radius: 5px;}
.grid .grid-header .grid-header-content{padding-right: 0px !important;}
.grid .grid-header tr th{padding: 8px !important;}
.grid .grid-content{padding-bottom: 0px; font-size: 14px; line-height: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.grid .grid-content .tbl-grid{margin-bottom: 0px; width: 100% !important;}
.grid .grid-content .tbl-grid tr td{padding: 8px !important;}
.grid .grid-content .tbl-grid .no-data td{text-align:center;}
.mark-search .grid-header th[data-field='SSBD']{width: 140px; min-width: 140px; max-width: 140px;}
.mark-search .grid-header th[data-field='SBirthday']{width: 160px; min-width: 160px; max-width: 160px;}
.mark-search .grid-header th[data-field='SGender']{width: 90px; min-width: 90px; max-width: 90px;}
.mark-search .grid-header th[data-field='SCCCD']{width: 200px; min-width: 200px; max-width: 200px;}
.mark-search .grid-header th[data-field='SFullname'],
.mark-search .grid-header th[data-field='SScore']{min-width: 250px;}

@media (max-width: 950px) {
    .banner .title{padding-left: 110px;}
}

@media (max-width: 768px) {
    .new-letters-page .container{padding-left: 5px; padding-right: 5px; padding-top: 15px; padding-bottom: 15px;}
    .grid .grid-header{display:none !important;}
    .grid .grid-content{border: 0px; background-color: transparent;}
    .grid .grid-content .tbl-grid{padding: 0px;}
    .new-letters-page .competition-list .item{width: calc(50% - 20px);}
}

@media (max-width: 750px) {
    .banner .title{padding: 20px 0px 20px 80px;}
    .banner .title:before{width: 70px;}
    .banner .title span:first-child{font-size: 16px;}
    .banner .title span:last-child{font-size: 18px; line-height: 22px;}

    .new-letters-page .container, .letters-list-page .container{display:block;}
    .new-letters-page .container .right-content, .letters-list-page .container .right-content{margin-top: 25px;}
    
    .footer .container{display: block;}
    .footer .container .info {margin-bottom: 20px;}
}

@media (max-width: 600px) {
    .banner .title{padding-left: 60px;}
    .banner .title:before{width: 50px;}
    .banner .title span:not(:last-child){display:none;}
    .banner .title span:nth-child(3){font-size: 15px; line-height: 22px; font-weight: 400; letter-spacing: 1.5px; width: 100%;}
    
    .new-letters .obj-list{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 450px) {
    .banner .title{padding: 15px 0px 15px 60px;}
    .row .col-5{width: 100%; margin-top: 15px;}
    .row .col-5:first-child{margin-top: 0px;}
    .division-selector, .personal-info{grid-template-columns: 1fr;}
    .document-search .row{grid-template-columns:repeat(8, 1fr);}
    .document-search .row .col-12{grid-column:auto/span 8;}
    .new-letters-page .competition-list .item{width: calc(100% - 20px);}
}