.product-collection {
    width: 100% !important;
    background-color: #9C6F4A !important;
    overflow: hidden !important; /* Triệt tiêu scroll ngang */
    margin: 0 !important;
    padding: 0 !important;
}

/* Diệt khoảng nâu trống/vạch trắng phía trên */
.product-intro::before, 
.product-intro::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   2. GIAO DIỆN MOBILE - BẢN GỐC CỦA DANNA (GIỮ NGUYÊN)
   ============================================================ */
@media (max-width: 768px) {
    .product-collection {
        margin-top: 80px !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; /* Chữ nằm trên */
        width: 100% !important; 
        padding: 30px 25px !important; 
        background-color: #212120 !important;
        color: #ffffff;
    }

    .product-main-visual {
        order: 2 !important; /* Ảnh nằm dưới */
        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 {
        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: 600;
    }
}



/* ============================================================
   3. GIAO DIỆN DESKTOP - FIX TRIỆT ĐỂ LỖI MẤT ẢNH & VẠCH TRẮNG
   ============================================================ */
@media (min-width: 769px) {
    .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;
    }

    /* ẢNH TRÁI */
    .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;
        /* Quan trọng: Vẫn bám lề trái */
        align-items: flex-start !important; 
        
        /* Giữ nguyên padding 55px của mày để không xê dịch ở 100% */
        padding: 60px 55px !important; 
        max-width: none !important;
    }

    /* Tạo khung xương chặn cho cụm nội dung */
    .product-main-text .top-content, 
    .product-main-text .description,
    .product-main-text .btn-discover {
        width: 100%;
        
        /* CHÌA KHÓA ĐÂY: */
        /* Ở màn hình 100%, max-width này lớn hơn không gian thực tế nên nó không có tác dụng -> Chữ đứng im */
        /* Khi zoom out, nó sẽ chặn cụm text lại không cho rộng quá nửa cái lồng 1650px */
        max-width: 770px !important; 
        
        /* Khi zoom out, cái lề trái này sẽ tự dãn ra để giữ cụm chữ nằm trong khung xương */
        margin-left: 0; 
    }
    
    /* Cú chốt để nó "co lại giữa" cái khung xương tổng: */
    /* Mình bọc một cái wrapper ảo hoặc dùng margin auto cho cụm text khi màn hình quá rộng */
    @media (min-width: 1650px) {
        .product-main-text .top-content, 
        .product-main-text .description,
        .product-main-text .btn-discover {
            margin-left: 0; /* Vẫn bám lề trái của "nửa màn hình" */
        }
    }
    
    .product-main-text .sub-title {
    font-size: 15px;
    font-weight: 200;
    margin-bottom: 10px !important;
}

    .product-main-text .title {
   font-size: clamp(24px, 2.5vw, 35px);
   font-weight: 400;
   line-height: 1.1 !important;
   margin-bottom: 30px;
   margin-top: 10px;
}

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

   
    .product-intro .btn-discover {
        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: 500;
        border: 1px solid transparent !important;
        transition: all 0.1s ease-in-out !important;
    }

 
    .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; 
    }
}