body {
    font-family: Times New Roman, sans-serif; /* STYLE CHUNG: Chọn font chữ */
    background-color: #f8f9fa; /* STYLE CHUNG: Màu nền của trang */
    overflow-x: hidden; /* STYLE CHUNG: Ẩn thanh cuộn ngang */
    overflow-y: auto; /* Allow vertical scrolling */
    margin: 0;
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.table {
    table-layout: fixed; /* STYLE BẢNG: Cố định chiều rộng của bảng */
    background-color: white; /* STYLE BẢNG: Màu nền trắng */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* STYLE BẢNG: Đổ bóng */
	border: 2px solid #ffffff; /* Viền dày 2px, màu xanh dương, kiểu liền */
    width: 100%;
    min-width: 800px; /* Ensure minimum width for content */
}

table th,
table td {
	font-size: 16px; /* Reduced from 20.5px */
    padding: 5px; /* STYLE TIÊU ĐỀ: Khoảng cách giữa nội dung và viền */
	word-wrap: break-word; /* STYLE Ô BẢNG: Xuống dòng nếu nội dung quá dài */
    white-space: pre-wrap; /* STYLE Ô BẢNG: Cho phép xuống dòng */
    overflow-wrap: break-word; /* STYLE Ô BẢNG: Hỗ trợ trình duyệt */
    text-align: center; /* STYLE Ô BẢNG: Căn giữa nội dung */
    vertical-align: middle; /* STYLE Ô BẢNG: Căn giữa theo chiều dọc */
}

.custom-title {
    color: yellow; /* STYLE TIÊU ĐỀ: Màu chữ vàng */
    background-color: red; /* STYLE TIÊU ĐỀ: Nền đỏ */
    padding: 10px; /* Reduced from 15px */
    text-align: center; /* STYLE TIÊU ĐỀ: Căn giữa nội dung */
    font-weight: bold; /* STYLE TIÊU ĐỀ: Chữ in đậm */
    margin: 0;
    font-size: 1.8rem; /* Added responsive font size */
}

.table-primary {
	font-size: 18px; /* Reduced from 22px */
    --bs-table-bg: #00567a !important; /* STYLE BẢNG: Màu nền xanh đậm */
    --bs-table-color: #ffffff !important; /* STYLE BẢNG: Màu chữ trắng */
}

.container {
    max-width: 100% !important; /* STYLE CONTAINER: Chiếm toàn bộ chiều rộng */
    width: 100%;
    padding: 0;
    margin: 0;
}

.container-fluid {
    max-width: 100%;
    padding: 0;
    margin: 0;
    position: relative; /* Changed from absolute */
    width: 100%;
    overflow-x: auto; /* Enable horizontal scrolling */
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.table-responsive {
    width: 100%; /* STYLE BẢNG: Chiếm toàn bộ chiều rộng */
    overflow-x: auto; /* STYLE BẢNG: Cho phép cuộn ngang nếu cần */
    margin-top: 0 !important; /* STYLE BẢNG: Đưa bảng lên sát tiêu đề */
    padding-top: 0 !important;
    -webkit-overflow-scrolling: touch; /* Added for smooth scrolling on iOS */
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Custom scrollbar for Webkit browsers */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

table {
    width: 100%; /* STYLE BẢNG: Chiếm toàn bộ chiều rộng */
    table-layout: fixed; /* STYLE BẢNG: Giữ tỷ lệ cột đồng đều */
    border-collapse: collapse; /* STYLE BẢNG: Gộp viền bảng */
}

html, body {
    height: 100%;
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden; /* Changed from hidden to allow scrolling */
    max-height: none; /* Removed max-height restriction */
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    table th,
    table td {
        font-size: 14px; /* Even smaller font for mobile */
        padding: 3px; /* Reduced padding */
    }

    .custom-title {
        font-size: 1.3rem;
        padding: 8px;
    }

    .table-primary {
        font-size: 16px;
    }

    /* Fixed width for first two columns */
    table th:first-child,
    table td:first-child {
        width: 60px !important; /* Day column */
        min-width: 60px !important;
        max-width: 60px !important;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
        width: 60px !important; /* Session column */
        min-width: 60px !important;
        max-width: 60px !important;
    }

    /* Flexible width for other columns */
    table th:not(:first-child):not(:nth-child(2)),
    table td:not(:first-child):not(:nth-child(2)) {
        width: auto !important;
        min-width: 270px !important;
        max-width: none !important;
    }

    /* Ensure content in cells is readable */
    table td {
        font-size: 13px;
        line-height: 1.3;
    }

    /* Add visual indicator for horizontal scroll */
    .table-responsive::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));
        pointer-events: none;
    }
}

/* Tablet-specific styles */
@media (min-width: 768px) and (max-width: 1024px) {
    table th,
    table td {
        font-size: 15px;
        padding: 4px;
    }

    .custom-title {
        font-size: 1.1rem;
        padding: 12px;
    }

    .table-primary {
        font-size: 17px;
    }

    /* Slightly larger fixed widths for tablets */
    table th:first-child,
    table td:first-child {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    /* Flexible width for other columns */
    table th:not(:first-child):not(:nth-child(2)),
    table td:not(:first-child):not(:nth-child(2)) {
        width: auto !important;
        min-width: 200px !important;
        max-width: none !important;
    }
}