body {
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: row;
    height: 250vh;
}

.left, .right {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid #333; /* Add border */
    border-radius: 8px; /* Add border radius for rounded corners */
    margin: 10px;
}

.left {
    flex: 0 0 20%;
    background-color: #f4f4f4;
}

.right {
    flex: 0 0 75%;
    background-color: #ffffff;
}

label, select, input {
    display: block;
    margin-top: 10px;
}

.hidden {
    display: none;
}

.table-container {
    width: 100%; /* ขยายให้เต็มความกว้างของ parent container */
    max-height: 1500px; /* กำหนดความสูงสูงสุดของตาราง */
    overflow-y: auto; /* ให้ scroll เมื่อเนื้อหามากเกินไป */
    border: 1px solid #ccc; /* ขอบของตาราง */
    border-radius: 4px; /* มุมโค้งของตาราง */
    margin-top: 20px; /* เพิ่มระยะห่างระหว่างตารางกับเนื้อหาข้างต้น */
}

table {
    width: 100%; /* ให้ตารางเต็มความกว้างของ container */
	height: 100%;
    border-collapse: collapse; /* ขอบของเซลล์เชื่อมต่อกัน */
}

th {
    background-color: #f4f4f4; /* สีพื้นหลังของหัวตาราง */
    color: #333; /* สีตัวอักษรของหัวตาราง */
    padding: 10px; /* ขนาดของ padding */
    text-align: left; /* จัดการ text alignment */
    border-bottom: 2px solid #ddd; /* ขอบล่างของหัวตาราง */
    font-weight: bold; /* ตัวหนา */
    position: -webkit-sticky; /* รองรับ Safari */
    position: sticky; /* ทำให้หัวตารางติดอยู่ */
    top: 0; /* ปรับตำแหน่งให้ติดที่ด้านบนของ container */
    z-index: 1; /* กำหนดลำดับชั้นการแสดงผลให้สูงกว่าเนื้อหาอื่น */
}

td {
    border: 1px solid #ddd; /* ขอบของเซลล์ */
    padding: 8px; /* ระยะห่างภายในเซลล์ */
    text-align: left; /* จัดข้อความไปทางซ้าย */
}

thead {
    background-color: #f4f4f4; /* พื้นหลังของหัวตาราง */
}