div class="loadview" data-type="slider" data-speed="slow" data-direction="left">
    <div class="slider-container">
        <div class="slider-track">
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_QiBo34cF.jpg" alt="3M"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_m8QHsvcD.jpg" alt="Delta Plus"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_Mao9DF4j.jpg" alt="Honeywell"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250808_K1id12Ex.jpg" alt="MSA"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_pjGXd3Tx.jpg" alt="Ansell"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_Bjn9twRl.jpg" alt="Proguard"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_nEkAdag1.jpg" alt="Oscar"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_pEkMLQi1.jpg" alt="Adela"></div>
            <div class="slide"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250908_STNsUsBi.jpg" alt="Excia"></div>
        </div>
    </div>
</div>

<style>
    .custom-slider-container {
        width: 100%;
        overflow: hidden;
        background: #fff;
        padding: 30px 0;
        position: relative;
        display: flex;
        align-items: center;
    }

    .loadview.slider-track {
        display: flex;
        width: max-content; /* Đảm bảo chiều rộng khớp với tổng lượng ảnh */
    }

    .slide-item {
        flex: 0 0 auto;
        width: 180px; /* Độ rộng mỗi logo */
        margin: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slide-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        transition: transform 0.3s ease;
    }

    .slide-item img:hover {
        transform: scale(1.1); /* Phóng to nhẹ khi di chuột vào */
    }
</style>

<div class="custom-slider-container">
    <div id="logoSlider" class="loadview slider-track">
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_QiBo34cF.jpg" alt="3M"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_m8QHsvcD.jpg" alt="Delta Plus"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_Mao9DF4j.jpg" alt="Honeywell"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250808_K1id12Ex.jpg" alt="MSA"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_pjGXd3Tx.jpg" alt="Ansell"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_Bjn9twRl.jpg" alt="Proguard"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_nEkAdag1.jpg" alt="Oscar"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250802_pEkMLQi1.jpg" alt="Adela"></div>
        <div class="slide-item"><img src="https://pos.nvncdn.com/a5329a-9980/art/artCT/20250908_STNsUsBi.jpg" alt="Excia"></div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const sliderTrack = document.getElementById('logoSlider');
        
        // Bước 1: Nhân đôi danh sách logo để tạo hiệu ứng lặp vô tận
        const content = sliderTrack.innerHTML;
        sliderTrack.innerHTML = content + content;

        // Bước 2: Thiết lập thông số chạy
        let scrollSpeed = 1; // Tốc độ chạy (1px mỗi khung hình)
        let currentScroll = 0;
        let isPaused = false;

        // Tạm dừng khi rê chuột vào
        sliderTrack.addEventListener('mouseenter', () => isPaused = true);
        sliderTrack.addEventListener('mouseleave', () => isPaused = false);

        function animate() {
            if (!isPaused) {
                currentScroll -= scrollSpeed;
                
                // Nếu chạy hết một nửa danh sách (phần ảnh gốc) thì reset về 0
                // để tạo cảm giác lặp vô tận
                if (Math.abs(currentScroll) >= sliderTrack.scrollWidth / 2) {
                    currentScroll = 0;
                }
                
                sliderTrack.style.transform = `translateX(${currentScroll}px)`;
            }
            requestAnimationFrame(animate);
        }

        // Bắt đầu chạy
        animate();
    });
</script>