/*
Theme Name: Touchline Atlas (Flatsome Child)
Description: Child theme của dự án ai-predictions-global. Nguồn ở projects/ai-predictions-global/wp/themes/flatsome-child, chép sang site bằng tools/sync-theme.sh.
Template: flatsome
Version: 0.1.0
Text Domain: aip
*/

/* ==========================================================================
   flatsome-site-builder — CSS tiện ích tối thiểu
   Dán vào cuối style.css của flatsome-child (hoặc Flatsome › Advanced › Custom CSS).
   Chỉ bổ sung thứ Flatsome KHÔNG có sẵn; màu luôn lấy từ biến theme --fs-color-*.
   Thiếu file này các pattern vẫn hiển thị được (chỉ mất phần trang trí).
   Có sẵn trong Flatsome, KHÔNG cần định nghĩa lại: bg-primary-color, bg-secondary-color, primary-color,
   secondary-color, lead, is-larger, is-xlarge, is-xxlarge, uppercase, op-7, mb-0, mb-half, thin-font,
   bullet-checkmark / bullet-arrow / bullet-star (cho <li>), box-shadow-1..5(-hover), count-up (span).
   ========================================================================== */

/* Nhãn nhỏ phía trên tiêu đề section */
.fsb-eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fs-color-primary); margin-bottom: .5em; }
.dark .fsb-eyebrow { color: var(--fsb-eyebrow-on-dark, currentColor); opacity: .85; } /* secondary trên nền primary thường trượt tương phản */

/* Thang chữ mobile: Flatsome hạ h2 còn 1.2em, nhỏ hơn cả .lead (1.3em) → cân lại thứ bậc */
@media (max-width: 549px) {
	h2 { font-size: 1.45em; }
	h3 { font-size: 1.15em; }
	.lead, p.lead { font-size: 1.1em; }
}

/* Chữ trên nút secondary đặc: màu secondary sáng (vàng/cam) + chữ trắng thường trượt WCAG (≈2:1).
   Chạy scripts/contrast.py; nếu cần, khai báo :root { --fsb-on-secondary: #0F172A; } */
.button.secondary:not(.is-outline):not(.is-link):not(.is-underline) { color: var(--fsb-on-secondary, #fff); }

/* Cỡ chữ tối thiểu 12px cho meta nhỏ của Flatsome (chức danh team, ngày đăng, danh mục SP: 10–11,5px mặc định) */
.person-title.is-small, .post-meta.is-small, .product-small p.category { font-size: 12px; }

/* Section nền màu theme: Flatsome có .section.dark{background-color:#666} đè lên .bg-primary-color */
.section.bg-primary-color { background-color: var(--fs-color-primary); }
.section.bg-secondary-color { background-color: var(--fs-color-secondary); }

/* Nền nhạt pha từ màu chính (đổi màu chính → nền tự đổi theo) */
.fsb-soft { background-color: #f4f7f6; background-color: color-mix(in srgb, var(--fs-color-primary) 6%, #fff); }

/* Số bước quy trình / số liệu lớn */
.fsb-step { font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--fs-color-primary); opacity: .3; margin-bottom: .25em; }
.fsb-stat { font-size: 2.6rem; font-weight: 700; line-height: 1.1; margin-bottom: .1em; }
@media (max-width: 549px) { .fsb-stat { font-size: 2rem; } .fsb-step { font-size: 2.2rem; } }

/* Bo góc ảnh (dùng trên [ux_image class="fsb-rounded"] hoặc col chứa ảnh) */
.fsb-rounded img, img.fsb-rounded { border-radius: 12px; }

/* Thẻ (card) cho col: [col class="fsb-card" …] khi cần viền nhẹ thay vì bóng đổ */
.fsb-card > .col-inner { background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 12px; }

/* Iframe bản đồ / video nhúng co giãn đúng tỉ lệ: <div class="fsb-embed">…iframe…</div> trong [ux_html] */
.fsb-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.fsb-embed.is-map { aspect-ratio: 21 / 9; }
@media (max-width: 549px) { .fsb-embed.is-map { aspect-ratio: 4 / 3; } }
.fsb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }