/*
Theme Name:   4T — Tiếp Thị Tử Tế (Flatsome Child)
Theme URI:    https://demo.tiepthitute.com
Description:  Child theme của Flatsome, dựng bám 100% thiết kế Figma của 4T — Tiếp Thị Tử Tế. Mỗi trang trong sitemap là một Page Template riêng.
Author:       Tiếp Thị Tử Tế
Author URI:   https://tiepthitute.com
Template:     flatsome
Version:      2.4.56
Text Domain:  flatsome-child
*/

/* ==========================================================================
   MỤC LỤC
   1. Token màu / font / khoảng cách
   2. Nền & chữ toàn site
   3. Mô-típ (a) — nhãn section: chip xanh + kẻ đứt nét
   4. Mô-típ (b) — hai nền gradient section
   5. Mô-típ (c) — thẻ trắng bo 16px
   6. Mô-típ (d) — nút camel đặc / nút trắng viền
   7. Mô-típ (e) — footer gradient + viền đáy camel
   8. Header 4T (desktop + mega menu + biến thể Dark)
   9. Menu mobile trượt + thanh nút cố định đáy
  10. Widget chat nổi
  11. Tiện ích dùng lại
  12. Logo chữ dự phòng
  13. Trang chủ
  14. Trang mặc định (page.php)
  15. Bổ sung sau khi đọc được Figma (14/08/2026)
  16. Trang "Về chúng tôi"
  17. Trang "Dịch vụ Google Marketing"
  18. Vá độ ưu tiên màu chữ của nút
  19. Trang "Xử lý lỗi & Vi phạm Google"
  20. Nhóm trang GG Marketing #5 · #6 · #7
  21. Ba trang phụ Tư vấn chiến lược #11 · #12 · #13
  22. Trang "Truyền thông thương hiệu" #8
  23. Trang "Thiết kế & tối ưu hạ tầng Web" #9
  24. Trang "Tư vấn chiến lược & triển khai tổng thể" #10
  25. Nhóm Blog · Dự án · Bài viết #19 #20 #21 #22
  26. Nhóm Giáo dục #14 · #15 · #16 · #17 · #18
  27. Nhóm trang phụ #23 · #24 · #25

   Breakpoint mobile: ≤768px, theo đúng node mobile trong sitemap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN — bảng màu "4T Color Pallete" (đã xác minh từ Figma)
   -------------------------------------------------------------------------- */
:root {
  --t4-dark-moss:    #155446; /* Dark Moss Green — footer đậm, chữ nhấn      */
  --t4-leaf:         #458763; /* Leaf Green — nền header, chip nhãn section  */
  --t4-camel:        #CF9156; /* Camel Brown — nút chính                     */
  --t4-camel-dark:   #B77537; /* Dark Camel — hover nút chính                */
  --t4-camel-border: #AF6928; /* viền + chữ nút trắng (xác minh node 24:2682)*/

  --t4-light: #FCFBF6; /* nền trang                                          */
  --t4-cream: #EFE8DA; /* kem — điểm đậm nhất của 2 gradient section         */

  --t4-text:  #1F1F1F;
  --t4-gray:  #3B3B3B;
  --t4-ink:   #252930;
  --t4-muted: #5E5E5E;
  --t4-white: #FFFFFF;

  --t4-font-head: 'Playfair Display', Georgia, serif;
  --t4-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --t4-font-logo: 'Poltawski Nowy', Georgia, serif; /* riêng số "4" của logo */

  /* Figma vẽ trên khổ 1900px, nội dung thật rộng 1080px */
  --t4-container: 1080px;
  --t4-header-h: 76px;

  --t4-radius-card: 16px;
  --t4-radius-btn: 8px;
  --t4-shadow-card: 3px 3px 4px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   2. NỀN & CHỮ TOÀN SITE
   -------------------------------------------------------------------------- */
body.t4 {
  background-color: var(--t4-light);
  font-family: var(--t4-font-body);
  font-size: 16px;
  line-height: 26px;
  color: var(--t4-text);
  margin: 0;
}

.t4 h1, .t4 h2, .t4 h3, .t4 h4, .t4 h5, .t4 h6 {
  font-family: var(--t4-font-head);
  color: var(--t4-text);
  margin: 0 0 16px;
}

.t4 h1, .t4-h1 { font-size: 50px; line-height: 60px; font-weight: 500; }
/* ⚠ H2 = SemiBold 600 + Dark Moss #155446, KHÔNG phải 500 + #1F1F1F.
   Kiểm kê toàn file Figma (tools/kiem-ke-figma.py): Playfair 40px xuất hiện
   103 lần SemiBold #155446, so với 17 lần kem và 5 lần camel — tức đây là
   MẶC ĐỊNH của site, các màu kia là biến thể trên nền tối, phải khai riêng.
   Sửa 15/08/2026 theo Bước 2c. */
.t4 h2, .t4-h2 { font-size: 40px; line-height: 53px; font-weight: 600; color: var(--t4-dark-moss); }
.t4 h3, .t4-h3 { font-size: 24px; line-height: 32px; font-weight: 500; }

.t4 p { margin: 0 0 16px; }
.t4 a { color: inherit; }

/* Câu dẫn dưới tiêu đề */
/* Figma: 20/35, màu #252930 (không phải #3B3B3B) — node 1211:7820. */
.t4-lede { font-size: 20px; line-height: 35px; color: #252930; }

/* Dòng chữ nhỏ in hoa phía trên tiêu đề */
.t4-kicker {
  font-family: var(--t4-font-body);
  font-weight: 800;
  font-size: 20px;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--t4-gray);   /* Figma #3B3B3B, KHÔNG phải Leaf Green */
  margin: 0;
}

/* Cụm nhấn nghiêng trong tiêu đề Playfair */
.t4-italic { font-style: italic; font-weight: 400; }

/* ⚠ Sửa 15/08/2026 (Bước 2d, ve-chung-toi): <strong> để trần trong tiêu đề
   h1/h2 tự nhận UA-default `font-weight: bolder`, mà bảng quy đổi CSS cho
   "bolder" trên nền 600 (h2 SemiBold) hay 600 (.t4-hero-h1-mb) đều nhảy thẳng
   lên 900 — không dừng ở 700 như Figma. Trước giờ tưởng là lỗi thiếu variant
   Playfair 700 (sai — cả 400/500/600/700 đều đã nạp đủ), thật ra là do chưa
   bao giờ khai RÕ 700, chỉ dựa vào suy diễn tương đối của trình duyệt. */
.t4-hero-h1-mb strong,
#hanh-trinh h2 strong { font-weight: 700; }

/* Icon Material Symbols — cỡ và độ mảnh theo thiết kế */
.t4 .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .t4 h1, .t4-h1 { font-size: 32px; line-height: 42px; }
  /* Figma mobile: Playfair 32/42,7 (không phải 26/36) — node 1015:18528 v.v. */
  .t4 h2, .t4-h2 { font-size: 32px; line-height: 43px; }
  .t4 h3, .t4-h3 { font-size: 20px; line-height: 28px; }
  .t4-lede   { font-size: 16px; line-height: 26px; }
  .t4-kicker { font-size: 15px; line-height: 26px; }
}

/* --------------------------------------------------------------------------
   3. MÔ-TÍP (a) — NHÃN SECTION: chip xanh + kẻ đứt nét chạy hết hàng
   -------------------------------------------------------------------------- */
.t4-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 32px;
}

.t4-label > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--t4-leaf);
  color: var(--t4-white);
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  white-space: nowrap;
}

.t4-label::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--t4-leaf);
  opacity: .5;
}

@media (max-width: 768px) {
  .t4-label { gap: 12px; margin-bottom: 20px; }
  .t4-label > span { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   4. MÔ-TÍP (b) — HAI NỀN GRADIENT SECTION
   -------------------------------------------------------------------------- */
.t4-bg-fade-down {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, #EFE8DA 0%, rgba(239,232,218,.4) 49%, rgba(239,232,218,0) 100%);
}

.t4-bg-fade-mid {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, rgba(239,232,218,0) 0%, #EFE8DA 51%, rgba(239,232,218,0) 100%);
}

.t4-bg-light { background-color: var(--t4-light); }
.t4-bg-cream { background-color: var(--t4-cream); }

/* --------------------------------------------------------------------------
   5. MÔ-TÍP (c) — THẺ TRẮNG bo 16px, đổ bóng
   -------------------------------------------------------------------------- */
.t4-card {
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 30px;
  height: 100%;
}

/* ⚠ Figma ĐẢO NGƯỢC so với bản trước: chữ kem #FCFBF6 trên nền Leaf #458763,
   bo 8px (frame cha "Frame 95" của lớp 'Nhóm dịch vụ 01'). Bản cũ để chữ xanh
   trên nền kem — nhìn qua vẫn "có chip" nên mắt không bắt được. */
.t4-card-tag {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 8px;
  background: var(--t4-leaf);
  color: var(--t4-light);
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}

.t4-sep { height: 1px; background: rgba(31,31,31,.15); border: 0; margin: 18px 0; }

@media (max-width: 768px) {
  .t4-card { padding: 20px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   6. MÔ-TÍP (d) — NÚT
   -------------------------------------------------------------------------- */
.t4-btn,
.t4-btn-ghost,
.t4-btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 24px;
  border-radius: var(--t4-radius-btn);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.t4-btn { background: var(--t4-camel); color: var(--t4-white); }
.t4-btn:hover, .t4-btn:focus { background: var(--t4-camel-dark); color: var(--t4-white); }

.t4-btn-ghost {
  background: var(--t4-light);
  color: var(--t4-camel-border);
  border-color: var(--t4-camel-border);
}
.t4-btn-ghost:hover, .t4-btn-ghost:focus { background: var(--t4-camel-border); color: var(--t4-white); }

.t4-btn-on-dark { background: transparent; color: var(--t4-white); border-color: var(--t4-white); }
.t4-btn-on-dark:hover { background: var(--t4-white); color: var(--t4-dark-moss); }

/* Nút hero cao 56px theo node 1208:7764 */
.t4-btn-lg { min-height: 56px; min-width: 180px; font-size: 16px; }

/* --------------------------------------------------------------------------
   7. MÔ-TÍP (e) — FOOTER
   -------------------------------------------------------------------------- */
/* Mọi khoảng cách dưới đây đo thẳng từ component 320:1628 (desktop) và
   1093:8985 (mobile). Khung nội dung Figma rộng 1080 — trùng .t4-container
   nên tỉ lệ 1:1, cỡ chữ chép nguyên không quy đổi. */
.t4-footer {
  background: linear-gradient(180deg, var(--t4-leaf) 0%, var(--t4-dark-moss) 100%);
  border-bottom: 20px solid var(--t4-camel);
  color: var(--t4-white);
  padding: 61px 0 24px;
}

.t4-footer a { color: var(--t4-white); text-decoration: none; }
.t4-footer a:hover { text-decoration: underline; }
.t4-footer ul { list-style: none; margin: 0; padding: 0; }

/* Hàng đầu: logo trái, dòng đăng ký kinh doanh phải (Figma y=61, cao 55). */
.t4-footer-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 92px;
}
.t4-footer-logo { display: block; flex: 0 0 auto; }
.t4-footer-logo img { display: block; width: 189px; height: auto; }
.t4-footer-dkkd {
  flex: 0 1 432px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--t4-light);
}

/* Bốn cột liên kết (Figma y=208, rải đều hết khung 1080). */
.t4-footer-cot {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 65px;
}
.t4-footer-tieu-de {
  font-family: var(--t4-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #f8f5ee;
  margin: 0 0 24px;
}
.t4-footer-nhom li { margin-bottom: 24px; }
.t4-footer-nhom li:last-child { margin-bottom: 0; }
.t4-footer-nhom a {
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;   /* Figma desktop 15,03px; mobile 18px — xem @media cuối tệp */
}

/* Hàng mạng xã hội: hai vạch kẻ kẹp bốn biểu tượng (Figma y=457). */
.t4-footer-mxh {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.t4-footer-ke {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255,255,255,.35);
}
.t4-footer-mxh ul {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.t4-footer-mxh a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 23px;
  color: var(--t4-white);
}
.t4-footer-mxh a:hover { opacity: .75; }

/* Hàng liên hệ (Figma y=520): icon 24px + chữ 12/400. */
.t4-footer-lien-he {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 42px;
}
.t4-footer-lien-he li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 24px;
}
.t4-footer-lien-he .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'wght' 300;
  flex: 0 0 auto;
}

.t4-footer-copyright {
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 20px;
}

/* Mobile — node 1093:8985 (402 rộng, lề 25px). Bốn cột XẾP DỌC, tiêu đề tụt
   xuống 14px, và hàng liên hệ tách thành lưới 2 cột với địa chỉ chiếm cả hàng. */
@media (max-width: 768px) {
  .t4-footer { padding: 40px 0 20px; border-bottom-width: 12px; }

  .t4-footer-dau {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
  }
  .t4-footer-dkkd { flex: 1 1 auto; }

  .t4-footer-cot {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
  }
  .t4-footer-tieu-de { font-size: 14px; margin-bottom: 20px; }
  .t4-footer-nhom li { margin-bottom: 15px; }

  .t4-footer-mxh { margin-bottom: 32px; }

  .t4-footer-lien-he {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 32px;
  }
  .t4-footer-lien-he li:first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   8. HEADER 4T — khớp node Figma 24:2572 (nền #458763, cao 76px)
   -------------------------------------------------------------------------- */
.t4-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--t4-leaf);
  box-shadow: 0 2px 1px rgba(0,0,0,.25);
}

.t4-header-inner {
  max-width: var(--t4-container);
  margin: 0 auto;
  min-height: var(--t4-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 15px;
}

.t4-logo { display: flex; align-items: center; flex: 0 0 auto; }
.t4-logo img { display: block; height: 48px; width: auto; }

.t4-nav { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.t4-nav > li { position: relative; }

.t4-nav > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--t4-header-h);
  padding: 0 18px;
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  color: var(--t4-white);
  text-decoration: none;
  white-space: nowrap;
}

.t4-nav > li > a:hover,
.t4-nav > li.is-open > a { color: var(--t4-cream); }

.t4-nav .t4-caret {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform .2s ease;
}
.t4-nav > li.is-open .t4-caret { transform: rotate(180deg); }

.t4-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Mega menu "Dịch vụ" */
.t4-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(1080px, calc(100vw - 40px));
  background: var(--t4-light);
  border-radius: 0 0 var(--t4-radius-card) var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 32px;
  display: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.t4-nav > li.is-open > .t4-mega {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.t4-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.t4-mega h4 {
  font-family: var(--t4-font-body);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--t4-leaf);
  margin: 0 0 12px;
}
.t4-mega ul { list-style: none; margin: 0; padding: 0; }
.t4-mega li { margin-bottom: 10px; }
.t4-mega a {
  font-size: 15px;
  line-height: 24px;
  color: var(--t4-text);
  text-decoration: none;
}
.t4-mega a:hover { color: var(--t4-camel-border); }

/* Biến thể Menu Dark — thêm class t4-header-dark vào <body> qua Page Template */
.t4-header-dark .t4-header { background: var(--t4-dark-moss); }

/* Nút hamburger — chỉ hiện ở mobile */
.t4-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}
.t4-burger span {
  display: block;
  height: 2px;
  background: var(--t4-white);
  margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.t4-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.t4-burger.is-open span:nth-child(2) { opacity: 0; }
.t4-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .t4-nav, .t4-header-actions { display: none; }
  .t4-burger { display: block; }
  .t4-logo img { height: 40px; }
}

/* --------------------------------------------------------------------------
   9. MENU MOBILE TRƯỢT (node 1015:20521) + THANH NÚT ĐÁY (node 1015:20413)
   -------------------------------------------------------------------------- */
.t4-mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(402px, 100%);
  background: var(--t4-light);
  z-index: 900;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  padding: 24px 20px 100px;
  display: none;
}

.t4-mobile-menu.is-open { transform: translateX(0); }

.t4-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.t4-mobile-menu > ul > li { border-bottom: 1px solid rgba(31,31,31,.1); }
.t4-mobile-menu > ul > li > a,
.t4-mobile-menu > ul > li > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: 0;
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--t4-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.t4-submenu { display: none; padding: 0 0 12px 12px; }
.t4-submenu.is-open { display: block; }
.t4-submenu a { display: block; padding: 10px 0; font-size: 15px; color: var(--t4-gray); text-decoration: none; }

.t4-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 850;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.t4-overlay.is-open { opacity: 1; visibility: visible; }

/* Thanh nút cố định đáy màn hình — chỉ mobile */
.t4-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: none;
  gap: 1px;
  background: rgba(255,255,255,.2);
  box-shadow: 0 -2px 8px rgba(0,0,0,.15);
}

/* Năm mục điều hướng, xếp DỌC icon-trên-chữ-dưới, chữ 8/700 theo thiết kế.
   Bản cũ là hai nút ngang cỡ 14px — sai hẳn kiểu. */
.t4-bottom-bar a,
.t4-bottom-bar button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px;
  border: 0;
  cursor: pointer;
  background: var(--t4-dark-moss);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  color: var(--t4-white);
  text-decoration: none;
}
.t4-bottom-bar .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: 'wght' 300;
}
.t4-bottom-bar a:hover,
.t4-bottom-bar button:hover { background: var(--t4-leaf); }

@media (max-width: 768px) {
  .t4-mobile-menu { display: block; }
  .t4-bottom-bar { display: flex; }
  body.t4 { padding-bottom: 60px; } /* chừa chỗ cho thanh đáy */
}

/* --------------------------------------------------------------------------
   10. WIDGET CHAT NỔI GÓC PHẢI (node 163:7441)
   -------------------------------------------------------------------------- */
.t4-chat { position: fixed; right: 24px; bottom: 24px; z-index: 700; }

.t4-chat-buttons { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

.t4-chat-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t4-leaf);
  color: var(--t4-white);
  box-shadow: var(--t4-shadow-card);
  text-decoration: none;
  transition: transform .2s ease;
}
.t4-chat-btn:hover { transform: scale(1.06); color: var(--t4-white); }
.t4-chat-btn--phone { background: var(--t4-camel); }
.t4-chat-btn .material-symbols-outlined { font-size: 30px; }

/* Bong bóng lời chào */
.t4-chat-bubble {
  position: relative;
  width: 250px;
  background: var(--t4-white);
  border-radius: 12px;
  box-shadow: var(--t4-shadow-card);
  padding: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--t4-text);
}

.t4-chat-bubble button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--t4-muted);
  cursor: pointer;
  line-height: 1;
}

.t4-chat.is-collapsed .t4-chat-bubble { display: none; }

@media (max-width: 768px) {
  .t4-chat { right: 16px; bottom: 72px; } /* nằm trên thanh nút đáy */
  .t4-chat-bubble { display: none; }
  .t4-chat-btn { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   11. TIỆN ÍCH DÙNG LẠI
   -------------------------------------------------------------------------- */
.t4-container {
  max-width: var(--t4-container);
  margin: 0 auto;
  padding: 0 15px;
}

.t4-section { padding: 100px 0; }

@media (max-width: 768px) {
  .t4-section { padding: 48px 0; }
  /* Lề mobile ĐÚNG Figma là 30px mỗi bên (khung nội dung 402−60=342px) —
     xác minh trực tiếp trên 3 section độc lập (Triết lý, Dịch vụ, Growth
     Framework — tất cả cùng ra khung con 342px). 15px kế thừa từ base rule
     hẹp hơn Figma trên MỌI trang, không riêng trang chủ. Sửa ở đây thay vì
     đổi base rule vì desktop 15px chưa được xác minh lại (ngoài phạm vi
     15/08/2026), đừng đụng khi chưa đo. */
  .t4-container { padding: 0 30px; }
}

/* Slider ngang cuộn tay trên mobile (thẻ desktop → slider mobile) */
.t4-scroll-x { display: grid; gap: 24px; }

@media (max-width: 768px) {
  .t4-scroll-x {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-right: -15px;
  }
  .t4-scroll-x > * { flex: 0 0 82%; scroll-snap-align: start; }
  .t4-scroll-x::-webkit-scrollbar { display: none; }
}

/* Bản mobile của Figma đôi khi là NỘI DUNG KHÁC, không phải cùng chữ co lại */
.t4-only-desktop { display: block; }
.t4-only-mobile { display: none; }

@media (max-width: 768px) {
  .t4-only-desktop { display: none; }
  .t4-only-mobile { display: block; }
}

.t4-img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   12. LOGO CHỮ DỰ PHÒNG (dùng khi chưa tải được logo SVG từ Figma)
   -------------------------------------------------------------------------- */
.t4-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.t4-logo-name {
  font-family: var(--t4-font-head);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--t4-white);
}
.t4-logo-tagline {
  font-family: var(--t4-font-body);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.8);
}
.t4-nav-wrap { flex: 1 1 auto; display: flex; justify-content: center; }

/* ==========================================================================
   13. TRANG CHỦ (node 163:6757 / 1002:8059)
   ========================================================================== */

/* Ô giữ chỗ khi ảnh Figma chưa tải về — giữ đúng tỉ lệ để khung không xô lệch */
.t4-img-todo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: repeating-linear-gradient(45deg, #EFE8DA, #EFE8DA 10px, #E6DDCB 10px, #E6DDCB 20px);
  border: 1px dashed var(--t4-camel-border);
  border-radius: 8px;
  color: var(--t4-camel-border);
  font-size: 13px;
  min-height: 80px;
}

/* ---- Hero ---- */
.t4-hero { position: relative; min-height: 950px; display: flex; align-items: center; color: var(--t4-white); }
.t4-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.t4-hero-img { width: 100%; height: 100%; object-fit: cover; }
.t4-hero-overlay { position: absolute; inset: 0; background: rgba(21, 84, 70, .45); }
.t4-hero-inner { position: relative; z-index: 2; text-align: center; }
/* Figma node 1208:7757 / 1015:16737: Manrope SemiBold 16/22, letter-spacing 0.
   Bản trước để 14px + tracking .22em — tracking đó là do người dựng tự thêm,
   Figma không có. */
.t4-hero-eyebrow {
  font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: 0;
  text-transform: uppercase; margin: 0 0 12px; color: var(--t4-white);
}
/* ⚠ Nhánh mobile của hero trang chủ dùng <p class="t4-h1"> chứ không phải <h1>
   (một trang chỉ được một h1 — xem chú thích trong template-index.php), nên
   selector phải bắt CẢ HAI. Bỏ vế `.t4-h1` là chữ mobile mất màu trắng và mất
   margin 24px, chỉ hiện sai trên điện thoại nên rất dễ lọt. */
.t4-hero .t4-hero-inner h1,
.t4-hero .t4-hero-inner .t4-h1 { color: var(--t4-white); max-width: 742px; margin: 0 auto 24px; }
/* Figma desktop 20/32, mobile 14/32 (mobile là BẢN CHỮ KHÁC, không phải co chữ). */
.t4-hero-desc { max-width: 715px; margin: 0 auto; font-size: 20px; line-height: 32px; color: rgba(255,255,255,.92); }
.t4-hero-actions { display: flex; gap: 22px; justify-content: center; margin-top: 58px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .t4-hero { min-height: 560px; }
  .t4-hero-actions { gap: 12px; margin-top: 32px; }
  .t4-btn-lg { min-height: 48px; min-width: 150px; font-size: 14px; }
  .t4-hero-desc { font-size: 14px; line-height: 32px; }
}

/* ---- Dùng chung ---- */
.t4-center { text-align: center; }
.t4-prose { max-width: 1040px; margin: 0 auto; font-size: 16px; line-height: 28px; }
.t4-prose strong { font-weight: 700; }

/* ---- Growth Framework ---- */
.t4-framework-desc { max-width: 1000px; margin: 24px auto 0; }
.t4-framework-figure { margin-top: 48px; }

/* ---- Dịch vụ ---- */
.t4-services-head { margin-bottom: 40px; }
.t4-services-head h2 { margin: 8px 0; }
.t4-amp { font-family: var(--t4-font-head); font-style: italic; color: var(--t4-camel); }
.t4-services-intro { max-width: 1080px; margin: 0 auto 40px; text-align: center; }

.t4-services-row { margin-bottom: 24px; }
.t4-services-row--wide { grid-template-columns: repeat(2, 1fr); }
.t4-services-row--narrow { grid-template-columns: repeat(3, 1fr); }

.t4-service-card { display: flex; flex-direction: column; }
.t4-service-head { display: flex; align-items: flex-start; gap: 10px; }
.t4-service-head h3 { margin: 0; }
.t4-service-head .material-symbols-outlined { font-size: 30px; color: var(--t4-leaf); }
/* Figma: mô tả thẻ = Manrope Regular 16/26 #1F1F1F; link thẻ = Regular 12/16,4
   #1F1F1F (bản trước để Bold 14 camel). Node 279:7364 / 1015:18066. */
.t4-service-desc { flex: 1 1 auto; font-size: 16px; line-height: 26px; color: var(--t4-text); }
.t4-service-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 400; font-size: 12px; line-height: 16px;
  color: var(--t4-text); text-decoration: none;
}
.t4-service-link:hover { text-decoration: underline; }
.t4-service-link .material-symbols-outlined { font-size: 18px; }

/* ---- Đối tác ---- */
.t4-partners {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 48px;
}
.t4-partner { flex: 0 0 auto; height: 60px; display: flex; align-items: center; }
.t4-partner img { max-height: 60px; width: auto; }

@media (max-width: 768px) {
  .t4-partners { justify-content: center; gap: 20px 28px; }
  .t4-partner, .t4-partner img { height: 44px; max-height: 44px; }
}

/* ---- Casestudy ---- */
.t4-label-row { display: flex; align-items: center; gap: 16px; }
.t4-label-row .t4-label { margin-bottom: 32px; }
/* Figma: Manrope Bold 14/19 màu Dark Moss #155446. Kiểm kê toàn file: 16/19
   lớp "Xem tất cả" là #155446 — bản vá camel ở mục 18 là suy đoán từ MỘT trang,
   không phải số đo. */
.t4-link-all {
  flex: 0 0 auto; margin-bottom: 32px;
  font-weight: 700; font-size: 14px; line-height: 19px;
  color: var(--t4-dark-moss); text-decoration: none;
}
.t4-casestudy-head { display: grid; grid-template-columns: 316px 1fr; gap: 60px; align-items: start; }
.t4-tablist { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0 24px; }
.t4-tab {
  padding: 10px 20px; border-radius: var(--t4-radius-btn);
  border: 1px solid rgba(69,135,99,.4); background: transparent;
  font-family: var(--t4-font-body); font-weight: 700; font-size: 14px;
  color: var(--t4-leaf); cursor: pointer;
}
.t4-tab.is-active { background: var(--t4-leaf); color: var(--t4-white); border-color: var(--t4-leaf); }
.t4-case-body { display: grid; grid-template-columns: 520px 1fr; gap: 40px; align-items: center; }

@media (max-width: 768px) {
  .t4-casestudy-head, .t4-case-body { grid-template-columns: 1fr; gap: 20px; }
  .t4-label-row { flex-direction: column; align-items: stretch; gap: 0; }
  .t4-link-all { margin-bottom: 20px; }
}

/* ---- Liên hệ — dựng lại 15/08/2026 theo node 962:12048, xem qa/cau-hoi.md #4 ----
   ⚠ Cả BA khối (chip nhãn · ảnh lá xanh · DIRECT CONTACT) nằm CHUNG một
   <section id="lien-he"> — bỏ .t4-section (không lấy padding 100px 0 mặc
   định) để hai khối dưới full-bleed hết viewport đúng Figma (1900×491 và
   1900×247, không có khoảng đệm trên/dưới như section khác). Từng khối tự
   khai padding riêng. Gộp chung 1 section, không tách rời, để script kiểm
   kê (scripts/diff-text.js) khoanh đúng biên #lien-he — tách rời từng lần
   khiến toàn bộ chữ trong khối bị báo nhầm "sai section". */
.t4-lien-he-wrap { display: block; }
/* ⚠ CHỈ khai padding-top, ĐỪNG dùng shorthand `padding: 100px 0 0` — shorthand
   ghi đè cả trái/phải về 0, xoá mất 15px lề trái/phải kế thừa từ
   .t4-container (đứng sau trong file nên thắng theo thứ tự cascade cùng độ
   ưu tiên), làm chip "Liên hệ" lệch khỏi mọi nhãn section khác trên trang.
   Bắt được nhờ scripts/diff-layout.js báo khung nội dung 1080 thay vì 1050
   như các section còn lại. */
.t4-lien-he-nhan { padding-top: 100px; }

@media (max-width: 768px) {
  .t4-lien-he-nhan { padding-top: 48px; }
}

.t4-contact-leaf {
  position: relative;
  color: var(--t4-white);
  display: flex;
  align-items: center;
  min-height: 491px;
}
.t4-contact-leaf-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.t4-contact-leaf-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.97); }
.t4-contact-leaf-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "heading map" "cert map";
  column-gap: 32px;
  row-gap: 24px;
  align-items: center;
  width: 100%;
}
.t4-contact-heading { grid-area: heading; }
.t4-contact-heading h2 { color: var(--t4-white); font-weight: 700; margin: 0 0 12px; }
.t4-contact-company {
  margin: 0;
  font-family: var(--t4-font-body);
  font-size: 16px; font-weight: 600; line-height: 28px;
  color: var(--t4-white);
}
.t4-contact-cert { grid-area: cert; }
.t4-contact-cert-nhan {
  margin: 0 0 12px;
  font-family: var(--t4-font-body);
  font-size: 16px; font-weight: 600;
  color: var(--t4-white);
}
.t4-contact-badges { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.t4-badge-google {
  display: flex; align-items: center; gap: 12px;
  color: var(--t4-white); text-decoration: none;
}
.t4-badge-google-icon { width: 48px; height: 48px; }
.t4-badge-google span { font-family: 'Google Sans', var(--t4-font-body); font-size: 16px; font-weight: 500; }
.t4-badge-img img { display: block; height: auto; }
.t4-badge-img[href*="dmca"] img { width: 120px; }
.t4-badge-img[href*="online.gov.vn"] img { width: 115px; }

.t4-contact-map {
  grid-area: map;
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.t4-contact-map img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 514/362; }
.t4-contact-map-pin {
  position: absolute; left: 52%; top: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -100%) rotate(-45deg);
  background: var(--t4-camel);
  border: 3px solid var(--t4-white);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.t4-contact-direct { background-color: var(--t4-light); padding: 32px 0; }
.t4-contact-direct .t4-lh-cot { margin-top: 0; padding-top: 0; border-top: none; }

@media (max-width: 768px) {
  .t4-contact-leaf { min-height: 0; padding: 40px 0; }
  .t4-contact-leaf-inner {
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "heading heading" "cert map";
    row-gap: 20px;
    align-items: start;
  }
  /* Figma mobile 32/42,656 — dùng đúng 43px như .t4 h2 mobile chung
     (mục 2), không phải 40px đã đoán nhầm lúc dựng đầu. */
  .t4-contact-heading h2 { font-size: 32px; line-height: 43px; }
  .t4-contact-badges { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Mobile Figma (I1093:8637;1093:8411) là khung DỌC 100×188, khác hẳn tỉ lệ
     ngang 514/362 của desktop — dùng chung aspect-ratio desktop là sai hẳn
     hình dạng (site cũ ra 136×96 ngang, Figma là 100×188 dọc). Bắt được nhờ
     diff-assets báo "NGHI THIẾU" cho Basemap image ở mobile. */
  .t4-contact-map img { aspect-ratio: 100/188; }
  .t4-contact-map-pin { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   14. TRANG MẶC ĐỊNH — page.php, dùng khi trang chưa có Page Template riêng
   -------------------------------------------------------------------------- */
.t4-page-content { max-width: none; margin: 24px 0 0; }

.t4-dang-dung {
  margin-top: 32px;
  padding: 32px;
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  max-width: 640px;
}

.t4-dang-dung-title {
  font-family: var(--t4-font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--t4-dark-moss);
  margin: 0 0 12px;
}

.t4-dang-dung p { color: var(--t4-gray); }
.t4-dang-dung a { color: var(--t4-camel-border); }

.t4-dang-dung-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}
.t4-dang-dung-actions a { color: inherit; }

@media (max-width: 768px) {
  .t4-dang-dung { padding: 20px; margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   15. BỔ SUNG SAU KHI ĐỌC ĐƯỢC FIGMA (14/08/2026)
   -------------------------------------------------------------------------- */

/* Dòng phụ dưới tên dịch vụ — chỉ thẻ 01 có (các thẻ khác Figma để ẨN) */
.t4-service-sub {
  font-size: 11px;
  line-height: 20px;
  color: var(--t4-muted);
  margin: 2px 0 0;
}

/* Dòng "BẰNG CHIẾN LƯỢC RÕ RÀNG" — Figma là Manrope 700 24/33,
   khác kicker phía trên (800 20/35) */
.t4-kicker-sm { font-size: 24px; line-height: 33px; font-weight: 700; }

/* ⚠ SỬA 15/08/2026: KHÔNG nhẹ hơn dòng 1. Lớp nền trong Figma là Playfair
   Medium 500, nhưng cả cụm "300 thương hiệu hàng đầu trong và ngoài nước" bị
   override lên SemiBold 600 — dòng hiện ra là 600. Đọc chữ thô không thấy điều
   này, phải soi characterStyleOverrides (bài học mục 6 Giai đoạn 3). */
.t4-h2-nhe { font-weight: 600; }

.t4-partners-sub { margin-top: 18px; color: var(--t4-gray); }

@media (max-width: 768px) {
  .t4-kicker-sm { font-size: 17px; line-height: 25px; }
}

/* Thân tab casestudy — trạng thái chờ nội dung thật (xem ghi chú trong template) */
.t4-case-cho {
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 32px;
}
.t4-case-cho h3 { margin: 0 0 8px; }
.t4-case-cho p { color: var(--t4-muted); margin: 0; }
/* ==========================================================================
   16. TRANG "VỀ CHÚNG TÔI" (node 605:4136 / 1093:9585)
   Thêm 15/08/2026 — Giai đoạn 3.
   ========================================================================== */

.t4-hero--vct { min-height: 801px; }
.t4-hero--vct .t4-hero-inner { text-align: left; }
/* Figma I1211:7988;1208:7743: màu #fcfbf6 (Light), KHÔNG phải trắng thuần —
   và line-height 85 (76 là đoán). Bắt được nhờ Bước 2c 15/08/2026. */
/* `.t4-hero.t4-hero--vct h1` (2 lớp) để THẮNG chắc `.t4-hero .t4-hero-inner h1`
   (dòng ~800, cũng 2 lớp) bất kể thứ tự file — đừng rút gọn về 1 lớp. */
.t4-hero.t4-hero--vct h1 { color: var(--t4-light); font-size: 64px; line-height: 85px; font-weight: 600; }

.t4-hero-sub {
  font-family: var(--t4-font-body);
  font-size: 26px; line-height: 36px; font-weight: 500;
  color: var(--t4-light); margin: 0 0 24px;
}

.t4-hero--vct .t4-hero-desc { margin: 0 0 16px; max-width: 860px; }
.t4-hero--vct .t4-hero-actions { justify-content: flex-start; margin-top: 40px; }

/* ⚠ Khối này nay là <p>, không phải <h1> (một trang chỉ được một h1 — xem chú
   thích trong template-ve-chung-toi.php). Vì vậy phải ghi RÕ margin: <p> và
   <h1> có margin mặc định khác nhau, bỏ dòng này là bố cục mobile xê dịch. */
.t4-hero-h1-mb {
  font-family: var(--t4-font-body) !important;
  font-size: 26px !important; line-height: 36px !important;
  font-weight: 600 !important; color: var(--t4-white);
  margin: 0 0 24px !important;
}

.t4-hero-portrait { margin: 20px 0 24px; }
.t4-hero-portrait img { border-radius: var(--t4-radius-card); box-shadow: var(--t4-shadow-card); }

@media (max-width: 768px) {
  .t4-hero--vct { min-height: 0; padding: 48px 0 40px; align-items: flex-start; }
  .t4-hero--vct .t4-hero-actions { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .t4-hero--vct .t4-hero-desc { font-size: 14px; line-height: 24px; }
}

.t4-stats {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
/* Số #458763 (Leaf) · nhãn #CF9156 (Camel) — xác minh characterStyleOverrides
   Figma, KHÔNG phải cùng màu dark-moss như bản trước (Bước 2d 15/08/2026). */
.t4-stats strong {
  display: block; font-family: var(--t4-font-body); font-weight: 800;
  font-size: 24px; line-height: 33px; color: var(--t4-leaf);
}
.t4-stats strong span { display: block; color: var(--t4-camel); }
.t4-stats p { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--t4-muted); }

@media (max-width: 768px) {
  .t4-stats { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
}

.t4-strip-wrap { background: var(--t4-cream); padding: 28px 0; }
.t4-strip {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px 28px;
}
.t4-strip li { font-size: 16px; line-height: 28px; color: var(--t4-gray); }
.t4-strip li.is-manh { font-weight: 500; color: var(--t4-dark-moss); }

@media (max-width: 768px) {
  .t4-strip-wrap { padding: 20px 0; }
  .t4-strip { justify-content: flex-start; gap: 10px 18px; }
  .t4-strip li { font-size: 14px; }
}

.t4-grid-2 { grid-template-columns: repeat(2, 1fr); }
.t4-mt-40 { margin-top: 40px; }

.t4-card-h {
  font-family: var(--t4-font-body) !important;
  font-size: 16px !important; line-height: 26px !important;
  font-weight: 700 !important; margin: 0 0 10px !important;
}
.t4-card-h span { display: block; font-weight: 500; color: var(--t4-muted); }
.t4-card p { font-size: 14px; line-height: 24px; color: var(--t4-gray); margin: 0; }

.t4-values { list-style: none; margin: 0; padding: 0; }
.t4-values > li {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start;
  padding: 28px 0; border-top: 1px solid rgba(31, 31, 31, .12);
}
.t4-values > li:last-child { border-bottom: 1px solid rgba(31, 31, 31, .12); }
.t4-values-num {
  font-family: var(--t4-font-body); font-weight: 800;
  font-size: 48px; line-height: 1; color: var(--t4-camel);
}
.t4-values h3 {
  font-family: var(--t4-font-body); font-weight: 800;
  font-size: 22px; line-height: 30px; margin: 0 0 10px;
}
.t4-values p { font-size: 14px; line-height: 24px; color: var(--t4-gray); margin: 0; }
/* ⚠ Bug có sẵn, lộ ra khi soát Bước 5a: <li> DESKTOP có 3 con (span số · h3 ·
   p) nhưng grid chỉ khai 2 CỘT (120px 1fr) — không ghim cột thì `p` tự rơi
   xuống HÀNG MỚI ở CỘT ĐẦU (120px), ép cả đoạn mô tả vào khung rộng 120px,
   chữ tràn xuống hàng chục dòng (mỗi <li> cao ~650px thay vì ~280px). Ghim rõ
   cột 2, cùng cột với h3, để nó nối xuống dưới h3 đúng như thiết kế.
   ⛔ CHỈ áp ở desktop: mobile `<li>` chỉ có 1 CỘT (`1fr`, xem media query dưới)
   nên cả 3 con vốn đã tự xếp đúng — 3 hàng, 1 cột. Ghim `grid-column:2` vô
   điều kiện sẽ ép trình duyệt SINH THÊM một cột ẩn (implicit) chỉ để chứa `p`,
   xáo trộn thứ tự thị giác (đã thử và thấy `h3`/`p` đổi chỗ cạnh nhau) — đúng
   bẫy media-query specificity vừa gặp ở #gia-tri-cot-loi phía trên. */
@media (min-width: 769px) {
  .t4-values p { grid-column: 2; }
}

@media (max-width: 768px) {
  .t4-values > li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .t4-values-num { font-size: 40px; }
  .t4-values h3 { font-size: 18px; line-height: 26px; }
}

/* ⚠ Sửa 15/08/2026 (Bước 5a): Figma desktop (803:35849/801:34921) là auto-layout
   HORIZONTAL 2 CỘT — tiêu đề+mô tả (380px) nằm BÊN CẠNH danh sách 5 giá trị
   (504px, gap 172px), KHÔNG xếp chồng dọc. Bản trước dựng cả hai xếp dọc full-
   width, làm section cao 3688px thay vì 1589px Figma (+132%, phát hiện qua
   `diff-layout.js` báo "Nội dung chính (6 khối)" +32.1% — soát riêng từng khối
   con mới lộ ra khối này là thủ phạm chính). Chỉ áp cho desktop — mobile Figma
   (1093:10081) đã là VERTICAL, đúng với bản dựng hiện tại.
   ⛔ BẮT BUỘC bọc trong @media (min-width:769px): selector có #id nên specificity
   (1,1,0) THẮNG cả `@media (max-width:768px){.t4-only-desktop{display:none}}`
   (0,1,0) — không bọc thì khối desktop lộ ra TRÊN CẢ MOBILE, cộng dồn với khối
   mobile khiến section cao gấp đôi (đã dính đúng lỗi này khi thử không bọc:
   mobile từ -14.3% vọt lên +61.8%). */
@media (min-width: 769px) {
  #gia-tri-cot-loi .t4-only-desktop {
    display: grid; grid-template-columns: 380px 1fr; column-gap: 172px; align-items: start;
  }
  #gia-tri-cot-loi .t4-only-desktop h2,
  #gia-tri-cot-loi .t4-only-desktop > p.t4-prose { grid-column: 1; }
  #gia-tri-cot-loi .t4-only-desktop .t4-values { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}

.t4-mission {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 32px;
}
.t4-mission h3,
.t4-section > .t4-container > h3 {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 22px; line-height: 30px; margin: 0 0 12px;
}
.t4-mission p { margin: 0; color: var(--t4-gray); }

.t4-vision { list-style: none; margin: 24px 0 0; padding: 0; grid-template-columns: repeat(3, 1fr); }
.t4-vision > li {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 28px;
}
.t4-vision-num {
  display: block; font-family: var(--t4-font-body); font-weight: 800;
  font-size: 48px; line-height: 1; color: var(--t4-leaf); margin-bottom: 16px;
}
.t4-vision-num em { display: block; font-style: normal; font-size: 16px; font-weight: 800; color: var(--t4-muted); }
/* ⚠ Sửa 15/08/2026 (Bước 2d): Figma (chạy chữ "Brand-Led Performance
   Marketing" v.v.) là Manrope Bold 700, không phải 800 — font-family đã đúng,
   chỉ độ đậm sai. */
.t4-vision h4 {
  font-family: var(--t4-font-body); font-weight: 700;
  font-size: 18px; line-height: 26px; margin: 0 0 10px; color: var(--t4-text);
}
.t4-vision p { font-size: 14px; line-height: 24px; color: var(--t4-gray); margin: 0; }

@media (max-width: 768px) { .t4-vision-num { font-size: 40px; } }

.t4-dna { grid-template-columns: repeat(4, 1fr); }
.t4-dna .t4-values-num { font-size: 40px; display: block; margin-bottom: 12px; }
.t4-dna h3 {
  font-family: var(--t4-font-body); font-weight: 800;
  font-size: 20px; line-height: 28px; margin: 0 0 10px;
}

/* ⚠ Sửa 15/08/2026: Figma (803:35834) KHÔNG có ảnh nền + lớp phủ tối như
   bản trước — chỉ là nền kem phẳng + 1 thẻ trắng bo 10px viền mờ ở giữa.
   Bản cũ dựng kiểu "ảnh + overlay xanh" là tự suy diễn, không có trong thiết
   kế. Xác minh: Section paints #EFE8DA · Background+Border trắng bo 10 viền
   #000 @11% · H2 #155446 · mô tả #1F1F1F · nút nền #458763 chữ trắng bo 5. */
.t4-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 530px; background: var(--t4-cream);
}
.t4-cta-card {
  background: var(--t4-white);
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 10px;
  max-width: 780px;
  padding: 48px 56px;
  text-align: center;
}
.t4-cta-card h2 { color: var(--t4-dark-moss); margin: 0 0 20px; }
.t4-cta-card p {
  margin: 0 0 32px;
  font-size: 16px; line-height: 28px; color: var(--t4-text);
}
.t4-cta-card .t4-btn { background: var(--t4-leaf); border-radius: 5px; }
.t4-cta-card .t4-btn:hover { background: var(--t4-dark-moss); }

@media (max-width: 768px) {
  /* ⚠ Bước 5a (15/08/2026): padding bất đối xứng 80/120 và cỡ chữ 16px lấy
     thẳng từ dữ liệu thô Figma node 1093:10434 (paddingTop:80, paddingBottom:
     120, layoutMode VERTICAL — số cố định, không phải lệch giả do layoutWrap).
     Bản trước tự đặt 40/40 + 14px làm site thấp hơn Figma tới 129px (-20.7%). */
  .t4-cta { min-height: 420px; padding: 80px 0 120px; }
  .t4-cta-card { padding: 32px 24px; }
  .t4-cta-card p { font-size: 16px; line-height: 28px; }
}


/* ==========================================================================
   17. TRANG "DỊCH VỤ GOOGLE MARKETING" (node 24:4384 / 1093:11223)
   Thêm 15/08/2026 — Giai đoạn 3, trang thứ 2.

   Màu/bo/bóng dưới đây lấy TỪ FIGMA, không ước lượng theo ảnh chụp:
     nút xanh #458763 bo 5 · thẻ chiến dịch bo 30 · thẻ gói bo 16
     thẻ dịch vụ khác bo 24 · ô FAQ nền #EFE8DA bo 16 · thẻ CTA bo 10
   ========================================================================== */

/* ---- Breadcrumb (1015:14075 · xác minh thêm ở 1012:14051) ----
   ⚠ Sửa 15/08/2026 khi nghiệm thu "Về chúng tôi": Figma dùng nền KEM
   #EFE8DA (không phải --t4-light #FCFBF6), chữ #1F1F1F (không phải
   --t4-muted #5E5E5E), "Home" GẠCH CHÂN vì là link, ngăn cách bằng icon
   chevron chứ không phải dấu gạch chéo. Áp dụng chung cho cả 15 trang đang
   dùng .t4-crumb — sửa một chỗ, nâng cả site. */
.t4-crumb { border-bottom: 1px solid rgba(31,31,31,.08); background: var(--t4-cream); }
.t4-crumb ol {
  list-style: none; margin: 0; padding: 24px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  /* ⚠ Bước 5a (15/08/2026): line-height 22px + cỡ chữ 13px lấy từ node
     1012:14051 (Manrope 13/600, item cao 22px) — cả desktop lẫn mobile đều
     13px trong Figma, không chỉ mobile. Bản trước để desktop 14px + kế thừa
     line-height 26px của site làm cả 15 trang dùng .t4-crumb cao hơn ~13px
     (+18-22%) so với Figma. */
  font-size: 13px; line-height: 22px; font-weight: 600; color: rgba(31,31,31,.62);
}
.t4-crumb li + li::before { content: "›"; margin-right: 8px; color: rgba(31,31,31,.35); font-weight: 400; }
.t4-crumb a { color: var(--t4-text); text-decoration: underline; }
.t4-crumb a:hover { color: var(--t4-leaf); }
.t4-crumb [aria-current] { color: rgba(31,31,31,.62); }

@media (max-width: 768px) {
  /* Figma mobile (1093:10447) vẫn 13px, KHÔNG co xuống 10px như bản cũ. */
  .t4-crumb ol { padding: 18px 0; font-size: 13px; gap: 6px; }
  .t4-crumb li + li::before { margin-right: 6px; }
}

/* ---- Hero (913:7412) — chỉ cao 480px, chữ căn giữa, phủ đen 25% ---- */
.t4-hero--dvgm { min-height: 480px; }
.t4-hero--dvgm .t4-hero-overlay { background: rgba(0,0,0,.25); }
.t4-hero--dvgm .t4-hero-inner h1 {
  color: var(--t4-light); font-size: 40px; line-height: 53px; font-weight: 600; margin: 0 auto 16px;
}
.t4-hero-eyebrow--lg {
  font-family: var(--t4-font-body); font-weight: 500; font-size: 24px;
  line-height: 33px; letter-spacing: .1em; margin: 0 0 4px;
}
.t4-hero-desc--bold {
  font-weight: 800; font-size: 20px; line-height: 35px; max-width: 704px;
}
.t4-hero--dvgm .t4-hero-actions { margin-top: 32px; gap: 24px; }

/* Nút trắng đặc trên nền ảnh — node 913:7428 */
.t4-btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 24px; border-radius: var(--t4-radius-btn);
  background: var(--t4-white); color: var(--t4-text);
  font-family: var(--t4-font-body); font-weight: 700; font-size: 14px;
  text-decoration: none; border: 2px solid var(--t4-white);
  transition: background-color .2s ease, color .2s ease;
}
.t4-btn-white:hover { background: transparent; color: var(--t4-white); }

@media (max-width: 768px) {
  /* ⚠ Sửa 15/08/2026 (Bước 5a, QA trang #3): dữ liệu THÔ Figma node
     1093:11268 (Container hero mobile) xác nhận paddingTop/Bottom = 64
     (không phải 40 như bản trước tự đặt) — site cao 442px thay vì 650px
     Figma (-32%). */
  .t4-hero--dvgm { min-height: 0; padding: 64px 0; }
  .t4-hero--dvgm .t4-hero-inner h1 { font-size: 32px; line-height: 42px; }
  /* Figma: 24/32.78, không phải 20/28. */
  .t4-hero-eyebrow--lg { font-size: 24px; line-height: 33px; }
  /* Figma: cỡ chữ 16 đúng, nhưng line-height GIỮ NGUYÊN 35 (không co theo
     cỡ chữ như desktop→mobile của phần lớn lớp chữ khác) — lineHeightPercentFontSize
     218.75%, xác nhận từ node text thật, không phải suy đoán. */
  .t4-hero-desc--bold { font-size: 16px; line-height: 35px; }
  .t4-hero--dvgm .t4-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ---- ĐẢO THỨ TỰ KHỐI TRÊN MOBILE ----------------------------------------
   Bản mobile (1093:11223) đưa "Lý do đồng hành" lên ngay sau hero, desktop
   để gần cuối. Dùng `order` thay vì nhân đôi DOM — khối đó dài 2.100px và
   chứa casestudy, nhân đôi là hai bản chữ phải sửa song song về sau.
   ------------------------------------------------------------------------ */
.t4-dvgm-flow { display: flex; flex-direction: column; }

@media (max-width: 768px) {
  .t4-dvgm-flow > .t4-dvgm-lydo { order: -1; }
}

/* ---- Hai cột chữ | minh hoạ (355:3936 · 1211:8038) ---- */
.t4-split {
  display: grid; grid-template-columns: 528px 1fr; gap: 46px;
  align-items: center; margin-bottom: 56px;
}
.t4-split-text h2, .t4-split-text .t4-h2 { margin: 0 0 24px; }
.t4-split-text p { color: var(--t4-gray); margin: 0 0 32px; }
.t4-split-media img { width: 100%; height: auto; }

@media (max-width: 768px) {
  .t4-split { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .t4-split--dao .t4-split-media { order: -1; }
  /* ⚠ Sửa 15/08/2026 (Bước 5a, trang #4): `.t4-split { display: grid }` ở
     trên là rule KHÔNG có @media (áp mọi viewport), specificity (0,1,0)
     bằng đúng `.t4-only-desktop` — đứng SAU trong file nên THẮNG, làm khối
     "chỉ hiện desktop" lộ ra CẢ TRÊN MOBILE khi hai class này ghép chung
     một thẻ (`.t4-split.t4-only-desktop`). Đúng bẫy bài học 35, dạng mới:
     không phải rule tự viết mới đấu specificity, mà HAI class có sẵn ghép
     lần đầu với nhau. Ghim selector kép để chắc chắn thắng specificity.
     Tổng quát cho MỌI kết hợp `.t4-split` + `.t4-only-desktop` sau này. */
  .t4-split.t4-only-desktop { display: none; }
}

/* Nút xanh lá đặc — node 355:4003, 711:18269, 717:26214 */
.t4-btn-green {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 28px; border-radius: 5px;
  background: var(--t4-leaf); color: var(--t4-white);
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; transition: background-color .2s ease;
}
.t4-btn-green:hover, .t4-btn-green:focus { background: var(--t4-dark-moss); color: var(--t4-white); }

/* ---- Lưới 8 ngành nghề (355:3745) — ô ngăn nhau bằng kẻ dọc ---- */
.t4-nganh {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(31,31,31,.12);
}
.t4-nganh-item {
  padding: 24px 16px 32px;
  border-bottom: 1px solid rgba(31,31,31,.12);
  border-right: 1px solid rgba(31,31,31,.12);
}
.t4-nganh-item:nth-child(4n) { border-right: 0; }
.t4-nganh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.t4-nganh-icon { width: 51px; height: 51px; }
.t4-nganh-tick { width: 24px; height: 25px; flex: 0 0 auto; }
.t4-nganh-item h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 18px;
  line-height: 26px; margin: 16px 0 12px;
}
.t4-nganh-item ul { list-style: none; margin: 0; padding: 0; }
.t4-nganh-item ul li {
  position: relative; padding-left: 14px; margin-bottom: 8px;
  font-size: 14px; line-height: 22px; color: var(--t4-gray);
}
.t4-nganh-item ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--t4-camel);
}

@media (max-width: 768px) {
  .t4-nganh { grid-template-columns: 1fr 1fr; }
  .t4-nganh-item { padding: 20px 12px 24px; }
  .t4-nganh-item:nth-child(4n) { border-right: 1px solid rgba(31,31,31,.12); }
  .t4-nganh-item:nth-child(2n) { border-right: 0; }
}

/* ---- Đầu section hai cột: tiêu đề trái | mô tả phải (277:2540) ---- */
.t4-head-2col {
  display: grid; grid-template-columns: 397px 511px; gap: 172px;
  align-items: start; margin-bottom: 56px;
}
.t4-head-2col h2 { margin: 0; }
.t4-head-2col p { margin: 0; color: var(--t4-gray); }

@media (max-width: 1140px) { .t4-head-2col { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 768px)  { .t4-head-2col { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } }

/* ---- Thẻ chiến dịch (268:4568 · 276:1902) ---- */
.t4-cd-row { display: grid; gap: 16px; margin-bottom: 16px; }
.t4-cd-row--3 { grid-template-columns: repeat(3, 1fr); }
.t4-cd-row--4 { grid-template-columns: repeat(4, 1fr); }

.t4-cd-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 24px 40px; border-radius: 30px;
  background: var(--t4-white); box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.t4-cd-card.is-noi-bat {
  background: linear-gradient(180deg, var(--t4-leaf) 0%, var(--t4-dark-moss) 100%);
  color: var(--t4-white);
}
.t4-cd-icon { width: 72px; height: 72px; margin-bottom: 24px; }
.t4-cd-card h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 24px;
  line-height: 32px; margin: 0 0 6px;
}
.t4-cd-row--4 .t4-cd-card h3 { font-size: 20px; line-height: 28px; }
.t4-cd-card.is-noi-bat h3 { color: var(--t4-white); }
.t4-cd-phu { font-weight: 500; font-size: 16px; color: var(--t4-muted); margin: 0 0 auto; }
.t4-cd-card.is-noi-bat .t4-cd-phu { color: rgba(255,255,255,.85); }
.t4-cd-link {
  margin-top: 32px; font-weight: 600; font-size: 14px;
  color: var(--t4-text); text-decoration: none;
}
.t4-cd-link:hover { text-decoration: underline; }
.t4-cd-card.is-noi-bat .t4-cd-link { color: var(--t4-white); }

@media (max-width: 768px) {
  /* ⚠ Sửa 15/08/2026 (Bước 5a): dữ liệu THÔ Figma mobile (1093:15008) cho
     thấy nhóm 3 thẻ "Chiến dịch tìm kiếm" là HORIZONTAL với card rộng 235px
     trên khung 352px (3×235=705, vượt hẳn khung) — tức SLIDER CUỘN NGANG,
     không phải lưới 2 cột như nhóm 4 thẻ "video" (1093:15051, kiểu GRID
     2×2, 170px/ô, VỪA KHÍT khung 352px). Trước đây áp chung một rule 2 cột
     cho cả hai, làm nhóm 3 thẻ cao hơn Figma 16.4%. */
  .t4-cd-row--3 {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-right: -15px;
  }
  .t4-cd-row--3 > .t4-cd-card { flex: 0 0 67%; scroll-snap-align: start; }
  .t4-cd-row--3::-webkit-scrollbar { display: none; }
  .t4-cd-row--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .t4-cd-card { padding: 32px 14px 24px; border-radius: 20px; }
  .t4-cd-icon { width: 56px; height: 56px; margin-bottom: 16px; }
  .t4-cd-card h3, .t4-cd-row--4 .t4-cd-card h3 { font-size: 16px; line-height: 24px; }
  .t4-cd-phu { font-size: 14px; }
  .t4-cd-link { margin-top: 20px; }
}

/* ---- Ba gói dịch vụ (711:18230) ---- */
.t4-goi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t4-goi {
  display: flex; flex-direction: column;
  padding: 32px 25px; border-radius: 16px;
  background: var(--t4-white); box-shadow: 1px 3px 8px rgba(0,0,0,.1);
}
.t4-goi-so {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 16px; margin: 0;
}
.t4-goi-so .material-symbols-outlined { font-size: 20px; color: var(--t4-leaf); }
.t4-goi h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 28px;
  line-height: 35px; margin: 0 0 16px;
}
.t4-goi-mo-ta { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0; }
.t4-goi-quy-trinh { font-weight: 600; font-size: 14px; margin: 0 0 12px; }
.t4-goi-buoc { list-style: none; margin: 0 0 auto; padding: 0; }
.t4-goi-buoc li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14px; line-height: 22px; color: var(--t4-gray);
}
.t4-goi-buoc li::before {
  content: "check"; position: absolute; left: 0; top: 1px;
  font-family: 'Material Symbols Outlined'; font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  color: var(--t4-camel);
}
.t4-goi-nut { margin-top: 32px; }

@media (max-width: 768px) {
  /* ⚠ Sửa 15/08/2026 (Bước 5a): Figma mobile (1093:15126, thẻ "Gói 1") rộng
     377px > khung nội dung 352px — xác nhận đây là SLIDER CUỘN NGANG (đúng
     mẫu `.t4-scroll-x` đã dùng ở #chay-thue), KHÔNG PHẢI xếp dọc full-width
     như bản trước. Xếp dọc làm section cao 2123px thay vì 1010px Figma
     (+110%) vì 3 thẻ cộng dồn chiều cao thay vì cuộn ngang chỉ tốn 1 hàng. */
  .t4-goi-row {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-right: -15px;
  }
  .t4-goi-row > .t4-goi { flex: 0 0 82%; scroll-snap-align: start; }
  .t4-goi-row::-webkit-scrollbar { display: none; }
  .t4-goi { padding: 24px 20px; }
  .t4-goi h3 { font-size: 22px; line-height: 30px; }
}

/* ---- Băng chuyền "Các dịch vụ khác" (320:1468) --------------------------
   Nền: #FCFBF6 phủ gradient kem ngang, đúng node I320:1468;279:7346.
   ------------------------------------------------------------------------ */
.t4-bg-dvk {
  background-color: var(--t4-light);
  background-image: linear-gradient(180deg, #EFE8DA 0%, #EBE0CB 50%, #EFE8DA 100%);
}

.t4-bang-chuyen { position: relative; }

.t4-bc-ray {
  list-style: none; margin: 0; padding: 8px 4px 16px;
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.t4-bc-ray::-webkit-scrollbar { display: none; }
.t4-bc-ray { scrollbar-width: none; }

.t4-bc-the {
  flex: 0 0 335px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--t4-white); border: 1px solid var(--t4-light);
  border-radius: 24px; box-shadow: 3px 3px 8px rgba(0,0,0,.25);
  overflow: hidden;
}
.t4-bc-anh { width: 100%; height: 260px; object-fit: cover; }
.t4-bc-than { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.t4-bc-than h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 18px;
  line-height: 26px; margin: 0 0 12px;
}
.t4-bc-than p { font-size: 15px; line-height: 24px; color: var(--t4-gray); margin: 0 0 auto; }
.t4-bc-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
  padding-top: 16px; border-top: 1px solid rgba(31,31,31,.12);
  font-size: 12px; font-weight: 600; color: var(--t4-text); text-decoration: none;
}
.t4-bc-link .material-symbols-outlined { font-size: 16px; }
.t4-bc-link:hover { color: var(--t4-camel-border); }
/* Thẻ chưa có trang đích — hiện y hệt nhưng không bấm được */
.t4-bc-link.is-cho { color: var(--t4-muted); cursor: default; }

.t4-bc-nut {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--t4-white); border: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); color: var(--t4-text);
}
.t4-bc-nut:hover { background: var(--t4-leaf); color: var(--t4-white); }
.t4-bc-nut--truoc { left: -24px; }
.t4-bc-nut--sau { right: -24px; }

@media (max-width: 1140px) {
  .t4-bc-nut--truoc { left: 0; }
  .t4-bc-nut--sau { right: 0; }
}
@media (max-width: 768px) {
  .t4-bc-the { flex: 0 0 82%; border-radius: 16px; }
  .t4-bc-anh { height: 200px; }
  .t4-bc-than { padding: 18px; }
  .t4-bc-nut { display: none; } /* mobile vuốt tay, không cần nút */
}

/* ---- Lý do đồng hành (31:104) ---- */
.t4-ly-do-h2 { font-size: 50px; line-height: 58px; margin-bottom: 56px; }
.t4-sep--rong { margin: 40px 0; }

.t4-ly-do {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 60px;
}
.t4-ly-do li {
  position: relative; padding-left: 22px;
  font-size: 16px; line-height: 26px; color: var(--t4-gray);
}
.t4-ly-do li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--t4-camel);
}

/* Khối chỉ có ở bản mobile — node 1093:12914 */
.t4-da-nganh-mb { margin-top: 40px; }
.t4-da-nganh-mb p { color: var(--t4-gray); }

.t4-case-label { margin-top: 64px; }

@media (max-width: 768px) {
  .t4-ly-do-h2 { font-size: 26px; line-height: 36px; margin-bottom: 32px; }
  .t4-ly-do { grid-template-columns: 1fr; gap: 12px; }
  .t4-case-label { margin-top: 40px; }
}

/* ---- CTA cuối trang (717:26207) — thẻ trắng trên nền kem ---- */
.t4-cta-hop { padding: 80px 0; }
.t4-cta-the {
  background: var(--t4-white); border-radius: 10px; padding: 40px;
}
.t4-cta-the h2 { margin: 0 0 16px; }
.t4-cta-the p { margin: 0; color: var(--t4-gray); }
.t4-cta-the-nut { display: flex; justify-content: flex-end; margin-top: 30px; }

@media (max-width: 768px) {
  /* ⚠ Sửa 15/08/2026 (Bước 5a): Figma mobile (1093:15245) padding vẫn 80/80,
     KHÔNG co nửa xuống 40 như desktop→mobile của phần lớn khối khác — bản
     trước tự co làm section thấp hơn Figma 18.1%. Cùng loại bẫy đã gặp ở
     CTA ve-chung-toi (class `.t4-cta`, khác `.t4-cta-hop` ở đây). */
  .t4-cta-hop { padding: 80px 0; }
  .t4-cta-the { padding: 24px 20px; }
  .t4-cta-the-nut { justify-content: stretch; margin-top: 24px; }
  .t4-cta-the-nut .t4-btn-green { width: 100%; }
}

/* ---- FAQ (31:581 + 31:591) ---- */
/* ⚠ `h2.t4-faq-h2` (tag+class), KHÔNG rút gọn `.t4-faq-h2` — class đơn thua
   độ ưu tiên `.t4 h2` (class+tag = (0,1,1)) dù đặt sau trong file, đúng bẫy
   đã ghi ở CLAUDE.md mục "Độ ưu tiên CSS" (bài học 19). */
h2.t4-faq-h2 { color: var(--t4-camel-dark); margin-bottom: 48px; }
.t4-faq-nhom + .t4-faq-nhom { margin-top: 48px; }
.t4-faq-nhom > h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 24px;
  line-height: 33px; text-align: center; margin: 0 0 24px;
}
.t4-faq-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
.t4-faq-muc { background: var(--t4-cream); border-radius: 16px; }

.t4-faq-hoi {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--t4-font-body); font-size: 18px; line-height: 26px;
  color: var(--t4-text); text-align: left;
}
.t4-faq-hoi .material-symbols-outlined { flex: 0 0 auto; transition: transform .2s ease; }
.t4-faq-hoi[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.t4-faq-dap { padding: 0 24px 20px; font-size: 16px; line-height: 26px; color: var(--t4-gray); }
.t4-faq-dap p { margin: 0; }

@media (max-width: 768px) {
  .t4-faq-h2 { margin-bottom: 28px; }
  .t4-faq-luoi { grid-template-columns: 1fr; gap: 12px; }
  .t4-faq-nhom > h3 { font-size: 20px; line-height: 28px; }
  .t4-faq-hoi { font-size: 16px; line-height: 24px; padding: 16px 18px; }
  .t4-faq-dap { padding: 0 18px 16px; font-size: 14px; line-height: 24px; }
}
.t4-bc-nut:disabled { opacity: .35; cursor: default; }
.t4-bc-nut:disabled:hover { background: var(--t4-white); color: var(--t4-text); }

/* --------------------------------------------------------------------------
   18. VÁ ĐỘ ƯU TIÊN MÀU CHỮ CỦA NÚT — thêm 15/08/2026
   -------------------------------------------------------------------------- 
   Mục 2 có `.t4 a { color: inherit; }`. Bộ chọn đó là (0,1,1) — CAO HƠN mọi
   lớp nút một-class như `.t4-btn` (0,1,0). Nên mọi nút dạng <a> đều bị ép
   thừa kế màu chữ của khối cha, bỏ qua màu đã khai báo.

   Hậu quả đã đo được trên trang Dịch vụ Google Marketing:
     · .t4-btn-white  → trắng trên trắng, nút TRỐNG TRƠN
     · .t4-btn-green  → #1F1F1F trên nền xanh, lẽ ra phải trắng
     · .t4-link-all   → #1F1F1F, lẽ ra camel #AF6928

   Vá bằng cách nâng độ ưu tiên (thêm `.t4` phía trước) chứ KHÔNG gỡ
   `.t4 a { color: inherit }` — quy tắc đó đang giữ cho link trong thân bài
   thừa kế đúng màu của khối chứa nó.

   ⚠ Khối này áp cho CẢ SITE, không riêng một trang. Thêm lớp nút mới ở trang
   sau thì nhớ khai báo màu tại đây, nếu không lại dính đúng cái bẫy này.
   -------------------------------------------------------------------------- */
.t4 a.t4-btn         { color: var(--t4-white); }
.t4 a.t4-btn:hover,
.t4 a.t4-btn:focus   { color: var(--t4-white); }

.t4 a.t4-btn-ghost        { color: var(--t4-camel-border); }
.t4 a.t4-btn-ghost:hover,
.t4 a.t4-btn-ghost:focus  { color: var(--t4-white); }

.t4 a.t4-btn-on-dark        { color: var(--t4-white); }
.t4 a.t4-btn-on-dark:hover  { color: var(--t4-dark-moss); }

.t4 a.t4-btn-white        { color: var(--t4-text); }
.t4 a.t4-btn-white:hover  { color: var(--t4-white); }

.t4 a.t4-btn-green        { color: var(--t4-white); }
.t4 a.t4-btn-green:hover,
.t4 a.t4-btn-green:focus  { color: var(--t4-white); }

/* ⚠ SỬA 15/08/2026 theo Bước 2c: Figma là Dark Moss #155446, không phải camel.
   Ghi chú "lẽ ra camel #AF6928" ở đầu mục 18 là SUY ĐOÁN từ ảnh chụp một trang,
   không phải số đo — kiểm kê toàn file cho 16/19 lớp "Xem tất cả" là #155446. */
.t4 a.t4-link-all { color: var(--t4-dark-moss); }


/* ==========================================================================
   19. TRANG "XỬ LÝ LỖI & VI PHẠM GOOGLE" (node 711:16106 / 1113:8613)
   Thêm 15/08/2026 — Giai đoạn 3, trang thứ 3.

   Dùng LẠI từ mục 17: .t4-crumb · .t4-hero--dvgm · .t4-split · .t4-head-2col
   · .t4-ly-do · .t4-sep--rong · .t4-cta-hop · .t4-btn-green · .t4-label-row.
   Dưới đây chỉ là phần RIÊNG của trang này.
   ========================================================================== */

/* Tiêu đề màu xanh đậm + cụm nhấn màu camel (node 715:25540) */
.t4-h2-moss { color: var(--t4-dark-moss); }
.t4-nhan-cam { color: var(--t4-camel); }

/* ⛔ ĐÍNH CHÍNH 16/08/2026 (audit độc lập) — rule 50px/500 của phiên 15/08 đã
   XOÁ. Nó đọc "style" (base) của node text 1036:47425/1385:12151 — nhưng
   `characterStyleOverrides` phủ 100% chuỗi "Làm việc với 4T có gì khác
   biệt", nên base 50/500 đó KHÔNG BAO GIỜ thực sự hiển thị. Số liệu THẬT
   đo trên từng ký tự (đoạn Playfair SemiBold, chiếm hầu hết chuỗi):
   desktop 40px/53,32 · mobile 32px/42,656 — TRÙNG KHỚP TUYỆT ĐỐI với mặc
   định `.t4 h2, .t4-h2` (40/53 desktop · 32/43 mobile) đã có sẵn toàn site.
   Nên KHÔNG CẦN rule riêng nào nữa — bỏ hẳn, để H2 rơi về đúng mặc định.
   (Kết luận "mobile giữ nguyên line-height 50" của phiên 15/08 cũng sai
   cùng nguyên nhân — 50 là số liệu base chưa từng render, không phải số đo
   ký tự thật.) Đoạn ký tự "4" riêng dùng Times New Roman Bold — xem
   `.t4-so-4-tnr` — không ảnh hưởng line-height của cả dòng vì chỉ 1 ký tự.
   Rule id `#khac-biet` từng phải khoá theo `body.page-template-*` để không
   đè sang `ve-chung-toi` (bài học 44) — nay rule không còn tồn tại nên rủi
   ro đó cũng hết, không cần khoá gì nữa. */

/* Đoạn kết khối "Mô tả dịch vụ" — đậm, xanh đậm (override ký tự 715:25541) */
/* `p.t4-nhan-manh` (tag+class), KHÔNG rút gọn `.t4-nhan-manh` — class đơn thua
   độ ưu tiên `.t4-split-text p` (class+tag), đúng bẫy bài học 19 CLAUDE.md. */
p.t4-nhan-manh { font-weight: 700; color: var(--t4-dark-moss); }

/* ---- Minh hoạ nằm BÊN TRÁI trên desktop (node 711:16432) ----------------
   Khác trang #3: ở đó minh hoạ luôn bên phải. Trên mobile vẫn xếp dọc theo
   thứ tự tự nhiên (ảnh trước, chữ sau) nên KHÔNG cần đảo lại.
   ------------------------------------------------------------------------ */
.t4-split--anh-trai { grid-template-columns: 1fr 528px; }
.t4-split--anh-trai .t4-split-media { order: -1; }

@media (max-width: 768px) {
  .t4-split--anh-trai { grid-template-columns: 1fr; }
}

/* ---- Bốn thẻ gói có ảnh minh hoạ (node 712:22285) ---- */
.t4-goi-anh-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.t4-goi-anh {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 16px 32px; border-radius: 16px;
  background: var(--t4-white); box-shadow: 3px 3px 8px rgba(0,0,0,.15);
}
.t4-goi-anh-hinh {
  height: 158px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.t4-goi-anh-hinh img { max-height: 158px; width: auto; }
.t4-goi-anh h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 22px;
  line-height: 28px; margin: 0 0 auto;
}
.t4-goi-anh-nut { margin-top: 24px; width: 100%; }

@media (max-width: 768px) {
  /* ⚠ Sửa 15/08/2026 (Bước 5a): Figma mobile (1113:9217) xếp 4 thẻ HORIZONTAL
     mỗi thẻ 258px trong khung 352px (4×258=1032, vượt hẳn khung) — SLIDER
     CUỘN NGANG, đúng bẫy đã gặp ở trang #3 (`.t4-goi-row`). Lưới 2 cột trước
     đó làm section cao hơn Figma 37.5%. */
  .t4-goi-anh-row {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-right: -15px;
  }
  .t4-goi-anh-row > .t4-goi-anh { flex: 0 0 73%; scroll-snap-align: start; }
  .t4-goi-anh-row::-webkit-scrollbar { display: none; }
  .t4-goi-anh { padding: 24px 12px 20px; }
  .t4-goi-anh-hinh { height: 110px; margin-bottom: 16px; }
  .t4-goi-anh-hinh img { max-height: 110px; }
  .t4-goi-anh h3 { font-size: 16px; line-height: 22px; }
}

/* ---- Khối "Quy trình thực hiện của 4T" (node 711:16416) -----------------
   Nửa TRÊN có dải nền riêng #F8F5EE tràn hết bề ngang (node 712:19354), nửa
   dưới về lại nền trang. Vì vậy section này KHÔNG dùng .t4-section mà tự đặt
   khoảng cách, nếu không dải nền sẽ bị đệm hai lớp.
   ------------------------------------------------------------------------ */
.t4-quy-trinh { background: var(--t4-light); padding-bottom: 100px; }
.t4-qt-dai { background: #F8F5EE; padding: 60px 0 40px; margin-bottom: 60px; }
.t4-split--qt { margin-bottom: 0; align-items: center; }

.t4-qt-kicker {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 25px;
  line-height: 34px; color: var(--t4-ink); margin: 0 0 8px;
}
.t4-split--qt .t4-split-text p:last-child { color: var(--t4-ink); margin: 0; }

/* Hai cột giai đoạn, ngăn nhau bằng kẻ dọc */
.t4-gd-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.t4-gd-luoi > .t4-gd + .t4-gd { border-left: 1px solid rgba(31,31,31,.12); padding-left: 60px; }

.t4-gd h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 22px; color: var(--t4-dark-moss); margin: 0;
}
.t4-gd p { font-size: 14px; line-height: 22px; margin: 0 0 12px; }
.t4-gd .t4-sep { margin: 14px 0; }
/* ⚠ Sửa 15/08/2026 (Bước 2d): Figma tách "Chi phí: " (Medium 500 #155446) và
   "2.000.000 VNĐ" (ExtraBold 800, kế thừa màu leaf #458763 của cả cụm) —
   trước đó cả câu dùng chung 1 kiểu (700), sai cả 2 nửa. */
.t4-gd-chi-phi { font-weight: 800; font-size: 16px; color: var(--t4-leaf); margin: 0 !important; }
.t4-gd-chi-phi-nhan { font-weight: 500; color: var(--t4-dark-moss); }

.t4-gd-muc { list-style: none; margin: 0; padding: 0; }
.t4-gd-muc li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: 14px; line-height: 22px; color: var(--t4-gray);
}
.t4-gd-muc li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--t4-camel);
}

/* Hai ô "Phương án" đặt cạnh nhau trong Giai đoạn 2 */
.t4-phuong-an { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.t4-pa-ten { font-weight: 700; font-size: 14px; color: var(--t4-camel-dark); margin: 0 0 6px; }

.t4-luu-y { margin-top: 56px; }
.t4-luu-y h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px; margin: 0;
}

/* ⚠ Thêm khi QA trang #4 (15/08/2026): danh sách 5 bước CHỈ CÓ Ở MOBILE —
   node 1113:9394, thay cho khối "Giai đoạn 1/2" chi tiết của desktop. Badge
   tròn viền xám của Figma dùng font "Lexend Deca" (không có trong bộ font
   site, gần như chắc chắn là artifact chưa tinh chỉnh của component mẫu) —
   đổi sang Manrope cho nhất quán site, giữ đúng kích thước/màu còn lại. */
.t4-qt-buoc { list-style: none; margin: 24px 0 0; padding: 0; }
.t4-qt-buoc > li { display: flex; gap: 16px; }
.t4-qt-buoc > li + li { margin-top: 20px; }
.t4-qt-buoc-so {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--t4-white); border: 1px solid var(--t4-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--t4-font-body); font-weight: 600; font-size: 12px;
  color: var(--t4-text);
}
.t4-qt-buoc h4 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 14px;
  line-height: 20px; margin: 0 0 6px;
}
.t4-qt-buoc p { font-size: 14px; line-height: 20px; color: var(--t4-gray); margin: 0; }

@media (max-width: 768px) {
  .t4-quy-trinh { padding-bottom: 48px; }
  .t4-qt-dai { padding: 40px 0 24px; margin-bottom: 32px; }
  .t4-qt-kicker { font-size: 18px; line-height: 26px; }
  .t4-gd-luoi { grid-template-columns: 1fr; gap: 32px; }
  .t4-gd-luoi > .t4-gd + .t4-gd { border-left: 0; padding-left: 0; padding-top: 32px; border-top: 1px solid rgba(31,31,31,.12); }
  .t4-phuong-an { grid-template-columns: 1fr; gap: 16px; }
  .t4-luu-y { margin-top: 32px; }
}


/* ==========================================================================
   20. NHÓM TRANG "GG MARKETING" #5 · #6 · #7 (GMC · Tracking · Google Maps)
   Thêm 15/08/2026. Ba trang dùng CHUNG template-parts/trang-gg-marketing.php,
   nên phần CSS riêng cũng gom về đây thay vì ba mục.
   ========================================================================== */

/* Danh sách có dấu tích ở khối "Mô tả dịch vụ" (Manrope 14/700, chữ #666) */
.t4-tich { list-style: none; margin: 20px 0 0; padding: 0; }
.t4-tich li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 14px; line-height: 22px; font-weight: 700; color: #666666;
}
.t4-tich li::before {
  content: "check"; position: absolute; left: 0; top: 0;
  font-family: 'Material Symbols Outlined'; font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  color: var(--t4-leaf);
}

/* Lưới gói 3 thẻ (GMC, Google Maps) — 4 thẻ đã có ở mục 19 */
.t4-goi-anh-row--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .t4-goi-anh-row--3 { grid-template-columns: 1fr 1fr; }
}

/* ---- Lưới giai đoạn KHÔNG kẻ dọc ---------------------------------------
   Trang #4 chỉ có 2 giai đoạn nên ngăn nhau bằng kẻ dọc. Ba trang này có 5
   giai đoạn xếp 2 cột, Figma KHÔNG vẽ kẻ ngăn — nên phải gỡ đúng quy tắc
   viền của mục 19, nếu không cột phải sẽ mọc một đường kẻ không có trong
   thiết kế.
   ------------------------------------------------------------------------ */
.t4-gd-luoi--don { gap: 40px 60px; }
.t4-gd-luoi--don > .t4-gd + .t4-gd { border-left: 0; padding-left: 0; }
.t4-gd-luoi--don .t4-gd h3 { margin-bottom: 8px; }
.t4-gd-luoi--don .t4-gd p { margin: 0; }

@media (max-width: 768px) {
  .t4-gd-luoi--don { gap: 24px; }
  .t4-gd-luoi--don > .t4-gd + .t4-gd { border-top: 0; padding-top: 0; }
}


/* ==========================================================================
   21. BA TRANG PHỤ TƯ VẤN CHIẾN LƯỢC #11 · #12 · #13
   Thêm 15/08/2026. Ba trang dùng chung template-parts/trang-tu-van-chien-luoc.php.
   ========================================================================== */

.t4-tvcl { padding-top: 40px; }

.t4-quay-lai { margin: 0 0 32px; }
.t4-quay-lai a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; text-decoration: none; color: var(--t4-text);
}
.t4-quay-lai .material-symbols-outlined { font-size: 20px; color: var(--t4-leaf); }
.t4-quay-lai a:hover { color: var(--t4-leaf); }

/* Cột trái hẹp, thẻ trắng bên phải — theo đúng tỉ lệ node 1012:10928 */
.t4-tvcl-luoi { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: start; }

.t4-tvcl-trai h1 {
  font-family: var(--t4-font-body); font-size: 32px; line-height: 42px;
  font-weight: 700; color: var(--t4-dark-moss); margin: 0 0 20px;
}
.t4-tvcl-dan { font-weight: 700; font-size: 16px; line-height: 26px; margin: 0 0 20px; }

/* Thẻ trắng chứa toàn bộ lộ trình */
.t4-tvcl-the {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 40px;
}
.t4-tvcl-hoi {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 20px;
  color: var(--t4-dark-moss); margin: 0 0 24px;
}

.t4-tvcl-gd + .t4-tvcl-gd { margin-top: 40px; }
/* Khung ảnh trong Figma là 640×360 (16:9) nhưng ảnh gốc có tỉ lệ khác (3:2,
   thậm chí gần vuông) — Figma CẮT theo khung. Không cắt lại ở đây thì ảnh cao
   vống lên và đẩy lệch cả thẻ. */
.t4-tvcl-anh {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; margin-bottom: 20px; display: block;
}
.t4-tvcl-gd h2 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 18px;
  line-height: 26px; color: var(--t4-text); margin: 0 0 12px;
}
.t4-tvcl-mo { font-size: 14px; line-height: 22px; color: #353535; margin: 0 0 16px; }
.t4-tvcl-gd h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 24px; margin: 24px 0 10px;
}

/* Hộp "Đầu ra đạt được" — nền kem nhạt để tách khỏi phần mô tả */
.t4-tvcl-dau-ra {
  background: #F8F5EE; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;
}
.t4-tvcl-dau-ra-nhan {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; margin: 0 0 6px;
}
.t4-tvcl-dau-ra-nhan .material-symbols-outlined { font-size: 18px; color: var(--t4-camel); }
.t4-tvcl-dau-ra p { font-size: 12px; line-height: 20px; color: #353535; margin: 0; }

/* Biến thể nhỏ của danh sách dấu tích (mục 20) dùng trong thẻ */
.t4-tich--nho li { font-weight: 400; color: var(--t4-text); font-size: 14px; }

@media (max-width: 768px) {
  .t4-tvcl { padding-top: 24px; }
  .t4-tvcl-luoi { grid-template-columns: 1fr; gap: 28px; }
  .t4-tvcl-trai h1 { font-size: 24px; line-height: 32px; }
  .t4-tvcl-the { padding: 20px; }
  .t4-tvcl-gd + .t4-tvcl-gd { margin-top: 28px; }
}


/* ==========================================================================
   22. TRANG "TRUYỀN THÔNG THƯƠNG HIỆU" #8 (node 547:3014 / 1385:12062)
   ========================================================================== */

.t4-bg-white { background: var(--t4-white); }
.t4-bg-kem   { background: #F8F5EE; }

/* Bốn cột "khác biệt", ngăn nhau bằng kẻ dọc (node 559:4160) */
.t4-kb-cot {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.t4-kb-cot > li { padding: 32px 28px; border-right: 1px solid rgba(31,31,31,.12); }
.t4-kb-cot > li:last-child { border-right: 0; }
.t4-kb-icon, .t4-kb-icon-font { display: block; width: 45px; height: 45px; margin-bottom: 20px; }
.t4-kb-icon-font { font-size: 40px; color: var(--t4-camel); }
.t4-kb-cot h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 20px;
  line-height: 28px; margin: 0 0 12px;
}
.t4-kb-cot p { font-size: 16px; line-height: 26px; margin: 0; }

@media (max-width: 768px) {
  .t4-kb-cot { grid-template-columns: 1fr; }
  .t4-kb-cot > li { border-right: 0; border-bottom: 1px solid rgba(31,31,31,.12); padding: 24px 0; }
  .t4-kb-cot > li:last-child { border-bottom: 0; }
}

/* ---- Tab dạng viên thuốc (node 1034:9758) ------------------------------
   Khác tab casestudy: tab đang chọn là viên camel đặc, tab còn lại chỉ là chữ.
   ------------------------------------------------------------------------ */
.t4-tabs--pill { margin-top: 56px; }
.t4-tabs--pill .t4-tablist { gap: 16px; margin-bottom: 24px; }
.t4-tabs--pill .t4-tab {
  border: 0; background: transparent; color: var(--t4-text);
  font-weight: 500; font-size: 16px; padding: 12px 20px; border-radius: 8px;
}
.t4-tabs--pill .t4-tab.is-active {
  background: var(--t4-camel); color: var(--t4-white); font-weight: 800;
}

/* Hộp trắng bao quanh nội dung mỗi tab */
.t4-goi-hop {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 32px;
}
.t4-goi-hop > h3 {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 34px;
  line-height: 44px; color: var(--t4-dark-moss); margin: 0;
}
.t4-goi-hop .t4-sep { margin: 20px 0 28px; }

.t4-goi-hop-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t4-goi-hop-luoi--2 { grid-template-columns: 1fr 1fr; }

.t4-goi-nho {
  display: flex; flex-direction: column;
  border: 1px solid rgba(31,31,31,.12); border-radius: 12px; padding: 24px;
}
.t4-goi-nho-icon { font-size: 30px; color: var(--t4-leaf); margin-bottom: 16px; }
.t4-goi-nho h4 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 20px;
  line-height: 28px; margin: 0 0 4px;
}
.t4-goi-nho-lon { font-size: 24px !important; line-height: 32px !important; color: var(--t4-dark-moss); }
.t4-goi-nho-phu { font-size: 11px; font-weight: 600; margin: 0 0 16px; color: var(--t4-muted); }
.t4-goi-nho-nhan { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.t4-goi-nho .t4-tich { margin: 0 0 auto; }
.t4-goi-nho .t4-bc-link { margin-top: 20px; }

/* Danh sách đánh số sẵn trong chữ (tab 2) — chỉ cần khoảng cách */
.t4-goi-buoc-so { list-style: none; margin: 0 0 auto; padding: 0; }
.t4-goi-buoc-so li { font-size: 14px; line-height: 22px; margin-bottom: 12px; }
.t4-goi-tru {
  font-size: 12px; font-weight: 600; color: var(--t4-muted);
  border-top: 1px solid rgba(31,31,31,.12); padding-top: 12px; margin: 16px 0 20px;
}

@media (max-width: 768px) {
  .t4-tabs--pill .t4-tablist { flex-direction: column; align-items: stretch; gap: 8px; }
  .t4-tabs--pill .t4-tab { text-align: left; font-size: 14px; padding: 10px 14px; }
  .t4-goi-hop { padding: 20px; }
  .t4-goi-hop > h3 { font-size: 22px; line-height: 30px; }
  .t4-goi-hop-luoi, .t4-goi-hop-luoi--2 { grid-template-columns: 1fr; gap: 16px; }
  .t4-goi-nho { padding: 18px; }
  .t4-goi-nho-lon { font-size: 20px !important; line-height: 28px !important; }
}

/* ---- Dải "Chương trình ưu đãi" (node 564:20352) ---- */
.t4-uu-dai { background: #F8F5EE; padding: 80px 0; }
.t4-uu-dai h2 {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 32px;
  line-height: 44px; color: var(--t4-dark-moss); margin: 0 0 28px;
}

@media (max-width: 768px) {
  .t4-uu-dai { padding: 40px 0; }
  .t4-uu-dai h2 { font-size: 22px; line-height: 32px; }
}


/* ==========================================================================
   23. TRANG "THIẾT KẾ & TỐI ƯU HẠ TẦNG WEB" #9 (node 564:21427 / 1385:14658)
   Dùng lại nhiều: .t4-bang-chuyen (mục 17) · .t4-faq-* (mục 17) ·
   .t4-split--anh-trai (mục 19) · .t4-cta-hop · .t4-tich.
   ========================================================================== */

/* Ba gói chăm sóc website (node 564:23323) */
.t4-goi-web-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px;
}
.t4-goi-web {
  display: flex; flex-direction: column;
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 32px 28px;
}
.t4-goi-web-icon { width: 29px; height: 30px; margin-bottom: 20px; }
.t4-goi-web h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 28px;
  line-height: 36px; margin: 0 0 12px;
}
.t4-goi-web p { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0 0 auto; }
.t4-goi-web-nut { margin-top: 24px; }

@media (max-width: 768px) {
  .t4-goi-web-row { grid-template-columns: 1fr; gap: 16px; }
  .t4-goi-web { padding: 24px 20px; }
  .t4-goi-web h3 { font-size: 22px; line-height: 30px; }
}

/* ---- Lưới "Giao diện miễn phí" (node 568:23721) ------------------------
   Ảnh trong Figma là ảnh chụp HubSpot nên CỐ Ý không bê sang; ô giữ chỗ dưới
   đây giữ đúng tỉ lệ 339×287 để khung không xô lệch khi có ảnh thật.
   ------------------------------------------------------------------------ */
.t4-tpl-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.t4-tpl { display: flex; flex-direction: column; }
.t4-tpl-anh {
  aspect-ratio: 339 / 287; border-radius: 12px; margin-bottom: 16px;
  background: repeating-linear-gradient(45deg, #EFE8DA, #EFE8DA 10px, #E6DDCB 10px, #E6DDCB 20px);
}
.t4-tpl-nhan { font-weight: 600; font-size: 14px; color: #777777; margin: 0 0 10px; }
.t4-tpl ul { list-style: none; margin: 0 0 auto; padding: 0; }
.t4-tpl li { font-size: 14px; line-height: 24px; }
.t4-tpl .t4-bc-link { margin-top: 16px; }

@media (max-width: 1140px) { .t4-tpl-luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .t4-tpl-luoi { grid-template-columns: 1fr; gap: 24px; } }

/* Đầu section chỉ có tiêu đề, cột phải để trống (node 568:25116) */
.t4-head-2col p:empty { display: none; }


/* ==========================================================================
   24. TRANG "TƯ VẤN CHIẾN LƯỢC & TRIỂN KHAI TỔNG THỂ" #10
   (node 568:25281 / 1385:16470) — khối lộ trình dài 7.813px, dài nhất site.
   ========================================================================== */

.t4-nhan-leaf { color: var(--t4-leaf); }

/* Ba nhóm khách hàng (node 568:25874) */
.t4-kh-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t4-kh {
  display: flex; flex-direction: column;
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 28px 24px;
}
.t4-kh h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 24px;
  line-height: 32px; margin: 0 0 4px;
}
.t4-kh-dt { font-size: 11px; font-weight: 600; color: var(--t4-muted); margin: 0 0 18px; }
.t4-kh-nhan { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.t4-kh .t4-tich { margin: 0 0 auto; }
.t4-kh-nut { margin-top: 22px; }

@media (max-width: 768px) {
  .t4-kh-luoi { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Bảng hiệu lộ trình (node 984:9351) ---- */
.t4-lo-trinh-bia { background: #F8F5EE; padding: 60px 0; }
.t4-lo-trinh-bia .t4-split { margin-bottom: 0; align-items: center; }
h2.t4-lt-title {
  font-family: var(--t4-font-body); font-weight: 800; font-size: 38px;
  line-height: 48px; margin: 0 0 14px;
}
.t4-lt-sub { font-size: 16px; color: var(--t4-camel); margin: 0 0 20px; }
.t4-lt-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.t4-lt-chip li {
  background: var(--t4-white); border-radius: 999px; padding: 8px 16px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
}

@media (max-width: 768px) {
  .t4-lo-trinh-bia { padding: 36px 0; }
  h2.t4-lt-title { font-size: 24px; line-height: 32px; }
}

/* ---- Tiêu đề "Tổng quan lộ trình tư vấn" (node 1010:8999) — nhỏ hơn H2 mặc định ---- */
#lo-trinh h2 { font-size: 36px; line-height: 48px; }

/* ---- Bảng tổng quan 7 phase (node 1010:9834) ---- */
.t4-tq-luoi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0 72px;
}
.t4-tq {
  background: var(--t4-white); border-radius: 12px; padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.t4-tq-so   { font-size: 14px; font-weight: 700; color: #777777; margin: 0 0 6px; }
.t4-tq-ngan { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.t4-tq-day  { font-size: 14px; line-height: 22px; margin: 0 0 12px; }
.t4-tq-tuan { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.t4-tq-out  { font-size: 14px; font-weight: 700; color: #777777; margin: 0; }

@media (max-width: 768px) { #lo-trinh h2 { font-size: 32px; line-height: 43px; } }

@media (max-width: 1140px) { .t4-tq-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .t4-tq-luoi { grid-template-columns: 1fr; margin-bottom: 40px; } }

/* ---- Từng Phase ---- */
.t4-phase { padding-top: 40px; border-top: 1px solid rgba(31,31,31,.12); margin-top: 40px; }
.t4-phase:first-of-type { border-top: 0; }
.t4-phase-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.t4-phase-dau h3 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 32px;
  line-height: 42px; color: var(--t4-dark-moss); margin: 0;
}
.t4-phase-nhan { display: flex; gap: 8px; margin: 0; flex: 0 0 auto; }
.t4-phase-nhan span {
  background: var(--t4-leaf); color: var(--t4-white); border-radius: 4px;
  padding: 5px 10px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.t4-phase-gt { margin: 16px 0 28px; color: var(--t4-gray); }

.t4-buoc-luoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.t4-buoc {
  background: var(--t4-white); border-radius: 12px; padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.t4-buoc-so {
  display: block; font-size: 36px; font-weight: 700; line-height: 1;
  color: #D5D5D5; margin-bottom: 8px;
}
.t4-buoc h4 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  line-height: 24px; margin: 0 0 10px;
}
.t4-buoc p { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0; }
.t4-buoc-out {
  margin-top: 12px !important; padding-top: 12px;
  border-top: 1px solid rgba(31,31,31,.12);
  font-size: 12px !important; line-height: 20px !important;
}

@media (max-width: 768px) {
  .t4-phase { padding-top: 28px; margin-top: 28px; }
  .t4-phase-dau h3 { font-size: 22px; line-height: 30px; }
  .t4-buoc-luoi { grid-template-columns: 1fr; gap: 16px; }
  .t4-buoc { padding: 18px; }
}


/* ==========================================================================
   25. NHÓM BLOG · DỰ ÁN · BÀI VIẾT #19 #20 #21 #22
   Thêm 15/08/2026 — Giai đoạn 4. Bốn trang dùng chung bộ thẻ ở
   template-parts/the-bai-viet.php nên CSS gom về một mục.
   ========================================================================== */

/* Khung trắng bao cả trang tin (node 600:7843 · 722:30497) */
.t4-tin-khung {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 32px; max-width: 1310px;
}
.t4-tin-dau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
/* h1 lẫn h2: Blog có hero nên tiêu đề khối là h2, Dự án không có hero nên
   chính khối này mang h1. Cùng một kiểu chữ. */
.t4-tin-dau h1,
.t4-tin-dau h2 {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 32px;
  color: var(--t4-dark-moss); margin: 0;
}
/* Trang blog (node 600:7843/1385:21764) và dự án (722:30497/1385:22283):
   Figma giữ 32/43 cả hai breakpoint, không thu nhỏ 22px như override
   .t4-tin-dau chung ở dưới. Dự án dùng thẻ h1 (không có hero), Blog dùng h2. */
#diem-tin h2, #du-an h1 { line-height: 43px; }
@media (max-width: 768px) { #diem-tin h2, #du-an h1 { font-size: 32px; } }

/* Dải chuyên đề: mục đang chọn là viên xanh đặc */
.t4-tablist--de { margin: 0; gap: 4px; }
.t4-tablist--de .t4-tab {
  border: 0; background: transparent; color: #777777;
  font-weight: 700; font-size: 16px; padding: 8px 16px; border-radius: 6px;
}
.t4-tablist--de .t4-tab.is-active { background: var(--t4-leaf); color: var(--t4-white); }

/* ---- Thẻ bài viết, bốn cỡ ---- */
.t4-bai-anh img, .t4-bai-anh-cho { display: block; width: 100%; border-radius: 8px; }
.t4-bai-anh-cho {
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(45deg, #EFE8DA, #EFE8DA 10px, #E6DDCB 10px, #E6DDCB 20px);
}
.t4-bai-dm { font-size: 12px; color: #A2A2A2; margin: 0 0 6px; }
.t4-bai h3 { font-family: var(--t4-font-body); font-weight: 700; margin: 0 0 8px; }
.t4-bai h3 a { text-decoration: none; }
.t4-bai h3 a:hover { color: var(--t4-leaf); }
.t4-bai-tt { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0 0 10px; }
.t4-bai-meta { font-size: 12px; color: #7C7C7C; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.t4-bai-gach { color: #7C7C7C; }

.t4-bai--lon { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.t4-bai--lon h3 { font-size: 24px; line-height: 32px; }
.t4-bai--vua .t4-bai-anh { margin-bottom: 14px; }
.t4-bai--vua h3 { font-size: 16px; line-height: 24px; }
.t4-bai--ngang { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.t4-bai--ngang h3 { font-size: 14px; line-height: 20px; }

@media (max-width: 768px) {
  .t4-tin-khung { padding: 18px; border-radius: 12px; }
  .t4-tin-dau h1,
  .t4-tin-dau h2 { font-size: 22px; }
  .t4-tablist--de { overflow-x: auto; flex-wrap: nowrap; }
  .t4-tablist--de .t4-tab { white-space: nowrap; font-size: 14px; padding: 8px 12px; }
  .t4-bai--lon { grid-template-columns: 1fr; gap: 16px; }
  .t4-bai--lon h3 { font-size: 18px; line-height: 26px; }
}

/* ---- Các cụm bố cục của trang tin ---- */
.t4-tin-hero { margin-bottom: 40px; }
.t4-tin-hero-nut { display: flex; justify-content: flex-end; margin-top: 20px; }

.t4-tin-3cot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.t4-tin-2cot { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-bottom: 48px; }
.t4-tin-3the { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }

.t4-tin-cot-ten {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 20px;
  color: var(--t4-dark-moss); margin: 0 0 16px;
}
.t4-tin-cot-dau {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(31,31,31,.12); padding-bottom: 10px; margin-bottom: 20px;
}
.t4-tin-cot-dau .t4-tin-cot-ten { margin: 0; }
.t4-tin-chu-de { display: flex; gap: 16px; margin: 0; }
.t4-tin-chu-de span { font-size: 12px; font-weight: 700; color: #777777; }
.t4-tin-lien { margin-top: 14px; }
.t4-tin-xem-them { width: 100%; }

@media (max-width: 1140px) { .t4-tin-3cot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .t4-tin-3cot, .t4-tin-2cot, .t4-tin-3the { grid-template-columns: 1fr; gap: 24px; }
  .t4-tin-hero-nut { justify-content: stretch; }
  .t4-tin-hero-nut .t4-btn, .t4-tin-hero-nut .t4-btn-ghost { width: 100%; }
}

/* ---- Dải "News 1…4" của trang Dự án (node 722:30547) ---- */
.t4-news {
  list-style: none; margin: 0 0 40px; padding: 20px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid rgba(31,31,31,.12);
  border-bottom: 1px solid rgba(31,31,31,.12);
}
.t4-news-ten { font-weight: 700; font-size: 16px; margin: 0 0 4px; }

@media (max-width: 768px) { .t4-news { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* ---- Trang bài viết chi tiết #21 #22 ---- */
.t4-bv-luoi { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.t4-bv {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 32px;
}
article.t4-bv h1.entry-title,
article.t4-bv h1 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 22px;
  line-height: 30px !important; margin: 0 0 14px;
}
.t4-bv-dan { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0 0 14px; }
.t4-bv .t4-bai-meta { margin-bottom: 24px; }
.t4-bv-anh { width: 100%; aspect-ratio: 842 / 473; object-fit: cover; border-radius: 8px; margin: 0 0 20px; }
.t4-bv > p { font-size: 14px; line-height: 24px; color: var(--t4-gray); }

.t4-bv-hop {
  background: var(--t4-white); border-radius: 12px;
  box-shadow: var(--t4-shadow-card); padding: 20px; margin-bottom: 32px;
}
.t4-bv-hop-ten {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--t4-font-head); font-weight: 700; font-size: 20px;
  color: var(--t4-dark-moss); margin: 0 0 14px;
}
.t4-bv-hop-ten .material-symbols-outlined { font-size: 20px; color: var(--t4-camel); }
.t4-bv-hop-ten--ngoai { margin-bottom: 16px; }
.t4-bv-muc-luc { list-style: none; margin: 0; padding: 0; }
.t4-bv-muc-luc li { border-bottom: 1px solid rgba(31,31,31,.1); }
.t4-bv-muc-luc li:last-child { border-bottom: 0; }
.t4-bv-muc-luc a {
  display: block; padding: 9px 0; font-size: 14px; font-weight: 500;
  color: var(--t4-camel-dark); text-decoration: none;
}
.t4-bv-muc-luc a:hover { color: var(--t4-dark-moss); }

/* Hero trang Blog — thấp hơn hero dịch vụ (node 600:3591 cao 450) */
.t4-hero--blog { min-height: 450px; }
.t4-hero--blog .t4-hero-inner { text-align: center; }
.t4-hero--blog .t4-hero-desc { max-width: 820px; margin: 0 auto; }
/* H1 nhỏ hơn H1 chuẩn (50/60/500) — Figma dùng CÙNG một cỡ ở cả desktop lẫn
   mobile cho hero này (không co lại như hero khác), .t4-hero.t4-hero--blog
   (0,2,1) để chắc thắng .t4 h1 (0,1,1) không phụ thuộc thứ tự file. */
.t4-hero.t4-hero--blog h1 { font-size: 40px; line-height: 53px; font-weight: 600; }
/* Màu H1 hero--blog KHÔNG nhất quán giữa các trang trong Figma: #14
   (khoa-hoc-tong-the) muốn #ffffff (đúng mặc định .t4-hero-inner h1, khỏi
   sửa), #19 (blog) muốn #fcfbf6 — khoá riêng theo body class, đừng áp
   chung cho cả class .t4-hero--blog. */
.page-template-template-blog .t4-hero.t4-hero--blog h1 { color: var(--t4-light); }

@media (max-width: 768px) {
  .t4-bv-luoi { grid-template-columns: 1fr; gap: 28px; }
  .t4-bv { padding: 20px; }
  .t4-hero--blog { min-height: 0; padding: 40px 0; }
}


/* ==========================================================================
   26. NHÓM GIÁO DỤC #14 · #15 · #16 · #17 · #18
   Thêm 15/08/2026 — Giai đoạn 4. Ba trang chi tiết khoá học (#15 #16 #18)
   dùng chung template-parts/trang-khoa-hoc.php.
   ========================================================================== */

/* Ba chip trên hero trang Khoá học tổng thể (node 796:13872) */
.t4-kh-chip-hero {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.t4-kh-chip-hero li {
  background: var(--t4-white); color: var(--t4-text); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 800;
}

/* Nhãn loại khoá học · học phí */
.t4-kh-nhan {
  display: inline-block; background: var(--t4-leaf); color: var(--t4-white);
  border-radius: 4px; padding: 4px 10px; font-size: 10px; font-weight: 800;
  margin: 0 0 16px;
}
.t4-kh-hoc-phi-nhan { font-size: 12px; font-weight: 700; margin: 0 0 4px; }
.t4-kh-gia {
  font-size: 20px; font-weight: 700; color: var(--t4-camel-dark);
  margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.t4-kh-gia--lon { font-size: 32px; color: var(--t4-camel); }
.t4-kh-gia-goc {
  font-size: 10px; font-weight: 700; color: #979797; text-decoration: line-through;
}
.t4-kh-thong-tin { font-size: 14px; line-height: 24px; color: var(--t4-ink); margin: 0; }
/* Cụm nhấn giữa câu chỉ đổi ĐỘ ĐẬM (không đổi màu) — node 782:7961 y=944.
   Dùng chung cho .t4-kh-thong-tin và quyền lợi (.t4-kh-khoi li). */
.t4-nhan-500 { font-weight: 500; }
.t4-nhan-600 { font-weight: 600; }

/* Ký tự "4" riêng trong H2 "Làm việc với 4T có gì khác biệt"
   (truyen-thong-thuong-hieu, node 1036:47425) — xác nhận qua
   figma-cache/file.json: characterStyleOverrides phủ 100% chuỗi, và RIÊNG
   ký tự "4" (vị trí thứ 14) dùng font khác hẳn phần còn lại — Times New
   Roman Bold thay vì Playfair SemiBold. 4T xác nhận 16/08/2026: đúng như
   Figma, không phải lỗi tự thân file. */
.t4-so-4-tnr { font-family: 'Times New Roman', Times, serif; font-weight: 700; }
.t4-kh-noi-bat-so { font-size: 16px; margin: 0 0 20px; }
.t4-kh-noi-bat-so strong { font-size: 40px; font-weight: 700; margin-right: 8px; }

/* ---- Thẻ đầu trang chi tiết: giới thiệu bên trái, form bên phải ---- */
.t4-kh-dau { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; margin-bottom: 56px; }
/* Tiêu đề khoá học là <h1 class="t4-h2-moss"> — .t4-h2-moss chỉ đổi màu,
   không đổi cỡ, nên rơi vào .t4 h1 mặc định (50/60/500). Figma (node
   607:7596) muốn 32/35/700 — dùng chung ba trang chi tiết khoá học
   (#15 #16 #18) vì cùng template-parts/trang-khoa-hoc.php. */
#khoa-hoc h1 { font-size: 32px; line-height: 35px; font-weight: 700; color: var(--t4-dark-moss); }
.t4-kh-form {
  background: var(--t4-white); border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card); padding: 28px;
}
.t4-kh-form-ten {
  font-size: 28px; font-weight: 800; color: var(--t4-camel-dark); margin: 0 0 20px;
}
.t4-kh-o { margin: 0 0 14px; }
.t4-kh-o label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.t4-kh-o input {
  width: 100%; border: 1px solid rgba(31,31,31,.2); border-radius: 6px;
  padding: 10px 12px; font-family: var(--t4-font-body); font-size: 16px; color: #212529;
}
.t4-kh-gui { width: 100%; margin-top: 6px; }
.t4-kh-gui:disabled { opacity: .55; cursor: not-allowed; }
.t4-kh-ghi-chu { font-size: 12px; line-height: 20px; color: #666666; margin: 14px 0 0; }

@media (max-width: 768px) {
  .t4-kh-dau { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .t4-kh-form { padding: 20px; }
  .t4-kh-form-ten { font-size: 22px; }
  .t4-kh-gia--lon { font-size: 24px; }
}

/* ---- Các khối chữ trong trang chi tiết ---- */
.t4-kh-khoi { margin-bottom: 36px; }
.t4-kh-khoi > h2 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 18px;
  color: var(--t4-dark-moss); margin: 0 0 14px;
}
.t4-kh-chung-nhan {
  font-family: var(--t4-font-head) !important; font-weight: 700 !important;
  font-size: 30px !important; color: var(--t4-camel-dark) !important;
}
.t4-kh-chip { margin: 0; }
.t4-kh-chip span {
  background: var(--t4-cream); color: var(--t4-ink); border-radius: 4px;
  padding: 5px 12px; font-size: 12px; font-weight: 800;
}
.t4-kh-gv { display: flex; gap: 20px; align-items: flex-start; }
.t4-kh-gv-anh { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.t4-kh-gv-ten { font-size: 20px; font-weight: 600; color: var(--t4-ink); margin: 0 0 6px; }
.t4-kh-gv-mo { font-size: 14px; line-height: 24px; color: var(--t4-gray); margin: 0; }

/* Dải "Nội dung khoá học" nền xanh đậm (node 607:8400) */
.t4-kh-noi-dung {
  background: linear-gradient(180deg, var(--t4-leaf) 0%, var(--t4-dark-moss) 100%);
  color: var(--t4-white); padding: 60px 0;
}
.t4-kh-noi-dung h2 {
  font-family: var(--t4-font-head); font-weight: 700; font-size: 32px;
  color: var(--t4-light); margin: 0 0 24px;
}
.t4-kh-chuong { list-style: none; margin: 0; padding: 0; counter-reset: chuong; }
.t4-kh-chuong li {
  counter-increment: chuong; padding: 14px 0 14px 44px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; gap: 16px;
}
.t4-kh-chuong li::before {
  content: counter( chuong, decimal-leading-zero );
  position: absolute; left: 0; top: 16px;
  font-size: 18px; font-weight: 800; color: rgba(255,255,255,.6);
}
.t4-kh-chuong-ten  { font-size: 14px; font-weight: 700; flex: 1; }
.t4-kh-chuong-meta { display: flex; gap: 16px; font-size: 14px; color: rgba(255,255,255,.85); }
.t4-kh-chuong-them { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Dạng thứ hai: nền sáng, mỗi chương một khối có gạch đầu dòng (node 782:8400).
   Chỉ #16 dùng — xem chú thích trong template-parts/trang-khoa-hoc.php. */
.t4-kh-chuong-khoi { margin-bottom: 32px; }
.t4-kh-chuong-khoi h3 {
  font-family: var(--t4-font-body); font-weight: 600; font-size: 20px;
  color: #1F1F1F; margin: 0 0 10px;
}
.t4-kh-dac-diem { font-size: 14px; font-weight: 600; color: #1F1F1F; margin: 0 0 6px; }
.t4-kh-dac-diem-ds { margin: 0; padding-left: 20px; }
.t4-kh-dac-diem-ds li { font-size: 12px; line-height: 22px; color: #1F1F1F; }

@media (max-width: 768px) {
  .t4-kh-noi-dung { padding: 36px 0; }
  .t4-kh-noi-dung h2 { font-size: 22px; }
  .t4-kh-gv { flex-direction: column; }
  .t4-kh-chuong li { flex-wrap: wrap; gap: 6px 16px; }
  .t4-kh-chuong-ten { flex: 1 0 100%; }
  .t4-kh-chuong-khoi h3 { font-size: 18px; }
}

/* ---- Lưới thẻ khoá học ở trang tổng thể ---- */
.t4-kh-loc { display: flex; gap: 20px; margin: 0; flex-wrap: wrap; }
.t4-kh-loc span { font-size: 14px; font-weight: 700; color: var(--t4-camel); }

.t4-kh-luoi-the { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.t4-kh-the {
  background: var(--t4-white); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.t4-kh-the .t4-bai-anh-cho { border-radius: 0; }
.t4-kh-the-than { padding: 18px; }
.t4-kh-the-than h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 14px;
  color: #141414; margin: 0 0 6px;
}
.t4-kh-the-meta { font-size: 12px; color: #666666; margin: 0 0 12px; }
.t4-kh-the-nhan { display: flex; gap: 6px; margin: 0; }
.t4-kh-the-nhan span {
  background: var(--t4-cream); border-radius: 4px; padding: 3px 8px;
  font-size: 10px; font-weight: 700;
}

@media (max-width: 1140px) { .t4-kh-luoi-the { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .t4-kh-luoi-the { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* Bốn H2 con của trang Khoá học tổng thể (node 681:10596) đều 32/35 Bold —
   khác hẳn cả .t4-tin-dau h2 (32/53, dùng chung Blog/Dự án) lẫn .t4 h2 mặc
   định (40/53). Khoá theo #id trang này, không đụng rule dùng chung. */
#khoa-hoc-video h2, #khoa-hoc-zoom h2,
#phan-loai-kh h2, #vi-sao h2 { font-size: 32px; line-height: 35px; }
/* #noi-bat h2 giữ 40/53 desktop (đúng .t4 h2 mặc định) nhưng mobile Figma
   thu về 32/35, khác .t4 h2 mobile (32/43) chỉ ở line-height. */
@media (max-width: 768px) { #noi-bat h2 { line-height: 35px; } }

/* ---- Phân loại khoá học · Tại sao học tại 4T ---- */
/* Figma (node 798:16858) xếp 5 thẻ NGANG một hàng ~195px/thẻ — flex không
   ràng buộc chiều rộng làm mỗi thẻ chiếm hết hàng, xếp dọc thành 5 hàng
   (lệch +70% chiều cao). Đổi sang grid 5 cột, co về 1 cột ở mobile. */
.t4-kh-phan-loai {
  list-style: none; margin: 28px 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.t4-kh-phan-loai li {
  background: var(--t4-white); border-radius: 8px; box-shadow: var(--t4-shadow-card);
  padding: 12px 20px; font-size: 14px; font-weight: 800; color: var(--t4-ink);
}

@media (max-width: 768px) {
  .t4-kh-phan-loai { grid-template-columns: 1fr; }
}

.t4-vi-sao {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center;
}
.t4-vi-sao-anh { width: 150px; height: auto; margin: 0 auto 16px; }
.t4-vi-sao h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 20px;
  color: var(--t4-leaf); margin: 0 0 10px;
}
.t4-vi-sao p { font-size: 12px; line-height: 20px; color: var(--t4-ink); margin: 0; }

@media (max-width: 768px) { .t4-vi-sao { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Trang Template #17 — KHO TEMPLATE (node 607:8935) -------------------
   Dựng lại 15/08/2026. Tiền tố .t4-kho- chứ KHÔNG phải .t4-tpl- — tiền tố đó
   đã bị trang "Thiết kế & tối ưu hạ tầng web" (mục 23) dùng cho lưới giao
   diện miễn phí. Đặt trùng là hai trang phá nhau mà không có lỗi nào báo.

   ⚠ Khung trang này rộng 1260px (lọc 296 + khe 12 + kết quả 952), rộng hơn
   .t4-container 1080 của mọi trang khác.
   ------------------------------------------------------------------------ */
.t4-kho-khung { width: min(1260px, calc(100% - 48px)); margin: 0 auto; }

/* Hero 1900×450 — ảnh nền + lớp phủ đen 25% (800:26078). */
.t4-kho-hero {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('assets/img/template/hero.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}
.t4-kho-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.t4-kho-hero-trong { position: relative; width: min(700px, calc(100% - 48px)); }
.t4-kho-hero h1 {
  font-family: var(--t4-font-head);
  font-size: 40px; font-weight: 600; line-height: 53px;
  color: var(--t4-light); margin: 0 0 16px;
}
.t4-kho-hero p { font-size: 16px; line-height: 26px; color: var(--t4-white); margin: 0 0 32px; }
.t4-kho-tim {
  display: flex; align-items: center; gap: 8px;
  background: var(--t4-white); border-radius: 8px; padding: 0 16px; height: 48px;
}
.t4-kho-tim .material-symbols-outlined { color: #777777; font-size: 22px; }
.t4-kho-tim input {
  flex: 1 1 auto; border: 0; background: transparent;
  font-family: var(--t4-font-body); font-size: 16px; color: var(--t4-text);
}
.t4-kho-tim input:focus { outline: none; }

/* Thanh tab 1900×56 (801:30337). */
.t4-kho-tab { border-bottom: 1px solid #e0e0e0; background: var(--t4-white); }
.t4-kho-tab ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 40px; }
.t4-kho-tab li { display: flex; margin: 0; }
.t4-kho-tab button {
  border: 0; background: none; cursor: pointer; margin: 0;
  font-family: var(--t4-font-body); font-size: 14px; font-weight: 700;
  line-height: 20px;
  color: #5e5e5e; padding: 18px 0; border-bottom: 3px solid transparent;
}
.t4-kho-tab button.la-chon { color: var(--t4-dark-moss); border-bottom-color: var(--t4-camel); }

/* Thân: cột lọc 296 + cột kết quả 952. */
.t4-kho-than { padding: 40px 0 80px; }
.t4-kho-than .t4-kho-khung {
  display: grid; grid-template-columns: 296px 952px; gap: 12px; align-items: start;
}

/* Nhóm lọc — mỗi nhóm là HỘP CUỘN cao cố định, đúng thiết kế. */
.t4-kho-nhom { margin-bottom: 16px; }
.t4-kho-nhom h2 {
  font-family: var(--t4-font-body); font-size: 14px; font-weight: 700;
  color: #141414; margin: 0 0 8px;
}
.t4-kho-hop { overflow-y: auto; padding-right: 8px; }
.t4-kho-hop label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 300; line-height: 20px; color: #141414;
  margin-bottom: 12px; cursor: pointer;
}
.t4-kho-hop input { flex: 0 0 auto; margin: 0; }
.t4-kho-sao { display: inline-flex; }
.t4-kho-sao .material-symbols-outlined { font-size: 16px; color: #cccccc; }
.t4-kho-sao .material-symbols-outlined.day { color: var(--t4-camel); }

/* Đầu cột kết quả (801:31817). */
.t4-kho-kq-dau { margin-bottom: 16px; }
.t4-kho-kq-dau h2 {
  font-family: var(--t4-font-head); font-size: 32px; font-weight: 700;
  line-height: 35px; color: var(--t4-dark-moss); margin: 0 0 16px;
}
.t4-kho-kq-dau > p {
  font-size: 16px; font-weight: 300; line-height: 25px;
  color: var(--t4-gray); margin: 0 0 24px;
}
.t4-kho-kq-thanh {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.t4-kho-dem { font-size: 16px; color: var(--t4-text); }
.t4-kho-sap { display: inline-flex; align-items: center; gap: 8px; }
.t4-kho-sap-nhan { font-size: 14px; color: var(--t4-gray); }
.t4-kho-sap button {
  border: 0; background: none; cursor: pointer;
  font-family: var(--t4-font-body); font-size: 14px; font-weight: 700; color: var(--t4-text);
}

/* Thẻ 952×248, nền trắng, bo 8, viền #CCCCCC (801:31853). */
.t4-kho-luoi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.t4-kho-the {
  display: grid; grid-template-columns: 267px 1fr 240px; gap: 24px;
  min-height: 248px; padding: 24px;
  background: var(--t4-white); border: 1px solid #cccccc; border-radius: 8px;
}
.t4-kho-the-anh img { display: block; width: 267px; height: 200px; object-fit: cover; border-radius: 6px; }
.t4-kho-the-giua h3 {
  font-family: var(--t4-font-body); font-size: 20px; font-weight: 800;
  line-height: 26px; color: var(--t4-text); margin: 0 0 8px;
}
.t4-kho-the-tac-gia { font-size: 12px; font-weight: 300; color: var(--t4-gray); margin: 0 0 10px; }
.t4-kho-the-nhan {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--t4-dark-moss); background: #EFE8DA;
  border-radius: 3px; padding: 3px 8px; margin-bottom: 12px;
}
.t4-kho-the-y { list-style: none; margin: 0; padding: 0; }
.t4-kho-the-y li {
  position: relative; padding-left: 16px;
  font-size: 12px; line-height: 24px; color: var(--t4-gray);
}
.t4-kho-the-y li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--t4-leaf);
}
.t4-kho-the-phai { text-align: right; display: flex; flex-direction: column; gap: 6px; }
.t4-kho-the-gia { font-size: 20px; font-weight: 800; color: var(--t4-text); margin: 0; }
.t4-kho-the-sao { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; margin: 0; }
.t4-kho-the-sao .material-symbols-outlined { font-size: 16px; color: #cccccc; }
.t4-kho-the-sao .material-symbols-outlined.day { color: var(--t4-camel); }
.t4-kho-the-luot { color: var(--t4-gray); }
.t4-kho-the-cai { font-size: 12px; color: var(--t4-gray); margin: 0 0 auto; }
.t4-kho-the-nut { display: flex; gap: 8px; justify-content: flex-end; margin: 0; }
.t4-kho-the-nut .t4-btn,
.t4-kho-the-nut .t4-btn-ghost { font-size: 14px; font-weight: 700; padding: 8px 14px; min-height: 0; }

/* Phân trang 1–11 (801:32762). */
.t4-kho-phan-trang {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 40px; flex-wrap: wrap;
}
.t4-kho-phan-trang a {
  font-size: 12px; font-weight: 800; color: var(--t4-text);
  text-decoration: none; padding: 6px 10px; border-radius: 4px;
}
.t4-kho-phan-trang a:hover { background: #EFE8DA; }
.t4-kho-phan-trang a.la-chon { background: var(--t4-leaf); color: var(--t4-white); }

@media (max-width: 1140px) {
  .t4-kho-than .t4-kho-khung { grid-template-columns: 260px 1fr; }
  .t4-kho-the { grid-template-columns: 200px 1fr; }
  .t4-kho-the-anh img { width: 200px; height: 150px; }
  .t4-kho-the-phai { grid-column: 1 / -1; text-align: left; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .t4-kho-the-nut { justify-content: flex-start; margin-left: auto; }
  .t4-kho-the-cai { margin: 0; }
}

@media (max-width: 768px) {
  .t4-kho-hero { min-height: 360px; }
  .t4-kho-hero h1 { font-size: 32px; line-height: 40px; }
  .t4-kho-tab ul { gap: 24px; overflow-x: auto; }
  .t4-kho-tab button { white-space: nowrap; }
  .t4-kho-than .t4-kho-khung { grid-template-columns: 1fr; gap: 32px; }
  .t4-kho-kq-dau h2 { font-size: 24px; line-height: 30px; }
  .t4-kho-the { grid-template-columns: 1fr; min-height: 0; }
  .t4-kho-the-anh img { width: 100%; height: auto; aspect-ratio: 267 / 200; }
}
.t4-vi-sao-icon { display: block; font-size: 96px; color: var(--t4-leaf); margin-bottom: 16px; }


/* ==========================================================================
   27. NHÓM TRANG PHỤ #23 · #24 · #25
   Chính sách bảo mật (697:21393) · Liên hệ (697:21752) · Tuyển dụng (804:35972)
   ========================================================================== */

/* ⚠ Bỏ 15/08/2026 (QA trang #7): định nghĩa `.t4-camel` Ở ĐÂY trùng tên với
   `.t4-camel` (màu #CF9156) đã khai ở mục "1. CỤM NHẤN GIỮA CÂU" — cùng
   specificity, bản đó đứng SAU nên luôn thắng, bản này (#B77537) chưa bao
   giờ thực sự có hiệu lực. Kiểm chứng: 5/6 chỗ dùng `.t4-camel` hiện tại
   (ve-chung-toi ×3, trang chủ ×2) ĐÃ được `diff-cum-chu.js` xác nhận đúng
   MÀU #CF9156 khi QA từng trang đó — nếu đổi lại #B77537 sẽ phá 2 trang đã
   ĐẠT. Còn 1 chỗ ở `template-tuyen-dung.php` (trang #25, chưa QA) — nếu khi
   QA phát hiện trang đó thật sự cần #B77537, dùng `.t4-nhan-camel` (đã có
   sẵn, cùng màu, weight 600) hoặc `.t4-nhan-camel-dam` (weight 700), ĐỪNG
   khai lại `.t4-camel` ở đây lần nữa. */

/* Nhãn chỉ dành cho trình đọc màn hình — không dùng display:none, vì như vậy
   trình đọc cũng bỏ qua luôn. */
.t4-an-mat {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- #23 Chính sách bảo mật ---- */
.t4-cs-khung { max-width: 1080px; }
.t4-cs-dau { margin-bottom: 32px; }
/* ⚠ Phải viết `.t4 .t4-cs-h1` (0,2,0), KHÔNG phải `.t4-cs-h1` (0,1,0): luật nền
   `.t4 h1` là (0,1,1) nên nó thắng class đơn và ép cỡ chữ về 50px. Cùng cái bẫy
   đã ghi ở mục 18. Luật này áp cho MỌI class đơn đặt lên h1/h2/h3 phía dưới. */
.t4 .t4-cs-h1 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px; color: var(--t4-dark-moss); margin: 0 0 8px;
}
.t4-cs-ngay { font-size: 12px; color: #7C7C7C; margin: 0; }

.t4-cs-cot { display: grid; grid-template-columns: 650px 350px; gap: 32px; align-items: start; }

.t4-cs-dieu { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid rgba(0,0,0,.1); }
.t4-cs-dieu:last-child { border-bottom: 0; margin-bottom: 0; }
.t4-cs-dieu h2 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 22px;
  line-height: 30px; color: #000000; margin: 0 0 14px;
}
.t4-cs-dieu p  { font-size: 14px; line-height: 24px; color: #353535; margin: 0 0 10px; }
.t4-cs-dieu ul { margin: 0 0 10px; padding-left: 22px; }
.t4-cs-dieu li { font-size: 14px; line-height: 24px; color: #353535; }

/* Mục lục dính — `top` chừa chỗ cho header dính phía trên */
.t4-cs-muc-luc {
  position: sticky; top: 96px;
  background: var(--t4-white); border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
  padding: 18px 20px;
}
.t4-cs-muc-luc-ten {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--t4-font-head); font-weight: 700; font-size: 20px;
  color: var(--t4-dark-moss); margin: 0 0 12px;
}
.t4-cs-muc-luc-ten .material-symbols-outlined { font-size: 20px; }
.t4-cs-muc-luc ol { list-style: none; margin: 0; padding: 0; }
.t4-cs-muc-luc li { border-top: 1px solid rgba(0,0,0,.1); }
.t4-cs-muc-luc li:first-child { border-top: 0; }
.t4-cs-muc-luc a {
  display: block; padding: 9px 0;
  font-size: 14px; font-weight: 500; color: var(--t4-camel-dark); text-decoration: none;
}
.t4-cs-muc-luc a:hover { text-decoration: underline; }

@media (max-width: 1140px) {
  .t4-cs-cot { grid-template-columns: 1fr 300px; }
}
@media (max-width: 768px) {
  .t4-cs-cot { grid-template-columns: 1fr; gap: 24px; }
  /* Trên điện thoại mục lục lên TRƯỚC nội dung và thôi dính — dính ở màn hình
     hẹp là nó chiếm mất nửa khung nhìn. */
  .t4-cs-muc-luc { position: static; order: -1; }
  .t4 .t4-cs-h1 { font-size: 32px; line-height: 35px; font-weight: 700; }
}

/* ---- #24 Liên hệ ---- */
.t4-lh-hero { position: relative; min-height: 450px; display: flex; align-items: center; }
.t4-lh-hero-anh {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Lớp phủ tối để chữ trắng đọc được trên ảnh bắt tay sáng */
.t4-lh-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%);
}
.t4-lh-hero-trong {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.t4-lh-hero-trong h1 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px !important; color: var(--t4-light); margin: 0 0 6px;
}
.t4-lh-hero-trong > div > p { font-size: 16px; color: var(--t4-light); margin: 0; }
.t4-lh-hero-vector { width: 258px; height: auto; }

/* Hai thẻ đè lên mép dưới hero */
.t4-lh-the-dai { background: var(--t4-light); }
.t4-lh-the-luoi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: -160px; position: relative; z-index: 3; padding-bottom: 48px;
}
.t4-lh-the {
  background: var(--t4-white); border: 1px solid rgba(0,0,0,.1); border-radius: 4px;
  padding: 32px 28px; text-align: center;
}
.t4-lh-the-icon { font-size: 40px; color: var(--t4-camel-dark); }
.t4-lh-the h2 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 20px;
  color: var(--t4-text); margin: 12px 0 16px;
}
.t4-lh-the p { font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0 0 16px; }
.t4-lh-the p:last-child { margin-bottom: 0; }
.t4-lh-sdt a { font-weight: 500; text-decoration: underline; }
.t4-lh-xem-tat-ca { text-decoration: underline; }
.t4-lh-the-nut { margin-top: 24px; }

/* `.t4 .` cho thắng luật nền `.t4 h2` — xem chú thích ở .t4-cs-h1 */
.t4 .t4-lh-tieu-de-2 {
  font-family: var(--t4-font-body); font-weight: 500; font-size: 38px;
  line-height: 44px; color: var(--t4-text); text-align: center; margin: 0 0 32px;
  padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,.1);
}

.t4-lh-ban-do-khung {
  display: grid; grid-template-columns: 708px 1fr;
  background: var(--t4-white); border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  overflow: hidden;
}
.t4-lh-ban-do { display: block; }
.t4-lh-ban-do img { display: block; width: 100%; height: 100%; object-fit: cover; }
.t4-lh-thong-tin { padding: 32px 28px; border-left: 1px solid rgba(0,0,0,.12); }
/* ⚠ Ba class dưới đây phải đứng SAU `.t4-lh-thong-tin p` VÀ mang thêm bậc
   `.t4-lh-thong-tin`, vì luật đó là (0,2,1) — mạnh hơn class đơn (0,1,0) và
   sẽ ép "4T-Tiếp thị tử tế" từ 40px xuống 16px. Đây là lần thứ hai cùng một
   bẫy trong một mục CSS: luật nền không chỉ đến từ `.t4 <thẻ>`, mà còn từ
   chính luật `<khối> p` mình vừa viết vài dòng bên trên. */
.t4-lh-thong-tin p { font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0 0 4px; }
.t4-lh-thong-tin .t4-lh-ten-cty {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px; color: var(--t4-dark-moss); margin: 0 0 14px;
}
.t4-lh-dia-chi { font-style: normal; font-size: 16px; line-height: 26px; color: var(--t4-text); }
.t4-lh-thong-tin .t4-lh-nhan { font-size: 16px; font-weight: 700; color: var(--t4-camel-dark); margin: 22px 0 8px; }
.t4-lh-ghi-chu { margin-top: 26px; }

@media (max-width: 1140px) {
  .t4-lh-ban-do-khung { grid-template-columns: 1fr 340px; }
}
@media (max-width: 768px) {
  .t4-lh-hero-trong { flex-direction: column; align-items: flex-start; }
  .t4-lh-hero-vector { display: none; }
  /* Bỏ hẳn kiểu đè: ở màn hình hẹp thẻ đè lên hero là nuốt mất tiêu đề */
  .t4-lh-the-luoi { grid-template-columns: 1fr; margin-top: 24px; padding-bottom: 32px; }
  .t4 .t4-lh-tieu-de-2 { font-size: 24px; }
  .t4-lh-ban-do-khung { grid-template-columns: 1fr; }
  .t4-lh-thong-tin { border-left: 0; border-top: 1px solid rgba(0,0,0,.12); padding: 24px 20px; }
  /* cùng bậc với luật desktop, nếu không nó không đè được */
  .t4-lh-thong-tin .t4-lh-ten-cty { font-size: 28px; }
}

/* ---- #25 Tuyển dụng ---- */
.t4-td-hero { position: relative; min-height: 450px; display: flex; align-items: center; }
.t4-td-hero-anh {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.t4-td-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(21,84,70,.75) 0%, rgba(21,84,70,.25) 70%);
}
.t4-td-hero-trong { position: relative; z-index: 2; }
.t4-td-hero-trong h1 {
  font-family: var(--t4-font-head); font-weight: 600; font-size: 40px;
  line-height: 53px !important; color: var(--t4-light); margin: 0 0 12px;
}
.t4-td-hero-trong p {
  max-width: 516px; font-size: 16px; line-height: 26px; color: var(--t4-light); margin: 0;
}

.t4-td-loc-dai { background: var(--t4-cream); padding: 32px 0; }
.t4-td-loc { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 20px; align-items: end; margin: 0; }
.t4-td-o { margin: 0; }
.t4-td-o label { display: block; font-size: 12px; color: var(--t4-text); margin-bottom: 6px; }
.t4-td-o select,
.t4-td-o input {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid rgba(0,0,0,.2); border-radius: 4px;
  background: var(--t4-white); font-size: 14px; color: var(--t4-text);
}
.t4-td-o--tim { display: flex; align-items: stretch; }
.t4-td-o--tim input { border-radius: 4px 0 0 4px; }
.t4-td-nut-tim {
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 0; border-radius: 0 4px 4px 0;
  background: var(--t4-camel-dark); color: var(--t4-white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.t4-td-o select:disabled,
.t4-td-o input:disabled,
.t4-td-nut-tim:disabled { opacity: .75; cursor: not-allowed; }

.t4-td-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.t4-td-dau h2 { font-size: 32px; line-height: 35px; font-weight: 700; }
.t4-td-dem { font-size: 14px; color: var(--t4-text); margin: 0; }

.t4-td-bao {
  display: flex; align-items: center; gap: 16px;
  background: var(--t4-white); border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  padding: 16px 20px; margin-bottom: 24px;
}
.t4-td-bao-icon { font-size: 28px; color: var(--t4-camel-dark); }
.t4-td-bao > div { flex: 1; }
.t4-td-bao-ten { font-size: 16px; font-weight: 700; color: var(--t4-text); margin: 0 0 2px; }
.t4-td-bao p { font-size: 16px; color: var(--t4-text); margin: 0; }
.t4-td-bao-nut { white-space: nowrap; }
.t4-td-bao-nut:disabled { opacity: .55; cursor: not-allowed; }

.t4-td-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.t4-td-the {
  display: flex; flex-direction: column;
  background: var(--t4-white); border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  padding: 20px; min-height: 235px;
}
.t4-td-the h3 {
  font-family: var(--t4-font-body); font-weight: 700; font-size: 16px;
  color: var(--t4-text); margin: 0 0 6px;
}
.t4-td-the-pb { font-size: 16px; color: var(--t4-text); margin: 0; }
/* `margin-top:auto` ghim nút xuống đáy, nhờ vậy tên vị trí dài ngắn khác nhau
   thì hàng nút vẫn thẳng — đúng như thiết kế. */
.t4-td-the-nut { margin: auto 0 0; }

.t4-td-trang {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 32px;
}
.t4-td-trang-so,
.t4-td-trang-tat {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 12px; font-size: 16px; font-weight: 700; border-radius: 4px;
}
.t4-td-trang-so { color: var(--t4-text); }
.t4-td-trang-tat { color: #99AFC4; }
.t4-td-trang-so.is-active { background: var(--t4-camel-dark); color: var(--t4-white); }
.t4-td-trang .material-symbols-outlined { font-size: 18px; }

.t4-td-cta { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }
.t4-td-cta h2 { font-size: 32px; line-height: 35px; font-weight: 700; margin: 0 0 16px; }
.t4-td-cta p { font-size: 16px; line-height: 26px; color: var(--t4-text); margin: 0 0 24px; }
.t4-td-cta-anh { position: relative; width: 380px; height: 380px; }
/* Khối cam lệch phía sau ảnh, đúng hình trong thiết kế */
.t4-td-cta-blob {
  position: absolute; right: 0; top: 24px; width: 300px; height: 330px;
  background: #FF5C35; border-radius: 8px 60px 8px 60px;
}
.t4-td-cta-cho { position: relative; width: 300px; height: 380px; }

@media (max-width: 1140px) {
  .t4-td-luoi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .t4-td-loc { grid-template-columns: 1fr; gap: 14px; }
  .t4-td-dau { flex-direction: column; gap: 6px; }
  .t4-td-bao { flex-wrap: wrap; }
  .t4-td-bao-nut { width: 100%; }
  .t4-td-luoi { grid-template-columns: 1fr 1fr; gap: 12px; }
  .t4-td-the { min-height: 0; padding: 14px; }
  .t4-td-cta { grid-template-columns: 1fr; gap: 28px; }
  .t4-td-cta h2 { line-height: 38px; }
  .t4-td-cta-anh { width: 100%; max-width: 320px; height: 320px; margin: 0 auto; }
  .t4-td-cta-blob { width: 78%; height: 86%; }
  .t4-td-cta-cho { width: 78%; height: 100%; }
}

/* --------------------------------------------------------------------------
   28. CHỮ CHỈ DÀNH CHO TRÌNH ĐỌC MÀN HÌNH — thêm 15/08/2026
   --------------------------------------------------------------------------
   ⛔ ĐỪNG đổi thành display:none. display:none làm trình đọc màn hình bỏ qua
   luôn, tức mất đúng mục đích của lớp này. Cách dưới đây giấu khỏi mắt nhưng
   vẫn nằm trong cây trợ năng.
   -------------------------------------------------------------------------- */
.t4-chi-doc {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   29. TRANG CHỦ — BA CỘT LIÊN HỆ CUỐI TRANG (node 163:6757, y=6555)
   --------------------------------------------------------------------------
   Bản trước thiếu hẳn khối này. Cỡ chữ đo từ thiết kế: nhãn cột 20/800,
   tiêu đề dòng 14/800, nội dung 14/500.
   -------------------------------------------------------------------------- */
.t4-lh-cot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(31,31,31,.12);
}
.t4-lh-cot-nhan {
  font-family: var(--t4-font-body);
  font-size: 20px;
  font-weight: 800;
  /* Camel Brown #CF9156 — xác minh từ Figma I962:12048;962:11594/605/609,
     KHÔNG phải xanh lá như bản trước (đúng bài học độ ưu tiên CSS, xem qa/cau-hoi.md #4). */
  color: var(--t4-camel);
  margin: 0 0 16px;
}
.t4-lh-cot-ds { margin: 0; }
/* Flatsome (theme cha) đặt sẵn `dt,dd{display:inline-block}` cho danh sách
   thông số — làm "Hotline" + "0985.684.821" + "Mail" dồn chung MỘT hàng.
   Ép lại `block` để mỗi nhãn/giá trị xuống dòng riêng như Figma. Bắt được
   15/08/2026 nhờ soi ảnh Bước 5, không phải nhìn mắt (rất dễ lướt qua vì
   hàng "Address" phía trên vẫn đúng — chỉ "Hotline"/"Mail" ngắn mới lộ). */
.t4-lh-cot-ds dt,
.t4-lh-cot-ds dd { display: block; }
.t4-lh-cot-ds dt {
  font-size: 14px;
  font-weight: 800;
  color: var(--t4-text);
  margin-bottom: 2px;
}
.t4-lh-cot-ds dd {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--t4-gray);
}
.t4-lh-cot-ds dd a { color: var(--t4-gray); text-decoration: none; }
.t4-lh-cot-ds dd a:hover { color: var(--t4-leaf); text-decoration: underline; }
.t4-lh-cot-tieu-de {
  font-size: 14px;
  font-weight: 800;
  color: var(--t4-text);
  margin: 0 0 6px;
}
.t4-lh-cot-mo-ta {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--t4-gray);
  margin: 0;
}
@media (max-width: 768px) {
  .t4-lh-cot { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-top: 32px; }
}

/* --------------------------------------------------------------------------
   30. HAI CTA CUỐI MENU TRƯỢT MOBILE (node mobile y=584 · y=644) — 15/08/2026
   -------------------------------------------------------------------------- */
.t4-mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(31,31,31,.1);
}
.t4-mobile-menu-cta a {
  display: block;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--t4-font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.t4-mobile-menu-cta a:first-child { background: var(--t4-camel); color: var(--t4-white); }
.t4-mobile-menu-cta a:last-child {
  background: transparent;
  color: var(--t4-dark-moss);
  border: 1px solid var(--t4-dark-moss);
}

/* --------------------------------------------------------------------------
   31. KHỐI "MÔ TẢ DỊCH VỤ" BẢN MOBILE — nhóm GG Marketing (15/08/2026)
   --------------------------------------------------------------------------
   Node mobile của 4 trang GG Marketing có tiêu đề + lời dẫn + danh sách lợi
   ích KHÁC HẲN desktop (trùng 47%), nên dựng hai bộ chữ và bật/tắt theo
   breakpoint — đúng ngoại lệ bài học 5 trong CLAUDE.md.
   -------------------------------------------------------------------------- */
.t4-mo-ta-mobile-anh { display: block; width: 270px; max-width: 100%; height: auto; margin: 0 0 24px; }
.t4-mo-ta-mobile h2 {
  font-family: var(--t4-font-head);
  font-size: 32px;
  font-weight: 600;
  line-height: 43px;
  color: var(--t4-dark-moss);
  margin: 0 0 20px;
  letter-spacing: -0.96px;
}
/* ⚠ Sửa 16/08/2026 (audit độc lập): letter-spacing thiếu ở H2 "Mô tả dịch vụ"
   trên cả 4 trang GG Marketing dùng chung khối này (xu-ly-loi-sai-google-ads,
   google-merchant-center, tracking-do-luong, google-map-local-seo) — Figma
   -1.2px desktop / -0.96px mobile ở 3/4 trang, riêng tracking-do-luong mobile
   là -1.92px (giá trị Figma khác hẳn, xác nhận qua figma-cache/file.json). */
#mo-ta-dich-vu .t4-only-desktop h2 { letter-spacing: -1.2px; }
.page-template-template-tracking-do-luong .t4-mo-ta-mobile h2 { letter-spacing: -1.92px; }

/* #da-nganh (dich-vu-google-marketing, node riêng, không dùng chung trang nào
   khác) — cùng đợt sửa letter-spacing 16/08/2026. */
#da-nganh h2 { letter-spacing: -1.6px; }
.t4-mo-ta-mobile p {
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 14px;
}
.t4-mo-ta-mobile .t4-tich { margin-top: 20px; }
.t4-mo-ta-mobile .t4-tich li { font-size: 12px; font-weight: 700; line-height: 20px; }

/* --------------------------------------------------------------------------
   32. KHỐI "FEEDBACK CỦA KHÁCH HÀNG" — nhóm khoá học (node 782:7961, y≈4274)
   -------------------------------------------------------------------------- */
.t4-fb-dau h2 {
  font-family: var(--t4-font-head);
  font-size: 32px;
  line-height: 35px;
  font-weight: 700;
  color: var(--t4-dark-moss);
  margin: 0 0 12px;
}
.t4-fb-luoi {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.t4-fb-the {
  display: flex;
  flex-direction: column;
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: 3px 3px 4px rgba(0,0,0,.25);
  padding: 28px 24px;
}
.t4-fb-trich { font-size: 14px; line-height: 24px; color: var(--t4-gray); margin: 0 0 12px; }
.t4-fb-them {
  font-size: 12px;
  font-weight: 700;
  color: var(--t4-leaf);
  text-decoration: none;
  margin-bottom: 20px;
  align-self: flex-start;
}
.t4-fb-them:hover { text-decoration: underline; }
.t4-fb-ten {
  font-family: var(--t4-font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--t4-text);
  margin: auto 0 2px;
}
.t4-fb-vai, .t4-fb-cty { font-size: 14px; color: var(--t4-gray); margin: 0; }

@media (max-width: 1140px) { .t4-fb-luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .t4-fb-luoi { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; } }

/* --------------------------------------------------------------------------
   33. CỘT "BÀI VIẾT LIÊN QUAN" TRÊN TRANG DỰ ÁN — node 722:30457 (15/08/2026)
   ⚠ Sửa 16/08/2026 (audit độc lập): Figma có BA cột phụ, một cho MỖI hàng
   chuyên mục — không phải một khối gộp ở cuối trang. `.t4-tin-hang` là hàng
   (main + cột phụ cạnh nhau, đúng bố cục Figma 316px); `.t4-tin-hang-phu`
   là biến thể hẹp một cột của `.t4-da-lien-quan` dùng RIÊNG bên trong hàng —
   bản gốc (2 cột, không margin/border) vẫn giữ nguyên cho cách dùng cũ
   (bai-viet-mau/bai-viet-mau-2, nằm trong cột 340px của .t4-bv-luoi).
   -------------------------------------------------------------------------- */
.t4-tin-hang { display: grid; grid-template-columns: 1fr 316px; gap: 40px; align-items: start; margin-bottom: 40px; }
@media (max-width: 1140px) { .t4-tin-hang { grid-template-columns: 1fr; } }

.t4-da-lien-quan {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(31,31,31,.12);
}
.t4-da-lien-quan .t4-tin-nho-ds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
@media (max-width: 768px) {
  .t4-da-lien-quan { margin-top: 36px; padding-top: 28px; }
  .t4-da-lien-quan .t4-tin-nho-ds { grid-template-columns: 1fr; }
}

/* Cột phụ hẹp bên trong .t4-tin-hang — một cột dọc, không viền/margin riêng
   (khoảng cách đã có từ gap của .t4-tin-hang). */
.t4-tin-hang-phu.t4-da-lien-quan { margin-top: 0; padding-top: 0; border-top: 0; }
.t4-tin-hang-phu .t4-tin-nho-ds { grid-template-columns: 1fr; gap: 20px; }

/* --------------------------------------------------------------------------
   34. KHỐI "ƯU ĐÃI VÀ HỖ TRỢ" — nhóm khoá học (node 782:7961 y=1387)
   -------------------------------------------------------------------------- */
.t4-kh-uu-dai h2 { font-size: 30px; }
.t4-kh-uu-dai-phu {
  font-size: 16px;
  color: var(--t4-gray);
  margin: -8px 0 16px;
}
.t4-kh-uu-dai p { font-size: 14px; line-height: 24px; margin: 0 0 10px; }
.t4-kh-chip span + span { margin-left: 8px; }

/* --------------------------------------------------------------------------
   35. KHOÁ HỌC TỔNG THỂ — lưới khoá học thật + phân loại có mô tả (15/08/2026)
   -------------------------------------------------------------------------- */
.t4-kh-noi-bat-so { list-style: none; margin: 16px 0 24px; padding: 0; display: flex; gap: 32px; flex-wrap: wrap; }
.t4-kh-noi-bat-so li { font-size: 16px; color: var(--t4-gray); }
.t4-kh-noi-bat-so strong {
  display: block;
  font-family: var(--t4-font-body);
  font-size: 40px;
  font-weight: 700;
  color: var(--t4-dark-moss);
  line-height: 1.1;
}
.t4-kh-the h3 { white-space: normal; }
.t4-kh-popular {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--t4-camel);
  color: var(--t4-white);
  font-size: 12px;
  font-weight: 800;
  border-radius: 3px;
  padding: 3px 8px;
}
.t4-kh-the .t4-bai-anh-cho { position: relative; }
.t4-kh-xem-tat-ca { text-align: center; margin-top: 32px; }

.t4-kh-phan-loai li { display: flex; flex-direction: column; gap: 6px; }
.t4-kh-pl-ten { font-size: 14px; font-weight: 800; color: var(--t4-text); }
.t4-kh-pl-mo { font-size: 14px; line-height: 22px; color: var(--t4-gray); }

@media (max-width: 768px) {
  .t4-kh-noi-bat-so { gap: 20px; }
  .t4-kh-noi-bat-so strong { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   36. KHỐI "4 VÒNG NGHIÊN CỨU" — Phase 2 trang Tư vấn chiến lược
       (node 568:25281 y=4698…5080) — thêm 15/08/2026
   -------------------------------------------------------------------------- */
.t4-vong { margin: 40px 0 8px; }
.t4-vong-h {
  font-family: var(--t4-font-body);
  font-size: 32px;
  font-weight: 800;
  color: var(--t4-dark-moss);
  margin: 0 0 4px;
}
.t4-vong-phu { font-size: 20px; font-weight: 800; color: var(--t4-camel); margin: 0 0 8px; }
.t4-vong-dan { font-size: 14px; line-height: 22px; color: var(--t4-gray); margin: 0 0 28px; }
.t4-vong-luoi {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.t4-vong-the {
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: 3px 3px 4px rgba(0,0,0,.25);
  padding: 22px 20px;
}
.t4-vong-so {
  font-family: var(--t4-font-body);
  font-size: 24px; font-weight: 700;
  color: var(--t4-camel); margin: 0 0 10px;
}
.t4-vong-the h5 {
  font-family: var(--t4-font-body);
  font-size: 16px; font-weight: 700; line-height: 22px;
  color: var(--t4-text); margin: 0 0 14px;
}
.t4-vong-the ul { list-style: none; margin: 0; padding: 0; }
.t4-vong-the ul li {
  position: relative; padding-left: 14px;
  font-size: 14px; line-height: 22px; color: var(--t4-gray); margin-bottom: 6px;
}
.t4-vong-the ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--t4-leaf);
}
.t4-lt-goi { font-size: 16px; color: var(--t4-light); margin: 16px 0 0; opacity: .9; }

@media (max-width: 1140px) { .t4-vong-luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .t4-vong-luoi { grid-template-columns: 1fr; gap: 16px; }
  .t4-vong-h { font-size: 24px; }
}

/* Khối giá lặp lại giữa trang khoá học (node 607:7003 y=1239) */
.t4-kh-gia-lai { text-align: center; }
.t4-kh-gia-lai .t4-kh-gia { margin-bottom: 16px; }

/* ==========================================================================
   XX. VÁ ĐỘ ƯU TIÊN CỦA CLASS ĐẶT TRÊN THẺ TIÊU ĐỀ — thêm 15/08/2026
   Phát hiện bằng scripts/diff-styles.js (Bước 2c của quy trình kiểm kê).
   --------------------------------------------------------------------------
   ĐÂY LÀ LẦN THỨ TƯ cùng một cái bẫy (xem bài học 19 trong CLAUDE.md và mục 18
   ở trên). Luật nền `.t4 h1, .t4 h2, .t4 h3 …` có độ ưu tiên (0,1,1), CAO HƠN
   mọi lớp một-class (0,1,0) đặt lên chính thẻ đó. Hậu quả đo được:

     · .t4-footer-tieu-de  → Playfair 40px/53 #1F1F1F trên nền xanh footer,
                             lẽ ra Manrope SemiBold 16/22 #F8F5EE.
                             Sai trên CẢ 25 TRANG vì footer dùng chung.
     · .t4-service-card h3 → Playfair 500 24/32 #1F1F1F,
                             lẽ ra Manrope Bold 24/28 #458763.
     · .t4-h1 (thẻ <p>)    → mất font-family, rơi về Manrope,
                             lẽ ra Playfair Display. Chỉ hiện ở mobile.

   Giá trị trong các luật gốc ĐÃ ĐÚNG số đo Figma — chúng chỉ chưa bao giờ
   được áp. Vì vậy chỗ này chỉ nâng độ ưu tiên, không đổi con số.

   ⚠ Thêm class mới đặt lên h1/h2/h3 thì khai luôn tại đây, và nhớ khai cả vế
   trong @media — bỏ vế media là lỗi chỉ hiện trên điện thoại, rất dễ lọt.
   ========================================================================== */
.t4 .t4-footer-tieu-de {
  font-family: var(--t4-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #f8f5ee;
  margin: 0 0 24px;
}

.t4 .t4-service-card h3,
.t4 .t4-service-head h3 {
  font-family: var(--t4-font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--t4-leaf);
}

/* <p class="t4-h1"> không phải thẻ heading nên không nhận font-family từ
   `.t4 h1…h6`. Phải khai riêng, nếu không nhánh mobile của hero ra Manrope. */
.t4 .t4-h1 { font-family: var(--t4-font-head); }

/* `.t4-card p` (0,1,1) ở mục 14 đè mất `.t4-service-desc` (0,1,0) — cùng cái
   bẫy, chỉ khác là luật đè do CHÍNH MÌNH viết chứ không phải luật nền.
   Figma: Manrope Regular 16/26 #1F1F1F. */
.t4-card .t4-service-desc { font-size: 16px; line-height: 26px; color: var(--t4-text); }

/* Nút hero: Figma Manrope Bold 18/32 (desktop), 14/32 (mobile) — node 1208:7764. */
.t4-hero .t4-btn-lg { font-size: 18px; line-height: 32px; }

/* Bước 4 mục 6 — cuộn mượt tới #triet-ly / #dich-vu / #lien-he.
   `scroll-padding-top` bù chiều cao header sticky, nếu không đỉnh section
   nằm LỌT SAU header và người dùng tưởng anchor nhảy sai chỗ. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (max-width: 768px) { html { scroll-padding-top: 68px; } }

/* Bước 4 mục 2 — menu mobile (z-900) phủ lên header (z-500) nên NÚT HAMBURGER
   BỊ CHE: mở ra rồi không bấm đóng lại được, phải tải lại trang. `.t4-header`
   tự tạo ngữ cảnh xếp lớp nên nâng z-index của riêng nút là vô ích — phải nâng
   cả header, và chỉ nâng khi menu đang mở. */
.t4-header:has(.t4-burger.is-open) { z-index: 950; }

@media (max-width: 768px) {
  /* Figma mobile footer: SemiBold 14/19 (component 1093:9271). */
  .t4 .t4-footer-tieu-de { font-size: 14px; line-height: 19px; margin-bottom: 20px; }
  /* Figma mobile thẻ dịch vụ: chip 14px, H3 Manrope Bold 20 (node 1015:18066). */
  .t4-card-tag { font-size: 14px; }
  .t4-label > span { font-size: 14px; }
  .t4 .t4-service-card h3,
  .t4 .t4-service-head h3 { font-size: 20px; }
  .t4-hero .t4-btn-lg { font-size: 14px; line-height: 32px; }
  /* Figma mobile: H1 Playfair 32/40 · kicker Manrope Bold 16/22 ·
     link footer 18px. ⚠ Link footer desktop là 15px — hai breakpoint NGƯỢC
     nhau, chép nhầm một bên là sai cả hai. */
  .t4 h1, .t4-h1 { line-height: 40px; }
  .t4-kicker { font-size: 16px; line-height: 22px; }
  .t4-footer-nhom a { line-height: 18px; }
}

/* ==========================================================================
   XXI. SÁU LỆCH DO BƯỚC 5 TÌM RA — trang chủ, 15/08/2026
   Đối chiếu ảnh Figma ↔ site từng section (qa/index/sec/ghep-*.png).
   Mọi con số dưới đây đọc thẳng từ figma-cache, KHÔNG ước lượng bằng mắt.
   ========================================================================== */

/* --- 1. CỤM NHẤN GIỮA CÂU -------------------------------------------------
   Figma nhấn bằng `characterStyleOverrides` — một lớp chữ, nhiều kiểu. Trên
   HTML phải là <span> riêng. Bỏ span thì câu vẫn ĐỦ CHỮ, ĐÚNG FONT, ĐÚNG CỠ
   nên diff-text lẫn diff-styles đều báo ✅ — chỉ scripts/diff-cum-chu.js bắt
   được. Trang chủ từng mất 8/11 cụm ở desktop, 7/7 ở mobile.
   Màu khai trên chính <span> nên thắng giá trị thừa kế từ h2/p, không cần nâng
   độ ưu tiên. */
.t4-camel      { color: var(--t4-camel); }                        /* #CF9156 */
.t4-nhan-camel { color: var(--t4-camel-dark); font-weight: 600; } /* #B77537 */
.t4-nhan-camel-dam { color: var(--t4-camel-dark); font-weight: 700; } /* #B77537, đậm hơn .t4-nhan-camel */
.t4-mau-camel-dam { color: var(--t4-camel-dark); } /* #B77537, CHỈ đổi màu — Figma một số cụm chỉ đổi màu, không đổi độ đậm */
.t4-nhan-xanh  { color: var(--t4-dark-moss); font-weight: 600; }  /* #155446 */

/* --- 2. OVERLAY HERO ------------------------------------------------------
   Figma: lớp "Overlay" 1900×950 nền #000000 alpha 0.20. Bản trước dùng
   rgba(21,84,70,.45) — vừa sai màu vừa đậm gấp đôi, làm ảnh rừng ám xanh. */
.t4-hero-overlay { background: rgba(0, 0, 0, .20); }

/* --- 3. NÚT "KHÁM PHÁ" ----------------------------------------------------
   Figma node "Link" 180×56: nền TRẮNG đặc, viền camel #CF9156, bo 5px,
   chữ camel. Bản trước là nút rỗng viền trắng chữ trắng — khác hẳn.
   Nâng đủ độ ưu tiên để thắng `.t4 a.t4-btn-on-dark` ở mục 18. */
.t4 .t4-hero a.t4-btn-on-dark {
  background: var(--t4-white);
  border-color: var(--t4-camel);
  border-radius: 5px;
  color: var(--t4-camel);
}
.t4 .t4-hero a.t4-btn-on-dark:hover,
.t4 .t4-hero a.t4-btn-on-dark:focus {
  background: var(--t4-camel);
  color: var(--t4-white);
}

/* --- 4. TRIẾT LÝ ----------------------------------------------------------
   Figma: tiêu đề Playfair 50/60 #155446, HAI DÒNG, "Triết lý" nghiêng.
   Thân bài Manrope 20/32 (mobile 16/26) và CĂN GIỮA — bản trước căn trái 16/28,
   đó là phần lớn khoản lệch −203px của section này.
   `.t4 .t4-h2-triet-ly` = (0,2,0), thắng `.t4 h2` = (0,1,1). */
.t4 .t4-h2-triet-ly { font-size: 50px; line-height: 60px; font-weight: 600; }
.t4 .t4-h2-triet-ly em { font-style: italic; font-weight: 400; }
.t4-prose { text-align: center; font-size: 20px; line-height: 32px; }

/* Figma cụm "BẰNG CHIẾN LƯỢC RÕ RÀNG": ExtraBold 800 VÀ màu Dark Moss #155446
   — khác hẳn kicker thường (#3B3B3B). Class này chỉ dùng ở trang chủ (đã soát
   toàn bộ page-templates) nên khai màu thẳng ở đây là an toàn. */
.t4-kicker-sm { font-weight: 800; color: var(--t4-dark-moss); }

/* --- 5. TAB CASESTUDY -----------------------------------------------------
   Figma: KHÔNG phải nút viên thuốc. Tab là chữ Manrope Medium 16 #1F1F1F,
   nền trong suốt, padding 16/12, và gạch chân dày ĐÚNG 4px — camel #CF9156 ở
   tab đang chọn, đen ở tab thường (individualStrokeWeights.bottom = 4).
   ⚠ Khoanh trong #casestudy: các trang khác dùng biến thể .t4-tabs--pill và
   .t4-tablist--de, đổi luật chung là hỏng những trang đó. */
#casestudy .t4-tab {
  background: none;
  border: 0;
  border-bottom: 4px solid #000000;
  border-radius: 0;
  padding: 12px 16px;
  font-family: var(--t4-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  text-transform: none;
  color: var(--t4-text);
}
#casestudy .t4-tab.is-active,
#casestudy .t4-tab[aria-selected="true"] {
  background: none;
  color: var(--t4-text);
  border-bottom-color: var(--t4-camel);
}

/* --- 6. "XEM TẤT CẢ" ------------------------------------------------------
   Figma node "Link" 132×35: nền trong, viền #155446 1px, bo 5px,
   padding 30/8, chữ Manrope Bold 14 #155446. Bản trước là chữ trơn. */
.t4-link-all {
  display: inline-flex;
  align-items: center;
  padding: 8px 30px;
  border: 1px solid var(--t4-dark-moss);
  border-radius: 5px;
}

@media (max-width: 768px) {
  /* Figma mobile: tiêu đề Triết lý 50/40 · thân bài 16/26 (node 1015:16752). */
  .t4 .t4-h2-triet-ly { font-size: 50px; line-height: 40px; }
  .t4-prose { font-size: 16px; line-height: 26px; }
  #casestudy .t4-tab { font-size: 14px; padding: 10px 12px; }
}

/* --------------------------------------------------------------------------
   30. POPUP ĐĂNG KÝ BẢN TIN — MOBILE, node 1385:23867 (thêm 15/08/2026)
   Xem qa/cau-hoi.md #5: hiện sau 10 giây (chỉ mobile), đóng rồi thì không
   hiện lại — hành vi xử lý ở initNewsletterPopup() trong assets/js/main.js.
   -------------------------------------------------------------------------- */
.t4-newsletter { display: none; }

.t4-newsletter.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 950;
}
.t4-newsletter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.t4-newsletter-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--t4-white);
  border-radius: var(--t4-radius-card);
  box-shadow: var(--t4-shadow-card);
  padding: 28px 24px 24px;
}
.t4-newsletter-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--t4-muted);
  cursor: pointer;
}
.t4-newsletter-title {
  font-family: var(--t4-font-head);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: var(--t4-text);
  margin: 8px 0 16px;
}
.t4-newsletter-desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--t4-gray);
  margin: 0 0 24px;
}
.t4-newsletter-form label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.t4-newsletter-row { display: flex; gap: 8px; }
.t4-newsletter-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(31,31,31,.2);
  border-radius: var(--t4-radius-btn);
  font-family: var(--t4-font-body);
  font-size: 14px;
}
.t4-newsletter-row button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--t4-radius-btn);
  background: var(--t4-camel);
  color: var(--t4-white);
  font-family: var(--t4-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.t4-newsletter-row button:hover { background: var(--t4-camel-dark); }
.t4-newsletter-privacy {
  font-size: 12px;
  line-height: 19px;
  color: var(--t4-muted);
  margin: 16px 0 0;
}
.t4-newsletter-privacy a { color: var(--t4-camel-border); text-decoration: underline; }
.t4-newsletter-foot {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(31,31,31,.12);
}
.t4-newsletter-foot img { width: 35px; height: 34px; }

@media (min-width: 769px) {
  .t4-newsletter.is-open { display: none; }
}