/* Popup khuyến mãi / thu lead — user_2019/box/cms_popup_render.php (render ở footer).
   Tách từ ~160 dòng <style> nhúng trong PHP (CLAUDE.md). Prefix .pp-* riêng, không đụng
   .dlv-cms-popup-* của bản cũ đã gỡ. Màu lấy từ tokens.css. */

.pp-backdrop {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0, 0, 0, .72);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity .28s ease;
    /* Chừa tai thỏ iPhone khi popup cao gần full màn. */
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* [hidden] mặc định là display:none, nhưng .pp-backdrop đặt display:flex nên phải nói rõ,
   nếu không popup hiện ngay cả khi JS chưa cho phép. Đây là bẫy .show/flex đã gặp trong repo. */
.pp-backdrop[hidden] { display: none !important; }
.pp-backdrop.is-open { opacity: 1; }

.pp-card {
    position: relative;
    max-width: 92vw; max-height: 88vh;
    display: flex; flex-direction: column;
    transform: scale(.94); transition: transform .28s cubic-bezier(.175, .885, .32, 1.275);
}
.pp-backdrop.is-open .pp-card { transform: scale(1); }
.pp-card-image { background: transparent; }
/* Dạng nhiều hàng sản phẩm và dạng ảnh + nội dung + nút (hero_cta) chung một khung thẻ trắng. */
.pp-card-product_list,
.pp-card-hero_cta {
    width: 520px; background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ── Nút đóng ─────────────────────────────────────────── */
.pp-close {
    position: absolute; top: -12px; right: -12px; z-index: 3;
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    background: #fff; color: #1e293b; border: 2px solid var(--c-border, #e2e8f0);
    font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: all .2s;
}
.pp-close:hover { background: var(--c-primary, #ed007f); color: #fff; border-color: var(--c-primary, #ed007f); }

/* ⚠ Popup dạng NHIỀU HÀNG / hero_cta có overflow:hidden (để bo góc ảnh hero) → nút đóng đặt ÂM ra
   ngoài thẻ như dạng ảnh sẽ BỊ CẮT MẤT một nửa, bấm không trúng. Với hai dạng này phải đặt
   NẰM TRONG thẻ. Giữ nền trắng + đổ bóng để vẫn đọc được khi nằm đè lên ảnh hero. */
.pp-card-product_list .pp-close,
.pp-card-hero_cta .pp-close {
    top: 12px; right: 12px; width: 34px; height: 34px; font-size: 20px;
    background: rgba(255, 255, 255, .92); color: #374151; border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* ── Dạng ảnh ─────────────────────────────────────────── */
.pp-media { border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.pp-img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; }

/* ── Dạng nhiều hàng sản phẩm (dựng lại theo thiết kế client 30/09) ─────────────
   BANNER CHỈ 1 KÍCH THƯỚC: tỉ lệ cố định 13:4 (ảnh chuẩn 1040×320) cho MỌI màn hình — trước đây cao cứng
   148px (desktop) / 112px (mobile) + object-fit:cover nên mỗi máy cắt ảnh một kiểu. Form CMS ghi đúng cỡ này
   và ẩn ô "Ảnh mobile" khi chọn kiểu popup này (popup dạng nhiều hàng chỉ dùng ảnh desktop). */
.pp-hero { flex-shrink: 0; }
.pp-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 13 / 4; object-fit: cover; }
.pp-body { padding: 18px 22px 16px; overflow-y: auto; }
.pp-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; line-height: 1.3; color: #1d2248; text-align: center; }
.pp-title-hl { color: var(--c-primary, #ed007f); }
.pp-sub   { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #6b7280; text-align: center; }
/* Chữ dài quá một dòng thì chia đều hai dòng, không để một chữ lẻ ở dòng sau (vd "… dịch / vụ"). */
.pp-title, .pp-sub { text-wrap: balance; }
/* Khoảng cách khối chữ (tiêu đề / mô tả) → các hàng sản phẩm: 20px cố định (client 09/10/2026: "trên desktop text và
   các hàng bên dưới dính nhau hơi sát"). Trước đây khoảng này là lề dưới của chữ đứng cuối: 16px nếu có mô tả, chỉ
   6px nếu popup không có mô tả (popup đang chạy trên prod không có). */
.pp-card-product_list .pp-sub  { margin-bottom: 0; }
.pp-card-product_list .pp-rows { margin-top: 20px; }

/* Mỗi hàng: thẻ trắng viền mảnh · ô icon màu theo sản phẩm · tên + mô tả · vạch ngăn · "Giảm đến" / số to · › */
.pp-rows { display: flex; flex-direction: column; gap: 10px; }
.pp-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px 11px 11px; border-radius: 14px; text-decoration: none;
    background: #fff; border: 1px solid #eceef3; box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
    transition: border-color .15s, box-shadow .15s;
}
a.pp-row:hover { background: #fff; border-color: #f7c4dc; box-shadow: 0 6px 16px rgba(237, 0, 127, .1); text-decoration: none; }
.pp-row-ico {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: #fde8f2; color: #e8388a;
}
/* Cùng bảng màu chip ngành hàng trang /khuyen-mai. Tông do PHP đoán từ class icon ($ppTone). */
.pp-row-ico.is-pink   { background: #fde8f2; color: #e8388a; }
.pp-row-ico.is-indigo { background: #ecedfd; color: #5b5fe0; }
.pp-row-ico.is-green  { background: #e3f6ec; color: #1fa463; }
.pp-row-ico.is-orange { background: #fff0e8; color: #f0642c; }
.pp-row-ico.is-purple { background: #f1ebfe; color: #8b5cf6; }
/* Icon là ẢNH admin chọn / tải lên từ thư viện ảnh thay cho class Font Awesome (client 09/10/2026 — ô Icon của form
   CMS, cms_popup_icon_is_image): ảnh nằm trọn ô icon, bỏ nền tông màu vì ảnh tự mang màu của nó. Dùng chung cho ô icon
   của hàng sản phẩm và của 3 điểm nổi bật trong popup chi tiết (ô đó vốn tròn — với ảnh thì bo góc nhẹ để ảnh vuông
   không bị cắt mất bốn góc). */
.pp-row-ico.is-img, .pp-d-feat .pp-d-feat-ico.is-img { background: none; border-radius: 12px; overflow: hidden; }
.pp-row-ico.is-img img, .pp-d-feat-ico.is-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pp-row-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: #1d2248; }
.pp-row-sub   { font-size: 12.5px; line-height: 1.35; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cột giá trị: vạch ngăn trái, nhãn nhỏ xám ("Giảm đến") trên, số lớn hồng dưới, canh TRÁI như thiết kế.
   Chỉ có nhãn khi PHP tách được cụm dẫn — không tách được thì còn đúng một dòng số. */
.pp-row-value {
    /* rộng CỐ ĐỊNH → vạch ngăn các hàng thẳng một đường. 132 → 152px (client 09/10/2026: "chuyển dấu | sang bên trái,
       tránh việc chữ 1.000.000đ hiện chưa đủ"): số 20px "1.000.000đ" rộng 119px, "10.000.000đ" 133px, lòng cột cũ 118px. */
    flex: 0 0 152px; min-width: 0; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
    padding-left: 14px; border-left: 1px solid #eceef3; text-align: left;
}
.pp-row-value-label { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: #6b7280; }
/* Số giảm KHÔNG được cắt "…" (client 09/10/2026: "phải show hết giá giảm ra") — dài hơn cột thì xuống dòng, ưu tiên
   ngắt giữa các từ. Nhãn dẫn đã tách lên dòng trên ($ppValue trong cms_popup_render.php) nên số thường vừa một dòng. */
.pp-row-value-num   { max-width: 100%; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.2px; color: var(--c-primary, #ed007f); white-space: normal; overflow-wrap: break-word; }
.pp-row-go    { flex-shrink: 0; margin-left: -4px; font-size: 18px; color: #6b7280; }

/* Dòng dẫn sang điều kiện áp dụng, ngay trên nút CTA. */
.pp-terms-link {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; font-size: 13px; font-weight: 500;
    color: var(--c-primary, #ed007f); text-decoration: none;
}
.pp-terms-link i { font-size: 17px; }
.pp-terms-link:hover { color: var(--c-primary-hover, #b81d77); text-decoration: underline; }
.pp-terms-link + .pp-btn-block { margin-top: 12px; }

/* ── Nút ──────────────────────────────────────────────── */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; padding: 12px 26px; border-radius: 999px;
    background: var(--c-primary, #ed007f); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; transition: background .15s;
}
.pp-btn:hover { background: var(--c-primary-hover, #b81d77); color: #fff; text-decoration: none; }
.pp-btn-block { display: flex; width: 100%; }
.pp-card-product_list .pp-btn-block { padding: 14px 20px; border-radius: 12px; font-size: 16px; }
.pp-later {
    display: block; width: 100%; margin-top: 10px; padding: 6px; border: 0; background: none;
    color: var(--c-text-soft, #9a9a9a); font-size: 13px; cursor: pointer; text-decoration: underline;
}
.pp-later:hover { color: var(--c-text-muted, #6b6b6b); }

/* ── Dạng ảnh + tên chương trình + mô tả + một nút (hero_cta, bản vẽ client 08/10) ─────────────
   Dùng lại .pp-hero / .pp-body / .pp-title / .pp-sub / .pp-btn / .pp-later của dạng nhiều hàng; ở đây chỉ
   chỉnh cỡ: ảnh cao hơn (12:5, ảnh chuẩn 1200×500 — form CMS ghi đúng cỡ này), chữ to và thoáng hơn vì
   popup chỉ có một thông điệp. Ảnh CHỈ 1 kích thước cho mọi màn hình như dạng nhiều hàng. */
/* Nút đóng theo bản vẽ: vòng trắng to hơn, dấu × mảnh (dạng nhiều hàng giữ nguyên nút cũ). */
.pp-card-hero_cta .pp-close { width: 38px; height: 38px; background: #fff; color: #1d2248; font-size: 28px; font-weight: 400; }
.pp-card-hero_cta .pp-close:hover { background: var(--c-primary, #ed007f); color: #fff; }
.pp-card-hero_cta .pp-hero { background: #eef1f6; }   /* nền chờ trong lúc ảnh (loading=lazy) tải về */
.pp-card-hero_cta .pp-hero-img { aspect-ratio: 12 / 5; }
.pp-card-hero_cta .pp-body { padding: 30px 24px 18px; }
.pp-card-hero_cta .pp-title { margin-bottom: 10px; font-size: 28px; line-height: 1.25; text-wrap: balance; }
.pp-card-hero_cta .pp-sub { margin-bottom: 0; font-size: 15.5px; line-height: 1.6; text-wrap: balance; }
.pp-card-hero_cta .pp-btn-block { margin-top: 24px; padding: 15px 20px; border-radius: 12px; font-size: 17px; }
.pp-card-hero_cta .pp-later { margin-top: 12px; font-size: 14px; }

/* ── POPUP CHI TIẾT — thẻ thứ hai mở ra khi bấm một hàng (bản vẽ client 09/10/2026, hàng "Vé tặng") ─────────────
   Nằm chung lớp nền với thẻ chính; promo-popup.js cho hiện MỘT thẻ một lúc (thẻ kia mang [hidden]).
   Bố cục: khối đầu (ảnh banner phủ kín, chữ nằm bên trái trên lớp phủ sáng) → 3 điểm nổi bật → danh sách (chuyến bay…) → một nút.
   Thẻ dài hơn màn hình thì cuộn TRONG thẻ (.pp-d-scroll), nút × luôn nằm yên ở góc. */
.pp-card[hidden] { display: none !important; }   /* .pp-card đặt display:flex nên [hidden] mặc định thua */
.pp-detail {
    width: 580px; background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.pp-detail .pp-close {
    top: 14px; right: 14px; width: 38px; height: 38px; font-size: 26px; font-weight: 400;
    background: #fff; color: #1d2248; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.pp-detail .pp-close:hover { background: var(--c-primary, #ed007f); color: #fff; }
.pp-d-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Khối đầu THẤP lại (client 09/10/2026: "giảm height banner này xuống" — bản đầu cao 274px, chiếm gần nửa thẻ):
   đệm hẹp hơn, chữ nhỏ đi một bậc, cột chữ rộng hơn để mô tả gãy ít dòng hơn. */
.pp-d-hero {
    position: relative; display: flex; align-items: center; min-height: 150px;
    padding: 20px 30px 18px;
    background: linear-gradient(135deg, #fff5fa 0%, #fde3ef 55%, #fbd0e4 100%);
}
.pp-d-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
/* Ảnh banner PHỦ KÍN cả khối đầu (client 09/10/2026: "hình banner thì để cả ô chứ không để 1 góc" — bản đầu đặt ảnh
   co nguyên hình ở góc phải dưới, ảnh chụp ngang chỉ chiếm một mảng nhỏ). Chữ nằm bên trái nên phủ một lớp sáng mờ dần
   từ trái sang phải: chữ đọc được trên mọi ảnh, nửa phải của ảnh vẫn rõ. */
.pp-d-hero.has-img .pp-d-hero-text { max-width: 64%; }
.pp-d-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; pointer-events: none;
}
.pp-d-hero.has-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 246, 251, .96) 0%, rgba(255, 240, 247, .9) 36%, rgba(255, 240, 247, .45) 62%, rgba(255, 240, 247, 0) 88%);
}
.pp-d-title { margin: 0 0 4px; font-size: 34px; font-weight: 800; line-height: 1.12; letter-spacing: -.4px; color: #1d2248; }
.pp-d-heading { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1d2248; }
.pp-d-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6b7280; }

.pp-d-body { padding: 22px 28px 24px; }

.pp-d-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
/* Mỗi điểm nổi bật CĂN GIỮA trong cột của nó: icon, tên, mô tả cùng một trục (client 09/10/2026: "đang căn trái, để
   mỗi section này căn giữa"). */
.pp-d-feat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.pp-d-feat-ico {
    width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: #fde8f2; color: #e8388a;
}
.pp-d-feat.is-amber .pp-d-feat-ico { background: #fff3d6; color: #f5a400; }
.pp-d-feat.is-blue  .pp-d-feat-ico { background: #e3effe; color: #2f7be5; }
.pp-d-feat-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #1d2248; }
.pp-d-feat.is-pink .pp-d-feat-title { color: var(--c-primary, #ed007f); }
.pp-d-feat-text  { font-size: 13px; line-height: 1.4; color: #6b7280; }

.pp-d-list { margin-bottom: 4px; }
.pp-d-list[hidden] { display: none !important; }
.pp-d-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pp-d-list-title { font-size: 17px; font-weight: 800; line-height: 1.3; color: #1d2248; }
.pp-d-list-title i { margin-right: 4px; color: #ff6a1a; }
.pp-d-list-more { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--c-primary, #ed007f); text-decoration: none; white-space: nowrap; }
.pp-d-list-more:hover { color: var(--c-primary-hover, #b81d77); text-decoration: underline; }
.pp-d-items { display: flex; flex-direction: column; gap: 10px; }

/* Một chuyến: ảnh điểm đến · chặng + (hãng · ngày · giờ) · hai nhãn xếp dọc bên phải. */
.pp-d-item {
    display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px;
    border-radius: 14px; background: #fff; border: 1px solid #eceef3; box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
    text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
a.pp-d-item:hover { border-color: #f7c4dc; box-shadow: 0 6px 16px rgba(237, 0, 127, .1); text-decoration: none; }
.pp-d-item-img {
    flex: 0 0 76px; width: 76px; height: 60px; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: #fde8f2; color: #e8388a;
}
.pp-d-item-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-d-item-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pp-d-item-route { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #1d2248; }
.pp-d-item-route i { margin: 0 6px; font-size: 12px; color: var(--c-primary, #ed007f); }
.pp-d-item-sub { font-size: 12.5px; line-height: 1.35; color: #6b7280; }
.pp-d-item-tags { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: center; }
.pp-d-tag { padding: 3px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.pp-d-tag.is-offer { background: #fde8f2; color: var(--c-primary, #ed007f); font-size: 13px; font-weight: 800; }
.pp-d-tag.is-slot  { background: #fdecec; color: #e0365f; font-weight: 500; }
.pp-d-tag.is-soon  { background: #fff3d6; color: #a76a00; font-weight: 500; }
/* Ô chờ trong lúc hỏi máy chủ danh sách chuyến bay. */
.pp-d-item.is-loading { height: 78px; border-style: dashed; background: #fafbfc; box-shadow: none; }

.pp-detail .pp-d-btn { margin-top: 18px; padding: 15px 20px; border-radius: 12px; font-size: 16.5px; }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 575px) {
    .pp-detail { width: 100%; max-width: 100%; border-radius: 16px; }
    .pp-detail .pp-close { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 22px; }
    .pp-d-hero { min-height: 120px; padding: 14px 14px 13px; }
    .pp-d-hero.has-img .pp-d-hero-text { max-width: 70%; }
    .pp-d-title { font-size: 25px; margin-bottom: 3px; }
    .pp-d-heading { font-size: 14.5px; margin-bottom: 6px; }
    .pp-d-desc { font-size: 12px; line-height: 1.45; }
    .pp-d-body { padding: 16px 14px 16px; }
    .pp-d-feats { gap: 8px; margin-bottom: 16px; }
    .pp-d-feat-ico { width: 38px; height: 38px; font-size: 16px; margin-bottom: 6px; }
    .pp-d-feat-title { font-size: 12.5px; }
    .pp-d-feat-text { font-size: 11.5px; }
    .pp-d-list-title { font-size: 15px; }
    .pp-d-list-more { font-size: 12.5px; }
    .pp-d-items { gap: 8px; }
    .pp-d-item { gap: 10px; padding: 7px 9px 7px 7px; border-radius: 12px; }
    .pp-d-item-img { flex-basis: 56px; width: 56px; height: 50px; font-size: 18px; }
    .pp-d-item-route { font-size: 13px; }
    .pp-d-item-route i { margin: 0 4px; font-size: 11px; }
    .pp-d-item-sub { font-size: 11.5px; }
    .pp-d-tag { padding: 2px 7px; font-size: 11px; }
    .pp-d-tag.is-offer { font-size: 12px; }
    .pp-d-item.is-loading { height: 66px; }
    .pp-detail .pp-d-btn { margin-top: 14px; padding: 13px 16px; font-size: 15px; }
    .pp-card-product_list, .pp-card-hero_cta { width: 100%; max-width: 100%; border-radius: 16px; }
    .pp-close { top: -10px; right: -6px; width: 30px; height: 30px; font-size: 18px; }
    .pp-card-product_list .pp-close, .pp-card-hero_cta .pp-close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 18px; }
    .pp-card-hero_cta .pp-close { width: 32px; height: 32px; font-size: 24px; }
    .pp-card-hero_cta .pp-body { padding: 20px 16px 12px; }
    .pp-card-hero_cta .pp-title { font-size: 21px; }
    .pp-card-hero_cta .pp-sub { font-size: 13.5px; margin-bottom: 0; }
    .pp-card-hero_cta .pp-btn-block { margin-top: 18px; padding: 13px 16px; font-size: 15.5px; }
    .pp-card-hero_cta .pp-later { margin-top: 8px; font-size: 13px; }
    .pp-body { padding: 14px 14px 12px; }
    /* Cỡ chữ co theo bề ngang màn hình để tiêu đề / mô tả nằm gọn một dòng (client 09/10/2026: "giảm size chữ để tránh
       bị rớt xuống dòng"). Chỗ cho chữ = 100vw − 60px (lề nền 16px × 2 + lề thẻ 14px × 2). Hệ số đo trên popup đang chạy:
       "MỘT NỀN TẢNG - MỌI HÀNH TRÌNH" ở 18px rộng 322px, "Mừng khai trương, giảm giá cực sốc với tất cả dịch vụ" ở 12.5px
       rộng 332px (chừa 3%) ⇒ máy ≥ 382px giữ nguyên 18px / 12.5px, máy 375px ~17px, 360px ~16px. Chữ dài hơn thế vẫn
       xuống dòng, nhưng chia đều hai dòng (text-wrap: balance). */
    .pp-title { font-size: clamp(14px, calc((100vw - 60px) * .054), 18px); }
    .pp-sub { font-size: clamp(11px, calc((100vw - 60px) * .0365), 12.5px); margin-bottom: 12px; }
    .pp-card-product_list .pp-rows { margin-top: 14px; }
    .pp-rows { gap: 8px; }
    .pp-row { padding: 9px 10px 9px 9px; gap: 10px; border-radius: 12px; }
    .pp-row-ico { width: 42px; height: 42px; font-size: 18px; border-radius: 10px; }
    .pp-row-title { font-size: 13.5px; }
    .pp-row-sub { font-size: 11.5px; }
    .pp-row-value { flex-basis: 118px; padding-left: 10px; }   /* 104 → 118px: số 16px "10.000.000đ" rộng 105px */
    .pp-row-value-label { font-size: 10.5px; }
    .pp-row-value-num   { font-size: 16px; }
    .pp-row-go { font-size: 16px; }
    .pp-terms-link { font-size: 12px; margin-top: 12px; }
    .pp-card-product_list .pp-btn-block { padding: 12px 16px; font-size: 15px; }
}

/* Khoá cuộn nền khi popup mở (JS thêm/bớt class này trên <body>). */
body.pp-lock { overflow: hidden; }