/* =========================================================
   FIX BACKGROUND DESKTOP LIỀN MẠCH - KHÔNG CẮT / KHÔNG LẶP
   Desktop : assets/image/mainbackground-mobile.jpg
   Mobile  : assets/image/bgmb-detail.png

   Quan trọng:
   - Chỉ có 1 lớp background nằm trên <main>.
   - Tắt hẳn <picture class="hero__background"> để không có 2 ảnh
     cùng file nhưng crop/object-fit khác nhau => tạo đường cắt ngang.
   - Hero + Tin tức đều trong suốt để nhìn xuyên xuống cùng 1 ảnh nền.
   ========================================================= */

main {
    background-image: url('../image/mainbackground-mobile.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-color: transparent !important;
}

/* Đây là phần gây đường cắt: trước đó hero còn render một ảnh riêng.
   Tắt nó để hero dùng trực tiếp ảnh nền gốc của main. */
.hero__background {
    display: none !important;
}

.hero {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

#newsEvent.news-event {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

#newsEvent.news-event::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

@media (max-width: 900px) {
    main {
        background-image: url('../image/bgmb-detail.png') !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-color: transparent !important;
    }

    .hero__background {
        display: none !important;
    }

    .hero,
    #newsEvent.news-event {
        background: transparent !important;
        background-image: none !important;
        background-color: transparent !important;
    }
}