/* ============================================================
   AUTOSALES PRO — KIỂU RIÊNG TỪNG MÀN
   Cần nen-tang.css + thanh-phan.css + khung.css nạp trước.
   ============================================================ */

/* ---------- Chọn hãng (lần đầu) ---------- */
.ch-than{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 24px 20px; }
/* Logo mở app = chính icon ngoài màn hình chính (pwa/icon/icon-192.png),
   đổi 14/09/2026 sang bộ nhận diện "Sổ báo giá xe". */
.ch-logo{ width:72px; height:72px; border-radius:20px; overflow:hidden; box-shadow:0 12px 28px -10px rgba(37,99,235,.5); }
.ch-logo img{ display:block; width:100%; height:100%; }
.ch-tit{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin:16px 0 6px; }
.ch-mo{ font-size:13.5px; color:var(--muc-2); line-height:1.55; max-width:300px; }
.ch-luoi{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; width:100%; margin-top:26px; }
.ch-luoi button{
  aspect-ratio:1; border:1.5px solid var(--ke-2); border-radius:14px; background:var(--mat);
  font-family:inherit; font-weight:700; font-size:13.5px; color:var(--muc); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:var(--nhanh);
}
.ch-luoi button span{ font-size:10px; font-weight:500; color:var(--muc-3); }
.ch-luoi button.chon{ border-color:var(--nhan); background:var(--nhan-nhat); color:var(--nhan-dam); }
.ch-luoi button[disabled]{ opacity:.5; }

/* ---------- Trang chủ ---------- */
.tc-nhanh{
  display:flex; align-items:center; gap:13px; width:calc(100% - 32px);
  margin:14px 16px 0; padding:14px 15px;
  background:var(--nhan); color:var(--tren-nhan);
  border:0; border-radius:var(--bo-the); font-family:inherit; cursor:pointer; text-align:left;
  box-shadow:0 8px 22px -10px rgba(37,99,235,.5);
}
.tc-nhanh:active{ transform:scale(.99); }
.tc-nhanh-ic{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none; }
.tc-nhanh-ic svg{ stroke:#fff; }
.tc-nhanh-chu{ flex:1; }
.tc-nhanh-chu b{ display:block; font-size:15px; font-weight:700; }
.tc-nhanh-chu span{ font-size:12px; opacity:.85; }
.tc-nhanh > svg{ stroke:#fff; opacity:.85; flex:none; }

/* ---------- Chip xe đang tính (màn máy tính) ---------- */
.mt-xe-chip{
  display:block; margin:14px var(--le-man) 0;
}
.mt-xe-chon{
  display:block; width:100%; min-width:0; padding:13px 14px 14px;
  border:1px solid var(--ke-2); background:var(--mat); border-radius:var(--bo-o);
  box-shadow:var(--bong); text-align:left; font-family:inherit; cursor:pointer;
}
.mt-xe-chon-nhan{
  display:block; font-size:10.5px; line-height:1.2; font-weight:700; letter-spacing:.055em;
  text-transform:uppercase; color:var(--muc-3);
}
.mt-xe-chon-hang{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.mt-xe-chon-hang strong{
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:16px; line-height:1.25; font-weight:700; color:var(--nhan-dam);
}
.mt-xe-chon-hang svg{ flex:none; stroke:var(--nhan-dam); }
.mt-xe-chon:focus-visible{ outline:0; border-color:var(--nhan); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ---------- Chọn phiên bản ---------- */
.pb-xe{ display:flex; align-items:center; gap:14px; padding:18px 4px 6px; }
.pb-anh{ width:110px; height:70px; border-radius:12px; background:linear-gradient(135deg,var(--ke),#fff); display:grid; place-items:center; flex:none; overflow:hidden; }
.pb-anh svg{ opacity:.4; }
.pb-anh img{ width:100%; height:100%; object-fit:cover; display:block; }
.pb-hang{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muc-3); }
.pb-ten{ font-size:22px; font-weight:800; letter-spacing:-.02em; }

.pb-km{ background:#FFF7E6; border:1px solid #FBE4B8; border-radius:var(--bo-the); padding:13px 15px; margin-top:6px; }
.pb-km-dau{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9A6B00; margin-bottom:6px; }
.pb-km-dong{ display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; font-size:13.5px; }
.pb-km-dong span{ color:#7A5A1E; }
.pb-km-dong b{ font-weight:700; text-align:right; }

.pb-ds{ margin-top:0; }
.pb-dong{ display:flex; align-items:center; gap:10px; padding:14px 15px; border-top:1px solid var(--ke); cursor:pointer; transition:background var(--nhanh), transform var(--nhanh) var(--duong-cong); }
.pb-dong:first-child{ border-top:0; }
.pb-dong:active{ background:var(--nen); transform:scale(.985); }
.pb-dong-ten{ flex:1; }
.pb-dong-ten b{ font-size:15px; font-weight:600; }
.pb-dong-ten span{ display:inline-block; margin-left:6px; font-size:11px; font-weight:600; color:var(--muc-3); background:var(--nen); padding:1px 6px; border-radius:5px; }
.pb-dong-gia{ text-align:right; }
.pb-dong-gia b{ display:block; font-size:14.5px; font-weight:700; }
.pb-dong-gia .pill{ margin-top:3px; }
.pb-dong .mui-ten{ color:var(--muc-3); flex:none; }

/* ---------- Khuyến mãi — 2 tab nội bộ ---------- */
.km-tabs{ display:flex; gap:4px; margin:14px var(--le-man) 4px; padding:4px; background:var(--nen); border-radius:12px; }
.km-tab{
  flex:1; height:38px; border:0; border-radius:8px; background:transparent;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muc-2);
}
.km-tab.chon{ background:var(--mat); color:var(--nhan-dam); box-shadow:var(--bong); }
.km-panel[hidden]{ display:none; }

.km-thang{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px var(--le-man) 0; padding:15px; }
.km-thang h3{ font-size:14.5px; font-weight:800; }
.km-thang p{ font-size:12px; color:var(--muc-2); margin-top:2px; }

/* Bảng khuyến mãi kiểu Excel (gói U1 28/09/2026): kiểu nằm trong giao-dien-moi.css (mục CÀI ĐẶT KHUYẾN MÃI).
   Danh sách dòng xe, 3 ô tổng quan và màn sửa từng dòng xe cũ đã bỏ. */
.sua-km{ padding:0 20px; }
.sua-km .o-nhan{ display:block; font-size:12.5px; font-weight:600; color:var(--muc-2); margin:0 2px 6px; }

/* ---------- Hộp trượt lên từ đáy màn hình — dùng chung cho "Thêm phiên bản" và xác nhận xoá ---------- */
.km-them-nen{ position:fixed; inset:0; background:rgba(16,19,25,.4); opacity:0; pointer-events:none; transition:opacity var(--vua); z-index:95; }
.km-them-nen.mo{ opacity:1; pointer-events:auto; }
.km-them-tam{
  position:fixed; left:0; right:0; bottom:0; background:var(--mat);
  border-radius:18px 18px 0 0; box-shadow:0 -8px 28px rgba(16,19,25,.16);
  padding:20px var(--le-man) calc(26px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform var(--vua);
  z-index:96; box-sizing:border-box;
}
.km-them-tam.mo{ transform:translateY(0); }
.km-them-tay{ width:36px; height:4px; border-radius:99px; background:var(--ke-2); margin:0 auto 16px; }
.km-them-tieu{ font-size:16px; font-weight:800; }
.km-them-phu{ font-size:12.5px; color:var(--muc-3); margin-top:4px; margin-bottom:16px; }
.km-them-o{ width:100%; box-sizing:border-box; font-size:16px; margin-bottom:18px; } /* >=16px: iPhone khỏi tự phóng to khi focus */
.km-them-nut{ display:flex; gap:10px; }
.km-them-nut .nut{ flex:1; }
.km-xoapb-xong{ background:var(--loi); color:#fff; }
.km-xoapb-xong:active{ background:#B91C1C; }
.cp-dau{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:24px 18px 9px; }
.cp-dau b{ display:block; font-size:15px; }
.cp-dau span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--muc-3); }
.cp-dau button{ flex:none; border:0; background:transparent; color:var(--nhan); font:600 12px inherit; padding:6px 0; }
.cp-ds{ margin:0 16px; overflow:hidden; }
.cp-nhom{ padding:10px 14px 6px; border-top:1px solid var(--ke); background:var(--nen); color:var(--muc-3); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cp-nhom:first-child{ border-top:0; }
.cp-dong{ width:100%; min-height:48px; display:flex; align-items:center; gap:8px; padding:9px 14px; border:0; border-top:1px solid var(--ke); background:var(--mat); color:var(--muc); font-family:inherit; text-align:left; }
.cp-nhom + .cp-dong{ border-top:0; }
.cp-dong span{ flex:1; font-size:13px; }
.cp-dong b{ font-size:13px; font-weight:650; }
.cp-dong .mui-ten{ flex:none; color:var(--muc-3); }

.cp-dau{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:24px 18px 9px; }
.cp-dau b{ display:block; font-size:15px; }
.cp-dau span{ display:block; margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--muc-3); }
.cp-dau button{ flex:none; border:0; background:transparent; color:var(--nhan); font:600 12px inherit; padding:6px 0; }
.cp-ds{ margin:0 16px; overflow:hidden; }
.cp-nhom{ padding:10px 14px 6px; border-top:1px solid var(--ke); background:var(--nen); color:var(--muc-3); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.cp-nhom:first-child{ border-top:0; }
.cp-dong{ width:100%; min-height:48px; display:flex; align-items:center; gap:8px; padding:9px 14px; border:0; border-top:1px solid var(--ke); background:var(--mat); color:var(--muc); font-family:inherit; text-align:left; }
.cp-nhom + .cp-dong{ border-top:0; }
.cp-dong span{ flex:1; font-size:13px; }
.cp-dong b{ font-size:13px; font-weight:650; }
.cp-dong .mui-ten{ flex:none; color:var(--muc-3); }

/* Tên mới dài: cho phép nhãn tab xuống hai dòng nhưng vẫn giữ thanh 72px. */
.thanh-tab a[data-man="khuyen-mai"]{ font-size:10.5px; line-height:1.05; text-align:center; max-width:40%; }

/* ---------- Máy tính lăn bánh ---------- */
.mt-nhom{ margin:16px var(--le-man) 0; }
.mt-nhom > .nhan-muc{ margin:0 2px 9px; }

.mt-2o{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Hai ô tiền dùng chung một thẻ để gọn chiều cao trên Mobile. Cả hàng là
   label nên chạm vào nhãn cũng đưa con trỏ thẳng vào ô số bên phải. */
.mt-gia-the{
  overflow:hidden; background:var(--mat); border:1px solid var(--ke);
  border-radius:var(--bo-o); box-shadow:var(--bong);
}
.mt-gia-dong{
  min-height:58px; display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-top:1px solid var(--ke); cursor:text; transition:background var(--nhanh);
}
.mt-gia-dong:first-child{ border-top:0; }
.mt-gia-dong > span{ flex:1; min-width:0; font-size:13.5px; line-height:1.3; font-weight:500; color:var(--muc-2); }
.mt-gia-o{
  width:52%; min-width:0; padding:8px 0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:17px; line-height:1.2; font-weight:700;
  color:var(--muc); text-align:right;
}
.mt-gia-o::placeholder{ color:var(--muc-3); }
.mt-gia-dong:focus-within{ background:var(--nhan-nhat); }

.mt-pb-chon .tam-muc{ gap:12px; }
.mt-pb-chon .tam-muc > span{ min-width:0; }
.mt-pb-chon .tam-muc > b{ flex:none; text-align:right; font-size:13.5px; }

/* Thông tin đăng ký Mobile: 4 lựa chọn gọn trong lưới 2×2. Select trong
   suốt phủ cả thẻ để bấm ở đâu cũng mở bộ chọn gốc của iOS/Android. */
.mt-thong-tin{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.mt-chon-gon{
  position:relative; min-width:0; min-height:86px; padding:13px 34px 12px 14px;
  background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-o);
  box-shadow:var(--bong); overflow:hidden;
}
.mt-chon-gon-nhan{
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:10.5px; line-height:1.25; font-weight:700; letter-spacing:.045em;
  text-transform:uppercase; color:var(--muc-3);
}
.mt-chon-gon strong{
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  margin-top:5px; font-size:15px; line-height:1.25; font-weight:700; color:var(--muc);
}
.mt-chon-gon small{
  display:block; margin-top:2px; font-size:10.5px; line-height:1.25;
  font-weight:600; color:var(--muc-3);
}
.mt-chon-gon-mui{
  position:absolute; right:15px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--muc-3); border-bottom:2px solid var(--muc-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.mt-chon-gon select{
  position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:0;
  font-size:16px; cursor:pointer;
}
.mt-chon-gon:focus-within{ border-color:var(--nhan); box-shadow:0 0 0 3px var(--nhan-nhat); }

.mt-chot{
  display:flex; align-items:center; justify-content:space-between;
  min-height:58px; gap:10px; padding:9px 14px;
  border-top:1px solid var(--ke); background:var(--mat);
}
.mt-chot .k{ flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--nhan-dam); }
.mt-chot .v{ font-size:17px; font-weight:800; color:var(--nhan-dam); }

/* Cùng một nhịp dọc/cỡ số cho toàn màn Báo giá mobile. */
#mt-bang{ border-radius:var(--bo-o); }
#mt-bang .the-dong{ min-height:56px; padding:11px 14px; }
#mt-bang .the-dong .nhan{ font-size:13.5px; font-weight:500; }
#mt-bang .the-dong .gia-tri{ font-size:14.5px; font-weight:700; }
#mt-bang .the-tong{ min-height:58px; padding:11px 14px; }
.mt-nhom .lo-trinh,.mt-nhom .tg-kq{ border-radius:var(--bo-o); }
.mt-dock .nut{ padding:0 10px; font-size:14px; }
.mt-dock .nut--phu{ background:var(--mat); color:var(--nhan); border-color:rgba(37,99,235,.28); }

.mt-tg-hang{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-o);
  padding:13px 15px; box-shadow:var(--bong);
}
.mt-tg-hang b{ display:block; font-size:14.5px; font-weight:600; }
.mt-tg-hang span{ display:block; font-size:12px; color:var(--muc-3); margin-top:1px; }

/* ☠️ Trước đây chỉ làm mờ (opacity:.4) — Vũ chê tắt rồi mà khối Mốc vay/Trả
   trước/Lãi suất/Kỳ hạn vẫn chiếm nguyên chỗ, rối mắt. Đổi hẳn sang ẩn
   (display:none) — bật lại toggle mới hiện, đúng như KV chỉ mong (15/09/2026). */
.mt-tg-tat{ display:none; }

/* dòng phí đã sửa — số đổi màu nhấn + nhãn nhỏ dưới tên */
.the-dong--sua .gia-tri{ color:var(--nhan-dam); font-weight:700; }
.the-dong--sua .nhan{ position:relative; }
.the-dong--sua .nhan::after{
  content:attr(data-sua); display:block;
  font-size:10.5px; font-weight:700; color:var(--nhan); margin-top:1px;
}
.the-dong .nhan{ transition:none; }

/* nút thêm khoản tự do + đặt lại + ghi chú dưới bảng phí */
.mt-them-phi-tudo, .mt-phi-datlai{
  display:inline-flex; align-items:center; gap:6px;
  margin:10px 6px 0 0; padding:8px 12px;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:var(--bo-pill);
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--muc-2); cursor:pointer;
}
.mt-them-phi-tudo{ color:var(--nhan); border-color:var(--nhan-nhat); background:var(--nhan-nhat); }
.mt-them-phi-tudo svg{ stroke:var(--nhan); }
.mt-phi-datlai svg{ stroke:var(--muc-2); }
.mt-phi-ghi{ font-size:11.5px; color:var(--muc-3); margin:8px 2px 0; clear:both; }

/* form sửa phí trong tấm kéo lên */
.sua-phi{ padding:0 20px; }
.sp-o-bao{ position:relative; margin-top:4px; }
.sp-o{
  width:100%; height:56px; padding:0 44px 0 16px;
  background:var(--nen); border:1px solid var(--ke-2); border-radius:var(--bo-o);
  font-family:inherit; font-size:22px; font-weight:800; color:var(--muc); text-align:right;
  font-variant-numeric:tabular-nums;
}
.sp-o:focus{ outline:0; border-color:var(--nhan); box-shadow:0 0 0 3px var(--nhan-nhat); }
.sp-dv{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:700; color:var(--muc-3); }
.sp-ghi{ font-size:12px; color:var(--muc-2); margin:9px 2px 0; line-height:1.5; }
.sp-luu{ margin:14px 0 4px; font-weight:500; }
.sp-nut{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:12px; }
.sp-nut .nut--nhe{ padding:8px; }
/* nút phụ chữ đỏ cho lựa chọn làm mất dữ liệu (VD "Bỏ thay đổi" ở hộp trả góp, Gói 1B 30/09/2026) */
.nut--nhe.nut--chu-do{ color:var(--loi); }

/* 2 lựa chọn cân nhau, nằm ngang — gọn hơn xếp chồng (hộp thoại xác nhận) */
.chon-2{ display:flex; gap:10px; margin-top:16px; }
.chon-2 .nut{ flex:1; height:48px; font-size:14.5px; }

/* kết quả trả góp — số lớn + lưới phụ */
.tg-kq{ background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-the); box-shadow:var(--bong); overflow:hidden; }
.tg-kq .dau{ padding:16px; border-bottom:1px solid var(--ke); }
.tg-kq .dau > span{ font-size:12.5px; color:var(--muc-2); display:block; margin-bottom:3px; }
.tg-kq .dau b{ font-size:26px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.tg-kq .dau b i{ font-style:normal; font-size:15px; font-weight:600; color:var(--muc-2); }
.tg-kq .luoi{ display:grid; grid-template-columns:1fr 1fr; }
.tg-kq .o{ padding:12px 15px; border-top:1px solid var(--ke); border-right:1px solid var(--ke); height:auto; background:none; }
.tg-kq .o:nth-child(2n){ border-right:0; }
.tg-kq .o span{ font-size:11.5px; color:var(--muc-3); display:block; margin-bottom:3px; }
.tg-kq .o b{ font-size:14px; font-weight:700; }
.tg-kq .luoi--3{ grid-template-columns:1fr 1fr 1fr; }
.tg-kq .luoi--3 .o{ border-right:1px solid var(--ke); }
.tg-kq .luoi--3 .o:nth-child(2n){ border-right:1px solid var(--ke); }
.tg-kq .luoi--3 .o:last-child{ border-right:0; }
.tg-kq .xem{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px; font-size:13.5px; font-weight:600; color:var(--nhan);
  border-top:1px solid var(--ke); cursor:pointer;
}

/* Trả góp gọn: cùng một kiểu bảng hàng như Lộ trình thanh toán, không
   tách kết quả thành các ô nhỏ riêng lẻ. */
.tg-thong-tin{
  overflow:hidden; margin-top:14px; background:var(--mat);
  border:1px solid var(--ke); border-radius:var(--bo-the); box-shadow:var(--bong);
}
.tg-thong-tin-dong{
  min-height:58px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 14px; border-top:1px solid var(--ke); cursor:default;
}
.tg-thong-tin-dong:first-child{ border-top:0; }
.tg-thong-tin-dong > span:first-child{ color:var(--muc-2); font-size:13.5px; }
.tg-thong-tin-dong > b{ font-size:15px; font-weight:700; white-space:nowrap; }
.tg-buoc{ width:142px; height:38px; border:0; padding:0; }
.tg-buoc button{ width:34px; height:34px; }
.tg-buoc .giua{ white-space:nowrap; }
.tg-lai{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.tg-lai input{
  width:46px; border:0; outline:0; background:transparent; color:var(--muc);
  font-family:inherit; font-size:15px; font-weight:700; text-align:right;
}
.tg-lai b{ font-size:15px; font-weight:700; white-space:nowrap; }
.tg-thong-tin-dong:focus-within{ background:var(--nhan-nhat); }
.tg-kq-gon{
  overflow:hidden; margin-top:12px; background:var(--mat);
  border:1px solid var(--ke); border-radius:var(--bo-the); box-shadow:var(--bong);
}
.tg-binh-quan{ padding:14px 16px; background:var(--nhan-nhat); }
.tg-binh-quan > span{ display:block; color:var(--nhan-dam); font-size:12px; }
.tg-binh-quan > b{ display:block; margin-top:3px; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.tg-binh-quan > b i{ color:var(--muc-2); font-size:15px; font-style:normal; font-weight:600; }
.tg-kq-gon .xem{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:48px; padding:12px; color:var(--nhan); font-size:13.5px;
  font-weight:600; border-top:1px solid var(--ke); cursor:pointer;
}

/* Lộ trình thanh toán — Đặt cọc/Đợt 2 (hoặc Đối ứng)/Chi phí đăng ký/
   Đợt 3 (hoặc Số tiền vay). Vũ chốt 15/09/2026, công thức port từ CRM. */
.lo-trinh{ background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-the); box-shadow:var(--bong); overflow:hidden; }
.lo-trinh-coc-dong{ border-top:0; }
.lo-trinh-hang{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-top:1px solid var(--ke); }
.lo-trinh-hang .nhan{ font-size:13.5px; color:var(--muc-2); }
.lo-trinh-hang .nhan i{ font-style:normal; color:var(--muc-3); font-size:12px; }
.lo-trinh-hang .so{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.lo-trinh-hang--sua{ cursor:pointer; }
.lo-trinh-hang--sua .nhan{ color:var(--nhan); font-weight:600; }
.lo-trinh-hang--sua:active{ background:var(--nen); }

/* Quà tặng trên Mobile — nằm ngay trên Lộ trình thanh toán. Mỗi lần nút
   Thêm chỉ tạo 1 món; bấm cả dòng hoặc dấu › để sửa món đang có. */
.mt-qua-nhom{ margin-bottom:22px; }
.mt-qua-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 8px; }
.mt-qua-dau .nhan-muc{ margin:0; }
.mt-qua-phu{ font-size:11.5px; color:var(--muc-3); margin-top:2px; }
.mt-qua-them{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px;
  border:1px solid var(--ke-2); border-radius:10px; background:var(--mat);
  color:var(--nhan); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.mt-qua-them:active{ background:var(--nhan-nhat); transform:scale(.97); }
.mt-qua-them:disabled{ opacity:.45; cursor:default; transform:none; }
.mt-qua-ds{ overflow:hidden; }
.mt-qua-dong{
  width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; border:0; border-top:1px solid var(--ke); background:var(--mat);
  color:var(--muc); font-family:inherit; font-size:14px; text-align:left; cursor:pointer;
}
.mt-qua-dong:first-child{ border-top:0; }
.mt-qua-dong:active{ background:var(--nen); }
.mt-qua-dong svg{ flex:none; stroke:var(--muc-3); }
.mt-qua-rong{ min-height:52px; display:flex; align-items:center; padding:13px 15px; color:var(--muc-3); font-size:13.5px; }
.mt-qua-o{ text-align:left; font-size:17px; font-weight:600; padding-right:16px; }
.mt-qua-xoa{ color:var(--loi); }

/* stepper kỳ hạn */
.buoc{ display:flex; align-items:center; border:1px solid var(--ke-2); border-radius:var(--bo-o); overflow:hidden; height:50px; }
.buoc button{ width:48px; flex:none; border:0; background:var(--nen); font-size:22px; font-weight:600; color:var(--muc); cursor:pointer; }
.buoc button:active{ background:var(--ke); }
.buoc .giua{ flex:1; text-align:center; font-size:15px; font-weight:700; }

/* ---------- Thiết lập · Mã kích hoạt ---------- */
.kh-the{ display:flex; flex-direction:column; }
.kh-tt{ margin-bottom:14px; }
.kh-tt .pill{ font-size:12px; }
.kh-may{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--nen); border:1px solid var(--ke-2); border-radius:var(--bo-o);
  padding:11px 11px 11px 14px;
}
.kh-may-nhan{ font-size:11px; font-weight:600; color:var(--muc-3); margin-bottom:2px; }
.kh-may-gt{ font-size:17px; font-weight:700; letter-spacing:.03em; }
.kh-chep{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:8px 13px; border-radius:var(--bo-pill);
  background:var(--mat); border:1px solid var(--ke-2);
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--nhan-dam); cursor:pointer;
}
.kh-chep:active{ transform:scale(.96); background:var(--nhan-nhat); }
.kh-chep svg{ stroke:currentColor; }
.kh-ghi{ font-size:11.5px; color:var(--muc-3); margin-top:10px; line-height:1.55; }

/* ---------- Bảng trả góp đầy đủ ---------- */
.bang-nam{ margin:16px var(--le-man) 0; background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-the); box-shadow:var(--bong); overflow:hidden; }
.bang-nam .nam-dau{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px; background:var(--nhan-nhat); font-weight:700; font-size:13.5px; color:var(--nhan-dam);
}
.bang-nam .nam-dau small{ font-size:12px; font-weight:600; opacity:.72; }   /* "· lãi 7,5%" — chỉ trên màn hình sale */
.bang-hang{
  display:grid; grid-template-columns:38px 1fr 1fr 1fr; gap:8px;
  padding:9px 15px; font-size:12px; border-top:1px solid var(--ke);
}
.bang-hang:first-of-type{ border-top:0; }
.bang-hang.tieu-de{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muc-3); background:#FAFBFC; }
.bang-hang .ky{ color:var(--muc-3); }
.bang-hang .so{ text-align:right; font-weight:600; }
.bang-hang .lai{ color:var(--muc-2); font-weight:500; }

/* Khoản vay dùng đúng hệ ô nhập chung của app, chỉ thêm đơn vị trong ô. */
.mt-vay-tuy-chinh{ margin:12px 0 10px; }
.mt-vay-tuy-chinh-o{ position:relative; }
.mt-vay-tuy-chinh-o .o{ padding-right:42px; text-align:left; font-size:17px; }
.mt-vay-tuy-chinh-o b{ position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--muc-3); font-size:15px; pointer-events:none; }
.mt-vay-tuong-duong{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mt-vay-tuong-duong b{ color:var(--nhan-dam); font-weight:700; }

/* Đầu trang bảng trả góp đầy đủ. */
.bang-tom-tat{ margin:16px var(--le-man) 0; padding:15px; border:1px solid var(--ke); border-radius:var(--bo-the); background:var(--mat); color:var(--muc); box-shadow:var(--bong); }
.bang-tom-tat-chinh{ position:relative; padding-bottom:12px; }
.bang-tom-tat-chinh span,.bang-tom-tat-luoi span{ display:block; font-size:11.5px; color:var(--muc-3); }
.bang-tom-tat-chinh b{ display:block; margin-top:4px; font-size:20px; }
.bang-tom-tat-chinh em{ position:absolute; right:0; top:0; padding:3px 8px; border-radius:99px; background:var(--nhan-nhat); color:var(--nhan-dam); font-size:11px; font-weight:700; font-style:normal; }
.bang-tom-tat-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:11px; border-top:1px solid var(--ke); }

/* ---------- Danh sách dấu tick (hộp "đã được duyệt Close Beta", tai-khoan.js) ---------- */
.cdt-nhom{ display:flex; flex-direction:column; gap:9px; }
.cdt-dong{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muc); line-height:1.45; }
.cdt-dong::before{ flex:none; margin-top:1px; font-size:13px; font-weight:800; line-height:1.45; }
.cdt-dong.co::before{ content:"✓"; color:var(--tot); }
.cdt-dong.khong{ color:var(--muc-3); }
.cdt-dong.khong::before{ content:"-"; color:var(--muc-3); }
.bang-tom-tat-luoi b{ display:block; margin-top:3px; font-size:13px; }