/* Hallmark · scope: app-ui · genre: utilitarian · theme: DTV Brand Guide (khách chỉ định)
 * nav: side-rail BÊN PHẢI (Quỳnh chốt 06/09/2026), 5 nhóm gấp được, 19 mục
 * contrast: pass (40-41) · tokens: pass (48) · icons: pass (30) · gate 49 pass
 * gate 34: overflow-x clip trên html và body, không phải hidden
 * slop: G4 G20 G24 G26 G33 G39 G51 đã sửa
 * G38a (cấm heading in nghiêng): ĐÃ SỬA. Quỳnh chốt nghe theo hallmark ngày
 *   04/09/2026. Giữ Playfair làm điểm nhấn serif nhưng chữ ĐỨNG, vì hallmark
 *   cấm nghiêng chứ không cấm serif. brand-style.md mục 16.1 còn ghi "italic",
 *   cần Quỳnh cập nhật lại cho khớp.
 * pre-emit critique: P4 H5 E4 S5 R4 V4  (06/09/2026, sau khi thêm nhóm menu)
 */
/* ============================================================
   DTV Admin
   Bảng màu và bộ chữ lấy từ brand-style.md mục 15 và 16.
   Không thêm màu ngoài bảng. Không viết toàn bộ bằng chữ hoa.
   ============================================================ */

:root {
  /* Sáu màu thương hiệu, không thêm bớt */
  --nen:        #1B2632;  /* Abyssal, nền sâu nhất */
  --the:        #2C3B4D;  /* Blue Fantastic, khối nổi trên nền */
  --chu:        #EEE9DF;  /* Palladian, chữ chính */
  --chu-phu:    #C9C1B1;  /* Oatmeal, nhãn và chú thích */
  --nhan:       #FFB162;  /* Burning Flame, màu nhấn DUY NHẤT */
  --tren-nhan:  #1B2632;  /* chữ đặt trên nền nhấn, không dùng chữ sáng */
  --xau:        #A35139;  /* Truffle Trouble, cảnh báo. Tương phản 5.54:1
                             nên không dùng cho chữ nhỏ */

  --vien:       color-mix(in srgb, var(--chu) 14%, transparent);
  --vien-mo:    color-mix(in srgb, var(--chu) 7%, transparent);
  --the-mo:     color-mix(in srgb, var(--the) 55%, transparent);

  --chu-giao-dien: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --chu-so:        'IBM Plex Mono', ui-monospace, monospace;
  --chu-diem-nhan: 'Playfair Display', Georgia, serif;

  /* Thang khoảng cách. Mọi padding, margin, gap phải lấy từ đây.
     Giá trị lẻ kiểu 13px, 15px là dấu hiệu tự chế giữa chừng. */
  --k-1: 4px;   --k-2: 8px;   --k-3: 12px;  --k-4: 16px;
  --k-5: 20px;  --k-6: 24px;  --k-8: 32px;  --k-11: 44px;

  --r: 4px;          /* bo góc nhỏ. Trầm, không bo tròn kiểu ứng dụng tiêu dùng */
  --cot-menu: 272px;   /* cột chức năng, nay nằm BÊN PHẢI.
                          Rộng hơn bản cũ 224px vì nhãn dài nhất phải đọc được
                          TRỌN VẸN. Đã đo ở 244px: 'Chương trình và khóa' và
                          'Danh sách để hành động' bị cắt thành dấu ba chấm.
                          Nhãn điều hướng mà đọc không ra thì menu mất luôn tác
                          dụng bản đồ, tệ hơn hẳn việc rail rộng thêm 28px. */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* clip chứ không hidden: hidden trên thẻ gốc biến body thành khối cuộn và làm hỏng
     position: sticky của cột menu. Hallmark gate 34. */
  overflow-x: clip;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--chu-giao-dien);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Nhãn nhỏ. Chữ thường, không in hoa: brand cấm viết toàn bộ bằng chữ hoa. */
.nhan-nho {
  font-size: 13px;
  letter-spacing: 0.015em;
  color: var(--chu-phu);
}

.so { font-family: var(--chu-so); font-variant-numeric: tabular-nums; }

/* Điểm nhấn serif. Tối đa MỘT chỗ mỗi màn.
   Chữ ĐỨNG, không nghiêng: hallmark gate G38a xếp heading in nghiêng vào
   nhóm dấu hiệu AI rõ nhất. Nhấn mạnh mang bằng bộ chữ và độ đậm, không bằng nghiêng. */
.diem-nhan {
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--chu-diem-nhan);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ---------- Khung ---------- */

.khung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cot-menu);
  min-height: 100svh;
}

/* Cột chức năng nằm BÊN PHẢI, theo yêu cầu của Quỳnh.
   Đổi được vì đây là bảng điều khiển đầy bảng số liệu: menu bên phải thì nội dung bắt đầu
   ngay mép trái, đúng chỗ mắt bắt đầu đọc, và không bảng nào bị thụt vào.
   Điều kiện đi kèm: trên máy tính menu LUÔN nhìn thấy, không giấu sau một nút. */
.cot-menu {
  border-left: 1px solid var(--vien-mo);
  padding: var(--k-5) var(--k-3);
  display: flex;
  flex-direction: column;
  gap: var(--k-5);
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dau-de-he { padding: 0 var(--k-2); line-height: 1.3; }
/* Logo là chữ ĐẠO THỊNH VƯỢNG dạng hình, nên KHÔNG đặt thêm dòng chữ cùng tên bên cạnh:
   hai lần cùng một cái tên chồng lên nhau là dấu hiệu ghép vội. Chỉ còn 'quản trị' ở dưới
   để nói đây là khu vực nào. */
.dau-de-he .logo {
  display: block; width: 100%; max-width: 168px; height: auto;
}
.dau-de-he span {
  display: block; margin-top: var(--k-1);
  font-size: 13px; color: var(--chu-phu); letter-spacing: 0.02em;
}

.dieu-huong { display: flex; flex-direction: column; gap: var(--k-3); }

/* ---------- Nhóm chức năng ---------- */
/* Mười chín mục mở hết một lúc là 900px, dài hơn cả màn hình. Nên chỉ nhóm đang dùng mở,
   các nhóm khác gấp lại. Đầu nhóm vẫn luôn thấy, nên bản đồ hệ thống không bị giấu đi. */
.nhom { display: flex; flex-direction: column; }

.nhom-dau {
  display: flex; align-items: center; justify-content: space-between; gap: var(--k-2);
  width: 100%; min-height: var(--k-11);
  padding: var(--k-2) var(--k-3);
  background: none; border: 1px solid transparent; border-radius: var(--r);
  font: inherit; color: var(--chu-phu); text-align: left; cursor: pointer;
}
.nhom-ten {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  /* Chữ hoa đầu mỗi từ chứ không viết hoa toàn bộ: brand cấm all-caps. Giãn chữ và cỡ
     nhỏ đã đủ để đầu nhóm tách khỏi mục con. */
}
.nhom-mui {
  font-family: var(--chu-so); font-size: 14px; line-height: 1;
  color: var(--chu-phu); opacity: 0.75;
}
@media (hover: hover) {
  .nhom-dau:hover { color: var(--chu); background: var(--the-mo); }
  .nhom-dau:hover .nhom-mui { opacity: 1; }
}
.nhom-dau:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.nhom-dau:active { background: var(--the); }
.nhom-dau[aria-expanded='true'] { color: var(--chu); }

.nhom-ds { display: flex; flex-direction: column; gap: 2px; padding-left: var(--k-2); }
.nhom-ds[hidden] { display: none; }

.muc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--k-3);      /* đo được 40px chiều cao, dưới ngưỡng chạm 44px */
  min-height: var(--k-11);
  border-radius: var(--r);
  color: var(--chu-phu);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  width: 100%;
}
@media (hover: hover) { .muc:hover { color: var(--chu); background: var(--the-mo); } }
.muc:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.muc:active { background: var(--the); }
.muc[aria-current='true'] {
  color: var(--chu);
  background: var(--the);
  border-color: var(--vien);
}
.muc svg { flex: none; width: 17px; height: 17px; }
/* 15px chứ không phải 16px kế thừa từ body: mười chín mục xếp dọc thì cỡ chữ nhỏ hơn một
   bậc đọc dễ hơn, và nhãn dài nhất vừa cột mà không phải nới rail thêm nữa. Vẫn trên
   ngưỡng 14px nên không phải chữ nhỏ. */
.muc { font-size: 15px; }
/* Nhãn bấm được KHÔNG được xuống hai dòng (hallmark gate 49). Cột đã nới lên 244px cho
   nhãn dài nhất, nhưng vẫn chốt bằng luật này để sau có ai thêm nhãn dài hơn thì nó cắt
   bằng dấu ba chấm chứ không phá vỡ chiều cao hàng. */
.muc-chu {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mục đã có trong bản đồ nhưng chưa dựng màn. Nhạt đi một bậc, KHÔNG khóa: bấm vào vẫn
   mở được trang nói màn đó sẽ làm gì. Khóa lại thì mất luôn tác dụng bản đồ. */
.muc.dang-dung { color: color-mix(in srgb, var(--chu-phu) 68%, transparent); }
@media (hover: hover) { .muc.dang-dung:hover { color: var(--chu-phu); } }
.muc.dang-dung[aria-current='true'] { color: var(--chu); }
.cham-dung {
  margin-left: auto; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.55;
}
.muc .dem {
  margin-left: auto;
  font-family: var(--chu-so);
  font-size: 13px;
  color: var(--chu-phu);
}
.muc[aria-current='true'] .dem { color: var(--nhan); }

.chan-cot { margin-top: auto; padding: 0 var(--k-2); font-size: 13px; color: var(--chu-phu); }
.chan-cot button {
  background: none; border: none; color: var(--chu-phu);
  font: inherit; padding: 0; cursor: pointer; text-decoration: underline;
}
.chan-cot button:hover { color: var(--chu); }

.noi-dung { padding: var(--k-6) var(--k-8) var(--k-8); max-width: 1080px; }

/* ---------- Ô tìm ---------- */

.o-tim {
  position: relative;
  margin-bottom: var(--k-5);
}
.o-tim input {
  width: 100%;
  padding: var(--k-3) var(--k-4) var(--k-3) 40px;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--r);
  color: var(--chu);
  font: inherit;
  font-size: 17px;
}
.o-tim input::placeholder { color: var(--chu-phu); }
.o-tim input:focus-visible {
  outline: 2px solid var(--nhan);
  outline-offset: 1px;
  border-color: var(--vien);
}
.o-tim svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--chu-phu); pointer-events: none;
}

/* ---------- Tiêu đề màn ---------- */

.dau-man { margin-bottom: var(--k-4); }
.dau-man h1 { font-size: 21px; font-weight: 600; margin: 0 0 3px; letter-spacing: 0.01em; }
.dau-man p { margin: 0; font-size: 14px; color: var(--chu-phu); }

/* ---------- Danh sách người ---------- */

.danh-sach { border-top: 1px solid var(--vien-mo); }

.dong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--k-4);
  align-items: center;
  padding: var(--k-3);
  border-bottom: 1px solid var(--vien-mo);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.dong:hover { background: var(--the-mo); border-left-color: var(--vien); }
.dong:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.dong:active { background: var(--the); }
.dong .ten { font-weight: 500; }
.dong .phu {
  font-size: 13.5px; color: var(--chu-phu); margin-top: 2px;
  display: flex; gap: var(--k-4); flex-wrap: wrap; align-items: baseline;
}
/* Không dùng dấu chấm giữa để ngăn cách. Nó lặp ở mọi dòng, bắt người đọc
   tự đoán nghĩa, và đặt hai thứ khác loại cạnh nhau trông y hệt nhau.
   Thay bằng khoảng cách rộng, và mã người thì gắn nhãn cho rõ. */
.dong .phu .ma-nguoi { opacity: .72; }
.dong .phu .ma-nguoi .nhan { margin-right: 5px; }
.cum-the { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Dòng người: tên Zalo, tên thật, thẻ ---------- */

.dong { align-items: start; }
.khoi-ten { min-width: 0; }
.dong .phu .ten-that { color: var(--chu-phu); }
.dong .phu .thieu { color: var(--xau); }

/* Thẻ phân loại, sửa ngay tại dòng. Bấm vào ô là gõ thêm được. */
.hang-the {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--k-2); align-items: center;
}
.the-lop {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--chu-so); font-size: 12.5px;
  padding: 2px var(--k-2); border-radius: 3px;
  border: 1px solid var(--vien); color: var(--chu-phu);
  background: var(--the-mo);
}
.the-lop .go {
  background: none; border: none; padding: 0 1px; cursor: pointer;
  color: var(--chu-phu); font: inherit; line-height: 1;
}
.the-lop .go:hover { color: var(--xau); }
.the-lop .go:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

.nhap-the {
  width: 76px; font: inherit; font-size: 12.5px;
  padding: 2px var(--k-2);
  background: none; border: 1px dashed var(--vien);
  border-radius: 3px; color: var(--chu);
}
.nhap-the::placeholder { color: var(--chu-phu); }
.nhap-the:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; width: 132px; }

.cum-phai {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; flex: none;
}
.nut.nho { font-size: 12.5px; padding: var(--k-1) var(--k-2); white-space: nowrap; }

/* ---------- Hàng nút lọc ---------- */

.hang-loc {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--k-4); align-items: center;
}
.loc {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px;
  padding: var(--k-1) var(--k-3);
  border: 1px solid var(--vien); border-radius: 999px;
  background: none; color: var(--chu-phu); cursor: pointer;
}
.loc:hover { color: var(--chu); background: var(--the-mo); }
.loc:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.loc .dem { font-size: 12px; opacity: .8; }
.loc.dang-chon {
  border-color: var(--nhan); color: var(--nhan);
  background: color-mix(in srgb, var(--nhan) 12%, transparent);
}
.ngat-loc {
  width: 1px; height: 18px; background: var(--vien); margin: 0 var(--k-1);
}

/* ---------- Chứng từ ---------- */

.ds-chung-tu { display: grid; gap: var(--k-2); }
.mot-chung-tu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--k-3); align-items: center;
  padding: var(--k-3) 0; border-top: 1px solid var(--vien-mo);
}
.mot-chung-tu:last-child { border-bottom: 1px solid var(--vien-mo); }
.mot-chung-tu .ten-tep { word-break: break-all; }
.mot-chung-tu .tien { font-family: var(--chu-so); white-space: nowrap; }

.tai-len {
  border: 1px dashed var(--vien); border-radius: var(--r);
  padding: var(--k-4); margin-top: var(--k-3);
  display: grid; gap: var(--k-3);
}
.tai-len .hang { display: flex; gap: var(--k-3); flex-wrap: wrap; align-items: end; }
.tai-len label { display: block; font-size: 13px; color: var(--chu-phu); margin-bottom: 3px; }
.tai-len input[type=date], .tai-len input[type=text], .tai-len input[type=file] {
  font: inherit; font-size: 14px; padding: var(--k-2);
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--r); color: var(--chu);
}
.tai-len input:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

/* ---------- Thẻ trạng thái ---------- */
/* Kỷ luật: trạng thái BÌNH THƯỜNG không tô màu. Chỉ thứ cần xử lý mới sáng lên. */

.the-tt {
  font-size: 12.5px;
  padding: var(--k-1) var(--k-2);
  border-radius: 3px;
  border: 1px solid var(--vien);
  color: var(--chu-phu);
  white-space: nowrap;
}
.the-tt.can-chu-y { border-color: var(--nhan); color: var(--nhan); }
.the-tt.xau       { border-color: var(--xau); color: var(--chu); background: color-mix(in srgb, var(--xau) 30%, transparent); }

/* ---------- Khối ---------- */

.khoi {
  background: var(--the);
  border: 1px solid var(--vien-mo);
  border-radius: var(--r);
  padding: var(--k-5);
}
.khoi + .khoi { margin-top: var(--k-4); }
.khoi h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; letter-spacing: 0.01em; }

/* Mục nội dung: KHÔNG phải thẻ. Thẻ chỉ dành cho thứ tự nó là một khối,
   ví dụ trục thời gian. Ba thẻ xếp chồng liên tiếp là mosaic, đúng thứ
   design-review từ chối thẳng với giao diện ứng dụng. */
.muc-nd { margin-top: 30px; }
.muc-nd > h2 {
  font-size: 14.5px; font-weight: 600; margin: 0 0 4px; letter-spacing: 0.01em;
}
.muc-nd > .duong-ke {
  height: 1px; background: var(--vien-mo); margin-bottom: 10px;
}

.hang-so { display: flex; gap: 12px; flex-wrap: wrap; }
.o-so { padding: 2px 14px 2px 0; }
.o-so .con-so { font-family: var(--chu-so); font-size: 29px; line-height: 1.1; }
.o-so .con-so.sang { color: var(--nhan); }
.o-so .nhan-nho { margin-top: 3px; }

/* Ô "đã quá hạn": #A35139 chỉ đạt 2.77:1 trên nền tối nên KHÔNG tô chữ bằng nó.
   Dùng khối nền tô, chữ giữ màu sáng. Màu chỉ để mắt tìm nhanh, chữ mới mang tin. */
.o-so.xau {
  background: color-mix(in srgb, var(--xau) 30%, transparent);
  border: 1px solid var(--xau);
  border-radius: var(--r);
  padding: 6px 14px;
  margin: -6px 0;
}
.o-so.xau .nhan-nho { color: var(--chu); }

/* ---------- Nút ---------- */

.nut {
  font: inherit; font-size: 14.5px;
  padding: var(--k-3) var(--k-4);
  border-radius: var(--r);
  border: 1px solid var(--vien);
  background: none;
  color: var(--chu);
  cursor: pointer;
}
.nut:hover { background: var(--the-mo); }
.nut:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.nut:active { transform: translateY(1px); }
.nut.chinh {
  background: var(--nhan); color: var(--tren-nhan);
  border-color: var(--nhan); font-weight: 600;
}
.nut.chinh:hover { filter: brightness(1.07); background: var(--nhan); }
.nut:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Trạng thái rỗng và nạp ---------- */

.trong, .dang-nap {
  padding: var(--k-11) var(--k-3); text-align: center; color: var(--chu-phu); font-size: 14.5px;
}
.trong b { display: block; color: var(--chu); font-weight: 500; margin-bottom: 5px; font-size: 16px; }
.trong .nut { margin-top: 14px; }

.loi {
  border: 1px solid var(--xau);
  background: color-mix(in srgb, var(--xau) 18%, transparent);
  border-radius: var(--r);
  padding: var(--k-3) var(--k-4);
  font-size: 14.5px;
  margin-bottom: var(--k-4);
}

/* ============================================================
   TRỤC THỜI GIAN
   Đây là chỗ duy nhất được phép phức tạp. Nó là lý do tồn tại
   của cả DTV Core: một con người, một hành trình.
   Chấm = một sự kiện tại một thời điểm (ghi danh khóa ngắn hạn).
   Thanh = một khoảng thời gian (kỳ membership 12 tháng).
   Chiều cao tỉ lệ với thời gian thật, không phải xếp đều nhau.
   ============================================================ */

.truc { position: relative; padding: 6px 0 6px 96px; min-height: 120px; }

.truc .ray {
  position: absolute; left: 78px; top: 0; bottom: 0;
  width: 1px; background: var(--vien);
}

.moc-nam {
  position: absolute; left: 0; transform: translateY(-50%);
  font-family: var(--chu-so); font-size: 13px; color: var(--chu-phu);
  width: 66px; text-align: right;
}
.moc-nam::after {
  content: ''; position: absolute; right: -20px; top: 50%;
  width: 14px; height: 1px; background: var(--vien);
}

.viec {
  position: absolute; left: 96px; right: 0;
  transform: translateY(-50%);
  padding-left: 4px;
}
.viec .ngay { font-family: var(--chu-so); font-size: 13px; color: var(--chu-phu); }
.viec .ten-viec { font-size: 15px; margin-top: 1px; }
.viec .chu-thich { font-size: 13.5px; color: var(--chu-phu); }

.viec::before {                       /* chấm trên ray */
  content: ''; position: absolute;
  left: -22.5px; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nen); border: 1px solid var(--chu-phu);
}

.khoang {                             /* thanh kéo dài của một kỳ membership */
  position: absolute; left: 74px; width: 9px;
  border-radius: 5px;
  background: var(--vien);
  border: 1px solid var(--vien);
}
.khoang.dang-hieu-luc { background: var(--nhan); border-color: var(--nhan); }
.khoang.het-han {
  background: color-mix(in srgb, var(--chu-phu) 22%, transparent);
  border-color: color-mix(in srgb, var(--chu-phu) 45%, transparent);
}

/* ---------- Đối chiếu hai hồ sơ khi duyệt trùng ---------- */

.doi-chieu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-4); }
/* Cột đối chiếu KHÔNG phải thẻ. Thẻ lồng trong thẻ là một anti-pattern
   của hallmark (gate 4), và ở đây nó cũng vô nghĩa về mặt nội dung. */
.doi-chieu .cot-hs {
  border: 1px solid var(--vien-mo);
  border-radius: var(--r);
  padding: var(--k-4);
}
.o-truong { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.o-truong + .o-truong { border-top: 1px solid var(--vien-mo); }
.o-truong .gia-tri { word-break: break-word; }
.o-truong.khac .gia-tri { color: var(--nhan); }

.ly-do-gop {
  width: 100%; margin-top: 12px; padding: 10px 12px;
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--r); color: var(--chu); font: inherit; font-size: 14.5px;
  resize: vertical; min-height: 62px;
}
.ly-do-gop:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }

.hang-nut { display: flex; gap: var(--k-3); margin-top: var(--k-4); flex-wrap: wrap; align-items: center; }

/* ---------- Đăng nhập ---------- */

.trang-dang-nhap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.the-dang-nhap {
  width: 100%; max-width: 372px;
  background: var(--the); border: 1px solid var(--vien-mo);
  border-radius: 7px; padding: 32px 30px;
}
.the-dang-nhap h1 { font-size: 26px; margin: 0 0 4px; font-weight: 500; }
.the-dang-nhap .phu-de { color: var(--chu-phu); font-size: 14.5px; margin: 0 0 26px; }
.o-nhap { margin-bottom: 14px; }
.o-nhap label { display: block; margin-bottom: 5px; }
.o-nhap input {
  width: 100%; padding: 10px 12px;
  background: var(--nen); border: 1px solid var(--vien);
  border-radius: var(--r); color: var(--chu); font: inherit;
}
.o-nhap input:focus-visible { outline: 2px solid var(--nhan); outline-offset: 1px; }
.the-dang-nhap .nut.chinh { width: 100%; margin-top: 8px; padding: 11px; }

/* ---------- Màn hẹp ---------- */

@media (max-width: 820px) {
  /* Trên màn hẹp menu lên TRÊN cùng, dù trong mã nguồn nó đứng sau nội dung.
     Bản cũ cho cả dải cuộn ngang: với ba mục thì được, với mười chín mục nằm trong năm
     nhóm thì không ai cuộn hết. Nay là một khối dọc bình thường, các nhóm vẫn gấp lại. */
  .khung { grid-template-columns: 1fr; }
  .cot-menu {
    order: -1;
    position: static; height: auto; overflow-y: visible;
    padding: var(--k-3) var(--k-4);
    border-left: none; border-bottom: 1px solid var(--vien-mo);
    gap: var(--k-3);
  }
  .dau-de-he { display: flex; align-items: baseline; gap: var(--k-2); padding: 0; }
  .dau-de-he .logo { width: 128px; }
  .dau-de-he span { margin-top: 0; }
  .chan-cot { padding: 0; }
  .muc { white-space: nowrap; }
  .noi-dung { padding: 18px 16px 60px; }
  .doi-chieu { grid-template-columns: 1fr; }

  /* Trên màn hẹp, thẻ trạng thái xuống dòng dưới thay vì đè lên liên hệ */
  .dong { grid-template-columns: 1fr; gap: 8px; }
  .cum-the { justify-content: flex-start; }

  /* Trục thời gian thu hẹp lề trái cho vừa màn */
  .truc { padding-left: 68px; }
  .truc .ray { left: 54px; }
  .moc-nam { width: 40px; }
  .moc-nam::after { right: -16px; width: 12px; }
  .viec { left: 68px; }
  .viec::before { left: -17.5px; }
  .khoang { left: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---------- Màn đang dựng ---------- */
/* Một thẻ, không phải một trang trống có dòng chữ giữa màn. Trang trống đọc như hỏng;
   thẻ có nội dung đọc như một lời hẹn đã tính trước. */
.dang-dung-the {
  max-width: 62ch;
  margin-top: var(--k-5);
  padding: var(--k-5);
  background: var(--the-mo);
  border: 1px solid var(--vien-mo);
  border-left: 2px solid var(--nhan);
  border-radius: var(--r);
}
.dd-nhan {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--nhan);
}
.dd-mo {
  margin: var(--k-2) 0 0; font-size: 15px; line-height: 1.6;
  color: var(--chu); overflow-wrap: anywhere;
}
.dd-nguon {
  display: flex; flex-wrap: wrap; gap: var(--k-1) var(--k-3);
  margin-top: var(--k-4); padding-top: var(--k-3);
  border-top: 1px solid var(--vien-mo);
  font-size: 13px; line-height: 1.55;
}
.dd-nguon-nhan { color: var(--chu-phu); flex: none; }
.dd-nguon-gt { color: var(--chu); font-family: var(--chu-so); min-width: 0; overflow-wrap: anywhere; }
.dd-chan {
  max-width: 62ch; margin: var(--k-4) 0 0;
  font-size: 13px; line-height: 1.6; color: var(--chu-phu);
}