/* =========================================================================
   Ô TÔ CẦN THƠ — Bảng giá lăn bánh và bảng so sánh tầm giá
   Dùng lại biến màu, phông và lớp .oto-cc-sr của hai file kia.
   ========================================================================= */

.oto-bg{ margin:28px 0 36px; }

/* --- Thanh lọc ---------------------------------------------------------- */

.oto-bg-loc{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:12px;
  background:var(--oto-nen-2); border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo); padding:16px 18px;
}

@media (max-width:860px){ .oto-bg-loc{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .oto-bg-loc{ grid-template-columns:1fr; } }

.oto-bg-loc-o{ display:flex; flex-direction:column; gap:5px; min-width:0; }

.oto-bg-loc-o > span{
  font-size:12.5px; font-weight:600; color:var(--oto-chu-nhat);
}

.oto-bg-loc input,
.oto-bg-loc select{
  width:100%; box-sizing:border-box; min-height:40px;
  font-family:var(--oto-font); font-size:14.5px; font-weight:500;
  color:var(--oto-chu); background:var(--oto-nen);
  border:1px solid var(--oto-vien); border-radius:var(--oto-bo-nho);
  padding:9px 11px;
}

.oto-bg-loc select{
  appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

.oto-bg-loc input:focus-visible,
.oto-bg-loc select:focus-visible{
  outline:none; border-color:var(--oto-navy-3);
  box-shadow:0 0 0 3px rgba(27,53,87,.13);
}

.oto-bg-dem{
  margin:12px 0 0; font-size:13px; font-weight:600; color:var(--oto-chu-nhat);
}

/* --- Bảng --------------------------------------------------------------- */

.oto-bg-cuon{
  margin:16px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--oto-vien); border-radius:var(--oto-bo);
}

.oto-bg-bang{
  width:100%; min-width:720px; border-collapse:collapse; font-size:14.5px;
}

.oto-bg-bang thead th{
  position:sticky; top:0; z-index:2;
  background:var(--oto-navy); color:#fff; font-weight:600; font-size:13px;
  text-align:left; padding:12px 14px; white-space:nowrap;
}

.oto-bg-sx{ cursor:pointer; user-select:none; }
.oto-bg-sx::after{ content:'↕'; opacity:.45; margin-left:6px; font-size:11px; }
.oto-bg-sx[aria-sort="ascending"]::after{ content:'↑'; opacity:1; color:var(--oto-vang); }
.oto-bg-sx[aria-sort="descending"]::after{ content:'↓'; opacity:1; color:var(--oto-vang); }
.oto-bg-sx:hover{ background:var(--oto-navy-2); }
.oto-bg-sx:focus-visible{ outline:2px solid var(--oto-vang); outline-offset:-2px; }

.oto-bg-bang tbody th,
.oto-bg-bang tbody td{
  padding:11px 14px; border-top:1px solid var(--oto-vien);
  text-align:left; vertical-align:middle; line-height:1.45;
}

.oto-bg-bang tbody tr:nth-child(even){ background:var(--oto-nen-2); }
.oto-bg-bang tbody tr:hover{ background:var(--oto-nen-3); }

.oto-bg-bang tbody th{ font-weight:600; }

.oto-bg-bang tbody th a{
  color:var(--oto-navy); text-decoration:none; font-weight:700;
}
.oto-bg-bang tbody th a:hover{ color:var(--oto-do); text-decoration:underline; }

.oto-bg-bang tbody th small{
  display:block; font-size:11.5px; font-weight:400; color:var(--oto-chu-mo);
}

.oto-bg-so{
  text-align:right !important; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.oto-bg-manh{ font-weight:700; color:var(--oto-navy); }

/* Dạng số: đầy đủ mặc định, rút gọn chỉ hiện trên điện thoại. */
.oto-bg-ngan{ display:none; }
.oto-bg-mo{ color:var(--oto-chu-nhat); font-size:13px; }

.oto-bg-nhan-dien{
  display:inline-block; margin-left:5px; padding:1px 7px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:#0A6B3D; background:#DFF5E8; border-radius:99px; vertical-align:1px;
}

.oto-bg-nut{ width:1%; white-space:nowrap; }

.oto-bg-bao{
  display:inline-block; padding:6px 13px; border-radius:99px;
  font-size:12.5px; font-weight:700; text-decoration:none;
  color:#fff; background:var(--oto-do);
  transition:background var(--oto-chuyen);
}
.oto-bg-bao:hover{ background:var(--oto-do-dam); }

.oto-bg-trong{
  margin:18px 0 0; padding:18px; text-align:center;
  background:var(--oto-nen-2); border:1px dashed var(--oto-vien);
  border-radius:var(--oto-bo); color:var(--oto-chu-nhat); font-size:14px;
}

.oto-bg-ghi{
  margin:14px 0 0; font-size:12.5px; line-height:1.65; color:var(--oto-chu-nhat);
}

/* --- So sánh theo tầm giá ----------------------------------------------- */

.oto-bg-ss{ margin:28px 0 36px; }

.oto-bg-tam{ margin:0 0 36px; }

.oto-bg-tam h3{
  margin:0 0 6px; font-size:20px; font-weight:700; color:var(--oto-navy);
  padding-left:13px; border-left:4px solid var(--oto-do);
}

.oto-bg-tam-mo{
  margin:0; font-size:13.5px; color:var(--oto-chu-nhat); padding-left:17px;
}

.oto-bg-bang-ss{ min-width:640px; }

.oto-bg-tam-nut{
  display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0;
}

/* --- Dải số liệu -------------------------------------------------------- */

.oto-bg-solieu{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  margin:24px 0 28px;
}

.oto-bg-solieu-o{
  display:flex; flex-direction:column; gap:3px;
  background:var(--oto-navy); border-radius:var(--oto-bo);
  padding:18px 18px 20px; min-width:0;
}

.oto-bg-solieu-o strong{
  font-size:25px; font-weight:800; line-height:1.15; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}

.oto-bg-solieu-o span{
  font-size:12.5px; line-height:1.4; color:var(--oto-vang-nhat);
}

/* --- Ghi đè cuối: theme nạp bảng kiểu nội tuyến sau file này ------------- */

.oto-bg .oto-bg-bang tbody th a{ color:var(--oto-navy); }
.oto-bg .oto-bg-bang tbody th a:hover{ color:var(--oto-do); }
.oto-bg .oto-bg-nut .oto-bg-bao{ color:#fff; background:var(--oto-do); }
.oto-bg .oto-bg-nut .oto-bg-bao:hover{ background:var(--oto-do-dam); }
.oto-bg-solieu .oto-bg-solieu-o strong{ color:#fff; }

/* --- Điện thoại: bỏ bớt cột phụ -----------------------------------------
   Bảng để nguyên 6 cột thì trên màn 375px cột "lăn bánh" — con số khách vào
   trang để xem — nằm ngoài màn hình, phải vuốt ngang mới thấy. Ẩn cột phụ đi
   là ba cột đáng giá nhất vừa đúng khung, không cần vuốt.
   Tên xe vẫn là liên kết nên không mất đường vào trang chi tiết khi bỏ nút.
   ----------------------------------------------------------------------- */

@media (max-width:620px){

  /* width:100% + table-layout:fixed để bảng không thể rộng hơn khung chứa.
     Thiếu table-layout:fixed thì trình duyệt vẫn nới cột theo nội dung và cột
     cuối bị đẩy khuất, dù min-width đã bỏ. */
  .oto-bg-bang{ min-width:0; width:100%; table-layout:fixed; font-size:13px; }

  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(1){ width:40%; }
  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(3),
  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(4){ width:30%; }

  .oto-bg-bang-ss tr > *:nth-child(1){ width:40%; }
  .oto-bg-bang-ss tr > *:nth-child(4),
  .oto-bg-bang-ss tr > *:nth-child(5){ width:30%; }

  .oto-bg-so{ white-space:normal; }

  .oto-bg-bang thead th,
  .oto-bg-bang tbody th,
  .oto-bg-bang tbody td{ padding:10px 9px; }

  /* Bảng giá: ẩn Phân khúc (2), Chênh (5) và nút Báo giá (6) */
  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(2),
  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(5),
  .oto-bg-bang:not(.oto-bg-bang-ss) tr > *:nth-child(6){ display:none; }

  /* Bảng so sánh: ẩn Hãng (2), Kiểu dáng (3) và Số bản (6) */
  .oto-bg-bang-ss tr > *:nth-child(2),
  .oto-bg-bang-ss tr > *:nth-child(3),
  .oto-bg-bang-ss tr > *:nth-child(6){ display:none; }

  .oto-bg-dai{ display:none; }
  .oto-bg-ngan{ display:inline; }

  .oto-bg-bang thead th{ font-size:11.5px; white-space:normal; line-height:1.3; }
  .oto-bg-bang tbody th a{ font-size:14px; }
}