/*
 * Lưới an toàn.
 *
 * SPEC mục 2 bắt buộc có file này: Tailwind v4 đòi Safari 16.4+ / Chrome 111+,
 * và cổng thi phải đọc được, bấm được trên máy cũ hơn thế, cũng như khi file
 * Tailwind không tải được vì bất cứ lí do gì.
 *
 * Ở đây chỉ dùng CSS mà mọi trình duyệt đều hiểu: không @layer, không oklch,
 * không @property, không biến lồng nhau. Trình duyệt cũ bỏ qua trọn khối
 * @layer của Tailwind nên sẽ rơi gọn về đúng những quy tắc này.
 *
 * Bảng màu trích từ docs/Banner_Web.png — xem SPEC mục 7.
 */

:root {
  --navy: #273679;
  --tim: #8b489c;
  --chanh: #b9d231;
  --lo: #1ab2de;
  --cam: #f89c25;
  --do: #ef3e3e;

  --nen: #fbf9f5;
  --lop-1: #f5f3f1;
  --lop-2: #eae9eb;
  --the: #ffffff;
  --vien: #e7e3da;
  --chu: #1b1f3b;
  --chu-phu: #5a5f7d;
  --chu-mo: #64677e;
  --han: #935c16;
  --gap-han: #c62828;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #fbf9f5;
  color: #1b1f3b;
  /*
   * Phông hệ thống, không tải webfont.
   *
   * Trước đây khai `Inter` mà không có @font-face nào và không có file phông
   * nào trong dự án — mọi máy vẫn rơi về phông hệ thống, khai báo kia vô
   * nghĩa. Giữ phông hệ thống là lựa chọn có chủ ý: VnExpress và MoMo đều
   * làm vậy cho thân bài tiếng Việt, và nó tiết kiệm ~100 KB trong ngày thi.
   */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  /*
   * 1,75 chứ không phải 1,5.
   *
   * Tiếng Việt chồng hai dấu trên một nguyên âm (ế, ộ, ữ), nên phần mực của
   * chữ cao hơn tiếng Anh 25–42% tuỳ phông. Đo thật: hai dòng va chạm khi độ
   * cao dòng xuống dưới khoảng 1,2. Muốn khoảng thở bằng tiếng Anh ở 1,5 thì
   * tiếng Việt cần khoảng 1,75.
   */
  line-height: 1.75;
}

/* Tiêu đề không bao giờ xuống dưới 1,3, nếu không dấu bị cắt khi xuống dòng. */
h1, h2, h3, h4 {
  line-height: 1.3;
  /* Không bao giờ âm: dấu phải tránh cả chữ bên cạnh, không chỉ chữ bên dưới. */
  letter-spacing: 0;
}

/* Giữ trang ẩn tới khi Tailwind dựng xong, hoặc tối đa 2 giây — xem boot.js. */
body.dang-cho-giao-dien {
  visibility: hidden;
}

/* Phần tử dò: Tailwind dựng xong thì nó biến mất. boot.js nhìn vào đây. */
#tw-probe {
  position: absolute;
  left: -9999px;
}

img,
svg,
iframe {
  max-width: 100%;
}

/*
 * Viền tiêu điểm bàn phím, hai tông.
 *
 * Bản cũ dùng outline 3px màu #22C1C3, đo được 2,21:1 trên nền trắng — dưới
 * ngưỡng 3:1 mà WCAG 1.4.11 đòi cho thành phần giao diện. Mẫu hai tông này
 * mượn từ GOV.UK: vạch sáng bên trong để thấy trên nền tối, vạch tối bên
 * ngoài để thấy trên nền sáng, nên luôn đủ tương phản dù đặt ở đâu.
 *
 * outline trong suốt 3px là chủ ý: ở chế độ tương phản cưỡng bức của hệ điều
 * hành, box-shadow bị bỏ qua còn outline thì không — lúc đó nó hiện thành
 * viền đặc theo màu hệ thống.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px #f89c25, 0 0 0 6px #1b1f3b;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Từ đây xuống chỉ áp dụng khi Tailwind KHÔNG dựng được.
 *
 * Phải khoanh vùng: Tailwind v4 đặt mọi tiện ích trong @layer, và luật KHÔNG
 * thuộc lớp nào thắng luật nằm trong lớp. Để tự do thì mấy dòng dưới sẽ đè
 * lên Tailwind ngay cả khi Tailwind chạy hoàn hảo.
 *
 * Dùng lớp .khong-co-tailwind thay vì @layer là có lí do: trình duyệt quá cũ
 * bỏ qua cả khối @layer, tức bỏ luôn lưới an toàn, đúng lúc cần nó nhất.
 */
.khong-co-tailwind a {
  color: #273679;
}

.khong-co-tailwind .khung {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 20px;
}

.khong-co-tailwind .the {
  background-color: #ffffff;
  border: 1px solid #e7e3da;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.khong-co-tailwind .nut {
  display: inline-block;
  background-color: #273679;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.khong-co-tailwind .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Không có Tailwind thì không có điểm ngắt: giữ đúng một bản menu. */
.khong-co-tailwind .menu-di-dong {
  display: none;
}