/* พื้นหลังแดง-ขาวพรีเมียม พร้อม gradient ซ้อนและ wave effect */
.bg-redwhite-premium {
    position: relative;
    height: 30vh;
    width: 100%;
    background: linear-gradient( 135deg, #ffffff 0%, #fff5f5 20%, #ffcccc 50%, #e63946 90% );
    overflow: hidden;
}

    /* แสงสะท้อนหรูหรา */
    .bg-redwhite-premium::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient( circle at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60% );
        animation: shine 8s infinite linear;
    }

    /* เส้น wave เพิ่มมิติ */
    .bg-redwhite-premium::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'> <path fill='%23ffffff' fill-opacity='0.4' d='M0,192L60,186.7C120,181,240,171,360,165.3C480,160,600,160,720,154.7C840,149,960,139,1080,133.3C1200,128,1320,128,1380,128L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'></path> </svg>"); background-size: cover;
        animation: waveMove 10s infinite linear;
    }

/* เอฟเฟกต์ shine */
@keyframes shine {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* เอฟเฟกต์ wave */
@keyframes waveMove {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1440px;
    }
}


/* ให้ hidden ทำงานแน่นอน */
#banner-2[hidden] {
    display: none !important;
}

/* แอนิเมชันซ่อนแบนเนอร์ 1 แบบยุบตัวและจางหาย */
.collapse-out {
    animation: collapseOut .45s ease-in forwards;
}

@keyframes collapseOut {
    to {
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}