/* v0.32.2: the top bar slides away while scrolling down and comes back on the first scroll up, every sticky bar follows it.
   Hướng dẫn: the table of contents covers the whole width of the card and highlights on hover like the active chip, but lighter. */
:root{--app-top:64px}
body.hdr-hidden{--app-top:0px}
header{transition:transform .26s ease}
body.hdr-hidden header{transform:translateY(-100%)}
.sl-sticky,.sl-bulk,.lb-bar,.settings-head,.page-head.quote-view-head,#quote-form .fold-head[data-fold=products]{top:var(--app-top);transition:top .26s ease}
.guide-side{top:calc(var(--app-top) + 20px);max-height:calc(100vh - var(--app-top) - 46px);transition:top .26s ease}
.lb-panel{top:calc(var(--app-top) + 66px);max-height:calc(100vh - var(--app-top) - 86px)}
.brand-preview{top:calc(var(--app-top) + 86px)}
.guide-article .guide-toc{top:var(--app-top);margin:0 -28px 18px;padding:12px 28px;border-radius:0;background:#f9fafb;transition:top .26s ease,box-shadow .2s}
.guide-body h2{scroll-margin-top:calc(var(--app-top) + 76px)}
/* the table of contents is a <nav>, so the menu rule "nav button:hover{color:var(--menu-hover)!important}" has to be beaten here */
.guide-article .guide-toc button.small:hover,.guide-open:hover{border-color:var(--brand,#0964fe);background:color-mix(in srgb,var(--brand,#0964fe) 74%,#fff);color:#fff!important}
.guide-article .guide-toc button.small.on,.guide-article .guide-toc button.small.on:hover{color:#fff!important}
.guide-article .guide-toc button.small.on:hover{background:var(--brand,#0964fe)}
.guide-open:hover .solid-icon{color:#fff}
@media (max-width:860px){.guide-article .guide-toc{margin:0 -18px 14px;padding:10px 18px}}
@media print{body.hdr-hidden header{transform:none}}