/* CSS สำหรับการ์ดโปรไฟล์ */
.profile-card {
    background: linear-gradient(135deg, #0d1f35 0%, #2b4f7e 100%);
    color: white;
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.profile-avatar {
    font-size: 60px;
    color: #a7c5ff;
}
.profile-username {
    font-size: 1.5rem;
    font-weight: bold;
}
.profile-stats {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
}
.stat-label {
    font-size: 0.9rem;
    color: #d1e3ff;
    text-transform: uppercase;
}

.mobile-footer-menu {
    display: none; 
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030; 

    display: flex;
    justify-content: space-around; 
    align-items: center;
    background-color: #ffffff; 
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); 
    padding: 5px 0;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #444;
    font-size: 12px;
    flex-grow: 1; 
}

.menu-item .icon {
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .mobile-footer-menu {
        display: flex;
    }
}
.mobile-footer-menu {
    display: none
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 5px 0;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #444;
    font-size: 12px;
    flex-grow: 1;
}

.menu-item .icon {
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .mobile-footer-menu {
        display: flex !important; /* [สำคัญ] เพิ่ม !important เพื่อบังคับให้แสดงผล */
    }
}

@media (min-width: 769px) {
    .mobile-footer-menu {
        display: none !important; /* บังคับให้ซ่อนบนจอใหญ่ */
    }
}
/* --- [ใหม่] CSS สำหรับ Slider สวยๆ --- */

/* ทำให้ขอบมนและมีเงา */
.slider-container {
    border-radius: 15px; /* ความโค้งของขอบ */
    overflow: hidden; /* ซ่อนส่วนที่เกินขอบโค้ง */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ควบคุมขนาดและสไตล์ของรูปภาพ */
.carousel-item img {
    height: 450px; /* กำหนดความสูงของ Slider (ปรับได้ตามต้องการ) */
    object-fit: cover; /* ทำให้รูปเต็มพื้นที่โดยไม่เสียสัดส่วน */
    filter: brightness(0.8); /* ทำให้รูปมืดลงเล็กน้อยเพื่อให้ข้อความเด่นขึ้น */
}

/* เพิ่ม Overlay สีดำโปร่งแสงด้านล่างรูป เพื่อให้ข้อความอ่านง่ายขึ้น */
.carousel-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px 20px;
    text-align: left;
}

.carousel-caption h5 {
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* เพิ่มเงาให้ตัวอักษร */
}

/* ตกแต่งปุ่ม Indicators (จุดกลมๆ) */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
}

/* แก้ปัญหา Dropdown ถูกบังในหน้า Upcoming Matches */
.match-card .card-footer {
    position: relative;
    z-index: 2;
}