/* ==========================================================================
   47-nhom-dich-vu.css — NHÓM TRANG DỊCH VỤ (#3 · #8 · #9)
   Tạo 23/08/2026 · cửa sổ B (xem docs/CHIA-VIEC-NHIEU-CUA-SO.md §1)

   Ba trang: 'dich-vu-google-marketing' · 'truyen-thong-thuong-hieu' ·
   'thiet-ke-toi-uu-website'. Chúng dùng CHUNG hero "DỊCH VỤ" 1900×480, khối
   CTA thẻ trắng 1078,98×315 và bộ tab — nên gom một tệp, đúng khuôn
   '44-nhom-ggm.css' đã làm cho bốn trang GGM.

   ⛔ TIỀN TỐ LỚP LÀ 't4dv-', KHÔNG PHẢI 't4fx-'.
      't4fx-*' thuộc '44-nhom-ggm.css' — tệp của cửa sổ A. Dùng chung tên lớp
      giữa hai tệp là đúng cái nút thắt III.4.0 mô tả: hai trang không liên
      quan buộc vào nhau bằng THỨ TỰ NẠP, và sửa một bên làm gãy bên kia mà
      không có gì báo.

   ⚠ MÓN NỢ ĐÃ GHI, KHÔNG PHẢI SƠ SUẤT: một số khối dưới đây (hero, nút xanh,
      thanh tab, chip nhãn) LẶP LẠI luật của '44-nhom-ggm.css' với tên lớp
      khác. Theo III.4.0 "luật NÂNG CẤP" chúng đáng lẽ nằm ở '30-components'.
      Cửa sổ B KHÔNG được sửa '30-components' (§2.1 chia việc) nên nâng cấp là
      việc của MỘT cửa sổ làm sau, khi cả bốn nhóm trang đã đo xong. Đã báo
      trong bản bàn giao.

   ⛔ Phạm vi: mọi bộ chọn bọc trong 'body.t4-nhom-dv3' (ba trang này) hoặc
      'body.t4-trang-<slug>'. Không có bộ chọn toàn cục nào — linter mục (8).
   ========================================================================== */


/* ==========================================================================
   1. BREADCRUMB — chỉnh cỡ chữ theo Figma của NHÓM NÀY
   [phục vụ] phần tử: breadcrumb child theme ('t4_html_duong_dan')
   [trang] #3 · #8 · #9  | [figma] 1015:14195 · 1385:12063 (và cặp của #3/#9)
   [lý do vượt panel] breadcrumb do child theme sinh, không có panel Flatsome.
   [số] desktop chữ 13,9px lh22, mũi tên rộng 32; khổ 402 chữ 10px, mũi tên 20.
   ========================================================================== */
body.t4-nhom-dv3 .t4fx-crumb ol { font-size: 13.9px; }
body.t4-nhom-dv3 .t4fx-crumb li + li::before { width: 32px; }
body.t4-nhom-dv3 nav.t4fx-crumb ol li:last-child,
body.t4-nhom-dv3 nav.t4fx-crumb ol li:last-child * { line-height: 22px; }

@media (max-width: 849px) {
  body.t4-nhom-dv3 .t4fx-crumb ol { font-size: 10px; }
  body.t4-nhom-dv3 .t4fx-crumb li + li::before { width: 32px; }
}


/* ==========================================================================
   2. HERO "DỊCH VỤ" — ảnh nền + lớp phủ, cao 480 / 650
   [phục vụ] phần tử: Section (bg + bg_overlay) + 3 × Text
   [trang] #3 · #8 · #9 | [figma] 939:12453 · 1385:12103 (bản của #8)
   [lý do vượt panel] panel Section không đặt được cỡ/giãn dòng của ba lớp chữ.
   [số] khung 1900×480 · khối chữ 1060×166 neo y=157 (⇒ căn giữa dọc)
        nhãn 24/500 lh32,784 · H1 40/600 lh53,32 · mô tả 20/400 lh32 ls0,2 w894
        khổ 402: khung 402×650 · khối 402×480 neo y=83 · H1 32/700 lh35
        · mô tả 16/400 lh32 ls0,16 w362 · khe H1→mô tả 248
   ========================================================================== */
body.t4-nhom-dv3 .t4dv-hero .section-content { width: 100%; }

/* [figma] '939:12467' — Chúng tôi nhìn truyền thông như một phần · 894×64 · trang8·hero
   (lớp DUY NHẤT rộng 894px trong figma-spec/trang8.json) */
body.t4-nhom-dv3 .t4dv-hero .t4dv-hero-nhan p {
  font-family: var(--t4-font-body);
  font-size: 24px; line-height: 32.784px; font-weight: 500;
  color: var(--t4-light); text-transform: none; margin: 0;
}
body.t4-nhom-dv3 .t4dv-hero h1.t4dv-hero-h1 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-light); margin: 0;
}
/* Ngắt dòng CỨNG chỉ có ở khung 402 ('Truyền thông⏎thương hiệu').
   ⛔ KHÔNG dùng 'display:none' cho <br>: nó nuốt luôn dấu cách hai bên và hai
   từ dính liền (bàn giao 21/08 §3). 'content:" "' giữ lại khoảng trắng. */
@media (min-width: 850px) {
  body.t4-nhom-dv3 .t4dv-hero h1.t4dv-hero-h1 br { display: none; }
  body.t4-nhom-dv3 .t4dv-hero h1.t4dv-hero-h1 br::after { content: " "; }
}
body.t4-nhom-dv3 .t4dv-hero .t4dv-hero-mo p {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 32px; font-weight: 400; letter-spacing: .2px;
  color: var(--t4-light); margin: 15px auto 0; max-width: 894px;
}

@media (max-width: 849px) {
  /* [số] Figma neo khối chữ ở y=83 trong section 650 (trên 83 / dưới 87) —
     lệch tâm 2px, nên căn giữa tuyệt đối cho +2,61. */
  body.t4-nhom-dv3 .t4dv-hero .section-content { padding-bottom: 6px; }
  /* ⛔ LỚP PHỦ HERO KHỔ 402 KHÔNG PHẢI MÀU PHẲNG NHƯ DESKTOP.
     [figma] 1385:12108 — 'GRADIENT_LINEAR', 'blendMode: MULTIPLY',
     'opacity: 0.5', tay cầm (0,5·0) → (0,5·1) tức đổ TỪ TRÊN XUỐNG.
     Chặng «0,77 % #000000 · 27,68 % #8c8c8c · 51,66 % #ffffff · 100 % #666666».
     Dùng lại 'rgba(0,0,0,.35)' của desktop cho ΔE 4,11 (ngưỡng 2,5).

     Hai chỗ phải làm đúng, nếu không luật im lặng không ăn:
     · Bộ chọn PHẢI có '#hero'. Flatsome ghi màu phủ từng section bằng một
       '<style>' NỘI TUYẾN trong chính trang: '#hero .section-bg-overlay{…}'
       — độ cụ thể (1,1,0), nạp SAU mọi tệp css.
     · KHÔNG khai 'opacity: .5' kèm 'mix-blend-mode': 'opacity < 1' tạo ngữ
       cảnh xếp chồng mới và CÔ LẬP phép trộn. Nhân sẵn 0,5 vào từng chặng —
       multiply 50 % ⇔ multiply 100 % với màu (c + 1)/2:
       #000000 → #808080 · #8c8c8c → #c6c6c6 · #ffffff → #ffffff · #666666 → #b3b3b3 */
  /* ⛔ RÒ RỈ SANG #3 (luật III.22) — đã sửa 19/08/2026.
     Nhóm 't4-nhom-dv3' gồm CẢ #3 'dich-vu-google-marketing', mà hero của #3
     trong Figma là lớp phủ ĐẶC '#000000' @25 % chứ không phải gradient bốn
     chặng này. Quy tắc phạm vi nhóm vì thế lặng lẽ đè lên trang của cửa sổ
     khác — bảng dày của #8/#9 KHÔNG bao giờ báo, đúng như III.22 mô tả.
     Nay bó vào đúng hai slug thật sự cần. */
  body.t4-trang-truyen-thong-thuong-hieu #hero .section-bg-overlay,
  body.t4-trang-thiet-ke-toi-uu-website #hero .section-bg-overlay {
    background-image: linear-gradient(to bottom,
      #808080 0.77%, #c6c6c6 27.68%, #ffffff 51.66%, #b3b3b3 100%);
    background-color: transparent;
    mix-blend-mode: multiply;
  }
  body.t4-nhom-dv3 .t4dv-hero h1.t4dv-hero-h1 { font-size: 32px; line-height: 35px; font-weight: 700; }
  body.t4-nhom-dv3 .t4dv-hero .t4dv-hero-mo p {
    font-size: 16px; line-height: 32px; letter-spacing: .16px;
    max-width: 362px; margin-top: 248px;
  }
}


/* ==========================================================================
   3. CHIP NHÃN SECTION — dùng lại '.t4-label' của 30-components
   [phục vụ] phần tử: Text mang class 't4-label t4dv-nhan'
   [trang] #3 · #8 · #9 | [figma] 559:4077 (Margin 191 + khe 16 + kẻ 873)
   [lý do vượt panel] panel Text không có kẻ đứt chạy hết hàng.
   ========================================================================== */
/* [số] 'Container' nhãn cao 61 = đệm-trên 8 + chip 29 + đệm-dưới 24.
   Thiếu đệm-trên thì MỌI mốc dọc của section lệch -8; thiếu đệm-dưới thì khối
   kế tiếp lên sớm 24 (đã đo: '[hộp] nhãn → H2' 147,97 thay vì 172). */
body.t4-nhom-dv3 .t4dv-nhan { margin-bottom: 0; padding: 8px 0 24px; }
/* [số] chip 191×29 bọc chữ 173×19 ⇒ đệm 9 mỗi bên. Chữ site hụt 3,86px so với
   Figma vì '.t4-label' của 30-components KHÔNG khai giãn chữ, còn Figma khai
   'letterSpacing 0.14'. */
body.t4-nhom-dv3 .t4dv-nhan > p { line-height: 19.124px; letter-spacing: .14px; }
@media (max-width: 849px) {
  /* 30-components hạ chip xuống 13px ở khổ 402; Figma của NHÓM NÀY vẫn 14px. */
  body.t4-nhom-dv3 .t4dv-nhan > p { font-size: 14px; }
}


/* ==========================================================================
   4. NÚT XANH RÊU — nhãn Manrope 16/700, nền '--t4-leaf'
   [phục vụ] phần tử: Button (style shade, radius 5)
   [trang] #3 · #8 · #9 | [figma] 717:26311 · 564:21420
   [lý do vượt panel] panel Button không có font-weight/letter-spacing riêng.
   [số] cao 70 (đệm trên 24 của 'Container' + 46 thân), nhãn lh21,856
   ========================================================================== */
/* ⛔ '[button]' render '<a class="button"><span>chữ</span></a>', và Flatsome
   đặt 'line-height' trên CHÍNH <span> (1,6em ⇒ 25,6px). Khai lh trên <a>
   trông rất đúng mà bảng dày vẫn báo lệch, vì nó đo hộp trong cùng bọc chữ
   = <span>. Phải khai ở CẢ HAI. */
body.t4-nhom-dv3 a.button.t4dv-nut-xanh {
  background-color: var(--t4-leaf); border-color: var(--t4-leaf);
  color: var(--t4-white); border-radius: 5px; box-shadow: none;
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 21.856px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  min-height: 46px; padding: 12px 39px; margin: 41px 0 0;
}
body.t4-nhom-dv3 a.button.t4dv-nut-xanh span {
  font-size: 16px; line-height: 21.856px; font-weight: 700;
}
/* [số] Figma cho nút Ưu đãi hộp 209×42, nút CTA 376×46 — hai cỡ khác nhau. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu a.button.t4dv-nut-xanh {
  min-height: 42px; padding: 10px 38px;
}
body.t4-nhom-dv3 a.button.t4dv-nut-xanh:hover {
  background-color: var(--t4-dark-moss); border-color: var(--t4-dark-moss);
  color: var(--t4-white);
}


/* ==========================================================================
   5. THANH TAB — kiểu 'line', gạch dưới camel cho tab đang mở
   [phục vụ] phần tử: Tabs ([tabgroup style="line"])
   [trang] #3 · #8 · #9 | [figma] 564:13950 (gói) · 547:4902 (casestudy)
   [lý do vượt panel] panel Tabs không đặt được khe 32 và đệm 24 của từng tab.
   [số] Tablist 1080×54 · mỗi tab đệm 0/24 · khe 32 · chữ 16/500 lh30
        tab đang mở: 16/800 (gói) hoặc viền 1px '#cf9156' (casestudy)
   ========================================================================== */
/* ⛔ Flatsome render thanh tab là 'ul.nav.nav-line', KHÔNG phải '.nav-tabs'
   (tên của Bootstrap). Bộ chọn sai thì im lặng không khớp gì — chữ giữ
   nguyên 12,8px/700 in hoa của theme cha. Đã trả giá một vòng đo. */
body.t4-nhom-dv3 .t4dv-tabs {
  max-width: 1080px; margin-left: auto; margin-right: auto;
}
body.t4-nhom-dv3 .t4dv-tabs > ul.nav {
  border-bottom: 0; margin: 0; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 0;
}
body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li { margin: 0; }
body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li > a {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 30px; font-weight: 500;
  color: rgba(0, 0, 0, .62); text-transform: none; letter-spacing: 0;
  border: 0; margin: 0; opacity: 1;
}
/* [số] BỘ GÓI: khung tab 300/366/304, đệm ngang 24, KHE 32 ⇒ chữ cách chữ 80.
        BỘ CASESTUDY: khung 118/226/279/141, đệm ngang 16, KHE 0 ⇒ chữ cách 32.
   Dùng chung một con số cho cả hai là sai 48px ở mọi khe của bộ casestudy. */
body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav { gap: 32px; }
body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav > li > a { padding: 12px 24px; }
body.t4-nhom-dv3 .t4dv-tabs-case > ul.nav > li > a { padding: 12px 16px; }
body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li > a::before,
body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li > a::after { display: none; }
body.t4-nhom-dv3 .t4dv-tabs > .tab-panels { padding: 0; border: 0; }

/* ⛔ BẢNG TAB ĐANG ĐÓNG PHẢI 'display: none', KHÔNG ĐỂ MẶC ĐỊNH CỦA FLATSOME.
   Flatsome cho panel không hoạt động 'visibility: hidden' + 'height: 0' — con
   của nó VẪN nằm trong dòng chảy, vẫn có toạ độ thật, và chồng lên nhau. Hai
   hậu quả đo được, cả hai đều là ẢO chứ không phải lỗi nhìn thấy được:
     · chặng 4 báo «5 khối chữ đè nhau» (bộ dò không lọc theo visibility);
     · bảng dày ghép lớp Figma vào phần tử nằm trong tab đang đóng (đã trả giá
       ở nhóm nút "Nhận tư vấn ngay" — lệch −1.327px).
   'display: none' giữ nguyên tính tương tác (Flatsome bật/tắt lớp '.active'
   bằng JS, luật dưới đây bám đúng lớp đó) và đưa nội dung tab đóng ra khỏi
   bản đo — lớp Figma của biến thể không được vẽ tự xếp loại KHUNG CŨ. */
body.t4-nhom-dv3 .t4dv-tabs > .tab-panels > .panel { display: none; }
body.t4-nhom-dv3 .t4dv-tabs > .tab-panels > .panel.active { display: block; }

/* Bảng GÓI: tab đang mở đậm 800, chữ '#fcfbf6' trên nền xanh rêu */
/* ⚠ Nền tab đang mở là CAMEL '#cf9156', không phải xanh rêu — đã đo nhầm
   một vòng vì suy từ chip nhãn section. */
body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav > li.active > a {
  font-weight: 800; color: var(--t4-light);
  background: var(--t4-camel); border-radius: 5px;
}
/* Figma tô tab CUỐI của bộ gói bằng '#1f1f1f' đặc, hai tab kia '#000' @62%. */
body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav > li:last-child > a { color: var(--t4-text); }
/* Bảng CASESTUDY: tab đang mở chỉ viền camel, chữ giữ nguyên màu */
body.t4-nhom-dv3 .t4dv-tabs-case > ul.nav > li.active > a {
  border: 1px solid var(--t4-camel); border-radius: 5px;
  padding: 11px 15px; color: var(--t4-text);
}
/* Khổ 402: dải tab CUỘN NGANG (Figma đặt tab ở x=41·159·385·664 — vượt khung
   402), không xuống dòng. */
@media (max-width: 849px) {
  body.t4-nhom-dv3 .t4dv-tabs > ul.nav {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li { flex: 0 0 auto; }
  body.t4-nhom-dv3 .t4dv-tabs > ul.nav > li > a { white-space: nowrap; }
  body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav > li > a { font-size: 14px; }
  body.t4-nhom-dv3 .t4dv-tabs-goi > ul.nav > li.active > a { font-weight: 700; }
}


/* ==========================================================================
   6. THẺ TRẮNG CTA / ƯU ĐÃI — nền trắng, viền 1px đen α.11
   [phục vụ] phần tử: Row mang class, bọc trong Section nền kem
   [trang] #8 (và #3 · #9 dùng lại) | [figma] 717:26307 · 564:21330
   [lý do vượt panel] panel Row không có viền + bo góc + đệm 40 bốn cạnh.
   [số] CTA 1078,98×315 bo 10 · ƯU ĐÃI 1078,98×253 bo 16 · đệm 40 mọi cạnh
        ⚠ Figma đo đệm TỪ TRONG nét viền (III.14.2-4) ⇒ border 1px + padding 39.
   ========================================================================== */
body.t4-nhom-dv3 .t4dv-cta-vung { background-color: var(--t4-cream); }
body.t4-nhom-dv3 .t4dv-ud-vung { background-color: var(--t4-light); }

/* [figma] luật dùng chung — lớp rộng 1078.98px có ở 2 trang; đại diện: trang8:'717:26307' · trang9:'717:26318'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* ⛔ THẺ TRẮNG RỘNG HƠN KHỐI NỘI DUNG 1080 VÀ NEO Ở x=420, KHÔNG CĂN GIỮA.
   Figma: 'Background+Border' 1078,98 bắt đầu ở x=420 (khối nội dung của trang
   ở 410). Căn giữa trong '.section-content' cho ra 410,5 — cả thẻ trôi 10px
   sang trái. Bảng dày KHÔNG thấy: nó khai 'bo_toa_do: true' nên cả cụm trôi
   cùng nhau không sinh mốc nào (I.8c). Chỉ ảnh nhiệt của chặng 3 nhìn ra. */
body.t4-nhom-dv3 .section-content > .row.t4dv-cta,
body.t4-nhom-dv3 .section-content > .row.t4dv-ud {
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
  padding: 39px; max-width: 1078.98px; margin-left: auto; margin-right: auto;
}
/* [số] Figma đặt thẻ ở x=420 trong khung 1900; căn giữa cho 410,51 ⇒ dịch phải
   9,49. Khổ 402 thì KHÔNG dịch — Figma đặt thẻ đúng lề nội dung x=25.
   ⛔ Hai chỗ dễ sai: (1) thay 'margin: auto' bằng 'margin-left: 10px' là mất
   căn giữa, khối chứa hoá ra cả section 1900 và thẻ nhảy về x=10; (2) để luật
   này TRẦN thì nó chạy cả ở khổ 402 và ảnh nhiệt 'uudai_mb' vọt lên 21,86 %
   (III.14.2-7). Cả hai đều đã trả giá trong cùng một vòng đo. */
@media (min-width: 850px) {
  body.t4-nhom-dv3 .section-content > .row.t4dv-cta,
  body.t4-nhom-dv3 .section-content > .row.t4dv-ud { position: relative; left: 9.49px; }
}
body.t4-nhom-dv3 .t4dv-cta { border-radius: 10px; }
body.t4-nhom-dv3 .t4dv-ud { border-radius: 16px; }
body.t4-nhom-dv3 .t4dv-cta > .col,
body.t4-nhom-dv3 .t4dv-ud > .col { padding: 0; }
/* [số] Figma đặt nút CTA ở x=1083 trong khối 460…1459 và nút Ưu đãi ở x=710
   trong cột 460…919 — cả hai DÁN PHẢI. Khổ 402 thì cả hai dán TRÁI (x=105 và
   x=103 ngay sát lề 65). Không phải một luật căn giữa. */
body.t4-nhom-dv3 .t4dv-cta,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu { text-align: right; }
body.t4-nhom-dv3 .t4dv-cta h2,
body.t4-nhom-dv3 .t4dv-cta p,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu h2 { text-align: left; }
@media (max-width: 849px) {
  body.t4-nhom-dv3 .t4dv-cta,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu { text-align: left; }
}

body.t4-nhom-dv3 .t4dv-cta h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-nhom-dv3 .t4dv-cta .t4dv-cta-mo p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400;
  color: var(--t4-text); margin: 17px 0 0;
}

/* Hai nút CTA (hai khổ hai nhãn) — 30-components đã có '.t4-only-*', chỉ cần
   trung hoà 'display:inline-block' của '.button' cho bản không dùng. */
/* ⛔ '.t4-only-desktop' của 30-components khai 'display: block' — áp lên một
   '<a class="button">' là nút bung hết bề rộng khối (đo được 1000px thay vì
   376). Phải trả lại 'inline-block'. */
body.t4-nhom-dv3 a.button.t4dv-nut-xanh.t4-only-desktop { display: inline-block; }
body.t4-nhom-dv3 a.button.t4dv-nut-xanh.t4-only-mobile { display: none; }
@media (max-width: 849px) {
  body.t4-nhom-dv3 a.button.t4dv-nut-xanh.t4-only-desktop { display: none; }
  body.t4-nhom-dv3 a.button.t4dv-nut-xanh.t4-only-mobile { display: inline-block; }
  /* ⛔ PHẢI nhắc lại '.section-content > .row' như luật gốc: sau khi nâng độ
     cụ thể ở đó (để thắng ':where()' của 40-page-xu-ly-loi-sai), luật khổ 402
     viết bằng class trần thua ngay cả khi nằm sau. Triệu chứng: đệm thẻ Ưu đãi
     về lại 39/39, lòng thẻ 272 < 288, lưới ba cột gãy thành BỐN hàng và
     section phồng từ 750 lên 841. */
  body.t4-nhom-dv3 .section-content > .row.t4dv-cta { padding: 39px; max-width: 352px; }
  /* ⛔ Đệm thẻ Ưu đãi khổ 402 KHÔNG đối xứng: Figma đặt lưới biểu tượng rộng
     288 ở x=65 trong thẻ 352 ⇒ lề trái 40, lề phải 24. Để 40 cả hai bên thì
     lòng thẻ chỉ 272 < 288, hàng ba biểu tượng gãy xuống hai — section phồng
     108px. */
  body.t4-nhom-dv3 .section-content > .row.t4dv-ud { padding: 39px 23px 39px 39px; max-width: 352px; }
  body.t4-nhom-dv3 .t4dv-cta h2 { font-size: 32px; line-height: 42.656px; }
}


/* ==========================================================================
   7. #8 · KHỐI "CÁCH LÀM KHÁC BIỆT" — chữ | minh hoạ, rồi 4 thẻ, rồi tab
   [phục vụ] phần tử: Row/Col + Image + Text + Tabs
   [trang] #8 truyen-thong-thuong-hieu | [figma] 559:4072 · 1385:12138
   [lý do vượt panel] bề rộng cột 552/500 không phải bội số 90 nên span 1/12
        không dựng ra được (III.14) — phải khai px.
   [số] cột chữ 552 + khe 28 + ảnh 500 = 1080 ✅ · H2→đoạn khe 32
        4 thẻ 270×451 khít nhau (khe 0), viền 1px α.11, đệm 32/28
        icon 45×45 → tiêu đề khe 16 · tiêu đề 20/700 lh26 · mô tả 16/400 lh26
   ========================================================================== */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-tren { margin-top: 64px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-tren > .col { padding: 0; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-chu {
  flex: 0 0 552px; max-width: 552px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-anh {
  flex: 0 0 500px; max-width: 500px; margin-left: 28px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-chu h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
/* Figma khai riêng ký tự "4" ở độ đậm 700 giữa tiêu đề 600 (LUẬT 6 · III.15) */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-chu h2 strong,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-chu h2 strong { font-weight: 700; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-dan p {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 35px; font-weight: 400;
  color: var(--t4-text); text-align: justify; margin: 32px 0 0;
}

/* [figma] trang8 · section khacbiet — 4 lớp rộng 270px: '559:4161' · '559:4171' · '559:4194' … còn 1
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 8 để chọn) */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-luoi { margin-top: 40px; }
/* ⛔ '.row-collapse > .col { padding: 0 !important }' của Flatsome thắng mọi
   luật đệm viết cho '.col'. Đệm và viền của thẻ vì thế phải đặt trên
   '.col-inner' — không cần '!important' nào. (Cùng họ với lớp 1 của hồ sơ
   I.6 §4 Dịch vụ trang chủ.) */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-o { flex: 0 0 270px; max-width: 270px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-o > .col-inner {
  border: 1px solid rgba(0, 0, 0, .11); padding: 31px 28px; height: 100%;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-o + .t4dv-kb-o > .col-inner { border-left: 0; }
/* ⛔ '[ux_image]' render '<div class="img"><div class="img-inner"><img>', và
   Flatsome khai '.img img { width: 100% }'. Đặt bề rộng lên chính <img> KHÔNG
   ăn — ô icon giữ nguyên 212×212 (bằng bề rộng cột) và đẩy tiêu đề thẻ xuống
   167px. Phải bó khung '.img', rồi 'width:100%' của theme tự ra 45. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-ic { width: 45px; max-width: 45px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-td h3 {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 26px; font-weight: 700;
  color: var(--t4-text); margin: 16px 0 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-mo p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400;
  color: var(--t4-text); text-align: justify; margin: 16px 0 0;
}

/* Bảng ba GÓI trong tab 1 — thẻ 332×512, viền, bo 16, đệm 40/30 */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi { margin-top: 64px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi > .tab-panels {
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 16px; padding: 31px 24px 47px; margin-top: 24px;
}
/* [số] Figma cho lớp tiêu đề một HỘP 1030×100 dù chữ chỉ một dòng 46 — kẻ
   ngang bên dưới bám mép hộp, không bám mép chữ. Dựng theo chữ thì mọi mốc
   'dy(tâm)' của bảng gói lệch đúng (100−46)/2 = 27. */
/* ⛔ Figma khai 'textAlignVertical: CENTER' cho lớp này — chữ 46px NẰM GIỮA
   hộp 100, không dính mép trên. Dựng theo mép trên cho chữ hiện HAI LẦN lệch
   27px trên ảnh nhiệt, trong khi bảng dày báo 0 ❌ (nó so mép hộp, không so
   mép chữ). Đây đúng loại lỗi chặng 3b sinh ra để bắt. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-h h3 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 45.996px; font-weight: 700;
  color: var(--t4-dark-moss); margin: 0; min-height: 100px;
  display: flex; align-items: center;
}
/* [số] 'Frame 216' = tiêu đề 100 + khe 16 + kẻ 1 = 117, rồi khe 32 tới hàng thẻ. */
/* ⛔ '[divider]' của Flatsome KHÔNG NHẬN thuộc tính 'class' — nó luôn render
   '<div class="is-divider divider clearfix">'. Mọi luật viết cho '.t4dv-goi-*ke'
   im lặng không khớp gì, và kẻ giữ nguyên mặc định của theme: cao **3px**, nền
   đặc 'rgba(0,0,0,.1)', lề '16px 0'. Bám qua PHẦN TỬ ANH EM thay vì qua class
   — đúng cách đã ghi ở 'qa/quyet-dinh.md' (§2 lớp 4, cùng bẫy, lần thứ hai).
   [số] kẻ dưới tiêu đề bảng: hộp tiêu đề 100 → kẻ ở +116 ⇒ lề trên 16, cao 1. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-h + .is-divider {
  height: 1px; max-width: 100%; margin: 16px 0 0;
  background: repeating-linear-gradient(to right,
              rgba(0, 0, 0, .55) 0 3px, transparent 3px 5px);
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-luoi,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-luoi { margin-top: 32px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-luoi { margin-top: 28px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o { flex: 0 0 332px; max-width: 332px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o > .col-inner {
  background: var(--t4-light);
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px;
  /* [số] đệm KHÔNG đối xứng: trên 40, đáy 25 ('Frame 79' kết thúc +487/512). */
  padding: 39px 29px 24px; height: 512px; display: flex; flex-direction: column;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o + .t4dv-goi-o { margin-left: 17px; }
/* [số] Biểu tượng đầu thẻ 28–31×40, màu '#458763'. Bó khung '.img' chứ không
   bó <img> (xem ghi chú ở khối 7). Khe biểu tượng → tiêu đề 16. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-ic { width: 28px; max-width: 28px; margin-bottom: 16px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o:nth-child(2) .t4dv-goi-ic { width: 29px; max-width: 29px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o:nth-child(3) .t4dv-goi-ic { width: 31px; max-width: 31px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-ten h4 {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 25px; font-weight: 700;
  color: var(--t4-text); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-phu p {
  font-family: var(--t4-font-body);
  font-size: 11px; line-height: 25px; font-weight: 600;
  color: var(--t4-text); margin: 0;
}
/* ⛔ Hộp phụ đề khai CAO 8px trong Figma dù chữ 11/25 — bố cục bám HỘP. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-phu p,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-nhom p { height: 8px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-phu p { margin-top: 4px; }
/* [số] Figma cho THẺ 1 khe 'Mô tả' → mục đầu = 8, THẺ 2 và 3 = 16. Đặt tay,
   không phải một luật chung; ba mốc 'khoang·dy' chéo thẻ phụ thuộc đúng 8px này. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o:nth-child(2) .t4dv-goi-nhan + .t4dv-goi-muc p,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o:nth-child(3) .t4dv-goi-nhan + .t4dv-goi-muc p {
  margin-top: 16px;
}
/* Figma khai riêng thẻ 3 giãn dòng 28 — không phải một luật chung bị làm tròn. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o:nth-child(3) .t4dv-goi-phu p { line-height: 28px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-nhan p {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 19.124px; font-weight: 600;
  color: var(--t4-text); margin: 0;
}
/* ⛔ Mọi 'Separator' của thẻ gói khai 'strokeDashes: [3, 2]' (LUẬT 6 · III.15.5).
   'border-style: dashed' của CSS KHÔNG đặt được nhịp 3/2 — phải vẽ bằng
   gradient lặp. '[divider]' của Flatsome render '.is-divider' nền đặc. */
/* [số] Trong thẻ: 'Frame 7' kết thúc +133 → kẻ ở +151 (lề 18), rồi 'Container'
   ở +170 (lề 19). Kẻ thứ HAI dính đáy thẻ: 'Frame 79' ở +454 trong thẻ cao 512. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o > .col-inner > .is-divider,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner > .is-divider {
  height: 1px; max-width: 100%; margin: 18px 0 19px;
  background: repeating-linear-gradient(to right,
              rgba(0, 0, 0, .55) 0 3px, transparent 3px 5px);
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o > .col-inner > .is-divider:last-of-type,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner > .is-divider:last-of-type {
  margin: auto 0 1px;
}
/* [số] mục danh sách: dấu tích 16×16,36 màu camel ở x=30, chữ ở x=50 ⇒ thụt 20.
   Đây là khối KHÔNG-PHẢI-CHỮ mà bản kê chữ không thấy (điểm mù II.K-3). */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-muc p,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-muc p { position: relative; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-muc p::before,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-muc p::before {
  content: ""; position: absolute; left: -20px; top: 2px;
  width: 16px; height: 16.36px;
  background: no-repeat center/13.72px 10.52px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11'%3E%3Cpath d='M1 5.6l4 4L13 1' fill='none' stroke='%23CF9156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-muc p {
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 20px; font-weight: 400;
  color: var(--t4-text); margin: 8px 0 0 20px;
}
/* Khối bọc ôm sát Link 24px — 'line-height: 26' của '.text' làm hộp cao 27,39
   và đẩy thẻ dôi ~3,4px so với Figma. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-xem,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem { line-height: 0; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-xem { margin-top: auto; }
/* [số] Link 103×24 bọc chữ 65×16 ⇒ đệm 19 ngang · 4 dọc · nền trắng · bo 3.
   Để '<a>' ở dạng inline thì hộp trong cùng bọc chữ hoá ra là cả '.col-inner'
   (332×443) và bảng dày báo lệch +229/+419 — không phải lỗi bố cục. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-xem a,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem a {
  display: inline-block; background: var(--t4-white); border-radius: 3px;
  padding: 4px 19px;
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 16.392px; font-weight: 400;
  color: var(--t4-text); text-decoration: none;
}

/* Tab 2 — hai gói 480 rộng */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-o { flex: 0 0 480px; max-width: 480px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-o + .t4dv-g2-o { margin-left: 54px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-ten h4 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-phu p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-muc p {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 25px; font-weight: 400; color: var(--t4-text); margin: 8px 0 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-tru p {
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 20px; font-weight: 600; color: var(--t4-text); margin: 8px 0 0;
}

/* Tab 3 — ba thẻ add-on */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o { flex: 0 0 332px; max-width: 332px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner {
  background: var(--t4-light);
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 10px;
  padding: 39px 29px 24px; height: 420px; display: flex; flex-direction: column;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o + .t4dv-g3-o { margin-left: 17px; }
/* [số] Thẻ tab 3: biểu tượng 28/42/38 × 40 nằm BÊN TRÁI khối tiêu đề
   ('Frame 7' xếp NGANG, khối chữ ở x=44/58/54 ⇒ khe 16), KHÁC thẻ tab 1 nơi
   biểu tượng nằm TRÊN. Thả nổi trái rồi cho kẻ 'clear' là đủ, không cần
   thêm một '[row_inner]' chỉ để xếp hai khối. */
/* ⛔ KHÔNG dùng 'float' cho biểu tượng: 'float' chỉ đẩy DÒNG CHỮ sang phải,
   còn HỘP của '<p>' vẫn bắt đầu ở x=0 — mà bảng dày đo hộp, nên mốc
   'khoang·dx' vẫn báo 0 trong khi nhìn mắt thấy đúng. Đặt tuyệt đối thì cả
   hộp lẫn chữ cùng dời. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner { position: relative; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-ic {
  position: absolute; top: 39px; left: 29px; width: 28px; max-width: 28px; margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(2) .t4dv-g3-ic { width: 42px; max-width: 42px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(3) .t4dv-g3-ic { width: 38px; max-width: 38px; }
/* [số] khối tiêu đề bắt đầu ở x = biểu tượng + khe 16 ⇒ 44 · 58 · 54
   ⛔ PHẢI thêm '.section-content' và '.text' vào bộ chọn. '40-page-xu-ly-loi-sai'
   khai một luật TOÀN CỤC
       '.t4 .section:where(:not(.t4fx-footer)) .section-content .text { margin: 0 }'
   với độ cụ thể (0,4,0) — ':where()' không cộng điểm nên nó nhìn "hiền" mà vẫn
   thắng mọi luật hai lớp. Viết 'body.<slug> .t4dv-g3-nhom' (0,2,0) là im lặng
   không ăn: 'padding' của cùng khối thì áp, riêng 'margin-left' bị đè.
   Tìm ra bằng cách hỏi CSSOM xem luật nào đang đặt 'margin-left', không phải
   bằng cách đọc tệp — luật kia nằm ở tệp của cửa sổ khác. */
body.t4-trang-truyen-thong-thuong-hieu .section-content .text.t4dv-g3-nhom,
body.t4-trang-truyen-thong-thuong-hieu .section-content .text.t4dv-g3-ten { margin-left: 44px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(2) .text.t4dv-g3-nhom,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(2) .text.t4dv-g3-ten { margin-left: 58px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(3) .text.t4dv-g3-nhom,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(3) .text.t4dv-g3-ten { margin-left: 54px; }
/* 'Frame 7': khối chữ = 4 đệm + 8 (nhóm) + 4 khe + 28 (tên) = 44 ≈ cao 40 của
   biểu tượng. Khe 4 giữa hai dòng là con số Figma (y=50→58, tên ở 62). */

/* 'Frame 7' cao 40 (bằng biểu tượng) — khối chữ 8 + 28 = 36, thêm 4 đệm trên */
/* ⛔ Khe 4 giữa 'Gói content' và tên gói phải là ĐỆM của khối bọc. Đặt
   'margin-bottom' lên '<p>' con cuối là bị GỘP LỀ đẩy ra ngoài khối cha —
   khối vẫn cao 12 thay vì 16 và mốc 'dy(tâm)' vẫn lệch −4. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-nhom { padding: 4px 0; }
/* [số] 'Frame 9': nhóm ở y=50 cao 8, tên ở y=62 ⇒ khe 4. Khai 'margin-bottom'
   ngay TRONG khối này, đừng khai ở khối trước — 'margin: 0' ở đây nằm SAU nên
   sẽ xoá mất (cùng độ cụ thể, luật sau thắng). */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-nhom p {
  font-family: var(--t4-font-body);
  font-size: 11px; line-height: 28px; font-weight: 600; color: var(--t4-text);
  margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-ten h4 {
  font-family: var(--t4-font-body);
  font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.48px;
  color: var(--t4-text); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-nhan p {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 19.124px; font-weight: 600; color: var(--t4-text); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-muc p {
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 20px; font-weight: 400; color: var(--t4-text); margin: 8px 0 0 20px;
}
/* ⚠ Thẻ 1 của tab 3 là MỘT đoạn văn liền, không phải danh sách: Figma đặt chữ
   ở x=0 của khối (không thụt 20), không có dấu tích, và giãn dòng 25 chứ không
   phải 20. Hai thẻ kia mới là danh sách. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(1) .t4dv-g3-muc p {
  margin-left: 0; line-height: 25px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(1) .t4dv-g3-muc p::before { display: none; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(2) .t4dv-g3-nhan + .t4dv-g3-muc p,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o:nth-child(3) .t4dv-g3-nhan + .t4dv-g3-muc p {
  margin-top: 16px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem { margin-top: auto; }

/* [figma] 'I1398:18125;1398:16684' — Add-on Sản xuất nội dung & Media · 302×100 · trang8·khacbiet_mb
   (lớp DUY NHẤT rộng 302px trong figma-spec/trang8.json) */
@media (max-width: 849px) {
  /* ⛔ Khổ 402 ĐẢO thứ tự: 'Asset 22 1' (minh hoạ) ở TRÊN, 'Frame 68' (H2 +
     đoạn dẫn) ở DƯỚI. Giữ thứ tự desktop là lệch 270px ở mốc nhãn → H2. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-tren { flex-direction: column-reverse; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-anh { margin-bottom: 10px; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-chu,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-anh,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-o,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-o,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o {
    flex: 0 0 100%; max-width: 100%; margin-left: 0;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-chu h2 { font-size: 32px; line-height: 42.656px; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-kb-o + .t4dv-kb-o > .col-inner { border-left: 1px solid rgba(0, 0, 0, .11); border-top: 0; }
  /* ⛔ `margin-left: 0` PHẢI ĐẶT Ở ĐÂY, không phải ở luật `.t4dv-goi-o` một
     lớp phía trên. Luật desktop là `… .t4dv-goi-o + .t4dv-goi-o` — độ ưu tiên
     (0,3,1), THẮNG luật gỡ một lớp (0,2,1). Media query KHÔNG cộng ưu tiên,
     nên `margin-left: 17px` của desktop sống sót xuống khổ 402 và đẩy thẻ 2,3
     sang phải 17px (đo được x=67 trong khi thẻ 1 ở x=50). Figma xếp cả ba thẻ
     cùng một mép trái. Gỡ dòng này là lỗi lệch quay lại ngay. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o + .t4dv-goi-o,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g2-o + .t4dv-g2-o,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o + .t4dv-g3-o { margin-top: 24px; margin-left: 0; }
  /* [số] khổ 402: thẻ gói rộng 302 (không phải 352 của cả cột), chữ trong thẻ
     242 ⇒ đệm 30; tiêu đề bảng 32/36,797. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o > .col-inner,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner {
    max-width: 302px; margin-right: auto; margin-left: auto;
    padding: 39px 29px 25px;
    /* ⛔ `height: 512px` GHI CỨNG (dòng 435, luật desktop) là SAI ở khổ 402:
       Figma cho ba thẻ ba chiều cao KHÁC NHAU — 512 · 537 · 512
       (I1398:18125;1398:16793 · ;16822 · ;16867), vì thẻ giữa có 6 mục thay vì
       3. Ép cả ba về 512 thì thẻ giữa thừa ra 26px.
       Trước đây lỗi này VÔ HÌNH: nội dung dồn lên đầu nên phần thừa rơi vào
       vùng trắng dưới đáy, `overflow: visible` nên không ai thấy. Vừa ghim
       «Xem chi tiết» xuống đáy (luật ngay dưới) là nó tràn hẳn ra ngoài viền.
       Hai lỗi này phải sửa CÙNG NHAU, gỡ một cái là hỏng cái kia.
       `min-height` giữ đúng sàn 512 mà vẫn cho thẻ giữa tự nở tới 537. */
    height: auto; min-height: 512px;
  }
  /* ⛔ KHOẢNG CO GIÃN PHẢI NẰM TRÊN CẶP «kẻ + Xem chi tiết», KHÔNG PHẢI DƯỚI.
     [số] Figma thẻ 302×512 (I1398:18125;1398:16793): thân bài kết thúc ở 293,
     rồi TRỐNG 161, rồi kẻ 454 + liên kết 463…487, đáy 512 ⇒ chừa 25.
     Live trước sửa: thân bài kết thúc 294 (khớp Figma), nhưng kẻ nhảy lên 312
     và liên kết 332…356 — dồn hết 117px trống XUỐNG DƯỚI liên kết. Nhìn ra
     đúng một mảng trắng lớn ở đáy thẻ, và đó là "ô trắng" 4T thấy bằng mắt
     trong khi mọi phép đo chiều cao đều báo 512 = đúng Figma.
     ⚠ Chỉ đặt `auto` cho ĐƯỜNG KẺ. Đặt cho cả kẻ lẫn `.t4dv-g3-xem` thì
     flexbox CHIA ĐÔI chỗ trống cho hai phần tử — kẻ lơ lửng giữa thẻ, tệ hơn
     trước. Vì vậy phải gỡ `margin-top: auto` mà luật desktop đặt cho g3-xem. */
  /* ⛔ CHỌN THEO VỊ TRÍ, KHÔNG THEO LỚP `.t4dv-goi-ke2`. Shortcode `[divider]`
     của Flatsome NUỐT thuộc tính `class` — DOM thật chỉ có
     `is-divider divider clearfix`, không hề có `t4dv-goi-ke2`. (Hệ quả: các
     luật `.t4dv-goi-ke2` ở phần desktop phía trên cũng chưa bao giờ khớp.)
     Đường kẻ cuối luôn là phần tử áp chót — sau nó đúng một khối «Xem chi tiết». */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-o > .col-inner > .is-divider:nth-last-child(2),
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner > .is-divider:nth-last-child(2) { margin-top: auto; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem { margin-top: 0; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-h h3 {
    font-size: 32px; line-height: 36.797px; min-height: 100px;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi > .tab-panels { padding: 31px 24px 47px; }
  /* [số] khổ 402: thẻ bo 16 (desktop 10), cao tối thiểu 420, và hai dòng tiêu
     đề CĂN GIỮA trong khi thân bài căn trái (Figma đặt 'Gói content' ở
     x=124/138/134 — ba số khác nhau, tức căn giữa chứ không phải căn trái). */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner {
    border-radius: 16px; min-height: 420px;
  }
  /* ⚠ KHÔNG căn giữa: Figma đặt 'Gói content' và tên gói ở CÙNG một x (74/…)
     ngay bên phải biểu tượng — căn giữa cho hai x khác nhau vì hai chuỗi khác
     bề rộng. Đã đo nhầm một vòng vì suy từ ba con số x khác nhau của ba thẻ. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-o > .col-inner { padding: 49px 29px 24px; }
  /* Khung tab khổ 402 rộng 249 bọc chữ 217 ⇒ đệm 16, khe 0 (desktop là 24/32).
     [số] Figma 'Tablist' cao 74 = 10 trên + tab 54 + 10 dưới (I1398:18125;
     1398:16522 top=0 h=74, tab con top=10 h=54). Thiếu 20px đệm này thì cả
     khối tabs ngắn hơn Figma đúng 20px. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi > ul.nav { gap: 0; padding: 10px 0; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi > ul.nav > li > a { padding: 12px 16px; }
}


/* ==========================================================================
   8. #8 · KHỐI "DỰ ÁN CỦA CHÚNG TÔI"
   [phục vụ] phần tử: Row/Col + Image + Text + Button + Tabs
   [trang] #8 | [figma] 547:3521 · 1385:13895
   [lý do vượt panel] khe 74 giữa ảnh và cột chữ không phải khe đều của Row.
   [số] ảnh 506 + khe 74 + cột chữ 500 = 1080 ✅ · H2 40/600 · đoạn 16/400 lh26
        Tabpanel 1080×492 đệm 32/25 bo 10 · 'Frame 129' khe 40 · 'Frame 132' khe 149
   ========================================================================== */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-tren { margin-top: 16px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-tren > .col { padding: 0; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-anh { flex: 0 0 506px; max-width: 506px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-chu {
  flex: 0 0 500px; max-width: 500px; margin-left: 74px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-chu h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-mo p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400;
  color: var(--t4-text); margin: 16px 0 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-case { margin-top: 66px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-case > .tab-panels {
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 10px; padding: 31px 24px; margin-top: 24px;
}
/* [số] 'Frame 129' và 'Frame 132' của Figma rộng 1013,98 trong lòng panel 1030
   ⇒ tự thụt 8px mỗi bên. Thiếu chỗ này thì MỌI mốc ngang của panel lệch −8,7. */
body.t4-nhom-dv3 .t4dv-case,
body.t4-nhom-dv3 .t4dv-case-so {
  max-width: 1014px; margin-left: auto; margin-right: auto;
}
body.t4-nhom-dv3 .t4dv-case > .col { padding: 0; }
body.t4-nhom-dv3 .t4dv-case-anh { flex: 0 0 503px; max-width: 503px; }
body.t4-nhom-dv3 .t4dv-case-chu {
  flex: 0 0 470px; max-width: 470px; margin-left: 40px;
}
/* [số] Figma cho khối trích một HỘP 470×187 (7 dòng × 26) rồi đặt tên người
   nói ngay dưới hộp đó. Trình duyệt vẽ đoạn này chỉ 6 dòng nên tên leo lên
   53px — không phải lỗi khoảng cách mà là hộp thiếu chiều cao. */
body.t4-nhom-dv3 .t4dv-case-trich p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text);
  margin: 0; min-height: 187px;
}
/* Bảng dày đo HỘP TRONG CÙNG bọc chữ = '<strong>', mà '<strong>' inline chỉ
   cao 22 trong khi Figma cho lớp này hộp 313×30. Cho nó thành khối. */
body.t4-nhom-dv3 .t4dv-case-ten strong {
  font-weight: 700; display: block; line-height: 30px;
}
body.t4-nhom-dv3 .t4dv-case-ten p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 30px; font-weight: 700; color: var(--t4-text); margin: 28px 0 0;
}
body.t4-nhom-dv3 .t4dv-case-cd p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text); margin: 0;
}
body.t4-nhom-dv3 .t4dv-case-link p,
body.t4-nhom-dv3 .t4dv-case-link a {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 30px; font-weight: 700;
  color: var(--t4-text); text-decoration: none; margin: 0;
}
/* [số] Figma 'Frame 132' 1014 rộng chứa hai ô 416,3 và 314,7 cách nhau 149 —
   HAI Ô KHÔNG BẰNG NHAU, và cả cụm căn giữa (dư 67 mỗi bên). */
body.t4-nhom-dv3 .t4dv-case-so { margin-top: 19px; justify-content: center; }
body.t4-nhom-dv3 .t4dv-case-so-o { padding: 0; }
body.t4-nhom-dv3 .t4dv-case-so-o:nth-child(1) { flex: 0 0 416.3px; max-width: 416.3px; }
body.t4-nhom-dv3 .t4dv-case-so-o:nth-child(2) { flex: 0 0 314.7px; max-width: 314.7px; margin-left: 149px; }
body.t4-nhom-dv3 .t4dv-case-so-n p {
  font-family: var(--t4-font-body);
  font-size: 40px; line-height: 54.64px; font-weight: 700;
  color: var(--t4-text); text-align: center; margin: 0;
}
body.t4-nhom-dv3 .t4dv-case-so-m p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400;
  color: var(--t4-text); text-align: center; margin: 0;
}
body.t4-nhom-dv3 .t4dv-cc-td h3 {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 30px; font-weight: 700; color: var(--t4-text); margin: 0;
}
body.t4-nhom-dv3 .t4dv-cc-mo p {
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-muted); margin: 8px 0 0;
}

@media (max-width: 849px) {
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-anh,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-chu,
  body.t4-nhom-dv3 .t4dv-case-anh,
  body.t4-nhom-dv3 .t4dv-case-chu {
    flex: 0 0 100%; max-width: 100%; margin-left: 0;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-chu h2 { font-size: 32px; line-height: 42.656px; }
  /* [số] Figma khổ 402: 'Asset 1 10' ở y=77 cao 213, 'Frame 195' ở y=323 ⇒ khe 33 */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-da-anh { margin-bottom: 33px; }
  /* Dải tab casestudy khổ 402 bắt đầu ở x=41 (lề nội dung 25 + 16) */
  body.t4-nhom-dv3 .t4dv-tabs { max-width: 352px; }

/* [figma] 159 = 129 + 30 — 129 là '918:8443' (Group) trang8·duan; 30 là đệm cột 15px mỗi bên
   của '.col' Flatsome (xem GIA ĐÌNH SỐ KHUNG đầu 30-components.css). KHÔNG có lớp nào rộng 159 trong Figma. */
  /* [số] Khổ 402: bảng casestudy KHÔNG có đệm ngang — Figma đặt đoạn trích và
     hai ô số liệu ngay ở x=25 (lề nội dung). Để đệm 24 thì lòng bảng còn 304,
     hai ô số liệu 160+32+160 = 352 gãy xuống hai hàng. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-case > .tab-panels {
    padding: 31px 0 46px;
  }
  body.t4-nhom-dv3 .t4dv-case,
  body.t4-nhom-dv3 .t4dv-case-so { max-width: 100%; }
  body.t4-nhom-dv3 .t4dv-case-trich p,
  body.t4-nhom-dv3 .t4dv-case-cd p,
  body.t4-nhom-dv3 .t4dv-case-so-m p { font-size: 14px; line-height: 22px; }
  body.t4-nhom-dv3 .t4dv-case-trich p { min-height: 110px; }
  /* [số] Figma khổ 402: thanh tab kết thúc 858,5 · đoạn trích ở 1180,5 ⇒ giữa
     là bảng (lề 24 + viền 1 + đệm 31) + ảnh 231 + khe 35. */
  body.t4-nhom-dv3 .t4dv-case-anh { margin-bottom: 27px; }
  /* [số] khổ 402: thanh tab casestudy cách nút "Xem thêm" 110 (desktop 132) */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-case { margin-top: 63px; }
  /* Hàng số liệu cách link 15 ở khổ 402 (desktop 19) */
  body.t4-nhom-dv3 .t4dv-case-so { margin-top: 15px; }
  /* Hộp tên người nói giữ giãn dòng 30 như desktop — chỉ chức danh xuống 22 */
  body.t4-nhom-dv3 .t4dv-case-ten p { line-height: 30px; }
  /* [số] Figma khổ 402 đặt nhãn tab đầu ở x=51 = lề 25 + đệm 26 */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi > ul.nav { padding-left: 10px; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-tabs-goi { margin-top: 71px; }
  /* [số] khổ 402: hai ô số liệu rộng 160 ở x=25 và x=217 ⇒ bước 192, khe 32. */
  /* ⛔ Luật desktop dùng ':nth-child()' nên độ cụ thể CAO HƠN luật khổ 402 viết
     bằng class trần — nằm trong '@media' sau vẫn thua. Phải khai lại cùng dạng. */
  body.t4-nhom-dv3 .t4dv-case-so { justify-content: flex-start; }
  body.t4-nhom-dv3 .t4dv-case-so-o:nth-child(1),
  body.t4-nhom-dv3 .t4dv-case-so-o:nth-child(2) {
    flex: 0 0 159px; max-width: 159px;
  }
  /* ⚠ Khe 30 chứ không phải 32: lòng bảng còn 350 (352 − hai nét viền 1px),
     mà 160+32+160 = 352 thì hàng GÃY xuống hai dòng. Ô thứ hai lệch 1px so với
     Figma — dưới ngưỡng 2px, đổi lại giữ được hàng ngang. */
  body.t4-nhom-dv3 .t4dv-case-so-o:nth-child(2) { margin-left: 32px; }
}


/* ==========================================================================
   9. #8 · KHỐI "CHƯƠNG TRÌNH ƯU ĐÃI" — chữ | lưới 8 biểu tượng
   [phục vụ] phần tử: Row/Col + 8 × Image
   [trang] #8 | [figma] 564:20352 · 1385:14188
   [lý do vượt panel] lưới 4×2 khe 48/16 không dựng được bằng span 1/12.
   [số] cột chữ 459 + khe 115,98 + lưới 424 · ô 70×70 · bước ngang 118 · dọc 86
        H2 32/700 lh45, dòng 2 màu camel '#cf9156' (LUẬT 6 · III.15)
        khổ 402: lưới 3 cột, ô 74, bước 106/89; chữ NẰM DƯỚI lưới
   ========================================================================== */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu { flex: 0 0 459px; max-width: 459px; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-anh {
  flex: 0 0 424px; max-width: 424px; margin-left: 115.98px;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud h2 {
  font-family: var(--t4-font-head);
  font-size: 32px; line-height: 45px; font-weight: 700;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-luoi { margin: 0; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o {
  flex: 0 0 70px; max-width: 70px; padding: 0; margin: 0 48px 16px 0;
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o:nth-child(4n) { margin-right: 0; }
/* [số] 'Frame 222' cao đúng 156 = 70 + 16 + 70. Giữ lề dưới của HÀNG CUỐI là
   khối cao 172, và vì hàng cha căn giữa dọc thì cả lưới trôi LÊN 8px.
   ⛔ PHẢI bọc '@media (min-width: 850px)': khổ 402 xếp lưới BA cột nên bốn ô
   cuối trải hai hàng — luật trần xoá luôn khe của hàng giữa và ảnh nhiệt
   'uudai_mb' vọt từ 5,23 % lên 20,73 % (III.14.2-7). */
@media (min-width: 850px) {
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o:nth-last-child(-n+4) { margin-bottom: 0; }
}
body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o img { width: 70px; height: 70px; }

/* [figma] trang8 · section uudai_mb — 3 lớp rộng 74px: '1385:14223' · '1385:14231' · '1385:14243'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 8 để chọn) */
@media (max-width: 849px) {
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud { flex-direction: column-reverse; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-chu,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-anh {
    flex: 0 0 100%; max-width: 100%; margin-left: 0;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-anh { margin-bottom: 32px; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o {
    flex: 0 0 74px; max-width: 74px; margin: 0 32px 16px 0;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o:nth-child(4n) { margin-right: 32px; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o:nth-child(3n) { margin-right: 0; }
  /* Hàng CUỐI (ô 7 và 8) không có lề dưới — Figma 'Frame 222' cao đúng 252
     = 3×74 + 2×15; giữ lề dưới của hàng cuối là section dôi 18px. */
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o:nth-last-child(-n+2) { margin-bottom: 0; }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-ud-o img { width: 74px; height: 74px; }
}


/* ==========================================================================
   10. #9 'thiet-ke-toi-uu-website' — TOKEN CHỮ THEO VAI TRÒ
   [phục vụ] phần tử: Text của mọi section trang #9
   [trang] #9 | [figma] 564:21427 · 1385:14658
   [lý do vượt panel] panel Text không đặt được giãn dòng/giãn chữ theo Figma.
   [số] vòng đo đầu: 852 ❌, trong đó 364 là token chữ thuần (lh 129 · size 115
        · weight 52 · mau 36 · hoa 32). Khai theo VAI TRÒ, không vá từng lớp.
   ========================================================================== */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .t4dv-hero-mo p {
  font-size: 20px; line-height: 35px; font-weight: 500; letter-spacing: -.2px;
  max-width: 780px;
}
/* Hai nút hero: Figma 342×56 và 348×56, bo 5, chữ 18/700 lh32 */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut {
  margin-top: 36px; display: flex; justify-content: center; gap: 16px;
}
body.t4-nhom-dv3 .t4dv-nut {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 5px; border: 2px solid transparent;
  font-family: var(--t4-font-body);
  font-size: 18px; line-height: 32px; font-weight: 700;
  text-decoration: none; text-transform: none; transition: opacity .2s ease;
  padding: 0 38px;
}
body.t4-nhom-dv3 .t4dv-nut--trang {
  background: var(--t4-white); border-color: var(--t4-camel); color: var(--t4-camel);
}
body.t4-nhom-dv3 .t4dv-nut--dac { background: var(--t4-camel); color: var(--t4-white); }
body.t4-nhom-dv3 .t4dv-nut:hover { opacity: .88; }

/* [figma] trang9 · section dvkhac/faqnhom — 3 lớp rộng 361px: '568:25127' · '568:25022' · '568:25086'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* Đầu section hai cột: H2 trái | mô tả phải (Figma khe 172 hoặc 223) */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot { margin-top: 16px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col { padding: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td { flex: 0 0 361px; max-width: 361px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-mo {
  flex: 0 0 511px; max-width: 511px; margin-left: 172px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-mo p {
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text); margin: 0;
}
/* Liên kết "Xem tất cả" — Figma khung 132×35 viền 1px '#155446' bo 5 */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca a {
  display: inline-block; border: 1px solid var(--t4-dark-moss); border-radius: 5px;
  padding: 7px 29px; font-size: 14px; line-height: 19.124px; font-weight: 700;
  color: var(--t4-dark-moss); text-decoration: none;
}

/* [figma] trang9 · section tuyenngon — section DUY NHẤT chứa đủ
   bộ bề rộng của cụm này: 500px→'1037:48064' (+5) · 552px→'564:21474' (+3)
   (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) */
/* --- 10.1 Lời tuyên ngôn: minh hoạ 500 | khe 28 | chữ 552 ---------------- */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-hang { margin-top: 64px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-hang > .col { padding: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-anh { flex: 0 0 500px; max-width: 500px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-chu {
  flex: 0 0 552px; max-width: 552px; margin-left: 28px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-chu h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 50px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
/* LUẬT 6: Figma khai đoạn "Biến website trở thành" 32/400 NGHIÊNG, phần còn
   lại 40/600 — hai kiểu trong MỘT lớp chữ (III.15). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-chu h2 em {
  font-size: 32px; font-weight: 400; font-style: italic;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-mo p {
  font-size: 20px; line-height: 32px; font-weight: 400; letter-spacing: .2px;
  color: var(--t4-text); text-align: justify; margin: 32px 0 0;
}

/* [figma] trang9 · section dvkhac — 4 lớp rộng 335px: '568:25147' · '568:25160' · '568:25173' … còn 1
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* --- 10.2 Dịch vụ khác: dải bốn thẻ 335, khe 28, bo 24 ------------------- */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai {
  margin-top: 71px; flex-wrap: nowrap; overflow-x: auto;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o {
  flex: 0 0 335px; max-width: 335px; padding: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o + .t4dv-dvk-o { margin-left: 28px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o > .col-inner {
  background: var(--t4-white); border: 1px solid var(--t4-light); border-radius: 24px;
  padding: 23px; height: 650px; display: flex; flex-direction: column;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh { width: 287px; max-width: 287px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 {
  font-size: 18px; line-height: 28px; font-weight: 700; text-align: center;
  color: var(--t4-black); margin: 16px 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-mo p {
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-text); margin: 16px 0 0;
}

/* [figma] trang9 · section goi — 4 lớp rộng 550px: '564:23334' · '564:23335' · '1050:7679' … còn 1
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* --- 10.3 Gói chăm sóc Website: ba thẻ 343, khe 25,5, bo 16 -------------- */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren { margin-top: 16px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren > .col { padding: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-chu { flex: 0 0 550px; max-width: 550px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh {
  flex: 0 0 358px; max-width: 358px; margin-left: 172px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-chu h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-dark-moss); margin: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-mo p {
  font-size: 16px; line-height: 26px; font-weight: 400; color: var(--t4-ink);
  text-align: justify; margin: 32px 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 64px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o { flex: 0 0 343px; max-width: 343px; padding: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o + .t4dv-goics-o { margin-left: 25.5px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner {
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px;
  padding: 32px 25px 35px; height: 305px; display: flex; flex-direction: column;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-ten h3 {
  font-size: 28px; line-height: 25px; font-weight: 600; color: var(--t4-text); margin: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .is-divider {
  height: 1px; max-width: 100%; margin: 24px 0 0; background: rgba(0, 0, 0, .1);
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-mo2 p {
  font-size: 14px; line-height: 19.124px; font-weight: 400; color: var(--t4-text);
  text-align: justify; margin: 24px 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-goi {
  background-color: var(--t4-camel); border-color: var(--t4-camel); color: var(--t4-white);
  border-radius: 5px; box-shadow: none; text-transform: none; letter-spacing: 0;
  font-size: 16px; line-height: 24px; font-weight: 600;
  min-height: 44px; padding: 10px 24px; margin: auto 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-goi span {
  font-size: 16px; line-height: 24px; font-weight: 600;
}

/* --- 10.4 Free template: lưới 3×2, thẻ 338,67×584, bo 16 ---------------- */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi { margin-top: 32px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o {
  flex: 0 0 338.67px; max-width: 338.67px; padding: 0; margin: 0 32px 32px 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o:nth-child(3n) { margin-right: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o:nth-last-child(-n+3) { margin-bottom: 0; }
/* [số] Ảnh 339×287 = ĐÚNG bề rộng thẻ ⇒ thẻ KHÔNG có đệm ngang ở phần ảnh;
   đệm 27 chỉ áp cho khối chữ bên dưới. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner {
  background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11); border-radius: 16px;
  padding: 0 0 19px; height: 584px; display: flex; flex-direction: column;
  overflow: hidden;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text { padding: 0 27px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan p {
  font-size: 14px; line-height: 28px; font-weight: 600; text-transform: uppercase;
  color: var(--t4-gray-mid); margin: 16px 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-muc p {
  font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t4-text);
  margin: 8px 0 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem { margin-top: auto; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem a {
  font-size: 12px; line-height: 16.392px; font-weight: 400;
  color: var(--t4-text); text-decoration: none;
}
body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-camel {
  background-color: var(--t4-camel); border: 1px solid var(--t4-cream);
  color: var(--t4-white); border-radius: 12px; box-shadow: none;
  text-transform: none; letter-spacing: 0;
  font-size: 16px; line-height: 30px; font-weight: 600;
  min-height: 52px; padding: 11px 26px; margin: 32px 0 0;
}
body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-camel span {
  font-size: 16px; line-height: 30px; font-weight: 600;
}

/* --- 10.5 FAQ ----------------------------------------------------------- */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-h2 h2 {
  font-family: var(--t4-font-head);
  font-size: 40px; line-height: 53.32px; font-weight: 600;
  color: var(--t4-camel-dark); text-align: center; margin: 0;
}
/* [số] mỗi nhóm: tiêu đề 24/700 CĂN GIỮA, rồi hai cột 516 khe 28, mỗi mục
   cách nhau 16; các nhóm cách nhau 48. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhom + .t4dv-faq-nhom { margin-top: 48px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhan p {
  font-size: 24px; line-height: 32.784px; font-weight: 700;
  color: var(--t4-text); text-align: center; margin: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac { margin-top: 24px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item {
  border: 1px solid rgba(0, 0, 0, .11); border-radius: 8px; margin-bottom: 16px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
  /* [số] chữ câu hỏi rộng tối đa 377 trong hộp 516 (chừa 114 cho biểu tượng +) */
  border: 0; padding: 20px 114px 20px 25px;
  font-size: 18px; line-height: 24.588px; font-weight: 400;
  color: var(--t4-text); text-transform: none;
}

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .t4dv-hero-mo p {
    font-size: 16px; line-height: 35px; letter-spacing: -.16px; max-width: 352px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut {
    flex-direction: column; align-items: center; gap: 28px; margin-top: 279px;
  }
  body.t4-nhom-dv3 .t4dv-nut { width: 207px; height: 32px; font-size: 14px; padding: 0; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-mo,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-anh,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-chu,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-chu,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o {
    flex: 0 0 100%; max-width: 100%; margin-left: 0;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-chu h2 { font-size: 32px; line-height: 42.656px; }
  /* Khổ 402: ba thẻ gói là dải CUỘN NGANG (Figma đặt ở x=112 · 428 · 744) */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi {
    flex-wrap: nowrap; overflow-x: auto;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o { flex: 0 0 316px; max-width: 316px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o + .t4dv-goics-o { margin-left: 0; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o { margin-right: 0; margin-bottom: 24px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-h2 h2 { font-size: 40px; line-height: 53.32px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhan p { text-align: left; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
    font-size: 14px; line-height: 19.124px; padding: 14px 16px;
  }
}


/* --- 10.6 Vá vòng đo 1 của #9 ------------------------------------------- */
/* '10-base' cho mọi h2/h3 phông Playfair; ba khối này Figma dùng Manrope. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3,
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-ten h3 { font-family: var(--t4-font-body); }
/* Nút gói: nền XANH RÊU '#458763', không phải camel */
body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-goi {
  background-color: var(--t4-leaf); border-color: var(--t4-leaf);
}
/* [số] Figma cho "Xem chi tiết" một Link 103×24 và "Learn more" 85×20 — hộp
   ôm sát chữ. Để '<a>' inline thì hộp trong cùng bọc chữ hoá ra CẢ THẺ
   (335×650 · 338×584) và bảng dày báo lệch +232/+626 (cùng bẫy đã gặp ở #8). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goi-xem a {
  display: inline-block; padding: 4px 19px;
  background: var(--t4-white); border-radius: 3px;
  font-size: 12px; line-height: 16.392px; font-weight: 400;
  color: var(--t4-text); text-decoration: none;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goi-xem { margin-top: auto; line-height: 0; }
/* ⛔ Hộp phải CÓ NỀN thì bảng dày mới nhận nó là "hộp trong cùng bọc chữ".
   Không có nền, bộ dò leo lên '.col-inner' và báo lệch +232/+626. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem a {
  /* ⛔ 22/08/2026: `padding` nâng từ '2px 11px' lên '4px 11px' — thêm
     2px MỖI cạnh trên/dưới nên TÂM chữ không xê dịch (mọi mốc `margin-top`
     "tính từ tâm" ở 10.13/10.8 vẫn đúng). `kiem-tuong-tac.js` báo hộp
     84×20,4 dưới ngưỡng chạm tối thiểu 24px (WCAG 2.2 · 2.5.8) ở cả 6 thẻ
     "Learn more" — Figma không tô nền/không đặt padding cho lớp Link này,
     nên đây là số 4T tự thêm để đạt ngưỡng, không phải số đo được từ bản vẽ. */
  display: inline-block; padding: 4px 11px; border-radius: 8px;
  background: var(--t4-white);
  font-size: 12px; line-height: 16.392px; font-weight: 400;
  color: var(--t4-text); text-decoration: none;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem { line-height: 0; }
/* [số] Liên kết "Xem tất cả" nằm ở MÉP PHẢI hàng nhãn (Figma x=1348, mép phải
   1480), không nằm dưới chip. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca {
  position: absolute; right: 10px; top: 3px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-nhan { position: relative; }
/* [số] Mục FAQ: hộp 516×98 nền '#efe8da' bo 16, hai cột 516 khe 28. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac {
  display: flex; flex-wrap: wrap; gap: 16px 28px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item {
  flex: 0 0 516px; max-width: 516px; margin-bottom: 0;
  background: var(--t4-cream); border: 0; border-radius: 16px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
  min-height: 98px; display: flex; align-items: center;
}

@media (max-width: 849px) {
  /* Khổ 402: H2 đầu section 32/42,656 (desktop 40/53,32) */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td h2 { font-size: 32px; line-height: 42.656px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac { display: block; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item {
    flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; border-radius: 5px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title { min-height: 61px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca { position: static; }
}


/* [figma] trang9 · section hero — 2 lớp rộng 342px: '939:12448' · '939:12450'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* --- 10.7 Vá vòng đo 2 của #9 ------------------------------------------- */
/* [số] Hai nút hero có bề rộng KHÁC NHAU: 342 và 348 (khổ 402 cùng 207×32). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut--trang { width: 342px; padding: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut--dac { width: 348px; padding: 0; }

/* [số] Thẻ Dịch vụ khác: bo 24 ở khổ 1900 nhưng **10** ở khổ 402; và liên kết
   "Xem chi tiết" là hộp 103×24 bo 3 (không phải bo của thẻ). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goi-xem a { border-radius: 3px; }

/* [số] 'template': H2 hộp 53, đoạn mô tả hộp 90 ⇒ so TÂM lệch 18,5 nếu hai
   khối cùng neo đỉnh. Figma neo ĐỈNH cả hai, nên phải ép hộp H2 cao 53 và
   KHÔNG cho hàng căn giữa. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot { align-items: flex-start; }

@media (max-width: 849px) {
  /* ⛔ Khổ 402 của 'Free template' chỉ vẽ HAI thẻ (Figma 1385:15871 — 'Frame 223'
     có đúng hai 'Background+Border' 352×587/588, khe 32). Dựng cả sáu thẻ làm
     section phồng **+2.374px**. Bốn thẻ sau mang đúng ba dòng nội dung như hai
     thẻ đầu nên ẩn chúng KHÔNG mất lớp chữ nào của bản thiết kế. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o:nth-child(n+3) { display: none; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner {
    height: 587px; border-radius: 10px; padding: 0 0 19px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o { margin-bottom: 32px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o:nth-child(2) { margin-bottom: 0; }
  body.t4-trang-thiet-ke-toi-uu-website a.button.t4dv-nut-camel {
    border-radius: 5px; margin-top: 32px;
  }

/* [figma] trang9 · section dvkhac_mb — 4 lớp rộng 280px: '1385:15399' · '1385:15412' · '1385:15425' … còn 1
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
  /* [số] 'Dịch vụ khác' khổ 402: dải cuộn ngang, thẻ 280×550, khe 16, bo 10,
     đệm 23 (viền 1px + 23 = 24 của Figma). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o { flex: 0 0 280px; max-width: 280px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o + .t4dv-dvk-o { margin-left: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o > .col-inner {
    height: 550px; border-radius: 10px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh { width: 232px; max-width: 232px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 { font-size: 16px; line-height: 24px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-mo p { font-size: 14px; line-height: 22px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 32px; }

/* [figma] trang9 · section goi_mb — 3 lớp rộng 300px: '1385:15829' · '1385:15843' · '1385:15857'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
  /* [số] 'Gói chăm sóc' khổ 402: thẻ 300×329, khe 16, bo 10, đệm 0/30/36/30 */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o { flex: 0 0 300px; max-width: 300px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o + .t4dv-goics-o { margin-left: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner {
    height: 329px; border-radius: 10px; padding: 0 29px 35px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 32px; }

  /* [số] FAQ khổ 402: tiêu đề hộp 352×106 (HAI dòng), rồi khe 32 tới nhóm đầu;
     các nhóm cách nhau 32; tiêu đề nhóm CĂN GIỮA như khổ 1900. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-h2 h2 { max-width: 352px; margin: 0 auto; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhan p { text-align: center; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhom + .t4dv-faq-nhom { margin-top: 32px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac { margin-top: 24px; }
}


/* --- 10.8 Vá vòng đo 3 của #9 ------------------------------------------- */
/* [số] Figma KHÔNG tô nền cho Link "Learn more" (chỉ bo góc 8). Cho nền trắng
   để bộ dò nhận ra hộp là sai — mốc 'nen' báo lệch ở cả sáu thẻ. 'border-radius'
   một mình đã đủ để 'sinh-map-day' coi đây là "hộp". */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem a { background: transparent; }

/* [số] Nhãn thẻ template CĂN GIỮA: Figma đặt ba nhãn ở x=513,3 · 798,5 · 1247,7
   — đúng tâm ba thẻ (579,3 · 950 · 1320,7) trừ nửa bề rộng chữ. Căn trái cho
   bước 370,66 thay vì 285,17. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan p { text-align: center; }
/* [số] Chuỗi dọc trong thẻ: ảnh kết thúc +287 → nhãn +340 (khe 53) → mục đầu
   +411,5 (khe 43,5) → bước mục 30 → "Learn more" +536 (khe 47,5). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan p { margin-top: 53px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan + .t4dv-tpl-muc p { margin-top: 43.5px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-muc + .t4dv-tpl-muc p { margin-top: 13px; }
/* Ảnh tràn hết bề rộng thẻ KỂ CẢ nét viền (Figma 339 = 338,67 + hai nét 1px) */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh {
  width: calc(100% + 2px); max-width: none; margin: -1px -1px 0;
}

/* [số] Cột mô tả của đầu section luôn bắt đầu ở x=979 (khối nội dung 410) —
   tức cột tiêu đề chiếm 569, KHÔNG phải bề rộng chữ của nó. Riêng 'Dịch vụ
   khác' có khối nội dung bắt đầu ở 428 nên cột tiêu đề là 533. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td { flex: 0 0 569px; max-width: 569px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-mo { margin-left: 0; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-td { flex-basis: 533px; max-width: 533px; }

@media (max-width: 849px) {
  /* ⚠ 'Free template' khổ 402 GIỮ H2 40/53,32; chỉ 'Dịch vụ khác' và
     'Casestudy' hạ xuống 32/42,656. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl .t4dv-dau-td h2 {
    font-size: 40px; line-height: 53.32px;
  }
  /* Khổ 402 vẫn giữ "Xem tất cả" ở MÉP PHẢI cùng hàng nhãn (Figma x=245/352) */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca {
    position: absolute; right: 0; top: 3px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-td,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-td { flex-basis: 100%; max-width: 100%; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh { width: calc(100% + 2px); }
}


/* --- 10.9 Vá vòng đo 4 của #9 ------------------------------------------- */
/* ⛔ NHÃN THẺ TEMPLATE KHÔNG ĐƯỢC NGẮT DÒNG. Figma cho nhãn dài nhất
   ("Dự án truyền thông Marketing tổng thế") một hộp **303** trong thẻ 338,67 —
   tức vùng chữ chỉ chừa 16 mỗi bên, không phải 27 như phần thân. Để đệm 27 thì
   nhãn đó xuống HAI dòng, thẻ giữa cao thêm 28,83 và MỌI mốc ngang của hàng
   lệch một thẻ (370,67 → 741,31) vì bộ ghép xếp theo HÀNG. 24 trong 52 mốc còn
   lại của màn này đều từ một chỗ ngắt dòng đó. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text.t4dv-tpl-nhan {
  padding: 0 16px;
}
/* [số] bước giữa ba dòng mục là 30 với hộp chữ cao 22 ⇒ lề 8 (không phải 13). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-muc + .t4dv-tpl-muc p { margin-top: 8px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan + .t4dv-tpl-muc p { margin-top: 41px; }
/* [số] "Learn more" cách mục cuối 47,5 — khoảng CỐ ĐỊNH, không dính đáy thẻ. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-xem { margin-top: 42px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh { width: 339px; max-width: 339px; }


/* --- 10.10 Vá vòng đo 5 của #9 ------------------------------------------ */
/* [số] Mục FAQ: chữ neo ĐỈNH cách mép trên 21 (không căn giữa), chừa 43 bên
   phải cho biểu tượng — Figma cho hộp chữ tới 448 trong mục rộng 516. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
  align-items: flex-start; min-height: 92px; padding: 21px 43px 21px 25px;
}

@media (max-width: 849px) {
  /* ⛔ KHỔ 402 XẾP CÂU HỎI THEO THỨ TỰ KHÁC và BỎ mục thứ tư.
     Figma 1385:16097 xếp: "Agency chạy…" → "Làm sao để biết…" → "Nếu chạy mà…"
     (ba mục), trong khi khổ 1900 xếp theo CỘT: cột trái [Agency, Làm sao],
     cột phải [Nếu chạy, What reporting]. Thứ tự DOM phải giữ theo khổ 1900 (để
     hai cột wrap đúng) rồi ĐẢO bằng 'order' ở khổ 402 — đảo DOM là hỏng desktop. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac {
    display: flex; flex-direction: column;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item:nth-child(2) { order: 3; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item:nth-child(3) { order: 2; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item:nth-child(4) { display: none; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
    min-height: 80px; padding: 16px 24px 16px 25px;
  }
  /* [số] Thẻ Dịch vụ khác khổ 402 GIỮ tiêu đề 18/28 như khổ 1900; chỉ đoạn mô
     tả hạ xuống 14/22. Ảnh là ô VUÔNG 232×232. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 { font-size: 18px; line-height: 28px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh { width: 232px; max-width: 232px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh img { height: 232px; object-fit: cover; }
}


/* [figma] trang9 · section hero — 2 lớp rộng 342px: '939:12448' · '939:12450'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* --- 10.11 Vá vòng đo 6 của #9 ------------------------------------------ */
/* [số] Hai nút hero: bo 8 (không phải 5), CẢ HAI rộng 342. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut { border-radius: 8px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut--dac { width: 342px; }
/* [số] Khối chữ hero neo y=114 trong section 480 (trên 114 / dưới ~126). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content { padding-bottom: 25px; }
/* [số] 'Dịch vụ khác': H2 bó trong 402 (cột 533), hai thẻ CUỐI có giãn dòng 30
   và giãn chữ −0,16 (hai thẻ đầu là 26/0) — Figma khai riêng từng thẻ. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-td h2 { max-width: 402px; }
/* ⛔ BỌC trong 'min-width: 850px': ':nth-child()' nâng độ đặc hiệu cao hơn
   quy tắc khổ 402 ở trên, mà @media không cộng độ đặc hiệu — để trần là
   30/-0,16 của khổ 1900 tràn xuống khổ 402 (đã dính, 'lh' 22 → 30). */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o:nth-child(3) .t4dv-dvk-mo p,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o:nth-child(4) .t4dv-dvk-mo p {
    line-height: 30px; letter-spacing: -.16px;
  }
}
/* [số] "Xem chi tiết" CĂN GIỮA trong thẻ (Figma x=536,5 trong thẻ 412,5+335). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goi-xem { text-align: center; }
/* [số] Tiêu đề FAQ neo y=96 trong section 189 (đệm trên 96, dưới 40). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-td { padding-top: 96px; padding-bottom: 40px; }
/* [số] Ảnh casestudy bo góc 4. */
/* ⚠ CHỈ trang #9: khối Casestudy dùng chung với #8 nhưng Figma #8 cho
   ảnh BO 0, #9 bo 4. Viết ở phạm vi nhóm là #8 tụt từ 0 ❌ lên 2 ❌ (đã dính). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-case-anh img { border-radius: 4px; }

/* [figma] trang9 · section hero_mb — 2 lớp rộng 283px: '1388:4597' · '1388:4599'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
@media (max-width: 849px) {
  /* [số] Hero khổ 402: hộp nút 283×44 (chữ 207), khe hai nút 16; khối chữ neo
     y=85; H1 kết thúc 188 → đoạn mô tả ở 243 (khe 55); nút đầu ở 467. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-nut--dac {
    width: 283px; height: 44px; font-size: 14px; padding: 0;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .t4dv-hero-mo p { margin-top: 55px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut { margin-top: 84px; gap: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content { padding-bottom: 0; }
  /* [số] CTA khổ 402: nút rộng 272, khối chữ neo y=120. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-cta a.button.t4dv-nut-xanh { padding: 12px 47px; }
}

/* --- 10.12 Vá vòng đo 7 của #9 ------------------------------------------ */
/* [số] Lưới FAQ khổ 1900 rộng 1060 (420→1480), KHÔNG phải 1080 của Flatsome.
   Mục nằm ở x=420 và x=964; chừa 10px mỗi bên là khớp, không cần đổi span. */
/* ⛔ PHẢI bọc trong 'min-width: 850px': ':nth-child()' nâng độ đặc hiệu lên
   cao hơn quy tắc khổ 402 ở dưới, mà @media KHÔNG cộng độ đặc hiệu — để trần
   là chiều cao 98/92 của khổ 1900 tràn xuống khổ 402 (đã dính vòng đo 7). */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac { padding: 0 10px; }
  /* [số] HÀNG TRÊN cao 98, HÀNG DƯỚI cao 92 — Figma cho mục một dòng CAO HƠN
     mục hai dòng (chừa đáy 52 so với 21). Thứ tự DOM theo HÀNG: 1,2 = hàng trên. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item:nth-child(-n+2) .accordion-title { min-height: 98px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item:nth-child(n+3) .accordion-title { min-height: 92px; }
}
/* [số] Ảnh thẻ template rộng 339 (lưới 1080 = 3×339 + 2×31,67). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh,
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh img { width: 339px; max-width: 339px; }

@media (max-width: 849px) {
  /* [số] Khổ 402: mục FAQ KHÔNG có chiều cao tối thiểu — cao 61/80/99 sinh ra
     từ số dòng chữ cộng đệm 21 trên + 21 dưới. Khe giữa hai mục là 16 (do
     'gap' của flex), nên margin-bottom PHẢI về 0 — để nguyên là khe thành 32. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-item { margin-bottom: 0; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-ac .accordion-title {
    min-height: 0; padding: 21px 25px;
  }
  /* [số] Khổ 402: khe giữa H2 "Frequently Asked Questions" và nhãn nhóm đầu
     tiên là 32 (Figma 166 → 198), gộp từ đáy section trên và đỉnh section dưới. */
  /* ⛔ PHẢI kèm '#faq' / '#faq-nhom': Flatsome tự chèn '<style>' dạng
     '#faq{padding-top:…;padding-bottom:…}' — độ đặc hiệu (1,1,0) ăn đứt
     (0,2,0) của lớp, nên bỏ id ra là quy tắc này im lặng không có tác dụng. */
  body.t4-trang-thiet-ke-toi-uu-website #faq.t4dv-faq-td { padding-top: 60px; padding-bottom: 32px; }
  body.t4-trang-thiet-ke-toi-uu-website #faq-nhom.t4dv-faq { padding-top: 0; }
}

/* --- 10.13 Vá vòng đo 8 của #9 ------------------------------------------ */
/* ⛔ '[ux_image]' của Flatsome ghi 'style="width:100%"' THẲNG vào thẻ — kiểu
   nội tuyến ăn đứt mọi quy tắc trong tệp, nên 'calc(100% + 2px)' viết từ vòng
   trước KHÔNG hề có tác dụng và ảnh vẫn hụt 2,34 so với thẻ. Đây là một trong
   số ít chỗ '!important' là cách duy nhất. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh { width: calc(100% + 2px) !important; }
/* ⛔ ĐỘ ĐẶC HIỆU: '.t4 .section:where(…) .section-content .text { margin: 0 }'
   là (0,4,0) — cao hơn (0,2,0) của lớp trần, nên '.t4dv-tpl-xem{margin-top}'
   viết kiểu cũ bị nuốt IM LẶNG. Phải nâng bằng chuỗi con thật, đừng thêm
   '!important' cho một khoảng cách bố cục. */
/* [số] "Learn more" cách mục cuối 64 tính từ TÂM hộp (Figma 795 → 859). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text.t4dv-tpl-xem {
  margin-top: 43.62px;
}
/* [số] Thẻ template rộng 339 kể cả viền ⇒ ô lưới 338,67 + khe 32 = 370,67. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot { margin-top: 21.88px; }
/* [số] Cột phải "Figma ipsum…" thấp hơn tiêu đề trái 6,16 tính từ tâm. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col:nth-child(2) { padding-top: 6.16px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi { margin-top: 29.98px; }
/* [số] "Xem thêm" cách "Learn more" hàng cuối 99,5 tính từ tâm. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi + .row { margin-top: 4.47px; }
/* [số] "Xem tất cả" neo phải: Figma 1378 (không phải 1388,55) và thấp hơn
   "Free template" 5 chứ không cao hơn 2. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca { right: 20.55px; top: 10px; }

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col:nth-child(2) { padding-top: 0; }
  /* [số] Khổ 402 xếp dọc: "Figma ipsum…" cách tiêu đề 85 (Figma), lưới thẻ bắt
     đầu sau đó 450. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col:nth-child(2) { margin-top: 29.69px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi { margin-top: 19.69px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text.t4dv-tpl-xem {
    margin-top: 42.81px; padding-left: 72.52px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi + .row { margin-top: -2.5px; }
}

/* --- 10.14 Vá vòng đo 9 của #9 ------------------------------------------ */
/* [số] "Xem chi tiết" DÍNH ĐÁY thẻ — Figma cho cả bốn nút cùng một mốc dọc
   (khoảng giữa hai nút bất kỳ = 0), nên khoảng từ đoạn mô tả tới nút khác nhau
   theo từng thẻ. Neo theo đáy là cách duy nhất giữ đúng cả bốn.
   ⛔ Chuỗi chọn phải đủ dài (0,5,0): '.t4 .section:where(…) .section-content
   .text{margin:0}' là (0,4,0) và sẽ nuốt 'margin-top:auto' viết kiểu ngắn. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o > .col-inner > .text.t4dv-goi-xem {
  margin-top: auto;
}

@media (max-width: 849px) {
  /* ⛔ '[ux_image]' ghi 'style="width:100%"' nội tuyến ⇒ 'width:232px' của lớp
     bị nuốt, ảnh chỉ cao 210,17 thay vì 232. Cần '!important' như 10.13. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh { width: 232px !important; }
}

/* --- 10.15 Vá vòng đo 10 của #9 ----------------------------------------- */
/* [số] MỖI THẺ GÓI CÓ MỘT BIỂU TƯỢNG "package" 30×31 bên trái tiêu đề — lớp
   KHÔNG phải chữ nên chặng 1 (T1) không hề báo thiếu; chỉ lộ ra khi đọc toạ độ
   tuyệt đối (LUẬT 5, III.14.4): Figma đặt tiêu đề ở x=491 tức +81 so với mép
   thẻ 410, trong khi phần thân chỉ +25. Đúng bài học đã trả giá ở trang #8. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { position: relative; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-ic {
  position: absolute; left: 30.45px; top: 36.64px;
  width: 30px !important; max-width: 30px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .text.t4dv-goics-ten {
  padding-left: 81px;
}

/* --- 10.16 Vá vòng đo 11 của #9 ----------------------------------------- */
/* [số] Hai nút hero cách đoạn mô tả 94 (Figma 1900) / 218 (Figma 402). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut { margin-top: 96px; }
/* [số] Tuyên ngôn: hai khối chữ cách nhau 160,5 tính từ tâm — bớt 3. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-mo p { margin-top: 29px; }
/* [số] Cột phải "Figma ipsum…" của Dịch vụ khác thấp hơn tiêu đề 6,32 (tâm). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) { padding-top: 12.48px; }
/* [số] Thẻ Dịch vụ khác cao 665,39 — nút "Xem chi tiết" neo đáy (10.14) nên
   chiều cao thẻ mới là thứ quyết định khoảng từ đoạn mô tả xuống nút. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o > .col-inner { height: 662.7px; }
/* [số] Chip "Gói chăm sóc Website" cách H2 99,5 (hộp) — thêm 30,37. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren { margin-top: 46.37px; }
/* [số] Lưới ba thẻ gói bắt đầu cách đoạn "Với 4T…" 268 (Figma 345,5 → 613,5). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 64px; }
/* [số] Tiêu đề thẻ gói ở x=491 = mép thẻ +81; thẻ đã có đệm 25 nên chỉ thêm 56.
   (Vòng trước đặt 81 là cộng dồn thành 106 — sai đúng bằng phần đệm.) */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .text.t4dv-goics-ten {
  padding-left: 56px;
}
/* [số] Section FAQ khổ 1900 chừa trên 96,01 (khổ 402 là 60 — xem 10.12). */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website #faq.t4dv-faq-td { padding-top: 96.01px; }
}

@media (max-width: 849px) {
  /* [số] Khổ 402: hai nút hero bo 5 (khổ 1900 bo 8) và cách mô tả 218. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut a { border-radius: 5px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero-nut { margin-top: 156px; }
  /* (giá trị thật khai lại ở khối cuối tệp — xem 10.33) */
  /* ⛔ '.img img' của Flatsome đặt 'height:auto' — không '!important' thì chiều
     cao 232 của ta thua và ảnh chỉ cao 210,17 (đúng tỉ lệ gốc 300×272). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-anh img { height: 232px !important; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren { margin-top: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 32px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-mo p { margin-top: 29px; }
}

/* --- 10.17 Vá vòng đo 12 của #9 ----------------------------------------- */
/* ⛔ '.t4dv-hero-nut{margin-top}' viết kiểu ngắn (0,2,0) bị '.t4 .section:where(…)
   .section-content .text{margin:0}' (0,4,0) nuốt IM LẶNG — vòng 11 đặt 96px mà
   số đo không nhúc nhích. Phải nâng chuỗi chọn, KHÔNG dùng '!important'. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content .text.t4dv-hero-nut {
  margin-top: 12px;
}
/* [số] Khối chữ + gạch trong thẻ gói: mô tả cách tiêu đề 91 tính từ tâm. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .is-divider { margin: 12.5px 0 3.75px; }

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content .text.t4dv-hero-nut {
    margin-top: 72px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) { padding-top: 0; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 32px; }
}

/* --- 10.18 Chiều cao section (T3a) của #9 -------------------------------- */
/* ⛔ Phải kèm id: Flatsome tự chèn '#faq{padding-…}' (1,1,0) — xem 10.12. */
@media (min-width: 850px) {
  /* [số] Section FAQ khổ 1900 cao 189,01: chừa trên 96,01 + H2 73 + chừa dưới 20. */
  body.t4-trang-thiet-ke-toi-uu-website #faq.t4dv-faq-td { padding-bottom: 39.71px; }
  /* [số] Section nhóm FAQ cao 1021 = 24 trên + 3 nhóm 263 + 2 khe 48 + 112 dưới. */
  body.t4-trang-thiet-ke-toi-uu-website #faq-nhom.t4dv-faq { padding-bottom: 112px; }
}

/* --- 10.19 Section Casestudy của #9 -------------------------------------- */
/* ⚠ Khối '.t4dv-case*' DÙNG CHUNG với trang #8 (body.t4-nhom-dv3) — mọi thứ ở
   đây cố ý bó vào riêng slug #9 để không động vào #8 (đang 0 ❌). */
/* [số] Figma #9: dải tab ở y=315, tiêu đề khối ở y=193 ⇒ cách 134 (site 92). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case > .nav { margin-top: 42px; }
/* [số] Nội dung panel bắt đầu y=425, nhãn tab y=327 ⇒ cách 176,5 (site 120,5). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case > .tab-panels { padding-top: 56px; }
/* [số] Section cao 1035: nội dung kết thúc ở 853 ⇒ chừa đáy 182. */
body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat { padding-bottom: 192.4px; }
body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat { padding-bottom: 234.4px; }
@media (max-width: 849px) {
  /* [số] Khổ 402 section cao 1196 — dải tab + panel đã cộng đủ nên chỉ cần
     chừa đáy ít hơn khổ 1900. */
  /* ⛔ Section có 'padding__sm' ⇒ Flatsome chèn '<style>' riêng cho khổ nhỏ,
     cũng (1,1,0) và nằm SAU tệp này trong tài liệu nên thắng khi bằng điểm.
     Thêm '.section' để lên (1,2,0). Khổ 1900 không cần vì Flatsome chỉ ghi
     quy tắc khổ nhỏ. */
  body.t4-trang-thiet-ke-toi-uu-website .section#du-an-noi-bat { padding-bottom: 153.1px; }
}

/* --- 10.20 Chiều cao section còn lại của #9 ------------------------------ */
/* ⛔ Mọi quy tắc đệm section khổ 402 PHẢI viết '.section#id' (1,2,0): section
   khai 'padding__sm' nên Flatsome chèn '<style>' khổ nhỏ cũng (1,1,0) và nằm
   SAU tệp này trong tài liệu — bằng điểm thì bản sau thắng (xem 10.19). */
/* [số] Khổ 1900: section Free template cao 1749 (site 1693,1 ⇒ thêm 55,9). */
body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 155.9px; }

@media (max-width: 849px) {
  /* [số] Chiều cao Figma khổ 402: tuyên ngôn 857,65 · dịch vụ khác 1026 ·
     gói 1123,73 · free template 1699 · CTA 707 · nhóm FAQ 1271. */
  body.t4-trang-thiet-ke-toi-uu-website .section#tuyen-ngon { padding-bottom: 35px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#dich-vu-khac { padding-bottom: 87.5px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#goi-cham-soc { padding-bottom: 92.5px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 39px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#cta-website { padding-bottom: 77.3px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#faq-nhom { padding-bottom: 58px; }
}

/* --- 10.21 Khối tiêu đề dùng chung của #9 -------------------------------- */
/* ⛔ CẠM BẪY LỚN: '.row-collapse > .col { padding: 0 !important }' của Flatsome
   ăn đứt MỌI 'padding' ta viết cho '.col'. Vì vậy hai vòng đo trước đặt
   'padding-top' cho cột phải mà số đo KHÔNG hề nhúc nhích — phải chuyển sang
   '.col-inner'. Cùng loại bẫy đã ghi cho đệm/viền thẻ. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col:nth-child(2) > .col-inner {
  padding-top: 6.16px;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) > .col-inner {
  padding-top: 6.32px;
}
/* [số] Chip và "Xem tất cả" nằm trong khung 1060 (420→1480) chứ không phải
   1080 của Flatsome; H2 bên dưới thì bắt đầu đúng ở 410. Đo từ Figma:
   hộp chip x=420 · tâm mực "Xem tất cả" x=1413,65 · mực H2 x=411,87. */
/* ⚠ CHỈ hai section này và CHỈ khổ 1900: các section khác (tuyên ngôn, dịch
   vụ khác, gói) đặt chip THẲNG HÀNG với H2 (dx ≈ 0), thêm 10 vào là sai cả bốn.
   Khổ 402 thì Figma cho chip ở x=25 = mép hàng, cũng không lệch. */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website #free-template .t4dv-nhan,
  body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat .t4dv-nhan { padding-left: 10px; }
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca { right: 12.11px; }
/* [số] H2 cách "Xem tất cả" 80 theo mực (Figma 115,29 → 195,12). */
body.t4-trang-thiet-ke-toi-uu-website #free-template .t4dv-dau-2cot,
body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat .t4dv-dau-2cot { margin-top: 28.88px; }
/* [số] bù lại 7 vừa thêm để chiều cao section giữ nguyên. */
body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 142.7px; }
body.t4-trang-thiet-ke-toi-uu-website .section#du-an-noi-bat { padding-bottom: 179.2px; }

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dau-2cot > .col:nth-child(2) > .col-inner,
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) > .col-inner {
    padding-top: 0;
  }
  body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 61.5px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#du-an-noi-bat { padding-bottom: 116.1px; }
}

/* --- 10.22 Dải tab Casestudy + "Xem tất cả" khổ 402 ---------------------- */
/* ⛔ 'margin-top' đặt cho '.nav' KHÔNG có tác dụng (Flatsome khoá lề thanh tab).
   Đẩy bằng 'padding-top' của chính khối tab thì ăn. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case { padding-top: 42px; }

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case { padding-top: 30px; }
  /* [số] Khổ 402: tâm mực "Xem tất cả" ở x=310,65 (Figma), cách mép chip 285,64. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca { right: -11.57px; }
}

/* --- 10.23 Thẻ gói + khổ 402 đảo thứ tự ---------------------------------- */
/* [số] Nút "Nhận tư vấn" DÍNH ĐÁY thẻ, cách mép dưới 37 ở CẢ HAI khổ
   (Figma 1900: thẻ 573..878, nút 797..841 · Figma 402: thẻ 734,73..1063,73,
   nút 982,73..1026,73). Nhờ vậy ba thẻ mô tả dài ngắn khác nhau vẫn thẳng nút. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 37px; }
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .t4dv-nut-goi { margin-top: auto; }

@media (max-width: 849px) {
  /* ⛔ KHỔ 402 ĐẢO THỨ TỰ: Figma đặt HÌNH MINH HOẠ (Asset 24 1, y=137) TRƯỚC
     H2 (y=402,73), ngược với khổ 1900 (chữ trái · hình phải). Đảo bằng 'order',
     KHÔNG đảo DOM — đảo DOM là hỏng khổ 1900. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren { flex-direction: column; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh { order: -1; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 37px; }
  /* [số] Hàng tiêu đề thẻ cao 40 và chữ CĂN GIỮA theo chiều dọc — nhờ vậy tiêu
     đề một dòng nằm ở +7,5 so với tiêu đề hai dòng (Figma 775,23 vs 767,73). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .text.t4dv-goics-ten {
    min-height: 40px; display: flex; align-items: center;
  }
}

/* --- 10.24 Vá vòng đo 15 của #9 ------------------------------------------ */
/* [số] Nút "Nhận tư vấn": mốc đo là HỘP CHỮ (91×24) chứ không phải hộp nút
   (291×44), nên chừa đáy thực tế là 41,75 chứ không phải 37 của hộp nút. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 41.75px; }

@media (max-width: 849px) {
  /* [số] "Xem tất cả" khổ 402: tâm mực phải nằm ở x=310,65. Giá trị 1,4 là
     điểm giữa của hai phép đo (chip→XTC cần −12,11 · XTC→H2 cần −13,99) — lệch
     0,86 và 1,02, đều trong dung sai 2px của I.2. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-xem-tat-ca { right: 1.4px; }
  /* [số] Hình minh hoạ kết thúc ở y=370,73, H2 bắt đầu 402,73 ⇒ khe 32. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh { margin-bottom: 32px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 40.70px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .is-divider { margin-top: 15.43px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 58.75px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#goi-cham-soc { padding-bottom: 51.8px; }
  /* [số] Lưới thẻ template khổ 402 bắt đầu sớm hơn: cần lùi 29,69 so với vòng
     trước ⇒ lề âm. Đây là lề bố cục thật, không phải mẹo. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi { margin-top: 11px; }
  /* [số] "Learn more" thụt 72,52 so với dòng mục (mục đã thụt 27) ⇒ 99,52. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text.t4dv-tpl-xem {
    padding-left: 132.52px;
  }
}

/* --- 10.25 Ba dòng mục trong thẻ template có BIỂU TƯỢNG TÍCH ------------- */
/* [số] Figma: khung 'Item' ở x=438 (thẻ 410 ⇒ đệm 28), biểu tượng
   'cl-icon-success' 18×18 ở x=441, CHỮ ở x=470 ⇒ chữ thụt 60 so với mép thẻ,
   không phải 27 như phần còn lại của thân. Lớp biểu tượng KHÔNG phải chữ nên
   T1 không báo thiếu — cùng loại bỏ sót đã gặp ở thẻ gói (10.15). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o > .col-inner > .text.t4dv-tpl-muc {
  padding-left: 60px;
}

/* --- 10.26 Vá vòng đo 17 của #9 ------------------------------------------ */
/* [số] Hero CĂN GIỮA theo chiều dọc trong 480 (Figma khối chữ 114..366, cao
   252). Muốn mép trên xuống 6,05 thì phải làm khối chữ THẤP đi 12,1 — thêm
   đệm trên là vô ích vì nội dung vẫn tự căn giữa lại. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content .text.t4dv-hero-nut {
  margin-bottom: -12.1px;
}

@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-hero .section-content .text.t4dv-hero-nut {
    margin-bottom: 6.22px;
  }
  /* [số] Tuyên ngôn khổ 402: hình kết thúc 384,65 → H2 394,65 ⇒ khe 10. */
  body.t4-trang-thiet-ke-toi-uu-website #tuyen-ngon .t4dv-tn-chu { margin-top: -21.93px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#tuyen-ngon { padding-bottom: 56.93px; }
  /* [số] CTA khổ 402: H2 neo y=120; nút Link 272×46, chữ căn giữa (x=111,5). */
  body.t4-trang-thiet-ke-toi-uu-website .section#cta-website { padding-top: 80px; padding-bottom: 81px; }
  body.t4-trang-thiet-ke-toi-uu-website #cta-website .button {
    height: 46px; line-height: 46px; padding: 0; text-align: center;
  }
  /* [số] Thẻ Dịch vụ khác khổ 402 cao 564,4 — thấp hơn thì chữ tràn và nút
     hết dính đáy, ba nút lệch nhau 17,85. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o > .col-inner { height: 556.4px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) { margin-top: 24.69px; }
  body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat .t4dv-dau-2cot > .col:nth-child(2) { margin-top: 32.18px; }
  /* [số] Gạch trong thẻ gói khổ 402: tâm tiêu đề → tâm mô tả là 100,5. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner > .is-divider { margin-top: 3.95px; }
  /* [số] Figma đặt RIÊNG mục "Chạy ngân sách nhỏ…" ở x=42 thay vì 50 như mọi
     mục khác — khai tay trong thiết kế, không theo luật nào. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-faq-nhom:nth-of-type(2) .accordion-item:nth-child(2) .accordion-title {
    padding-left: 17px;
  }
}

/* --- 10.27 Vá vòng đo 18 của #9 ------------------------------------------ */
/* [số] Lưới Dịch vụ khác cách khối tiêu đề 485 (Figma). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 68.69px; }
/* [số] Tiêu đề thẻ Dịch vụ khác: hộp chữ Figma rộng 287 (thẻ 335, đệm 24). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 { max-width: 287px; margin-left: auto; margin-right: auto; }

@media (max-width: 849px) {
  /* ⛔ 'padding: 0' làm nút inline-block co lại còn 182 — phải khai bề rộng. */
  body.t4-trang-thiet-ke-toi-uu-website #cta-website .button { width: 272px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 67.32px; }
  /* [số] Khổ 402: trích dẫn y=728 cao 110 → "Adam Jones" y=854 ⇒ cách 126.
     ⚠ Bó riêng slug #9: khối Casestudy dùng chung với #8. */
  body.t4-trang-thiet-ke-toi-uu-website #du-an-noi-bat .t4dv-case-ten { margin-top: -12px; }
}

@media (max-width: 849px) {
  /* ⛔ Khai lại sau 10.27: quy tắc khổ 1900 viết ở phạm vi trần nằm SAU khối
     'max-width' cũ nên đã tràn xuống khổ 402 (lệch 52,69 — đã dính). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 16px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#du-an-noi-bat { padding-bottom: 125.6px; }
}

/* --- 10.28 Cột phải khối tiêu đề Dịch vụ khác ---------------------------- */
/* [số] Figma đặt "Figma ipsum…" của section này ở x=961 (mực 961,64), trong
   khi lưới 4/12 của Flatsome cho 943 ⇒ lệch 15,6 tính theo mực.
   Dời bằng 'position/left' chứ KHÔNG bằng 'padding': thêm đệm là hộp chữ hẹp
   lại và điểm ngắt dòng đổi theo, kéo lệch luôn các mốc dọc đang đúng. */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(1) {
    position: relative; left: 16.96px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk .t4dv-dau-2cot > .col:nth-child(2) {
    position: relative; left: 18.01px;
  }
  /* [số] Dải thẻ cũng lệch: Figma thẻ đầu ở x=412,5 chứ không phải 410. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { position: relative; left: 2.5px; }
}

@media (min-width: 850px) {
  /* [số] Cả khối tiêu đề của Dịch vụ khác (chip + hai cột + dải thẻ) thụt vào
     ~17 so với lưới 1080 — Figma đặt chip ở x≈427,2 chứ không phải 410. */
  body.t4-trang-thiet-ke-toi-uu-website #dich-vu-khac .t4dv-nhan { padding-left: 17.35px; }
}

/* [figma] trang9 · section template_mb — section DUY NHẤT chứa đủ
   bộ bề rộng của cụm này: 339px→'1385:15886' · 352px→'1385:15872' (+7)
   (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) {
  /* [số] Khổ 402: Figma đặt thẻ template ở x=31,5 chứ không phải 25 như các
     dải khác — lệch 6,5 chỉ lộ ra ở ảnh nhiệt, bảng dày không bắt được vì mọi
     mốc trong thẻ đo tương đối với nhau. */
  /* [số] Khổ 402: THẺ ở x=25 rộng 352; ẢNH thụt 6,5 mỗi bên (339) và 20 phía
     trên. Vòng trước đẩy cả THẺ sang 31,5 là nhầm — chỉ ảnh mới thụt. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-o { flex: 0 0 352px; max-width: 352px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh {
    width: 339px !important; max-width: 339px; margin-left: 6.5px; margin-right: 6.5px;
  }
}

/* [số] Ảnh thẻ template: node Figma 339×287 (tỉ lệ 1,1812) trong khi tệp xuất
   ra có tỉ lệ 1,1895 ⇒ để chiều cao tự động thì ảnh cao 285,02 và mọi chi tiết
   bên trong lệch ~0,7%. Ép đúng 287 để khung hình trùng node. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh img { height: 287px !important; object-fit: fill; }

/* --- 10.29 (ĐÃ HUỶ) Tab Casestudy ---------------------------------------
   ⛔ ĐỌC NHẦM THIẾT KẾ: spec ghi 'Tab' đang chọn có nét '#cf9156' nên tôi vẽ
   VIỀN BAO QUANH — nhưng ảnh kết xuất của chính Figma cho thấy đó là GẠCH DƯỚI
   (nét chỉ bật cạnh dưới). Flatsome 'nav-line' vốn đã đúng. Đã gỡ quy tắc.
   → Bài học: 'strokes' trong spec KHÔNG nói nét bật ở cạnh nào; phải soi ảnh
   kết xuất trước khi dựng lại đường viền. */

/* --- 10.30 Hình minh hoạ Gói chăm sóc: SAI KÍCH THƯỚC 358 → 500 ---------- */
/* ⛔ Vòng trước dựng hình 358×237,7 tại x=1132, trong khi Figma cho
   'Asset 24 1' **500×332 tại x=990**. Lớp này KHÔNG phải chữ nên T1 im lặng,
   và bảng dày chỉ soi 56/1145 lớp phi-chữ nên cũng không bắt — chỉ ảnh nhiệt
   mới lộ. Cùng loại bỏ sót với biểu tượng thẻ gói (10.15) và dấu tích thẻ
   template (10.25). */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh {
    flex: 0 0 500px; max-width: 500px; margin-left: auto;
  }
  /* ⛔ Hàng này KHÔNG căn giữa dọc: Figma neo cột chữ ở +30,5 so với mép trên
     khối (207,5 trong khối 177..509). Để 'v_align=middle' thì hình cao lên là
     chữ trôi xuống theo — đúng cái vừa xảy ra khi sửa hình 358 → 500. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-tren { align-items: flex-start; }
  /* [số] Cột chữ neo cao hơn 54,93 so với vị trí Flatsome xếp ra. Dời bằng
     'position/top' chứ KHÔNG bằng lề: dời bằng lề là kéo theo cả lưới thẻ bên
     dưới, mà khoảng "Với 4T… → Gói cơ bản" đang đúng nhờ lưới đứng yên. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-chu > .col-inner {
    position: relative; top: -44.68px;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-luoi { margin-top: 34.40px; }
  /* [số] Section cao 978 — bù phần chênh sau khi sửa hình 500×332. */
  body.t4-trang-thiet-ke-toi-uu-website .section#goi-cham-soc { padding-bottom: 99.14px; }
}

@media (min-width: 850px) {
  /* [số] Ảnh kết xuất từ node 'Asset 24 1' có phần chừa trên/dưới khác với lúc
     Figma vẽ nó trong khung section — đo bằng đối chiếu chéo ảnh nhiệt: lệch
     đúng 15px theo trục dọc, 0 theo trục ngang. Dời bằng 'top' để không đụng
     vào chiều cao section (đang ĐẠT). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-anh { position: relative; top: -30.49px; }
}

@media (max-width: 849px) {
  /* [số] Cùng lý do 10.30: ảnh kết xuất từ node 'Asset 23 1' lệch (−4, +12) so
     với lúc Figma vẽ trong khung — đo bằng đối chiếu chéo ảnh nhiệt. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tn-anh { position: relative; top: -32.13px; }
}

/* --- 10.31 Thẻ template: ẢNH THỤT 20 KHỎI MÉP TRÊN THẺ ------------------- */
/* ⛔ Figma cho thẻ 'Background+Border' ở y=315 nhưng ẢNH ở y=335 — tức thẻ có
   DẢI TRẮNG 20px phía trên ảnh (nhìn rõ trong ảnh kết xuất: góc bo trắng nằm
   trên ảnh). Bản dựng đặt ảnh sát mép nên toàn bộ ảnh nằm cao hơn 30,88 —
   ảnh nhiệt báo khối đỏ suốt cả sáu thẻ, còn bảng dày IM LẶNG vì mọi mốc chữ
   trong thẻ đo tương đối với nhau và khối nhãn tự nuốt phần chênh. */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi { margin-top: 40.86px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh { margin-top: 20px; }
  /* bù đúng 30,88 để mọi mốc chữ trong thẻ giữ nguyên vị trí tuyệt đối */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan p { margin-top: 19.16px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 140.62px; }
}

@media (max-width: 849px) {
  /* [số] Khổ 402 cũng vậy: thẻ ở y=348, ảnh ở y=368 ⇒ dải trắng 20 phía trên. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-anh { margin-top: 20px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-nhan p { margin-top: 12px; }
}

/* [figma] trang9 · section template/template_mb — 2 lớp rộng 197px: '568:23953' · '1385:16071'
   (nhiều lớp cùng khổ nên KHÔNG ghim một node; mở spec trang 9 để chọn) */
/* --- 10.32 Kích thước hai nút bị lệch (chỉ ảnh nhiệt bắt được) ------------ */
/* [số] "Xem thêm" cuối khối template: Figma cho khung 'Link' **197×52**, bản
   dựng để nút tự co theo chữ nên chỉ 130,53×54. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tpl-luoi + .row a.button {
  width: 197px; height: 52px; line-height: 52px; padding: 0;
}
/* [số] "Nhận tư vấn" trong thẻ gói: Figma 291×**44** ở y=797 (đáy thẻ −37). */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o a.button {
  height: 44px; line-height: 44px; padding: 0;
}
body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-bottom: 37px; }

/* [số] Sau khi nút về đúng hộp Figma (đáy thẻ −37), khối tiêu đề+gạch+mô tả
   hoá ra cao hơn 6,75 so với Figma (tiêu đề phải ở 613,5 chứ không phải
   606,75). Đẩy bằng đệm TRÊN của thẻ — nút neo đáy nên không xê dịch. */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner { padding-top: 38.75px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#free-template { padding-bottom: 145.52px; }
}
@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-goics-o > .col-inner {
    padding-top: 32.31px; padding-bottom: 37px;
  }
}

/* ⛔ ĐÃ THỬ VÀ BỎ: phóng 'transform: scale(1,0473)' cho hình Gói.
   Đo hộp bao phần tối cho thấy **bề rộng đã khớp tuyệt đối** (572px @2x, cùng
   toạ độ x) mà **chiều cao lệch 592 vs 620** — tức khung Figma vẽ nhóm hình
   theo tỉ lệ KHÁC với lúc kết xuất chính node đó. Không có phép biến đổi ĐỀU
   nào sửa được: phóng cho đúng chiều cao thì hỏng bề rộng (572 → 598).
   → Giữ ảnh và hộp đúng node (500×332 tại x=990), ghi MIỄN TRỪ cho màn 'goi'
   kèm số đo, và nêu ở qa/phan-hoi-figma.md §33. */

/* --- 10.33 Dải thẻ Dịch vụ khác lệch dọc ---------------------------------- */
/* [số] Figma: thẻ ở y=362 (khổ 1900) / y=383 (khổ 402), ảnh 'Rectangle 3' ở
   386 / 407. Bản dựng cao hơn 3,69 / 10 — chỉ ảnh nhiệt bắt được, vì mọi mốc
   chữ trong thẻ đo tương đối với nhau. Đẩy cả dải xuống rồi kéo tiêu đề thẻ
   lên đúng phần chênh để mốc "Figma ipsum → tiêu đề thẻ" giữ nguyên. */
@media (min-width: 850px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 72.38px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 { margin-top: 12.31px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#dich-vu-khac { padding-bottom: 102.31px; }
}
@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-dai { margin-top: 26px; }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-td h3 { margin-top: 6px; }
  body.t4-trang-thiet-ke-toi-uu-website .section#dich-vu-khac { padding-bottom: 85.5px; }
}

/* --- 10.34 Nút Flatsome 'is-shade' có ÁNH CHUYỂN, Figma thì PHẲNG --------- */
/* ⛔ Không phải 'background-image' mà là '::after { box-shadow: … inset }' của
   Flatsome — soi 'backgroundImage' thấy 'none' nên rất dễ kết luận nhầm là
   "nút đã phẳng". Chỉ ảnh nhiệt bắt được: khối đỏ phủ trọn thân nút. */
body.t4-trang-thiet-ke-toi-uu-website .button.is-shade::after { box-shadow: none; }

/* --- 10.35 Lớp phủ hero khổ 402 của #9 ----------------------------------- */
/* [số] Đầu dò góc trên-trái: Figma '#061000' · site '#050c00' ⇒ ΔE 2,51, vượt
   ngưỡng 2,50 đúng 0,01. Ảnh nền và bốn chặng gradient giống #8 nhưng #9 dùng
   ẢNH NỀN KHÁC nên độ tối ở mép trên lệch chút. Nâng chặng đầu 0,77 % từ
   '#808080' (nhân 0,502) lên '#ababab' (nhân 0,669) — đúng tỉ lệ 16/12 mà đầu
   dò cần. ⚠ BÓ RIÊNG slug #9: khối này dùng chung với #8 (đang ĐẠT). */
@media (max-width: 849px) {
  body.t4-trang-thiet-ke-toi-uu-website #hero .section-bg-overlay {
    background-image: linear-gradient(to bottom,
      #ababab 0.77%, #c6c6c6 27.68%, #ffffff 51.66%, #b3b3b3 100%);
  }
}

@media (max-width: 849px) {
  /* [số] ⚠ BỐN THẺ KHÔNG CÙNG KIỂU LẤP ẢNH: 'fills[].scale' của Figma cho
     thẻ 1 là **STRETCH** (ép vừa ô = 'object-fit: fill') còn thẻ 2·3·4 là
     **FILL** (cắt vừa ô = 'object-fit: cover'). Đặt chung một kiểu cho cả bốn
     là sai ba thẻ — nhìn qua tưởng "ảnh khác hẳn" chứ không phải lệch khung. */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o:nth-child(1) .t4dv-dvk-anh img {
    object-fit: fill !important;
  }
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-dvk-o:nth-child(n+2) .t4dv-dvk-anh img {
    object-fit: cover !important;
  }
}

/* --- 10.36 Tab Casestudy của #9 là GẠCH DƯỚI, không phải viền bao ---------- */
/* ⛔ Quy tắc 'border: 1px solid camel' ở §"Bảng CASESTUDY" viết cho **trang #8**
   nhưng đặt ở phạm vi nhóm 'body.t4-nhom-dv3' nên tràn sang #9. Ảnh kết xuất
   của Figma #9 cho GẠCH DƯỚI camel ~3px. Đây là lý do vòng trước tôi đọc
   'strokes' rồi dựng viền bao — spec KHÔNG nói nét bật ở cạnh nào. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case > ul.nav > li.active > a {
  border: 0; border-radius: 0; padding: 12px 16px; position: relative;
}
/* [số] Gạch nằm ở y=365..368,5 trong ô tab 315..369 ⇒ cách đáy 4, dày 3,5.
   Vẽ bằng '::after' chứ không bằng 'border-bottom': border ăn vào chiều cao ô
   và đẩy cả bảng panel xuống. ⚠ Phải 'display:block' vì quy tắc dùng chung
   'body.t4-nhom-dv3 .t4dv-tabs … ::after{display:none}' đã tắt nó. */
body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case > ul.nav > li.active > a::after {
  display: block; content: ""; position: absolute; left: 0; right: 0;
  bottom: 4px; height: 3.5px; background: var(--t4-camel);
}

@media (max-width: 849px) {
  /* [số] Khổ 402 gạch nằm thấp hơn: Figma y=414..417,5 (khổ 1900 là 365..368,5). */
  body.t4-trang-thiet-ke-toi-uu-website .t4dv-tabs-case > ul.nav > li.active > a::after {
    bottom: -4.5px;
  }
}

/* ==========================================================================
   11. #8 'truyen-thong-thuong-hieu' — HAI NÚT HERO (bổ sung 22/08/2026)
   [phục vụ] phần tử: Text (t4dv-hero-nut) trong Hero
   [trang] #8 | [figma] hero 939:12469 · 939:12471 | hero_mb 1385:12119 · 1385:12121
   [lý do] `scripts/kiem-tuong-tac.js --figma=trang8` báo hero/hero_mb THIẾU
   THẬT hai nút — trang chưa hề có khối `.t4dv-hero-nut`, chỉ có nhãn/H1/mô
   tả. Nút TỰ THÂN (`.t4-nhom-dv3 .t4dv-nut`, dòng 881 khối #9) đã dùng chung
   nhóm, nên chỉ cần khối bọc căn giữa của riêng #8 — chưa chạy vòng đo pixel
   như #9 (10.14-10.26), chỉ đủ để không đè chữ mô tả và đạt kiểm tương tác.
   ========================================================================== */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-hero-nut {
  margin-top: 40px; display: flex; justify-content: center; gap: 16px;
}

@media (max-width: 849px) {
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-hero-nut {
    flex-direction: column; align-items: center; gap: 16px; margin-top: 32px;
  }
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-nut,
  body.t4-trang-truyen-thong-thuong-hieu .t4dv-nut--dac {
    width: 283px; height: 44px; font-size: 14px; padding: 0;
  }
}