:root{
  --sdd-global-header-height:76px;
  --sdd-global-header-pad-inline:32px;
  --sdd-global-header-logo-width:210px;
  --sdd-global-header-action-size:44px;
  --sdd-global-header-z:100;
  --sdd-global-header-border:#e8ebf0;
  --sdd-global-header-ink:#111827;
  --sdd-global-header-bg:rgba(255,255,255,.97);
}
.sdd-global-header{
  position:sticky;
  top:0;
  z-index:var(--sdd-global-header-z);
  height:var(--sdd-global-header-height);
  border-bottom:1px solid var(--sdd-global-header-border);
  background:var(--sdd-global-header-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.sdd-global-header__inner{
  width:min(1280px,calc(100% - (var(--sdd-global-header-pad-inline) * 2)));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
}
.sdd-global-header__brand{
  display:block;
  width:var(--sdd-global-header-logo-width);
  max-width:44vw;
  aspect-ratio:400/82;
  overflow:hidden;
  flex:0 0 auto;
  line-height:0;
}
.sdd-global-header__brand img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:initial;
  object-position:initial;
  filter:none;
}
.sdd-global-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
.sdd-global-header__action{
  width:var(--sdd-global-header-action-size);
  height:var(--sdd-global-header-action-size);
  min-width:var(--sdd-global-header-action-size);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--sdd-global-header-ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sdd-global-header__action:hover{background:#f5f6f8}
.sdd-global-header__action:focus-visible{
  outline:3px solid #1655bc;
  outline-offset:2px;
}
.sdd-global-header__action svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sdd-global-header__menu-button svg{width:34px;height:34px}
.sdd-global-header__menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(270px,calc(100vw - 32px));
  padding:8px;
  border:1px solid #e3e7ee;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  z-index:calc(var(--sdd-global-header-z) + 2);
}
.sdd-global-header__menu[hidden]{display:none!important}
.sdd-global-header__menu a{
  min-height:44px;
  padding:9px 12px;
  border-radius:10px;
  color:#171719;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font:700 14px/1.35 "Noto Sans Thai","Poppins",system-ui,sans-serif;
}
.sdd-global-header__menu a:hover,
.sdd-global-header__menu a[aria-current="page"]{
  background:#f6f7f9;
  color:#e8172f;
}
.sdd-global-header__menu small{
  color:#8a94a6;
  font-size:10px;
  font-weight:600;
}
.sdd-global-header__toast{
  position:fixed;
  left:50%;
  top:calc(var(--sdd-global-header-height) + 10px);
  z-index:calc(var(--sdd-global-header-z) + 5);
  transform:translate(-50%,-8px);
  max-width:calc(100vw - 32px);
  padding:9px 12px;
  border-radius:10px;
  background:#17191d;
  color:#fff;
  font:600 12px/1.35 "Noto Sans Thai",system-ui,sans-serif;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.sdd-global-header__toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}
@media(max-width:640px){
  :root{
    --sdd-global-header-height:60px;
    --sdd-global-header-pad-inline:16px;
    --sdd-global-header-logo-width:148px;
    --sdd-global-header-action-size:44px;
  }
  .sdd-global-header__inner{gap:8px}
  .sdd-global-header__actions{gap:2px}
  .sdd-global-header__action svg{width:28px;height:28px}
  .sdd-global-header__menu-button svg{width:32px;height:32px}
}
@media(min-width:641px) and (max-width:1024px){
  :root{
    --sdd-global-header-height:68px;
    --sdd-global-header-pad-inline:24px;
    --sdd-global-header-logo-width:180px;
    --sdd-global-header-action-size:44px;
  }
}


/* =========================================================
   GLOBAL HEADER V1.2 BEHAVIOR — 2026-09-23
   Geometry remains locked; this pass improves menu focus and
   prepares account states for future LINE Login integration.
   ========================================================= */
.sdd-global-header__menu{
  max-height:calc(100dvh - var(--sdd-global-header-height) - 24px);
  overflow:auto;
  overscroll-behavior:contain;
}
.sdd-global-header__menu a:focus-visible{
  outline:3px solid #1655bc;
  outline-offset:-1px;
  background:#f6f7f9;
}
.sdd-global-header__account[aria-busy="true"]{
  opacity:.55;
  cursor:progress;
}
.sdd-global-header__account[data-authenticated="true"]::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  margin:24px 0 0 24px;
  border:2px solid #fff;
  border-radius:50%;
  background:#16a34a;
}
.sdd-global-header__action{position:relative}
@media(max-width:640px){
  .sdd-global-header__menu{
    right:-2px;
    width:min(286px,calc(100vw - 24px));
    top:calc(100% + 6px);
  }
}


/* =========================================================
   GLOBAL HEADER ACCOUNT UX V1 / HEADER V1.3 — 2026-09-23
   Geometry stays locked; authenticated account panel only.
   ========================================================= */
.sdd-global-header__actions{position:relative}
.sdd-global-header__account-avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid #e5e7eb;background:#f4f5f7;
}
.sdd-global-header__account-panel{
  position:absolute;right:0;top:calc(100% + 8px);
  width:min(330px,calc(100vw - 32px));
  padding:10px;border:1px solid #e3e7ee;border-radius:18px;
  background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.16);
  z-index:calc(var(--sdd-global-header-z) + 3);
  color:#171719;
}
.sdd-global-header__account-panel[hidden]{display:none!important}
.sdd-global-header__account-profile{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;
  padding:8px 8px 12px;margin-bottom:4px;border-bottom:1px solid #eef0f3;
}
.sdd-global-header__account-panel-avatar{
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:#f5f6f8;color:#1f2937;
}
.sdd-global-header__account-panel-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sdd-global-header__account-panel-avatar svg{
  width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.sdd-global-header__account-profile strong{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 14px/1.45 "Noto Sans Thai","Poppins",system-ui,sans-serif;
}
.sdd-global-header__account-profile small{
  display:block;margin-top:2px;color:#6b7280;
  font:500 11px/1.4 "Noto Sans Thai",system-ui,sans-serif;
}
.sdd-global-header__account-panel>a,
.sdd-global-header__signout{
  width:100%;min-height:44px;padding:9px 11px;border:0;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;color:#171719;text-decoration:none;text-align:left;
  font:650 14px/1.4 "Noto Sans Thai","Poppins",system-ui,sans-serif;
}
.sdd-global-header__account-panel>a:hover,
.sdd-global-header__account-panel>a:focus-visible,
.sdd-global-header__signout:hover,
.sdd-global-header__signout:focus-visible{background:#f6f7f9;outline:0}
.sdd-global-header__account-panel b{
  min-width:26px;padding:2px 7px;border-radius:999px;background:#f1f2f5;
  color:#4b5563;text-align:center;font-size:11px;
}
.sdd-global-header__signout{margin-top:4px;border-top:1px solid #eef0f3;border-radius:0 0 10px 10px;color:#b42332}
@media(max-width:640px){
  .sdd-global-header__account-avatar{width:32px;height:32px}
  .sdd-global-header__account-panel{right:-2px;top:calc(100% + 6px);width:min(310px,calc(100vw - 24px))}
}