@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
/* 2026-10-16 CH-106 F1: MOT ho chu co bo tieng Viet, nap DUNG cac do dam CSS dung (400 500 600 700 800 · nghieng 400), tat font-synthesis. Nguon man4web da mat cung nha cu ⇒ sua TREN SERVER, ban truoc: .bak.1792168369 */
/* SINH RA bởi `python -m man4web trien-khai` từ kinh-doanh/web/thiet-ke/tokens.css + nen.css — ⛔ sửa tệp này trên server. */
/* ==========================================================================
   MAN4OWO — TOKEN THIẾT KẾ (MỘT NGUỒN). Hợp đồng: kinh-doanh/web/thiet-ke/DESIGN.md
   Tên theo VAI TRÒ, ⛔ theo sắc (Open Design craft/color.md).
   Đẩy lên server: wp-content/uploads/man4owo/man4owo-tokens.css (mu-plugin nạp mọi trang).
   ⛔ Sửa màu ở đây, KHÔNG sửa mã hex trong CSS khác — cổng `soi_mau` đếm mã thô.
   ========================================================================== */
:root {
  /* ── Trung tính (70–90 % điểm ảnh) ── */
  --m4-nen: #ffffff;              /* nền trang */
  --m4-nen-phu: #f6f8fc;          /* nền dải xen kẽ, thẻ */
  --m4-be-mat-toi: #0a1838;       /* hero, header, footer */
  --m4-be-mat-toi-2: #0f1729;     /* lớp tối thứ hai */
  --m4-chu: #0f1729;              /* chữ chính — 17,9:1 trên nền */
  --m4-chu-phu: #5b6577;          /* chữ phụ — 5,9:1 trên nền, 5,5:1 trên nền phụ */
  --m4-chu-tren-toi: #ffffff;     /* chữ trên bề mặt tối — 17,5:1 */
  --m4-chu-phu-tren-toi: #c7d2e8; /* 11,5:1 */
  --m4-vien: #e5e7eb;             /* viền trang trí (không mang nghĩa) */
  --m4-vien-ui: #8a94a6;          /* viền ô nhập/nút phụ — 3,06:1 (sàn 3:1) */

  /* ── Thương hiệu + nhấn (5–10 %) ── */
  --m4-thuong-hieu: #1f4ed8;      /* liên kết, nút phụ — 6,7:1 */
  --m4-thuong-hieu-dam: #0c2a73;  /* H2, hover liên kết — 13,2:1 */
  --m4-nhan: #f59e0b;             /* NỀN nút chính (gọi/báo giá). ⛔ làm chữ trên nền sáng (2,15:1) */
  --m4-chu-tren-nhan: #1a1300;    /* chữ trên nút chính — 8,6:1 */
  --m4-nhan-chu: #b45309;         /* khi cần CHỮ màu nhấn trên nền sáng (giá tiền) — 5,0:1 */
  --m4-vang-kim: #f0c45a;         /* nhấn trên bề mặt tối — 10,6:1 */

  /* ── Ngữ nghĩa (0–5 %) ── */
  --m4-nguy-hiem: #c0392b;        /* thanh lý, lỗi — 5,4:1 */
  --m4-thanh-cong: #047857;       /* dấu tích, còn hàng — 5,5:1 */
  --m4-zalo: #0068ff;             /* màu thương hiệu Zalo — CHỈ cho nút Zalo */

  /* ── Chữ: 2 họ, thang ×1,25 (thân 17 px) ── */
  --m4-font-tieu-de: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --m4-font-than: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --m4-co-nho: 14px;
  --m4-co-than: 17px;
  --m4-co-h3: 21px;
  --m4-co-h2: clamp(24px, 2.6vw, 27px);
  --m4-co-h1: clamp(28px, 3.8vw, 42px);
  --m4-gian-dong: 1.65;
  --m4-dam-doc: 400;
  --m4-dam-nhan: 600;
  --m4-dam-cong-bo: 800;

  /* ── Khoảng cách: trong nhóm 8–12, giữa nhóm 32–48 ── */
  --m4-k-1: 4px;
  --m4-k-2: 8px;
  --m4-k-3: 12px;
  --m4-k-4: 16px;
  --m4-k-5: 24px;
  --m4-k-6: 32px;
  --m4-k-7: 48px;
  --m4-k-8: 72px;
  --m4-rong-noi-dung: 1180px;
  --m4-rong-doc: 72ch;

  /* ── Hình khối ── */
  --m4-bo-nho: 10px;
  --m4-bo-vua: 16px;
  --m4-bo-lon: 24px;
  --m4-bo-vien-nut: 40px;
  --m4-bong-nhe: 0 10px 25px rgba(15, 23, 41, .08);
  --m4-bong-vua: 0 15px 40px rgba(15, 23, 41, .14);
  --m4-bong-nhan: 0 8px 22px rgba(245, 158, 11, .35);

  /* ── Chạm & chuyển động ── */
  --m4-cham-toi-thieu: 44px;      /* khách xem trên điện thoại */
  --m4-tg-phan-hoi: 100ms;
  --m4-tg-vao: 240ms;
  --m4-duong-cong: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m4-tg-phan-hoi: 0ms; --m4-tg-vao: 0ms; }
}

/* ==========================================================================
   MAN4OWO — BỘ BỐ CỤC CHUNG (header · footer · nút · nút nổi · khối trả lời · bảng giá)
   Hợp đồng: DESIGN.md · token: tokens.css. `man4web trien-khai` ghép tokens.css + tệp này
   thành wp-content/uploads/man4owo/man4owo-giao-dien.css (SINH RA — sửa ở đây).
   ⛔ Mã màu thô: chỉ được dùng trong rgba() cho lớp phủ/bóng.
   ========================================================================== */

body { font-family: var(--m4-font-than); color: var(--m4-chu); }
.m4-khung { max-width: var(--m4-rong-noi-dung); margin: 0 auto; padding: 0 var(--m4-k-4); }
.m4-an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m4-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:where(.m4-dau, .m4-chan, .m4-noi, .m4-tra-loi, .m4-bg) :focus-visible { outline: 2px solid var(--m4-vang-kim); outline-offset: 2px; }

/* ── Nút ─────────────────────────────────────────────────────────────── */
.m4-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--m4-k-2);
  min-height: var(--m4-cham-toi-thieu); padding: 10px 20px; border-radius: var(--m4-bo-vien-nut);
  background: var(--m4-nhan); color: var(--m4-chu-tren-nhan) !important; border: 2px solid transparent;
  font: var(--m4-dam-cong-bo) 15px/1.2 var(--m4-font-than); text-decoration: none !important;
  box-shadow: var(--m4-bong-nhan); transition: transform var(--m4-tg-phan-hoi) var(--m4-duong-cong), filter var(--m4-tg-phan-hoi);
  cursor: pointer; white-space: nowrap;
}
.m4-nut:hover { transform: translateY(-1px); filter: brightness(1.05); }
.m4-nut:active { transform: translateY(0); }
.m4-nut--phu { background: transparent; color: var(--m4-thuong-hieu) !important; border-color: var(--m4-thuong-hieu); box-shadow: none; }
.m4-nut--phu:hover { background: var(--m4-nen-phu); }
.m4-nut--zalo { background: var(--m4-zalo); color: var(--m4-chu-tren-toi) !important; box-shadow: none; }
.m4-nut--nho { min-height: var(--m4-cham-toi-thieu); padding: 8px 16px; font-size: 14px; }   /* DESIGN.md: vùng chạm ≥ 44 px (đo 2026-09-17: 40 px) */

/* ── Header ──────────────────────────────────────────────────────────── */
.m4-dau { position: sticky; top: 0; z-index: 1000; background: var(--m4-be-mat-toi); color: var(--m4-chu-tren-toi); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.admin-bar .m4-dau { top: 32px; }
.m4-dau__khung { display: flex; align-items: center; gap: var(--m4-k-4); min-height: 64px; }
.m4-dau__logo { font: var(--m4-dam-cong-bo) 21px/1 var(--m4-font-than); letter-spacing: .06em; color: var(--m4-chu-tren-toi) !important; text-decoration: none !important; display: inline-flex; align-items: center; min-height: var(--m4-cham-toi-thieu); padding: 0; }
.m4-dau__logo span { color: var(--m4-vang-kim); }
.m4-dau__menu { margin-left: auto; }
.m4-dau__ds, .m4-ngan__ds { list-style: none; margin: 0; padding: 0; }
.m4-dau__ds { display: flex; gap: var(--m4-k-1); }
.m4-dau__ds a {
  display: flex; align-items: center; min-height: var(--m4-cham-toi-thieu); padding: 0 12px; border-radius: 8px;
  color: var(--m4-chu-phu-tren-toi) !important; font-weight: var(--m4-dam-nhan); font-size: 15px; text-decoration: none !important;
  transition: background var(--m4-tg-phan-hoi), color var(--m4-tg-phan-hoi);
}
.m4-dau__ds a:hover { color: var(--m4-chu-tren-toi) !important; background: rgba(255, 255, 255, .07); }
.m4-dau__ds .current-menu-item > a, .m4-dau__ds .current_page_item > a { color: var(--m4-vang-kim) !important; }
.m4-dau__hanh-dong { display: flex; align-items: center; gap: var(--m4-k-2); }
.m4-dau__mo {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: var(--m4-chu-tren-toi); border: 0; cursor: pointer; padding: 0;
}
.m4-ngan { background: var(--m4-be-mat-toi-2); border-top: 1px solid rgba(255, 255, 255, .08); padding: var(--m4-k-3) 0 var(--m4-k-5); }
.m4-ngan[hidden] { display: none; }
.m4-ngan__ds a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--m4-k-2); color: var(--m4-chu-tren-toi) !important; font-size: 17px; font-weight: var(--m4-dam-nhan); text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.m4-ngan__nut { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m4-k-2); margin-top: var(--m4-k-4); }
@media (max-width: 960px) {
  .m4-dau__menu { display: none; }
  .m4-dau__mo { display: inline-flex; }
  .m4-dau__hanh-dong { margin-left: auto; }
}
@media (max-width: 420px) {
  .m4-dau__goi .m4-dau__so { display: none; }
  .m4-dau__goi { width: 44px; padding: 0; }
}
@media (max-width: 782px) { .admin-bar .m4-dau { top: 0; } }

/* ── Footer ──────────────────────────────────────────────────────────── */
.m4-chan { background: var(--m4-be-mat-toi); color: var(--m4-chu-phu-tren-toi); font-size: 15px; line-height: 1.7; margin-top: 0; }
.m4-chan a { color: var(--m4-chu-phu-tren-toi) !important; text-decoration: none !important; }
.m4-chan a:hover { color: var(--m4-chu-tren-toi) !important; text-decoration: underline !important; }
.m4-chan__luoi { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--m4-k-6); padding-top: var(--m4-k-7); padding-bottom: var(--m4-k-6); }
.m4-chan__td { color: var(--m4-chu-tren-toi); font-weight: var(--m4-dam-cong-bo); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--m4-k-3); }
.m4-chan ul { list-style: none; margin: 0; padding: 0; }
.m4-chan li { margin: 0; }
.m4-chan li a { display: inline-flex; align-items: center; min-height: 36px; }
.m4-chan__mo-ta { margin: var(--m4-k-3) 0; max-width: 36ch; }
.m4-chan__sao { color: var(--m4-vang-kim); font-weight: var(--m4-dam-nhan); }
.m4-chan__lh li { display: flex; gap: var(--m4-k-2); align-items: flex-start; padding: 6px 0; }
.m4-chan__lh .m4-icon { margin-top: 3px; color: var(--m4-vang-kim); }
.m4-chan__mxh { display: flex; flex-wrap: wrap; gap: var(--m4-k-2) var(--m4-k-4); margin-top: var(--m4-k-3); }
.m4-chan__phap-ly { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: var(--m4-k-5); padding-bottom: var(--m4-k-5); font-size: 13.5px; }
.m4-chan__phap-ly p { margin: 2px 0; }
.m4-chan__phap-ly strong { color: var(--m4-chu-tren-toi); }
.m4-chan__cs { display: flex; flex-wrap: wrap; gap: 0 var(--m4-k-4); margin-top: var(--m4-k-2); }
@media (max-width: 960px) { .m4-chan__luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .m4-chan__luoi { grid-template-columns: 1fr; gap: var(--m4-k-5); } }

/* ── Nút nổi liên hệ ─────────────────────────────────────────────────── */
.m4-noi { position: fixed; right: var(--m4-k-4); bottom: var(--m4-k-7); z-index: 990; display: flex; flex-direction: column; gap: var(--m4-k-3); }
.m4-noi__nut {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--m4-nen); color: var(--m4-thuong-hieu-dam) !important; box-shadow: var(--m4-bong-vua);
  text-decoration: none !important; transition: transform var(--m4-tg-phan-hoi) var(--m4-duong-cong);
}
.m4-noi__nut:hover { transform: translateY(-2px); }
.m4-noi__nut .m4-icon { width: 24px; height: 24px; }
.m4-noi__nut--goi { background: var(--m4-nhan); color: var(--m4-chu-tren-nhan) !important; }
.m4-noi__nut--zalo { background: var(--m4-zalo); color: var(--m4-chu-tren-toi) !important; font: var(--m4-dam-cong-bo) 12px/1 var(--m4-font-than); }
@media (max-width: 600px) {
  .m4-noi { right: var(--m4-k-3); bottom: var(--m4-k-3); }
  .m4-noi__nut { width: 48px; height: 48px; }
}

/* ── Khối trả lời nhanh (AEO) ────────────────────────────────────────── */
.m4-tra-loi {
  margin: 0 0 var(--m4-k-6); padding: var(--m4-k-5); border-radius: var(--m4-bo-vua);
  background: var(--m4-nen-phu); border-top: 3px solid var(--m4-nhan); box-shadow: var(--m4-bong-nhe);
}
.m4-tra-loi__cau { margin: 0 0 var(--m4-k-3) !important; font-size: 17px; line-height: 1.6; color: var(--m4-chu); }
.m4-tra-loi__cau b { color: var(--m4-nhan-chu); font-weight: var(--m4-dam-cong-bo); white-space: nowrap; }
.m4-tra-loi__nut { display: flex; flex-wrap: wrap; gap: var(--m4-k-2); margin: var(--m4-k-4) 0 var(--m4-k-3); }
.m4-tra-loi__tin { margin: 0 !important; font-size: 14px; color: var(--m4-chu-phu); }
.m4-tra-loi__tin .m4-sao { color: var(--m4-nhan-chu); letter-spacing: 1px; }
@media (max-width: 480px) { .m4-tra-loi__nut .m4-nut { flex: 1 1 100%; } }

/* ── Bảng giá (shortcode [m4_bang_gia]) ──────────────────────────────── */
.m4-bg { margin: var(--m4-k-6) 0; scroll-margin-top: 80px; }
.m4-bg__td { font-family: var(--m4-font-tieu-de); color: var(--m4-thuong-hieu-dam); margin: 0 0 var(--m4-k-2); }
.m4-bg__ghi { margin: 0 0 var(--m4-k-3) !important; color: var(--m4-chu-phu); font-size: 15px; }
.m4-bg__loai { display: inline-block; margin-left: var(--m4-k-2); padding: 2px 10px; border-radius: 20px; font: var(--m4-dam-nhan) 12px/1.6 var(--m4-font-than); vertical-align: middle; background: var(--m4-nen-phu); color: var(--m4-thuong-hieu-dam); border: 1px solid var(--m4-vien); }
.m4-bang-gia { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--m4-vien); border-radius: var(--m4-bo-nho); overflow: hidden; font-size: 15px; margin: 0; }
.m4-bang-gia th { background: var(--m4-thuong-hieu-dam); color: var(--m4-chu-tren-toi); text-align: left; padding: 11px 14px; font-weight: var(--m4-dam-nhan); border: 0; }
.m4-bang-gia td { padding: 11px 14px; border: 0; border-top: 1px solid var(--m4-vien); vertical-align: top; color: var(--m4-chu); }
.m4-bang-gia tbody tr:nth-child(even) { background: var(--m4-nen-phu); }
.m4-bang-gia td:first-child { font-weight: var(--m4-dam-nhan); }
.m4-bang-gia .m4-bg__gia { text-align: right; white-space: nowrap; font-weight: var(--m4-dam-cong-bo); color: var(--m4-nhan-chu); }
.m4-bang-gia th:last-child { text-align: right; }
.m4-bang-gia a { color: var(--m4-thuong-hieu); }
@media (max-width: 600px) {
  .m4-bang-gia thead { display: none; }
  .m4-bang-gia, .m4-bang-gia tbody, .m4-bang-gia tr, .m4-bang-gia td { display: block; width: 100%; }
  .m4-bang-gia tr { padding: var(--m4-k-2) 0; border-top: 1px solid var(--m4-vien); }
  .m4-bang-gia td { border: 0; padding: 2px 14px; }
  .m4-bang-gia .m4-bg__gia { text-align: left; }
}
.m4-gia-tu { white-space: nowrap; }

/* ── Đánh giá Google (man4owo-reviews.php) ───────────────────────────── */
.m4-sao { color: var(--m4-nhan-chu); letter-spacing: 2px; }
.m4-reviews { margin: var(--m4-k-7) auto; padding: var(--m4-k-5); border: 1px solid var(--m4-vien); border-radius: var(--m4-bo-vua); background: var(--m4-nen-phu); }
.m4-reviews h2 { font-family: var(--m4-font-tieu-de); color: var(--m4-chu); margin: 0 0 var(--m4-k-2); }
.m4-reviews__tong { margin: 0 0 var(--m4-k-4); font-size: 17px; }
.m4-reviews__muc { padding: var(--m4-k-3) 0; border-top: 1px solid var(--m4-vien); }
.m4-reviews__loi { margin: 6px 0 2px; font-style: italic; color: var(--m4-chu); }
.m4-reviews__ai { color: var(--m4-chu-phu); }
.m4-reviews__het { margin: var(--m4-k-3) 0 0; }

/* ── Hài hoà nội dung Astra với token (chỉ khi bộ mới BẬT: body.m4gd) ──
   Bọc :where() ⇒ độ ưu tiên 0: CSS riêng của trang (hero tối của trang tự dựng…) LUÔN thắng.
   (Đo bản xem trước 2026-09-17: không bọc thì H1 hero /bang-gia/ thành chữ tối trên nền tối.) */
:where(.m4gd .entry-content) :where(h1, h2, h3), :where(.m4gd) .entry-title { font-family: var(--m4-font-tieu-de); color: var(--m4-chu); }
:where(.m4gd.single-post .entry-content, .m4gd.page .entry-content) h2 { color: var(--m4-thuong-hieu-dam); }
:where(.m4gd .entry-content) :where(p, li, td) a:not(.m4-nut) { color: var(--m4-thuong-hieu); text-decoration: underline; text-underline-offset: 2px; }
:where(.m4gd .entry-content) p a:not(.m4-nut):hover { color: var(--m4-thuong-hieu-dam); }
:where(.m4gd) :where(.ast-button, .button, .wp-block-button__link, button.ast-custom-button) { background: var(--m4-nhan); color: var(--m4-chu-tren-nhan); border-color: var(--m4-nhan); }

/* body{overflow-x:hidden} (Astra/CSS cũ) biến body thành khung cuộn ⇒ header sticky KHÔNG dính.
   `clip` cắt tràn ngang mà không tạo khung cuộn (đo trên bản xem trước 2026-09-17). */
body.m4gd { overflow-x: clip !important; overflow-y: visible !important; }
/* Bảng nội dung cũ nhiều cột (vd so sánh 5 gói) tràn ngang trên điện thoại ⇒ cuộn trong KHUNG, ⛔ trên table.
   (đo bản xem trước 375 px: bảng 384 px đẩy trang thành 409 px).
   ⚠️ Bản trước đặt `display:block` lên chính <table> ⇒ hàng co về nội dung, cột dính trái ở 62/68 bài
   (kiem_bai_viet.py 2026-09-17). Nay: table giữ display:table, khung .wp-block-table cuộn. */
.m4gd .entry-content .wp-block-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.m4gd .entry-content table:not(.m4-bang-gia) { display: table; width: 100%; max-width: none; }

/* ── Khuôn bài viết (DESIGN.md §10) ───────────────────────────────────────
   Một khuôn cho mọi post. Nguồn: Open Design blog-post + typography-hierarchy-editorial
   (sổ nc_2026-09-17_open-design-bai-dai-…). Đo trước: 0/68 bài sạch — kiem_bai_viet.py. */
.m4gd.single-post .entry-content {
  max-width: var(--m4-rong-doc); margin-left: auto; margin-right: auto;
  font-size: var(--m4-co-than); line-height: 1.65; color: var(--m4-chu);
}
.m4gd.single-post .entry-content > p:first-of-type { font-size: 19px; line-height: 1.55; color: var(--m4-chu-phu); }
.m4gd.single-post .entry-content h2 { font-size: var(--m4-co-h2); line-height: 1.3; margin: var(--m4-k-6) 0 var(--m4-k-3); padding-left: 0; }
.m4gd.single-post .entry-content h2::before { content: none; }   /* vạch chuyển sắc xanh→cam: anti-slop DESIGN §1 */
.m4gd.single-post .entry-content h3 { font-size: var(--m4-co-h3); line-height: 1.35; margin: var(--m4-k-5) 0 var(--m4-k-2); }
.m4gd.single-post .entry-content :where(ul, ol) { padding-left: 1.25em; }
.m4gd.single-post .entry-content li { margin: var(--m4-k-1) 0; }
/* Ảnh: nguyên tỉ lệ, ⛔ cắt (blog.css cũ: max-height 480 + cover ⇒ cắt 36/68 bài). Ảnh nhỏ hơn cột: cỡ gốc, căn giữa. */
.m4gd.single-post .entry-content figure { margin: var(--m4-k-5) 0; }
.m4gd.single-post .entry-content figure img,
.m4gd.single-post .entry-content figure.wp-block-image img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: none; object-fit: contain;
  margin: 0 auto; border-radius: var(--m4-bo-nho); box-shadow: var(--m4-bong-nhe);
}
.m4gd.single-post .entry-content figcaption { margin-top: var(--m4-k-2); font-size: var(--m4-co-nho); line-height: 1.5; color: var(--m4-chu-phu); text-align: center; }
/* Lưới ảnh (m4-gallery/m4-autogrid): ô 4:3 là CỐ Ý (thẻ đồng cỡ) ⇒ được cover. */
.m4gd.single-post .entry-content :is(.m4-gallery, .m4-autogrid) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* ⛔ Nội dung bắt đầu ở opacity:0 (DESIGN §6) — blog.css cũ ẩn .m4-anim tới khi JS cuộn tới. */
.m4gd.single-post .entry-content :is(.m4-anim, .m4-autogrid) { opacity: 1 !important; transform: none !important; }
/* Bảng trong bài */
.m4gd.single-post .entry-content .wp-block-table { margin: var(--m4-k-5) 0; }
.m4gd.single-post .entry-content table:not(.m4-bang-gia) {
  border-collapse: separate; border-spacing: 0; border: 1px solid var(--m4-vien); border-radius: var(--m4-bo-nho);
  overflow: hidden; font-size: 15px; line-height: 1.5; margin: 0;
}
.m4gd.single-post .entry-content table:not(.m4-bang-gia) th { background: var(--m4-thuong-hieu-dam); color: var(--m4-chu-tren-toi); text-align: left; padding: 10px 14px; font-weight: var(--m4-dam-nhan); border: 0; }
.m4gd.single-post .entry-content table:not(.m4-bang-gia) td { padding: 10px 14px; border: 0; border-top: 1px solid var(--m4-vien); vertical-align: top; }
.m4gd.single-post .entry-content table:not(.m4-bang-gia) tbody tr:nth-child(even) { background: var(--m4-nen-phu); }
@media (max-width: 600px) { .m4gd.single-post .entry-content table:not(.m4-bang-gia) { min-width: 480px; } }
/* CTA cuối (khối 9) — một khối, câu mời + liên kết trụ cột + nút */
.m4gd.single-post .entry-content .m4-cta-rental {
  margin: var(--m4-k-7) 0 var(--m4-k-5); padding: var(--m4-k-5); border-radius: var(--m4-bo-vua);
  background: var(--m4-be-mat-toi); color: var(--m4-chu-tren-toi); box-shadow: var(--m4-bong-vua);
}
.m4gd.single-post .entry-content .m4-cta-rental p { margin: 0; font-size: var(--m4-co-than); line-height: 1.6; color: var(--m4-chu-tren-toi); }
.m4gd.single-post .entry-content .m4-cta-rental a:not(.m4-nut) { color: var(--m4-vang-kim); }
.m4-cta__nut { display: flex; flex-wrap: wrap; gap: var(--m4-k-2); margin-top: var(--m4-k-4); }
@media (max-width: 480px) { .m4-cta__nut .m4-nut { flex: 1 1 100%; } }
/* Video thực tế (khối 7) — trước là style="" trong man4owo-schema.php */
.m4-video { margin: var(--m4-k-6) 0; }
.m4-video__khung { position: relative; padding-top: 56.25%; border-radius: var(--m4-bo-vua); overflow: hidden; }
.m4-video__khung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Hộp thanh lý (khối 2) — trước là 15 thuộc tính style="" trong man4owo-thanh-ly.php */
.m4-tl-nhan { display: inline-block; color: var(--m4-chu-tren-toi); font-weight: var(--m4-dam-cong-bo); padding: var(--m4-k-2) var(--m4-k-4); border-radius: 6px; margin-bottom: var(--m4-k-4); font-size: 15px; }
.m4-tl-nhan--ban { background: var(--m4-nguy-hiem); }
.m4-tl-nhan--giu { background: var(--m4-nhan-chu); }
.m4-hop-tl { border: 1px solid var(--m4-vien); border-radius: var(--m4-bo-nho); padding: var(--m4-k-5); margin: 0 0 var(--m4-k-6); background: var(--m4-nen-phu); }
.m4-hop-tl__bang { width: 100%; border-collapse: collapse; margin: 0 0 var(--m4-k-4); border: 0 !important; }
.m4-hop-tl__bang td { padding: 6px 0 !important; border: 0 !important; background: none !important; }
.m4-hop-tl__bang td:first-child { color: var(--m4-chu-phu); width: 140px; font-weight: var(--m4-dam-doc) !important; }
.m4-hop-tl__gia { font-weight: var(--m4-dam-cong-bo); font-size: 20px; color: var(--m4-nguy-hiem); }
.m4-hop-tl__ghi { margin: 0 0 var(--m4-k-3) !important; color: var(--m4-chu-phu) !important; font-size: var(--m4-co-nho) !important; line-height: 1.6; }
.m4-hop-tl__het { color: var(--m4-chu-phu); font-style: italic; }
.m4-thanhly-order h4 { margin: 0 0 var(--m4-k-3); font-family: var(--m4-font-tieu-de); }
.m4tl-o { display: block; width: 100%; max-width: 360px; min-height: var(--m4-cham-toi-thieu); padding: 10px; margin-bottom: var(--m4-k-2); border: 1px solid var(--m4-vien-ui); border-radius: 6px; font: inherit; }
textarea.m4tl-o { resize: vertical; }
.m4tl-bay { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; opacity: 0; }
.m4tl-submit { background: var(--m4-nguy-hiem); color: var(--m4-chu-tren-toi); border: 0; min-height: var(--m4-cham-toi-thieu); padding: 10px 24px; border-radius: 6px; font-weight: var(--m4-dam-nhan); cursor: pointer; }
.m4tl-error { color: var(--m4-nguy-hiem); margin-top: var(--m4-k-2); }
@media (max-width: 600px) {
  .m4gd.ast-separate-container .ast-article-single,
  .m4gd.ast-separate-container .ast-article-post { padding: var(--m4-k-5) var(--m4-k-4); }
  .m4gd.ast-separate-container #primary { margin-top: var(--m4-k-4); margin-bottom: var(--m4-k-4); }
  .m4gd.ast-separate-container .ast-container { padding-left: var(--m4-k-2); padding-right: var(--m4-k-2); }
}

/* ── Tắt bộ cũ (bảo hiểm tới khi nội dung được dọn) ──────────────────── */
.m4gd #masthead, .m4gd .ast-mobile-header-wrap, .m4gd .site-footer, .m4gd .m4-bizbar, .m4gd .floating-contact,
.m4gd .m4g-nav, .m4gd .m4-page nav.m4nav, .m4gd .m4-page footer.f, .m4gd .m4-home footer.f, .m4gd .m4hero-a .nav { display: none !important; }
/* Họ chữ: CSS cũ của trang chủ + 5 trang tự dựng (man4owo-home.css, man4owo-pages.css) khai 'Inter' và 'Segoe UI'
   ⇒ trang có 3–4 họ chữ, trái DESIGN.md "2 họ, ⛔ họ thứ ba". Đo 2026-09-17 ở 375/768/1366 px:
   Inter 85 phần tử (trang chủ) · 355 (/bang-gia/) · 99 (/thiet-bi/). home.css dùng !important (0,1,1) ⇒ ở đây (0,2,1). */
.m4gd :is(.m4-page, .m4-home, .m4hero-pc, .m4hero-mb, .m4hero-a),
.m4gd :is(.m4-page, .m4-home) :is(.btn, .logo, button, input, select, textarea) { font-family: var(--m4-font-than) !important; }
.m4gd :is(.m4-page, .m4-home) :is(h1, h2, h3, h4),
.m4gd :is(.m4hero-pc, .m4hero-mb, .m4hero-a) :is(.m4title, .m4title-pc, h1, h2) { font-family: var(--m4-font-tieu-de) !important; }
/* Nút liên hệ: child theme style-custom.css (nạp SAU) có `.zalo-btn{background:#fff}` + `.call-btn{gradient cam}`
   ⇒ nút Zalo TRẮNG chữ trắng (vô hình), nút gọi lệch token. Lớp .zalo-btn/.call-btn phải GIỮ (GTM nghe) ⇒ tăng
   độ ưu tiên (0,2,0) thay vì bỏ lớp. Đo ảnh chụp headless 375/768 px 2026-09-17. */
.m4-nut.m4-nut--zalo, .m4-noi__nut.m4-noi__nut--zalo { background: var(--m4-zalo); }
.m4-nut.call-btn:not(.m4-nut--phu):not(.m4-nut--zalo), .m4-noi__nut.m4-noi__nut--goi { background: var(--m4-nhan); }
/* Trang chủ: CSS cũ có HAI hero — .m4g-hero (navy, token) ở > 760 px, .m4hero-a (nâu-vàng) ở ≤ 760 px ⇒ điện thoại
   khác màu PC VÀ H1 nằm trong hero bị ẩn (người dùng điện thoại thấy 0 H1). Một hero cho mọi cỡ. */
.m4gd .m4-home .m4g-hero { display: block !important; }
.m4gd .m4-home .m4hero-a, .m4gd .m4-home .m4hero-mb { display: none !important; }
@media (max-width: 760px) {
  .m4gd .m4g-cards { grid-template-columns: repeat(2, 1fr); gap: var(--m4-k-3); padding: 0 var(--m4-k-4); margin-top: var(--m4-k-5); }
  .m4gd .m4g-head { padding: var(--m4-k-5) var(--m4-k-4) var(--m4-k-2); }
  .m4gd .m4g-price { padding-right: 26px; }   /* mũi tên .m4g-go nằm góc phải dưới — không đè giá */
  .m4gd .m4g-go { right: 12px; bottom: 14px; }
}
@media (max-width: 380px) { .m4gd .m4g-cards { grid-template-columns: 1fr; } }
/* Blog: Astra không in H1 ở trang danh sách bài ⇒ m4gd_h1_blog() in một H1 (đo: /blog/ 0 H1 ở cả 3 cỡ). */
.m4-trang-td { font: var(--m4-dam-cong-bo) var(--m4-co-h1)/1.2 var(--m4-font-tieu-de); color: var(--m4-chu); margin: 0 0 var(--m4-k-5); }
.m4gd .m4-page .phero { padding-top: var(--m4-k-7) !important; }
.m4gd .m4g-hero { padding-top: var(--m4-k-6) !important; }
/* Trang chủ = CỬA VÀO, ⛔ tranh từ khoá với trang dịch vụ (GSC 90 ngày 2026-09-17: "thuê máy chiếu" trang chủ vị trí 5,4
   ↔ /thue-may-chieu-ha-noi/ 48,2). H2 mục dịch vụ nay là liên kết về trang dịch vụ — giữ dáng tiêu đề. */
.m4gd .m4-home .svc h2 a { color: inherit; text-decoration: none; }
.m4gd .m4-home .svc h2 a:hover { color: var(--m4-thuong-hieu); }
/* Khuôn bài: tiêu đề + dòng tác giả cùng CỘT với thân bài (ảnh chụp 1366 px 2026-09-17: H1 lệch trái so với cột 72ch). */
.m4gd.single-post .ast-single-post-order, .m4gd.single-post .entry-header { max-width: var(--m4-rong-doc); margin-left: auto; margin-right: auto; }

/* Khoi 'Cung chu de' cuoi bai — SINH tu cum.json (man4web cum → cum_trang.json → m4gd_khoi_cum), 2026-09-24 */
.m4gd.single-post .entry-content .m4-cum { margin: var(--m4-k-6) 0; padding: var(--m4-k-4) var(--m4-k-5); border: 1px solid var(--m4-vien); border-radius: var(--m4-bo-vua); background: var(--m4-nen-phu); }
.m4gd.single-post .entry-content .m4-cum__td { margin: 0 0 var(--m4-k-2); font-weight: 700; color: var(--m4-thuong-hieu-dam); font-size: var(--m4-co-than); }
.m4gd.single-post .entry-content .m4-cum__ds { margin: 0; padding-left: var(--m4-k-5); }
.m4gd.single-post .entry-content .m4-cum__ds li { margin: var(--m4-k-1) 0; line-height: 1.5; }
.m4gd.single-post .entry-content .m4-cum__ds a { color: var(--m4-thuong-hieu); }

/* CH-106 F1 (2026-10-16): mot ho chu cho moi trang — de Inter (home/pages) · Lato/Lora (Astra) · Segoe UI (hero) */
body { font-synthesis: none; }
body, body .m4-home, body .m4-page, body :is(h1, h2, h3, h4, h5, h6, .entry-title, .site-title) { font-family: var(--m4-font-than) !important; }
body .m4-home :is(h1, h2, h3, h4, .logo, .btn), body .m4-page :is(h1, h2, h3, h4, .logo, .btn), body :is(.m4hero-pc, .m4hero-mb, .m4hero-a) :is(.m4title, .m4title-pc, h1, h2) { font-family: var(--m4-font-tieu-de) !important; }