/* public_html/assets/css/style.css */

/* กำหนด Font Family ให้กับ Body ทั่วทั้งเว็บ */
body {
    font-family: 'Kanit', sans-serif;
    background-color: #f8f9fa;
    /* เพิ่ม padding-top เพื่อเว้นช่องว่างให้ navbar fixed */
    padding-top: 70px; /* ค่านี้สามารถปรับได้ตามความสูงที่แท้จริงของ Navbar */
    padding-bottom: 20px;
    min-height: 100vh; /* ทำให้ body มีความสูงอย่างน้อยเท่า viewport เพื่อให้ footer อยู่ด้านล่าง */
    display: flex;
    flex-direction: column;
    /* ตรวจสอบให้แน่ใจว่าไม่มี padding-left: 0; หรือ padding-right: 0; ที่นี่ */
    /* หรือ margin-left: 0; / margin-right: 0; ที่อาจ override Bootstrap */
}

/* ทำให้เนื้อหาหลักขยายเต็มพื้นที่ที่เหลือ */
.container {
    flex: 1;
    /* ตรวจสอบให้แน่ใจว่าไม่มี rule ที่ไป override padding/margin ด้านข้างของ Bootstrap */
    /* ตัวอย่างของ rule ที่อาจทำให้ไม่มีช่องว่าง (หากมี ให้ลบออกหรือคอมเมนต์ไว้): */
    /* padding: 0 !important; */
    /* margin-left: 0 !important; */
    /* margin-right: 0 !important; */
}

/* Style สำหรับ Card */
.card {
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Style สำหรับ Button */
.btn {
    border-radius: 0.5rem;
}

/* Style สำหรับ Alert */
.alert {
    border-radius: 0.5rem;
}

/* Style สำหรับ Navbar */
.navbar {
    /* ทำให้ Navbar ลอยอยู่ด้านบนสุดของหน้าจอเสมอ */
    position: fixed; /* ใช้ fixed เพื่อให้มันลอยอยู่ตลอดเวลา */
    top: 0; /* กำหนดให้อยู่ด้านบนสุด */
    width: 100%; /* กำหนดความกว้างเต็มหน้าจอ */
    z-index: 1030; /* กำหนดลำดับการซ้อนทับ (ค่ามาตรฐานของ Bootstrap Navbar) */
    margin-bottom: 0; /* ลบ margin-bottom ออกเมื่อใช้ position: fixed */
    border-radius: 0; /* ลบขอบมนออกเมื่อใช้ position: fixed เพื่อให้เต็มขอบจอ */
    /* ถ้าต้องการขอบมน ให้ใช้กับ container-fluid ด้านในแทน */
}

/* เพิ่ม padding-top ให้ body เพื่อไม่ให้เนื้อหาถูก Navbar ที่ fixed บัง */
/* *** หมายเหตุ: ได้ย้าย padding-top ไปอยู่ใน body rule ด้านบนแล้ว เพื่อรวมโค้ด *** */

/* CSS สำหรับฟอร์มการเข้าสู่ระบบ/สมัครสมาชิก */
.card-header.rounded-top-3 {
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
}

.form-control.rounded-pill {
    border-radius: 50rem !important; /* ค่านี้ทำให้เป็น pill-shaped */
    padding-left: 1.25rem; /* เพิ่ม padding ด้านซ้ายเล็กน้อย */
}

.btn.rounded-pill {
    border-radius: 50rem !important; /* ค่านี้ทำให้เป็น pill-shaped */
}

/* Custom styles for dashboard cards */
.dashboard-card-icon {
    font-size: 2rem;
    color: #6c757d; /* Bootstrap secondary color */
}

/* Course Card Specific Styles */
.course-card .card-img-top {
    height: 180px; /* กำหนดความสูงคงที่สำหรับรูปภาพคอร์ส */
    object-fit: cover; /* ทำให้รูปภาพครอบคลุมพื้นที่โดยไม่บิดเบี้ยว */
    border-top-left-radius: calc(0.75rem - 1px); /* ให้เข้ากับ border-radius ของ card */
    border-top-right-radius: calc(0.75rem - 1px);
}

.course-card .card-body {
    padding-top: 0.75rem; /* ลด padding ด้านบนเล็กน้อย */
    padding-bottom: 0.75rem; /* ลด padding ด้านล่างเล็กน้อย */
}

.course-card .card-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    min-height: 2.2rem; /* กำหนด min-height เพื่อให้ชื่อคอร์สมีขนาดเท่ากัน */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* แสดงไม่เกิน 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card .card-text {
    font-size: 0.9rem;
    color: #6c757d;
    min-height: 2.7rem; /* กำหนด min-height สำหรับ description */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* แสดงไม่เกิน 3 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card .course-progress {
    font-size: 0.85rem;
    color: #495057;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.course-card .btn-sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.35rem;
}

/* Ensure notifications list doesn't get too wide or narrow */
.notifications-list {
    max-height: 300px; /* Set a max-height for scrollable notifications */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Style for individual notification items */
.notification-item {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.notification-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.notification-item .timestamp {
    font-size: 0.8em;
    color: #6c757d;
}

/* Additional style for the notification badge in Navbar */
.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: .25em .6em;
    border-radius: 50%;
    background-color: #dc3545; /* Bootstrap danger color */
    color: white;
    font-size: 0.7em;
}

/* Custom styles for tables within admin pages */
.table-responsive-admin {
    overflow-x: auto; /* Allows horizontal scrolling for large tables */
}

.table-admin th,
.table-admin td {
    white-space: nowrap; /* Prevents text wrapping in table cells */
}

/* Course detail page styles */
.course-image-hero {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* Lesson detail page styles */
.lesson-video-player {
    width: 100%;
    height: auto;
    min-height: 400px; /* Minimum height for video player */
    background-color: #000;
    border-radius: 0.75rem;
}

/* Ensure consistent card heights for dashboard stats */
.dashboard-stat-card {
    min-height: 120px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Adjustments for smaller screens */
@media (max-width: 767.98px) {
    .navbar-brand img {
        height: 35px; /* Adjust logo size for smaller screens */
    }
    .navbar-nav .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .navbar-collapse {
        margin-top: 10px;
    }
}