/* Base CSS from v1.1.4 (kept same) */
.fs-vertical-wrapper{position:fixed;top:0;left:0;height:100vh;width:260px;background:var(--mdp-bg,#120f0f);z-index:100000;display:flex;flex-direction:column;padding:0 0 18px 0;box-shadow:2px 0 12px rgba(0,0,0,.35);transition:width .25s ease}
.fs-vertical-wrapper.is-collapsed{width:76px}
body.has-fs-vertical{margin-left:260px;transition:margin-left .25s ease}
body.has-fs-vertical.is-collapsed{margin-left:76px}
.admin-bar .fs-vertical-wrapper{top:32px;height:calc(100vh - 32px)}
@media (max-width:782px){ .admin-bar .fs-vertical-wrapper{top:46px;height:calc(100vh - 46px)} }
.fs-logo{padding:10px;display:flex;align-items:center;justify-content:center}
.fs-logo img.fs-site-logo{display:block;width:auto;max-width:100%;height:auto;max-height:64px}
.fs-vertical-wrapper.is-collapsed .fs-logo{padding:8px}
.fs-vertical-wrapper.is-collapsed .fs-logo img.fs-site-logo{max-height:34px}
.fs-auth{display:grid;gap:12px;padding:0 10px 12px}
.fs-auth .button{width:100%;border-radius:12px;font-weight:700;padding:12px;line-height:1.2}
.fs-auth .fs-register{background:#e33;border-color:#e33;color:#fff}
.fs-auth .fs-login{background:#2f6cff;border-color:#2f6cff;color:#fff}
.fs-vertical-wrapper.is-collapsed .fs-auth{display:grid;gap:12px;padding:8px;justify-items:center}
.fs-vertical-wrapper.is-collapsed .fs-auth .button{width:44px;height:44px;padding:0;margin:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:0;line-height:1;overflow:hidden;white-space:nowrap}
.fs-vertical-menu{list-style:none;margin:0;padding:0 10px;overflow-y:auto;scrollbar-width:thin}
.fs-vertical-menu li{margin:22px 0}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu li{margin:30px 0}
.fs-vertical-menu a{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 74px;border-radius:14px;color:var(--mdp-text,#eee);text-decoration:none;background:transparent;transition:background .15s ease,color .15s ease}
.fs-vertical-wrapper:not(.is-collapsed) .fs-vertical-menu a:hover,
.fs-vertical-wrapper:not(.is-collapsed) .fs-vertical-menu .current-menu-item>a,
.fs-vertical-wrapper:not(.is-collapsed) .fs-vertical-menu .current_page_item>a{background:linear-gradient(180deg,var(--mdp-grad-start,#ffb100),var(--mdp-grad-end,#ff4600))!important;color:#fff!important;box-shadow:0 6px 12px rgba(0,0,0,.3)}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu a{background:transparent!important;box-shadow:none!important}
.fs-vertical-menu a::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;background:transparent;opacity:0;transition:opacity .15s ease}
.fs-vertical-wrapper:not(.is-collapsed) .fs-vertical-menu a::before{display:none!important}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu a:hover::before,
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu .current-menu-item>a::before,
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu .current_page_item>a::before{background:linear-gradient(180deg,var(--mdp-grad-start,#ffb100),var(--mdp-grad-end,#ff4600));opacity:1;box-shadow:0 6px 12px rgba(0,0,0,.3)}
.fs-vertical-menu a .ux-menu-link__icon,
.fs-vertical-menu a .ux-menu-link__image,
.fs-vertical-menu a .ux-menu-link__media,
.fs-vertical-menu a i[class^="icon-"]{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:28px;height:28px;line-height:28px;text-align:center;display:inline-block;object-fit:contain;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.fs-vertical-menu a img.menu-image,
.fs-vertical-menu a [class*="ux-menu-link__"] img,
.fs-vertical-menu a>img:first-child{position:absolute;left:22px;top:50%;transform:translateY(-50%);text-align:center;display:inline-block;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu{padding:0}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu a{padding-left:26px;justify-content:center}
.fs-vertical-wrapper.is-collapsed .fs-vertical-menu a span:not(.ux-menu-link__icon):not(.ux-menu-link__image):not(.ux-menu-link__media){display:none!important}
.fs-collapse-toggle{position:absolute;top:50%;right:-12px;transform:translateY(-50%);width:28px;height:28px;border-radius:24px 24px 24px 24px;background:var(--mdp-toggle,#ff5a00);box-shadow:0 2px 10px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fs-collapse-toggle .chev{border:solid var(--mdp-toggle-icon,#fff);border-width:0 3px 3px 0;display:inline-block;padding:5px;transform:rotate(135deg);transition:transform .2s ease}
.fs-vertical-wrapper.is-collapsed .fs-collapse-toggle .chev{transform:rotate(-45deg)}
@media (max-width:849px){.fs-vertical-wrapper{display:none}body.has-fs-vertical,body.has-fs-vertical.is-collapsed{margin-left:0}}

/* Auth button icons */
.fs-auth .button{display:flex;align-items:center;justify-content:center;gap:8px}
.fs-auth .button .fs-btn-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.fs-auth .button .fs-btn-ico svg{width:100%;height:100%;display:block}
/* Collapsed: keep icon visible while text shrinks */
.fs-vertical-wrapper.is-collapsed .fs-auth .button .fs-btn-text{display:none}

/* v1.2.0 - Make auth icons 44px to match menu tiles */
.fs-auth .button{min-height:44px}
.fs-auth .button .fs-btn-ico{width:44px;height:44px}
.fs-vertical-wrapper.is-collapsed .fs-auth .button{width:44px;height:44px}

/* v1.2.1 - Make auth buttons same layout/height as menu rows */
.fs-auth{gap:22px} /* spacing like li margin */
.fs-auth .button{
  position:relative;
  display:flex; align-items:center; justify-content:flex-start;
  padding:12px 16px 12px 74px; /* same left space as menu (44 tile + margins) */
  border-radius:14px;
  line-height:1.2;
}
/* icon like menu: 28px centered in the reserved 44px tile area */
.fs-auth .button .fs-btn-ico{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
}
.fs-auth .button .fs-btn-ico svg{width:100%;height:100%;display:block}

/* collapsed behavior: 44x44 square, icon centered; hide label */
.fs-vertical-wrapper.is-collapsed .fs-auth .button{width:44px;height:44px;padding:0;border-radius:10px;justify-content:center}
.fs-vertical-wrapper.is-collapsed .fs-auth .button .fs-btn-ico{position:static;transform:none;width:28px;height:28px}
.fs-vertical-wrapper.is-collapsed .fs-auth .button .fs-btn-text{display:none}

/* v1.2.2 - Mobile full-height & safe-area */
.fs-vertical-wrapper{height:100vh;height:100svh;height:100dvh}
/* iOS notch safe area */
.fs-vertical-wrapper{padding-top:env(safe-area-inset-top, 0px)}
/* Admin bar on mobile (logged-in) */
@media (max-width:782px){
  .admin-bar .fs-vertical-wrapper{top:46px;height:calc(100svh - 46px);height:calc(100dvh - 46px)}
}

/* v1.2.3 - Strong mobile full-height & pin to top/bottom */
.fs-vertical-wrapper{position:fixed; inset:0 auto 0 0; height:auto; min-height:100vh; min-height:100svh; min-height:100dvh}
/* remove accidental extra top spacing */
@media (max-width:849px){
  .fs-logo{padding-top:8px}
}
/* Admin bar (logged-in) */
@media (max-width:782px){
  .admin-bar .fs-vertical-wrapper{top:46px; bottom:0}
}

/* v1.2.4 - clickable logo -> homepage */
.fs-logo .fs-logo-link{display:flex;align-items:center;justify-content:center}

/* v1.2.5.2 - Mobile: make Đăng ký/Đăng nhập equal row height */
@media (max-width: 849px){
  .fs-vertical-wrapper .fs-auth .button{padding:12px 16px 12px 74px !important;height:auto !important;min-height:0 !important;border-radius:14px !important;display:flex;align-items:center;justify-content:flex-start;font-size:16px;line-height:1.2}
  .fs-vertical-wrapper .fs-auth .fs-btn-ico{left:22px !important;width:28px !important;height:28px !important}
  .fs-vertical-wrapper.is-collapsed .fs-auth .button{width:44px;height:44px;padding:0 !important;border-radius:10px !important;justify-content:center}
}