/* =====================================================================
   CHÍNH SÁCH CỦA TÔI
   ---------------------------------------------------------------------
   Dùng lại bộ biến màu của styles.css. Đừng đặt màu mới ở đây — tỉ lệ
   tương phản đã được ghi rõ bên đó.

   Danh sách 25 xe, GẤP LẠI hết. Sale chỉ bán 2–3 dòng nên mở ra cái nào
   cần sửa, không phải cuộn qua 25 khối ô nhập. Trên điện thoại đây là
   khác biệt giữa dùng được và bỏ cuộc.
   ===================================================================== */

.cst-ds { display: flex; flex-direction: column; gap: 8px }

.cst-xe {
  background: var(--card, #1a2230);
  border: 1px solid var(--line, #303b4c);
  border-radius: 10px;
  overflow: hidden;
}
.cst-xe.da-sua { border-color: var(--warn, #e3ad60) }
.cst-xe.mo     { border-color: var(--acc2, #5cb2ff) }

.cst-dau {
  width: 100%;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: none; border: 0; color: var(--tx, #eaeef6);
  font: inherit; text-align: left; cursor: pointer;
  padding: 12px 14px;
}
.cst-dau:hover { background: var(--card2, #26303f) }
.cst-dau:focus-visible { outline: 2px solid var(--acc2, #5cb2ff); outline-offset: -2px }

.cst-ten { font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0 }
.cst-tt  { font-size: 12.5px; color: var(--tx3, #93a0b2); font-variant-numeric: tabular-nums }

.cst-than {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line, #303b4c);
}

/* Hai cột trên màn rộng, một cột trên điện thoại. */
.cst-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.cst-luoi input,
.cst-than input[type="text"] {
  width: 100%;
  background: var(--bg, #0c1119);
  color: var(--tx, #eaeef6);
  border: 1px solid var(--line2, #3f4b5e);
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
  /* 16px để iPhone không tự phóng to trang khi chạm vào ô nhập */
  font-size: 16px;
  outline: none;
}
.cst-luoi input:focus,
.cst-than input[type="text"]:focus { border-color: var(--acc2, #5cb2ff) }

.cst-tick {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 14px;
  font-size: 13.5px; color: var(--tx2, #aeb9ca); cursor: pointer;
}
.cst-tick input { width: 17px; height: 17px; accent-color: var(--acc, #0f6fd0) }

.cst-bao { margin: 12px 0 0 }
.cst-bao.loi { color: var(--bad, #ea7b70) }

@media (max-width: 560px) {
  .cst-tt { flex-basis: 100%; }
}