/* ===========================================================================
   MNEE — khối Founder và khối Đội ngũ
   Ms.Ngọc Elite English · "Thấu hiểu để dẫn lối."

   Bảng màu lấy từ hệ nhận diện: Navy / Gold / Trắng / Burgundy.
   Burgundy KHÔNG có mặt ở đây — nó dành riêng cho cảnh báo và công nợ.

   Mọi cặp màu chữ/nền dưới đây đã đo và vượt chuẩn 4.5:1.
   =========================================================================== */

:root {
  --mnee-navy-950: #03122b;
  --mnee-navy-900: #051d42;
  --mnee-navy-800: #07285d;
  --mnee-navy-700: #0e3677;
  --mnee-navy-600: #1d4991;
  --mnee-navy-300: #90a7cb;
  --mnee-navy-200: #bcc8dc;
  --mnee-navy-50: #f4f6f8;
  --mnee-gold-500: #ecb551;
  --mnee-gold-700: #926719;

  --mnee-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mnee-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------------------------------------------------------------------------
   Khối hero — đường vàng dọc
   Thay cho vệt chéo đỏ–vàng cũ ở góc dưới trái.
   Vệt chéo đó phải được XOÁ khỏi HTML, không chỉ display:none.
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--mnee-gold-500);
}

/* ---------------------------------------------------------------------------
   Khối Founder — nền tối
   gold/nền 10.04:1 · dòng bằng chứng 11.05:1 · tên 18.66:1
   --------------------------------------------------------------------------- */

.mnee-founder {
  background: var(--mnee-navy-950);
  color: #ffffff;
  padding: 40px 44px;
  border-top: 1px solid var(--mnee-navy-700);
}

/* Nhãn giữ NGẮN, chỉ một cụm. Đã thử nhét cả vai trò vào đây
   ("NGƯỜI SÁNG LẬP · COACH & MENTOR") rồi dựng trong Chromium để đo: ở bề rộng
   360px — cỡ điện thoại Android phổ thông — nó tràn 2 dòng. Mà chữ hoa giãn
   rộng là NHÃN PHÂN LOẠI, còn "Coach & mentor" là MÔ TẢ VAI TRÒ; hai loại chữ
   khác nhau thì không nên nhồi một dòng. Vai trò tách xuống .mnee-founder__role. */
.mnee-founder__eyebrow {
  margin: 0 0 16px;
  font-family: var(--mnee-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--mnee-gold-500);
}

.mnee-founder__name {
  margin: 0 0 6px;
  font-family: var(--mnee-serif);
  font-size: clamp(36px, 9vw, 46px);
  font-weight: 500;
  line-height: 1;
}

/* Vai trò — nằm sát dưới tên như một dòng ghi chú tác giả. Để màu dịu
   (navy-200, 11.05:1) chứ không trắng đậm, để không tranh chỗ với câu châm ngôn
   ngay dưới: tên → là ai → tin điều gì, ba bậc rõ ràng. */
.mnee-founder__role {
  margin: 0 0 14px;
  font-family: var(--mnee-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mnee-navy-200);
}

.mnee-founder__motto {
  margin: 0;
  font-family: var(--mnee-sans);
  font-size: 13px;
  font-weight: 700;
}

.mnee-founder__rule {
  width: 40px;
  height: 2px;
  margin: 24px 0 16px;
  background: var(--mnee-gold-500);
}

.mnee-founder__proof {
  margin: 0;
  font-family: var(--mnee-sans);
  font-size: 13px;
  line-height: 1.75;
  color: var(--mnee-navy-200);
}

/* ---------------------------------------------------------------------------
   Khối Đội ngũ — nền sáng
   Sau hai khối navy liên tiếp, mắt cần một khoảng thở.

   CẢNH BÁO: gold-500 trên nền sáng chỉ đạt 1.72:1 — KHÔNG được làm chữ ở đây.
   Vàng chỉ làm vạch. Dấu tích dùng gold-700 (4.64:1).
   --------------------------------------------------------------------------- */

.mnee-team {
  background: var(--mnee-navy-50);
  color: var(--mnee-navy-900);
  padding: 56px 44px;
}

.mnee-team__eyebrow {
  margin: 0 0 20px;
  font-family: var(--mnee-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--mnee-navy-600);
}

.mnee-team__heading {
  margin: 0 0 20px;
  font-family: var(--mnee-serif);
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 600;
  line-height: 1.2;
}

.mnee-team__rule {
  width: 40px;
  height: 2px;
  margin-bottom: 20px;
  background: var(--mnee-gold-500);
}

.mnee-team__body {
  margin: 0 0 24px;
  font-family: var(--mnee-sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--mnee-navy-800);
}

.mnee-team__fact {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-family: var(--mnee-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.mnee-team__fact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--mnee-gold-700);
}

/* ---------------------------------------------------------------------------
   Chân dung founder trên nền tối

   Áo vest navy #161a31 trên navy-900 chỉ đạt 1.03:1 — gần như tàng hình.
   Không đặt ảnh đã tách nền thẳng lên nền navy phẳng.

   Cách giải: vầng sáng sau lưng, đúng kỹ thuật đèn viền mà thợ chụp đã dùng
   trong ảnh gốc. Tâm #3a588c, viền về navy-900. Đo tại mép vai: 1.61:1 — chưa
   phải chuẩn chữ (không áp dụng cho ảnh), nhưng đủ để vai không tan vào nền.

   Ảnh phải là PNG hoặc WebP ĐÃ TÁCH NỀN (nền trong suốt).
   --------------------------------------------------------------------------- */

.mnee-portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse 88% 88% at 50% 50%, #3a588c 0%, var(--mnee-navy-900) 100%);
}

.mnee-portrait img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;

  /* Khi khung bị ép chiều cao, ảnh THU NHỎ chứ không bị xén.
     Thiếu hai dòng này thì búi tóc bị cắt cụt ở mép trên — đã gặp thật
     khi dựng thử trong trình duyệt. */
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ---------------------------------------------------------------------------
   Khối Liên hệ — nền tối, đóng trang
   Dùng lại đúng nền navy-950 của khối Founder nên không sinh cặp màu mới nào
   chưa đo: gold/nền 10.04:1 · navy-200/nền 11.05:1 · trắng/nền 18.66:1.

   Số điện thoại CHÍNH LÀ nút gọi, không tách thành hai thứ — trên điện thoại
   người ta bấm thẳng vào số, thêm một nút "Gọi điện" bên cạnh là lặp.

   href dùng dạng quốc tế +84376535565 còn phần hiện ra dùng 0376 535 565:
   dạng quốc tế gọi được cả từ nước ngoài, dạng 0 quen mắt người Việt hơn.
   --------------------------------------------------------------------------- */

.mnee-lienhe {
  background: var(--mnee-navy-950);
  color: #ffffff;
  padding: 40px 44px;
  border-top: 1px solid var(--mnee-navy-700);
}

.mnee-lienhe__eyebrow {
  margin: 0 0 14px;
  font-family: var(--mnee-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--mnee-gold-500);
}

.mnee-lienhe__so {
  display: inline-block;
  font-family: var(--mnee-sans);
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;

  /* Vùng bấm tối thiểu 44px — ngón tay không nhắm được mục tiêu nhỏ hơn. */
  min-height: 44px;
  padding: 4px 0;
}

.mnee-lienhe__so:hover,
.mnee-lienhe__so:focus-visible {
  color: var(--mnee-gold-500);
}

.mnee-lienhe__rule {
  width: 40px;
  height: 2px;
  margin: 20px 0 16px;
  background: var(--mnee-gold-500);
}

.mnee-lienhe__zalo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mnee-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--mnee-gold-500);
  text-decoration: none;
}

.mnee-lienhe__zalo:hover,
.mnee-lienhe__zalo:focus-visible {
  text-decoration: underline;
}

.mnee-lienhe__zalo svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.mnee-lienhe__gio {
  margin: 14px 0 0;
  font-family: var(--mnee-sans);
  font-size: 13px;
  line-height: 1.75;
  color: var(--mnee-navy-200);
}

/* ---------------------------------------------------------------------------
   Khối Con số thật — nền trắng, đặt NGAY TRƯỚC khối Liên hệ

   Vì sao đặt ở đó: người đọc vừa biết trung tâm là ai (Founder) và làm việc
   thế nào (Đội ngũ); con số là thứ cuối cùng họ đọc trước khi thấy số điện
   thoại. Bằng chứng nên nằm sát nút gọi, không nằm lạc giữa trang.

   Vì sao nền trắng: khối Đội ngũ đã là navy-50, khối Liên hệ là navy-950.
   Trắng nằm giữa cho ra tối → sáng → sáng hơn → tối, không có hai khối cùng
   nền dính nhau. Không phải đổi nền của khối nào đang có.

   Tương phản — đã đo, không phỏng đoán:
     navy-900/trắng 16.66:1 · navy-800/trắng 14.28:1 · navy-600/trắng 8.70:1
     gold-700/trắng  5.03:1
   gold-500 trên trắng chỉ 1.86:1 nên ở đây nó CHỈ làm vạch, đúng luật thương
   hiệu. navy-300 trên trắng 2.45:1 — cũng không được làm chữ, nên dòng ghi
   nguồn dùng navy-600 chứ không phải màu nhạt cho "đỡ chiếm chỗ".
   --------------------------------------------------------------------------- */

.mnee-soThat {
  background: #ffffff;
  color: var(--mnee-navy-900);
  padding: 56px 44px;
}

.mnee-soThat__eyebrow {
  margin: 0 0 20px;
  font-family: var(--mnee-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--mnee-navy-600);
}

.mnee-soThat__rule {
  width: 40px;
  height: 2px;
  margin-bottom: 28px;
  background: var(--mnee-gold-500);
}

/* Một cột, hoặc ba cột — KHÔNG BAO GIỜ hai.

   Lúc đầu viết `repeat(auto-fit, minmax(200px, 1fr))` cho gọn, khỏi cần media
   query. Dựng trong Chromium để đo thì thấy ở bề rộng khối 432px nó ra ĐÚNG HAI
   cột, nên con số thứ ba rơi xuống hàng dưới nằm một mình cạnh một khoảng trống
   bằng nửa khối. Ba món mà xếp 2 + 1 thì người đọc tưởng món thứ ba thuộc nhóm
   khác.

   Có ba món nên chỉ 1 hoặc 3 là cân. Ba cột cần 3 × 200px + 2 × 28px khe
   = 656px chỗ cho nội dung, cộng 88px lề hai bên là 744px — nên ngưỡng 760px. */
.mnee-soThat__luoi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 28px;
  margin: 0;
}

@media (min-width: 760px) {
  .mnee-soThat__luoi {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mnee-soThat__o {
  margin: 0;
}

/* tabular-nums: ba con số nằm cạnh nhau thì chữ số phải cùng bề rộng, không
   thì mắt thấy chúng lệch hàng. */
.mnee-soThat__so {
  display: block;
  font-family: var(--mnee-serif);
  font-size: clamp(38px, 10vw, 52px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mnee-navy-900);
}

/* margin: 10px 0 0 — KHÔNG phải margin-top. Trình duyệt đặt sẵn
   margin-inline-start: 40px cho <dd>; chỉ khai margin-top thì cái thụt 40px đó
   còn nguyên và ba cái nhãn bị đẩy lệch khỏi con số ở trên. */
.mnee-soThat__nhan {
  display: block;
  margin: 10px 0 0;
  font-family: var(--mnee-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mnee-navy-800);
}

/* Dòng nguồn — bắt buộc phải có. Con số không ghi rõ "đếm từ đâu, tính đến
   ngày nào" thì sáu tháng sau không ai biết nó còn đúng không, và người đọc
   cũng không có cách nào kiểm. Ngày ở đây phải sửa mỗi lần cập nhật số. */
.mnee-soThat__nguon {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--mnee-navy-200);
  font-family: var(--mnee-sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--mnee-navy-600);
}