/*
 * Sửa cách xuống dòng của tiêu đề.
 *
 * Vấn đề gốc: Manus đặt <br> cứng canh theo desktop. Trên mobile, <br> đó cộng
 * với wrap tự nhiên tạo ra dòng lẻ chỉ 1 chữ ("nay,", "mai.", "đầu.") — lỗi orphan.
 *
 * File này được middleware chèn vào <head> nên KHÔNG mất khi export lại Manus.
 * Trình duyệt cũ bỏ qua các thuộc tính này, không hỏng gì.
 */

/*
 * 1) Tiêu đề CÓ <br>: chỉ dùng 'pretty'.
 *    'pretty' chỉ kéo chữ xuống để dòng cuối không còn 1 chữ trơ trọi,
 *    KHÔNG chia lại toàn bộ khối nên các <br> đánh dấu ranh giới câu vẫn nguyên.
 *
 *    ĐÃ ĐO VÀ BỎ 'balance' cho nhóm này: Chromium gộp cả khối khi cân dòng,
 *    làm "Lộ trình rõ ràng. / Bứt phá HSK." (2 dòng đúng 2 câu) vỡ thành
 *    "Lộ trình rõ / ràng. Bứt / phá HSK.".
 */
h1,
h2,
h3 {
  text-wrap: pretty;
}

/*
 * 2) Tiêu đề KHÔNG có <br>: dùng 'balance' để chia đều số chữ mỗi dòng.
 *    Đây là nhóm bị wrap tự nhiên xấu nhất, ví dụ
 *    "Người truyền / lửa cho hành / trình HSK." -> "Người truyền lửa / cho hành trình HSK."
 */
h1:not(:has(br)),
h2:not(:has(br)),
h3:not(:has(br)) {
  text-wrap: balance;
}

/* Đoạn văn: chống chữ mồ côi ở dòng cuối. */
p {
  text-wrap: pretty;
}

/*
 * 3) Hai thẻ cơ sở phải ngang nhau.
 *    Manus đẩy thẻ thứ hai xuống 28px bằng class `md:translate-y-7` (kiểu so le).
 *    Dùng thuộc tính `translate` (Tailwind v4) chứ không phải `transform`,
 *    nên phải ghi đè cả hai cho chắc.
 */
.document-panel[class*="translate-y-7"] {
  translate: none !important;
  transform: none !important;
}

/*
 * 4) Khổ tablet / laptop nhỏ: lưới 2 cột bắt đầu từ 768px làm cột tiêu đề
 *    teo còn 174-197px trong khi cỡ chữ vẫn 54-63px -> mỗi dòng ~3 ký tự.
 *    Đo được ở 820px: "Lộ / trình / rõ / ràng. / Bứt / phá / HSK." (7 dòng).
 *    Cho xếp 1 cột tới 1100px để tiêu đề có đủ chiều rộng.
 */
@media (min-width: 768px) and (max-width: 1100px) {
  /* Bắt mọi biến thể: md:grid-cols-2, md:grid-cols-[.37fr_1fr], md:grid-cols-3 ... */
  [class*="md:grid-cols-"] {
    grid-template-columns: 1fr !important;
  }
  /* items-end trong lưới 1 cột làm chữ dính đáy ô, bỏ đi. */
  [class*="md:items-end"] {
    align-items: start !important;
  }
}

/*
 * 5) Desktop rộng: cột tiêu đề của mục "Người truyền lửa..." chỉ được .37fr
 *    = 335px với cỡ chữ 57px, nên cắt gãy cụm "truyền lửa" / "hành trình".
 *    Nới lên .55fr (~440px) để chia dòng gọn hơn.
 */
@media (min-width: 1101px) {
  /*
   * Đo được: "cho hành trình HSK." rộng 512px ở cỡ 57px.
   * Cột phải >= 512px thì text-wrap:balance mới chia được 2 dòng
   * "Người truyền lửa / cho hành trình HSK."; hẹp hơn là nó buộc phải cắt 3 dòng.
   * Đặt sàn 520px để mọi khổ desktop đều đủ. Chỉ 1 section dùng lưới này.
   */
  [class*="grid-cols-[.37fr_1fr]"] {
    grid-template-columns: minmax(520px, 0.72fr) minmax(0, 1fr) !important;
  }
}

/*
 * 6) MOBILE — lề hai bên (gutter). Đây là lỗi cân đối lớn nhất trên điện thoại.
 *
 * Mọi section dùng class `.container` của Manus, nhưng bản export này KHÔNG cấu
 * hình padding cho `.container`. Trên desktop không thấy vì `max-width` của
 * container tự tạo lề khi canh giữa; nhưng màn hình < 640px hẹp hơn mọi
 * `max-width` nên container tràn full-width, padding = 0 → tiêu đề, đoạn văn,
 * thẻ và footer đều DÍNH SÁT hai mép màn hình. Không phải chủ ý thiết kế, là lỗ
 * hổng responsive.
 *
 * Đo (viewport 375px): 44 phần tử chữ có left=0 & right=0. Cho toàn bộ mobile
 * một lề 20px thống nhất — chữ có khoảng thở, layout cân đối hẳn.
 *
 * Vì sao pad ở tầng SECTION chứ không từng phần tử: các thẻ (.document-panel,
 * .field trong form) đã có padding riêng nhưng vẫn nằm sát mép section. Pad
 * section thì mọi thứ thụt vào đều nhau, KHÔNG double-pad ô input; các dải nền
 * màu (section xanh #142952) vẫn full-bleed còn chữ bên trong thụt vào — đúng
 * kiểu thẻ nền tràn mép, chữ có lề.
 *
 * Phạm vi <=767px khớp ranh giới `md:` của Tailwind (mobile = dưới md) và nối
 * liền với rule tablet 768–1100 ở mục 4, không chồng lấn.
 */
@media (max-width: 767px) {
  .editorial-section,
  .premium-footer,
  header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /*
   * Thẻ thống kê nền xanh (#17377a) nằm trong: lề 20px + p-5 của aside + p-6 của
   * khung viền = 3 lớp padding ngang, bóp "Lộ trình rõ ràng." vỡ thành 3 dòng.
   * Đo: cột cần >= 272px để giữ 2 dòng (2 câu = 2 dòng). Giảm padding trong của
   * thẻ này để trả lại chiều rộng cho tiêu đề (cột ~278px). Chỉ áp trên mobile.
   */
  [class*="bg-[#17377a]"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  [class*="bg-[#17377a]"] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /*
   * Tiêu đề địa chỉ cơ sở: "1028 Nguyễn Tất Thành" (cỡ 31px) chỉ vừa KHÍT khi
   * full-bleed (cần 323px, cột 327px), nên vừa thêm lề là nó rớt xuống 2 dòng
   * trong khi "143 Đặng Văn Ngữ" vẫn 1 dòng → hai thẻ lệch nhau. Hạ cả hai về
   * 26px để mỗi thẻ đều gọn 1 dòng và đồng cỡ. Chỉ khớp tiêu đề trong thẻ cơ sở
   * (`text-[31px]` bên trong `.document-panel`), không đụng tiêu đề form (45px).
   */
  .document-panel h3[class*="text-[31px]"] {
    font-size: 26px !important;
  }

  /*
   * Tiêu đề hotline "Chưa biết bắt đầu từ đâu? Gọi Duy Tân nhé.": khi cột hẹp
   * lại, `text-wrap: balance` (mục 2) cân thành 3 dòng ngắn. Đổi riêng nó sang
   * `pretty` để về lại 2 dòng gọn. Khớp đúng nó qua cặp class text-[31px] +
   * md:text-[38px] (chỉ tiêu đề này có cả hai).
   */
  h3[class*="text-[31px]"][class*="md:text-[38px]"] {
    text-wrap: pretty !important;
  }

  /*
   * Khu giảng viên là một dải màu toàn chiều ngang, không phải card nổi.
   * Khóa lại hình học để không bị lệch/bo góc khi đặt trong khung preview hẹp,
   * đồng thời dùng gutter 24px để tiêu đề và đường kẻ không sát mép màn hình.
   */
  #giang-vien {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 72px 24px !important;
    border-radius: 0 !important;
    overflow-x: clip;
  }

  #giang-vien > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  #giang-vien h2 {
    max-width: 12ch;
    font-size: 38px !important;
    line-height: 1.02 !important;
    overflow-wrap: break-word;
  }
}

@media (max-width: 359px) {
  #giang-vien {
    padding-inline: 20px !important;
  }

  #giang-vien h2 {
    font-size: 34px !important;
  }
}

/* Phương án 1: danh bạ học thuật cân bằng, dùng một hệ nhãn đỏ thống nhất. */
#giang-vien .dt-teacher-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
  border: 0 !important;
  width: 100%;
}

#giang-vien .dt-teacher-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
  min-height: 126px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
}

#giang-vien .dt-teacher-badge {
  display: grid;
  place-items: center;
  width: 88px;
  min-height: 30px;
  padding: 7px 8px;
  background: #c61d2c;
  color: #fff;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#giang-vien .dt-teacher-content {
  min-width: 0;
}

#giang-vien .dt-teacher-card h3 {
  margin: 0 0 7px;
  color: #fff;
  font-family: Lora, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

#giang-vien .dt-teacher-card p {
  margin: 0;
  color: #bbc7da;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  #giang-vien .dt-teacher-directory {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #giang-vien .dt-teacher-card {
    grid-template-columns: 1fr;
    gap: 13px;
    min-height: 0;
    padding: 18px;
  }
}