/* ========================================================================== 21-footer.css — tách từ style.css ngày 17/08/2026 theo III.4.1. Nội dung bên dưới là NGUYÊN VĂN các mục §10 footer UX Block của bản gộp; không sửa một luật nào trong lần tách này. ========================================================================== */ /* ── §10 footer UX Block (dòng 1033–1458 của style.css cũ) ──────────────────── */ /* -------------------------------------------------------------------------- 10. FOOTER UX BLOCK "Footer 4T" — cấu trúc row/col Flatsome -------------------------------------------------------------------------- */ /* Figma 320:1858 KHÔNG dùng strokeWeight chung mà dùng individualStrokeWeights {top:0, right:0, bottom:20, left:0} — tức CHỈ có viền đáy 20px camel. Và strokeAlign=INSIDE nên 20px đó nằm TRONG chiều cao 650, không cộng thêm. Với box-sizing:border-box của Flatsome thì padding-bottom + border-bottom phải bằng đúng khoảng trống Figma (44px). */ .t4fx-footer { background: linear-gradient(180deg, var(--t4-leaf) 0%, var(--t4-dark-moss) 100%); border-bottom: 20px solid var(--t4-camel); color: var(--t4-white); padding: 61px 0 24px; } /* Figma "Logo_Vertical" cao ĐÚNG 45px (rộng 189,15). Shortcode [ux_image] đặt bề rộng theo PHẦN TRĂM cột (57%) nên logo ra 205px ở desktop và 201px ở mobile — hai con số khác nhau, cả hai đều sai. Khoá theo CHIỀU CAO chứ không theo bề rộng: chiều cao là thứ Figma quy định và cũng là thứ đẩy lệch mọi khối bên dưới; bề rộng suy ra từ tỉ lệ tệp SVG (≈190,3px, lệch 1,1px so với Figma — dưới ngưỡng 2px). */ .t4fx-footer .row:has(> .col .t4fx-dkkd) .img img { width: auto !important; height: 45px !important; } .t4fx-footer a { color: var(--t4-white); text-decoration: none; } .t4fx-footer a:hover { text-decoration: underline; } .t4fx-footer ul { list-style: none; margin: 0; padding: 0; } /* ⛔ GỐC CỦA NHIỀU LỖI LỆCH VỊ TRÍ: [text_box] của Flatsome luôn kèm class "banner-layer x50 y50", vốn dành cho chữ đặt đè lên banner — left:50% + transform:translate(-50%,-50%). Dùng ngoài banner (như trong footer) thì khối bị kéo lệch sang trái/lên trên, đo được transform: matrix(1,0,0,1,-345,-18). Trả về dòng chảy bình thường cho MỌI text_box trong footer. */ .t4fx-footer .text-box.banner-layer { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } /* Figma "Frame 155": khối chữ rộng ĐÚNG 432px, đặt sát mép PHẢI của khung 1080, nhưng chữ BÊN TRONG căn TRÁI (textAlignHorizontal=LEFT) và giãn dòng 28px. Trước đây set text-align:right cho cả khối rộng 600px — sai cả 3 thông số. */ .t4fx-footer .row:has(> .col .t4fx-dkkd) > .col { padding: 0; /* Figma: logo x=410, khối ĐKKD x=1058 (sát mép phải 1490). Padding ngang 15px của Flatsome đẩy logo sang phải 15px và khối ĐKKD sang trái 15px; padding-bottom 30px làm hàng cao 86 thay vì 55, kéo đường kẻ xuống y=206 thay vì 175. */ } /* [phục vụ] dòng đăng ký kinh doanh ở footer | [trang] toàn site [figma] "Công Ty TNHH DATAWA Đăng k…" '349:2744' 432×55, trong '4T Footer ▸ Frame 155'. Không cộng 30: đây là '.text-inner', không phải '.col' (xem GIA ĐÌNH SỐ KHUNG đầu '30-components.css'). */ .t4fx-dkkd { margin: 0; } .t4fx-dkkd .text-inner { width: 432px; max-width: 100%; margin-left: auto; text-align: left !important; } /* Figma "Frame 155": logo + dòng ĐKKD canh GIỮA theo chiều dọc trong cùng hàng (counterAxisAlignItems=CENTER) — [row] mặc định của Flatsome không tự làm việc này khi text 2 dòng cao hơn logo. */ .row:has(> .col .t4fx-dkkd) { align-items: center; } /* Figma: đường kẻ ngang 1px chạy hết khung nội dung, NGAY DƯỚI hàng logo + ĐKKD (node "Horizontal Divider" trong 4T Footer). Shortcode không có phần tử này — dựng bằng ::after trên chính hàng đó, không phải thêm khối mới vào UX Block. */ .t4fx-footer .row:has(> .col .t4fx-dkkd)::after { content: ""; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, .4); /* Figma: stroke trắng @40% */ margin-top: 58px; /* hàng logo kết thúc y=117 → đường kẻ đúng y=175 */ } /* Khoảng cách dọc giữa các khối — [gap] trong shortcode đang để 65/40/42px, đo lại theo Figma thì lệch tới +113px tổng chiều cao (763 so với 650). Chỉnh bằng CSS, KHÔNG sửa shortcode. Thứ tự con trong .section-content: 1 hàng logo · 2 gap · 3 hàng 4 cột · 4 gap · 5 hàng icon MXH · 6 gap · 7 hàng liên hệ · 8 copyright. */ .t4fx-footer .section-content > .gap-element:nth-child(2) { padding-top: 35px !important; } /* Figma: đường kẻ y=176 → hàng cột y=208 */ .t4fx-footer .section-content > .gap-element:nth-child(4) { padding-top: 18px !important; } .t4fx-footer .section-content > .gap-element:nth-child(6) { padding-top: 10px !important; } /* [text_box] của UX Builder tự đặt "font-size:100%" trên .text-box-content rồi chữ thật nằm trong .text-inner lồng bên trong — ép trực tiếp ở đây, đặt trên .t4fx-dkkd không đủ vì bị style scoped theo ID của chính khối đè. */ .t4fx-dkkd .text-inner { font-family: var(--t4-font-body) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 28px !important; /* Figma lh=28, không phải 18 */ color: #fcfbf6 !important; } .t4fx-col-title { margin: 0 0 24px; } /* [title tag_name="h4"] của Flatsome bọc chữ trong

— lớp .t4fx-col-title chỉ nằm trên
ngoài cùng, không chạm được chữ thật. Cùng loại lỗi với .t4fx-dkkd (mục 10), sửa bằng cách ép trực tiếp vào .section-title-main. */ .t4fx-col-title .section-title-main { font-family: var(--t4-font-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 22px !important; color: #f8f5ee !important; text-transform: none !important; border-bottom: 0 !important; /* Flatsome vẽ gạch chân ở ĐÂY (2px rgba(0,0,0,.1)) */ padding-bottom: 0 !important; white-space: nowrap; /* Figma: mọi tiêu đề cột nằm 1 dòng. Chữ render trên web rộng hơn số đo Figma vài px nên "Hệ sinh thái kiến thức" và "Hỗ trợ khách hàng" bị bẻ đôi, đẩy cả danh sách bên dưới xuống. */ /* ⛔ Flatsome đặt sẵn margin "0 15px -2px 0" lên chính này. Cái margin-bottom ÂM 2px là thủ phạm thật của 15 mốc lệch mobile:

là flex container nên chiều cao nó = hộp margin của span = 19-2 = 17px, tức khoảng cách tiêu đề → mục đầu bị hụt đúng 2px ở MỌI cột. Nhìn số line-height thì vẫn thấy 19px và tưởng đã đúng. */ margin: 0 !important; } /* Flatsome "section-title" vẽ gạch chân ở HAI nơi độc lập: border-bottom của chính

và của bên trong, cộng 2 thẻ rỗng hai bên làm đường kẻ kéo dài. Figma KHÔNG có gạch chân nào dưới tiêu đề cột — phải tắt cả ba. */ .t4fx-col-title .section-title { border-bottom: 0 !important; /* Figma: tiêu đề kết thúc y=233, mục đầu y=257 → cách 24px. Mục đầu có sẵn 3px đệm trong .ux-menu-link nên đặt 21 để chữ rơi đúng 257. ⚠ 22 → 20 khi gỡ margin-bottom âm 2px của .section-title-main ở trên:

cao thêm đúng 2px nên phải trả lại 2px ở đây, tổng khối tiêu đề giữ nguyên 42px. Gỡ một mà quên cái kia là cả 4 cột desktop tụt 2px. */ margin-bottom: 20px !important; } .t4fx-col-title .section-title b { display: none !important; } .t4fx-col-title.section-title-container { margin-bottom: 0 !important; } /* ⛔ [ux_menu] render
, KHÔNG phải
  • — mọi quy tắc ".t4fx-col-list li" trước đây không hề có tác dụng. Mỗi mục cao sẵn 40px; Figma là 39px (chữ 15 + khoảng cách 24). */ .t4fx-col-list .ux-menu-link { height: 39px; } /* [ux_menu_link] render — chữ thật nằm trong span này, không phải trực tiếp trong
  • /. */ .t4fx-col-list .ux-menu-link__text { font-family: var(--t4-font-body) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 15px !important; color: rgba(255, 255, 255, .62) !important; /* Figma #ffffff @62% — KHÔNG phải trắng đặc */ white-space: nowrap; /* Figma mọi mục nằm 1 dòng; cột hẹp làm "Tư vấn chiến lược…" bị bẻ 2 dòng */ } /* Figma "Frame 180": 4 cột KHÔNG chia đều 25%, mà rộng theo nội dung rồi dàn SPACE_BETWEEN trong khung 1080 (x = 410 · 787 · 1059 · 1351). Flatsome chia đều 25% + padding 15px mỗi bên → vừa sai vị trí, vừa làm cột 1 hẹp hơn nội dung nên chữ bị bẻ dòng. Chỉ áp desktop; mobile giữ nguyên quy tắc xếp dọc ở media query cuối file. */ @media (min-width: 850px) { .t4fx-footer .row:has(> .col .t4fx-col-title) { display: flex; flex-wrap: nowrap; justify-content: space-between; padding-left: 0; padding-right: 0; } /* ⛔ .row của Flatsome có ::after clearfix (content:"" display:table). Trong flex-container nó thành PHẦN TỬ THỨ 5 và ăn mất một khoảng của space-between: khoảng cách ra 385/4=96px thay vì 385/3=128px, cột cuối hụt 97px so với Figma. Tắt clearfix cho đúng 4 phần tử. (Đã loại trừ giả thuyết "nút văn bản khoảng trắng" bằng thí nghiệm dựng flex thật trên trình duyệt — khoảng trắng KHÔNG gây lệch.) */ .t4fx-footer .row:has(> .col .t4fx-col-title)::after, .t4fx-footer .row:has(> .col .t4fx-col-title)::before { content: none; } .t4fx-footer .row:has(> .col .t4fx-col-title) > .col { max-width: none; flex: 0 0 auto; padding-left: 0; padding-right: 0; } /* Bề rộng ĐÚNG từng cột theo Figma (Section w=249/143/164/139). Cộng lại 695, khung 1080 → 3 khoảng cách 128,33px, cho ra x = 410 · 787 · 1059 · 1351 khớp tuyệt đối bản thiết kế. */ .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(1) { width: 249px; } .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(2) { width: 143px; } .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(3) { width: 164px; } .t4fx-footer .row:has(> .col .t4fx-col-title) > .col:nth-child(4) { width: 139px; } } .t4fx-mxh { display: flex; align-items: center; gap: 24px; } .t4fx-mxh-ke { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.35); } /* Dải icon mạng xã hội Footer — Figma node 320:1858 → Section: đường kẻ 422px + dải icon (Frame 152, 4 icon 26×23 gap 16, KHÔNG khung/nền tròn) + đường kẻ 422px, cách nhau 32px, căn giữa cả hàng. [follow] chỉ render 4 icon nên 2 đường kẻ dựng bằng ::before/::after ngay trên chính container — genGap 16px (khớp icon-icon), cộng thêm margin 16px ở cạnh trong của đường kẻ để đạt đúng 32px đường kẻ↔icon như Figma. */ .t4fx-mxh-list { display: flex; align-items: center; justify-content: center; gap: 16px; /* Figma "Section" của dải MXH rộng 1060 đặt tại x=420 — HẸP HƠN khung 1080 của các hàng khác đúng 10px mỗi bên, y hệt hàng liên hệ. Để width:100% thì nó ăn theo cột (1080 − padding 30 = 1050 tại x=425), sai cả vị trí lẫn bề rộng, kéo theo hai đường kẻ hai bên sai luôn. ⚠ Phải !important: shortcode [follow] gắn sẵn class "full-width" của Flatsome, vốn là 'width: 100% !important'. Đặt width thường thì im lặng không ăn — bảng đo báo 1080px tại x=410 thay vì 1060 tại x=420. */ width: 1060px !important; max-width: 100%; margin: 0 auto !important; } .t4fx-footer .row:has(> .col .t4fx-mxh-list) > .col { padding-left: 0; padding-right: 0; } .t4fx-mxh-list::before, .t4fx-mxh-list::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .35); max-width: 422px; } .t4fx-mxh-list::before { margin-right: 16px; } .t4fx-mxh-list::after { margin-left: 16px; } /* ⛔ `.t4fx-mxh-nut` LÀ , KHÔNG PHẢI — CỐ Ý. Figma (`Frame 152`, 4 nút `cl-icon-facebook/youtube/linkedin/tiktok`) KHÔNG khai `interactions` cho nút nào, và trên toàn site không có URL mạng xã hội thật nào: `wp theme mod get follow_facebook|youtube|linkedin|tiktok` đều RỖNG, trang Liên hệ cũng không có. Vì vậy dựng nút không-liên-kết thay vì bịa URL hay để `href="#"` (luật đã chốt ở đợt RELEASE UNBLOCK). Khi 4T đưa 4 URL thật: đổi `` thành `` trong `docs/uxb/footer-4t.txt` — mọi luật dưới đây đã phủ sẵn cả hai thẻ, không phải sửa CSS. */ .t4fx-mxh-list a, .t4fx-mxh-list .t4fx-mxh-nut { display: flex; align-items: center; justify-content: center; width: 26px !important; height: 23px !important; margin: 0 !important; /* Flatsome ".icon" tự có margin 0 4px, cộng dồn vào gap:16px làm dư ~8px */ flex: 0 0 auto; position: relative; } .t4fx-mxh-list a:hover { opacity: .75; } .t4fx-mxh-list .t4fx-mxh-nut { cursor: default; } .t4fx-mxh-list a i, .t4fx-mxh-list .t4fx-mxh-nut i { font-size: 20px; line-height: 1; color: var(--t4-white); } /* [phục vụ] phần tử: Follow (4 icon MXH 'a.icon plain … tooltip') | khối: dải MXH footer, TOÀN SITE | [figma] icon vẫn giữ 26×23 đúng thiết kế [lý do vượt panel] kích thước vùng chạm không tách khỏi kích thước icon trong panel Follow của Flatsome. ⛔ Kiểm tương tác báo 26,0×23,0 — thiếu 1px chiều cao so ngưỡng 24. Nới '::after' âm đều 3px mỗi cạnh (26→32 · 23→29); khe giữa hai icon liền kề là 16px nên còn dư 10px không chạm nhau (cùng cách đã dùng cho icon tìm kiếm mobile phía trên và breadcrumb ở 30-components.css). */ .t4fx-mxh-list a::after, .t4fx-mxh-list .t4fx-mxh-nut::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: -3px; right: -3px; } /* Figma "Frame 153": khung 1060px (hẹp hơn 1080 của các hàng khác, thụt vào 10px mỗi bên), 5 mục dàn SPACE_BETWEEN. [figma] Container 1060 '532:4139'; khung 1080 để so là '532:4123'. */ .t4fx-lienhe { display: flex !important; flex-direction: row !important; /* [ux_menu] của Flatsome hardcode "stack-col" = column */ flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 0; list-style: none; margin: 0 auto !important; /* căn giữa khung 1060 trong cột 1080 → x=420 */ padding: 0; width: 1060px; max-width: 100%; } /* Cột chứa hàng liên hệ có padding ngang 15px làm khung chỉ còn 1050 và lệch sang phải 8px — bỏ padding để khung đúng 1060 đặt giữa 1080. */ .t4fx-footer .row:has(> .col .t4fx-lienhe) > .col { padding-left: 0; padding-right: 0; padding-bottom: 42px; /* Figma: hàng liên hệ kết thúc y=544, copyright y=586 */ } /* "Absolute Footer" của Flatsome đã dọn trắng chữ nhưng vẫn chiếm 25px ở đáy, đẩy tổng chiều cao footer từ 648 lên 673 (Figma 650). */ .footer-wrapper .absolute-footer { display: none; } .t4fx-lienhe li { display: flex; align-items: center; gap: 15px; /* Figma Container pl=15 giữa icon và chữ */ margin: 0 !important; /* Flatsome đặt sẵn margin 0 0 9.6px 20.8px cho
  • ; 20.8px này đẩy mục đầu lệch phải 21px và bóp méo space-between. Phải có !important vì quy tắc gốc của Flatsome đặc hiệu hơn. */ } .t4fx-lienhe li a { color: var(--t4-white); text-decoration: none; } /* [phục vụ] phần tử: 5 dòng liên hệ footer ('.t4fx-lienhe li a') | khối: Frame 153 footer, TOÀN SITE [lý do vượt panel] khối dựng bằng