.entry-title {
    display: none;
}

.horse-history {
    margin-top: 20px;
    border-top: 1px solid #D0D0D2;
}

.horse-history h3 {
    margin-top: 20px;
    color: #343436;
    font-size: 15px;
    font-weight: 600;
}

.field-table {
    /*border: 1px solid #E0DFE3;*/
    /*padding: 10px;*/
}

.horse-history table tbody > tr:nth-of-type(odd),
.field-table table tbody > tr:nth-of-type(odd) {
    /*background-color: #f5f5f5;*/
}

table .horse-active {
    font-weight: bold;
}

#container-race-detail .field-table table tr.go-to-form:hover {
    background-color: #e8e8e8;
    cursor: pointer;
}

#container-race-detail .horse-history table tbody tr td {
    padding: 7px 7px;
}

@media screen and (max-width: 767px) {
    table .hidden-xs {
        display: none;
    }

    .entry-content {
        margin-bottom: 30px;
    }
}

.race-header {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    font-family: Arial, sans-serif;
    max-width: 100%;
}

.race-number-container {
    margin-right: 20px;
    flex-shrink: 0;
}

.race-number-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--main-color);
}

.race-number-circle span {
    font-size: 28px;
    font-weight: bold;
    color: #000;
}

.race-details {
    flex: 1;
    overflow: hidden; /* Prevents content from overflowing */
}

.race-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #000;
    line-height: 1.2;
}

.race-datetime {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.race-info {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.race-type, .race-distance {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.race-separator {
    color: var(--main-color);
    font-size: 30px;
    margin: 0 10px;
    vertical-align: middle;
}

.race-distance {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-left: 10px;
}

.race-prize {
    font-size: 14px;
    color: #000;
    line-height: 1.4;
    word-wrap: break-word; /* Ensures long prize text wraps properly */
}

.race-header-separator {
    height: 1px;
    background-color: #ddd;
    margin: 5px 0 15px 0;
    width: 100%;
}

.table.racing-detail {
    margin-bottom: 0;
    color: #000;
}


.table.racing-detail tbody tr {
    border: none;
}

.table.racing-detail tbody tr th {
    background-color: var(--main-color);
    padding: 8px;
}

/* Styling cho collapsed row */
.table.racing-detail tbody tr.collapsed {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #eaeaea;
}

.table.racing-detail tbody tr.collapsed:hover {
    background-color: #f8f9fa;
}
.table.racing-detail tbody tr.collapsed.scratched td {
    text-decoration: line-through;
}
.table.racing-detail tbody tr.collapsed.scratched td.expanded-icon {
    text-decoration: unset;
}
/* Active horse styling */

.table.racing-detail tbody tr.expanded-detail {
    display: none;
}

/* Khi expanded, hiển thị expanded-detail */
.table.racing-detail tbody tr.collapsed.expanded + tr.expanded-detail {
    display: table-row;
}

.table.racing-detail .expanded-detail td {
    border-top: none;
    padding: 1rem;
}

.table.racing-detail .expanded-detail td hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #4A4A4A;
}
.table.racing-detail .expanded-detail td hr.normal {

    border-top: 1px solid #eaeaea;
}
.table.racing-detail .expanded-content .title-horse {
    margin-bottom: 15px;
    color: #000;
    font-weight: 600;
}

/* Progress bars trong expanded detail */
.progress-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    font-family: Arial, sans-serif;
    padding: 15px 0;
    margin-bottom: 15px;
}

.progress-item {
    flex: 1;
}

.progress-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Win progress bar - Green color */
.progress-fill.win {
    background-color: #10b981;
}

/* Place progress bar - Blue color */
.progress-fill.place {
    background-color: #06b6d4;
}

/* Info section styling */
.info-section {
    margin-bottom: 15px;
}


/* Statistics section */
.statistics-section {
    margin-bottom: 35px;
}
.statistics-section .col-statist {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
}
.statistics-section .col-statist .text-uppercase {
    text-transform: uppercase;
}
.statistics-section .col-statist .font-weight-bold {
    font-weight: 600;
}
.statistics-section .col-statist .text-muted {
    color: #7E8299;
}

.entry-content tr td.expanded-icon {
    width: 40px;
    padding-left: 10px;
    padding-right: 10px;
}


.statistics-section .col-statist:nth-child(4n-3):nth-child(-n+4),
.statistics-section .col-statist:nth-child(4n-2):nth-child(-n+4),
.statistics-section .col-statist:nth-child(4n-1):nth-child(-n+4),
.statistics-section .col-statist:nth-child(4n):nth-child(-n+4) {
    background-color: white; /* Hàng 1 */
}

.statistics-section .col-statist:nth-child(4n-3):nth-child(n+5):nth-child(-n+8),
.statistics-section .col-statist:nth-child(4n-2):nth-child(n+5):nth-child(-n+8),
.statistics-section .col-statist:nth-child(4n-1):nth-child(n+5):nth-child(-n+8),
.statistics-section .col-statist:nth-child(4n):nth-child(n+5):nth-child(-n+8) {
    background-color: rgba(235,237,245,.5); /* Hàng 2 */
}

.statistics-section .col-statist:nth-child(4n-3):nth-child(n+9):nth-child(-n+12),
.statistics-section .col-statist:nth-child(4n-2):nth-child(n+9):nth-child(-n+12),
.statistics-section .col-statist:nth-child(4n-1):nth-child(n+9):nth-child(-n+12),
.statistics-section .col-statist:nth-child(4n):nth-child(n+9):nth-child(-n+12) {
    background-color: white; /* Hàng 3 */
}

.statistics-section .col-statist:nth-child(4n-3):nth-child(n+13):nth-child(-n+16),
.statistics-section .col-statist:nth-child(4n-2):nth-child(n+13):nth-child(-n+16),
.statistics-section .col-statist:nth-child(4n-1):nth-child(n+13):nth-child(-n+16),
.statistics-section .col-statist:nth-child(4n):nth-child(n+13):nth-child(-n+16) {
    background-color: rgba(235,237,245,.5); /* Hàng 4 */
}

.statistics-section .col-statist:nth-child(4n-3):nth-child(n+17):nth-child(-n+20),
.statistics-section .col-statist:nth-child(4n-2):nth-child(n+17):nth-child(-n+20),
.statistics-section .col-statist:nth-child(4n-1):nth-child(n+17):nth-child(-n+20),
.statistics-section .col-statist:nth-child(4n):nth-child(n+17):nth-child(-n+20) {
    background-color: white; /* Hàng 5 */
}

.statistics-section .col-statist:nth-child(n+21) {
    background-color: rgba(235,237,245,.5); /* Hàng 6 */
}
.expanded-detail .expanded-content .table-history {
    border: 0 ;
    font-size: 13px;
}
.expanded-detail .expanded-content .table-history tr {
    border-bottom: 1px solid #333;
}
.expanded-detail .expanded-content .table-history tr td {
    padding: 15px 0
}
.expanded-detail .expanded-content .table-history tr td .history-result{
    padding: 5px 10px;
    border: 1px solid #333;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}
.previous-race-section h6 {
    font-weight: 700;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .progress-container {
        flex-direction: column;
        gap: 15px;
    }

    .progress-label {
        font-size: 14px;
    }

    .expanded-detail td {
        padding: 15px !important;
    }

    .info-section {
        padding: 10px;
    }

    .race-header {
        flex-direction: column;
    }

    .race-number-container {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .race-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .race-separator {
        display: none;
    }

    .race-distance {
        margin-left: 0;
        margin-top: 5px;
    }
}