/* VSW-TC-08 - Băng trượt diễn giả, độc lập với lưới trang mẫu. */
.ds-bang-vung { min-width: 0; }

.ds-bang {
  --ds-khe: 12px;
  --ds-buoc: 4;
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column dense;
  grid-auto-columns: calc((100% - var(--ds-khe)) / 2);
  gap: var(--ds-khe);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ds-bang::-webkit-scrollbar { display: none; }
.ds-bang:focus-visible {
  outline: 3px solid var(--vs-action);
  outline-offset: 4px;
}

.ds-bang .ds-o { min-width: 0; }
.ds-bang .ds-o:nth-child(4n+1),
.ds-bang .ds-o:nth-child(4n+2) { grid-row: 1; }
.ds-bang .ds-o:nth-child(4n+3),
.ds-bang .ds-o:nth-child(4n+4) { grid-row: 2; }
.ds-bang .ds-o:nth-child(4n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
.ds-bang:has(> .ds-o:nth-child(4n+1):last-child)::after { content: ""; grid-row: 1; }

.ds-bang .ds-the:focus-visible {
  outline: 3px solid var(--vs-action);
  outline-offset: -3px;
}

.ds-bang .ds-anh-nguoi,
.ds-bang .ds-anh-chan-dung { object-fit: cover; object-position: 50% 0; }
.ds-bang .ds-anh-vt { font-size: clamp(12px, 4vw, var(--vs-co-so-lieu)); }

.ds-bang .ds-ten {
  font-size: 14px;
  line-height: 1.3;
}

.ds-bang .ds-cv {
  font-size: 12px;
  line-height: 1.35;
}

.ds-bang-vung .ds-bang-dieu-khien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vs-k4);
  margin-top: var(--vs-k5);
}

.ds-bang-vung .ds-bang-dieu-khien[hidden],
.ds-bang-vung .ds-bang-cham[hidden],
.ds-bang-vung .ds-bang-dung[hidden] { display: none; }

.ds-bang-vung .ds-bang-cham { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-bang-vung .ds-bang-cham span {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vs-line);
  transition: width 250ms var(--vs-ease);
}

.ds-bang-vung .ds-bang-cham .ds-bang-cham-chon {
  width: 22px;
  border-radius: var(--vs-bo-vien-thuoc);
  background: var(--vs-blue);
}

.ds-bang-vung .ds-bang-nut { display: flex; flex-shrink: 0; gap: var(--vs-k2); }
.ds-bang-vung .ds-bang-nut .vs-nut-tron { width: 44px; height: 44px; }
.ds-bang-vung .ds-bang-nut .vs-nut-tron:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-bang-vung .ds-bang-nut .vs-nut-tron:focus-visible {
  outline: 3px solid var(--vs-action);
  outline-offset: 4px;
}

.ds-bang-vung .ds-bang-dung[aria-pressed="false"] .ds-bang-bieu-tuong-chay,
.ds-bang-vung .ds-bang-dung[aria-pressed="true"] .ds-bang-bieu-tuong-dung { display: none; }

@media (min-width: 768px) {
  .ds-bang { --ds-so: 3.5; --ds-khe: 16px; --ds-buoc: 3; display: flex; }
  .ds-bang .ds-o {
    display: block;
    flex: 0 0 calc((100% - (var(--ds-so) - 0.5) * var(--ds-khe)) / var(--ds-so));
  }
  .ds-bang .ds-o:nth-child(n) { grid-row: auto; scroll-snap-align: none; scroll-snap-stop: normal; }
  .ds-bang .ds-o:nth-child(3n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
  .ds-bang:has(> .ds-o:nth-child(4n+1):last-child)::after { content: none; }

  .ds-bang .ds-the {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--vs-bo-lon);
    overflow: hidden;
    background: var(--ds-nen);
    aspect-ratio: 3 / 4;
    box-shadow: none;
    transform: none;
  }
  .ds-bang .ds-the:hover,
  .ds-bang .ds-the:focus-within { transform: none; box-shadow: none; }

  .ds-bang .ds-anh {
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background: none;
  }
  .ds-bang .ds-chu {
    position: absolute;
    z-index: 1;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px var(--vs-k3);
    border-radius: var(--vs-bo-vua);
    background: color-mix(in srgb, var(--vs-trang) 94%, transparent);
    backdrop-filter: blur(6px);
  }
  .ds-bang .ds-ten {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0;
    font-size: 15px;
    line-height: 1.25;
  }
  .ds-bang .ds-cv {
    padding: 0;
    margin-top: var(--vs-k1);
    gap: 2px;
  }
  .ds-bang .ds-cv li:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ds-bang .ds-cv li:nth-child(n+2) { display: none; }

  .ds-bang .ds-the-cong {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }
}

@media (min-width: 1024px) {
  .ds-bang .ds-the { aspect-ratio: 4 / 5; }
  .ds-bang .ds-ten { -webkit-line-clamp: 2; }
  .ds-bang .ds-cv li:nth-child(-n+2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .ds-bang { --ds-so: 4.5; --ds-khe: 20px; --ds-buoc: 4; }
  .ds-bang .ds-o:nth-child(n) { scroll-snap-align: none; scroll-snap-stop: normal; }
  .ds-bang .ds-o:nth-child(4n+1) { scroll-snap-align: start; scroll-snap-stop: always; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-bang { scroll-behavior: auto; }
  .ds-bang-vung .ds-bang-cham span,
  .ds-bang-vung .ds-bang-nut .vs-nut-tron { transition: none; }
  .ds-bang-vung .ds-bang-nut .vs-nut-tron:hover { transform: none; }
}

.ds--dang-tai .ds-bang {
  visibility: hidden;
}

.ds-xem-tat-ca {
  display: flex;
  justify-content: center;
  margin-top: var(--vs-k6);
}

@media (max-width: 767px) {
  .ds-xem-tat-ca {
    margin-top: var(--vs-k5);
  }
}