/* ============================================================================
   TRANG /estimated-delivery-date/ — THIẾT KẾ 2026

   Lớp phủ lên edd/sections.php. Nạp SAU ent-paypal.css và chỉ chứa phần RIÊNG
   của trang này: markup EDD 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
   --------------------------------------------------------------------------- */
.edd-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. */
.edd-section > div[style*="position:absolute"]:not(.edd-hero__copy):not(.edd-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.
   --------------------------------------------------------------------------- */
#edd-hero {
    min-height: 720px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    overflow: hidden;
}

.edd-hero__copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 443px;
    /* 160/1440 = 11.1% — lề trái quy chiếu vào bề ngang section nên trùng
       đúng cột nội dung 1120px mà các section khác đang dùng. */
    margin-left: max(24px, calc((100% - 1440px) / 2 + 160px));
    margin-right: 24px;
    z-index: 2;
}

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

.edd-hero__media,
.edd-hero__stripes {
    left: auto !important;
    right: max(0px, (100vw - 1440px) / 2) !important;
}

.edd-hero__media {
    width: min(50%, 720px) !important;
}

/* Ảnh trong khung 720x720 của thiết kế: left 27, top 69, rộng 635.61. */
.edd-hero__shot {
    left: 3.75% !important;
    top: 9.6% !important;
    width: 88.3% !important;
    height: auto !important;
}

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

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

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

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

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

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

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

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

.edd-changes__photo {
    width: 46% !important;
    max-width: 583px;
    height: auto !important;
}

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

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

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

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

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

    /* Đặt lề ở section thay vì ở cụm chữ: width:100% + margin 24px hai bên
       cộng lại vượt bề ngang máy. */
    .edd-hero__copy {
        max-width: 100%;
        margin: 0 !important;
    }

    .edd-hero__media {
        position: relative !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        max-height: 380px;
    }

    /* Dải sọc và mảng tím nền neo theo khung 1440 nên ở mobile rơi lung tung. */
    .edd-hero__stripes,
    #edd-hero > div[style*="top:-68px"] {
        display: none !important;
    }

    /* --- các khối hai cột --- */
    #edd-changes,
    .edd-feature {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
    }

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

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

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