body {
    background: #f4f6f9;
    font-family: Arial, sans-serif;
}

/* Navbar */
.navbar-brand {
    font-weight: bold;
}

/* Card */
.card {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    transition: .25s;
}

.card:hover {
    transform: translateY(-3px);
}

/* Bóng số */
.numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.ball {
    width: 54px;
    height: 54px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    color: #fff;
    font-size: 20px;
    font-weight: bold;

    background: linear-gradient(180deg,#ff4d4d,#d60000);

    box-shadow: 
        0 4px 10px rgba(0,0,0,.25);

    cursor: pointer;
    transition: .25s;
}

.ball:hover {
    transform: scale(1.15) translateY(-3px);
}


/* Mega 6/45 mặc định */
.mega-ball {
    background: linear-gradient(180deg,#ff4d4d,#d60000);
}


/* Lotto 5/35 */
.lotto-ball {
    background: linear-gradient(180deg,#078c07,#038a03);
}


/* Số đặc biệt */
.lotto-special {
    background: linear-gradient(180deg,#ffae42,#ff7000);
}


/* Power 6/55 */
.power-ball {
    background: linear-gradient(180deg,#ffe066,#ffc107);
    color:#000;
}


/* Bảng */
.table {
    background:#fff;
    margin-top:15px;
    border-radius:12px;
    overflow:hidden;
}

.table td,
.table th {
    vertical-align:middle;
}


/* Breadcrumb */
.breadcrumb {
    background:#fff;
    padding:12px 18px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}


/* Alert */
.alert {
    border-radius:12px;
}


/* Form */
form {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}
/* Lotto */
.lotto-ball{
    background:linear-gradient(180deg,#078c07,#038a03);
}

.lotto-special{
    background:linear-gradient(180deg,#ffb347,#ff6a00);
}
.numbers{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:20px 0;

}

.ball{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

font-weight:bold;

color:#fff;

}

.mega-ball{

background:#d71920;

}
.next-draw{

margin-top:15px;

padding:12px;

background:#fff8f8;

border-left:4px solid #dc3545;

border-radius:8px;

line-height:1.8;

font-size:14px;

}

.next-draw strong{

color:#dc3545;

}
.result-balls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:15px 0;
}

.result-balls .ball{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#dc3545;
    color:#fff;
    font-weight:bold;
    font-size:20px;
}
.live-ball.spin{

animation:spinBall .15s linear infinite;

}

@keyframes spinBall{

0%{

transform:rotateY(0deg);

}

100%{

transform:rotateY(360deg);

}

}

.bounce{

animation:bounce .5s;

}

@keyframes bounce{

0%{

transform:scale(.6);

}

40%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}

.live-mode .countdown{

display:none;

}