/* Unified client/auth light-dark-system compatibility layer. */
:root {
  color-scheme: light;
  --vn-surface: #ffffff;
  --vn-surface-soft: #f6f7fb;
  --vn-text: #17191f;
  --vn-muted: #6b7280;
  --vn-border: #e5e7eb;
  --vn-input: #ffffff;
}
html[data-theme-mode="dark"] {
  color-scheme: dark;
  --vn-surface: #24272d;
  --vn-surface-soft: #181820;
  --vn-text: #f4f6fb;
  --vn-muted: #aeb6c6;
  --vn-border: #474a56;
  --vn-input: #24272d;
}
html, body { transition: background-color .18s ease, color .18s ease; }
body { background-color: var(--bodybg-color, var(--vn-surface-soft)); color: var(--vn-text); }
body.dark .text-dark, html[data-theme-mode="dark"] .text-dark { color: var(--vn-text) !important; }
body.dark .text-white-800, html[data-theme-mode="dark"] .text-white-800 { color: #f4f6fb !important; }
body.light .text-white, html[data-theme-mode="light"] .form-content-box .text-white { color: #17191f !important; }
body.light .text-white-800 { color: #17191f !important; }
body.light .form-content-box p, body.light .form-content-box label { color: #4b5563; }

.sign-in-bg { background: var(--vn-surface-soft) !important; }
.sign-in-bg .main-content-box { background: var(--vn-surface) !important; border-color: var(--vn-border) !important; box-shadow: 0 20px 60px rgba(15, 23, 42, .08); }
.form-content-box { background: var(--vn-surface) !important; color: var(--vn-text) !important; }
.form-content-box h1,.form-content-box h2,.form-content-box h3,.form-content-box h4,.form-content-box h5,.form-content-box h6 { color: var(--vn-text) !important; }
.form-content-box p,.form-content-box .form-check-label,.form-content-box .text-secondary { color: var(--vn-muted) !important; }
.form-content-box .form-control,
.form-content-box .form-select {
  background: var(--vn-input) !important;
  color: var(--vn-text) !important;
  border-color: var(--vn-border) !important;
  -webkit-text-fill-color: var(--vn-text);
}
.form-content-box .form-floating > label { color: var(--vn-muted) !important; }
.form-content-box .form-control:focus { border-color: rgb(var(--primary, 15,98,106)) !important; box-shadow: 0 0 0 .2rem rgba(var(--primary,15,98,106),.14) !important; }
.form-content-box .btn-light-white { background: var(--vn-surface-soft) !important; color: var(--vn-text) !important; border-color: var(--vn-border) !important; }
.form-content-box .app-divider-v p { background: var(--vn-surface) !important; color: var(--vn-muted) !important; }

.vn-theme-control { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.vn-theme-control__home { color:var(--vn-text); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.vn-theme-control__choices { display:inline-flex; padding:4px; border:1px solid var(--vn-border); background:var(--vn-surface-soft); border-radius:12px; gap:3px; }
.vn-theme-control [data-theme-value] { width:36px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--vn-muted); cursor:pointer; }
.vn-theme-control [data-theme-value].active { background:var(--vn-surface); color:var(--vn-text); box-shadow:0 1px 5px rgba(15,23,42,.1); }
.vn-theme-control svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.vn-theme-dropdown .dropdown-menu { min-width:180px; background:var(--vn-surface); border-color:var(--vn-border); }
.vn-theme-dropdown [data-theme-value] { width:100%; border:0; background:transparent; color:var(--vn-text); padding:9px 12px; display:flex; align-items:center; gap:10px; border-radius:8px; }
.vn-theme-dropdown [data-theme-value]:hover,.vn-theme-dropdown [data-theme-value].active { background:var(--vn-surface-soft); }

html[data-theme-mode="dark"] .card,
html[data-theme-mode="dark"] .dropdown-menu,
html[data-theme-mode="dark"] .modal-content,
html[data-theme-mode="dark"] .offcanvas,
html[data-theme-mode="dark"] .list-group-item { border-color:var(--vn-border); }
html[data-theme-mode="dark"] input:-webkit-autofill,
html[data-theme-mode="dark"] input:-webkit-autofill:hover,
html[data-theme-mode="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color:var(--vn-text); -webkit-box-shadow:0 0 0 1000px var(--vn-input) inset; transition:background-color 9999s ease-out 0s; }

.admin-auth-note { border:1px solid var(--vn-border); background:var(--vn-surface-soft); color:var(--vn-muted); border-radius:12px; padding:12px 14px; margin-bottom:16px; }
.admin-auth-note strong { color:var(--vn-text); }
.admin-approval-status { text-align:center; padding:24px 8px; }
.admin-approval-status .approval-icon { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--vn-surface-soft); font-size:34px; }

/* Admin authentication reuses the customer authentication shell. */
.vn-admin-auth-note { border:1px solid var(--vn-border); background:var(--vn-surface-soft); color:var(--vn-muted); border-radius:12px; padding:13px 15px; line-height:1.55; }
.vn-admin-auth-note strong { color:var(--vn-text); }
.vn-admin-verify-icon { width:76px; height:76px; margin:0 auto; display:grid; place-items:center; border-radius:22px; background:var(--vn-surface-soft); color:var(--vn-text); border:1px solid var(--vn-border); font-size:36px; }
.vn-admin-approval-status { padding:14px 16px; border:1px solid var(--vn-border); border-radius:12px; background:var(--vn-surface-soft); color:var(--vn-muted); font-weight:600; }
.vn-admin-approval-status.is-approved { border-color:#16a34a; color:#15803d; background:rgba(22,163,74,.08); }
.vn-admin-approval-status.is-denied { border-color:#dc2626; color:#b91c1c; background:rgba(220,38,38,.08); }
html[data-theme-mode="dark"] .vn-admin-approval-status.is-approved { color:#86efac; }
html[data-theme-mode="dark"] .vn-admin-approval-status.is-denied { color:#fca5a5; }

/* Uploaded brand logos must keep their original pixels in every client theme. */
.vn-brand-logo,
body.dark nav .app-logo .logo img.vn-brand-logo,
nav.dark-sidebar .app-logo .logo img.vn-brand-logo,
html[data-theme-mode="dark"] .vn-brand-logo {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Mobile-safe brand assets and theme controls. */
@media (max-width: 575.98px) {
  .vn-brand-logo { max-width: 100%; height: auto; object-fit: contain; }
  .vn-theme-control { align-items:flex-start; gap:8px; }
  .vn-theme-control__choices { flex:0 0 auto; }
  .vn-theme-control__home { min-width:0; }
  .form-content-box { min-width:0; }
  .form-content-box .input-group { flex-wrap:nowrap; }
}

/* --------------------------------------------------------------------------
   Customer UI typography + mobile shell hardening
   Matches the compact Rubik typography used by the reference customer UI.
   Loaded after the template CSS so the application remains usable even when
   the remote webfont is unavailable (never fall back to a serif face).
   -------------------------------------------------------------------------- */
:root {
  --font-rubik: "Rubik", "Segoe UI", Arial, Helvetica, sans-serif;
  --vn-client-font: "Rubik", "Segoe UI", Arial, Helvetica, sans-serif;
}
body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.tooltip,
.popover,
table {
  font-family: var(--vn-client-font) !important;
}
/* Icon packs keep the explicit font-family declared by their vendor CSS. */

/* Mobile-only bottom navigation/popover. Hidden on desktop. */
.vn-mobile-nav,
.vn-mobile-services-backdrop,
.vn-mobile-services-popover { display: none; }

@media (max-width: 767.98px) {
  html, body { width: 100%; min-width: 0 !important; max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: 76px; }
  body.vn-mobile-sidebar-open { overflow: hidden; }

  .app-wrapper {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* Real off-canvas sidebar. Template's width:0 mobile rule left children
     overflowing into the page, which produced the narrow broken column. */
  .app-wrapper > nav:not(.horizontal-sidebar) {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
    height: 100dvh !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform .22s ease !important;
    overflow: hidden !important;
    visibility: hidden;
    background: rgba(var(--white), 1) !important;
    box-shadow: 14px 0 36px rgba(15, 23, 42, .18) !important;
    z-index: 1060 !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar).semi-nav {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-logo,
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
  .app-wrapper > nav:not(.horizontal-sidebar) .main-nav {
    width: 100% !important;
    min-width: 0 !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-logo {
    overflow: visible !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo {
    width: 100% !important;
    min-width: 0 !important;
    padding: 1rem !important;
    overflow: visible !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo img.vn-brand-logo {
    width: auto !important;
    max-width: 180px !important;
    max-height: 42px !important;
    float: none !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav {
    height: calc(100dvh - 162px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .main-nav > li:not(.menu-title) > a,
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .main-nav > li:not(.menu-title) ul li {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  body.vn-mobile-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(1px);
  }

  /* Main shell may never inherit desktop sidebar width on phones. */
  .app-wrapper .app-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .app-wrapper .app-content > div,
  .app-wrapper .app-content main,
  .app-wrapper .app-content main > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .app-wrapper .app-content main { display: block !important; overflow: visible !important; }
  .app-wrapper .app-content main > .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

  header.header-main {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    padding-left: 0 !important;
  }
  header.header-main .container-fluid { padding: .65rem 14px !important; }
  header.header-main .container-fluid > .row { width: 100% !important; margin: 0 !important; flex-wrap: nowrap !important; }
  header.header-main .header-left { min-width: 0; flex: 1 1 auto; width: auto; }
  header.header-main .header-right { width: auto; flex: 0 0 auto; }
  header.header-main .header-right > ul { gap: 5px; margin: 0; padding: 0; }
  header.header-main .header-toggle { flex: 0 0 auto; }
  header.header-main .header-searchbar { min-width: 0; }
  header.header-main .header-searchbar form { margin-left: .45rem !important; margin-right: .35rem !important; }
  header.header-main .header-searchbar .form-control {
    min-width: 0 !important;
    height: 38px;
    padding-left: 31px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    text-overflow: ellipsis;
  }
  header.header-main .header-searchbar i { left: 10px !important; }
  header.header-main .head-icon { width: 38px; height: 38px; min-width: 38px; display: grid !important; place-items: center; padding: 0 !important; }

  /* Prevent headings/cards from breaking into one character per line. */
  .app-content h1, .app-content h2, .app-content h3, .app-content h4,
  .app-content h5, .app-content h6, .app-content p, .app-content a,
  .app-content span, .app-content strong, .app-content small {
    word-break: normal !important;
    overflow-wrap: break-word;
  }
  .app-content .row > [class*="col-"] { min-width: 0; }
  .app-content .card, .app-content .card-body, .app-content .card-header { min-width: 0; max-width: 100%; }
  .app-content .card-body { padding: 1rem; }
  .main-title { font-size: 1.35rem !important; line-height: 1.25 !important; }
  .app-line-breadcrumbs { flex-wrap: wrap; }

  .vn-user-footer {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 14px 18px !important;
    text-align: center !important;
  }
  .vn-user-footer .container-fluid { padding: 0 !important; }
  .vn-user-footer .footer-text { text-align: center !important; line-height: 1.5; font-size: 12px !important; }

  .vn-mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 1045;
    height: 62px;
    padding: 5px 7px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    border: 1px solid var(--vn-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--vn-surface) 94%, transparent);
    box-shadow: 0 10px 30px rgba(15,23,42,.16);
    backdrop-filter: blur(16px);
  }
  .vn-mobile-nav__item {
    appearance: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 12px;
    color: var(--vn-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 500;
  }
  .vn-mobile-nav__item i { font-size: 20px; line-height: 1; }
  .vn-mobile-nav__item.active { color: rgb(var(--primary)); background: rgba(var(--primary), .08); }
  .vn-mobile-nav__plus {
    width: 31px; height: 31px; margin-top: -17px; margin-bottom: 1px;
    border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: rgb(var(--primary));
    border: 4px solid var(--vn-surface); box-sizing: content-box;
    box-shadow: 0 5px 14px rgba(var(--primary), .24);
  }
  .vn-mobile-nav__deposit i { font-size: 17px; }

  .vn-mobile-services-backdrop {
    position: fixed; inset: 0; z-index: 1070;
    background: rgba(15,23,42,.42); display: block;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .vn-mobile-services-popover {
    position: fixed; left: 10px; right: 10px; bottom: 78px; z-index: 1075;
    max-height: min(72dvh, 620px); overflow-y: auto;
    display: block; padding: 14px;
    border: 1px solid var(--vn-border); border-radius: 18px;
    background: var(--vn-surface); color: var(--vn-text);
    box-shadow: 0 18px 48px rgba(15,23,42,.22);
    transform: translateY(18px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
  }
  body.vn-mobile-services-open .vn-mobile-services-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.vn-mobile-services-open .vn-mobile-services-popover { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .vn-mobile-services-popover__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .vn-mobile-services-popover__head strong { display:block; font-size:16px; color:var(--vn-text); }
  .vn-mobile-services-popover__head small { display:block; margin-top:2px; color:var(--vn-muted); font-size:11px; }
  .vn-mobile-services-popover__close { width:34px; height:34px; border:1px solid var(--vn-border); border-radius:10px; background:var(--vn-surface-soft); color:var(--vn-text); display:grid; place-items:center; }
  .vn-mobile-services-groups { display:grid; gap:8px; }
  .vn-mobile-service-group { border:1px solid var(--vn-border); border-radius:12px; padding:10px; }
  .vn-mobile-service-group.active { border-color:rgba(var(--primary),.35); background:rgba(var(--primary),.04); }
  .vn-mobile-service-group__title { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--vn-text); }
  .vn-mobile-service-group__title .vn-nav-icon { font-size:18px; color:rgb(var(--primary)); }
  .vn-mobile-service-group__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
  .vn-mobile-service-group__actions a { padding:8px 9px; border-radius:9px; background:var(--vn-surface-soft); color:var(--vn-muted); text-align:center; font-size:11px; font-weight:500; }
  .vn-mobile-service-group__actions a.active { color:rgb(var(--primary)); background:rgba(var(--primary),.09); }
  .vn-mobile-services-invoice { margin-top:10px; padding:10px 11px; border-radius:11px; display:flex; align-items:center; gap:8px; color:var(--vn-text); background:var(--vn-surface-soft); }
  .vn-mobile-services-invoice > i:last-child { margin-left:auto; }
}

@media (max-width: 420px) {
  header.header-main .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
  header.header-main .header-searchbar form { margin-left: .3rem !important; margin-right: .2rem !important; }
  header.header-main .header-searchbar .form-control { font-size: 12px !important; }
  header.header-main .head-icon { width: 35px; height: 35px; min-width: 35px; }
  .app-wrapper .app-content main > .container-fluid { padding-left: 11px !important; padding-right: 11px !important; }
}


/* ========================================================================== 
   HARD MOBILE SHELL FIX (2026-08-30)
   `.semi-nav` belongs to the original desktop admin template and must never
   reserve width on customer phones. `vn-mobile-mode` is set before first paint
   and reinforced by trungtam-user.js, so these rules also work when a browser
   mis-evaluates an old cached template breakpoint.
   ========================================================================== */
html.vn-mobile-mode,
html.vn-mobile-mode body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html.vn-mobile-mode body { padding-bottom: 76px !important; }
html.vn-mobile-mode .app-wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* CLOSED by default. This intentionally beats both nav{} and .semi-nav{}. */
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar),
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar).semi-nav {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(86vw, 320px) !important;
  min-width: 0 !important;
  max-width: 320px !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate3d(-105%,0,0) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: var(--vn-surface) !important;
  box-shadow: 14px 0 36px rgba(15,23,42,.18) !important;
  transition: transform .22s ease, opacity .18s ease, visibility .18s ease !important;
  z-index: 1085 !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar).vn-sidebar-open {
  transform: translate3d(0,0,0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .nav-profile,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo {
  overflow: visible !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo {
  padding: 16px !important;
  overflow: visible !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo img.vn-brand-logo {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  max-width: 190px !important;
  max-height: 46px !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav {
  height: calc(100dvh - 162px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav li,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav a,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav span {
  font-size: inherit;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) > a {
  display: flex !important;
  font-size: 15px !important;
  text-align: left !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) ul {
  height: auto;
}

/* Critical: clear every desktop/collapsed-sidebar indentation. */
html.vn-mobile-mode .app-wrapper > nav ~ .app-content,
html.vn-mobile-mode .app-wrapper > nav.semi-nav ~ .app-content,
html.vn-mobile-mode .app-wrapper .app-content {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
html.vn-mobile-mode .app-wrapper > nav ~ .app-content header.header-main,
html.vn-mobile-mode .app-wrapper > nav.semi-nav ~ .app-content header.header-main,
html.vn-mobile-mode header.header-main {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.vn-mobile-mode .app-content > div,
html.vn-mobile-mode .app-content main,
html.vn-mobile-mode .app-content main > .container-fluid,
html.vn-mobile-mode .app-content main .container,
html.vn-mobile-mode .app-content main .container-fluid,
html.vn-mobile-mode .vn-user-footer,
html.vn-mobile-mode .vn-user-footer .container-fluid {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.vn-mobile-mode .app-content main {
  display: block !important;
  overflow: visible !important;
}
html.vn-mobile-mode .app-content main > .container-fluid,
html.vn-mobile-mode .app-content main .container-fluid {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
html.vn-mobile-mode .app-content .row {
  min-width: 0 !important;
  max-width: 100% !important;
}
html.vn-mobile-mode .app-content .row > [class*="col-"] {
  min-width: 0 !important;
  max-width: 100% !important;
}
html.vn-mobile-mode .app-content h1,
html.vn-mobile-mode .app-content h2,
html.vn-mobile-mode .app-content h3,
html.vn-mobile-mode .app-content h4,
html.vn-mobile-mode .app-content h5,
html.vn-mobile-mode .app-content h6,
html.vn-mobile-mode .app-content p,
html.vn-mobile-mode .app-content a,
html.vn-mobile-mode .app-content span,
html.vn-mobile-mode .app-content strong {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal;
}
html.vn-mobile-mode .app-content .main-title {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
}
html.vn-mobile-mode .app-content .card,
html.vn-mobile-mode .app-content .card-body,
html.vn-mobile-mode .app-content .card-header {
  min-width: 0 !important;
  max-width: 100% !important;
}
html.vn-mobile-mode .vn-user-footer,
html.vn-mobile-mode .app-wrapper > nav.semi-nav ~ .app-content footer {
  position: static !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 12px 18px !important;
  text-align: center !important;
}
html.vn-mobile-mode .vn-user-footer .footer-text {
  text-align: center !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
}

html.vn-mobile-mode body.vn-mobile-sidebar-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(1px);
}
html.vn-mobile-mode .vn-mobile-nav { display: grid !important; }
html.vn-mobile-mode .vn-mobile-services-backdrop,
html.vn-mobile-mode .vn-mobile-services-popover { display: block; }

/* ========================================================================== 
   CUSTOMER NAV VISUAL REFRESH (2026-08-30)
   Reference: clean Vietnamese sans typography + thin outline navigation icons.
   ========================================================================== */
:root {
  --vn-client-font: "Be Vietnam Pro", "Segoe UI", Arial, Helvetica, sans-serif;
}

/* Tabler is the primary navigation icon family. Keep icon glyph fonts isolated
   from the customer text font override. */
.ti,
[class^="ti-"],
[class*=" ti-"] {
  font-family: "tabler-icons" !important;
  font-style: normal !important;
}
.vn-nav-icon {
  font-size: 21px;
  line-height: 1;
  flex: 0 0 24px;
  width: 24px;
  text-align: center;
}
.vn-mobile-close-icon { display: none; }

@media (max-width: 767.98px) {
  html.vn-mobile-mode body,
  html.vn-mobile-mode button,
  html.vn-mobile-mode input,
  html.vn-mobile-mode select,
  html.vn-mobile-mode textarea {
    font-family: var(--vn-client-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Sidebar typography/icon rhythm mirrors the supplied mobile reference. */
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo {
    border-bottom: 1px solid var(--vn-border) !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo .logo {
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .toggle-semi-nav {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    color: rgb(var(--primary)) !important;
    background: rgba(var(--primary), .10) !important;
    box-shadow: none !important;
    z-index: 4;
  }
  html.vn-mobile-mode .vn-desktop-collapse-icon { display: none !important; }
  html.vn-mobile-mode .vn-mobile-close-icon { display: inline-block !important; font-size: 23px !important; }

  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .nav-profile {
    min-height: 88px;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--vn-border);
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .nav-profile h6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .nav-profile p {
    font-size: 12px !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav {
    height: calc(100dvh - 166px) !important;
    padding: 8px 12px 28px !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .main-nav {
    margin-top: 0 !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .menu-title {
    padding: 16px 9px 8px !important;
    margin: 0 !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .menu-title span {
    font-family: var(--vn-client-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgb(var(--primary)) !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) > a {
    min-height: 48px !important;
    padding: 11px 13px !important;
    margin: 2px 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--vn-client-font) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: var(--vn-text) !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) > a .vn-nav-icon {
    font-size: 22px !important;
    color: currentColor !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.active > a,
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-open > a {
    color: rgb(var(--primary)) !important;
    background: rgba(var(--primary), .11) !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) ul li a {
    font-family: var(--vn-client-font) !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  /* Header icons: thin outline, circular controls as in the reference. */
  html.vn-mobile-mode header.header-main .header-toggle i,
  html.vn-mobile-mode header.header-main .head-icon > i {
    font-size: 21px !important;
    font-weight: 400 !important;
  }

  /* Mobile footer is the fixed five-action navigation from the reference.
     The desktop copyright footer is deliberately hidden on phone screens. */
  html.vn-mobile-mode body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
  html.vn-mobile-mode .vn-user-footer {
    display: none !important;
  }
  html.vn-mobile-mode .vn-mobile-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(82px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 5px env(safe-area-inset-bottom) !important;
    border: 0 !important;
    border-top: 1px solid var(--vn-border) !important;
    border-radius: 0 !important;
    background: var(--vn-surface) !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .08) !important;
    backdrop-filter: none !important;
    z-index: 1090 !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__item {
    position: relative;
    min-width: 0 !important;
    height: 64px !important;
    padding: 5px 1px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #777b80 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--vn-client-font) !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__item > i {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__item.active {
    color: rgb(var(--primary)) !important;
    font-weight: 600 !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__deposit {
    overflow: visible !important;
    color: var(--vn-text) !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__plus {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    margin: -38px 0 0 !important;
    border: 5px solid var(--vn-surface) !important;
    border-radius: 50% !important;
    box-sizing: content-box !important;
    display: grid !important;
    place-items: center !important;
    background: rgb(var(--primary)) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(var(--primary), .28) !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__plus .ti {
    font-size: 29px !important;
    line-height: 1 !important;
    color: #fff !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__deposit > span:last-child {
    margin-top: 1px;
    font-weight: 600;
  }

  /* Popover now rises from the full-width footer. */
  html.vn-mobile-mode .vn-mobile-services-popover {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px !important;
  }
}


/* ========================================================================== 
   CUSTOMER SIDEBAR - ACTIVE CHILD ROUTE
   Keep an expanded parent visually distinct while highlighting only the
   submenu route that actually matches the current URL.
   ========================================================================== */
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 38px;
  padding: 8px 12px 8px 20px !important;
  border-radius: 9px !important;
  color: var(--vn-muted) !important;
  background: transparent !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  width: 3px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
  transition: background-color .16s ease, height .16s ease !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child:not(.active) > a.vn-nav-child__link:hover {
  color: rgb(var(--primary)) !important;
  background: rgba(var(--primary), .07) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link.active,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"] {
  color: rgb(var(--primary)) !important;
  background: rgba(var(--primary), .12) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(var(--primary), .10) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link::before,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link.active::before,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"]::before {
  height: 26px !important;
  background: rgb(var(--primary)) !important;
}
body.dark .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link,
html[data-theme-mode="dark"] .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link {
  color: var(--vn-muted) !important;
}
body.dark .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link,
html[data-theme-mode="dark"] .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link,
body.dark .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"],
html[data-theme-mode="dark"] .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"] {
  color: rgb(var(--primary)) !important;
  background: rgba(var(--primary), .14) !important;
}

/* ========================================================================== 
   LOCAL SVG ICON SYSTEM (2026-08-30)
   Customer shell icons are inline SVG so they cannot disappear when an icon
   font, CDN, cache layer or MIME configuration fails.
   ========================================================================== */
.vn-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
  overflow: visible;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}
.vn-nav-icon {
  width: 1.35em !important;
  height: 1.35em !important;
}
.vn-nav-chevron {
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
  opacity: .7;
  transition: transform .2s ease;
}
.vn-nav-parent.vn-open > .vn-nav-parent__link .vn-nav-chevron,
.vn-nav-parent__link[aria-expanded="true"] .vn-nav-chevron {
  transform: rotate(90deg);
}
/* The original template draws chevrons with an icon-font pseudo element.
   Disable it because the customer navigation now owns its SVG chevron. */
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > a::after,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > a[aria-expanded="true"]::after,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > a[aria-expanded="false"]::after {
  content: none !important;
  display: none !important;
}
.header-main .header-toggle .vn-icon,
.header-main .head-icon .vn-icon {
  width: 1em;
  height: 1em;
  color: rgb(var(--secondary), .9);
}
.header-main .header-toggle .vn-icon { font-size: 23px; }
.header-main .head-icon .vn-icon { font-size: 23px; }
.header-main .head-icon:hover .vn-icon { color: rgb(var(--primary)); }
.app-form.app-icon-form .vn-search-icon {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  color: var(--vn-muted) !important;
}
.vn-theme-current-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  position: relative;
}
.vn-theme-current-icon .vn-icon {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
}
.vn-theme-current-icon .vn-theme-icon-sun { display: none; }
.vn-theme-current-icon[data-theme-icon-mode="dark"] .vn-theme-icon-moon { display: none; }
.vn-theme-current-icon[data-theme-icon-mode="dark"] .vn-theme-icon-sun { display: block; }
.vn-theme-dropdown .dropdown-menu button .vn-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.profile-menu-dropdown .dropdown-item .vn-icon {
  width: 20px;
  height: 20px;
}
.app-line-breadcrumbs .vn-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
.go-top .vn-icon { width: 18px; height: 18px; }

@media (max-width: 767.98px) {
  /* Mobile keeps the 3 header actions usable: language, theme and account.
     Translation/country controls are removed only from footer/bottom-nav surfaces. */
  html.vn-mobile-mode .vn-mobile-nav [data-lang],
  html.vn-mobile-mode .vn-mobile-nav [class*="flag-icon"],
  html.vn-mobile-mode .vn-user-footer [data-lang],
  html.vn-mobile-mode .vn-user-footer [class*="flag-icon"] {
    display: none !important;
  }
  html.vn-mobile-mode .header-language,
  html.vn-mobile-mode #lang_selector,
  html.vn-mobile-mode .header-theme,
  html.vn-mobile-mode .header-profile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
  }
  html.vn-mobile-mode header.header-main .header-right > ul {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  html.vn-mobile-mode header.header-main .header-toggle .vn-icon,
  html.vn-mobile-mode header.header-main .head-icon .vn-icon {
    width: 21px !important;
    height: 21px !important;
    font-size: 21px !important;
    stroke-width: 1.8;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li:not(.menu-title) > a .vn-nav-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    color: currentColor !important;
  }
  html.vn-mobile-mode .vn-nav-chevron {
    width: 17px !important;
    height: 17px !important;
  }
  html.vn-mobile-mode .vn-mobile-services-popover .vn-icon {
    width: 21px;
    height: 21px;
  }
  html.vn-mobile-mode .vn-mobile-nav__item > .vn-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
  }
  html.vn-mobile-mode .vn-mobile-nav__plus .vn-icon {
    width: 29px !important;
    height: 29px !important;
    color: #fff !important;
  }
}

@keyframes vn-icon-spin { to { transform: rotate(360deg); } }
.vn-spin { display: inline-block; animation: vn-icon-spin .8s linear infinite; }


/* CUSTOMER MOBILE HEADER + FOOTER CLEANUP FINAL */
.gtranslate_wrapper.vn-gtranslate-engine,
body > .gtranslate_wrapper,
.gt_switcher_wrapper,
.goog-te-banner-frame.skiptranslate {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  inset: auto auto 0 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  clip-path: inset(100%) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body { top: 0 !important; }
@media (max-width: 767.98px) {
  html.vn-mobile-mode header.header-main .header-right {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }
  html.vn-mobile-mode header.header-main .header-right > ul > li { margin: 0 !important; }
  html.vn-mobile-mode header.header-main .header-language .vn-language-trigger,
  html.vn-mobile-mode header.header-main .header-theme > button,
  html.vn-mobile-mode header.header-main .header-profile > a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: grid !important;
    place-items: center !important;
  }
  html.vn-mobile-mode header.header-main .lang-flag,
  html.vn-mobile-mode header.header-main .lang-flag .flag {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  html.vn-mobile-mode header.header-main .header-left { min-width: 0 !important; }
  html.vn-mobile-mode header.header-main .header-searchbar { min-width: 0 !important; }
}
@media (max-width: 390px) {
  html.vn-mobile-mode header.header-main .header-searchbar .form-control {
    padding-right: 6px !important;
    font-size: 11px !important;
  }
  html.vn-mobile-mode header.header-main .header-right > ul { gap: 4px !important; }
  html.vn-mobile-mode header.header-main .header-language .vn-language-trigger,
  html.vn-mobile-mode header.header-main .header-theme > button,
  html.vn-mobile-mode header.header-main .header-profile > a {
    width: 34px !important; height: 34px !important; min-width: 34px !important;
  }
}

/* ========================================================================== 
   FULL CUSTOMER PAGE / STATIC FOOTER FIX (2026-09-02)
   The upstream admin template fixes the footer to the viewport and sets
   .app-content to overflow:hidden. On long public pages this overlays the last
   cards and can make the guest homepage appear truncated. Customer pages use a
   normal document flow instead.
   ========================================================================== */
@media (min-width: 768px) {
  .app-wrapper {
    min-height: 100vh;
    align-items: stretch;
  }

  .app-wrapper .app-content {
    min-height: 100vh !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  .app-wrapper .app-content > div {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .app-wrapper .app-content main {
    flex: 1 0 auto;
    min-height: 0;
    padding-bottom: 24px;
    overflow: visible !important;
  }

  .app-wrapper .app-content .vn-user-footer,
  .app-wrapper .semi-nav ~ .app-content .vn-user-footer,
  div > .vn-user-footer {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    flex: 0 0 auto;
    margin: auto 0 0 !important;
    padding: 12px 24px !important;
    z-index: auto !important;
  }
}

/* ========================================================================== 
   CUSTOMER SIDEBAR - SYSTEM THEME COLOR (2026-09-02)
   Every sidebar accent is derived from the system's configured `theme_color`.
   `views/header.php` writes that value into --primary / --td-brand-color, so
   changing the primary color in admin automatically recolors the whole menu.
   ========================================================================== */
:root {
  --vn-menu-accent: var(--td-brand-color, rgb(var(--primary)));
  --vn-menu-accent-rgb: var(--td-accent-rgb, var(--primary));
}

/* Section labels */
.app-wrapper > nav:not(.horizontal-sidebar) .app-nav .main-nav > li.menu-title > span {
  color: rgb(var(--vn-menu-accent-rgb)) !important;
}

/* Parent / standalone route: active state uses exactly the configured system color. */
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent.vn-open > a.vn-nav-parent__link,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > a.vn-nav-parent__link[aria-expanded="true"],
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.no-sub.active > a {
  color: #fff !important;
  background: rgb(var(--vn-menu-accent-rgb)) !important;
  box-shadow: 0 7px 18px rgba(var(--vn-menu-accent-rgb), .18) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent.vn-open > a.vn-nav-parent__link .vn-nav-icon,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent.vn-open > a.vn-nav-parent__link .vn-nav-chevron,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.no-sub.active > a .vn-nav-icon {
  color: #fff !important;
}

/* Parent / standalone hover also follows the system color, without hard-coded orange. */
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent:not(.vn-open) > a.vn-nav-parent__link:hover,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.no-sub:not(.active) > a:hover {
  color: rgb(var(--vn-menu-accent-rgb)) !important;
  background: rgba(var(--vn-menu-accent-rgb), .09) !important;
}

/* Child route: only the selected child is accented. */
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child:not(.active) > a.vn-nav-child__link:hover {
  color: rgb(var(--vn-menu-accent-rgb)) !important;
  background: rgba(var(--vn-menu-accent-rgb), .07) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link.active,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"] {
  color: rgb(var(--vn-menu-accent-rgb)) !important;
  background: rgba(var(--vn-menu-accent-rgb), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--vn-menu-accent-rgb), .10) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child.active > a.vn-nav-child__link::before,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link.active::before,
.app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent > ul > li.vn-nav-child > a.vn-nav-child__link[aria-current="page"]::before {
  background: rgb(var(--vn-menu-accent-rgb)) !important;
}

/* Mobile menu and service picker share the same accent source. */
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav .menu-title span,
html.vn-mobile-mode .vn-mobile-nav__item.active,
.vn-mobile-service-group__title .vn-nav-icon,
.vn-mobile-service-group__actions a.active,
.vn-mobile-services-invoice.active {
  color: rgb(var(--vn-menu-accent-rgb)) !important;
}
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.vn-nav-parent.vn-open > a.vn-nav-parent__link,
html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav > li.no-sub.active > a {
  color: #fff !important;
  background: rgb(var(--vn-menu-accent-rgb)) !important;
}
.vn-mobile-service-group.active {
  border-color: rgba(var(--vn-menu-accent-rgb), .35) !important;
  background: rgba(var(--vn-menu-accent-rgb), .05) !important;
}
.vn-mobile-service-group__actions a.active,
.vn-mobile-services-invoice.active {
  background: rgba(var(--vn-menu-accent-rgb), .10) !important;
}
html.vn-mobile-mode .vn-mobile-nav__plus {
  background: rgb(var(--vn-menu-accent-rgb)) !important;
  box-shadow: 0 6px 18px rgba(var(--vn-menu-accent-rgb), .28) !important;
}

/* ========================================================================== 
   CUSTOMER MOBILE FORMS + SIDEBAR SCROLL HARDENING (2026-09-02)
   Keep every customer form inside the viewport and use native momentum
   scrolling for the off-canvas sidebar on phones.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* The sidebar is a flex column so the menu receives exactly the remaining
     viewport height after logo/profile, instead of relying on a fragile
     hard-coded calc(). */
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-logo {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .menu-navs {
    display: none !important;
  }

  /* If a cached/desktop SimpleBar wrapper is still present, make its actual
     scroll element touch-scrollable too. Fresh phone loads use native scroll. */
  html.vn-mobile-mode #app-simple-bar .simplebar-wrapper,
  html.vn-mobile-mode #app-simple-bar .simplebar-mask,
  html.vn-mobile-mode #app-simple-bar .simplebar-offset,
  html.vn-mobile-mode #app-simple-bar .simplebar-content-wrapper {
    min-height: 0 !important;
    max-height: 100% !important;
  }
  html.vn-mobile-mode #app-simple-bar .simplebar-content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  html.vn-mobile-mode #app-simple-bar .simplebar-content {
    min-height: 100% !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  /* Universal customer form sizing. Covers purchase/configuration forms,
     filters, profile forms and modal forms without page-specific widths. */
  html.vn-mobile-mode .app-content form,
  html.vn-mobile-mode .app-content .app-form,
  html.vn-mobile-mode .modal form,
  html.vn-mobile-mode .form-content-box form {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.vn-mobile-mode .app-content form *,
  html.vn-mobile-mode .modal form *,
  html.vn-mobile-mode .form-content-box form * {
    box-sizing: border-box;
  }

  html.vn-mobile-mode .app-content form .row,
  html.vn-mobile-mode .modal form .row,
  html.vn-mobile-mode .form-content-box form .row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html.vn-mobile-mode .app-content form .row > [class*="col-"],
  html.vn-mobile-mode .modal form .row > [class*="col-"],
  html.vn-mobile-mode .form-content-box form .row > [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.vn-mobile-mode .app-content .form-control,
  html.vn-mobile-mode .app-content .form-select,
  html.vn-mobile-mode .app-content textarea,
  html.vn-mobile-mode .modal .form-control,
  html.vn-mobile-mode .modal .form-select,
  html.vn-mobile-mode .modal textarea,
  html.vn-mobile-mode .form-content-box .form-control,
  html.vn-mobile-mode .form-content-box .form-select,
  html.vn-mobile-mode .form-content-box textarea {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Bootstrap input groups otherwise keep an intrinsic width from long URL,
     token or coupon values and can push cards sideways. */
  html.vn-mobile-mode .app-content .input-group,
  html.vn-mobile-mode .modal .input-group,
  html.vn-mobile-mode .form-content-box .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html.vn-mobile-mode .app-content .input-group > .form-control,
  html.vn-mobile-mode .app-content .input-group > .form-select,
  html.vn-mobile-mode .modal .input-group > .form-control,
  html.vn-mobile-mode .modal .input-group > .form-select,
  html.vn-mobile-mode .form-content-box .input-group > .form-control,
  html.vn-mobile-mode .form-content-box .input-group > .form-select {
    flex: 1 1 0 !important;
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html.vn-mobile-mode .app-content .input-group > .input-group-text,
  html.vn-mobile-mode .modal .input-group > .input-group-text,
  html.vn-mobile-mode .form-content-box .input-group > .input-group-text {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 46vw;
    white-space: nowrap;
  }
  html.vn-mobile-mode .app-content .input-group > .btn,
  html.vn-mobile-mode .app-content .input-group > a.btn,
  html.vn-mobile-mode .modal .input-group > .btn,
  html.vn-mobile-mode .form-content-box .input-group > .btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  html.vn-mobile-mode .app-content .form-floating,
  html.vn-mobile-mode .app-content .form-check,
  html.vn-mobile-mode .modal .form-floating,
  html.vn-mobile-mode .form-content-box .form-floating {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Search/filter forms placed beside headings should drop below the heading
     cleanly instead of hanging outside a card. */
  html.vn-mobile-mode .app-content .card-header > form.app-form,
  html.vn-mobile-mode .app-content .card-header > .app-form,
  html.vn-mobile-mode .app-content .card-body > .d-flex > form.app-form,
  html.vn-mobile-mode .app-content .card-body > .d-flex > .app-form {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Modals must never exceed the physical phone width. */
  html.vn-mobile-mode .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }
  html.vn-mobile-mode .modal-content,
  html.vn-mobile-mode .modal-header,
  html.vn-mobile-mode .modal-body,
  html.vn-mobile-mode .modal-footer {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html.vn-mobile-mode .modal-body {
    overflow-wrap: anywhere;
  }
  html.vn-mobile-mode .modal-footer {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  html.vn-mobile-mode .modal-footer > * {
    margin: 0 !important;
  }

  /* Wide history tables scroll inside their card instead of widening body. */
  html.vn-mobile-mode .app-content .table-responsive,
  html.vn-mobile-mode .modal .table-responsive {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html.vn-mobile-mode .flatpickr-calendar,
  html.vn-mobile-mode .dropdown-menu {
    max-width: calc(100vw - 24px) !important;
  }

  html.vn-mobile-mode .app-content img,
  html.vn-mobile-mode .app-content video,
  html.vn-mobile-mode .app-content canvas {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  html.vn-mobile-mode .app-content .card-body,
  html.vn-mobile-mode .app-content .card-header {
    overflow-wrap: break-word;
  }

  html.vn-mobile-mode .app-content .input-group > .btn,
  html.vn-mobile-mode .app-content .input-group > a.btn,
  html.vn-mobile-mode .modal .input-group > .btn,
  html.vn-mobile-mode .form-content-box .input-group > .btn {
    padding-left: .72rem !important;
    padding-right: .72rem !important;
  }

  html.vn-mobile-mode .app-content .input-group-lg > .form-control,
  html.vn-mobile-mode .app-content .input-group-lg > .form-select,
  html.vn-mobile-mode .app-content .input-group-lg > .input-group-text,
  html.vn-mobile-mode .app-content .input-group-lg > .btn {
    font-size: .94rem !important;
  }
}

@media (max-width: 767.98px) {
  /* Order-summary cards are stacked on phones; sticky positioning can overlap
     the form after the mobile header changes height. */
  html.vn-mobile-mode .app-content .position-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* ========================================================================== 
   CUSTOMER SIDEBAR SCROLL RELIABILITY - DESKTOP + MOBILE (2026-09-02 v9)
   Use one native vertical scroller at every viewport size. This removes the
   competing fixed-height/SimpleBar layers that could stop before the final
   "Tiếp thị liên kết" group when several menu groups were expanded.
   ========================================================================== */
.app-wrapper > nav:not(.horizontal-sidebar) {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .app-logo {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
.app-wrapper > nav:not(.horizontal-sidebar)#app-simple-bar,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) .app-nav > .main-nav,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar > .main-nav {
  display: block !important;
  min-height: max-content !important;
  padding-bottom: 18px !important;
}
/* Navigation arrows only belong to the horizontal-sidebar mode. Leaving this
   node in the vertical flex column steals space from the real menu scroller. */
.app-wrapper > nav:not(.horizontal-sidebar) > .menu-navs {
  display: none !important;
}

/* Defensive fallback if old cached markup still contains SimpleBar wrappers.
   The content wrapper remains the sole scrollable element and receives enough
   bottom room for the last account group. */
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar.simplebar-scrollable-y {
  overflow: hidden !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-wrapper,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-mask,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-offset {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-content-wrapper {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-content {
  min-height: max-content !important;
  padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 767.98px) {
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) {
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: max(44px, env(safe-area-inset-bottom)) !important;
  }
}

/* ========================================================================== 
   CUSTOMER SIDEBAR SCROLL FINAL - MOBILE + DESKTOP (2026-09-02 v10)
   - The menu is the only vertical scroller.
   - Mobile bottom navigation never covers the last sidebar rows.
   - Native scrollbar stays unobtrusive: hidden on touch screens and revealed
     softly on desktop hover/focus.
   ========================================================================== */
:root {
  --vn-sidebar-scroll-end-space: 42px;
}

.app-wrapper > nav:not(.horizontal-sidebar) {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar {
  position: relative !important;
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  scroll-behavior: smooth;
  scroll-padding-block: 14px var(--vn-sidebar-scroll-end-space);
  padding-bottom: var(--vn-sidebar-scroll-end-space) !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.app-wrapper > nav:not(.horizontal-sidebar) .app-nav > .main-nav,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar > .main-nav,
.app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-content > .main-nav {
  min-height: max-content !important;
  margin-bottom: 0 !important;
  padding-bottom: var(--vn-sidebar-scroll-end-space) !important;
}

/* Desktop: keep the scrollbar visually hidden until the user interacts with
   the sidebar. It remains a normal native scrollbar, so wheel/trackpad/keyboard
   scrolling keeps browser-level reliability. */
@media (min-width: 768px) {
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
  .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar {
    scrollbar-color: transparent transparent;
  }

  .app-wrapper > nav:not(.horizontal-sidebar):hover .app-nav,
  .app-wrapper > nav:not(.horizontal-sidebar):focus-within .app-nav,
  .app-wrapper > nav:not(.horizontal-sidebar):hover #app-simple-bar,
  .app-wrapper > nav:not(.horizontal-sidebar):focus-within #app-simple-bar {
    scrollbar-color: rgba(var(--primary), .42) transparent;
  }

  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav::-webkit-scrollbar,
  .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav::-webkit-scrollbar-track,
  .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar::-webkit-scrollbar-track {
    background: transparent;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav::-webkit-scrollbar-thumb,
  .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }
  .app-wrapper > nav:not(.horizontal-sidebar):hover .app-nav::-webkit-scrollbar-thumb,
  .app-wrapper > nav:not(.horizontal-sidebar):focus-within .app-nav::-webkit-scrollbar-thumb,
  .app-wrapper > nav:not(.horizontal-sidebar):hover #app-simple-bar::-webkit-scrollbar-thumb,
  .app-wrapper > nav:not(.horizontal-sidebar):focus-within #app-simple-bar::-webkit-scrollbar-thumb {
    background: rgba(var(--primary), .40);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .app-wrapper > nav:not(.horizontal-sidebar) .app-nav::-webkit-scrollbar-thumb:hover,
  .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary), .68);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

@media (max-width: 767.98px) {
  :root {
    --vn-sidebar-scroll-end-space: max(54px, calc(34px + env(safe-area-inset-bottom)));
  }

  /* The fixed five-button bottom bar used to sit above the sidebar and cover
     "Rút hoa hồng". While the drawer is open it now moves out of the way; the
     drawer owns the complete visual viewport from top to bottom. */
  html.vn-mobile-mode .vn-mobile-nav {
    transition: transform .20s ease, opacity .16s ease, visibility .16s ease !important;
  }
  html.vn-mobile-mode body.vn-mobile-sidebar-open .vn-mobile-nav {
    transform: translate3d(0, 115%, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar),
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar).semi-nav,
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar).vn-sidebar-open {
    top: 0 !important;
    bottom: 0 !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
  }

  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav,
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: var(--vn-sidebar-scroll-end-space) !important;
    scroll-padding-bottom: var(--vn-sidebar-scroll-end-space) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .app-nav::-webkit-scrollbar,
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar::-webkit-scrollbar,
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) #app-simple-bar .simplebar-content-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Extra end room guarantees that the final Affiliate child can be pulled
     above the browser/home-indicator area even with every submenu expanded. */
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar) .main-nav::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--vn-sidebar-scroll-end-space);
    pointer-events: none;
  }
}

@media (max-width: 767.98px) {
  /* Hard fallback for pages that still have an old cached mobile-shell script:
     the open drawer is always above the fixed bottom bar, so no footer control
     can cover the last sidebar item even before the body state class updates. */
  html.vn-mobile-mode .app-wrapper > nav:not(.horizontal-sidebar).vn-sidebar-open {
    z-index: 1110 !important;
  }
  @supports selector(body:has(*)) {
    html.vn-mobile-mode body:has(.app-wrapper > nav:not(.horizontal-sidebar).vn-sidebar-open) .vn-mobile-nav {
      transform: translate3d(0, 115%, 0) !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }
}