/* ═══════════════════════════════════════════════════════════════════════════
   ff-mobile.css — LỚP RESPONSIVE MOBILE TOÀN CỤC (global override)

   Mục tiêu: mọi page / template Elementor mới dựng bằng Container + Global của
   kit đều tự responsive trên điện thoại mà KHÔNG phải chỉnh tay từng element:

     1. Type scale mobile: content = 12px, các cấp trên tăng dần theo thang.
     2. Card grid: 1–3 cột → 1 cột (Elementor tự lo); ≥4 cột → 2 cột (2×2).
     3. Section (container top-level) padding 2 bên = 8px.
     4. Button co lại cho vừa màn hình.

   KHÔNG nhồi lại padding/gap của card nữa (bản trước làm vậy gây vỡ cấu trúc &
   thò thụt không đều): để card giữ nguyên thiết kế, chỉ đổi số cột + xếp dọc.

   Cách hoạt động:
   - Nạp bởi mu-plugin fillform-mobile-responsive.php ở priority 999 nên IN SAU
     CSS của Elementor Kit và của widget → thắng type scale của kit.
   - Chỉ ăn trong @media (max-width:767px) — đúng breakpoint mobile của kit
     (viewport_md = 768). Desktop/tablet giữ nguyên thiết kế gốc.
   - Ép qua BIẾN của Elementor Container (--e-con-grid-template-columns,
     --padding-left/right, --row-gap) thay vì set trực tiếp → bền, không phá
     cấu trúc, tác giả vẫn override được ở từng element nếu thật sự cần.

   Quy ước: dùng biến --ffm-* để chỉnh thang một chỗ. !important dùng có chủ đích
   để đè per-element CSS mà Elementor sinh cho từng widget/container.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Keyframe dùng chung cho MỌI entrance animation trên mobile: chỉ mờ + nhích lên
   một chút (KHÔNG dịch ngang) → không bao giờ vẽ ra ngoài mép phải màn hình.
   Đặt ở top-level (ngoài @media) để luôn khả dụng khi media rule gọi tới. */
@keyframes ffmRise {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to   { opacity: 1; transform: none; }
}

:root {
	/* ── Thang chữ mobile — content neo ở 12px, các cấp tăng dần ────────────── */
	--ffm-fs-caption: 11px;   /* eyebrow, label, meta nhỏ */
	--ffm-fs-body:    12px;   /* CONTENT chuẩn: p, li, text-editor */
	--ffm-fs-lead:    14px;   /* câu dẫn / sapo / mô tả to hơn body */
	--ffm-fs-h6:      12px;
	--ffm-fs-h5:      14px;
	--ffm-fs-h4:      15px;
	--ffm-fs-h3:      18px;
	--ffm-fs-h2:      22px;
	--ffm-fs-h1:      27px;
	--ffm-fs-display: 30px;   /* hero H1 cỡ lớn */

	--ffm-lh-body:    1.6;
	--ffm-lh-head:    1.22;

	/* ── Layout mobile ─────────────────────────────────────────────────────── */
	--ffm-section-gutter: 8px;   /* padding 2 bên của section top-level */

	/* ── Button mobile ─────────────────────────────────────────────────────── */
	--ffm-btn-fs:   12px;
	--ffm-btn-pad:  9px 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BỎ GẠCH CHÂN LINK — MỌI VIEWPORT (không chỉ mobile)
   Thiết kế fillform không dùng underline cho <a>. Gỡ ở mọi trạng thái, phủ cả
   link trong Accordion (title là <a class="elementor-accordion-title"> / summary
   trong nested-accordion), nav, footer, icon-list. Chỉ nhắm THẺ A nên <u>/<ins>
   ngữ nghĩa trong nội dung vẫn giữ gạch chân.
   Muốn giữ gạch chân CHỦ Ý cho một link: thêm class .ff-underline vào <a>.
   ───────────────────────────────────────────────────────────────────────────── */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
.elementor a,
.elementor-accordion-title,
.e-n-accordion-item-title,
.e-n-accordion-item-title a {
	text-decoration: none !important;
}
a.ff-underline,
a.ff-underline:hover {
	text-decoration: underline !important;
}

@media (max-width: 767px) {

	/* ─────────────────────────────────────────────────────────────────────────
	   1. TYPOGRAPHY
	   Nhắm widget chuẩn (heading, text-editor) + heading theo TAG. KHÔNG đụng
	   .elementor-widget-html — các trang dựng bằng HTML widget (vd trang chủ) tự
	   lo responsive riêng, ép vào sẽ phá thiết kế bespoke của chúng.
	   ───────────────────────────────────────────────────────────────────────── */

	/* Content: đoạn văn, list trong text-editor + text chung trong container */
	.elementor-widget-text-editor,
	.elementor-widget-text-editor p,
	.elementor-widget-text-editor li,
	.elementor-widget-text-editor .elementor-widget-container,
	.e-con > .elementor-widget-text-editor {
		font-size: var(--ffm-fs-body) !important;
		line-height: var(--ffm-lh-body) !important;
	}

	/* Heading widget — map cỡ theo tag thực tế được render */
	.elementor-widget-heading h1.elementor-heading-title { font-size: var(--ffm-fs-h1) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-heading h2.elementor-heading-title { font-size: var(--ffm-fs-h2) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-heading h3.elementor-heading-title { font-size: var(--ffm-fs-h3) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-heading h4.elementor-heading-title { font-size: var(--ffm-fs-h4) !important; line-height: 1.3 !important; }
	.elementor-widget-heading h5.elementor-heading-title { font-size: var(--ffm-fs-h5) !important; line-height: 1.3 !important; }
	.elementor-widget-heading h6.elementor-heading-title { font-size: var(--ffm-fs-h6) !important; line-height: 1.3 !important; }

	/* Heading gõ thẳng trong text-editor (không qua heading widget) */
	.elementor-widget-text-editor h1 { font-size: var(--ffm-fs-h1) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-text-editor h2 { font-size: var(--ffm-fs-h2) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-text-editor h3 { font-size: var(--ffm-fs-h3) !important; line-height: var(--ffm-lh-head) !important; }
	.elementor-widget-text-editor h4 { font-size: var(--ffm-fs-h4) !important; }
	.elementor-widget-text-editor h5 { font-size: var(--ffm-fs-h5) !important; }
	.elementor-widget-text-editor h6 { font-size: var(--ffm-fs-h6) !important; }

	/* Câu dẫn / label opt-in — dùng khi muốn to/nhỏ hơn body một cấp */
	.ffm-lead    { font-size: var(--ffm-fs-lead) !important; line-height: 1.5 !important; }
	.ffm-caption { font-size: var(--ffm-fs-caption) !important; }

	/* Icon-box: tiêu đề + mô tả co theo thang */
	.elementor-widget-icon-box .elementor-icon-box-title { font-size: var(--ffm-fs-h4) !important; line-height: 1.3 !important; }
	.elementor-widget-icon-box .elementor-icon-box-description { font-size: var(--ffm-fs-body) !important; line-height: var(--ffm-lh-body) !important; }

	/* ─────────────────────────────────────────────────────────────────────────
	   2. SECTION — gutter 2 bên = 8px cho container top-level
	   Chỉ .e-parent (section ngoài cùng), không đụng container con (card) để card
	   giữ padding riêng. Ép qua biến --padding-left/right nên nền vẫn tràn viền,
	   chỉ NỘI DUNG thụt vào 8px.
	   ───────────────────────────────────────────────────────────────────────── */
	.e-con.e-parent {
		--padding-left:  var(--ffm-section-gutter) !important;
		--padding-right: var(--ffm-section-gutter) !important;
	}

	/* Chặn tràn ngang: ảnh/media không vượt khung */
	.elementor img,
	.elementor video,
	.elementor iframe { max-width: 100% !important; height: auto; }

	/* Bảng dài trong content → cuộn ngang trong khung của nó, không đẩy trang */
	.elementor-widget-text-editor .elementor-widget-container { overflow-x: auto; }

	/* ─────────────────────────────────────────────────────────────────────────
	   3. SỐ CỘT CỦA CARD GRID TRÊN MOBILE
	   Elementor ĐÃ tự đưa mọi grid về 1 cột ở mobile (control columns_grid có
	   mobile_default = 1) — nên KHÔNG ép 1fr nữa, tránh đè lên grid mà tác giả
	   cố ý set cột riêng, và tránh phá padding/gap gốc của card.

	   Ta chỉ can thiệp 1 việc: grid có ≥4 cột ở desktop → 2 cột (2×2…) thay vì 1,
	   vì 1 cột làm khối 4 mục dài lê thê. Số cột desktop được PHP gắn sẵn vào
	   data-ffm-cols (xem fillform-mobile-responsive.php). Elementor in rule mobile
	   ".elementor-XXXX .elementor-element-YYYY{…:1fr}" (specificity 0,3,0); rule
	   dưới đây cùng specificity + nạp sau + !important nên thắng.
	   ───────────────────────────────────────────────────────────────────────── */
	.e-con.e-grid[data-ffm-cols="4"],
	.e-con.e-grid[data-ffm-cols="5"],
	.e-con.e-grid[data-ffm-cols="6"],
	.e-con.e-grid[data-ffm-cols="7"],
	.e-con.e-grid[data-ffm-cols="8"] {
		--e-con-grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Opt-in: flex row nhiều cột muốn xếp dọc 1 cột thì thêm class .ffm-stack vào
	   container. Không ép toàn bộ flex→column vì sẽ phá nav / hàng nút / pill. */
	.e-con.e-flex.ffm-stack {
		--flex-direction: column !important;
		--align-items: stretch !important;
	}
	.e-con.e-flex.ffm-stack > .e-con { --width: 100% !important; }

	/* Opt-in: flex row nhiều cột muốn thành 2 cột (2×2) thì thêm .ffm-2col. */
	.e-con.e-flex.ffm-2col { --flex-wrap: wrap !important; }
	.e-con.e-flex.ffm-2col > .e-con { --width: calc(50% - (var(--column-gap, 20px) / 2)) !important; }

	/* ─────────────────────────────────────────────────────────────────────────
	   4. BUTTON — co lại cho vừa mobile
	   Đè cả button Elementor lẫn class .ff-btn dùng trong HTML widget.
	   ───────────────────────────────────────────────────────────────────────── */
	.elementor-button,
	.elementor-button.elementor-size-sm,
	.elementor-button.elementor-size-md {
		font-size: var(--ffm-btn-fs) !important;
		padding: var(--ffm-btn-pad) !important;
		line-height: 1.4 !important;
	}
	.elementor-button.elementor-size-lg,
	.elementor-button.elementor-size-xl {
		font-size: 13px !important;
		padding: 11px 20px !important;
	}
	.ff-btn, .ff-btn-primary, .ff-btn-secondary {
		font-size: var(--ffm-btn-fs) !important;
		padding: var(--ffm-btn-pad) !important;
		line-height: 1.4 !important;
	}

	/* Cụm 2 nút cạnh nhau: cho phép xuống dòng thay vì tràn */
	.elementor-widget-button .elementor-button { white-space: normal; }

	/* ─────────────────────────────────────────────────────────────────────────
	   5. ACCORDION — co chữ cho hài hoà với phần còn lại của trang
	   Mặc định title accordion ~16px (H3) đứng cạnh content 12px trông lệch. Trên
	   mobile: title về thang h5 (14px), nội dung về body (12px), nút gọn lại. Phủ
	   cả accordion cổ điển (.elementor-accordion) lẫn nested-accordion (.e-n-*).
	   ───────────────────────────────────────────────────────────────────────── */
	.elementor-accordion .elementor-tab-title,
	.elementor-accordion .elementor-accordion-title,
	.e-n-accordion-item-title,
	.e-n-accordion-item-title .e-n-accordion-item-title-text {
		font-size: var(--ffm-fs-h5) !important;   /* 14px */
		line-height: 1.4 !important;
	}
	.elementor-accordion .elementor-tab-title {
		padding: 12px 14px !important;
	}
	/* Icon mở/đóng gọn theo chữ */
	.elementor-accordion .elementor-accordion-icon,
	.elementor-accordion .elementor-accordion-icon i,
	.elementor-accordion .elementor-accordion-icon svg {
		font-size: 13px !important;
		width: 1.1em !important;
		height: auto !important;
	}
	/* Nội dung trong panel → body 12px */
	.elementor-accordion .elementor-tab-content,
	.elementor-accordion .elementor-tab-content p,
	.elementor-accordion .elementor-tab-content li {
		font-size: var(--ffm-fs-body) !important;
		line-height: var(--ffm-lh-body) !important;
	}
	.elementor-accordion .elementor-tab-content {
		padding: 12px 14px !important;
	}

	/* ─────────────────────────────────────────────────────────────────────────
	   6. ENTRANCE ANIMATION — hài hoà trên mobile
	   Toàn site đang dùng nhiều animation bay ngang: slideInRight/fadeInRight/
	   slideInLeft/fadeInLeft (translateX 100% từ ngoài mép) → trên màn 375px chúng
	   vẽ RA NGOÀI mép phải trong lúc chạy → phình chiều rộng, hiện scrollbar ngang,
	   gây cảm giác "vỡ / giật". bounceIn/zoomIn thì nặng, và delay so le (stagger)
	   làm cuộn nhanh thấy card trống một nhịp.

	   Giải pháp: quy MỌI entrance animation về 1 chuyển động DỌC ngắn gọn (ffmRise).
	   Class animation nằm trên .elementor-element (cả widget lẫn container); rule
	   dưới đây (0,2,0 + !important) thắng cả tên animation (vd .slideInRight = 0,1,0)
	   lẫn .animated{animation-duration:1.25s}. Delay đặt 0 để bỏ so le.
	   ───────────────────────────────────────────────────────────────────────── */
	.elementor-element.animated {
		animation-name: ffmRise !important;
		animation-duration: .5s !important;
		animation-delay: 0s !important;
		animation-timing-function: ease-out !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOVER ANIMATION trên thiết bị CẢM ỨNG (grow/float…)
   Không dùng max-width mà dùng (hover:none) để nhắm đúng thiết bị không có chuột:
   trên touch, hover kích bằng chạm rồi DÍNH lại (card phóng to đứng im) → như lỗi.
   Vô hiệu transform ở mọi trạng thái tương tác cho các class elementor-animation-*.
   ───────────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
	[class*="elementor-animation-"]:hover,
	[class*="elementor-animation-"]:focus,
	[class*="elementor-animation-"]:active {
		transform: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION — tôn trọng cài đặt hệ điều hành (mọi viewport)

   Reset CHUẨN phủ MỌI animation, không chỉ entrance của Elementor mà cả các
   animation "mô tả động tính năng" tự chế trong HTML widget (ffFloat/ffNode/
   ffPulse/ffCheck/ffDash… định nghĩa trong kit CSS, gắn inline `animation:ff…`).
   Cho chạy tức thì (.001ms) + 1 vòng thay vì `infinite` → snap về trạng thái cuối,
   không loại bỏ nội dung. Với entrance (ẩn tới khi JS chạy) phải ÉP hiện ngay để
   không ai bị "mất" nội dung khi tắt chuyển động.
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.elementor-element.animated,
	.elementor-invisible {
		animation: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}