/* =========================================================
   VELAEA Community Topbar Template v2
   Template name: community
   Scope: EA Market, EA Lab, ชุมชนเทรด top navigation only
   Source of truth: ea-community.html / EA Market topbar design
========================================================= */

:root{
  --community-topbar-bg:rgba(2,8,20,.84);
  --community-topbar-bg-light:rgba(255,255,255,.86);
  --community-text:#f7fbff;
  --community-muted:#9fb0c3;
  --community-gold:#f2c76a;
  --community-gold2:#c8952e;
  --community-line:rgba(255,255,255,.09);
  --community-gold-line:rgba(242,199,106,.22);
}

body.community-template-page .velaea-community-template-slot{min-height:66px;position:relative;z-index:3000;}

body.community-template-page .velaea-community-topbar{
  position:sticky!important;
  top:0!important;
  z-index:3000!important;
  width:100%!important;
  min-height:66px!important;
  background:var(--community-topbar-bg)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid var(--community-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset!important;
}

html[data-theme="light"] body.community-template-page .velaea-community-topbar,
body.light-mode.community-template-page .velaea-community-topbar{
  background:var(--community-topbar-bg-light)!important;
  border-bottom-color:rgba(9,24,42,.10)!important;
}

body.community-template-page .velaea-community-topbar .community-shell{
  width:min(1260px, calc(100% - 40px))!important;
  margin:0 auto!important;
}

body.community-template-page .velaea-community-topbar .community-nav{
  height:66px!important;
  min-height:66px!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:0!important;
}

body.community-template-page .velaea-community-topbar .community-brand{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:66px!important;
  min-width:118px!important;
  text-decoration:none!important;
}

body.community-template-page .velaea-community-topbar .community-brand img{
  width:118px!important;
  max-width:118px!important;
  max-height:52px!important;
  object-fit:contain!important;
  display:block!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 10px 24px rgba(242,199,106,.12))!important;
}

body.community-template-page .velaea-community-topbar .community-menu{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-left:auto!important;
  min-width:0!important;
}

body.community-template-page .velaea-community-topbar .community-menu a{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
  border-radius:13px!important;
  border:1px solid transparent!important;
  color:var(--community-muted)!important;
  background:transparent!important;
  font:900 12.5px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

body.community-template-page .velaea-community-topbar .community-menu a:hover,
body.community-template-page .velaea-community-topbar .community-menu a:focus-visible,
body.community-template-page .velaea-community-topbar .community-menu a.active,
body.community-template-page .velaea-community-topbar .community-menu a.is-active,
body.community-template-page .velaea-community-topbar .community-menu a.velaea-nav-current{
  color:var(--community-gold)!important;
  background:rgba(242,199,106,.08)!important;
  border-color:rgba(242,199,106,.14)!important;
  outline:none!important;
}

body.community-template-page .velaea-community-topbar .community-menu a:focus-visible{box-shadow:0 0 0 3px rgba(242,199,106,.16)!important;}

body.community-template-page .velaea-community-topbar .community-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
  margin-left:0!important;
}

body.community-template-page .velaea-community-topbar .community-actions [hidden]{display:none!important;}

body.community-template-page .velaea-community-topbar .community-theme-toggle,
body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger,
body.community-template-page .velaea-community-topbar .community-dashboard-notify,
body.community-template-page .velaea-community-topbar .public-auth-notify,
body.community-template-page .velaea-community-topbar .community-actions .velaea-public-notification-wrap > .public-auth-notify,
body.community-template-page .velaea-community-topbar .community-actions .velaea-public-notification-wrap > .community-dashboard-notify{
  height:42px!important;
  min-height:42px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:var(--community-text)!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font:950 12px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

body.community-template-page .velaea-community-topbar .community-theme-toggle,
body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger{
  min-width:104px!important;
  padding:0 12px!important;
  border-color:var(--community-gold-line)!important;
}

body.community-template-page .velaea-community-topbar .community-dashboard-notify,
body.community-template-page .velaea-community-topbar .public-auth-notify,
body.community-template-page .velaea-community-topbar .community-actions .velaea-public-notification-wrap > .public-auth-notify,
body.community-template-page .velaea-community-topbar .community-actions .velaea-public-notification-wrap > .community-dashboard-notify{
  min-width:108px!important;
  padding:0 14px!important;
  position:relative!important;
}

body.community-template-page .velaea-community-topbar .community-theme-toggle:hover,
body.community-template-page .velaea-community-topbar .community-theme-toggle:focus-visible,
body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger:hover,
body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger:focus-visible,
body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger[aria-expanded="true"],
body.community-template-page .velaea-community-topbar .community-dashboard-notify:hover,
body.community-template-page .velaea-community-topbar .community-dashboard-notify:focus-visible,
body.community-template-page .velaea-community-topbar .public-auth-notify:hover,
body.community-template-page .velaea-community-topbar .public-auth-notify:focus-visible{
  transform:translateY(-1px)!important;
  border-color:rgba(242,199,106,.45)!important;
  background:linear-gradient(135deg,rgba(242,199,106,.12),rgba(255,255,255,.055))!important;
  box-shadow:0 14px 34px rgba(242,199,106,.12),inset 0 1px 0 rgba(255,255,255,.07)!important;
  outline:none!important;
}

body.community-template-page .velaea-community-topbar .theme-icon{
  width:18px!important;
  height:18px!important;
  display:inline-grid!important;
  place-items:center!important;
  color:var(--community-gold)!important;
}

body.community-template-page .velaea-community-topbar .community-language-switcher{position:relative!important;z-index:3010!important;display:inline-flex!important;align-items:center!important;}
body.community-template-page .velaea-community-topbar .lang-current-flag{width:28px!important;height:28px!important;border-radius:999px!important;overflow:hidden!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.88)!important;box-shadow:0 8px 18px rgba(0,0,0,.12)!important;}
body.community-template-page .velaea-community-topbar .lang-current-img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;}
body.community-template-page .velaea-community-topbar .lang-current-text{max-width:88px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--community-text)!important;}
body.community-template-page .velaea-community-topbar .lang-chevron{color:var(--community-gold)!important;}

body.community-template-page .velaea-community-topbar .community-profile-pill{
  height:42px!important;
  min-height:42px!important;
  min-width:112px!important;
  max-width:132px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  padding:5px 11px 5px 6px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--community-text)!important;
  text-decoration:none!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}

body.community-template-page .velaea-community-topbar .community-profile-pill:hover,
body.community-template-page .velaea-community-topbar .community-profile-pill:focus-visible{
  transform:translateY(-1px)!important;
  border-color:rgba(242,199,106,.38)!important;
  background:rgba(242,199,106,.08)!important;
  box-shadow:0 14px 30px rgba(242,199,106,.12)!important;
  outline:none!important;
}

body.community-template-page .velaea-community-topbar .community-profile-avatar{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  color:#0a1524!important;
  background:linear-gradient(135deg,#f7e6a1,#c8952e)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  font:950 13px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;
}
body.community-template-page .velaea-community-topbar .community-profile-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
body.community-template-page .velaea-community-topbar .community-profile-copy{min-width:0!important;display:grid!important;gap:1px!important;line-height:1.05!important;}
body.community-template-page .velaea-community-topbar .community-profile-copy strong{max-width:58px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--community-text)!important;font:950 12px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;}
body.community-template-page .velaea-community-topbar .community-profile-copy em{font-style:normal!important;color:var(--community-gold)!important;font:950 10px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;white-space:nowrap!important;}

body.community-template-page .velaea-community-topbar .community-logout-btn{
  height:42px!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:13px!important;
  padding:0 20px!important;
  color:#1c1204!important;
  background:linear-gradient(135deg,#ffe59b,#c8952e)!important;
  box-shadow:0 16px 36px rgba(200,149,46,.28)!important;
  font:950 12px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
body.community-template-page .velaea-community-topbar .community-logout-btn:hover,
body.community-template-page .velaea-community-topbar .community-logout-btn:focus-visible{filter:saturate(1.05) brightness(1.03)!important;transform:translateY(-1px)!important;outline:none!important;}

body.community-template-page .velaea-community-topbar .community-guest-auth-btn{
  height:42px!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:13px!important;
  padding:0 18px!important;
  font:950 12px/1 Inter,'Noto Sans Thai',Arial,sans-serif!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
body.community-template-page .velaea-community-topbar .community-login-btn{border:1px solid rgba(242,199,106,.28)!important;background:rgba(255,255,255,.035)!important;color:#ffd876!important;}
body.community-template-page .velaea-community-topbar .community-register-btn{border:0!important;background:linear-gradient(135deg,#ffe59b,#c8952e)!important;color:#1d1305!important;box-shadow:0 14px 32px rgba(200,149,46,.24)!important;}

html.is-community-authenticated body.community-template-page .velaea-community-topbar [data-community-login],
html.is-community-authenticated body.community-template-page .velaea-community-topbar [data-community-register],
html.is-community-auth-pending body.community-template-page .velaea-community-topbar [data-community-login],
html.is-community-auth-pending body.community-template-page .velaea-community-topbar [data-community-register]{display:none!important;}
html.is-community-guest body.community-template-page .velaea-community-topbar [data-public-notifications],
html.is-community-guest body.community-template-page .velaea-community-topbar [data-community-profile],
html.is-community-guest body.community-template-page .velaea-community-topbar [data-community-logout]{display:none!important;}

body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap{position:relative!important;display:inline-flex!important;align-items:center!important;}
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap .notify-dot{position:absolute!important;top:5px!important;right:6px!important;width:8px!important;height:8px!important;border-radius:999px!important;background:#ff4d5f!important;box-shadow:0 0 0 3px rgba(255,77,95,.18),0 0 18px rgba(255,77,95,.72)!important;}
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap .notify-count{position:absolute!important;right:-8px!important;top:-8px!important;min-width:20px!important;height:20px!important;padding:0 5px!important;border-radius:999px!important;display:inline-grid!important;place-items:center!important;font-size:10px!important;font-weight:950!important;color:#fff!important;background:linear-gradient(135deg,#ff5e6d,#c8243a)!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 12px 28px rgba(255,45,73,.24)!important;}
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap > .public-auth-notify:not(.has-unread) .notify-dot,
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap > .public-auth-notify:not(.has-unread) .notify-count,
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap > .community-dashboard-notify:not(.has-unread) .notify-dot,
body.community-template-page .velaea-community-topbar .velaea-public-notification-wrap > .community-dashboard-notify:not(.has-unread) .notify-count{display:none!important;}

html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a{color:#657386!important;}
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a:hover,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a:focus-visible,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a.active,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a.is-active,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-menu a.velaea-nav-current{color:#8b5b0e!important;background:rgba(242,199,106,.18)!important;}
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-theme-toggle,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-dashboard-notify,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .public-auth-notify,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-profile-pill{color:#09182a!important;background:rgba(255,255,255,.80)!important;border-color:rgba(9,24,42,.12)!important;}
html[data-theme="light"] body.community-template-page .velaea-community-topbar .community-profile-copy strong,
html[data-theme="light"] body.community-template-page .velaea-community-topbar .lang-current-text{color:#09182a!important;}

@media (max-width:1180px){
  body.community-template-page .velaea-community-topbar .community-shell{width:min(100% - 28px,1260px)!important;}
  body.community-template-page .velaea-community-topbar .community-nav{gap:12px!important;}
  body.community-template-page .velaea-community-topbar .community-brand{min-width:104px!important;}
  body.community-template-page .velaea-community-topbar .community-brand img{width:104px!important;max-width:104px!important;}
  body.community-template-page .velaea-community-topbar .community-menu a{padding:0 10px!important;font-size:12px!important;}
  body.community-template-page .velaea-community-topbar .community-theme-toggle,
  body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger{min-width:96px!important;}
  body.community-template-page .velaea-community-topbar .community-dashboard-notify,
  body.community-template-page .velaea-community-topbar .public-auth-notify{min-width:98px!important;}
}

@media (max-width:820px){
  body.community-template-page .velaea-community-topbar{min-height:72px!important;}
  body.community-template-page .velaea-community-topbar .community-shell{width:min(100% - 24px,1260px)!important;}
  body.community-template-page .velaea-community-topbar .community-nav{height:auto!important;min-height:72px!important;flex-wrap:wrap!important;gap:8px 10px!important;padding:10px 0 9px!important;}
  body.community-template-page .velaea-community-topbar .community-brand{height:38px!important;min-width:96px!important;}
  body.community-template-page .velaea-community-topbar .community-brand img{width:96px!important;max-height:40px!important;}
  body.community-template-page .velaea-community-topbar .community-menu{order:3!important;width:100%!important;margin-left:0!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 0 4px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
  body.community-template-page .velaea-community-topbar .community-menu::-webkit-scrollbar{display:none!important;}
  body.community-template-page .velaea-community-topbar .community-actions{margin-left:auto!important;gap:6px!important;}
  body.community-template-page .velaea-community-topbar .theme-text,
  body.community-template-page .velaea-community-topbar .lang-current-text,
  body.community-template-page .velaea-community-topbar .public-auth-notify-text{display:none!important;}
  body.community-template-page .velaea-community-topbar .community-theme-toggle,
  body.community-template-page .velaea-community-topbar .community-language-switcher .lang-trigger,
  body.community-template-page .velaea-community-topbar .community-dashboard-notify,
  body.community-template-page .velaea-community-topbar .public-auth-notify{width:40px!important;min-width:40px!important;padding:0!important;}
  body.community-template-page .velaea-community-topbar .community-profile-pill{min-width:42px!important;width:42px!important;padding:5px!important;justify-content:center!important;}
  body.community-template-page .velaea-community-topbar .community-profile-copy{display:none!important;}
  body.community-template-page .velaea-community-topbar .community-logout-btn{padding:0 13px!important;}
}