/* ==========================================================================
   M-TYPE — hệ chữ của bản điện thoại (≤ 760px), VI + EN
   Mỗi loại chữ một cỡ cố định (không đoạn to đoạn nhỏ), tối thiểu 12px, căn đều 2 bên.
   Ngắt dòng + chia khoảng trắng do js/m-justify.js làm (mỗi dòng là .mj-l).
   Không đụng tới hero (#trang-chu), trừ cỡ tiêu đề chương, đoạn giới thiệu bản điện thoại (.hero-pos--m) và vế sau của dòng dưới tên.
   ========================================================================== */
@media (max-width: 760px) {
  /* Cỡ theo bề ngang máy (390px: 13 / 12,5 / 13), co giãn cùng tỉ lệ khung chữ để số dòng giữ nguyên trên máy hẹp/rộng hơn */
  :root {
    --mt-lead: clamp(12px, 3.334vw, 13.5px);   /* mô tả đầu mục, giới thiệu, nhóm dự án, liên hệ */
    --mt-card: clamp(12px, 3.206vw, 13px);     /* chữ trong thẻ: thế mạnh, kinh nghiệm, giá trị, năng lực, quy trình, chân trang */
    --mt-quote: clamp(12px, 3.334vw, 13.5px);  /* nhận xét, danh hiệu */
    --mt-small: 12px;                          /* thẻ chuyên mục Góc kiến thức */
  }

  /* ---- Cỡ chữ theo vai trò (ghi đè cỡ riêng từng đoạn mà fitJustify đặt inline) ---- */
  .sec-head__foot .desc,
  .about__block .desc,
  .pw__desc,
  .cta__main .desc,
  html.st .kbx .sec-head .sec-head__foot .desc {
    font-size: var(--mt-lead) !important;
    line-height: 1.7 !important;
  }
  .strength .desc,
  .tl .desc,
  .vcard__desc,
  .vcard__proof-txt,
  .vrow__content .desc,
  .vrow__proof p,
  .skx-panel__desc,
  #nang-luc .skx-panel__desc,
  .skill .desc,
  .pstep .desc,
  html.st #quy-trinh.pfx .pstep .desc,
  html.st #gia-tri.vsc .vcard__desc,
  .footer__brand .desc {
    font-size: var(--mt-card) !important;
    line-height: 1.68 !important;
  }
  .quote__text {
    font-size: var(--mt-quote) !important;
    line-height: 1.66 !important;
  }

  /* ---- Tiêu đề cùng vai trò cùng một cỡ (m-justify.js đo cỡ vừa 1 dòng cho tiêu đề dài nhất của nhóm) ---- */
  html.mj-g0 .sec-head .h2, html.mj-g0 .cta__title { font-size: var(--mj-g0) !important; }
  html.mj-g1 .about__title { font-size: var(--mj-g1) !important; }
  html.mj-g2 .vcard__title, html.mj-g2 .vcard__vtitle { font-size: var(--mj-g2) !important; }
  html.mj-g3 .pw__title { font-size: var(--mj-g3) !important; }
  html.mj-g4 .pstep__title { font-size: var(--mj-g4) !important; }
  html.mj-g5 .skx-panel__title, html.mj-g5 .skill__title { font-size: var(--mj-g5) !important; }
  html.mj-g6 .tl__role { font-size: var(--mj-g6) !important; }
  /* Banner: 4 tiêu đề chương ("Kết quả nổi bật"…) cùng một cỡ, mỗi tiêu đề nằm trọn 1 dòng: cỡ lớn nhất (tối đa 36,8px)
     mà tiêu đề dài nhất ("Đồng hành cùng 200+ SME", "Chặng đường 2022 – 2026") vẫn vừa. Tên "Lê Tuấn Việt" giữ nguyên. */
  html.mj-g7 #heroLayers .ch__title { font-size: var(--mj-g7) !important; }
  /* Dòng dưới tên: điện thoại chỉ giữ định vị "Marketing & Growth Architect". Cả dòng dài hơn khung nên data-fit thu chữ
     xuống ~11px; số năm kinh nghiệm đã có ở mục Giới thiệu. */
  #heroLayers .hero-role .sep, #heroLayers .hero-role__xp { display: none; }

  /* ---- Mọi đoạn: hiện trọn, căn đều 2 bên ---- */
  .sec-head__foot .desc, .about__block .desc, .strength .desc, .tl .desc, .vcard__desc, .vcard__proof-txt,
  .vrow__content .desc, .vrow__proof p, .skx-panel__desc, .skill .desc, .pstep .desc, .pw__desc, .quote__text,
  .cta__main .desc, .footer__brand .desc, #heroLayers .hero-pos--m {
    display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
    min-width: 0; max-width: 100%;
    text-align: justify; text-align-last: left; letter-spacing: 0; word-spacing: 0;
    hyphens: manual; -webkit-hyphens: manual;
  }

  /* Dòng do m-justify.js dựng: dòng giữa căn đều 2 bên, dòng cuối căn trái (hoặc giữa) */
  .mj > .mj-l { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
  .mj > .mj-end { text-align: left; text-align-last: auto; }

  /* ---- Dự án đã triển khai: tên nhóm + mô tả căn giữa như bản máy tính ---- */
  #du-an .pw__head { justify-items: center; text-align: center; }
  #du-an .pw__title { text-align: center; }
  #du-an .pw__desc, html[data-lang="en"] #du-an .pw__desc { text-align: justify; text-align-last: center; }

  /* ---- Nhận xét: thẻ rộng hơn để chữ không bị dồn nhiều dòng ---- */
  .quote { width: min(420px, 88vw); padding-inline: 22px; }

  /* EN: bỏ word-spacing âm của i18n.css (m-justify.js tự chia khoảng trắng từng dòng) */
  html[data-lang="en"] body :is(.sec-head__foot .desc, .about__block .desc, .strength .desc, .tl .desc, .vcard__desc,
    .vcard__proof-txt, .skx-panel__desc, .skill .desc, .pstep .desc, .pw__desc, .quote__text, .cta__main .desc, .footer__brand .desc,
    #heroLayers .hero-pos--m) {
    word-spacing: 0;
  }

  /* ---- Năng lực: mỗi nhãn kỹ năng nằm trọn 1 dòng, không cắt cụt. 2 cột chỉ còn ~140px chữ/ô,
     không đủ cho nhãn dài ("Kế hoạch truyền thông IMC") ở cỡ ≥12px, nên điện thoại xếp 1 cột 4 hàng ---- */
  #nang-luc .skx-checks { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: center; row-gap: 8px; }
  #nang-luc .skx-checks li { font-size: var(--mt-card); line-height: 1.3; white-space: nowrap; overflow: visible; text-overflow: clip; min-width: 0; }

  /* ---- Liên hệ: khung chữ rộng thêm để đoạn mô tả giữ 3 dòng như máy tính ---- */
  .cta__main { padding-inline: 18px; }

  /* ---- Góc kiến thức ---- */
  /* Mô tả dưới tiêu đề: stage.css cắt còn 2 dòng (tính cho cỡ 12,6px cũ); ở cỡ chung --mt-lead đoạn cần 3 dòng nên bị mất chữ
     ("…doanh nghiệp SME", "…I ha…") → hiện trọn như mô tả các section khác */
  html.st .kbx .sec-head .sec-head__foot .desc { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  /* Chữ thẻ chuyên mục tối thiểu 12px, căn trái như bản máy tính: thẻ chỉ rộng ~150px, căn đều làm khoảng trắng giãn tới 0,8–0,9em */
  .kbh-pillar__txt small { font-size: var(--mt-small) !important; text-align: left !important; text-align-last: left !important; }
}