/*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:#F7F7F7;
    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 {
  
 
  
}


.service .service_title {
  
  margin-top: 65px;
  margin-bottom: 55px;
  line-height: 55px;
  
}
.service .service_title h6{
  color: #7E7D7D;
  font-size: 15px;
  font-weight: 700;
  
}
.service .service_title p{
 
  color:#3F3A64;
  font-size: 40px;
  font-weight: 900px;
}



.service .service_item  {
  
  width: 100%;
  height: 100%;
  
  
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.service  .logo{
  
  width: 50px;
  height: 50px;
  
  
}
.service  img {
  
  height: 100%;
  width: 100%;
  /* chỉnh height:100% cho cái ảnh co lại bằng item để không vỡ layout*/
  object-fit: cover;
  
  
}

.service .service_item h3{
 
  color:#3F3A64;
  font-size: 22px;
}
.service .service_item p{
 
  
  font-size: 17px;
  color: #7E7D7D;
}
.service .service_item  button{
  
  width: 180px;
  height: 50px;
  cursor: pointer;
  background-color: #00A63F;
  
  
}


/*solution*/

.solution .solution_title h6{
  color: #7E7D7D;
  font-size: 15px;
  font-weight: 900;
  
}
.solution .solution_title p{
 
  color:#3F3A64;
  font-size: 40px;
  font-weight:bolder;
}
.solution_content .solution_item{
  background-color:rgba(232, 240, 245, 0.5) ;
  display: flex;
  justify-content: end;
}
.solution_content .solution_item h3{
  color:#3F3A64;
  font-size: 23px;
  font-weight:bold;
}
.solution_content .solution_item p{
  color: #7E7D7D;
  font-size: 15px;
  
}

/*innovative*/
.innovative {
  background-image: url("./../img/bg1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative;  
}

main .innovative .innovative_content{
  
  
  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:  100vh;; /* 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;
 
  background-color: rgba(73, 75, 77, 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 */
  
}

.innovative_content .innovative_item .innovative_item_title h6{
  color:#FFFFFF;
  font-size: 15px;
  font-weight:bold;
}
.innovative_content .innovative_item .innovative_item_title p{
  color:#FFFFFF;
  font-size: 30px;
  font-weight:bolder;
  
}
 
.innovative_content .innovative_item  button{
  
  width: 150px;
  height: 40px;
  cursor: pointer;
  
  
}
.innovative_content .innovative_item  .innovative_item_text{
  
  
  display: flex;
  justify-items: end;
  cursor: pointer;
  
  
}
.innovative_content .innovative_item  .innovative_item_text h3{
  
  color:#F8F9FA ;
  font-size: 20px;
  
  
}
.innovative_content .innovative_item  .innovative_item_text p{
  
  color: #7E7D7D;
  font-size: 17px;
  cursor: pointer;
  
  
}
.innovative_content hr{
  
  color:#F8F9FA ;
  
  
}
.innovative_content .innovative_item_form  {
  
 
  border-radius: 8px;

  
  
  
}
.innovative_content .innovative_item_form   .innovative_form_title{
  
  padding: 10px;
  
  
  
}
.innovative_content .innovative_item_form  .innovative_form_title h3{
  
  color:#3F3A64;
  font-size: 27px;
  font-weight:bolder;
  
  
  
  
}
.innovative_content .innovative_item_form  .innovative_form_title p{
  
  color: #7E7D7D;
  font-size: 17px;
  
 
  
  
  
  
}
.innovative_content .innovative_item_form  .innovative_form_title p{
  
  color: #7E7D7D;
  font-size: 17px;
  
}
.innovative_content .innovative_item_form  .innovative_form_text input{
  
  
  height: 50px;
  
}
.innovative_content .innovative_item_form  .innovative_form_text button{
  
  
  height: 50px;
  width: 180px;
  background-color:#00A63F;
  transition: all 0.5s;
}
.innovative_content .innovative_item_form  .innovative_form_text button:hover{
  
  
 
  background-color:green;
  
}
/*crafted*/

.crafted .crafted_title {
  
  margin-top: 65px;
  margin-bottom: 45px;
  line-height: 55px;
  
}
.crafted .crafted_title h6{
  color: #7E7D7D;
  font-size: 15px;
  font-weight: 700;
  
}
.crafted .crafted_title p{
 
  color:#3F3A64;
  font-size: 40px;
  font-weight: 900;
}
.crafted_content .crafted_item{
  
  
  background-color: #FFFFFF;
  transform: translateY(0px);
  transition: all 0.5s;
}
.crafted_content .crafted_item:hover{


  
  
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  cursor: pointer;
  transform: translateY(-20px);
  
}
.crafted_content .crafted_item_text h3{
  
  
  color:#3F3A64;
  line-height: 52px;
  transition: all 0.5s;
  
}
.crafted_content .crafted_item_text h3:hover{
  
  
  color:green;
  
  
  
}
.crafted_content .crafted_item_text p{
  
  
 
  font-size: 18px;
  color: #7E7D7D;
}


/*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;
 
 }


/* Ẩ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:#F7F7F7 ;
}

#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;
}