table, tbody, td, th {
    background-color: transparent !important;
}

tr{
    border-radius: 0.4375rem;
    box-shadow: 0 0 0 0.0625rem #1B4654;
    overflow: hidden;
    border: 0.0625rem solid #1B4654;
    background: #123744 !important;
} 

body {
    background-color: #0a0a0a;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    /* background-image: url('https://i.imgur.com/ZVpzXXX.png'); */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.25rem;
}

.ranking-table {
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.9) 100%);
    border-radius: 0.625rem;
    padding: 1.25rem;
    margin-top: 1.25rem;
    border: 0.0625rem solid #00f7ff;
    box-shadow: 0 0 0.625rem rgba(0, 247, 255, 0.3);
}

.table {
    color: #fff !important;
    margin-bottom: 0;
    border-spacing: 0 0.625rem !important;
    border-collapse: separate !important;
    background-color: transparent !important;
}

.table > thead {
    background: linear-gradient(90deg, rgba(0,247,255,0.2) 0%, rgba(0,247,255,0.1) 100%);
    border-bottom: 0.125rem solid #00f7ff;
}

.table > thead th {
    color: #00f7ff !important;
    font-weight: 600;
    text-align: center;
    padding: 0.9375rem;
    border: none;
}

.table > tbody > tr {
    border: none;
    margin: 0.5rem 0;
    transition: all 0.3s ease;
}

/* Top 3 Styles */
.rank-1 {
    height: 5rem;
    margin: 0.9375rem 0 !important;
    border-radius: 0.4375rem;
    overflow: hidden;
    background: linear-gradient(90deg, #3F0040 0%, #5F035C 34.1%, #B501B8 57.68%, #A500A8 80.05%, #B400B7 100%) !important;
    box-shadow: inset 0 0 0 0.25rem #FF66F5, 0 0 1.35625rem 0 #FF4998, 0 0 1.35625rem 0 #FF4998 inset !important;
}

.rank-2 {
    height: 4.375rem;
    margin: 0.75rem 0 !important;
    border-radius: 0.4375rem;
    overflow: hidden;
    background: linear-gradient(90deg, #141162 0%, #242172 34.1%, #5B58A9 55.68%, #3E3B8C 80.05%, #3A3788 100%) !important;
    box-shadow: inset 0 0 0 0.25rem #9F9CFF, 0 0 1.35625rem 0 #9F9CFF, 0 0 1.35625rem 0 #9F9CFF inset !important;
}

.rank-3 {
    height: 3.75rem;
    margin: 0.625rem 0 !important;
    border-radius: 0.4375rem;
    overflow: hidden;
    background: linear-gradient(90deg, #022829 0%, #004648 34.1%, #008F92 55.68%, #006163 80.05%, #006D71 100%) !important;
    box-shadow: inset 0 0 0 0.25rem #13D6DD, 0 0 0.66875rem 0 #13d6dd, 0 0 1.35625rem 0 #13d6dd inset !important;
}

.rank-star {
    width: auto;
    height: 2.5rem;
    margin-right: 0.9375rem;
    vertical-align: middle;
}

.rank-1 .rank-star {
    height: 3.125rem;
}

.rank-2 .rank-star {
    height: 2.8125rem;
}

.rank-3 .rank-star {
    height: 2.5rem;
}

.table > tbody > tr > td {
    padding: 0rem 0.4rem;
    border: none;
    text-align: center;
    vertical-align: middle;
}

.rank-1 td {
    font-size: 1.75rem !important;
    font-weight: 600;
    letter-spacing: 0.03125rem;
}

.rank-2 td {
    font-size: 1.5rem !important;
    font-weight: 500;
    letter-spacing: 0.01875rem;
}

.rank-3 td {
    font-size: 1.25rem !important;
    font-weight: 500;
    letter-spacing: 0.0125rem;
}

/* ปรับขนาดตัวอักษรสำหรับแถวปกติ */
.table > tbody > tr:not(.rank-1):not(.rank-2):not(.rank-3) td {
    font-size: 1rem;
}

.rank-number {
    font-weight: bold;
    color: #F646FF;
}

.guild-name {
    color: #888;
}

.cp-value {
    color: #00ff00;
}

.growth {
    color: #ff9900;
}

.rank-up {
    color: #00ff00;
}

.rank-down {
    color: #ff0000;
}

.loading {
    text-align: center;
    padding: 3.125rem;
    font-size: 1.5rem;
    color: #00f7ff;
}

/* DataTables Custom Styles */
.dataTables_wrapper {
    color: #00f7ff;
}

.dataTables_filter input {
    background-color: rgba(0, 247, 255, 0.1) !important;
    color: #fff !important;
    border: 0.0625rem solid #00f7ff !important;
    border-radius: 0.3125rem;
    padding: 0.3125rem 0.625rem;
}

.dataTables_length select {
    background-color: rgba(0, 247, 255, 0.1) !important;
    color: #fff !important;
    border: 0.0625rem solid #00f7ff !important;
    border-radius: 0.3125rem;
}

.page-link {
    background-color: rgba(0, 247, 255, 0.1) !important;
    color: #00f7ff !important;
    border-color: #00f7ff !important;
}

.page-link:hover {
    background-color: rgba(0, 247, 255, 0.3) !important;
    color: #fff !important;
}

.dataTables_info {
    color: #00f7ff !important;
}

.table-dark {
    background-color: transparent !important;
}

.table-dark thead th {
    background-color: rgba(246, 70, 255, 0.2) !important;
}

.dataTables_filter label, .dataTables_length label {
    color: #fff !important;
}

/* ปรับแต่งพื้นหลังสำหรับ row ปกติ */
.table > tbody > tr:not(.rank-1):not(.rank-2):not(.rank-3) {
    background: linear-gradient(90deg, rgba(0,247,255,0.05) 0%, transparent 100%);
    border-radius: 0.3125rem;
    margin: 0.9375rem 0;
    transition: all 0.3s ease;
}

.table > tbody > tr:not(.rank-1):not(.rank-2):not(.rank-3):hover {
    background: linear-gradient(90deg, rgba(0,247,255,0.1) 0%, rgba(0,247,255,0.02) 100%);
    transform: translateX(0.3125rem);
}

/* ลบเส้นคั่นเก่าออก */
.table > tbody > tr:not(:last-child) {
    border-bottom: none !important;
}

/* ปรับแต่ง DataTable */
.dataTables_wrapper .row {
    margin: 0.9375rem 0;
}

td{
    color:#fff !important;
}

/* Rank Icon Styles */
.rank-icon {
    width: auto;
    height: 4.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    margin: -0.5rem;
}

.player-rank {
    color: #fff !important;
    font-weight: 500;
}

.rank-1 .player-rank {
    font-size: 1.5rem !important;
}

.rank-2 .player-rank {
    font-size: 1.375rem !important;
}

.rank-3 .player-rank {
    font-size: 1.25rem !important;
}

/* History Icon Styles */
.hist-icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

.rank-1 .hist-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.rank-2 .hist-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.rank-3 .hist-icon {
    width: 1.375rem;
    height: 1.375rem;
}
option {
    color: #000000;
}

@media screen and (max-width: 399px) {
    .rank-1 td {
       font-size: 1rem !important;
     
   }
   
   .rank-2 td {
       font-size: 1rem !important;
     
   }
   
   .rank-3 td {
       font-size: 1rem !important;
      
   }
   
   }

   table td.dtr-control:before {
   
    color: #ff00f2 !important;
   
}