/* SATIT UBRU v0.5.34.0 — Apple-inspired Liquid UI
   Public-site visual layer only. Menu values remain in site-menu-config.php. */
:root{
  --satit-accent:#d94d79;
  --satit-accent-strong:#b62f5c;
  --satit-accent-soft:rgba(217,77,121,.11);
  --satit-ink:#1d1d1f;
  --satit-ink-2:#424245;
  --satit-muted:#6e6e73;
  --satit-line:rgba(25,25,28,.10);
  --satit-line-light:rgba(255,255,255,.58);
  --satit-bg:#f5f5f7;
  --satit-surface:rgba(255,255,255,.72);
  --satit-surface-strong:rgba(255,255,255,.90);
  --satit-glass:rgba(248,248,250,.68);
  --satit-shadow:0 18px 60px rgba(25,25,28,.10);
  --satit-shadow-soft:0 8px 30px rgba(25,25,28,.07);
  --satit-radius-xl:30px;
  --satit-radius-lg:24px;
  --satit-radius-md:18px;
  --satit-ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--satit-bg)}
body[data-satit-menu-page]{margin:0;color:var(--satit-ink);background:
  radial-gradient(900px 420px at 8% -10%,rgba(217,77,121,.08),transparent 60%),
  radial-gradient(800px 420px at 92% 2%,rgba(80,135,255,.07),transparent 58%),
  var(--satit-bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI","Noto Sans Thai",Tahoma,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-satit-menu-page] img{max-width:100%}
body[data-satit-menu-page] a{-webkit-tap-highlight-color:transparent}

/* ===== Single canonical navigation: Liquid Glass functional layer ===== */
.satit-site-header[data-satit-menu]{position:sticky;top:0;z-index:10000;display:block!important;visibility:visible!important;opacity:1!important;background:transparent!important;border:0!important;padding:10px 14px 0;font-family:inherit;transition:padding .35s var(--satit-ease),transform .35s var(--satit-ease)}
.satit-site-header[data-satit-menu] *{box-sizing:border-box}
.satit-site-nav-wrap{position:relative;max-width:1280px;margin:0 auto;min-height:68px;padding:8px 12px 8px 14px;display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.64);border-radius:25px;background:rgba(250,250,252,.70);box-shadow:0 8px 30px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.72);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);transition:min-height .35s var(--satit-ease),background .35s var(--satit-ease),box-shadow .35s var(--satit-ease),border-radius .35s var(--satit-ease)}
.satit-site-header.is-scrolled{padding-top:6px}
.satit-site-header.is-scrolled .satit-site-nav-wrap{min-height:58px;background:rgba(250,250,252,.82);box-shadow:0 10px 34px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.84);border-radius:22px}
.satit-site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:260px;padding:5px 7px;border-radius:17px;transition:background .25s var(--satit-ease),transform .25s var(--satit-ease)}
.satit-site-brand:hover{background:rgba(255,255,255,.58);transform:translateY(-1px)}
.satit-site-logo{width:42px;height:42px;object-fit:contain;flex:0 0 42px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.08));transition:width .35s var(--satit-ease),height .35s var(--satit-ease)}
.is-scrolled .satit-site-logo{width:36px;height:36px;flex-basis:36px}
.satit-site-brand-copy{display:flex;flex-direction:column;line-height:1.15}
.satit-site-brand-copy strong{font-size:17px;color:var(--satit-ink);letter-spacing:-.015em;font-weight:720}
.satit-site-brand-copy small{font-size:10.5px;color:var(--satit-muted);margin-top:4px;max-width:330px}
.satit-main-nav>ul,.satit-submenu{list-style:none;margin:0;padding:0}
.satit-main-nav>ul{display:flex;align-items:center;gap:2px}
.satit-nav-item{position:relative;display:flex;align-items:center}
.satit-nav-item>a,.satit-main-menu-button{display:block;padding:10px 10px;border:0;border-radius:999px;background:transparent;text-decoration:none;color:var(--satit-ink-2);font:590 13.2px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Noto Sans Thai",Tahoma,sans-serif;white-space:nowrap;cursor:pointer;transition:background .22s var(--satit-ease),color .22s var(--satit-ease),transform .22s var(--satit-ease),box-shadow .22s var(--satit-ease)}
.satit-nav-item.is-active>a,.satit-nav-item.is-active>.satit-main-menu-button{background:rgba(255,255,255,.76);color:var(--satit-accent-strong);box-shadow:inset 0 0 0 1px rgba(217,77,121,.10),0 3px 10px rgba(0,0,0,.04)}
.satit-nav-item>a:hover,.satit-main-menu-button:hover,.satit-nav-item>a:focus-visible,.satit-main-menu-button:focus-visible{background:rgba(255,255,255,.80);color:var(--satit-ink);outline:none;transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.06)}
.satit-sub-toggle{border:0;background:transparent;color:#727276;cursor:pointer;padding:8px 5px;margin-left:-8px;font-size:14px;line-height:1;transition:transform .24s var(--satit-ease),color .2s}
.satit-nav-item.sub-open>.satit-sub-toggle{transform:rotate(180deg);color:var(--satit-accent-strong)}
.satit-submenu{display:block;position:absolute;top:calc(100% + 10px);left:0;min-width:255px;padding:8px;border:1px solid rgba(255,255,255,.70);border-radius:21px;background:rgba(250,250,252,.80);box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.85);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);z-index:10020;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top left;transition:opacity .2s var(--satit-ease),transform .24s var(--satit-ease),visibility .2s}
.satit-nav-item:hover>.satit-submenu,.satit-nav-item:focus-within>.satit-submenu,.satit-nav-item.sub-open>.satit-submenu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.satit-submenu a{display:block;padding:10px 12px;border-radius:14px;text-decoration:none;color:#38383c;font-size:13.5px;white-space:nowrap;transition:background .2s,color .2s,transform .2s var(--satit-ease)}
.satit-submenu li.is-active a,.satit-submenu a:hover,.satit-submenu a:focus-visible{background:rgba(255,255,255,.86);color:var(--satit-accent-strong);transform:translateX(2px);outline:none}
.satit-nav-toggle{display:none;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.65);border-radius:999px;padding:9px 12px;cursor:pointer;align-items:center;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.satit-nav-toggle span{display:block;width:17px;height:1.7px;background:#3a3a3c;border-radius:999px;transition:transform .25s var(--satit-ease),opacity .2s}
.satit-nav-toggle b{font-size:12px;margin-left:4px;font-weight:650}

/* Breadcrumb floats as a quieter glass strip. */
.satit-breadcrumb[data-satit-menu-breadcrumb]{background:transparent;border:0;font-family:inherit;padding:6px 14px 0}
.satit-breadcrumb-inner{max-width:1240px;margin:auto;padding:8px 14px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--satit-muted);overflow:auto;white-space:nowrap;border:1px solid rgba(255,255,255,.56);border-radius:999px;background:rgba(255,255,255,.50);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 5px 18px rgba(0,0,0,.04)}
.satit-breadcrumb a{color:#5e5e63;text-decoration:none}.satit-breadcrumb a:hover{color:var(--satit-accent-strong)}.satit-breadcrumb strong{color:var(--satit-ink);font-weight:620}

/* ===== Site-wide content refresh: Apple-like spacious, content-first ===== */
body[data-satit-menu-page] main{position:relative}
body[data-satit-menu-page] .hero,
body[data-satit-menu-page] [class*="hero"]{border:0!important;background:
  radial-gradient(900px 360px at 50% -20%,rgba(217,77,121,.12),transparent 62%),
  linear-gradient(180deg,rgba(255,255,255,.72),rgba(245,245,247,.24))!important}
body[data-satit-menu-page] .hero h1,
body[data-satit-menu-page] [class*="hero"] h1,
body[data-satit-menu-page] main h1{letter-spacing:-.035em;line-height:1.06}
body[data-satit-menu-page] h2{letter-spacing:-.025em;line-height:1.12}
body[data-satit-menu-page] .lead{color:var(--satit-muted)}

body[data-satit-menu-page] .card,
body[data-satit-menu-page] .act-card,
body[data-satit-menu-page] .managed-block,
body[data-satit-menu-page] .panel,
body[data-satit-menu-page] .box{border:1px solid rgba(255,255,255,.70)!important;border-radius:var(--satit-radius-lg)!important;background:rgba(255,255,255,.76)!important;box-shadow:var(--satit-shadow-soft)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transition:transform .32s var(--satit-ease),box-shadow .32s var(--satit-ease),border-color .32s}
@media (hover:hover){body[data-satit-menu-page] .card:hover,body[data-satit-menu-page] .act-card:hover,body[data-satit-menu-page] .managed-block:hover{transform:translateY(-3px);box-shadow:var(--satit-shadow)!important;border-color:rgba(255,255,255,.9)!important}}

body[data-satit-menu-page] .btn,
body[data-satit-menu-page] button:not(.satit-main-menu-button):not(.satit-sub-toggle):not(.satit-nav-toggle),
body[data-satit-menu-page] input[type="submit"],
body[data-satit-menu-page] input[type="button"]{border-radius:999px!important;transition:transform .2s var(--satit-ease),box-shadow .2s var(--satit-ease),filter .2s}
@media (hover:hover){body[data-satit-menu-page] .btn:hover,body[data-satit-menu-page] button:hover,body[data-satit-menu-page] input[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.10)}}

body[data-satit-menu-page] input:not([type="checkbox"]):not([type="radio"]),
body[data-satit-menu-page] select,
body[data-satit-menu-page] textarea{border-radius:14px;border:1px solid rgba(0,0,0,.11);background:rgba(255,255,255,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .2s,box-shadow .2s,background .2s}
body[data-satit-menu-page] input:focus,body[data-satit-menu-page] select:focus,body[data-satit-menu-page] textarea:focus{outline:none;border-color:rgba(217,77,121,.48);box-shadow:0 0 0 4px rgba(217,77,121,.10);background:#fff}

body[data-satit-menu-page] table{border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.05)}
body[data-satit-menu-page] th{background:rgba(245,245,247,.84);color:var(--satit-ink);font-weight:650}
body[data-satit-menu-page] th,body[data-satit-menu-page] td{border-color:rgba(0,0,0,.07)!important}

body[data-satit-menu-page] footer{background:#1d1d1f!important;color:#f5f5f7;border:0!important}
body[data-satit-menu-page] footer a{color:#f5f5f7}

/* Reveal / motion states. Kept subtle and content-first. */
.satit-reveal{opacity:0;transform:translateY(18px) scale(.992);transition:opacity .7s var(--satit-ease),transform .75s var(--satit-ease)}
.satit-reveal.is-visible{opacity:1;transform:none}
.satit-site-header{--satit-glow-x:50%;--satit-glow-y:0%}
.satit-site-nav-wrap:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--satit-glow-x) var(--satit-glow-y),rgba(255,255,255,.42),transparent 70%);opacity:.75}
.satit-site-nav-wrap>*{position:relative;z-index:1}

/* Mobile: navigation becomes a glass sheet, same menu data. */
@media(max-width:1120px){.satit-site-brand{min-width:210px}.satit-site-brand-copy small{display:none}.satit-nav-item>a,.satit-main-menu-button{padding-left:8px;padding-right:8px;font-size:12.8px}}
@media(max-width:920px){
  .satit-site-header[data-satit-menu]{padding:8px 9px 0}
  .satit-site-nav-wrap{flex-wrap:wrap;gap:7px;min-height:60px;border-radius:22px;padding:7px 10px}
  .satit-site-logo{width:36px;height:36px;flex-basis:36px}.satit-site-brand{min-width:0}.satit-nav-toggle{display:flex;margin-left:auto;flex-wrap:wrap;justify-content:center;width:68px}
  .satit-main-nav{display:grid;grid-template-rows:0fr;width:100%;order:10;opacity:0;transition:grid-template-rows .34s var(--satit-ease),opacity .25s}
  .satit-main-nav>ul{overflow:hidden}.satit-main-nav.is-open{grid-template-rows:1fr;opacity:1}.satit-main-nav>ul{display:block;padding:4px 0 8px}
  .satit-nav-item{display:grid;grid-template-columns:1fr auto}.satit-nav-item>a,.satit-main-menu-button{width:100%;text-align:left;padding:11px 12px;border-radius:14px}
  .satit-sub-toggle{margin:0;padding:8px 14px}.satit-submenu{position:static;grid-column:1/-1;box-shadow:none;border:0;border-left:2px solid rgba(217,77,121,.18);border-radius:0;margin:0 4px 5px 17px;padding:3px 0 3px 8px;display:none!important;opacity:1;visibility:visible;transform:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .satit-nav-item.sub-open>.satit-submenu{display:block!important}.satit-nav-item:hover>.satit-submenu{display:none!important}.satit-nav-item.sub-open:hover>.satit-submenu{display:block!important}.satit-submenu a{white-space:normal}
}
@media(max-width:520px){.satit-site-brand-copy strong{font-size:15px}.satit-breadcrumb[data-satit-menu-breadcrumb]{padding-left:9px;padding-right:9px}.satit-breadcrumb-inner{padding-left:12px;padding-right:12px}}

/* Accessibility & graceful fallback */
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){.satit-site-nav-wrap,.satit-submenu,.satit-breadcrumb-inner{background:rgba(255,255,255,.97)}}
@media(prefers-contrast:more){.satit-site-nav-wrap,.satit-submenu,.satit-breadcrumb-inner{background:#fff;border-color:rgba(0,0,0,.22)}.satit-nav-item>a,.satit-main-menu-button{color:#111}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.satit-site-header,.satit-site-nav-wrap,.satit-site-logo,.satit-site-brand,.satit-nav-item>a,.satit-main-menu-button,.satit-submenu,.satit-reveal,.card,.act-card{transition:none!important;animation:none!important}.satit-reveal{opacity:1!important;transform:none!important}}

/* Keep previous duplicate guard. */
body[data-satit-menu-page="0.5.33.6"] > header:not(.satit-site-header){display:none!important}
body[data-satit-menu-page="0.5.33.6"] > nav:not(.satit-main-nav){display:none!important}
body[data-satit-menu-page="0.5.33.6"] > .legacy-header,
body[data-satit-menu-page="0.5.33.6"] > .legacy-nav,
body[data-satit-menu-page="0.5.33.6"] > .act-top,
body[data-satit-menu-page="0.5.33.6"] > .public-header{display:none!important}

/* ===== v0.5.34.1 — Capsule Glass cleanup =====
   Remove the old rectangular header/frame layer. Keep only one floating,
   rounded translucent iOS-style navigation capsule. */
.satit-site-header[data-satit-menu]{
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.satit-site-header[data-satit-menu]::before,
.satit-site-header[data-satit-menu]::after{content:none!important;display:none!important}

.satit-site-nav-wrap{
  border:0!important;
  outline:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(248,248,250,.40))!important;
  box-shadow:0 14px 44px rgba(20,20,24,.10),inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(255,255,255,.20)!important;
  -webkit-backdrop-filter:blur(28px) saturate(185%)!important;
  backdrop-filter:blur(28px) saturate(185%)!important;
}
.satit-site-header.is-scrolled .satit-site-nav-wrap{
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(248,248,250,.50))!important;
  box-shadow:0 12px 38px rgba(20,20,24,.12),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.satit-site-brand{border-radius:999px!important}

/* Prevent historical generic header/nav skins from painting a rectangle behind the capsule. */
body[data-satit-menu-page] > .satit-site-header,
body[data-satit-menu-page] > header.satit-site-header,
body[data-satit-menu-page] .satit-site-header[data-satit-menu]{
  width:auto!important;
  min-height:0!important;
}
body[data-satit-menu-page] .satit-site-header[data-satit-menu] > .satit-site-nav-wrap{
  overflow:visible!important;
}

@media(max-width:920px){
  /* Closed mobile header stays capsule-like; expanded menu becomes a soft rounded glass sheet. */
  .satit-site-nav-wrap{border-radius:28px!important}
  .satit-site-header.is-scrolled .satit-site-nav-wrap{border-radius:26px!important}
}

@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .satit-site-nav-wrap,
  .satit-site-header.is-scrolled .satit-site-nav-wrap{background:rgba(255,255,255,.94)!important}
}