:root {
  --vtg-sidebar-w: 260px;
  --vtg-sidebar-c: 72px;
  /* Logo heights, overridden per site from Cài đặt → Logo menu đứng. The values
     here are the fallback for when that inline block is not printed. */
  --vtg-logo-h: 32px;
  --vtg-logo-c: 55px;
  --vtg-sidebar-bg: #f7f5f1;
  --vtg-sidebar-line: #e8e4dc;
  --vtg-blue: #154787;
  --vtg-gold: #C09C40;
  --vtg-dock-h: 64px;
  --vtg-page-bg: #eef0f3;
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

html, body.vtg-has-sidebar {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  background: var(--vtg-page-bg);
}
body.vtg-has-sidebar {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  min-height: 100vh;
}

/* Sidebar occupies column 1 — sticky, NOT fixed overlay */
body.vtg-has-sidebar > #vtg-sidebar,
.vtg-sidebar {
  position: sticky !important;
  top: 0;
  left: auto;
  z-index: 10050;
  flex: 0 0 var(--vtg-sidebar-w);
  width: var(--vtg-sidebar-w);
  max-width: var(--vtg-sidebar-w);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vtg-sidebar-bg);
  border-right: 1px solid var(--vtg-sidebar-line);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
  align-self: flex-start;
}
body.vtg-has-sidebar.vtg-sidebar-collapsed > #vtg-sidebar,
.vtg-sidebar.is-collapsed {
  flex-basis: var(--vtg-sidebar-c);
  width: var(--vtg-sidebar-c);
  max-width: var(--vtg-sidebar-c);
}

/* Main column takes ALL remaining width */
body.vtg-has-sidebar > #vtg-main,
.vtg-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 20px !important;
}

.vtg-main main,
.vtg-main .vtg-content,
.vtg-main .entry-content,
.vtg-main .wp-site-blocks,
.vtg-main .is-layout-constrained,
.vtg-main .is-layout-constrained > *,
.vtg-main .wp-block-post-content,
.vtg-main .wp-block-post-content > *,
.vtg-main .wp-block-group {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Theme's own content wrapper padding — #vtg-main already provides the page padding. */
.vtg-main main,
.vtg-main .vtg-content,
.vtg-main .entry-content {
  padding: 0 !important;
}

/* Theme/wpautop leftover empty paragraphs must not add visible gap above our content. */
.vtg-main p:empty,
.vtg-main p:has(> br:only-child),
.vtg-main main > p:empty,
.vtg-main .vtg-content > p:empty,
.vtg-main .entry-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.vtg-sidebar__top {
  display: flex; align-items: center; gap: 8px; padding: 12px; min-height: 56px;
}
.vtg-sidebar__brand {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: #1e293b; font-weight: 700; font-size: 15px; line-height: 1.3;
}
.vtg-sidebar__logo {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--vtg-blue), var(--vtg-gold));
  color: #fff; align-items: center; justify-content: center; font-weight: 800;
  overflow: hidden;
}
.vtg-sidebar__logo--has-img {
  background: none;
  border-radius: 0;
  overflow: visible;
}
.vtg-sidebar__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vtg-sidebar__logo--expanded { display: flex; }
.vtg-sidebar__logo--collapsed { display: none; }
.vtg-sidebar__logo--expanded.vtg-sidebar__logo--has-img {
  width: auto;
  height: var(--vtg-logo-h);
  /* Cap the width as well: a wide wordmark set tall would otherwise push the
     collapse button off the 260px sidebar. */
  max-width: calc(var(--vtg-sidebar-w) - 90px);
}
.vtg-sidebar__logo--expanded.vtg-sidebar__logo--has-img img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
.vtg-sidebar__logo--collapsed.vtg-sidebar__logo--has-img {
  width: var(--vtg-logo-c);
  height: var(--vtg-logo-c);
}
.vtg-sidebar__toggle {
  border: 0; background: transparent; width: 36px; height: 36px; border-radius: 8px;
  cursor: pointer; color: #64748b; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vtg-sidebar__toggle:hover { background: #efeae2; color: var(--vtg-blue); }
/* min-height:0 is the fix here, not the padding. A column flex item defaults to
   min-height:auto and refuses to shrink below its own content, so on a short
   viewport — a tablet in landscape is only 768px tall — the menu kept its full
   height, pushed the account block past the bottom edge, and overflow:hidden on
   the rail clipped it away. Letting the menu shrink makes it scroll instead. */
.vtg-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 14px; }
/* 4px between rows, not 2. At 2px the 48px blocks touched and the menu read as
   one striped slab; the gap is what lets a row look like a row. */
.vtg-sidebar__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vtg-sidebar__menu a {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 0 12px; border-radius: 10px; color: #1e293b; text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 1.3;
}
.vtg-sidebar__menu a:hover, .vtg-sidebar__menu .current-menu-item > a { background: #efeae2; color: var(--vtg-blue); }
/* 20px everywhere. icons.css forced 20px with !important while this file asked
   for 23px, so the icon box and the icon inside it were different sizes. */
.vtg-sidebar__menu .vtg-menu-svg, .vtg-sidebar__menu .vtg-ico { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; }
.vtg-sidebar__menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Outstanding-work count for moderators */
.vtg-sidebar__menu .vtg-sidebar-link-text { flex: 1 1 auto; min-width: 0; }
.vtg-sidebar__badge {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Collapsed rail: float the count over the icon instead of pushing it aside. */
.vtg-sidebar.is-collapsed .vtg-sidebar__menu a { position: relative; }
.vtg-sidebar.is-collapsed .vtg-sidebar__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10.5px;
}

/* Collapsed state: stack logo + toggle vertically, toggle sits below logo */
/* One rhythm down the whole rail. The collapse button reads as another icon in
   the column, so it has to sit on the same 40px box and the same 6px gap as the
   menu icons — it used to be 36px, 8px under the logo and 22px above the first
   menu item, which made it look stuck to the logo. */
.vtg-sidebar.is-collapsed .vtg-sidebar__top {
  flex-direction: column;
  gap: 6px;
  /* No bottom padding: the gap below the button is owned by the nav, so there
     is one number to change instead of two that add up. */
  padding: 14px 8px 0;
}
.vtg-sidebar.is-collapsed .vtg-sidebar__toggle {
  width: 40px;
  height: 40px;
}
.vtg-sidebar.is-collapsed .vtg-sidebar__brand { flex: none; }
.vtg-sidebar.is-collapsed .vtg-sidebar__logo--expanded { display: none; }
.vtg-sidebar.is-collapsed .vtg-sidebar__logo--collapsed { display: flex; }
.vtg-sidebar.is-collapsed .vtg-sidebar-link-text { display: none !important; }
/* The rail gets square hit targets, not full-width bars with an icon floated in
   the middle: at 72px wide and 44px tall the highlight was a wide stripe, which
   is the one shape a rail of icons should not be. Centre a 44×44 chip and give
   the rows 6px so the icons do not run together into a column of texture. */
.vtg-sidebar.is-collapsed .vtg-sidebar__nav { padding: 6px 0 14px; }
.vtg-sidebar.is-collapsed .vtg-sidebar__menu { gap: 6px; align-items: center; }
.vtg-sidebar.is-collapsed .vtg-sidebar__menu a {
  /* 40, down from 44: with the gap unchanged the icons pitch at 46px instead of
     50px, which is the "closer together" without letting the hover chips touch. */
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 10px;
}
/* Same reason as the menu above: this block sits between the menu and the
   account, so if it cannot shrink it pushes the account out on its own. */
.vtg-sidebar__section { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 8px; border-top: 1px solid var(--vtg-sidebar-line); }
.vtg-sidebar.is-collapsed .vtg-sidebar__section { padding: 0 0 8px; }
.vtg-sidebar__foot {
  padding: 8px 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--vtg-sidebar-line);
  flex-shrink: 0;
}
.vtg-sidebar-search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--vtg-sidebar-line); border-radius: 999px; padding: 6px 12px; margin-bottom: 8px;
}
.vtg-sidebar-search input { border: 0; outline: 0; width: 100%; font-size: 13px; background: transparent; }
.vtg-sidebar.is-collapsed .vtg-sidebar-search { display: none; }
.vtg-sidebar-user {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  padding: 8px; border-radius: 12px; cursor: pointer; text-align: left; color: inherit;
}
.vtg-sidebar-user:hover { background: #efeae2; }
.vtg-sidebar-user__avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--vtg-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.vtg-sidebar-user__avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover;
  /* Aim the crop above centre. A portrait photo cropped to a square from the
     middle lands on the chest; faces sit in the upper third, so that is where
     a 36px circle has to be pointed. */
  object-position: center 28%;
  display: block;
}

@media (max-width: 899px) {
  body.vtg-has-sidebar { flex-direction: column !important; }
  body.vtg-has-sidebar > #vtg-sidebar,
  .vtg-sidebar {
    position: fixed !important;
    transform: translateX(-105%);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    flex: none;
  }
  .vtg-sidebar.is-open-mobile { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.14); z-index: 2147483001 !important; }
  body.vtg-has-sidebar > #vtg-main,
  .vtg-main { padding: 20px 10px 76px !important; width: 100% !important; }
  body.vtg-has-dock { padding-bottom: 0; }
}

body.vtg-sidebar-open::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(15,23,42,.4);
  z-index: 10040;
}
body.vtg-sidebar-open .vtg-sidebar {
  transform: translateX(0) !important;
}

/* ===== Facebook-style dock: icons only, single layer (single source of truth) ===== */
#vtg-dock.vtg-dock,
.vtg-dock.vtg-dock--icons {
  display: none;
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483000 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  transform: translateY(0) !important;
  transition: transform .25s ease;
  will-change: transform;
}
#vtg-dock.vtg-dock.is-dock-hidden,
.vtg-dock.vtg-dock--icons.is-dock-hidden {
  transform: translateY(150%) !important;
}
#vtg-dock .vtg-dock__list {
  pointer-events: auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  list-style: none !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 4px 4px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.14) !important;
  min-height: 52px;
}
#vtg-dock .vtg-dock__item {
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vtg-dock .vtg-dock__item.is-edge {
  flex: 0 0 44px;
  width: 44px;
}

#vtg-dock .vtg-dock__btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #65676b !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color .15s ease;
}
#vtg-dock .vtg-dock__btn:hover {
  background: transparent !important;
  color: #65676b !important;
}
#vtg-dock .vtg-dock__item.is-active .vtg-dock__btn {
  background: transparent !important;
  color: #0866ff !important;
}
#vtg-dock .vtg-dock__item.is-plus .vtg-dock__btn {
  width: 36px;
  height: 36px;
  background: #154787 !important;
  color: #fff !important;
  border-radius: 50% !important;
}
#vtg-dock .vtg-dock__item.is-plus.is-active .vtg-dock__btn,
#vtg-dock .vtg-dock__item.is-plus .vtg-dock__btn:hover {
  background: #0e3568 !important;
  color: #fff !important;
}
/* Icon only — hide any labels */
#vtg-dock .vtg-dock__lab,
#vtg-dock .vtg-dock__label,
.vtg-dock--icons .vtg-dock__lab {
  display: none !important;
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
#vtg-dock .vtg-dock__ico {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: inherit;
}
#vtg-dock .vtg-dock-svg,
#vtg-dock .vtg-ico {
  width: 27px !important;
  height: 27px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  display: block !important;
}
/* Kill theme / duplicate docks */
.vtg-mobile-dock,
#vtg-mobile-dock,
nav.vtg-mobile-dock {
  display: none !important;
}
@media (max-width: 899px) {
  #vtg-dock.vtg-dock,
  .vtg-dock.vtg-dock--icons {
    display: block !important;
  }
  body.vtg-has-dock,
  body.vtg-has-sidebar {
    padding-bottom: 76px !important;
  }
}
@media (min-width: 900px) {
  #vtg-dock.vtg-dock,
  .vtg-dock.vtg-dock--icons {
    display: none !important;
  }
}

/* Below the breakpoint the sidebar is an off-canvas drawer opened by the
   hamburger, where a 72px rail of unlabelled icons is not a menu. chrome.js
   already drops the class on this viewport; these rules are the backstop for
   the moment before it runs and for JS-off, now that collapsed is the default
   state the server renders. */
@media (max-width: 899px) {
  body.vtg-has-sidebar.vtg-sidebar-collapsed > #vtg-sidebar,
  body.vtg-has-sidebar .vtg-sidebar.is-collapsed,
  .vtg-sidebar.is-collapsed {
    flex-basis: var(--vtg-sidebar-w);
    width: var(--vtg-sidebar-w);
    max-width: var(--vtg-sidebar-w);
  }
  /* Restore the bottom padding the collapsed rail hands to its nav — in the
     drawer the header is a row again and owns its own spacing. */
  .vtg-sidebar.is-collapsed .vtg-sidebar__top { flex-direction: row; gap: 12px; padding: 12px; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__brand { flex: 1 1 auto; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__logo--expanded { display: flex; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__logo--collapsed { display: none; }
  .vtg-sidebar.is-collapsed .vtg-sidebar-link-text { display: inline !important; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__nav { padding: 8px 10px 14px; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__menu { align-items: stretch; gap: 4px; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__menu a {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0 12px;
    gap: 12px;
    justify-content: flex-start;
  }
  .vtg-sidebar.is-collapsed .vtg-sidebar__section { padding: 0 8px 8px; }
  .vtg-sidebar.is-collapsed .vtg-sidebar__badge { position: static; }
  .vtg-sidebar.is-collapsed .vtg-sidebar-search { display: flex; }
}