/* ============================================================
   AUTOSALES PRO · GÓI PRO + MỜI BẠN (26/09/2026) · pwa/js/goi-pro.js
   Tiền tố gp- cho mọi lớp mới. Dùng lại token của nen-tang.css; bản máy
   tính đặt trong .dt-dialog nên tự nhận tông màu desktop.
   ============================================================ */
:root{
  --gp-vang-1:#E9C77B;
  --gp-vang-2:#B8872B;
  --gp-vang-chu:#8A6212;
  --gp-vang-nen:#FBF3E1;
  --gp-toi-1:#141A2B;
  --gp-toi-2:#0B0E16;
}

/* ---------- tab Pro ở thanh dưới ---------- */
#app .thanh-tab a.gp-tab{ color:var(--gp-vang-2); }
#app .thanh-tab a.gp-tab svg{ stroke:currentColor; }
#app .thanh-tab a.gp-tab.dang{ color:var(--gp-vang-chu); }
#app .thanh-tab a.gp-tab.dang svg path:first-child{ fill:rgba(233,199,123,.55); }
.dt-nav .gp-dt-nav svg{ stroke:var(--gp-vang-2); }

.gp-an{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gp-goc{ padding-bottom:6px; }
#app .gp-goc{ padding:0 var(--le-man) 6px; }
#gp-chao-than, #gp-the-le-than{ padding:0 var(--le-man); }

/* ---------- hero ---------- */
.gp-hero{
  position:relative; overflow:hidden; border-radius:22px; color:#fff;
  padding:20px 18px 18px; margin-top:4px;
  background:linear-gradient(160deg,var(--gp-toi-1),var(--gp-toi-2) 70%);
}
.gp-hero::after{
  content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle,rgba(233,199,123,.33),transparent 70%); pointer-events:none;
}
.gp-nhan{
  display:inline-block; padding:4px 9px; border-radius:7px;
  background:linear-gradient(135deg,var(--gp-vang-1),var(--gp-vang-2));
  color:#2A1D05; font-size:11px; font-weight:800; letter-spacing:.06em;
}
.gp-hero-tit{ font-size:23px; line-height:1.25; font-weight:800; letter-spacing:-.02em; margin:10px 0 6px; }
.gp-hero-phu{ font-size:13px; line-height:1.5; color:#B9BFCB; }
.gp-hero-anh{ display:flex; gap:6px; margin-top:14px; position:relative; z-index:1; }
.gp-hero-anh img{
  width:calc((100% - 18px) / 4); aspect-ratio:3/4.2; object-fit:cover; object-position:top;
  border-radius:8px; background:#1E2536;
}

/* ---------- khối chung ---------- */
.gp-khoi{ background:var(--mat); border-radius:var(--bo-the); padding:14px 16px; margin-top:12px; box-shadow:var(--bong); }
.gp-khoi-tit{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.gp-ql{ list-style:none; margin-top:6px; }
.gp-ql li{ display:flex; gap:11px; align-items:flex-start; padding:8px 0; }
.gp-ql-ic{
  flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--gp-vang-nen); color:var(--gp-vang-chu);
}
.gp-ql b{ display:block; font-size:13.5px; line-height:1.35; }
.gp-ql small{ display:block; font-size:12px; color:var(--muc-2); margin-top:2px; }
.gp-ghi-beta{
  margin-top:8px; padding:10px 12px; border-radius:12px; font-size:12.5px; line-height:1.5;
  background:var(--gp-vang-nen); color:#6B4E14;
}

/* ---------- thẻ giá duy nhất ---------- */
.gp-gia{
  margin-top:12px; padding:14px 16px; border-radius:16px; background:#F7F9FF;
  box-shadow:inset 0 0 0 2px var(--nhan);
}
.gp-gia-ten{ font-size:12.5px; font-weight:700; color:var(--muc-2); }
.gp-gia-so{ display:flex; align-items:baseline; gap:3px; margin-top:4px; }
.gp-gia-so b{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--muc); }
.gp-gia-so span{ font-size:14px; font-weight:600; color:var(--muc-2); }
.gp-gia-phu{ font-size:12.5px; color:var(--muc-2); margin-top:3px; }
.gp-nut-mua{ margin-top:12px; }
.gp-nho{ font-size:12.5px; line-height:1.5; color:var(--muc-2); margin-top:8px; }
.gp-nho b{ color:var(--muc); }
.gp-cuoi{ text-align:center; margin-top:10px; }

.gp-cho-don{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding:10px 12px; border-radius:14px; font-size:13px;
  background:var(--nhan-nhat); color:var(--nhan-dam);
}
.gp-cho-don button{
  min-height:44px; padding:0 12px; border:0; border-radius:10px; background:var(--mat);
  color:var(--nhan); font:inherit; font-weight:700; cursor:pointer;
}

/* link dạng chữ, vùng chạm đủ 44px */
.gp-lk{
  min-height:44px; padding:0 10px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700; color:var(--nhan);
}
.gp-lk--tron{ min-height:44px; padding:0 4px; font-size:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---------- đã Pro: Gói của tôi ---------- */
.gp-cua-toi{ background:var(--mat); border-radius:var(--bo-the); padding:16px; margin-top:4px; box-shadow:var(--bong); }
.gp-ct-dau{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.gp-ct-dau b{ display:block; font-size:17px; font-weight:800; }
.gp-ct-dau small{ display:block; font-size:12.5px; color:var(--tot); font-weight:600; margin-top:2px; }
.gp-vuong{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#3A2A08;
  background:linear-gradient(135deg,var(--gp-vang-1),var(--gp-vang-2));
}

/* ---------- bảng dòng Nhãn / Giá trị ---------- */
.gp-bang{ margin-top:6px; }
.gp-dong{
  display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 0;
  border-bottom:1px solid var(--ke); font-size:13.5px;
}
.gp-dong:last-child{ border-bottom:0; }
.gp-dong span{ color:var(--muc-2); }
.gp-dong b{ margin-left:auto; text-align:right; font-weight:700; }
.gp-nut-chep{
  flex:none; min-width:44px; min-height:36px; padding:0 10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--ke-2); background:var(--mat); color:var(--nhan);
  font:inherit; font-size:12.5px; font-weight:700;
}
.gp-dong .gp-nut-chep{ margin-left:0; }

/* ---------- Mời bạn ---------- */
.gp-moi-dau{ display:flex; gap:12px; align-items:flex-start; }
.gp-moi-ic{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--gp-vang-nen); color:var(--gp-vang-chu);
}
.gp-moi-phu{ font-size:12.5px; line-height:1.5; color:var(--muc-2); margin-top:3px; }
.gp-ma{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px;
  border-radius:14px; border:1.5px dashed var(--gp-vang-1); background:#FFFCF5;
}
.gp-ma-nhan{ font-size:12px; color:var(--muc-2); font-weight:600; }
.gp-ma-so{ flex:1; font-size:24px; font-weight:800; letter-spacing:.08em; color:var(--muc); text-align:center; }
.gp-ma .gp-nut-chep{ min-height:44px; }
.gp-moi-nut{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.gp-moi-nut .nut{ height:48px; font-size:14px; padding:0 8px; }
.gp-thong-ke{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.gp-thong-ke > div{ background:var(--nen); border-radius:12px; padding:10px 12px; }
.gp-thong-ke b{ display:block; font-size:17px; font-weight:800; }
.gp-thong-ke small{ display:block; font-size:12px; color:var(--muc-2); margin-top:1px; }
.gp-ds{ list-style:none; margin-top:10px; }
.gp-ds li{
  display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px;
  border-bottom:1px solid var(--ke); font-size:13.5px;
}
.gp-ds li:last-child{ border-bottom:0; }
.gp-tt{ font-size:12px; font-weight:700; padding:4px 9px; border-radius:var(--bo-pill); white-space:nowrap; }
.gp-tt--cho{ background:var(--nen); color:var(--muc-2); }
.gp-tt--kiem{ background:var(--canh-nhat); color:var(--canh); }
.gp-tt--da{ background:var(--tot-nhat); color:var(--tot); }
.gp-tt--huy{ background:var(--loi-nhat); color:var(--loi); }
.gp-tt--hoan{ background:var(--nhan-nhat); color:var(--nhan-dam); }
.gp-nhap{ margin-top:10px; font-size:13px; color:var(--muc-2); }
.gp-nhap p{ display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; }
.gp-nhap small{ font-size:12px; color:var(--muc-3); }
.gp-nhap-form{ display:flex; gap:8px; margin-top:6px; }
.gp-nhap-form:not([hidden]){ display:flex; }
.gp-nhap-o{ flex:1; min-width:0; height:48px; text-transform:uppercase; letter-spacing:.06em; }
.gp-nhap-form .nut{ height:48px; padding:0 16px; flex:none; }
.gp-loi{ color:var(--loi); font-size:12.5px; font-weight:600; margin-top:6px; min-height:0; }
.gp-loi:empty{ display:none; }

/* ---------- vừa huỷ trên payOS: thông báo nhẹ đầu tab ---------- */
.gp-huy{
  position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:4px 0 12px; padding:12px 44px 12px 14px; border-radius:16px;
  background:var(--mat); box-shadow:var(--bong), inset 3px 0 0 var(--canh);
}
.gp-huy-chu{ flex:1 1 180px; min-width:0; }
.gp-huy-chu b{ display:block; font-size:14px; font-weight:800; color:var(--muc); }
.gp-huy-chu small{ display:block; font-size:12.5px; line-height:1.45; color:var(--muc-2); margin-top:2px; }
.gp-huy-nut{ height:44px; padding:0 16px; font-size:14px; flex:none; }
.gp-huy-an{
  position:absolute; top:4px; right:4px; width:44px; height:44px; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--muc-3); border-radius:12px;
}
.gp-dt .gp-huy{ box-shadow:0 0 0 1px var(--ke-2), inset 3px 0 0 var(--canh); }

/* ---------- Pro đã hết hạn: thẻ đầu tab (cùng kiểu thẻ vừa huỷ) ---------- */
.gp-het{
  margin:4px 0 12px; padding:12px 14px; border-radius:16px;
  background:var(--mat); box-shadow:var(--bong), inset 3px 0 0 var(--canh);
}
.gp-het b{ display:block; font-size:14px; font-weight:800; color:var(--muc); }
.gp-het small{ display:block; font-size:12.5px; line-height:1.45; color:var(--muc-2); margin-top:2px; }
.gp-dt .gp-het{ box-shadow:0 0 0 1px var(--ke-2), inset 3px 0 0 var(--canh); }
/* quản trị: dòng nhỏ thay chỗ nút mua / gia hạn */
.gp-qt{ margin-top:12px; }

/* ---------- Lịch sử thanh toán ---------- */
.gp-ls-ds{ list-style:none; margin-top:6px; }
.gp-ls-dong{ padding:11px 0; border-bottom:1px solid var(--ke); }
.gp-ls-dong:last-child{ border-bottom:0; }
.gp-ls-tren, .gp-ls-giua, .gp-ls-duoi{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gp-ls-tren b{ font-size:14px; font-weight:700; color:var(--muc); }
.gp-ls-tren .gp-ls-tien{ font-weight:800; white-space:nowrap; }
/* Gói E (27/09/2026): tiền thật đã nhận khác giá gói (chuyển thiếu / thừa) → nhãn nhỏ "Đã nhận" trước số tiền */
.gp-ls-tien .gp-ls-nhan{ font-size:12px; font-weight:600; color:var(--muc-2); }
.gp-ls-giua{ margin-top:4px; }
.gp-ls-phu{ display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; font-size:12.5px; color:var(--muc-2); min-width:0; }
.gp-ls-phu i{ font-style:normal; color:var(--muc-3); }
.gp-ls-duoi{ margin-top:6px; font-size:12.5px; color:var(--muc-2); }
.gp-ls-duoi b{ color:var(--muc); font-weight:700; letter-spacing:.02em; }
.gp-ls-duoi .gp-nut-chep{ min-height:44px; }
.gp-ls-trong{ margin-top:8px; padding:14px 12px; border-radius:12px; background:var(--nen); text-align:center; font-size:13px; color:var(--muc-2); }
/* nhãn nhỏ "Giá thử" (tài khoản test mua giá nhỏ): cạnh số tiền trong tấm QR + lịch sử */
.gp-nhan-thu, .gp-dong .gp-nhan-thu, .gp-ls-tren .gp-nhan-thu, .gp-gia-so .gp-nhan-thu{
  display:inline-block; vertical-align:2px; margin-left:4px; padding:2px 7px; border-radius:var(--bo-pill);
  background:var(--canh-nhat); color:var(--canh); font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}

/* giá thử trên nút xanh + dòng phụ "Tài khoản thử nghiệm: …" (thẻ giá, Gói của tôi, Cấp độ) */
.nut .gp-nhan-thu--nut{ margin-left:0; background:rgba(255,255,255,.2); color:#fff; vertical-align:0; }
.gp-gia-so .gp-nhan-thu{ align-self:center; margin-left:8px; }
.gp-thu-ghi, .gp-cd-thu{ margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--canh); }
.gp-cd-thu{ text-align:center; margin-top:2px; }

/* ---------- tấm QR ---------- */
.gp-qr{ padding:0 18px; }
.gp-thu{
  margin:-4px 0 12px; padding:8px 10px; border-radius:10px; text-align:center;
  background:#FFE58A; color:#5A4300; font-size:12.5px; font-weight:800; letter-spacing:.02em;
}
.gp-qr-tit{ font-size:17px; font-weight:800; text-align:center; }
.gp-qr-phu{ font-size:12.5px; color:var(--muc-2); text-align:center; margin-top:4px; }
.gp-qr-khung{
  position:relative; width:212px; max-width:100%; margin:12px auto 6px; padding:8px;
  border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--ke);
}
.gp-qr-anh{ display:block; width:100%; height:auto; image-rendering:pixelated; }
.gp-qr-phu-lop{
  position:absolute; inset:0; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.86); font-size:14px; font-weight:800; color:var(--muc);
}
.gp-qr--het .gp-qr-anh{ opacity:.25; }
.gp-qua{ margin-top:8px; padding:8px 10px; border-radius:10px; font-size:12.5px; background:var(--gp-vang-nen); color:#6B4E14; }
.gp-trang{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; text-align:center;
  margin-top:10px; min-height:24px; font-size:13px; font-weight:600; color:var(--nhan);
}
.gp-trang b{ display:block; width:100%; font-size:14px; color:var(--muc); }
.gp-trang small{ display:block; width:100%; font-size:12.5px; font-weight:400; color:var(--muc-2); line-height:1.5; }
.gp-trang small + small{ margin-top:4px; }
.gp-trang .nut{ margin-top:8px; }
.gp-qr--kiem .gp-trang b{ color:var(--canh); }
.gp-xoay{
  flex:none; width:14px; height:14px; border-radius:50%;
  border:2.5px solid var(--nhan); border-right-color:transparent; animation:gpXoay .8s linear infinite;
}
@keyframes gpXoay{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .gp-xoay{ animation:none; border-right-color:var(--nhan); opacity:.6; } }
.gp-qr-nut{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.gp-qr-nut .nut{ height:48px; text-decoration:none; }
.gp-qr-nut .gp-lk{ align-self:center; }
.gp-nut-gl{ background:#FFE58A; color:#5A4300; }
.gp-gl-phu{ display:flex; gap:8px; }
.gp-gl-phu button{
  flex:1; min-height:44px; border-radius:10px; border:1px dashed #D9B84A; background:#FFFBEA; color:#5A4300;
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.tam:has(.gp-qr){ max-width:380px; }
.tam.gp-qr--tam{ max-width:380px; }   /* máy chưa có :has(), lớp do khung.js gắn */
/* dựng lại sau khi payOS trả khách về: không QR, trạng thái là nội dung chính */
.gp-qr--quay-ve .gp-bang{ margin-top:14px; }
.gp-qr--quay-ve .gp-trang{ min-height:48px; margin-top:14px; }
.gp-qr-tit:focus{ outline:none; }

/* ---------- chào mừng ---------- */
.gp-chao{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:72px 6px 24px; }
.gp-chao-ic{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:#3A2A08;
  background:linear-gradient(135deg,var(--gp-vang-1),var(--gp-vang-2));
  box-shadow:0 16px 30px -10px rgba(184,135,43,.6);
}
.gp-chao-ic svg{ width:40px; height:40px; }
.gp-chao-tit{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin-top:18px; }
.gp-chao-phu{ font-size:13.5px; line-height:1.55; color:var(--muc-2); margin-top:8px; }
.gp-chao-the{ width:100%; margin-top:20px; background:var(--mat); border-radius:16px; padding:6px 16px; text-align:left; box-shadow:var(--bong); }
.gp-chao .nut{ margin-top:18px; }
.gp-chao .gp-lk{ margin-top:4px; }
.gp-chao-hop .gp-chao{ padding:8px 22px 4px; }
.gp-chao-hop .gp-chao-the{ box-shadow:0 0 0 1px var(--ke-2); }
/* thưởng mời bạn đang chờ admin xét (Gói B 27/09/2026): chữ màu vàng nâu như dải "Có mã mời" trên tấm QR */
.gp-chao-cho b{ color:#6B4E14; }
.gp-chao-ghi{ width:100%; margin-top:10px; padding:8px 12px; border-radius:10px; background:var(--gp-vang-nen); color:#6B4E14; font-size:12.5px; line-height:1.5; text-align:left; }
@media (prefers-reduced-motion:no-preference){
  #man-pro-chao .gp-chao-ic{ animation:gpNay .5s var(--duong-cong) both; }
  @keyframes gpNay{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
}

/* ---------- thể lệ ---------- */
.gp-the-le{ background:var(--mat); border-radius:var(--bo-the); padding:14px 16px; margin-top:6px; box-shadow:var(--bong); }
.gp-the-le h3{ font-size:15px; font-weight:800; margin-top:6px; }
.gp-the-le h3 + ul{ margin-top:6px; }
.gp-the-le ul{ padding-left:18px; margin-bottom:10px; }
.gp-the-le li{ font-size:13.5px; line-height:1.55; color:var(--muc); margin:5px 0; }
.gp-the-le-hop{ padding:0 22px; }
.gp-the-le-hop .gp-the-le{ box-shadow:none; padding:0; }
.gp-the-le-hop .nut{ margin-top:6px; height:46px; }
.tam:has(.gp-the-le-hop){ max-width:520px; }
.tam.gp-the-le-hop--tam{ max-width:520px; }   /* máy chưa có :has() */

/* ---------- máy tính: mục Gói Pro ---------- */
.gp-dt{ padding:24px; }
.gp-dt .gp-goc{ max-width:640px; margin:0 auto; }
.gp-dt .gp-khoi, .gp-dt .gp-cua-toi{ box-shadow:0 0 0 1px var(--ke-2); }
.gp-dt .gp-hero-tit{ font-size:26px; }
.gp-dt .gp-nut-mua{ max-width:none; }
/* Gói P1 (28/09/2026): trang mua (chưa có VIP, lớp gp-goc--mua do goi-pro.js gắn). Trước đây 1 cột 640px nên hero + Quyền lợi đẩy
   khung giá + nút mua xuống dưới mép màn hình (1280x800: nút ở 887px). Nay dùng hết bề ngang thẻ, hero gọn 1 hàng (chữ trái, 4 ảnh
   mẫu phải), dưới hero chia 2 cột: trái "Quyền lợi gói VIP", phải khung giá + nút mua + dòng dưới nút (hoặc dòng quản trị), cột phải
   dính trên khi cuộn. Nút mua thấy trọn ngay khi mở trang từ 1024x768. "Gói của tôi" giữ khổ 640px. Điện thoại không đổi. */
.gp-dt .gp-goc--mua{ max-width:none; }
.gp-dt .gp-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; column-gap:24px; padding:22px 24px; }
.gp-dt .gp-hero-anh{ margin-top:0; }
.gp-dt .gp-2cot{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; margin-top:12px; }
.gp-dt .gp-2cot > .gp-khoi, .gp-dt .gp-mua-khoi > .gp-gia{ margin-top:0; }
.gp-dt .gp-mua-khoi{ position:sticky; top:16px; }
.tam:has(.gp-chao-hop){ max-width:420px; }
.tam.gp-chao-hop--tam{ max-width:420px; }   /* máy chưa có :has() */

/* ---------- Cấp độ tài khoản: bảng so sánh Free · Beta · Pro ---------- */
#gp-cd-than{ padding:4px var(--le-man) 8px; }
.gp-cd-dang{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:var(--mat); box-shadow:var(--bong); font-size:13px; color:var(--muc-2); line-height:1.45;
}
.gp-cd-dang b{ font-size:15px; color:var(--muc); }
.gp-cd-het{ display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--canh); }
.gp-cd-cham{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--nhan); box-shadow:0 0 0 4px var(--nhan-nhat); }
.gp-cd-bang{ margin-top:12px; background:var(--mat); border-radius:18px; overflow:hidden; box-shadow:var(--bong); }
.gp-cd-bang table{ width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.gp-cd-bang col, .gp-cd-bang th, .gp-cd-bang td{ box-sizing:border-box; }
.gp-cd-bang thead th{
  padding:12px 2px 10px; font-size:13px; font-weight:800; text-align:center; vertical-align:bottom; color:var(--muc);
  width:19%; white-space:nowrap;
}
.gp-cd-bang thead th:first-child{
  width:43%; text-align:left; padding-left:14px; color:var(--muc-3);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.gp-cd-bang thead th:last-child{ width:19%; }
.gp-cd-bang thead th small{ display:block; font-size:10px; font-weight:700; color:var(--nhan); margin-top:2px; }
.gp-cd-bang tbody th{
  padding:11px 4px 11px 14px; text-align:left; font-weight:500; color:var(--muc); line-height:1.35;
  border-top:1px solid var(--ke);
}
.gp-cd-bang td{ padding:11px 2px; border-top:1px solid var(--ke); text-align:center; font-weight:700; }
.gp-cd-bang .gp-cd-on{ background:var(--nhan-nhat); }
.gp-cd-bang thead .gp-cd-on{ color:var(--nhan-dam); }
.gp-cd-co{ color:var(--tot); font-size:15px; }
.gp-cd-khong{ color:var(--muc-3); font-size:13px; font-weight:600; }
.gp-cd-so{ font-size:12px; font-weight:700; color:var(--muc-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* "Mẫu Cơ bản" (Tuỳ chỉnh báo giá, cột Beta): chỉ xuống dòng khi cột hẹp, và chỉ ở chỗ "Mẫu | Cơ bản" (nbsp) */
.gp-cd-so--xuong{ display:inline-block; max-width:100%; white-space:normal; line-height:1.25; font-size:11.5px; }
.gp-cd-gia{ margin-top:14px; font-size:12.5px; color:var(--muc-2); text-align:center; }
.gp-cd-gia b{ font-size:17px; font-weight:800; color:var(--muc); }
.gp-cd-nut{ margin-top:10px; }
.gp-cd-nut--tat, .gp-cd-nut--tat[disabled]{ background:var(--ke); color:var(--muc-3); opacity:1; cursor:not-allowed; }
.gp-cd-cuoi{ margin-top:12px; font-size:12.5px; color:var(--muc-3); text-align:center; }
.gp-cd-ghi{ margin-top:10px; font-size:12px; line-height:1.6; color:var(--muc-3); }
.gp-cd-hop{ padding:0 22px; }
.gp-cd-hop .gp-cd-dang, .gp-cd-hop .gp-cd-bang{ box-shadow:0 0 0 1px var(--ke-2); }
.tam:has(.gp-cd-hop){ max-width:560px; width:calc(100% - 60px); }
.tam.gp-cd-hop--tam{ max-width:560px; width:calc(100% - 60px); }   /* máy chưa có :has() */