/*
 * theme.css — CSS TĨNH của theme landing-basic. Phục vụ qua route /static/... (mô phỏng CDN, xem
 * routes/static/$.ts) và nhúng vào layout bằng <link>. VÌ là file tĩnh (không qua Liquid) nên KHÔNG
 * dùng biến Liquid ({{ ... }}); giá trị động theo trang (màu/kiểu chữ/khoảng cách...) đi qua CSS
 * variable `--color-primary`/`--radius`/... (design token, xem lib/theme-page-editor/theme-settings.ts)
 * — layout KHÔNG cần set fallback ở đây, `themeSettingsStyleTag` LUÔN render đủ mọi biến (kể cả trang
 * chưa từng chỉnh gì) trước khi file này áp dụng.
 */

* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; color: var(--color-text); background-color: var(--color-background) }

/* ── Hiệu ứng hiển thị (EffectPanel.tsx, reveal khi cuộn vào viewport) — class gắn bởi
   template-src/runtime/core/reveal-bootstrap.ts. `--lapage-reveal-duration` set inline theo field
   (`durationMs`), mặc định 600ms nếu vì lý do gì đó JS chưa kịp set. 1 transition DUY NHẤT
   (opacity/transform) chạy được cho MỌI biến thể (`lapage-reveal--<name>` chỉ khác vị trí BAN ĐẦU). */
.lapage-reveal { opacity: 0; transition: opacity var(--lapage-reveal-duration, 600ms) ease, transform var(--lapage-reveal-duration, 600ms) ease; }
.lapage-reveal.is-visible { opacity: 1; transform: none; }
.lapage-reveal--slide-up { transform: translateY(24px); }
.lapage-reveal--slide-down { transform: translateY(-24px); }
.lapage-reveal--slide-left { transform: translateX(24px); }
.lapage-reveal--slide-right { transform: translateX(-24px); }
.lapage-reveal--zoom-in { transform: scale(.92); }

section:has(.is-sticky-top) {
    position: sticky;
    top: 0;
    z-index: 999;
}
section:has(.is-sticky-bottom) {
    position: sticky;
    bottom: 0;
    z-index: 999;
}

.block-faq { padding: 48px 24px; max-width: 640px; margin: 0 auto; }
.faq-item { margin-bottom: 20px; }
.faq-question { font-weight: 600; margin: 0 0 4px; }
.faq-answer { margin: 0; color: var(--color-text); }

.block-cta { padding: 24px; text-align: center; }
.cta-button { display: inline-block; background: var(--color-primary); color: var(--color-primary-text); padding: 16px 32px; border-radius: var(--button-radius); text-decoration: none; font-weight: 600; }

.block-custom-content { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.block-custom-content.padding-sm { padding: 16px 24px; }
.block-custom-content.padding-md { padding: 48px 24px; }
.block-custom-content.padding-lg { padding: 96px 24px; }
.block-generic-heading { font-size: 1.8rem; margin: 0; }
.block-generic-text { color: var(--color-text); line-height: 1.6; }
.block-generic-image { max-width: 100%; border-radius: var(--radius); }
.block-generic-button { display: inline-block; background: var(--color-primary); color: var(--color-primary-text); padding: 14px 28px; border-radius: var(--button-radius); text-decoration: none; font-weight: 600; align-self: flex-start; }
.block-generic-video { display: block; width: 100%; max-width: 100%; border-radius: var(--radius); background: #000; }
.block-generic-video--youtube { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.block-generic-video--youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video.block-generic-video { aspect-ratio: 16/9; }
.block-generic-html { max-width: 100%; overflow-x: auto; }

/* Block dùng chung `lead-form` (nhúng 1 form đã lưu ở "/app/forms" vào bất kỳ section nào) — dùng
   CHUNG class `.lapage-field`/`.lapage-form`/... với section `form`/`lead-form-popup` (mỗi nơi đó tự
   khai lại y hệt trong <style> RIÊNG của section vì chỉ chạy khi CHÍNH section đó có mặt; block dùng
   chung này có thể nằm trong BẤT KỲ section nào nên khai 1 LẦN Ở ĐÂY, toàn cục). */
.block-generic-lead-form .lapage-form { display: flex; flex-direction: column; gap: 14px; }
.block-generic-lead-form .lapage-field { display: flex; flex-direction: column; gap: 6px; }
.block-generic-lead-form .lapage-field-label { font-weight: 600; font-size: .95rem; }
.block-generic-lead-form .lapage-req { color: var(--color-error); }
.block-generic-lead-form .lapage-input { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
.block-generic-lead-form .lapage-input:focus { outline: 2px solid var(--color-primary); border-color: transparent; }
.block-generic-lead-form textarea.lapage-input { min-height: 90px; resize: vertical; }
.block-generic-lead-form .lapage-form-submit { padding: 14px 20px; border: 0; border-radius: var(--button-radius); background: var(--color-primary); color: var(--color-primary-text); font-weight: 700; font-size: 1rem; cursor: pointer; align-self: flex-start; }
.block-generic-lead-form .lapage-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.block-generic-lead-form .lapage-form-success { display: none; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--color-success-bg); color: var(--color-success); border: 1px solid #a7f3d0; }
.block-generic-lead-form .lapage-form-success.is-visible { display: block; }
.block-generic-lead-form-empty { color: var(--color-muted); font-size: 13px; margin: 0; }

.block-generic-countdown { font-weight: 700; color: var(--color-primary); }
.block-generic-countdown-time { font-variant-numeric: tabular-nums; }
.block-generic-countdown.is-ended { opacity: .6; }

.block-generic-divider { height: var(--lapage-divider-height, 32px); display: flex; align-items: center; }
.block-generic-divider-line { width: 100%; border: none; border-top: 1px solid var(--color-border); margin: 0; }

.block-generic-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.block-generic-icon-list-item { display: flex; align-items: flex-start; gap: 10px; }
.block-generic-icon-list-icon { flex-shrink: 0; font-size: 1.1em; line-height: 1.4; }

/* Component runtime dùng chung `gallery`/lightbox (assets/runtime.js dựng overlay này rồi APPEND
   vào <body> — nên CSS phải TOÀN CỤC, không scope theo section). Ẩn mặc định; .is-open mới hiện. */
.lapage-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: var(--color-overlay, rgba(0,0,0,.85)); }
.lapage-lightbox.is-open { display: flex; }
.lapage-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.lapage-lightbox button { position: absolute; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lapage-lightbox button:hover { background: rgba(255,255,255,.3); }
.lapage-lightbox-close { top: 16px; right: 16px; }
.lapage-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lapage-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }