.cotactic-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--cotactic-marquee-gap, 0px);
}

.cotactic-marquee__track {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    min-width: max-content;
    animation: cotactic-marquee-scroll var(--cotactic-marquee-speed, 50s) linear infinite;
}

.cotactic-marquee[data-direction="right"] .cotactic-marquee__track {
    animation-name: cotactic-marquee-scroll-right;
}

.cotactic-marquee[data-pause-on-hover="true"]:hover .cotactic-marquee__track {
    animation-play-state: paused;
}

.cotactic-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100%; /* Fix iOS Safari: ต้องมี explicit height ให้ img resolve ได้ */
}

.cotactic-marquee__item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none; /* ป้องกัน natural width มา override บน iOS */
    object-fit: contain;
    pointer-events: none;
}

.cotactic-marquee__item a {
    display: flex;
    align-items: center;
}

@keyframes cotactic-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - var(--cotactic-marquee-gap, 0px)));
    }
}

@keyframes cotactic-marquee-scroll-right {
    from {
        transform: translateX(calc(-100% - var(--cotactic-marquee-gap, 0px)));
    }
    to {
        transform: translateX(0);
    }
}