/*reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif; /* css của google font jost */
  }
  html,body{
    scroll-behavior: smooth;
    background-color: #F8F9FA;
    overflow-x: hidden;
  }

 
/*header*/
  

header .header_fix{
  position: fixed;
  margin-left: -20px;
  
  

}
header .navbar-brand {
  
  padding-right: 120px;
  padding-left: 100px;
}

header .navbar-nav {
  
    
  padding-right: 80px;

}
header .navbar {
  
  display: flex;
  justify-content: space-around;
  
  
}


header .navbar-brand p{
  
    font-size: 14px;
    
}

header .navbar-brand span{

  line-height: 1px;
}
  header .navbar-nav .nav-item a{

    color: #BDC0C4;

}

header .navbar-collapse button{
    color: #BDC0C4;
    transition: 0.5s all;
}

header .navbar-collapse .dropdown button:hover{
    color: white;
}

header .navbar  .search_theme{

  display: flex;
  justify-content: flex-end;
  margin-left: 100px;
}
 
header .navbar-nav a .nav-link{
  
    
    transition: all 0.5s; /* chỉnh transition cho hiệu ứng hover chữ bên dưới được mượt mà*/
  
}
    
header .nav-item .nav-link:hover{
  
    width: 100%;
    color:white;
  
}
header .nav-item .dropdown button{
  
    
  transition: all 0.5s; /* chỉnh transition cho hiệu ứng hover chữ bên dưới được mượt mà*/

}
header .nav-item .dropdown button:hover{
  
    width: 100%;
    color:white;
  
}
      
  
header .search .fa{

       width: 50px;
       height: 50px;
       border-radius: 50%;

}
  
  /* chỉnh cho header nằm dầu tiên mà dưới background-->dùng position ở phần heder mà không có relative thì header sẽ tự nhận body làm cha + dùng z-index:999*/
header{
  
    position: absolute;
    top:0;
    left: 0;
    z-index: 999;
    
}

header hr{
  color: #BDC0C4;
    margin-top: 20px;
    margin: 0;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
}

header .navbar-collapse{
  margin-left: 100px;
}

/*main*/
/*banner*/

  
.navbar .navbar-expand-lg {
  
  
    position: relative;
    height: 100%; /* chỉnh cho chiều cao của item bằng div cha inner để mấy cái nút ảnh nó không lọt xuống khi hiển thị*/
  }

  .navbar button .navbar-toggler {

    background-color: #009F4D;
    color:white;
  }
  main .banner .banner_text{
  
  
    position: absolute;
    top:0;        /* muốn dùng position: absolute thì phải ít nhất co top va left để xác định vị trí thằng con so với thằng cha*/
    left: 0;      /* muốn dùng position: absolute thì phải ít nhất co top va left để xác định vị trí thằng con so với thằng cha*/
    width: 100%;  /* muốn dùng display:flex thì phải co chiều rộng và chiều cao nên phải cho width và height*/
    height: 60vh; /* muốn dùng display:flex thì phải co chiều rộng và chiều cao nên phải cho width và height*/
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    color: white;
    background-color: rgba(75, 100, 117, 0.5); /* làm mờ cho ảnh của item--> đây là cách 2 thay thế việc phải dùng div overlay */
    
  }

 main .banner .banner_text h2{

  font-size: 50px;


 }
 main .banner .banner_text p{

  font-size: 20px;
  color: #B9B8B7;


 }
  .banner img{
     width: 100%;
     height: 100%; /* chỉnh height:100% cho cái ảnh co lại bằng item để không vỡ layout*/
     object-fit: cover;
  }
  
  main .banner {
  
  
    
    height: 60vh; /* muốn dùng display:flex thì phải co chiều rộng và chiều cao nên phải cho width và height*/
    
  }
/*service*/

.service {
  
  position: relative;
}
.service .service_title {
  
  margin-top: 65px;
  margin-bottom: 55px;
  
}
.service .service_title h2{
  color:#3F3A64;

  font-weight: 700;
}
.service .service_title p{
  color:#919192;

 
}


.service .service_item {
  background: #FFFFFF;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(5.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.5s;
  cursor: pointer;
  color: #3F3A64;
  
}
.service .service_item  {
  display:flex ;
  justify-content:flex-start;
  
  
}
.service .service_item i{
 
  
  color:#3F3A64;
}
.service .service_item span{
 
  
  font-size: 22px;
}
.service .service_item p{
 
  
  font-size: 17px;
}
/*map*/
.contact_map .container{
  width: 100%;
  height: 70vh;
  
}
.contact_map .container .map iframe{
     

  
  width: 100%;
  height: 70vh;
  
}
/*form*/
.form h2{

  font-size: 32px;
  color: #3F3A64;
  font-weight: 700;
}
.form p{

  font-size: 17px;
  color: #D2D3D3;
}
.form .container{
  position:relative;
  height: 60vh;
  
}
.form .container button{
  position: absolute;
  right: 12px;
  width: 150px;
  padding-top: 7px;
}
/*contact_info*/

.contact_info{

  height: 60vh;
 background-color: #151421 !important;
}
.contact_info .contact_item .navbar-brand span{

  line-height: 5px;
}
.contact_info .contact_item .navbar-brand p{

  font-size: 14px;
}
.contact_info .contact_content{

  width: 100vw;
}
.contact_info .contact_content .contact_item p{

  color:#717780 ;
}
.contact_info .contact_content .contact_item p a{
  text-decoration: none;
  transition: all 0.5s;
  color:#717780 ;
}
.contact_info .contact_content .contact_item p a:hover{

  color:white ;
}
.contact_info .contact_content .contact_item a i{
  text-decoration: none;
  transition: all 0.5s;
  color:#717780 ;
}
.contact_info .contact_content .contact_item a i:hover{

  color:white ;
}
.contact_info hr{

  color:#717780 ;
  font-size: 2px;
}

/*footer*/
footer{
 
 background-color: #151421;
 color:#717780 ;
 overflow: hidden;
}
footer a{
  text-decoration: none;
  
  color: green;
  transition: all 0.5s;
  
 }
footer  a:hover{
  color:white;
 
 }

/*footer*/
/* Ẩn/Hiện back-to-top*/

.back-to{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color:#009F4D;
  width:50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  

}
.back-to a{
   display:inline-block;
   width: 100%;
   height: 100%;
   color: white;
}

/*search_theme*/
/* Light theme */
#myBody {
  background-color: white;
}

#switchButton .fa-sun {
  display: none;
}
#switchButton .fa-moon {
  display: block;
}

/* Dark Theme*/
.dark {
  background-color: black !important;

}


.dark #switchButton .fa-sun {
  display: block;
  color: white;
}

.dark #switchButton .fa-moon {
  display: none;
}