/* Custom CSS สำหรับคลื่นและการปรับแต่งเพิ่มเติม */
body {
	font-family: 'Prompt', sans-serif;
	background-color: #f8fafc; /* พื้นหลังสีเทาอ่อน */
}

/* สไตล์สำหรับเอฟเฟกต์คลื่นแบบกำหนดเอง */
.wave-container {
	position: absolute;
	bottom: 0; /* วางตำแหน่งที่ด้านล่างของส่วน hero */
	left: 0;
	width: 100%; /* กว้างเต็มพื้นที่ */
	height: 100%; /* สูงเต็มพื้นที่ของส่วนแม่ */
	overflow: hidden; /* ซ่อนสิ่งที่อยู่นอกคอนเทนเนอร์ */
	z-index: 0; /* ตรวจสอบให้แน่ใจว่าคลื่นอยู่ด้านหลังข้อความ */
}
.wave {
	position: absolute;
	bottom: 0; /* ติดอยู่กับด้านล่างของคอนเทนเนอร์ */
	left: 0;
	width: 100%; /* กว้างเต็มพื้นที่ */
	height: 100%; /* สูงเต็มพื้นที่ของคอนเทนเนอร์คลื่น */
	background-repeat: no-repeat; /* ไม่ทำซ้ำ SVG */
	background-size: 100% 100%; /* ยืด SVG ให้ครอบคลุมความกว้างและความสูง 100% */
	/* ไม่มีการเคลื่อนไหวสำหรับคลื่นคงที่เหล่านี้ */
}

/* พาธ SVG เฉพาะสำหรับคลื่นแบบเลเยอร์ */
.wave:nth-child(1) {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFE4E1" fill-opacity="1" d="M0,96L60,101.3C120,107,240,117,360,117.3C480,117,600,107,720,106.7C840,107,960,117,1080,112C1200,107,1320,85,1380,74.7L1440,64L1440,150L1380,150C1320,150,1200,150,1080,150C960,150,840,150,720,150C600,150,480,150,360,150C240,150,120,150,60,150L0,150Z"></path></svg>'); /* คลื่นสีชมพูอ่อนที่สุด */
	opacity: 0.7;
	transform: translateY(0%); /* ปรับเพื่อเลื่อนขึ้น/ลงได้ตามต้องการ */
}
.wave:nth-child(2) {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFB6C1" fill-opacity="1" d="M0,64L60,74.7C120,85,240,107,360,112C480,117,600,107,720,96C840,85,960,75,1080,74.7C1200,75,1320,85,1380,90.7L1440,96L1440,150L1380,150C1320,150,1200,150,1080,150C960,150,840,150,720,150C600,150,480,150,360,150C240,150,120,150,60,150L0,150Z"></path></svg>'); /* คลื่นสีชมพูกลาง */
	opacity: 0.5;
	transform: translateY(5%); /* เลเยอร์ที่สูงขึ้นเล็กน้อย */
}
.wave:nth-child(3) {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg"><path fill="%23FF69B4" fill-opacity="1" d="M0,32L60,42.7C120,53,240,75,360,85.3C480,96,600,96,720,85.3C840,75,960,53,1080,42.7C1200,32,1320,32,1380,32L1440,32L1440,150L1380,150C1320,150,1200,150,1080,150C960,150,840,150,720,150C600,150,480,150,360,150C240,150,120,150,60,150L0,150Z"></path></svg>'); /* คลื่นสีชมพูเข้มที่สุด */
	opacity: 0.3;
	transform: translateY(10%); /* เลเยอร์ที่สูงที่สุด */
}


/* ปรับ padding ของ header เพื่อให้เข้ากับคลื่น */
#top-bar {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: white; /* ตรวจสอบให้แน่ใจว่าพื้นหลัง header เป็นสีทึบ */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* เงาด้านล่างของ header */
}

/* สไตล์เฉพาะของการ์ดงาน เพื่อให้มีความสูงและการล้นที่เหมาะสม */
.job-card {
	min-height: auto ; /* กำหนดความสูงขั้นต่ำของการ์ด */
	max-height: auto ; /* ป้องกันไม่ให้การ์ดสูงเกินไป */
}
.job-detail-content {
	flex-grow: 1; /* ทำให้เนื้อหางานขยายเต็มพื้นที่ */
	overflow-y: auto; /* เปิดใช้งานการเลื่อนสำหรับรายละเอียดงานหากเนื้อหาล้น */
	-webkit-overflow-scrolling: touch; /* การเลื่อนที่ราบรื่นบน iOS */
}

.job-detail-content::-webkit-scrollbar-thumb {
	background-color: #cbd5e1; /* สีของ thumb scrollbar */
	border-radius: 4px; /* มุมโค้งมนของ thumb */
}
.job-detail-content::-webkit-scrollbar-track {
	background-color: #f1f5f9; /* สีของ track scrollbar */
}

/* การปรับแต่งแบบ Responsive สำหรับ header และ nav */
@media (max-width: 768px) {
	#top-bar .navbar-brand {
		margin-left: 15px; /* ระยะห่างซ้ายสำหรับโลโก้บนมือถือ */
	}
	#top-bar .navbar-collapse {
		border-top: 1px solid rgba(0,0,0,0.1); /* ขอบบนของเมนูมือถือ */
		background-color: white; /* พื้นหลังเมนูมือถือ */
	}
	#top-bar .main-menu .navbar-nav > li > a {
		padding: 10px 15px; /* padding ของรายการเมนูมือถือ */
	}
}