/* ==========================================================================
   20-header.css — tách từ style.css ngày 17/08/2026 theo III.4.1.
   Nội dung bên dưới là NGUYÊN VĂN các mục §7 thanh nút đáy mobile của bản gộp;
   không sửa một luật nào trong lần tách này.
   ========================================================================== */


/* ── §7 thanh nút đáy mobile (dòng 706–903 của style.css cũ) ──────────────────── */

/* --------------------------------------------------------------------------
   7. THANH NÚT CỐ ĐỊNH ĐÁY (node 1015:20413) — chỉ mobile, dùng chung mọi trang
   -------------------------------------------------------------------------- */
/* ⚠ Node đúng là "Menu bar_Mobile" trong component set 1015:21020, biến thể
   THANH TRẦN là 1015:21017 — KHÔNG phải 1015:20413 như sitemap ghi (node đó
   tên "bx:support", chỉ là một icon lẻ 402×60 nền #155446, không phải thanh).
   Nhầm node này làm bản dựng đầu sai cả chiều cao lẫn màu nền.

   Số đo thật: 402×70 · nền #458763 · 5 nút mỗi nút 80,4px (402÷5, không có
   khoảng hở) · padding dọc 8px · icon 20px · nhãn Manrope 700 8px/lh 10,928
   trắng, cách icon 5px. */
.t4-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: none;
  background: var(--t4-leaf);
}

.t4-bottom-bar { height: 70px; }   /* Figma: khung 402×70 cố định */

.t4-bottom-bar a,
.t4-bottom-bar button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;              /* Figma itemSpacing của nút */
  height: 70px;          /* nút cao trọn thanh; Figma căn giữa khối icon+nhãn
                            trong 70px (icon y=17, nhãn y=42 → chừa 17px hai đầu),
                            nên KHÔNG dùng padding 8px như auto-layout khai báo */
  padding: 0;
  border: 0;
  cursor: pointer;
  /* Figma khai màu nền cho TỪNG nút chứ không để nút trong suốt ăn theo thanh.
     Để transparent thì nhìn y hệt (thanh cũng #458763) nhưng sai khai báo, và
     mọi hiệu ứng đổi nền sau này sẽ phải chống lại nền của lớp cha. */
  background: var(--t4-leaf);
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 8px;
  line-height: 10.928px; /* Figma lineHeightPx — số lẻ, lấy đúng */
  letter-spacing: 0;
  text-align: center;
  color: var(--t4-white);
  text-decoration: none;
}
/* Nút thứ 5 là thẻ <button>, mà Flatsome tạo kiểu cho CẢ thẻ button trần:
   text-transform:uppercase · margin:0 1em 1em 0 · min-height:2.5em.
   Ba thứ đó làm nút 5 thấp hơn, hẹp hơn và VIẾT HOA so với bốn nút kia. */
.t4-bottom-bar button {
  margin: 0;
  min-height: 0;
  text-transform: none;
}
.t4-bottom-bar .material-symbols-outlined {
  font-size: 20px;       /* Figma: khung icon 20×20 */
  line-height: 20px;
  font-variation-settings: 'wght' 300;
}
/* Trạng thái ĐANG Ở — Figma tô nền camel cho nút của mục hiện tại. Nút
   "Tuỳ chọn khác" mang sẵn class này vì camel ở cả 5/5 biến thể. */
.t4-bottom-bar .dang-o { background: var(--t4-camel); }
/* ⛔ ĐÚNG MỘT nút camel tại một thời điểm. Cả năm biến thể của bộ 1015:21020
   chỉ tô nền '#cf9156' cho MỘT nút. Nhưng nút của trang ĐANG XEM đã mang sẵn
   `dang-o` do PHP in ra, nên mở bảng ngay tại trang chủ là có HAI nút camel
   cùng lúc — bắt được bằng ẢNH CHỤP, không mốc số nào hỏi tới.
   `html.t4-khoa-cuon` chỉ tồn tại khi ĐANG CÓ một bảng mở (main.js đặt), nên
   dùng nó làm điều kiện: lúc đó trả nút trang-đang-xem về nền xanh, còn nút
   vừa bấm giữ camel nhờ `aria-expanded="true"`.
   ⚠ Làm bằng CSS chứ KHÔNG gỡ class trong JS: gỡ class thì lúc chuyển từ bảng
   này sang bảng kia sẽ mất luôn trạng thái "đang ở trang này", và không còn
   gì để trả lại. */
html.t4-khoa-cuon .t4-bottom-bar .dang-o:not([aria-expanded="true"]) {
  background: var(--t4-leaf);
}
.t4-bottom-bar a:hover,
.t4-bottom-bar button:hover { background: var(--t4-camel-dark); }

@media (max-width: 849px) {
  .t4-bottom-bar { display: flex; }
  body.t4 { padding-bottom: 70px; } /* chừa chỗ cho thanh đáy cao 70px */
}

/* --------------------------------------------------------------------------
   7b. BẢNG "DỊCH VỤ" MOBILE — DỰNG LẠI 24/08/2026
   [figma] 1276:10625 (hàng 1 ĐÓNG) · 1276:9485 (hàng 1 MỞ), lồng trong biến
   thể 1015:21019 của bộ 1015:21020. Node 1015:20521 dùng ở bản trước là BẢN
   CŨ (thanh tab + lưới thẻ) — xem qa/menu-mobile-chenh-lech-2026-08-24.md.

   [số] Panel 402×744 nền trắng, mở từ nút "Dịch vụ" ở thanh đáy
   (thanh + panel = 402×814). Bốn HÀNG xếp dọc, khe giữa hàng 10:

     hàng        402×60 · đệm 16 trên/dưới · 24 trái/phải
     tiêu đề     Manrope 700 14/28 '#1f1f1f' tại x=24
     chevron     khung 18×18 tại x=360 (⇒ mép phải 402−360−18 = 24 ✓)
                 hàng gập ĐÓNG  ▼ 12,87×7,07 '#1f1f1f'
                 hàng gập MỞ    ▲ trắng, nền hàng '#cf9156'
                 hàng liên kết  ❯ 7,07×12,87 '#3b3b3b' @50% (chevron xoay −90°)
     kẻ          hàng gập: trên+dưới 1px '#000' @10% (strokeAlign INSIDE)
                 hàng liên kết: dưới 1px '#000' @15%
     ruột        402×461 · đệm 8 trên/dưới · 25 trái/phải
     mục con     352 rộng · đệm 24 trên/dưới · ngang gap 8
                 icon 23–24×30 '#b77537' → khối 320/321
                 khối: tên 14/20/700 → gap 8 → mô tả 12/21/400

   [lý do vượt panel] thanh đáy + bảng mobile là khối child theme ngoài UX
   Builder (danh mục vĩnh viễn III.3b) — không có panel Flatsome nào chỉnh.

   ⚠ Figma TỰ MÂU THUẪN, đã ghi qa/phan-hoi-figma.md: khung hàng 1 ở bản ĐÓNG
     khai cao 60 trong khi ruột cao 461 (clipsContent:false) ⇒ ruột ĐÈ lên ba
     hàng dưới; bản MỞ khai khung 521 mới đúng. Dựng theo bản MỞ. Và khe giữa
     hàng 1 với nhóm hàng 2–4 ở bản MỞ là 23px trong khi mọi khe khác là 10 ⇒
     dùng 10 thống nhất.

   ⚠ Mô tả mục con: Figma khai "Figma ipsum" — 4T CẤM chữ giả trên live, nên
     mô tả thật (rút gọn từ trang đích) nạp qua trường Mô tả của trình đơn WP.
     Vì chữ thật dài hơn chữ giả nên KHÔNG chốt cứng chiều cao mục (85/105 của
     Figma đo trên chữ giả một dòng); mốc `cao` của mục con được miễn trừ.
   -------------------------------------------------------------------------- */
.t4-panel-dichvu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;            /* ngồi ngay trên thanh đáy */
  z-index: 799;            /* dưới thanh đáy (800) để thanh đáy luôn bấm được */
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-dichvu { display: block; }
  .t4-panel-dichvu[hidden] { display: none; }
}
html.t4-khoa-cuon, html.t4-khoa-cuon body { overflow: hidden; }

/* ── HÀNG (chung cho hàng gập và hàng liên kết) ─────────────────────────────
   [số] 402×60 · đệm 16/24 · khe giữa hai hàng 10 · tiêu đề 14/28/700 x=24 */
.t4-dv-hang + .t4-dv-hang { margin-top: 10px; }

.t4-dv-dau,
.t4-dv-hang--link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 16px 24px;
  box-sizing: border-box;   /* kẻ của Figma là strokeAlign INSIDE ⇒ nằm TRONG 60px */
  margin: 0;
  min-height: 0;            /* Flatsome đặt min-height 2.5em cho mọi <button> trần */
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  background: var(--t4-white);
  text-align: left;
  text-transform: none;     /* Flatsome viết hoa mọi <button> trần */
  text-decoration: none;
  cursor: pointer;
}
/* [số] hàng GẬP có kẻ CẢ TRÊN lẫn dưới, và mực nhạt hơn: '#000' @10%. */
.t4-dv-hang--gap .t4-dv-dau {
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.t4-dv-ten {
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--t4-text);    /* Figma '#1f1f1f' */
}

/* ── CHEVRON ────────────────────────────────────────────────────────────────
   [số] khung 18×18; nét vẽ 12,87×7,07. Vẽ bằng mask nên đổi màu bằng
   'background-color' — không nhúng màu vào tệp SVG, và không cần thêm ảnh.
   Hàng liên kết dùng ĐÚNG hình đó xoay −90° (Figma cũng xoay, không vẽ hình
   khác: 'Button → SVG' mang rotation −1,5708 rad). */
.t4-dv-chev {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: var(--t4-text);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12.87px 7.07px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12.87px 7.07px no-repeat;
  transition: transform .3s ease-out;
}
.t4-dv-chev--phai {
  transform: rotate(-90deg);
  background-color: rgba(59, 59, 59, .5);   /* Figma '#3b3b3b' @50% */
}
.t4-dv-dau[aria-expanded="true"] {
  background: var(--t4-camel);              /* Figma '#cf9156' khi hàng đang MỞ */
}
.t4-dv-dau[aria-expanded="true"] .t4-dv-ten { color: var(--t4-white); }
.t4-dv-dau[aria-expanded="true"] .t4-dv-chev {
  transform: rotate(180deg);                /* ▼ thành ▲ */
  background-color: var(--t4-white);
}

/* ── RUỘT hàng gập ──────────────────────────────────────────────────────────
   [số] đệm 8 trên/dưới · 25 trái/phải; các mục dính nhau, KHÔNG có khe.
   'height' do JS đặt để chạy chuyển động 300 ms EASE_OUT — đúng transition
   SMART_ANIMATE mà Figma khai cho ON_CLICK của hàng này. */
.t4-dv-ruot {
  overflow: hidden;
  padding: 0 25px;
  transition: height .3s ease-out;
}
.t4-dv-ruot.t4-dv-mo { padding: 8px 25px; }
.t4-dv-muc {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--t4-text);
}
.t4-dv-ic {
  flex: 0 0 auto;
  width: 24px;
  height: 30px;             /* Figma: khung icon cao 30, glyph tự canh giữa */
  font-size: 24px;
  line-height: 30px;
  color: var(--t4-camel-dark);  /* Figma '#b77537' */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.t4-dv-khoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;             /* cho phép chữ dài tự xuống dòng thay vì tràn ngang */
  flex: 1 1 auto;
}
.t4-dv-muc-ten {
  font-family: var(--t4-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  /* Figma ngắt dòng THỦ CÔNG ở "Google Merchant \n Center (GMC)". Không ép
     được chỗ ngắt bằng CSS, nhưng cân hai dòng cho đều thì ra đúng chỗ đó —
     và không ghi cứng gì, 4T đổi tên mục vẫn tự cân lại. */
  text-wrap: balance;
}
.t4-dv-muc-mota {
  font-family: var(--t4-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0;
}

/* Chuyển động mở bảng — Figma khai SMART_ANIMATE · EASE_OUT · 300 ms cho
   ON_CLICK của cả năm nút thanh đáy. Chỉ chạy KHI MỞ (không tự chạy, không
   lặp); đóng thì tắt ngay để không giữ lớp phủ trên màn. */
@keyframes t4-panel-len {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.t4-panel:not([hidden]) { animation: t4-panel-len .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .t4-panel:not([hidden]) { animation: none; }
  .t4-dv-ruot, .t4-dv-chev { transition: none; }
}


/* ══ BẢNG "TUỲ CHỌN KHÁC" (khổ 402) — Figma node '1015:21015' ═════════════
   Biến thể thứ 5 của bộ 'Component 1': thanh đáy + panel = 402×814, panel
   402×744 nền trắng ngồi ngay trên thanh đáy 70px.

   Mốc Figma (tính từ mép trên panel):
     logo dọc     (25,   0) 352×83
     đường kẻ     (25,  98) 352×1
     mục 1        y=113 · mục 2 y=217 · mục 3 y=321 · mục 4 y=425  (bước 104)
       trong mục: pt18 → hàng «icon + tên» cao 30 → gap 8 → mô tả 12/21 → pb18
       icon x=25 (mục 1 rộng 28, ba mục còn lại 25), cao 30
       tên  x=61 (mục 1) / x=54 (còn lại) · Manrope 700 14/28 '#1f1f1f'
       mô tả x=25 rộng 352 · Manrope 400 12/21 '#1f1f1f'
       [figma] Container 352 khổ Mobile '1093:8882'

   ⚠ BỐN mục, không phải năm: 'Frame 11' («Hỗ trợ khách hàng») và
     'Rectangle 4' trong Figma đều 'visible: false'. Đọc JSON mà bỏ cờ
     'visible' là dựng thừa một mục và một khối nền kem.
   -------------------------------------------------------------------------- */
.t4-panel-tck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 799;
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-tck { display: block; }
  .t4-panel-tck[hidden] { display: none; }
}
.t4-tck-logo {
  display: block;
  width: 352px;
  height: 83px;
  margin: 0 25px;
}
/* [số] Đường kẻ ở y=98: khối logo cao 83 ⇒ chừa thêm 15. */
.t4-tck-ke {
  height: 1px;
  margin: 15px 25px 0;
  background: rgba(0, 0, 0, .1);
}
/* [số] Mục đầu ở y=113 = 98 + 15. */
/* [số] Mục đầu ở y=113 = 98 (kẻ) + 15. Đo thật cho thấy chữ rơi thấp hơn
   Figma đúng 2px ở CẢ BỐN mục (bước 104 đã khớp tuyệt đối), nên bù ở đây
   chứ không đụng vào bước. */
.t4-tck-ds { margin: 13px 25px 0; }
.t4-tck-muc {
  display: block;
  box-sizing: border-box;
  /* ⛔ CHIỀU CAO CHỐT 104, KHÔNG để chữ đẩy. Figma khai hộp mô tả 352×30 —
     tức MỘT dòng — nhưng chữ thật dài 2 dòng (21×2 = 42) và TRÀN ra khỏi hộp.
     Đây là mô-típ đã gặp ở trang #9 (§30): hộp chữ Figma nhỏ hơn chữ nó vẽ.
     Để mục tự cao theo chữ thì bước nhảy thành ~115 và tới mục thứ tư đã lệch
     hơn 30px. Tràn 12px xuống phần đệm dưới 18px là đúng như Figma vẽ, không
     đụng mục kế tiếp. */
  height: 104px;
  padding: 18px 0;          /* 18 + 30 + 8 + 30 + 18 = 104 */
  color: var(--t4-text);
  text-decoration: none;
}
.t4-tck-dau {
  display: flex;
  align-items: center;
  gap: 8px;                 /* mục 1: icon 28 + 8 = tên ở x=61 ✓ */
  height: 30px;
}
.t4-tck-muc + .t4-tck-muc .t4-tck-dau { gap: 4px; }  /* icon 25 + 4 = x=54 ✓ */
.t4-tck-ic { display: block; height: 30px; flex: 0 0 auto; }
.t4-tck-ten {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-text);
}
.t4-tck-mota {
  display: block;
  height: 30px;             /* hộp Figma 352×30; chữ 2 dòng tràn ra ngoài */
  margin-top: 8px;
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}

/* ══ BẢNG "GIÁO DỤC" / "HỆ SINH THÁI KIẾN THỨC" (khổ 402) ═════════════════
   Figma: nội dung mobile lồng trong chính biến thể của nút thanh đáy —
   `1015:21016` (Giáo dục) và `1015:21018` (Kiến thức) của bộ `Component 1`
   (1015:21020). Panel gốc `1015:20605` / `1015:20707`, tên lớp "Menu_Dịch vụ"
   giữ nguyên từ khuôn Dịch vụ (KHÔNG phải panel Dịch vụ — xem chú thích đầu
   `template-parts/mobile-panel-giaoduc.php` để biết vì sao cửa sổ trước bỏ
   sót hai submenu này).

   Mốc Figma (tính từ mép trên panel, GIỐNG NHAU giữa hai bảng):
     khối tiêu đề   y=0→135, VERTICAL gap8, canh giữa dọc trong 135px:
       tiêu đề y=24  (14/28/700 '#458763')
       mô tả   y=60  (12/21/400 '#1f1f1f')
     đường kẻ 1px '#e3e3e3'  y=150 (135 + gap15 của panel)
     danh sách mục  y=165 (150 + gap15)

   Giáo dục (`.t4-gdkt-ds--doc`) — BA mục XẾP DỌC, mỗi mục cao 161, icon NẰM
   TRÊN tên (không phải bên cạnh): pt18 → icon 30 (rộng 20-23 tuỳ icon) →
   gap8 → tên 14/28/700 → mô tả 12/21/400 → pb18. Ba mục liền kề, không có
   khe hở giữa (161×3 = 483 = đúng chiều cao khối danh sách).

   Kiến thức (`.t4-gdkt-ds--ngang`) — HAI mục xếp NGANG: icon (23×30) bên
   trái, khối tên+mô tả bên phải RỘNG 321 (KHÔNG tràn hết 352 như panel Tuỳ
   chọn khác — Figma thụt lề bằng đúng icon + gap8), mỗi mục cao 123
   (pt18 + khối 87 + pb18), hai mục cách nhau 16.

   ⛔ Khối nền trang trí `Rectangle 4` (183×142 · '#efe8da' · bo góc 10) KHÔNG
   được dựng — node Figma của nó khai `visible: false` ở CẢ HAI bảng (đo lại
   22/08/2026, xem `uxb/mobile-panel-gdkt-figma-spec.md`). Bản dựng trước
   từng vẽ nó bằng '::before' trên '.t4-gdkt-noibat' — đã GỠ.
   -------------------------------------------------------------------------- */
.t4-panel-gdkt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 799;
  display: none;
  height: 744px;
  /* [số] 60 (header) + 744 (bảng) + 70 (thanh đáy) = 874 — đúng chiều cao
     khung thiết bị mà Figma dựng. Vì vậy trần của bảng phải chừa CẢ header,
     không chỉ chừa thanh đáy: máy nào màn thấp hơn 874 thì bảng co lại và
     header vẫn nhìn thấy. ⛔ Để `- 70px` như bản trước thì trên khung 780
     bảng cao 710 trùm lên header (header z-index 1001 > bảng 799) — hàng
     đầu của bảng KHÔNG BẤM ĐƯỢC, cú bấm rơi vào logo. Đã bắt được bằng
     Playwright: 'subtree intercepts pointer events'. */
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);   /* dvh: trừ luôn thanh URL của trình duyệt di động */
  overflow-y: auto;
  background: var(--t4-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
@media (max-width: 849px) {
  .t4-panel-gdkt { display: block; }
  .t4-panel-gdkt[hidden] { display: none; }
}

.t4-gdkt-dau {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  height: 135px;
  margin: 0 25px;
  box-sizing: border-box;
}
.t4-gdkt-tieude {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-leaf);       /* Figma '#458763' */
}
/* [số] Figma khai hộp mô tả cao 51 (352 rộng, 12/21) cho CHỮ IPSUM PLACEHOLDER
   — chữ thật đo được luôn xuống 3 dòng thật (63px) ở đúng font/cỡ đó, tràn
   12px ra ngoài hộp. Cùng mô-típ đã gặp ở panel "Tuỳ chọn khác"
   (mota 352×30 khai 1 dòng, chữ thật 2 dòng) — CHỐT cao theo Figma, để chữ
   TRÀN xuống dưới thay vì để hộp tự giãn: '.t4-gdkt-dau' canh giữa theo chiều
   cao 135 cố định, giãn hộp mô tả sẽ đẩy tiêu đề lệch pt24 → pt18 (đã đo lệch
   thật 6px trước khi chốt dòng height dưới đây). */
.t4-gdkt-mota {
  display: block;
  width: 100%;
  height: 51px;
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}
/* [số] đường kẻ ở y=150 = 135 (khối tiêu đề) + gap15 của panel. */
.t4-gdkt-ke {
  height: 1px;
  margin: 15px 25px 0;
  background: #e3e3e3;
}
/* [số] danh sách bắt đầu ở y=165 = 150 + gap15. */
.t4-gdkt-ds { margin: 15px 25px 0; position: relative; }

/* — Giáo dục: icon TRÊN tên, ba mục liền kề, mỗi mục 161px — */
.t4-gdkt-muc--doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 161px;
  padding: 18px 0;      /* 18 + 30(icon) + 8 + 87(tên+mô tả) + 18 = 161 */
  box-sizing: border-box;
  color: var(--t4-text);
  text-decoration: none;
}
.t4-gdkt-muc--doc .t4-gdkt-ic { height: 30px; }  /* khung icon Figma cao 30, glyph tự canh giữa */

/* [phục vụ] mục VÔ HIỆU của bảng Giáo dục | [figma] 1015:20605
   [lý do vượt panel] khối child theme, không có panel Flatsome nào chỉnh.
   ⛔ 4T chốt 24/08/2026: «Ebook, Template & Tool» và «Cộng đồng» ở trạng thái
   vô hiệu — khớp Figma, nơi hai mục này KHÔNG có `interactions` ON_CLICK nào.
   Dựng bằng thẻ <span aria-disabled="true"> chứ KHÔNG phải <a href="#">:
   4T đã yêu cầu bỏ hẳn href rỗng, và `kiem-seo-toc-do.js` báo ❌ cho href="#". */
.t4-gdkt-muc--tat {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* — Kiến thức: icon TRÁI + khối tên/mô tả PHẢI (thụt lề = icon + gap), hai
   mục cách nhau 16 — */
.t4-gdkt-muc--ngang {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 123px;         /* chốt theo Figma — không set thì đo thật ra 135px
                             (chữ mô tả thật 3 dòng thay vì 2,x dòng Figma) */
  padding: 18px 0;      /* 18 + 87(khối tên+mô tả, cũng là chiều cao icon-block) + 18 = 123 */
  box-sizing: border-box;
  color: var(--t4-text);
  text-decoration: none;
}
.t4-gdkt-muc--ngang + .t4-gdkt-muc--ngang { margin-top: 16px; }
.t4-gdkt-muc--ngang .t4-gdkt-ic { height: 30px; flex: 0 0 auto; margin-top: 0; }
.t4-gdkt-khoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 321px;          /* Figma: KHÔNG tràn hết 352, thụt lề theo icon+gap */
}

.t4-gdkt-ic { display: block; flex: 0 0 auto; }
.t4-gdkt-ten {
  font-family: var(--t4-font-body);
  font-size: 14px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--t4-text);
}
.t4-gdkt-mota-muc {
  display: block;
  height: 51px;           /* chốt theo Figma, cùng lý do ở '.t4-gdkt-mota' —
                              chữ thật 3 dòng (63px) tràn 12px xuống pb18. */
  font-family: var(--t4-font-body);
  font-size: 12px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--t4-text);
}

/* ⛔ ĐÃ GỠ khối nền kem 'Rectangle 4' (22/08/2026, rà soát ảnh nhiệt). Node
   Figma của khối này — '1015:20612' (Giáo dục) và '1015:20713' (Kiến thức) —
   khai 'visible: false' trong file gốc (kiểm bằng `tools/figma.py json
   <node>`, đọc thẳng absoluteBoundingBox+visible; `dump-figma-spec.py` tự cắt
   nhánh ẩn nên không lộ ra khi dump). Bản kết xuất THẬT của Figma KHÔNG hiện
   khối này — đúng bẫy đã ghi ở `qa/thieu-panel-tuy-chon-khac.md` mục 5 cho
   panel "Tuỳ chọn khác" (ở đó 'Frame 11'/'Rectangle 4' cũng ẩn và đã KHÔNG
   dựng). Bản dựng trước đó của panel Giáo dục/Kiến thức đã dựng NHẦM khối
   này. Xem chi tiết + toạ độ gốc: `uxb/mobile-panel-gdkt-figma-spec.md`.
   Lớp '.t4-gdkt-noibat' đã GỠ NỐT KHỎI HTML ngày 24/08/2026 — giữ một lớp
   không ai dùng chỉ mời người sau dựng lại đúng khối đã bị loại. */

/* ══ BIỂU TƯỢNG TÌM KIẾM — header khổ 402 ═════════════════════════════════
   Figma '1017:21317' (Group 1171274955): kính lúp NÉT TRẮNG '#ffffff',
   vòng 16×16 tại (360 · 19,75) + cán 4×4 tại (373 · 33,75) ⇒ khối 17×18.

   ⛔ Trước 19/08/2026 biểu tượng này CHƯA CÓ MỘT LUẬT NÀO — nó ăn nguyên màu
   mặc định của Flatsome 'rgba(102,102,102,.85)', tức XÁM ĐẬM trên nền xanh
   rêu. 4T nhìn ra ngay, còn mọi phép đo đều im: bản đồ chỉ khai 'w' và 'h'
   (15,4×18,4 so với 17×18 — lọt dung sai 2px), ảnh nhiệt thì khối chỉ 306px²,
   thua xa ngưỡng 6000px² của "vùng đỏ liền khối". Đã bổ sung 'mau_net' vào
   bản đồ cùng bản vá này. */
#header li.header-search > a,
#header li.header-search > a > i { color: var(--t4-white); }

/* [phục vụ] phần tử: nút icon tìm kiếm mobile ('a.is-small' do Flatsome sinh,
   trong 'li.header-search') | khối: header mobile
   [figma] không đổi — vẫn đúng khung 17×18 đã khai ở '1017:21317' phía trên
   [lý do vượt panel] vùng chạm là hành vi WCAG 2.5.8, panel Flatsome không có
   tuỳ chọn "kích thước vùng chạm" tách khỏi kích thước icon.
   ⛔ Kiểm tương tác (`kiem-tuong-tac.js`) báo 'A.is-small' 17,0×38,0 — dưới
   ngưỡng chạm 24×24. Icon vẫn giữ nguyên 17×18 hiển thị (đừng phóng to icon
   thị giác — đó là vi phạm Luật 1); chỉ NỚI VÙNG CHẠM bằng '::after' tuyệt
   đối, nới ra ngoài theo inset ÂM để bộ đo nhận diện đúng là lớp phủ vùng bấm
   (nó chỉ tính '::after' khi cả 4 cạnh đều khai và đều ≤0 — xem bình luận
   'hopBam' trong script). Chiều cao 38px đã đủ 24px.
   ⚠ SỬA 22/08/2026: nới đều 5px hai bên (bản đầu) làm cạnh TRÁI của icon
   ĐÈ lên logo — mép trái icon nằm SÁT logo (khoảng cách 0px), kiểm tương
   tác báo "hai vùng bấm chồng nhau" dt=147 (logo × icon tìm kiếm). Đổi
   sang nới KHÔNG ĐỐI XỨNG: 0px bên trái (logo không có chỗ nhường), 9px
   bên phải (còn khoảng trắng tới mép màn hình) — bề rộng 17+9=26 ≥24. */
#header li.header-search > a.is-small { position: relative; }
#header li.header-search > a.is-small::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: -9px;
}

/* [số] Glyph 'icon-search' của phông 'fl-icons' KHÁC HÌNH Figma: vòng nhỏ hơn,
   nét dày hơn, cán ngắn hơn. Thay bằng chính vector Figma '1017:21317'
   (18×19, hai nét 'stroke-width: 2') qua 'mask', màu vẫn do CSS quyết.
   ⛔ Hai bẫy data URI đã trả giá ở footer: dấu '#' phải thành '%23', và nháy
   kép trong SVG phải đổi sang nháy đơn — thiếu một là mask không tải được và
   'background-color' tô KÍN cả ô, ra một hình chữ nhật đặc. */
#header li.header-search > a > i::before { content: none; }
#header li.header-search > a > i {
  display: block;
  position: relative;
  top: -1.25px;             /* Figma y=19,75 · dòng chảy Flatsome cho 21 */
  width: 17px;
  height: 18px;
  background-color: var(--t4-white);
  -webkit-mask: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8.12529 1.01566C12.0518 1.01566 15.2349 4.19875 15.2349 8.12529C15.2349 12.0518 12.0518 15.2349 8.12529 15.2349C4.19875 15.2349 1.01566 12.0518 1.01566 8.12529C1.01566 4.19875 4.19875 1.01566 8.12529 1.01566Z' stroke='white' stroke-width='2'/> <path d='M13.2036 14.2193L17.2662 18.2819' stroke='white' stroke-width='2.03132'/> </svg>") no-repeat center / 17px 18px;
  mask: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8.12529 1.01566C12.0518 1.01566 15.2349 4.19875 15.2349 8.12529C15.2349 12.0518 12.0518 15.2349 8.12529 15.2349C4.19875 15.2349 1.01566 12.0518 1.01566 8.12529C1.01566 4.19875 4.19875 1.01566 8.12529 1.01566Z' stroke='white' stroke-width='2'/> <path d='M13.2036 14.2193L17.2662 18.2819' stroke='white' stroke-width='2.03132'/> </svg>") no-repeat center / 17px 18px;
}

/* [figma] luật dùng chung — lớp rộng 23px có ở 3 trang; đại diện: trang25:'804:37460' · trang5:'1113:12146' · trang8:'1036:46300'
   (tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* ══ NĂM BIỂU TƯỢNG MEGA MENU — thay glyph Material bằng vector Figma ══════
   ⛔ Phông 'material-symbols-outlined' VẼ KHÁC bộ icon Figma, không chỉ khác
   độ dày: 'school' của Figma CÓ DÂY TUA còn glyph thì không; 'group' của Figma
   là BA người còn glyph chỉ hai. Sai HÌNH, không phải sai nét.

   ⛔ Vì sao mọi phép đo im: bản đồ chỉ so hộp 'x·y·w·h' của '<span>' (23×28,
   khớp trong 2px) và ảnh nhiệt thì mỗi icon ~600px², thua xa ngưỡng 6000px²
   của "vùng đỏ liền khối". 4T nhìn ra icon tìm kiếm trước, soi tiếp mới lộ
   nốt năm cái này — cùng một lớp lỗi.

   ⛔ KÍCH THƯỚC MASK PHẢI LÀ KHỔ CỦA CHÍNH TỆP SVG (23×30 — khung 'Asset 1 x'
   của Figma), KHÔNG phải khổ phần hình vẽ bên trong (23×20…). Đặt theo phần
   vẽ là ép cả tệp 23×30 vào 23×20, hình co còn ~65 % — đã đo: school
   14,5×12,5 thay vì 22,5×19,5. Phần chừa trong tệp chính là thứ đặt hình
   đúng chỗ Figma vẽ.

   Hai bẫy data URI (đã trả giá ở footer): '#' phải thành '%23', nháy kép
   trong SVG phải đổi sang nháy đơn — thiếu một là mask không tải và
   'background-color' tô KÍN cả ô. */
.t4-mega-the .material-symbols-outlined.t4-ic,
#header .nav-dropdown .material-symbols-outlined.t4-ic {
  display: block;
  width: 23px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-size: 23px 30px;
  mask-size: 23px 30px;
}
.t4-ic::before { content: none; }

/* Khoá học — mũ tốt nghiệp CÓ dây tua */
.t4-ic-school {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.8105 22.8921C4.98456 22.7261 3.43851 21.1899 3.22759 19.4138L3.21889 14.5384C3.17536 14.4098 1.13181 13.4015 0.825145 13.1946C-0.317824 12.4222 -0.256892 10.9829 0.905495 10.2732L9.94078 5.35289C11.0349 4.85862 12.0734 4.89091 13.1521 5.40363C16.1638 6.83635 19.0805 8.79563 22.0876 10.2732C23.3618 11.122 23.2768 12.5165 21.9872 13.3126C21.2861 13.7455 20.4498 14.0665 19.7749 14.5384L19.7662 19.3644C19.5499 21.2637 17.9958 22.7326 16.0634 22.8974C16.0192 23.3429 16.1096 23.8471 16.0447 24.2853C15.9502 24.9219 15.2231 25.2363 14.7028 24.7928C14.6426 24.7414 14.4537 24.4982 14.4537 24.4461V22.8921H6.8105ZM11.3355 6.57735C10.9826 6.61031 10.7175 6.75068 10.4108 6.90028C7.49347 8.32442 4.6799 10.1644 1.75653 11.6031C1.62998 11.6637 1.55298 11.8041 1.7043 11.8851L10.2923 16.5536C11.6783 17.5046 12.895 16.4113 14.1015 15.7635L10.8219 12.5303C10.3552 11.7283 11.2773 10.9539 12.0225 11.497L15.5806 14.9878L21.3671 11.8113L21.2366 11.6037C18.3373 10.1671 15.5445 8.35606 12.6499 6.93323C12.2113 6.71773 11.8464 6.53056 11.3342 6.57801L11.3355 6.57735ZM14.4537 17.4163C13.7915 17.6964 13.1983 18.1814 12.4992 18.3785C11.7587 18.5874 10.9518 18.5406 10.23 18.2928L4.83056 15.3931V19.3644C4.83056 20.169 6.10142 21.3131 6.91027 21.3131H14.4531V17.4163H14.4537ZM16.058 21.3131C16.8294 21.1839 17.513 20.7648 17.888 20.0807C17.9529 19.9628 18.1625 19.4646 18.1625 19.3644V15.3931L16.0574 16.5523V21.3125L16.058 21.3131Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.8105 22.8921C4.98456 22.7261 3.43851 21.1899 3.22759 19.4138L3.21889 14.5384C3.17536 14.4098 1.13181 13.4015 0.825145 13.1946C-0.317824 12.4222 -0.256892 10.9829 0.905495 10.2732L9.94078 5.35289C11.0349 4.85862 12.0734 4.89091 13.1521 5.40363C16.1638 6.83635 19.0805 8.79563 22.0876 10.2732C23.3618 11.122 23.2768 12.5165 21.9872 13.3126C21.2861 13.7455 20.4498 14.0665 19.7749 14.5384L19.7662 19.3644C19.5499 21.2637 17.9958 22.7326 16.0634 22.8974C16.0192 23.3429 16.1096 23.8471 16.0447 24.2853C15.9502 24.9219 15.2231 25.2363 14.7028 24.7928C14.6426 24.7414 14.4537 24.4982 14.4537 24.4461V22.8921H6.8105ZM11.3355 6.57735C10.9826 6.61031 10.7175 6.75068 10.4108 6.90028C7.49347 8.32442 4.6799 10.1644 1.75653 11.6031C1.62998 11.6637 1.55298 11.8041 1.7043 11.8851L10.2923 16.5536C11.6783 17.5046 12.895 16.4113 14.1015 15.7635L10.8219 12.5303C10.3552 11.7283 11.2773 10.9539 12.0225 11.497L15.5806 14.9878L21.3671 11.8113L21.2366 11.6037C18.3373 10.1671 15.5445 8.35606 12.6499 6.93323C12.2113 6.71773 11.8464 6.53056 11.3342 6.57801L11.3355 6.57735ZM14.4537 17.4163C13.7915 17.6964 13.1983 18.1814 12.4992 18.3785C11.7587 18.5874 10.9518 18.5406 10.23 18.2928L4.83056 15.3931V19.3644C4.83056 20.169 6.10142 21.3131 6.91027 21.3131H14.4531V17.4163H14.4537ZM16.058 21.3131C16.8294 21.1839 17.513 20.7648 17.888 20.0807C17.9529 19.9628 18.1625 19.4646 18.1625 19.3644V15.3931L16.0574 16.5523V21.3125L16.058 21.3131Z' fill='%23458763'/> </svg>");
}

/* Ebook · Template & Tool — bốn ô bo góc */
.t4-ic-dashboard {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14.558 4.56528C16.255 4.36595 18.3027 4.68867 20.0375 4.56528C21.0424 4.69816 21.8482 5.51445 21.9335 6.53007C22.1326 9.06437 21.7819 11.8739 21.9335 14.4367C21.8198 15.4618 20.995 16.2876 19.9617 16.373C18.2553 16.5059 16.3687 16.2686 14.6433 16.373C13.6195 16.2591 12.7947 15.4333 12.7094 14.3987C12.5103 11.8455 12.8611 9.02641 12.7094 6.45414C12.8232 5.50496 13.6005 4.68867 14.558 4.57477V4.56528ZM14.6907 5.98904C14.3874 6.05548 14.1504 6.30227 14.1219 6.62499V14.2659C14.1219 14.6265 14.4063 14.9208 14.7666 14.9493C16.3972 14.8449 18.2173 15.0916 19.829 14.9493C20.2176 14.9113 20.4926 14.655 20.521 14.2564V6.66296C20.502 6.31176 20.2271 5.99853 19.8764 5.97955H14.7002L14.6907 5.98904Z' fill='%23458763'/> <path d='M3.91154 12.6522C5.60847 12.4529 7.65617 12.7756 9.39103 12.6522C10.3959 12.7851 11.2017 13.6014 11.287 14.617C11.4861 17.1513 11.1354 19.9608 11.287 22.5236C11.1733 23.5487 10.3485 24.3745 9.31519 24.4599C7.60877 24.5928 5.72223 24.3555 3.99686 24.4599C2.97301 24.346 2.14824 23.5203 2.06292 22.4857C1.86384 19.9324 2.2146 17.1133 2.06292 14.5411C2.17668 13.5919 2.95405 12.7756 3.91154 12.6617V12.6522ZM4.04426 14.0665C3.74089 14.1329 3.50389 14.3797 3.47545 14.7024V22.3433C3.47545 22.704 3.75985 22.9982 4.1201 23.0267C5.75067 22.9223 7.57085 23.1691 9.18247 23.0267C9.58063 22.9887 9.83659 22.7324 9.87451 22.3338V14.7404C9.86503 14.3797 9.59011 14.0854 9.22987 14.057H4.04426V14.0665Z' fill='%23458763'/> <path d='M3.91188 4.5652C5.65622 4.66012 7.62808 4.39435 9.35346 4.55571C10.2067 4.63165 10.984 5.29607 11.2116 6.12185C11.3632 6.71034 11.3443 8.88396 11.2779 9.54838C11.1736 10.6399 10.292 11.4088 9.22073 11.4847C7.56172 11.6081 5.75102 11.3898 4.07304 11.4847C3.18191 11.4278 2.3287 10.7633 2.12014 9.89008C1.98742 9.28261 1.9969 7.11849 2.07274 6.44457C2.16754 5.4954 2.97335 4.69809 3.91188 4.5652ZM4.0446 5.98897C3.73176 6.05541 3.51372 6.3022 3.4758 6.62492C3.40944 7.2229 3.40944 8.81751 3.4758 9.42499C3.5232 9.82364 3.82656 10.0325 4.20576 10.0704C5.76998 10.2128 7.54276 9.95653 9.13541 10.0704C9.50514 10.0514 9.81798 9.79517 9.86538 9.42499C9.93174 8.85548 9.93174 7.20392 9.86538 6.62492C9.82746 6.25474 9.54306 6.00795 9.18281 5.97948C7.55224 5.8371 5.70362 6.08389 4.0446 5.98897Z' fill='%23458763'/> <path d='M14.6532 17.5309C16.3217 17.3601 18.2272 17.6353 19.9147 17.5214C20.8058 17.5784 21.659 18.2428 21.8676 19.1161C22.0193 19.7235 21.9908 21.8307 21.934 22.5141C21.8392 23.5297 20.9765 24.365 19.9621 24.4504C18.2557 24.5833 16.3691 24.346 14.6438 24.4504C13.6673 24.346 12.8236 23.5392 12.7193 22.5616C12.6529 21.8877 12.634 19.771 12.7667 19.1635C12.9658 18.2808 13.7716 17.6353 14.6532 17.5404V17.5309ZM14.7386 18.9547C14.4162 19.0306 14.1698 19.2489 14.1318 19.5906C14.2172 20.4734 14.0181 21.5649 14.1318 22.4287C14.1792 22.7799 14.4636 23.0077 14.8144 23.0362C16.426 23.1785 18.2367 22.9223 19.8768 23.0362C20.2465 22.9982 20.4835 22.7134 20.5214 22.3527C20.5783 21.7358 20.5973 20.1981 20.5214 19.6001C20.474 19.211 20.1612 18.9927 19.7915 18.9547C18.1893 18.8123 16.3691 19.0591 14.748 18.9642L14.7386 18.9547Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M14.558 4.56528C16.255 4.36595 18.3027 4.68867 20.0375 4.56528C21.0424 4.69816 21.8482 5.51445 21.9335 6.53007C22.1326 9.06437 21.7819 11.8739 21.9335 14.4367C21.8198 15.4618 20.995 16.2876 19.9617 16.373C18.2553 16.5059 16.3687 16.2686 14.6433 16.373C13.6195 16.2591 12.7947 15.4333 12.7094 14.3987C12.5103 11.8455 12.8611 9.02641 12.7094 6.45414C12.8232 5.50496 13.6005 4.68867 14.558 4.57477V4.56528ZM14.6907 5.98904C14.3874 6.05548 14.1504 6.30227 14.1219 6.62499V14.2659C14.1219 14.6265 14.4063 14.9208 14.7666 14.9493C16.3972 14.8449 18.2173 15.0916 19.829 14.9493C20.2176 14.9113 20.4926 14.655 20.521 14.2564V6.66296C20.502 6.31176 20.2271 5.99853 19.8764 5.97955H14.7002L14.6907 5.98904Z' fill='%23458763'/> <path d='M3.91154 12.6522C5.60847 12.4529 7.65617 12.7756 9.39103 12.6522C10.3959 12.7851 11.2017 13.6014 11.287 14.617C11.4861 17.1513 11.1354 19.9608 11.287 22.5236C11.1733 23.5487 10.3485 24.3745 9.31519 24.4599C7.60877 24.5928 5.72223 24.3555 3.99686 24.4599C2.97301 24.346 2.14824 23.5203 2.06292 22.4857C1.86384 19.9324 2.2146 17.1133 2.06292 14.5411C2.17668 13.5919 2.95405 12.7756 3.91154 12.6617V12.6522ZM4.04426 14.0665C3.74089 14.1329 3.50389 14.3797 3.47545 14.7024V22.3433C3.47545 22.704 3.75985 22.9982 4.1201 23.0267C5.75067 22.9223 7.57085 23.1691 9.18247 23.0267C9.58063 22.9887 9.83659 22.7324 9.87451 22.3338V14.7404C9.86503 14.3797 9.59011 14.0854 9.22987 14.057H4.04426V14.0665Z' fill='%23458763'/> <path d='M3.91188 4.5652C5.65622 4.66012 7.62808 4.39435 9.35346 4.55571C10.2067 4.63165 10.984 5.29607 11.2116 6.12185C11.3632 6.71034 11.3443 8.88396 11.2779 9.54838C11.1736 10.6399 10.292 11.4088 9.22073 11.4847C7.56172 11.6081 5.75102 11.3898 4.07304 11.4847C3.18191 11.4278 2.3287 10.7633 2.12014 9.89008C1.98742 9.28261 1.9969 7.11849 2.07274 6.44457C2.16754 5.4954 2.97335 4.69809 3.91188 4.5652ZM4.0446 5.98897C3.73176 6.05541 3.51372 6.3022 3.4758 6.62492C3.40944 7.2229 3.40944 8.81751 3.4758 9.42499C3.5232 9.82364 3.82656 10.0325 4.20576 10.0704C5.76998 10.2128 7.54276 9.95653 9.13541 10.0704C9.50514 10.0514 9.81798 9.79517 9.86538 9.42499C9.93174 8.85548 9.93174 7.20392 9.86538 6.62492C9.82746 6.25474 9.54306 6.00795 9.18281 5.97948C7.55224 5.8371 5.70362 6.08389 4.0446 5.98897Z' fill='%23458763'/> <path d='M14.6532 17.5309C16.3217 17.3601 18.2272 17.6353 19.9147 17.5214C20.8058 17.5784 21.659 18.2428 21.8676 19.1161C22.0193 19.7235 21.9908 21.8307 21.934 22.5141C21.8392 23.5297 20.9765 24.365 19.9621 24.4504C18.2557 24.5833 16.3691 24.346 14.6438 24.4504C13.6673 24.346 12.8236 23.5392 12.7193 22.5616C12.6529 21.8877 12.634 19.771 12.7667 19.1635C12.9658 18.2808 13.7716 17.6353 14.6532 17.5404V17.5309ZM14.7386 18.9547C14.4162 19.0306 14.1698 19.2489 14.1318 19.5906C14.2172 20.4734 14.0181 21.5649 14.1318 22.4287C14.1792 22.7799 14.4636 23.0077 14.8144 23.0362C16.426 23.1785 18.2367 22.9223 19.8768 23.0362C20.2465 22.9982 20.4835 22.7134 20.5214 22.3527C20.5783 21.7358 20.5973 20.1981 20.5214 19.6001C20.474 19.211 20.1612 18.9927 19.7915 18.9547C18.1893 18.8123 16.3691 19.0591 14.748 18.9642L14.7386 18.9547Z' fill='%23458763'/> </svg>");
}

/* Cộng đồng — BA người, không phải hai */
.t4-ic-group {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(%23clip0_0_23)'> <path d='M19.2828 12.5037C19.6643 12.8133 20.0999 13.0332 20.4835 13.3442C22.5473 15.0161 23.1504 17.4074 22.9706 20.029C22.8864 21.2527 21.9496 22.2977 20.7406 22.4112C20.3625 22.4469 18.2242 22.3481 18.1128 22.4196C18.0389 22.6941 18.043 22.9477 17.9541 23.2272C17.6471 24.1916 16.7615 24.857 15.7789 24.9313C13.0013 24.7611 9.97609 25.1519 7.22717 24.9313C6.25 24.8528 5.38908 24.2168 5.06495 23.2664C4.96512 22.9736 4.96649 22.7109 4.89263 22.4203C3.35269 22.2963 1.60692 22.8706 0.527866 21.4124C-0.0848293 20.5838 -0.0246538 19.1955 0.0368892 18.1918C0.153821 16.2993 1.10022 14.4824 2.5499 13.3211C2.92189 13.0227 3.33491 12.8028 3.72195 12.5289C1.64727 10.9054 1.33066 7.77168 3.00737 5.71525C4.85981 3.44238 8.31853 3.44168 10.1703 5.71525C10.3303 5.91136 10.5594 6.38485 10.6811 6.50252C10.8418 6.65871 10.984 6.52773 11.168 6.52353C11.5379 6.51583 11.9031 6.54875 12.271 6.55295C12.9343 5.38325 13.9873 4.46289 15.2907 4.14C18.947 3.23436 22.1007 6.87374 20.7687 10.4851C20.4849 11.2549 19.9481 12.0505 19.2828 12.503V12.5037ZM6.89552 11.8733V10.6413C6.89552 10.49 7.05485 9.93808 7.11229 9.76298C7.4706 8.67172 8.21322 7.79479 9.14389 7.17562C7.96432 5.03584 4.79417 5.25997 3.83136 7.50272C2.86855 9.74546 4.5815 12.0625 6.89552 11.8733ZM16.1598 11.874C18.536 12.04 20.2045 9.53114 19.0865 7.32972C18.0218 5.23406 15.0698 5.12199 13.8663 7.12939C15.4445 8.1373 16.4005 9.94999 16.1598 11.8733V11.874ZM14.5549 11.2969C14.5549 9.58787 13.2023 8.20244 11.5338 8.20244C9.86531 8.20244 8.51273 9.58787 8.51273 11.2969C8.51273 13.0059 9.86531 14.3914 11.5338 14.3914C13.2023 14.3914 14.5549 13.0059 14.5549 11.2969ZM4.95076 20.7344C5.03282 18.2899 6.53788 16.1291 8.63513 15.0455C8.14484 14.6463 7.76874 14.1455 7.42547 13.6118C4.87486 13.2027 2.39809 14.8627 1.81206 17.4403C1.65821 18.1176 1.5994 19.2845 1.6753 19.9744C1.71701 20.3561 1.99533 20.6776 2.37074 20.7302C3.15575 20.8394 4.14386 20.658 4.95144 20.7351L4.95076 20.7344ZM18.054 20.7344C18.8608 20.6573 19.8496 20.8387 20.6347 20.7295C21.0101 20.6769 21.2884 20.3561 21.3301 19.9737C21.4053 19.2838 21.3472 18.1176 21.1933 17.4396C20.6141 14.8943 18.1599 13.2069 15.6312 13.6118C15.4124 13.9102 15.225 14.2401 14.9816 14.5195C14.8277 14.696 14.5918 14.8487 14.4694 14.9916C14.4304 15.0371 14.4031 15.0497 14.4195 15.1233C16.5188 16.0941 17.9637 18.3809 18.0533 20.7344H18.054ZM11.0825 16.0836C7.88773 16.3735 6.23154 19.2936 6.53788 22.3852C6.58849 22.8938 6.87637 23.2068 7.37966 23.2531L15.8432 23.2152C16.6357 23.0205 16.5038 21.7885 16.4689 21.1259C16.3143 18.1729 14.0564 15.8146 11.0818 16.0843L11.0825 16.0836Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_23'> <rect width='23' height='21' fill='white' transform='translate(0 4)'/> </clipPath> </defs> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(%23clip0_0_23)'> <path d='M19.2828 12.5037C19.6643 12.8133 20.0999 13.0332 20.4835 13.3442C22.5473 15.0161 23.1504 17.4074 22.9706 20.029C22.8864 21.2527 21.9496 22.2977 20.7406 22.4112C20.3625 22.4469 18.2242 22.3481 18.1128 22.4196C18.0389 22.6941 18.043 22.9477 17.9541 23.2272C17.6471 24.1916 16.7615 24.857 15.7789 24.9313C13.0013 24.7611 9.97609 25.1519 7.22717 24.9313C6.25 24.8528 5.38908 24.2168 5.06495 23.2664C4.96512 22.9736 4.96649 22.7109 4.89263 22.4203C3.35269 22.2963 1.60692 22.8706 0.527866 21.4124C-0.0848293 20.5838 -0.0246538 19.1955 0.0368892 18.1918C0.153821 16.2993 1.10022 14.4824 2.5499 13.3211C2.92189 13.0227 3.33491 12.8028 3.72195 12.5289C1.64727 10.9054 1.33066 7.77168 3.00737 5.71525C4.85981 3.44238 8.31853 3.44168 10.1703 5.71525C10.3303 5.91136 10.5594 6.38485 10.6811 6.50252C10.8418 6.65871 10.984 6.52773 11.168 6.52353C11.5379 6.51583 11.9031 6.54875 12.271 6.55295C12.9343 5.38325 13.9873 4.46289 15.2907 4.14C18.947 3.23436 22.1007 6.87374 20.7687 10.4851C20.4849 11.2549 19.9481 12.0505 19.2828 12.503V12.5037ZM6.89552 11.8733V10.6413C6.89552 10.49 7.05485 9.93808 7.11229 9.76298C7.4706 8.67172 8.21322 7.79479 9.14389 7.17562C7.96432 5.03584 4.79417 5.25997 3.83136 7.50272C2.86855 9.74546 4.5815 12.0625 6.89552 11.8733ZM16.1598 11.874C18.536 12.04 20.2045 9.53114 19.0865 7.32972C18.0218 5.23406 15.0698 5.12199 13.8663 7.12939C15.4445 8.1373 16.4005 9.94999 16.1598 11.8733V11.874ZM14.5549 11.2969C14.5549 9.58787 13.2023 8.20244 11.5338 8.20244C9.86531 8.20244 8.51273 9.58787 8.51273 11.2969C8.51273 13.0059 9.86531 14.3914 11.5338 14.3914C13.2023 14.3914 14.5549 13.0059 14.5549 11.2969ZM4.95076 20.7344C5.03282 18.2899 6.53788 16.1291 8.63513 15.0455C8.14484 14.6463 7.76874 14.1455 7.42547 13.6118C4.87486 13.2027 2.39809 14.8627 1.81206 17.4403C1.65821 18.1176 1.5994 19.2845 1.6753 19.9744C1.71701 20.3561 1.99533 20.6776 2.37074 20.7302C3.15575 20.8394 4.14386 20.658 4.95144 20.7351L4.95076 20.7344ZM18.054 20.7344C18.8608 20.6573 19.8496 20.8387 20.6347 20.7295C21.0101 20.6769 21.2884 20.3561 21.3301 19.9737C21.4053 19.2838 21.3472 18.1176 21.1933 17.4396C20.6141 14.8943 18.1599 13.2069 15.6312 13.6118C15.4124 13.9102 15.225 14.2401 14.9816 14.5195C14.8277 14.696 14.5918 14.8487 14.4694 14.9916C14.4304 15.0371 14.4031 15.0497 14.4195 15.1233C16.5188 16.0941 17.9637 18.3809 18.0533 20.7344H18.054ZM11.0825 16.0836C7.88773 16.3735 6.23154 19.2936 6.53788 22.3852C6.58849 22.8938 6.87637 23.2068 7.37966 23.2531L15.8432 23.2152C16.6357 23.0205 16.5038 21.7885 16.4689 21.1259C16.3143 18.1729 14.0564 15.8146 11.0818 16.0843L11.0825 16.0836Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_23'> <rect width='23' height='21' fill='white' transform='translate(0 4)'/> </clipPath> </defs> </svg>");
}

/* Blog — bút và khung */
.t4-ic-edit_square {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.000600177 10.2852C0.307891 8.07039 2.05141 6.43951 4.33388 6.30547C6.85523 6.15726 9.52542 6.41943 12.0624 6.30783C13.1235 6.41293 13.2423 7.78932 12.2316 8.06448L4.3807 8.0757C2.99068 8.17844 1.90736 9.197 1.79513 10.5704L1.82754 21.5916C1.96018 22.0226 2.3533 22.2612 2.80763 22.2187C3.55785 22.1478 4.49593 20.5677 5.32838 20.4555L15.1635 20.452C16.4353 20.3398 17.4958 19.2952 17.6098 18.0411C17.6758 17.3107 17.5036 16.3576 17.6212 15.6656C17.7725 14.7758 19.1103 14.6813 19.3647 15.5646C19.4788 15.9608 19.4403 17.5575 19.4097 18.044C19.2717 20.2459 17.4976 22.0592 15.2541 22.221L5.77371 22.2198C4.68078 23.0861 3.99178 24.1235 2.40191 23.9883C1.23276 23.8891 0.139841 22.8333 0 21.6884V10.2852H0.000600177Z' fill='%23458763'/> <path d='M19.9368 3.93272C22.3081 3.66819 23.8169 6.12987 22.526 8.07133C20.1264 10.3222 17.8572 12.9894 15.388 15.1481C14.2765 16.12 12.7112 16.831 11.2108 16.9166C10.553 16.9544 9.77338 16.8812 9.75358 16.048C9.70976 14.2353 10.5578 12.4987 11.7696 11.1896C13.8546 8.93755 16.3027 6.88626 18.4189 4.64897C18.8469 4.28346 19.3636 3.9965 19.9368 3.93272ZM11.6807 15.0584C12.5438 14.9125 13.3342 14.5027 14.0172 13.976L20.9811 7.12599C21.6815 6.29343 20.6204 5.2353 19.7447 5.86534L12.8925 12.6044C12.2899 13.3 11.817 14.1437 11.6807 15.0584Z' fill='%23458763'/> <path d='M4.39282 11.623C4.9972 11.538 6.53665 11.5563 7.16804 11.61C8.35639 11.7104 8.35819 13.2397 7.34209 13.3755C6.87215 13.4387 4.69711 13.447 4.26618 13.3596C3.32631 13.1694 3.39653 11.7629 4.39282 11.6224V11.623Z' fill='%23458763'/> <path d='M4.39282 15.1586C4.9972 15.0736 6.53665 15.0919 7.16804 15.1457C8.35639 15.246 8.35819 16.7754 7.34209 16.9112C6.87215 16.9743 4.69711 16.9826 4.26618 16.8952C3.32631 16.7051 3.39653 15.2986 4.39282 15.1581V15.1586Z' fill='%23458763'/> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.000600177 10.2852C0.307891 8.07039 2.05141 6.43951 4.33388 6.30547C6.85523 6.15726 9.52542 6.41943 12.0624 6.30783C13.1235 6.41293 13.2423 7.78932 12.2316 8.06448L4.3807 8.0757C2.99068 8.17844 1.90736 9.197 1.79513 10.5704L1.82754 21.5916C1.96018 22.0226 2.3533 22.2612 2.80763 22.2187C3.55785 22.1478 4.49593 20.5677 5.32838 20.4555L15.1635 20.452C16.4353 20.3398 17.4958 19.2952 17.6098 18.0411C17.6758 17.3107 17.5036 16.3576 17.6212 15.6656C17.7725 14.7758 19.1103 14.6813 19.3647 15.5646C19.4788 15.9608 19.4403 17.5575 19.4097 18.044C19.2717 20.2459 17.4976 22.0592 15.2541 22.221L5.77371 22.2198C4.68078 23.0861 3.99178 24.1235 2.40191 23.9883C1.23276 23.8891 0.139841 22.8333 0 21.6884V10.2852H0.000600177Z' fill='%23458763'/> <path d='M19.9368 3.93272C22.3081 3.66819 23.8169 6.12987 22.526 8.07133C20.1264 10.3222 17.8572 12.9894 15.388 15.1481C14.2765 16.12 12.7112 16.831 11.2108 16.9166C10.553 16.9544 9.77338 16.8812 9.75358 16.048C9.70976 14.2353 10.5578 12.4987 11.7696 11.1896C13.8546 8.93755 16.3027 6.88626 18.4189 4.64897C18.8469 4.28346 19.3636 3.9965 19.9368 3.93272ZM11.6807 15.0584C12.5438 14.9125 13.3342 14.5027 14.0172 13.976L20.9811 7.12599C21.6815 6.29343 20.6204 5.2353 19.7447 5.86534L12.8925 12.6044C12.2899 13.3 11.817 14.1437 11.6807 15.0584Z' fill='%23458763'/> <path d='M4.39282 11.623C4.9972 11.538 6.53665 11.5563 7.16804 11.61C8.35639 11.7104 8.35819 13.2397 7.34209 13.3755C6.87215 13.4387 4.69711 13.447 4.26618 13.3596C3.32631 13.1694 3.39653 11.7629 4.39282 11.6224V11.623Z' fill='%23458763'/> <path d='M4.39282 15.1586C4.9972 15.0736 6.53665 15.0919 7.16804 15.1457C8.35639 15.246 8.35819 16.7754 7.34209 16.9112C6.87215 16.9743 4.69711 16.9826 4.26618 16.8952C3.32631 16.7051 3.39653 15.2986 4.39282 15.1581V15.1586Z' fill='%23458763'/> </svg>");
}

/* Dự án — trang tài liệu */
.t4-ic-description {
  -webkit-mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(%23clip0_0_16)'> <path d='M4.53565 4.01208L18.3181 4C19.6035 4.15027 20.6585 5.09486 20.9086 6.35676C21.0292 11.1803 21.0326 16.0515 20.9072 20.8737C20.8334 21.1574 20.7134 21.3775 20.5264 21.6016C19.077 23.3391 16.9636 24.8955 15.4545 26.6237C15.1794 26.8189 14.8623 26.9732 14.5167 27.0007L4.67591 26.998C3.39592 26.843 2.32937 25.9038 2.08543 24.6413C1.91603 18.7356 2.05901 12.8025 2.01293 6.88741C2.11931 5.39943 3.05034 4.29652 4.53565 4.01208ZM13.9313 25.392V21.6505C13.9313 21.0857 14.8467 20.0686 15.4274 20.0686H19.2823L19.3582 19.9935V6.83643C19.3582 6.29504 18.7355 5.61277 18.1656 5.60673L4.8758 5.60404C4.13044 5.66711 3.70287 6.22862 3.63308 6.93505V24.063C3.60733 24.5701 4.19752 25.392 4.72538 25.392H13.9313ZM18.1412 21.6754H15.7317C15.6788 21.6754 15.5542 21.7988 15.5542 21.8511V24.2367L18.1412 21.6754Z' fill='%23458763'/> <path d='M7.07105 9.00738L15.8799 9C16.7405 9.11606 16.9132 10.1995 16.1401 10.5551L7.0121 10.5987C6.11699 10.4135 6.159 9.159 7.07037 9.00805L7.07105 9.00738Z' fill='%23458763'/> <path d='M6.96759 14.439L12.7333 14.4316C13.6535 14.6369 13.5783 15.9022 12.6317 16.0296H7.11192C6.18699 15.9049 6.08671 14.6886 6.96692 14.439H6.96759Z' fill='%23458763'/> <path d='M7.0215 19.8633H11.1054C11.9965 20.0498 11.9578 21.3332 11.0627 21.4539C9.8471 21.6176 8.27439 21.3506 7.0215 21.4465C6.14942 21.2258 6.14875 20.0847 7.0215 19.864V19.8633Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_16'> <rect width='19' height='24' fill='white' transform='translate(2 3)'/> </clipPath> </defs> </svg>");
  mask-image: url("data:image/svg+xml,<svg width='23' height='30' viewBox='0 0 23 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(%23clip0_0_16)'> <path d='M4.53565 4.01208L18.3181 4C19.6035 4.15027 20.6585 5.09486 20.9086 6.35676C21.0292 11.1803 21.0326 16.0515 20.9072 20.8737C20.8334 21.1574 20.7134 21.3775 20.5264 21.6016C19.077 23.3391 16.9636 24.8955 15.4545 26.6237C15.1794 26.8189 14.8623 26.9732 14.5167 27.0007L4.67591 26.998C3.39592 26.843 2.32937 25.9038 2.08543 24.6413C1.91603 18.7356 2.05901 12.8025 2.01293 6.88741C2.11931 5.39943 3.05034 4.29652 4.53565 4.01208ZM13.9313 25.392V21.6505C13.9313 21.0857 14.8467 20.0686 15.4274 20.0686H19.2823L19.3582 19.9935V6.83643C19.3582 6.29504 18.7355 5.61277 18.1656 5.60673L4.8758 5.60404C4.13044 5.66711 3.70287 6.22862 3.63308 6.93505V24.063C3.60733 24.5701 4.19752 25.392 4.72538 25.392H13.9313ZM18.1412 21.6754H15.7317C15.6788 21.6754 15.5542 21.7988 15.5542 21.8511V24.2367L18.1412 21.6754Z' fill='%23458763'/> <path d='M7.07105 9.00738L15.8799 9C16.7405 9.11606 16.9132 10.1995 16.1401 10.5551L7.0121 10.5987C6.11699 10.4135 6.159 9.159 7.07037 9.00805L7.07105 9.00738Z' fill='%23458763'/> <path d='M6.96759 14.439L12.7333 14.4316C13.6535 14.6369 13.5783 15.9022 12.6317 16.0296H7.11192C6.18699 15.9049 6.08671 14.6886 6.96692 14.439H6.96759Z' fill='%23458763'/> <path d='M7.0215 19.8633H11.1054C11.9965 20.0498 11.9578 21.3332 11.0627 21.4539C9.8471 21.6176 8.27439 21.3506 7.0215 21.4465C6.14942 21.2258 6.14875 20.0847 7.0215 19.864V19.8633Z' fill='%23458763'/> </g> <defs> <clipPath id='clip0_0_16'> <rect width='19' height='24' fill='white' transform='translate(2 3)'/> </clipPath> </defs> </svg>");
}


/* ══ DỜI TỪ '40-page-xu-ly-loi-sai-google-ads.css' (20/08/2026) ══════════
   Luật hover mục menu — áp cho MỌI trang, không riêng trang #4. Đo bằng
   CSSOM: khớp ở cả 8 trang thử. Xem 'qa/soat-css.md'. */
/* ⛔ MỤC MENU ĐẦU TRANG KHÔNG ĐỔI GÌ KHI RÊ CHUỘT.
   Flatsome mờ đi 'opacity: .85' khi hover, còn Figma khai component set
   "Text Menu" (163:4547) có HAI biến thể GIỐNG HỆT NHAU từng thuộc tính —
   tức thiết kế cố ý không có trạng thái hover cho mục menu (chỗ nào designer
   muốn đổi thì họ có khai: tiêu đề cột trong mega menu đổi màu).
   Bộ kiểm trạng thái T4 tìm ra 17/08/2026. */
.t4 #header .header-main .nav > li > a:hover,
.t4 #header .header-main .nav > li:hover > a { opacity: 1; }