/* ============================================
   T888 Registration Slider Widget
   ============================================ */

.t888-fixed-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    /* Shadow mượt, bỏ viền cứng */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.t888-fixed-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0;
    align-items: center;
    /* Căn giữa dọc */
}

/* ---- Cột trái: Form ---- */
.t888-form-side {
    display: flex;
    align-items: center;
    padding: 36px 40px !important;
    background: #fff;
    position: relative;
    z-index: 2;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

/* ---- Cột phải: Ảnh chạy ---- */
.t888-image-side {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    min-width: 300px;
    /* Đảm bảo không bị bóp nghẹt trong editor */
    background: #fff;
}

/* Gradient mờ 2 cạnh để che vết nối ảnh */
.t888-image-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            #ffffff 0%,
            rgba(255, 255, 255, 0.9) 15%,
            transparent 35%,
            transparent 65%,
            rgba(255, 255, 255, 0.9) 85%,
            #ffffff 100%);
    z-index: 5;
    pointer-events: none;
}

/* Layer ảnh repeat bọc toàn bộ cột */
.t888-bg-repeat-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Thêm absolute để phủ kín container */
    left: 0;
    top: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Giữ tỉ lệ thon gọn tự nhiên */
    background-position: 0 0;
    animation: t888-infinite-bg linear infinite;
    will-change: background-position;
    z-index: 1;
    /* Nằm dưới lớp mờ (z-index 5) nhưng trên nền container */
}

/**
 * ANIMATION REPEAT:
 * Chạy từ vị trí 0 sang -1000px. Khi reset, điểm nối đã được che bởi gradient 2 cạnh.
 */
@keyframes t888-infinite-bg {
    from {
        background-position: 0 center;
    }

    to {
        background-position: -1000px center;
    }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .t888-fixed-row {
        flex-wrap: wrap !important;
    }

    .t888-form-side {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 24px 20px !important;
    }

    .t888-image-side {
        flex: 0 0 100%;
        max-width: 100%;
        height: 180px !important;
    }
}