/* VSW-TC-08 · Diễn giả chính: lưới thẻ + khung ảnh (DESIGN-SYSTEM 5.14) */
.ds {
  /* Nền sau người: gradient thương hiệu 110 độ + quầng cyan góc dưới trái (phương án A, chỉ dùng token) */
  --ds-nen:
    radial-gradient(90% 70% at 12% 100%, color-mix(in srgb, var(--vs-cyan) 55%, transparent) 0, transparent 62%),
    var(--vs-gradient-dong-chay);
  --ds-ty-le: 1 / 1;
  background: var(--vs-trang);
}

/* ---- Lưới: 2 cột (điện thoại, khe 12) - 2 cột (768) - 3 cột (1024) - 4 cột (1200) ---- */
.ds-luoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vs-k3);
}

.ds-o {
  display: flex;
  min-width: 0;
}

@media (min-width: 768px) {
  .ds-luoi { gap: var(--vs-khe-luoi-rong); }
}

@media (min-width: 1024px) {
  .ds-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .ds-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Thẻ: 1 thẻ a bọc toàn bộ (vùng chạm cả thẻ), cao bằng nhau trong hàng ---- */
.ds-the {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--vs-k3);
  min-width: 0;
  padding: var(--vs-k3);
  color: var(--vs-ink);
  text-align: left;
  text-decoration: none;
  cursor: default;
}

.ds--js .ds-the { cursor: pointer; }

.ds-the:hover {
  color: var(--vs-ink);
}

.ds-the:focus-visible {
  outline: 0;
  border-color: var(--vs-action);
  box-shadow: var(--vs-bong-vong-focus);
}

/* ---- Khung ảnh: người đứng đáy khung, hoặc ô logo, hoặc chữ viết tắt ---- */
.ds-anh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--ds-ty-le);
  border-radius: var(--vs-bo-vua);
  background: var(--ds-nen);
}

.ds-anh-nguoi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform-origin: 50% 0;
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--vs-ink) 30%, transparent));
  transition: transform var(--vs-t-anh) var(--vs-ease);
}

/* Ảnh thường (không tách nền): phủ khung, không phủ gradient, không bóng đổ */
.ds-anh-chan-dung {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform var(--vs-t-anh) var(--vs-ease);
}

/* Logo đơn vị nhỏ ở góc khi đã có ảnh người */
.ds-anh-logo {
  position: absolute;
  top: var(--vs-k2);
  left: var(--vs-k2);
  width: auto;
  max-width: 60%;
  height: 32px;
  padding: 6px 10px;
  border-radius: var(--vs-bo-nho);
  background: var(--vs-trang);
  object-fit: contain;
}

/* Sóng mảnh trang trí góc dưới phải, chỉ khi ruột khung là logo hoặc chữ viết tắt */
.ds-anh-song {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 78%;
  height: 46%;
  fill: none;
  stroke: var(--vs-trang);
  stroke-width: 1.5;
  opacity: 0.18;
  pointer-events: none;
}

/* Ô trắng giữa khung: cùng kích thước cho mọi thẻ, logo giữ tỉ lệ (không kéo giãn, không đổi màu) */
.ds-anh-o-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40%;
  height: 26%;
  padding: var(--vs-k2) var(--vs-k3);
  border-radius: var(--vs-bo-nho);
  background: var(--vs-trang);
  box-shadow: var(--vs-bong-noi);
  transform: translate(-50%, -50%);
  transition: transform var(--vs-t-anh) var(--vs-ease);
}

.ds-anh-o-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-anh-vt {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vs-trang);
  box-shadow: var(--vs-bong-noi);
  color: var(--vs-blue);
  font-family: var(--vs-font-tieu-de);
  font-size: var(--vs-co-so-lieu);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.ds--js .ds-the:hover .ds-anh-nguoi,
.ds--js .ds-the:focus-visible .ds-anh-nguoi,
.ds--js .ds-the:hover .ds-anh-chan-dung,
.ds--js .ds-the:focus-visible .ds-anh-chan-dung {
  transform: scale(1.03);
}

.ds--js .ds-the:hover .ds-anh-o-logo,
.ds--js .ds-the:focus-visible .ds-anh-o-logo {
  transform: translate(-50%, -50%) scale(1.03);
}

/* ---- Chữ trong thẻ ---- */
.ds-ten {
  padding-inline: var(--vs-k1);
  color: var(--vs-ink);
  overflow-wrap: break-word;
}

.ds-cv {
  display: flex;
  flex-direction: column;
  gap: var(--vs-k2);
  padding-inline: var(--vs-k1);
  color: var(--vs-muted);
  font-size: var(--vs-co-chu-thich);
  line-height: 1.45;
}

.ds-cv li {
  color: var(--vs-muted);
  font-weight: 400;
  overflow-wrap: break-word;
}

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

.ds-cv .ds-cv-chuc {
  color: inherit;
  font-weight: inherit;
}

/* Card shows at most the first 2 position lines (Bi 01/10); the popup keeps them all */
.ds-cv li:nth-child(n+3) { display: none; }

.ds-cv-dv {
  overflow-wrap: break-word;
}

.ds-the-cong {
  width: 32px;
  height: 32px;
  margin-top: auto;
  align-self: flex-end;
}

.ds-the-cong .vs-mui-ten {
  width: 16px;
  height: 16px;
}

.ds:not(.ds--js) .ds-the-cong { display: none; }

/* Dưới 768: logo góc ẩn (popup giữ); thẻ không ảnh dùng khung 4/3 cho khối ngắn lại, ô logo to hơn để còn đọc được */
@media (max-width: 767px) {
  .ds-luoi .ds-anh-logo { display: none; }
  .ds-luoi .ds-anh:not(:has(.ds-anh-nguoi, .ds-anh-chan-dung)) { aspect-ratio: 4 / 3; }
  .ds-luoi .ds-anh-o-logo { width: 50%; height: 36%; }
}

@media (min-width: 768px) {
  .ds-cv { font-size: var(--vs-co-nho); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-anh-nguoi, .ds-anh-chan-dung, .ds-anh-o-logo { transition: none; }
  .ds--js .ds-the:hover .ds-anh-nguoi, .ds--js .ds-the:focus-visible .ds-anh-nguoi,
  .ds--js .ds-the:hover .ds-anh-chan-dung, .ds--js .ds-the:focus-visible .ds-anh-chan-dung { transform: none; }
  .ds--js .ds-the:hover .ds-anh-o-logo, .ds--js .ds-the:focus-visible .ds-anh-o-logo { transform: translate(-50%, -50%); }
}