/********** Template CSS **********/
:root {
    --blue1: #2f3295;
    --blue2: #1450A3;
    --blue3: #337CCF;
    --yellow: #FFC436;
    --bg: #171B4F;
    --white: #ffffff;
    --black: #333333;
    
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 18px;
}

a {
    transition: all 0.3s;
}

a:hover {
    color: var(--blue1);
}

img {
    max-width: 100%;
    border-radius: 4px;
}

body {
   font-family: 'Inter', sans-serif;
   /*font-family: 'Roboto', sans-serif;*/
   /*font-family: 'Montserrat', sans-serif;*/
}


/*** Button ***/

.btn_web {
    background: var(--blue3);
    color: var(--white);
    display: inline-block;
    padding: 8px 24px;
    border-radius: 4px;
    margin-top: 30px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn_web:hover {
    background: var(--yellow);
    color: var(--black);
}

.heading h2 {
    margin-bottom: 35px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    color: var(--blue2);
    font-weight: 600;
}



.heading h2:after {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: #F0CF05;
    content: "";
}


/********* HEADER *********/

.header p {
    margin-bottom: 0;
}

/* Header top */

.header_top {
    background-color: var(--bg);
    color: var(--white);
    font-size: 14px;
    padding: 5px 0;
}

.left_header_top i {
    margin-right: 3px;
}

.right_header_top.search form button#submit_seach {
    position: absolute;
    right: 0;
    height: 100%;
    padding: 0 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--black);
}

.right_header_top.search form button#submit_seach:hover {
    color: var(--yellow);
}

.right_header_top.search form input {
    padding: 9px 50px 9px 10px;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px!important;
    border: none;
}



/* Header bottom */

.header_bottom {
    padding: 8px 0;
}

.logo img {
    width: 75px;
}


.main_menu .collapse {
    justify-content: end;
}

.main_menu a {
    font-size: 15px;
}

.main_menu .navbar ul.navbar-nav > li, 
.main_menu .navbar ul.dropdown-menu li {
    padding: 10px 17px;
    
}

.main_menu .navbar ul.dropdown-menu li:hover,
.main_menu .navbar ul.dropdown-menu li a:hover{
    background-color: transparent;
}

.main_menu .navbar-nav > li > a {
    text-transform: uppercase;
    font-weight: 600;
}

.main_menu ul li a:hover {
   color: var(--yellow);
}

.slogan p {
    font-size: 20px;
    font-weight: 500;
    color: var(--blue1);
}

/*.dropdown-menu.megamenu {*/
/*    display: block;*/
/*}*/

/*.megamenu {*/
/*    transition: all 0.3s;*/
/*}*/

.megamenu .container .row,
.main_menu .bp_sub_menu {
    background-color: var(--blue2);
    color: var(--white);
}

.main_menu .col-megamenu ul li a {
    font-size: 14px;
}

.main_menu .megamenu .container .row .col-megamenu > * a,
.main_menu .bp_sub_menu a {
    color: #ffffff;
}

.main_menu .megamenu .container .row .col-megamenu > * a:hover {
    color: #fde89d;
}

.megamenu .container .row > .col-lg-3 {
    width: 30%;
}

.megamenu .container .row > .col-lg-3:nth-child(2) {
    width: 40%;
}

.main_menu .megamenu .col-megamenu h6.bp_megamenu_h6 a {
    font-size: 16px;
    border-bottom: 1px solid #f6e2824f;
    padding-bottom: 12px;
    margin-bottom: 5px;
    font-weight: 500;
}



@media (min-width: 992px) {
    
    .main_menu {
        position: relative;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .3s;
        opacity: 0;
    }
    
    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }

}        






/************* TRANG CHỦ ****************/


/*** Slide ***/

.slide_home .swiper-button-prev,
.slide_home .swiper-button-next {
    color: var(--white);
}

/*** Giới thiệu ***/

.about_us {
    padding: 50px 0;
}

.left_about p {
    text-align: justify;
}


.right_about p {
    margin: 0;
}

.right_about img {
    width: 100%;
}


/******* Blogs *******/

.blogs {
    padding: 50px 0;
    background-color: #f9f9f9;
}

.bp_news_info {
    display: none;
}

.blogs .row > .col {
    margin-bottom: 30px;
}

.blogs .bp_block_item .row {
    margin: 0;
}

.blogs .bp_block_item .row > * {
    padding: 0;
}

.blogs .bp_block_item  {
    padding: 10px 10px 20px 10px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
}

.blogs .bp_block_item img {
    border-radius: 4px;
    height: 230px;
    object-fit: cover;
}

.blogs h2.news_title {
    padding: 0;
    margin: 10px 0 5px;
}

.blogs h2.news_title a {
    text-transform: initial;
    color: var(--black);
    font-size: 17px;
    font-weight: 600;
}

.blogs h2.news_title a:hover {
    color: var(--yellow);
}

.blogs h2.news_title:after {
    display: none;
}

.blogs .bp_news_sub {
    font-size: 14px;
    color: #767676;
    text-align: justify;
    line-height: 1.4;
}

.blogs .btn_web.bp_news_more {
    padding: 7px 18px;
    margin-top: 8px;
}



/*** Xây dựng ***/

.build {
    padding: 50px 0;
}

.build h2 {
    text-transform: initial;
    
}

.build h2:after {
    display: none;
}


.left_build p {
    text-align: justify;
}

.right_build img {
    width: 100%;
}

 
/*** Dự án ***/

.projects .bp_block_item {
    padding: 0; 
    border: 0;
}


/*** Đối tác ***/

.partners {
    padding: 50px 0;
}


.partner {
    text-align: center;
}

.partner img {
    width: 30%;
    margin: auto;
    margin-bottom: 10px;
}

.partners .heading h2 {
    margin-bottom: 55px;
}




/*************** FOOTER ******************/

.footer h3 {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 25px;
}


.footer_top {
    padding: 50px 0;
    background: var(--bg);
    color: var(--white);
}

.info_footer img {
    width: 20%;
    display: block;
    margin: auto;
    margin-bottom: 10px;
}


.info_footer h1 {
    font-size: 18px;
    text-align: center;
}

.info_footer ul {
    padding: 0;
    margin-top: 15px;
}

.info_footer ul li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.info_footer i {
    padding-right: 10px;
}

.form_ft label {
    display: none;
}

.form_ft form .row > div {
    width: 100%;
    margin-bottom: 15px;
}

.form_ft form input {
    padding: 10px;
    border-radius: 4px;
}

.form_ft form #div_submit button {
    padding: 8px 25px;
    border: none;
    background-color: var(--yellow);
    border-radius: 4px;
    color: var(--black);
}

.copy_right {
    padding: 10px 0;
}

.copy_right p {
    margin: 0;
}

.copy_right a {
    color: var(--blue2);
}


/******** TRANG KHÁC *********/

.body_page {
    padding: 70px 0;
}

.banner_page {
    height: 250px;
    background-color: var(--blue3);
    color: var(--white);
    text-align: center;
    position: relative;
}

.banner_page  .title_page {
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 500;
}

.banner_page  ol.breadcrumb {
    justify-content: center;
}

.banner_page  ol.breadcrumb li,
.banner_page  ol.breadcrumb li a,
.banner_page  ol.breadcrumb li:before {
    color: var(--white);
}

.banner_page  ol.breadcrumb li a:hover {
    color: var(--yellow);
}

.banner_page .box_banner_page {
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}


/******** TRANG TIN TỨC **********/

.body_blog .blogs {
    padding: 0;
    background-color: transparent;
}

.body_blog .blogs .btn_web.bp_news_more {
    background: var(--yellow);
    color: var(--black);
    font-weight: 400;
}

.left_blogs  {
    padding: 20px;
    border-radius: 4px;
    background: var(--blue3);
    margin-bottom: 30px;
    
}

.left_blogs .bp_block_item  .cls_img_hot_news,
.left_blogs .bp_block_item .bp_news_sub {
    display: none;
}

.left_blogs .bp_block_item .row {
    margin: 0;
}

.bp_block_item .row  > div {
    padding: 0;
}

.left_blogs h3 {
    margin-bottom: 10px;
    color: var(--white);
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #ffe5488a;
    padding-bottom: 14px;
}

.left_blogs .bp_block_item h2 {
    margin: 0;
    padding: 10px 0;
    font-size: 15px;
}

.left_blogs .bp_block_item h2 a {
    color: var(--white);
    font-weight: 400;
}

.left_blogs .bp_block_item h2 a:hover {
    color: #F0CF05;
}


/******** TRANG CHI TIẾT TIN *********/

.blog_detail .row_news_details {
    width: 80%;
    margin: auto;
}

.blog_detail p {
    margin-bottom: 10px;
}

.content_text_details table td {
    padding: 10px;
}

.blog_detail .bp_news_info,
.bp_news_create_date {
    display: none;
}

.blog_detail h1 {
    font-weight: 500;
    margin-bottom: 30px;
}

.blog_detail h2 {
    margin: 20px 0 15px;
    font-weight: 500;
}

.blog_detail h3 {
    font-weight: 500;
    margin: 15px 0 10px;
}



/********* TRANG LIÊN HỆ ***********/

.top_contact  {
    padding-bottom: 40px;
}

.form_lh form label {
    display: none;
}

.form_lh form > div {
    margin-bottom: 15px;
}

.form_lh form input,
.form_lh form textarea {
    padding: 10px;
    border-radius: 4px;
}


.form_lh form #contact_button button {
    padding: 8px 25px;
    border: none;
    border-radius: 4px;
    background-color: var(--yellow);
    color: var(--black);
}

.form_lh form button#contact_reset {
    background-color: var(--blue3);
    color: var(--white);
}


/*** Thư ngỏ ***/

.thu_ngo {
    display: flex;
    text-align: justify;
    margin: auto;
}

.thu_ngo > p {
    width: 25%;
}

.thu_ngo > p img {
    margin-top: 38px;
}

.thu_ngo .nd_thu_ngo {
    width: 75%;
    padding-left: 20px;
}


/*** Zalo ***/

.fcta-zalo-ben-trong-nut {
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}


/* RESPONSIVE */


@media (min-width: 992px) {
    
    
    .projects .bp_block_item {
        position: relative;
    }
    
    
    .projects h2.news_title {
        text-align: center;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background:#00000085;
        margin: 0;
        display: flex;
        align-items: center;
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden;
        padding: 0 5px;
    }
    
    .projects h2.news_title a {
        color: var(--white);
        width: 100%;
    }
    
    .projects h2.news_title a:hover {
        color: var(--yellow);
    }
    
    .projects .bp_block_item:hover h2.news_title {
        opacity: 1;
        visibility: visible;
    }

}


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

@media (max-width: 1199px) {
    .blogs .bp_block_item img {
        height: 175px;
    }
}

@media (max-width: 991px) {
   
    .header_bottom #menu_hor {
       justify-content: end;
    }
    
    .header_bottom .megamenu .container {
        position: relative;
        padding: 0;
    }
    
    
    .logo img {
        width: 65px;
    }
   
    .header_bottom .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        z-index: 3;
    }
   
    .header_bottom .navbar-collapse > ul {
        margin-top: 10px;
        padding-top: 10px;
        border: 1px solid #eeeeee;
       
    }
    
    .main_menu .dropdown {
        position: relative !important;
    }
    
    .main_menu .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
    
    .right_about {
        margin-top: 20px;
    }
    
    .right_build {
        margin-top: 15px;
    }
    
    .projects h2.news_title {
        text-align: center;
    }
    
    .map_ft {
        margin-top: 30px;
    }
    
    .thu_ngo {
        width: 100%;
        flex-direction: column;
    }
    
    .thu_ngo .nd_thu_ngo {
       width: 100%;
       padding-left: 0;
    }

    .thu_ngo > p {
        width: 100%;
        order: 2;
        text-align: center;
    }
    
    .blogs .bp_block_item img {
        height: 160px;
    }
    
    


}

@media (max-width: 767px) {
    
    html {
        font-size: 15px;
    }
    
    h1 {
        font-size: 25px;
    }
    
    h2 {
        font-size: 22px;
      
    }
    
    h3 {
        font-size: 17px;
    }
    
    .btn_web {
        margin-top: 20px
    }
    
    .header_top {
        padding: 8px 0;
    }
    
    .header_top .search form input {
        padding: 7px;
    }
    
    .header_bottom {
        padding: 5px 0;
    }
    
    
    .logo img {
        width: 40px;
    }
    
    .header_bottom button.navbar-toggler {
        font-size: 18px;
    }
    
    .about_us {
        padding: 35px 0;
    }
    
    .about_us h2 {
        margin-bottom: 15px;
    }
    
    .blogs {
        padding: 35px 0 25px;
    }
    
    .blogs .bp_news_sub {
        display: none;
    }
    
    .blogs h2.news_title {
        min-height: 34px;
    }
    
    .blogs h2.news_title a {
        font-size: 14px;
    }
    
    .blogs .bp_block_item {
        padding: 5px 5px 5px 5px ;
        
    }
    
    .blogs .row > .col {
        padding: 0 5px;
        margin-bottom: 20px;
    }
    
    .blogs .row {
        padding: 0 5px;
    }
    
    .blogs .row .row {
        padding: 0;
    }
    
    
    
    .construction h2.news_title {
        text-align: center;
        min-height: 36px;
    }
    
    .construction .bp_block_item  {
        padding: 10px;
    }
    
    
    .build h2 {
        margin-bottom: 15px;
    }
    
    .form_ft {
        margin: 20px 0 0;
    }
    
    .partner {
        margin: 0 0 10px;
        border: 1px solid #eeeeee;
        padding: 10px;
        border-radius: 4px;
    }
    
    
    /******** Trang khác ********/
    
    .body_page {
        padding: 40px 0;
    }
    
    .banner_page {
        height: 170px;
    }
    
    .banner_page  .title_page {
        font-size: 25px;
    }
   
    
    .form_lh form .row > div:first-child {
        margin-bottom: 15px;
    }
    
    .map_contact iframe {
        height: 300px;
    }
    
    .thu_ngo {
        width: 100%;
    }
    
    .blog_detail .row_news_details {
        width: 100%;
    }
        
    
}

@media (max-width: 600px) {
    .megamenu .container .row > .col-lg-3 {
        width: 100%;
    }
    
    .megamenu .container .row > .col-lg-3:nth-child(2) {
        width: 100%;
    }
    
    .blogs .bp_block_item img {
        height: 130px;
    }
}