/* =========================================================================
   Ô TÔ CẦN THƠ — Giao diện ba công cụ tính toán

   Dùng lại biến màu và phông của oto.css, không khai lại. Bố cục hai phần:
   phần khai thông tin bên trên, phần kết quả dính dưới đáy màn hình trên điện
   thoại để khách vừa sửa số vừa thấy tổng tiền đổi theo.
   ========================================================================= */

.oto-cc{
  display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:28px;
  align-items:start; margin:32px 0 40px;
}

@media (max-width:1180px){
  .oto-cc{ grid-template-columns:minmax(0,1fr) 380px; gap:22px; }
}

@media (max-width:980px){
  .oto-cc{ grid-template-columns:1fr; gap:20px; }
}

/* --- Phần khai thông tin ------------------------------------------------- */

.oto-cc-form{ display:grid; gap:18px; min-width:0; }

.oto-cc-nhom{
  background:var(--oto-nen); border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo); padding:20px 20px 22px;
}

.oto-cc-nhom-ten{
  font-size:15px; font-weight:700; margin:0 0 16px;
  color:var(--oto-navy); letter-spacing:-.01em;
  padding-bottom:12px; border-bottom:1px solid var(--oto-vien);
}

.oto-cc-luoi{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px;
}

@media (max-width:620px){
  .oto-cc-luoi{ grid-template-columns:1fr; }
}

.oto-cc-o{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.oto-cc-o-rong{ grid-column:1 / -1; }

.oto-cc-nhan{
  font-size:13px; font-weight:600; color:var(--oto-chu);
  line-height:1.35;
}

.oto-cc-ghi{
  font-size:12px; color:var(--oto-chu-nhat); line-height:1.5;
}

.oto-cc-select,
.oto-cc-input{
  width:100%; box-sizing:border-box;
  font-family:var(--oto-font); font-size:15px; font-weight:500;
  color:var(--oto-chu); background:var(--oto-nen);
  border:1px solid var(--oto-vien); border-radius:var(--oto-bo-nho);
  padding:10px 12px; min-height:42px;
  transition:border-color var(--oto-chuyen), box-shadow var(--oto-chuyen);
}

.oto-cc-select{
  appearance:none; -webkit-appearance:none; padding-right:34px; 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 13px center;
}

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

/* Ô nhập số có hậu tố đơn vị dính bên trong khung. */
.oto-cc-nhap{ position:relative; display:block; }
.oto-cc-nhap .oto-cc-input{ padding-right:58px; font-variant-numeric:tabular-nums; }

.oto-cc-dv{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:600; color:var(--oto-chu-mo);
  pointer-events:none;
}

/* --- Nhóm nút chọn một trong hai ---------------------------------------- */

.oto-cc-doi{
  display:flex; gap:0; border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo-nho); overflow:hidden; background:var(--oto-nen-2);
}

.oto-cc-doi-nut{
  flex:1 1 0; min-width:0; min-height:42px;
  font-family:var(--oto-font); font-size:14px; font-weight:600;
  color:var(--oto-chu-nhat); background:transparent;
  border:0; cursor:pointer; padding:10px 8px;
  transition:background var(--oto-chuyen), color var(--oto-chuyen);
}

.oto-cc-doi-nut + .oto-cc-doi-nut{ border-left:1px solid var(--oto-vien); }
.oto-cc-doi-nut:hover{ background:var(--oto-nen-3); }

.oto-cc-doi-nut.chon{
  background:var(--oto-navy); color:#fff;
}

.oto-cc-doi-nut:focus-visible{
  outline:2px solid var(--oto-navy-3); outline-offset:-2px;
}

/* --- Phần kết quả ------------------------------------------------------- */

.oto-cc-kq{
  position:sticky; top:96px; min-width:0;
  background:var(--oto-nen); border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo); overflow:hidden; box-shadow:var(--oto-bong);
}

@media (max-width:980px){
  .oto-cc-kq{ position:static; }
}

.oto-cc-kq-dau{
  background:var(--oto-navy); color:#fff; padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:4px;
}

.oto-cc-kq-nhan{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--oto-vang);
}

.oto-cc-kq-so{
  font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:#fff;
}

.oto-cc-kq-phu{
  font-size:13px; line-height:1.55; color:var(--oto-trang-mo); margin-top:2px;
}

.oto-cc-kq-phu b{ color:#fff; font-weight:700; }

/* --- Bảng chi tiết ------------------------------------------------------ */

.oto-cc-bang{
  width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed;
}

.oto-cc-bang th,
.oto-cc-bang td{
  padding:12px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--oto-vien);
}

/* Cột nhãn phải giữ nguyên display:table-cell, nếu đặt display:flex thì ô
   thoát khỏi bố cục bảng và width dưới đây mất tác dụng — cột nhãn bị bóp
   còn hai chữ một dòng. */
.oto-cc-bang th{
  font-weight:600; color:var(--oto-chu); width:62%;
}

.oto-cc-bang th small{
  display:block; margin-top:3px;
  font-size:11.5px; font-weight:400; color:var(--oto-chu-nhat); line-height:1.5;
}

.oto-cc-bang td{
  text-align:right; font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--oto-chu);
}

.oto-cc-bang tr:last-child th,
.oto-cc-bang tr:last-child td{ border-bottom:0; }

.oto-cc-h-tong th,
.oto-cc-h-tong td{
  background:var(--oto-nen-2); border-top:2px solid var(--oto-navy);
  font-size:16px; font-weight:800; color:var(--oto-navy);
}

.oto-cc-h-tru td{ color:var(--oto-chu-nhat); }

/* --- Khối trả góp ------------------------------------------------------- */

.oto-cc-gop:not(:empty){
  padding:20px 18px 22px; background:var(--oto-nen-2);
  border-top:1px solid var(--oto-vien);
}

.oto-cc-gop h3{
  font-size:14px; font-weight:700; margin:0 0 14px; color:var(--oto-navy);
}

.oto-cc-gop-luoi{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}

.oto-cc-gop-o{
  display:flex; flex-direction:column; gap:2px;
  background:var(--oto-nen); border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo-nho); padding:10px 12px; min-width:0;
}

.oto-cc-gop-o span{ font-size:11.5px; color:var(--oto-chu-nhat); font-weight:500; }

.oto-cc-gop-o strong{
  font-size:14.5px; font-weight:700; color:var(--oto-navy);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.oto-cc-gop-ghi{
  font-size:12px; line-height:1.6; color:var(--oto-chu-nhat); margin:14px 0 0;
}

/* --- Dòng cảnh báo ------------------------------------------------------ */

.oto-cc-canh:not(:empty){
  margin:0; padding:16px 18px; font-size:12.5px; line-height:1.65;
  color:var(--oto-chu-nhat); background:var(--oto-nen-3);
  border-top:1px solid var(--oto-vien);
}

/* --- Ba nút liên hệ ----------------------------------------------------- */

.oto-cc-cta{
  padding:18px 18px 22px; border-top:1px solid var(--oto-vien);
}

.oto-cc-cta p{
  margin:0 0 12px; font-size:13.5px; font-weight:600; color:var(--oto-navy);
  line-height:1.5;
}

.oto-cc-cta-nut{ display:grid; gap:8px; }

.oto-cc-cta-nut .oto-btn{
  width:100%; box-sizing:border-box; justify-content:center; text-align:center;
  font-size:14px;
}

/* --- Ghi đè cuối: theme nạp bảng kiểu nội tuyến sau file này ------------
   Cùng chuyện đã gặp với oto.css — quy tắc màu chữ thẻ a và nền button của
   theme.json có cùng độ ưu tiên nên thắng ở vòng cuối. Nâng độ ưu tiên ở đây.
   ----------------------------------------------------------------------- */

.oto-cc .oto-cc-doi .oto-cc-doi-nut{ background:transparent; color:var(--oto-chu-nhat); }
.oto-cc .oto-cc-doi .oto-cc-doi-nut:hover{ background:var(--oto-nen-3); }
.oto-cc .oto-cc-doi .oto-cc-doi-nut.chon{ background:var(--oto-navy); color:#fff; }
.oto-cc-kq .oto-cc-kq-dau .oto-cc-kq-so{ color:#fff; }