/* ===== 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 { 
    width: 100%;
    box-sizing: border-box;
    margin: 0px 0px;
    padding: 0px 5%;
    display: flex;
    flex-direction: column;
    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{
  width: 100%;
  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}
}

    .wrap-nav{
        width: 100%;
        max-width: none;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 8px;
    }
    .wrap-header{
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 8px;
    }
    .section-head{ padding-top: 0px; }


    /**************BreadCrumb*/

  .container-breadcrumb{
   flex-flow: wrap;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   max-width: 1400px;
   margin-top: 8px;
   display: flex;  
    }

    .breadcrumbs {
      justify-content: flex-start;
      align-items: center;
      display: flex;
    }

    .breadcrumb-primary {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
      color: #95a0b2;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 10px;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      text-decoration: none;
      transition: color .3s;
      display: inline-flex;
    }

    .breadcrumb-primary:hover {
      color: #000;
    }

    .breadcrumb-primary.w--current {
      color: #8e38f0;
    }

    .breadcrumb-icon {
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      margin-left: -4px;
      display: flex;
    }

    .breadcrumb-chevron {
      color: #95a0b2;
    }


    .breadcrumb-link {
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      color: #333;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 10px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      transition: color .3s;
      display: inline-flex;
    }

    .breadcrumb-link:hover {
      color: #000;
    }

    .breadcrumb-link.w--current {
      color: #8e38f0;
    }

    .breadcrumb-link.icon-left {
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      padding-left: 0;
    }


/*********************/
   
    /****SearchBox*************/
  .text-field-wrapper {
  flex-direction: column;
  align-items: flex-start;
  }
  .text-field-double-icon-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}

.text-field-double-icon {
  color: #303030;
  border: 1px solid silver;
  border-radius: 8px;
  width: 100%;
  max-width: 300px;
  min-height: 24px;
  margin-bottom: 0;
  padding: 12px 40px 12px 12px;
  font-size: 14px;
  transition: all .25s;
}

.text-field-double-icon::placeholder {
  color: #b6b9ce;
}

.field-icons {
  color: #303030;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: absolute;
  inset: auto 16px auto auto ;
}


  .wrap-header {
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 2.25fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    place-items: flex-start end;
    width: 100%;
    max-width: 1400px;
    display: grid;
  }

    /* .wrap-search {
      align-items: center;
      display: flex;
      position: relative;
    } */

    .search-box-header {
    color: #303030;
    border: 1px solid silver;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    min-height: 24px;
    margin-bottom: 0;
    padding: 12px 40px 12px 12px;
    font-size: 14px;
    transition: all .25s;
    }
    .search-input-header {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    }
    .search-icon-header{
    color: #b7b7b7;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: flex;
    position: absolute;
    inset: 10px 16px auto auto;
    }
    .w-embed:before,
    .w-embed:after {
      content: " ";
      display: table;
      grid-column-start: 1;
      grid-row-start: 1;
      grid-column-end: 2;
      grid-row-end: 2;
    }
    .w-embed:after {
      clear: both;
    }
    .form-search {
      width: 280px;
      margin-bottom: 0;
    }
    .form{
      width: 100%;
    }
    /*************************************/
 
    @media screen and (max-width: 991px) {
      .text-field-double-icon {
        max-width: 100%;
      }

      .wrap-header{
          flex-flow: wrap;
          grid-template-rows: auto auto;
          grid-template-columns: 1fr;
          grid-auto-flow: column;
          max-width: 100%;
   
      }
       .search-box-header {
          max-width: 100%;
        }
          .form-search {
            width: 100%;
       }
    }
    @media screen and (min-width: 1401px) {
        .wrap-header{
            
        }
    }