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: 0px 15px;}
/*.top-menu > ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style:none; text-align: left;}*/
.top-menu > ul > li{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align:middle; padding: 0px; margin: 0px;}
.top-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; display:block; transition: 0.3s;}
.top-menu > ul > li.active > a{color: #fff;}
.top-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);}
.top-menu > ul > li.active:before{filter:opacity(1); -webkit-filter: opacity(1);}
.top-menu > ul > li:not(:last-child){margin-right: 20px;}
/*.top-menu > .mobile-menu-icon{position:absolute; top: 0px; left: 15px; width: auto; height: 100%; aspect-ratio: 1; display: none;}
.top-menu > .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.fixed{position:fixed; transform:translateY(-150%);}
.top-menu.fixed.show{transform: translateY(0px); transition: 0.5s;}
.top-menu.fixed + div{margin-top: 49px;}*/

.top-menu .date{display:none;}

.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 300px; grid-column-gap: 30px; padding-top: 20px; padding-bottom: 20px;}
.new-letters{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.new-letters .row{grid-template-columns:repeat(10, 1fr);}
.new-letters .row:not(:last-child){margin-bottom: 10px;}
.new-letters .row .col-5{margin-bottom: 0px;}
.new-letters .row > div{font-size: 16px; margin-bottom: 0px;}
.new-letters .row > div label{color: #000; font-weight: 400;}
.new-letters .description{color: #cc0000;}
.new-letters .description strong{text-decoration: underline;}
.new-letters label{position:relative; top: 0px; left: 0px; width: max-content; height:auto; display:block;}
.new-letters textarea{resize:vertical; min-height: 200px; max-height: 100vh; color: #666;}
.new-letters input, .new-letters select{color: #666; font-weight: 300;}
.new-letters label[for]{display:inline; vertical-align:middle; margin-left: 5px;}
.new-letters label strong{text-transform:uppercase; color: #cc0000;}
.new-letters .note{text-align:justify; font-style:italic; color: #cc0000;}
.new-letters .obj-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; display:grid; grid-template-columns:repeat(4, 1fr); grid-column-gap: 10px; grid-row-gap: 10px;}
.new-letters .obj-list .item{position:relative; top: 0px; left: 0px; padding-left: 25px; cursor:pointer;}
.new-letters .obj-list .item:hover, .new-letters .obj-list .item.selected{color: #A00;}
.new-letters .obj-list .item:before{content: "\f111"; position:absolute; top: 50%; left: 0px; width: auto; height:auto; transform:translateY(-50%); font-weight: 300; font-family: "Font Awesome 5 Pro"; display:inline-block; vertical-align: middle; margin-right: 5px;}
.new-letters .obj-list .item.selected:before{content: "\f058";}
.new-letters .obj-list .item.selected span{font-weight: 400;}
.new-letters .obj-list .item span{position:relative; top: 0px; left: 0px; width: max-content; height:auto; display:inline-block; vertical-align: top; pointer-events:none;}
.new-letters .attach-file label{display:inline-block; vertical-align: middle; margin-right: 15px;}
.new-letters .attach-select{position:relative; top: 0px; left: 0px; width: 200px; height:auto; display: inline-block; vertical-align: middle; text-align:center; background-color: #f1f1f1; border-radius: 5px; border: 1px dashed #ababab; overflow:hidden;}
.new-letters .attach-select .item{padding: 15px; cursor:pointer; border-radius: 5px; font-weight: 400; transition: 0.3s;}
.new-letters .attach-select .item:hover{background-color: #cc0000; color: #fff;}
.new-letters .attach-select .item span{position:relative; top: 0px; left: 0px; width: max-content; height:auto; display:inline-block; padding-left: 30px; pointer-events:none;}
.new-letters .attach-select .item span:before{content: ""; position:absolute; top: 50%; left: 0px; transform:translateY(-50%); display:block; font-size: 24px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.new-letters .attach-select .item.image span:before{content: "\f03e";}
.new-letters .attach-select .item.video span{padding-left: 33px;}
.new-letters .attach-select .item.video span:before{content: "\f03d";}
.new-letters .attach-select .item.file span{padding-left: 24px;}
.new-letters .attach-select .item.file span:before{content: "\f15c";}
.new-letters .attach-list{position:relative; top: 0px; left: 0px; width:100%; height:auto; border: 1px dashed #ababab; border-radius: 5px; margin-top: 15px; padding: 10px; display:block;}
.new-letters .attach-list:empty{display:none;}
.new-letters .attach-list .attach-item{position:relative; top: 0px; left: 0px; width: 90px; height:auto; overflow:hidden; display:inline-block; vertical-align: top; margin: 10px; padding: 5px;}
.new-letters .attach-list .attach-item:hover{background-color: #cce8ff; border-radius: 5px;}
.new-letters .attach-list .attach-item .close{position:absolute; top: 0px; left: auto; right: 0px; width: 20px; height: 20px; background-color: #f1f1f1; border-radius: 50%; cursor:pointer; display:none;}
.new-letters .attach-list .attach-item .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-weight: 300; font-family: "Font Awesome 5 Pro";}
.new-letters .attach-list .attach-item:hover .close{display:block;}
.new-letters .attach-list .attach-item .close:hover{background-color: #ababab; color: #fff;}
.new-letters .attach-list .attach-item img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4/3; display:block; border: 1px solid #d5d5d5; object-fit:contain; margin-bottom: 5px; border-radius: 5px; pointer-events:none;}
.new-letters .attach-list .attach-item[data-type='video'] img, .new-letters .attach-list .attach-item[data-type='file'] img{object-fit: none;}
.new-letters .attach-list .attach-item span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; font-size: 14px; line-height: 18px; word-wrap: break-word; pointer-events:none;}
.new-letters button{position:relative; top: 0px; left: 0px; width: 200px; max-width: 100%; height:auto; line-height: 50px; color: #fff; font-weight: 400; background: linear-gradient(135deg, rgba(136,0,0,1) 0%, rgba(170,0,0,1) 50%, rgba(238,0,0,1) 100%); text-align:center; padding: 0px; margin: 5px; border-radius: 5px; border: 0px; outline: 0px; cursor:pointer; display: inline-block; vertical-align: middle; font-size: inherit; font-family: inherit; transition: 0.3s;}
.new-letters button:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.new-letters button.btn-reset{background: linear-gradient(135deg, rgba(136,136,136,1) 0%, rgba(171,171,171,1) 50%, rgba(241,241,241,1) 100%);}

.new-letters .request{background-color: #ffeaeb; border-radius: 5px; border: 1px dashed #c50f15;}
.new-letters .request > label:first-child{font-weight: 400; text-decoration: underline;}

.new-letters .address-lookup{grid-template-columns: 1fr 1fr 1fr;}

.personal-info{display:grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 10px;}

.verify .content p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align: justify; font-style: italic; padding: 0px; margin: 0px;}
.verify .content .verify-code{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; display:grid; grid-template-columns: repeat(6, 1fr); grid-column-gap: 15px;}
.verify .content .verify-code input{text-align:center;}
.verify .content .count-down{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align:center; font-style: italic; color: #C00;}
.verify .content .resend-verify-code{position:relative; top: 0px; left: 0px; width:max-content; height:auto; display: none; padding: 0px 15px; margin: 0px 0px 0px auto; color: #00adef; cursor:pointer;}
.verify .content .resend-verify-code:hover{font-style: italic;}

.note{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; background-color: #f1f1f1; border-radius: 5px; overflow: hidden;}
.note .note-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px; font-weight: 400; background-color: #ccc;}
.note .note-body{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px;}
.note .note-body ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style: none; text-align:justify;}
.note .note-body ul li{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 0px; text-indent: 15px; line-height: 22px;}
.note .note-body ul li:before{content: "\f105"; position:absolute; top: 5px; left: 0px; text-indent: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.note .note-body ul li:first-child{color: #a00;}

.statistic{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 15px 0px 0px 0px; background-color: #f1f1f1; border-radius: 5px; overflow:hidden;}
.statistic .statistic-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px; font-weight: 400; background-color: #ccc;}
.statistic .statistic-body{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 10px;}
.statistic .statistic-body:not(:has(.statistic-sum)){height: 250px; padding: 0px;}

.legend.pie{position:relative; top: 0px; left: 0px; width: 100%; height: auto; line-height: 16px; pointer-events: none; text-align:center; margin-top: 0px; display:none;}
.legend.pie span{position:relative; top: 0px; left: 0px; width:auto; height:auto; margin-top: 0px; display:inline-block; vertical-align: middle; font-size: 11px; line-height: 16px; font-weight: normal;}
.legend.pie span:first-child{width: 10px; height: 10px; margin-right: 5px; border-radius: 50%;}
.legend.pie ul{padding: 0px; margin: 0px; list-style: none;}
.legend.pie ul li{position:relative; width:max-content; height:auto; margin: 0px 5px; display:inline-block; vertical-align:middle; white-space:nowrap;}

.letter-info-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:hidden;}
.letter-info-box .lib-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px; font-size: 18px; font-weight: 400;}
.letter-info-box .lib-title span{border-bottom: 1px solid #ababab;}
.letter-info-box .lib-body .lib-result *[data-title]{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.letter-info-box .lib-body .lib-result *[data-title]:before{content: attr(data-title); position: relative; top: 0px; left: 0px; width: auto; height:auto; font-weight: 400; display:inline-block; vertical-align: top; margin-right: 5px;}

.letter-info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 1px solid #ababab; border-radius: 5px; padding: 5px; background-color: #f1f1f1;}
.letter-result{position:relative; top: 0px; left: 0px; width: 100%; height: auto; border: 1px solid #ababab; border-radius: 5px; padding: 45px 5px 5px 5px; overflow:hidden; display: grid; grid-template-columns: 1fr; grid-gap: 10px;}
.letter-result:before{position:absolute !important; top: 0px; left: 0px; width: auto; height:auto; padding: 5px; border-bottom: 1px solid #ababab; border-right: 1px solid #ababab; border-radius: 0px 0px 5px 0px; background-color: #f1f1f1; display:block;}
.letter-result .item{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px; background-color: #f1f1f1; border-radius: 5px;}
.letter-result .item > div{position:relative; top: 0px; left: 0px; width: 100%; height: auto; margin: 0px; padding: 0px;}
.letter-result .item > div p{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 0px; margin: 0px;}
.letter-result .item .date{margin-top: 10px; color: #ababab;}

.statistic-sum span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; text-align:center; padding: 0px;}
.statistic-sum span:first-child{text-transform:uppercase; font-weight: 400;}
.statistic-sum span:nth-child(2){font-weight: bold; font-size: 20px;}

.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; 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{position:relative; top: 0px; left: 0px; width: 100%; height: auto;}
.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;}
.footer .container .info span.copyright{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display: grid; grid-template-columns:1fr; grid-gap: 10px;}
.footer .container .info span.dev-org-info{position:relative; top: 0px; left: 0px; width: max-content; height:auto; display: grid; grid-template-columns: max-content 1fr; grid-gap: 5px;}
.footer .container .info span.dev-org-info a{font-weight: 400;}

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

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

@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%;}

    .top-menu{padding: 0px;}
    .top-menu:before{color: #999;}
    .top-menu > ul > li{display:block; margin-right: 0px !important;}
    .top-menu > ul > li a{color: #f1f1f1;}

    .top-menu .date{position:absolute; top: 50%; left:auto; right: 10px; transform:translateY(-50%); color: #333; display:block;}
    
    .new-letters .obj-list{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 450px) {
    .banner .title{padding: 15px 0px 15px 60px;}
    /*.top-menu{padding: 0px 5px;}*/
    /*.top-menu > ul > li:not(:last-child){margin-right: 5px;}*/
    .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;}
}