/* ==========================================================================
   15. RESPONSIVE.CSS - TỐI ƯU TOÀN DIỆN CHO TABLET & MOBILE (2026)
   Dự án: Nâng cấp Website Hệ thống IVF Phương Châu 2026
   Tập trung 100% quy chuẩn Responsive của 5 khối Template 2.0 và toàn trang
   ========================================================================== */

/* ==========================================================================
   PHẦN 1: TABLET & MÀN HÌNH VỪA (max-width: 991px)
   ========================================================================== */
@media screen and (max-width: 991px) {

    /* 1.1 Header & Topbar */
    .mediz-top-bar-left,
    .mediz-top-bar-right {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ivf-topbar-left-inner {
        gap: 8px !important;
    }
    .ivf-loc-menu {
        width: 300px !important;
        min-width: 300px !important;
        left: auto !important;
        right: 0 !important;
    }

    /* 1.2 Section Wrapper & Spacing chung trên Tablet */
    .gdlr-core-pbf-wrapper.ivf-process-2026,
    .gdlr-core-pbf-wrapper.ivf-stats-2026,
    .gdlr-core-pbf-wrapper.ivf-services-2026,
    .gdlr-core-pbf-wrapper.doctor-block,
    .gdlr-core-pbf-wrapper.service-block,
    .ivf-roadmap-sec-wrap,
    .ivf-services-sec-wrap,
    .ivf-clean-counter-section {
        padding-top: 55px !important;
        padding-bottom: 60px !important;
    }

    /* 1.3 Khối 01: Booking & Giờ làm việc */
    .ivf-booking-2026 .gdlr-core-column-30,
    .ivf-booking-native-2026 .gdlr-core-column-30,
    .ivf-booking-grid {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .ivf-native-card-left {
        margin-bottom: 24px !important;
    }

    /* 1.4 Khối 02: Process (Quy trình 4 bước) */
    /* Ẩn đường line nối ngang 300% và cuống dọc trên màn hình tablet */
    .ivf-process-2026 .gdlr-core-pbf-wrapper-container > .gdlr-core-column-15:nth-child(2)::before,
    .ivf-process-2026 .ivf-step-node::after,
    .ivf-timeline-line {
        display: none !important;
    }
    /* Chia lưới 2 cột x 2 hàng trên Tablet */
    .ivf-process-2026 .gdlr-core-pbf-column.gdlr-core-column-15 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 10px !important;
        margin-bottom: 24px !important;
    }
    .ivf-process-2026 .ivf-step-card {
        min-height: auto !important;
    }

    /* 1.5 Khối 03: 6 Dịch vụ chuyên sâu */
    /* Chia lưới 2 cột x 3 hàng trên Tablet */
    .ivf-services-2026 .gdlr-core-pbf-column.gdlr-core-column-20,
    .service-block .gdlr-core-column-20 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 10px 20px 10px !important;
    }
    .ivf-services-2026 .ivf-native-svc-card {
        min-height: auto !important;
    }

    /* 1.6 Khối 04: Stats (4 Con số tự hào) */
    /* Chia lưới 2 cột x 2 hàng trên Tablet */
    .ivf-stats-2026 .gdlr-core-column-15,
    .ivf-stats .gdlr-core-column-15 {
        width: calc(50% - 12px) !important;
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        margin-bottom: 24px !important;
    }

    /* 1.7 Khối CTA Banner */
    .ivf-cta-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 20px !important;
    }
    .ivf-cta-actions {
        justify-content: center !important;
    }
}

/* ==========================================================================
   PHẦN 2: SMARTPHONE TIÊU CHUẨN (max-width: 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {

    /* 2.1 Tiêu đề & Typography chuẩn Mobile chống tràn chữ và gãy dòng */
    .ivf-process-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-stats-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-services-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-doctors-header .gdlr-core-stunning-text-item-title,
    .ivf-clean-counter-title,
    .ivf-roadmap-title,
    .ivf-services-title,
    .service-block .gdlr-core-title-item-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.3px !important;
        margin-bottom: 10px !important;
    }

    .ivf-process-stunning-header .gdlr-core-stunning-text-item-caption,
    .ivf-stats-stunning-header .gdlr-core-stunning-text-item-caption,
    .ivf-services-stunning-header .gdlr-core-stunning-text-item-caption,
    .ivf-doctors-header .gdlr-core-stunning-text-item-caption,
    .ivf-clean-counter-pill,
    .ivf-roadmap-badge,
    .ivf-services-pill {
        font-size: 11.5px !important;
        padding: 5px 14px !important;
        margin-bottom: 10px !important;
    }

    .ivf-process-stunning-header .gdlr-core-stunning-text-item-content,
    .ivf-process-stunning-header .gdlr-core-stunning-text-item-content p,
    .ivf-stats-stunning-header .gdlr-core-stunning-text-item-content,
    .ivf-stats-stunning-header .gdlr-core-stunning-text-item-content p,
    .ivf-services-stunning-header .gdlr-core-stunning-text-item-content,
    .ivf-services-stunning-header .gdlr-core-stunning-text-item-content p,
    .ivf-clean-counter-subtitle,
    .ivf-roadmap-subtitle {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* 2.2 Rút gọn Section Padding toàn trang (chống mỏi tay cuộn) */
    .gdlr-core-pbf-wrapper.ivf-process-2026,
    .gdlr-core-pbf-wrapper.ivf-stats-2026,
    .gdlr-core-pbf-wrapper.ivf-services-2026,
    .gdlr-core-pbf-wrapper.doctor-block,
    .gdlr-core-pbf-wrapper.service-block,
    .ivf-roadmap-sec-wrap,
    .ivf-services-sec-wrap,
    .ivf-clean-counter-section {
        padding-top: 45px !important;
        padding-bottom: 48px !important;
    }

    /* Container lề 16px */
    .gdlr-core-container,
    .gdlr-core-pbf-wrapper-container,
    .ivf-clean-counter-container,
    .ivf-services-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 2.3 Khối 01: Booking & Giờ làm việc */
    .ivf-native-card-left,
    .ivf-native-card-right {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }
    .ivf-native-card-left h3,
    .ivf-native-schedule-title h3 {
        font-size: 22px !important;
    }
    .ivf-native-hotline-grid,
    .ivf-schedule-actions-bottom {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .ivf-hotline-btn,
    .ivf-schedule-map-link,
    .ivf-schedule-book-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        height: 46px !important;
        font-size: 14px !important;
    }

    /* 2.4 Khối 02: Process (Quy trình 4 bước) - TIMELINE DỌC HÀNH TRÌNH XUYÊN SUỐT */
    .ivf-process-2026 .gdlr-core-pbf-column.gdlr-core-column-15 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 34px !important;
        position: relative !important;
    }
    .ivf-process-2026 .ivf-step-card {
        min-height: auto !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
        position: relative !important;
    }
    .ivf-process-2026 .ivf-step-node,
    .ivf-step-node {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 0 0 44px !important;
        font-size: 15px !important;
        margin-bottom: 10px !important;
        position: relative !important;
        z-index: 4 !important;
    }
    /* Cuống nối từ Node mốc xuống đỉnh Card */
    .ivf-process-2026 .ivf-step-node::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 10px !important;
        background: #f3c6e3 !important;
        z-index: 2 !important;
    }
    .ivf-process-2026 .ivf-timeline-step-item.is-destination .ivf-step-node::after {
        background: #79D2DE !important;
    }

    /* Trục dọc nối từ đáy Card bước trước xuống Node mốc của bước tiếp theo */
    .ivf-process-2026 .ivf-timeline-step-item:not(.is-destination) .ivf-step-card::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        height: 22px !important;
        background: linear-gradient(180deg, #f3c6e3 0%, #A44683 100%) !important;
        z-index: 2 !important;
    }

    /* Mũi tên định hướng hành trình hướng xuống Node mốc bước tiếp theo */
    .ivf-process-2026 .ivf-timeline-step-item:not(.is-destination) .ivf-step-card::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: calc(100% + 20px) !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4.5px solid transparent !important;
        border-right: 4.5px solid transparent !important;
        border-top: 6px solid #A44683 !important;
        z-index: 3 !important;
    }

    .ivf-process-2026 .ivf-step-title {
        min-height: auto !important;
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    .ivf-process-2026 .ivf-step-desc {
        min-height: auto !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 12px !important;
    }
    .ivf-process-2026 .ivf-roadmap-cta-wrap,
    .ivf-process-2026 .ivf-roadmap-cta-inner {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        margin-top: 10px !important;
    }
    .ivf-process-2026 .ivf-roadmap-btn-primary,
    .ivf-process-2026 .ivf-roadmap-btn-secondary {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        padding: 13px 18px !important;
        font-size: 14.5px !important;
    }

    /* 2.5 Khối 03: 6 Dịch vụ chuyên sâu - XỬ LÝ DỨT ĐIỂM VỠ LAYOUT */
    .ivf-services-2026 .gdlr-core-pbf-column.gdlr-core-column-20,
    .service-block .gdlr-core-column-20 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
    }
    .ivf-services-2026 .ivf-native-svc-card,
    .service-block .gdlr-core-column-service-item {
        min-height: auto !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }
    .ivf-services-2026 .ivf-native-svc-card .gdlr-core-column-service-title {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }
    .ivf-services-2026 .ivf-native-svc-card .gdlr-core-column-service-content,
    .ivf-services-2026 .ivf-native-svc-card .gdlr-core-column-service-content p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 14px !important;
    }

    /* 2.6 Khối 04: Stats (4 Con số tự hào) */
    .ivf-stats-2026 .gdlr-core-column-15,
    .ivf-stats .gdlr-core-column-15 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    .ivf-stats-2026 .gdlr-core-counter-item,
    .ivf-stats .gdlr-core-counter-item,
    .ivf-clean-stat-card {
        padding: 24px 18px 20px 18px !important;
        border-radius: 16px !important;
    }
    .ivf-stats-2026 .gdlr-core-counter-item-count,
    .ivf-stats .gdlr-core-counter-item-count {
        font-size: 38px !important;
    }
    .ivf-stats-2026 .gdlr-core-counter-item-suffix,
    .ivf-stats .gdlr-core-counter-item-suffix {
        font-size: 26px !important;
    }
    .ivf-stats-2026 .ivf-stat-desc,
    .ivf-stats .ivf-stat-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-top: 6px !important;
    }

    /* 2.7 Khối 05: Doctors (Đội ngũ bác sĩ) */
    .doctor-block .gdlr-core-personnel-list {
        border-radius: 16px !important;
    }
    .doctor-block .ivf-doctor-book-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        padding: 12px 16px !important;
    }
}

/* ==========================================================================
   PHẦN 3: MÀN HÌNH NHỎ (max-width: 480px - iPhone SE, thiết bị cũ)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .gdlr-core-container,
    .gdlr-core-pbf-wrapper-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ivf-process-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-stats-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-services-stunning-header .gdlr-core-stunning-text-item-title,
    .ivf-doctors-header .gdlr-core-stunning-text-item-title,
    .ivf-clean-counter-title,
    .ivf-roadmap-title {
        font-size: 21.5px !important;
    }
}