:root{
  /* Bảng màu theo website superprint.vn: nền tối #1a1919/#353333, vàng #FFC131, xanh lá #7ED957, chữ Open Sans */
  --bg:#f6f6f4; --card:#fff; --ink:#1a1919; --muted:#6b6b68; --line:#e4e3df;
  --dark:#1a1919; --dark-2:#353333;
  --accent:#FFC131; --accent-ink:#1a1919; --accent-soft:#fff3cf; --accent-text:#8a5a00;
  --brand-green:#7ED957; --brand-green-soft:#eaf8df;
  --red:#c62828; --red-soft:#fdecec; --amber:#b26a00; --amber-soft:#fff4e0; --green:#1f7a3f; --green-soft:#e7f5ec;
  --rainbow:linear-gradient(90deg,#e8141c 0%,#f7a600 20%,#f3e600 36%,#1aa84b 52%,#00a0a0 66%,#1f4fc9 82%,#7b1fa2 100%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px} a:hover{text-decoration-color:var(--ink)}
.top{display:flex;align-items:center;gap:18px;padding:10px 24px;background:var(--dark);color:#fff;position:sticky;top:0;z-index:5}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rainbow)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{height:30px;width:auto;display:block} .brand span{font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--accent)}
.top nav{display:flex;gap:4px} .top nav a{padding:6px 12px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600}
.top nav a:hover{background:var(--dark-2)} .top nav a.on{background:var(--accent);color:var(--accent-ink)}
.top .me{margin-left:auto;color:#cfcfcb;font-size:13px} .top .me a{color:#fff;text-decoration-color:var(--accent)}
.ro{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
main{max-width:1280px;margin:0 auto;padding:20px 24px 60px}
h1{font-size:22px;font-weight:700;margin:0 0 4px} h2{font-size:15px;font-weight:700;margin:0 0 10px} .sub{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:2fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.filters input,.filters select{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit}
.filters input[type=search]{min-width:280px}
.tabs{display:flex;gap:6px} .tabs a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none} .tabs a.on{border-color:var(--ink);color:var(--accent-ink);background:var(--accent);font-weight:700}
table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:700;background:#fafaf7;position:sticky;top:52px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.row:hover{background:#fffbea;cursor:pointer}
.tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;background:#f0efeb;color:#3b3a37;white-space:nowrap}
.rem{display:block;font-size:12.5px;padding:2px 0} .rem::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.rem.do{color:var(--red)} .rem.do::before{background:var(--red)} .rem.cam{color:var(--amber)} .rem.cam::before{background:var(--amber)} .rem.xanh{color:var(--green)} .rem.xanh::before{background:var(--green)}
.kpi .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums} .kpi .l{color:var(--muted);font-size:12px} .kpi .d{font-size:12px;color:var(--muted)}
.kpi.bad .v{color:var(--red)}
.alert{border-radius:10px;padding:12px 14px;margin-bottom:16px}
.alert.do{background:var(--red-soft)} .alert.cam{background:var(--amber-soft)} .alert.xanh{background:var(--green-soft)}
dl.info{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;margin:0} dl.info dt{color:var(--muted)} dl.info dd{margin:0}
.bar{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:6px}
.bar div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar i{display:block;width:100%;background:var(--dark-2);border-radius:3px 3px 0 0;min-height:1px;opacity:.85}
.bar b{font-weight:400;font-size:11px;color:var(--muted);margin-top:4px}
.stage{display:flex;gap:3px;align-items:center} .stage span{height:6px;flex:1;border-radius:3px;background:#e3e6ea} .stage span.on{background:var(--dark-2)}
.late{color:var(--red);font-weight:600}
.muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right}
.empty{color:var(--muted);padding:12px 0}
.mb{margin-bottom:16px}
/* đơn hàng */
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flow a{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none}
.flow a b{font-size:18px;font-variant-numeric:tabular-nums} .flow a span{font-size:12px;color:var(--muted)}
.flow a.on{border-color:var(--ink);background:var(--accent)} .flow a.muted{opacity:.7} .flow i{color:var(--muted);font-style:normal}
.pipe{display:flex;gap:3px;width:120px;margin:3px 0} .pipe span{height:6px;flex:1;border-radius:3px;background:#e3e6ea}
.pipe span.on{background:var(--brand-green)} .pipe span.cur{background:var(--accent)}
.gates{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gates>div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:8px;border:1px solid var(--line)}
.gates i{width:10px;height:10px;border-radius:50%;background:#d5d9de}
.gates .done{background:var(--green-soft);border-color:#bfe3cb} .gates .done i{background:var(--green)}
.gates .cur{background:var(--accent-soft);border-color:var(--accent)} .gates .cur i{background:var(--accent);border:1px solid var(--ink)}
.ticket{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.st{flex:1;min-width:120px;display:flex;flex-direction:column;gap:1px;font-size:12px;padding:8px;border-radius:6px;border:1px solid var(--line)}
.st b{font-size:13px} .st.xong{background:var(--green-soft);border-color:#bfe3cb} .st.dang{background:var(--accent-soft);border-color:var(--accent)}
.st.bo_qua{opacity:.5} .st.cho{background:#fafbfc}
@media (max-width:800px){.gates{grid-template-columns:1fr 1fr}.g2,.g3,.g4{grid-template-columns:1fr}}
td.pic{width:76px;position:relative} td.pic img{width:64px;height:64px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff;display:block}
td.pic .nopic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:8px;border:1px dashed var(--line);font-size:10.5px;color:var(--muted);text-align:center}
td.pic .more{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border-radius:4px;padding:0 4px}
.gallery{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0} .gallery img{width:180px;height:180px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff}
/* bản xem thử: cập nhật tiền, lên đơn */
.preview-note{background:var(--amber-soft);color:var(--amber);border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:12px}
.split{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
tr.sel{background:var(--accent-soft)}
.tag.ok{background:var(--green-soft);color:var(--green)}
.lbl{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.full{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff}
.sumbox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.sumbox div{background:#fafbfc;border:1px solid var(--line);border-radius:8px;padding:8px}
.sumbox span{display:block;font-size:12px;color:var(--muted)} .sumbox b{font-variant-numeric:tabular-nums}
.sumbox b.bad{color:var(--red)} .sumbox b.good{color:var(--green)}
.btn{margin-top:12px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--brand-green);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink)} .btn:hover{filter:brightness(.96)}
.line{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);position:relative}
.pic-in label{display:flex;align-items:center;justify-content:center;width:130px;height:130px;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;color:var(--muted);font-size:13px;overflow:hidden;background:#fafbfc}
.pic-in input{display:none} .pic-in img{display:none;width:100%;height:100%;object-fit:contain;background:#fff}
.pic-in label.has span{display:none} .pic-in label.has img{display:block}
.fields{flex:1;display:flex;flex-direction:column;gap:8px}
.frow{display:flex;gap:10px;flex-wrap:wrap}
.frow label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);flex:1;min-width:150px}
.frow label.wide{flex:2}
.frow input,.frow select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--ink);background:#fff}
.big{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.line .x{position:absolute;right:0;top:8px;border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer}
@media (max-width:900px){.split{grid-template-columns:1fr}.line{flex-direction:column}}
/* thanh menu: không bẻ chữ trong từng mục; màn hẹp thì xuống dòng cả nhóm */
.top{flex-wrap:wrap;row-gap:6px} .top nav{flex-wrap:wrap} .top nav a,.top .me,.ro{white-space:nowrap}
.top nav a{text-decoration:none}
@media (max-width:1000px){.top .me{flex-basis:100%;margin-left:0;white-space:normal}}

.carry{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center} .carry b{color:var(--ink)}

/* nút hướng dẫn + tour chỉ từng nút */
.help{background:transparent;color:#fff;border:1px solid #6b6b68;border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.help:hover{border-color:var(--accent);color:var(--accent)}
.tour-spot{position:fixed;z-index:1000;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 0 3px var(--accent);pointer-events:none;transition:all .25s}
.tour-tip{position:fixed;z-index:1001;max-width:340px;background:#fff;color:var(--ink);border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px}
.tour-tip .hand{font-size:28px;line-height:1;position:absolute;top:-24px;left:16px;animation:point 1s ease-in-out infinite}
.tour-tip.above .hand{top:auto;bottom:-26px;transform:rotate(180deg);animation:none}
@keyframes point{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tour-tip b{display:block;font-size:15px;margin:4px 0 4px}
.tour-tip .step{color:var(--muted);font-size:12px;margin-top:10px;display:flex;align-items:center;gap:8px}
.tour-tip .step button{margin:0;padding:6px 12px;font-size:13px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;font:inherit;font-weight:700;cursor:pointer}
.tour-tip .step button.go{background:var(--accent);margin-left:auto}
/* tên đầu mục viết hoa cho nổi (anh Lương 09/11) */
h1,h2{text-transform:uppercase;letter-spacing:.4px}
h2{font-size:13.5px}
.top nav a{text-transform:uppercase;font-size:12.5px;letter-spacing:.3px;padding:6px 10px}
.tour-tip b{text-transform:none;letter-spacing:0}
/* theo luật nhà của taste-skill (áp cho web nội bộ): nút phản hồi khi rê/bấm, thẻ bấm được thì nhấc nhẹ, bảng rộng cuộn trong thẻ thay vì tràn trang */
.btn,.tabs a,.flow a,.top nav a{transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.12)} .btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.flow a:hover,.tabs a:hover{transform:translateY(-1px);border-color:var(--ink)}
tr.row{transition:background .12s ease}
.card{overflow-x:auto} .card>table{min-width:640px}
main{padding-left:24px;padding-right:24px}
@media (max-width:600px){main{padding-left:12px;padding-right:12px}.top{padding:8px 12px}.filters input[type=search]{min-width:0;flex:1}}