/* Promotion Hub — /khuyen-mai (user_2019/promotion_hub.php).
   Scope toàn bộ dưới prefix .ph-* để không đụng trang khác (CLAUDE.md).
   Màu/spacing lấy từ static-assets/css/tokens.css, không hardcode mã màu thương hiệu.

   Bố cục 23/09 theo bản vẽ client lần 2 (tông hồng): hero là THẺ bo góc, một hàng chip lọc
   chung, đầu khối căn trái (icon + tiêu đề + "Xem tất cả"), mỗi khối một kiểu thẻ riêng.
   30/09: chỉnh lại theo 2 bản vẽ client gửi lại (hồng + xanh → đổi tông hồng): hero có ảnh minh hoạ
   mặc định + tiêu đề 2 màu, chữ viết tay cạnh hàng chip, nhãn góc có icon, giá "Giảm đến" + số to,
   vé voucher tô theo màu ngành hàng.
   08/10: BỎ chữ viết tay cạnh hàng chip ("Mỗi hành trình đều có một ưu đãi đặc biệt!") theo yêu cầu client — gỡ cả
   khối .ph-chip-note lẫn dòng nạp font Dancing Script (trang này không còn chỗ nào dùng font đó). */

.ph-page {
    --ph-ink: #1d2248;            /* chữ tiêu đề xanh đậm của bản vẽ */
    --ph-line: #eceef3;
    background: #fff; padding: 20px 0 var(--s-8, 32px);
}

/* Màu theo ngành hàng: icon chip, cuống vé, ô icon thẻ sản phẩm. Khai một lần ở đây, các
   thẻ chỉ đọc --pc / --pc-bg — thêm ngành hàng mới là thêm đúng một dòng. */
.ph-c-all      { --pc: var(--c-primary, #ed007f); --pc-bg: #fde8f2; }
.ph-c-flight   { --pc: #e8388a; --pc-bg: #fde8f2; }
.ph-c-hotel    { --pc: #5b5fe0; --pc-bg: #ecedfd; }
.ph-c-tour     { --pc: #1fa463; --pc-bg: #e3f6ec; }
.ph-c-activity { --pc: #f0642c; --pc-bg: #fff0e8; }
.ph-c-combo    { --pc: #0ea5b7; --pc-bg: #e2f6f8; }
.ph-c-visa     { --pc: #8b5cf6; --pc-bg: #f1ebfe; }

.ph-wrap { max-width: var(--w-desktop, 1170px); margin: 0 auto; padding: 0 var(--s-4, 16px); }

/* ── Nút dùng chung ───────────────────────────────────── */
.ph-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    background: var(--c-primary, #ed007f); color: #fff;
    font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
    transition: background .15s;
}
.ph-btn .fa-solid { font-size: 11px; transition: transform .15s; }
a:hover .ph-btn { background: var(--c-primary-hover, #b81d77); }
a:hover .ph-btn .fa-solid { transform: translateX(2px); }
.ph-btn-block { width: 100%; }

/* ── 1. Hero: thẻ bo góc ──────────────────────────────── */
.ph-hero {
    position: relative; overflow: hidden; min-height: 250px;
    border-radius: 18px;
    /* #feeaf3 = màu nền của chính ảnh minh hoạ (đo từ bản vẽ) → mép ảnh tan liền vào thẻ. */
    background: linear-gradient(100deg, #fff3f8 0%, #feeaf3 45%, #feeaf3 100%);
    display: flex; align-items: center;
}
.ph-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ph-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phủ hồng-trắng từ trái: chữ tối nằm nửa trái, nửa phải để nguyên ảnh (giống bản vẽ). */
.ph-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(253,238,245,.96) 0%, rgba(253,238,245,.82) 38%, rgba(253,238,245,0) 62%);
}
/* Ảnh minh hoạ mặc định (cắt từ bản vẽ 30/09): KHÔNG phủ kín thẻ mà neo góc phải-dưới đúng tỉ lệ
   gốc (824×212), mép trái + mép trên tan dần vào nền hồng để không lộ đường cắt. Rộng tối đa 62%
   thẻ để máy bay không chui dưới dòng tiêu đề. */
.ph-hero-bg-default {
    inset: auto 0 0 auto; width: min(62%, 824px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%), linear-gradient(180deg, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 18%), linear-gradient(180deg, transparent 0%, #000 14%);
            mask-composite: intersect;
}
.ph-hero-bg-default::after { display: none; }
.ph-hero-bg-default img { height: auto; object-fit: contain; }

.ph-hero-inner { position: relative; z-index: 1; max-width: 540px; padding: 30px 40px; }
.ph-hero-title {
    margin: 0 0 10px; font-size: 40px; line-height: 1.15; font-weight: 800; color: var(--ph-ink);
    letter-spacing: -.5px;
}
.ph-hero-title-hl { display: block; color: var(--c-primary, #ed007f); }
.ph-hero-sub { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4b5068; max-width: 440px; }
.ph-hero-cta {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
    padding: 12px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
    background: var(--c-primary, #ed007f); color: #fff; text-decoration: none;
    box-shadow: 0 6px 16px rgba(237, 0, 127, .25);
    transition: background .15s, transform .15s;
}
.ph-hero-cta:hover { background: var(--c-primary-hover, #b81d77); color: #fff; text-decoration: none; transform: translateY(-1px); }

.ph-hero-badge {
    display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 999px;
    background: #fff; color: var(--c-primary, #ed007f);
    font-size: 16px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ph-count { margin-top: 14px; }
.ph-count[hidden] { display: none; }
.ph-count-lbl { display: block; font-size: 12px; color: #4b5068; margin-bottom: 6px; }
.ph-count-boxes { display: flex; gap: 6px; }
.ph-count-box {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 48px; padding: 6px 4px; border-radius: 8px; background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ph-count-box b { font-size: 17px; font-weight: 800; line-height: 1; color: var(--ph-ink); font-variant-numeric: tabular-nums; }
.ph-count-box small { font-size: 10.5px; color: var(--c-text-muted, #6b6b6b); }

/* ── 2. Chip lọc ──────────────────────────────────────── */
/* Hàng chip. scroll-margin: CTA hero (#uu-dai) cuộn tới đây, chừa chỗ cho header fixed (~100px) để hàng chip
   không chui dưới header. */
.ph-chipbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; scroll-margin-top: 110px; }
.ph-chips {
    flex: 1 1 auto; min-width: 0;
    display: flex; gap: 12px; padding: 20px 0 6px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ph-chips::-webkit-scrollbar { display: none; }
.ph-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 24px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: #fff; border: 1px solid var(--ph-line);
    box-shadow: 0 2px 8px rgba(17, 24, 39, .05);
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ph-ink);
    transition: border-color .15s, background .15s, color .15s;
}
.ph-chip i { font-size: 16px; color: var(--pc, var(--c-primary, #ed007f)); }
/* Icon SVG bộ client 30/09 (promotion_hub_product_svg, fill=currentColor). Icon Material có lề trong
   ~2px/24 nên vẽ to hơn glyph Font Awesome cùng chỗ một chút để trông cùng cỡ. */
.ph-ico { display: block; flex-shrink: 0; width: 1em; height: 1em; }
.ph-chip .ph-ico { width: 20px; height: 20px; color: var(--pc, var(--c-primary, #ed007f)); }
.ph-chip.is-active .ph-ico { color: #fff; }
.ph-chip:hover { border-color: var(--c-primary, #ed007f); }
.ph-chip.is-active { background: var(--c-primary, #ed007f); border-color: var(--c-primary, #ed007f); color: #fff; }
.ph-chip.is-active i { color: #fff; }

/* ── Khối + đầu khối ──────────────────────────────────── */
.ph-section { padding: 26px 0 4px; }
/* Đầu khối theo bản vẽ 30/09: icon trơn (không ô nền) + tiêu đề; mô tả nằm CÙNG HÀNG với tiêu đề,
   riêng khối "Ưu đãi đặc biệt" (.is-stack) mô tả xuống dòng dưới. */
.ph-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ph-head-ico {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; color: var(--c-primary, #ed007f); font-size: 22px;
}
.ph-head-ico.is-gold { color: #f5a524; }
.ph-head-ico.is-hot  { color: #f0642c; }
.ph-head.is-stack { align-items: flex-start; }
.ph-head.is-stack .ph-head-ico { margin-top: 2px; }
.ph-head-text { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; }
.ph-head.is-stack .ph-head-text { display: block; }
.ph-head-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--ph-ink); }
.ph-head-sub { margin: 2px 0 0; font-size: 13px; color: var(--c-text-muted, #6b6b6b); }
.ph-head-more {
    flex-shrink: 0; align-self: center;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--c-primary, #ed007f);
    text-decoration: underline; text-underline-offset: 3px;
}
.ph-head-more[hidden] { display: none; }
.ph-head-more .fa-solid { font-size: 12px; transition: transform .15s; }
.ph-head-more:hover .fa-solid { transform: translateX(2px); }

/* ── Dải trượt ngang dùng chung ───────────────────────── */
/* scroll-snap thay thư viện slider (trang chưa nạp slick/owl nào). Không có JS vẫn cuộn tay
   được, chỉ mất nút mũi tên + "Xem tất cả". */
.ph-slider { position: relative; }
.ph-track {
    display: grid; grid-auto-flow: column; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Chừa chỗ cho bóng đổ + nhãn góc lòi ra ngoài thẻ, nếu không bị cắt ở mép vùng cuộn. */
    padding: 12px 4px 10px; margin: -12px -4px -10px;
    /* Không có dòng này thì snap neo thẻ đầu vào mép TRONG padding (scrollLeft = 4) và nút
       "trước" hiện ngay lúc mở trang dù chưa cuộn gì. */
    scroll-padding-inline: 4px;
}
.ph-track::-webkit-scrollbar { display: none; }
.ph-track > * { scroll-snap-align: start; }
.ph-track > [hidden] { display: none; }
.ph-vc-row   { grid-auto-columns: calc((100% - 48px) / 4); }
.ph-deal-row { grid-auto-columns: calc((100% - 32px) / 2.5); }   /* khung ngang: 2,5 thẻ / khung như trang chủ (mục 4) */
.ph-prog-row { grid-auto-columns: calc((100% - 48px) / 4); }
.ph-cat-row  { grid-auto-columns: calc((100% - 48px) / 4); }

/* "Xem tất cả" đã bấm: bỏ trượt, xếp lưới nhiều hàng cùng số cột. */
.ph-slider.is-expanded .ph-track { grid-auto-flow: row; overflow: visible; scroll-snap-type: none; }
.ph-slider.is-expanded .ph-vc-row,
.ph-slider.is-expanded .ph-prog-row,
.ph-slider.is-expanded .ph-cat-row  { grid-template-columns: repeat(4, 1fr); }
.ph-slider.is-expanded .ph-deal-row { grid-template-columns: repeat(2, 1fr); }
.ph-slider.is-expanded .ph-nav { display: none; }

.ph-nav {
    position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--c-primary, #ed007f); font-size: 18px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .18);
    transition: transform .15s, box-shadow .15s;
}
.ph-nav[hidden] { display: none; }
.ph-nav:hover { transform: translateY(-50%) scale(1.06); }
.ph-nav-prev { left: -16px; }
.ph-nav-next { right: -16px; }

/* Ô ảnh không có ảnh: nền nhạt màu ngành hàng + icon to. */
.ph-media-ico {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pc-bg, #fde8f2), #fff);
    color: var(--pc, var(--c-primary, #ed007f)); font-size: 44px;
}
.ph-media-ico i, .ph-media-ico .ph-ico { opacity: .6; }
.ph-media-ico .ph-ico { width: 52px; height: 52px; }
/* <picture> bọc ngoài nên phải phủ kín, không thì <img> absolute bám vào thẻ còn picture
   chiếm một dòng rỗng. */
.ph-deal-pic { position: absolute; inset: 0; display: block; }
.ph-deal-bg  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }

/* ── 3. Voucher: thẻ vé có cuống ──────────────────────── */
.ph-tk {
    position: relative; display: flex; min-height: 118px;
    /* Bản vẽ: cả vé nhuộm nhạt màu ngành hàng, đậm dần về phía cuống. */
    border-radius: 12px; background: linear-gradient(110deg, #fff 0%, var(--pc-bg, #fde8f2) 100%);
    border: 1px solid color-mix(in srgb, var(--pc, #ed007f) 16%, #fff);
    text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s;
}
.ph-tk:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--pc, var(--c-primary)); box-shadow: 0 8px 20px rgba(17, 24, 39, .08); }
.ph-tk-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px 12px 14px; }
.ph-tk-ribbon {
    position: absolute; top: -10px; left: 12px;
    padding: 2px 8px; border-radius: 6px;
    background: var(--c-primary, #ed007f); color: #fff; font-size: 10.5px; font-weight: 700;
}
.ph-tk-title {
    font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--pc, var(--c-primary, #ed007f));
    /* Tối đa 2 dòng: "Giảm giá đến 300.000đ" không vừa 1 dòng ở thẻ 1/4 hàng — cắt "3…" là mất con số. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Dòng này là TÊN chương trình (30/09) — dài tuỳ admin đặt → 2 dòng rồi mới "…", không cắt ngay 1 dòng. */
.ph-tk-sub {
    font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ph-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-tk-meta { font-size: 11.5px; color: var(--c-text-muted, #6b6b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-tk-btn { align-self: flex-start; margin-top: auto; padding: 8px 20px; background: var(--pc, var(--c-primary, #ed007f)); }
a.ph-tk:hover .ph-tk-btn { background: color-mix(in srgb, var(--pc, #ed007f) 82%, #000); }
.ph-tk-bar {
    -webkit-appearance: none; appearance: none; display: block;
    width: 90px; height: 4px; margin: 4px 0 6px; border: 0; border-radius: 99px; overflow: hidden;
    background: #eceef2;
}
.ph-tk-bar::-webkit-progress-bar   { background: #eceef2; border-radius: 99px; }
.ph-tk-bar::-webkit-progress-value { background: #34c759; border-radius: 99px; }
.ph-tk-bar::-moz-progress-bar      { background: #34c759; border-radius: 99px; }
.ph-tk-bar.is-low { background: #fbe1e5; }
.ph-tk-bar.is-low::-webkit-progress-bar   { background: #fbe1e5; }
.ph-tk-bar.is-low::-webkit-progress-value { background: #e5484d; }
.ph-tk-bar.is-low::-moz-progress-bar      { background: #e5484d; }
/* Cuống vé: gạch đứt ngăn cách + hai lỗ khuyết trên/dưới đúng chỗ gạch. */
.ph-tk-stub {
    position: relative; flex: 0 0 72px;
    display: flex; align-items: center; justify-content: center;
    border-left: 2px dashed color-mix(in srgb, var(--pc, #ed007f) 22%, #fff);
    color: var(--pc, var(--c-primary, #ed007f)); font-size: 36px;
}
.ph-tk-stub .ph-ico { width: 42px; height: 42px; }
.ph-tk-stub::before, .ph-tk-stub::after {
    content: ""; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 1px solid var(--ph-line);
}
.ph-tk-stub::before { top: -8px;    clip-path: inset(50% 0 0 0); }
.ph-tk-stub::after  { bottom: -8px; clip-path: inset(0 0 50% 0); }

/* ── 4. Deal hot: KHUNG NGANG như dải Deal hot trang chủ ──
   Client 10/10/2026: "Tại trang deal hot để sản phẩm theo dạng khung ngang như bên ngoài" — trước là thẻ ảnh dọc 5 thẻ /
   hàng, banner ngang của thẻ "Chỉ hình ảnh" bị cắt mất hai bên. Nay cùng khổ thẻ trang chủ (home-v3.css .hp3-dc, ~2,2:1):
   máy tính 2,5 thẻ / khung (thẻ thứ ba ló nửa để biết còn kéo), tablet 1,5, điện thoại một thẻ gần kín bề ngang; "Xem
   tất cả" xếp 2 cột (điện thoại 1). Thẻ thường: chữ bên trái, ảnh bên phải tan dần sang trái (chữ luôn trên nền sáng);
   thẻ "Chỉ hình ảnh": ảnh phủ kín. Khổ thẻ CỐ ĐỊNH 2,2:1 = khổ banner Deal hot ⇒ banner hiện trọn, không bị cắt hai bên /
   trên dưới; thẻ thường nhiều chữ hơn khung thì tự cao thêm (aspect-ratio vẫn cho nội dung nới thẻ). */
.ph-dc {
    position: relative; display: flex; align-items: stretch; overflow: hidden; aspect-ratio: 2.2 / 1;
    border-radius: 14px; background: linear-gradient(90deg, #fff 40%, #fff5f9 100%); border: 1px solid var(--ph-line);
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.ph-dc:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17, 24, 39, .12); }
.ph-dc:hover .ph-deal-bg { transform: scale(1.04); }
.ph-dc-media {
    position: absolute; top: 0; right: 0; bottom: 0; width: 58%; display: block; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 60%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 60%);
}
/* Thẻ Deal hot "Chỉ hình ảnh" (deal_price_mode = 'image', client 10/10/2026 "chỉ gắn hình vào thôi"): ảnh phủ KÍN cả khung,
   không tan dần (không có chữ đè lên); cắt theo object-fit: cover của .ph-deal-bg. */
.ph-dc--img { background: #f3f4f6; }
.ph-dc--img .ph-dc-media { width: 100%; -webkit-mask-image: none; mask-image: none; }
.ph-dc-badge {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; background: #fff6e0; color: #b4360b;
    font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* Màu icon nhãn theo loại (map trong promotion_hub.php $phBadgeOf): lửa đỏ cam, sao vàng, đồng hồ hồng. */
.ph-dc-badge.is-hot i  { color: #f0462c; }
.ph-dc-badge.is-gold i { color: #f5a524; }
.ph-dc-badge.is-pink i { color: var(--c-primary, #ed007f); }
.ph-dc-badge.is-new i  { color: #16a34a; }
.ph-dc-time {
    position: absolute; left: 10px; bottom: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ph-ink);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Khung ngang: phần trái của vùng ảnh đã tan trong suốt ⇒ đồng hồ sang góc phải dưới, nằm trên phần ảnh còn rõ. */
.ph-dc .ph-dc-time { left: auto; right: 10px; }
.ph-dc-time[hidden] { display: none; }
.ph-dc-body { position: relative; z-index: 1; width: 62%; display: flex; flex-direction: column; gap: 3px; padding: 16px 0 16px 18px; }
.ph-dc-name {
    font-size: 15.5px; font-weight: 800; line-height: 1.35; color: var(--ph-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 1px;
}
.ph-dc-sub {
    font-size: 12px; color: var(--c-text-muted, #6b6b6b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-dc-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
/* "Giảm đến" nhỏ + con số to như bản vẽ ($phOffHtml tách chữ dẫn / con số). */
.ph-dc-off { color: var(--c-primary, #ed007f); font-weight: 800; line-height: 1.1; }
.ph-dc-off small { font-size: 13px; font-weight: 700; }
.ph-dc-off b { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.ph-dc-old { font-size: 12px; color: var(--c-text-soft, #9a9a9a); }
/* Mức giảm cạnh giá của thẻ SẢN PHẨM Deal hot (10/10) — thay vòng tròn "Giảm X" của thẻ trang chủ; hẹp chỗ thì tự
   xuống dòng (.ph-dc-price flex-wrap). */
.ph-dc-cut {
    padding: 2px 7px; border-radius: 4px; background: #fdecf5; color: var(--c-primary, #ed007f);
    font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.ph-dc .ph-btn-block { margin-top: auto; align-self: flex-start; width: auto; padding: 9px 18px; font-size: 13.5px; border-radius: 8px; }

/* ── 5. Đang diễn ra: thẻ ngang, ảnh trái ─────────────── */
.ph-lc {
    display: flex; overflow: hidden; min-height: 152px;
    border-radius: 14px; background: #fff; border: 1px solid var(--ph-line);
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.ph-lc:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 24, 39, .1); }
.ph-lc:hover .ph-deal-bg { transform: scale(1.04); }
.ph-lc-media { position: relative; flex: 0 0 40%; overflow: hidden; }
/* Nhãn góc trái: nền đặc (Hot đỏ, Mới xanh lá) chữ trắng như bản vẽ. */
.ph-lc-badge {
    position: absolute; top: 8px; left: 8px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; background: #e5484d; color: #fff;
    font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.ph-lc-badge.is-new  { background: #1f9d55; }
.ph-lc-badge.is-gold { background: #f59e0b; }
.ph-lc-badge.is-pink { background: var(--c-primary, #ed007f); }
.ph-lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px; }
.ph-lc-tag {
    align-self: flex-start; padding: 2px 8px; border-radius: 6px;
    background: var(--pc-bg, #fde8f2); color: var(--pc, var(--c-primary, #ed007f));
    font-size: 10.5px; font-weight: 700;
}
.ph-lc-name {
    font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--ph-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 1px;
}
.ph-lc-off { font-size: 13.5px; font-weight: 800; color: #e5484d; }
.ph-lc-sub {
    font-size: 11.5px; line-height: 1.4; color: var(--c-text-muted, #6b6b6b);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-lc-btn { align-self: stretch; margin-top: auto; padding: 8px 12px; font-size: 12.5px; }

/* ── 6. Theo sản phẩm: thẻ ngang chữ + ảnh mờ phải ───── */
.ph-pc {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
    min-height: 96px; padding: 14px 14px;
    border-radius: 14px; background: #fff; border: 1px solid var(--ph-line);
    box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
    text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.ph-pc:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17, 24, 39, .1); }
/* Ảnh nằm nửa phải và tan dần sang trái, để chữ bên trái luôn đọc được. */
.ph-pc .ph-cat-bg {
    position: absolute; top: 0; right: 0; width: 40%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 80%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 40%, #000 80%);
}
/* Ô icon vuông ở đầu thẻ (.ph-pc-ico) đã bỏ (client 09/10) — chữ đứng ngay lề trái của thẻ. */
.ph-pc-body { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 2px; max-width: 62%; }
.ph-pc-name { font-size: 14.5px; font-weight: 800; color: var(--ph-ink); }
.ph-pc-sub {
    font-size: 12px; color: var(--c-text-muted, #6b6b6b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-pc-link {
    /* Một dòng: link đè nhẹ lên phần ảnh đã tan (giống bản vẽ) chứ không gãy làm hai. */
    margin-top: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--c-primary, #ed007f);
    white-space: nowrap;
    text-decoration: underline; text-underline-offset: 3px;
}
.ph-pc-link .fa-solid { font-size: 11px; transition: transform .15s; }
.ph-pc:hover .ph-pc-link .fa-solid { transform: translateX(2px); }
/* Thẻ không có ảnh (dựng từ cấu hình ngành hàng): chữ được rộng hết thẻ. */
.ph-pc:not(:has(.ph-cat-bg)) .ph-pc-body { max-width: none; }

/* ── Thẻ CHUYẾN BAY Vé 0đ / Flash sale (.ph-pc--fl) — bản vẽ client 09/10 (lần 2), HAI KIỂU admin chọn theo hàng ──
   .ph-fl--deal  "Giảm %": nền màu đậm của hãng, chữ trắng, nút trắng bo tròn ghi mức giảm ("Giảm 49% ›")
   .ph-fl--gift  "Nhận ngay": nền sáng, chữ tối, chữ hồng "Nhận ngay ›"
   Có ảnh nền (.ph-pc--bd): bộ ảnh thiết kế 620×288 đã in sẵn logo hãng ⇒ ảnh nằm TRONG luồng, thẻ cao đúng tỉ lệ ảnh, khối chữ
   đặt đè lên nửa trái, neo theo đáy thẻ (tên chặng dài xuống dòng thì khối chữ mọc lên trên, không tràn đáy). Mọi cỡ chữ /
   khoảng cách tính theo BỀ NGANG THẺ (đơn vị cqw — thẻ là container) nên thẻ to nhỏ thế nào chữ vẫn nằm đúng chỗ trên ảnh;
   số đo lấy trên bản vẽ (thẻ ~377px). Mỗi dòng có giá trị px đứng trước làm dự phòng cho trình duyệt chưa hiểu cqw.
   Màu theo hãng (.ph-al-*): --fl-c = màu nền khi hàng không có ảnh nền, --fl-ink = màu chữ của nút "Giảm %". */
/* Hàng thẻ chuyến bay (.ph-fl-row): 3 thẻ một hàng trên máy tính, 2 trên tablet, điện thoại gần kín bề ngang. Client 09/10:
   thẻ chỉ to hơn bản trước ĐÚNG 2px ("chỉ tăng lên so với card size cũ 2px" — bản 2 thẻ / hàng bị chê quá to) ⇒ khoảng cách
   giữa thẻ bớt từ 16px xuống 13px (2 khe × 3px = 6px chia 3 thẻ), số thẻ một hàng giữ nguyên. */
.ph-track.ph-fl-row { gap: 13px; grid-auto-columns: calc((100% - 26px) / 3); }
.ph-slider.is-expanded .ph-track.ph-fl-row { grid-template-columns: repeat(3, 1fr); }
/* Màu mặc định ở .ph-pc.ph-pc--fl, màu theo hãng ở .ph-pc--fl.ph-al-* — CÙNG độ ưu tiên, luật hãng đứng SAU nên thắng. */
.ph-pc.ph-pc--fl {
    --fl-c: #1b448e; --fl-ink: #1b448e;
    container-type: inline-size;
    display: block; min-height: 0; padding: 0; gap: 0;
    /* px, KHÔNG cqw: đơn vị cqw trên CHÍNH thẻ tính theo container bên ngoài (ở đây là màn hình), chỉ con của thẻ mới đo
       theo thẻ. 18px ≈ góc bo của bản vẽ trên thẻ ~377px. */
    border: 0; border-radius: 18px;
    background: var(--fl-c);
}
.ph-pc--fl.ph-al-vn { --fl-c: #066883; --fl-ink: #066883; }
.ph-pc--fl.ph-al-vj { --fl-c: #e32129; --fl-ink: #d71920; }
.ph-pc--fl.ph-al-qh { --fl-c: #00843d; --fl-ink: #00843d; }
.ph-pc--fl.ph-al-vu { --fl-c: #0066b3; --fl-ink: #0066b3; }
.ph-pc--fl.ph-al-9g { --fl-c: #c00000; --fl-ink: #c00000; }
.ph-pc--fl.ph-al-bl { --fl-c: #f26722; --fl-ink: #d9541a; }
/* Không có ảnh nền: thẻ tự giữ tỉ lệ của bộ ảnh thiết kế. Kiểu "Giảm %" = nền màu hãng có quầng sáng góc phải; kiểu
   "Nhận ngay" = nền trắng + ảnh minh hoạ mặc định mờ dần ở nửa phải (.ph-cat-bg, luật chung của .ph-pc). */
.ph-pc--fl:not(.ph-pc--bd) { aspect-ratio: 620 / 288; }
.ph-fl--deal:not(.ph-pc--bd) {
    background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%), var(--fl-c);
}
.ph-fl--gift:not(.ph-pc--bd) { background: #fff; border: 1px solid var(--ph-line); }
/* Có ảnh nền: không viền, không nền (client 09/10: "tắt border đi") — ảnh thiết kế tự bo góc, góc ảnh trong suốt. */
.ph-pc--fl.ph-pc--bd { background: transparent; }
.ph-pc--fl .ph-fl-bg { display: block; width: 100%; height: auto; }

/* Logo góc trên bên trái: ảnh logo admin chọn cho hàng (.ph-fl-logo--own, giữ đúng hình dạng ảnh — ngang hay vuông) hoặc
   logo vuông của hãng khi hàng không có ảnh nền. Cao ~14% thẻ như ô logo trong bộ ảnh thiết kế. */
.ph-fl-logo {
    position: absolute; left: 5.2%; top: 11%; height: 14%; z-index: 1;
    border-radius: 18%; overflow: hidden; box-shadow: 0 1px 4px rgba(17, 24, 39, .14);
}
.ph-fl-logo img { display: block; height: 100%; width: auto; }
.ph-fl-logo--own { border-radius: 0; overflow: visible; box-shadow: none; }
.ph-fl-logo--own img { max-width: 60cqw; object-fit: contain; }

/* Khối chữ: nửa trái thẻ, neo đáy. */
.ph-pc--fl .ph-pc-body {
    /* Lề phải 30%: đủ cho "Hồ Chí Minh → Đà Nẵng" một dòng ở cỡ chữ bản vẽ; phần chữ lấn sang là vùng ảnh đã tan sáng
       (kiểu "Nhận ngay") / vẫn còn nền màu (kiểu "Giảm %" — mép cong của nền màu nằm khoảng 60–75% bề ngang). */
    position: absolute; left: 5.2%; right: 30%; bottom: 18px; bottom: 5cqw;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: none;
}
/* Client 09/10 (lần 3): tên chặng to hơn một chút (5,6cqw, trước 5,2), nút "Giảm %" / "Nhận ngay" nhỏ lại — nút có TRẦN cỡ
   px nên thẻ to lên thì nút không to theo. 5,6cqw vẫn đủ cho "Hồ Chí Minh → Đà Nẵng" một dòng trong 70% bề ngang thẻ. */
.ph-pc--fl .ph-pc-name {
    font-size: 21px; font-size: clamp(15px, 5.6cqw, 28px); font-weight: 700; line-height: 1.3;
    letter-spacing: -.01em;
}
.ph-pc--fl .ph-pc-sub {
    margin-top: 6px; margin-top: 1.5cqw;
    font-size: 15px; font-size: clamp(12px, 4cqw, 19px); line-height: 1.3; white-space: nowrap; overflow: visible;
}
.ph-pc--fl .ph-pc-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; margin-top: 3cqw; }
.ph-fl-cta { display: inline-flex; align-items: center; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ph-fl-cta .fa-solid { margin-left: 16px; margin-left: clamp(10px, 4cqw, 22px); font-size: 12px; font-size: clamp(10px, 2.8cqw, 14px); transition: transform .15s; }
.ph-pc--fl:hover .ph-fl-cta .fa-solid { transform: translateX(3px); }

/* Kiểu "Giảm %": chữ trắng trên nền màu, nút trắng bo tròn chữ màu hãng. */
.ph-fl--deal .ph-pc-name { color: #fff; }
.ph-fl--deal .ph-pc-sub  { color: rgba(255, 255, 255, .85); }
.ph-fl-cta--btn {
    justify-content: space-between; min-width: 150px; min-width: clamp(118px, 34cqw, 190px);
    height: 40px; height: clamp(34px, 10cqw, 46px); padding: 0 14px 0 18px; padding: 0 3.6cqw 0 4.4cqw;
    border-radius: 999px; background: #fff; color: var(--fl-ink);
    font-size: 16px; font-size: clamp(13px, 4cqw, 19px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
/* Kiểu "Nhận ngay": chữ tối trên nền sáng, chữ hồng thương hiệu. Bản vẽ: khối chữ nằm thấp hơn kiểu "Giảm %" một chút. */
.ph-fl--gift .ph-pc-body { bottom: 22px; bottom: 5.8cqw; }
.ph-fl--gift .ph-pc-name { color: #111827; }
.ph-fl--gift .ph-pc-sub  { color: #4b5563; }
.ph-fl--gift .ph-fl-cta  { color: var(--c-primary, #ed007f); font-size: 17px; font-size: clamp(14px, 4.3cqw, 21px); }
.ph-fl--gift .ph-pc-act  { margin-top: 3.2cqw; }
/* Hàng "Đặt ngay ›" + TAG admin khai cho dòng chuyến ở CMS ?n=flash_fare (client 09/10/2026: chọn chữ + màu của tag).
   Màu nền / màu chữ đến từ hai biến --ph-tag-bg / --ph-tag-ink gắn trên chính thẻ tag (máy chủ đã chọn màu chữ đọc được). */
.ph-pc-tag {
    display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: 999px;
    background: var(--ph-tag-bg, #ed007f); color: var(--ph-tag-ink, #fff);
    font-size: 12.5px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .18);
}

/* Khối theo sản phẩm chia NHIỀU HÀNG (vé 0đ ở trên, vé giảm giá ở dưới, rồi các chương trình — client 08/10):
   mỗi hàng là một dải trượt riêng, kèm tiêu đề hàng nếu admin có khai. JS ẩn cả hàng khi lọc chip hết thẻ. */
.ph-row + .ph-row { margin-top: 18px; }
.ph-row[hidden] { display: none; }
.ph-row-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ph-ink);
}
.ph-row-title::before {
    content: ""; flex-shrink: 0; width: 4px; height: 16px; border-radius: 2px;
    background: var(--c-primary, #ed007f);
}

/* ── 7. Cách nhận ưu đãi ──────────────────────────────── */
.ph-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
/* Căn ĐỈNH (flex-start), không căn giữa: mô tả mỗi bước dài ngắn khác nhau (1–3 dòng tuỳ bề ngang thẻ), căn giữa thì tên
   bước ở thẻ ít dòng tụt xuống thấp hơn các thẻ bên cạnh — 4 tên bước không nằm trên một hàng (client 08/10/2026:
   "chỉnh lại các bước này"). Căn đỉnh thì ô icon và tên bước của cả hàng thẳng nhau, phần dư dồn xuống đáy thẻ. */
.ph-step {
    position: relative; display: flex; align-items: flex-start; gap: 12px;
    padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ph-line);
}
.ph-step-ico {
    position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fde8f2; color: var(--c-primary, #ed007f); font-size: 19px;
}
.ph-step-num {
    position: absolute; top: -7px; right: -7px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-primary, #ed007f); color: #fff;
    font-size: 11px; font-weight: 800; border: 2px solid #fff;
}
.ph-step-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-step-name { font-size: 14px; font-weight: 800; color: var(--ph-ink); }
.ph-step-sub  { font-size: 12px; line-height: 1.45; color: var(--c-text-muted, #6b6b6b); }

/* ── Rỗng ─────────────────────────────────────────────── */
.ph-empty {
    background: #fafbfc; border: 1px dashed var(--c-border, #e5e5e5); border-radius: 14px;
    padding: 36px 20px; text-align: center; color: var(--c-text-muted, #6b6b6b);
}
.ph-empty[hidden] { display: none; }
.ph-empty .fa { font-size: 26px; color: #c9ced8; margin-bottom: 10px; display: block; }
.ph-empty p { margin: 0; font-size: 14px; }
.ph-link-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--c-primary, #ed007f); font: inherit; font-weight: 700; text-decoration: underline;
}

/* ── Văn bản dài / FAQ / Điều kiện ────────────────────── */
.ph-prose { background: #fafbfc; border-radius: 12px; padding: 18px 20px; font-size: 14px; line-height: 1.7; color: var(--c-text, #1a1a1a); }
.ph-prose :first-child { margin-top: 0; }
.ph-prose :last-child  { margin-bottom: 0; }
.ph-terms > summary, .ph-faq-item > summary {
    cursor: pointer; list-style: none; padding: 14px 18px; background: #fff;
    border: 1px solid var(--ph-line); border-radius: 10px;
    font-weight: 700; font-size: 14px; color: var(--ph-ink);
}
.ph-terms > summary::-webkit-details-marker, .ph-faq-item > summary::-webkit-details-marker { display: none; }
.ph-terms > summary::after, .ph-faq-item > summary::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; color: var(--c-text-soft, #9a9a9a); }
.ph-terms[open] > summary::after, .ph-faq-item[open] > summary::after { content: "\f106"; }
.ph-faq { display: flex; flex-direction: column; gap: 10px; }
.ph-faq-item > .ph-prose, .ph-terms > .ph-prose { margin-top: 2px; border-radius: 0 0 10px 10px; }

/* ── Link sang tin cũ ─────────────────────────────────── */
.ph-more-news { padding-top: 24px; }
.ph-more-news a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px; background: #fafbfc; border-radius: 12px; border: 1px solid var(--ph-line);
    font-size: 14px; font-weight: 600; color: var(--c-primary, #ed007f); text-decoration: none;
}
.ph-more-news a:hover { border-color: var(--c-primary, #ed007f); text-decoration: none; }

/* ── Tablet ───────────────────────────────────────────── */
@media (max-width: 1023px) {
    /* 2 thẻ một hàng: khe 12px thay 16px ⇒ mỗi thẻ +2px như trên máy tính. */
    .ph-track.ph-fl-row { gap: 12px; grid-auto-columns: calc((100% - 12px) / 2); }
    .ph-slider.is-expanded .ph-track.ph-fl-row { grid-template-columns: repeat(2, 1fr); }
    .ph-hero-title { font-size: 30px; }
    .ph-vc-row, .ph-cat-row { grid-auto-columns: calc((100% - 32px) / 3); }
    .ph-deal-row { grid-auto-columns: calc((100% - 16px) / 1.5); }
    .ph-prog-row { grid-auto-columns: calc((100% - 16px) / 2); }
    .ph-slider.is-expanded .ph-vc-row,
    .ph-slider.is-expanded .ph-cat-row  { grid-template-columns: repeat(3, 1fr); }
    .ph-slider.is-expanded .ph-prog-row { grid-template-columns: repeat(2, 1fr); }
    .ph-slider.is-expanded .ph-deal-row { grid-template-columns: repeat(2, 1fr); }
    .ph-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .ph-track.ph-fl-row { grid-auto-columns: calc(86% + 2px); }
    .ph-slider.is-expanded .ph-track.ph-fl-row { grid-template-columns: 1fr; }
    .ph-pc-tag { padding: 2px 8px; font-size: 11.5px; }
    .ph-page { padding-top: 12px; }
    .ph-hero { min-height: 0; border-radius: 14px; }
    .ph-hero-bg::after { background: linear-gradient(180deg, rgba(253,238,245,.94) 0%, rgba(253,238,245,.85) 60%, rgba(253,238,245,.55) 100%); }
    .ph-hero-inner { padding: 22px 18px; }
    .ph-hero-title { font-size: 24px; }
    .ph-hero-sub   { font-size: 13px; }
    .ph-hero-cta   { padding: 10px 20px; font-size: 14px; }
    /* Ảnh minh hoạ mặc định: mobile không đủ chỗ đặt cạnh chữ → xếp DƯỚI khối chữ, full ngang thẻ,
       chỉ tan mép trên (không làm mờ để đè sau chữ như ảnh CMS). */
    .ph-hero:has(.ph-hero-bg-default) { flex-direction: column; align-items: stretch; }
    .ph-hero-bg-default {
        position: relative; inset: auto; order: 2; display: block; width: 100%; margin-top: -8px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
                mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    }
    .ph-hero-bg-default + .ph-hero-inner { padding-bottom: 0; }

    .ph-chips { margin: 0 -16px; padding: 14px 16px 2px; gap: 8px; }
    .ph-chip  { padding: 8px 16px; font-size: 13px; }

    .ph-section { padding-top: 22px; }
    .ph-head { gap: 8px; }
    .ph-head-ico { width: 24px; height: 24px; font-size: 18px; }
    .ph-head-title { font-size: 18px; }
    /* Mô tả khối chiếm 2-3 dòng ở màn hẹp, đẩy thẻ xuống quá sâu ⇒ chỉ giữ 1 dòng, và luôn nằm
       DƯỚI tiêu đề (cùng hàng thì bị cắt ngang giữa chữ ở màn 390px). */
    .ph-head-text { display: block; }
    .ph-head-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ph-head-more { font-size: 12.5px; align-self: center; }

    .ph-dc-off b { font-size: 18px; }
    .ph-dc-off small { font-size: 12.5px; }
    .ph-dc-name { font-size: 13.5px; }
    /* Điện thoại: thẻ thường gọn lại để vừa khổ 2,2:1 cùng hàng với banner (đo 10/10: 360–430px cần ≤ 134–163px; bản
       đủ chữ cao ~185px ⇒ cả hàng cao theo, banner bị cắt mất chữ bên trái). Bỏ dòng mô tả phụ + giá gạch, giá bán và
       nhãn "Giảm …" chung một dòng ⇒ ~127px. */
    .ph-dc-media { width: 62%; }
    .ph-dc-body { width: 66%; padding: 12px 0 12px 14px; }
    .ph-dc-sub, .ph-dc-old { display: none; }
    .ph-dc-price { margin: 2px 0 6px; flex-wrap: nowrap; }
    .ph-dc .ph-btn-block { padding: 7px 14px; font-size: 12.5px; }

    /* Vuốt tay là đủ, mũi tên chỉ che thẻ. Thẻ kế tiếp ló ra một khúc để khách biết còn nữa.
       !important: .ph-nav được JS bật/tắt qua [hidden]; không ép thì nút bật lại trên mobile. */
    .ph-nav { display: none !important; }
    .ph-track { gap: 12px; margin-right: -16px; padding-right: 16px; scroll-padding-inline: 4px 16px; }
    .ph-vc-row   { grid-auto-columns: 78%; }
    .ph-deal-row { grid-auto-columns: 90%; }
    .ph-prog-row { grid-auto-columns: 86%; }
    .ph-cat-row  { grid-auto-columns: 80%; }
    .ph-slider.is-expanded .ph-track { margin-right: -4px; padding-right: 4px; }
    .ph-slider.is-expanded .ph-vc-row,
    .ph-slider.is-expanded .ph-prog-row,
    .ph-slider.is-expanded .ph-cat-row  { grid-template-columns: 1fr; }
    .ph-slider.is-expanded .ph-deal-row { grid-template-columns: 1fr; }

    .ph-steps { grid-template-columns: 1fr; gap: 10px; }
}