.banner-title-2{
	    font-family: "FS-SemiBold", sans-serif !important;
    margin-bottom: 40px !important;
    background: linear-gradient(270deg, #0da8ff 0%, #005096 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.right-block-container {
    /* Giả lập cái khung mờ của ảnh gốc */
    padding: 10px;
   
    max-width: 600px;
   
}

.section-title {
    text-align: center;
    color: #333;
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

/* --- Lưới hiển thị 2x2 --- */
.top-banks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột */
    gap: 25px; /* Khoảng cách giữa các thẻ */
}

/* --- Style cho thẻ chứa Logo (Lớp bên trong) --- */
.bank-card {
    background: #fff;
    border-radius: 16px;
    /* Tăng padding để logo có không gian "thở" */
    padding: 40px 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px; /* Chiều cao cố định để các thẻ bằng nhau */
    
    /* Bóng đổ mặc định nhẹ nhàng */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255,255,255,0.8);
    
    /* Transition quan trọng cho hiệu ứng hover mượt */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* Style cho ảnh logo bên trong */
.bank-card img {
    max-width: 90%; /* Đảm bảo logo không tràn ra ngoài */
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Mẹo nhỏ: làm logo hơi tối đi 1 chút khi chưa hover để tạo tương phản */
    filter: grayscale(20%) opacity(0.9); 
    transition: all 0.3s ease;
}

/* --- HIỆU ỨNG HOVER (Rê chuột) --- */
.bank-card:hover {
    /* Phóng to nhẹ và nổi lên cao hơn */
    transform: translateY(-8px) scale(1.03);
    /* Bóng đổ đậm hơn và có màu xanh (Tech blue) */
    box-shadow: 0 20px 40px rgba(0, 113, 227, 0.15);
    border-color: rgba(0, 113, 227, 0.1);
}

.bank-card:hover img {
    /* Khi hover thì logo hiện nguyên màu sắc nét */
    filter: grayscale(0%) opacity(1);
}


/* --- HIỆU ỨNG AMBIENT FLOATING (Nhấp nhô tự động) --- */

/* Định nghĩa chuyển động lên xuống */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        /* Điểm cao nhất của chuyển động */
        transform: translateY(-10px); 
    }
}

/* Áp dụng animation cho lớp wrapper bên ngoài */
.float-wrapper {
    /* Thời gian 5s, lặp vô tận, chuyển động mượt (ease-in-out) */
    animation: gentleFloat 5s ease-in-out infinite;
}

/* --- Tạo sự không đồng bộ (Lively feel) --- */
/* Các thẻ sẽ bắt đầu chuyển động ở các thời điểm khác nhau */
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 1.2s; } /* Logo 2 trễ 1.2s */
.delay-3 { animation-delay: 0.6s; } /* Logo 3 trễ 0.6s */
.delay-4 { animation-delay: 1.8s; } /* Logo 4 trễ 1.8s */

/* Khi hover vào thẻ, tạm dừng hiệu ứng nhấp nhô của chính thẻ đó 
   để tránh xung đột với hiệu ứng hover */
.float-wrapper:hover {
    animation-play-state: paused;
}
.__banner {
	position: relative;
    height: auto;
}

.__banner__global {
	Padding-top: 2rem;
	padding-left: 2rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
}

.__banner__left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .__banner__map__world {
  position: relative;
  width: 100%;
  padding-top: 46%; 
  background: url(../img/backgroud-word-llq.png) no-repeat top left / contain;
  background-size: cover;
  z-index: 1;
} */

.__banner__person {
	width: 50%;
    display: flex;
}

.__banner__person img{
	width: 100%;

}
.banner-title-2{
	
}
.__banner__content {
	margin-top: 0px;
    display: flex;
    gap: 48px;
    flex-direction: column;
	height: auto;
	background: url(../img/backgroud-word-llq.png) no-repeat;
  	background-size: contain;
}

.__banner__info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-primary);
}

.__banner__info__title {
  font-size: var(--text-3xl);
  line-height: 68px;
  letter-spacing: 0%;
}
.__banner__info__title > .banner__color > span {
  width: 100%;
  display: block;
}
.__banner__info__des {
  color: #5a6475;
  max-width: 528px;
}

/* banner tuyển dụng */
.__banner__recruit__header {
  background: url(../img/banner/img__banner__recruit.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}


@media(max-width: 1024px){
	.__banner__global {
		flex-direction:column;
		align-items: center;
		justify-content: center;
		gap: 32px;
		background: url("../img/backgroud-word-llq-mobile.png") no-repeat center / contain;
	}
	
	.__banner {
    	padding: 0;
    	height: auto;
/*    	 	background: url("../img/backgroud-word-llq-mobile.png") no-repeat center / contain; */
  	 }
	
	.__banner__content{
		max-width: 100%;
		width: 100%;
    	gap: 24px;
    	text-align: center;
	}
	.__banner__left,.__banner__person{
		width: 100%;
	}
	.__banner__left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
	.__banner__info__des,
	.__banner__left{
		max-width: 100%;
	}
	.__banner,
	.__banner__person{
		height: 100%;
	}
	.__banner__person{
		
	}
	 .__banner__info {
    gap: var(--gap-secondary);
  }
	.__banner__person img{
		height: auto;
		width: 100%;
		object-fit: cover;
	}
	.__banner--btn {
    	text-align: center;
  	}
	.__banner__content {
		background: transparent;
  		background-size: cover;
	}
}


@media (max-width: 991px) {
  .__banner__info__title {
    font-size: var(--text-slg);
    line-height: var(--leading-xlg);
  }


  .__banner__map {
    display: none;
  }
  .__banner__person {
    position: relative;
	 display: flex;
     justify-content: CENTER;
  }
}
@media (max-width: 576px)
{
 .__banner__global {
 	 	padding-left: 0;
		flex-direction:column;
		gap: 20px; 
	 padding-top:0px;
	}

	.__banner__left,.__banner__person{
		width: 100%;
	}
	.__banner__person{
		height: 100%;
	}
}