/* ========================================================================== 43-page-tuyen-dung.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 §15 trang #25 của bản gộp; không sửa một luật nào trong lần tách này. ========================================================================== */ /* ── §15 trang #25 (dòng 2911–3101 của style.css cũ) ──────────────────── */ /* ========================================================================== 15. LÔ 1 GIAI ĐOẠN D — TRANG #25 "TUYỂN DỤNG" Figma 804:35930 (desktop) · 1385:23558 (mobile) ========================================================================== */ /* [figma] trang25 · section crumb/cta/hero — 4 lớp rộng 1060px: '1015:14453' · '804:35975' · '804:37401' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* Hero: dải ảnh 1900×450, chữ x=420, H1 y=144, mô tả y=213 rộng 516 */ #content .t4fx-td-hero { align-items: flex-start; } #content .t4fx-td-hero .section-content > .row { max-width: 1060px; } #content .t4fx-td-hero .t4fx-td-h1 { padding-top: 144px; } #content .t4fx-td-hero h1 { font-family: var(--t4-font-head); font-weight: 600; font-size: 40px; line-height: 53px; color: var(--t4-light); margin: 0; letter-spacing: 0; } #content .t4fx-td-sub p { font-size: 16px; line-height: 26px; color: var(--t4-light); margin: 16px 0 0; max-width: 516px; } /* Dải bộ lọc — nền #F8F5EE cao 175, ba ô trên hàng 1060 tại x=420 [figma] section “bộ lọc” — desktop '804:37399' · mobile '1385:23657' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4fx-td-loc-dai) 1060 = Container '532:4139'. */ #content .t4fx-td-loc-dai .section-content > .row { max-width: 1060px; } #content .t4fx-td-loc { display: flex; align-items: flex-end; gap: 16px; margin: 0; } #content .t4fx-td-o { margin: 0; display: block; } #content .t4fx-td-o label { display: block; font-size: 12px; line-height: 16.392px; color: var(--t4-text); margin-bottom: 12px; } #content .t4fx-td-o select, #content .t4fx-td-o input[type="search"] { width: 300px; height: 39px; border-radius: 3px; border: 1px solid rgba(0,0,0,.11); background: var(--t4-white); padding: 0 9px; font-size: 14px; line-height: 22px; color: var(--t4-text); } #content .t4fx-td-o--tim { position: relative; margin-left: auto; } #content .t4fx-td-o--tim input[type="search"] { width: 408px; font-size: 12px; font-weight: 800; } #content .t4fx-td-o--tim input::placeholder { color: #cccccc; font-weight: 800; } #content .t4fx-td-nut-tim { position: absolute; right: 0; bottom: 0; width: 20px; height: 39px; background: transparent; border: 0; color: var(--t4-text); } #content .t4fx-an-mat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* [figma] trang25 · section loc — 3 lớp rộng 1080px: '804:37449' · '804:37456' · '804:37734' (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* Đầu danh sách: H2 32/35 w700 + dòng đếm bên phải */ #content .t4fx-td-ds .section-content > .row { max-width: 1080px; } #content .t4fx-td-dau { margin-top: 32px; } #content .t4fx-td-h2 h2 { font-family: var(--t4-font-body); font-weight: 700; font-size: 32px; line-height: 35px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; } #content .t4fx-td-dem p { font-size: 14px; line-height: 22px; margin: 12px 0 0; } /* [figma] trang25 · section loc/loc_mb — 4 lớp rộng 28px: '804:37603' · '804:37604' · '1385:23785' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* Hộp "Tạo thông báo việc làm" — trắng bo 16, cao 82 */ #content .t4fx-td-bao-hang { margin-top: 16px; } /* [phục vụ] phần tử: Text ×2 + Button | khối: hộp "Tạo thông báo việc làm" [trang] tuyen-dung | [figma] loc 302,1 / 311,1 [lý do vượt panel] panel không đặt được bố cục ngang icon–chữ–nút. 17/08/2026 — dựng lại theo T0: trước là MỘT ô văn bản nhét '' + '' + '' + '' giả nút. Nay hai [ux_text] chữ thuần + một [button] thật, 4T sửa được từng phần. Biểu tượng chuông vẽ bằng '::before' của chính cột — Figma dựng nó bằng VECTOR chứ không phải lớp ảnh, thêm là lệch dãy ảnh của section. */ /* ⛔ GRID chứ không phải flex-wrap. Figma xếp [biểu tượng | cột chữ hai dòng | nút] thành MỘT hàng ngang, nút căn giữa theo cả cột chữ: tiêu đề 497 / 302,1 826×22 mô tả 497 / 323,6 826×26 ⇒ cột chữ 302,1..349,6, tâm 325,85 nút 1348 / 311,1 100×28 ⇒ tâm 325,1 — khớp tâm cột chữ Tiêu đề và mô tả là HAI ô văn bản anh em (T0 cấm bọc thêm
), nên flex-wrap sẽ đẩy nút xuống hàng hai — đã thử, nút lệch 822px. Grid đặt được nút vắt qua hai hàng mà không cần thẻ bọc nào. */ #content .col.t4fx-td-bao > .col-inner { /* Figma: icon 28 · khe 16 · cột chữ 826 · khe 25 · nút 100. Để nút 'auto' thì Flatsome cho nó hẹp hơn 100 và cột '1fr' nở ra 853 (lệch +27). */ display: grid; grid-template-columns: 28px 1fr 100px; column-gap: 16px; align-items: center; height: 82px; background: var(--t4-white); border-radius: 16px; padding: 0 32px; } #content .col.t4fx-td-bao > .col-inner::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 28px; height: 28px; background: var(--t4-leaf); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 0 0-5-5.91V4a1 1 0 0 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 0 0-5-5.91V4a1 1 0 0 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Tiêu đề và mô tả là hai ô văn bản riêng nhưng Figma xếp chúng thành MỘT cột dọc, nên gom lại bằng 'flex: 1 1 auto' + lề 0. */ #content .text.t4fx-td-bao-td { grid-column: 2; grid-row: 1; align-self: end; margin: 0; } #content .text.t4fx-td-bao-mo { grid-column: 2; grid-row: 2; align-self: start; margin: 0; } #content .t4fx-td-bao-td p { font-weight: 700; font-size: 16px; line-height: 21.856px; margin: 0; } #content .t4fx-td-bao-mo p { font-size: 16px; line-height: 26px; margin: 0; } /* Khe chữ→nút của Figma là 25, khác khe icon→chữ 16 ⇒ bù 9 bằng lề. */ #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut { grid-column: 3; grid-row: 1 / span 2; margin: 0 0 0 9px; min-height: 0; border: 0; box-shadow: none; background: none; padding: 0; text-transform: none; letter-spacing: 0; width: 100px; font-weight: 400; font-size: 16px; line-height: 28px; color: var(--t4-dark-moss); } /* [figma] trang25 · section loc — 4 lớp rộng 246px: '804:37469' · '804:37502' · '804:37513' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* Lưới 8 thẻ — 246 × 4 + khe 32 = 1080 (xem ghi chú ở bảng dịch) */ #content .t4fx-td-luoi { margin-top: 16px; justify-content: space-between; } #content .t4fx-td-luoi::after { display: none; } #content .t4fx-td-luoi > .col.t4fx-td-the { flex: 0 0 246px; max-width: 246px; width: 246px; padding-left: 0; padding-right: 0; margin-bottom: 31px; } #content .t4fx-td-the .col-inner { height: 233px; background: var(--t4-white); border-radius: 16px; padding: 23px 17px; display: flex; flex-direction: column; } #content .t4fx-td-the-td h3 { font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; line-height: 21.856px; color: var(--t4-text); margin: 0; letter-spacing: 0; } #content .t4fx-td-the-pb p { font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 26px 0 0; } #content .t4fx-td-the .button { margin: auto 0 0; min-height: 46px; } /* Phân trang */ #content .t4fx-td-trang { display: flex; align-items: center; gap: 12px; justify-content: center; } #content .t4fx-td-trang-so, #content .t4fx-td-trang-tat { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 22px; color: var(--t4-text); } #content .t4fx-td-trang-tat { color: var(--t4-muted); } #content .t4fx-td-trang-so.is-active { font-weight: 700; color: var(--t4-dark-moss); } /* CTA cuối: chữ trái 534 | ảnh phải 380 [figma] section “CTA cuối” — desktop '804:37620' · mobile '1385:23799' (node lấy từ bản đồ đo: tools/truy-node-be-rong.py --lop t4fx-td-cta-dai) 1060 = Container '532:4139'. */ #content .t4fx-td-cta-dai .section-content > .row { max-width: 1060px; } #content .t4fx-td-cta { justify-content: space-between; align-items: center; } #content .t4fx-td-cta::after { display: none; } #content .t4fx-td-cta > .col { padding-left: 0; padding-right: 0; } #content .t4fx-td-cta > .col.t4fx-td-cta-chu { flex: 0 0 534px; max-width: 534px; width: 534px; } #content .t4fx-td-cta > .col.t4fx-td-cta-anh { flex: 0 0 380px; max-width: 380px; width: 380px; } #content .t4fx-td-cta-h2 h2 { font-family: var(--t4-font-body); font-weight: 700; font-size: 32px; line-height: 35px; color: var(--t4-dark-moss); margin: 0; letter-spacing: 0; } /* '.t4fx-camel' ĐÃ BỎ 17/08/2026 — đổi sang '.hl-camel' của 30-components, một trong ba lớp tô nhấn mà III.2 duyệt. Hai lớp khai màu y hệt nhau. */ #content .t4fx-td-cta-mo p { font-size: 16px; line-height: 28px; margin: 16px 0 0; } #content .t4fx-td-cta-chu .button { margin: 34px 0 0; min-height: 46px; } #content .t4 .button.t4fx-nut-cam, #content .button.t4fx-nut-cam { background-color: var(--t4-camel); border-color: var(--t4-camel); color: var(--t4-white); border-radius: 5px; box-shadow: none; font-family: var(--t4-font-body); font-weight: 700; font-size: 14px; line-height: 19.124px; text-transform: none; letter-spacing: 0; } @media (max-width: 849px) { #content .t4fx-td-hero .section-content > .row, #content .t4fx-td-loc-dai .section-content > .row, #content .t4fx-td-ds .section-content > .row, #content .t4fx-td-cta-dai .section-content > .row { max-width: 352px; } #content .t4fx-td-hero .t4fx-td-h1 { padding-top: 261px; } #content .t4fx-td-loc { flex-direction: column; align-items: stretch; gap: 20px; } #content .t4fx-td-o select, #content .t4fx-td-o input[type="search"], #content .t4fx-td-o--tim input[type="search"] { width: 100%; } #content .t4fx-td-o--tim { margin-left: 0; } #content .t4fx-td-luoi > .col.t4fx-td-the { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Mobile Figma xếp DỌC: tiêu đề 42/577,2 · mô tả 42/598,7 · nút 235/675,7. Luật cũ bám '.t4fx-td-bao' khi nó còn là Ô VĂN BẢN; nay class đó nằm trên CỘT nên phải trỏ vào '.col-inner', nếu không luật im lặng không khớp. */ #content .col.t4fx-td-bao > .col-inner { display: block; height: auto; padding: 24px; } #content .col.t4fx-td-bao > .col-inner::before { display: block; margin-bottom: 8px; } #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut { width: auto; margin: 25px 0 0; display: inline-block; } #content .t4fx-td-cta > .col.t4fx-td-cta-chu, #content .t4fx-td-cta > .col.t4fx-td-cta-anh { flex: 0 0 100%; max-width: 100%; width: 100%; } } /* --- 15.1 vá vòng đo #25 --- */ /* Nhãn ô lọc: Figma w400, bắt đầu y=44 trong dải (đệm section 32 + 12) */ #content .t4fx-td-loc-hang { margin-top: 12px; } #content .t4fx-td-o label { font-weight: 400; } /* Khối danh sách: bỏ đệm cột để khung đúng 1080 tại x=410 */ #content .t4fx-td-ds .section-content > .row > .col { padding-left: 0; padding-right: 0; } #content .t4fx-td-dau::after, #content .t4fx-td-bao-hang::after { display: none; } /* ⚠ Hai tiêu đề này Figma dùng PLAYFAIR DISPLAY chứ không phải Manrope — đọc «32/35 w700» rồi mặc định là Manrope là sai. */ #content .t4fx-td-h2 h2, #content .t4fx-td-cta-h2 h2 { font-family: var(--t4-font-head); } /* CTA: Figma H2 ở y=138 trong section (đệm 64 + 74) */ #content .t4fx-td-cta-dai { padding-top: 64px !important; } #content .t4fx-td-cta-chu .col-inner { padding-top: 74px; } /* [figma] trang25 · section hero_mb — 5 lớp rộng 342px: '1385:23597' · '1385:23598' · '1385:23599' … còn 2 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ @media (max-width: 849px) { /* Figma mobile: khung nội dung 342 tại x=30, và chữ hero bắt đầu ngay y=40 — KHÔNG phải 261 như trang Liên hệ. */ #content .t4fx-td-hero .section-content > .row, #content .t4fx-td-loc-dai .section-content > .row, #content .t4fx-td-ds .section-content > .row, #content .t4fx-td-cta-dai .section-content > .row { max-width: 342px; } #content .t4fx-td-hero .t4fx-td-h1 { padding-top: 40px; } #content .t4fx-td-sub p { margin-top: 7px; max-width: none; } /* Figma mobile CTA KHÔNG có minh hoạ, chữ nhỏ hơn desktop */ #content .t4fx-td-cta > .col.t4fx-td-cta-anh { display: none; } #content .t4fx-td-cta-h2 h2 { line-height: 38px; } #content .t4fx-td-cta-mo p { font-size: 14px; line-height: 22px; } #content .t4fx-td-cta-dai { padding-top: 0 !important; } #content .t4fx-td-cta-chu .col-inner { padding-top: 80px; } } /* --- 15.2 vá vòng hai #25 --- */ /* Figma: dải lọc cao 175, khối danh sách bắt đầu y=207 → cách 32 */ #content .t4fx-td-ds { margin-top: 32px; } #content .t4fx-td-dau { margin-top: 0; } /* ⚠ align-items:center kéo cột chữ xuống giữa theo cột ảnh cao 380 — lệch 28px. CTA của Figma canh MÉP TRÊN. */ #content .t4fx-td-cta { align-items: flex-start; } @media (max-width: 849px) { /* CTA mobile dùng khung 352@25, khác hero/danh sách (342@30) */ #content .t4fx-td-cta-dai .section-content > .row { max-width: 352px; } } /* Figma: H2 danh sách ở y=207, tức ngay mép trên khối — bù 6px của line-box */ #content .t4fx-td-dau { padding-top: 6px; } /* --- 15.3 Breadcrumb khổ điện thoại: giành lại phạm vi của trang này ------- [phục vụ] phần tử: breadcrumb child theme | khối: 'nav.t4fx-crumb' [trang] tuyen-dung | [figma] crumb_mb — "Home" 13,8/22 w=39 · mũi tên rộng 32 (x 64→96) · "Tuyển dụng" 13,9/22 w=78 [lý do vượt panel] breadcrumb do child theme in ra, không có phần tử builder Sáu mốc 'crumb_mb' của trang này giống HỆT sáu mốc của trang #24 — cùng nguyên nhân, cùng con số Figma. Lý do đầy đủ ghi ở mục 14.3 của '42-page-lien-he.css'; đừng chép lại lý do ở hai chỗ, nhưng PHẢI có luật ở cả hai vì bộ chọn khoá theo lớp trang. */ @media (max-width: 849px) { .t4.t4-trang-tuyen-dung .t4fx-crumb ol { font-size: 13.9px; } .t4.t4-trang-tuyen-dung .t4fx-crumb li + li::before { width: 32px; } .t4.t4-trang-tuyen-dung nav.t4fx-crumb ol li:last-child, .t4.t4-trang-tuyen-dung nav.t4fx-crumb ol li:last-child * { line-height: 22px; } } /* --- 15.4 Nút "Ứng tuyển ngay" và dải phân trang — số đọc thẳng từ Figma --- [phục vụ] phần tử: Button · Text | khối: thẻ việc làm · '.t4fx-td-trang' [trang] tuyen-dung | [figma] loc — 'Link - Apply to…' 142×39 · 'Button - Go to page 1' 28×35,39 nền camel bo 3 · cta — cùng nút 142×39 [lý do vượt panel] panel Button không có 'line-height', và dải phân trang là chữ thường nên không có panel nào Một luật chạm 8 thẻ × 4 mốc + dải phân trang × 14 mốc = 46 mốc: nút Figma 142×39 · chữ 14/19,124 đậm 700 trắng · mực ≤106 site ~150×46 · chữ 16/24 đậm 600 · mực 119,14 trang Figma 16/21,856 đậm 700 · Prev và "…" màu #99afc4 · trang đang xem chữ TRẮNG trên nền camel #CF9156 bo 3 site 14/22 đậm 400 · #5e5e5e · trang đang xem #155446 ⚠ '.t4fx-nut-xanh' là class DÙNG CHUNG nhiều trang — bọc trong phạm vi trang, không đụng tới nút của trang khác (III.4.3 mục 1). */ #content .t4fx-td-ds .t4fx-td-the .button, #content .t4fx-td-cta-chu .button { width: 142px; max-width: 142px; min-height: 39px; } #content .t4fx-td-ds .t4fx-td-the .button span, #content .t4fx-td-cta-chu .button span { font-size: 14px; line-height: 19.124px; font-weight: 700; } #content .t4fx-td-trang-so, #content .t4fx-td-trang-tat { font-size: 16px; line-height: 21.856px; font-weight: 700; } #content .t4fx-td-trang-tat, #content .t4fx-td-trang-so:first-child .t4fx-td-trang-chu { color: #99afc4; } #content .t4fx-td-trang-so.is-active { color: var(--t4-white); background: #cf9156; border-radius: 3px; min-width: 28px; justify-content: center; } /* ⚠ Phải viết ĐÚNG dạng bộ chọn dài như mục 106 ('#content .col.t4fx-td-bao a.button.t4fx-td-bao-nut', tức 1 id · 4 lớp · 1 thẻ). Bản gọn '#content .t4fx-td-bao-nut' chỉ (1,1,0) nên THUA và cao dòng vẫn 25,6. */ /* ⚠⚠ Và phải đặt trên CHÍNH bên trong nút. Flatsome bọc nhãn nút vào '', mà 'line-height' của thẻ ngoài không truyền xuống khi thẻ trong có luật riêng — computed của ra đúng 28 trong khi lớp chữ mà bảng đo chấm vẫn 25,6. Đọc computed của thẻ NGOÀI rồi tưởng đã xong là bẫy. */ #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut, #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut span { line-height: 28px; } /* [figma] trang25 · section loc — 4 lớp rộng 238px: '804:37480' · '804:37491' · '804:37524' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* --- 15.5 Lưới 8 thẻ việc làm — Figma KHÔNG chia đều, đọc từng ô ---------- [phục vụ] phần tử: Row/Col | khối: '.t4fx-td-luoi' [trang] tuyen-dung | [figma] loc — bốn khung 'Item' [lý do vượt panel] panel Row chỉ có khe ĐỀU NHAU, không đặt được khe lệch Bốn thẻ trong một hàng của Figma KHÔNG cùng bề rộng và KHÔNG cách đều: thẻ x w khe tới thẻ sau 1 410 246 40 2 696 238 32 3 966 238 32 4 1236 246 — (mép phải 1482) Site dựng 4 thẻ 246 với 'space-between' ⇒ khe đều 32 và mốc x thành 410 · 688 · 966 · 1244. Tâm nút "Ứng tuyển ngay" vì vậy bước đều 278, trong khi Figma cho 286 · 270 · 270 — 13 mốc 'khoang·dx(giữa)' lệch ±8. ⚠ Đây KHÔNG phải lưới bịa: khung 'Item:margin' bọc ngoài thì đều tăm tắp (410 · 680 · 950 · 1220, mỗi ô 270). Bề rộng lệch nằm ở khung 'Item' bên trong — thẻ đầu và thẻ cuối rộng hơn hai thẻ giữa 8px vì chúng dán mép lưới. Dựng lại đúng bốn con số đó thì cả 13 mốc về đúng, không phải chọn. */ #content .t4fx-td-luoi { justify-content: flex-start; } #content .t4fx-td-luoi > .col.t4fx-td-the { flex: 0 0 238px; max-width: 238px; width: 238px; margin-left: 32px; } #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n+1) { flex-basis: 246px; max-width: 246px; width: 246px; margin-left: 0; } #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n+2) { margin-left: 40px; } #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n) { flex-basis: 246px; max-width: 246px; width: 246px; } /* [figma] trang25 · section loc — 5 lớp rộng 826px: '804:37461' · '804:37462' · '804:37463' … còn 2 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* --- 15.6 Khối "Tạo thông báo việc làm" rộng 826 và ô lọc mobile rộng 300 - [phục vụ] phần tử: Text · Select | khối: '.t4fx-td-bao' · '.t4fx-td-o' [trang] tuyen-dung | [figma] loc 'Container' chữ 826 · loc_mb 'Item' 300 [lý do vượt panel] bề rộng ô là nhãn vẫn 342 và bốn mốc 'w' của nhãn không nhúc nhích. */ #content .t4fx-td-o { width: 300px; } #content .t4fx-td-o select, #content .t4fx-td-o input[type="search"], #content .t4fx-td-o--tim input[type="search"] { width: 300px; } } /* --- 15.7 Thẻ việc làm KHỔ ĐIỆN THOẠI cao 180, khe 16 -------------------- [phục vụ] phần tử: Col | khối: '.t4fx-td-the' [trang] tuyen-dung | [figma] loc_mb — tám 'Item' 352×180, bước 196 [lý do vượt panel] chiều cao ô và khe giữa hai ô không có ô trong panel Figma khổ 402: tám thẻ 352×**180**, mốc y 753,68 · 949,68 · 1145,68 … tức bước 196 = 180 + khe 16. Site đang dùng chiều cao 233 và khe 31 của bản desktop ⇒ mỗi thẻ dôi 68, cả danh sách dôi 544 và section 'loc_mb' cao 2876,6 thay vì 2429,68. */ @media (max-width: 849px) { #content .t4fx-td-the .col-inner { height: 180px; } #content .t4fx-td-luoi > .col.t4fx-td-the { margin-bottom: 16px; margin-left: 0; } } /* [figma] trang25 · section loc/loc_mb — 2 lớp rộng 109.14px: '804:37614' · '1385:23780' (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* --- 15.8 Dải phân trang: sáu ô có BỀ RỘNG CỐ ĐỊNH, không ôm chữ ---------- [phục vụ] phần tử: [ux_html] 'nav.t4fx-td-trang' (danh mục vĩnh viễn III.3b) [trang] tuyen-dung | [figma] loc · loc_mb — sáu khung của dải phân trang [lý do vượt panel] khối [ux_html], không có panel Figma khai từng ô một bề rộng riêng, và CHÍNH bề rộng đó quyết định mọi khoảng cách tâm–tâm mà bảng đo chấm: ô khung Figma tâm chữ khe tới ô sau Prev 740,86 → 850 (109,14) 816,5 14 1 864 → 892 (28) 878 12 2 904 → 936 (32) 920 12 … 948 → 983 (35) 965,5 12 14 995 → 1034 (39) 1014,5 14 Next 1048 → 1159,14 (111,14) 1082,5 — ⇒ chuỗi tâm: Prev→Next 266 · Next→1 −204,5 · 1→2 42 · 2→… 45,5 · …→14 49 tổng dải 418,28, căn giữa quanh x=950 (tâm trang) Site để mỗi ô ÔM CHỮ nên chuỗi ra 161,26 · −117,96 · 30,76 · 22,46 · 26,06 — 6 mốc lệch, lặp y hệt ở CẢ hai khổ ⇒ 12 mốc. ⚠ Chữ trong Prev/Next KHÔNG căn giữa ô: Figma đặt chữ cách mép TRONG 16px (Prev 850−16=834 là mép phải chữ · Next 1048+16=1064 là mép trái chữ), phần còn lại là chỗ của biểu tượng. Căn giữa hai ô đó là lệch tâm ~29px. */ #content .t4fx-td-trang > * { flex: 0 0 auto; justify-content: center; } #content .t4fx-td-trang > *:nth-child(1) { width: 109.14px; justify-content: flex-end; padding-right: 16px; margin-right: 2px; } #content .t4fx-td-trang > *:nth-child(2) { width: 28px; } #content .t4fx-td-trang > *:nth-child(3) { width: 32px; } #content .t4fx-td-trang > *:nth-child(4) { width: 35px; } #content .t4fx-td-trang > *:nth-child(5) { width: 39px; margin-right: 2px; } #content .t4fx-td-trang > *:nth-child(6) { width: 111.14px; justify-content: flex-start; padding-left: 16px; } /* [figma] trang25 · section loc/loc_mb — 4 lớp rộng 150px: '804:37417' · '804:37731' · '1385:23665' … còn 1 (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* --- 15.9 Hộp "Tạo thông báo việc làm" — bốn con số đọc từ khung Figma ----- [phục vụ] phần tử: Text ×2 + Button | khối: '.t4fx-td-bao' [trang] tuyen-dung | [figma] loc 'Alert' 1080×81,5 · loc_mb 'Alert' 352×218,5 [lý do vượt panel] bố cục ngang icon–chữ–nút không có ô trong panel Figma desktop, đo từ mép trái khung (410): mảnh x w suy ra Alert 410 1080 SVG:margin 427 54 ⇒ đệm trái 17 icon 438 32 ⇒ icon nằm giữa cột 54 chữ 497 826 ⇒ khe icon→chữ 16 Link (nút) 1323 150 ⇒ chữ dán sát nút, khe 0 và đệm phải 17 (1490−1473) 17 + 54 + 16 + 826 + 150 + 17 = 1080 ✓ khép kín Site đang dựng 'padding: 0 32px' + cột '28px 1fr 100px' khe 16 ⇒ chữ bắt đầu ở 486 (thiếu 11) và nút lệch phải 30. Khe DỌC: Figma "Hiển thị 1–8 trên 13" kết thúc ở 241,09, hộp bắt đầu 285,09 ⇒ **44**, site đang 17. Sửa khe này thì lưới thẻ bên dưới đi theo, vì khe hộp→lưới đã đúng 16. Khổ điện thoại xếp DỌC (icon trên, chữ giữa, nút dưới) và nút DÁN PHẢI: Alert 25 w=352 · chữ x=42 w=318 · Link 210→360 ⇒ đệm 17 hai bên. */ #content .t4fx-td-bao-hang { margin-top: 43px; } #content .col.t4fx-td-bao > .col-inner { grid-template-columns: 70px 1fr 150px; column-gap: 0; padding: 0 17px; } #content .col.t4fx-td-bao > .col-inner::before { margin-left: 11px; } #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut { grid-column: 3; margin: 0; width: 150px; } /* [figma] trang25 · section loc_mb — section DUY NHẤT chứa đủ bộ bề rộng của cụm này: 150px→'1385:23665' (+1) · 352px→'1385:23658' (+25) (khớp theo TẬP bề rộng, chắc hơn khớp từng số: 528 đứng một mình ra hàng trăm ứng viên, '528 và 506 cùng một section' thì gần như duy nhất) */ @media (max-width: 849px) { #content .t4fx-td-ds .section-content > .row { max-width: 352px; } /* ⛔ PHẢI khai lại 'display'. Mục 181 (luật cũ của khổ này) đặt 'display: block' với ĐÚNG bộ chọn này; bản dưới chỉ khai 'grid-template-columns' nên 'display' vẫn là 'block' — lưới không tồn tại, 'justify-self: end' của nút thành vô nghĩa và nút dán trái. Đọc 'justify-self' ra "end" rồi tưởng đã xong là bẫy: nó chỉ có nghĩa khi cha THỰC SỰ là lưới. */ #content .col.t4fx-td-bao > .col-inner { display: flex; flex-direction: column; align-items: stretch; padding: 17px; height: auto; } /* ⚠ Hai ô chữ phải GIỮ bề rộng cột. Bỏ dòng này thì chúng co về bề rộng chữ (177,53 thay vì 318) và ba mốc ngang lệch theo — flex item co lại là hành vi mặc định khi 'align-items' không phải 'stretch'. */ #content .text.t4fx-td-bao-td, #content .text.t4fx-td-bao-mo { width: 100%; } #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut { grid-column: 1; justify-self: end; width: 150px; } } /* --- 15.10 Khổ điện thoại: thẻ full cột, dải lọc và dòng đếm theo Figma ---- [phục vụ] phần tử: Row/Col · Text | khối: '.t4fx-td-luoi' · '.t4fx-td-loc' · '.t4fx-td-dem' [trang] tuyen-dung | [figma] loc_mb [lý do vượt panel] bề rộng ô theo khổ màn và khe giữa hai hàng lọc không có ô trong panel (a) THẺ VIỆC LÀM rộng ĐÚNG CỘT 352, không phải 246/238 của desktop. Mục 15.5 khai bề rộng lệch nhau theo 'nth-child' cho lưới 4 cột; ở khổ 402 Figma xếp MỘT cột ('Item' 352×180) nên bốn mốc 'Ứng tuyển ngay → Ứng tuyển ngay (ngang)' phải bằng 0, site đang ±40 vì thẻ vẫn mang bề rộng desktop. (b) DẢI LỌC — Figma: nhãn đầu ở y=96 tính từ mép section (site 44) · hai hàng lọc cách nhau 10 (ô kết thúc 163,09 → nhãn sau 173,09; site 22). (c) DÒNG ĐẾM "Hiển thị 1–8 trên 13" CĂN TRÁI ở khổ này — Figma đặt nó ở x=25, thẳng mép trái với H2 (dx = 0). Site đang căn phải như bản desktop nên lệch 232,95. */ @media (max-width: 849px) { #content .t4fx-td-luoi > .col.t4fx-td-the, #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n+1), #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n+2), #content .t4fx-td-luoi > .col.t4fx-td-the:nth-child(4n) { flex: 0 0 352px; max-width: 352px; width: 352px; margin-left: 0; } #content .t4fx-td-loc { flex-wrap: wrap; row-gap: 10px; } #content .t4fx-td-loc-dai { padding-top: 52px; } #content .t4fx-td-dem { text-align: left; } #content .t4fx-td-dem p { text-align: left; } } /* [figma] trang25 · section loc/loc_mb — 2 lớp rộng 32px: '804:37459' · '1385:23697' (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 25 để chọn) */ /* --- 15.11 Hộp thông báo khổ điện thoại — bốn khe dọc và nút dán phải ----- [phục vụ] phần tử: Text ×2 + Button | khối: '.t4fx-td-bao' [trang] tuyen-dung | [figma] loc_mb 'Alert' 352×218,5 [lý do vượt panel] khe giữa các ô trong một khối lưới không có ô trong panel Figma khổ 402, đo từ mép trên hộp (511,18): mảnh y (tuyệt đối) suy ra icon 528,18 32×33 đệm trên 17 tiêu đề 577,18 khe icon→tiêu đề 16 (icon kết thúc 561,18) mô tả 598,68 h=52 nút Link 666,68 150×46 khe mô tả→nút 16 (mô tả kết thúc 650,68) chữ nút ở 675,68 ⇒ lệch tâm 9 trong hộp 46 đáy hộp 729,68 đệm dưới 17 nút x 210 → 360 DÁN PHẢI, không phải dán trái ⚠ 'justify-self: end' KHÔNG ăn ở đây (đã thử) — dùng 'margin-left: auto', thứ chạy được cho cả lưới lẫn flex. ⚠ Lề dưới của mô tả phải viết '#content .text.t4fx-td-bao-mo' cho đủ độ cụ thể: mục ở đầu tệp khai 'margin: 0' với (1 id · 2 lớp), bản gọn (1,1,0) thua. */ #content .col.t4fx-td-bao > .col-inner::before { width: 32px; height: 33px; } @media (max-width: 849px) { /* ⚠ Giữ LỀ TRÁI 11: Figma đặt biểu tượng 32 vào giữa ô 54 ở CẢ HAI khổ ('SVG:margin' x=42 w=54 → 'SVG' x=53). Shorthand 'margin: 0 0 16px' của bản trước xoá mất lề đó nên chuông khổ 402 dán mép trái, lệch 11. */ #content .col.t4fx-td-bao > .col-inner::before { margin: 0 0 16px 11px; } #content .text.t4fx-td-bao-mo { margin-bottom: 16px; } #content .col.t4fx-td-bao a.button.t4fx-td-bao-nut { margin-left: auto; align-self: flex-end; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } } /* --- 15.12 Mô hình DỌC của cả section 'loc' — đọc lại từ cây Figma --------- [phục vụ] phần tử: Section · Row/Col · Button · [ux_html] 'nav.t4fx-td-trang' [trang] tuyen-dung | [figma] loc 804:37399 · loc_mb 1385:23657 [lý do vượt panel] đệm section theo khổ màn, khe giữa hàng lưới, và chiều cao dải phân trang đều không có ô trong panel; nút thẻ thì panel Button không cho đặt riêng đệm ngang Dựng lại đúng cây khung của Figma thay vì bù từng mốc một. Hai khổ có CẤU TRÚC KHÁC NHAU, đây là chỗ đã trả giá: desktop Section 0..967,87 · Background TRÀN 1900, y 0..175,09 402 Section pad 60/25 · Background chỉ 352 tại x=25, y 60..325,18 ⇒ khổ 402 dải kem KHÔNG tràn mép: nó là một thẻ 352 nằm lọt trong section, có 60 trắng trên và dưới. Site đang cho nền vào chính [section] nên tràn suốt bề ngang. Chuyển nền xuống HÀNG bên trong là đủ, không phải sửa shortcode. Mốc dọc Figma (desktop | 402): nhãn ô lọc 44 | 96 (402: 60 section + 24 thẻ + 12 Item) ô lọc 72 | 124 → 111,09 | 163,09 đáy dải kem 175,09 | 325,18 H2 danh sách 207,09 | 357,18 khe 32 ở cả hai khổ dòng đếm 219,09 | 449,18 402: dưới H2, khe 22 hộp thông báo 285,09 | 511,18 lưới thẻ 382,59 | 753,68 khe 16 | 24 dải phân trang 927,87 |2329,68 cao ĐÚNG 40 ở cả hai khổ đáy section 967,87 |2429,68 402 còn 60 đệm dưới ⚠ Ba chỗ Figma đặt số mà nhìn CSS không đoán ra: (1) 'Item:margin' của thẻ việc làm ở DESKTOP có đệm 16 trên VÀ dưới, nên nội dung thẻ bắt đầu THẤP HƠN mép lưới 16. Khổ 402 thì không (đệm 0). (2) Đáy thẻ → đáy nút là 17, không phải 23 như đệm trên. (3) Dải phân trang cao 40 vì biểu tượng mũi tên cao 32,61; ô số trang đang xem là hộp 28×35,39 (đệm 7 trên / 6,39 dưới) chứ không ôm sát chữ. ⛔ Nút thẻ ở desktop đang NGẮT LÀM HAI DÒNG mà bảng số không nói thẳng: Flatsome tính đệm nút theo 'font-size' của THẺ (16px ⇒ 1,2em = 19,2), trong khi ta chỉ hạ cỡ chữ của bên trong xuống 14. Lòng nút vì thế còn 103,6 trong khi chuỗi "Ứng tuyển ngay" rộng 105,77 ⇒ xuống dòng. Figma khai đệm 16 (lòng 110). Triệu chứng ở bảng là một mốc dọc lệch −31,81, KHÔNG phải mốc chữ — hộp chữ cao gấp đôi thì mọi thứ dưới nó bị kéo lên. */ /* (1) Dải lọc: bỏ khoảng thừa dưới ô