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

   Lớp phủ lên ot/sections.php. Nạp SAU ent-paypal.css và chỉ chứa phần RIÊNG
   của trang này: markup Order Tracking 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
   --------------------------------------------------------------------------- */
.ot-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. */
.ot-section > div[style*="position:absolute"]:not(.ot-hero__copy):not(.ot-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.
   --------------------------------------------------------------------------- */
/* Export dựng hero này bằng TOẠ ĐỘ TUYỆT ĐỐI: ảnh ở left:128 rộng 620, chữ ở
   left:840 rộng 440 trong khung 1440.

   Neo hai khối đó theo hai mép rồi để bề ngang chạy theo phần trăm thì khoảng
   TRỐNG GIỮA chúng cứ phình ra khi màn hẹp lại. Làm như trang PayPal và EDD:
   đưa cả hai vào luồng thành HAI CỘT FLEX thật, để chúng co giãn cùng nhau
   trong cột nội dung 1120px. Ở 1440 ra đúng thiết kế: ảnh 160..780, chữ
   840..1280.

   Các cụm ô vuông trang trí vẫn là position:absolute nên không tham gia flex. */
#ot-hero {
    /* Section này KHÔNG có background riêng: cả mảng navy chỉ là một khối
       trang trí đặt absolute rộng CỐ ĐỊNH 1600px (left:-80). Màn hình rộng
       hơn 1520px là lộ nền trắng ra bên phải. Chuyển nền lên chính section
       rồi bỏ khối đó đi. */
    background: linear-gradient(180deg, rgb(41, 92, 153) 0%, rgb(14, 31, 51) 100%);
    min-height: 800px !important;
    display: flex !important;
    /* Trong markup cụm CHỮ đứng trước ẢNH, mà thiết kế lại đặt ảnh bên trái —
       đảo chiều hàng thay vì đổi thứ tự markup. */
    flex-direction: row-reverse;
    align-items: center;
    /* space-between: ảnh bám mép trái, chữ bám mép phải của cột nội dung,
       phần dôi ra dồn vào khoảng giữa — đúng như thiết kế và luôn cân hai lề. */
    justify-content: space-between;
    gap: 24px;
    padding: 48px max(24px, (100% - 1120px) / 2) !important;
    overflow: hidden;
}

#ot-hero > div[style*="width:1600px"] {
    display: none !important;
}

.ot-hero__shot {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    flex: 1 1 620px;
    min-width: 0;
    max-width: 620px;
}

.ot-hero__copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    flex: 0 1 440px;
    min-width: 0;
    z-index: 2;
}

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

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

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

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

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

    .ot-problem__card:hover,
    .ot-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
   --------------------------------------------------------------------------- */
#ot-changes {
    gap: 48px;
}

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

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

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

#ot-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ế. */
#ot-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;
}

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

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

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

.ot-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
   --------------------------------------------------------------------------- */
#ot-case {
    padding-left: 0 !important;
    padding-top: clamp(56px, 6vw, 96px) !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
    gap: 64px;
}

#ot-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à #ot-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;
}

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

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

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

/* ---------------------------------------------------------------------------
   6. HOW IT WORKS
   --------------------------------------------------------------------------- */
.ot-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.
   --------------------------------------------------------------------------- */
#ot-pricing .ot-pricing__toggle {
    margin-left: auto;
}

/* 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. */
#ot-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. */
#ot-int > div:last-child > div:first-child {
    width: 100% !important;
    max-width: 904px;
}

#ot-reviews div[style*="width:436px"],
#ot-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) {
    .ot-section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    /* --- hero: chữ trên, ảnh dưới. Export đặt CẢ HAI khối bằng toạ độ
       tuyệt đối nên phải đưa về luồng trước rồi mới xếp dọc được. --- */
    #ot-hero {
        display: flex !important;
        /* Mobile thì chữ lên trên, ảnh xuống dưới — đúng thứ tự markup nên
           dùng column (không phải column-reverse như hàng ngang). */
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
        padding: 56px 24px !important;
        gap: 32px;
    }

    /* Hàng tên hãng vận chuyển để gap 48px và nowrap — quá rộng cho màn hình
       điện thoại. */
    .ot-hero__copy > div:last-child {
        flex-wrap: wrap !important;
        gap: 16px 24px !important;
    }

    .ot-hero__copy,
    .ot-hero__shot {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Bốn cụm ô vuông ở bốn góc và mảng nền gradient neo theo khung 1440 nên
       ở mobile rơi lung tung. */
    #ot-hero > div[style*="position:absolute"]:not(.ot-hero__copy):not(.ot-hero__shot) {
        display: none !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ề. */
    #ot-changes > div:last-child > div:not([style*="width:558px"]),
    #ot-case > div[style*="position:absolute"],
    #ot-case > div:nth-child(2) > div[style*="position:absolute"] {
        display: none !important;
    }

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

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

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

    .ot-changes__copy,
    #ot-changes > div:last-child,
    .ot-feature > div,
    .ot-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. */
    .ot-feature .ot-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ề. */
    .ot-problem__cards,
    .ot-also__cards,
    .ot-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. */
    .ot-problem__card,
    .ot-also__card,
    .ot-how__step,
    .ot-feature > div {
        flex: 0 0 auto !important;
        height: auto !important;
    }

    .ot-problem__card,
    .ot-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 --- */
    #ot-pricing .ot-pricing__toggle {
        margin-left: 0;
    }

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