/* Hamburger icon: three bars morphing into a close mark via aria-expanded. */
.menu-btn-bars{position:relative;display:block;width:19px;height:13px}
.menu-btn-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.menu-btn-bars i:nth-child(1){top:0}
.menu-btn-bars i:nth-child(2){top:5.5px}
.menu-btn-bars i:nth-child(3){top:11px}
.menu-btn[aria-expanded="true"] .menu-btn-bars i:nth-child(1){top:5.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn-bars i:nth-child(3){top:5.5px;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){ .menu-btn-bars i{transition:none} }

/* Dropdown panel: reuses the login card's own visual language
   (.auth-card in google-auth.css) instead of the bespoke "liquid glass"
   treatment this used before — border/radius/box-shadow/backdrop-filter
   recipe copied directly from there, since that's the look being asked
   for ("giống đăng nhập").

   One deliberate difference: .auth-card's background is a near-transparent
   white tint (rgba(255,255,255,.06)/.015/.03) because it sits over a
   plain dark page — the tint plus blur(22px) is enough to read as a solid
   dark card. This panel sits over the hero's own busy cover photo, and a
   real-device test earlier showed backdrop-filter blur not reliably
   landing there, so the same near-transparent tint would let the photo
   and its baked-in text show straight through and overlap the menu
   labels again (the exact "trong suốt xuyên thấu" bug from before).
   Background is kept dark/near-opaque here for that reason — everything
   else (border, radius, shadow, blur) matches .auth-card as asked.

   First pass used a hand-picked navy (16,27,46→6,11,21) — a real-device
   screenshot measured pixel-by-pixel came out bluer than .auth-card's
   actual rendered color (B:R ratio 2.64 vs .auth-card's 1.93 — visibly
   more saturated navy, less neutral slate-gray). These two stops are the
   measured pixel colors from .auth-card's own screenshot directly
   (#1d212a upper → #0c111b lower), fully opaque — an exact match that
   doesn't depend on guessing how it'll blend with whatever's behind it. */
.mobile-menu{
  top:calc(64px + env(safe-area-inset-top,0px));
  left:.6rem;right:.6rem;
  /* Neutral gray, not navy — previous #1d212a/#0c111b had a blue lean
     (matched .auth-card's own measured tint). Requested plain dark gray
     instead, so R=G=B here rather than color-matching anything else.
     Lightened 3 times now (#121212-based → #242424-based → #333333-based)
     per repeated "still too dark" feedback.

     Now made translucent ("xám trong, không xám đục") instead of fully
     opaque. First pass (.88/.93) was still "chưa đủ trong" — lowered
     further to .74/.82. Below this the hero's busy cover photo starts
     reading clearly enough to risk the old overlap-with-text bug if
     backdrop-filter blur doesn't land, so this is close to the floor. */
  background:linear-gradient(165deg,rgba(107,107,107,.74),rgba(66,66,66,.82));
  border:1px solid rgba(255,255,255,.14);
  border-radius:1.75rem;
  /* Depth pass: a flat drop-shadow alone reads as a cutout, not a raised
     object. Adds a crisp top highlight + bottom dark line (bevel edges,
     like the panel has physical thickness), a soft glow hugging the top
     third (lit from above) and a soft dark pool near the bottom
     (shadow gathering low) — all sized in tens of px, not 1-3px hairlines,
     since this panel runs to hundreds of px tall. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.4),
    inset 0 18px 28px -20px rgba(255,255,255,.16),
    inset 0 -26px 36px -24px rgba(0,0,0,.5),
    0 30px 70px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  backdrop-filter:blur(22px) saturate(120%);
  padding:.65rem;
  gap:0;
  overflow:hidden;
  animation:mmPanelIn .22s ease-out both;
}
/* Panel fades/scales in fast, then every row inside pops out right
   after it, one after another ("xổ ra như nhảy ra từ màn hình"). Delay
   is hardcoded per group+position since the item count per group is
   fixed in the markup (header()) — simplest way to get a true sequence
   across nested .mm-group blocks without JS. Re-plays every open since
   toggling the drawer's [hidden] attribute takes it out of and back
   into the render tree, which resets CSS animations for free. */
@keyframes mmPanelIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes mmItemPop{from{opacity:0;transform:translateY(16px) scale(.82)}to{opacity:1;transform:translateY(0) scale(1)}}
.mm-item,.mm-search,.mm-profile{animation:mmItemPop .42s cubic-bezier(.34,1.56,.64,1) backwards}
.mm-profile{animation-delay:.03s}
.mm-search{animation-delay:.08s}
.mm-group:nth-of-type(1) .mm-item:nth-child(1){animation-delay:.13s}
.mm-group:nth-of-type(1) .mm-item:nth-child(2){animation-delay:.18s}
.mm-group:nth-of-type(1) .mm-item:nth-child(3){animation-delay:.23s}
.mm-group:nth-of-type(2) .mm-item:nth-child(1){animation-delay:.28s}
.mm-group:nth-of-type(2) .mm-item:nth-child(2){animation-delay:.33s}
.mm-group:nth-of-type(3) .mm-item:nth-child(1){animation-delay:.38s}
.mm-group:nth-of-type(3) .mm-item:nth-child(2){animation-delay:.43s}
.mm-group:nth-of-type(4) .mm-item:nth-child(1){animation-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mm-item,.mm-search,.mm-profile{animation:none}
}
/* Identity header at the top of the panel when logged in — avatar +
   display name + email, reusing the same .member-avatar/.member-identity
   components the mailbox member list already uses elsewhere, so the
   fallback-to-letter / async-image behavior (avatar-raster-override.js)
   just works here too without any extra wiring. */
.mm-profile{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .6rem .9rem;text-decoration:none;
  border-bottom:1px solid rgba(140,170,210,.14);margin-bottom:.5rem;
}
.mm-profile .member-avatar{width:42px;height:42px;flex-basis:42px}
.mm-profile .member-identity strong{display:block;color:#e7ecf6;font:600 1rem/1.25 "Be Vietnam Pro",system-ui,sans-serif}
.mm-profile .member-identity span{display:block;color:#8fa9c2;font-size:.78rem}
.mm-profile:active{opacity:.85}
.mm-group{display:flex;flex-direction:column;gap:.1rem;padding:.2rem 0}
.mm-group+.mm-group{border-top:1px solid rgba(140,170,210,.14);margin-top:.2rem;padding-top:.5rem}
.mm-item{
  display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.7rem .6rem;border-radius:.75rem;background:transparent;border:0;appearance:none;
  /* JetBrains Mono as requested (matching the ĐÃ HOÀN THÀNH/CỔ ĐẠI tag
     look) — confirmed working correctly for Vietnamese diacritics on a
     real device (Safari/iOS renders the combining marks fine even
     though this font broke them in Chromium testing).

     First pass used weight 700 + letter-spacing .01em, which read as
     visibly bolder/tighter than the banner's own .sh-tag rule (weight
     600, letter-spacing .06em, font-size .66rem) — not the same font
     treatment despite being the same family. Matched closer here:
     lighter weight (500 — thinner is fine per request) and wider
     tracking, closer to that tag's own squared-off, spaced-out feel. */
  color:#e7ecf6;font:500 .8rem/1.2 "JetBrains Mono",monospace;letter-spacing:.035em;text-transform:uppercase;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease;
}
.mm-item:hover,.mm-item:active{background:rgba(140,170,210,.09)}
/* Log out — set apart from the regular nav rows (own group, extra gap
   above). Cyan instead of red per request, matching the site's own
   accent color (#26c2dc, used for tags/hero accents elsewhere) rather
   than a danger-red tone. */
.mm-group--danger{margin-top:.3rem}
.mm-item--danger{color:#26c2dc}
.mm-item--danger svg{color:#26c2dc}
.mm-item--danger:hover,.mm-item--danger:active{background:rgba(38,194,220,.12)}
.mm-item:focus-visible{outline:1px solid #9589e6;outline-offset:2px}
.mm-item svg{
  flex:0 0 auto;width:1.3rem;height:1.3rem;color:#8fa9c2;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.mm-item span{flex:1;min-width:0}
#menuResonanceBtn svg{color:#43dfe9}
.mm-item-dot{
  margin-left:auto;width:.5rem;height:.5rem;border-radius:50%;background:#43dfe9;flex:0 0 auto;
  animation:mmDotPulse 2.4s ease-out infinite;
}
@keyframes mmDotPulse{0%{box-shadow:0 0 0 0 rgba(67,223,233,.45)}70%{box-shadow:0 0 0 6px rgba(67,223,233,0)}100%{box-shadow:0 0 0 0 rgba(67,223,233,0)}}
@media(prefers-reduced-motion:reduce){ .mm-item-dot{animation:none} }