/* ===== Base ===== */
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{text-decoration:none;color:inherit}

/* ===== Header Bar ===== */
.hamb_container { 
  margin: 0 auto;
  padding: 0 24px;  /* กันชิดขอบจอ */
  box-sizing: border-box;
  background-color: #ffffff;
}
.hamb_header{
  height:65px; 
  display:flex; 
  align-items:center;
  justify-content:space-between; 
  gap:12px;
  padding:0 16px; 
  background:#fff; 
  border-bottom:1px solid #eee;
  position:relative; /* สำหรับเมนูกลางแบบ absolute */
  margin-bottom: 8px;
}

/* โลโก้ซ้าย */
.hamb_logo{
  display:flex; 
  align-items:center; 
  gap:10px;
  font-family: Red Hat Display;
  font-weight: 900;
  font-size: 26px;
  Letter-spacing: -0.7px
}
.hamb_logo img{height:34px; width:auto; display:block}
.hamb_logo_text{font-weight:700; color:#111; font-size:18px}

/* ปุ่ม Hamburger (มือถือเท่านั้น) */
.hamb_btn{width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.hamb_btn span{width:22px;height:2px;background:#222;position:relative;transition:.3s}
.hamb_btn span::before,.hamb_btn span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#222;transition:.3s
}
.hamb_btn span::before{top:-7px}
.hamb_btn span::after{top:7px}

/* ===== เมนูเดสก์ท็อป (กึ่งกลางจริง) ===== */
.hamb_menu_desktop {

    font-weight: 500;
    display: flex;
    gap: 32px;
    align-items: center;
    white-space: nowrap;
    position: relative; /* ไม่ให้ absolute */
    transform: none; /* ยกเลิก translate */
    left: auto;
    top: auto;
}
.hamb_menu_desktop a{color:#2b2b2b; font-size:16px}
.hamb_menu_desktop a:hover{color:#FF6933;}

/* ปุ่มเข้าสู่ระบบชิดขวา */
.hamb_login_btn{
  padding:10px 16px; border:1px solid #111; border-radius:10px;
  background:#fff; color:#111; font-weight:600; cursor:pointer;
}
.hamb_login_btn:hover{background:#111;color:#fff}

/* ===== Overlay + Drawer (มือถือ) ===== */
.hamb_overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:99}
.hamb_overlay.hamb_show{opacity:1;pointer-events:auto}

.hamb_menu{position:fixed;top:0;right:0;height:100%;width:300px;max-width:90%;
  background:#fff; box-shadow:-2px 0 10px rgba(0,0,0,.15);
  transform:translateX(100%); transition:transform .28s ease; z-index:100; display:flex; flex-direction:column}
.hamb_menu.hamb_show{transform:translateX(0)}
.hamb_menu_head{position:relative;padding:14px 44px 14px 16px;border-bottom:1px solid #eee}
.hamb_close{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.hamb_close svg{width:22px;height:22px}

.hamb_list{list-style:none;margin:0;padding:0}
.hamb_item{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 16px;border-bottom:1px dashed #d7d7d7;color:#222}
.hamb_item:hover{background:#f9f9f9}
.hamb_left{display:flex;align-items:center;gap:10px}
.hamb_ic{width:22px;height:22px;display:grid;place-items:center;color:#666;flex:0 0 auto}
.hamb_ic--blue{color:#1a73e8}
.hamb_login{color:#1a73e8;font-weight:600}

/* ทำระยะซ้าย-ขวาให้เท่ากับ job list (อิง 1400px) */
.hamb_container {
  width: 100%;
  box-sizing: border-box;
  margin:0px 0px;
  padding:0px 5%
}
.hamb_header{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding:0px;
}

/* ===== Responsive ===== */
@media (min-width:1201px){
  /* Desktop: ซ่อน hamburger / แสดงเมนู + ปุ่ม login ขวา */
  .hamb_btn{display:none}
  .hamb_menu_desktop{display:flex}
  .hamb_login_btn{display:inline-block}
}
@media (max-width:1200px){
  /* Mobile: ซ่อนเมนูเดสก์ท็อป + ปุ่ม login ขวา, ใช้ hamburger แทน */
  .hamb_menu_desktop{display:none}
  .hamb_login_btn{display:none}
}