/* clients-band.css — dải "Khách hàng / Đối tác" nền tối tràn viền + slider thẻ khách hàng.
 * Dùng chung cho /ve-chung-toi và /custom-webapp. Cần token màu/bo góc của sheetlab.css.
 * Dải phải nằm NGOÀI khung giới hạn chiều rộng của trang để tràn viền (không dùng 100vw). */
.clients-band {
  padding: 60px 24px 52px;
  background: radial-gradient(900px 340px at 88% -20%, rgba(16, 185, 129, .20), transparent 65%), var(--color-bg-dark);
  color: #fff;
}
.clients-band__inner { max-width: 860px; margin: 0 auto; }
.clients-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.clients-band__label {
  display: block; margin-bottom: 8px; color: var(--sl-green-400);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.clients-band__title { font-size: clamp(24px, 3.6vw, 32px); font-weight: 800; color: #fff; line-height: 1.25; margin: 0 0 8px; }
.clients-band__sub { font-size: 15.5px; color: #9ca3af; line-height: 1.6; margin: 0; max-width: 560px; }
.cs-nav { display: flex; gap: 10px; flex: none; }
.cs-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  transition: background .15s, border-color .15s, opacity .15s;
}
.cs-btn svg { width: 20px; height: 20px; }
.cs-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); }
.cs-btn:disabled { opacity: .35; cursor: default; }
.cs-btn:focus-visible, .cs-dot:focus-visible, .cs-track:focus-visible { outline: 2px solid var(--sl-green-400); outline-offset: 3px; }
.cs-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-lg);
}
.cs-track::-webkit-scrollbar { display: none; }
.cs-card {
  flex: 0 0 calc((100% - 16px) / 2); box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; color: var(--color-text); border-radius: var(--radius-lg); padding: 26px 24px 24px;
}
.cs-card__logo {
  width: 72px; height: 72px; box-sizing: border-box; overflow: hidden; margin-bottom: 18px;
  border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--color-primary-dark);
}
.cs-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cs-card__sector {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 6px;
}
.cs-card__name { font-size: 17px; font-weight: 800; color: var(--color-text); line-height: 1.35; margin: 0 0 8px; }
.cs-card__what {
  display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 8px;
  background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 12.5px; font-weight: 700; line-height: 1.5;
}
.cs-card__solve { font-size: 14.5px; color: #4b5563; line-height: 1.7; margin: 0 0 16px; }
.cs-card__points {
  list-style: none; margin: auto 0 0; padding: 14px 0 0; width: 100%;
  border-top: 1px solid var(--color-border); display: grid; gap: 8px;
}
.cs-card__points li { position: relative; padding-left: 24px; font-size: 13.5px; font-weight: 600; color: var(--color-text); line-height: 1.5; }
.cs-card__points li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-primary-light);
}
.cs-card__points li::after {
  content: ""; position: absolute; left: 5px; top: 6px; width: 6px; height: 3px;
  border-left: 2px solid var(--color-primary-dark); border-bottom: 2px solid var(--color-primary-dark); transform: rotate(-45deg);
}
.cs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.cs-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: rgba(255, 255, 255, .28); transition: width .2s, background .2s;
}
.cs-dot.is-active { width: 24px; background: var(--color-primary); }
.clients-band.is-static .cs-nav, .clients-band.is-static .cs-dots { display: none; }
@media (max-width: 640px) {
  .clients-band { padding: 44px 16px 36px; }
  .clients-band__head { margin-bottom: 20px; }
  .cs-nav { display: none; }
  .cs-card { flex-basis: 86%; padding: 22px 20px; }
}