/* What the pages drawn by the server need on top of theme.css (design/saas-landing-web, copied as it is):
   - the font family picked in Theme options (theme-options.css, --tuetran-font-family) over the one of the drawing;
   - the logo height of Theme options, which the generic rule `.site-logo img` of theme-options.css would otherwise set at its own size;
   - a block with one screenshot only (is-single), the icons of «More features» drawn inline, the copy button as a real button;
   - the links typed in the copyright box, the errors of the demo request form, the plain text of a Page without blocks;
   - the place of the floating buttons of the floating-widget package above the bottom bar of phones (variables only, rule of dev/04). */

.page { font-family: var(--tuetran-font-family, 'Be Vietnam Pro', system-ui, -apple-system, sans-serif); }

.site-logo .site-logo-image { width: auto; height: var(--tuetran-logo-height, 30px); }
.site-logo .site-logo-image.is-small { width: 28px; height: 28px; }

.shot-pair.is-single { padding: 0; }
.shot-pair.is-single .shot-desktop { width: 100%; }
.shot-pair.is-single .shot-phone { position: relative; right: auto; bottom: auto; width: min(100%, 280px); margin: 0 auto; }

.more-feature-icon:has(svg)::before { display: none; }
.more-feature-icon svg { width: 22px; height: 22px; flex-shrink: 0; }

button.demo-account-copy { background: transparent; font-family: inherit; line-height: 1; cursor: pointer; }
button.demo-account-copy[data-copied] { border-color: currentColor; }

.site-footer-note a { color: #FFFFFF; text-decoration: none; font-weight: 600; }

.request-error { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--danger, #C0362C); border-radius: var(--radius-field, 11px); color: var(--danger, #C0362C); font-size: 14px; font-weight: 500; line-height: 1.5; }

.saas-prose { font-size: 16px; line-height: 1.7; color: var(--text, #172948); }
.saas-prose p, .saas-prose ul, .saas-prose ol { margin: 0 0 16px; }
.saas-prose a { color: var(--action-text, #1D4ED8); }

/* The frame (owner 13/11/2026 20:0x «khung chật quá… các trang bên trong cũng rộng bằng ở trang chủ»): one width for every page,
   the home page, the legal pages, the blog and the card pages alike, in place of the drawing's 1200, 860 and 760. */
:root { --wrap: 1440px; }

/* The floating buttons of the drawing (fab-stack: light/dark, Chat Zalo, Call) are the floating-widget package's; the theme sets only
   its variables: the place, the size (52, 44 under 900) and the switch drawn like the drawing's fab-theme in both modes. */
:root {
  --fab-edge-x: 24px; --fab-edge-y: calc(24px + env(safe-area-inset-bottom, 0px)); --fab-size: 52px; --fab-gap: 12px;
  --fab-theme: var(--surface, #FFFFFF); --fab-theme-icon: var(--text, #172948); --fab-theme-ring: var(--border-strong, #E3E7ED);
  --fab-theme-ring-hover: var(--action-fill, #1D4ED8); --fab-theme-icon-hover: var(--action-fill, #1D4ED8); --fab: var(--action-fill, #1D4ED8);
}
@media (max-width: 900px) {
  :root { --fab-edge-x: 16px; --fab-edge-y: calc(48px + 48px + env(safe-area-inset-bottom, 0px)); --fab-size: 44px; }
}

/* The cookie notice of the cookie-consent package (partials/cookie-consent), sheet 07 (design cf6dc246, 14/11/2026): a card at the bottom
   left corner, its bottom level with the floating buttons' column (same --fab-edge-x/y). From 901 it is 440 wide; under 900 it sits above
   the bottom bar and leaves the column (its width, its edge and a gap of 12) free on the right. Layers: bottom bar 55, card 58, floating
   buttons 60, the «More» sheet 64/65 over it. The words at most three lines, the button one line; longer words end in «…». No motion. */
.cookie-consent { position: fixed; left: var(--fab-edge-x, 24px); bottom: var(--fab-edge-y, 24px); z-index: 58; width: min(440px, calc(100vw - 2 * var(--fab-edge-x, 24px) - var(--fab-size, 44px) - 12px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--surface, #FFFFFF); color: var(--text, #172948); border: 1px solid var(--border-strong, #E3E7ED); border-radius: var(--tt-radius-card, 18px); }
.cookie-consent[hidden] { display: none; }
.cookie-consent-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text, #172948); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cookie-consent-accept { display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 20px; border: 1px solid var(--action-fill, #1D4ED8); border-radius: var(--tt-radius-btn, 11px); background: var(--action-fill, #1D4ED8); color: var(--action-on, #FFFFFF); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cookie-consent-accept:hover { text-decoration: underline; }
.cookie-consent-accept:focus-visible { outline: 3px solid var(--focus, rgba(29,78,216,0.22)); outline-offset: 2px; }
@media (max-width: 560px) {
  .cookie-consent { gap: 12px; padding: 16px; }
}
/* A picture typed into a post (blog package editor) keeps inside the column of the text */
.post-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-inner, 14px); }
.post-article-body figure { margin: 32px 0; }
.post-article-body figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2, #565E6D); }

/* The myINFO account pages (info-landing): the steps title is a heading for screen readers, drawn as the drawing's div. */
h2.invite-steps-title { margin: 0; }