* {
    margin: 0;
    padding: 0;
}

#wraper {
    width: 100vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 55px;
    box-sizing: border-box;
    margin: 0;
}
body {
    overflow-y: scroll; /* Hiển thị thanh cuộn dọc */
    overflow-x: hidden; /* Ẩn thanh cuộn ngang */
    font: inherit;
    vertical-align: baseline;
    margin: 0 !important;
    padding: 0;
    justify-content: center;
    align-items: center;
}

body{
    font-family: "Optimistic", "Montserrat", "Helvetica", "Arial", "Noto Sans", sans-serif !important;
  }




a {
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
}

body.no-scroll {
    overflow: hidden; /* Ngăn cuộn trên trang */
    height: 100vh; /* Đảm bảo không vượt quá chiều cao màn hình */
}
.hidden-list-mobile {
    overflow-y: auto;
}



header {
    width: 100%;
    position: fixed; 
    /* top: 0;
    left: 0;
    right: 0; */
    z-index: 9999; 
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 0 30px;
    height: 80px;
    /* height: 495px; */
}



  

header.header-active {
    background-color: white; 
    color: black !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0); 
}

.no-gradient {
    background-image: none !important; /* Tắt gradient */
}

header.header-active {
    top: 0; /* Hiển thị header ở vị trí ban đầu */
  }
  
  header.header-hidden {
    top: -100px; /* Ẩn header khi cuộn xuống (có thể thay đổi giá trị này tùy ý) */
  }
  
  .py-3.no-gradient {
    background: none !important; /* Đảm bảo gradient bị tắt khi cuộn xuống */
  }

header {
    color: black !important; 
}
nav ul li:hover a {
    color: black !important; 
}



.header-content {
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 0px 16px; */
    margin-top: 10px;
}


.pdt {
    padding-top: 150px;
}


/* NAV */

.py-3 {
    /* background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); */
    background-color: white;
}



#login-icon {
    color: #000 !important;
}
  

.nav-menu {
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;


  }
  
  nav ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;

    

  }
  
  nav ul li {
    margin: 0 12px;
    position: relative;

    color: white;
    
  }

 
  nav ul a {

    color: black;
    font-size: 16px;
    letter-spacing: .6px;
    line-height: 20px;
    border-bottom: 3px solid transparent;

    
  }

  svg {
    color: black;
    }
  
    nav ul li a {
        position: relative;
        text-decoration: none; 
        color: black; 
        transition: color 0.3s ease-in-out; 
    }
    
    nav ul li a::after {
        content: ''; 
        position: absolute;
        bottom: -2px; 
        left: 0;
        width: 100%;
        height: 1px; 
        background-color: blue; 
        transform: scaleX(0); 
        transform-origin: left; 
        transition: transform 0.3s ease-in-out; 
        visibility: hidden; 
    }
    
 
    
    nav ul li:hover a::after {
        transform: scaleX(1); /* Hiển thị gạch dưới từ trái qua phải */
        visibility: visible; /* Hiển thị gạch dưới */
    }


    #login-icon a {
        position: relative; /* Đặt tương đối để căn chỉnh ::after */
        text-decoration: none; /* Bỏ gạch chân mặc định */
        color: black; /* Màu chữ */
        font-weight: 500; /* Kiểu chữ */
        transition: color 0.3s ease-in-out; /* Hiệu ứng đổi màu chữ khi hover */
    }
    
    #login-icon a::after {
        content: ''; /* Tạo pseudo-element */
        position: absolute;
        bottom: -2px; /* Khoảng cách giữa gạch dưới và chữ */
        left: 0;
        width: 100%; 
        height: 1px; 
        background-color: blue; 
        transform: scaleX(0); 
        transform-origin: left; 
        transition: transform 0.3s ease-in-out; 
    }

    .text_color {
        cursor: pointer;
    }
    header.expanded {
        height: 495px; /* Chiều cao khi hover vào "Teams" */
    }
    header.expanded_1 {
        height: 490px; /* Chiều cao khi hover vào "Teams" */
    }
    header.expanded_1 .container_menu_1 {
        display: block;
        transform: translateY(0);
    }
    header.expanded_2 {
        height: 430px; /* Chiều cao khi hover vào "Teams" */
    }
    header.expanded_2 .container_menu_2 {
        display: block;
        transform: translateY(0);
    }
    header.expanded .container_menu {
        display: block;
        transform: translateY(0);
    }

    .container_menu:hover {
        transform: translateY(0); /* Hiển thị khi hover vào .container_menu */
    }

    .bi-chevron-down {
        transition: transform 0.3s ease;
    }
    
    /* Khi mũi tên cần quay lên */
    .bi-chevron-up {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }

    .bi-chevron-down_1 {
        transition: transform 0.3s ease;
    }
    
    /* Khi mũi tên cần quay lên */
    .bi-chevron-up_1 {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }
    .bi-chevron-down_2 {
        transition: transform 0.3s ease;
    }
    
    /* Khi mũi tên cần quay lên */
    .bi-chevron-up_2 {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }

    .container_menu {
        max-width: 740px;
        margin-left: 130px;
        display: none;
    }

    .container_menu_1 {
        max-width: 740px;
        margin-left: 130px;
        display: none;
        margin-top: -40px;
    }
   
    .container_menu_2 {
        max-width: 740px;
        margin-left: 130px;
        display: none;
        margin-top: -40px;

    }

    
    .team_text_2 {
        margin-top: -25px !important;
    }
    
    .team-column {
        display: flex;
    
        padding: 20px;
    }
    
    .column {
        width: 45%; 
    }
    
    .column .h4size {
        margin-bottom: 10px;
        color: #000;
        font-weight: bold;
    }
    
    .column ul {
        list-style-type: none;
        padding: 0;
    }
    
    .column ul li {
        font-size: 14px;
        line-height: 3;
    }
    
    .team_text {
        padding: 20px;
    }

    /* MOBILE */
    .container_menu_mb {
        display: none;
    }
    .container_menu_mb_1 {
        display: none;
    }
    .container_menu_mb_2 {
        display: none;
    }


    .team-column_mb {
        display: flex;
        padding: 0 20px;
    }

    .bi-chevron-up-mb {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }
    .bi-chevron-up-mb1 {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }
    .bi-chevron-up-mb2 {
        transform: rotate(180deg); /* Quay mũi tên 180 độ */
    }


  

    header.expanded_mb_1 .container_menu_mb_1 {
        display: block;
        transform: translateY(0);
    }
    header.expanded_mb_2 .container_menu_mb_2 {
        display: block;
        transform: translateY(0);
    }
    header.expanded_mb .container_menu_mb {
        display: block;
        transform: translateY(0);
    }

  

    /* SEARCH */
    .search {
        margin: 60px 0;
    }
    .search-text {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        color: #1C2B33;
        font-weight: 600;
    }
 
    .search-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        margin-top: 50px !important;
      }
      
      .search-input-1 {
        width: 100%;
        /* padding: 10px 50px 10px 10px;  */
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 30px;
        font-size: 16px;
        outline: none;
      }
      
      .search-button-1 {
        position: absolute;
        top: 50%;
        right: 30px; /* Điều chỉnh để tạo khoảng cách với input */
        transform: translateY(-50%);
        background-color: #a09e9e; /* Màu nền cho biểu tượng */
        border-radius: 50%; /* Làm tròn nền */
        padding: 5px 8px; /* Khoảng cách giữa biểu tượng và nền */
        border: none;
        cursor: pointer;
        z-index: 1; /* Đảm bảo biểu tượng nằm trên input */
      }
      
      .search-button-1 i {
        color: white;
      }
      

      /* CONTENTS */
      .box {
        width: 100%;
        text-align: center;
        margin: 0;
        display: flex; 
        justify-content: center; 
        align-items: center;
        padding: 20px; 
      }
      
      .content-box {
        width: 50%;
        text-align: center;
        padding: 20px; 
      }

      .content-header{
       color: #1c2b33; 
       font-size: 12px; 
       font-weight: 700; 
       letter-spacing: 2px;
      }

      .content-title {
       font-size: 48px;  
       margin-top: 10px;  
       margin-bottom: 20px;
      }

      .content-text {
        width: 80%; /* Chiều rộng là 80% */
        margin: 0 auto; /* Căn giữa ngang */
        text-align: center; /* Căn giữa nội dung chữ */
        margin-bottom: 40px;
      }

      /* CARD */
      
    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Thay đổi số cột hoặc tỷ lệ */
        gap: 70px; /* Khoảng cách giữa các thẻ */
        padding: 40px;
        max-width: 1320px; /* Tăng kích thước tổng thể */
        margin: 0 auto;
      }
      
      
      .card-1 {
        background-color: white;
        border-radius: 8px;
        border: none;
      }
      
      .card-image {
        width: 100%; 
        height: 280px; 
        object-fit: cover; 
        border-radius: 32px;
      }
      
      .card-content {
        padding: 20px 0;
        text-align: left;
      }
      
      .card-content h5 {
        font-size: 12px;
        font-weight: 750;
        letter-spacing: .04em;
      }
      
      .card-content h3 {
        font-size: 18px;
        line-height: 150%;
      }
      
      .card-content p {
        font-size: 16px;
        line-height: 140%;
      }
      
      .card-link {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        line-height: 140%;
        text-decoration: none;
        color: #222222;
        margin-top: 15px;
        font-weight: 550;
      }
      
      .card-link:hover {
        text-decoration: underline;
        color: #6d6b6b;

      }
      
      .icon-wrapper {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px; /* Khoảng cách giữa icon và text */
        width: 20px; /* Kích thước hình tròn */
        height: 20px; /* Kích thước hình tròn */
        border: 1px solid black; /* Đường viền bao quanh */
        border-radius: 50%; /* Biến thành hình tròn */
        transition: background-color 0.3s, transform 0.3s;
      }
      
     
      
      .arrow-icon {
        width: 16px;
        height: 16px;
        fill: black; /* Màu mũi tên */
        transition: fill 0.3s;
      }
      
   




    #login-icon a:hover::after {
        transform: scaleX(1); 
    }
    
    .mg_tru {
        margin-left: -30px;
    }
  
    .login {
        display: flex;
        justify-content: flex-end; 
        align-items: center;
        padding-right: 150px;
    }

 .pd {
    padding-top: 50px;
 }

 .pd-search {
    padding-top: 50px;
 }

.gach-doc {
    width: 1px; 
    height: 25px; 
    background-color: white; 
    align-self: center; 
    margin: 0 15px; 
}

#login-icon {
    display: flex;
    align-items: center;
    color: white;
    font: inherit;
    vertical-align: baseline;
    /* padding: 0; */
}

.float-login-container {
    display: none;
    height: 100vh;
    background: white;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
    width: 11%;
    position: absolute;
    right: 10px;
    top: 60px;
    z-index: 100;
    transform: translateY(-20px); /* Đặt vị trí ban đầu */
    opacity: 0; /* Bắt đầu với độ trong suốt là 0 */
    transition: opacity 0.5s ease, transform 0.5s ease; 
}

.float-content {
    margin: 40px 20px 100px 30px;
    z-index: 100;
    transform: translateY(-20px); /* Vị trí ban đầu */
    transition: opacity 0.5s ease, transform 0.5s ease; 
    opacity: 0; /* Bắt đầu với độ trong suốt là 0 */

    .float-content-1 {
        color: black;
        font-size: 1.5rem;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 30px;
        padding-bottom: 18px;
    }
    
    .float-content-2 {
        font-size: 1.125rem;
        letter-spacing: 1.5px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 25px;
        padding-bottom: 18px;
        color: #232323;
    }
    
    .btn-float {
        opacity: 0.9;
        border: none;
        border-radius: 4px;
        color: #fff;
        padding: 10px 25px;
        font-size: 16px;
        background-color: #677B8C;
        margin-bottom: 40px;
        cursor: pointer;
    }
    
    .btn-float:hover {
        opacity: 1;
    }

}

/* NAV MOBILE  */
/* .hidden-list-mobile {
    width: 100vw;
    height: 120vh;
    position: fixed; 
    top: 0;
    left: 0;
    background-color: white;
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out; 
    z-index: 1000; 
} */
.hidden-list-mobile {
    width: 100vw;
    height: 92vh;
    position: fixed; /* Đảm bảo giữ cố định khi cuộn trang */
    bottom: 0; /* Đặt menu ở phía dưới của màn hình */
    left: 0;
    background-color: white;
    transform: translateY(100%); /* Ban đầu menu sẽ nằm ngoài màn hình ở phía dưới */
    transition: transform 0.3s ease-in-out; /* Hiệu ứng trượt lên mượt mà */
    z-index: 1000; /* Đảm bảo nằm trên các phần tử khác */
    overflow-y: auto; /* Kích hoạt cuộn dọc khi nội dung vượt quá chiều cao */
    overscroll-behavior: contain; /* Đảm bảo cuộn không gây ảnh hưởng tới phần tử bên ngoài */
    -webkit-overflow-scrolling: touch; /* Cải thiện trải nghiệm cuộn trên thiết bị di động */
}
.hidden-list-mobile.show-menu {
    transform: translateX(0); 
}
.invisible-list-click{
    width: 50px !important;
    height: 50px !important;
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 1000;
}
.bi-x-container{
    position: absolute;
    right: 3vw;
    top: 5vh;
    cursor: pointer;
}
.lm-container-up{
    padding: 8vh 4vw 4vh 3vw;
    a {
        color: #23252b;
    }

    i {
        color: black;
    }
}
.lm-content-up{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2vh 0;
    font-weight: 400;
}
.lm-content-up {
    display: flex;
    justify-content: space-between; /* Đảm bảo rằng phần tử con được căn chỉnh trái và phải */
    align-items: center; /* Căn giữa theo chiều dọc */
    width: 100%; /* Đảm bảo chiều rộng đầy đủ */
}

.icon-right{
    margin-left: 4vw;
}
.lm-container-down{
    display: flex;
    padding: 0 10vw 6vh 3vw;;
    gap: 1vh;
    flex-direction: column;
}
.lm-down-h2{
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
color: #1c1e21;
}
.lm-down-p{
    color: #232323;
    font-size: 16px;
    line-height: 24px;
    font-family: Arial, Helvetica, sans-serif;
    /* margin-bottom: -15px; */
    margin-top: 180px;
    a {
        color: #000 !important;
    }
}
.btn-down{
    background-color: #fff;
    border: 1px solid #67788a;
    border-radius: 4px;
    color: #67788a;
    display: inline-block;
    font-family: var(--careers-default-display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .9px;
    margin: 18px 0;
    padding: 15px 20px;
    text-decoration: none;

    a {
        color: #67788a;

    }
}
/* .hidden-list-mobile.show-menu {
    display: block; 
  } */
  .hidden-list-mobile.show-menu {
    transform: translateY(0); /* Menu trượt lên khi có lớp show-menu */
}

  .hidden {
    display: none; /* Ẩn nội dung */
}

.lm-container-up :hover{
    color: black !important;
}

/* Styles for arena content */
#arena-content {
    padding: 20px;
    background-color: white;
    position: fixed; /* Đảm bảo nó luôn ở trên */
    top: 0;
    left: 0;
    width: 100vw; /* Chiếm toàn bộ chiều rộng */
    height: 100vh; /* Chiếm toàn bộ chiều cao */
    z-index: 1001; /* Đảm bảo nằm trên nav mobile */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Đổ bóng cho nội dung */
    overflow: auto; /* Cuộn nội dung nếu cần */
}

.arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close {
    cursor: pointer;
    font-size: 24px;
}
/* NAV MOBILE  */




/* TUAN  */



p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

a{
    text-decoration: none;
}

div p {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.content-1{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 16px;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.item{
    flex: 0 0 32%;
    width: 32%;
}

img{
    max-width: 100%;
}

.item-img{
    margin-bottom: 20px;
}

.text-1,.text-2{
    font-family: 'Optimistic Display', Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .28px;
    line-height: 27px;
}

/* content-2 */

section{
    display: block;
}

.reason-join{
    padding: 120px 0;
}

.content-2{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap
}

.title, .subtitle{
    flex: 0 0 49%;
    width: 49%;
}

.title{
    text-align: center;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 1.3px;
    line-height: 50px;

}

.subtitle{
    font-size: 16px;
    letter-spacing: normal;
    line-height: 32px;
}

/* content-3 */
.challenges {
    background-color: #128C7E;
    padding: 97px 0;
    width: 100vw; /* Đặt chiều rộng bằng 100% chiều rộng viewport */
    position: relative; /* Để tránh ảnh hưởng của các thuộc tính cha */
    left: 50%; /* Đẩy nó về bên trái */
    right: 50%; /* Đẩy nó về bên phải */
    margin-left: -50vw; /* Đẩy về bên trái bằng một nửa chiều rộng viewport */
    margin-right: -50vw; /* Đẩy về bên phải bằng một nửa chiều rộng viewport */
}

.content-3{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 16px;
}

.content-3-title{
    color: white;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 1.3px;
    line-height: 50px;
    margin-bottom: 24px;
}

.content-3-wrapper{
    background-color: white;
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.content-3-img{
    width: 47%;
    flex: 0 0 47%;
}

.content-3-content{
    width: 53%;
    flex: 0 0 53%;
    padding: 90px;
    
}

.content-3-content-text1{
    font-size: 20px;
    line-height: 32px;
    letter-spacing: .4px;
    margin-bottom: 90px;
}

.content-3-content-text2{
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
}

/* content-4 */
.news {
    padding: 250px 0;
}

.content-4 {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 16px;
}

.content-4-title {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 1.34px;
    line-height: 70.4px;
    text-align: center;
    margin-bottom: 50px;
}

.content-4-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.content-4-item {
    flex: 0 0 24%;
    width: 24%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.content-4-item:hover img {
    transform: scale(1.1);
}

.content-4-item:hover .news__title-main{
    text-decoration: underline;
}

.content-4-item:hover .news__date{
    text-decoration: underline;
}

.news-img {
    line-height: 0;
    aspect-ratio: 4 / 3;
    max-height: 450px;
    max-width: 600px;
    overflow: hidden;
    width: 100%;
    display: block;
    border-radius: 8px;
}

.news-img img {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.news__title-main {
    font-size: 16px;
    line-height: 1.5em;
    padding-top: 15px;
    display: block;
    color: black;
    transition: color 0.3s ease;
}

.news__date {
    color: #344854;
    font-size: 14px;
    transition: color 0.3s ease;
}


.banner {
    width: 100%;
    background-image: url("/images/banner_pb.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
    /* padding-bottom: 53%;  */
    height: 800px;
    position: relative;
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */

}

.sizeTexxt {
    font-weight: bold !important;
}

.banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Màu overlay chỉ che ảnh */
    pointer-events: none; /* Để lớp overlay không ảnh hưởng đến tương tác của nội dung */
  }
  

.banner_text {
    position: relative;
    color: white; 
}

.noidung_text {
    font-size: 50px;       
    font-weight: 400;
    padding-left: 3px;
    line-height: 60px;
    margin-bottom: 15px;
}
.noidung_text_2{
    font-size: 20px;      
    padding-left: 3px;
    font-weight: 400;
    line-height: 150%;
}

.banner_width {
    margin-left: 60px;
    margin-top: 90px;
}


.btn-view-jobs {
    display: inline-block;
    padding: 16px;
    margin-top: 30px;
    background-color: #fff;
    color: black;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
  
  .btn-view-jobs:hover {
    background-color: #dcdee0; /* Màu nền khi hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    color: #000
  }
  




/* TUAN */


/* JOBS HT */


.jobs {
    background-color: #f7f7f7;
    padding: 60px 0;
}
.jobs__search-title {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 1.3px;
    line-height: 50px;
    margin-bottom: 56px;
}
.jobs__search {
    flex: 0 0 300px;
    width: 300px;
}
.jobs__search-input-wrap input {
    color: #65798a;
    font-size: 14px;
    letter-spacing: .9px;
    line-height: 20px;
    padding: 0 12px;
    border: none;
    height: 43px;
    border-radius: 4px 0 0 4px;
    flex: 0 0 calc(100% - 54px);
    width: calc(100% - 54px);
}
.jobs__search-input-btn {
    background-color: #505e6b;
    height: 45px;
    padding: 12px 15px 10px;
    line-height: 0;
    color: white;
    border-radius: 0 4px 4px 0;
}
.jobs__search-input-wrap {
    margin-bottom: 40px;
}
.jobs__search-save {
    margin-bottom: 15px;
}
.jobs__search-save a {
    text-decoration: none;
    font-size: 16px;
    color: #0064e0;
}
.jobs__search-save a:hover {
    text-decoration: underline;
}
.jobs__search-filter-title p {
    font-size: 14px;
    letter-spacing: 1.44px;
    line-height: 24px;
    font-weight: bold;
}
.jobs__search-filter-title a {
    font-size: 14px;
    letter-spacing: .4px;
    line-height: 27px;
    padding-bottom: 0;
    color: #67788a;
    font-weight: 500;
}
.jobs__search-filter-line {
    width: 100%;
    height: 2px;
    background-color: #dadde1;
    margin: 24px 0;
}
.jobs__search-filter-btn {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .8px;
    line-height: 24px;
    color: #1c2b33;
}
.jobs__search-filter-tech-opt {
    gap: 10px;
    margin-top: 10px;
    cursor: pointer;
}
.jobs__search-filter-tech-opt button {
    background-color: #fff;
    border: 1px solid #ced0d4;
    border-radius: 4px;
    box-sizing: content-box;
    cursor: pointer;
    height: 20px;
    min-width: 20px;
    padding: 0;
    width: 20px;
}
.jobs__search-filter-tech-opt-text {
    display: inline-block;
    color: #67788a;
    font-size: 16px;
    letter-spacing: .8px;
    line-height: 27px;
    font-weight: 300;
}
.jobs__search-filter-tech {
    margin-top: 4px;
}
.jobs__search-filter-tech-opt button span {
    display: none;
}
.jobs__search-filter-tech-opt.-active button span,
.jobs__search-filter-tech-opt.-disabled button span {
    display: block;
    width: 20px;
    height: 20px;
    background-position: 0 -75px !important; 
    background-size: 25px 147px !important;
    background-repeat: no-repeat !important;
}
.jobs__search-filter-tech-opt.-disabled {
    opacity: 0.7;
}
.jobs__list-filter {
    border: 1px solid #dee5f5;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 30.5px 20px;
    width: 100%;
    margin-bottom: 30px;
}
.jobs__list-filter-title {
    color: #232323;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .4px;
    line-height: 32px;
}
.jobs__list-filter-wrap-title a {
    color: #183f68;
    font-size: 14px;
}
.jobs__list {
    flex: 0 0 calc(100% - 350px);
    width: calc(100% - 350px);
}
.jobs__list-filter-wrap-title a:hover {
    text-decoration: underline;
}
.jobs__list-filter-wrap-title {
    margin-bottom: 20px;
}
.jobs__list-tile-whatsapp {
    color: #38444f;
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 0 5px;
}
.jobs__list-wrap-copy-link a {
    gap: 10px;
    color: #183f68;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    padding-top: 20px;
}
.jobs__list-search-opt {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.jobs__list-search-opt-item {
    gap: 10px;
    border: 1px solid #dddfe2;
    border-radius: 23px;
    cursor: default;
    -webkit-user-select: none;
    padding: 2px 10px;
}
.jobs__list-search-opt-item span {
    color: #38444f;
    font-family: inherit;
    font-weight: 300;
    letter-spacing: .28px;
    font-size: 14px;
}
.jobs__list-search-opt-item a {
    line-height: 0;
    color: #38444f;
}
.jobs__list-search-opt-item a svg {
    width: 15px !important;
}

.jobs__list-result {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}

.jobs__list-result-title {
    margin-bottom: 10px; 
  }

.jobs__list-result-title,
.jobs__list-result-mode p {
    color: #67788a;
    font-size: 14px;
    letter-spacing: .4px;
    line-height: 27px;
}
.jobs__list-result-mode a {
    gap: 10px;
    color: #67788a;
    font-size: 14px;
}
.jobs__list-result-mode {
    gap: 20px;
}
.jobs__list-result-mode a:hover {
    text-decoration: underline;
}
.jobs__list-result-mode a svg {
    transform: rotate(180deg);
    width: 8px;
}
.jobs__list-result {
    margin-bottom: 20px;
}
.jobs__list-item a {
    display: block;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 16px 20px;
    position: relative;
}
.jobs__list-item-title {
    color: #1c2b33;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .96px;
    line-height: 34px;
    padding-right: 30px;
    display: block;
}
.jobs__list-item-line {
    display: block;
    width: 100%;
    height: 1px;
    margin: 14px 0;
    background-color: #dee5f5;
}
.jobs__list-item-info {
    color: #67788a;
    font-weight: 300;
    letter-spacing: .4px;
    font-size: 14px;
    gap: 10px;
}
.jobs__list-item-info-img {
    gap: 15px;
}
.jobs__list-item-info-line {
    display: block;
    width: 1px;
    height: 36px;
    background-color: #dee5f5;
}
.jobs__list-item-mark {
    position: absolute;
    right: 16px;
    top: 16px;
    background-position: 0 -50px !important;
    background-size: 25px 235px !important;
    background-repeat: no-repeat !important;
    display: inline-block;
    height: 24px;
    width: 24px;
}
.jobs__list-item {
    margin-bottom: 10px;
}
.jobs__list-item:last-of-type {
    margin-bottom: 0;
}
.jobs__list-result--bottom {
    margin-top: 40px;
    margin-bottom: 0;
}
.jobs__list-result-mode-btn {
    letter-spacing: .4px;
    font-size: 16px !important;
    background-color: #67788a;
    color: #fff !important;
    height: 40px;
    padding: 10px 20px;
    text-align: center;
    width: auto !important;
    display: inline-block;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.jobs__list-result-mode-btn:hover {
    background-color: #38444f;
}

/* JOBS H */

/* FOOTER H */
/* body {
    overflow-y: scroll;
    /* Luôn hiển thị thanh cuộn dọAc 
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 !important;
    padding: 0;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    overflow-y: scroll;
    overflow-x: hidden;
} */



.contact-container {
    transition: background-color 0.5s ease-in-out !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0px;
}

.contact-content {
    display: flex;
    max-width: 1200px;
    width: 100%;
    flex-direction: row;
    padding: 16px;
    padding-top: 36px;
    padding-bottom: 36px;
    /* margin-left: 24px;
    margin-right: 24px; */
}

.content-left {
    max-width: 40%;
}

.content-left p {
    font-size: 80px;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.2;
    text-align: left;
    padding-left: 40px;
}

.contact-info {

    height: auto;
    max-width: 1200px;
    width: 60%;
    display: flex;
    /* align-items: center;
    justify-content: center;
    text-align: center; */
    flex-direction: column;
    padding: 16px;
    margin-left: 36px;
}

.contact-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    /* cursor: pointer; */
}


.contact-row-content {
    width: 100%;
    display: flex;
    border-top: 1px solid rgb(185, 181, 181);
    align-items: center;
    text-decoration:none;
    font-weight: bold;
    color: #000000;
}
.contact-row-content:hover svg path {
    fill: white; 
  }
  .contact-row-content:hover {
    color: white; 
  }

.contact-row-content> p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

#child-6:hover .svg-icon {
    color: white;
    /* Thay đổi màu thành trắng */
    transition: color 0.3s ease;
    /* Hiệu ứng chuyển đổi mượt mà */
}

#child-6:hover .arrow-down {
    color: white;
    /* Thay đổi màu của icon arrow-down */
    transition: color 0.3s ease;
}

.icon-title{
    font-size: 28px;

}
.svg-icon {
    padding-right: 25px;
    height: 32px;
    width: 64px;
}
.svg-icon > path {
    height: 32px;
    width: 32px;
}
.bi-facebook {
    color: #296ae1;
}

.bi-messenger {
    color: #4b87f8;
}

.bi-whatsapp {
    color: rgb(37, 211, 102);
}










.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 0 auto;
    padding: 0  ; */
    width: 100%;
    height: auto;
    background-color: #F5F6F6;
}

.footer {
    max-width: 1200px;
    width: 100%;
    background-color: #F5F6F6;
}

.footer-content {
    font-size: 15px;
    color: #232323;
    padding: 16px;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    margin-bottom: 20px;
    max-width: 100%;
    padding-top: 35px;
    margin-left: 24px;
    margin-right: 24px;
    border-top: 1px solid rgb(185, 181, 181);
}


/* .footer {
    max-width: 1128px;
    padding: 0px 100px 30px 140px;
} */

.footer-underline-text {
    text-decoration: underline !important;
    font-size: 15px !important;
    color: #232323 !important;
}



.footer-list {
    position: relative;
    /* margin-top: 28px; */
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 40px;
    /* margin-left: 24px;
    margin-right: 24px; */
    justify-content: space-between;
}

.mother-child {
    max-width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    /* margin-bottom: 50px; */
    
}

.list-child {
    /* padding: 4px; */
    padding-right: 10px;
    gap: 10px;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 24%;
    line-height: 26px;
    color: #1c1e21;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-basis: 45%;
    flex-grow: 1;
}

.list-child a:hover {
    text-decoration: underline !important;
    cursor: pointer;
    color: #1c1e21;
}

.hover-p {
    color: #1c1e21;
    text-decoration: none;
}

.list-wild-child {
    max-width: 40%;
    padding-left: 0px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    /* width: 120px; */
    line-height: 17px;
    color: #1c1e21;
    align-items: center;
}



.list-wild-child .a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.wild-child-1 {
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
}
/* .wild-child-child{
    padding-top: 12px;
    display: flex;
    flex-direction: column;
}
.wild-child-child >a{
    color: #1c1e21;
} */

/* FOOTER H */


@media only screen and (max-width: 991px) {
    .nav {
        display: none;
    }
    .nav__mobile {
        display: flex;
    }
    .nav__search {
        color: white;
    }
    .nav__mobile.-active {
        background-color: white;
    }
    .nav__mobile.-active .nav__logo-base {
        display: block;
    }
    .nav__mobile.-active .nav__logo-white {
        display: none;
    }
    .nav__mobile.-active .nav__search {
        color: #000;
    }
    .nav__mobile.-active .nav__open-menu {
        display: none;
    }
    .nav__mobile.-active .nav__open-menu-scroll {
        display: inline-block;
    }
    .banner__text a span {
        flex: 0 0 calc(100% - 50px);
        width: calc(100% - 50px);
    }
    .menu__mobile {
        display: block;
    }
}

@media only screen and (max-width: 768px) {

    .banner__img {
        bottom: -120px;
        max-height: 350px;
        position: absolute;
        right: 0;
        width: 100%;
    }
    .banner__text-img {
        display: none;
    }
    .banner .container {
        align-items: baseline;
        height: 487px;
    }
    .banner__text-title {
        margin-bottom: 10px;
        margin-top: 100px;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 1.6px;
        line-height: 16px;
    }
    .banner__text {
        padding-left: 50px;
        flex: 0 0 calc(100% - 50px);
        width: calc(100% - 50px);
    }
    .banner__text-sub-title {
        line-height: 32px;
        font-size: 30px;
    }
    .quote {
        margin-top: 120px;
        margin-bottom: 60px;
    }
    .quote .container-small {
        max-width: 100%;
    }
    .quote__empty {
        display: none;
    }
    .quote__text,
    .team__item,
    .reason-join__title,
    .reasion-join__content,
    .challenges__img,
    .challenges__content,
    .jobs__search,
    .jobs__list,
    .footer__link-left,
    .footer__link-right {
        flex: 0 0 100%;
        width: 100%;
    }
    .team__item {
        margin-bottom: 32px;
    }
    .team .container {
        width: 382px;
        max-width: 100%;
    }
    .reason-join {
        padding: 60px 0;
    }
    .reason-join__title {
        text-align: left;
        margin-bottom: 8px;
    }
    .news {
        padding: 76px 0;
    }
    .news__title {
        font-size: 54px;
        line-height: 60px;
    }
    .news__item {
        flex: 0 0 49%;
        width: 49%;
    }
    .jobs__search {
        margin-bottom: 15px;
    }
    .empower__title {
        font-size: 45px;
        line-height: 60px;
        flex: 0 0 220px;
        width: 220px;
    }
    .empower__brand {
        flex: 0 0 calc(100% - 250px);
        width: calc(100% - 250px);
    }
    .empower__brand-item {
        line-height: 1.5;
    }
    .footer__link-right {
        text-align: left;
    }
    .footer__link-col {
        flex: 0 0 49%;
        width: 49px;
        margin-bottom: 30px;
    }
    .career-booking__img {
        flex: 0 0 65%;
        width: 65%;
        margin: auto;
        text-align: center;
        margin-bottom: 20px;
    }
    .career-booking__calendly {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .content-left p {
      
        padding-left: 0px;
    }
}


@media (max-width: 991px) {
   
    #hamburger {
        display: block; 
    }


    header {
        padding: 0 20px;
        color: white;

        .bi-x-container {
            color: black;
        }
        
    }

    .header-content {
        margin: 0 !important;
        padding: 5px 0px;
    
    }
   
    .py-3 {
        background-image: none; 
    }

    .nav-menu {
        display: none;
    }
    
    
    #login-icon {
        display: none;
    }

    .icon-none {
        display: block;
    }

    .icon-show {
        display: none;
    }

    .content-left p {
        font-size: 60px;
    }
}


@media only screen and (max-width: 380px) {
   
    .jobs__search-title {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 15px;
    }
    
    .jobs {
        padding: 30px 0;
    }

   
    .jobs__list-item-title {
        font-size: 20px;
        line-height: 30px;
    }
    .jobs__list-result-mode p {
        display: none;
    }
  
}


@media only screen and (max-width: 768px) {
    .banner__img {
        bottom: -120px;
        max-height: 350px;
        position: absolute;
        right: 0;
        width: 100%;
    }
    .banner__text-img {
        display: none;
    }
    .banner .container {
        align-items: baseline;
        height: 487px;
    }
    .banner__text-title {
        margin-bottom: 10px;
        margin-top: 100px;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 1.6px;
        line-height: 16px;
    }
    .banner__text {
        padding-left: 50px;
        flex: 0 0 calc(100% - 50px);
        width: calc(100% - 50px);
    }
    .banner__text-sub-title {
        line-height: 32px;
        font-size: 30px;
    }

    .quote {
        margin-top: 120px;
        margin-bottom: 60px;
       
    }
    .quote .container-small {
        max-width: 100%;
    }
    .quote__empty {
        display: none;
    }

    .quote__text {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .content-left p {
        font-size: 45px;
        text-align: left;
        margin-bottom: 15px;
    }
    .icon-title{
        margin: 0px;
    }
    .contact-row-content{
        line-height: 1.5;
    }
    .contact-row-content>p{
        margin: 0px;
    }
    .footer-list {
        flex-direction: column;
        flex-wrap: wrap;
        display: flex;
        text-align: center;
        justify-content: center;
        align-content: center;
    }

    .mother-child {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        /* padding-left: 24px; */
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .list-child{
        padding-top: 24px;
        max-width: 45%;
        text-align: left;
    }

    .pdt {
        padding-top: 0px;
    }
}


@media only screen and (max-width: 500px) {
    .banner__img {
        max-height: 208px;
        bottom: -193px;
    }
    .banner .container {
        height: 350px;
    }
    .quote {
        margin-top: 60px;
    }

    
}
@media (max-width: 480px) {
    .contact-content{
        display: flex;
        flex-direction: column;
    }
    .contact-info{
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    .title-content-left{
        max-width: 100%;
    }
    .content-left{
        max-width: 100%;
    }
}
@media only screen and (max-width: 380px) {
    .banner__text {
        flex: 0 0 100%;
        width: 100%;
        padding-left: 50px;
    }
    .banner {
        min-height: 493px;
    }
    .banner .container {
        height: 300px;
    }
    .quote {
        margin: 30px 0;
    }
    .quote__text-title {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 15px;
    }
}


@media (max-width:768px){
    .content-1{
        max-width: 382px;
        width: 100%;
    }

    .item{
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 32px;
    }

    /* content-2 */
    .reason-join{
        padding: 60px 0;
    }

    .title, .subtitle{
        flex: 0 0 100%;
        width: 100%;
    }

    .title{
        text-align: left;
        margin-bottom: 8px;
    }

    /* content-3 */
    .content-3-img{
        flex: 0 0 100%;
        width: 100%;
    }

    .content-3-content{
        flex: 0 0 100%;
        width: 100%;
        
    }

    /* content-4 */
    .news {
        padding: 76px 0;
    }

    .content-4-title {
        font-size: 54px;
        line-height: 60px;
    }

    .content-4-item {
        flex: 0 0 49%;
        width: 49%;
    }


}

@media (max-width: 500px){
    /* content-3 */
    .content-3-content{
        padding: 40px;
        flex: 0 0 100%;
        width: 100%;
        
    }
    /* content-4 */
    .news {
       padding: 30px 0;
   }

   .content-4-title {
    font-size: 54px;
    line-height: 60px;
    margin-bottom: 20px;
   }

   .content-4-item {
       flex: 0 0 100%;
       width: 100%;
       margin-bottom: 20px;
   }
}

@media (min-width: 1024px) and (max-width: 1024px) {

    .py-3 {
        max-width: 1200px;
        width: 100%;
        margin: auto;
        padding: 0 16px;
    }

    .content-box {
        width: 30%;
        padding: 0;
    }
    .content-text {
        width: 100% !important;
    }
}

@media (min-width: 1680px) and (max-width: 1680px) {

    .header-content {
        max-width: 1380px;
        margin: 0 auto;
    }

   

    .logo-meta {
        margin-left: 80px;
    }

  
  
    .nav-menu ul li {
        margin-right: 20px; 
    }
    
    .nav-menu ul li:last-child {
        margin-right: 0; 
    }
    
    
    .banner {
        height: 1000px;
        
    }

    .banner_width {
        width: 80%;
    }   

   
}

@media (min-width: 1440px) and (max-width: 1440px) {

    .py-3 {
        width: 100%;
        margin: auto;
        padding: 0 16px;
    }

    .logo-meta {
        margin-left: 90px;
    }

    .noidung_text {
        font-size: 55px;
    }

    .banner {
        height: 900px;
    }

}

@media (min-width: 2496px) and (max-width: 5440px) {
    .header-content {
        max-width: 1410px;
        margin: 0 auto;
    }

   
    
    .nav-menu ul li {
        margin-right: 20px; /* Khoảng cách giữa các mục (tùy chỉnh theo nhu cầu) */
    }
    
    .nav-menu ul li:last-child {
        margin-right: 0; /* Không có khoảng cách bên phải cho mục cuối cùng */
    }
    

    .logo-meta {
        margin-left: 120px;
    }

    .banner {
        height: 1500px;
        
    }

    .noidung_text {
        width: 70%;
    }
    .noidung_text_2 {
        width: 70%;
    }

    .content-box {
        width: 100%;
        padding: 0;
    }
    .content-text {
        width: 55%;
    }
}

@media (min-width: 1920px) and (max-width: 1920px) {
    .banner {
        height: 1083px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* padding-bottom: 50px; */
        padding-top: 40px;
    }
    .banner_width {
        width: 77%;
    }   
    .noidung_text {
        width: 74%;
        font-weight: 500;
    }
    .noidung_text_2 {
        width: 75%;
        font-size: 18px;
        line-height: 150%;
    }
    .header-content {
        max-width: 1600px;
    }
    
}



@media (min-width: 2048px) and (max-width: 2048px) {
    .banner_width {
        width: 70%;
    }
    .banner {
        height: 1200px;
    }

    .noidung_text {
        font-size: 55px;
    }
}
@media screen and (max-width: 2048px) {
    .content-box {
        width: 100%;
        padding: 0;
    }
    .content-text {
        width: 50%;
    }
}

@media screen and (max-width: 915px) {
    .content-box {
        width: 100%;
        padding: 0;
    }
    .content-text {
        width: 100%;
    }
}

@media screen and (max-width: 432px) {
    .banner {
        height: 800px;
    }
    .banner_width {
        margin-left: 20px;
    }
    .noidung_text {
        font-size: 36px;
        line-height: 45px;
    }
    .noidung_text_2 {
        font-size: 18px;
    }

    .content-box {
        width: 90%;
    }
    .search-text {
        font-size: 24px;
    }
    .content-title {
        font-size: 36px;
    }
    .content-text {
        width: 100%;
        margin: 0 auto;
        font-size: 16px;
    }
    .search-input-1 {
        width: 97%;
    }
    .search-button-1 {
        right: 40px;
    }
}

@media screen and (max-width: 360px) {
    .noidung_text {
        font-size: 40px;
        line-height: 45px;
    }
}

/* Media Query cho các màn hình nhỏ nhất (Mobile) */
@media (max-width: 915px) {
    .grid-container {
      grid-template-columns: 1fr; /* 1 cột cho màn hình di động */
      gap: 20px; /* Khoảng cách nhỏ hơn cho di động */
      padding: 20px; /* Giảm padding cho di động */
    }
  
    .card-image {
      height: auto; /* Giảm chiều cao hình ảnh cho phù hợp với màn hình di động */
    }
  
    .card-link {
      font-size: 12px; /* Giảm kích thước font cho di động */
      margin-top: 10px; /* Giảm khoảng cách giữa icon và text */
    }
  }