/*
 * Navigation System v11 (navx) — styles.
 *
 * Was an inline <style> in components/navx/partials/styles.blade.php, so ~26KB was
 * re-sent with every HTML response on all 12 layouts that include the header, and
 * could never be browser-cached. As a file it is cached once per visitor and at the
 * Cloudflare edge.
 *
 * Loaded render-blocking on purpose: the nav is above the fold, so deferring it
 * (media="print" onload) would paint an unstyled header first.
 *
 * Bump config('config.STYLE_VER') after editing.
 */
/* Global position utilities — NOT part of navx, and deliberately unprefixed.
   They were declared inside the old nav/nav-en inline <style>, so every page that
   rendered the header got them. navx replaced that nav and the declarations went
   with it, which silently broke ~54 usages across 18 views: on /forum the
   .banner-overlay lost its positioned ancestor and stretched over the whole page.
   Re-declared here so coverage matches exactly what the old nav provided.
   Longer term these belong in a global stylesheet, not in a nav component. */
.p-relative { position: relative; }
.p-absolute { position: absolute; }
.badge-positon { left: 13px; top: 3px; }

/* ===================== Navigation System v11 (navx) ===================== */
.nvx-root{ --nvx-navy:#1C2D5F; --nvx-ink:#1E1A3D; --nvx-ink2:#4A4D6B; --nvx-ink3:#8A8FA3; --nvx-mag:#E5377A;
  --nvx-warm:linear-gradient(96deg,#F59849 0%,#EE5C7A 55%,#E5377A 100%);
  /* fixed like the header it replaces; z-index 1030 sits above page overlays such
     as the profile page's fixed bottom bar (.payment-section, z-index 1000) so the
     mobile drawer covers it, and below Bootstrap modals (1040+). */
  position:fixed; top:0; left:0; width:100%; z-index:1030;
  font-family:'Sarabun',sans-serif; color:var(--nvx-ink); }
.nvx-root *{ box-sizing:border-box; }
/* text-decoration only — do NOT set color here (it would out-specify .nvx-nlink etc.
   and make the anchor nav links inherit the dark ink color on the navy bar). */
.nvx-root a{ text-decoration:none; }
.nvx-root a:hover{ text-decoration:none; }
/* Bootstrap ships `a:hover{color:#0056b3}`. Its specificity (0,1,1 — pseudo-class
   + type) BEATS a bare class such as `.nvx-go` (0,1,0), so every anchor in here
   that does not pin its own hover colour turns Bootstrap blue on hover. Measured
   on `/`: .nvx-go (the Near Me "Enable" pill), .nvx-sit (all 9 service tiles +
   Forum), .nvx-cta (Register) and .nvx-icbtn all did exactly that.
   A `.class:hover` is (0,2,0) and wins, so each one pins its colour below.
   ANY NEW ANCHOR IN THIS NAV MUST DO THE SAME or it will inherit the blue. */
.nvx-go:hover, .nvx-go:focus{ color:#fff; }
.nvx-cta:hover, .nvx-cta:focus{ color:#fff; }
.nvx-icbtn:hover, .nvx-icbtn:focus{ color:#fff; }
.nvx-back:hover, .nvx-back:focus{ color:#fff; }
.nvx-brand:hover, .nvx-brand:focus{ color:inherit; }
body.nvx-lock{ overflow:hidden; }

/* ---- desktop bar ---- */
.nvx-bar{ height:62px; background:linear-gradient(180deg,#22346B 0%,#1C2D5F 100%); display:flex; align-items:center; gap:10px;
  padding:0 22px; position:relative; z-index:5; box-shadow:0 8px 24px rgba(21,35,76,0.35); }
.nvx-brand{ display:flex; align-items:center; color:inherit; }
.nvx-bar .nvx-logo{ height:30px; display:block; }
/* justify-content:flex-end — the links sit beside the right-hand controls rather
   than glued to the logo. Measured before this: 44px of air after the logo and
   911px of dead space before the controls at 1920. flex:1 stays so the overflow
   safety net (min-width:0 / overflow:hidden below) still applies. */
.nvx-nav{ display:flex; align-items:center; gap:2px; flex:1; margin-left:34px; justify-content:flex-end; }
.nvx-nlink{ display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 9px; border-radius:10px;
  color:rgba(255,255,255,0.85); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.nvx-nlink:hover{ background:rgba(255,255,255,0.10); color:#fff; }
.nvx-nlink[data-on]{ background:rgba(255,255,255,0.16); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.18); }
.nvx-car{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-top:-4px; opacity:.8; display:inline-block; transition:transform .15s; }
.nvx-nlink[data-on] .nvx-car{ transform:rotate(-135deg); margin-top:4px; }
.nvx-i{ width:16px; height:16px; stroke:#fff; }

.nvx-bright{ display:flex; align-items:center; gap:8px; }
.nvx-chip{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 11px; border-radius:16px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); color:#fff; font-size:12.5px; font-weight:700;
  cursor:pointer; white-space:nowrap; backdrop-filter:blur(8px); }
.nvx-chip .nvx-i{ stroke:#fff; }
.nvx-icbtn{ width:32px; height:32px; border-radius:16px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; position:relative; }
.nvx-tg{ background:#2AABEE; border-color:rgba(255,255,255,0.3); box-shadow:0 3px 10px rgba(42,171,238,0.45); }
.nvx-search{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 16px 0 11px; border-radius:16px;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.24); color:rgba(255,255,255,0.78); font-size:12.5px;
  font-weight:600; cursor:pointer; white-space:nowrap; }
.nvx-search .nvx-i{ width:14px; height:14px; stroke:rgba(255,255,255,0.8); }
/* bar control hover states (navy bar) */
.nvx-icbtn:hover{ background:rgba(255,255,255,0.22); }
.nvx-tg:hover{ background:#1f9fe0; }
.nvx-chip:hover{ background:rgba(255,255,255,0.22); color:#fff; }
.nvx-search:hover{ background:rgba(255,255,255,0.24); color:#fff; }
.nvx-search:hover .nvx-i{ stroke:#fff; }
.nvx-bdg{ position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; border-radius:8px; background:var(--nvx-warm);
  color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.nvx-cta{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:17px; background:var(--nvx-warm);
  color:#fff; font-size:13px; font-weight:800; cursor:pointer;
  box-shadow:0 5px 16px rgba(229,55,122,0.45), inset 0 1px 0 rgba(255,255,255,0.35); white-space:nowrap; }
.nvx-cta.nvx-reg{ position:relative; overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
  .nvx-cta.nvx-reg{ animation:nvxRegPulse 1.1s ease 3; animation-delay:1s; }
  .nvx-cta.nvx-reg::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.6),transparent); animation:nvxRegShine 1.1s ease 3; animation-delay:1s; }
}
@keyframes nvxRegPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); box-shadow:0 0 0 6px rgba(229,55,122,0.18), 0 6px 24px rgba(229,55,122,0.6); } }
@keyframes nvxRegShine{ 0%{ left:-60%; } 100%{ left:120%; } }
.nvx-avatar{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:19px;
  cursor:pointer; border:2px solid rgba(255,255,255,0.25); color:#fff; transition:border-color .15s; overflow:hidden; }
.nvx-avatar:hover{ border-color:rgba(255,255,255,0.6); }
.nvx-avatar[data-on]{ border-color:#fff; }
.nvx-avatar img{ width:32px; height:32px; border-radius:16px; object-fit:cover; display:block; }
.nvx-avin{ width:32px; height:32px; border-radius:16px; background:var(--nvx-warm); color:#fff; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; }
.nvx-avin.nvx-big{ width:42px; height:42px; border-radius:21px; font-size:15px; padding:2px; }

/* ---- dropdown panels ---- */
.nvx-panel{ position:absolute; top:calc(100% + 4px); display:none;
  background:linear-gradient(150deg,rgba(255,255,255,0.90),rgba(255,255,255,0.72));
  backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,0.9); border-radius:16px;
  box-shadow:0 28px 64px rgba(21,35,76,0.30), 0 6px 18px rgba(229,55,122,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  overflow:hidden; z-index:60; }
.nvx-panel[data-open]{ display:flex; flex-direction:column; }
.nvx-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--nvx-warm); }
/* Never taller than the viewport. The panel sits 66px down (62px bar + 4px offset)
   and clips with overflow:hidden, so without a cap a long Locations list — or the
   account menu on a short window — was cut off with no way to reach the rest.
   Cap the panel, scroll its body, keep the promo footer pinned. */
.nvx-panel{ max-height:calc(100vh - 80px); }
.nvx-scroll{ overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1 1 auto; }
/* Visible, self-coloured scrollbar on the panel's right edge (the default is
   invisible over the frosted background until you already scroll). */
.nvx-scroll, .nvx-acc{ scrollbar-width:thin; scrollbar-color:rgba(30,26,61,0.30) transparent; }
.nvx-scroll::-webkit-scrollbar, .nvx-acc::-webkit-scrollbar{ width:9px; }
.nvx-scroll::-webkit-scrollbar-track, .nvx-acc::-webkit-scrollbar-track{ background:transparent; }
.nvx-scroll::-webkit-scrollbar-thumb, .nvx-acc::-webkit-scrollbar-thumb{ background:rgba(30,26,61,0.24); border-radius:5px;
  border:2px solid transparent; background-clip:content-box; }
.nvx-scroll::-webkit-scrollbar-thumb:hover, .nvx-acc::-webkit-scrollbar-thumb:hover{ background:rgba(229,55,122,0.55); background-clip:content-box; }
.nvx-mega{ width:560px; }
.nvx-mega[data-nvx-panel="svc"]{ left:78px; }
/* 5 columns need the extra width — at 640px the Thai names collided.
   max-width subtracts the 78px left offset too, otherwise the panel runs off the
   right edge on narrow desktops instead of shrinking. */
.nvx-loc{ left:78px; width:940px; max-width:calc(100vw - 98px); }
.nvx-inner{ padding:16px 18px 14px; }
.nvx-inner.nvx-scroll{ padding-right:10px; }
.nvx-sec{ font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--nvx-ink3); margin:0 0 8px 4px; }
/* Locations headings (ไซด์ไลน์กรุงเทพ / คนอื่น) read as real labels, not eyebrow
   text — the Bangkok one is a link. Scoped to .nvx-loc so the Services and
   Community headings keep the smaller eyebrow treatment. */
.nvx-loc .nvx-sec{ font-size:14px; letter-spacing:.02em; }
/* Section heading with a hairline running out to the right:  Others ———————————
   The rule is a pseudo-element so it always fills whatever space the label leaves,
   at any label width or language. */
.nvx-rule{ display:flex; align-items:center; gap:10px; }
.nvx-rule::after{ content:""; flex:1 1 auto; height:1px; background:rgba(30,26,61,0.12); }
/* Clickable section heading (Bangkok). Inherits the heading colour and pins its own
   hover — without that it would take Bootstrap's a:hover blue. */
.nvx-seclink{ color:inherit; }
.nvx-seclink:hover, .nvx-seclink:focus{ color:var(--nvx-mag); text-decoration:underline; }
.nvx-sgrid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; margin-bottom:14px; }
.nvx-sit{ display:flex; align-items:center; gap:11px; padding:7px 8px; border-radius:11px; cursor:pointer; font-size:14px; font-weight:600; color:var(--nvx-ink); }
/* Magenta on hover matches .nvx-lit / .nvx-arow / .nvx-subrow — the nav's hover
   language. Without an explicit colour these tiles went Bootstrap blue. */
.nvx-sit:hover, .nvx-sit:focus{ background:rgba(255,255,255,0.85); color:var(--nvx-mag); }
.nvx-comm{ display:flex; gap:10px; }
.nvx-comm .nvx-sit{ flex:1; border:1px solid rgba(255,255,255,0.8); background:rgba(255,255,255,0.45); }
.nvx-icochip{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(21,35,76,0.08); }
.nvx-icochip svg{ width:15px; height:15px; }
.nvx-promo{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; background:rgba(255,255,255,0.45); border-top:1px solid rgba(255,255,255,0.7); flex-shrink:0; }
.nvx-promo b{ font-size:13.5px; } .nvx-promo span{ font-size:12px; color:var(--nvx-ink2); }
.nvx-go{ display:inline-flex; align-items:center; height:30px; padding:0 15px; border-radius:15px; background:var(--nvx-warm);
  color:#fff; font-size:12.5px; font-weight:800; cursor:pointer; box-shadow:0 4px 12px rgba(229,55,122,0.35); }
/* minmax(0,1fr) — not plain 1fr — so a long name shrinks its column instead of
   forcing the grid wider than the panel. */
.nvx-lgrid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:2px 10px; }
.nvx-lit{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; color:var(--nvx-ink); min-width:0; }
/* the label is its own span (see script.blade.php fillLit) so it can ellipsis */
.nvx-ltxt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.nvx-lit svg{ width:14px; height:14px; stroke:var(--nvx-ink3); flex-shrink:0; }
.nvx-lit:hover{ background:rgba(255,255,255,0.85); color:var(--nvx-mag); } .nvx-lit:hover svg{ stroke:var(--nvx-mag); }
.nvx-lcnt{ margin-left:auto; font-size:11px; font-weight:800; color:var(--nvx-ink3); background:rgba(30,26,61,0.06); border-radius:8px; padding:1px 7px; }

/* Location loading skeleton — shown until JS fills the list from /location-all. */
.nvx-skel{ pointer-events:none; }
.nvx-skeldot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; background:rgba(30,26,61,0.08); }
.nvx-skelbar{ height:9px; border-radius:6px; flex:1; max-width:110px; background:rgba(30,26,61,0.08); }
.nvx-skel .nvx-skelbar, .nvx-skel .nvx-skeldot{ animation:nvx-skel 1.1s ease-in-out infinite; }
.nvx-subrow.nvx-skel{ pointer-events:none; }
@keyframes nvx-skel{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

/* ---- language switcher ---- */
.nvx-flag{ width:16px; height:16px; border-radius:3px; flex-shrink:0; display:block; }
.nvx-langchip{ gap:6px; }
.nvx-mbar .nvx-langchip .nvx-flag{ width:14px; height:14px; }
/* Sits directly under its own chip (positionPanel measures the trigger) and is only
   as wide as its longest row — "English" — rather than a fixed block.
   right:16px is just the no-JS fallback; JS clears it when it sets left. */
.nvx-langmenu{ right:16px; width:max-content; min-width:128px; padding:6px; }
.nvx-mbar .nvx-langmenu{ right:8px; top:calc(100% + 6px); }
.nvx-langmenu .nvx-langrow{ white-space:nowrap; }
.nvx-langrow{ display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--nvx-ink); cursor:pointer; }
.nvx-langrow span{ flex:1 1 auto; min-width:0; }
.nvx-langrow:hover, .nvx-langrow:focus{ background:rgba(255,255,255,0.85); color:var(--nvx-mag); }
.nvx-langrow.is-on{ color:var(--nvx-mag); background:rgba(229,55,122,0.07); }
.nvx-tick{ width:15px; height:15px; stroke:var(--nvx-mag); flex-shrink:0; }

/* ---- account panel ---- */
/* The account panel has no .nvx-inner wrapper — its rows are direct children — so
   the panel itself scrolls. Without this, Logout was clipped off a short window.
   It must stay display:block when open: as a flex column the 38px rows are flex
   items and silently SHRINK to fit the cap instead of scrolling. */
.nvx-acc{ right:16px; width:274px; padding:6px 8px 8px; overflow-y:auto; overscroll-behavior:contain; }
.nvx-acc[data-open]{ display:block; }
.nvx-acch{ font-size:12px; font-weight:800; color:var(--nvx-ink3); padding:9px 10px 5px; letter-spacing:.04em; }
.nvx-idh{ display:flex; align-items:center; gap:11px; padding:12px 12px 11px; margin:2px 2px 8px; border-radius:14px;
  background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(21,35,76,0.06); }
.nvx-idh img{ width:42px; height:42px; border-radius:21px; object-fit:cover; display:block; padding:2px;
  background:linear-gradient(96deg,#F59849,#E5377A); box-shadow:0 3px 10px rgba(21,35,76,0.15); }
.nvx-idh b{ display:block; font-size:14px; font-weight:800; }
.nvx-idh div span{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:#8A8FA3; font-weight:600; }
.nvx-idh .nvx-avin.nvx-big{ color:#fff; font-size:15px; }
.nvx-arow{ display:flex; align-items:center; gap:11px; height:38px; padding:0 10px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--nvx-ink); }
.nvx-arow .nvx-i{ width:16px; height:16px; stroke:#8A8FA3; flex-shrink:0; }
.nvx-arow:hover{ background:rgba(255,255,255,0.85); color:var(--nvx-mag); } .nvx-arow:hover .nvx-i{ stroke:var(--nvx-mag); }
.nvx-arow.nvx-danger{ color:#D43B3B; } .nvx-arow.nvx-danger .nvx-i{ stroke:#D43B3B; }
/* Dashboard shortcut on public chrome — a filled row, not a plain link (nav v11
   `.arow.gate`). It is the one way back into the account from the public nav, so
   it carries the warm fill the CTAs use. */
.nvx-arow.nvx-gate{ background:var(--nvx-warm); color:#fff; font-weight:800; margin:2px 0;
  box-shadow:0 5px 16px rgba(229,55,122,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.nvx-arow.nvx-gate .nvx-i{ stroke:#fff; }
.nvx-arow.nvx-gate:hover, .nvx-arow.nvx-gate:focus{ background:var(--nvx-warm); color:#fff; }
.nvx-arow.nvx-gate:hover .nvx-i{ stroke:#fff; }
.nvx-rbadge{ margin-left:auto; font-size:11px; font-weight:800; color:#fff; background:var(--nvx-mag); border-radius:9px; padding:1px 7px; }
.nvx-adiv{ height:1px; background:rgba(30,26,61,0.08); margin:6px 10px; }
/* Always ONE row of equal columns. The labels are the variable: they wrap inside
   their own button (white-space:normal + auto height) rather than pushing the pair
   apart, so "Create a feed" / "Complete the profile." stays a two-column row at the
   274px panel width instead of breaking to two stacked buttons. */
.nvx-dctas{ display:flex; gap:8px; padding:6px 6px 8px; }
.nvx-mcta{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:38px; padding:7px 8px; border-radius:12px; font-size:12.5px; font-weight:800; cursor:pointer;
  white-space:normal; line-height:1.25; text-wrap:pretty;
  /* Thai runs without spaces, so a label that outgrows its half is one long "word".
     Browsers that don't break Thai on syllables would overflow the pill without
     this; the label is also machine-translated in some viewers, so no length is
     guaranteed. Wrapping inside the button keeps the two-column row intact. */
  overflow-wrap:anywhere; }
/* Drawer CTAs are touch targets, so they run taller than the desktop panel's. */
.nvx-drawer .nvx-mcta{ min-height:44px; }
.nvx-mcta .nvx-i{ width:14px; height:14px; margin-right:6px; flex-shrink:0; }
.nvx-mcta.nvx-p{ background:var(--nvx-warm); color:#fff; box-shadow:0 6px 18px rgba(229,55,122,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.nvx-mcta.nvx-p .nvx-i{ stroke:#fff; }
.nvx-mcta.nvx-s{ background:rgba(255,255,255,0.7); color:var(--nvx-ink); border:1px solid rgba(255,255,255,0.95); box-shadow:0 2px 8px rgba(21,35,76,0.10); }
.nvx-mcta.nvx-gp{ background:linear-gradient(#fff,#fff) padding-box, var(--nvx-warm) border-box; border:1.6px solid transparent; color:var(--nvx-mag); box-shadow:0 3px 12px rgba(229,55,122,0.18); }
.nvx-mcta.nvx-gp .nvx-i{ stroke:var(--nvx-mag); }
.nvx-mcta.nvx-gp:hover{ background:linear-gradient(#FFF5F9,#FFF5F9) padding-box, var(--nvx-warm) border-box; }

/* ---- mobile bar + drawer ---- */
.nvx-mbar{ height:56px; background:linear-gradient(180deg,#22346B 0%,#1C2D5F 100%); display:none; align-items:center;
  justify-content:space-between; padding:0 12px; position:relative; z-index:5; box-shadow:0 8px 24px rgba(21,35,76,0.35); }
.nvx-mbar .nvx-logo{ height:22px; }
.nvx-mright{ display:flex; gap:4px; align-items:center; min-width:0; }
.nvx-mbar .nvx-chip{ height:28px; padding:0 8px; font-size:11px; gap:4px; }
.nvx-mbar .nvx-wallet{ max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nvx-mbar .nvx-wallet svg{ flex-shrink:0; }
.nvx-back{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; margin-right:2px; border-radius:17px; color:#fff; }
.nvx-back svg{ width:20px; height:20px; stroke:#fff; }
.nvx-back:active, .nvx-back:hover{ background:rgba(255,255,255,0.12); }
/* very narrow phones: drop the wallet amount to avoid overflow (icon still links to wallet) */
@media (max-width:400px){ .nvx-mbar .nvx-wallet{ font-size:0; padding:0; width:32px; height:32px; justify-content:center; border-radius:16px; } .nvx-mbar .nvx-wallet svg{ margin:0; } }
.nvx-mstage{ position:fixed; inset:0; z-index:100000; display:none; }
.nvx-root.nvx-open .nvx-mstage{ display:block; }
.nvx-dim{ position:absolute; inset:0; background:rgba(21,35,76,0.28); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s; }
.nvx-root.nvx-open .nvx-dim{ opacity:1; }
.nvx-drawer{ position:absolute; top:0; left:0; bottom:0; width:min(312px,86vw); transform:translateX(-100%); transition:transform .28s ease;
  background:radial-gradient(240px 160px at 85% -4%, rgba(245,152,73,0.16), transparent 65%),
    radial-gradient(260px 200px at -10% 105%, rgba(43,62,115,0.10), transparent 65%),
    linear-gradient(160deg,rgba(255,255,255,0.96),rgba(255,255,255,0.86));
  backdrop-filter:blur(30px) saturate(200%); -webkit-backdrop-filter:blur(30px) saturate(200%);
  border-right:1px solid rgba(255,255,255,0.9); box-shadow:24px 0 60px rgba(21,35,76,0.30);
  overflow-y:auto; overscroll-behavior:contain; }
.nvx-root.nvx-open .nvx-drawer{ transform:translateX(0); }
.nvx-drawer::before{ content:""; position:sticky; top:0; left:0; display:block; height:3px; background:var(--nvx-warm); z-index:1; }
.nvx-dbody{ padding:14px 10px 24px; }
.nvx-msec{ font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--nvx-ink3); padding:9px 8px 3px; }
.nvx-pstats{ display:flex; gap:6px; margin:2px 2px 10px; }
.nvx-pstats>div{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px 6px; border-radius:10px; background:rgba(255,255,255,0.62); border:1px solid rgba(21,35,76,0.07); }
.nvx-pstats b{ font-size:14px; font-weight:800; color:#1F2440; line-height:1; }
.nvx-pstats span{ font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nvx-ink3); }
.nvx-acct .nvx-chev{ margin-left:auto; width:13px; height:13px; stroke:#8A8FA3; transition:transform .2s; }
.nvx-acct[data-open] .nvx-chev{ transform:rotate(180deg); }
/* Sub-lists indent just enough to read as nested. 30px was set when the rows were
   text-only; now that each carries an icon, that much gutter pushed the labels a
   third of the drawer in and left long names (Long-term (parenting relationship))
   nothing to wrap into. */
.nvx-asub{ display:none; padding:2px 0 6px 12px; }
.nvx-acct[data-open]+.nvx-asub{ display:block; }
/* Sub-rows carry the same icons as their desktop counterparts: a coloured chip per
   service, a map pin per location. The label is its own span so the count still
   sits hard right (margin-left:auto) instead of being pushed by space-between. */
.nvx-subrow{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:#474D6B; padding:7px 8px; border-radius:8px; cursor:pointer; }
.nvx-subrow:hover{ background:rgba(21,35,76,0.05); color:var(--nvx-mag); }
.nvx-subtxt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Service chip, drawer size — 28px would crowd a 12.5px row. */
.nvx-subrow .nvx-icochip{ width:22px; height:22px; border-radius:7px; }
.nvx-subrow .nvx-icochip svg{ width:13px; height:13px; }
/* Bare svg = the location pin (fillSub); scoped so it never hits the chip's icon. */
.nvx-subrow > svg{ width:14px; height:14px; stroke:var(--nvx-ink3); flex-shrink:0; }
.nvx-subrow:hover > svg{ stroke:var(--nvx-mag); }
/* Drawer copies of the same two locations headings — kept in step with the
   desktop panel. No uppercase: at 14px it shouted, and the old nav never
   uppercased "Bangkok Escorts" / "Others" either. */
.nvx-subhd{ font-size:14px; font-weight:800; letter-spacing:.02em; color:#8A8FA3; padding:8px 8px 2px; }
.nvx-scnt{ margin-left:auto; padding-left:8px; font-size:11px; font-weight:700; color:#8A8FA3; }
.nvx-nm{ color:#E5377A; font-weight:800; justify-content:flex-start; gap:7px; }
/* Near me keeps its own magenta pin, not the muted location one. */
.nvx-nm > svg, .nvx-nm:hover > svg{ stroke:#E5377A; }
.nvx-nmgo{ margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:3px 11px; border-radius:999px; background:var(--nvx-warm); color:#fff; }

/* ---- compact desktop tier (992–1199px) ----
   Measured: at 992px an Agency on EN pushed 138px of the right-hand controls —
   wallet, notifications, AVATAR — clean off the screen, because .nvx-bar is a
   nowrap flex row and the marketing links refuse to shrink. EN labels run ~30%
   wider than TH and an Agency carries the most chips, so that is the worst case.
   Reclaim the space instead of dropping the breakpoint to a hamburger: the search
   pill and the wallet amount collapse to their icons, and the paddings tighten. */
@media (min-width:992px) and (max-width:1199px){
  .nvx-bar{ padding:0 12px; gap:6px; }
  .nvx-nav{ margin-left:14px; }
  .nvx-nlink{ padding:0 6px; font-size:12.5px; }
  .nvx-bright{ gap:6px; }
  .nvx-bar .nvx-search{ font-size:0; gap:0; width:32px; padding:0; justify-content:center; }
  .nvx-bar .nvx-search .nvx-i{ margin:0; }
  .nvx-bar .nvx-wallet{ font-size:0; gap:0; width:32px; padding:0; justify-content:center; }
  .nvx-bar .nvx-wallet .nvx-i{ margin:0; }
}
/* Safety net at any width: the account controls must never be what gets pushed
   off-screen. Let the marketing links clip instead — losing a visible link is
   recoverable, losing the avatar means no logout and no dashboard. */
.nvx-bright{ flex-shrink:0; }
.nvx-nav{ min-width:0; overflow:hidden; }

/* ---- responsive switch ---- */
@media (max-width:991px){
  .nvx-d{ display:none !important; }
  .nvx-mbar.nvx-m{ display:flex; }
}
@media (min-width:992px){
  .nvx-m{ display:none !important; }
}