:root {
    --primary-green: #1b5e20;
    --accent-green: #2e7d32;
    --light-bg: #f8f9fa;
}

body {
    background-color: var(--light-bg);
    font-family: 'Kanit', sans-serif;
}

/* --- หัวข้อตารางหลัก (ยาวเต็มจอ) --- */
.custom-table-header {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    color: white !important;
    padding: 18px 25px;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 12px;
    border-bottom: 5px solid #144416;
    margin-bottom: 20px;
    width: 100%;
    display: block;
}

/* --- แถบวันที่ (บังคับยาวเต็มพื้นที่ 100%) --- */
.col-lg-10.d-flex.my-auto.justify-content-center {
    flex: 0 0 100% !important; /* บังคับกว้าง 100% */
    max-width: 100% !important;
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%) !important;
    color: white !important;
    border-radius: 15px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
    border-bottom: 4px solid #144416 !important;
    display: flex !important;
}

/* --- แถบชื่อลีก (บังคับยาวเต็มพื้นที่ 100%) --- */
.col-lg-10.col-10.my-auto {
    flex: 0 0 100% !important; /* บังคับกว้าง 100% */
    max-width: 100% !important;
    background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%) !important;
    border-left: 8px solid #ffc107 !important;
    border-radius: 10px !important;
    padding: 12px 25px !important;
    margin: 10px 0 !important;
    display: flex !important;
}

/* --- แก้ไขปัญหา: กล่องเวลาขาว ตัวหนังสือขาว --- */
/* บังคับสีตัวหนังสือเวลา (00:45, 22:00) ให้เป็นสีเข้ม */
.col-lg-12.my-auto, 
.col-lg-12.my-auto b, 
.col-lg-12.my-auto p, 
.col-lg-12.my-auto span {
    color: #333333 !important; /* เปลี่ยนจากขาวเป็นดำ/เทาเข้ม */
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* กล่องเวลาปกติ (ยังไม่แข่ง) */
.col-lg-12.my-auto {
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 100%) !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 50px !important;
    padding: 6px 15px !important;
    width: fit-content !important;
    min-width: 100px !important;
    margin: 10px auto !important;
    display: flex !important;
    justify-content: center !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* --- สถานะ LIVE (กำลังแข่ง) --- */
.status-live {
    background: #fff5f5 !important;
    border-color: #ff8787 !important;
    animation: pulse-red 1.5s infinite alternate !important;
}
.status-live b, .status-live span {
    color: #e03131 !important; /* ตัวหนังสือสดเป็นสีแดง */
}

/* --- แก้ไขชื่อทีมให้มองเห็นชัดเจน --- */
.col-lg-11.col-md-10.col-10.p-2.bg-dark {
    background: #ffffff !important;
    border-radius: 15px !important;
    border: 1px solid #eee !important;
    margin: 8px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#api-data-target p, #api-data-target span, #api-data-target b {
    color: #333333 !important; /* บังคับชื่อทีมเป็นสีเข้ม */
}

/* จัดกึ่งกลาง Row */
.row { margin: 0 !important; }

/* ปุ่มเลือกช่อง */
.col-lg-12.bg-secondary {
    background: #ffffff !important;
    border-top: 1px dashed #ddd !important;
    border-radius: 0 0 15px 15px !important;
    padding: 15px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px;
}

.iam-list-tv {
    width: 55px !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@keyframes pulse-red { from { transform: scale(1); } to { transform: scale(1.05); } }

/* --- แถบเมนูหัวเว็บ 3D Emerald Green --- */
.navbar {
    background: linear-gradient(180deg, #1b5e20 0%, #144416 100%) !important;
    padding: 12px 0 !important;
    border-bottom: 3px solid #ffc107 !important; /* เส้นขอบทองด้านล่างเพิ่มความหรู */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* ปรับแต่งตัวอักษรเมนู */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400;
    margin: 0 8px;
    padding: 8px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

/* เอฟเฟกต์ตอน Hover (เอาเมาส์ชี้) */
.navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffc107 !important; /* เปลี่ยนเป็นสีทอง */
    transform: translateY(-2px);
}

/* เมนูที่กำลังใช้งานอยู่ (Active) */
.navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffc107 !important;
    font-weight: 600;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

/* ปรับแต่งโลโก้ฝั่งซ้าย */
.navbar-brand {
    font-size: 1.5rem !important;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* ปรับแต่งปุ่ม Badge LIVE NOW */
.badge.bg-danger.pulse {
    padding: 8px 15px !important;
    border-radius: 50px !important;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

/* สำหรับมือถือ: ปรับปุ่ม Hamburger */
.navbar-toggler {
    border: none !important;
    padding: 0;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}

/* --- ส่วนหัว Emerald Parallax Football --- */
.header-card {
    /* ใช้ภาพพื้นหลังรูปสนามฟุตบอลพร้อมเอฟเฟกต์การเลื่อนแบบพาราแลกซ์ */
    background: linear-gradient(135deg, rgba(27, 94, 32, 0.9) 0%, rgba(76, 175, 80, 0.7) 100%),
                url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?auto=format&fit=crop&q=80');
    background-size: cover;
    border-radius: 20px !important; /* ขอบโค้งมนที่ดูทันสมัย */
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* เพิ่มขอบด้านล่างสีเหลืองทองหนาเพื่อเพิ่มความหรูหรา */
    border-bottom: 5px solid #ffc107 !important;
    
    /* เพิ่มเงาที่ตัวการ์ดเพื่อทำให้ดูมีมิติ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* ปรับปรุงข้อความสีขาวเพื่อให้โดดเด่น */
.header-card h1 {
    color: white !important;
    
    /* เพิ่มเงาตัวอักษรเพื่อทำให้อ่านง่ายบนพื้นหลังภาพ */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
    font-family: 'Kanit', sans-serif;
}

/* ปรับปรุงข้อความสีขาวโปร่งแสงเพื่อให้โดดเด่น */
.header-card p {
    color: rgba(255, 255, 255, 0.8) !important;
    
    /* เพิ่มเงาตัวอักษรเพื่อทำให้อ่านง่ายบนพื้นหลังภาพ */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 300 !important;
    font-family: 'Kanit', sans-serif;
}

/* --- ตกแต่งหัวข้อตารางการแข่งขัน 3D --- */
.card-header-3d {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%) !important;
    color: #ffffff !important;
    padding: 20px 30px !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    border-radius: 15px 15px 0 0 !important; /* โค้งมนเฉพาะด้านบน */
    
    /* สร้างมิติขอบล่างให้ดูหนาและนูนแบบปุ่มกดจริง */
    border-bottom: 5px solid #144416 !important;
    
    /* เพิ่มเงาตัวอักษรเพื่อให้ดูคมชัด */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4) !important;
    
    /* เส้นแสงสะท้อนด้านบนเพิ่มความวาวแบบกระจก */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
    
    position: relative;
    overflow: hidden;
}

/* ตกแต่งไอคอนลิสต์ (fas fa-list-ul) */
.card-header-3d i {
    color: #ffc107 !important; /* ไอคอนสีทอง */
    background: rgba(0,0,0,0.2); /* พื้นหลังไอคอนจางๆ */
    padding: 10px;
    border-radius: 10px;
    margin-right: 15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 1.2rem;
}

/* เพิ่มแสงเงา (Glossy Effect) วิ่งผ่านหัวข้อ */
.card-header-3d::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    animation: shine-header 5s infinite;
}

@keyframes shine-header {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

#video-display-area {
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
    border: 2px solid var(--accent-green) !important;
}

.card-header-player {
    background: linear-gradient(90deg, #1a1a1a 0%, #333 100%);
    padding: 10px 20px;
    border-bottom: 1px solid #444;
}

/* จัดการขนาดโฆษณาให้เป๊ะ 782x132 */
.custom-ads-size {
    width: 100%;
    max-width: 782px; /* ขนาดกว้างสูงสุดตามที่ต้องการ */
    height: auto;
    aspect-ratio: 782 / 132; /* รักษาอัตราส่วนรูปภาพ */
    object-fit: cover;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* เพิ่มเอฟเฟกต์ตอนเอาเมาส์ชี้ให้ดูน่าคลิก */
.custom-ads-size:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* ปรับระยะห่างระหว่างรูปโฆษณา */
.ads-container .col-12 {
    margin-bottom: 10px;
}

/* --- โฆษณา Sidebar ซ้าย-ขวา --- */
.ads-sidebar {
    position: fixed;
    top: 150px; /* ระยะห่างจากด้านบน */
    width: 300px;
    height: 600px;
    z-index: 999;
    background-color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.ads-sidebar.left {
    left: 10px; /* ห่างจากขอบซ้าย */
}

.ads-sidebar.right {
    right: 10px; /* ห่างจากขอบขวา */
}

.ads-sidebar img {
    width: 300px;
    height: 600px;
    object-fit: cover;
    border: 1px solid #ddd;
}

/* --- ปุ่มปิดโฆษณา --- */
.btn-close-ads {
    position: absolute;
    top: -15px;
    background: #ff0000;
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 1000;
}

.ads-sidebar.left .btn-close-ads { right: -10px; } /* ปุ่มปิดฝั่งซ้ายอยู่ขวาบนของรูป */
.ads-sidebar.right .btn-close-ads { left: -10px; } /* ปุ่มปิดฝั่งขวาอยู่ซ้ายบนของรูป */

.btn-close-ads:hover {
    background: #cc0000;
    transform: scale(1.1);
}

/* ซ่อนโฆษณาในมือถือ (เพราะมันจะทับเนื้อหา) */
@media (max-width: 1400px) {
    .ads-sidebar {
        display: none !important;
    }
}