/* Bảng theo dõi kiểm thử — giao diện.
   Số canh phải và dùng `tabular-nums` như mọi bảng khác của dự án: mắt phải
   cộng nhẩm được cột "đạt" và cột "giây" mà không phải dò từng dòng. */

:root {
  --nen: #f6f7f9;      --the: #ffffff;    --vien: #e2e5ea;
  --chu: #1a1d21;      --mo: #6b7280;     --nhat: #eef1f5;
  --xanh: #157f3d;     --xanh-nen: #e7f5ec;
  --do: #c0332b;       --do-nen: #fdeceb;
  --vang: #9a6b00;     --vang-nen: #fdf3e0;
  --chinh: #1f5fbf;    --chinh-nen: #e8f0fd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #14161a;    --the: #1c1f24;    --vien: #2c3138;
    --chu: #e7eaee;    --mo: #9aa3ae;     --nhat: #24282e;
    --xanh: #5fd08a;   --xanh-nen: #17301f;
    --do: #ff8b80;     --do-nen: #331a18;
    --vang: #e5b65a;   --vang-nen: #322818;
    --chinh: #7cb0ff;  --chinh-nen: #17233a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--mo); margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 10px; }
.nho { color: var(--mo); font-size: 12px; font-weight: 400; }
.so, .phai, td.phai, th.phai { text-align: right; font-variant-numeric: tabular-nums; }
.xanh { color: var(--xanh); } .do { color: var(--do); } .day { flex: 1; }
/* `display` của .den đè lên `display:none` mặc định của [hidden] — không có
   dòng dưới thì cái đèn đã tắt vẫn phủ kín màn hình và nuốt mọi cú bấm. */
[hidden] { display: none !important; }

/* ── Thanh đỉnh ───────────────────────────────────────────────────── */
.dinh {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; background: var(--the); border-bottom: 1px solid var(--vien);
}
.dinh-ten b { font-size: 15px; }
.dinh-ten .nho { display: block; }
.dinh-phai { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cham { width: 9px; height: 9px; border-radius: 50%; background: var(--mo); }
.cham.noi { background: var(--xanh); }
.cham.chay { background: var(--chinh); animation: dap 1s infinite; }
@keyframes dap { 50% { opacity: .25; } }

/* ── Khung hai cột ────────────────────────────────────────────────── */
.khung { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
@media (max-width: 980px) { .khung { grid-template-columns: 1fr; } .cot-trai { position: static !important; } }
.cot-trai {
  position: sticky; top: 62px; background: var(--the); border: 1px solid var(--vien);
  border-radius: 10px; padding: 14px;
}
.cot-phai { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hop { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 14px; }
.hop summary { cursor: pointer; }
.hop summary h3 { display: inline; }
.goi-y { margin: 0 0 12px; font-size: 12px; color: var(--mo); line-height: 1.45; }
.goi-y b { color: var(--chu); font-weight: 600; }

/* ── Nút, ô tích ──────────────────────────────────────────────────── */
.nut {
  font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--vien);
  background: var(--the); color: var(--chu); cursor: pointer;
}
.nut:hover { background: var(--nhat); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut-chinh { width: 100%; margin-top: 10px; background: var(--chinh); border-color: var(--chinh); color: #fff; font-weight: 600; }
.nut-chinh:hover { filter: brightness(1.08); background: var(--chinh); }
.nut-do { background: var(--do-nen); border-color: var(--do); color: var(--do); }
.nut-nho { padding: 4px 10px; font-size: 12px; }
.lien { background: none; border: 0; color: var(--chinh); cursor: pointer; font: inherit; font-size: 12px; padding: 0; }
.lien:hover { text-decoration: underline; }
.o-tich { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; cursor: pointer; }

.doan { display: flex; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.doan-nut { flex: 1; font: inherit; font-size: 13px; padding: 6px 0; border: 0; background: var(--the); color: var(--chu); cursor: pointer; }
.doan-nut + .doan-nut { border-left: 1px solid var(--vien); }
.doan-nut.chon { background: var(--chinh-nen); color: var(--chinh); font-weight: 600; }
.hang-chon-nhanh { display: flex; gap: 12px; margin-bottom: 8px; }

/* ── Danh sách chặng ở cột trái ───────────────────────────────────── */
.ds-luong { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.ds-luong li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--vien); }
.ds-luong li:hover { background: var(--nhat); }
.ds-luong .ten { flex: 1; min-width: 0; }
.ds-luong .ten b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-luong .ma { color: var(--mo); font-variant-numeric: tabular-nums; }
.chip { font-size: 11px; padding: 1px 6px; border-radius: 20px; border: 1px solid var(--vien); color: var(--mo); cursor: pointer; background: none; font-family: inherit; }
.chip:hover { border-color: var(--chinh); color: var(--chinh); }
.chip.do { border-color: var(--do); color: var(--do); background: var(--do-nen); }
.chip.dang { border-color: var(--chinh); color: var(--chinh); background: var(--chinh-nen); }
.lenh { margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--mo); word-break: break-all; }

/* ── Tab ──────────────────────────────────────────────────────────── */
.the-tab { display: flex; gap: 4px; }
.tab { font: inherit; padding: 7px 14px; border: 1px solid var(--vien); border-radius: 8px; background: var(--the); color: var(--mo); cursor: pointer; }
.tab.chon { color: var(--chu); font-weight: 600; border-color: var(--chinh); background: var(--chinh-nen); }
.tab .the { margin-left: 6px; }

/* ── Tiến độ ──────────────────────────────────────────────────────── */
.tien-do-so { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 12px; }
.tien-do-so .nhan { display: block; font-size: 11px; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; }
.tien-do-so .so { font-size: 22px; font-weight: 600; }
.thanh { height: 8px; border-radius: 4px; background: var(--nhat); overflow: hidden; }
.thanh-trong { height: 100%; width: 0; background: var(--xanh); transition: width .25s; }
.thanh-trong.co-do { background: linear-gradient(90deg, var(--xanh) var(--tile-dat, 100%), var(--do) 0); }
.dang-lam { margin: 10px 0 0; color: var(--mo); font-size: 13px; }
.dang-lam b { color: var(--chu); }

/* ── Hành trình: các chặng nối nhau thành một đường ────────────────── */
.hanh-trinh { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
/* Sợi dây dọc nối các chặng — thứ nói rằng đây là MỘT vòng đi liền mạch,
   chứ không phải mười sáu tệp rời nhau xếp cạnh nhau. */
.hanh-trinh::before { content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: var(--vien); }
.chang { position: relative; margin-bottom: 8px; background: var(--the); border: 1px solid var(--vien); border-radius: 10px; }
.chang > .cham-chang {
  position: absolute; left: -26px; top: 13px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--nhat); border: 2px solid var(--vien); color: var(--mo);
  display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
}
.chang.tt-xong { border-color: color-mix(in srgb, var(--xanh) 35%, var(--vien)); }
.chang.tt-xong > .cham-chang { background: var(--xanh-nen); border-color: var(--xanh); color: var(--xanh); }
.chang.tt-do { border-color: var(--do); }
.chang.tt-do > .cham-chang { background: var(--do-nen); border-color: var(--do); color: var(--do); }
.chang.tt-dang { border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nen); }
.chang.tt-dang > .cham-chang { background: var(--chinh-nen); border-color: var(--chinh); color: var(--chinh); animation: dap 1s infinite; }
.chang.tt-ngoai { opacity: .55; }

.chang-dau { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.chang-dau:hover { background: var(--nhat); border-radius: 9px; }
.chang-ma { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mo); font-size: 12px; min-width: 20px; }
.chang-ten { flex: 1; min-width: 0; }
.chang-ten b { display: block; font-size: 14px; font-weight: 600; }
.chang-ten .nho { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chang-mo-ta {
  margin-top: 2px; font-size: 12px; color: var(--mo); line-height: 1.45;
  /* Hai dòng: đủ để biết chặng này soi gì, chưa đủ để đẩy các chặng khác
     khỏi màn hình. Muốn đọc hết thì mở chặng ra, có nguyên đoạn ở trong. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chang-so { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chang-so b { font-weight: 600; }
.chang-giay { font-size: 12px; color: var(--mo); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.mo-dong { color: var(--mo); font-size: 11px; width: 14px; text-align: center; transition: transform .15s; }
.chang.mo .mo-dong { transform: rotate(180deg); }
.chang-trong { padding: 0 12px 12px 12px; border-top: 1px solid var(--vien); }
.chang-trong h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mo); font-weight: 600; }

/* Một dòng = một test case, viết bằng tiếng Việt của người viết test. */
.viec { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.viec:hover { background: var(--nhat); }
.viec .dau { width: 14px; text-align: center; flex: none; }
.viec.dat .dau { color: var(--xanh); }
.viec.hong { background: var(--do-nen); }
.viec.hong .dau { color: var(--do); }
.viec.cho { color: var(--mo); }
.viec .viec-ten { flex: 1; min-width: 0; }
.viec .giay { color: var(--mo); font-variant-numeric: tabular-nums; font-size: 12px; }
.viec { cursor: pointer; }
.viec .viec-dem { color: var(--mo); font-size: 11.5px; font-variant-numeric: tabular-nums; flex: none; }
.viec .mo-dong { font-size: 10px; color: var(--mo); flex: none; transition: transform .12s; }
.viec.mo { background: var(--nhat); }
.viec.mo .mo-dong { transform: rotate(180deg); }
.viec .viec-ten:hover { text-decoration: underline; }

/* Kịch bản của một việc: từng điều nó đã kiểm, rồi tới màn hình đã chụp. */
.kich-ban { margin: 2px 0 10px 28px; padding: 8px 10px; background: var(--the); border: 1px solid var(--vien); border-radius: 8px; }
.kich-ban > .nho { margin-bottom: 6px; }
.ds-kiem { list-style: none; margin: 0 0 8px; padding: 0; }
.kiem { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; font-size: 12.5px; line-height: 1.5; }
.kiem .dau { width: 12px; flex: none; text-align: center; }
.kiem.dat .dau { color: var(--xanh); }
.kiem.hong { color: var(--do); }
.kiem .kiem-chu { flex: 1; min-width: 0; }
.kiem .kiem-duong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--mo); }
.kiem .kiem-dong { flex: none; color: var(--mo); font-size: 11px; font-variant-numeric: tabular-nums; }
.kiem-chi-tiet { margin: 0 0 4px 20px; padding: 4px 8px; background: var(--do-nen); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre-wrap; }
.kich-ban .dai-anh { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.viec-loi { margin: 2px 0 8px 28px; padding: 8px 10px; background: var(--the); border: 1px solid var(--do); border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow: auto; max-height: 240px; }
.viec-loi .nut { margin-top: 8px; }

/* ── Chặng này soi những gì ────────────────────────────────────────── */
.soi-gi { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 9px; background: var(--nhat); }
.soi-gi > summary { cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mo); }
.soi-tep + .soi-tep { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vien); }
.soi-nhan { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--chinh); }
.soi-tom { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; }
.soi-y { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--mo); }
.soi-y li { margin: 2px 0; }

/* ── Dòng đầu phần việc ────────────────────────────────────────────── */
.dau-viec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dau-viec h4 { flex: 1; min-width: 160px; }
.doan-nho { margin: 0; flex: none; width: auto; }
.doan-nho .doan-nut { padding: 4px 12px; font-size: 12px; }

/* ── Dải ảnh ──────────────────────────────────────────────────────── */
.dai-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* `margin: 0` — <figure> mặc định của trình duyệt có lề 40px hai bên, để
   nguyên thì mỗi ô ảnh teo lại còn nửa cột lưới. */
.anh-o { position: relative; margin: 0; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--nhat); }
.anh-o:hover { border-color: var(--chinh); }
.anh-o img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: top; }
.anh-o figcaption { padding: 5px 7px; font-size: 11px; color: var(--mo); }
.anh-o figcaption b { display: block; color: var(--chu); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anh-o .anh-duong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anh-o .anh-viec { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tiêu đề nhóm ảnh theo luồng: đủ nặng để mắt bám được lúc cuộn qua hai trăm
   tấm, nhưng không to bằng tiêu đề mục — nó chia nhỏ một mục, không mở mục mới. */
.nhom-anh { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 7px; font-size: 12.5px; font-weight: 600; }
.nhom-anh:first-child { margin-top: 4px; }
.nhom-anh .ma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--chinh); }
.nhom-anh .nho { margin-left: auto; font-weight: 400; }
.anh-o.hong { border-color: var(--do); }
/* Cờ đỏ nằm ĐÈ lên ảnh, không nằm dưới chú thích: người ta lướt dải ảnh bằng
   mắt chứ không đọc từng dòng, mà thứ cần thấy trước là tấm nào có lỗi. */
.anh-o .anh-co { position: absolute; top: 5px; right: 5px; padding: 1px 6px; border-radius: 20px; font-size: 10.5px; background: var(--do); color: #fff; }

/* ── Tổng kết ─────────────────────────────────────────────────────── */
.ket-luan { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--vien); background: var(--the); }
.ket-luan.xanh-nen { background: var(--xanh-nen); border-color: var(--xanh); }
.ket-luan.do-nen { background: var(--do-nen); border-color: var(--do); }
.ket-luan .bieu { font-size: 30px; line-height: 1; }
.ket-luan b { display: block; font-size: 18px; }
.ket-luan .nho { display: block; margin-top: 2px; }
.ban-do { display: flex; flex-wrap: wrap; gap: 6px; }
.o-chang {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--vien); background: var(--nhat); color: var(--mo); font-size: 12px; cursor: pointer;
}
.o-chang b { font-variant-numeric: tabular-nums; }
.o-chang.tt-xong { background: var(--xanh-nen); border-color: var(--xanh); color: var(--xanh); }
.o-chang.tt-do { background: var(--do-nen); border-color: var(--do); color: var(--do); font-weight: 600; }
.o-chang.tt-dang { background: var(--chinh-nen); border-color: var(--chinh); color: var(--chinh); }
.hang-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.the-so { display: flex; gap: 24px; flex-wrap: wrap; }
.the-so > div .nhan { display: block; font-size: 11px; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; }
.the-so > div b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ── Bảng ─────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mo); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--vien); }
td { padding: 6px 8px; border-bottom: 1px solid var(--vien); vertical-align: middle; }
tbody tr:hover { background: var(--nhat); }
td.trong, li.trong, p.trong { color: var(--mo); text-align: center; padding: 18px; }
.ten-tep { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.mini { display: flex; height: 6px; border-radius: 3px; background: var(--nhat); overflow: hidden; width: 120px; flex: none; }
.mini > i { display: block; height: 100%; background: var(--xanh); }
.mini > i.co-do { background: var(--do); }

.ds-do { list-style: none; margin: 0; padding: 0; }
.ds-do > li { border: 1px solid var(--do); border-radius: 8px; margin-bottom: 8px; background: var(--do-nen); }
.ds-do summary { padding: 8px 10px; cursor: pointer; font-weight: 500; }
.ds-do .tep-do { display: block; font-size: 11.5px; color: var(--mo); font-family: ui-monospace, Menlo, monospace; }
.ds-do pre { margin: 0; padding: 10px; background: var(--the); border-top: 1px solid var(--vien); border-radius: 0 0 7px 7px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.the { font-size: 12px; padding: 2px 9px; border-radius: 20px; background: var(--nhat); color: var(--mo); }
.the-xanh { background: var(--xanh-nen); color: var(--xanh); }
.the-do { background: var(--do-nen); color: var(--do); }
.the-chay { background: var(--chinh-nen); color: var(--chinh); }

.nhat-ky { max-height: 300px; overflow: auto; background: var(--nhat); border-radius: 8px; padding: 10px; font-size: 12px; margin: 10px 0 0; white-space: pre-wrap; }

/* ── Đèn xem ──────────────────────────────────────────────────────── */
.den { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.den-trong { background: var(--the); border-radius: 10px; max-width: 96vw; max-height: 94vh; overflow: auto; padding: 14px; }
.den-trong img { max-width: 100%; display: block; border: 1px solid var(--vien); }
.den-trong h3 { margin-bottom: 6px; }

/* Xem ảnh: phóng to thu nhỏ, kéo, chuyển ảnh trước/sau. */
.den-trong.la-anh { padding: 0; width: 96vw; height: 94vh; max-width: none; max-height: none; overflow: hidden; display: flex; flex-direction: column; }
.den-trong.la-anh .xem { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.xem-dinh { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--vien); flex: none; }
.xem-ten { min-width: 0; flex: 1; }
.xem-ten b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xem-ten .nho { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bảng lỗi của tấm ảnh đang mở. `flex: none` + cuộn riêng: ảnh vẫn phải
   chiếm gần hết khung, một màn hình nổ hai chục lỗi không được phép đẩy
   ảnh ra khỏi tầm nhìn. */
.xem-loi {
  flex: none; max-height: 22vh; overflow: auto; padding: 8px 12px;
  border-bottom: 1px solid var(--vien); background: var(--do-nen); color: var(--chu);
}
.xem-loi > b { display: block; font-size: 12.5px; color: var(--do); margin-bottom: 5px; }
.xem-loi-dong {
  display: flex; gap: 7px; align-items: flex-start; padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
  word-break: break-word;
}
.the-loi {
  flex: none; padding: 0 6px; border-radius: 4px; font-family: inherit; font-size: 10.5px;
  line-height: 18px; color: #fff;
}
.the-loi.api { background: var(--do); }
.the-loi.console { background: var(--vang); }
.xem-nut { display: flex; align-items: center; gap: 6px; flex: none; }
.xem-nut .nut { padding: 5px 10px; }
.xem-nut .dem { font-size: 12px; color: var(--mo); font-variant-numeric: tabular-nums; min-width: 62px; text-align: center; }
.xem-khung { flex: 1; min-height: 0; overflow: hidden; background: var(--nhat); position: relative; cursor: grab; display: flex; align-items: center; justify-content: center; }
.xem-khung.keo { cursor: grabbing; }
.xem-khung img { max-width: none; max-height: none; border: 0; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.xem-chan { flex: none; padding: 7px 12px; border-top: 1px solid var(--vien); font-size: 12px; color: var(--mo); display: flex; gap: 14px; }
.xem-chan kbd { font: inherit; font-size: 11px; border: 1px solid var(--vien); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--chu); }

.phan-trang { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hang-loc { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hang-loc .o-tich { margin: 0; }
select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--vien); background: var(--the); color: var(--chu); }
.bang-luot .ma-luot { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--chinh); cursor: pointer; }
.bang-luot .ma-luot:hover { text-decoration: underline; }
.bang-luot .lenh-o { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--mo); }
.mini.trong-suot { background: none; }

/* Ô tích bị khoá (build tại chỗ trên máy chủ) — vẫn đọc được lý do ở title. */
.o-tich.tat { opacity: .55; cursor: not-allowed; }
.o-tich.tat input { cursor: not-allowed; }

/* ── Theo màn hình của ứng dụng ───────────────────────────────────── */
/* Trục "trang": mỗi dòng là một màn hình của phần mềm, kể cả màn hình chưa
   lượt nào đi qua. Vàng = chưa ai chạm tới; đó là chỗ trống trong vùng phủ,
   không phải lỗi, nên không được tô đỏ như test hỏng. */
.vang { color: var(--vang); }

.dau-nhom-trang { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dau-nhom-trang .nho { margin-left: auto; font-weight: 400; }

.ds-trang { display: flex; flex-direction: column; gap: 4px; }
.trang-o { border: 1px solid var(--vien); border-radius: 9px; background: var(--the); }
.trang-o.tt-xong { border-color: color-mix(in srgb, var(--xanh) 30%, var(--vien)); }
.trang-o.tt-do { border-color: var(--do); }
.trang-o.tt-chua { background: var(--nhat); border-style: dashed; }

/* Lưới cột cố định, KHÔNG phải flex space-between.
   Trên màn 1900px, flex đẩy tên ra mép trái và con số ra mép phải cách nhau
   1500px — mắt không nối được hai đầu, và dòng dưới không thẳng cột với dòng
   trên nên cũng không quét dọc được. Cột cố định thì cả 48 dòng thẳng hàng,
   và khoảng trống co giãn dồn vào một chỗ duy nhất trước mấy cái nút. */
.trang-dau { display: grid; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer;
  grid-template-columns: 18px 16px minmax(190px, 340px) 104px 112px 104px 62px 1fr auto 14px; }
@media (max-width: 1180px) {
  .trang-dau { grid-template-columns: 18px 16px minmax(150px, 1fr) 0 96px 100px 0 0 auto 14px; }
  .trang-nhom, .trang-anh, .trang-luong { display: none; }
}
.trang-dau:hover { background: var(--nhat); border-radius: 8px; }
.trang-dau > .dau { width: 16px; flex: none; text-align: center; }
.trang-o.tt-xong .trang-dau > .dau { color: var(--xanh); }
.trang-o.tt-do .trang-dau > .dau { color: var(--do); }
.trang-o.tt-chua .trang-dau > .dau { color: var(--vang); }
.trang-ten { flex: 1; min-width: 0; }
.trang-ten b { font-weight: 600; font-size: 13.5px; }
.trang-duong {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trang-luong { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%; }
/* Số canh phải, tabular-nums — §2. Thanh phủ nằm trước con số vì mắt đọc
   độ dài trước, con số chỉ để chép lại. */
.trang-dem { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.phu-thanh { flex: 1; min-width: 34px; height: 6px; border-radius: 3px; background: var(--vien);
  overflow: hidden; display: flex; }
.phu-thanh i { display: block; height: 100%; }
.phu-dat { background: var(--xanh); }
.phu-hong { background: var(--do); }
.trang-luc { font-size: 12px; color: var(--mo); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.trang-anh { font-size: 12px; color: var(--mo); text-align: right; white-space: nowrap; }
.trang-nhom { font-size: 11px; color: var(--mo); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* Khu vực: cái đầu tiên là chỗ phải soi, nên nó được viền màu; ba khu sau
   nhạt dần theo đúng mức độ cần chú ý. */
/* Chặn bề ngang lại. Trên màn 1900px mà để dòng chạy hết chiều rộng thì nút
   «Chạy lại» nằm cách tên trang 1,400px — đúng cái khoảng cách khiến người ta
   bấm nhầm dòng. Rộng chừng này là vừa hết một tầm mắt. */
.khu, #tab-man-hinh > .hop { max-width: 1340px; }
.khu .dau-nhom-trang { margin-bottom: 2px; }
.trang-dau-nhan { padding: 0 10px 4px; cursor: default; font-size: 11px; color: var(--mo);
  text-transform: uppercase; letter-spacing: .04em; }
.trang-dau-nhan:hover { background: none; }
.trang-dau-nhan .trang-dem, .trang-dau-nhan .trang-luc, .trang-dau-nhan .trang-anh { text-align: right; display: block; }
.the-vang { background: color-mix(in srgb, var(--vang) 16%, transparent); color: #92400e; }
.khu-y { margin: 0 0 10px; color: var(--mo); }
.khu-dau { width: 18px; text-align: center; font-weight: 700; }
.khu-do { border-color: var(--do); }
.khu-do .khu-dau { color: var(--do); }
.khu-chua-chay .khu-dau { color: #d97706; }
.khu-dat .khu-dau { color: var(--xanh); }
.khu-khong-tc { background: var(--nhat); }
.khu-khong-tc .khu-dau { color: var(--mo); }
.khoi-tc-db { margin: 0; padding: 5px 10px; font-size: 12px; color: var(--mo);
  background: var(--nhat); border-bottom: 1px solid var(--vien); }
.trang-o.mo .mo-dong { transform: rotate(180deg); }
.trang-trong { padding: 0 10px 10px 36px; border-top: 1px solid var(--vien); }
.trang-trong > .nho { margin: 8px 0 5px; }
.trang-trong .dai-anh { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ds-viec-trang { list-style: none; margin: 0 0 10px; padding: 0; }
.ds-viec-trang li { padding: 1px 0; font-size: 12.5px; }
.ds-viec-trang .lien { font-size: 12.5px; text-align: left; }

/* Đầu một nhóm ảnh trong chặng: cùng một chặng đi qua chục màn hình, cần một
   vạch chia đủ rõ để mắt biết dải ảnh dưới đây thuộc màn hình nào. */
.dai-dau {
  display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--vien); font-size: 12.5px;
}
.dai-dau > b { font-weight: 600; }
.dai-dau .trang-duong { display: inline; flex: 1; min-width: 0; }
.dai-dau .nho { flex: none; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .trang-luong { display: none; }
  .trang-trong { padding-left: 10px; }
}

/* ── Tab «Trang & testcase»: ô tích, nút chạy lại, bộ trường hợp ───────────
   Dòng trang giờ mang ba thứ trên cùng một hàng — ô tích, con số, nút chạy —
   nên phần đầu dòng phải có chỗ cố định cho từng thứ, không thì mỗi dòng lại
   đẩy tên trang sang một chỗ khác và mắt không dò được theo cột. */
.o-chon-trang { flex: none; width: 16px; height: 16px; margin: 0 2px 0 0; cursor: pointer; }
.o-vang { display: inline-block; }
.trang-chay { flex: none; display: flex; gap: 6px; }
.trang-chay .nut { white-space: nowrap; }
.nut-mo { opacity: .75; }
.hang-chay-trang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--vien); }
.hang-chay-trang .lenh { margin: 0; }
/* `.nut-chinh` sinh ra cho nút to ở cột trái nên mang sẵn `width:100%`. Ở đây
   nó nằm trong một hàng cùng mấy chữ khác — để nguyên thì thành một dải xanh
   vắt ngang màn hình, trông như thanh tiến trình chứ không như một cái nút. */
.hang-chay-trang .nut-chinh { width: auto; margin-top: 0; }

.trang-o.tt-dang { border-left-color: #d97706; }

.khoi-tc { margin: 0 0 12px; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; }
.khoi-tc-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--nhat); }
.khoi-tc-dau .day { flex: 1; }
.ds-tc { list-style: none; margin: 0; padding: 0; }
.ds-tc li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  padding: 6px 10px; border-top: 1px solid var(--vien); cursor: pointer; font-size: 13px; }
.ds-tc li:hover { background: var(--nhat); }
.ds-tc code { font-size: 12px; color: var(--mo); }
.ds-tc .dau { flex: none; width: 14px; text-align: center; }
.tc-dat > .dau { color: var(--xanh); }
.tc-hong > .dau { color: var(--do); }
.tc-hong { background: var(--do-nen); }
.tc-chua > .dau { color: var(--mo); }
.tc-loi { flex-basis: 100%; margin-left: 20px; color: var(--do); font-size: 12px;
  white-space: pre-wrap; word-break: break-word; }

/* Hộp xem một việc test: dòng tóm tắt lượt gần nhất, trước khi tới nhật ký
   từng điều đã kiểm. Xếp ngang để đọc một cái là hết, không phải cuộn. */
.hop-test .test-tom { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 14px;
  padding: 10px 12px; border: 1px solid var(--vien); border-left-width: 3px; border-radius: 8px;
  background: var(--nhat); }
.hop-test .test-tom.dat { border-left-color: var(--xanh); }
.hop-test .test-tom.hong { border-left-color: var(--do); }
.hop-test .test-o { display: flex; flex-direction: column; gap: 2px; }
.hop-test .test-o b { font-size: 13px; }
.hop-test .ds-kiem { margin: 6px 0 14px; }
.hop-test .viec-loi { margin: 0 0 14px; }