/* ===========================================================================
   Ms.Ngọc Elite English — lớp trang
   Đi kèm mnee-blocks.css (khối Founder, Đội ngũ, Con số thật, Liên hệ).

   Tệp này chỉ chứa những gì mnee-blocks.css chưa có: nền trang, thanh đầu,
   khối hero, khối Chương trình, khối Học phí, chân trang.

   MỌI cặp màu chữ/nền ở đây đều lấy từ đúng bảng đã đo trong mnee-blocks.css.
   Không sinh cặp mới. Nhắc lại luật thương hiệu quan trọng nhất:
   gold-500 (#ecb551) trên nền sáng chỉ 1.86:1 — CHỈ làm vạch, KHÔNG làm chữ.
   Nền sáng muốn chữ vàng thì dùng gold-700 (#926719, 5.03:1).
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--mnee-navy-900);
  font-family: var(--mnee-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--mnee-gold-500);
  outline-offset: 3px;
}

/* Bỏ qua điều hướng — chỉ hiện khi bấm Tab. Người dùng bàn phím và trình đọc
   màn hình không phải đi qua cả thanh menu mỗi lần vào trang. */
.bo-qua {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--mnee-navy-950);
  color: #ffffff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.bo-qua:focus {
  left: 0;
}

/* Mọi khối dùng chung một lề. 20px ở điện thoại, rộng hơn ở máy tính. */
.trong {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

@media (min-width: 760px) {
  .trong {
    padding-inline: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Thanh đầu trang
   --------------------------------------------------------------------------- */

.dinh {
  background: var(--mnee-navy-950);
  border-bottom: 1px solid var(--mnee-navy-800);
}

.dinh .trong {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}

.dinh__logo {
  display: block;
  width: 132px;
  height: auto;
}

.dinh__goi {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--mnee-gold-500);
  color: var(--mnee-navy-950); /* 10.04:1 — đã đo */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dinh__goi:hover,
.dinh__goi:focus-visible {
  filter: brightness(1.08);
}

.dinh__goi svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Hero — chân dung bên trái, lời dẫn bên phải

   Chân dung KHÔNG đặt lên nền navy phẳng: áo vest navy trên navy-900 chỉ đạt
   1.03:1, vai tan vào nền. Vầng sáng radial của .mnee-portrait giải chuyện đó.
   --------------------------------------------------------------------------- */

.hero {
  background: var(--mnee-navy-950);
  color: #ffffff;
}

.hero .trong {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-inline: 0;
}

.hero__anh {
  min-height: 420px;
}

.hero__chu {
  padding: 40px 20px 48px;
}

/* Từ 760px các khối khác thụt 44px (xem .trong). Hero phải thụt bằng, nếu không
   chữ hero lệch trái 24px so với mọi tiêu đề bên dưới — đo trong Chromium mới
   thấy, nhìn bằng mắt thì chỉ thấy "hơi lạ". */
@media (min-width: 760px) {
  .hero__chu {
    padding-inline: 44px;
  }
}

.hero__nhan {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--mnee-gold-500); /* 10.04:1 trên navy-950 */
}

.hero h1 {
  margin: 0 0 20px;
  font-family: var(--mnee-serif);
  font-size: clamp(32px, 8.5vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.hero__dan {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--mnee-navy-200); /* 11.05:1 */
  max-width: 46ch;
}

.hero__vach {
  width: 44px;
  height: 2px;
  margin: 28px 0 22px;
  background: var(--mnee-gold-500);
}

.hero__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nut-chinh,
.nut-phu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.nut-chinh {
  background: var(--mnee-gold-500);
  color: var(--mnee-navy-950);
}

.nut-phu {
  border: 1px solid var(--mnee-navy-600);
  color: #ffffff; /* 18.66:1 trên navy-950 */
}

.nut-chinh:hover,
.nut-chinh:focus-visible {
  filter: brightness(1.08);
}

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

.nut-chinh svg,
.nut-phu svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (min-width: 900px) {
  .hero .trong {
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
  }
  .hero__anh {
    min-height: 100%;
  }
  .hero__chu {
    padding: 72px 44px 72px 40px;
    align-self: center;
  }
}

/* ---------------------------------------------------------------------------
   Khối Chương trình — nền trắng
   navy-900/trắng 16.66:1 · navy-800/trắng 14.28:1 · gold-700/trắng 5.03:1
   --------------------------------------------------------------------------- */

.ct {
  background: #ffffff;
  padding-block: 56px;
}

.ct__nhan,
.hp__nhan {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--mnee-navy-600); /* 8.70:1 trên trắng */
}

.ct h2,
.hp h2 {
  margin: 0 0 18px;
  font-family: var(--mnee-serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  text-wrap: balance;
  max-width: 22ch;
}

.ct__vach,
.hp__vach {
  width: 40px;
  height: 2px;
  margin-bottom: 26px;
  background: var(--mnee-gold-500);
}

.ct__dan {
  margin: 0 0 34px;
  max-width: 62ch;
  color: var(--mnee-navy-800); /* 14.28:1 */
}

.ct__luoi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 780px) {
  .ct__luoi {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.ct__o {
  border-top: 2px solid var(--mnee-gold-500);
  padding-top: 18px;
  min-width: 0;
}

.ct__o h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.ct__o p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mnee-navy-800);
}

.ct__o p:last-child {
  margin-bottom: 0;
}

.ct__lam-duoc {
  font-size: 14px !important;
  color: var(--mnee-navy-600) !important;
  border-left: 2px solid var(--mnee-navy-200);
  padding-left: 12px;
}

.ct__lam-duoc b {
  color: var(--mnee-navy-800);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Khối Giáo trình — nền navy-50

   Dải nền của cả trang, tính từ trên xuống: tối (hero) · trắng (Chương trình) ·
   XÁM (Giáo trình) · tối (Founder) · trắng (Con số thật) · xám (Đội ngũ) ·
   trắng (Học phí) · tối (Liên hệ). Không có hai khối cùng nền dính nhau.

   Cặp màu dùng ở đây đều đã nằm trong bảng đo của mnee-blocks.css:
   navy-900/navy-50 · navy-800/navy-50 · navy-600/navy-50.
   --------------------------------------------------------------------------- */

.gt {
  background: var(--mnee-navy-50);
  padding-block: 56px;
}

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

.gt h2 {
  margin: 0 0 18px;
  font-family: var(--mnee-serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  text-wrap: balance;
  max-width: 24ch;
}

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

.gt__dan {
  margin: 0 0 34px;
  max-width: 62ch;
  color: var(--mnee-navy-800);
}

.gt__luoi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 820px) {
  .gt__luoi {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.gt__o {
  min-width: 0;
}

/* Đánh số 01/02/03 ở đây là ĐÚNG chỗ, không phải trang trí: ba mục là ba lớp
   của cùng một cách dạy, đọc theo thứ tự mới ra nghĩa — soạn bài từ phim, quay
   thành video riêng, rồi lấy sách neo chuẩn. */
.gt__ky {
  margin: 0 0 10px;
  font-family: var(--mnee-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mnee-gold-700); /* 4.64:1 trên nền sáng — gold-500 chỉ 1.72:1 */
  border-top: 2px solid var(--mnee-gold-500);
  padding-top: 14px;
}

.gt__o h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

.gt__o p:not(.gt__ky) {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mnee-navy-800);
}

.gt__o p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Khối Học phí — nền TRẮNG

   Lúc đầu để navy-50 cho đỡ đơn điệu. Chụp cả trang ra xem thì khối Đội ngũ
   ngay trên cũng navy-50, hai khối dính thành một mảng xám dài chạy gần một
   phần ba trang, người đọc không thấy đây là hai phần khác nhau. Trả về trắng
   thì cả trang thành dải xen kẽ: trắng, tối, trắng, xám, trắng, tối.

   navy-900/trắng 16.66:1 · navy-800/trắng 14.28:1 · gold-700/trắng 5.03:1
   --------------------------------------------------------------------------- */

.hp {
  background: #ffffff;
  padding-block: 56px;
}

.hp__dan {
  margin: 0 0 26px;
  max-width: 62ch;
  color: var(--mnee-navy-800);
}

.hp__ds {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 62ch;
}

.hp__ds li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mnee-navy-800);
}

.hp__ds svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 5px;
  color: var(--mnee-gold-700); /* 4.64:1 trên nền sáng — vạch vàng thì không đủ */
}

/* ---------------------------------------------------------------------------
   Chân trang
   --------------------------------------------------------------------------- */

.chan {
  background: var(--mnee-navy-950);
  color: var(--mnee-navy-200);
  padding-block: 32px;
  font-size: 13px;
  line-height: 1.8;
  border-top: 1px solid var(--mnee-navy-800);
}

.chan p {
  margin: 0;
}

.chan p + p {
  margin-top: 6px;
}

.chan b {
  color: #ffffff;
  font-weight: 600;
}

/* Bốn khối dán chạy HẾT chiều ngang, nhưng chữ bên trong căn thẳng hàng với
   tiêu đề các khối khác.

   Bản đầu em bọc chúng trong .trong cho nhanh rồi ép padding-inline: 0. Dựng ra
   xem thì hỏng hai chuyện cùng lúc: nền tối co thành một cái hộp có hai mảng
   trắng hai bên, và chữ dính sát mép hộp vì vừa bị lấy mất lề. Nền phải tràn,
   chữ phải có lề — max() làm được cả hai bằng một dòng.

   max(44px, (bề rộng - 1120px) / 2 + 44px): cửa sổ hẹp thì ăn 44px, rộng thì tự
   giãn để chữ thẳng cột với mọi tiêu đề bên trên. */
.mnee-founder,
.mnee-team,
.mnee-soThat,
.mnee-lienhe {
  padding-inline: 20px;
}

@media (min-width: 760px) {
  .mnee-founder,
  .mnee-team,
  .mnee-soThat,
  .mnee-lienhe {
    padding-inline: max(44px, calc((100% - 1120px) / 2 + 44px));
  }
}

.mnee-founder,
.mnee-lienhe {
  border-top: 0;
}