/* ============================================================
   AUTOSALES PRO — THÀNH PHẦN
   Nút · ô nhập · thẻ · dòng · chip · công tắc · mốc vay · tấm kéo ·
   thanh trên · thanh tab · trạng thái rỗng/đang tải.
   Cần nen-tang.css nạp trước.
   ============================================================ */

/* ---------------------------------------------------------
   NÚT
   --------------------------------------------------------- */
.nut{
  height:52px; border:0; border-radius:var(--bo-nut);
  font-weight:700; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:transform var(--nhanh), background var(--nhanh), opacity var(--nhanh);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.nut:active{ transform:scale(.97); }
.nut--chinh{ background:var(--nhan); color:var(--tren-nhan); }
.nut--chinh:active{ background:var(--nhan-dam); }
.nut--phu{ background:var(--nen); color:var(--muc); border:1px solid var(--ke-2); }
.nut--nhe{ background:transparent; color:var(--nhan); font-weight:600; height:auto; }
.nut--rong{ width:100%; }
/* nút phụ nguy hiểm (gói 1A: "Bỏ thay đổi" trong hộp còn thay đổi chưa lưu): chữ + viền đỏ, không phải nút chính */
.nut--vien-do{ background:transparent; color:var(--loi); border:1.5px solid var(--loi); }
.nut--vien-do:active{ background:var(--loi-nhat, rgba(220,38,38,.08)); }
.km-bo-hang{ margin-top:10px; }
.nut[disabled]{ opacity:.4; pointer-events:none; }
.nut svg{ stroke:currentColor; }

/* nút bị khoá khi hết hạn — vẫn bấm được (mở màn gia hạn) */
.nut--khoa{
  background:var(--nen); color:var(--muc-3);
  border:1px dashed var(--ke-2); font-weight:700;
}
.nut--khoa:active{ transform:scale(.99); }
.nut--khoa svg{ stroke:var(--muc-3); }

/* Thanh nút dưới cùng màn (dock) */
.dock{
  display:flex; gap:10px; background:var(--mat);
  border-top:1px solid var(--ke);
  padding:12px var(--le-man) calc(12px + env(safe-area-inset-bottom));
}
.dock .nut--phu{ flex:0 0 86px; }
.dock .nut--chinh{ flex:1; }
.dock--doi .nut{ flex:1 1 0; min-width:0; }
.dock--doc{ flex-direction:column; gap:8px; }
.dock--doc .nut{ flex:0 0 auto; width:100%; }
.dock--doc .nut--nhe{ padding:6px; }

/* ---------------------------------------------------------
   Ô NHẬP
   --------------------------------------------------------- */
.o-nhom{ margin-bottom:14px; }
.o-nhan{ display:block; font-size:12.5px; font-weight:600; color:var(--muc-2); margin:0 2px 6px; }
.o-nhan-phu{ font-style:normal; font-weight:400; color:var(--muc-3); margin-left:4px; }
.o{
  width:100%; height:50px; padding:0 14px;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:var(--bo-o);
  font-family:inherit; font-size:15px; font-weight:600; color:var(--muc);
  transition:border-color var(--nhanh), box-shadow var(--nhanh);
}
.o::placeholder{ color:var(--muc-3); font-weight:400; }
.o:focus{ outline:0; border-color:var(--nhan); box-shadow:0 0 0 3px var(--nhan-nhat); }
.o--tien{ text-align:right; font-size:17px; font-weight:700; }
.o--loi{ border-color:var(--loi); }
.o--loi:focus{ box-shadow:0 0 0 3px var(--loi-nhat); }
.o-loi-chu{ font-size:12px; color:var(--loi); margin:5px 2px 0; }
.o-goi-y{ font-size:12px; color:var(--muc-3); margin:5px 2px 0; }

/* ô select trông giống ô nhập */
.o-chon{ position:relative; }
.o-chon select{
  -webkit-appearance:none; appearance:none;
  width:100%; height:50px; padding:0 40px 0 14px;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:var(--bo-o);
  font-family:inherit; font-size:15px; font-weight:600; color:var(--muc);
}
.o-chon::after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--muc-3); border-bottom:2px solid var(--muc-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* ô tìm kiếm */
.o-tim{
  display:flex; align-items:center; gap:10px;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:var(--bo-o);
  padding:12px 14px; color:var(--muc-3); font-size:14px;
}
.o-tim input{ border:0; background:transparent; font-family:inherit; font-size:14px; color:var(--muc); width:100%; }
.o-tim input:focus{ outline:0; }
.o-tim-xoa{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:0; border-radius:99px;
  background:var(--ke-2); color:var(--muc-3);
}

/* ---------------------------------------------------------
   THẺ + DÒNG
   --------------------------------------------------------- */
.the{
  background:var(--mat); border:1px solid var(--ke);
  border-radius:var(--bo-the); box-shadow:var(--bong); overflow:hidden;
}
.the--dem{ padding:18px; }

.the-nhom{ display:block; }
.the-nhom .the-dong{ border-top:1px solid var(--ke); }
.the-nhom .the-dong:first-child{ border-top:0; }

.the-dong{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; min-height:52px; font-size:13.5px;
}
.the-dong .nhan{ color:var(--muc-2); }
.the-dong .gia-tri{ font-weight:600; text-align:right; }
.the-dong--nhap{ cursor:pointer; }
.the-dong--nhap .gia-tri::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:8px;
  border-right:2px solid var(--muc-3); border-bottom:2px solid var(--muc-3);
  transform:translateY(-2px) rotate(-45deg);
}

/* dòng tổng — nền nhấn nhạt */
.the-tong{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; background:var(--nhan-nhat);
}
.the-tong .nhan{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--nhan-dam); }
.the-tong .gia-tri{ font-size:21px; font-weight:800; color:var(--nhan-dam); }

/* thẻ xe (đầu màn kết quả / màn chọn phiên bản) */
.the-xe .hang{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muc-3); }
.the-xe h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:5px 0 14px; }
.the-xe .cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:14px; }
.the-xe .cap .k{ color:var(--muc-2); }
.the-xe .cap .v{ font-weight:600; white-space:nowrap; }
.the-xe .cap--tot .v{ color:var(--tot); }
.the-xe hr{ border:0; border-top:1px solid var(--ke); margin:9px 0; }
.the-xe .cap--chot{ padding-top:11px; align-items:center; }
.the-xe .cap--chot .k{ font-weight:700; color:var(--muc); font-size:13.5px; line-height:1.25; }
.the-xe .cap--chot .v{ font-size:19px; font-weight:800; }

/* dòng danh sách (chọn dòng xe) */
.ds-dong{
  display:flex; align-items:center; gap:14px; padding:0 16px;
  min-height:68px; border-top:1px solid var(--ke); cursor:pointer;
  transition:background var(--nhanh), transform var(--nhanh) var(--duong-cong);
}
.ds-dong:first-child{ border-top:0; }
.ds-dong:active{ background:var(--nen); transform:scale(.985); }
.ds-dong .anh{ width:52px; height:38px; border-radius:9px; background:#F1F3F6; display:grid; place-items:center; flex:none; overflow:hidden; }
.ds-dong .anh svg{ opacity:.4; }
.ds-dong .anh img{ width:100%; height:100%; object-fit:cover; display:block; }
.ds-dong .ten{ flex:1; min-width:0; }
.ds-dong .ten b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.ds-dong .ten span{ font-size:12.5px; color:var(--muc-3); }
.ds-dong .mui-ten{ color:var(--muc-3); flex:none; }

/* ---------------------------------------------------------
   CHIP / PILL
   --------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:var(--bo-pill);
  background:var(--nhan-nhat); color:var(--nhan-dam);
}
.pill--xam{ background:var(--nen); color:var(--muc-2); }
.pill--tot{ background:var(--tot-nhat); color:var(--tot); }
.pill--canh{ background:var(--canh-nhat); color:var(--canh); }
.pill--loi{ background:var(--loi-nhat); color:var(--loi); }
.pill .cham{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ---------------------------------------------------------
   NÚT TÍCH · CÔNG TẮC · MỐC VAY
   --------------------------------------------------------- */
.tich{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; font-weight:500; }
.tich input{ position:absolute; opacity:0; }
.tich .o-vuong{
  width:22px; height:22px; border-radius:7px; border:2px solid var(--ke-2);
  flex:none; display:grid; place-items:center; transition:var(--nhanh);
}
.tich input:checked + .o-vuong{ background:var(--nhan); border-color:var(--nhan); }
.tich input:checked + .o-vuong::after{
  content:""; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:translateY(-1px) rotate(45deg);
}

/* công tắc gạt */
.gat{ position:relative; width:46px; height:28px; flex:none; }
.gat input{ position:absolute; opacity:0; }
.gat .ray{ position:absolute; inset:0; border-radius:999px; background:var(--ke-2); transition:var(--nhanh); }
.gat .ray::before{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:var(--nhanh);
}
.gat input:checked + .ray{ background:var(--nhan); }
.gat input:checked + .ray::before{ transform:translateX(18px); }

/* ---------------------------------------------------------
   FORM "THÊM DÒNG XE" (xe tự thêm) — dùng chung Desktop + Mobile,
   xem pwa/js/xe-tudo.js. Ảnh 4:3 khớp đúng ảnh xe chính hãng.
   --------------------------------------------------------- */
/* Khung 4:3 bằng đệm % (height:0 + padding-top), KHÔNG dùng aspect-ratio: ô này là
   <button>, ảnh height:100% → Safari < 16.4 tính sai cao (cùng lỗi thẻ xe trang chủ
   iOS 16.1). 75% bề rộng trừ 2px viền trên/dưới = đúng 4:3 cả viền như trước. */
.xt-anh-o{
  position:relative; display:block; width:100%; height:0; padding:calc(75% - 2px) 0 0;
  background:var(--nen); border:1px dashed var(--ke-2); border-radius:var(--bo-o);
  overflow:hidden; cursor:pointer; font-family:inherit;
}
.xt-anh-o img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.xt-anh-rong{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  font-size:12.5px; color:var(--muc-3); text-align:center; padding:0 16px;
}
/* Mỗi phiên bản 2 hàng: Tên riêng 1 hàng đủ rộng để đọc hết chữ, Giá/Số
   chỗ/Xoá xuống hàng dưới — trước đây nhét cả 4 ô 1 hàng trong khung hẹp
   (.tam mặc định 360px, xem thanh-phan.css) nên chữ bị cắt gần hết, kể cả
   trên desktop (form này dùng chung, không tự nới theo màn hình rộng). */
.xt-pb-dong{ margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--ke-2); }
.xt-pb-dong:last-of-type{ margin-bottom:0; padding-bottom:0; border-bottom:0; }
.xt-pb-dong .xt-pb-ten{ width:100%; margin-bottom:8px; }
.xt-pb-hang2{ display:flex; gap:8px; align-items:center; }
.xt-pb-gia-o{ flex:1; min-width:0; position:relative; }
.xt-pb-gia-o input{ width:100%; padding-right:28px; }
.xt-pb-gia-o span{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--muc-3); pointer-events:none; }
.xt-pb-hang2 select.o{ flex:none; width:80px; min-width:0; padding:0 8px; }
.xt-pb-xoa{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:0; background:var(--loi-nhat); color:var(--loi); border-radius:50%; font-size:14px; cursor:pointer;
}
.xt-pb-them{
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  background:none; border:0; color:var(--nhan); font-weight:600; font-size:13px; cursor:pointer; padding:4px 0; font-family:inherit;
}

/* segmented — dùng cho tỉnh (HN/HCM/Tỉnh) và mốc vay */
.doan{ display:flex; gap:4px; background:#EEEFF3; border-radius:12px; padding:4px; }
.doan button{
  flex:1; border:0; background:transparent; font-family:inherit; font-weight:600; font-size:13px;
  color:var(--muc-2); padding:9px 6px; border-radius:9px; cursor:pointer; transition:var(--nhanh);
  line-height:1.2;
}
.doan button.chon{ background:#fff; color:var(--muc); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.doan button small{ display:block; font-weight:500; font-size:10.5px; color:var(--muc-3); margin-top:1px; }

/* mốc vay — hàng nút tròn */
.moc-vay{ display:flex; gap:8px; }
.moc-vay button{
  flex:1; border:1px solid var(--ke-2); background:var(--mat); border-radius:12px;
  font-family:inherit; font-weight:700; font-size:14px; color:var(--muc-2);
  padding:12px 0; cursor:pointer; transition:var(--nhanh);
}
.moc-vay button.chon{ border-color:var(--nhan); background:var(--nhan-nhat); color:var(--nhan-dam); }

/* ---------------------------------------------------------
   THANH TRÊN
   --------------------------------------------------------- */
.thanh-tren{
  background:var(--mat); border-bottom:1px solid var(--ke);
  display:flex; align-items:center; gap:6px;
  padding:4px 8px 12px; min-height:50px;
}
.thanh-tren .ic{ width:40px; height:40px; display:grid; place-items:center; flex:none; background:none; border:0; cursor:pointer; }
.thanh-tren .ic svg{ stroke:var(--muc); }
.thanh-tren .tieu-de{ font-size:17px; font-weight:700; flex:1; }
.thanh-tren .tieu-de--giua{ text-align:center; padding-right:40px; }
.thanh-tren .xo-xuong{ display:inline-flex; align-items:center; gap:5px; }

/* ---------------------------------------------------------
   THANH TAB DƯỚI
   --------------------------------------------------------- */
/* Cao 72px CỘNG phần đệm thanh gạt iPhone — trước đây height:72px đã gồm cả
   padding-bottom (box-sizing:border-box) nên khi app cài ra màn hình chính,
   icon + chữ bị ép còn ~38px. */
.thanh-tab{
  height:calc(72px + env(safe-area-inset-bottom)); display:flex; background:var(--mat);
  border-top:1px solid var(--ke); padding-bottom:env(safe-area-inset-bottom);
}
.thanh-tab a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:12px; font-weight:600; color:var(--muc-3); text-decoration:none;
}
.thanh-tab a.dang{ color:var(--nhan); }
.thanh-tab a svg{ width:26px; height:26px; stroke:currentColor; }

/* ---------------------------------------------------------
   TẤM KÉO LÊN (bottom sheet)
   --------------------------------------------------------- */
.tam-nen{ position:fixed; inset:0; background:rgba(16,19,25,.35); opacity:0; pointer-events:none; transition:opacity var(--vua); z-index:90; }
.tam-nen.mo{ opacity:1; pointer-events:auto; }
.tam{
  position:fixed; left:50%; top:50%; z-index:91;
  width:calc(100% - 52px); max-width:360px;
  max-height:calc(100% - 88px); overflow-y:auto;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:20px;
  padding:20px 0 18px;
  transform:translate(-50%,-50%) scale(.9); opacity:0; pointer-events:none;
  transition:transform var(--vua) var(--duong-cong), opacity var(--nhanh);
  box-shadow:0 2px 6px rgba(16,19,25,.06), 0 24px 48px -16px rgba(16,19,25,.32);
}
/* ☠️ THIẾU pointer-events:none ở trên từng khiến .tam (dù đã "đóng", opacity:0)
   vẫn chặn chạm ở khoảng giữa màn hình MÃI MÃI sau lần đầu mở bất kỳ hộp
   thoại nào trong phiên — vì .tam dùng chung 1 phần tử cho mọi hộp thoại,
   không bao giờ bị gỡ khỏi DOM. Đây là nguyên nhân chính khiến rất nhiều
   chạm sau đó "không ăn" (nhấn vô là tắt / lưu không được). */
.tam.mo{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.tam .tam-tieu-de{ font-size:16px; font-weight:700; padding:0 20px 12px; text-align:center; }
.tam .tam-muc{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; font-size:15px; border-top:1px solid var(--ke); cursor:pointer;
}
.tam .tam-muc:first-of-type{ border-top:0; }
.tam .tam-muc.chon{ color:var(--nhan); font-weight:600; }

/* ---------------------------------------------------------
   NHÃN MỤC (trên các khối trong màn)
   --------------------------------------------------------- */
.nhan-muc{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muc-3); margin:20px var(--le-man) 9px;
}
.nhan-muc .pill{ letter-spacing:0; text-transform:none; }

/* ---------------------------------------------------------
   TRẠNG THÁI RỖNG / ĐANG TẢI
   --------------------------------------------------------- */
.rong{ text-align:center; padding:56px 30px; color:var(--muc-3); }
.rong svg{ opacity:.35; margin-bottom:12px; }
.rong b{ display:block; color:var(--muc-2); font-size:15px; font-weight:600; margin-bottom:4px; }
.rong span{ font-size:13px; }

.mo-nhap{ background:linear-gradient(90deg,var(--ke) 25%,#F4F5F8 37%,var(--ke) 63%); background-size:400% 100%; animation:troi 1.3s ease infinite; border-radius:8px; }
@keyframes troi{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }