/* Styling cho Crypto Ticker Widget */
.cg-ticker-wrap {
    /* Giá trị mặc định nếu chưa chỉnh trong builder */
    --ticker-gap: 2.8rem;
    --ticker-duration: 40s;
    background-color: var(--bg);
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.cg-ticker-wrap .scroll {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* Khi hover thì dừng chạy */
.cg-ticker-wrap:hover .cg-ticker-slide {
    animation-play-state: paused;
    cursor: default;
}

.cg-ticker-wrap .cg-ticker-slide {
    display: flex;
    gap: var(--ticker-gap); /* Nhận giá trị từ control */
    list-style: none;
    padding: 0;
    margin: 0;
    padding-right: var(--ticker-gap);
    width: max-content; 
    animation: scroll-left var(--ticker-duration) linear infinite;
    flex-shrink: 0;
}

.cg-ticker-wrap li {
    flex-shrink: 0;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Màu sắc tăng giảm */
.cg-ticker-wrap .green { color: #16c784; }
.cg-ticker-wrap .red { color: #ea3943; }
.cg-ticker-wrap .val { font-weight: bold; }
.cg-ticker-wrap .divider { opacity: 0.3; }

/* Animation Keyframes */
@keyframes scroll-left {
    to {
        transform: translateX(-100%); 
    }
}