@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");

/* Shared visual tokens for the glassmorphism treatment used across cards. */
:root {
  --qhome-font-body:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --qhome-font-highlight:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --qhome-surface-fill: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06),
    rgba(66, 44, 91, 0.11) 28%,
    rgba(12, 9, 20, 0.46) 58%,
    rgba(2, 3, 8, 0.66)
  );
  --qhome-surface-fill-hover: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.105),
    rgba(78, 52, 108, 0.16) 30%,
    rgba(14, 10, 24, 0.38) 58%,
    rgba(2, 3, 8, 0.56)
  );
  --qhome-surface-border: rgba(39, 25, 58, 0.95);
  --qhome-surface-border-strong: rgba(39, 25, 58, 0.95);
  --qhome-surface-shadow:
    0 18px 44px rgba(2, 6, 23, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(255, 255, 255, 0.024);
  --qhome-surface-shadow-hover:
    0 30px 70px rgba(2, 6, 23, 0.52),
    0 0 30px rgba(125, 211, 252, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.055);
  --qhome-liquid-rim: linear-gradient(
    145deg,
    rgba(78, 52, 108, 0.72),
    rgba(17, 12, 28, 0.42) 34%,
    rgba(44, 28, 66, 0.58) 68%,
    rgba(8, 6, 16, 0.68)
  );
  --qhome-liquid-rim-hover: linear-gradient(
    145deg,
    rgba(78, 52, 108, 0.72),
    rgba(17, 12, 28, 0.42) 34%,
    rgba(44, 28, 66, 0.58) 68%,
    rgba(8, 6, 16, 0.68)
  );
  --qhome-liquid-sheen:
    radial-gradient(360px circle at 8% -14%, rgba(255, 255, 255, 0.09), transparent 42%),
    radial-gradient(320px circle at 104% 118%, rgba(168, 85, 247, 0.055), transparent 44%);
  --qhome-liquid-sheen-hover:
    radial-gradient(
      230px circle at 12% 8%,
      rgba(216, 180, 254, 0.14),
      rgba(168, 85, 247, 0.058) 36%,
      rgba(56, 189, 248, 0.024) 54%,
      transparent 72%
  );
}

@supports (font-variation-settings: normal) {
  :root {
    --qhome-font-body:
      InterVariable,
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  }
}

/* Keep Homepage's built-in dark mode while swapping in the custom backdrop. */
html.dark {
  --bg-color: 12 12 20;
}

html,
body {
  font-family: var(--qhome-font-body);
  font-feature-settings: "liga" 1, "calt" 1;
}

body,
button,
input,
textarea,
select,
.service-name,
.service-description,
.bookmark-name,
.bookmark-description,
.bookmark::after,
.information-widget,
.information-widget span,
#footer,
#footer * {
  font-family: var(--qhome-font-body) !important;
}

body {
  background-color: #030309 !important;
}

/* The stock background stays, but gets extra overlays for depth and grid texture. */
#page_wrapper,
#inner_wrapper,
#__next {
  position: relative;
  isolation: isolate;
  z-index: 1;
  background: transparent !important;
}

#background {
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: scale(1.16);
}

#background::before,
#background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#background::before {
  background:
    radial-gradient(720px circle at 14% 18%, rgba(76, 29, 149, 0.12), transparent 38%),
    radial-gradient(640px circle at 84% 16%, rgba(99, 102, 241, 0.085), transparent 30%),
    radial-gradient(620px circle at 52% 76%, rgba(168, 85, 247, 0.095), transparent 40%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.42) 0%, rgba(2, 6, 23, 0.72) 100%);
}

#background::after {
  opacity: 0.52;
  background:
    radial-gradient(circle at center, rgba(203, 213, 225, 0.34) 0 0.6px, transparent 0.8px),
    linear-gradient(rgba(125, 211, 252, 0.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.095) 1px, transparent 1px),
    linear-gradient(rgba(125, 211, 252, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.036) 1px, transparent 1px),
    linear-gradient(180deg, rgba(237, 233, 254, 0.04) 0%, rgba(237, 233, 254, 0.014) 34%, rgba(237, 233, 254, 0.004) 72%, rgba(237, 233, 254, 0) 100%),
    radial-gradient(980px 420px at 50% -8%, rgba(216, 180, 254, 0.035), transparent 66%);
  background-size: 96px 96px, 96px 96px, 96px 96px, 24px 24px, 24px 24px, cover, cover;
  background-position: center center, center center, center center, center center, center center, center top, center top;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  mix-blend-mode: normal;
}

#layout-groups {
  row-gap: 1rem;
}

/* Large top-level categories get a forward-looking divider that fades into the right edge. */
#layout-groups > .services-group:not(.subgroup) > button,
#layout-groups > .bookmark-group > button {
  position: relative;
  align-items: center;
  padding: 0.12rem 0.15rem 0.48rem;
  gap: 0.55rem;
  margin-bottom: 0.18rem;
  --qhome-group-accent-soft: rgba(125, 211, 252, 0.34);
  --qhome-group-accent-mid: rgba(96, 165, 250, 0.22);
  --qhome-group-accent-glow: rgba(125, 211, 252, 0.08);
  --qhome-group-accent-tail: rgba(168, 85, 247, 0.14);
  --qhome-group-text: rgba(226, 232, 240, 0.96);
}

#layout-groups > .services-group:not(.subgroup) > button > .service-group-name,
#layout-groups > .bookmark-group > button > .bookmark-group-name {
  font-family: var(--qhome-font-highlight) !important;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0.3rem 0.78rem 0.36rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(15, 23, 42, 0.18)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.07), transparent 58%);
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 0;
  font-size: clamp(1.335rem, 1.29rem + 0.34vw, 1.495rem);
  font-weight: 580;
  letter-spacing: -0.02em;
  color: var(--qhome-group-text) !important;
  text-shadow:
    0 0 14px rgba(148, 163, 184, 0.05),
    0 0 22px rgba(15, 23, 42, 0.22);
}

#layout-groups > .services-group:not(.subgroup) > button::after,
#layout-groups > .bookmark-group > button::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  margin-left: 0.95rem;
  min-width: 4rem;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(226, 232, 240, 0.3) 0%,
      var(--qhome-group-accent-soft) 16%,
      var(--qhome-group-accent-mid) 36%,
      var(--qhome-group-accent-tail) 62%,
      rgba(15, 23, 42, 0.02) 100%
    );
  box-shadow:
    0 0 18px var(--qhome-group-accent-glow),
    0 0 26px rgba(168, 85, 247, 0.05);
  transform: translateY(1px);
  opacity: 0.88;
}

#layout-groups > .services-group:not(.subgroup) > button:hover::after,
#layout-groups > .bookmark-group > button:hover::after {
  background:
    linear-gradient(
      90deg,
      rgba(248, 250, 252, 0.38) 0%,
      color-mix(in srgb, var(--qhome-group-accent-soft) 86%, white) 18%,
      color-mix(in srgb, var(--qhome-group-accent-mid) 88%, white) 42%,
      color-mix(in srgb, var(--qhome-group-accent-tail) 84%, white) 70%,
      rgba(15, 23, 42, 0.03) 100%
    );
  box-shadow:
    0 0 20px color-mix(in srgb, var(--qhome-group-accent-glow) 88%, white),
    0 0 30px rgba(168, 85, 247, 0.07);
}

#layout-groups > .services-group:not(.subgroup) > button > .service-group-name,
#layout-groups > .bookmark-group > button > .bookmark-group-name {
  order: 1;
}

#layout-groups > .services-group:not(.subgroup) > button > svg,
#layout-groups > .bookmark-group > button > svg {
  order: 3;
  margin-left: 0.7rem !important;
  opacity: 0.72;
}

#layout-groups > .services-group:not(.subgroup) > button + div,
#layout-groups > .bookmark-group > button + div {
  margin-top: 0.22rem;
}

/* Give each primary zone a slightly different accent without changing card chrome. */
#layout-groups > .services-group:not(.subgroup):nth-child(1) > button {
  --qhome-group-accent-soft: rgba(125, 211, 252, 0.36);
  --qhome-group-accent-mid: rgba(96, 165, 250, 0.24);
  --qhome-group-accent-glow: rgba(125, 211, 252, 0.1);
  --qhome-group-accent-tail: rgba(167, 139, 250, 0.15);
  --qhome-group-text: rgba(224, 242, 254, 0.96);
}

#layout-groups > .services-group:not(.subgroup):nth-child(2) > button {
  --qhome-group-accent-soft: rgba(226, 232, 240, 0.34);
  --qhome-group-accent-mid: rgba(148, 163, 184, 0.23);
  --qhome-group-accent-glow: rgba(203, 213, 225, 0.08);
  --qhome-group-accent-tail: rgba(96, 165, 250, 0.1);
  --qhome-group-text: rgba(241, 245, 249, 0.95);
}

#layout-groups > .services-group:not(.subgroup):nth-child(3) > button {
  --qhome-group-accent-soft: rgba(251, 191, 36, 0.32);
  --qhome-group-accent-mid: rgba(245, 158, 11, 0.2);
  --qhome-group-accent-glow: rgba(251, 191, 36, 0.08);
  --qhome-group-accent-tail: rgba(248, 113, 113, 0.12);
  --qhome-group-text: rgba(255, 244, 214, 0.95);
}

/* Shared shell for info widgets, service cards, and bookmark tiles. */
#information-widgets .widget-container,
.service-card,
.bookmark > a {
  position: relative;
  backface-visibility: hidden;
  contain: paint;
  overflow: hidden;
  border: 1px solid var(--qhome-surface-border) !important;
  background: var(--qhome-surface-fill) !important;
  backdrop-filter: blur(10px) saturate(138%) brightness(0.92) contrast(1.03);
  -webkit-backdrop-filter: blur(10px) saturate(138%) brightness(0.92) contrast(1.03);
  box-shadow: var(--qhome-surface-shadow);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

#information-widgets .widget-container,
.service-card {
  border-radius: 0.5rem !important;
}

.bookmark > a {
  border-radius: 0.46rem !important;
}

#information-widgets .widget-container::before,
.service-card::before,
.bookmark > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--qhome-liquid-rim);
  opacity: 0.42;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  transition:
    background 180ms ease,
    opacity 180ms ease;
}

#information-widgets .widget-container::after,
.service-card::after,
.bookmark > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--qhome-liquid-sheen);
  opacity: 0.42;
  pointer-events: none;
  transition: opacity 140ms ease;
}

#information-widgets .widget-container:hover,
.service-card:hover,
.bookmark > a:hover {
  transform: none;
  border-color: var(--qhome-surface-border-strong) !important;
  background: var(--qhome-surface-fill-hover) !important;
  box-shadow: var(--qhome-surface-shadow-hover);
}

#information-widgets .widget-container:hover::before,
.service-card:hover::before,
.bookmark > a:hover::before {
  background: var(--qhome-liquid-rim);
  opacity: 0.42;
}

#information-widgets .widget-container:hover::after,
.service-card:hover::after,
.bookmark > a:hover::after {
  background: var(--qhome-liquid-sheen-hover);
  opacity: 1;
}

/* The logo and greeting are the only info widgets that need stronger emphasis. */
.information-widget-logo.widget-container {
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
  min-height: 4.55rem;
  padding: 0.62rem !important;
  border-color: var(--qhome-surface-border) !important;
  background:
    radial-gradient(88px circle at 50% 28%, rgba(255, 255, 255, 0.105), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(8, 13, 26, 0.48) 48%, rgba(0, 0, 0, 0.62)) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 255, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}

.information-widget-logo .resolved {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
  width: 100%;
}

.information-widget-logo img,
.information-widget-logo svg {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.22))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.62));
}

.information-widget-logo.widget-container::after {
  background:
    radial-gradient(58px circle at 50% 38%, rgba(255, 255, 255, 0.13), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%);
  opacity: 0.8;
}

.information-widget-greeting.widget-container {
  align-items: center;
  justify-content: center;
  min-height: 4.55rem;
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
}

.information-widget-greeting span {
  font-family:
    "Merriweather",
    Georgia,
    "Times New Roman",
    serif !important;
  margin-right: 0 !important;
  text-align: center;
  font-weight: 680;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(96, 165, 250, 0.08);
}

.service-card .service-name,
.bookmark-name {
  font-size: 1.01rem;
  font-weight: 590;
}

/* Group names are rendered like small chips so large sections stay scannable. */
.service-group-name,
.bookmark-group-name {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid rgba(109, 80, 142, 0.48);
  border-radius: 999px;
  padding: 0.4rem 0.92rem;
  background:
    radial-gradient(120px circle at 18% 18%, rgba(216, 180, 254, 0.12), transparent 58%),
    linear-gradient(135deg, rgba(20, 14, 32, 0.76), rgba(7, 8, 17, 0.48));
  color: rgba(245, 243, 255, 0.96) !important;
  box-shadow:
    0 10px 28px rgba(2, 6, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 1.295rem !important;
  font-weight: 605 !important;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* The nested subgroup headings in TradingCol use a slightly smaller chip. */
.services-group.subgroup .service-group-name {
  font-family: var(--qhome-font-highlight) !important;
  padding: 0.32rem 0.78rem;
  border-color: rgba(82, 62, 116, 0.42);
  background:
    radial-gradient(96px circle at 14% 12%, rgba(125, 211, 252, 0.07), transparent 58%),
    linear-gradient(135deg, rgba(18, 14, 30, 0.58), rgba(7, 8, 17, 0.32));
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 1.105rem !important;
  font-weight: 570 !important;
  letter-spacing: 0.1em;
}

/* Give the stacked TradingCol subgroups a little more air between AI and Markets. */
.services-group.subgroup + .services-group.subgroup {
  margin-top: 0.24rem;
}

.service-description,
.bookmark-description {
  font-size: 0.92rem;
  opacity: 0.72;
  line-height: 1.22;
}

/* Overview gets a little more visual hierarchy: dim support text/icons, lift titles and metrics. */
#layout-groups > .services-group:first-child .service-description {
  opacity: 0.66;
}

#layout-groups > .services-group:first-child .service-icon {
  opacity: 0.88;
  filter: saturate(0.92) brightness(0.94);
}

#layout-groups > .services-group:first-child .service-name {
  color: rgba(241, 245, 249, 0.98);
  font-weight: 600;
}

#layout-groups > .services-group:first-child .service-container:not(.chart),
#layout-groups > .services-group:first-child .service-container:not(.chart) .text-xs,
#layout-groups > .services-group:first-child .service-container:not(.chart) .text-sm {
  color: rgba(226, 232, 240, 0.92);
}

/* The almanac iframe already renders its own chrome, so strip the outer card. */
li.service[data-name="Vạn Niên"] .service-card {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

li.service[data-name="Vạn Niên"] .service-card::before,
li.service[data-name="Vạn Niên"] .service-card::after,
li.service[data-name="Vạn Niên"] .service-title {
  display: none !important;
}

li.service[data-name="Vạn Niên"] .service-container,
li.service[data-name="Vạn Niên"] .service-block,
li.service[data-name="Vạn Niên"] iframe {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

li.service[data-name="Vạn Niên"] .service-block {
  margin: 0 !important;
}

li.service[data-name="Vạn Niên"] iframe {
  display: block;
  border: 0;
}

/* Bookmark groups under TradingCol behave like compact icon grids. */
.bookmark-list {
  gap: 0.65rem;
}

.bookmark.grid {
  display: grid;
  grid-template-rows: 4.25rem auto;
  gap: 0.42rem;
  align-items: start;
  justify-items: center;
}

.bookmark.grid a {
  width: 4.25rem !important;
  min-width: 4.25rem !important;
  height: 4.25rem !important;
  min-height: 4.25rem !important;
  aspect-ratio: 1 / 1;
  display: grid !important;
  place-items: center;
  padding: 0.72rem !important;
  gap: 0;
  border-radius: 0.46rem !important;
}

.bookmark.grid .bookmark-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.38rem;
}

.bookmark.grid a::after {
  content: none;
}

.bookmark.grid::after {
  content: attr(data-name);
  display: block;
  width: 100%;
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.76rem;
  line-height: 1.18;
  text-align: center;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.bookmark:not(.grid) .bookmark-text {
  background: rgba(255, 255, 255, 0.035);
}

.service-card iframe {
  border-radius: 0.4rem;
}

/* Small Glances widgets are trimmed so the metric line fits without wasted height. */
li.service:is(
  [data-name="AMD EPYC™ 9005"],
  [data-name="Temperature"],
  [data-name="Network"]
) .service-card {
  min-height: 4.7rem;
}

li.service:is(
  [data-name="AMD EPYC™ 9005"],
  [data-name="Temperature"],
  [data-name="Network"]
) .service-container:not(.chart) {
  min-height: 1.85rem;
}

li.service:is(
  [data-name="AMD EPYC™ 9005"],
  [data-name="Temperature"],
  [data-name="Network"]
) .service-container:not(.chart) > .absolute {
  line-height: 1.18;
}

/* The AMD info card only needs CPU + Mem, so hide the separate swap block. */
li.service[data-name="AMD EPYC™ 9005"] .service-container:not(.chart) {
  min-height: 2rem;
  padding-bottom: 0.2rem;
}

li.service[data-name="AMD EPYC™ 9005"] .service-container:not(.chart) > .absolute.top-3.right-2 {
  display: none !important;
}

/* Let the AdGuard card breathe a touch more so the stacked system column matches TradingCol better. */
li.service[data-name="AdGuard Home"] .service-card {
  margin-bottom: 2.65rem;
}

/* The calendar column reads slightly higher than its neighbors, so nudge it down a touch. */
li.service[data-name="Calendar"] .service-card {
  margin-top: 0.32rem;
}

/* AI + market shortcuts are intentionally square-ish and label-first. */
li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-card {
  min-height: 3.9rem;
  margin-bottom: 0.42rem;
  padding: 0.32rem !important;
}

li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-title {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.25rem;
}

li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-icon {
  width: 100%;
  min-height: 1.75rem;
}

li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-title-text {
  width: 100%;
  justify-content: center;
}

li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-name {
  padding: 0 !important;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 580;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

li.service:is(
  [data-name="VPBS"],
  [data-name="VCBS"],
  [data-name="VPS"],
  [data-name="Đu đỉnh"],
  [data-name="ChatGPT"],
  [data-name="Gemini"],
  [data-name="Copilot"],
  [data-name="Perplexity"],
  [data-name="Grok"]
) .service-description {
  display: none;
}

/* Embedded widgets get fixed heights because Homepage's auto sizing is inconsistent. */
iframe[name="weather-hcmc"],
iframe[name="vn-trends-3d"] {
  height: 22rem !important;
}

/* Disable entry fade-ins; the custom layout looks cleaner when cards appear static. */
#layout-groups > .services-group,
#layout-groups > .bookmark-group {
  opacity: 1;
  transform: none;
}

#layout-groups > .bookmark-group {
  width: 100%;
}

/* Desktop bookmark groups should sit in three even columns instead of auto wrapping. */
@media (min-width: 720px) {
  #layout-groups > .bookmark-group {
    flex: 0 0 32.999% !important;
    max-width: 32.999%;
    min-width: 0;
  }
}

/* The build label is injected client-side because Homepage rebuilds footer DOM after hydration. */
.qhome-custom-version-inline {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 0.2rem;
  color: rgba(156, 163, 175, 0.88);
  font-size: 0.8rem;
  line-height: 1rem;
  letter-spacing: -0.01em;
}