/* VSW-NEN · Thanh phan dung chung: nut, nhan, dau khoi, the, tam, chip, tab, so lieu (DESIGN-SYSTEM 2.0 S5) */

/* 5.0 Mui ten dung chung (svg, khong dung ky tu -> trong thanh phan moi) */
.vs-mui-ten { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--vs-t-nhanh) var(--vs-ease); }
.vs-mui-ten--trai { transform: scaleX(-1); }

/* 5.1 Nut vien thuoc */
.vs-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vs-k2);
  min-height: var(--vs-cao-nut); padding-inline: var(--vs-k5);
  border: 1px solid var(--vs-ink); border-radius: var(--vs-bo-vien-thuoc);
  background: transparent; color: var(--vs-ink);
  font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-nho); font-weight: 600;
  letter-spacing: var(--vs-gian-nut); line-height: 1.4; text-decoration: none; cursor: pointer;
  text-wrap: balance;
  transition: background-color var(--vs-t-nhanh), border-color var(--vs-t-nhanh), color var(--vs-t-nhanh);
}
.vs-nut:hover { background: var(--vs-ice); }
.vs-nut:hover .vs-mui-ten { transform: translateX(3px); }
.vs-nut:hover .vs-mui-ten--trai { transform: scaleX(-1) translateX(3px); }
.vs-nut--chinh { border-color: var(--vs-blue); background: var(--vs-blue); color: var(--vs-trang); }
.vs-nut--chinh:hover { border-color: var(--vs-blue-dam); background: var(--vs-blue-dam); color: var(--vs-trang); }
.vs-nut--mem { border-color: transparent; background: var(--vs-ice); color: var(--vs-blue); }
.vs-nut--mem:hover { background: var(--vs-nhan-nen); }
.vs-nut--chu { min-height: auto; padding-inline: 0; border-color: transparent; background: transparent; color: var(--vs-action); }
.vs-nut--chu:hover { background: transparent; color: var(--vs-blue); }
.vs-nut--tren-toi { border-color: var(--vs-trang); background: var(--vs-trang); color: var(--vs-blue); }
.vs-nut--tren-toi:hover { border-color: var(--vs-nhan-nen); background: var(--vs-nhan-nen); }
.vs-nut--lon { min-height: var(--vs-cao-nut-lon); padding-inline: 28px; }
.vs-nut--gon { min-height: var(--vs-cao-nut-gon); padding-inline: 20px; }
.vs-nut[aria-disabled="true"], .vs-nut:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* 5.2 Nut tron */
.vs-nut-tron {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: var(--vs-nut-tron); height: var(--vs-nut-tron);
  border: 1px solid var(--vs-line); border-radius: 50%;
  background: var(--vs-trang); color: var(--vs-blue); box-shadow: var(--vs-bong-noi);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--vs-t-nhanh), border-color var(--vs-t-nhanh), color var(--vs-t-nhanh);
}
.vs-nut-tron .vs-mui-ten { width: 20px; height: 20px; }
.vs-nut-tron:hover { border-color: var(--vs-vien-hover); }
.vs-nut-tron--chinh { border-color: var(--vs-blue); background: var(--vs-blue); color: var(--vs-trang); }
.vs-nut-tron--chinh:hover { border-color: var(--vs-blue-dam); background: var(--vs-blue-dam); }
.vs-nut-tron[aria-hidden="true"] { pointer-events: none; }

/* 5.3 Nhan tren tieu de */
.vs-nhan {
  display: block; margin-bottom: var(--vs-k3);
  font-family: var(--vs-font-nhan); font-size: var(--vs-co-nhan); font-weight: 600;
  letter-spacing: var(--vs-gian-nhan); line-height: var(--vs-dong-nhan);
  color: var(--vs-teal-chu); text-transform: uppercase;
}

/* 5.4 Dau khoi */
.vs-dau-khoi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--vs-k4); margin-bottom: var(--vs-k6); }
.vs-dau-khoi-tieu-de { min-width: 0; }
.vs-dau-khoi-mo-ta { margin-top: var(--vs-k3); max-width: 640px; color: var(--vs-muted); font-size: var(--vs-co-dan); line-height: var(--vs-dong-dan); text-wrap: balance; }
.vs-dau-khoi-hanh-dong { flex-shrink: 0; }
.vs-dau-khoi--giua { flex-direction: column; align-items: center; text-align: center; }
.vs-dau-khoi--giua .vs-dau-khoi-mo-ta { margin-inline: auto; }
@media (min-width: 1024px) {
  .vs-dau-khoi { margin-bottom: var(--vs-k7); }
}

/* 5.5 The */
.vs-the { padding: var(--vs-k5); border-radius: var(--vs-bo-lon); background: var(--vs-ice); }
.vs-the--vien { border: 1px solid var(--vs-line); background: var(--vs-trang); }
.vs-the-anh { overflow: hidden; border-radius: var(--vs-bo-vua); }
.vs-the-anh img { transition: transform var(--vs-t-anh) var(--vs-ease); }
.vs-the-lien-ket { position: relative; }
.vs-the-lien-ket::after { content: ""; position: absolute; inset: 0; }
.vs-the--bam { position: relative; transition: transform var(--vs-t-vua) var(--vs-ease), box-shadow var(--vs-t-vua) var(--vs-ease), border-color var(--vs-t-vua) var(--vs-ease); }
.vs-the--bam:hover, .vs-the--bam:focus-within { transform: translateY(-4px); box-shadow: var(--vs-bong-the-hover); border-color: var(--vs-vien-hover); }
.vs-the--bam:hover .vs-the-anh img, .vs-the--bam:focus-within .vs-the-anh img { transform: scale(1.03); }
@media (min-width: 1024px) {
  .vs-the { padding: var(--vs-k6); }
}

/* 5.6 Tam lon */
.vs-tam { position: relative; overflow: hidden; padding: clamp(24px, 6vw, 96px); border-radius: var(--vs-bo-lon); background: var(--vs-ice); background-image: var(--vs-quang-tam); }

/* 5.7 Chip co bieu tuong */
.vs-chip { display: inline-flex; align-items: center; gap: var(--vs-k2); min-height: var(--vs-nut-tron); padding: 6px 16px 6px 6px; border-radius: var(--vs-bo-vien-thuoc); background: var(--vs-ice); color: var(--vs-ink); font-size: var(--vs-co-nho); font-weight: 500; text-decoration: none; }
a.vs-chip:hover { background: var(--vs-nhan-nen); }
.vs-chip-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vs-trang); color: var(--vs-blue); }
.vs-chip-icon svg { width: 18px; height: 18px; }

/* 5.8 Thanh chon tab */
.vs-tab-thanh { display: inline-flex; max-width: 100%; gap: var(--vs-k1); padding: var(--vs-k2); border-radius: var(--vs-bo-vien-thuoc); background: var(--vs-ice); overflow-x: auto; }
.vs-tab { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-height: var(--vs-nut-tron); padding-inline: var(--vs-k5); border: 0; border-radius: var(--vs-bo-vien-thuoc); background: transparent; color: var(--vs-muted); font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-nho); font-weight: 600; white-space: nowrap; cursor: pointer; }
.vs-tab[aria-selected="true"] { background: var(--vs-trang); color: var(--vs-blue); box-shadow: var(--vs-bong-noi); }

/* 5.9 So lieu lon */
.vs-so-lieu { display: flex; flex-wrap: wrap; gap: var(--vs-k7); padding-bottom: var(--vs-k5); border-bottom: 1px solid var(--vs-line); }
.vs-so-lieu-muc { display: flex; flex-direction: column; gap: var(--vs-k1); }
.vs-so-lieu-so { font-family: var(--vs-font-tieu-de); font-size: var(--vs-co-so-lieu); font-weight: 400; line-height: 1; color: var(--vs-blue); font-variant-numeric: tabular-nums; }
.vs-so-lieu-nhan { font-size: var(--vs-co-chu-thich); font-weight: 500; color: var(--vs-blue); }
.vs-so-lieu-muc:nth-child(even) .vs-so-lieu-so, .vs-so-lieu-muc:nth-child(even) .vs-so-lieu-nhan { color: var(--vs-teal-chu); }