body {
	font-family: "Prompt", "Sarabun", sans-serif;
	font-weight: 300;
	font-style: normal;
	background-color: #f8fafd;
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* ให้แน่ใจว่า body มีความสูงอย่างน้อยเต็มจอ */
	margin: 0;
}

 .fs-1 
 {
	font-size: 2.5rem; /* ขนาดฟอนต์ใหญ่สุด */
}

.fs-2 
{
	font-size: 2rem;
}

.fs-3 
{
	font-size: 1.75rem;
}

.fs-4
 {
	font-size: 1.5rem;
}

.fs-5
 {
	font-size: 1.25rem;
}

.fs-6 
{
	font-size: 1rem; /* ขนาดฟอนต์เล็กสุด */
}

/* ทำให้ header มีขอบโค้ง */
.header {
	background: #f8fafd;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000; /* เพื่อให้มันอยู่ข้างบนสุด */
	border-radius: 5px; /* ทำให้ขอบโค้ง */
}

 .header-inner {
	background: rgb(124,172,248);
	background: linear-gradient(90deg, rgba(124,172,248,1) 0%, rgba(211,227,253,1) 35%, rgba(211,227,253,1) 65%, rgba(124,172,248,1) 100%);
	color: #062e6f;
	padding: 10px 0;
	margin: 5px; /* ระยะห่างรอบๆ header */
	border-radius: 5px; /* ทำให้ขอบโค้ง */
}

.navbar-brand {
	padding-bottom: 0;
}

/* ตั้งค่า content ให้เลื่อน */
.content-wrapper {
	flex: 1;
	margin-top: 100px; /* เลื่อนจากด้านบนให้พ้น header */
	margin-left: 0; /* เริ่มต้นจากไม่มีระยะห่าง */
	padding: 10px;
	overflow-y: auto; /* เลื่อนเนื้อหาเมื่อจำเป็น */
	position: relative; /* ใช้เพื่อให้จัดการตำแหน่งได้ */
	transition: margin-left 0.3s; /* ทำให้การเปลี่ยนแปลงสวยงาม */
}

/* กล่องที่ใช้สำหรับบรรจุเนื้อหา */
.content-inner {
	margin: 0 auto; /* จัดให้อยู่ตรงกลาง */
	padding: 5px; /* เพิ่มช่องว่างภายในกล่อง */
}

.sidebar {
	width: 250px; /* กำหนดความกว้างของ sidebar */
	position: fixed; /* ให้ sidebar อยู่คงที่ */
	top: 100px; /* วาง sidebar ให้ต่ำกว่าหัว */
	left: 5px; /* ตำแหน่งซ้าย */
	background-color: #e9ecef; /* สีพื้นหลังเป็นสีเทาอ่อน */
	padding: 10px; /* ช่องว่างภายใน */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ sidebar */
	border-radius: 0 10px 10px 0; /* ปรับมุมให้สวยงาม */
	z-index: 900; /* ให้อยู่เหนือส่วนอื่น */
	height: calc(100vh - 100px); /* ให้ sidebar สูงเต็มจอ */
	overflow-y: auto; /* เลื่อน sidebar ถ้าจำเป็น */
	transform: translateX(-100%); /* ซ่อน sidebar */
	transition: transform 0.3s; /* ทำให้การเลื่อนสวยงาม */
}

.sidebar.active {
	transform: translateX(0); /* แสดง sidebar เมื่อมีคลาส active */
}

.sidebar-menu {
	list-style: none; /* เอาเครื่องหมายของรายการออก */
	padding: 0; /* ลบช่องว่าง */
}

.sidebar-menu li {
	margin-bottom: 10px; /* ช่องว่างระหว่างรายการ */
}

.sidebar-menu a {
	text-decoration: none; /* เอาเส้นใต้ลิงก์ออก */
	color: #062e6f; /* สีของข้อความ */
	padding: 10px; /* ช่องว่างภายใน */
	display: block; /* ทำให้ลิงก์เป็นบล็อก */
	border-radius: 5px; /* มุมโค้ง */
	transition: background-color 0.3s; /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

.sidebar-menu a:hover {
	background-color: #ced4da; /* สีพื้นหลังเมื่อ hover */
}

footer {
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
}

/* ปิดการแสดงผลปุ่ม Hamburger */
.hamburger {
	display: none; /* ซ่อนปุ่ม Hamburger */
}

/* ปรับให้ sidebar แสดงในขนาดหน้าจอเล็ก */
@media (max-width: 768px) {
	.sidebar {
		position: absolute; /* ทำให้ sidebar แสดงเป็น absolute */
		top: 100px; /* ให้อยู่ต่ำกว่าหัว */
		left: -250px; /* ซ่อน sidebar ข้างนอกหน้าจอ */
	}

	.sidebar.active {
		left: 0; /* แสดง sidebar เมื่อมีคลาส active */
	}

	.hamburger {
		display: block; /* แสดงปุ่ม Hamburger ในหน้าจอเล็ก */
	}
}

/* ปรับให้ datTables Style  */
.dataTables_wrapper .dataTables_filter input {
			border-radius: 0.25rem; /* ทำมุมมน */
			border: 1px solid #ced4da; /* สีของกรอบ */
			padding: 0.375rem 0.75rem; /* Padding */
			font-size: 1rem; /* ขนาดฟอนต์ */
			line-height: 1.5; /* ระยะห่าง */
		}
		
.dataTables_wrapper .dataTables_filter input::before {
	content: "\f002"; /* ใช้โค้ด Unicode ของไอคอนแว่นขยายจาก Font Awesome */
	font-family: "Font Awesome 5 Free"; /* ฟอนต์ของ Font Awesome */
	font-weight: 900; /* ใช้ตัวหนา */
	position: absolute;
	left: 10px; /* ระยะห่างจากซ้าย */
	top: 50%;
	transform: translateY(-50%); /* จัดแนวกลางในแนวตั้ง */
	color: #6c757d; /* สีของไอคอน */
}

.dataTables_wrapper .dataTables_filter input:focus {
	border-color: #66afe9; /* สีฟ้าอ่อน */
	box-shadow: 0 0 5px rgba(102, 175, 233, .5); /* เงารอบๆ */
	outline: none; /* ลบเส้นขอบเดิม */
}

.x-border {
	border: 2px dotted #d6c3c0;
}

/* ตาราง */
.x-data-table {
	width: 100%;
	border-collapse: collapse;
}

.x-data-table th,
.x-data-table td {
	padding: 4px 8px; /* ปรับ padding ให้น้อยลง */
}

/* ปรับ line-height ของแถวเพื่อลดความสูง */
.x-data-table thead tr {
	line-height: 1.8; /* ปรับความสูงบรรทัด */
	background-color: #fcfcfc
}

.x-data-table tbody tr {
	line-height: 1.5; /* ปรับความสูงบรรทัด */
}

.x-data-table tbody tr:last-child {
    border-bottom: 2px solid #ddd; /* ใช้ความหนาและสีเดียวกันกับ thead */
}

.x-data-table tbody tr:hover {
	background-color: #f5f5f5; /* สีไฮไลต์ของแถว */
}

/* แสดงปุ่มเมื่อเมาส์อยู่บนแถว */
.x-data-table tbody tr:hover .action-buttons {
	display: inline-flex;
}

.x-data-table .action-buttons {
	display: none;
}

/* ปุ่มที่มีพื้นหลังโปร่งใส */
.x-data-table .icon-btn {
	background-color: transparent; /* พื้นหลังโปร่งใส */
	padding: 2px 5px; /* ลด padding */
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none; /* ไม่มีขอบ */
}

/* ขนาดไอคอน */
.x-data-table .icon-btn i {
	font-size: 1.0rem;
}

.x-data-table .icon-btn:hover {
	background-color: #f0f0f0; /* เปลี่ยนพื้นหลังเมื่อ hover */
}

/* สีสำหรับไอคอน */
.x-data-table .text-info {
	color: #17a2b8; /* สีฟ้าสำหรับไอคอน view */
}

.x-data-table .text-warning {
	color: #ffc107; /* สีเหลืองสำหรับไอคอน edit */
}

.x-data-table .text-danger {
	color: #dc3545; /* สีแดงสำหรับไอคอน delete */
}