/* Responsive cards use the existing cells so prices have only one source. */
@media (max-width: 480px) {
  .price-card-table,
  #cach-doc-bao-gia .price-card-table {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    border: 0;
    background: transparent;
  }

  .price-card-table caption {
    display: block;
    padding-inline: 0;
  }

  /* Keep the column names accessible to assistive technologies. */
  .price-card-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .price-card-table tbody {
    display: grid;
    gap: var(--ds-space-1, 0.5rem);
  }

  .price-card-table tbody tr {
    display: grid;
    min-inline-size: 0;
    gap: 0.25rem;
    padding: var(--ds-space-2, 1rem);
    border: 1px solid var(--ds-line, #d9d3c8);
    border-radius: var(--ds-radius-md, 0.625rem);
    background: var(--ds-white, #fff);
  }

  .price-card-table tbody :is(th, td),
  .price-card-table tbody :is(th, td):last-child,
  #cach-doc-bao-gia .price-card-table tbody :is(th, td):last-child {
    display: block;
    min-inline-size: 0;
    padding: 0;
    color: var(--ds-ink, #3a3f44);
    text-align: start;
    white-space: normal;
  }

  .price-card-table tbody th {
    font-size: var(--ds-type-body, 1rem);
    font-weight: 700;
  }

  .price-card-table td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    color: var(--ds-muted, #575d60);
    font-size: var(--ds-type-caption, 0.8125rem);
    font-weight: 600;
    white-space: nowrap;
  }

  .price-card-table td[data-label] {
    padding-block-start: 0.25rem;
  }
}