/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-SemiBold.woff2') format('woff2'),
    url('../fonts/Roboto-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
    url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
    url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.home .third-nav,
.section-header-bar,
#header .logo h2,
#header .logo .site_description,
.footerNav2 {
    display: none !important;
}

.panel-default {
    border-color: transparent;
}

.panel-default>.panel-heading-news {
    background-color: transparent;
    border-color: transparent;
    color: #fff;
    background-image: none !important;
    padding: 0;
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: bold;
    text-transform: uppercase;
}

.panel-body {
    padding: 10px;
}

.panel {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 10px;
}

.panel-default>.panel-heading-news strong {
    display: block;
    background-color: #02356A;
    padding: 10px 15px;
    border-radius: 4px;
}

.panel-default>.panel-heading-news strong a {
    color: #fff;
}

.panel-default>.panel-heading-news strong a:hover {
    color: #000;
}

.panel-default>.panel-body {
    padding-left: 0px;
    padding-right: 0px
}

.straight_line hr {
    border: 1px dashed #cacaca;
}

.custom-panel {
    border: 1px solid #cacaca;
    padding: 5px;
    border-radius: 3px;
}

#header {
    background: #095F9A;
    background: -moz-linear-gradient(top, #333333 0%, #095F9A 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #095F9A));
    background: -webkit-linear-gradient(top, #333333 0%, #095F9A 100%);
    background: -o-linear-gradient(top, #333333 0%, #095F9A 100%);
    background: -ms-linear-gradient(top, #333333 0%, #095F9A 100%);
    background: linear-gradient(to bottom, #333333 0%, #095F9A 100%);
}

#header .logo {
    padding: 20px;
}

#header .right-section {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.text-sologan {
    padding-left: 0;
    margin-bottom: 0;
    padding: 20px;
}

.custom-text.text1,
.custom-text.text1 > a,
.custom-text.text2,
.custom-text.text2 > a,
.custom-text.text2,
.custom-text .text2{
    font-family: arial;
    font-size: 38px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

.custom-text.text2,
.custom-text.text2 > a,
.custom-text .text2{
    color: #FFFC00;
}

.custom-text.text3,
.custom-text.text3 > a{
    text-align: center;
    font: bold 24px Arial, Serif;
    /*text-shadow: -2px 3px 0 #666666, -2px 1px 0 #666666;*/
    color: #fff;
    margin-top: 10px;
}

.custom-text.on-desktop {
    display: block;
}

.custom-text.on-mobile {
    display: none;
}

.section-slide-banner {
    margin-left: -5px;
    margin-right: -5px;
}

.section-slide-banner .slick-slider .slick-dots {
    bottom: 20px;
}

.section-slide-banner .slick-slider .slick-dots li {
    margin: 0 3px;
}

.section-slide-banner .slick-slider .slick-dots li button:before {
    font-size: 15px;
    color: #999;
    opacity: 1;
}

.section-slide-banner .slick-slider .slick-dots .slick-active,
.section-slide-banner .slick-slider .slick-dots .slick-active button:before {
    color: #16a0d6;
    opacity: 1;
}

.section-menu-center {
    min-height: 376px;
    background-color: #0fa1e0;
    margin-left: -5px;
    margin-right: -5px;
}

.section-menu-center .menu-inner,
.section-menu-center .container{
    min-height: inherit;
}

.section-menu-center .container {
    padding: 0;
}

.item_content {
    display: flex;
    flex-direction: column;
    min-height: inherit;
}

.item_content .item_quick_link {
    background-color: #164F9C;
    flex: 1;
    align-content: center;
}

.item_content .item_quick_link.menu_1 {
    background-color: #02356A;
}

.item_content .item_quick_link.menu_2 {
    background-color: #002448;
}

.item_content .item_quick_link:hover {
    background-color: #0099FF;
}

.item_content .item_quick_link a{
    display: flex;
    align-items: center;
    color: #fff;
}

.item_content .item_quick_link a:hover {
    color: #fff;
}

.item_content .item_quick_link a > h2 {
    flex-basis: calc(100% - 65px);
}

.item_content .item_quick_link a h2 {
    font-size: 24px;
}

.item_content .item_quick_link a img {
    padding-right: 10px;
    max-width: 100%;
}

.unit-introduction .content {
    display: flex;
    gap: 10px;
}

.unit-introduction .content .image {
    flex: 1;
}

.unit-introduction .content .text {
    flex: 2;
}

.unit-introduction .content .thumb {
    display: block;
    width: 250px;
    height: 167px;
}

.unit-introduction .content .thumb img {
    max-width: 100%;
    height: auto;
}

.unit-introduction h2 {
    margin-bottom: 10px;
}

.unit-introduction h2 a {
    color: #0099ff;
}

.notification-list > a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    margin-bottom: 10px;
}

.notification-list > a:hover {
    color: #0099ff;
}

.notification-list > a:hover i {
    color: #F63C4C;
}

.item-slide .item-content {
    position: relative;
    height: 100%;
}

.item-slide .overlay {
    position: absolute;
    bottom: -5px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    transition: .5s ease;
}

.item-slide .overlay a {
    color: white;
    font-size: 16px;
    padding: 20px;
    text-align: center;
}

.item-slide .item-content a {
    display: block;
    max-height: 275px;
    height: 100%;
}

.item-slide .item-content img {
    height: 100%;
}

.section-lkg .width-image {
    margin: 5px;
}

.section-lkg img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.section-lkg .color-text {
    margin-top: 10px;
}

.section-lkg .color-text,
.section-lkg .color-text a {
    display: block;
    font-size: 20px;
    color: #0fa1e0;
    text-align: center;
    font-weight: bold;
}
.section-lkg .color-text a:hover {
    color: #02356A;
}

#footer {
    min-height: inherit;
    padding-bottom: 0;
    background-color: #002448;
}

.socialList li a {
    background-color: transparent;
}

.footer-bttop .bttop {
    float: right;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 20;
}

.footer-bttop .bttop a {
    display: block;
    line-height: 40px;
    background-color: #16a0d6;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 20px;
    -webkit-border-radius: 20px;
}

#socialList {
    padding: 10px;
    text-align: center;
}

#socialList .socialList {
    justify-content: center;
}

.inner-bottom .notices-wrapper {
    max-height: 310.9px;
    overflow: auto;
}

.kttt-logo a {
    display: block;
    text-align: center;
}

.kttt-logo img{
    max-width: 100%;
    height: 60px;
}

@media (max-width: 1024px) { 
    .custom-text.on-desktop {
        display: none;
    }

    .custom-text.on-mobile {
        display: block;
    }

    .custom-text.text2,
    .custom-text.text2 > a,
    .custom-text .text2 {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .unit-introduction .content {
        flex-direction: column;
    }

    .unit-introduction .content .thumb {
        width: 100%;
        height: auto;
    }

    .unit-introduction .content .thumb img {
        width: 100%;
        object-fit: cover;
    }

    .unit-introduction h2 {
        text-align: center;
    }
}