/* Btn group main styles */
.btn-group button {outline: none;transition: all 0.5s;border: 0px solid white;color: white;padding: 6px 10px;cursor: pointer;float: left;position:relative;}
.btn-group:after {content: "";clear: both;display: table;}
.btn-group button:hover {background-image: -moz-linear-gradient(90deg, #ff5860 0%, #ff228a 100%);
    background-image: -webkit-linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
    background-image: -ms-linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
    background-image: linear-gradient(90deg, #ff087d 0%, #ff55a5 100%);}
.btn-group button:focus {background-image: -moz-linear-gradient(90deg, #2f1fff 0%, #55a5ff 100%);
    background-image: -webkit-linear-gradient(90deg, #2f1fff 0%, #55a5ff 100%);
    background-image: -ms-linear-gradient(90deg, #2f1fff 0%, #55a5ff 100%);
    background-image: linear-gradient(90deg, #2f1fff 0%, #55a5ff 100%);}
.btn-group button:active {background-image: -moz-linear-gradient(90deg, #ff5860 0%, #55a5ff 100%);
    background-image: -webkit-linear-gradient(90deg, #ff5860 0%, #55a5ff 100%);
    background-image: -ms-linear-gradient(90deg, #ff5860 0%, #55a5ff 100%);
    background-image: linear-gradient(90deg, #ff087d 0%, #55a5ff 100%);}

.btn-kh {width:22%;border-radius:35px 0px 0px 35px;background-image: -moz-linear-gradient(90deg, #ff55a5 0%, #ff5860 100%);
    background-image: -webkit-linear-gradient(90deg, #ff55a5 0%, #ff5860 100%);
    background-image: -ms-linear-gradient(90deg, #ff55a5 0%, #ff5860 100%);
    background-image: linear-gradient(90deg, #ff55a5 0%, #ff5860 100%);}
.btn-cn {width:22%;border-radius:0px 35px 35px 0px;background-image: -moz-linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
    background-image: -webkit-linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
    background-image: -ms-linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);
    background-image: linear-gradient(90deg, #ff5860 0%, #ff55a5 100%);}
.btn-ep {width:56%;background-color:#282828;pointer-events: none;padding: 6px 0px;text-align: left;font-size:0.8vw;font-size: min(max(13px, 1vw), 14px);}

/* Active button gradient */
.btn-group button.active {
background-image: linear-gradient(90deg, #ff087d 0%, #ff55a5 100%) !important;
}

/* Blinking LIVE */
.btn-group button.active::after {
content:"● LIVE";
font-size:10px;
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
animation:blink 1.2s infinite;
white-space:nowrap;
}

/* Responsive: wrap LIVE below text on small screens */
@media (max-width:480px) {
.btn-group button.active::after {
position: static;
display: block;
margin-top:3px;
transform:none;
text-align:left;
}
}

@keyframes blink {
0%{opacity:1;}
50%{opacity:0.2;}
100%{opacity:1;}
}