/* ============================================================================
   TRANG /paypal-tracking/ — THIẾT KẾ 2026

   Lớp phủ lên paypal/sections.php. Markup đó lấy nguyên inline style từ bản
   export Figma nên mọi thứ được ghim ở khung 1440px: width:1440px, height cố
   định cho từng section, và các cụm trang trí đặt absolute theo toạ độ tuyệt
   đối. File này làm hai việc:

     1. Gỡ những kích thước cứng đó ra để trang co theo màn hình.
     2. Cấp trạng thái cho ba khối tương tác (FAQ, đánh giá, bảng giá) mà
        paypal/paypal.js bật/tắt bằng class.

   Inline style luôn thắng selector thường, nên gần như mọi khai báo ở đây
   phải có !important. Đó là cái giá của việc giữ nguyên bản export.

   MỤC LỤC
     1.  Chuẩn hoá khung + cột nội dung
     2.  Nút và link
     3.  Hero
     4.  The problem
     5.  What changes
     6.  Features
     7.  How it works
     8.  Bảng giá
     9.  Integrations
     10. Case study
     11. Đánh giá
     12. Sản phẩm khác
     13. CTA cuối
     14. FAQ
     15. Mobile ≤ 900px
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. CHUẨN HOÁ KHUNG

   Cột nội dung 1120px giống trang chủ (xem .sr-section trong ent-home.css) để
   hai trang thẳng hàng nhau. Bản export dùng padding 160px trên khung 1440
   nên ra đúng 1120 — công thức max() dưới đây giữ nguyên con số đó ở 1440 và
   tự bóp lại ở màn hình hẹp.
   --------------------------------------------------------------------------- */
.pp-page {
    overflow-x: clip;
}

.pp-page *,
.pp-page *::before,
.pp-page *::after {
    box-sizing: border-box;
}

.pp-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: max(24px, (100% - 1120px) / 2) !important;
    padding-right: max(24px, (100% - 1120px) / 2) !important;
}

/* Cụm eyebrow + tiêu đề của export ghim width:820px (hoặc 800/802/1004).
   Dưới bề ngang đó chúng thò ra ngoài — quy về 100% và chỉ giữ mức trần. */
.pp-page div[style*="width:820px"],
.pp-page span[style*="width:1004px"],
.pp-page span[style*="width:820px"],
.pp-page span[style*="width:802px"],
.pp-page span[style*="width:800px"],
.pp-page span[style*="width:680px"] {
    width: 100% !important;
}

/* Bản export vẽ trang trí bằng div đặt absolute theo toạ độ của khung 1440px.
   Ở bề ngang khác chúng lệch chỗ, nhưng vì đều nằm dưới nội dung và chỉ là
   mảng màu nên để nguyên; chỉ chặn không cho chúng nong trang ra. */
.pp-section > div[style*="position:absolute"] {
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   2. NÚT VÀ LINK

   Kích thước và hiệu ứng rê chuột do styles/ent-buttons.css lo (dùng chung
   với nút "Try For Free" trên menu). Ở đây chỉ gỡ gạch chân và viền mặc định
   mà bộ style cũ của theme gắn cho <a>/<button>.
   --------------------------------------------------------------------------- */
.pp-page a,
.pp-page button {
    text-decoration: none;
}

/* Chữ nhấn trong tiêu đề: ACF chỉ cho <strong>/<em> đi qua wp_kses (style
   inline bị gỡ), nên màu và độ đậm đặt ở đây. */
.pp-page em {
    font-style: normal;
    color: var(--brand-purple-500);
}

.pp-page strong {
    font-weight: 800;
}

.pp-page button {
    margin: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   3. HERO — hai cột 676px / phần còn lại trên khung 1440
   --------------------------------------------------------------------------- */
/* Bản export dựng hero trên khung 1440px. Hai mảng màu thì cho chạy hết bề
   ngang màn hình, nhưng BỐ CỤC (cột chữ, ảnh, các cụm trang trí) phải ghim
   vào đúng khung 1440 đặt giữa — nếu chỉ quy sang phần trăm thì ở màn hình
   rộng chữ dạt sang trái, ảnh dạt sang phải và hero trông loãng hết cả.

   Công thức dùng chung: (100% - 1440px) / 2 là phần thừa mỗi bên. Với các
   phần tử đặt absolute thì phải dùng 100vw vì phần trăm của chúng quy chiếu
   vào thẻ cha chứ không phải bề ngang trang. */
#pp-hero {
    /* .pp-section đặt min-height:0 !important để gỡ height cứng của export.
       Ở hero phải giành lại bằng !important, nếu không cột phải (chỉ chứa ảnh
       đặt absolute) kéo cả section tụt xuống 612px thay vì 680px như thiết kế. */
    min-height: 680px !important;
    padding: 0 !important;
    overflow: hidden;
    align-items: stretch !important;
}

.pp-hero__left {
    /* 676/1440 của thiết kế, nhưng mép hai cột đi theo khung giữa chứ không
       phải 47% của cả màn hình. Màn hẹp hơn 1440 thì quay về tỉ lệ 47%. */
    width: max(47%, calc((100% - 1440px) / 2 + 676px)) !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    /* Export đặt cụm chữ absolute ở left:160 của khung 1440 và canh giữa theo
       chiều dọc. Đổi thành đệm của chính cột để cụm chữ nằm trong luồng.

       Lưu ý: padding tính theo phần trăm quy chiếu vào bề ngang của THẺ CHA
       (cả section) chứ không phải của chính cột. */
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: max(24px, calc((100% - 1440px) / 2 + 160px)) !important;
    padding-right: max(24px, 5%) !important;
}

.pp-hero__copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* Inline style ghim cả width:388px LẪN height:370px — bỏ sót height thì
       chữ bị cắt và cả section chỉ cao 370px. */
    width: 100% !important;
    height: auto !important;
    max-width: 388px;
}

.pp-hero__right {
    overflow: hidden;
}

/* Ba cụm trang trí neo theo toạ độ tuyệt đối của khung 1440px: dải ô vuông ở
   mép hai cột (left ứng với 593 trong cột trái rộng 676), mảng gradient nền
   cột phải, và hai cụm ô vuông nhỏ sát mép phải. Dịch chúng đúng bằng phần
   khung dôi ra để giữ nguyên vị trí so với mép cột / mép khung. */
.pp-hero__grid {
    left: calc(100% - 676px) !important;
}

.pp-hero__glow {
    left: calc(100% - 764px - max(0px, (100vw - 1440px) / 2)) !important;
}

.pp-hero__sq {
    left: auto !important;
    right: calc(max(0px, (100vw - 1440px) / 2) + 44px) !important;
}

/* Logo trên tiêu đề để height:54px;width:auto nên ở màn hình hẹp nó rộng hơn
   cả cột chữ. */
.pp-hero__badge {
    max-width: 100%;
    height: auto !important;
}

/* Ảnh dashboard (649x600 ở 753..1402) và tấm nền bo góc sau nó cũng đặt
   absolute theo khung 1440. Neo theo mép phải của khung giữa, không đặt
   max-height vì nó bóp ảnh thấp hơn thiết kế. */
.pp-hero__shot {
    left: auto !important;
    right: calc(max(0px, (100vw - 1440px) / 2) + 38px) !important;
    top: 13% !important;
    width: min(85%, 649px) !important;
    height: auto !important;
}

.pp-hero__right > svg {
    left: auto !important;
    right: calc(max(0px, (100vw - 1440px) / 2) + 23px) !important;
    top: 11% !important;
    width: min(85%, 651px) !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   4. THE PROBLEM
   --------------------------------------------------------------------------- */
.pp-problem__cards {
    gap: 24px;
}

.pp-problem__card {
    height: auto !important;
    min-height: 340px;
}

/* Trang chủ đã có hiệu ứng nhấc thẻ khi rê chuột (.sr-problems__card);
   làm giống hệt cho khỏi lệch nhau giữa hai trang. */
@media (hover: hover) {
    .pp-problem__card,
    .pp-also__card {
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .pp-problem__card:hover,
    .pp-also__card:hover {
        background-color: rgb(255, 255, 255);
        box-shadow: 0 62px 48px -16px rgba(0, 0, 0, 0.1);
        transform: translateY(-8px);
    }
}

/* ---------------------------------------------------------------------------
   5. WHAT CHANGES

   Cột phải trong export là một khung 671x720 chứa ảnh đặt absolute và bị cắt
   bằng clip-path. Đổi thành ảnh thường có tỉ lệ cố định để co được.
   --------------------------------------------------------------------------- */
#pp-changes {
    gap: 48px;
}

.pp-changes__copy {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
}

#pp-changes > div:last-child {
    width: 46% !important;
    height: auto !important;
    max-width: 558px;
    flex-shrink: 0;
}

/* Khung ảnh: bỏ toạ độ tuyệt đối, giữ tỉ lệ 558x554 của thiết kế. */
#pp-changes > div:last-child > div[style*="width:558px"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 558 / 554;
}

#pp-changes > div:last-child > div[style*="width:558px"] > div,
#pp-changes > div:last-child > div[style*="width:558px"] > div > div {
    width: 100% !important;
    height: 100% !important;
}

.pp-changes__photo {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.pp-changes__stats {
    gap: clamp(24px, 4vw, 64px);
    flex-wrap: wrap !important;
}

/* ---------------------------------------------------------------------------
   6. FEATURES
   --------------------------------------------------------------------------- */
.pp-feature {
    height: auto !important;
    gap: 64px !important;
}

.pp-feature__media {
    width: 44% !important;
    max-width: 500px;
    height: auto !important;
    aspect-ratio: 500 / 600;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   7. HOW IT WORKS
   --------------------------------------------------------------------------- */
.pp-how__steps {
    gap: 32px !important;
}

/* ---------------------------------------------------------------------------
   8. BẢNG GIÁ

   Bốn cột trong một khung viền chung. Ở màn hình hẹp cho cuộn ngang trong
   chính khung đó thay vì bóp chữ đến mức không đọc được.
   --------------------------------------------------------------------------- */
/* Thiết kế có hàng tab nền tảng bên trái, công tắc bên phải và giãn đều hai
   đầu. Đã bỏ tab (giá chỉ có một bộ, quản lý ở /pricing/) nên dồn công tắc
   về phải cho khỏi trôi ra giữa. */
#pp-pricing .pp-pricing__toggle {
    margin-left: auto;
}

.pp-pricing__cycle {
    border-radius: 8px !important;
    background-color: transparent !important;
}

.pp-pricing__cycle span {
    color: rgb(6, 6, 6) !important;
}

.pp-pricing__cycle.is-on {
    background-color: rgb(0, 0, 0) !important;
}

.pp-pricing__cycle.is-on > span:first-child {
    color: rgb(255, 255, 255) !important;
}

/* Khung bảng có overflow:hidden inline — không !important thì ở màn hình hẹp
   các cột bị cắt cụt thay vì cuộn được. */
.pp-pricing__plans {
    overflow-x: auto !important;
}

/* Cột gói có flex-basis:0;min-width:0 trong export nên co được đến mức không
   đọc nổi. Ghim sàn 180px: ở 1440 năm cột vẫn vừa cột nội dung, hẹp hơn thì
   khung bảng tự cho cuộn ngang. */
.pp-plan {
    min-width: 180px !important;
}

/* Tên gói và dòng mô tả để white-space:nowrap trong export nhưng cột gói chỉ
   rộng 180-224px, chữ dài bị cắt cụt. */
.pp-plan span {
    white-space: normal !important;
}

/* ---------------------------------------------------------------------------
   9. INTEGRATIONS

   Ô logo 200x100; ảnh xuất ở gấp đôi cho màn retina nên phải ghìm lại, nếu
   không mỗi logo tràn ra khỏi ô.
   --------------------------------------------------------------------------- */
#pp-int > div:last-child > div:first-child {
    width: 100% !important;
    max-width: 904px;
}

.pp-int__grid {
    flex-wrap: wrap !important;
}

.pp-int__cell {
    width: 200px !important;
    max-width: calc(25% - 18px);
}

.pp-int__cell img {
    max-width: 72%;
    max-height: 48%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   10. CASE STUDY — ảnh sát mép trái, chữ trong cột nội dung
   --------------------------------------------------------------------------- */
/* Cùng vấn đề như hero: export dựng section này trên khung 1440px (cột ảnh
   0..760, cột chữ 824..1280). Cột ảnh sát mép trái là chủ ý của thiết kế,
   nhưng nếu để nó nở theo phần trăm màn hình thì ở màn rộng hai cột dạt ra
   hai đầu. Ghim theo khung 1440 đặt giữa.

   Lề phải thì không phải sửa: (100% - 1120px)/2 mà .pp-section đang dùng
   chính bằng (100% - 1440px)/2 + 160px, tức đúng mép chữ của thiết kế. */
#pp-case {
    padding-left: 0 !important;
    /* Export không cho section này đệm trên/dưới (padding:0 160px 0 0) — nó
       dựa vào height:794px cố định để có khoảng thở. Bỏ height cứng rồi thì
       nội dung dính sát hai mép, phải cấp đệm dọc lại. */
    padding-top: clamp(56px, 6vw, 96px) !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
    gap: 64px;
}

#pp-case > div:nth-child(2) {
    /* Phải dùng 100vw chứ không phải 100%: width phần trăm của một flex item
       quy chiếu vào KHUNG NỘI DUNG của thẻ cha, mà #pp-case đã có lề phải
       (100% - 1120px)/2 nên khung đó hẹp hơn màn hình đúng bằng lề ấy. */
    width: max(48%, calc((100vw - 1440px) / 2 + 760px)) !important;
    flex-shrink: 0;
    /* Cột chạy từ mép trái màn hình nhưng ảnh bên trong canh giữa, nên phải
       bù lại phần cột thò ra ngoài khung — không thì ảnh lệch sang trái. */
    padding-left: max(0px, (100vw - 1440px) / 2) !important;
}

.pp-case__glow {
    left: max(0px, (100% - 1440px) / 2) !important;
}

.pp-case__photo {
    width: 100% !important;
    max-width: 560px;
}

.pp-case__copy {
    flex: 1 1 0;
    min-width: 0;
    /* KHÔNG thêm padding phải ở đây: .pp-section đã cấp lề phải cho cả
       section rồi, cộng thêm là cột chữ hụt 160px và hai cụm số liệu bị đẩy
       xuống hai dòng thay vì đứng cạnh nhau như thiết kế. */
}

.pp-case__stats {
    gap: clamp(24px, 3vw, 80px);
    flex-wrap: wrap !important;
}

/* Nhãn dưới số liệu để white-space:nowrap trong export; ở cột hẹp chúng nong
   cả cụm ra ngoài mép. */
.pp-case__stats span,
.pp-changes__stats span {
    white-space: normal !important;
}

/* ---------------------------------------------------------------------------
   11. ĐÁNH GIÁ — nhiều slide xếp chồng, JS bật class .is-on
   --------------------------------------------------------------------------- */
.pp-reviews__slide {
    display: none !important;
}

/* Slide đang hiện mờ dần vào và nhích lên một chút mỗi lần đổi. Dùng
   animation chứ không phải transition: các slide đổi nhau bằng display nên
   transition không có gì để nội suy. */
.pp-reviews__slide.is-on {
    display: flex !important;
    animation: pp-review-in 0.4s ease both;
}

@keyframes pp-review-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Lớp ô vuông trang trí đứng CUỐI trong thẻ đánh giá nên phủ lên toàn bộ nội
   dung và nuốt luôn cú bấm vào các chấm điều hướng. */
.pp-reviews__card > div[style*="position:absolute"] {
    pointer-events: none;
}

/* Chấm điều hướng: to hơn một chút cho dễ bấm trên máy cảm ứng, vùng bấm nới
   ra bằng ::before chứ không nới ô 8x8 của thiết kế. */
.pp-reviews__dot {
    position: relative;
    cursor: pointer;
}

.pp-reviews__dot::before {
    content: "";
    position: absolute;
    inset: -8px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-reviews__slide.is-on {
        animation: none;
    }
}

.pp-reviews__dots {
    margin-top: 32px;
}

.pp-reviews__dot {
    padding: 0;
    background: none;
    color: rgb(119, 126, 144);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.pp-reviews__dot.is-on {
    color: rgb(130, 72, 166);
    opacity: 1;
}

/* Thẻ <svg> chấm mang sẵn color inline của thiết kế nên phải ghi đè ở đó,
   không phải ở <button> cha. */
.pp-reviews__dot svg {
    color: currentColor !important;
}

.pp-reviews__card {
    flex: 1 1 0;
    min-width: 0;
}

/* Ruột thẻ đánh giá ghim 436px, cụm tên + công ty ghim 198px trong export. */
#pp-reviews div[style*="width:436px"],
#pp-reviews div[style*="width:198px"] {
    width: 100% !important;
}

.pp-reviews__copy {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   12. SẢN PHẨM KHÁC
   --------------------------------------------------------------------------- */
.pp-also__cards {
    gap: 24px;
}

.pp-also__card {
    height: auto !important;
    min-height: 320px;
}

/* ---------------------------------------------------------------------------
   13. CTA CUỐI
   --------------------------------------------------------------------------- */
/* Lớp ô vuông trang trí đứng cuối DOM nên vẽ đè lên chữ ở màn hình hẹp.
   Nâng các khối nội dung lên trên thay vì ẩn trang trí đi. */
#pp-cta > div:not([style*="position:absolute"]) {
    position: relative;
    z-index: 1;
}

.pp-cta__ticks {
    flex-shrink: 1 !important;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   14. FAQ — accordion

   Dấu +/− vẽ bằng hai vạch của một <span>; mở ra thì vạch dọc xoay về nằm
   ngang trùng vạch kia, thành dấu trừ.
   --------------------------------------------------------------------------- */
.pp-faq__q {
    width: 100%;
    padding: 0;
    background: none;
    gap: 24px;
}

.pp-faq__q > span:first-child {
    /* Export để nowrap + flex-shrink:0: câu hỏi dài đẩy dấu +/− ra ngoài mép. */
    flex-shrink: 1 !important;
    min-width: 0;
    white-space: normal !important;
    text-align: left;
}

.pp-faq__icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pp-faq__icon::before,
.pp-faq__icon::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: rgb(68, 68, 68);
    transition: transform 0.2s ease;
}

.pp-faq__icon::after {
    transform: rotate(90deg);
}

.pp-faq__item.is-open .pp-faq__icon::after {
    transform: rotate(0deg);
}

.pp-faq__a {
    display: none !important;
    margin-top: 16px;
    text-align: left;
}

.pp-faq__item.is-open .pp-faq__a {
    display: block !important;
}

/* ---------------------------------------------------------------------------
   15. MOBILE ≤ 900px

   Mọi khối hai cột chuyển thành một cột. Cỡ chữ tiêu đề của thiết kế
   (48–64px) quá lớn cho màn hình điện thoại nên hạ theo clamp().
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .pp-section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    /* Tiêu đề lớn: 64px -> 32px, 48px -> 28px, 40px -> 24px */
    .pp-page span[style*="font-size:64px"] {
        font-size: clamp(30px, 8vw, 40px) !important;
    }

    .pp-page span[style*="font-size:56px"] {
        font-size: clamp(28px, 7.5vw, 36px) !important;
    }

    .pp-page span[style*="font-size:48px"] {
        font-size: clamp(26px, 7vw, 34px) !important;
    }

    .pp-page span[style*="font-size:40px"] {
        font-size: clamp(22px, 6vw, 30px) !important;
    }

    .pp-page span[style*="width:1004px"],
    .pp-page span[style*="width:820px"],
    .pp-page span[style*="width:802px"],
    .pp-page span[style*="width:800px"],
    .pp-page span[style*="width:680px"],
    .pp-page span[style*="width:436px"],
    .pp-page span[style*="width:420px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- hero --- */
    #pp-hero {
        flex-direction: column !important;
    }

    .pp-hero__left,
    .pp-hero__right {
        width: 100% !important;
        align-self: stretch;
    }

    /* Đệm 11.1% của cột trái chỉ hợp lý ở desktop; trên máy nhỏ về đúng lề
       24px như mọi section khác. */
    .pp-hero__left {
        padding: 56px 24px !important;
    }

    .pp-hero__copy {
        max-width: 100%;
        padding: 0 !important;
    }

    /* Export ghim width cho từng nút (172px, 184px); hai nút cạnh nhau vượt
       bề ngang máy. Cho co theo chữ và xuống hàng khi cần. */
    .pp-page .pp-btn {
        width: auto !important;
        max-width: 100%;
    }

    .pp-page .pp-btn + .pp-btn,
    .pp-hero__copy > div:last-child,
    #pp-cta > div:nth-child(3) {
        flex-wrap: wrap !important;
    }

    .pp-hero__right {
        min-height: 320px;
    }

    .pp-hero__shot {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-height: none;
        padding: 24px;
    }

    /* Tấm nền bo góc và các cụm ô vuông chỉ là trang trí đặt theo toạ độ
       khung 1440 — ở mobile chúng rơi lung tung nên ẩn hẳn. */
    .pp-hero__right > svg,
    .pp-hero__right > div[style*="position:absolute"],
    .pp-hero__left > div[style*="transform:matrix"] {
        display: none !important;
    }

    /* --- các khối hai cột ---
       #pp-reviews không phải hàng hai cột mà là khung dọc bọc ngoài; hàng
       thật là .pp-reviews__row bên trong. align-items:center của export làm
       item co lại bằng nội dung nên phải ép stretch. */
    #pp-changes,
    #pp-case,
    .pp-reviews__row,
    .pp-feature {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
    }

    /* flex:1 1 0 (đặt cho bố cục ngang) chuyển sang trục dọc thì flex-basis:0
       ăn vào chiều cao — thẻ đánh giá co còn 128px và cắt mất nội dung. */
    .pp-reviews__copy,
    .pp-reviews__card {
        flex: 0 0 auto !important;
    }

    .pp-changes__copy,
    .pp-case__copy,
    .pp-reviews__copy,
    .pp-reviews__card,
    #pp-changes > div:last-child,
    #pp-case > div:nth-child(2),
    .pp-feature > div,
    .pp-feature__media {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pp-feature__media {
        aspect-ratio: auto;
        height: auto !important;
    }

    /* Ảnh đứng trước chữ ở mọi khối tính năng cho nhịp đọc đều nhau. */
    .pp-feature .pp-feature__media {
        order: -1;
    }

    #pp-case {
        padding-left: 24px !important;
    }

    .pp-case__copy {
        padding-right: 0;
    }

    /* --- lưới thẻ --- */
    .pp-problem__cards,
    .pp-also__cards,
    .pp-how__steps {
        flex-direction: column !important;
    }

    /* Thẻ trong export là flex-grow:1;flex-basis:0 — hợp lý khi xếp ngang,
       nhưng khi đổi sang cột thì flex-basis:0 áp vào CHIỀU CAO và thẻ co
       về 0, các thẻ chồng lên nhau. Phải trả về auto. */
    .pp-problem__card,
    .pp-also__card,
    .pp-how__step,
    .pp-feature > div {
        flex: 0 0 auto !important;
        height: auto !important;
    }

    .pp-problem__card,
    .pp-also__card {
        min-height: 0;
        padding: 32px 24px !important;
    }

    /* Đệm 64px của thẻ đánh giá ăn gần hết bề ngang máy. */
    .pp-reviews__card {
        padding: 32px 24px !important;
    }

    /* --- logo đối tác: 2 cột --- */
    .pp-int__cell {
        max-width: calc(50% - 12px);
    }

    /* --- bảng giá: mỗi gói một dòng, không cuộn ngang --- */
    .pp-pricing__plans {
        flex-direction: column !important;
        overflow-x: visible !important;
    }

    .pp-plan {
        /* flex-basis:0 của export áp vào chiều cao khi đổi sang cột -> gói co
           về 0. min-width 180px dành cho lúc cuộn ngang cũng bỏ luôn. */
        flex: 0 0 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Vạch ngăn giữa hai gói: đứng dọc khi xếp ngang, nằm ngang khi xếp dọc. */
    .pp-plan > div[style*="width:1px"] {
        width: 100% !important;
        height: 1px !important;
        flex-shrink: 0;
    }

    #pp-pricing > div:nth-child(2) > div:first-child > div:first-child {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
    }

    /* --- FAQ --- */
    .pp-faq__q > span:first-child {
        font-size: 15px !important;
    }
}

@media (max-width: 600px) {
    .pp-int__cell {
        max-width: 100%;
    }
}