#section_header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px; /* ความสูงของแถบเมนู */
  background: url(../img/menu_bar_bg.jpg) no-repeat; /* ควรเป็นรูปพื้นหลังที่ใช้จริงจากภาพตัวอย่าง */
  background-size: cover;
  background-position: center;
  z-index: 1000;
  display: flex; /* ใช้ flexbox จัดวาง content-wrapper */
  align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
  justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
}

.header .content-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* ปรับขนาดความกว้างตามที่ต้องการ */
  padding: 0 20px; /* เพิ่ม padding ด้านข้าง */
  justify-content: space-between; /* กระจาย logo, navigation, และ login/register */
}

.header .logo img {
  height: 150px; /* ปรับขนาดโลโก้ตามต้องการจากรูปตัวอย่าง */
  width: auto;
  display: block; /* แก้ไขปัญหาพื้นที่ว่างใต้รูปภาพ */
  margin-right: 50px; /* เพิ่มระยะห่างด้านขวาของโลโก้ */
  transform: translateY(35px);
}

.header .navigation {
  flex-grow: 1; /* ให้ nav ขยายตัวเพื่อเติมพื้นที่ว่าง */
  display: flex;
  justify-content: flex-start; /* จัดเมนูให้ชิดซ้ายภายใน nav */
  align-items: center;
}

.header .navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.header .navigation li {
  margin-right: 30px; /* ระยะห่างระหว่างเมนู */
}

.header .navigation a {
  color: #ffffff; /* สีข้อความเมนูเริ่มต้นเป็นสีขาว */
  text-decoration: none;
  font-size: 20px; /* ปรับขนาด font ตามรูปตัวอย่าง */
  font-weight: bold; /* เพิ่มความหนาของ font */
  transition: color 0.3s ease;
  white-space: nowrap;
}

.header .navigation a:hover {
  color: #f4dc82; /* สีข้อความเมนูเมื่อ hover */
}

/* สไตล์สำหรับปุ่ม "เติมเงิน" */
.header .navigation li.topup-button a {
  background: url(../img/menu_bar_topup.webp) no-repeat center center; /* ใช้รูปภาพเป็นพื้นหลังปุ่ม */
  background-size: contain; /* ให้รูปภาพพอดีกับปุ่ม */
  width: 200px; /* ความกว้างของปุ่มตามที่ระบุ */
  height: 75px; /* ความสูงของปุ่มตามที่ระบุ */
  display: flex; /* ใช้ flexbox จัดข้อความภายในปุ่ม */
  align-items: center;
  justify-content: center;
  color: #5d3d0b; /* สีข้อความในปุ่ม (อาจต้องปรับตามรูป) */
  font-size: 24px; /* ขนาด font สำหรับข้อความในปุ่ม */
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); /* เพิ่มเงาข้อความเล็กน้อย */
  padding: 0; /* ลบ padding เดิมออก */
}

.header .navigation li.topup-button a:hover {
  color: #7a510e; /* สีข้อความในปุ่มเมื่อ hover (ปรับตามความเหมาะสม) */
  /* อาจจะเพิ่ม filter: brightness(1.1); หรือ background-position เพื่อให้ดูมีชีวิตชีวาขึ้น */
}

/* สไตล์สำหรับ LOGIN | Register */
.header .auth-links {
  margin-left: auto; /* ดันไปทางขวาให้มากที่สุด */
  display: flex;
  align-items: center;
}

.header .auth-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px; /* ปรับขนาด font ให้เท่ากับเมนูหลัก */
  font-weight: bold;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.header .auth-links a:hover {
  color: #f4dc82;
}

.header .auth-links span.separator {
  color: #ffffff;
  margin: 0 10px; /* ระยะห่างของ | */
  font-size: 20px;
}

.mobile .header .logo {
  width: 100%;
  text-align: center;
}

.mobile .header .logo img {
  height: 100px;
  transform: translateY(20px);
  margin: 0 auto;
}

.mobile .header .navigation {
  display: none; /* ซ่อน navigation บนมือถือ */
}