/* IMTI bổ sung — chỉ những lớp khuôn Đại Nam CHƯA có.
 *
 * Vì sao tệp riêng: `design-system.css` là bản gốc copy nguyên từ dự án
 * Website Đại Nam mới (634.505 byte). Sửa vào đó là làm lệch nguồn, lần sau
 * đồng bộ lại sẽ mất. Nên phần thiếu nằm ở đây, nạp SAU, dùng đúng biến --dn-*.
 *
 * Nội dung: biểu mẫu (thẻ form, ô nhập, nhãn bắt buộc), nhãn "chờ xác minh",
 * và lưới hai cột cho khối chữ đôi (thông điệp lãnh đạo).
 */

/* ------------------------------------------------------------------ biểu mẫu */
.dn-bieu-mau { max-width: 780px; }

.dn-luoi-o {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.dn-o { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dn-o--rong { grid-column: 1 / -1; }
.dn-o--an { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dn-o label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dn-chu);
  line-height: 1.4;
}

.dn-bat-buoc { color: var(--dn-loi); font-weight: 700; }

.dn-o input,
.dn-o select,
.dn-o textarea {
  width: 100%;
  min-height: 44px;                 /* vùng chạm đủ lớn trên điện thoại */
  padding: 11px 14px;
  font-family: var(--dn-font);
  font-size: 15px;
  color: var(--dn-chu);
  background: var(--dn-nen);
  border: 1px solid var(--dn-vien-dam);
  border-radius: var(--dn-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dn-o textarea { min-height: 120px; resize: vertical; }

.dn-o select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dn-chu-3) 50%),
                    linear-gradient(135deg, var(--dn-chu-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.dn-o input:hover, .dn-o select:hover, .dn-o textarea:hover { border-color: var(--dn-chu-3); }

/* Tương phản viền khi focus đạt 3:1, có thêm vòng ngoài để thấy rõ */
.dn-o input:focus, .dn-o select:focus, .dn-o textarea:focus {
  outline: none;
  border-color: var(--dn-cam);
  box-shadow: 0 0 0 3px rgba(240, 116, 35, .22);
}

/* Ô sai: viền đỏ và có chữ giải thích do máy chủ trả, KHÔNG dựa vào màu một mình */
.dn-o input:user-invalid, .dn-o textarea:user-invalid { border-color: var(--dn-loi); }

.dn-bieu-mau .dn-ghi-chu {
  font-size: 13px;
  color: var(--dn-chu-3);
  margin: 16px 0 0;
  line-height: 1.6;
}

.dn-bieu-mau .dn-nut { margin-top: 24px; }

/* ------------------------------------------------------- nhãn chờ xác minh */
/* Thư Chủ tịch: chỗ chưa có bản xác nhận phải đánh dấu RÕ, không được bịa.
   Nền vàng nhạt + viền trái đậm + biểu tượng, đọc được cả khi không phân biệt màu. */
.dn-cho-xac-minh {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dn-chu);
  background: #FFF7E6;
  border: 1px solid #F0C27A;
  border-left: 4px solid #C77700;
  border-radius: var(--dn-radius);
}

.dn-cho-xac-minh span[aria-hidden] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #FFF;
  background: #C77700;
  border-radius: 50%;
}

.dn-muc--toi .dn-cho-xac-minh,
.dn-muc--cam .dn-cho-xac-minh,
.dn-muc--xanh .dn-cho-xac-minh {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  border-left-color: var(--dn-cam-sang);
  color: #FFF;
}

.dn-muc--toi .dn-cho-xac-minh span[aria-hidden],
.dn-muc--cam .dn-cho-xac-minh span[aria-hidden],
.dn-muc--xanh .dn-cho-xac-minh span[aria-hidden] {
  background: var(--dn-cam-sang);
  color: var(--dn-cam-sau);
}

/* --------------------------------------------------- khối chữ đôi (ảnh chữ) */
.dn-doi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}

.dn-doi__anh img { width: 100%; height: auto; border-radius: var(--dn-radius-lg); }

.dn-doi__chu h2 { margin-top: 0; }

.dn-doi__chu p { font-size: 17px; line-height: 1.75; color: var(--dn-chu-2); }
.dn-doi__chu p:first-of-type::first-letter { font-size: 1.05em; }

.dn-chu-ky { margin-top: 24px; font-size: 15px; color: var(--dn-chu); line-height: 1.7; }
.dn-chu-ky b { display: block; font-size: 17px; }
.dn-chu-ky span { color: var(--dn-chu-3); }

/* ------------------------------------------------------------ lưới 3-4 thẻ */
.dn-luoi-the { display: grid; gap: 24px; }
.dn-luoi-the--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dn-luoi-the--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dn-luoi-the--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------- hỏi đáp (details) */
.dn-hoi-dap { display: grid; gap: 12px; max-width: 900px; }

.dn-hoi-dap details {
  background: var(--dn-nen);
  border: 1px solid var(--dn-vien);
  border-radius: var(--dn-radius);
  padding: 0 20px;
}

.dn-hoi-dap details[open] { border-color: var(--dn-vien-dam); box-shadow: var(--dn-bong); }

.dn-hoi-dap summary {
  cursor: pointer;
  padding: 18px 32px 18px 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dn-chu);
  position: relative;
  list-style: none;
}

.dn-hoi-dap summary::-webkit-details-marker { display: none; }

.dn-hoi-dap summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--dn-chu-3);
  border-bottom: 2px solid var(--dn-chu-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}

.dn-hoi-dap details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.dn-hoi-dap summary:focus-visible { outline: 3px solid var(--dn-cam); outline-offset: 2px; }

.dn-hoi-dap .dn-dap {
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dn-chu-2);
  max-width: 72ch;
}

/* ------------------------------------------------------------ bảng thông số */
.dn-bang--rong { width: 100%; border-collapse: collapse; font-size: 15px; }

.dn-bang--rong th, .dn-bang--rong td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--dn-vien);
  vertical-align: top;
}

.dn-bang--rong th { font-weight: 600; color: var(--dn-chu); width: 38%; }
.dn-bang--rong td { color: var(--dn-chu-2); }
.dn-bang--rong tr:last-child th, .dn-bang--rong tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ hồ sơ */
.dn-ho-so { display: grid; gap: 32px; }

.dn-ho-so__nguoi {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--dn-vien);
}

.dn-ho-so__nguoi:last-child { border-bottom: 0; padding-bottom: 0; }

.dn-ho-so__nguoi img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--dn-radius-lg);
  background: var(--dn-nen-2);
}

.dn-ho-so__nguoi h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.35; }
.dn-ho-so__chuc { font-size: 14px; font-weight: 600; color: var(--dn-cam-dam); margin: 0 0 12px; }
.dn-ho-so__nguoi p { font-size: 15px; line-height: 1.7; color: var(--dn-chu-2); margin: 0 0 8px; }

/* ------------------------------------------------------------------ hồi đáp */
@media (max-width: 900px) {
  .dn-luoi-the--3, .dn-luoi-the--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-doi { grid-template-columns: 1fr; gap: 28px; }
  .dn-ho-so__nguoi { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
  .dn-ho-so__nguoi img { width: 120px; height: 120px; }
}

@media (max-width: 640px) {
  .dn-luoi-o { grid-template-columns: 1fr; gap: 16px; }
  .dn-luoi-the--2, .dn-luoi-the--3, .dn-luoi-the--4 { grid-template-columns: 1fr; }
  .dn-ho-so__nguoi { grid-template-columns: 1fr; }
  .dn-ho-so__nguoi img { width: 132px; height: 132px; }
  .dn-bieu-mau .dn-nut { width: 100%; }
}

/* Khung ảnh chờ chân dung: giữ đúng tỉ lệ 4:5 để bố cục không nhảy khi có ảnh thật */
.dn-nsr-nguoi__anh--trong {
  display: grid;
  place-items: center;
  background: var(--dn-nen-2);
  border: 1px dashed var(--dn-vien-dam);
  border-radius: var(--dn-radius);
}

.dn-anh-cho {
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 0 12px;
  color: var(--dn-chu-3);
}

/* ============================================================================
   ĐẦU TRANG — menu đầy đặn, không trống trải
   ----------------------------------------------------------------------------
   Bộ khuôn gốc ẩn bộ chọn ngôn ngữ và nút "Khu vực sinh viên" ở mọi bề rộng dưới
   1600px, nên trên màn 1440 đầu trang chỉ còn 6 mục menu dồn về hai bên logo và
   một khoảng trống lớn bên phải. Đo được: menu chỉ dùng 58% bề rộng khả dụng.
   Sửa: hiện lại hai thứ đó, và cho các mục menu giãn đều hết bề rộng.
   ========================================================================== */
@media (min-width:641px) and (max-width:1599px) {
  .dn-dau__phai .dn-nut,
  .dn-dau__phai .dn-ngon-ngu { display: flex; }
  .dn-dau__phai .dn-nut.dn-nut--nho { display: inline-flex; }
}

/* Giãn đều: mục đầu sát lề trái của cột, mục cuối sát lề phải. */
.dn-dau__trong .dn-menu--trai { justify-content: space-between; }
.dn-dau__trong .dn-dau__phai  { justify-content: space-between; gap: var(--dn-3); }
/* Menu phải co theo nội dung, nhường chỗ cho bộ chọn ngôn ngữ và nút */
.dn-dau__trong .dn-menu--phai { flex: 0 1 auto; }

/* ============================================================================
   BỘ CHỌN NGÔN NGỮ — cờ + tên, bấm mới xổ ra
   ========================================================================== */
.dn-ngon-ngu { position: relative; flex: 0 0 auto; }

.dn-ngon-ngu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 9px;
  border-radius: var(--dn-radius);
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.dn-ngon-ngu > summary::-webkit-details-marker { display: none; }
.dn-ngon-ngu > summary::marker { content: ""; }
.dn-ngon-ngu > summary:hover,
.dn-ngon-ngu[open] > summary { background: rgba(255, 255, 255, .16); }

.dn-ngon-ngu__ma {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  color: #fff;
}

.dn-mui-ten {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.dn-ngon-ngu[open] .dn-mui-ten { transform: translateY(1px) rotate(-135deg); }

.dn-ngon-ngu__hop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 208px;
  padding: 6px;
  border: 1px solid var(--dn-vien);
  border-radius: var(--dn-radius);
  background: #fff;
  box-shadow: var(--dn-bong-nang);
}

.dn-ngon-ngu__hop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--dn-radius);
  color: var(--dn-chu-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.dn-ngon-ngu__hop a:hover { background: var(--dn-cam-nhat); color: var(--dn-cam-dam); }
.dn-ngon-ngu__hop a.dang-chon { background: var(--dn-cam-nhat); color: var(--dn-cam-dam); }

.dn-ngon-ngu__ten { display: flex; flex-direction: column; line-height: 1.25; }
.dn-ngon-ngu__ten small { font-size: 11.5px; font-weight: 500; color: var(--dn-chu-3); }
.dn-ngon-ngu__hop a.dang-chon .dn-ngon-ngu__ten small { color: var(--dn-cam-dam); opacity: .75; }

/* Cờ: khung tròn nhẹ cho gọn mắt, giữ đúng tỉ lệ 3:2 */
.dn-co {
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 2.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  object-fit: cover;
}

/* ============================================================================
   KHỐI ẢNH — tỉ lệ đúng nguồn, lưới luôn chia hết, có nhịp điệu
   ----------------------------------------------------------------------------
   Ảnh nguồn 4:3 bị ép vào khung 305×450 (2:3) nên cắt mất một nửa bề ngang. Lưới
   lấy lại 4:3, và số cột chọn theo số ảnh chia hết để hàng cuối không bị lẻ.
   ========================================================================== */
.dn-nsr-luoi--anh {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dn-4);
  align-items: start;
}

.dn-nsr-luoi--anh .dn-nsr-anh {
  margin: 0;
  overflow: hidden;
  border-radius: var(--dn-radius);
  background: var(--dn-nen-2);
}

.dn-nsr-luoi--anh .dn-nsr-anh img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.dn-nsr-luoi--anh .dn-nsr-anh:hover img { transform: scale(1.05); }

.dn-nsr-luoi--anh .dn-nsr-anh figcaption {
  padding: 9px 12px 11px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dn-chu-2);
}

@media (max-width:1099px) {
  .dn-nsr-luoi--anh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width:699px) {
  .dn-nsr-luoi--anh { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dn-3); }
}

/* Thẻ tin và khối chữ đôi: ảnh cùng tỉ lệ, bo góc, bóng nhẹ cho có chiều sâu */
.dn-the__anh { border-radius: var(--dn-radius); overflow: hidden; }

.dn-doi__anh img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dn-radius);
}

/* ============================================================================
   BIỂU MẪU — chữ không đè nhau, không tràn khỏi ô
   ========================================================================== */
.dn-luoi-o { row-gap: var(--dn-4); column-gap: var(--dn-4); }

.dn-o { min-width: 0; }

.dn-o label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* width/box-sizing: nếu thiếu, ô nhập có padding sẽ rộng hơn hộp cha và tràn viền */
.dn-o input,
.dn-o select,
.dn-o textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}

.dn-o textarea { min-height: 132px; line-height: 1.55; }

.dn-bieu-mau .dn-nut { margin-top: var(--dn-2); }

/* Hộp xổ phải ẨN HẲN khi đóng, không chỉ tràn xuống dưới: để nó còn hộp bố cục thì
   nó đè lên tiêu đề trang và cổng đo bắt được là chữ đè nhau. */
.dn-ngon-ngu:not([open]) .dn-ngon-ngu__hop { display: none; }