/* File: assets/css/fconline-reset.css */
/* FC Online Reset Time CSS - Tham khảo Match Prediction System */

/* Variables */
:root {
    --fconline-primary: #aeff00;
    --fconline-secondary: #ffbf00;
    --fconline-dark: #1a1a1a;
    --fconline-darker: #2d2d2d;
    --fconline-white: #ffffff;
    --fconline-gray: #cccccc;
    --fconline-gray-dark: #999999;
    --fconline-success: #28a745;
    --fconline-danger: #dc3545;
    --fconline-warning: #ffc107;
}

/* Main Wrapper */
.fconline-reset-wrapper {
    background-color: #000000;
    color: var(--fconline-white);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.5;
    padding: 20px;
    min-height: 600px;
}

.fconline-reset-wrapper * {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

.fconline-reset-row {
    margin: 0 -15px;
}

.fconline-reset-col-left,
.fconline-reset-col-right {
    padding: 0 15px;
}

/* Common Section Styles */
.fconline-reset-form-section,
.fconline-reset-time-section,
.fconline-reset-list-section {
    background: linear-gradient(135deg, var(--fconline-dark) 0%, var(--fconline-darker) 100%);
    border: 1px solid var(--fconline-primary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Section Headers */
.fconline-reset-form-header,
.fconline-reset-time-header,
.fconline-reset-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fconline-primary);
}

.fconline-reset-form-header h3,
.fconline-reset-time-header h3,
.fconline-reset-list-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fconline-primary);
    font-size: 18px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fconline-reset-form-header i,
.fconline-reset-time-header i,
.fconline-reset-list-header i {
    color: var(--fconline-secondary);
}

.fconline-reset-total-count {
    color: var(--fconline-gray);
    font-size: 14px;
}

.fconline-reset-total-count span {
    color: var(--fconline-primary);
    font-weight: 600;
}

/* Form Styles */
.fconline-reset-form-group {
    margin-bottom: 20px;
}

.fconline-reset-form-group label {
    display: block;
    color: var(--fconline-primary);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fconline-reset-input,
.fconline-reset-select {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(174, 255, 0, 0.3) !important;
    border-radius: 8px !important;
    color: var(--fconline-white) !important;
    font-size: 14px !important;
    font-family: monospace !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.fconline-reset-input:focus,
.fconline-reset-select:focus {
    outline: none;
    border-color: var(--fconline-primary);
    background: rgba(174, 255, 0, 0.1);
    box-shadow: 0 0 0 3px rgba(174, 255, 0, 0.2);
}

.fconline-reset-input::placeholder {
    color: var(--fconline-gray-dark);
}

.fconline-reset-select option {
    background: var(--fconline-darker);
    color: var(--fconline-white);
}

.fconline-reset-form-group svg {
    font-size: 16px !important;
    width: 16px !important;
}

.fconline-reset-total-count {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Form Buttons */
.fconline-reset-btn,
.fconline-reset-btn-clear,
.fconline-reset-btn-load {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.fconline-reset-btn {
    background: linear-gradient(135deg, var(--fconline-primary), var(--fconline-secondary));
    color: #000000;
    border: 2px solid var(--fconline-primary);
    margin-right: 10px;
}

.fconline-reset-btn:hover {
    background: linear-gradient(135deg, var(--fconline-secondary), var(--fconline-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(174, 255, 0, 0.4);
}

.fconline-reset-btn-clear {
    background: rgba(255, 255, 255, 0.1);
    color: var(--fconline-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.fconline-reset-btn-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--fconline-white);
    transform: translateY(-2px);
}

.fconline-reset-btn-load {
    background: linear-gradient(135deg, var(--fconline-primary), var(--fconline-secondary));
    color: #000000;
    border: 2px solid var(--fconline-primary);
    width: 100%;
    justify-content: center;
}

.fconline-reset-btn-load:hover {
    background: linear-gradient(135deg, var(--fconline-secondary), var(--fconline-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(174, 255, 0, 0.4);
}

/* Time Display */
.fconline-reset-time-display {
    text-align: center;
}

.fconline-reset-time-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(174, 255, 0, 0.3);
}

.fconline-reset-time-label {
    color: var(--fconline-gray);
    font-size: 14px;
    margin-bottom: 10px;
}

.fconline-reset-time-now {
    color: var(--fconline-primary);
    font-size: 32px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(174, 255, 0, 0.5);
    font-variant-numeric: tabular-nums;
}

.fconline-reset-time-status {
    margin-bottom: 20px;
}

.fconline-reset-time-info {
    padding: 15px;
    background: rgba(174, 255, 0, 0.1);
    border: 1px solid var(--fconline-primary);
    border-radius: 8px;
}

.fconline-reset-status {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.current-period {
    font-size: 16px;
    font-weight: 600;
}

.current-period.chẵn {
    color: #00ff88;
}

.current-period.lẻ {
    color: #ff8800;
}

.current-period.nghỉ {
    color: var(--fconline-warning);
}

.time-to-next {
    font-size: 14px;
    color: var(--fconline-gray);
}

/* Time Legend */
.fconline-reset-time-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fconline-reset-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--fconline-gray);
}

.fconline-reset-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.fconline-reset-legend-dot.even {
    background: #00ff88;
}

.fconline-reset-legend-dot.odd {
    background: #ff8800;
}

/* Player List */
.fconline-reset-player-list {
    max-height: 600px;
    overflow-y: auto;
}

.fconline-reset-player-list::-webkit-scrollbar {
    width: 6px;
}

.fconline-reset-player-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.fconline-reset-player-list::-webkit-scrollbar-thumb {
    background: var(--fconline-primary);
    border-radius: 3px;
}

.fconline-reset-player-list::-webkit-scrollbar-thumb:hover {
    background: var(--fconline-secondary);
}

/* Player Items */
.fconline-reset-player-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(174, 255, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    animation: slideInUp 0.5s ease-out;
}

.fconline-reset-player-item:hover {
    background: rgba(174, 255, 0, 0.1);
    border-color: var(--fconline-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(174, 255, 0, 0.2);
}

/* Player OVR */
.fconline-reset-player-ovr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 60px;
}

.fconline-reset-pos {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    background: var(--fconline-secondary);
}

.fconline-reset-ovr {
    padding: 2px 2px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    background: var(--fconline-primary);
}

/* Player Info */
.fconline-reset-player-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.fconline-reset-player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(174, 255, 0, 0.3);
    flex-shrink: 0;
}

.fconline-reset-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fconline-reset-no-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--fconline-gray);
}

.fconline-reset-player-details {
    flex: 1;
}

.fconline-reset-player-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.fconline-reset-ovr, .fconline-reset-pos {
    min-width: 26px;
}

.fconline-reset-player-season {
    padding: 2px 8px;
    border-radius: 0px;
    font-size: 0px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--fconline-secondary);
    color: #000000;
    
}

.fconline-reset-stars svg {
    font-size: 18px;
    width: 18px;
}

.fconline-reset-player-name {
    color: var(--fconline-white);
    font-size: 16px;
    font-weight: 600;
}

.fconline-reset-player-name mark {
    background: var(--fconline-primary);
    color: #000000;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Stars Rating */
.fconline-reset-stars {
    display: flex;
    gap: 3px;
}

.fconline-reset-stars svg.filled {
    color: var(--fconline-secondary);
}

.fconline-reset-stars svg.empty {
    color: rgba(255, 255, 255, 0.2);
}

/* Reset Time Badge */
.fconline-reset-player-reset {
    min-width: 100px;
    text-align: center;
}

.fconline-reset-time-badge {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fconline-reset-time-badge.even {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    color: #000000;
}

.fconline-reset-time-badge.odd {
    background: linear-gradient(135deg, #ff8800, #cc6600);
    color: #000000;
}

/* Loading States */
.fconline-reset-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--fconline-gray);
    font-size: 16px;
}

.fconline-reset-loading i {
    color: var(--fconline-primary);
    font-size: 20px;
}

/* Empty States */
.fconline-reset-no-results,
.fconline-reset-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--fconline-gray);
}

.fconline-reset-no-results i,
.fconline-reset-error i {
    font-size: 48px;
    color: var(--fconline-primary);
    margin-bottom: 20px;
}

.fconline-reset-no-results p,
.fconline-reset-error p {
    font-size: 16px;
    margin: 0;
}

/* Load More Section */
.fconline-reset-load-more {
    text-align: center;
    margin-top: 20px;
}

/* Toast Notifications */
.fconline-reset-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--fconline-darker);
    border: 1px solid var(--fconline-primary);
    border-radius: 8px;
    color: var(--fconline-white);
    font-size: 14px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.fconline-reset-toast.show {
    transform: translateX(0);
}

.fconline-reset-toast-success {
    border-color: var(--fconline-success);
}

.fconline-reset-toast-error {
    border-color: var(--fconline-danger);
}

.fconline-reset-toast-success i {
    color: var(--fconline-success);
}

.fconline-reset-toast-error i {
    color: var(--fconline-danger);
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.fconline-reset-player-item:hover {
    animation: pulse 0.3s ease-in-out;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .fconline-reset-wrapper {
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .fconline-reset-wrapper {
        padding: 10px;
    }
    
    
    .fconline-reset-form-header h3, .fconline-reset-time-header h3, .fconline-reset-list-header h3 {
    font-size: 16px;
}
.fconline-reset-total-count {
   
    font-size: 12px;
}

.fconline-reset-player-list {
    max-height: 888px;
    overflow-y: auto;
}
    
    .fconline-reset-form-section,
    .fconline-reset-time-section,
    .fconline-reset-list-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .fconline-reset-player-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }
    
    .fconline-reset-player-info {
        width: 100%;
    }
    
    .fconline-reset-player-ovr {
        flex-direction: row;
        min-width: auto;
    }
    
    .fconline-reset-player-reset {
       
        min-width: auto;
    }
    
    .fconline-reset-time-now {
        font-size: 24px;
    }
    
    .fconline-reset-btn,
    .fconline-reset-btn-clear {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .fconline-reset-wrapper {
        padding: 5px;
    }
    
    .fconline-reset-form-section,
    .fconline-reset-time-section,
    .fconline-reset-list-section {
        padding: 10px;
    }
    
    .fconline-reset-player-item {
        padding: 8px;
    }
    
    .fconline-reset-player-avatar {
        width: 80px;
        height: 80px;
    }
    
    .fconline-reset-player-name {
        font-size: 14px;
    }
    
    .fconline-reset-time-now {
        font-size: 20px;
    }
}


/* Salary Styles - THÊM VÀO CSS */

.hexagon-icon {
  position: relative;
  display: inline-block;
  width: 64px;              /* chiều ngang lục giác */
  height: 55px;             /* theo tỉ lệ 120:104 của SVG */
}

.hexagon-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hexagon-icon svg polygon {
  fill: #fff;               /* màu nền */
  stroke: #000;             /* màu viền */
  stroke-width: 2px;
}

.hexagon-icon .hexagon-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;          /* chỉnh cỡ chữ theo kích thước hexagon */
  line-height: 1;
  pointer-events: none;
  color: #000;
}

/* các size nhanh */
.hexagon-icon.small {
  width: 32px;
  height: 28px;
  font-size: 12px;
}

.hexagon-icon.medium {
  width: 48px;
  height: 42px;
  font-size: 16px;
}

.hexagon-icon.large {
  width: 80px;
  height: 70px;
  font-size: 26px;
}



/* Container cho rating và salary */
.fconline-reset-player-rating-salary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* Salary display */
.fconline-reset-player-salary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fconline-secondary);
    font-size: 12px;
    font-weight: 600;
}

.fconline-reset-player-salary i {
    color: var(--fconline-secondary);
    font-size: 12px;
}

.fconline-reset-player-salary .salary-value {
    color: var(--fconline-white);
    background: rgba(255, 191, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 191, 0, 0.3);
    font-variant-numeric: tabular-nums;
}

/* Responsive adjustments for salary */
@media (max-width: 768px) {
    .fconline-reset-player-rating-salary {
        
        align-items: flex-start;
        gap: 8px;
    }
    
    .fconline-reset-player-salary {
        font-size: 11px;
    }
    
    .fconline-reset-player-salary .salary-value {
        font-size: 11px;
        padding: 1px 4px;
    }
}

@media (max-width: 480px) {
    .fconline-reset-player-rating-salary {
        gap: 6px;
    }
    
    .fconline-reset-player-salary {
        font-size: 10px;
    }
    
    .fconline-reset-player-salary i {
        font-size: 10px;
    }
    
    .fconline-reset-player-salary .salary-value {
        font-size: 10px;
    }
}


.season-badge {
    background-image: url(https://tkfco.net/wp-content/uploads/2025/08/sprites28072025.png);
    background-repeat: no-repeat;
    display: block;
}
.bg-12KH {
    width: 30px; height: 24px;
    background-position: -0 -0;
}

.bg-17 {
    width: 30px; height: 24px;
    background-position: -30px -0;
}

.bg-18 {
    width: 30px; height: 24px;
    background-position: -0 -24px;
}

.bg-18A {
    width: 30px; height: 24px;
    background-position: -30px -24px;
}

.bg-18S {
    width: 30px; height: 24px;
    background-position: -60px -0;
}

.bg-18TY {
    width: 30px; height: 24px;
    background-position: -60px -24px;
}

.bg-19 {
    width: 30px; height: 24px;
    background-position: -0 -48px;
}

.bg-19A {
    width: 30px; height: 24px;
    background-position: -30px -48px;
}

.bg-19NG {
    width: 30px; height: 24px;
    background-position: -60px -48px;
}

.bg-19S {
    width: 30px; height: 24px;
    background-position: -90px -0;
}

.bg-19TS {
    width: 30px; height: 24px;
    background-position: -90px -24px;
}

.bg-19TY {
    width: 30px; height: 24px;
    background-position: -90px -48px;
}

.bg-19UCL {
    width: 30px; height: 24px;
    background-position: -0 -72px;
}

.bg-20 {
    width: 30px; height: 24px;
    background-position: -30px -72px;
}

.bg-20A {
    width: 30px; height: 24px;
    background-position: -60px -72px;
}

.bg-20KL {
    width: 30px; height: 24px;
    background-position: -90px -72px;
}

.bg-20KLB {
    width: 30px; height: 24px;
    background-position: -0 -96px;
}

.bg-20NG {
    width: 30px; height: 24px;
    background-position: -30px -96px;
}

.bg-20TS {
    width: 30px; height: 24px;
    background-position: -60px -96px;
}

.bg-20TY {
    width: 30px; height: 24px;
    background-position: -90px -96px;
}

.bg-20TYN {
    width: 30px; height: 24px;
    background-position: -120px -0;
}

.bg-20UCL {
    width: 30px; height: 24px;
    background-position: -120px -24px;
}

.bg-21 {
    width: 30px; height: 24px;
    background-position: -120px -48px;
}

.bg-21KL {
    width: 30px; height: 24px;
    background-position: -120px -72px;
}

.bg-21KLB {
    width: 30px; height: 24px;
    background-position: -120px -96px;
}

.bg-21NG {
    width: 30px; height: 24px;
    background-position: -0 -120px;
}

.bg-21PL {
    width: 30px; height: 24px;
    background-position: -30px -120px;
}

.bg-21TS {
    width: 30px; height: 24px;
    background-position: -60px -120px;
}

.bg-21TY {
    width: 30px; height: 24px;
    background-position: -90px -120px;
}

.bg-21TYN {
    width: 30px; height: 24px;
    background-position: -120px -120px;
}

.bg-21UCL {
    width: 30px; height: 24px;
    background-position: -150px -0;
}

.bg-22 {
    width: 30px; height: 24px;
    background-position: -150px -24px;
}

.bg-22HR {
    width: 30px; height: 24px;
    background-position: -150px -48px;
}

.bg-22KL {
    width: 30px; height: 24px;
    background-position: -150px -72px;
}

.bg-22KLB {
    width: 30px; height: 24px;
    background-position: -150px -96px;
}

.bg-22NG {
    width: 30px; height: 24px;
    background-position: -150px -120px;
}

.bg-22PL {
    width: 30px; height: 24px;
    background-position: -0 -144px;
}

.bg-22TS {
    width: 30px; height: 24px;
    background-position: -30px -144px;
}

.bg-22TY {
    width: 30px; height: 24px;
    background-position: -60px -144px;
}

.bg-22TYN {
    width: 30px; height: 24px;
    background-position: -90px -144px;
}

.bg-22UCL {
    width: 30px; height: 24px;
    background-position: -120px -144px;
}

.bg-22VB {
    width: 30px; height: 24px;
    background-position: -150px -144px;
}

.bg-23 {
    width: 30px; height: 24px;
    background-position: -180px -0;
}

.bg-23HR {
    width: 30px; height: 24px;
    background-position: -180px -24px;
}

.bg-23HW {
    width: 30px; height: 24px;
    background-position: -180px -48px;
}

.bg-23KL {
    width: 30px; height: 24px;
    background-position: -180px -72px;
}

.bg-23KLB {
    width: 30px; height: 24px;
    background-position: -180px -96px;
}

.bg-23NG {
    width: 30px; height: 24px;
    background-position: -180px -120px;
}

.bg-23PL {
    width: 30px; height: 24px;
    background-position: -180px -144px;
}

.bg-23TS {
    width: 30px; height: 24px;
    background-position: -0 -168px;
}

.bg-23TY {
    width: 30px; height: 24px;
    background-position: -30px -168px;
}

.bg-23TYN {
    width: 30px; height: 24px;
    background-position: -60px -168px;
}

.bg-23UCL {
    width: 30px; height: 24px;
    background-position: -90px -168px;
}

.bg-23VB {
    width: 30px; height: 24px;
    background-position: -120px -168px;
}

.bg-24EP {
    width: 30px; height: 24px;
    background-position: -150px -168px;
}

.bg-24HR {
    width: 30px; height: 24px;
    background-position: -180px -168px;
}

.bg-24KL {
    width: 30px; height: 24px;
    background-position: -210px -0;
}

.bg-24KLB {
    width: 30px; height: 24px;
    background-position: -210px -24px;
}

.bg-24PL {
    width: 30px; height: 24px;
    background-position: -210px -48px;
}

.bg-24TS {
    width: 30px; height: 24px;
    background-position: -210px -72px;
}

.bg-24TY {
    width: 30px; height: 24px;
    background-position: -210px -96px;
}

.bg-24TYN {
    width: 30px; height: 24px;
    background-position: -210px -120px;
}

.bg-24UCL {
    width: 30px; height: 24px;
    background-position: -210px -144px;
}

.bg-24VB {
    width: 29px; height: 23px;
    background-position: -90px -288px;
}

.bg-25HR {
    width: 30px; height: 24px;
    background-position: -210px -168px;
}

.bg-25KL {
    width: 30px; height: 24px;
    background-position: -0 -192px;
}

.bg-25TS {
    width: 30px; height: 24px;
    background-position: -30px -192px;
}

.bg-25TY {
    width: 30px; height: 24px;
    background-position: -60px -192px;
}

.bg-25TYN {
    width: 30px; height: 24px;
    background-position: -90px -192px;
}

.bg-25VB {
    width: 30px; height: 24px;
    background-position: -120px -192px;
}

.bg-BDO {
    width: 30px; height: 24px;
    background-position: -150px -192px;
}

.bg-BLD {
    width: 30px; height: 24px;
    background-position: -180px -192px;
}

.bg-BOE {
    width: 30px; height: 24px;
    background-position: -210px -192px;
}

.bg-BOE21 {
    width: 30px; height: 24px;
    background-position: -0 -216px;
}

.bg-BTB {
    width: 30px; height: 24px;
    background-position: -30px -216px;
}

.bg-BWC {
    width: 30px; height: 24px;
    background-position: -60px -216px;
}

.bg-CAP {
    width: 30px; height: 24px;
    background-position: -90px -216px;
}

.bg-CC {
    width: 30px; height: 24px;
    background-position: -120px -216px;
}

.bg-CFA {
    width: 30px; height: 24px;
    background-position: -150px -216px;
}

.bg-CH {
    width: 30px; height: 24px;
    background-position: -180px -216px;
}

.bg-COC {
    width: 30px; height: 24px;
    background-position: -210px -216px;
}

.bg-CU {
    width: 30px; height: 24px;
    background-position: -240px -0;
}

.bg-DC {
    width: 30px; height: 24px;
    background-position: -240px -24px;
}

.bg-EBS {
    width: 30px; height: 24px;
    background-position: -240px -48px;
}

.bg-EU24 {
    width: 30px; height: 24px;
    background-position: -240px -72px;
}

.bg-FA {
    width: 30px; height: 24px;
    background-position: -240px -96px;
}

.bg-FC {
    width: 30px; height: 24px;
    background-position: -240px -120px;
}

.bg-GR {
    width: 30px; height: 24px;
    background-position: -240px -144px;
}

.bg-GRU {
    width: 30px; height: 24px;
    background-position: -240px -168px;
}

.bg-HG {
    width: 30px; height: 24px;
    background-position: -240px -192px;
}

.bg-HOT {
    width: 30px; height: 24px;
    background-position: -240px -216px;
}

.bg-ICON {
    width: 30px; height: 24px;
    background-position: -0 -240px;
}

.bg-ICONM {
    width: 30px; height: 24px;
    background-position: -30px -240px;
}

.bg-ICONTM {
    width: 30px; height: 24px;
    background-position: -60px -240px;
}

.bg-ICONTMB {
    width: 30px; height: 24px;
    background-position: -90px -240px;
}

.bg-JA {
    width: 30px; height: 24px;
    background-position: -120px -240px;
}

.bg-JNM {
    width: 30px; height: 24px;
    background-position: -150px -240px;
}

.bg-K18 {
    width: 30px; height: 24px;
    background-position: -180px -240px;
}

.bg-K19 {
    width: 30px; height: 24px;
    background-position: -210px -240px;
}

.bg-K21 {
    width: 30px; height: 24px;
    background-position: -240px -240px;
}

.bg-K22 {
    width: 30px; height: 24px;
    background-position: -270px -0;
}

.bg-K23 {
    width: 30px; height: 24px;
    background-position: -270px -24px;
}

.bg-LA {
    width: 30px; height: 24px;
    background-position: -270px -48px;
}

.bg-LD {
    width: 30px; height: 24px;
    background-position: -270px -72px;
}

.bg-LE {
    width: 30px; height: 24px;
    background-position: -270px -96px;
}

.bg-LH {
    width: 30px; height: 24px;
    background-position: -270px -120px;
}

.bg-LIVE {
    width: 30px; height: 24px;
    background-position: -270px -144px;
}

.bg-LN {
    width: 30px; height: 24px;
    background-position: -270px -168px;
}

.bg-LOL {
    width: 30px; height: 24px;
    background-position: -270px -192px;
}

.bg-MC {
    width: 30px; height: 24px;
    background-position: -270px -216px;
}

.bg-MCC {
    width: 30px; height: 24px;
    background-position: -270px -240px;
}

.bg-MCI {
    width: 30px; height: 24px;
    background-position: -0 -264px;
}

.bg-MDL {
    width: 30px; height: 24px;
    background-position: -30px -264px;
}

.bg-MOG {
    width: 30px; height: 24px;
    background-position: -60px -264px;
}

.bg-NHD {
    width: 30px; height: 24px;
    background-position: -90px -264px;
}

.bg-NO7 {
    width: 30px; height: 24px;
    background-position: -120px -264px;
}

.bg-NTG {
    width: 30px; height: 24px;
    background-position: -150px -264px;
}

.bg-OTW {
    width: 30px; height: 24px;
    background-position: -180px -264px;
}

.bg-PRM {
    width: 28px; height: 23px;
    background-position: -119px -288px;
}

.bg-PSG {
    width: 30px; height: 24px;
    background-position: -210px -264px;
}

.bg-RMFC {
    width: 30px; height: 24px;
    background-position: -240px -264px;
}

.bg-RTN {
    width: 30px; height: 24px;
    background-position: -270px -264px;
}

.bg-SPL {
    width: 30px; height: 24px;
    background-position: -300px -0;
}

.bg-TB {
    width: 30px; height: 24px;
    background-position: -300px -24px;
}

.bg-TC {
    width: 30px; height: 24px;
    background-position: -300px -48px;
}

.bg-TKI {
    width: 30px; height: 24px;
    background-position: -300px -72px;
}

.bg-TKL {
    width: 30px; height: 24px;
    background-position: -300px -96px;
}

.bg-TT {
    width: 30px; height: 24px;
    background-position: -300px -120px;
}

.bg-TYL {
    width: 30px; height: 24px;
    background-position: -300px -144px;
}

.bg-UP {
    width: 30px; height: 24px;
    background-position: -300px -168px;
}

.bg-UT {
    width: 30px; height: 24px;
    background-position: -300px -192px;
}

.bg-VFG {
    width: 30px; height: 24px;
    background-position: -300px -216px;
}

.bg-VN {
    width: 30px; height: 24px;
    background-position: -300px -240px;
}

.bg-VNL {
    width: 30px; height: 24px;
    background-position: -300px -264px;
}

.bg-VTR {
    width: 30px; height: 24px;
    background-position: -0 -288px;
}

.bg-WB {
    width: 30px; height: 24px;
    background-position: -30px -288px;
}

.bg-WC22 {
    width: 30px;
    height: 24px;
    background-position: -60px -288px;
    width: 30px;
    height: 24px;
    background-position: -60px -288px;
}




/* Tiền vệ trung tâm - Màu xanh dương */
.pos-CF {
    background: #3498db !important;
}

/* Tiền vệ cánh - Màu xanh lá */
.pos-CM {
    background: #27ae60 !important;
}

/* Trung vệ - Màu đỏ */
.pos-CB {
    background: #e74c3c !important;
}

/* Thủ môn - Màu vàng */
.pos-GK {
    background: #f1c40f !important;
}

/* Hậu vệ cánh - Màu cam */
.pos-LB, .pos-RB {
    background: #e67e22 !important;
}

/* Tiền vệ phòng ngự - Màu tím */
.pos-CDM {
    background: #9b59b6 !important;
}

/* Tiền vệ tấn công - Màu xanh lá cây nhạt */
.pos-CAM {
    background: #2ecc71 !important;
}

/* Tiền vệ cánh trái/phải - Màu hồng */
.pos-LM, .pos-RM {
    background: #e91e63 !important;
}

/* Tiền đạo cánh - Màu xanh dương nhạt */
.pos-LW, .pos-RW {
    background: #5dade2 !important;
}

/* Tiền đạo - Màu đỏ đậm */
.pos-ST {
    background: #c0392b !important;
}

/* Libero - Màu xám */
.pos-SW {
    background: #7f8c8d !important;
}

/* Wing Back - Màu nâu */
.pos-LWB, .pos-RWB {
    background: #8d6e63 !important;
}