:root{--xanh:#2e8b57;--vang:#d9a400;--do:#c0392b;--nen:#f6f8fa;--chu:#1f2328;--mo:#656d76;--vien:#d0d7de;--chinh:#1f4e79;--chinh2:#0969da}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--nen);color:var(--chu);font-size:14px}
.top{background:#24292f;color:#fff;display:flex;align-items:center;gap:18px;padding:0 24px;height:56px}
.top .logo{font-weight:800;font-size:18px;letter-spacing:.5px}.top .logo span{color:#8fd3a8}
.top a{color:#fff;text-decoration:none;opacity:.9}.top .sp{flex:1}.top .av{width:30px;height:30px;border-radius:50%;background:#8fd3a8;color:#24292f;display:flex;align-items:center;justify-content:center;font-weight:700}
.sub{background:#fff;border-bottom:1px solid var(--vien);padding:0 24px;display:flex;gap:4px;height:46px;align-items:end}
.sub a{padding:10px 12px;border-bottom:2px solid transparent;color:var(--chu);text-decoration:none}.sub a.on{border-color:#fd8c73;font-weight:600}
.w{max-width:1180px;margin:0 auto;padding:22px 24px}
.card{background:#fff;border:1px solid var(--vien);border-radius:8px;padding:18px 20px;margin-bottom:16px}
h1{font-size:22px;margin:0 0 6px}h2{font-size:17px;margin:0 0 10px}h3{font-size:14px;margin:0 0 8px;color:var(--mo);text-transform:uppercase;letter-spacing:.4px}
.btn{display:inline-block;padding:7px 14px;border-radius:6px;border:1px solid var(--vien);background:#f6f8fa;color:var(--chu);font-weight:600;text-decoration:none;font-size:13px}
.btn.p{background:#1f883d;color:#fff;border-color:#1a7f37}.btn.d{background:#fff;color:var(--do);border-color:var(--do)}
.repo{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--vien)}.repo:last-child{border-bottom:0}
.den{width:12px;height:12px;border-radius:50%;flex:none}.x{background:var(--xanh)}.v{background:var(--vang)}.d{background:var(--do)}.g{background:#8c959f}
.repo b a{color:var(--chinh2);text-decoration:none;font-size:15px}.repo small{color:var(--mo);display:block;margin-top:3px}.repo .r{margin-left:auto;text-align:right;color:var(--mo);font-size:12px}
.tag{display:inline-block;padding:1px 8px;border-radius:12px;border:1px solid var(--vien);font-size:11px;color:var(--mo);margin-left:6px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid #eaeef2}th{color:var(--mo);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
input,select{width:100%;padding:8px 10px;border:1px solid var(--vien);border-radius:6px;font-size:14px;background:#fff}label{display:block;font-weight:600;margin:12px 0 5px}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:16px}.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{display:flex;gap:14px}.stat div{flex:1;border:1px solid var(--vien);border-radius:8px;padding:12px;background:#fff}.stat b{font-size:22px;display:block}.stat span{color:var(--mo);font-size:12px}
.tl .m{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #eaeef2;font-size:13px}.tl .t{width:120px;flex:none;color:var(--mo);font-size:12px}
.canh{border-left:4px solid var(--do);background:#fff5f5;padding:10px 12px;border-radius:6px;margin-bottom:12px}
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600}.pill.x{background:#dafbe1;color:#116329}.pill.v{background:#fff8c5;color:#7d4e00}.pill.d{background:#ffebe9;color:#a40e26}.pill.g{background:#eaeef2;color:#57606a}
.step{display:flex;gap:10px;align-items:center;margin:8px 0}.step .n{width:26px;height:26px;border-radius:50%;background:var(--chinh);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}pre{background:#f6f8fa;border:1px solid var(--vien);border-radius:6px;padding:12px}
.radio{border:1px solid var(--vien);border-radius:8px;padding:12px 14px;margin:8px 0;display:flex;gap:12px}.radio.on{border-color:var(--chinh2);background:#f0f6ff}.radio b{display:block}.radio small{color:var(--mo)}
.foot{color:var(--mo);font-size:12px;text-align:center;padding:18px}

/* ===== Bổ sung cho Web ATAS (ngoài _web.css gốc của mockup) ===== */
html{-webkit-text-size-adjust:100%}body{min-height:100vh;display:flex;flex-direction:column}
#app{flex:1}a{color:var(--chinh2)}button{font:inherit}
.top{position:sticky;top:0;z-index:20}.top .logo{text-decoration:none;color:#fff}.top nav{display:flex;gap:18px;align-items:center;overflow-x:auto;white-space:nowrap}.top nav a.on{font-weight:700;text-decoration:underline;text-underline-offset:6px}
.top .nguoi{text-align:right;font-size:12px;line-height:1.25;opacity:.95}.top .nguoi b{display:block;font-size:13px}.top .btn{line-height:1.2}
.top .av{cursor:default}.top .thoat{font-size:12px;opacity:.8;margin-left:4px}
.sub{overflow-x:auto;white-space:nowrap}.sub[hidden]{display:none}.sub a{cursor:pointer;flex:none}
.w.hep{max-width:980px}
.btn{cursor:pointer;line-height:1.3;white-space:nowrap}.pill{white-space:nowrap}button.btn{font-family:inherit}.btn:hover{filter:brightness(.97)}.btn[disabled],.btn.off{opacity:.5;cursor:not-allowed;pointer-events:none}.btn.nho{padding:4px 10px;font-size:12px}.btn.khoi{display:block;text-align:center;margin-bottom:8px}
.hang{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hang .sp{flex:1}.mo{color:var(--mo)}.nho{font-size:12px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace}.phai{text-align:right}.tam{text-align:center}
textarea{width:100%;padding:8px 10px;border:1px solid var(--vien);border-radius:6px;font:inherit;background:#fff;min-height:90px}
input[type=checkbox],input[type=radio]{width:auto;margin-right:6px;vertical-align:middle}
.radio{cursor:pointer}.radio input{margin-top:3px;flex:none}.radio>div{flex:1}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}td.so{white-space:nowrap}tr.chon td{background:#f0f6ff}
/* hộp lỗi đỏ kèm mã VAK — chỉ hiện mã VAK, không mã tài liệu */
.loi{border-left:4px solid var(--do);background:#fff5f5;padding:10px 12px;border-radius:6px;margin:10px 0;font-size:13px}.loi .ma{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--do);margin-right:6px}.loi .cach{color:var(--mo);margin-top:4px}
.ok-box{border-left:4px solid var(--xanh);background:#f0fff4;padding:10px 12px;border-radius:6px;margin:10px 0;font-size:13px}
.canh.vang{border-left-color:var(--vang);background:#fffbe6}.canh.xam{border-left-color:#8c959f;background:#f6f8fa}
/* thông báo nổi */
#toast{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
#toast .t{background:#24292f;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:tIn .2s ease-out}#toast .t.ok{background:#1f883d}#toast .t.bad{background:var(--do)}
@keyframes tIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* hộp thoại */
#modal{position:fixed;inset:0;background:rgba(27,31,36,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}#modal.hidden{display:none}
.modal-box{background:#fff;border-radius:10px;padding:20px 22px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}.modal-box.rong{max-width:900px}.modal-box h2{margin-top:0}
/* tiến độ chu kỳ */
.bar{height:8px;background:#eaeef2;border-radius:4px;overflow:hidden;min-width:80px}.bar i{display:block;height:100%;background:var(--xanh)}.bar.v i{background:var(--vang)}.bar.d i{background:var(--do)}.bar.g i{background:#8c959f}
.repo .r .bar{margin-top:4px;margin-left:auto;width:110px}
.repo{cursor:pointer}.repo:hover b a{text-decoration:underline}.repo .r{flex:none}.repo>div:not(.den):not(.r){flex:1 1 0;min-width:0}
.stat.sau div{min-width:0}
/* dòng thời gian kiểu commit */
.tl .m .loai{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}.tl .m .loai.lo-d{color:var(--do)}.tl .m .loai.lo-v{color:#7d4e00}.tl .m .bam{color:var(--mo);font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace}
/* W06 thẻ tải ứng dụng tác tử */
.tai3 .card{margin:0}.tai-the.noi-bat{border-color:#1f883d;box-shadow:0 0 0 2px #dafbe1}.tai-the.sap-co h3{color:var(--mo)}.tai-the h3{margin-top:0}.tai-tep{font-size:12px;line-height:1.7;margin:6px 0}.tai-buoc{margin:10px 0 0;padding-left:18px;color:var(--mo)}.tai-buoc li{margin:3px 0}.tai-buoc code{font-size:11px}
/* mã đăng ký to */
.ma-lon{font-size:26px;text-align:center;letter-spacing:3px;font-weight:700;padding:14px;margin:8px 0}
/* trống → hướng dẫn 3 bước */
.trong{text-align:center;padding:30px 10px}.trong .step{justify-content:center;text-align:left}.trong h2{margin-bottom:14px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}.steps3 .card{margin:0}
/* tab trong trang */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--vien);margin-bottom:14px;overflow-x:auto}.tabs a{padding:8px 12px;border-bottom:2px solid transparent;color:var(--chu);text-decoration:none;cursor:pointer;white-space:nowrap}.tabs a.on{border-color:#fd8c73;font-weight:600}
.qd{font-size:12.5px;white-space:pre-wrap;word-break:break-all}
.ky-xong{font-size:15px}.ky-xong b{font-size:20px}
iframe.pdf{width:100%;height:420px;border:1px solid var(--vien);border-radius:6px;background:#fff}
.gt-hero{background:#06182d;border-radius:12px;overflow:hidden;border:none;padding:0;margin-bottom:16px}.gt-hero img{display:block;width:100%;height:auto}
.dk-buoc{color:var(--mo);font-size:13px;margin-left:10px}
.huong{font-size:13.5px;line-height:1.55}
.foot a{color:var(--mo);margin:0 6px}
/* ---------- màn hình khởi động (splash.js, theo Digi-A NK-17 / ATAS NK-20) ---------- */
body.sp-open{overflow:hidden}
#splash{position:fixed;inset:0;z-index:100;background:#06182d;display:flex;flex-direction:column;color:#e6f0fb;animation:spIn .35s ease-out}
#splash.sp-out{opacity:0;transition:opacity .4s ease}
#splash .sp-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px}
#splash .sp-art img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
#splash .sp-fallback{display:none;text-align:center}#splash .sp-fallback b{display:block;font-size:56px;letter-spacing:.5px}#splash .sp-fallback span{display:block;font-size:22px;margin:6px 0}#splash .sp-fallback small{color:#27d7c5;font-size:15px}
#splash.sp-noimg img{display:none}#splash.sp-noimg .sp-fallback{display:block}
#splash .sp-foot{padding:0 24px 18px;max-width:1100px;width:100%;margin:0 auto}
#splash .sp-prog{height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
#splash .sp-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#27d7c5,#58a7ff);transform-origin:left;animation:spProg var(--sp-t,3500ms) linear forwards}
#splash .sp-row{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:13px}
#splash .sp-st{flex:1;color:#9fb7d0}#splash .sp-link{color:#27d7c5}
#splash .sp-go{background:#27d7c5;border:1px solid #27d7c5;color:#06182d;font-weight:600;padding:8px 18px;border-radius:6px;cursor:pointer}
#splash .sp-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes spIn{from{opacity:0}to{opacity:1}}@keyframes spProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){#splash,#splash .sp-prog i{animation:none}#splash.sp-out{transition:none}}
/* ---------- điện thoại ≥ 360 px ---------- */
@media (max-width:900px){.cols,.cols3,.steps3{grid-template-columns:1fr}.w{padding:14px 16px}.stat{flex-wrap:wrap}.stat div{flex:1 1 calc(33% - 10px);min-width:96px}}
@media (max-width:640px){
  .top{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px 12px}.top nav{order:3;width:100%;gap:12px;font-size:13px;padding-bottom:2px}.top .nguoi b{font-size:12px}.top .nguoi span{display:none}
  .sub{padding:0 12px;height:42px}.sub a{padding:9px 9px;font-size:13px}
  .w{padding:12px}.card{padding:14px}.hang>.btn{flex:1 1 auto;text-align:center}
  .repo{flex-wrap:wrap;gap:8px 10px}.repo>div:not(.den):not(.r){flex:1 1 calc(100% - 30px)}.repo .r{width:100%;text-align:left;display:flex;gap:6px;align-items:center;margin-left:22px}.repo .r br{display:none}.repo .r .r2::before{content:'· '}.repo .r .bar{margin:0 0 0 auto;width:80px}
  h1{font-size:19px}.stat b{font-size:18px}.ma-lon{font-size:20px;letter-spacing:2px}.modal-box{padding:16px}
  #splash .sp-foot{padding:0 16px 14px}#splash .sp-st{display:none}#splash .sp-row{justify-content:flex-end}
  th,td{padding:7px 6px;font-size:13px}
}

/* bảng thông tin kho: cột nhãn không xuống dòng */
table.tt td:first-child{white-space:nowrap;color:var(--mo,#5f6b7a);width:1%;padding-right:14px}