/* Lọ Mơ: an airy botanical index, with HTML links above a decorative WebGL scene. */
.vine-navigation { display: none; }
/* The root already reserves header space; avoid counting section offsets twice. */
html.has-vine-nav :is(#bo-suu-tap, #cau-chuyen, #hanh-trinh-logo, #quy-chuan, #an-pham, #tiem-hoa) { scroll-margin-top: 0; }
@media (min-width: 1360px) and (min-height: 660px) {
  html.has-vine-nav #main-content { padding-left: 240px; }
  html.has-vine-nav .editorial-scroll-nav { display: none; }
  .vine-navigation {
    --vine-top: 110px;
    display: block;
    position: fixed;
    top: var(--vine-top);
    left: max(12px, calc((100vw - 1200px) / 2 - 268px));
    width: 240px;
    z-index: 80;
    color: var(--color-green);
    isolation: isolate;
    transition: opacity 450ms ease;
  }
  .vine-stage { height: min(720px, calc(100dvh - var(--vine-top) - 64px)); position: relative; }
  .vine-stem {
    position: absolute; height: 100%; width: auto; max-width: 148px;
    left: 14px; top: 0; object-fit: fill; pointer-events: none;
  }
  .vine-canvas { position: absolute; inset: -16px -14px; pointer-events: none; }
  .vine-canvas canvas { display: block; width: 100%; height: 100%; }
  .vine-links { position: absolute; inset: 0; }
  .vine-link {
    position: absolute; top: var(--node-y); left: 12px; right: 0;
    height: 96px; transform: translateY(-50%);
    display: flex; align-items: center; color: var(--color-green);
    text-decoration: none; border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .vine-art { position: absolute; left: calc(var(--node-x) - var(--art-size, 92px) / 2 - 12px); width: var(--art-size, 92px); height: var(--art-size, 92px); display: grid; place-items: center; pointer-events: none; }
  .vine-art img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 800ms cubic-bezier(.16,1,.3,1), filter 800ms ease; }
  .vine-caption { margin-left: 138px; max-width: 90px; display: grid; gap: 3px; font-family: var(--font-serif); font-size: 13px; line-height: 1.4; transition: color 550ms ease, transform 650ms cubic-bezier(.16,1,.3,1); }
  .vine-number { font-size: 13px; color: var(--color-orange-dark); font-variant-numeric: tabular-nums; opacity: .72; transition: opacity 500ms ease; }
  .vine-link:is([aria-current='location'], :hover, :focus-visible) .vine-caption { color: var(--color-orange-dark); transform: translateX(3px); }
  .vine-link:is([aria-current='location'], :hover, :focus-visible) .vine-number { opacity: 1; }
  .vine-link:is([aria-current='location'], :hover, :focus-visible) .vine-art img { transform: perspective(500px) translateZ(22px) rotateY(-9deg) rotateZ(-3deg) scale(1.1); filter: drop-shadow(5px 8px 5px rgb(40 86 64 / .18)); }
  .vine-link:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; background: rgb(250 245 236 / .5); }
  .vine-progress { height: 1px; width: 42px; background: currentColor; transform: scaleX(var(--chapter-progress,0)); transform-origin: left; opacity: 0; transition: opacity 450ms ease; margin-top: 3px; }
  .vine-link[aria-current='location'] .vine-progress { opacity: .7; }
  .vine-navigation.is-webgl-ready .vine-stem, .vine-navigation.is-webgl-ready .vine-art img { visibility: hidden; }
  .vine-navigation.is-at-footer { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (min-width: 1780px) and (min-height: 660px) { html.has-vine-nav #main-content { padding-left: 0; } }
@media print { .vine-navigation { display: none !important; } html.has-vine-nav #main-content { padding-left: 0; } }