/* =====================================================================
   M2W 2026-10-16 — sửa lỗi khuôn dùng chung (audit migration.m2w.vn, áp cả m2w.vn).
   Nạp SAU main.css (inc/enqueue.php) để thắng source-order; tách tệp riêng vì
   main.css đang có thay đổi dở của phiên khác.
   ===================================================================== */

/* 1. Tiêu đề hero trên điện thoại. Mức chặn 26/06 (20–28px) làm H1 còn ~21,8px,
      nhỏ hơn H2 (22px). Nâng mức, vẫn giữ trần để tiêu đề dài không tràn. */
@media (max-width: 560px) {
	.hero h1,
	.hero .entry-title { font-size: clamp(26px, 7.6vw, 34px) !important; line-height: 1.16; text-wrap: balance; }
}

/* 2. Vòng sáng cam của .art-hero lơ lửng trên đoạn giới thiệu — nó làm nền cho nhãn
      eyebrow, mà eyebrow đã ẩn toàn site (main.css .eyebrow{display:none}). */
.art-hero::before { display: none; }

/* 3. Lưới hụt ô. Lưới 3 cột có 2 hoặc 4 thẻ → 2 cột; 5 thẻ trong lưới 3 cột → hàng
      cuối 2 thẻ canh giữa (lưới 6 rãnh); 5 thẻ trong lưới 2 cột → thẻ cuối trải hết hàng. */
@media (min-width: 901px) {
	.art-cards-3:not(.art-cards-3--quad):not(.art-cards-3--duo):not(.art-cards-3--feature):has(> :last-child:nth-child(2)),
	.art-cards-3:not(.art-cards-3--quad):not(.art-cards-3--duo):not(.art-cards-3--feature):has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
	.tools-grid:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.tools-grid:has(> :last-child:nth-child(5)) > * { grid-column: span 2; }
	.tools-grid:has(> :last-child:nth-child(5)) > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 601px) and (max-width: 960px) {
	.tools-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 1000px) {
	.dc-steps:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dc-steps:has(> :last-child:nth-child(5)) > * { grid-column: span 2; }
	.dc-steps:has(> :last-child:nth-child(5)) > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 560px) {
	.dc-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1024px) {
	.topic-grid:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.topic-grid:has(> :last-child:nth-child(5)) > * { grid-column: span 2; }
	.topic-grid:has(> :last-child:nth-child(5)) > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
	.topic-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.m2w-qf__grid > :last-child:nth-child(odd),
	.m2wdmv-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 4. Mục lục bên cạnh bài: nhãn dài bị cắt "…" (21 trang) → cho xuống dòng. */
.m2w-toc__text { white-space: normal; overflow: visible; text-overflow: clip; }

/* 5. Bảng trên điện thoại: có cuộn ngang nhưng không ai biết. Gợi ý + cột đầu đứng yên.
      .is-scrollable do script nhỏ gắn khi bảng thật sự rộng hơn khung (inc/content-articles.php). */
@media (max-width: 720px) {
	.is-scrollable::before {
		content: "Vuốt ngang để xem đủ bảng →";
		display: block; position: sticky; left: 0; width: max-content;
		margin: 0 0 8px; font-size: 12.5px; color: var(--c-muted);
	}
	.m2w-compare__scroll :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
}

/* Bảng trong bài viết: trước đây không viền, không nền, dính sát đoạn văn. */
.post-single__content table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 15px; line-height: 1.55; }
.post-single__content :is(th, td) { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-single__content th,
.post-single__content thead td { background: color-mix(in oklab, var(--c-accent), #fff 92%); font-weight: 600; }
@media (max-width: 720px) {
	.post-single__content table { display: block; overflow-x: auto; }
	.post-single__content :is(th, td) { min-width: 120px; }
}

/* 6. Tab bước của công cụ tính điểm trên điện thoại: dải 687px nhét trong 348px,
      tab thứ 3 đứt chữ → cho xuống dòng, thấy đủ cả 6 tab. */
@media (max-width: 720px) {
	.m2wcalc-tabs { flex-wrap: wrap; overflow-x: visible; }
	.m2wcalc-tab { flex: 1 1 33%; padding: 11px 6px; }
}

/* 7. Ô ghi chú "info" màu xanh dương kiểu Windows → tông thương hiệu; điện thoại thu
      cột biểu tượng (64px làm chữ còn ~55% bề ngang). */
.art-callout--info { background: color-mix(in oklab, var(--c-accent), #fff 94%); }
.art-callout--info::before { background: var(--c-accent); }
.art-callout--info h3 { color: var(--c-ink); }
@media (max-width: 600px) {
	.art-callout { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; }
	.art-callout__icon { width: 38px; height: 38px; font-size: 19px; }
}

/* 8. Nút nổi. (a) Trong lúc thanh cookie còn hiện, nút nổi bị nó đè → ẩn cho tới khi khách chọn.
      (b) Điện thoại: 4 nút chồng che mép phải chữ → gộp Gọi/Messenger/Zalo vào 1 nút "Liên hệ" (footer.php). */
body:has(#m2w-consent:not([hidden])) :is(.floating-social, .m2w-chat, .m2w-backtop) { display: none !important; }
.floating-social__toggle { display: none; }
@media (max-width: 720px) {
	.floating-social__toggle {
		display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
		border: 0; border-radius: 50%; cursor: pointer; color: #fff;
		background: var(--c-accent); box-shadow: 0 8px 20px -6px rgba(15, 27, 45, .35);
	}
	.floating-social__toggle svg { transition: transform .2s ease; }
	.floating-social.is-open .floating-social__toggle svg { transform: rotate(45deg); }
	.floating-social:not(.is-open) .floating-social__btn { display: none; }
	.floating-social { flex-direction: column-reverse; }
}

/* 9. Trang tìm kiếm + 404 (search.php, 404.php). */
.m2w-search-form { display: flex; gap: 10px; max-width: 560px; margin-top: 22px; }
.m2w-search-form input[type="search"] { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--c-line); border-radius: 999px; font: inherit; background: #fff; }
.m2w-search-form button { flex: none; }
.m2w-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.m2w-404-links li { flex: 0 1 230px; }
.m2w-404-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; color: var(--c-ink); text-decoration: none; font-weight: 500; transition: border-color .15s, transform .15s; }
.m2w-404-links a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.m2w-404-links .arr { color: var(--c-accent); }

/* 10. Dòng ngày · thời gian đọc trên thẻ bài liên quan vỡ dòng ("28/04/ / 2026"). */
.post-card__meta span { white-space: nowrap; }

/* 11. Công cụ: 3 độ rộng khung khác nhau (920/1040/1140 vs khung trang 1330) làm mép trái
       lệch với hero. Cho mọi công cụ ăn đủ khung trang. CSS gốc in inline trong thân trang
       (sau stylesheet) → cần "body" để thắng độ ưu tiên. */
body #m2wvb,
body #m2wdmv,
body #m2wint,
body #m2weng,
body .m2w-vcb-page,
body .m2wcost { max-width: none; }

/* 12. Tiêu đề rớt 1 chữ mồ côi xuống dòng cuối → để trình duyệt cân dòng (Chrome/Safari mới; trình cũ bỏ qua). */
main :is(h2, h3) { text-wrap: pretty; }

/* 13. Độ tương phản (WCAG AA ≥ 4,5:1). Chữ trắng trên cam #FF6900 chỉ 2,9:1; chữ cam trên nền kem 2,7:1.
       Dùng --c-accent-deep (#C2410C — "cam ĐẬM" của brandbook, dành cho chữ cam trên nền sáng): trắng/đậm = 5,2:1.
       Cam nhận diện #FF6900 GIỮ cho logo, viền, biểu tượng, nền nhạt — chỉ đổi chỗ có CHỮ. */
.btn-primary,
.m2w-railcta__btn,
.m2w-railcta--legal .m2w-railcta__btn { background: var(--c-accent-deep); }
body .m2w-lead-form { --lf-accent: var(--c-accent-deep); }
:where(.entry-content, .page-content) a:where(:not(.btn)),
.post-single__content a,
.art-card__link,
.entry-content .article-page a.art-card--link .art-card__link,
.cost-card__link,
.m2w-chat__msg--bot a,
.m2w-toc__list a.is-active .m2w-toc__num { color: var(--c-accent-deep); }

/* 14. Khối kêu gọi cuối 11 công cụ: 4 kiểu khác nhau (+ tỷ giá bị đúp). Ẩn hộp riêng từng công cụ,
       mọi trang /cong-cu/* dùng chung khối chuẩn .art-cta (trang nào thiếu được chèn ở inc/content-articles.php). */
.m2wvb-cta, .m2wdmv-cta, .m2wint-cta, .m2weng-cta, .vcb-cta { display: none !important; }

/* 13b. Bổ sung AA: nút gửi form (kể cả ô đăng ký bản tin ở chân trang — rule riêng 0,3,0 trong main.css),
        nút "Áp dụng" bộ lọc ngày /bai-viet/, tiêu đề bước của khối quy trình (chữ cam trên nền sáng). */
body .m2w-lead-form .m2w-lead-form__submit,
body .foot__brand .news .m2w-lead-form__submit,
.lib-daterange__go { background: var(--c-accent-deep); }
.art-tl-step__title { color: var(--c-accent-deep); }