= one row from source

. Items flex-grow by aspect ratio (justified row, uniform height). ============================================================ */ .td-emag__wrapper .td-grid { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; margin: 0.5rem 0; align-items: stretch; } .td-emag__wrapper .td-grid figure { flex-grow: var(--ar, 1.5); flex-shrink: 1; flex-basis: 0; min-width: 0; cursor: zoom-in; } .td-emag__wrapper .td-grid img { width: 100%; height: auto; display: block; aspect-ratio: var(--ar, 1.5); border-radius: 5px; /* gentle 5px round corner */ } /* Caption (single + grid). Bigger bottom margin so next paragraph isn't crammed. */ .td-emag__wrapper .td-figcaption { font-family: EmagGrotesk, sans-serif; font-size: 0.85rem; line-height: 1.55; color: var(--td-text-dim); font-style: italic; text-align: center; max-width: 46rem; margin: 0.85rem auto 3rem; /* generous bottom margin → next .td-body breathes */ padding: 0 1.5rem; } /* When the next sibling is another image block (no body para after caption), we don't need the same air gap. */ .td-emag__wrapper .td-figcaption + .td-figure, .td-emag__wrapper .td-figcaption + .td-grid { margin-top: 0.5rem; } /* Figure/grid directly followed by text (no caption): still leave breathing room. */ .td-emag__wrapper .td-figure + .td-body, .td-emag__wrapper .td-grid + .td-body { margin-top: 2.5rem; } /* Consecutive grid rows: tighten spacing so they read as one album */ .td-emag__wrapper .td-grid + .td-grid { margin-top: 4px; } /* ============================================================ DROPCAP — first letter of the first paragraph after each heading. Max 2 lines, same colour as the heading. Pattern adapted from zmag.vn/resources/css/layouts/content.css lines 372-397: prefer initial-letter (clamps to exact 2-line height across browsers), fallback to floated ::first-letter for Chrome (no initial-letter yet). ============================================================ */ .td-emag__wrapper .td-heading + .td-body::first-letter { font-weight: 700; color: var(--td-accent-3); } @supports (initial-letter: 2) or (-webkit-initial-letter: 2) { .td-emag__wrapper .td-heading + .td-body::first-letter { initial-letter: 2; -webkit-initial-letter: 2; margin-right: 0.6rem; font-size: inherit; /* size driven by initial-letter, NOT font-size */ line-height: inherit; float: none; color: var(--td-accent-3); font-weight: 700; font-family: EmagGrotesk, sans-serif; } } @supports not (initial-letter: 2) { .td-emag__wrapper .td-heading + .td-body::first-letter { float: left; font-family: EmagGrotesk, sans-serif; font-size: calc(1em * 2 * 1.05); /* ≈ 2 lines */ line-height: 1; margin-right: 0.6rem; padding-top: 0.05em; color: var(--td-accent-3); font-weight: 700; letter-spacing: -0.02em; } } /* No dropcap on the intro paragraph or any body that isn't immediately after a heading. */ /* ============================================================ CTA BOX — pricing + buy buttons at the end of the article ============================================================ */ .td-emag__wrapper .td-ctabox { display: block; max-width: 46rem; margin: 4rem auto 1rem; padding: 1.75rem 2rem 1.85rem; background: linear-gradient(140deg, #FBF4FE 0%, #F2E9F6 100%); border: 1px solid var(--td-accent-2); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(36, 24, 40, 0.04), 0 12px 32px rgba(126, 79, 166, 0.10); position: relative; } .td-emag__wrapper .td-ctabox__label { font-family: EmagGrotesk, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--td-accent); margin-bottom: 0.85rem; } .td-emag__wrapper .td-ctabox__body { font-family: EmagGrotesk, sans-serif; font-size: 1.05rem; line-height: 1.65; color: var(--td-text); } .td-emag__wrapper .td-ctabox__inline { color: var(--td-accent); font-weight: 500; border-bottom: 1px solid currentColor; transition: color 0.2s ease; } .td-emag__wrapper .td-ctabox__inline:hover { color: var(--td-accent-3); } .td-emag__wrapper .td-ctabox__ctas { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .td-emag__wrapper .td-ctabox__btn { display: inline-flex; align-items: center; font-family: EmagGrotesk, sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.75rem 1.25rem; border-radius: 980px; border: 1px solid var(--td-accent-2); background: rgba(255, 255, 255, 0.6); color: var(--td-accent-3); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .td-emag__wrapper .td-ctabox__btn:hover { background: var(--td-accent-2); color: #fff; transform: translateY(-1px); } .td-emag__wrapper .td-ctabox__btn--primary { background: var(--td-accent); color: #fff; border-color: var(--td-accent); } .td-emag__wrapper .td-ctabox__btn--primary:hover { background: var(--td-accent-3); border-color: var(--td-accent-3); } /* ============================================================ FOOTER — light pastel, dark text (matching hero treatment) ============================================================ */ .td-emag__wrapper .td-footer { position: relative; padding: 5rem 1.5rem 4rem; margin-top: 5rem; background-color: var(--td-bg-soft); text-align: center; color: var(--td-text); } .td-emag__wrapper .td-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6rem; pointer-events: none; background: linear-gradient(to top, transparent 0%, var(--td-bg) 100%); } .td-emag__wrapper .td-footer__content { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; } .td-emag__wrapper .td-footer__byline { margin-top: 1.5rem; font-size: 1rem; color: var(--td-text-dim); } .td-emag__wrapper .td-footer__byline strong { font-weight: 700; color: var(--td-text); } .td-emag__wrapper .td-footer__meta { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--td-text-mute); } /* ============================================================ READING PROGRESS BAR ============================================================ */ .td-emag__wrapper .td-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--td-accent-2), var(--td-accent)); z-index: 9998; transition: width 0.1s linear; pointer-events: none; } /* ============================================================ LIGHTBOX — ported from zmag.vn/resources/css/components/lightbox.css. Markup overlay built dynamic at runtime by td-lightbox.js. The overlay is appended to (outside .td-emag__wrapper), so its styles are global-scoped (no .td-emag__wrapper prefix). ============================================================ */ body.td-lightbox-open { position: fixed; width: 100%; overflow: hidden; } html.td-lightbox-open { overflow: hidden; } .td-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; opacity: 0; transition: opacity 0.3s ease; } .td-lightbox.is-open { display: flex; opacity: 1; } .td-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.94); cursor: pointer; z-index: 0; } .td-lightbox__counter { position: absolute; top: 1rem; left: 1.25rem; z-index: 4; color: #fff; font-family: EmagGrotesk, sans-serif; font-size: 0.875rem; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; user-select: none; padding: 0.25rem 0.625rem; background: rgba(0, 0, 0, 0.55); border-radius: 999px; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); } .td-lightbox__toolbar { position: absolute; top: 1rem; right: 1.25rem; z-index: 4; display: flex; align-items: center; gap: 0.5rem; } .td-lightbox__btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; text-decoration: none; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); } .td-lightbox__btn:hover, .td-lightbox__btn:focus { background: rgba(255, 255, 255, 0.25); outline: none; } .td-lightbox__btn:active { transform: scale(0.95); } .td-lightbox__btn svg { display: block; } .td-lightbox__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; margin-left: 0.5rem; backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08); } .td-lightbox__close:hover, .td-lightbox__close:focus { background: rgba(255, 255, 255, 0.25); outline: none; } .td-lightbox__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; padding: 0; } .td-lightbox__img { max-width: 100vw; max-height: calc(100vh - 8rem); object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity 0.2s ease; } .td-lightbox__spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: td-lightbox-spin 0.8s linear infinite; z-index: 2; display: none; } @keyframes td-lightbox-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .td-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 4rem 2rem 1.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.25) 70%, transparent 100% ); color: rgba(255, 255, 255, 0.95); font-family: EmagGrotesk, sans-serif; font-size: 0.9375rem; line-height: 1.55; text-align: center; pointer-events: none; } .td-lightbox__caption:not(:empty) { pointer-events: auto; } /* Cursor cho ảnh trong article (zoom-in indicator) */ .td-emag__wrapper .td-article figure img { cursor: zoom-in; } @media (max-width: 768px) { .td-lightbox__counter { top: 0.75rem; left: 0.875rem; font-size: 0.8125rem; } .td-lightbox__toolbar { top: 0.75rem; right: 0.875rem; gap: 0.375rem; } .td-lightbox__btn, .td-lightbox__close { width: 38px; height: 38px; } .td-lightbox__close { margin-left: 0.375rem; } .td-lightbox__caption { padding: 3rem 1.25rem 1.125rem; font-size: 0.875rem; } .td-lightbox__img { max-width: 100vw; max-height: calc(100vh - 7rem); } } @media (max-width: 480px) { .td-lightbox__counter { top: 0.625rem; left: 0.75rem; font-size: 0.75rem; padding: 0.2rem 0.5rem; } .td-lightbox__toolbar { top: 0.625rem; right: 0.75rem; gap: 0.25rem; } .td-lightbox__btn, .td-lightbox__close { width: 36px; height: 36px; } .td-lightbox__close { font-size: 1.375rem; margin-left: 0.25rem; } .td-lightbox__caption { padding: 2.5rem 1rem 1rem; font-size: 0.8125rem; line-height: 1.5; } } .td-lightbox:fullscreen { background: #000; } .td-lightbox:fullscreen .td-lightbox__backdrop { background: #000; } /* ============================================================ HERO TITLE CHAR ANIMATION — split spans created at runtime by the inline boot script (splitHeroTitle). Each .td-title-char carries an inline animation-delay so the title cascades in. ============================================================ */ .td-emag__wrapper .td-title--hero .td-title-word { display: inline-block; white-space: nowrap; } .td-emag__wrapper .td-title--hero .td-title-char { display: inline-block; opacity: 0; transform: translateY(0.55em) rotateX(-40deg); transform-origin: 0 100%; animation: td-title-char-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; will-change: transform, opacity; } @keyframes td-title-char-in { to { opacity: 1; transform: translateY(0) rotateX(0); } } /* Excerpt + byline fade-in once the chars are settled */ .td-emag__wrapper .td-excerpt, .td-emag__wrapper .td-byline { opacity: 0; transform: translateY(0.6rem); transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal); } .td-emag__wrapper .td-excerpt.is-in, .td-emag__wrapper .td-byline.is-in { opacity: 1; transform: none; } html[data-mode="reduced"] .td-emag__wrapper .td-title--hero .td-title-char { animation: none; opacity: 1; transform: none; } html[data-mode="reduced"] .td-emag__wrapper .td-excerpt, html[data-mode="reduced"] .td-emag__wrapper .td-byline { opacity: 1; transform: none; transition: none; } /* ============================================================ MOBILE-SPECIFIC ENHANCEMENTS (viewport ≤ 640px). ============================================================ */ @media (max-width: 640px) { /* No round corner on mobile images per user feedback (use !important because the desktop rule .td-figure img { border-radius: 5px } has the same specificity and we need to win unambiguously). */ .td-emag__wrapper .td-figure img, .td-emag__wrapper .td-grid img { border-radius: 0 !important; } /* Heading mobile sizing — the universal heading rule above already handles centring + giant numeric, mobile only tweaks the numeric position so it doesn't crash the section above. */ .td-emag__wrapper .td-heading { padding: 0 1rem; margin-top: 5.5rem; } .td-emag__wrapper .td-heading::before { top: -3.5rem; font-size: 6.5rem; } /* Grids — vertical stack on mobile, one image per row at full width. */ .td-emag__wrapper .td-grid { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 0; overflow: visible; } .td-emag__wrapper .td-grid figure { flex: 0 0 auto; width: 100%; height: auto; } .td-emag__wrapper .td-grid img { width: 100%; height: auto; aspect-ratio: var(--ar, 1.5); display: block; } } /* ============================================================ REVEAL ANIMATIONS ============================================================ */ .td-emag__wrapper .td-reveal { opacity: 0; transform: translateY(2rem); transition: opacity 0.85s var(--ease-reveal), transform 0.85s var(--ease-reveal); } .td-emag__wrapper .td-reveal.is-in { opacity: 1; transform: none; } /* ============================================================ FALLBACK MODES ============================================================ */ html[data-mode="reduced"] .td-emag__wrapper canvas { display: none !important; } html[data-mode="reduced"] .td-emag__wrapper .td-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html[data-mode="reduced"] .td-emag__wrapper .td-hero__hint { display: none; } html[data-mode="savedata"] .td-emag__wrapper canvas { display: none; }