/* ============================================================
   AUTOSALES PRO — BỘ CHỌN MẪU ẢNH BÁO GIÁ (25/09/2026, làm lại 26/09/2026)
   Giao diện app (KHÔNG phải ảnh chụp) cho pwa/js/mau-anh-chon.js:
   thẻ ĐANG DÙNG, mục Tuỳ chỉnh báo giá (27/09/2026), lưới 4 kiểu (2 cột điện thoại / 4 cột máy tính), chấm tông
   màu của kiểu Sang trọng, màn xem trước nền tối có băng chuyền vuốt ngang,
   tấm đổi mẫu nhanh ở báo giá, hộp xem trước máy tính, bảng "gói Pro".
   Tiền tố "mpc-".
   ============================================================ */

/* Giá trị bên phải dòng "Mẫu ảnh báo giá" ở Thiết lập */
.mpc-hanh-gt{ flex:none; max-width:42%; font-size:13.5px; color:var(--muc-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Nhãn PRO dạng chữ (tiêu đề xem trước) */
.mpc-pro{
  display:inline-block; padding:3px 7px; border-radius:6px;
  background:linear-gradient(135deg,#E9C77B,#B8872B); color:#2A1D05;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; line-height:1.2; vertical-align:3px;
}
.mpc-pro[hidden]{ display:none; }

/* ---------- ô ảnh thu nhỏ (+ trạng thái ảnh lỗi/chưa có) ---------- */
.mpc-anh-o{ display:block; position:relative; overflow:hidden; background:#EEF0F3; }
.mpc-anh-o > img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
/* Ảnh 404 (VD mẫu mới chưa có ảnh thu nhỏ) → ô trống nhã nhặn, không icon ảnh vỡ */
.mpc-anh-loi{ background:linear-gradient(160deg,#F4F5F8 0%,#E6E9EF 100%); }
.mpc-anh-loi > img[data-mpc-nho]{ visibility:hidden; }
.mpc-anh-loi::after{
  content:"Ảnh mẫu đang cập nhật"; position:absolute; left:10%; right:10%; top:50%; transform:translateY(-50%);
  text-align:center; font-size:11px; font-weight:600; line-height:1.35; color:var(--muc-3);
}

/* ---------- nhãn PRO + dấu ✓ trên ảnh ---------- */
.mpc-nhan-pro{
  position:absolute; left:8px; top:8px; z-index:1; padding:3px 7px; border-radius:6px;
  background:linear-gradient(135deg,#E9C77B,#B8872B); color:#2A1D05;
  font-size:10px; font-weight:800; letter-spacing:.05em; line-height:1.2;
}
.mpc-nhan-thu{
  position:absolute; left:7px; top:7px; z-index:2; padding:3px 6px; border-radius:5px;
  background:#EDE6FF; color:#51309A; font-size:10px; font-weight:800; line-height:1.2;
}
.mpc-pro.mpc-nhan-thu{ position:static; vertical-align:3px; }
.mpc-tick{
  position:absolute; right:8px; top:8px; z-index:1; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--nhan); color:var(--tren-nhan);
  box-shadow:0 0 0 2px #fff;
}

/* ============ ĐIỆN THOẠI — màn danh sách ============ */
#app .mpc-than{ padding:4px var(--le-man) 0; }
.mpc-dang{
  display:flex; align-items:center; gap:12px; width:100%; min-height:92px; padding:10px 14px 10px 10px;
  border:0; border-radius:var(--bo-the); background:var(--mat); box-shadow:var(--bong);
  font-family:inherit; color:var(--muc); text-align:left; cursor:pointer; touch-action:manipulation;
}
.mpc-dang:active{ opacity:.8; }
.mpc-dang-anh{ flex:none; width:54px; height:72px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--ke-2); }
.mpc-dang-chu{ flex:1; min-width:0; }
.mpc-dang-chu small{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muc-3); }
.mpc-dang-chu b{ display:block; margin-top:2px; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc-dang-chu em{ display:block; margin-top:3px; font-style:normal; font-size:12px; font-weight:600; color:var(--canh); }
.mpc-dang-xem{ flex:none; font-size:14px; font-weight:700; color:var(--nhan); }
/* Mục "Tuỳ chỉnh báo giá" ngay dưới thẻ Đang dùng (27/09/2026, gom từ Thiết lập): 1 dòng .gd-hanh (biểu tượng, tên + nhãn
   PRO, phụ đề, bộ đang dùng, ›) trong thẻ trắng cùng kiểu thẻ Đang dùng. Chữ + nút do pwa/js/tuy-chinh.js (veLoiVao) lo */
.mpc-tc{ margin-top:10px; padding:2px 14px 2px 10px; border-radius:var(--bo-the); background:var(--mat); box-shadow:var(--bong); }
/* biểu tượng 36px nằm giữa cột ảnh 54px của thẻ Đang dùng (9 + 36 + 9) → chữ 2 thẻ thẳng hàng */
.mpc-tc-ic{ margin:0 9px; }
.mpc-tc-nut{ transition:opacity var(--nhanh); }
.mpc-tc-nut:focus-visible{ outline:2px solid var(--nhan); outline-offset:2px; border-radius:10px; }
/* "Đang dùng: <bộ>": tên bộ dài (tới 24 ký tự + " (cần Pro)") xuống nguyên dòng dưới thay vì bị cắt mất "(cần Pro)" */
.mpc-tc .mpc-tc-dung{ white-space:normal; }
.mpc-tc-dung b{
  display:inline-block; max-width:100%; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:700; color:var(--muc);
}

/* lưới ảnh to */
.mpc-luoi{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
.mpc-the{
  display:block; width:100%; min-width:0; padding:0; border:0; background:none; text-align:left;
  font-family:inherit; color:var(--muc); cursor:pointer; touch-action:manipulation;
}
/* Khung 3:4.2 = height:0 + padding-top:140% (đệm % tính theo bề rộng), KHÔNG dùng
   aspect-ratio: khung chỉ có con tuyệt đối, nằm trong <button> ô lưới → Safari < 16.4
   có thể tính cao = 0 (cùng lỗi thẻ xe trang chủ iOS 16.1, xem giao-dien-moi.css). */
.mpc-the-khung{
  display:block; position:relative; border-radius:14px; overflow:hidden; height:0; padding-top:140%; background:#fff;
  box-shadow:0 1px 2px rgba(16,19,25,.06), 0 8px 18px -10px rgba(16,19,25,.25);
  transition:box-shadow var(--nhanh), transform var(--nhanh);
}
.mpc-the-khung > .mpc-anh-o{ position:absolute; inset:0; }
.mpc-the.chon .mpc-the-khung{ box-shadow:0 0 0 3px var(--nhan), 0 8px 18px -10px rgba(37,99,235,.5); }
.mpc-the:active .mpc-the-khung{ transform:scale(.98); }
.mpc-the:focus-visible{ outline:none; }
.mpc-the:focus-visible .mpc-the-khung{ box-shadow:0 0 0 3px var(--nhan-dam); }
.mpc-the-ten{ display:block; margin-top:8px; padding-left:2px; font-size:14px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc-the-phu{ display:block; margin-top:1px; padding-left:2px; font-size:12px; color:var(--muc-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Hết Pro (Gói E, 27/09/2026): mẫu Pro đã chọn nhưng ảnh đang ra mẫu Cơ bản → dòng phụ "Đã chọn · cần gói Pro" màu cảnh
   báo (dấu chọn nằm ở Cơ bản, mẫu sẽ dùng); dòng phụ "Mẫu ảnh báo giá" ở Thiết lập cũng vậy */
.mpc-the-phu.mpc-the-khoa{ font-weight:600; color:var(--canh); }
#app small.mpc-phu-khoa{ font-weight:600; color:var(--canh); }

/* ============ ĐIỆN THOẠI — màn xem trước (nền tối) ============ */
#app #man-mau-anh-xem{ background:#0E1015; color:#fff; }
#app #man-mau-anh-xem .thanh-tren.mpc-xem-tren{ background:#0E1015; }
#app #man-mau-anh-xem .mpc-xem-tren .ic{ background:rgba(255,255,255,.1); box-shadow:none; }
#app #man-mau-anh-xem .mpc-xem-tren .ic svg{ stroke:#fff; }
#app #man-mau-anh-xem .mpc-xem-tren .tieu-de{ color:#fff; text-align:center; }
.mpc-dem{ flex:none; width:44px; text-align:right; font-size:13.5px; font-weight:600; color:#9AA0AB; font-variant-numeric:tabular-nums; }
#app #man-mau-anh-xem > .than.mpc-xem-than{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.mpc-bang{ position:relative; flex:1; min-height:200px; overflow:hidden; touch-action:pan-y; }
.mpc-ray{ position:absolute; inset:8px 0; }
.mpc-la{
  position:absolute; left:50%; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
  will-change:transform; cursor:pointer;
}
.mpc-la--giua{ cursor:default; }
.mpc-la-khung{
  flex:none; width:100%; height:auto; aspect-ratio:.6; border-radius:14px; background:#1C1F26;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.6);
}
/* 2 lớp: ảnh thu nhỏ (có ngay, rộng khít, neo trên) + ảnh thật (giải mã xong mới fade vào).
   Khung có cỡ cố định theo tỉ lệ ảnh thật (JS) → thay lớp không nhảy layout. */
.mpc-anh-o > img.mpc-la-tam{
  position:absolute; left:0; top:0; width:100%; height:auto; object-fit:initial;
  -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent);
}
.mpc-anh-o > img.mpc-la-that{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center top;
  opacity:0; transition:opacity .24s ease-out;
}
.mpc-anh-o > img.mpc-la-that.hien{ opacity:1; }
.mpc-la-that:not([src]){ display:none; }
/* đổi ảnh thu nhỏ (đổi tông…) → hiện dần */
.mpc-fade{ animation:mpcFade .22s ease-out; }
@keyframes mpcFade{ from{ opacity:.35; } to{ opacity:1; } }
.mpc-la-khung.mpc-anh-loi{ background:linear-gradient(160deg,#23262E,#171A20); }
.mpc-la-khung.mpc-anh-loi::after{ content:""; }
.mpc-la-cho{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); max-width:calc(100% - 24px);
  padding:7px 12px; border-radius:var(--bo-pill); background:rgba(14,16,21,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:12px; font-weight:600; text-align:center; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mpc-la-cho[hidden]{ display:none; }
/* Mẫu chưa có bộ dựng: nhãn nằm giữa ảnh, ảnh tạm mờ đi */
.mpc-la--chua .mpc-la-cho{ bottom:auto; top:50%; transform:translate(-50%,-50%); white-space:normal; font-size:13px; padding:10px 16px; }
.mpc-la--chua .mpc-la-tam, .mpc-la--chua.mpc-dt-khung .mpc-la-tam{ opacity:.35; }

.mpc-xem-thong{ flex:none; padding:10px 24px 0; text-align:center; }
.mpc-xem-ten{ display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.mpc-xem-ten b{ font-size:19px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc-xem-ten .mpc-pro{ vertical-align:0; flex:none; }
.mpc-xem-mota{ margin:4px 0 0; min-height:2.9em; font-size:13px; line-height:1.45; color:#C9CDD5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mpc-xem-ghi{ margin:3px 0 0; font-size:11.5px; line-height:1.4; color:#8A909C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mpc-dai{
  flex:none; display:flex; gap:7px; justify-content:center; padding:12px 16px 4px;
  overflow-x:auto; scrollbar-width:none;
}
.mpc-dai::-webkit-scrollbar{ display:none; }
.mpc-dai-o{
  flex:none; width:36px; height:48px; padding:0; border:0; border-radius:7px; background:none; cursor:pointer;
  opacity:.45; transition:opacity var(--nhanh), box-shadow var(--nhanh); touch-action:manipulation;
  position:relative;
}
/* vùng chạm ≥ 44px dù ô nhìn 36×48 */
.mpc-dai-o::before{ content:""; position:absolute; inset:-4px -4px; }
.mpc-dai-o .mpc-anh-o{ width:100%; height:100%; border-radius:7px; background:#2A2E37; }
.mpc-dai-o .mpc-anh-loi::after{ content:""; }
.mpc-dai-o.on{ opacity:1; box-shadow:0 0 0 2px #fff; }
.mpc-dai-o:active{ transform:scale(.94); }
.mpc-dai-o:focus-visible{ outline:2px solid var(--nhan); outline-offset:3px; }

#app #man-mau-anh-xem .dock.mpc-xem-dock{ background:#0E1015; border-top:0; }
#app #man-mau-anh-xem .mpc-xem-dock .nut--chinh{ height:52px; }
#app #man-mau-anh-xem .mpc-xem-dock .nut--chinh:disabled{ background:rgba(255,255,255,.12); color:#C9CDD5; opacity:1; }


/* ============ ĐIỆN THOẠI — nút mẫu ảnh ở thanh đáy báo giá ============ */
#app .dock.gd-dock-bg{ flex-wrap:wrap; row-gap:4px; padding-top:2px; }   /* specific hơn giao-dien-moi.css (nạp sau) */
.mpc-bg-mau{
  flex:0 0 100%; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; margin:0; padding:0 8px; border:0; background:none;
  font-family:inherit; font-size:13px; color:var(--muc-2); cursor:pointer; touch-action:manipulation;
}
.mpc-bg-mau b{ font-weight:700; color:var(--muc); }
.mpc-bg-mau svg{ flex:none; stroke:var(--muc-3); }
.mpc-bg-mau:active{ opacity:.6; }
.mpc-bg-chu{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Mẫu đã chọn cần gói Pro (hết Pro): " · Showroom cần gói Pro" sau tên mẫu sẽ dùng (B14, 27/09/2026) */
.mpc-bg-khoa{ font-weight:600; color:var(--canh); }
.mpc-bg-anh{ flex:none; width:20px; height:27px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--ke-2); }
.mpc-bg-anh.mpc-anh-loi::after{ content:""; }

/* ============ ĐIỆN THOẠI — tấm "Chọn mẫu ảnh" ============ */
.mpc-tam-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px 0 20px; }
.mpc-tam-tit{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.mpc-link{
  min-height:44px; padding:0 8px; border:0; background:none; font-family:inherit;
  font-size:14.5px; font-weight:700; color:var(--nhan); cursor:pointer;
}
.mpc-ngang{ display:grid; grid-auto-flow:column; grid-auto-columns:82px; gap:10px; padding:12px 20px 6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.mpc-ngang::-webkit-scrollbar{ display:none; }
.mpc-ngang-o{
  min-width:0; padding:4px 0 0; border:0; background:none; text-align:left; cursor:pointer;
  font-family:inherit; color:var(--muc); touch-action:manipulation;
}
.mpc-ngang-o .mpc-the-khung{ transition:box-shadow var(--nhanh), transform var(--nhanh); }
.mpc-ngang-o:active .mpc-the-khung{ transform:scale(.96); }
.mpc-ngang-o .mpc-the-khung{ border-radius:10px; }
.mpc-ngang-o .mpc-nhan-pro{ left:5px; top:5px; font-size:9px; padding:2px 5px; border-radius:5px; }
.mpc-ngang-o .mpc-nhan-thu{ left:4px; top:4px; font-size:8px; padding:2px 4px; }
.mpc-ngang-o .mpc-tick{ right:5px; top:5px; width:22px; height:22px; display:none; }
.mpc-ngang-o.chon .mpc-tick{ display:grid; }
.mpc-ngang-o.chon .mpc-the-khung{ box-shadow:0 0 0 3px var(--nhan), 0 8px 18px -10px rgba(37,99,235,.5); }
.mpc-ngang-o .mpc-anh-loi::after{ font-size:10px; }
.mpc-ngang-ten{ display:block; margin-top:7px; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc-tam-trang{ margin:6px 20px 0; min-height:18px; font-size:12.5px; color:var(--muc-2); }
.mpc-tam-nut{ padding:10px 20px 0; }
.mpc-tam-nut .nut{ height:52px; }

/* ============ MÁY TÍNH — lưới 4 cột + hộp xem trước ============ */
.mpc-dt-luoi{ margin-top:14px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px 14px; }
.mpc-dt-luoi .mpc-the-khung{ box-shadow:0 0 0 1px var(--dt-vien, #E3E5EA), 0 8px 18px -12px rgba(16,19,25,.22); }
.mpc-dt-luoi .mpc-the.chon .mpc-the-khung{ box-shadow:0 0 0 3px var(--nhan), 0 8px 18px -10px rgba(37,99,235,.45); }
.mpc-dt-luoi .mpc-the:hover .mpc-the-khung{ transform:translateY(-2px); }

.tam:has(.mpc-dt-xem){ max-width:600px; width:calc(100% - 60px); }
.tam.mpc-dt-xem--tam{ max-width:600px; width:calc(100% - 60px); }   /* máy chưa có :has(), lớp do khung.js gắn */
.mpc-dt-xem{ padding:0 20px; }
.mpc-dt-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mpc-dt-ten{ display:flex; align-items:center; gap:8px; min-width:0; }
.mpc-dt-ten b{ font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mpc-dt-ten .mpc-pro{ vertical-align:0; }
.mpc-dt-dem{ flex:none; font-size:13px; font-weight:600; color:var(--muc-3); font-variant-numeric:tabular-nums; }
.mpc-dt-mota{ margin:4px 0 12px; font-size:13px; line-height:1.45; color:var(--muc-2); }
.mpc-dt-san{ display:flex; align-items:center; gap:10px; }
.mpc-dt-khung{
  flex:1; min-width:0; height:calc(100vh - 390px); max-height:62vh; min-height:280px; border-radius:14px; background:var(--nen);
}
.mpc-dt-khung > img.mpc-la-tam{ inset:0; height:100%; object-fit:contain; object-position:center top; -webkit-mask-image:none; mask-image:none; }
.mpc-dt-khung .mpc-la-cho{ bottom:12px; }
.mpc-dt-tong{ display:flex; align-items:center; gap:10px; margin:-4px 0 10px; }
.mpc-dt-tong .mpc-cham-hang{ justify-content:flex-start; margin-left:-7px; }
.mpc-dt-tong .mpc-tong-ten{ font-size:13px; font-weight:600; color:var(--muc-2); }
.mpc-dt-mui{
  flex:none; width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center;
  background:var(--mat); color:var(--muc); box-shadow:0 0 0 1px var(--ke-2), 0 4px 10px -6px rgba(16,19,25,.3); cursor:pointer;
}
.mpc-dt-mui:hover:not(:disabled){ background:var(--nhan-nhat); color:var(--nhan-dam); }
.mpc-dt-mui:disabled{ opacity:.35; cursor:default; }
.mpc-dt-mui:focus-visible{ outline:2px solid var(--nhan); outline-offset:2px; }
.mpc-dt-ghi{ margin:10px 0 14px; font-size:12px; color:var(--muc-3); text-align:center; }

/* ============ CHẤM TÔNG MÀU (kiểu Sang trọng — 5 tông) ============
   Chấm 2 nửa: màu nền + màu nhấn của tông (bảng màu pwa/js/mau-lai.js) —
   Navy vs Blue Hour cùng xanh đậm nên nửa nhấn khác hẳn nhau.
   to: màn xem trước (nền tối) · vua: tấm/hộp máy tính · nho: lưới (chỉ báo). */
.mpc-cham-hang{ display:flex; align-items:center; justify-content:center; gap:2px; }
.mpc-cham{
  position:relative; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:none; display:grid; place-items:center; cursor:pointer; touch-action:manipulation;
}
.mpc-cham-o{
  display:block; width:28px; height:28px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(16,19,25,.18);
  transition:box-shadow var(--nhanh), transform var(--nhanh);
}
.mpc-cham:active .mpc-cham-o{ transform:scale(.9); }
.mpc-cham.on .mpc-cham-o{ box-shadow:inset 0 0 0 1px rgba(16,19,25,.18), 0 0 0 2px var(--mat), 0 0 0 4px var(--nhan); }
.mpc-cham:focus-visible{ outline:2px solid var(--nhan); outline-offset:0; }
.mpc-cham--to .mpc-cham-o{ width:30px; height:30px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.mpc-cham--to.on .mpc-cham-o{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 3px #0E1015, 0 0 0 5px var(--nhan); }
/* chỉ báo nhỏ ở lưới — không bấm được (bấm cả ô = mở xem trước) */
.mpc-cham-hang--nho{ display:inline-flex; gap:3px; margin-right:6px; vertical-align:-1px; }
.mpc-cham-hang--nho .mpc-cham-o{ width:10px; height:10px; box-shadow:inset 0 0 0 1px rgba(16,19,25,.2); }

/* màn xem trước: hàng chấm to + tên tông, giữa tên mẫu và nút */
.mpc-xem-tong{ flex:none; padding:2px 16px 0; text-align:center; }
/* kiểu không có tông: GIỮ CHỖ (visibility) — ẩn hẳn thì băng chuyền co/giãn → ảnh nhảy */
/* ẩn/hiện hàng chấm tông: mờ dần (var(--nhanh)) thay cho bật/tắt đột ngột; visibility
   trễ theo để vẫn không chạm được khi đã ẩn */
.mpc-tam-tong, .mpc-xem-tong, .mpc-dt-tong{ transition:opacity var(--nhanh), visibility 0s linear 0s; }
.mpc-giu-cho{ visibility:hidden; opacity:0; transition:opacity var(--nhanh), visibility 0s linear var(--nhanh); }
.mpc-xem-tong .mpc-tong-ten{ margin:0; font-size:12.5px; font-weight:600; color:#C9CDD5; }
/* tấm đổi mẫu */
.mpc-tam-tong{ display:flex; align-items:center; gap:6px; padding:6px 13px 0; }
/* .mpc-giu-cho: giữ chỗ — tấm không co/giãn khi đổi kiểu */
.mpc-tam-tong .mpc-tong-ten{ font-size:13px; font-weight:600; color:var(--muc-2); }

/* ============ BẢNG "TÍNH NĂNG DÀNH CHO GÓI PRO" (mobile tấm + desktop hộp) ============ */
.mpc-pt{ padding:4px 22px 0; text-align:center; }
.mpc-pt-bieu{
  width:60px; height:60px; margin:2px auto 0; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg,#E9C77B,#B8872B); color:#2A1D05;
  box-shadow:0 10px 24px -12px rgba(184,135,43,.8);
}
.mpc-pt-nhan{ margin-top:12px; vertical-align:0; }
.mpc-pt-tit{ margin:8px 0 0; font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.3; color:var(--muc); }
.mpc-pt-ghi{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--muc-2); }
.mpc-pt-ghi b{ color:var(--muc); font-weight:700; }
.mpc-pt-ds{ list-style:none; margin:14px 0 0; padding:12px 14px; border-radius:14px; background:var(--nen); text-align:left; }
.mpc-pt-ds li{ position:relative; padding:5px 0 5px 28px; font-size:13.5px; line-height:1.45; color:var(--muc); font-weight:600; }
.mpc-pt-ds li::before{
  content:""; position:absolute; left:2px; top:7px; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#E9C77B,#B8872B);
}
.mpc-pt-ds li::after{
  content:""; position:absolute; left:8px; top:11px; width:5px; height:8px;
  border:solid #2A1D05; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mpc-pt-nut{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.mpc-pt-nut .nut{ height:52px; }
.mpc-pt-nut .nut--phu{ height:48px; background:none; border-color:transparent; color:var(--muc-2); }

@media (prefers-reduced-motion: reduce){
  .mpc-la{ transition:none !important; }
  .mpc-the-khung, .mpc-dai-o, .mpc-cham, .mpc-la-that, .mpc-la-khung, .mpc-tc-nut{ transition:none !important; }
  .mpc-fade{ animation:none !important; }
}