/* ==========================================================================
   Compare mode ("So sanh thang truoc"): indigo header row, rowspan category
   blocks with an accent crown, group dividers, and the move badges
   (up/down/flat/N-A/text) that answer "how far did it move".
   ========================================================================== */

.vb-table--compare {
  min-width: 900px;
}

.vb-table--compare th,
.vb-table--compare td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

.vb-table--compare thead th {
  background: var(--accent-indigo);
  color: var(--accent-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  text-align: right;
  vertical-align: bottom;
  border-bottom: 0;
}

.vb-table--compare thead th:nth-child(1),
.vb-table--compare thead th:nth-child(2) {
  text-align: left;
}

.vb-table--compare thead th:nth-child(6) {
  text-align: center;
  min-width: 5.5rem;
}

/* Category block: sticky, accent-crowned, groups the region rows beneath. */
.vb-table--compare tbody th.compare-category {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-elevated);
  color: var(--text-primary);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  min-width: 7.5rem;
  border-right: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-indigo);
}

.vb-table--compare tbody tr:hover th.compare-category,
.vb-table--compare tbody tr:hover td {
  background: var(--surface-hover);
}

.vb-table--compare tbody tr.is-group-end th,
.vb-table--compare tbody tr.is-group-end td {
  border-bottom-color: var(--border-default);
}

.vb-table--compare .compare-region {
  text-align: left;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 9.5rem;
}

.vb-table--compare .compare-delta-cell {
  min-width: 7rem;
}

.vb-table--compare .compare-move-cell {
  text-align: center;
  min-width: 5.5rem;
}

/* ------------------------------------------------------ movement badges */

.move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.move--up {
  background: var(--status-advance);
  color: var(--surface-canvas);
}

.move--down {
  background: var(--status-regress);
  color: var(--surface-canvas);
}

.move--flat {
  background: var(--surface-raise);
  color: var(--text-secondary);
}

.move--na {
  width: auto;
  height: auto;
  padding: 3px var(--space-2);
  background: var(--pill-na-bg);
  color: var(--pill-na-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}

.move--text {
  width: auto;
  height: auto;
  padding: 3px var(--space-2);
  background: var(--pill-current-bg);
  color: var(--pill-current-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.move--none {
  background: transparent;
  color: var(--text-quaternary);
  font-weight: 500;
}