/* ===== CARD ===== */
.top-card{
    background:antiquewhite;
    padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    border-radius:6px;
}

/* ===== TITLE ===== */
.description-top h1,
.description-top h2,
.description-top h3{
    color:#ff9800;
    text-shadow:0 0 8px rgba(255,152,0,.6);
}

/* ===== TABLE (QUAN TRỌNG) ===== */
.top-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.top-table th,
.top-table td{
    padding:10px 12px;
    border-bottom:1px solid #e6d3b1;
    vertical-align:middle;
}

/* ===== HEADER ===== */
.top-table thead th{
    font-weight:600;
    text-align:left;
}

/* ===== TOP COLUMN ===== */
.col-top{
    width:60px;
    text-align:center;
    font-weight:600;
    padding-right:15px !important;
}
.col-top span{
    display:inline-flex;
    width:24px;
    justify-content:center;
}

/* ===== USERNAME COLUMN (CỘT THỨ 2) ===== */
.top-table th:nth-child(2),
.top-table td:nth-child(2){
    width:110px;
    padding-left:20px !important;
    padding-right:10px !important;
}

/* ===== MONEY COLUMN (CỘT THỨ 3) ===== */
.top-table th:nth-child(3),
.top-table td:nth-child(3){
    width:auto;
    padding-right:8px;
    font-size:14px;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
    .col-top{
        width:80px;
        padding-right:30px !important;
    }
    
    .top-table th:nth-child(2),
    .top-table td:nth-child(2){
        width:200px;
        padding-left:60px !important;
        padding-right:30px !important;
    }
    
    .top-table th:nth-child(3),
    .top-table td:nth-child(3){
        font-size:16px;
    }
}

/* ===== MONEY COLUMN – CĂN GIỮA ===== */
.top-table thead th.col-money,
.top-table tbody td.col-money{
    text-align:center;
}

/* ===== TOP COLORS ===== */
.top-1{color:#d4af37;}
.top-2{color:#9e9e9e;}
.top-3{color:#cd7f32;}

/* ===== SWITCH ===== */
.month-switch{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:14px;
}
.month-btn{
    padding:6px 18px;
    border-radius:20px;
    font-size:13px;
    border:1px solid #0d6efd;
    background:#fff;
    cursor:pointer;
}
.month-btn.active{
    background:#0d6efd;
    color:#fff;
}