:root{
  --do:#DB0A0A; --xanh:#0E4EAD; --den:#111; --xam:#5c6470;
  --vien:#e2e5ea; --nen:#f6f7f9; --trang:#fff;
  --vang:#fff8e1; --vien-vang:#f0c33c;
  --xanh-la:#1b7a3d; --nen-xanh-la:#eaf6ee;
  --nen-do:#fdecec;
  --cam:#C25E00; --nen-cam:#fff4e8;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--nen);color:var(--den);font-size:15px;line-height:1.55}
button{font-family:inherit;font-size:14px;cursor:pointer;border-radius:8px;border:1px solid var(--vien);background:var(--trang);padding:9px 16px}
button:hover{border-color:var(--xanh)}
button.chinh{background:var(--do);border-color:var(--do);color:#fff;font-weight:600}
button.chinh:hover{filter:brightness(1.1)}
button.phu{background:var(--xanh);border-color:var(--xanh);color:#fff}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font-family:inherit;font-size:15px;width:100%;padding:10px 12px;border:1px solid var(--vien);border-radius:8px;background:var(--trang)}
textarea{min-height:120px;resize:vertical;line-height:1.6}
a{color:var(--xanh)}
h1,h2,h3{margin:0 0 10px}
h1{font-size:24px}h2{font-size:19px}h3{font-size:16px}
.mo{color:var(--xam);font-size:13px}

/* khung */
#dangNhap{max-width:380px;margin:14vh auto;background:var(--trang);padding:34px;border-radius:14px;border:1px solid var(--vien)}
#khung{display:none;min-height:100vh}
#khung.hien{display:block}
header{background:var(--trang);border-bottom:1px solid var(--vien);padding:0 22px;display:flex;align-items:center;gap:22px;position:sticky;top:0;z-index:9}
header .hieu{font-weight:800;color:var(--xanh);font-size:19px;padding:14px 0}
header .hieu span{color:var(--do)}
nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
nav button{border:0;background:none;padding:16px 13px;border-bottom:3px solid transparent;border-radius:0;color:var(--xam);font-weight:500}
nav button.chon{color:var(--do);border-bottom-color:var(--do);font-weight:700}
nav button:hover{color:var(--den)}
header .toi{font-size:13px;color:var(--xam);white-space:nowrap}
main{max-width:1180px;margin:0 auto;padding:24px 22px 70px}

/* thẻ */
.the{background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:18px;margin-bottom:16px}
.luoi{display:grid;gap:14px}
.luoi.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.luoi.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.so{font-size:32px;font-weight:800;line-height:1.1}
.nhan{font-size:12.5px;color:var(--xam);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}

.canh-bao{background:var(--vang);border:1px solid var(--vien-vang);border-radius:10px;padding:13px 16px;margin-bottom:14px}
.canh-bao.do{background:var(--nen-do);border-color:var(--do)}
.canh-bao.xanh{background:var(--nen-xanh-la);border-color:var(--xanh-la)}

/* chọn nhiều */
.chon-o{display:flex;gap:10px;flex-wrap:wrap}
.o{border:2px solid var(--vien);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--trang);min-width:220px;flex:1}
.o:hover{border-color:var(--xanh)}
.o.chon{border-color:var(--do);background:#fff6f6}
.o b{display:block;margin-bottom:2px}

/* bước */
.buoc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.buoc div{font-size:12.5px;padding:6px 12px;border-radius:20px;background:var(--trang);border:1px solid var(--vien);color:var(--xam)}
.buoc div.dang{background:var(--do);border-color:var(--do);color:#fff;font-weight:600}
.buoc div.xong{background:var(--nen-xanh-la);border-color:var(--xanh-la);color:var(--xanh-la)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--vien);vertical-align:top}
th{font-size:12.5px;text-transform:uppercase;color:var(--xam);letter-spacing:.4px}
tr:last-child td{border-bottom:0}

.chip{display:inline-block;font-size:12px;padding:3px 9px;border-radius:20px;background:var(--nen);border:1px solid var(--vien);white-space:nowrap}
.chip.nhap{background:#eef1f5}
.chip.daLenLich{background:#e8f0fd;border-color:#9dbdf0;color:var(--xanh)}
.chip.daDang{background:var(--nen-xanh-la);border-color:var(--xanh-la);color:var(--xanh-la)}
.chip.daGo{background:var(--nen-do);border-color:var(--do);color:var(--do)}
.chip.dangGo{background:var(--vang);border-color:var(--vien-vang);color:#8a6000;font-weight:600}
.chip.tay{background:var(--vang);border-color:var(--vien-vang)}

/* báo nổi — xác nhận thao tác đã xong */
#khayBao{position:fixed;top:16px;right:16px;z-index:99;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px))}
.bao{background:var(--trang);border:1px solid var(--vien);border-left:5px solid var(--xanh);border-radius:10px;padding:13px 16px;box-shadow:0 6px 24px rgba(0,0,0,.13);animation:baoVao .18s ease-out;font-size:14.5px}
.bao.xong{border-left-color:var(--xanh-la)}
.bao.hong{border-left-color:var(--do)}
.bao.di{animation:baoRa .22s ease-in forwards}
.bao b{display:block;margin-bottom:2px}
.bao .mo{font-size:13px}
@keyframes baoVao{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes baoRa{to{opacity:0;transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){.bao,.bao.di{animation:none}}

/* nút đang chạy */
button.dangChay{position:relative;color:transparent !important}
button.dangChay::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:#fff;animation:xoay .7s linear infinite}
button.dangChay:not(.chinh):not(.phu)::after{color:var(--xam)}
@keyframes xoay{to{transform:rotate(360deg)}}

/* dòng vừa lưu — nháy nhẹ để mắt bắt được chỗ vừa đổi */
.vuaDoi{animation:nhay 1.4s ease-out}
@keyframes nhay{0%{background:#fff8d6}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.vuaDoi{animation:none}}

/* ═══ hiệu ứng radar đang quét ═══
   Thuần CSS, không thư viện. Chỉ là hiệu ứng — việc quét thật do máy treo làm. */
.quet-khung{
  background:radial-gradient(ellipse at 50% 40%,#0d2033 0%,#050d16 70%);
  border:1px solid #16405e;border-radius:14px;padding:26px 22px;margin-bottom:16px;
  position:relative;overflow:hidden;color:#8fd8ff
}
.quet-khung::before{                      /* lưới nền */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(#0e3a55 1px,transparent 1px),linear-gradient(90deg,#0e3a55 1px,transparent 1px);
  background-size:34px 34px;opacity:.35;pointer-events:none
}
.quet-trong{position:relative;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center}

.scope{position:relative;width:230px;height:230px;flex:0 0 auto}
.scope .vong{position:absolute;inset:0;margin:auto;border:1px solid rgba(90,200,255,.28);border-radius:50%}
.scope .v1{width:100%;height:100%}
.scope .v2{width:68%;height:68%}
.scope .v3{width:36%;height:36%}
.scope .truc{position:absolute;background:rgba(90,200,255,.22)}
.scope .tx{left:0;right:0;top:50%;height:1px}
.scope .ty{top:0;bottom:0;left:50%;width:1px}
.scope .nen{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(20,90,130,.35) 0%,rgba(5,20,32,.9) 75%)}

.scope .tia{                              /* cánh quét */
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(219,10,10,.55) 0deg,
    rgba(219,10,10,.16) 26deg,
    rgba(219,10,10,0) 62deg,
    rgba(219,10,10,0) 360deg);
  animation:quetVong 3.4s linear infinite
}
.scope .kim{                              /* vạch dẫn đầu */
  position:absolute;left:50%;top:50%;width:50%;height:1.5px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,90,90,.95),rgba(255,90,90,0));
  animation:quetVong 3.4s linear infinite
}
@keyframes quetVong{to{transform:rotate(360deg)}}

.scope .cham{                             /* đốm mục tiêu */
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:#7dffb0;box-shadow:0 0 10px 3px rgba(125,255,176,.55);
  opacity:0;animation:hienCham 3.4s linear infinite
}
@keyframes hienCham{
  0%,4%{opacity:0;transform:scale(.4)}
  8%{opacity:1;transform:scale(1)}
  55%{opacity:.5}
  100%{opacity:0;transform:scale(.7)}
}
.scope .tam{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#8fd8ff;box-shadow:0 0 10px #8fd8ff}

.quet-chu{flex:1 1 260px;min-width:250px;font-family:Consolas,"Courier New",monospace;font-size:13px}
.quet-chu .tieu{color:#ff6b6b;font-weight:700;letter-spacing:2px;font-size:15px;margin-bottom:10px}
.quet-chu .dong{color:#7fc7ea;line-height:1.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quet-chu .dong b{color:#7dffb0;font-weight:600}
.quet-chu .nhap{animation:nhapNhay 1.1s steps(2) infinite}
@keyframes nhapNhay{50%{opacity:.25}}

.quet-vach{                               /* vạch quét ngang cả khung */
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(125,255,176,.5),transparent);
  animation:vachChay 4.2s ease-in-out infinite
}
@keyframes vachChay{0%,100%{top:6%}50%{top:94%}}

@media (prefers-reduced-motion:reduce){
  .scope .tia,.scope .kim,.scope .cham,.quet-vach,.quet-chu .nhap{animation:none}
  .scope .tia{opacity:.5}
  .scope .cham{opacity:1}
}

/* thanh tiến trình */
.thanh{height:7px;background:var(--vien);border-radius:20px;overflow:hidden;min-width:110px}
.thanh i{display:block;height:100%;background:var(--xanh);border-radius:20px;transition:width .3s}
.thanh.xanh i{background:var(--xanh-la)}
.thanh.do i{background:var(--do)}

.bai-xem{white-space:pre-wrap;background:var(--nen);border:1px solid var(--vien);border-radius:10px;padding:16px;font-size:14.5px;line-height:1.7}
.hang{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.giua{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.trong{text-align:center;padding:44px 20px;color:var(--xam)}
label{display:block;font-weight:600;font-size:13.5px;margin:14px 0 5px}
.loi{color:var(--do);font-size:13.5px;margin-top:8px}
code{background:var(--nen);padding:2px 6px;border-radius:4px;font-size:13px}
.soan{font-family:Consolas,"Courier New",monospace;font-size:13px;min-height:460px;line-height:1.55}

/* ───────── khay ĐẾN GIỜ ĐĂNG (Đường A) ─────────
   Hệ thống không tự đăng. Khay này là cái CHUÔNG BÁO, không phải cái tay đăng. */
.thanh.cam i{background:var(--cam)}
.khay-gio{background:var(--nen-cam);border:2px solid var(--cam);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.khay-gio > h2{color:#8a4b00;display:flex;align-items:center;gap:9px;font-size:18px}
.khay-gio .dem{background:var(--cam);color:#fff;border-radius:20px;padding:1px 11px;font-size:14px}
.muc-gio{background:var(--trang);border:1px solid var(--vien);border-radius:10px;padding:14px 16px;margin-top:12px}
.muc-gio .dinh{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.muc-gio .tre{color:var(--cam);font-weight:700;white-space:nowrap;font-size:13.5px}
.muc-gio .tre.chua{color:var(--xam);font-weight:600}
.muc-gio pre{background:var(--nen);border:1px solid var(--vien);border-radius:8px;padding:12px 14px;
  margin:11px 0 0;max-height:190px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:inherit;font-size:14px;line-height:1.6}
.muc-gio .nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;align-items:center}
.vi-sao{font-size:12.5px;color:#8a4b00;background:var(--nen-cam);border-radius:7px;padding:6px 10px;margin-top:9px}
.thieu-dia-chi{font-size:12.5px;color:var(--xam);margin-top:9px}
nav button .chuong{background:var(--cam);color:#fff;border-radius:20px;padding:0 7px;font-size:11.5px;margin-left:5px;font-weight:700}

/* ───────── thanh tình trạng — hiện trên MỌI màn hình ─────────
   Nguyên tắc anh Khải chốt 23/08/2026: đặt lệnh xong, hệ thống chạy ngầm,
   nên luôn phải có đường phản hồi ngược để biết việc đang chạy hay không. */
#thanhTinhTrang:empty{display:none}
.tt-thanh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 22px;border-bottom:1px solid var(--vien);background:var(--trang);font-size:13.5px;
  position:sticky;top:52px;z-index:8}
.tt-thanh .cham{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tt-thanh.im{color:var(--xam)}
.tt-thanh.im .cham{background:#c7ccd4}
.tt-thanh.chay{background:#eef3fb;border-color:#bcd2f0}
.tt-thanh.chay .cham{background:var(--xanh);animation:tt-nhap 1.1s ease-in-out infinite}
.tt-thanh.cho{background:var(--vang);border-color:var(--vien-vang)}
.tt-thanh.cho .cham{background:#c9a227}
.tt-thanh.cam{background:var(--nen-cam);border-color:var(--cam)}
.tt-thanh.cam .cham{background:var(--cam);animation:tt-nhap 1.1s ease-in-out infinite}
.tt-thanh.do{background:var(--nen-do);border-color:var(--do)}
.tt-thanh.do .cham{background:var(--do)}
@keyframes tt-nhap{0%,100%{opacity:1}50%{opacity:.25}}
.tt-thanh b{font-weight:600}
.tt-thanh .may{margin-left:auto;color:var(--xam);font-size:12.5px}
.tt-thanh button{padding:3px 11px;font-size:12.5px}
.tt-chi-tiet{padding:10px 22px 14px;border-bottom:1px solid var(--vien);background:var(--nen)}
.tt-chi-tiet .dong{display:flex;gap:12px;align-items:center;padding:6px 0;flex-wrap:wrap;font-size:13px}
.tt-chi-tiet .thanh{min-width:90px;max-width:130px}
.chip.daHuy{background:#eef1f5;border-color:#c7ccd4;color:var(--xam);text-decoration:line-through}

/* ── Bước 6: khung sửa nội dung ──────────────────────────────────────────────
   Đây là chỗ người vận hành bỏ nhiều thời gian nhất trong cả webapp — đọc bài
   máy viết rồi sửa. Trước đây nó là một thẻ trắng ngang hàng với mọi thẻ khác,
   nên mở bài ra mắt không biết nhìn vào đâu. Cho nó nổi hẳn lên.                */
.the.viet{border:2px solid var(--xanh);padding:0;overflow:hidden}
.the.viet > .dinh{background:var(--xanh);color:#fff;padding:13px 18px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.the.viet > .dinh h3{margin:0;color:#fff;font-size:16.5px}
.the.viet > .dinh .mo{color:#d7e3f6;margin-top:2px}
.the.viet > .than{padding:18px}
.the.viet .nhan-kenh{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.the.viet .nhan-kenh:first-child{margin-top:0}
.the.viet .nhan-kenh b{font-size:14.5px}
.the.viet textarea{min-height:340px;font-size:15.5px;line-height:1.72;padding:16px 18px;
  border:1px solid var(--vien);border-radius:10px}
.the.viet textarea:focus{outline:none;border-color:var(--xanh);
  box-shadow:0 0 0 3px rgba(14,78,173,.13)}
.the.viet textarea:disabled{background:var(--nen);color:var(--xam)}
.dem-chu{font-size:12.5px;color:var(--xam);white-space:nowrap}