:root {
  --logo-width: 200px;
  --gap: 30px;
  --duration: 40s; /* Chỉnh thời gian để tăng/giảm tốc độ */
}

.brand-slider {
  overflow: hidden;
  padding: 40px 0!important;
	margin-bottom: -40px !important;
  background: white;
  display: flex;
}

.slider-wrapper {
  display: flex;
  width: max-content; /* Đảm bảo các track nằm trên một hàng ngang */
}

.brand-track {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  padding-right: var(--gap); /* Khoảng cách giữa nhóm cuối và nhóm đầu của bản sao */
  animation: infinite-loop var(--duration) linear infinite;
}

/* Keyframes cho hiệu ứng loop từ phải sang trái */
@keyframes infinite-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Chạy đúng bằng 100% chiều rộng của một nhóm track */
    transform: translateX(-100%);
  }
}

/* Tùy chỉnh khung logo giống ảnh của bạn */
.brand-item {
  width: var(--logo-width);
  height: 120px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.brand-item img {
  max-width: 80%;
  height: auto;
  object-fit: contain;
}

/* Dừng lại khi hover (nếu muốn người dùng xem kỹ logo) */
.slider-wrapper:hover .brand-track {
  animation-play-state: paused;
}