/* CSS riêng của app: chỉ bố cục. */
.tai-khoan {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.form-chi {
  display: grid;
  gap: var(--space-3);
}

.nhom-nut {
  display: grid;
  gap: var(--space-2);
}

.nhom-nut .saly-btn,
.form-chi .saly-input,
#loc-thang {
  min-height: 48px;
  font-size: 16px;
  width: 100%;
}

.thong-bao:empty {
  display: none;
}

.saly-result--highlight {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0;
}

.tong-tien {
  font-size: 1.75rem;
}

.danh-sach-chi {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.dong-chi {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--brand-border);
}

.dong-chi__noi-dung {
  overflow-wrap: anywhere;
}

.dong-chi__tien {
  text-align: right;
  white-space: nowrap;
}

.dong-chi__ngay {
  grid-column: 1 / -1;
}

.dong-chi__nut {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
}

.dong-chi__nut .saly-btn {
  min-height: 48px;
  flex: 1;
}

@media (min-width: 1024px) {
  .nhom-nut {
    grid-template-columns: auto auto;
    justify-content: start;
  }

  .dong-chi__nut .saly-btn {
    flex: 0 0 auto;
  }
}