/* ═══ SoiMenh UI Chuẩn — v1 (26/10/2026) ═══
   Mọi luật bắt đầu bằng body.sm-v2. Không đổi chữ. Mỗi luật ghi nguyên nhân gốc đã đo.
   Lùi: xoá dòng trang trong ds-trang.txt. */

/* [N1] Nút gửi của công cụ co lại dính trái trên điện thoại.
   Nguyên nhân gốc (đo 26/10): mobile-perf.css (SECTION 48 "text overflow fix", dòng ~1017 và ~1054) ép
   `width:auto !important` lên mọi [class*="-submit-btn"] khi màn ≤768px → nút chỉ rộng vừa chữ (vd 131px trong khung 339px).
   (Độ ưu tiên: dùng body.sm-v2.sm-v2 để thắng luật cũ có :not().) Sửa: nút luôn đầy bề ngang khung chứa; chữ dài vẫn xuống dòng được (luật flex-wrap cũ giữ nguyên). */
body.sm-v2.sm-v2 [class*="-portal-btn"][class*="-submit-btn"],
body.sm-v2.sm-v2 .hh-submit-btn,
body.sm-v2.sm-v2 .tt-submit-btn,
body.sm-v2.sm-v2 [class*="btn-submit"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
}

/* [N2] Khoảng trống thừa giữa khung công cụ và phần giải thích (founder bắt 26/10).
   Nguyên nhân gốc (đo la-so mobile 156px / desktop 212px): 4 lớp đệm cộng dồn —
   .tt-form-section pb28 + .*-footer-meander mt32 (+ h26) + .tc-section pt28 (+ summary pt16).
   Chuẩn mới: một thước nhịp dọc --sm-nhip (12px điện thoại → 22px màn rộng), mọi khối dùng chung. */
body.sm-v2 { --sm-nhip: clamp(12px, 1.8vw, 22px); }
body.sm-v2.sm-v2 section[class*="-form-section"] { padding-bottom: var(--sm-nhip) !important; }
body.sm-v2.sm-v2 [class$="-footer-meander"] { margin-top: var(--sm-nhip) !important; margin-bottom: var(--sm-nhip) !important; }
body.sm-v2.sm-v2 section.tc-section { padding-top: var(--sm-nhip) !important; }
body.sm-v2.sm-v2 section.tc-section::before { margin-bottom: var(--sm-nhip) !important; }   /* vạch đỏ nhỏ đầu mục: mb 40px → nhịp chuẩn */
body.sm-v2.sm-v2 .tc-accordion-toggle { padding-top: 14px !important; padding-bottom: 14px !important; }

/* [N3] Dải trống giữa dải lịch và đường dẫn "Trang chủ › Công cụ" (founder khoanh đỏ đầu tiên).
   Nguyên nhân gốc (đo 16 cỡ màn): từ 769px trở lên dải lịch là position:relative + top:96px nên ĐÃ chiếm chỗ trong dòng
   chảy trang, nhưng đệm trên của .sm-breadcrumb = header-height + 22 lại cộng chiều cao dải lịch THÊM LẦN NỮA
   → thừa đúng bằng chiều cao dải lịch (89px máy tính, 144px iPad). Dưới 769px dải lịch nằm nổi nên đệm cũ đúng.
   Đích: khoảng dải lịch → đường dẫn = 22px ở mọi cỡ. */
@media (min-width: 769px) {
  body.sm-v2.sm-v2 .sm-breadcrumb { padding-top: calc(var(--header-height) - var(--cbar-height) + 22px) !important; }
}

/* [N4] Đường dẫn "Trang chủ › Công Cụ › … " bị gãy dòng trên điện thoại (mũi tên rơi cuối dòng, tên trang đứng một mình).
   Nguyên nhân: main.css có luật nowrap + rút gọn cho ≤767px nhưng một luật sau đặt flex-wrap:wrap đè mất. Khẳng định lại. */
@media (max-width: 767px) {
  body.sm-v2.sm-v2 .sm-bc__list { flex-wrap: nowrap !important; overflow: hidden; }
  body.sm-v2.sm-v2 .sm-bc__item { flex-shrink: 0; }
  body.sm-v2.sm-v2 .sm-bc__item--current { flex: 1 1 0; min-width: 0; overflow: hidden; }
  body.sm-v2.sm-v2 .sm-bc__item--current .sm-bc__current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 767px) {
  /* Điện thoại: "Trang chủ" chỉ hiện biểu tượng nhà (chữ vẫn nằm trong HTML, màn hình đọc + Google vẫn thấy) để tên trang hiện tại không bị ép mất */
  body.sm-v2.sm-v2 .sm-bc__item:first-child .sm-bc__link > span[itemprop="name"] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.sm-v2.sm-v2 .sm-bc__item:first-child .sm-bc__link { min-width: 44px; min-height: 24px; display: inline-flex; align-items: center; }
}

/* [N5] Khối "Đọc thêm về <nhóm>" dưới mọi công cụ: dùng thẻ bài viết chuẩn của site (đã làm ở components/tool-grid.php).
   Điện thoại: 6 thẻ xếp dọc dài 3.199px → hàng thẻ VUỐT NGANG có điểm dừng (đủ 6 link, không giấu gì). */
@media (max-width: 767px) {
  body.sm-v2.sm-v2 .sm-tool-reading .sm-blog-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
    padding-bottom: 6px;
  }
  body.sm-v2.sm-v2 .sm-tool-reading .sm-blog-grid::-webkit-scrollbar { display: none; }
  body.sm-v2.sm-v2 .sm-tool-reading .sm-post-card { flex: 0 0 82%; scroll-snap-align: start; margin: 0; }
}

/* [N6] "Phần tử hiện sai lúc": khối đã đánh dấu hidden nhưng CSS riêng đặt display:flex/block đè mất dấu ẩn.
   Mẫu (founder 26/10): nút "Thử lại" của Hợp hôn hiện đè lên form từ lúc mở trang (#hh-form-error-actions, mẫu dùng chung 14 công cụ họ hh-).
   Luật chung: có thuộc tính hidden thì LUÔN ẩn; JS bỏ hidden đi thì hiện bình thường. */
body.sm-v2.sm-v2 [hidden] { display: none !important; }

/* [N7] Sàn chữ 12px cho nhãn/huy hiệu dùng chung (đo 26/10: 10–11px) — không đụng chữ trang trí (mũi tên, chữ trong hình vẽ, tagline logo). */
body.sm-v2.sm-v2 .sm-badge,
body.sm-v2.sm-v2 .smc-prov__label,
body.sm-v2.sm-v2 .tc-faq-arrow { font-size: 12px !important; }
/* [N7b] Dải lịch trên đầu trang: nhãn 11px → 12px (người lớn tuổi). Tagline dưới logo (9px, chữ trang trí thương hiệu) giữ nguyên. */
body.sm-v2.sm-v2 .sm-quick__lunar,
body.sm-v2.sm-v2 .sm-quick__label,
body.sm-v2.sm-v2 .sm-quick__badge,
body.sm-v2.sm-v2 .sm-quick__lunar * { font-size: 12px !important; }

/* [N8] Vùng bấm quá nhỏ trên điện thoại (đo 26/10: nhãn danh mục 105x29, nút "Khám phá" thẻ bài 100x21): cao tối thiểu 40px, không đổi chữ. */
@media (max-width: 767px) {
  body.sm-v2.sm-v2 a.sm-badge, body.sm-v2.sm-v2 .sm-post-card__read { display: inline-flex; align-items: center; min-height: 40px; }
  /* [N4b] Biểu tượng nhà ở đường dẫn: căn giữa trong ô 32px (trước: icon dính trái, cách mũi tên 65px) */
  body.sm-v2.sm-v2 .sm-bc__item:first-child .sm-bc__link { min-width: 32px !important; justify-content: center; }
  /* [N7c] chữ còn lại <12px: tiêu đề bảng, nhãn nguồn dữ liệu, huy hiệu thẻ hub */
  body.sm-v2.sm-v2 th, body.sm-v2.sm-v2 .smc-prov__sub, body.sm-v2.sm-v2 .smc-prov__disc, body.sm-v2.sm-v2 .smh-card__badge { font-size: 12px !important; }
}

/* [N9] Khung xương công cụ (44 công cụ dùng .tsh-pyth-layout): khi xếp dọc (≤1024px) việc chính là FORM, phải lên trước phần chân dung/giới thiệu.
   Đo 26/10 (Bói Kiều, iPhone 389px): tiêu đề + ô nhập nằm sau ~900px chân dung. Chỉ đổi thứ tự hiển thị bằng CSS; thứ tự HTML (Google/trình đọc màn hình) giữ nguyên. */
@media (max-width: 1024px) {
  body.sm-v2.sm-v2 .tsh-pyth-layout > .tsh-pyth-col--form { order: -1; }
}