/* ===========================================================================
   webpublic-mobile-fix.css — chốt chặn cuối cho Web Public mobile (<=767px)
   Vì sao file riêng + !important:
   - Nhiều trang khai báo <style> inline trong template (kv-redesign, sl-*, bv-*)
     nằm sau các file CSS nên cùng specificity thì rule trang thắng.
   Mục tiêu: tap target >= 44px, chữ >= 12px.
   File này phải load CUỐI trong templates/webpublic/_public_assets.html.
   =========================================================================== */

@media (max-width: 767px) {
  /* ---------- 1. Chữ tối thiểu 12px ---------- */

  /* Thanh điều hướng đáy (app nav) — mobile-nav.css đặt .62rem (~9.9px) */
  .kv-app-nav__item,
  .kv-app-nav__call,
  .kv-app-nav__item span,
  .kv-app-nav__call-label,
  .kv-app-nav__label {
    font-size: 12px !important;
  }

  /* Kicker / eyebrow / nhãn nhỏ dùng chung */
  .kvp-kicker,
  .kvx-kicker,
  .feat-head__tag,
  .kh-filter-label,
  .kh-filter-hint,
  .bv-fcard__badge,
  .bv-fcard__cat,
  .bv-card__cat,
  .kvx-parent-age-card__range,
  .kvx-parent-age-card__badge,
  .sl-fact span,
  .brand-sub {
    font-size: 12px !important;
  }

  /* Footer — _footer.html nạp webpublic-footer.css NGAY TRONG BODY (sau file này),
     nên phải tăng đặc hiệu bằng html body ... mới đè được. */
  html body .kv-footer__social-label,
  html body .hp-footer__social-label,
  html body .kv-footer__col h3,
  html body .hp-footer__col h3,
  html body .kv-footer__contact-row b,
  html body .kv-footer__contact-row span,
  html body .kv-footer small,
  html body .hp-footer small {
    font-size: 12px !important;
  }

  /* ---------- 2. Tap target tối thiểu 44px ---------- */

  /* Link/nút dạng hàng trong nội dung */
  .kvx-course__link,
  .kh-card__link,
  .kvp-card__link,
  .kvp-info-card a,
  .kvx-parent-guide__hint a,
  .sl-links a,
  .sl-crumb a,
  .bv-pager a,
  .kv-footer__col ul li a,
  .kv-footer__fanpages li a,
  .kv-footer__social a,
  .back-home,
  .row-line a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Footer link/icon — tăng đặc hiệu để thắng webpublic-footer.css nạp trong body */
  html body .kv-footer__col ul li a,
  html body .hp-footer__col ul li a,
  html body .kv-footer__fanpages li a,
  html body .kv-footer__contact-row {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body .kv-footer__social a,
  html body .hp-footer__social a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Nút tròn "Xem chi tiết" ở slider khóa học trang chủ */
  .kvx-course-slider__slide .kvx-course__link {
    min-width: 44px !important;
    justify-content: center !important;
  }

  /* Phân trang bài viết — style inline trong bai_viet_page.html nên cần html body */
  html body .bv-pager a,
  html body .bv-pager span {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Kicker/nhãn nhỏ khai báo inline ở từng trang (bv-*, sl-*, kvp-*) */
  html body .kvp-kicker,
  html body .bv-fcard__badge,
  html body .bv-fcard__cat,
  html body .bv-card__cat,
  html body .sl-fact span,
  html body .kh-filter-label,
  html body .kh-filter-hint,
  html body .feat-head__tag,
  html body .kvx-kicker,
  html body .kvx-parent-age-card__range,
  html body .kvx-parent-age-card__badge {
    font-size: 12px !important;
  }

  /* Link inline trong card/hero khai báo inline ở từng trang */
  html body .kvp-card__link,
  html body .kvp-info-card a,
  html body .kvx-parent-guide__hint a,
  html body .sl-links a,
  html body .sl-crumb a,
  html body .kvx-course__link,
  html body .kh-card__link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Hamburger mở menu */
  #navToggle,
  .kv-nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  /* Tab lọc khóa học + nút điều hướng slider */
  html body .kh-tab,
  html body .kvx-course-slider__cta-link,
  html body .kvx-course-slider__nav button,
  html body .feat-nav button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .kvx-course-slider__nav button,
  html body .feat-nav button,
  html body #khPrev,
  html body #khNext {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Dot chỉ vị trí slider: nhỏ về thị giác nhưng vùng chạm phải đủ 44px
     -> dùng ::after phủ rộng, không phóng to chấm. */
  /* Cách cũ (::after 44x44 phủ ra ngoài) làm vùng chạm các chấm CHỒNG LÊN NHAU
     vì gap chỉ ~7px -> bấm chấm 2 lại trúng chấm 1 (đo elementFromPoint xác nhận).
     Cách đúng: nới chính nút bằng padding (44px cao, ~28px rộng, không chồng),
     giữ chấm nhỏ về thị giác bằng background-clip: content-box. */
  html body .kvx-course-slider__dots,
  html body .kvx-hero-slider__dots,
  html body .kvx-hero-intro__dots,
  html body .kv-book__dots {
    overflow: visible !important;
    min-height: 44px !important;
    align-items: center !important;
    gap: 0 !important;
  }
  html body .kvx-course-slider__dots button,
  html body .kvx-hero-slider__dots button,
  html body .kvx-hero-intro__dots button,
  html body .kv-book__dots button {
    position: relative;
    box-sizing: content-box !important;
    height: 9px !important;
    min-height: 0 !important;
    padding: 17.5px 9px !important;
    background-clip: content-box !important;
    overflow: visible !important;
    border-radius: 999px !important;
  }
  html body .kvx-course-slider__dots button::after,
  html body .kvx-hero-slider__dots button::after,
  html body .kvx-hero-intro__dots button::after,
  html body .kv-book__dots button::after {
    content: none !important;
  }

  /* Đo lại 390x844: điều hướng nhanh trang Lộ trình cao 39px */
  html body .lt-jump__inner a,
  html body .lt-toolbar-card a,
  html body .kvp-jump a,
  html body .kvp-anchor-nav a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}