/* ================================================
   FOOTBALL LIVE SCORE - COMPLETE CSS SYSTEM
   ================================================ */

   /* ปรับแต่งไอคอนในหน้า Elementor Editor Panel */
.fb-widget-trophy::before {
    content: '🏆'; 
    font-size: 18px;
    font-style: normal;
    display: inline-block;
}

/* เปลี่ยนสีไอคอน Widget ของเราในแถบเครื่องมือ */
.elementor-element-wrapper .fb-widget-trophy,
.elementor-element-wrapper .eicon-table-column-list {
    color: #FFD700 !important; /* สีทอง Gold */
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.2));
}

/* === ROOT VARIABLES === */
:root {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* ================================================
   WIDGET CONTAINER - หน้าแสดงรายการแมตช์
   ================================================ */

.football-widget {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* === DATE SELECTOR === */
.fb-date-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.fb-date-input {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-primary);
}

.fb-date-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* === MATCHES CONTAINER === */
.football-matches-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.football-matches-list {
    padding: 0;
}

/* === LEAGUE GROUP === */
.league-group {
    border-bottom: 1px solid var(--border-color);
}

.league-group:last-child {
    border-bottom: none;
}

.league-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.league-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.league-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.league-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

/* === MATCH CARD === */
.match-list-rows {
    padding: 8px;
}

.football-match-card {
    padding: 10px;
    border-radius: var(--radius-md);
    margin-bottom: 0px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-primary);
    border: 1px solid transparent;
}

.football-match-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.match-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

/* === TEAM INFO === */
.team {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team.home {
    justify-content: flex-end;
}

.team.away {
    justify-content: flex-start;
}

.t-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: opacity 0.3s;
}

.t-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* === SCORE & STATUS === */
.score-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
}

.score {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 30px;
    text-align: center;
}

.score.active {
    color: var(--text-primary);
}

.status-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === STATUS BADGES === */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.ft {
    background: #dbeafe;
    color: #1e40af;
}

.badge.live {
    background: #7a0101;
    color: #ffffff;
    position: relative;
}

.badge.live.pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.3);
    }
}

.badge.ht {
    background: #fef3c7;
    color: #92400e;
}

.time {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.time-upcoming {
    font-size: 13px;
    color: var(--text-muted);
}

.status-text.cancelled {
    font-size: 12px;
    color: var(--danger-color);
    font-weight: 600;
}

/* === NO DATA & ERROR === */
.no-data, .error-state, .loading-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
}

.error-state {
    color: var(--danger-color);
}

/* ================================================
   MATCH DETAIL PAGE - หน้ารายละเอียดแมตช์
   ================================================ */

#football-match-detail-root {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;

}

.match-detail-wrapper {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* === DETAIL HEADER === */
.detail-header-gradient {
    background: linear-gradient(135deg, #252525 0%, #020d4a 100%);
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    color: white;
    position: relative;
}

.detail-header-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.d-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

.d-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.d-team h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.big-score {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.d-info-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.league-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-status-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* === PENALTY SECTION === */
.penalty-section {
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
    padding: 32px 24px;
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.penalty-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.penalty-shot-item {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.shot-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shot-player {
    flex: 1;
    font-size: 14px;
}

.shot-result {
    font-weight: 600;
    font-size: 13px;
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.shot-foot {
    font-size: 12px;
    color: var(--text-muted);
}

/* === GOAL MOUTH VISUALIZATION === */
.goal-mouth-container {
    max-width: 500px;
    margin: 0 auto;
}

.goal-mouth-frame {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.15) 100%);
    border: 3px solid #374151;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.goal-netting {
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(0,0,0,0.05) 18px, rgba(0,0,0,0.05) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,0,0,0.05) 18px, rgba(0,0,0,0.05) 20px);
}

.shot-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transform: translate(-50%, 50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.goal-line {
    height: 4px;
    background: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* === TABS === */
.detail-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0 24px;
    gap: 4px;
}

.tab-btn {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-btn:hover {
    background: rgba(99, 102, 241, 0.05);
    color: var(--primary-color);
}

.tab-btn.active {
    background: var(--bg-card);
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
}

/* === TAB CONTENT === */
.tab-content-container {
    padding: 10px;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === EVENTS TAB (Central Timeline) === */
.event-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.event-row:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

/* --- ฝั่งเจ้าบ้าน (Home): [ชื่อ] [ไอคอน] [นาที] --- */
.event-row.home {
    flex-direction: row-reverse; /* เรียงจากซ้ายไปขวาตาม HTML */
    
}

.event-row.home .ev-detail {
    text-align: left; /* ชื่อนักเตะชิดขวาไปทางไอคอน */
    order: 1;
}

.event-row.home .ev-icon {
    order: 2;
    margin: 0 12px;
}

.event-row.home .ev-time {
    order: 3;
    text-align: left; /* ตัวเลขนาทีอยู่ติดแกนกลางฝั่งซ้าย */
    min-width: 35px;
}

/* --- ฝั่งทีมเยือน (Away): [นาที] [ไอคอน] [ชื่อ] --- */
.event-row.away {
    
    padding-left: 0; /* เริ่มแสดงเนื้อหาตั้งแต่กึ่งกลางหน้าจอเป็นต้นไป */
}

.event-row.away .ev-detail {
    text-align: right; /* ชื่อนักเตะชิดซ้ายออกจากไอคอน */
    order: 1; /* กลายเป็นขวาสุดเพราะ row-reverse */
}

.event-row.away .ev-icon {
    order: 2;
    margin: 0 12px;
}

.event-row.away .ev-time {
    order: 3; /* กลายเป็นซ้ายสุดเพราะ row-reverse */
    text-align: right; /* ตัวเลขนาทีอยู่ติดแกนกลางฝั่งขวา */
    min-width: 35px;
}

/* --- ส่วนกลาง (Neutral เช่น HT, FT, AddedTime) --- */
.event-row.neutral {
    justify-content: center;
    background: var(--bg-secondary);
    padding: 10px;
}

.event-row.neutral .ev-time {
    display: none; /* ซ่อนนาทีในบรรทัดที่เป็นกลาง */
}

.event-row.neutral .ev-detail {
    text-align: center;
    flex: none;
}

/* --- องค์ประกอบภายใน --- */
.ev-icon-svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.ev-time {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);
}

.ev-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.player-main {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.player-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.player-in {
    color: red;
    font-size: 12px;
    font-weight: 300;
}

.player-out-sub {
    color: #00b900;
    font-size: 12px;
    font-weight: 300;
}

.ev-detail {
    color: black;
}


.added-time-info {
    color: #28a745;
    font-weight: bold;
}

/* === STATS TAB (แก้ไขส่วนที่ไม่แสดงผล) === */
.stats-container {
    padding: 15px;
}

.stat-row {
    margin-bottom: 24px;
    width: 100%;
}

.stat-labels {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* ค่าทีมเหย้า | ชื่อสถิติ | ค่าทีมเยือน */
    gap: 16px;
    margin-bottom: 8px;
    align-items: center;
}

.stat-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

.stat-value:first-child {
    text-align: right; /* ค่าฝั่งเจ้าบ้านชิดขวา */
}

.stat-value:last-child {
    text-align: left; /* ค่าฝั่งทีมเยือนชิดซ้าย */
}

.stat-title {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/* แถบพลัง (Stat Bars) */
.stat-bar-container {
    display: flex;
    height: 8px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.stat-bar {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* สีแถบสถิติเจ้าบ้าน */
.stat-bar.home {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px 0 0 20px;
}

/* สีแถบสถิติทีมเยือน */
.stat-bar.away {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
    border-radius: 0 20px 20px 0;
}

/* ไฮไลท์ค่าที่มากกว่า */
.stat-highlight {
    color: var(--primary-color) !important;
}

@media (max-width: 768px) {
    .stat-value {
        font-size: 13px;
    }
    .stat-title {
        font-size: 11px;
    }
}

/* === LINEUPS TAB === */
.lineups-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.lineup-column {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
}

.lineup-team-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.team-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.team-title-row strong {
    font-size: 16px;
    color: var(--text-primary);
}

.formation-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}

.avg-rating {
    font-size: 13px;
    color: var(--text-secondary);
}

/* === PLAYER GROUPS === */
.player-group {
    margin-bottom: 24px;
}

.group-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.p-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    transition: var(--transition);
}

.p-row:hover {
    background: var(--bg-hover);
}

.p-row.sub {
    opacity: 0.7;
}

.p-num {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);
    text-align: center;
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

.p-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.p-country {
    font-size: 12px;
    color: var(--text-muted);
}

.p-rating {
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 6px;
}

.rating-high {
    background: #f9d43e;
    
}

.rating-good {
    background: #dbeafe;
    color: #1e40af;
}

.rating-normal {
    background: #f1f5f9;
    color: #475569;
}

.rating-low {
    background: #fee2e2;
    color: #991b1b;
}

.coach-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary);
}






/* Penalty Shootout Styles */
.penalty-section {
    margin: 0px;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.section-title {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #2c3e50;
    font-weight: bold;
}

.penalty-score-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.team-penalty-score {
    display: flex;
    align-items: center;
    gap: 15px;
}

.team-penalty-score .score-number {
    font-size: 2.5em;
    font-weight: bold;
    color: #2c3e50;
    min-width: 50px;
    text-align: center;
}

.team-penalty-score .team-name {
    font-weight: 600;
    color: #555;
    font-size: 1.1em;
}

.score-separator {
    font-size: 2em;
    color: #999;
    font-weight: 300;
}

.penalty-sequence {
    margin: 20px 0;
}

.penalty-round {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 15px;
    align-items: center;
    padding: 0px;
    margin: 2px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.penalty-round:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.penalty-shot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px;
    border-radius: 8px;
    min-height: 40px;
}

.penalty-shot.home-shot {
    justify-content: flex-end;
    border-right: 4px solid #3498db;
    background: linear-gradient(to right, transparent, rgba(52, 152, 219, 0.1));
}

.penalty-shot.away-shot {
    justify-content: flex-start;
    border-left: 4px solid #e74c3c;
    background: linear-gradient(to left, transparent, rgba(231, 76, 60, 0.1));
}

.penalty-shot.empty-shot {
    border: 2px dashed #ddd;
    opacity: 0.3;
    background: transparent;
}

.shot-player {
    font-size: 0.95em;
    font-weight: 500;
    color: #2c3e50;
}

.shot-icon {
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

.round-number {
    display: flex;
    justify-content: center;
}

.round-badge {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.95em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Goal Mouth Visualization */
.goal-mouth-container {
    margin-top: 0px;
}

.goal-title {
    text-align: center;
    margin-bottom: 0px;
    color: #2c3e50;
    font-size: 1.2em;
    font-weight: 600;
}

.goal-mouth-frame {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 350px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #90EE90 0%, #228B22 100%);
    border: 4px solid white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.goal-netting {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(255,255,255,0.4) 24px, rgba(255,255,255,0.4) 25px),
        repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255,255,255,0.4) 24px, rgba(255,255,255,0.4) 25px);
}

.shot-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.shot-dot:hover {
    transform: translate(-50%, 50%) scale(1.4);
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.goal-line {
    width: 100%;
    height: 5px;
    background: white;
    margin-top: -2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.goal-legend {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 0px;
    padding: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    font-weight: 500;
}

.legend-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.legend-dot.home-color {
    background: #3498db;
}

.legend-dot.away-color {
    background: #e74c3c;
}

/*calender*/
/* Container หลักของ Header */
.fb-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111; /* สีพื้นหลังเข้ม */
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-family: sans-serif;
}

/* ปุ่ม LIVE */
.btn-live-filter {
    background: #222;
    border: 1px solid #333;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.5px;
}

/* ส่วนวันที่ตรงกลาง */
.fb-nav-center {
    display: flex;
    align-items: center;
    gap: 15px;
}

.display-date-text {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

.nav-arrow {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.nav-arrow:hover { color: #fff; }

/* ปุ่มปฏิทินฝั่งขวา */
.calendar-picker-wrapper {
    position: relative;
}

.calendar-icon-btn {
    position: relative;
    display: flex;
    width: 38px;
    height: 38px;
    background: #222;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.calendar-icon-btn:hover { background: #333; }

.icon-calendar-svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

.calendar-day-num {
    position: absolute;
    top: 17px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    pointer-events: none;
}

/* ซ่อน Input Date ตัวจริง */
.fb-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* สำหรับเบราว์เซอร์ที่รองรับให้กดที่แผ่นปฏิทินเพื่อเปิด */
.fb-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.btn-filter {
    background: #222;
    border: 1px solid #333;
    color: #888;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.2s;
}

/* เมื่อปุ่มถูกเลือก */
.btn-filter.active {
    background: #fff;
    color: #000;
    border-radius: 50px;
    border-color: #c3cfe2;
}

/* ตกแต่งปุ่ม LIVE ให้เด่นเป็นพิเศษเวลา Active */
.btn-filter[data-filter="live"].active {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.btn-filter[data-filter="all"].active {
    background: #dfdfdf;
    color: #000000;
    border-color: #ececec;
}

.btn-filter[data-filter="finished"].active {
    background: #00b900;
    color: #000000;
    border-color: #ececec;
}

button.btn-filter

 {
    font-size: 12px;
    color: antiquewhite;
    border-radius: 50px;
    border-color: #888;
    font-family: 'Roboto';
}

button.nav-arrow.nav-prev-day {
    border: none;
  
}

button.nav-arrow.nav-next-day {
    border: none;
    
}

/*PLayer*/
.p-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.p-img {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* รูปวงกลม */
    background: #2a2a2a;
    object-fit: cover;
    flex-shrink: 0;
}

.p-num {
    min-width: 20px;
    font-size: 0.85rem;
    color: #aaa;
}

.p-info {
    flex-grow: 1;
}

.p-name {
    font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 768px) {

    .fb-nav-container {    padding: 10px 2px;}
    button.btn-filter {    margin-right: 0px;}

    .fb-nav-center {    gap: 2px;}
    span.display-date-text {    
        font-size: 14px;
        min-width: 50px;}
    button.nav-arrow.nav-prev-day {        padding: 5px    }
    button.nav-arrow.nav-next-day {        padding: 5px    }
    button.nav-arrow.nav-next-day {    padding: 5px}
    
    
    .shot-player {
        font-size: 0.85em;
    }
    
    .shot-icon {
        font-size: 1em;
    }
    
    .penalty-score-summary {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .team-penalty-score .score-number {
        font-size: 2em;
    }
    
    .goal-mouth-frame {
        height: 250px;
    }
    
    .shot-dot {
        width: 24px;
        height: 24px;
        font-size: 0.75em;
    }
    
    .round-badge {
        width: 32px;
        height: 32px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .penalty-section {
        padding: 5px;
    }
    
    .section-title {
        font-size: 1.2em;
    }
    
    .shot-player {
        font-size: 0.8em;
    }
    
    .shot-icon {
        font-size: 0.9em;
    }
    
    .penalty-round {
        padding: 0px;
    }
    
    .goal-legend {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
}
/* ================================================
   PRINT STYLES
   ================================================ */

@media print {
    .fb-date-selector,
    .detail-tabs {
        display: none;
    }
    
    .tab-pane {
        display: block !important;
        page-break-before: always;
    }
    
    .football-match-card {
        page-break-inside: avoid;
        padding: 5px;
    }
}


/* สนาม: ต้องมั่นใจว่าเป็น position: relative */
/* ปรับความสูงสนามให้มากขึ้นเพื่อให้มีที่ว่างระหว่างสองทีม */
/* คอนเทนเนอร์หลัก */
.lineup-board {
    background: #2d3436;
    border-radius: 12px;
    padding: 10px;
    font-family: 'Inter', sans-serif;
    color: white;
}

/* สนามฟุตบอลแนวตั้ง */
.pitch-area {
    position: relative;
    width: 100%;
    height: 750px; /* ความสูงที่พอดีสำหรับมือถือ */
    background-color: #3c444d;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* เส้นสนาม */
.half-line {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.2);
    transform: translateY(-50%);
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ตำแหน่งนักเตะ */
.p-node {
    position: absolute;
    width: 65px;
    z-index: 5;
    transition: all 0.3s ease;
}

.p-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* รูปนักเตะ */
.img-container {
    position: relative;
    width: 42px;
    height: 42px;
}

.player-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #636e72;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* เรตติ้งมุมรูป */
.p-rat {
    position: absolute;
    bottom: -2px;
    right: -6px;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
    color: #000;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,0.1);
}

/* ป้ายชื่อและเลข */
.p-label {
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 80px;
}

.p-num {
    color: #fab1a0;
    font-size: 10px;
    font-weight: bold;
}

.p-name {
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ไอคอนเหตุการณ์ (ใบเหลือง/ประตู) */
.p-icons {
    position: absolute;
    top: -4px;
    left: -8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.icon-y-card { width: 7px; height: 10px; background: #f1c40f; border-radius: 1px; }
.icon-r-card { width: 7px; height: 10px; background: #e74c3c; border-radius: 1px; }
.icon-goal { font-size: 12px; }

/* ส่วนท้าย: แผนและตัวสำรอง */
.lineup-info-footer {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.formation-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 15px;
}

.f-box b { color: #fab1a0; font-size: 13px; }

.subs-section {
    display: flex;
    gap: 15px;
}

.subs-column { flex: 1; }

.subs-title {
    font-size: 11px;
    color: #95a5a6;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: bold;
}

.sub-item {
    display: flex;
    align-items: center;
    padding: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

.sub-num { width: 22px; color: #fab1a0; font-weight: bold; }
.sub-name { flex: 1; }

/* สีเรตติ้ง */
.rating-high { background: #00b894; color: #fff; padding: 2px;
    border-radius: 5px;
    width: 20px;
    text-align: center;}
.rating-good { background: #55efc4; color: #000; padding: 2px;
    border-radius: 5px;
    width: 20px;
    text-align: center;}
.rating-normal { background: #fdcb6e; color: #000; padding: 2px;
    border-radius: 5px;
    width: 20px;
    text-align: center;}
.rating-low { background: #d63031; color: #fff; padding: 2px;
    border-radius: 5px;
    width: 20px;
    text-align: center;}



/* จัดการเหตุการณ์ในรายชื่อตัวสำรอง */
.sub-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub-events {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}

.sub-card-y {
    width: 6px;
    height: 9px;
    background: #f1c40f;
    border-radius: 1px;
    display: inline-block;
}

.sub-card-r {
    width: 6px;
    height: 9px;
    background: #e74c3c;
    border-radius: 1px;
    display: inline-block;
}

.icon-sub-in {
    color: #2ecc71;
    font-size: 10px;
}

.coach-footer {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #bdc3c7;
}


/*H2H Css*/
/* H2H Wrapper */
.h2h-wrapper { padding: 15px; background: #1a1d21; border-radius: 8px; }

/* Summary Bar */
.h2h-stats-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.stat-box { text-align: center; flex: 1; }
.stat-box span { display: block; font-size: 11px; color: #888; text-transform: uppercase; }
.stat-box strong { font-size: 20px; color: #fff; }

.h2h-progress-bar { 
    display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 25px; 
    background: #333;
}
.h2h-progress-bar .bar.home { background: #3b82f6; }
.h2h-progress-bar .bar.draw { background: #6b7280; }
.h2h-progress-bar .bar.away { background: #ef4444; }

/* History List */
.h2h-list-title { font-size: 14px; font-weight: bold; margin-bottom: 12px; color: #fabb05; border-left: 3px solid; padding-left: 8px; }
.h2h-item { 
    background: rgba(255,255,255,0.05); border-radius: 6px; padding: 10px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.h2h-meta { display: flex; justify-content: space-between; font-size: 10px; color: #888; margin-bottom: 5px; }
.h2h-main { display: flex; align-items: center; justify-content: center; gap: 10px; }
.h2h-team-name { flex: 1; font-size: 13px; color: #eee; }
.h2h-team-name.home { text-align: right; }
.h2h-team-name.away { text-align: left; }
.h2h-score { 
    background: #333; padding: 2px 10px; border-radius: 4px; font-weight: bold; 
    min-width: 50px; text-align: center; color: #fabb05; font-family: monospace;
}

/* Next Match Highlight */
.h2h-next-match {
    background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    border: 1px solid #fabb05;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}
.next-label { font-size: 10px; color: #fabb05; font-weight: bold; letter-spacing: 1px; }
.next-info { font-size: 13px; color: #fff; margin-top: 4px; }

/* Winner Highlighting */
.h2h-team-name.winner { color: #fabb05; font-weight: bold; }

/* Score Box Styling */
.h2h-score-box {
    background: #000;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    border: 1px solid #333;
}

/* List Title Customization */
.h2h-list-title {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}
.h2h-list-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #333;
    margin-left: 10px;
}

.h2h-title-main {
    text-align: center;
    font-size: 11px;
    color: #fabb05;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.h2h-summary-container {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.h2h-score-box {
    background: #222;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 800;
    color: #fff;
    min-width: 65px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/*Last 5Match*/
/* Container ฟอร์มของทั้ง 2 ทีม */
.h2h-form-summary {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}
.form-team-box { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 48%; }
.form-team-name { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; }
.form-dots { display: flex; gap: 6px; }

/* สไตล์วงกลม W-D-L */
.dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
    position: relative;
}
.dot.w { background-color: #22c55e; }
.dot.d { background-color: #94a3b8; }
.dot.l { background-color: #ef4444; }

/* ระบบ Tooltip (CSS Only) */
.dot:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ใส่ในไฟล์ CSS ของคุณเพื่อให้ Tooltip ทำงาน */
.dot:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 99;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
}

/* คะแนนจุดโทษในวงเล็บ */
.pen-score {
    font-size: 0.8em;
    color: #94a3b8; /* สีเทาอ่อน */
    font-weight: 700;
    margin: 0 4px;
    vertical-align: middle;
}

/* Badge สถานะถ้าเป็นจุดโทษ */
.badge.ft.is-pen {
    background-color: #ef4444 !important; /* สีแดง */
    color: white !important;
    font-weight: bold;
}

/* จัด Score และ Status ให้อยู่ระนาบเดียวกัน */
.score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {

    .football-widget {    padding: 5px;}
    .match-inner { gap: 5px;    }
    span.t-name {    font-size: 12px;}
    .match-list-rows {    padding: 2px;}
    .d-team h3 {    font-size: 14px;}
    .detail-header-gradient {    gap: 5px;}
    

    
    .score-status {
        flex-direction: row;
        gap: 16px;
    }

    .d-logo {
    width: 30px;
    height: 30px;
}
    
    .detail-header-gradient {
        padding: 10px;
        text-align: center;
    }

        .big-score {
        font-size: 16px;
    }
    
    .d-team {
        align-items: center !important;
    }
    
    .lineups-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-labels {
        font-size: 13px;
    }
    
    .detail-tabs {
        padding: 0 12px;
    }
    
    .tab-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .tab-content-container {    padding: 2px;}
    .lineup-board {    padding: 5px;}
    .pitch-area {    height: 700px;}
    .penalty-round {
        padding: 2px;
    }

        .penalty-shot {
        padding: 0px;
        gap: 6px;
    }

    /*edit team long name*/
    .team.home {
        
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .team.away {
        
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
}

.t-logo, .league-logo {
    width: 25px;
    height: 25px;
    aspect-ratio: 1/1;
    display: block;
}