/* =====================================================================
   THẺ XE DÙNG CHUNG — đi kèm assets/the-xe.js

   Cả index.html lẫn khach.html cùng nạp file này, nên một chiếc xe hiện
   ra giống hệt nhau ở hai màn hình. Xem ghi chú đầu the-xe.js.

   Màu lấy từ biến của trang chủ (`--card`, `--line`, `--tx`…) nên thẻ tự
   hợp với nền sáng của màn khách và nền tối của màn sale, không cần hai
   bộ màu.
   ===================================================================== */

.xe-luoi{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:10px; align-content:start;
}

/* KHÔNG đặt overflow:hidden ở thẻ. Đó là lỗi đã làm cả màn hình khách
   trống trơn suốt nhiều ngày: `overflow:hidden` biến thẻ thành vùng cuộn,
   mà vùng cuộn thì chiều cao tối thiểu tự động bị đặt về 0. Ô ảnh bên
   trong dùng `aspect-ratio` nên không có chiều cao "nội dung" để chống
   đỡ, thế là cả thẻ co lại còn 82px. Bo góc ảnh làm ở chính ô ảnh. */
.xe-the{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh);
  cursor:pointer; display:flex; flex-direction:column;
  transition:transform .12s ease, border-color .12s ease;
}
.xe-the:hover{border-color:var(--acc)}
.xe-the:active{transform:scale(.985)}

.xe-anh{
  aspect-ratio:16/10; background:var(--card2); overflow:hidden;
  display:grid; place-items:center; flex:0 0 auto;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
.xe-anh img{width:100%; height:100%; object-fit:cover; display:block}

.xe-noi{padding:13px 16px 15px}
.xe-the h3{font-size:21px; margin:0 0 9px; line-height:1.2; font-weight:700}

/* MỘT hàng chip, tuyệt đối không xuống dòng. Chip co chữ lại khi thẻ hẹp
   chứ không gãy hàng — gãy một hàng là mỗi thẻ cao thêm ~34px, nhân với
   mười bốn thẻ thì mất gần một màn hình. */
.xe-chip{display:flex; gap:6px; flex-wrap:nowrap; align-items:center; min-width:0}
.xe-nhan{
  display:inline-block; background:var(--card2); border:1px solid var(--line2);
  color:var(--tx2); border-radius:20px;
  margin:0; flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(12px,1.05vw,13.5px); padding:5px 10px; font-weight:600;
}
.xe-nhan.dien{color:var(--ok); border-color:rgba(18,133,92,.4)}
.xe-nhan.phev{color:var(--warn); border-color:rgba(168,106,16,.4)}

.xe-gia{font-size:15px; color:var(--tx3); margin-top:11px}
.xe-gia small{
  display:block; font-size:11.5px; letter-spacing:1.6px; font-weight:700;
  text-transform:uppercase; margin-bottom:1px;
}
.xe-gia b{
  display:block; font-size:23px; color:var(--acc); font-weight:800;
  letter-spacing:-.4px; line-height:1.2;
}

/* Chỗ cắm riêng của màn sale — giá lăn bánh, cảnh báo nội bộ. Màn khách
   không truyền gì vào nên khối này không tồn tại. */
.xe-phu{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  font-size:13px; color:var(--tx3); line-height:1.5;
}
.xe-phu b{color:var(--tx2)}

@media (max-width:640px){
  .xe-luoi{grid-template-columns:1fr; gap:8px}
}