/* ============================================================
   1. GIAO DIỆN MOBILE - BẢN GỐC CỦA DANNA (GIỮ NGUYÊN 100%)
   ============================================================ */
@media (max-width: 768px) {
    .product-collection { margin-top: 60px !important; margin-bottom: 10px !important; }
    .product-intro { display: flex !important; flex-direction: column !important; min-height: auto !important; width: 100vw !important; position: relative; left: 50% !important; transform: translateX(-50%) !important; margin-bottom: 0px !important; }
    .product-main-text { order: 1 !important; width: 100% !important; padding: 30px 25px !important; background-color: #212120 !important; color: #ffffff; }
    .product-main-visual { order: 2 !important; width: 100% !important; }
    .image-inner { width: 100% !important; height: 70vh !important; display: block !important; }
    .image-inner img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .product-main-text .title { font-size: 22px !important; font-weight: 400; margin-bottom: 20px !important; }
    .product-main-text .sub-title { font-size: 12px !important; font-weight: 100; margin-bottom: 10px !important; color: #ffffff; }
    .product-main-text .description { font-size: 11px !important; line-height: 1.6 !important; }
    .product-intro .btn-discover { font-family: var(--special-font); background-color: #ffffff !important; color: #000000 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 48px !important; padding: 0 40px !important; border-radius: 50px !important; margin-top: 20px !important; text-decoration: none; font-weight: 100; }
}

/* ============================================================
   2. BẢN VÁ RIÊNG CHO IPAD LỚN (PRO/AIR...)
   CHỈ FIX VÙNG LỖI (1025px - 1439px) - KHÔNG ĐỤNG MOBILE/DESKTOP
   ============================================================ */
@media (min-width: 769px) and (max-width: 1439px) {
    .product-collection .container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .product-intro {
        display: flex !important;
        flex-direction: row !important; /* Quay lại nằm ngang 50:50 */
        align-items: stretch !important;
        width: 100% !important;
        min-height: auto !important; /* Bỏ 100vh để không bị dư thừa thông số như mày kẻ */
        margin-top: 80px !important;
    }

    /* 1. CỘT ẢNH (BÊN TRÁI) */
    .product-main-visual {
        flex: 0 0 50% !important;
        width: 50% !important;
        aspect-ratio: 3 / 4 !important; /* ÉP VUÔNG CHUẨN DESKTOP */
        overflow: hidden;
    }

    .image-inner, .image-inner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 2. CỘT TEXT (BÊN PHẢI) */
    .product-main-text {
        flex: 0 0 50% !important;
        width: 50% !important;
        aspect-ratio: 1 / 1 !important; /* ÉP VUÔNG CHO ĐỒNG BỘ */
        
        background-color: #212120 !important; /* Trả lại màu nền đen xịn */
        color: #ffffff !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Đẩy chữ xuống đáy giống Desktop */
        align-items: flex-start !important;
        
        /* Padding theo chuẩn lề 20px của mày cho Tablet */
        padding: 40px 25px !important; 
        box-sizing: border-box !important;
    }

    /* Format Text cho iPad để không bị "co rúm" */
    .product-main-text .sub-title {
        font-size: 11px !important;
        margin-bottom: 10px !important;
        text-transform: uppercase;
    }

    .product-main-text .title {
        font-size: clamp(24px, 3.5vw, 32px) !important;
        line-height: 1.1 !important;
        margin-bottom: 25px !important;
    }

    .product-main-text .description {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

    /* Nút Khám Phá */
    .product-intro .btn-discover {
        display: inline-flex !important;
        background: #ffffff !important;
        color: #000000 !important;
        padding: 12px 35px !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
}

/* ============================================================
   3. GIAO DIỆN DESKTOP - FIX TRIỆT ĐỂ LỖI MẤT ẢNH & VẠCH TRẮNG
   BREAKPOINT MỚI (1440px+): GIỮ NGUYÊN CODE DANNA, XÓA ZOOM
   ============================================================ */
@media (min-width: 1440px) {
    .product-collection .container {
        max-width: none !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: -1px 0 0 0 !important; 
        background-color: #9C6F4A !important;
    }

    .product-intro {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 100vh !important;
        margin: 0 !important;
    }

    /* [CỐ ĐỊNH TỶ LỆ 50:50] Của cả ảnh và text */
    .product-main-visual { flex: 0 0 50% !important; width: 50% !important; }
    .image-inner, .image-inner img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

    .product-main-text {
        flex: 0 0 50% !important;
        order: 2 !important;
        color: #ffffff;
        background-color: #212120 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important; 
        padding: 60px var(--side-padding) !important; /* 55px của mày ở 100% */
        max-width: none !important;
    }

    .product-main-text .top-content, 
    .product-main-text .description,
    .product-main-text .btn-discover { width: 100%; max-width: 770px !important; margin-left: 0; }
    
    @media (min-width: 1650px) {
        .product-main-text .top-content, 
        .product-main-text .description,
        .product-main-text .btn-discover { margin-left: 0; }
    }
    
    .product-main-text .sub-title { color: #ffffff; font-size: 11px; font-weight: 200; margin-bottom: 30px !important; }
    .product-main-text .title {font-family: var(--special-font); font-size: clamp(24px, 2.5vw, 35px); font-weight: 400; line-height: 1.1 !important; margin-bottom: 20px; margin-top: 20px; }
    .product-main-text .description { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 40px !important; max-width: 100%; }
   
    .product-intro .btn-discover {
        font-family: var(--special-font);
        font-size: 17px;
        display: inline-block !important; 
        width: fit-content !important; 
        align-self: flex-start !important; 
        background: #fff !important; 
        color: #000 !important; 
        padding: 14px 45px !important; 
        border-radius: 50px !important; 
        text-decoration: none; 
        font-weight: 100; 
        letter-spacing: -0.02em;
        border: 1px solid transparent !important; 
        transition: all 0.1s ease-in-out !important;
    }

    /* ĐÃ BỎ HOVER ZOOM CỦA MÀY THEO YÊU CẦU */
    .product-intro .btn-discover:hover { 
        background-color: #212120 !important; 
        transition: none !important; 
        box-shadow: inset 0 0 0 2px #ffffff !important; 
    }
    
    .product-intro .btn-discover:hover .text { transform: none; color:#ffffff; }
    .product-intro .btn-discover .line { display: none !important; }
}