/* ============================================================
   AUTOSALES PRO — ẢNH BÁO GIÁ
   Mẫu dựng lại 14/09/2026 theo ảnh tham chiếu (ảnh báo giá/Ảnh báo giá 01.png).
   Đặc tả đầy đủ: docs/quote-preview-design.md
   ============================================================ */

/* ===========================================================
   MẪU ẢNH BÁO GIÁ — dựng lại theo ảnh tham chiếu 1024×1536
   Khung 384px, chụp scale 2 → PNG 768px.
   LUẬT: không flex, không grid, không object-fit (xem docs/quote-preview-design.md §0)
   =========================================================== */
:root{
  --navy-900:#0A1330; --navy-800:#0B2E6B; --navy-700:#0F437C;
  --slate-500:#425976; --slate-400:#6B7D99;
  --nen-the:#F4F9FD; --nen-nhan:#ECF3FE; --chip:#DCEAF8;
  --ke:#ECF1F7; --ke-doc:#DCE7F4; --do:#DC2626;
}

/* ☠️ HAI BẪY ĐÃ TRẢ GIÁ KHI DỰNG MẪU NÀY — đừng lặp lại:
   1. padding đặt trên chính thẻ <table> bị bỏ qua khi border-collapse:collapse
      → mọi khoảng đệm phải nằm ở <div> bọc ngoài hoặc ở <td>.
   2. Reset kiểu "#anh-khung td{padding:0}" có specificity ID nên ĐÈ mọi
      ".xxx td{padding:…}" viết sau → dưới đây không có reset td nào, mỗi
      nhóm tự khai báo padding đầy đủ. */
/* ☠️ BẮT BUỘC: khung dựng phải nằm NGOÀI màn hình.
   KHÔNG display:none — html2canvas cần phần tử có layout thật mới chụp được.
   Bỏ mất 3 dòng position/left/top này là khung ảnh báo giá hiện đè lên
   giao diện app (đã xảy ra thật 14/09/2026, lọt cả lên bản production). */
#anh-khung{
  position:fixed; left:-9999px; top:0;
  width:384px; overflow:hidden; background:#fff;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  color:var(--navy-900);
}
#anh-khung *{ box-sizing:border-box; font-variant-numeric:tabular-nums; }
#anh-khung table{ border-collapse:collapse; width:100%; table-layout:fixed; }

/* Ảnh bảng trả góp: phần thương hiệu + hero dùng nguyên lớp của ảnh báo giá. */
#anh-vay-khung{
  position:fixed; left:-9999px; top:0; width:384px; overflow:hidden; background:#fff;
  font-family:'Be Vietnam Pro',system-ui,sans-serif; color:var(--navy-900);
}
#anh-vay-khung *{ box-sizing:border-box; font-variant-numeric:tabular-nums; }
#anh-vay-khung table{ border-collapse:collapse; width:100%; table-layout:fixed; }
.av-than{ padding:10px 17px 0; }
.av-tieu-de{ text-align:center; font-size:10px; font-weight:800; letter-spacing:.07em; margin-bottom:9px; }
.av-tom-tat{ margin-bottom:8px; }
.av-tom-tat td{ vertical-align:middle; }
.av-vay{ width:55%; padding:10px 12px; border-radius:7px 0 0 7px; background:#0F559C; color:#fff; }
.av-vay span{ display:block; font-size:6.4px; color:rgba(255,255,255,.78); }
.av-vay b{ display:block; margin-top:4px; font-size:11px; }
/* ☠️ Trước dùng div{display:table}+{display:table-cell} — html2canvas KHÔNG
   render đúng layout đó (giống hệt lưu ý §0 "flex/grid không hiểu"), viền
   ngăn 2 dòng bị đẩy đè lên chữ "Kỳ hạn" trong ảnh xuất (Vũ báo 19/09/2026).
   Đổi sang <table> thật — đúng cách MỌI khối khác trong file này đang làm
   (.av-nam-bang, .av-kpi, .av-tom-tat…), html2canvas chụp ổn định. */
.av-thong-so{ padding:0 10px; border:1px solid var(--ke-doc); border-left:0; border-radius:0 7px 7px 0; }
.av-thong-so table{ table-layout:auto; }
.av-thong-so td{ padding:4px 0; font-size:6.6px; }
.av-thong-so tr + tr td{ border-top:1px solid var(--ke); }
.av-thong-so td.v{ text-align:right; font-weight:800; }
.av-nhan{ margin:6px 2px 4px; font-size:7px; font-weight:700; color:var(--slate-500); }
/* Lịch trả chia theo năm (Gói I, 27/09/2026): thẻ năm dựng bằng JS (anh-bao-gia.js theNamMau1)
   vào #av-nam-ds, thay bảng 2 cột liền mạch cũ (đã gỡ hẳn khỏi HTML + CSS, Gói J1). Mỗi thẻ:
   dải tiêu đề "Năm n · Tháng a - b" + tổng năm, bảng 6 cột (tháng | phải trả) × 3 kỳ / hàng.
   Chỉ <table> (html2canvas), mọi khoảng đệm đặt ở <td> (bẫy padding trên <table>). */
#av-nam-ds .av-nam{ margin-bottom:6px; border:1px solid var(--ke-doc); border-radius:7px; overflow:hidden; background:#fff; }
.av-nam-dau{ background:var(--nen-the); }
.av-nam-dau td{ padding:5px 9px 6px; vertical-align:middle; white-space:nowrap; }
.av-nam-t{ font-size:6.4px; font-weight:600; color:var(--slate-500); line-height:1.3; }
.av-nam-t b{ font-size:9.2px; font-weight:800; color:var(--navy-800); letter-spacing:-.01em; }
.av-nam-tong{ text-align:right; font-size:6px; font-weight:600; color:var(--slate-500); line-height:1.3; }
.av-nam-tong b{ font-size:8.6px; font-weight:800; color:var(--navy-900); }
.av-nam-bang td{ padding:4.6px 0; border-top:1px solid var(--ke); vertical-align:middle; white-space:nowrap; line-height:1.25; }
.av-nam-bang tr:first-child td{ border-top:0; }
.av-nam-bang td.av-k{ padding-left:9px; font-size:6.4px; font-weight:500; color:var(--slate-500); }
.av-nam-bang td.av-k2{ padding-left:7px; border-left:1px solid var(--ke); }
.av-nam-bang td.av-v{ text-align:right; padding-right:8px; font-size:7.6px; font-weight:700; color:var(--navy-900); }
/* Tuỳ chỉnh báo giá (phần nhận diện) áp lên ảnh bảng trả góp — như #anh-khung ở tuy-chinh.css */
#anh-vay-khung.ah-tc-nhan .ah-daily,
#anh-vay-khung.ah-tc-nhan .ah-chip,
#anh-vay-khung.ah-tc-nhan .av-nam-t b{ color:var(--ah-tc); }
#anh-vay-khung.ah-tc-nhan .av-vay,
#anh-vay-khung.ah-tc-nhan .ah-sale .av span{ background:var(--ah-tc); }
#anh-vay-khung .ah-sale .av span.ah-av-anh{ background:none; overflow:visible; border-radius:0; }
#anh-vay-khung .ah-sale .av span.ah-av-anh img{ border-radius:0; }
.av-kpi{ margin:8px 0; }
.av-kpi td{ width:25%; padding:7px 5px; border-left:3px solid #fff; border-radius:6px; background:var(--nen-the); vertical-align:top; }
.av-kpi td:first-child{ border-left:0; }
.av-kpi span{ display:block; font-size:5.4px; color:var(--slate-500); line-height:1.25; }
.av-kpi b{ display:block; margin-top:3px; font-size:6.8px; line-height:1.2; }

/* ---------- 1. Header thương hiệu — cao 35 ---------- */
.ah-head{ padding:10px 17px; }
.ah-head td{ padding:0; vertical-align:middle; }
.ah-head-l{ width:62%; }
.ah-head-l img{ display:block; }
.ah-head-r{ text-align:right; }
.ah-daily{ font-size:6.3px; font-weight:800; letter-spacing:.05em; color:var(--navy-800); line-height:1.05; }
.ah-slogan{ font-size:6.2px; font-weight:500; color:var(--slate-500); line-height:1.05; margin-top:2px; }

/* ---------- 2. Hero — cao 103, tràn viền ---------- */
.ah-hero{ position:relative; width:384px; height:103px; overflow:hidden; }
.ah-hero img{ display:block; }
.ah-hero-chu{ position:absolute; left:19px; top:15px; width:146px; }
.ah-chip{
  display:inline-block; background:var(--chip); color:var(--navy-800);
  font-size:5.8px; font-weight:700; padding:2px 6px 3px; border-radius:99px; line-height:1;
}
.ah-ten{ font-size:15.4px; font-weight:800; letter-spacing:-.025em; line-height:1.13; margin-top:9px; }
.ah-pb{ font-size:9.7px; font-weight:600; color:var(--slate-500); line-height:1.25; margin-top:2px; }

/* ---------- thân trang ---------- */
.ah-than{ padding:6px 17px 0; }
.ah-the{ background:#fff; border-radius:7px; box-shadow:0 1px 3px rgba(11,46,107,.07); overflow:hidden; margin-bottom:4px; }

/* ---------- 3. Thẻ giá — cao 54 ---------- */
.ah-gia{ background:var(--nen-the); border-radius:7px; box-shadow:0 1px 3px rgba(11,46,107,.07); margin-bottom:6px; }
.ah-gia td{ padding:10px 3px 11px; vertical-align:top; }
.ah-gia .c-gia{ width:50%; padding-left:10px; padding-right:5px; }
.ah-nhan{ font-size:6.7px; font-weight:800; letter-spacing:.055em; color:var(--navy-800); line-height:1; }
.ah-gia-so{ font-size:17.3px; font-weight:800; letter-spacing:-.016em; line-height:1.12; margin-top:7px; white-space:nowrap; }
.ah-gia .c-st{ border-left:1px solid var(--ke-doc); padding-left:8px; vertical-align:middle; }
.ah-gia .c-st1{ width:26%; }
.ah-gia .c-st2{ width:24%; text-align:right; padding-left:6px; padding-right:10px; }
/* ☠️ KHÔNG đặt icon svg cùng dòng với nhãn ở đây. Từng có, canh bằng
   vertical-align:middle — đúng trên máy dev nhưng html2canvas tự đoán baseline
   của chữ khác trình duyệt thật, icon nổi cao hơn chữ; đã đo pixel + vá bằng
   position:relative;top qua nhiều vòng (15/09/2026) nhưng Vũ xác nhận trên
   điện thoại thật VẪN lệch — vá không triệt để được. Vũ chốt: bỏ hẳn icon,
   ĐỪNG THÊM LẠI. Xem log.md phiên 15/09/2026 + docs/quote-preview-design.md §6.3. */
.ah-st-nh{ font-size:5.7px; font-weight:600; color:var(--slate-500); line-height:9px; white-space:nowrap; }
.ah-st-so{ font-size:7.6px; font-weight:800; line-height:1.2; margin-top:3px; white-space:nowrap; }
/* Số tiền ưu đãi LUÔN xanh lá, kể cả khi đổi màu nhấn (Vũ chốt 29/09/2026); giá bán sau ưu đãi
   giữ màu gốc. Nền thẻ #F4F9FD sáng → xanh đậm #03703E (tương phản 5,8:1; xanh app #05A65B chỉ 3:1). */
#anh-khung .ah-st-so.am{ color:#03703E; }

/* ---------- đầu thẻ dùng chung — cao 36 ---------- */
.ah-dau{ background:var(--nen-the); padding:7px 11px 9px; }
.ah-dau td{ padding:0; vertical-align:middle; }
.ah-dau-ic{ width:25px; }
.ah-dau-ic span{
  display:inline-block; width:18px; height:18px; border-radius:5px;
  background:#fff; text-align:center; line-height:18px;
}
.ah-dau-tit{ font-size:9.6px; font-weight:800; color:var(--navy-800); line-height:1.1; letter-spacing:-.012em; }
.ah-dau-phu{ font-size:6.3px; font-weight:500; color:var(--slate-500); line-height:1.25; margin-top:1px; }

/* ---------- 4. Bảng chi phí — bước hàng 22 ---------- */
.ah-bang td{ padding:6px 0; border-top:1px solid var(--ke); vertical-align:middle; }
.ah-bang tr:first-child td{ border-top:0; }
.ah-bang .ten{ font-size:7.6px; font-weight:500; line-height:1.25; padding-left:15px; }
.ah-bang .p{ width:46%; text-align:right; font-size:7.4px; font-weight:700; white-space:nowrap; padding-right:11px; }
.ah-tong-cp{ background:var(--nen-nhan); border-radius:5px; margin:6px; padding:5px 9px 6px; }
.ah-tong-cp td{ padding:0; vertical-align:middle; }
/* ☠️ KHÔNG thêm lại cột icon trước "Tổng chi phí đăng ký" — bẫy html2canwas
   tự đoán baseline, xem ghi chú ở .ah-st-nh phía trên. Vũ chốt bỏ hẳn 15/09/2026. */
.ah-tong-cp .nh{ width:56%; font-size:7.65px; font-weight:800; line-height:1.2; color:var(--navy-800); }
.ah-tong-cp .ah-so{ width:44%; text-align:right; font-size:10.9px; font-weight:800; line-height:1.15; color:var(--navy-800); letter-spacing:-.012em; white-space:nowrap; }

/* ---------- 5. Thanh tổng lăn bánh — cao 46 ---------- */
.ah-lb{
  background:linear-gradient(108deg,#0C3A72 0%,#0F447E 55%,#12508F 100%);
  border-radius:7px; margin:4px 0 8px; box-shadow:0 1px 3px rgba(11,46,107,.16);
}
.ah-lb td{ padding:11px 0 11px; vertical-align:middle; }
.ah-lb .ic{ width:42px; text-align:center; }
.ah-lb .ic span{
  display:inline-block; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.15); text-align:center; line-height:24px;
}
.ah-lb .nh{ padding-right:9px; }
.ah-lb .t{ font-size:10.2px; font-weight:800; letter-spacing:.055em; color:#fff; line-height:1.15; }
.ah-lb .p{ font-size:8.4px; font-weight:500; color:rgba(255,255,255,.74); line-height:1.25; margin-top:2px; }
.ah-lb .ah-so{
  width:42%; text-align:right; padding-right:12px;
  border-left:1px solid rgba(255,255,255,.26);
  font-size:16.6px; font-weight:800; color:#fff; letter-spacing:-.016em; white-space:nowrap;
}

/* ---------- 6. Trả góp ---------- */
#ah-tg-the{ border:1px solid var(--ke-doc); }
.ah-tg-o{ padding:8px 6px 9px; }
.ah-tg-o td{ text-align:center; border-left:1px solid var(--ke); padding:0 4px; vertical-align:top; }
.ah-tg-o td:first-child{ border-left:0; }
.ah-tg-nh{ font-size:5.8px; font-weight:600; color:var(--slate-500); line-height:1.2; }
.ah-tg-so{ font-size:9px; font-weight:800; line-height:1.25; margin-top:3px; white-space:nowrap; }

/* ---------- 7. Quà tặng ---------- */
#ah-qua-the{ border:1px solid var(--ke-doc); }
.ah-qua{ padding:3px 11px 8px; }
.ah-qua td{ padding:5px 5px 5px 0; vertical-align:top; width:50%; }
.ah-qua tr:not(:first-child) td{ border-top:1px solid var(--ke); }
.ah-qua .ah-stt{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  background:var(--nen-nhan); color:var(--navy-800);
  font-size:5.6px; font-weight:800; text-align:center; line-height:11px;
  margin-right:5px; vertical-align:1px;
}
.ah-qua .chu{ font-size:7px; font-weight:500; line-height:1.35; color:var(--navy-900); }

/* ---------- 8. Thẻ tư vấn bán hàng — cao 45 ---------- */
.ah-sale{ background:var(--nen-the); border-radius:7px; box-shadow:0 1px 3px rgba(11,46,107,.07); }
.ah-sale td{ padding:9px 0 10px; vertical-align:middle; }
/* ☠️ table-layout:fixed — tổng bề rộng cột PHẢI khớp bề rộng bảng thật, đừng
   để hụt/dư (bẫy cũ 14/09/2026: từng có cột thứ 3 riêng cho pill SĐT, tính
   % sai làm pill tràn 35px). Giờ chỉ còn 2 cột, .tt ăn hết phần còn lại
   (38 + 312 = 350, khớp bề rộng bảng cũ). Gộp SĐT vào chung .ah-daily-2 thay
   cho địa chỉ, bỏ hẳn pill SĐT riêng (Vũ chốt 16/09/2026). */
.ah-sale .av{ width:38px; text-align:center; }
.ah-sale .tt{ width:312px; }
.ah-sale .av span{
  display:inline-block; width:22px; height:22px; border-radius:50%;
  background:var(--navy-800); text-align:center; line-height:22px; overflow:hidden;
}
.ah-sale .av img{ display:block; border-radius:50%; }
.ah-vaitro{ font-size:5.4px; font-weight:800; letter-spacing:.06em; color:var(--slate-400); line-height:1.1; }
.ah-ten-sale{ font-size:7.6px; font-weight:700; line-height:1.2; margin-top:1px; }
.ah-daily-2{ font-size:5.8px; font-weight:500; color:var(--slate-500); line-height:1.2; margin-top:1px; }

/* ---------- 9. Chân trang — cao 26 ---------- */
/* Chỉ còn một dòng chữ căn giữa: Vũ bỏ hai gạch hai bên (14/09/2026). */
.ah-chan{
  padding:9px 17px 9px; text-align:center;
  font-size:5.3px; font-weight:500; color:var(--slate-400);
}

/* ---------- Màn xem ảnh ---------- */
#man-xem-anh .than{ display:flex; flex-direction:column; align-items:center; padding:18px 16px; }
#xem-anh-img{
  max-width:100%; border-radius:14px;
  box-shadow:var(--bong-anh); background:#fff;
}
#xem-anh-cho{
  width:100%; max-width:340px; aspect-ratio:384/560; border-radius:14px;
  background:var(--nen); display:flex; align-items:center; justify-content:center;
  color:var(--muc-3); font-size:13px;
}
#xem-anh-cho.an{ display:none; }
.xem-anh-goi{ font-size:12px; color:var(--muc-3); margin-top:12px; text-align:center; line-height:1.5; }

/* Dock 3 hành động: nút Sao chép (chính, full width) + hàng phụ 2 nút chia đôi */
.dock--anh{ flex-direction:column; gap:10px; }
.dock--anh .nut--chinh{ flex:0 0 auto; width:100%; }
.dock-hang-phu{ display:flex; gap:10px; }
.dock-hang-phu .nut--phu{ flex:1; }