/* ============================================================
   AUTOSALES PRO — 2 MẪU ẢNH BÁO GIÁ PRO (25/09/2026)
   B′ "Showroom Champagne" (.mpb) và D "Ưu đãi tháng" (.mpd) — port 1:1 từ
   mockup đã duyệt (scratchpad mockup-mau-anh/src2.html, bản chỉ Be Vietnam
   Pro — KHÔNG dùng Playfair). JS dựng: pwa/js/mau-anh-pro.js.

   ☠️ LUẬT html2canvas (giống #anh-khung, xem docs/quote-preview-design.md §0):
      · trong .mpq KHÔNG flex/grid/object-fit/filter/backdrop-filter/blend/
        clip-text/transform. Ngang = <table>; lớp chồng = position:absolute;
        ảnh = width/height ghi cứng; hiệu ứng (ảnh đầu, bóng, logo trắng) =
        bitmap vẽ sẵn bằng canvas.
      · padding đặt trên thẻ <table> bị bỏ qua khi border-collapse:collapse.
   ☠️ Mọi lớp đều có tiền tố "mp" để không ăn lớp trần của CSS app (bẫy .pill
      14/09/2026) — test/kiem-mau-anh-pro.js canh luật này.
   ============================================================ */

/* Khung dựng NGOÀI màn hình (không display:none — html2canvas cần layout thật) */
#anh-khung-pro{ position:fixed; left:-9999px; top:0; width:384px; overflow:hidden; background:#fff; }

.mpq{ position:relative; width:384px; overflow:hidden; background:#fff; font-family:'Be Vietnam Pro', system-ui, sans-serif; }
.mpq *{ box-sizing:border-box; font-variant-numeric:tabular-nums; }
.mpq table{ border-collapse:collapse; width:100%; table-layout:fixed; }
.mpq td{ padding:0; vertical-align:middle; }
.mpq img{ display:block; max-width:none; }
.mpq .mp-mk{ position:absolute; }

/* ---------------- B′ · SHOWROOM CHAMPAGNE ---------------- */
.mpb{ background:#F6F1E7; color:#2A251F; }
.mpb .mpb-hero{ position:relative; height:230px; background:#101216; }
.mpb .mpb-nen{ position:absolute; left:0; top:0; }
.mpb .mpb-logo{ position:absolute; left:18px; top:19px; }
.mpb .mpb-dl{ position:absolute; right:18px; top:15px; width:180px; text-align:right; }
.mpb .mpb-dl b{ display:block; font-size:7px; font-weight:700; letter-spacing:.13em; color:#EDE6D6; line-height:1.35; }
.mpb .mpb-chu{ position:absolute; left:18px; top:56px; width:128px; }
.mpb .mpb-kick{ font-size:6.2px; font-weight:700; letter-spacing:.22em; color:#C8A96A; line-height:1.2; }
.mpb .mpb-ten{ font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:300; text-transform:uppercase; letter-spacing:.05em; font-size:28px; line-height:1.08; color:#F5F1E8; margin-top:7px; }
.mpb .mpb-pb{ font-size:8.2px; color:#B9B2A5; margin-top:6px; line-height:1.45; }
.mpb .mpb-gia{ position:absolute; left:18px; right:18px; top:188px; }
.mpb .mpb-gia td{ vertical-align:top; }
.mpb .mpb-gia .mpb-c2, .mpb .mpb-gia .mpb-c3{ border-left:1px solid #3D3B38; padding-left:10px; }
.mpb .mpb-nh{ font-size:6.2px; letter-spacing:.12em; color:#A8A296; font-weight:600; line-height:1.2; }
.mpb .mpb-so1{ font-size:15px; font-weight:800; color:#fff; margin-top:3px; white-space:nowrap; line-height:1.15; }
.mpb .mpb-so2{ font-size:8.6px; font-weight:700; color:#DDD7CB; margin-top:5px; white-space:nowrap; line-height:1.2; }
.mpb .mpb-so2.mpb-vang{ color:#E7CB8F; }
.mpb .mpb-ghi{ font-size:6.8px; color:#A8A296; margin-top:5px; line-height:1.35; }
.mpb .mpb-vien{ height:2px; background:linear-gradient(90deg,#8F6F48 0%,#E7CB8F 50%,#8F6F48 100%); }
.mpb .mpb-than{ padding:14px 18px 0; }
.mpb .mpb-st td{ vertical-align:bottom; }
.mpb .mpb-h{ font-size:11.5px; font-weight:700; letter-spacing:-.005em; color:#2A251F; line-height:1.2; }
.mpb .mpb-hr{ text-align:right; font-size:6.2px; letter-spacing:.12em; color:#7A5A30; font-weight:700; line-height:1.3; }
.mpb .mpb-cp{ margin-top:7px; }
.mpb .mpb-cp td{ padding:4.8px 0; border-bottom:1px solid #DDD3C2; font-size:7px; color:#6E6456; line-height:1.3; vertical-align:middle; }
.mpb .mpb-cp td.mp-v{ text-align:right; font-weight:700; color:#2A251F; white-space:nowrap; }
.mpb .mpb-cp td.mp-v.mp-tang{ color:#7A5A30; }
.mpb .mpb-cp td.mp-gap, .mpb .mpb-cp td.mp-trong{ border-bottom:0; }
.mpb .mpb-cpt{ border-bottom:1.5px solid #4A3F33; padding:7px 0; }
.mpb .mpb-cpt td{ font-size:8.2px; font-weight:800; line-height:1.2; }
.mpb .mpb-cpt td.mp-v{ text-align:right; white-space:nowrap; }
.mpb .mpb-tong{ margin-top:10px; background:#1E1C19; border-top:2px solid #C8A96A; padding:13px 16px; }
.mpb .mpb-tong-t{ font-size:7.2px; letter-spacing:.15em; color:#DDD3C1; font-weight:700; line-height:1.35; }
.mpb .mpb-tong-p{ font-size:6.3px; color:#A39A8B; margin-top:3px; line-height:1.3; }
.mpb .mpb-tong-so{ text-align:right; font-weight:600; letter-spacing:-.01em; font-size:23px; color:#E7CB8F; white-space:nowrap; line-height:1.1; }
.mpb .mpb-khoi{ margin-top:10px; border:1px solid #D3C7B2; background:#FBF8F2; padding:9px 12px 9px; }
.mpb .mpb-khoi-dau td{ vertical-align:bottom; padding-bottom:6px; }
.mpb .mpb-khoi-h{ font-size:9.6px; font-weight:700; letter-spacing:-.005em; line-height:1.2; }
.mpb .mpb-khoi-r{ text-align:right; font-size:6.4px; color:#6E6456; font-weight:600; line-height:1.3; }
.mpb .mpb-tg3 td{ vertical-align:top; padding-left:9px; border-left:1px solid #E1D7C6; }
.mpb .mpb-tg3 td:first-child{ padding-left:0; border-left:0; }
.mpb .mpb-tg3 span{ display:block; font-size:6.3px; color:#6E6456; font-weight:600; line-height:1.3; }
.mpb .mpb-tg3 b{ display:block; font-size:9.4px; font-weight:800; margin-top:3px; white-space:nowrap; line-height:1.2; }
.mpb .mpb-tg3 td.mpb-nb b{ color:#7A5A30; font-size:10.4px; }
.mpb .mpb-qua td{ vertical-align:top; padding:3.5px 0; border-top:1px solid #EAE2D3; width:50%; }
.mpb .mpb-qua tr:first-child td{ border-top:0; }
.mpb .mpb-qua td.mpb-p2{ padding-left:10px; }
.mpb .mpb-qua .mpb-qm td{ border:0; padding:0; vertical-align:top; width:auto; }
.mpb .mpb-qua .mpb-qm td.mpb-qm-so{ width:15px; font-size:6.4px; font-weight:800; color:#7A5A30; letter-spacing:.04em; padding-top:1px; }
.mpb .mpb-qua .mpb-qm td.mpb-qm-chu{ font-size:7.1px; font-weight:600; color:#2A251F; line-height:1.35; }
.mpb .mpb-sale{ margin-top:10px; border-top:1px solid #9C8F7A; border-bottom:1px solid #9C8F7A; padding:9px 0; }
.mpb .mpb-av{ width:38px; vertical-align:middle; }
.mpb .mpb-av span{ display:inline-block; width:29px; height:29px; border-radius:50%; background:#2F2A24; color:#E7CB8F; text-align:center; line-height:29px; font-size:11px; font-weight:600; }
.mpb .mpb-av svg{ display:inline-block; vertical-align:-2px; }
.mpb .mpb-vt{ font-size:5.9px; letter-spacing:.14em; color:#7A5A30; font-weight:700; line-height:1.3; }
.mpb .mpb-ts{ font-size:10.5px; font-weight:800; margin-top:1px; line-height:1.2; }
.mpb .mpb-dl2{ font-size:6.8px; color:#6E6456; margin-top:2px; line-height:1.35; }
.mpb .mpb-sdt{ text-align:right; width:118px; vertical-align:middle; }
.mpb .mpb-sdt span{ display:block; font-size:5.9px; letter-spacing:.12em; color:#7A5A30; font-weight:700; line-height:1.3; }
.mpb .mpb-sdt b{ display:block; font-size:12.5px; font-weight:800; margin-top:2px; white-space:nowrap; line-height:1.2; }
.mpb .mpb-chan{ padding:9px 18px 13px; text-align:center; font-size:6.2px; color:#6E6456; letter-spacing:.02em; line-height:1.55; }

/* ---------------- D · ƯU ĐÃI THÁNG ---------------- */
.mpd{ background:#fff; color:#13213A; }
.mpd .mpd-bang{ background:linear-gradient(100deg,#C8161F 0%,#D92A1F 100%); padding:10px 16px; }
.mpd .mpd-bang-t{ font-size:10px; font-weight:800; letter-spacing:.08em; color:#fff; line-height:1.25; }
.mpd .mpd-bang-lg{ text-align:right; width:146px; }
.mpd .mpd-bang-lg img{ display:inline-block; }
.mpd .mpd-hero{ position:relative; min-height:180px; background:linear-gradient(180deg,#FFF6EC 0%,#FFE8D2 100%); padding:13px 16px 14px; }
.mpd .mpd-chu{ position:relative; width:166px; }
.mpd .mpd-dl{ font-size:6.4px; font-weight:800; letter-spacing:.12em; color:#A2461A; line-height:1.35; }
.mpd .mpd-ten{ font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.08; color:#0A2F6B; margin-top:4px; }
.mpd .mpd-pb{ font-size:8.6px; font-weight:600; color:#5E6A80; margin-top:3px; line-height:1.35; }
.mpd .mpd-ny{ margin-top:9px; font-size:7.2px; color:#5E6A80; line-height:1.3; white-space:nowrap; }
.mpd .mpd-gach{ position:relative; display:inline-block; font-weight:700; }
.mpd .mpd-gach i{ position:absolute; left:0; right:0; top:54%; height:1px; background:#5E6A80; }
.mpd .mpd-con{ font-size:7.4px; font-weight:800; color:#C8161F; margin-top:5px; letter-spacing:.06em; line-height:1.2; }
.mpd .mpd-con.mpd-navy{ color:#0A2F6B; margin-top:9px; }
.mpd .mpd-gia{ font-size:21px; font-weight:800; color:#C8161F; letter-spacing:-.025em; line-height:1.15; white-space:nowrap; }
.mpd .mpd-gia.mpd-navy{ color:#0A2F6B; }
.mpd .mpd-qpill{ display:inline-block; margin-top:8px; background:#FFC53D; color:#5A3A00; font-size:7px; font-weight:800; border-radius:99px; padding:3px 9px 4px; letter-spacing:.04em; line-height:1.2; }
.mpd .mpd-car{ position:absolute; right:6px; bottom:12px; }
.mpd .mpd-bong{ position:absolute; bottom:4px; }
.mpd .mpd-huy{ position:absolute; right:12px; top:10px; width:66px; height:66px; border-radius:50%; background:#C8161F; border:3px solid #fff; box-shadow:0 3px 8px rgba(200,22,31,.30); text-align:center; color:#fff; padding-top:11px; }
.mpd .mpd-huy span{ display:block; font-size:6.4px; font-weight:800; letter-spacing:.12em; line-height:1; }
.mpd .mpd-huy b{ display:block; font-size:21px; font-weight:800; line-height:1.05; margin-top:2px; letter-spacing:-.03em; white-space:nowrap; }
.mpd .mpd-huy small{ display:block; font-size:6.2px; font-weight:800; letter-spacing:.1em; margin-top:1px; }
.mpd .mpd-than{ padding:12px 14px 0; }
.mpd .mpd-h{ font-size:10px; font-weight:800; color:#0A2F6B; line-height:1.2; }
.mpd .mpd-h span{ font-size:6.6px; font-weight:600; color:#5E6A80; }
.mpd .mpd-qua td{ vertical-align:top; padding:0 3px 6px; }
.mpd .mpd-qua td.mpd-dau{ padding-left:0; }
.mpd .mpd-qua td.mpd-cuoi{ padding-right:0; }
.mpd .mpd-o{ background:#FFF7EE; border:1px solid #FFD9B8; border-radius:10px; padding:8px 6px 8px; text-align:center; }
.mpd .mpd-o-ic{ display:inline-block; width:24px; height:24px; border-radius:50%; background:#FFC53D; line-height:24px; text-align:center; }
.mpd .mpd-o-ic svg{ display:inline-block; vertical-align:-3px; }
.mpd .mpd-o b{ display:block; font-size:7.1px; font-weight:700; color:#13213A; margin-top:5px; line-height:1.3; }
.mpd .mpd-o1{ background:#FFF7EE; border:1px solid #FFD9B8; border-radius:10px; padding:8px 10px; }
.mpd .mpd-o1 td.mpd-o1-ic{ width:32px; }
.mpd .mpd-o1 b{ font-size:8px; font-weight:700; line-height:1.3; }
.mpd .mpd-cpk{ margin-top:6px; }
.mpd .mpd-cpk.mpd-cpk--dau{ margin-top:0; }
.mpd .mpd-cp{ margin-top:5px; }
.mpd .mpd-cp td{ padding:4.6px 0; border-bottom:1px solid #ECEFF4; font-size:6.9px; color:#5E6A80; line-height:1.3; }
.mpd .mpd-cp td.mp-v{ text-align:right; color:#13213A; font-weight:700; white-space:nowrap; }
.mpd .mpd-cp td.mp-v.mp-tang{ color:#05824A; }
.mpd .mpd-cp td.mp-gap, .mpd .mpd-cp td.mp-trong{ border-bottom:0; }
.mpd .mpd-cpt{ margin-top:5px; background:#F3F6FB; border-radius:7px; padding:6px 10px; }
.mpd .mpd-cpt td{ font-size:7.8px; font-weight:800; color:#0A2F6B; line-height:1.2; }
.mpd .mpd-cpt td.mp-v{ text-align:right; font-size:9.4px; white-space:nowrap; }
.mpd .mpd-tong{ margin-top:10px; background:#0A2F6B; border-radius:12px; padding:12px 14px; }
.mpd .mpd-tong-t{ font-size:7.8px; font-weight:800; letter-spacing:.1em; color:#fff; line-height:1.3; }
.mpd .mpd-tong-p{ font-size:6.3px; color:#AFC1E0; margin-top:3px; line-height:1.3; }
.mpd .mpd-tong-so{ text-align:right; font-size:23px; font-weight:800; color:#FFC53D; letter-spacing:-.02em; white-space:nowrap; line-height:1.1; }
.mpd .mpd-tg{ margin-top:10px; border:1.5px solid #FFC53D; border-radius:12px; padding:9px 12px; background:#FFFBF2; }
.mpd .mpd-tg-dau td{ padding-bottom:6px; vertical-align:bottom; }
.mpd .mpd-tg-h{ font-size:9.4px; font-weight:800; color:#0A2F6B; line-height:1.2; }
.mpd .mpd-tg-r{ text-align:right; font-size:6.4px; color:#8A5A00; font-weight:700; line-height:1.3; }
.mpd .mpd-tg3 td{ vertical-align:top; padding-left:9px; border-left:1px solid #F3DDAA; }
.mpd .mpd-tg3 td:first-child{ padding-left:0; border-left:0; }
.mpd .mpd-tg3 span{ display:block; font-size:6.3px; color:#8A5A00; font-weight:700; line-height:1.3; }
.mpd .mpd-tg3 b{ display:block; font-size:9.4px; font-weight:800; margin-top:3px; white-space:nowrap; color:#13213A; line-height:1.2; }
.mpd .mpd-tg3 td.mpd-nb b{ font-size:11px; color:#0A2F6B; }
.mpd .mpd-sale{ margin-top:10px; padding:2px 0 2px; }
.mpd .mpd-av{ width:38px; }
.mpd .mpd-av span{ display:inline-block; width:29px; height:29px; border-radius:50%; background:#0A2F6B; color:#fff; text-align:center; line-height:29px; font-size:11px; font-weight:800; }
.mpd .mpd-av svg{ display:inline-block; vertical-align:-2px; }
.mpd .mpd-ts{ font-size:10px; font-weight:800; line-height:1.2; }
.mpd .mpd-dl2{ font-size:6.8px; color:#5E6A80; margin-top:2px; line-height:1.35; }
.mpd .mpd-cta{ width:128px; text-align:right; }
/* viên SĐT: bảng width:auto + margin-left:auto để co theo chữ và dạt phải —
   KHÔNG dùng inline-block chứa khối con (html2canvas 1.4.1 làm mất chữ bên trong) */
.mpd .mpd-cta .mpd-cta-vien{ width:auto; margin-left:auto; }
.mpd .mpd-cta-nen{ background:#0A2F6B; border-radius:99px; padding:5px 12px 6px; text-align:center; }
.mpd .mpd-cta span{ display:block; font-size:5.9px; font-weight:700; color:#FFC53D; letter-spacing:.08em; line-height:1.3; }
.mpd .mpd-cta b{ display:block; font-size:11px; font-weight:800; color:#fff; white-space:nowrap; line-height:1.2; }
.mpd .mpd-chan{ margin-top:10px; background:#FFF6EC; padding:8px 14px 10px; text-align:center; font-size:6.2px; color:#6F5B4B; line-height:1.55; }

/* ---------------- ẢNH BẢNG TRẢ GÓP chia theo năm (Gói I, 27/09/2026) ----------------
   Dựng bởi MAU_ANH_PRO.dungTraGop trong khung riêng #anh-khung-pro-tg (ngoài màn hình,
   không display:none). Đầu ảnh / thanh tổng / khối số / tư vấn viên / chân ảnh dùng lại
   đúng lớp của ảnh báo giá cùng mẫu; phần mới chỉ là thẻ từng năm (.mp-nam…):
   tiêu đề "Năm n · Tháng a - b" + tổng năm, bảng 6 cột (nhãn | số) × 3 kỳ / hàng. */
#anh-khung-pro-tg{ position:fixed; left:-9999px; top:0; width:384px; overflow:hidden; background:#fff; }
.mpq .mp-nam-bang td{ white-space:nowrap; vertical-align:middle; }
.mpq .mp-nam-t, .mpq .mp-nam-r{ white-space:nowrap; }
/* B′: thẻ giấy ngà viền champagne, tiêu đề năm gạch chân nâu đậm như dòng tổng phí */
.mpb .mpb-nam-ds{ margin-top:8px; }
.mpb .mp-nam{ margin-top:8px; border:1px solid #D3C7B2; background:#FBF8F2; padding:7px 10px 2px; }
.mpb .mp-nam:first-child{ margin-top:0; }
.mpb .mp-nam-dau td{ vertical-align:bottom; padding:0 0 5px; border-bottom:1.5px solid #4A3F33; }
.mpb .mp-nam-t{ font-size:6.6px; font-weight:600; color:#6E6456; line-height:1.3; }
.mpb .mp-nam-t b{ font-size:9.6px; font-weight:800; color:#2A251F; letter-spacing:-.005em; }
.mpb .mp-nam-r{ text-align:right; font-size:6.4px; font-weight:700; color:#7A5A30; line-height:1.3; }
.mpb .mp-nam-r b{ font-size:8.8px; font-weight:800; color:#2A251F; }
.mpb .mp-nam-bang td{ padding:4.7px 0; border-bottom:1px solid #E6DCCB; font-size:6.5px; color:#6E6456; line-height:1.3; }
.mpb .mp-nam-bang tr:last-child td{ border-bottom:0; }
.mpb .mp-nam-bang td.mp-v{ text-align:right; padding-right:6px; font-size:7.2px; font-weight:700; color:#2A251F; }
.mpb .mp-nam-bang td.mp-nk2{ padding-left:6px; border-left:1px solid #E6DCCB; }
.mpb.mp-tc-nhan .mp-nam-dau td{ border-bottom-color:var(--mp-tc); }
.mpb.mp-tc-nhan .mp-nam-r{ color:var(--mp-tc); }
/* D: thẻ trắng bo 10px, dải tiêu đề xanh nhạt như ô "Tổng chi phí đăng ký" */
.mpd .mpd-nam-ds{ margin-top:6px; }
.mpd .mp-nam{ margin-top:7px; border:1px solid #E1E7F0; border-radius:10px; overflow:hidden; background:#fff; }
.mpd .mp-nam:first-child{ margin-top:0; }
.mpd .mp-nam-dau{ background:#F3F6FB; }
.mpd .mp-nam-dau td{ padding:6px 10px; vertical-align:middle; }
.mpd .mp-nam-t{ font-size:6.6px; font-weight:600; color:#5E6A80; line-height:1.3; }
.mpd .mp-nam-t b{ font-size:9.4px; font-weight:800; color:#0A2F6B; }
.mpd .mp-nam-r{ text-align:right; font-size:6.4px; font-weight:700; color:#5E6A80; line-height:1.3; }
.mpd .mp-nam-r b{ font-size:9px; font-weight:800; color:#0A2F6B; }
.mpd .mp-nam-bang td{ padding:4.5px 0; border-top:1px solid #ECEFF4; font-size:6.5px; color:#5E6A80; line-height:1.3; }
.mpd .mp-nam-bang tr:first-child td{ border-top:0; }
.mpd .mp-nam-bang td.mp-nk{ padding-left:10px; }
.mpd .mp-nam-bang td.mp-v{ text-align:right; padding-right:7px; font-size:7.2px; font-weight:700; color:#13213A; }
.mpd .mp-nam-bang td.mp-nk2{ padding-left:7px; border-left:1px solid #ECEFF4; }
.mpd.mp-tc-nhan .mp-nam-t b,
.mpd.mp-tc-nhan .mp-nam-r b{ color:var(--mp-tc); }

/* Số tiền ưu đãi ("−15.000.000 đ") LUÔN xanh lá ở mọi mẫu / mọi màu nhấn (Vũ chốt 29/09/2026);
   giá sau ưu đãi giữ màu gốc của mẫu. Mặc định nền sáng → xanh đậm #03703E (≥ 4,5:1);
   B′ (hero tối #101216) → xanh app #05A65B (≈ 5,9:1). Chỉ đổi màu, không đổi cỡ/vị trí.
   D (Ưu đãi tháng) không có ô số tiền ưu đãi: huy hiệu "GIẢM x TRIỆU" giữ nguyên. */
.mpq .mp-xanh{ color:#03703E; }
.mpb .mpb-gia .mp-xanh,
.mpb.mp-tc-nhan .mpb-gia .mp-xanh{ color:#05A65B; }