/** PARTNERS SECTION (BẢN TỰ ĐỘNG CUỘN) */
.partners-section {
	text-align: center;
	/* margin: 60px auto; */
	overflow: hidden; /* Quan trọng: Cắt nội dung tràn */
    padding: 40px 0; /* Chỉ thêm padding dọc */
    width: 100%;
}

/* Container chứa 2 set, đây là element sẽ chạy animation */
.partners-logos {
	display: flex;
	flex-wrap: nowrap;
    width: max-content; /* Rộng bằng tổng 2 set */
	animation: scroll 20s linear infinite;
}
.partners-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	margin-top: 30px;
	background: #C6C6C64D;

	flex-wrap: nowrap; /* Ngăn các logo xuống hàng */
	width: max-content; /* Làm cho chiều rộng bằng tổng các logo */
	padding: 40px 80px; /* Thêm padding ngang để lặp lại đẹp hơn */

	animation: scroll 20s linear infinite;
}
.partners-logos img {
	height: 50px;
	object-fit: contain;
	filter: grayscale(20%);
	flex-shrink: 0;
}

/* Từng set logo (Set 1 và Set 2) */
.partners-logos-set {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 80px; /* Giữ khoảng cách giữa các logo */
    padding: 0 40px; /* Thêm khoảng đệm 2 bên CỦA MỖI SET */
}

/* Các logo bên trong */
.partners-logos-set img {
	height: 50px;
	object-fit: contain;
	filter: grayscale(20%);
	flex-shrink: 0; /* Không co logo */
}

/* Thêm hiệu ứng tạm dừng khi di chuột vào (tùy chọn) */
.partners-section:hover .partners-logos {
    animation-play-state: paused;
}

/* 4. Định nghĩa animation cuộn */
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%); 
	}
}
