.tb4-live-extra-section {
  background: linear-gradient(180deg, rgba(232,245,238,.45), rgba(255,255,255,0));
}
.tb4-live-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.tb4-live-extra-card {
  background: #fff;
  border: 1px solid rgba(30,107,69,.16);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
}
.tb4-live-extra-card--highlight {
  background: linear-gradient(135deg, #e8f5ee, #fff);
  border-color: rgba(30,107,69,.28);
}
.tb4-live-extra-kicker {
  display: inline-flex;
  border-radius: 999px;
  background: #e8f5ee;
  color: #1e6b45;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 10px;
}
.tb4-live-extra-card h2 {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: #0f172a;
}
.tb4-live-extra-card p {
  color: #475569;
  font-size: 16px;
  line-height: 1.75;
}


/* =============================================
   v1.8.3 Gutenberg Frontend Instant Editor + Save Persistence + Frontend Gutenberg Toolbox + Compact Live Icons + Media Color QC + Deep Editable Coverage + Target Color Designer + Document Layout Standard + Always Editable Unlocked Live Mode + Header Popup Lock
   เป้าหมาย:
   - เปิด Gutenberg จากหน้าเว็บได้ทันทีใน overlay/drawer เดียวกับหน้าเว็บ
   - Popup ทุกตัวชิดใต้ส่วนหัวจริง ไม่ลอยลงกลางหน้า
   - ไม่ดัดแปลง WordPress Admin Bar ต้นทาง
   ============================================= */
body.tb4-live-gutenberg-open {
  overflow: hidden !important;
}

.tb4-gutenberg-frame-shell {
  position: fixed !important;
  inset: var(--tb4-gutenberg-frame-top, 32px) 0 0 0 !important;
  z-index: 2147483400 !important;
  background: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

.tb4-gutenberg-frame-panel {
  width: min(1180px, 100%) !important;
  height: 100% !important;
  background: #fff !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .30) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  display: flex !important;
  flex-direction: column !important;
}

.tb4-gutenberg-frame-head {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #0f172a, #1e6b45) !important;
  color: #fff !important;
}

.tb4-gutenberg-frame-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 800 14px/1.2 var(--font-main, system-ui) !important;
  min-width: 0 !important;
}

.tb4-gutenberg-frame-title small {
  display: block !important;
  color: rgba(255,255,255,.76) !important;
  font: 600 11px/1.4 var(--font-main, system-ui) !important;
  margin-top: 2px !important;
}

.tb4-gutenberg-frame-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.tb4-gutenberg-frame-actions a,
.tb4-gutenberg-frame-actions button,
.tb4-gutenberg-instant-btn {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font: 800 12px/1 var(--font-main, system-ui) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.tb4-gutenberg-frame-actions a:hover,
.tb4-gutenberg-frame-actions button:hover,
.tb4-gutenberg-instant-btn:hover {
  background: rgba(255,255,255,.24) !important;
}

.tb4-gutenberg-frame-iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #fff !important;
  flex: 1 1 auto !important;
}

.tb4-gutenberg-instant-btn {
  background: #1e6b45 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(30,107,69,.22) !important;
}

.tb4-live-toolbar .tb4-gutenberg-instant-btn {
  background: #1e6b45 !important;
  color: #fff !important;
}

body.thinkb4do-theme .tb4-notification-panel.is-open,
body.thinkb4do-theme #userMenuDropdown.is-open,
body.thinkb4do-theme #searchResults:not([hidden]) {
  position: fixed !important;
  top: var(--tb4-header-popup-lock-top, var(--tb4-popup-top, 88px)) !important;
  margin-top: 0 !important;
  transform: none !important;
  z-index: 100090 !important;
  max-height: calc(100vh - var(--tb4-header-popup-lock-top, 88px) - 8px) !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.thinkb4do-theme #searchResults:not([hidden]) {
  left: var(--tb4-search-popup-left, 50%) !important;
  width: var(--tb4-search-popup-width, min(580px, calc(100vw - 24px))) !important;
  right: auto !important;
}

body.thinkb4do-theme .tb4-notification-panel.is-open,
body.thinkb4do-theme #userMenuDropdown.is-open {
  right: var(--tb4-popup-right, clamp(10px, 2vw, 28px)) !important;
  left: auto !important;
}

body.thinkb4do-theme #mobileMenuOverlay.is-open,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open {
  position: fixed !important;
  top: var(--tb4-header-popup-lock-top, var(--tb4-mobile-menu-top, 88px)) !important;
  inset: var(--tb4-header-popup-lock-top, var(--tb4-mobile-menu-top, 88px)) 0 0 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 782px) {
  .tb4-gutenberg-frame-shell {
    padding: 8px !important;
  }
  .tb4-gutenberg-frame-panel {
    border-radius: 18px !important;
    width: 100% !important;
  }
  .tb4-gutenberg-frame-head {
    min-height: 50px !important;
    padding: 8px 10px !important;
  }
  .tb4-gutenberg-frame-title small {
    display: none !important;
  }
  .tb4-gutenberg-frame-actions a,
  .tb4-gutenberg-frame-actions button {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
  body.thinkb4do-theme .tb4-notification-panel.is-open,
  body.thinkb4do-theme #userMenuDropdown.is-open,
  body.thinkb4do-theme #searchResults:not([hidden]) {
    top: var(--tb4-header-popup-lock-top, var(--tb4-popup-top, 96px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0 0 18px 18px !important;
  }
}


/* =============================================
   v1.8.5 Header Popup Anchor Reset
   เป้าหมาย: popup ของแจ้งเตือน / แชท / บัญชี / ค้นหา / เมนูมือถือ ต้องชิดใต้ปุ่มส่วนหัวจริง
   ไม่ปล่อยให้ค่า top เก่าจาก fixed header stack ดัน popup ลงกลางหน้า
   ============================================= */
body.thinkb4do-theme .tb4-notification-panel.is-open,
body.thinkb4do-theme #userMenuDropdown.is-open,
body.thinkb4do-theme #searchResults:not([hidden]) {
  position: fixed !important;
  top: var(--tb4-popup-anchor-top, var(--tb4-header-popup-lock-top, var(--tb4-popup-top, 72px))) !important;
  margin-top: 0 !important;
  transform: none !important;
  z-index: 100120 !important;
  max-height: calc(100vh - var(--tb4-popup-anchor-top, var(--tb4-header-popup-lock-top, 72px)) - 8px) !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.thinkb4do-theme #userMenuDropdown.is-open,
body.thinkb4do-theme .tb4-notification-panel.is-open {
  right: var(--tb4-popup-right, clamp(8px, 1.5vw, 20px)) !important;
  left: auto !important;
}
body.thinkb4do-theme #searchResults:not([hidden]) {
  top: var(--tb4-popup-anchor-top, var(--tb4-search-popup-top, 72px)) !important;
  left: var(--tb4-search-popup-left, 50%) !important;
  right: auto !important;
  width: var(--tb4-search-popup-width, min(560px, calc(100vw - 20px))) !important;
}
body.thinkb4do-theme #mobileMenuOverlay.is-open,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open {
  position: fixed !important;
  top: var(--tb4-popup-anchor-top, var(--tb4-mobile-menu-top, 72px)) !important;
  inset: var(--tb4-popup-anchor-top, var(--tb4-mobile-menu-top, 72px)) 0 0 0 !important;
  margin-top: 0 !important;
  z-index: 100110 !important;
}
@media (max-width: 782px) {
  body.thinkb4do-theme .tb4-notification-panel.is-open,
  body.thinkb4do-theme #userMenuDropdown.is-open,
  body.thinkb4do-theme #searchResults:not([hidden]) {
    top: var(--tb4-popup-anchor-top, var(--tb4-header-popup-lock-top, 88px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0 0 18px 18px !important;
  }
}


/* =============================================
   v1.8.6 Header Popup Hard Attach
   แก้ปัญหา popup บัญชี/แจ้งเตือนลอยห่างจากส่วนหัว:
   - ให้ dropdown ที่อยู่ใน header ใช้ absolute ใต้ปุ่มจริง
   - ไม่ใช้ fixed top จาก header stack เก่ากับ user/notification อีก
   - search ยังใช้ fixed เพราะ panel อยู่นอก header
   ============================================= */
body.thinkb4do-theme #site-header,
body.thinkb4do-theme #site-header .container,
body.thinkb4do-theme #site-header .header-inner,
body.thinkb4do-theme #site-header .header-right,
body.thinkb4do-theme #site-header .tb4-notification-wrap,
body.thinkb4do-theme #site-header .user-menu-wrap {
  overflow: visible !important;
  contain: none !important;
}

body.thinkb4do-theme #site-header .tb4-notification-wrap,
body.thinkb4do-theme #site-header .user-menu-wrap {
  position: relative !important;
}

body.thinkb4do-theme #site-header .tb4-notification-wrap > .tb4-notification-panel.is-open,
body.thinkb4do-theme #site-header .user-menu-wrap > #userMenuDropdown.is-open {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
}

body.thinkb4do-theme #site-header .tb4-notification-wrap > .tb4-notification-panel.is-open {
  width: min(360px, calc(100vw - 24px)) !important;
}

body.thinkb4do-theme #site-header .user-menu-wrap > #userMenuDropdown.is-open {
  min-width: 220px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
}

@media (max-width: 782px) {
  body.thinkb4do-theme #site-header .tb4-notification-wrap > .tb4-notification-panel.is-open,
  body.thinkb4do-theme #site-header .user-menu-wrap > #userMenuDropdown.is-open {
    top: calc(100% + 3px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 16px)) !important;
    border-radius: 16px !important;
  }
}

/* =============================================
   v1.9.3 Mobile Hamburger Menu Anchor Repair
   เป้าหมาย: เมนูสามขีดบนมือถือเปิดชิดใต้ส่วนหัวจริง ไม่ลอยห่าง ไม่โดน hotfix เก่าดันลง
   ============================================= */
body.thinkb4do-theme #mobileMenuOverlay,
body.thinkb4do-theme .tb4-mobile-menu-overlay {
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body.thinkb4do-theme #mobileMenuOverlay.is-open,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open,
html.tb4-actual-mobile body.thinkb4do-theme #mobileMenuOverlay.is-open,
html.tb4-actual-mobile body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open {
  display: block !important;
  position: fixed !important;
  top: var(--tb4-mobile-menu-hard-top, var(--tb4-mobile-menu-top, var(--tb4-popup-anchor-top, 72px))) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: var(--tb4-mobile-menu-hard-top, var(--tb4-mobile-menu-top, var(--tb4-popup-anchor-top, 72px))) 0 0 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: calc(100vh - var(--tb4-mobile-menu-hard-top, var(--tb4-mobile-menu-top, var(--tb4-popup-anchor-top, 72px)))) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 2147482500 !important;
  background: #fff !important;
  border-top: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.14) !important;
  padding: clamp(10px, 3vw, 16px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.thinkb4do-theme #mobileMenuOverlay.is-open nav,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  width: min(100%, 560px) !important;
  margin: 0 auto !important;
}

body.thinkb4do-theme #mobileMenuOverlay.is-open nav a,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open nav a,
body.thinkb4do-theme #mobileMenuOverlay.is-open .btn,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open .btn {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--tb4-gray-900, #111827) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .035) !important;
  font: 700 14px/1.35 var(--font-main, "Noto Sans Thai", system-ui, sans-serif) !important;
  text-decoration: none !important;
}

body.thinkb4do-theme #mobileMenuOverlay.is-open nav a:hover,
body.thinkb4do-theme #mobileMenuOverlay.is-open nav a:focus-visible,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open nav a:hover,
body.thinkb4do-theme .tb4-mobile-menu-overlay.is-open nav a:focus-visible {
  background: var(--tb4-green-light, #e8f5ee) !important;
  color: var(--tb4-green, #1e6b45) !important;
  border-color: rgba(30, 107, 69, .22) !important;
}

@media (max-width: 900px) {
  body.thinkb4do-theme #site-header,
  body.thinkb4do-theme #site-header .container,
  body.thinkb4do-theme #site-header .header-inner,
  body.thinkb4do-theme #site-header .header-right {
    overflow: visible !important;
    contain: none !important;
  }

  body.thinkb4do-theme .hamburger,
  body.thinkb4do-theme #mobileMenuToggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2147482600 !important;
  }
}




/* Thinkb4do Live Studio v2.0.0 — cleaner compact editing layer */
body.tb4-live-edit-active .tb4-live-toolbar {
  font-family: var(--font-main, "Noto Sans Thai", Kanit, system-ui, sans-serif) !important;
  background: rgba(15, 23, 42, .92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(14px) !important;
}
body.tb4-live-edit-active .tb4-live-toolbar button,
body.tb4-live-edit-active .tb4-live-toolbar a {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}
body.tb4-live-edit-active .tb4-live-controls,
body.tb4-live-edit-active .tb4-micro-controls {
  opacity: .72 !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
body.tb4-live-edit-active [data-tb4-live-component]:hover > .tb4-live-controls,
body.tb4-live-edit-active .tb4-live-controls:hover,
body.tb4-live-edit-active .tb4-micro-editable:hover > .tb4-micro-controls,
body.tb4-live-edit-active .tb4-micro-controls:hover {
  opacity: 1 !important;
}
body.tb4-live-edit-active .tb4-live-controls button,
body.tb4-live-edit-active .tb4-live-controls a,
body.tb4-live-edit-active .tb4-micro-controls button,
body.tb4-live-edit-active .tb4-micro-controls a {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 11px !important;
}
#wpadminbar #wp-admin-bar-tb4-live-edit-mode > .ab-item,
#wpadminbar #wp-admin-bar-tb4-gutenberg-frontend-instant > .ab-item,
#wpadminbar #wp-admin-bar-tb4-native-edit-root > .ab-item {
  font-weight: 700 !important;
}