/* VSW-TC-08-DLG · Hộp thoại chi tiết diễn giả: tấm giữa từ 768px, tấm đáy dưới 768px (DESIGN-SYSTEM 5.14) */
.ds [hidden] { display: none; }

.ds-dlg {
  --ds-ty-le: 1 / 1;
  position: fixed;
  inset: 0;
  width: min(880px, calc(100% - 32px));
  max-width: none;
  height: fit-content;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--vs-bo-lon);
  background: var(--vs-trang);
  box-shadow: var(--vs-bong-hop-thoai);
  color: var(--vs-ink);
  overflow: clip;
  scroll-margin-top: calc(var(--vs-cao-header) + var(--vs-k4));
}

.ds-dlg[open] { display: block; }
.ds-dlg::backdrop { background: var(--vs-man-che); }
.ds-dlg:target { border-color: var(--vs-action); }

.ds-dlg-cuon {
  max-height: 88dvh;
  padding: var(--vs-k6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ds-dlg-dong {
  position: absolute;
  top: var(--vs-k4);
  right: 20px;
  z-index: 2;
}

.ds--js .ds-dlg-nhan,
.ds--js .ds-dlg-cot-chu {
  padding-right: calc(var(--vs-nut-tron) + var(--vs-k3));
}

.ds-dlg-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vs-k5);
}

.ds-dlg-ten { text-wrap: balance; }

.ds-cv-ds {
  display: grid;
  gap: var(--vs-k3);
  margin-top: var(--vs-k4);
}

.ds-cv-muc {
  padding-top: var(--vs-k3);
  border-top: 1px solid var(--vs-line);
}

.ds-cv-muc:first-child {
  padding-top: 0;
  border-top: 0;
}

.ds-cv-ds .ds-cv-chuc {
  color: var(--vs-ink);
  font-size: var(--vs-co-noi-dung);
  font-weight: 600;
  line-height: var(--vs-dong-noi-dung);
}

.ds-cv-ds .ds-cv-dv {
  color: var(--vs-muted);
  font-size: var(--vs-co-noi-dung);
  line-height: var(--vs-dong-noi-dung);
}

.ds-cv-ds .ds-cv-dam .ds-cv-chuc,
.ds-cv-ds .ds-cv-dam .ds-cv-dv {
  color: var(--vs-ink);
  font-weight: 600;
}

.ds-mo-ta {
  max-width: 60ch;
  margin-top: var(--vs-k5);
  font-size: var(--vs-co-noi-dung);
  line-height: var(--vs-dong-noi-dung);
  text-wrap: pretty;
}

.ds-mo-ta p + p { margin-top: var(--vs-k3); }

@media (min-width: 768px) {
  .ds-dlg-luoi {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--vs-k6);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .ds-dlg { width: min(960px, calc(100% - 64px)); }
}

/* Tấm đáy dưới 768px */
@media (max-width: 767px) {
  .ds-dlg {
    --ds-ty-le: 1 / 1;
    inset: auto 0 0;
    width: 100%;
    margin: 0;
    border-radius: var(--vs-bo-lon) var(--vs-bo-lon) 0 0;
  }
  .ds-dlg::before {
    content: "";
    position: absolute;
    top: var(--vs-k2);
    left: 50%;
    z-index: 2;
    width: 36px;
    height: 4px;
    border-radius: var(--vs-bo-vien-thuoc);
    background: var(--vs-line);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .ds-dlg-cuon {
    max-height: 92dvh;
    padding: 60px 20px var(--vs-k7);
  }
  .ds-dlg-dong { top: var(--vs-k2); right: var(--vs-k2); }
  .ds-dlg .ds-anh {
    width: min(100%, 260px);
    margin-inline: auto;
  }
}

/* Khoá cuộn nền khi hộp thoại mở */
html:has(.ds-dlg[open]) {
  overflow: clip;
  scrollbar-gutter: stable;
}

.ds--js .ds-dlg-nhan { display: none; }

/* Hiệu ứng mở/đóng (Q67, D5): chỉ khi JS khối đã nhận hộp thoại và trang đã sẵn; tắt khi reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  @supports (transition-behavior: allow-discrete) {
    html.vs-hu-san .ds--js .ds-dlg {
      transition: opacity var(--vs-t-vua) var(--vs-ease), transform var(--vs-t-vua) var(--vs-ease), overlay var(--vs-t-vua) allow-discrete, display var(--vs-t-vua) allow-discrete;
    }
    html.vs-hu-san .ds--js .ds-dlg::backdrop {
      transition: opacity var(--vs-t-vua) var(--vs-ease), overlay var(--vs-t-vua) allow-discrete, display var(--vs-t-vua) allow-discrete;
    }
    .ds--js .ds-dlg:not([open]) { opacity: 0; transform: translateY(12px); }
    .ds--js .ds-dlg:not([open])::backdrop { opacity: 0; }
    @starting-style {
      .ds--js .ds-dlg[open] { opacity: 0; transform: translateY(12px); }
      .ds--js .ds-dlg[open]::backdrop { opacity: 0; }
    }
    @media (max-width: 767px) {
      html.vs-hu-san .ds--js .ds-dlg { transition-duration: 300ms; }
      .ds--js .ds-dlg:not([open]) { opacity: 1; transform: translateY(100%); }
      @starting-style { .ds--js .ds-dlg[open] { opacity: 1; transform: translateY(100%); } }
    }
  }
}