.elementor-11 .elementor-element.elementor-element-7ca6c40{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-af7caf1 *//* ฟอนต์: ดึงจาก Elementor Site Settings → Global Fonts (Primary) อัตโนมัติ
   ถ้าเปลี่ยนฟอนต์ใน Site Settings ทีหลัง Header จะเปลี่ยนตามเอง (ถ้าไม่มีค่าจะสืบทอดจากหน้าเว็บ) */
.ufa-header,
.ufa-header .ufa-nav a,
.ufa-header .btn,
.ufa-header .ufa-burger{ font-family:var(--e-global-typography-primary-font-family, inherit); }

/* ทำให้เมนูลอยติดขอบบนจริงเวลานำไปใช้ */
#siteHeader{ position:sticky; top:12px; z-index:50; margin:12px; }

/* กรอบแก้ว (ไม่ใส่ overflow:hidden เพราะจะตัด dropdown เมนูย่อยบน Desktop) */
.ufa-header{
  position:relative;
  background:rgba(10,9,7,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(217,166,62,.25);
  border-radius:16px;
}
/* เส้นทองไล่แสงวิ่งใต้เมนู (ร่นซ้าย-ขวาให้พ้นมุมโค้ง) */
.ufa-header::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#d9a63e,transparent);
  background-size:200% 100%;
  animation:ufa-sheen 4s linear infinite;
}
@keyframes ufa-sheen{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* checkbox ซ่อนไว้ ทำหน้าที่เป็นสวิตช์เปิด/ปิดเมนู (ไม่ต้องใช้ JavaScript) */
.ufa-nav-toggle{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }

/* ===== Desktop (1201px ขึ้นไป): โลโก้ซ้าย | เมนูชิดขวา | เส้นคั่น | ปุ่ม 3 ปุ่ม ===== */
.ufa-header-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:14px 24px;
}

.ufa-logo{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; justify-self:start; }

/* โลโก้: ใส่ !important กันธีม/Elementor ทับด้วย img{height:auto} */
.logo-img{ height:34px !important; width:auto !important; display:block; object-fit:contain; }

/* จุดไฟ LIVE ข้างโลโก้ */
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#5fb37a; flex-shrink:0;
  animation:ufa-pulse 1.8s infinite;
}
@keyframes ufa-pulse{
  0%{box-shadow:0 0 0 0 rgba(95,179,122,.55);}
  70%{box-shadow:0 0 0 8px rgba(95,179,122,0);}
  100%{box-shadow:0 0 0 0 rgba(95,179,122,0);}
}

/* ปุ่มแฮมเบอร์เกอร์: ซ่อนบน Desktop */
.ufa-burger{ display:none; }

/* เมนูหลัก: แต่ละรายการอยู่ใน .ufa-item (ทั้งแบบเขียนเองและแบบ shortcode ดึงจากหลังบ้าน)
   ใช้ .ufa-header นำหน้าเพื่อให้ specificity สูงกว่าสีลิงก์ของธีม (กันลิงก์กลายเป็นสีน้ำเงิน) */
.ufa-nav{ display:flex; align-items:center; gap:18px; justify-self:end; }
.ufa-nav .ufa-item{ position:relative; }
.ufa-header .ufa-nav a,
.ufa-header .ufa-nav a:visited{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  text-decoration:none; color:#d6cbb3;
  font-size:14px; font-weight:500; padding:6px 0; white-space:nowrap;
  transition:color .2s;
}
/* ขีดทองเลื่อนเข้าใต้เมนูหลักตอน hover / หน้าปัจจุบัน (is-active มาจาก shortcode อัตโนมัติ) */
.ufa-header .ufa-nav > .ufa-item > a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:#f4c860; transform:scaleX(0); transform-origin:right;
  transition:transform .25s ease;
}
.ufa-header .ufa-nav a:hover{ color:#f4c860; }
.ufa-header .ufa-nav a.is-active{ color:#f4c860; }
.ufa-header .ufa-nav > .ufa-item:hover > a::after,
.ufa-header .ufa-nav > .ufa-item > a.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ลูกศรเล็กท้ายชื่อเมนูที่มีเมนูย่อย */
.ufa-caret{
  width:6px; height:6px; margin-top:-3px; opacity:.7;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
/* สวิตช์กางเมนูย่อย (checkbox + ปุ่ม label) ใช้เฉพาะ Tablet/Mobile — บน Desktop ซ่อนไว้ ใช้ชี้เมาส์แทน */
.ufa-sub-toggle{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.ufa-sub-btn{ display:none; }

/* เมนูย่อย (Desktop): dropdown ใต้เมนูหลัก โผล่ตอนชี้เมาส์หรือโฟกัสด้วยคีย์บอร์ด */
.ufa-sub{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:20px; padding:8px; min-width:200px; z-index:60; /* 20px = ระยะ padding ล่างของแถบ + ช่องว่างเล็กน้อย ให้ dropdown ลอยใต้แถบพอดี */
  flex-direction:column;
  background:rgba(14,12,9,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(217,166,62,.3); border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
}
/* สะพานโปร่งใสปิดช่องว่างระหว่างเมนูหลักกับ dropdown ไม่ให้หุบตอนลากเมาส์ลง */
.ufa-sub::before{ content:""; position:absolute; left:0; right:0; top:-22px; height:22px; }
.ufa-item.has-sub:hover > .ufa-sub,
.ufa-item.has-sub:focus-within > .ufa-sub{ display:flex; animation:ufa-subin .18s ease; }
@keyframes ufa-subin{ from{ opacity:0; transform:translateX(-50%) translateY(-4px); } to{ opacity:1; transform:translateX(-50%); } }
.ufa-header .ufa-sub a{ display:flex; padding:9px 12px; border-radius:8px; font-size:13.5px; }
.ufa-header .ufa-sub a:hover,
.ufa-header .ufa-sub a.is-active{ background:rgba(217,166,62,.12); color:#f4c860; }

/* ปุ่ม 3 ปุ่มฝั่งขวาสุด มีเส้นทองจาง ๆ คั่นระหว่างเมนูกับปุ่ม */
.ufa-header-actions{
  display:flex; align-items:center; gap:10px; justify-self:end;
  padding-left:22px; border-left:1px solid rgba(217,166,62,.22);
}

/* ปุ่มพื้นฐาน: ทุกปุ่มต้องพ่วง class "btn" */
.ufa-header .btn,
.ufa-header .btn:visited{
  font-size:13.5px; font-weight:600;
  padding:10px 14px; border-radius:8px;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.ufa-header .btn-ghost,
.ufa-header .btn-ghost:visited{ color:#f3ecdd; border-color:rgba(217,166,62,.55); background:transparent; }
.ufa-header .btn-ghost:hover{ background:rgba(217,166,62,.1); color:#f4c860; }

/* ปุ่มสมัครสมาชิก: ทองไล่เฉด + แสงวิ่งผ่านตอน hover */
.ufa-header .btn-gold,
.ufa-header .btn-gold:visited{
  position:relative; overflow:hidden; color:#231a08;
  background:linear-gradient(135deg,#d9a63e,#f4c860);
  box-shadow:0 8px 20px -8px rgba(217,166,62,.6);
}
.ufa-header .btn-gold::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
}
.ufa-header .btn-gold:hover{ transform:translateY(-1px); color:#231a08; }
.ufa-header .btn-gold:hover::before{ animation:ufa-shine .9s ease forwards; }
@keyframes ufa-shine{ to{ left:130%; } }

/* ปุ่มติดต่อทีมงาน: โทนเขียว LINE */
.ufa-header .btn-line,
.ufa-header .btn-line:visited{ color:#eafff1; background:linear-gradient(135deg,#06c755,#03a648); }
.ufa-header .btn-line:hover{ transform:translateY(-1px); color:#ffffff; }

/* ===== Tablet (768–1200px): โลโก้ซ้าย + แฮมเบอร์เกอร์ขวา / กดเปิด → เมนูกางลงมา ดันปุ่ม 3 ปุ่มลง
   (เมนู 6 อัน + ปุ่ม 3 ปุ่ม ไม่พอในแถวเดียวบนจอ 1025–1200px จึงใช้แฮมเบอร์เกอร์ตั้งแต่ 1200px) ===== */
@media (max-width:1200px){
  .ufa-header-row{
    grid-template-columns:1fr auto;
    gap:12px 16px;
    padding:12px 18px 14px;
  }

  /* ปุ่มแฮมเบอร์เกอร์ (label ผูกกับ checkbox) */
  .ufa-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:38px; padding:0 10px; box-sizing:border-box;
    border:1px solid rgba(217,166,62,.35); border-radius:8px;
    cursor:pointer; justify-self:end; margin:0;
  }
  .ufa-burger span{
    display:block; width:100%; height:2px; background:#f4c860; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .ufa-burger:hover{ border-color:rgba(217,166,62,.7); }

  /* เมนูหลัก: ซ่อนไว้จนกว่าจะกดเปิด แล้วเรียงเป็นแถวลงมา */
  .ufa-nav{
    display:none; grid-column:1 / -1; justify-self:stretch;
    flex-direction:column; align-items:stretch; gap:0;
    border-top:1px solid rgba(217,166,62,.15); padding-top:4px;
  }
  .ufa-nav .ufa-item{ position:static; }
  .ufa-header .ufa-nav > .ufa-item > a{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 4px; font-size:15px;
    border-bottom:1px solid rgba(217,166,62,.12);
  }
  .ufa-header .ufa-nav > .ufa-item:last-child > a{ border-bottom:none; }
  /* เปลี่ยนขีดใต้เมนู (desktop) เป็นลูกศร › ท้ายบรรทัด */
  .ufa-header .ufa-nav > .ufa-item > a::after{
    content:"›"; position:static; width:auto; height:auto; background:none;
    transform:none; color:#d9a63e; font-size:18px; line-height:1; opacity:.7;
  }
  .ufa-header .ufa-nav > .ufa-item:hover > a::after{ transform:none; opacity:1; }
  .ufa-caret{ display:none; }

  /* รายการที่มีเมนูย่อย: ชื่อเมนู (กดเข้าหน้าได้ปกติ) | ปุ่มลูกศรกาง/หุบ ท้ายแถว */
  .ufa-nav > .ufa-item.has-sub{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    border-bottom:1px solid rgba(217,166,62,.12);
  }
  .ufa-nav > .ufa-item.has-sub:last-child{ border-bottom:none; }
  .ufa-header .ufa-nav > .ufa-item.has-sub > a{ border-bottom:none; }
  .ufa-header .ufa-nav > .ufa-item.has-sub > a::after{ content:none; }
  .ufa-sub-btn{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:40px; margin-left:6px; cursor:pointer;
    border:1px solid rgba(217,166,62,.25); border-radius:8px;
  }
  .ufa-sub-btn::before{
    content:""; width:7px; height:7px; margin-top:-3px;
    border-right:1.5px solid #f4c860; border-bottom:1.5px solid #f4c860;
    transform:rotate(45deg); transition:transform .2s;
  }
  .ufa-item.has-sub > .ufa-sub-toggle:checked ~ .ufa-sub-btn{ border-color:rgba(217,166,62,.6); }
  .ufa-item.has-sub > .ufa-sub-toggle:checked ~ .ufa-sub-btn::before{ transform:rotate(-135deg); margin-top:3px; }

  /* เมนูย่อย: หุบไว้ก่อน กดปุ่มลูกศรถึงกาง (เยื้องขวา มีขีด – นำหน้า) */
  .ufa-sub{
    display:none; grid-column:1 / -1; position:static; transform:none; margin:0; padding:0 0 6px 16px; min-width:0;
    background:transparent; border:none; border-radius:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .ufa-sub::before{ display:none; }
  /* ปิดกฎ hover ของ Desktop (จอสัมผัส hover ค้าง) ให้เปิดได้จากปุ่มเท่านั้น */
  .ufa-item.has-sub:hover > .ufa-sub,
  .ufa-item.has-sub:focus-within > .ufa-sub{ display:none; animation:none; }
  .ufa-item.has-sub > .ufa-sub-toggle:checked ~ .ufa-sub{ display:flex; animation:ufa-navin .2s ease; }
  .ufa-header .ufa-sub a{
    padding:9px 4px; border-radius:0; font-size:14px; color:#b9ad95; white-space:normal;
    border-bottom:1px dashed rgba(217,166,62,.12);
  }
  .ufa-header .ufa-sub a::before{ content:"–"; color:#d9a63e; margin-right:8px; }
  .ufa-header .ufa-sub a:hover,
  .ufa-header .ufa-sub a.is-active{ background:none; color:#f4c860; }
  .ufa-header .ufa-sub .ufa-item:last-child > a{ border-bottom:none; }

  /* กดเปิด → โชว์เมนู (ปุ่ม 3 ปุ่มด้านล่างจะถูกดันลงอัตโนมัติ) */
  .ufa-nav-toggle:checked ~ .ufa-header-row .ufa-nav{ display:flex; animation:ufa-navin .22s ease; }
  @keyframes ufa-navin{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

  /* แฮมเบอร์เกอร์ → กากบาท ตอนเปิด */
  .ufa-nav-toggle:checked ~ .ufa-header-row .ufa-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .ufa-nav-toggle:checked ~ .ufa-header-row .ufa-burger span:nth-child(2){ opacity:0; }
  .ufa-nav-toggle:checked ~ .ufa-header-row .ufa-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ปุ่ม 3 ปุ่ม เต็มแถวล่าง โชว์ตลอด */
  .ufa-header-actions{
    grid-column:1 / -1; justify-self:stretch;
    padding-left:0; border-left:none;
    padding-top:12px; border-top:1px solid rgba(217,166,62,.15);
  }
  .ufa-header-actions .btn{ flex:1; }
  .logo-img{ height:30px !important; }
}

/* ===== Mobile (ไม่เกิน 767px): เหมือน Tablet แต่ย่อระยะให้พอดีจอ ===== */
@media (max-width:767px){
  #siteHeader{ margin:8px; top:8px; }
  .ufa-header-row{ gap:10px 12px; padding:10px 14px 12px; }
  .ufa-header .ufa-nav > .ufa-item > a{ font-size:14px; padding:11px 4px; }
  .ufa-header .ufa-sub a{ font-size:13.5px; padding:8px 4px; }
  .ufa-sub-btn{ width:40px; height:36px; }
  .ufa-header-actions{ gap:8px; padding-top:10px; }
  .ufa-header-actions .btn{ padding:10px 8px; font-size:12.5px; }
  .logo-img{ height:26px !important; }
}/* End custom CSS */