/* ============================================================================
   TRANG /returns-exchanges/ — THIẾT KẾ 2026

   Lớp phủ lên rt/sections.php. Nạp SAU ent-paypal.css và chỉ chứa phần RIÊNG
   của trang này: markup Returns cố tình dùng lại các class pp-* cho những khối
   giống hệt trang PayPal (nút, FAQ, đánh giá, bảng giá, ô logo) nên toàn bộ
   quy tắc cho chúng đã có sẵn bên đó — kể cả phần mobile.

   Cùng nguyên tắc như ent-paypal.css: bản export ghim mọi thứ ở khung 1440px
   nên inline style luôn thắng selector thường, gần như mọi khai báo phải có
   !important; và bố cục phải ghim vào một khung 1440 ĐẶT GIỮA, không quy sang
   phần trăm màn hình, nếu không ở màn rộng nội dung dạt ra hai mép.

   MỤC LỤC
     1. Chuẩn hoá khung
     2. Hero
     3. The problem
     4. What a clear delivery date does
     5. Core features
     6. How it works
     7. Bảng giá
     8. Mobile ≤ 900px
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. CHUẨN HOÁ KHUNG — cột nội dung 1120px như mọi trang 2026 khác
   --------------------------------------------------------------------------- */
.rt-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;
}

/* Chặn các khối trang trí hứng chuột thay cho nội dung. Phải LOẠI TRỪ những
   khối đã được CSS đưa về luồng — inline style của chúng vẫn còn
   position:absolute nên selector này bắt trúng, và mọi nút bên trong mất
   luôn khả năng bấm. */
.rt-section > div[style*="position:absolute"]:not(.rt-hero__copy):not(.rt-hero__shot) {
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   2. HERO

   Export dựng hero này bằng TOẠ ĐỘ TUYỆT ĐỐI (khác trang PayPal dùng hai cột
   flex): cụm chữ ở left:160 top:92 rộng 443, dải sọc ở left:1113, khung ảnh ở
   left:720 rộng 720. Đưa cụm chữ về luồng và neo hai khối kia theo mép phải
   của khung giữa.
   --------------------------------------------------------------------------- */
/* Hero ở đây đã là HÀNG FLEX thật trong export (cột chữ 720px + ảnh 720x737)
   nên không phải gỡ toạ độ tuyệt đối như trang Order Tracking. Hai cột chạy
   hết bề ngang đúng như thiết kế, chỉ quy 720/1440 thành 50%.

   KHÔNG áp lề cột nội dung cho section này: cụm chữ nằm trong một tấm nền
   gradient riêng, bóp cột lại là chữ tràn khỏi tấm nền rồi bị cắt. */
#rt-hero {
    /* Chiều cao do CỘT CHỮ quyết định. Nếu để ảnh nằm trong luồng thì nó cao
       theo tỉ lệ gốc (720x737), màn càng rộng ảnh càng cao và kéo cả section
       lên — tấm nền chữ chỉ 736px lại bị canh giữa nên hở trắng phía trên. */
    min-height: 736px !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden;
}

.rt-hero__copy {
    width: 50% !important;
    flex: 0 0 auto;
}

/* Tấm nền gradient phủ hết chiều cao cột, không để hở trên/dưới. */
.rt-hero__copy > div {
    flex: 1 1 auto;

    /* Đệm của thiết kế là 56px 100px 48px 160px trong cột 720 của khung 1440,
       tức chữ bắt đầu đúng ở mép cột nội dung 1120px. Giữ nguyên quan hệ đó ở
       mọi bề ngang, nếu không màn càng rộng chữ càng dạt sang trái so với
       menu và các section còn lại.

       Phải dùng 100vw: đệm phần trăm quy chiếu vào cột chữ (một nửa màn hình)
       chứ không phải cả trang. */
    padding-left: max(24px, calc((100vw - 1120px) / 2)) !important;
    padding-right: clamp(24px, 8%, 100px) !important;
}

/* Tấm nền gradient bên trong ghim height:736px — bỏ ra để chữ dài không bị cắt. */
.rt-hero__copy > div {
    height: auto !important;
    min-height: 736px;
}

/* Tấm nền và cột chữ case study đều để align-items:flex-start, nên các dòng
   chữ bên trong lấy bề ngang theo NỘI DUNG và tràn ra ngoài khung thay vì
   xuống dòng. Ghim trần bằng đúng bề ngang khung. */
.rt-hero__copy > div > *,
.rt-case__copy > * {
    max-width: 100%;
}

/* Ảnh giữ nguyên tỉ lệ 720x737 của thiết kế (không cắt), và chính nó quyết
   định chiều cao section ở màn rộng — tấm nền chữ bên trái giãn theo. */
.rt-hero__shot {
    width: 50% !important;
    max-width: none;
    height: auto !important;
    align-self: stretch;
    object-fit: cover;
    flex-shrink: 0;
}

/* Bản thiết kế để sao đánh giá màu ĐEN, trong khi ba trang app kia đều vàng.
   Thống nhất theo ba trang kia; muốn giữ đúng thiết kế thì bỏ khối này. */

.rt-hero__badge {
    max-width: 100%;
    height: auto !important;
}

.rt-hero__trust {
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   3. THE PROBLEM
   --------------------------------------------------------------------------- */
.rt-problem__cards {
    gap: 24px;
}

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

@media (hover: hover) {
    .rt-problem__card,
    .rt-also__card {
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

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

/* ---------------------------------------------------------------------------
   4. WHAT A CLEAR DELIVERY DATE DOES
   --------------------------------------------------------------------------- */
#rt-changes {
    gap: 48px;
}

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

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

.rt-changes__stats span {
    white-space: normal !important;
}

/* Cột phải là khung 671x720 mà MỌI thứ bên trong đều position:absolute (ảnh,
   watermark "Synctrack"). Để height:auto là khung co về 0 và ảnh biến mất —
   phải giữ tỉ lệ của thiết kế. */
#rt-changes > div:last-child {
    width: 46% !important;
    max-width: 671px;
    height: auto !important;
    aspect-ratio: 671 / 720;
    flex-shrink: 0;
}

/* Watermark "Synctrack" cũng neo bằng px trong khung 671x720 — quy sang phần
   trăm để nó không trôi khi khung co lại. */
#rt-changes > div:last-child > div[style*="width:242px"] {
    left: 57.7% !important;
    top: 56.7% !important;
    width: 36% !important;
}

/* Ảnh trong khung đó: left 57, top 72, rộng 581 trên 671x720. */
.rt-changes__photo {
    left: 8.5% !important;
    top: 10% !important;
    width: 86.6% !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   5. CORE FEATURES
   --------------------------------------------------------------------------- */
.rt-feature {
    height: auto !important;
    gap: 64px !important;
}

.rt-feature__media {
    width: 44% !important;
    max-width: 500px;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   5b. CASE STUDY — ảnh sát mép trái, chữ trong cột nội dung
   --------------------------------------------------------------------------- */
#rt-case {
    padding-left: 0 !important;
    padding-top: clamp(56px, 6vw, 96px) !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
    gap: 64px;
}

#rt-case > div:nth-child(2) {
    /* 100vw chứ không phải 100%: width phần trăm của flex item quy chiếu vào
       khung nội dung của thẻ cha, mà #rt-case đã có lề phải. */
    width: max(48%, calc((100vw - 1440px) / 2 + 760px)) !important;
    flex-shrink: 0;
    padding-left: max(0px, (100vw - 1440px) / 2) !important;
}

.rt-case__photo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 592px;
    height: auto !important;
}

.rt-case__copy {
    flex: 1 1 0;
    min-width: 0;
}

.rt-case__stats span {
    white-space: normal !important;
}

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

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

   Thiết kế có hàng tab nền tảng bên trái và công tắc bên phải, 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.
   --------------------------------------------------------------------------- */
#rt-pricing .rt-pricing__toggle {
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   7b. THANH KÉO CHỌN QUOTA

   Gói Returns tính tiền theo lượt dùng, giống trang /pricing/: kéo thanh để
   đổi hạn mức thì giá đổi theo. Bảng bậc lấy từ inc/page-helpers.php.
   --------------------------------------------------------------------------- */
.pp-quota {
    width: 100%;
    margin-top: 8px;
}

.pp-quota__range {
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: rgb(230, 232, 236);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.pp-quota__range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
    background: rgb(86, 41, 114);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;
}

.pp-quota__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
    background: rgb(86, 41, 114);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pp-quota__usage {
    font-weight: 700;
}

/* Vạch ngăn giữa hai cột gói: bên EDD nó là <svg> chứ không phải <div> như
   trang PayPal, nên quy tắc bên ent-paypal.css không với tới. Cột cuối không
   cần vạch. */
#rt-pricing .pp-plan:last-child [style*="width:1px"] {
    display: none !important;
}

/* Vài khối ghim bề ngang cứng trong export mà quy tắc tương ứng bên
   ent-paypal.css lại bám theo id #pp-* nên không với tới đây. */
#rt-int > div:last-child > div:first-child {
    width: 100% !important;
    max-width: 904px;
}

#rt-reviews div[style*="width:436px"],
#rt-reviews div[style*="width:198px"] {
    width: 100% !important;
}

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

   Phần dùng chung (nút, FAQ, đánh giá, ô logo, cột gói) đã có ở ent-paypal.css.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .rt-section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    /* --- hero: chữ trên, ảnh dưới --- */
    #rt-hero {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 56px 24px !important;
        gap: 32px;
    }

    .rt-hero__copy,
    .rt-hero__shot {
        width: 100% !important;
        max-width: 100% !important;
    }

    #rt-hero {
        min-height: 0 !important;
    }

    /* Tấm nền gradient có đệm 56px 100px 48px 160px — quá rộng cho điện thoại. */
    .rt-hero__copy > div {
        padding: 48px 24px !important;
        min-height: 0;
    }

    /* Hàng nút, hàng sao và hàng tên hãng vận chuyển đều để nowrap. */
    .rt-hero__copy > div > div {
        flex-wrap: wrap !important;
    }

    .rt-hero__copy > div:last-child {
        flex-wrap: wrap !important;
        gap: 16px 24px !important;
    }

    /* Watermark "Synctrack", các mảng gradient và cụm sticker linh vật đều
       neo theo toạ độ khung 1440 nên ở mobile rơi ra ngoài lề. */
    #rt-changes > div:last-child > div:not([style*="width:558px"]),
    #rt-case > div[style*="position:absolute"],
    #rt-case > div:nth-child(2) > div[style*="position:absolute"] {
        display: none !important;
    }

    /* --- các khối hai cột --- */
    #rt-case {
        padding-left: 24px !important;
    }

    #rt-case > div:nth-child(2),
    .rt-case__copy {
        width: 100% !important;
        padding-left: 0 !important;
    }

    #rt-changes,
    #rt-case,
    .rt-feature {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
    }

    .rt-changes__copy,
    #rt-changes > div:last-child,
    .rt-feature > div,
    .rt-feature__media {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

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

    /* --- lưới thẻ --- */
    /* align-items:flex-start của export làm thẻ co bằng nội dung khi đổi sang
       cột, tràn ra ngoài lề. */
    .rt-problem__cards,
    .rt-also__cards,
    .rt-how__steps {
        flex-direction: column !important;
        align-items: stretch !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ẻ co về 0 và chồng lên nhau. */
    .rt-problem__card,
    .rt-also__card,
    .rt-how__step,
    .rt-feature > div {
        flex: 0 0 auto !important;
        height: auto !important;
    }

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

    /* --- bảng giá: công tắc về giữa, vạch ngăn nằm ngang --- */
    #rt-pricing .rt-pricing__toggle {
        margin-left: 0;
    }

    #rt-pricing [style*="width:1px"] {
        width: 100% !important;
        height: 1px !important;
        flex-shrink: 0;
    }
}