/* ### 2. Update the CSS (`styles/pages/home.css`)
Open your `home.css` file and add this new code to the very bottom. This will center your video, give it rounded corners, and make sure it automatically resizes for mobile phones.

```css */
/* --- Video Section --- */
.video-section {
    padding: 50px 20px 50px 20px;
    text-align: center;
}

.video-header {
    margin-bottom: 40px;
}

.section-title {
    font-size: 2.2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin: 0 0 10px 0;
    font-family: var(--font-en);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers icons and text */
    text-align: center;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    margin: 0;
    font-family: var(--font-th);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers icons and text */
    text-align: center;
}

/* The Responsive Video Wrapper */
.video-container {
    max-width: 900px; /* Prevents the video from becoming too massive on large screens */
    margin: 0 auto;
    border-radius: var(--radius-md); /* Rounds the corners of the video player */
    overflow: hidden;
    box-shadow: var(--shadow-float); /* Adds a premium floating shadow */
    background-color: #000; /* Shows black while the video is loading */
    aspect-ratio: 16 / 9; /* Forces the perfect widescreen YouTube ratio */
    position: relative;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 1rem; }
    .video-section { padding: 50px 20px 20px 20px; }
    .chart-v-wrapper {
        height: 180px; /* จากเดิมอาจจะ 250px-300px ลดลงมาให้พอดี */
        margin-bottom: 10px;
    }

    /* ปรับขนาดตัวเลขให้เล็กลงนิดนึงเพื่อให้สมดุล */
    .big-number-display {
        font-size: 1.5rem;
    }

    /* ปรับ padding ของการ์ดให้เล็กลงเพื่อประหยัดพื้นที่ */
    .stat-card {
        padding: 15px;
    }
    .top-row {
        display: flex;
        flex-direction: column;
        gap: 15px; 
    }

    .stat-right-col {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* ลดขนาดตัวเลขเปอร์เซ็นต์หลัก */
    .big-number-display {
        font-size: 1.8rem !important; /* ปรับลดจากเดิมที่อาจจะเป็น 2.5rem - 3rem */
    }

    /* กรณีตัวเลขในกล่องย่อยที่ต้องการให้เล็กกว่าเดิม */
    .big-number-display.small {
        font-size: 1.5rem !important;
    }

    /* 1. ลดความสูงของกราฟแนวตั้ง (อัตราการสำเร็จการศึกษา) */
    .chart-v-wrapper {
        margin-top: 40px;
        height: 150px !important; /* ลดความสูงรวมของพื้นที่กราฟ */
    }
    
    .chart-v-bar-bg {
        width: 35px !important; /* ลดความกว้างของแท่งกราฟลง */
    }

    /* 2. ลดความหนาของกราฟแนวนอน (ได้งานทำ / ความพึงพอใจ) */
    .chart-h-bg {
        height: 15px !important; /* ปรับให้แถบดูเรียวบางลง */
    }
    
    /* ปรับระยะห่างระหว่างตัวเลขกับแถบให้ชิดขึ้น */
    .stat-row {
        gap: 10px;
    }

    .stat-info-grid {
        gap: 0px;
    }

    .stat-title {
        font-size: 0.9rem;
    }
    
    .stat-val {
        /* font-size: 0.9rem; */
    }

    .stat-sub {
        font-size: 0.9rem;
    }

}

/* --- Dashboard Styles --- */
.dashboard-section {
    padding: 50px 20px 0 20px;
}
.academics-dashboard {
    padding: 0px 20px 20px 20px;
    margin: 0;
}

.dashboard-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* Tabs */
.department-filter {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.tabs {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 8px;
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
}

/* ในไฟล์ home.css */

.tab-btn.active {
    padding: 10px 20px;
    font-weight: bold;
    background-color: var(--primary-blue) !important; /* สีน้ำเงินเข้มตามรูป */
    color: #ffffff !important;           /* ตัวอักษรสีขาว */
    border: none;
    transition: background-color 0.3s ease;
}

.tab-btn {
    background-color: #ffffff;
    color: var(--text-light);
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 25px;
    font-family: 'Prompt', sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

/* สีแดงเข้มสำหรับตัวเลขสถิติ */
.big-number-display {
    color: #660000; /* สีแดงเข้ม */
}

/* สีแดงเข้มสำหรับกราฟแท่ง (Bar Fill) */
.chart-v-fill, .chart-h-fill {
    background-color: #660000; /* สีแดงเข้ม */
}

.stat-icon {
    padding: 10px;
    border-radius: 50px;
    font-size: 1.5rem;
    background-color: #e67e22;
    color: white;
    margin-bottom: 15px;
}

.stat-val {
    color: #e67e22; /* สีส้มสำหรับตัวเลขค่าเทอม/เงินเดือน */
}

/* Stat Cards */
.stat-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 25px;
    box-shadow: var(--shadow-sm);
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.stat-card.info-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers icons and text */
    text-align: center;
}

.stat-top-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-bottom: 20px;
}

.big-number-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kmitl-red);
    margin: 10px 0;
}

.big-number-display.small { font-size: 2rem; }

/* Vertical Chart */
.chart-v-wrapper {
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-v-bar-bg {
    width: 50px;
    height: 100%;
    background: #f0f0f0;
    position: relative;
    border-radius: 4px;
}

.chart-v-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: var(--kmitl-red);
}

/* Horizontal Chart */
.stat-row { display: flex; align-items: center; gap: 20px; }
.chart-h-container { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.chart-h-bg { flex: 1; height: 30px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.chart-h-fill { height: 100%; background: var(--kmitl-red); }

/* Grid */
.stat-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
    gap: 20px;
}

.stat-val {
    color: var(--accent-orange);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 5px 0;
}
.tab-btn.active {
    background: var(--primary-blue);
    color: white;
}