/* General Body Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* --- Bắt đầu phần thêm/chỉnh sửa --- */
    text-rendering: optimizeLegibility; /* Tối ưu hóa render chữ cho độ dễ đọc */
    -webkit-font-smoothing: antialiased; /* Làm mượt font trên trình duyệt WebKit (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale; /* Làm mượt font trên Firefox và macOS */
    /* --- Kết thúc phần thêm/chỉnh sửa --- */
}


#site-logo img {
    width: 18%; /* Đặt chiều rộng mong muốn cho logo (ví dụ: 60px) */
    height: auto; /* Đảm bảo chiều cao tự động điều chỉnh để giữ tỉ lệ ảnh */
    display: block; /* Quan trọng để margin auto hoạt động nếu bạn muốn căn giữa ảnh */
    margin: 0 auto; /* Căn giữa ảnh bên trong #site-logo */
}

/* Đảm bảo #site-logo (phần tử div) không ghi đè kích thước ảnh một cách không mong muốn */
#site-logo {
    /* Đảm bảo không có 'width' hoặc 'max-width' cố định quá lớn ở đây cho desktop,
       hoặc chỉ định 'width: auto;' để nó co lại theo ảnh nếu không cần cố định */
    width: auto; /* Để #site-logo tự co lại theo kích thước của ảnh bên trong */
    /* Giữ các thuộc tính khác như margin-left: -25px; để dịch chuyển vị trí nếu cần */
    margin-left: -25px; /* Giữ nguyên hoặc điều chỉnh giá trị này để dịch logo sang trái nếu cần */
    margin-bottom: 0px; /* Khoảng cách với văn bản bên dưới */
}




/* Thêm CSS cho thanh tìm kiếm và nút */
/* Search Container Styles (Đã điều chỉnh để căn giữa và responsive) */
/* Search Container Styles */
.search-container {
    margin: 0px auto 20px auto;
    display: flex;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    vertical-align:middle;


    margin: 0px auto 20px auto;
    display: flex;
    width: 100%; /* Thay đổi từ 90% thành 100% để chiếm toàn bộ chiều rộng của #call-container */
    max-width: 600px; /* Loại bỏ giới hạn max-width để cho phép nó mở rộng */
    box-sizing: border-box;
    vertical-align:middle;



}

.search-container input[type="text"] {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 3px 0 0 3px;
    box-sizing: border-box;
    font-size: 16px;
    min-width: 0;
    height: 48px; /* Đặt chiều cao cố định */
}

.search-container button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 25px;
    margin-left: -1px;
    white-space: nowrap;
    box-sizing: border-box; /* Đảm bảo box-sizing cho button */
    height: 48px; /* Đặt chiều cao cố định giống với input */
}

.search-container button:hover {
    background-color: #45a049;
}

.container {
   
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px; /* Padding 20px xung quanh nội dung */
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}

/* Header Styles */
#main-header {
    background-color: #007bff;
    color: white;
    padding: 30px 20px; /* Đã thay đổi padding ngang từ 25px thành 20px để khớp với padding của .container */
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: flex; /* Kích hoạt Flexbox */
    flex-direction: column; /* Sắp xếp các mục con theo chiều dọc */
    align-items: center; /* Căn giữa các mục con theo chiều ngang (cross-axis cho column) */

    width: 100%; /* Đảm bảo nó chiếm toàn bộ chiều rộng của vùng nội dung .container */
    box-sizing: border-box; /* Bao gồm padding trong tính toán chiều rộng tổng thể */
}



    #main-header h1 {
        font-size: 3.2em;
        margin: 0;
        padding-left: 0; /* Remove padding-left */
        font-weight: 700;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

        /* --- Bắt đầu phần thêm/chỉnh sửa --- */
        letter-spacing: 0.02em; /* Tăng nhẹ khoảng cách chữ để dễ đọc hơn */
        /* --- Kết thúc phần thêm/chỉnh sửa --- */
    }

.organization-name {
    font-size: 1.8em;
    margin: 0px 0 0 0;
    padding-left: 0; /* Remove padding-left */
    font-weight: 400;
    opacity: 0.9;

    /* --- Bắt đầu phần thêm/chỉnh sửa --- */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Thêm bóng mờ nhẹ */
    /* --- Kết thúc phần thêm/chỉnh sửa --- */
}

/* Login Container */
#login-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 50px auto;
    border: 1px solid #cceeff;
}

    #login-container h2 {
        color: #007bff;
        margin-bottom: 35px;
        font-size: 2.4em;

        /* --- Bắt đầu phần thêm/chỉnh sửa --- */
        font-weight: 600; /* Tăng độ đậm */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Thêm bóng mờ nhẹ */
        /* --- Kết thúc phần thêm/chỉnh sửa --- */
    }

.form-group {
    margin-bottom: 25px;
    text-align: left;
}

    .form-group label {
        display: block;
        margin-bottom: 10px;
        color: #555;
        font-weight: bold;
        font-size: 1.1em;
    }

    .form-group input[type="text"],
    .form-group input[type="password"] {
        width: calc(100% - 24px);
        padding: 14px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 1.2em;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

button {
    padding: 14px 30px;
    font-size: 1.2em;
}

/* Styling for Primary Button (e.g., Login Button) */
.btn-primary {
    background-color: #007bff; /* Màu xanh dương chủ đạo */
    color: white; /* Màu chữ trắng */
    border: none; /* Loại bỏ đường viền mặc định */
    border-radius: 8px; /* Bo góc để nút trông mềm mại và hiện đại */
    padding: 14px 30px;
    font-size: 1.2em;
    cursor: pointer; /* Biến con trỏ thành biểu tượng bàn tay khi di chuột qua */
    /* --- Bắt đầu phần thêm/chỉnh sửa cho chuyên nghiệp hơn --- */
    font-weight: 600; /* Làm chữ đậm hơn một chút */
    letter-spacing: 0.02em; /* Tăng nhẹ khoảng cách giữa các chữ cái */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* Đổ bóng nhẹ với màu xanh chủ đạo */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease; /* Hiệu ứng chuyển động mượt mà */
    outline: none; /* Loại bỏ viền xanh khi click vào (focus) */
    /* --- Kết thúc phần thêm/chỉnh sửa --- */
}

    .btn-primary:hover {
        background-color: #0056b3; /* Màu xanh đậm hơn khi di chuột qua */
        box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3); /* Tăng đổ bóng khi hover */
        transform: translateY(-2px); /* Nâng nút lên một chút khi hover */
    }

    .btn-primary:active {
        background-color: #004085; /* Màu xanh đậm hơn nữa khi click */
        box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); /* Giảm đổ bóng khi click để tạo cảm giác nhấn xuống */
        transform: translateY(0); /* Đảm bảo nút trở về vị trí ban đầu khi click */
    }

/* Call Container Styles */
#call-container {
    background-color: #ffffff;   
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    border: 1px solid #cceeff;
   
    width: 100%; /* Đảm bảo nó chiếm toàn bộ chiều rộng của vùng nội dung .container */
    box-sizing: border-box; /* Bao gồm padding trong tính toán chiều rộng tổng thể */
    padding: 0 20px; /* Thêm padding ngang 20px để căn chỉnh nội dung bên trong với .container */
}

    #call-container h2 {
        color: #007bff;
        margin-bottom: 35px;
        font-size: 2.4em;

        /* --- Bắt đầu phần thêm/chỉnh sửa --- */
        font-weight: 600; /* Tăng độ đậm */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Thêm bóng mờ nhẹ */
        /* --- Kết thúc phần thêm/chỉnh sửa --- */
    }

/* Room Group Styles */
.room-group {
    background-color: #f0f8ff;
    border: 1px solid #b3e0ff;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 25px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .room-group h3 {
        color: #0056b3;
        margin-top: 10px;
        margin-bottom: 0px;
        border-bottom: 2px solid #aaddff;
        padding-bottom: 12px;
        font-size: 2em;
        font-weight: 600;
        text-align: center;

        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Thêm bóng mờ nhẹ */
    }

/* Table Styles - Default for larger screens (traditional table) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

thead {
    background-color: #007bff;
    color: white;
}

th {
    padding: 12px 10px;
    text-align: left;
    font-weight: bold;
    font-size: 1em;
    border-bottom: 1px solid #cceeff;
    white-space: nowrap; /* Ngăn tiêu đề cột xuống dòng */

    /* --- Bắt đầu phần chỉnh sửa --- */
    font-size: 1.05em; /* Tăng nhẹ kích thước font */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Thêm bóng mờ nhẹ */
    /* --- Kết thúc phần chỉnh sửa --- */
}
    /* Center STT column header on desktop */
    th:first-child { /* STT column */
        text-align: center;
    }

tbody tr:nth-child(even) {
    background-color: #f7fcff;
}

tbody tr:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}

td {
    padding: 10px 8px;
    border-bottom: 1px solid #e0f2f7;
    font-size: 0.9em;
    color: #333;
    white-space: nowrap; /* Giữ nguyên nowrap cho desktop để tránh nội dung xuống dòng không mong muốn */
    overflow: hidden;
    text-overflow: ellipsis;

    /* --- Bắt đầu phần chỉnh sửa chung cho td --- */
    font-size: 0.95em; /* Tăng nhẹ kích thước font */
    color: #2c2c2c; /* Làm màu chữ đậm hơn một chút */
    /* --- Kết thúc phần chỉnh sửa chung cho td --- */
}

    /* Flexible widths for columns when in traditional table layout (desktop) */
    td:first-child { /* STT column */
        width: 5%;
        text-align: center;

        /* --- Bắt đầu phần chỉnh sửa riêng --- */
        font-weight: 500; /* Làm đậm chữ STT */
        /* --- Kết thúc phần chỉnh sửa riêng --- */
    }

    td:nth-child(2) { /* Họ tên column */
        width: 30%;
        font-weight: 500;
    }

    td:nth-child(3) { /* Chức vụ column */
        width: 30%;
        font-weight: 500;
    }

    td:nth-child(4) { /* Số điện thoại column */
        width: 35%;
    }

    td a {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.2s ease;
        display: block; /* Vẫn giữ block cho các số điện thoại để mỗi số trên 1 dòng */
        white-space: nowrap; /* Giữ nowrap cho desktop */
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        font-size: 1em;
    }

        td a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

/* Logout Button */
#logout-button {
    margin-top: 35px;
    background-color: #dc3545; /* Giữ màu đỏ tiêu chuẩn cho hành động đăng xuất */
    color: white; /* Đảm bảo màu chữ trắng */
    border: none; /* Loại bỏ đường viền mặc định của button */
    border-radius: 8px; /* Bo góc để nút trông mềm mại và hiện đại hơn */
    padding: 14px 30px;
    font-size: 1.2em;
    cursor: pointer; /* Biến con trỏ thành biểu tượng bàn tay khi di chuột qua */
    /* --- Bắt đầu phần thêm/chỉnh sửa cho chuyên nghiệp hơn --- */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease; /* Thêm hiệu ứng chuyển động mượt mà khi tương tác */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Thêm đổ bóng nhẹ nhàng */
    font-weight: 600; /* Làm chữ đậm hơn một chút để nổi bật */
    letter-spacing: 0.02em; /* Tăng nhẹ khoảng cách giữa các chữ cái */
    outline: none; /* Loại bỏ viền xanh khi click vào (focus) */
    /* --- Kết thúc phần thêm/chỉnh sửa --- */
}

    #logout-button:hover {
        background-color: #c82333; /* Màu đỏ đậm hơn khi di chuột qua */
        /* --- Bắt đầu phần thêm/chỉnh sửa cho chuyên nghiệp hơn --- */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* Tăng đổ bóng khi hover */
        transform: translateY(-2px); /* Nâng nút lên một chút khi hover */
        /* --- Kết thúc phần thêm/chỉnh sửa --- */
    }

    #logout-button:active {
        background-color: #a71d2a; /* Màu đỏ đậm hơn nữa khi click */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Giảm đổ bóng khi click để tạo cảm giác nhấn xuống */
        transform: translateY(0); /* Đảm bảo nút trở về vị trí ban đầu khi click */
    }


/* ----------------------------------------------------- */
/* RESPONSIVE OPTIMIZATION (FOR SMALL SCREENS - TABLE WITH WRAPPING CONTENT) */
/* ----------------------------------------------------- */

@media screen and (max-width: 768px) {
    /* Điều chỉnh các phần tử ngoài bảng để gọn gàng hơn */
    .container {
        padding: 10px;
       
    }

    #main-header {
        padding: 10px 10px;
        text-align: center;
    }

    #site-logo {
        width: auto; /* Điều chỉnh thành auto để ảnh có thể co giãn */
        height: auto;
        margin-left: 0; /* Đảm bảo không có margin-left âm trên mobile */
    }

        #site-logo img {
            width: 90px; /* Kích thước logo trên mobile (hoặc giá trị khác phù hợp) */
            height: auto;
            margin: 0 auto; /* Đảm bảo căn giữa trên mobile */
            margin-left: -15px;
        }

    #main-header h1 {
        font-size: 1.8em;
        padding-left: 0; /* Remove padding-left */
    }

    .organization-name {
        font-size: 1.1em;
        padding-left: 0; /* Remove padding-left */
    }

    #login-container, #call-container {
        padding: 20px 10px;
    }

        #login-container h2, #call-container h2 {
            font-size: 1.8em;
        }

    .room-group {
        padding: 5px;
    }

        .room-group h3 {
            font-size: 1.4em;
        }

    /* Bảng vẫn là display: table, thead/tr/td vẫn là table-header-group/table-row/table-cell */
    table {
        width: 100%; /* Đảm bảo bảng co giãn theo chiều ngang màn hình */
        table-layout: fixed; /* Cố định layout bảng để các cột chia đều không gian */
        /* background-color, border, box-shadow, border-radius được giữ nguyên từ mặc định */
    }

    th, td {
        padding: 6px 4px; /* Giảm padding cho ô và tiêu đề */
        font-size: 0.75em; /* Giảm font size cho tiêu đề và nội dung */
        white-space: normal; /* Cho phép nội dung xuống dòng */
        word-wrap: break-word; /* Đảm bảo từ dài cũng xuống dòng */
        text-overflow: clip; /* Bỏ ellipsis khi nội dung xuống dòng */
        overflow: visible; /* Cho phép nội dung hiển thị đầy đủ */
        margin-left: 15px; /* Thông thêm*/
    }

        /* Điều chỉnh lại width cho các cột để chúng chia đều không gian và co giãn */
        th:first-child, td:first-child { /* STT */
            width: 6%; /* Tăng nhẹ width để STT không quá hẹp */
            text-align: center;
        }

        th:nth-child(2), td:nth-child(2) { /* Họ tên */
            width: 42%;
        }

        th:nth-child(3), td:nth-child(3) { /* Chức vụ */
            width: 23%;
        }

        th:nth-child(4), td:nth-child(4) { /* Số điện thoại */
            width: 29%;
        }

        /* Điều chỉnh các liên kết số điện thoại trong ô */
        td a {
            display: inline; /* Cho phép các số điện thoại nằm trên cùng 1 dòng nếu đủ chỗ */
            white-space: normal; /* Cho phép số điện thoại tự động xuống dòng */
            overflow: visible;
            text-overflow: clip;
            font-size: 1em; /* Giữ nguyên font size so với td */
            line-height: 1.2; /* Giảm line-height cho gọn */
            margin-right: 3px; /* Thêm khoảng cách giữa các số điện thoại */
        }

            td a:last-child {
                margin-right: 0;
            }
}

/* Áp dụng cho màn hình điện thoại đứng (dưới 480px) */
@media screen and (max-width: 480px) {
    #main-header h1 {
        font-size: 1.5em;
        text-align: center;
    }

    .organization-name {
        font-size: 1em;
    }

    #login-container h2, #call-container h2 {
        font-size: 1.6em;
    }

    .room-group h3 {
        font-size: 1.2em;
    }

    th, td {
        padding: 5px 3px; /* Giảm padding thêm nữa */
        font-size: 0.7em; /* Giảm font size thêm nữa */
    }

        td a {
            font-size: 0.95em; /* Giảm font size của link */
        }
}

img.circular-image {
    vertical-align: middle;
    border-radius: 50%; /* Làm cho ảnh có hình tròn */
    width: 25px; /* Đặt chiều rộng cố định */
    height: 30px; /* Đặt chiều cao cố định bằng chiều rộng để tạo thành hình tròn */
    object-fit: cover; /* Đảm bảo ảnh bao phủ toàn bộ vùng mà không bị méo */
    /* Các thuộc tính tùy chọn khác, ví dụ: */
    border: 0px solid #007bff ;/* Thêm viền xung quanh ảnh */
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */ /* Thêm đổ bóng */
    margin-right: 10px;
}