/* ============================================================================
   NMT MOBILE — lớp tối ưu cho điện thoại (nạp CUỐI CÙNG, sau mọi CSS khác)

   VÌ SAO CÓ TỆP NÀY (số đo thật, không phải phỏng đoán):
   Trang đang dùng lại CSS của website cũ (desktop) chồng lên theme. Đo bằng DevTools ở khổ 390px:
     · h1 trong banner = 50px / dòng 60px   (luật `.banner.banner_01 h1 { font-size:50px }`)
     · .tits h3        = 30px
     · .lead (đoạn mở đầu) = 17px / dòng 31px  (có !important)
   Hệ quả trên điện thoại: tiêu đề hero cao gấp đôi khung, chữ bị khung cắt cụt; nút bấm chỉ cao
   ~34px (nhỏ hơn ngưỡng chạm 44px).

   NGUYÊN TẮC CỦA TỆP NÀY:
   1. CHỈ áp dụng ở màn hình hẹp — không đụng gì tới bản desktop.
   2. Không đổi bố cục, không đổi màu, không đổi nội dung: chỉ chỉnh CỠ CHỮ, KHOẢNG CÁCH, VÙNG CHẠM.
   3. Có `!important` là có chủ đích: luật cũ đặt cỡ chữ bằng ID + `!important`, không có cách nào đè
      mà không dùng tới nó. Mọi luật đều nằm trong @media nên bản desktop không bị ảnh hưởng.
   ============================================================================ */

@media (max-width: 849px) {
  /* ── 1. Cỡ chữ: hạ tiêu đề về tầm điện thoại ───────────────────────────────── */
  h1, .h1,
  .banner h1, .banner.banner_01 h1,
  .text-box h1, .text-box-content h1 {
    font-size: 30px !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }
  h2, .h2, .sec_02 h2, .text-box h2 {
    font-size: 23px !important;
    line-height: 1.3 !important;
  }
  h3, .h3, .tits h3, .text-box h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    letter-spacing: .6px !important;
  }
  h4, .h4 { font-size: 18px !important; line-height: 1.4 !important; }

  /* Chữ thường: 17px/31px của bản desktop hơi to khi bề ngang chỉ 390px */
  p, li, .lead, .entry-content p, .entry-content .lead, .banner p, .text-box p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* ── 2. Khung: cho tiêu đề thở, không để khung cắt chữ ─────────────────────── */
  section.section { min-height: 0 !important; }          /* bản cũ đặt min-height:170px */
  .banner .text-box.banner-layer {                        /* hộp chữ trong banner: tràn hết lề */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .banner .banner-layers.container,
  .banner .text-box-content { padding-left: 16px !important; padding-right: 16px !important; }
  .banner .text-box-content { font-size: 100% !important; }
  .row[style*="max-width"], .col-inner[style*="max-width"] { max-width: 100% !important; }

  /* ── 3. Nút bấm: đủ lớn để chạm, không tràn khỏi thẻ ────────────────────────── */
  /* Vùng chạm ≥44px là chuẩn cho ngón tay. NHƯNG không được đặt `line-height: 46px`: chữ dài xuống
     dòng thì mỗi dòng cao 46px ⇒ nút cao gấp ba (đo được 146px) và tràn xuống đè khối bên dưới.
     Cách đúng: chiều cao do PADDING + canh giữa bằng flex. */
  .button, button, input[type="submit"], input[type="button"] {
    font-size: 15px !important;
    line-height: 1.25 !important;
    padding: 13px 18px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  /* Nút nằm một mình trong thẻ/cột thì cho rộng hết cỡ — dễ chạm hơn nhiều */
  .col-inner > p > .button:only-child,
  .col-inner > .button:only-child { width: 100% !important; text-align: center !important; }

  /* ── 4. Ảnh và bảng: không bao giờ rộng hơn màn hình ───────────────────────── */
  img, iframe, video, embed, svg { max-width: 100% !important; height: auto !important; }
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── 5. Hero trang chủ: header trong suốt + logo tròn nằm ĐÈ lên tiêu đề ──────
     Bản desktop đặt hộp chữ ở giữa khung (y50). Trên điện thoại, header trong suốt cao ~54px nằm
     chồng lên đầu khung ⇒ logo tròn đè lên dòng đầu của tiêu đề. Ghim hộp chữ xuống dưới header
     (top cứng, bỏ canh giữa) là hết đè, và không phụ thuộc vào chiều cao khung. */
  body.home .banner.banner_01 .text-box.banner-layer {
    top: 76px !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* Chiều cao khung hero được đặt trong style NỘI TUYẾN của trang bằng ID (`#banner-1908411220
     { padding-top: 56.25% }`), mà ID + !important thì thắng class + !important. Nên phải đè bằng
     chính ID đó. Trên điện thoại, khung 219px không đủ chỗ cho tiêu đề + đoạn mở đầu + nút ⇒ nút
     tràn xuống đè thẻ bên dưới. Cho khung cao theo nội dung. */
  /* Thẻ đăng ký bên dưới CỐ TÌNH chồng lên hero (child theme: `.banner_01{margin-top:-86px}` và
     `.sec_01{margin-top:-50px}`) — thiết kế cho desktop, khi ấy hero chỉ có ảnh ở phần dưới. Trên
     điện thoại, chữ + nút trong hero cần chỗ, nên cho hero cao hơn để phần chồng rơi vào vùng ẢNH
     (không có chữ), và thắt khoảng cách giữa tiêu đề – đoạn mở đầu – nút. */
  #banner-1908411220 { padding-top: 150% !important; }
  .banner.banner_01 h1 { margin-bottom: 12px !important; }
  .banner.banner_01 .text-inner p { margin-bottom: 16px !important; line-height: 1.6 !important; }

  /* ── 6. Nút chat nổi: nhỏ lại + viền trắng để không "lẫn" vào chữ bên dưới ──── */
  .nmt-float-btn { width: 44px !important; height: 44px !important; border: 2px solid #fff !important; }
  .nmt-float-contact { right: 10px !important; bottom: 10px !important; gap: 8px !important; }

  /* ── 7. Header gọn lại, và chừa chỗ cho nút chat nổi ở góc dưới ─────────────── */
  #header-nmt .header-main { min-height: 56px !important; }
  /* Logo: thuộc tính width/height 284×285 nằm NGAY TRONG thẻ <img> nên phải có !important mới thắng */
  #header-nmt .logo img, #header-nmt #logo img,
  #header-nmt img.header_logo, #header-nmt img.header-logo,
  #header-nmt img.header-logo-dark {
    max-height: 38px !important;
    height: 38px !important;
    width: auto !important;
  }
  #header-nmt .header-inner { padding-left: 12px; padding-right: 12px; }
  body { padding-bottom: 76px; }

  /* ── 6. Ô nhập liệu: tránh iPhone tự phóng to khi bấm vào ───────────────────── */
  input, select, textarea { font-size: 16px !important; max-width: 100% !important; }

  /* ── 8. Header bám đầu trang khi cuộn + nút ☰ nhìn thấy được (sửa 17/10/2026) ─────
     NGOẠI LỆ CÓ DUYỆT với nguyên tắc 2 ("không đổi màu"): anh Tiền duyệt 17/10.
     (a) `body{overflow-x:hidden}` (inline trong nmt-old-style.php) cộng `html{overflow-x:hidden}` của
         theme biến body thành khung cuộn riêng ⇒ `position:sticky` của #header-nmt mất tác dụng:
         cuộn xuống là header + nút menu trôi mất. `clip` cắt tràn ngang y như `hidden` nhưng KHÔNG
         tạo khung cuộn ⇒ sticky chạy lại. Trình duyệt cũ không hiểu `clip` thì bỏ qua ⇒ y như trước.
     (b) Icon ☰ màu #222 nằm trên ảnh nền tối = gần vô hình. Mọi trang đều mở đầu bằng ảnh tối ⇒ trắng.
     (c) Nền tối CHỈ bật khi đã cuộn (lớp `nmt-da-cuon` do mobile.js gắn). Ở đầu trang header vẫn trong
         suốt như thiết kế — nền tối cố định sẽ che dòng đầu tiêu đề hero (đã thử, bị che). */
  html, body { overflow-x: clip !important; }
  #header-nmt .icon-menu { color: #fff !important; }
  #header-nmt .header-main { transition: background-color .2s; }
  #header-nmt.nmt-da-cuon .header-main { background: rgba(17, 17, 17, .94) !important; }

  /* ── 9. Hero trang con + trang bài viết: hết logo đè tiêu đề, hết cắt mép trái (sửa 17/10/2026) ──
     Đo ở khổ 375px. Header trong suốt cao 86px (logo nằm y 24–62) chồng lên đầu hero.
     (a) Trang bài viết + /tin-tuc/ (khuôn `.banner_01 > img + .title`, blog.css): hộp tiêu đề bị canh
         giữa tuyệt đối (top/left 50% + dịch −50%) và chỉ rộng 50% ⇒ dòng đầu chui vào sau logo. Cho
         tiêu đề CHẢY tự nhiên (đẩy xuống dưới logo bằng padding) và để ảnh làm nền phủ kín khung ⇒
         tiêu đề dài bao nhiêu khung cũng cao theo, không bao giờ tràn.
     (b) Trang con dựng bằng UX Builder (`.banner_page`, `.banner_page_1` — /gioi-thieu/, /coaching/,
         /lien-he/): mục 2 đặt `left:0` cho hộp chữ nhưng lớp `x50` của theme vẫn dịch nó −50% ⇒ nửa
         trái chữ rơi ra ngoài màn hình ("ễn Minh Tiền"). Bỏ dịch, cho hộp chữ chảy tự nhiên dưới logo,
         khung hero cao theo chữ (bỏ padding-top % nội tuyến theo ID — không có !important nên class
         + !important thắng).
     (c) Mục 4 đặt `img{height:auto}` làm ảnh nền hero (`.banner-bg img`) không phủ kín khung ⇒ lộ dải
         nền vàng bên dưới ảnh. Trả lại `height:100%` cho riêng ảnh nền hero — áp cho MỌI hero, kể cả trang
         chủ (trang chủ cũng lộ dải vàng: ảnh chỉ phủ 190px trên khung 593px). */
  .banner.banner_01 > img {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important; height: 100% !important; max-width: none !important;
    object-fit: cover;
  }
  .banner.banner_01 > .title {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: auto !important;
    padding: 76px 16px 32px !important;
    min-height: 56.25vw;            /* giữ tỉ lệ 16:9 của khung cũ; chữ dài thì khung tự cao thêm */
    display: flex; flex-direction: column; justify-content: center;
  }
  .banner[class*="banner_page"] { padding-top: 0 !important; height: auto !important; }
  .banner[class*="banner_page"] > .banner-inner { position: relative !important; }
  .banner[class*="banner_page"] .banner-layers > .text-box.banner-layer {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    padding: 76px 0 32px !important;
    min-height: 56.25vw;            /* giữ tỉ lệ 16:9 của khung cũ; chữ dài thì khung tự cao thêm */
    display: flex; flex-direction: column; justify-content: center;
  }
  .banner .banner-bg img.bg { height: 100% !important; }   /* mọi hero, kể cả trang chủ (sửa thêm 17/10 tối) */
}

@media (max-width: 480px) {
  #banner-1908411220 { padding-top: 158% !important; }   /* chữ 26px ⇒ khung cần cao hơn nữa */
  h1, .h1, .banner h1, .banner.banner_01 h1 { font-size: 26px !important; }
  h2, .h2, .sec_02 h2 { font-size: 20px !important; }
  h3, .h3, .tits h3 { font-size: 18px !important; letter-spacing: .4px !important; }
  p, li, .lead { font-size: 15.5px !important; }
  .container, .row { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── 10. MÁY TÍNH (≥ 850px) — ảnh đầu trang Tin tức + trang bài viết (sửa 18/10/2026, anh Tiền duyệt) ──
   NGOẠI LỆ có duyệt với nguyên tắc 1 ("chỉ màn hẹp"): đặt ở tệp này vì chỉ tệp này đổi số phiên bản theo giờ sửa
   (các tệp CSS khác mang ?ver=2.0 cố định + cache trình duyệt 7 ngày ⇒ sửa ở đó khách chờ tới 7 ngày mới thấy).
   Lỗi đo được: khuôn `.banner_01 > img + .title` (blog.css) để ảnh ở cỡ gốc 1280×720 ⇒ màn 1440/2000px ảnh nằm lệch
   trái, phần phải lộ nền vàng #ffb600 dưới lớp phủ tối thành dải nâu; khung cao 720px gần kín màn hình.
   Sửa: ảnh phủ kín bề ngang, khung cao 300–460px theo bề rộng màn, canh ảnh lên trên (12%) để giữ khuôn mặt. */
@media (min-width: 850px) {
  .banner.banner_01 > img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: clamp(300px, 26vw, 460px) !important;
    object-fit: cover;
    object-position: center 12%;
  }
}