/* เพิ่ม padding-top ให้กับ body เพื่อหลีกเลี่ยง Header ที่ fixed */
body {
	padding-top: 64px; /* ปรับค่านี้ให้เท่ากับความสูงของ header ของคุณ */
	scroll-behavior: smooth; /* เพิ่มเพื่อให้การ scroll smooth */
}

/* Hero Section Height */
.hero-full-height {
	min-height: calc(100vh - 64px); /* 100vh ลบด้วยความสูงของ Header */
}

/* CSS สำหรับ Header เมื่อ "ไม่" เลื่อน (อยู่บนสุด) - สีขาวทึบ */
#top-bar {
	background-color: #ffffff; /* สีขาวทึบ */
	transition: all 0.3s ease-in-out; /* Transition all relevant properties */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเล็กน้อย */
	border-bottom: none;
	padding-top: 1rem; /* Default padding-y for py-4 */
	padding-bottom: 1rem; /* Default padding-y for py-4 */
}

/* กำหนดสีข้อความเมนูและโลโก้เป็นสีเข้มตลอดเวลา ไม่ว่าจะเลื่อนหรือไม่ */
#top-bar .nav-link-color {
	color: #333333; /* Dark Gray เสมอ */
}
#top-bar .navbar-brand .nav-link-color {
	color: #4e4e4f !important; /* Dark Gray เสมอ */
}
#top-bar .mobile-menu-icon {
	stroke: #333333; /* Dark Gray เสมอ */
}

/* === การแก้ไขสำหรับเส้นใต้ตัวอักษร: ทำให้เหมือนกันทุกเมนูเมื่อ active === */

/* กำหนดสไตล์พื้นฐานของเส้นใต้สำหรับลิงก์ใน nav-item (ซ่อนไว้ก่อน) */
.nav-item a::after {
	content: '';
	display: block;
	height: 2px;
	background-color: #F0008F; /* สีชมพู */
	margin-top: 2px; /* ระยะห่างจากข้อความ */
	width: 0; /* ซ่อนไว้เป็นค่าเริ่มต้น */
	transition: width 0.3s ease-in-out; /* เพิ่ม transition สำหรับการขยาย */
}

/* เมื่อลิงก์ใดๆ มีคลาส active-link หรือ nav-item-active ให้แสดงเส้นใต้ */
#top-bar .nav-item-home.active-link::after,
#top-bar .nav-item-jobs.nav-item-active::after,
#top-bar .nav-item-contact.nav-item-active::after {
	width: 100%; /* ขยายเส้นใต้ให้เต็มความกว้าง */
}

/* ซ่อนเส้นใต้ของ 'หน้าแรก' เมื่อมีการเลื่อน และเมนูอื่น active แทน */
#top-bar.scrolled .nav-item-home.active-link::after {
	width: 0; /* ซ่อนเส้นใต้ */
}
/* === สิ้นสุดการแก้ไขสำหรับเส้นใต้ตัวอักษร === */


/* CSS สำหรับ Header เมื่อ "เลื่อน" ลงมา - สีขาวโปร่งแสง และหดเล็กลง */
#top-bar.scrolled {
	background-color: rgba(255, 255, 255, 0.8); /* สีขาวโปร่งแสง */
	box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* เพิ่มเงาให้ชัดขึ้นเมื่อเลื่อน */
	backdrop-filter: blur(5px); /* เพิ่ม blur effect */
	-webkit-backdrop-filter: blur(5px); /* สำหรับ Safari */
	border-bottom: none;
	padding-top: 0.5rem; /* Reduced padding-y for py-2 */
	padding-bottom: 0.5rem; /* Reduced padding-y for py-2 */
}

/* ปรับขนาดโลโก้เมื่อ Header หดเล็กลง */
#top-bar .navbar-brand img {
	transition: height 0.3s ease-in-out;
	height: 3rem; /* h-12 is 3rem (48px) */
}

#top-bar.scrolled .navbar-brand img {
	height: 2.5rem; /* Slightly smaller, e.g., h-10 (40px) */
}


/* ==== สไตล์เพิ่มเติมสำหรับแถบประกาศรับสมัครงานและตาราง ==== */
.job-section-tabs {
	display: flex;
	gap: 1rem; /* Space between tabs */
	margin-bottom: 2rem;
	overflow-x: auto; /* Allow scrolling on small screens */
}

.job-tab-item {
	flex-shrink: 0; /* Prevent tabs from shrinking */
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem; /* Rounded corners */
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	white-space: nowrap; /* Prevent text wrapping */
}

.job-tab-item.active-tab {
	background-color: #F0008F; /* Primary color (Hot Pink) */
	color: white;
}

.job-tab-item:not(.active-tab) {
	background-color: #f3f4f6; /* Light gray background */
	color: #4b5563; /* Darker text */
}

.job-tab-item:not(.active-tab):hover {
	background-color: #e5e7eb; /* Slightly darker gray on hover */
}

/* Table Specific Styles */
.job-table {
	width: 100%;
	border-collapse: collapse; /* Ensure borders collapse */
	background-color: white;
	border-radius: 0.75rem; /* Rounded corners for the table */
	overflow: hidden; /* Hide overflowing content for rounded corners */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.job-table thead th {
	background-color: #f9fafb; /* Light header background */
	color: #374151; /* Dark text for headers */
	padding: 1rem 1.5rem;
	text-align: left; /* ตั้งเป็น left เพื่อให้เป็นค่าเริ่มต้น */
	font-weight: 600;
	border-bottom: 1px solid #e5e7eb; /* Light border below header */
	font-size: 0.875rem; /* text-sm */
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.job-table tbody td {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #e5e7eb; /* Light border between rows */
	vertical-align: top; /* Align content to the top */
	font-size: 0.95rem; /* Slightly smaller text for data */
	color: #4b5563;
	text-align: left; /* ตั้งเป็น left เพื่อให้เป็นค่าเริ่มต้น */
}

.job-table tbody tr:last-child td {
	border-bottom: none; /* No border for the last row */
}

.job-table tbody tr:hover {
	background-color: #fbfdff; /* Light hover effect for rows */
}

/* Column width adjustments for responsiveness */
.job-table .job-id {
	min-width: 60px; /* ลด min-width เพื่อให้ยืดหยุ่นมากขึ้น */
	text-align: center;
}
.job-table .job-position-col {
	min-width: 220px; /* ลด min-width เพื่อให้ยืดหยุ่นมากขึ้น */
}
.job-table .job-unit-col {
	min-width: 150px; /* ลด min-width เพื่อให้ยืดหยุ่นมากขึ้น */
}
.job-table .job-announced-date-col {
	min-width: 100px; /* ลด min-width เพื่อให้ยืดหยุ่นมากขึ้น */
	white-space: nowrap;
}
.job-table .job-icon {
	min-width: 50px; /* รักษาความกว้างขั้นต่ำ */
	text-align: center;
}
.job-table .job-action-col {
	min-width: 90px; /* ลด min-width เพื่อให้ยืดหยุ่นมากขึ้น */
	text-align: center;
}

/* Button in table */
.job-table .btn-apply {
	background-color: #F0008F; /* Primary pink */
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem; /* md rounded */
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.job-table .btn-apply:hover {
	background-color: #d10077; /* Darker pink on hover */
}
/* Ensure links in table don't get default underline unless intended */
.job-table a {
	text-decoration: none;
}
.job-table a:hover {
	text-decoration: underline; /* Add underline only on hover if desired */
}

/* Adjust specific column width for better display on larger screens */
@media (min-width: 1024px) { /* lg screens */
	.job-table thead th:nth-child(2) { /* รายละเอียดตำแหน่งงาน */
		width: 35%;
	}
	.job-table thead th:nth-child(3) { /* หน่วยงาน */
		width: 25%;
	}
	.job-table thead th:nth-child(4) { /* ประกาศเมื่อ */
		width: 15%;
	}
}

/* Hero Section Background Image Styling */
.hero-background-image {
	background-image: url('../images/icons/hiring.png'); /* รูปภาพพื้นหลังที่ถูกแก้ไข */
	background-size: cover; /* ครอบคลุมพื้นที่ */
	background-position: center bottom; /* จัดให้อยู่ตรงกลางแนวนอนและชิดด้านล่าง */
	background-repeat: no-repeat; /* ไม่ทำซ้ำ */
	background-attachment: fixed; /* ทำให้รูปภาพค้างอยู่กับที่ */
	/* เพิ่ม filter เพื่อเบลอและทำให้สีเข้มขึ้น */
	filter: brightness(60%) blur(3px); /* ปรับ brightness เพื่อให้เข้มขึ้น และ blur เพื่อเบลอ */
}

/* ปรับ Hero Section ให้ไม่มีสีพื้นหลังซ้อนทับภาพ */
#hero-section {
	background-color: transparent; /* ทำให้พื้นหลังของส่วน Hero Section โปร่งใส */
	overflow: hidden; /* ซ่อนส่วนเกินของรูปภาพ */
}

/* New styles for the language toggle button - always visible and floating */
.language-toggle-button {
	position: fixed;
	bottom: 1.5rem; /* 24px from bottom */
	right: 1.5rem; /* 24px from right */
	background-color: #F0008F; /* Primary pink */
	color: white;
	padding: 0; /* Remove padding as image will fill */
	border-radius: 9999px; /* rounded-full */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center; /* Center the image */
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
	z-index: 1000; /* Ensure it's above other content */
	text-decoration: none; /* Remove underline for anchor tag */
	width: 3rem; /* Fixed width for a round button */
	height: 3rem; /* Fixed height for a round button */
	overflow: hidden; /* Ensure image adheres to round shape */
}

.language-toggle-button img {
	width: 100%; /* Make image fill the button width */
	height: 100%; /* Make image fill the button height */
	object-fit: cover; /* Cover the area, cropping if necessary */
	border-radius: 9999px; /* Ensure image itself is circular */
}


.language-toggle-button:hover {
	background-color: #d10077; /* Darker pink on hover */
	transform: translateY(-2px); /* Slight lift effect */
}

/* Adjust navbar brand text size for mobile */
#top-bar .navbar-brand .nav-link-color {
	font-size: 1.125rem; /* text-lg */
}
@media (min-width: 768px) { /* md screens and up */
	#top-bar .navbar-brand .nav-link-color {
		font-size: 1.25rem; /* text-xl */
	}
}