/* =====================================================================
   MNEE — LỚP HOÀN THIỆN HIỂN THỊ
   Tài liệu: MNEE-WEB-008 · Phiên bản 1.0 · 16/09/2026
   Mục đích: sửa 4 lỗi hiển thị đã đo được trên bản đang chạy.
     1. Dòng tiêu đề quá sát nhau → dấu tiếng Việt chồng lên nhau
     2. Chữ nhỏ tới 7–10px → không đọc được trên điện thoại
     3. Vùng bấm dưới 40px → khó bấm bằng ngón tay
     4. Ảnh không khai báo tỉ lệ → trang giật khi ảnh tải xong
   Nguyên tắc: chỉ nhắm đúng những vùng đã đo, không sửa toàn cục.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. NHỊP DÒNG CHO TIÊU ĐỀ
   Tiếng Việt có dấu xếp tầng (ế, ộ, ữ). Khi line-height dưới 1.1 và
   tiêu đề xuống dòng, dấu của dòng dưới chạm chân chữ dòng trên.
   ------------------------------------------------------------------ */
h1, .hero-title, .page-hero-title {
  line-height: 1.12 !important;
  text-wrap: balance;
}
h2, .section-title, .page-section-title {
  line-height: 1.18 !important;
  text-wrap: balance;
}
h3, h4, h5, h6 {
  line-height: 1.26 !important;
}
/* Không nới lỏng trên màn hình lớn: dấu tiếng Việt to lên cùng cỡ chữ,
   nên tỉ lệ dòng mới là yếu tố quyết định, không phải cỡ chữ. */
/* Đoạn văn dài: nới nhẹ cho dễ đọc, không đổi cỡ chữ */
p, li, blockquote { text-wrap: pretty; }

/* ------------------------------------------------------------------
   2. SÀN CỠ CHỮ — 203 vùng đã đo và đã kiểm an toàn
   Bản Manus dùng rất nhiều nhãn nhỏ 5–11px ("MNEE / GUIDED PATHWAY",
   "TRƯỚC ĐÓ", "Kids · Teens · Adults"…). Ở cỡ đó dấu tiếng Việt không
   còn đủ điểm ảnh để phân biệt trên điện thoại.
   Sàn: dưới 10px → 11.5px · từ 10px → 12px. Vẫn nhỏ hơn chữ thân bài
   (14–16px) nên trật tự thị giác không đổi.
   Danh sách này do máy dò trên 16 trang, ở 390px và 1366px, và đã loại
   mọi vùng có nguy cơ thu nhỏ chữ đang to.
   ------------------------------------------------------------------ */

/* san 11.5px · 105 vung */
a.resource-worksheet-download,
article.pricing-program-card small,
article.pricing-program-card small b,
aside.community-calendar-context div span,
aside.founder-letter-aside div span,
aside.program-margin-note span,
aside.resource-next-note span,
aside.resources-library-note div span,
aside.resources-reading-progress div span,
button.flex.flex-1.py-4.pricing-faq-trigger span,
button.resource-print-action,
button.resource-read-toggle,
button.resources-reminder-permission,
details.resources-advanced-filters summary small,
details.resources-advanced-filters summary span,
div.community-bulletin div span,
div.community-bulletin-ledger span,
div.community-events-empty-top span,
div.community-journey-context div span,
div.community-prologue-route strong,
div.community-waypoint strong,
div.container.home-chapter-rail strong,
div.container.placement-dossier-rail em,
div.container.placement-dossier-rail strong,
div.decision-gateway-topline p,
div.evidence-archive-rail span,
div.evidence-archive-rail strong,
div.form-route,
div.hero-archive-mark span,
div.hero-tags span,
div.home-events-calendar-meta span,
div.home-events-plan ol li small,
div.home-events-plan ol li strong,
div.home-events-plan p,
div.home-events-route strong,
div.ielts-filter-bar div button,
div.ielts-filter-bar span,
div.portrait-signature small,
div.pricing-form-waypoint span,
div.pricing-program-rail span,
div.pricing-share-actions a,
div.pricing-share-actions button,
div.pricing-video-note span,
div.program-decision-grid article span,
div.program-decision-waypoint b,
div.program-decision-waypoint em,
div.program-waypoint b,
div.program-waypoint em,
div.resource-opened-folio p,
div.resource-opened-folio span,
div.resource-practice-heading span,
div.resource-reading-aside span,
div.resources-advanced-filter-foot button,
div.resources-advanced-filter-foot p,
div.resources-advanced-filter-row div button,
div.resources-advanced-filter-row span,
div.resources-audio-duration-filter div span,
div.resources-bookmark-filter div span,
div.resources-bookmark-shelf-actions button,
div.resources-chapter-heading span,
div.resources-difficulty-bar div button,
div.resources-difficulty-bar span,
div.resources-duration-options button,
div.resources-goal-bar div button,
div.resources-goal-bar span,
div.resources-library-signature span,
div.resources-playlist-heading span small,
div.resources-playlist-now span,
div.resources-reminder-actions div button,
div.resources-reminder-days button,
div.resources-reminder-time button,
div.resources-reminder-time label,
div.resources-route-context div span,
div.resources-search-control label,
div.resources-search-control p,
div.resources-study-reminder-heading span,
div.resources-study-route b,
div.resources-taxonomy-heading span small,
div.resources-weekly-goal-heading span,
div.resources-weekly-pace fieldset div button,
div.resources-weekly-pace fieldset legend,
div.resources-weekly-summary div button,
figcaption.student-story-caption,
figure.community-documentary-cue figcaption,
figure.founder-portrait.founder-portrait--editorial figcaption,
figure.pricing-evidence-card figcaption small,
figure.pricing-evidence-card figcaption span,
figure.pricing-evidence-card.pricing-evidence-card--note figcaption small,
figure.pricing-evidence-card.pricing-evidence-card--note figcaption span,
figure.result-evidence-card figcaption span,
header.resources-chapter-heading span,
label.field span small,
ol.community-plan-list li small,
p.form-privacy,
p.form-privacy a,
p.resources-duration-result,
section.resources-study-reminder fieldset legend,
section.resources-weekly-goal fieldset legend,
small.brand-route-caption,
span.brand-web-wordmark em,
span.evidence-permission,
span.home-events-plan-note,
span.pricing-floating-tooltip,
span.resource-note-meta em,
span.resource-note-meta small {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

/* san 12px · 98 vung */
a.btn.btn-gold.btn-header,
a.footer-contact-link,
a.light-arrow,
a.pricing-floating-cta span,
article.resource-note-card button p,
aside.community-calendar-context a,
aside.community-calendar-context div p,
aside.founder-letter-aside div small,
aside.program-margin-note p,
aside.resources-bookmark-shelf div span,
aside.resources-reading-progress button,
aside.resources-reading-progress div strong small,
aside.resources-reading-progress p,
button.resource-bookmark-toggle,
button.resources-playlist-play,
details.resources-advanced-filters summary strong,
div.assessed-list span,
div.cefr-ladder span,
div.community-bulletin-ledger p,
div.community-card-topline p,
div.community-events-empty-foot a,
div.community-events-empty-foot small,
div.community-journey-context div p,
div.community-prologue-route small,
div.community-source-line strong,
div.community-waypoint small,
div.contact-disclosure div small,
div.container.breadcrumb a,
div.container.breadcrumb span,
div.container.home-continue-folio a,
div.container.home-continue-folio div p,
div.container.split-intro aside span,
div.cycle-item div p,
div.evidence-archive-rail p,
div.footer-bottom.container div a,
div.footer-bottom.container span,
div.footer-brand p,
div.footer-brand small,
div.footer-grid.container div a,
div.footer-grid.container div h2,
div.founder-closing-quote small,
div.founder-copy a,
div.founder-cycle div p,
div.hero-image-note p,
div.home-events-copy a,
div.home-events-note span,
div.home-events-route small,
div.pathway-detail-list div p,
div.placement-clarity-grid article p,
div.placement-journey div span,
div.placement-journey small,
div.pricing-evidence-share div span,
div.program-decision-grid article a,
div.resource-practice-heading strong,
div.resources-audio-duration-filter div p,
div.resources-bookmark-filter button,
div.resources-bookmark-filter div small,
div.resources-playlist-controls button,
div.resources-playlist-heading span,
div.resources-playlist-tabs button small,
div.resources-route-context div p,
div.resources-study-reminder-heading p,
div.resources-taxonomy-heading p,
div.resources-taxonomy-heading span,
div.resources-use-steps article p,
div.resources-weekly-choice-grid button small,
div.resources-weekly-summary p,
div.teacher-placeholder-grid article p,
div.teacher-placeholder-grid article small,
div.tracking-points p small,
figure.result-evidence-card figcaption p,
form.resources-subscribe-form label,
form.resources-subscribe-form label b,
label.consent span,
label.field span,
label.field span b,
label.field.field-wide span,
label.field.field-wide span b,
ol.community-plan-list li strong,
ol.resources-playlist-queue li button span small,
p.founder-letter-signature span,
p.program-label,
p.resources-fixture-disclosure,
p.resources-fixture-disclosure strong,
p.resources-reminder-status,
p.resources-subscribe-status,
p.resources-subscribe-status a,
p.resources-weekly-status,
p.student-carousel-disclosure,
p.student-carousel-disclosure strong,
p.team-note,
p.verification-note,
span.cefr-chip,
span.eyebrow,
span.eyebrow.light,
span.page-hero-detail,
span.program-arrow,
span.resource-note-action {
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/* ------------------------------------------------------------------
   2b. TRẬT TỰ CHỮ TRONG KHỐI THƯƠNG HIỆU Ở ĐẦU TRANG
   Sau khi nâng sàn, ba dòng của khối thương hiệu bằng nhau về cỡ chữ
   nên mất thứ bậc. Giữ châm ngôn là dòng thứ hai, dòng "MNEE / GUIDED
   PATHWAY" là dòng thứ ba. Dòng này viết hoa không dấu nên 11px vẫn đọc
   được, và thu bớt giãn chữ để không chiếm chỗ của châm ngôn.
   ------------------------------------------------------------------ */
span.brand-web-wordmark em {
  font-size: 13px !important;
  line-height: 1.25 !important;
}
a.brand-lockup small.brand-route-caption,
span.brand-web-wordmark small.brand-route-caption {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.09em !important;
  opacity: .7;
}
span.brand-web-wordmark strong { line-height: 1.2 !important; }
/* Khối thương hiệu cao lên thì thanh đầu trang phải nới theo, không cắt chữ */
.site-header, .header-inner {
  height: auto !important;
  min-height: 72px;
}

/* ------------------------------------------------------------------
   2c. Ô NHẬP LIỆU — 16px TRÊN ĐIỆN THOẠI
   Safari trên iPhone tự phóng to cả trang khi người dùng bấm vào ô nhập
   có cỡ chữ dưới 16px. Trên trang đăng ký, cú phóng đó làm trang nhảy
   và phụ huynh dễ bỏ giữa biểu mẫu. Đặt 16px là hết hiện tượng này.
   ------------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  button[type="submit"] {
    min-height: 46px;
  }
  textarea { min-height: 96px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}
/* Ô bẫy thư rác: không được nhìn thấy, không được chiếm chỗ */
.form-honeypot, .form-honeypot input,
input.resources-honeypot {
  font-size: 0 !important;
  min-height: 0 !important;
}

/* ------------------------------------------------------------------
   3. VÙNG BẤM ≥ 44px TRÊN ĐIỆN THOẠI
   Cách làm: mnee-polish.js gắn lớp .mnee-tap và nới vùng bấm bằng
   ::after — kích thước hiển thị KHÔNG đổi nên bố cục giữ nguyên.
   Ở đây chỉ xử lý những nút mà ::after đã dùng cho việc khác.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Nút lọc kỹ năng IELTS: đã dùng ::after làm gạch chân trạng thái,
     nên lưới an toàn bỏ qua. Nới bằng chiều cao tối thiểu. */
  .ielts-filter-bar button,
  .resources-archive-taxonomy button {
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ------------------------------------------------------------------
   4. GIỮ CHỖ CHO ẢNH (chống giật bố cục khi ảnh tải xong)
   Tỉ lệ lấy từ kích thước thật của từng tệp.
   ------------------------------------------------------------------ */
img[src*="msngoc-founder-portrait"]        { aspect-ratio: 784 / 1312; }
img[src*="mnee-student-message"]           { aspect-ratio: 1 / 1; }
img[src*="mnee-learning-cycle"]            { aspect-ratio: 4 / 3; }
img[src*="mnee-students-certificate"]      { aspect-ratio: 5 / 4; }
img[src*="mnee-pathway-compass"]           { aspect-ratio: 3 / 2; }
img[src*="mnee-hero-study-atmosphere"]     { aspect-ratio: 16 / 9; }
img[src*="mnee-open-graph-cover"]          { aspect-ratio: 16 / 9; }
img[src*="mnee-og-"]                       { aspect-ratio: 16 / 9; }
img[src*="msngoc-logo-mark"]               { aspect-ratio: 108 / 92; }
img[src*="msngoc-elite-english-favicon-mark"] { aspect-ratio: 1 / 1; }
/* Trang cá nhân */
img[src*="ms-ngoc-portrait"]               { aspect-ratio: 1152 / 2048; }
img[src*="ms-ngoc-brand-mark"]             { aspect-ratio: 1 / 1; }

/* Ảnh không khai báo kích thước: vẫn co giãn đúng trong khung.
   KHÔNG đặt height:auto ở đây — sẽ đè chiều cao cố định mà thiết kế gốc
   đặt cho khung ảnh (vd. khung ảnh Founder 430px). aspect-ratio tự giữ
   chỗ khi chiều cao để mặc định. (Sửa 30/09/2026) */
img { max-width: 100%; }

/* ------------------------------------------------------------------
   5. HAI CHI TIẾT NHỎ ĐI KÈM
   ------------------------------------------------------------------ */
/* Không để chữ bị cắt ngang khi màn hình rất hẹp */
@media (max-width: 400px) {
  h1, .hero-title, .page-hero-title { overflow-wrap: break-word; }
}
/* Viền khi dùng bàn phím: cần thấy rõ để truy cập được */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #c8a55b;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------
   6. ẢNH FOUNDER — CHÂN DUNG THẬT (thay ảnh poster, 30/09/2026)
   Bản Manus phóng ảnh 2.18 lần và neo góc phải, vì ảnh poster cũ có
   người ở mép phải và chữ ở mép trái. Ảnh chân dung mới đặt người ở
   giữa: bỏ phóng to, căn giữa, chừa khoảng trống phía trên đầu.
   Chỉ áp cho ảnh mới (founder-portrait-v2) nên không ảnh hưởng ảnh khác.
   ------------------------------------------------------------------ */
.founder-photo[src*="founder-portrait-v2"],
.founder-portrait--editorial .founder-photo[src*="founder-portrait-v2"] {
  transform: none !important;
  object-fit: cover;
  object-position: 50% 16% !important;
  filter: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .founder-portrait--editorial:hover .founder-photo[src*="founder-portrait-v2"] {
    transform: scale(1.03) !important;
  }
}
.founder-letter-aside img[src*="founder-portrait-v2"] {
  object-position: 50% 14%;
  filter: none;
}

/* ------------------------------------------------------------------
   7. ẢNH FOUNDER SẠCH — KHÔNG CÒN CHỮ ĐÈ LÊN ẢNH (30/09/2026)
   Founder duyệt: chữ nào đã có bằng chữ thật trên trang thì bỏ khỏi ảnh.
   Ba lớp chữ đè lên ảnh ở trang chủ đều trùng hoặc chỉ là nhãn trang trí:
     · ô "MNEE / FOUNDER"  → đã có "Ms. Nguyễn Thanh Mỹ Ngọc — Founder" cạnh ảnh
     · "FOUNDER PORTRAIT / ARCHIVE NOTE 01" → nhãn trang trí
     · "FOUNDER NOTE / 01" (::before)       → nhãn trang trí
   Ảnh vẫn có alt đầy đủ cho trình đọc màn hình và Google.
   Chỉ áp cho .founder-portrait (trang chủ). Trang cá nhân không dùng lớp này.
   ------------------------------------------------------------------ */
.founder-portrait .portrait-signature,
.founder-portrait > figcaption {
  display: none !important;
}
.founder-portrait::before {
  content: none !important;
  display: none !important;
}