/* ซ่อนปุ่มค้นหาจาก JS เฉพาะบนเดสก์ท็อป */
@media (min-width: 769px){
  .pbnc-search-toggle{
    display: none !important;
  }
}

/*
 * pbnc-header-home-mobile v4.7.css (แก้จากไฟล์ 777)
 */

@media (max-width: 768px){

  .header-block-1{
    position: relative;
    z-index: 99999;
  }

  .header-block-1 .entry-content{
    position: relative;
    padding-top: 70px;
  }

  .header-block-1 .wp-block-group.is-horizontal.is-content-justification-space-between{
    position: relative;
    display: flex;
    align-items: center;
  }

  .header-block-1 .wp-block-site-logo{
    position: absolute;
    left: 65%;
    top: -90px;
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;
  }

  .header-block-1 .wp-block-site-logo img{
    height: 60px !important;
    width: auto !important;
  }

  .header-block-1 form.is-search-form{
    position: absolute;
    right: 30px;
    top: -20px;
    max-width: 260px;
    width: 80%;
    z-index: 50;
    margin: 0;
    display: none;
  }

  .header-block-1 form.is-search-form.pbnc-show-search{
    display: block !important;
  }

  .header-block-1 form.is-search-form label{
    display: block;
    width: 100%;
  }

  .header-block-1 form.is-search-form .is-search-input{
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 36px 8px 10px;
    border-radius: 6px;
    background: #fff;
    color: #000;
  }

  .header-block-1 form.is-search-form .is-search-submit{
    position: absolute;
    right: -87px;
    top: 18px;
    transform: translateY(-50%);
    width: 36px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  /* ปุ่มแว่นบนมือถือ (บังคับให้แสดง) */
  .pbnc-search-toggle{
    display: block !important;
    position: absolute;
    right: 20px;
    top: 0px;
    font-size: 24px;
    color: #ffffff;
    z-index: 10000;
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
  }

  .header-block-1 nav.wp-block-navigation{
    position: absolute;
    left: -40px;
    top: 0px;
    z-index: 30;
  }

  .header-block-1 nav.wp-block-navigation .wp-block-navigation__responsive-container-open{
    padding: 4px;
    position: relative;
  }

  .header-block-1 nav.wp-block-navigation .wp-block-navigation__responsive-container,
  .header-block-1 nav.wp-block-navigation .wp-block-navigation__responsive-close{
    display: none !important;
  }

  .header-block-1 nav.wp-block-navigation .pbnc-mobile-menu{
    position: absolute;
    left: 100%;
    top: 48px;
    transform: translateX(-50%);
    width: 220px;

    /* การ์ดพื้นหลังเมนู */
    background: #000000e3;           /* เทาอ่อน ถ้าอยากขาวสนิทใช้ #ffffff */
    border-radius: 12px;           /* มุมโค้งของการ์ด */
    padding: 10px 8px;             /* เพิ่มเนื้อที่รอบป้ายฟ้า */
    box-shadow: 0 6px 18px rgba(0,0,0,.35);  /* เงาเบา ๆ ให้ดูเป็นการ์ดลอย */

    z-index: 9999;
    display: none;                 /* JS จะสลับเป็น block ตอนกดปุ่มขีด */
}


  .header-block-1 nav.wp-block-navigation .pbnc-mobile-menu__list{
      list-style: none;
      margin: 0;
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .header-block-1 nav.wp-block-navigation .pbnc-mobile-menu__item{
      display: block;
  }

  .header-block-1 nav.wp-block-navigation .pbnc-mobile-menu__link{
      display: block;
      padding: 4px 6px;
      border-radius: 999px;
      background: #2196f3;
      color: #fff !important;
      font-size: 8px;
      text-align: center;
      text-decoration: none;
  }

  .header-block-1 nav.wp-block-navigation.pbnc-menu-open .wp-block-navigation__responsive-container-open svg{
      opacity: 0;
  }

  .header-block-1 nav.wp-block-navigation.pbnc-menu-open .wp-block-navigation__responsive-container-open::before{
      content: "✕";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #ffffff;
      line-height: 1;
  }

}
