/* ============================================================ Hoàng Sao — single-post layout Loaded on single posts only (is_singular('post') guard in inc/enqueue.php), so pages, the shop and product pages are untouched by anything here. Ported from the Dấu Chân Tự Do journal layout. Three constraints came across with it, and each one was a bug there first — do not "tidy" any of them. ============================================================ */ /* ---- Two-column shell -------------------------------------------------- */ .hs-article{ display:grid; /* minmax(0,…), never a bare 1fr. A bare 1fr is minmax(auto,1fr), so the track grows to its widest item's MIN-CONTENT width — one wide table or a long unbroken string then pushes the column past the viewport and the whole page scrolls sideways. Measured at 390px on the source site: a bare 1fr produced a 436px document. */ grid-template-columns:minmax(0,1fr) 330px; gap:52px; align-items:start; } /* .hs-prose caps the measure at 66ch and theme.css leaves it left-aligned. Inside this grid the column already sets the measure, so the cap would only push the text away from the rail and leave a gutter that reads as a broken layout. */ .hs-article__body{max-width:none;margin:0} /* Anchor landing offset. .hs-nav is sticky at 75px, so a heading jumped to from the contents list would otherwise land at top:0 and sit BEHIND the header — you click a contents link and the heading you asked for is the one thing you cannot see. 110px matches the rail's top offset and leaves ~22px clearance. scroll-margin-top goes on the HEADINGS only. Never combine it with a scroll-padding-top on : the two stack, and the contents rail then highlights the previous heading after every jump. */ .hs-article h2[id]{scroll-margin-top:110px} /* ---- Reading progress -------------------------------------------------- */ /* Fixed to the viewport top, above the sticky nav's layer so it is never covered. */ .hs-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; pointer-events:none; } .hs-progress__bar{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--hs-accent),var(--hs-accent-2)); transition:width 90ms linear; } @media(prefers-reduced-motion:reduce){ .hs-progress__bar{transition:none} } /* ---- Sticky rail ------------------------------------------------------- The sticky is on the COLUMN, not on an individual card — a sticky card drifts down as you scroll and collides with whatever sits below it in the same column. The height cap is the important part. This rail carries three or four cards, and a seven-heading contents list pushes the total past 1000px — taller than a 900px viewport. A sticky element taller than the viewport can never be scrolled to its bottom: the page scrolls, the element stays pinned, so its last card is permanently out of reach. The cap lives on the RAIL, not on the contents list, so there is exactly one scroll container. Nesting a second gives the reader two scrollbars in the same 330px column and it becomes guesswork which one their wheel drives. */ .hs-article__rail{ position:sticky; top:100px; align-self:start; display:grid; gap:18px; max-height:calc(100vh - 124px); overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:var(--hs-line) transparent; overscroll-behavior:contain; } .hs-article__rail::-webkit-scrollbar{width:6px} .hs-article__rail::-webkit-scrollbar-track{background:transparent} .hs-article__rail::-webkit-scrollbar-thumb{background:var(--hs-elev);border-radius:3px} .hs-railcard{ background:var(--hs-card); border:1px solid var(--hs-line); border-radius:14px; padding:20px; } .hs-railcard .hs-eyebrow{margin-bottom:14px} /* ---- Contents list ---------------------------------------------------- No cap or overflow here on purpose — the rail is the single scroll container. */ .hs-toc{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.45} .hs-toc li{margin-bottom:2px} .hs-toc a{ display:block; padding:7px 0 7px 14px; border-left:2px solid var(--hs-line); color:var(--hs-muted); transition:color var(--hs-t),border-color var(--hs-t); } .hs-toc a:hover, .hs-toc a:focus-visible{color:var(--hs-text);border-left-color:var(--hs-elev)} .hs-toc a.is-active{color:var(--hs-accent);border-left-color:var(--hs-accent);font-weight:600} /* ---- Contact CTA ------------------------------------------------------- */ .hs-railcard--cta{ display:flex; flex-direction:column; align-items:stretch; background:var(--hs-surface); border-color:var(--hs-accent); } .hs-railcard--cta p{color:var(--hs-muted);font-size:14px;line-height:1.7;margin:0 0 16px} /* align-items:stretch on the parent rather than width:100% on the button — immune to the box model either way, so a future reset reorder cannot reintroduce a 100%+padding overflow. */ .hs-railcard__phone{ display:block; margin-top:12px; text-align:center; font-size:13px; color:var(--hs-muted); } .hs-railcard__phone strong{color:var(--hs-accent);white-space:nowrap} .hs-railcard__phone:hover strong{color:var(--hs-accent-2)} /* ---- Product mini card ------------------------------------------------ The two-way link with the product page — the reason this rail exists commercially. */ .hs-mini{ display:flex; gap:12px; align-items:center; padding:10px; background:var(--hs-elev); border:1px solid var(--hs-line); border-radius:11px; transition:border-color var(--hs-t); } .hs-mini:hover{border-color:var(--hs-accent)} .hs-mini + .hs-mini{margin-top:10px} .hs-mini__thumb{flex:0 0 64px} .hs-mini__thumb img{width:64px;height:64px;border-radius:8px;object-fit:cover} .hs-mini__body{min-width:0} .hs-mini__title{display:block;font-weight:700;font-size:14.5px;line-height:1.35} .hs-mini__price{display:block;margin-top:4px;color:var(--hs-accent);font-weight:700;font-size:13px} /* WooCommerce wraps prices in its own tags; keep them inheriting. */ .hs-mini__price .amount, .hs-mini__price bdi{color:inherit;font:inherit} .hs-mini__price del{opacity:.6;font-weight:500} /* ---- Meta, tags, actions ---------------------------------------------- */ .hs-postmeta{ color:var(--hs-muted); font-size:13px; margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--hs-line); } .hs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0} .hs-tags li{margin:0} .hs-tags a{ display:inline-block; padding:6px 12px; background:var(--hs-card); border:1px solid var(--hs-line); border-radius:999px; color:var(--hs-muted); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; } .hs-tags a:hover{border-color:var(--hs-accent);color:var(--hs-accent)} .hs-postacts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--hs-line); } /* ---- Responsive ------------------------------------------------------- Below 1024 the rail un-sticks and moves ABOVE the prose (order:-1) so the contents list and the CTA are the first things seen. Un-stuck means the height cap and the inner scroll have to go — a static column scrolls with the page, and capping it would hide cards for no reason. */ @media(max-width:1024px){ .hs-article{grid-template-columns:minmax(0,1fr);gap:34px} .hs-article__rail{ position:static; top:auto; order:-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-height:none; overflow-y:visible; padding-right:0; } .hs-railcard--toc{grid-column:1 / -1} } @media(max-width:700px){ .hs-article__rail{grid-template-columns:minmax(0,1fr)} .hs-railcard{padding:18px} /* Long Vietnamese headings have few break opportunities; without this a single long word can still widen the card. */ .hs-toc a{overflow-wrap:anywhere} }