body{
    background: linear-gradient(135deg,#1e3c72,#2a5298);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:15px;
    font-family: Arial, sans-serif;
    margin:0;
    padding:20px;
    padding-bottom:80px;
}

.wrapper{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.card{
    width:100%;
    max-width:600px;
    border-radius:20px;
}

.main-title{
    text-transform:uppercase;
    font-weight:700;
}

.sub-title{
    font-size:14px;
    color:#6c757d;
    font-weight:bold;
}

.score-display{
    font-size:clamp(50px, 10vw, 90px);
    font-weight:bold;
    text-align:center;
    color:#0d6efd;
}
input[type="range"] {
    height: 40px;
}

/* Chrome, Edge, Safari */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 33px;
    height: 33px;
    background: #0d6efd;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    margin-top: -10px;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    width: 33px;
    height: 33px;
    background: #0d6efd;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Track đẹp hơn */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 10px;
}

input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 10px;
}
.note{
    font-size:14px;
    text-align:center;
    color:#dc3545;
    font-weight:500;
}

.slider-title{
    text-align:center;
    font-weight:600;
    margin-top:15px;
    margin-bottom:5px;
}

.footer{
    text-align:center;
    font-size:13px;
    color:#ffffffcc;
    margin-top:20px;
}
.custom-alert{
    margin-top:8px;
    padding:10px 12px;
    border-radius:8px;
    background-color:#f8d7da;
    color:#842029;
    font-size:14px;
    font-weight:500;
    border:1px solid #f5c2c7;
    animation: fadeIn 0.3s ease-in-out;
}

.custom-alert-success{
    margin-top:12px;
    padding:10px 14px;
    border-radius:8px;
    background-color:#d1e7dd;
    color:#0f5132;
    font-weight:500;
    font-size:14px;
    border:1px solid #badbcc;
    animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(-5px);}
    to{opacity:1; transform:translateY(0);}
}



.container{
    max-width:900px;
    margin:auto;
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

h2{
    text-align:center;
    margin-bottom:25px;
}

.chart-row{
    margin-bottom:22px;
    position:relative;
    overflow:hidden;
}

.rank-label{
    font-weight:bold;
    margin-bottom:6px;
}

.bar-wrapper{
    background:#e0e0e0;
    border-radius:30px;
    height:42px;
    position:relative;
    overflow:hidden;
}

.bar{
    height:100%;
    border-radius:30px;
    position:relative;
    transition:width 0.8s ease;
}

/* Màu */
.rank-1{ background:#28a745; }
.rank-2{ background:#007bff; }
.rank-3{ background:#ff9800; }
.rank-4{ background:#9c27b0; }
.rank-other{ background:#6c757d; }

/* Tên ca sĩ */
.singer-name{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    color:#e53935;
    font-weight:bold;
    white-space:nowrap;
    display:none;
    pointer-events:none;
    z-index:2;

    text-shadow: 
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff;
}

.singer-name.zoom-out{
    animation: zoomOutEffect 0.5s ease forwards;
}

@keyframes zoomOutEffect{
    0%{
        transform:translate(-50%, -50%) scale(1.8);
        opacity:0;
    }
    60%{
        transform:translate(-50%, -50%) scale(0.9);
        opacity:1;
    }
    100%{
        transform:translate(-50%, -50%) scale(1);
        opacity:1;
    }
}

/* Điểm */
.score{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:white;
    font-weight:bold;text-shadow: 
        1px 1px 0 #e53935,
        -1px -1px 0 #e53935,
        1px -1px 0 #e53935,
        -1px 1px 0 #e53935;
}

/* Nút bên phải */
.toggle-btn{
    display:block;
    margin:8px 0 0 auto;
    padding:6px 14px;
    border:none;
    border-radius:20px;
    background:#333;
    color:white;
    cursor:pointer;
    font-size:13px;
}

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1565C0;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    z-index: 999;
}
.footer a{
    color:#ffffff;
    text-decoration:none;
}
.confetti-canvas{
    position:absolute;
    bottom:0;
    left:0;
    pointer-events:none;
}
.timer-box {
    backdrop-filter: blur(10px);
    
    text-align: center;
}

#countdown {
    font-size: 90px;
    font-weight: bold;
    color: #1565C0;
    transition: all 0.3s ease;
}

.red {
    color: #ff4d4d;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.scale {
    transform: scale(1.1);
}
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial;
}

th {
    background: #2a5298;
    color: white;
    padding: 12px;text-align: center;
}

td {
    padding: 10px;
    
}

tr:nth-child(even) {
    background: #f2f2f2;
}

tr:hover {
    background: #ddd;
}