:root{
  --bg:#f1f4f2; --surface:#fbfcfb; --surface-strong:#fff; --surface-muted:#e7ece9;
  --text:#17211e; --dim:#63706b; --border:#cbd3cf; --border-strong:#909c97;
  --accent:#17765a; --accent-ink:#0d4a38; --green-soft:#e7f4ee;
  --orange:#e45d2d; --orange-soft:#fff0e9; --tmc:#1d6fb8; --tmc-soft:#e9f2fa;
  --danger:#b93b31; --radius:10px; --shadow:0 18px 50px rgba(20,35,29,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}
main{max-width:1440px;margin:0 auto;padding:18px 22px 60px}

/* ---------- đăng nhập ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:32px;width:min(420px,100%)}
.auth-card .logo{font-size:13px;letter-spacing:.14em;color:var(--accent);font-weight:700}
.auth-logo{height:54px;width:auto;display:block;margin-bottom:12px}
.brand-logo{height:38px;width:auto;background:#fff;border:1px solid var(--border);border-radius:8px;padding:3px 7px}
.auth-card h1{margin:6px 0 4px;font-size:24px}
.auth-card p{color:var(--dim);margin:0 0 18px}
.auth-card label{display:block;font-weight:600;margin:14px 0 6px}
.auth-card input{width:100%;padding:11px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
.auth-card .primary-button{width:100%;margin-top:20px}
.form-error{background:#fdeceb;color:var(--danger);border:1px solid #f2c4c0;padding:10px 12px;border-radius:8px;margin-top:14px}

/* ---------- khung chính ---------- */
.topbar{display:flex;align-items:center;gap:14px;max-width:1440px;margin:0 auto;padding:14px 22px 0}
.topbar .brand{font-weight:800;letter-spacing:.06em;color:var(--accent-ink)}
.topbar .brand small{display:block;font-weight:600;color:var(--dim);letter-spacing:0}
.topbar .spacer{flex:1}
.user-chip{display:flex;align-items:center;gap:10px;color:var(--dim)}
.user-chip b{color:var(--text)}
.ghost-button{background:transparent;border:1px solid var(--border-strong);border-radius:8px;padding:8px 14px;color:var(--text)}
.ghost-button:hover{border-color:var(--accent);color:var(--accent-ink)}
.primary-button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:11px 18px;font-weight:700}
.primary-button:disabled{opacity:.55;cursor:default}
.danger-button{background:var(--danger);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:700}
.new-button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:12px 18px;font-weight:700;display:flex;gap:8px;align-items:center}
.view-tabs{display:flex;gap:8px;margin:10px 0 18px}
.view-tabs button{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-weight:600;color:var(--dim)}
.view-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}

.work-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.context-line{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.work-header h1{margin:4px 0;font-size:30px}
.header-note{color:var(--dim);max-width:720px;margin:0}
.workflow-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:18px 0}
.workflow-rule{background:var(--surface-strong);border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:var(--radius);padding:12px 14px}
.workflow-rule strong{display:block;margin-bottom:3px}
.workflow-rule span{color:var(--dim);font-size:13.5px}
.workflow-rule.option{border-left-color:var(--orange)}
.workflow-rule.check{border-left-color:#8a6d1d}
.workflow-rule.tmc{border-left-color:var(--tmc)}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 14px}
.search-box{flex:1;min-width:230px;display:flex;align-items:center;gap:8px;background:var(--surface-strong);border:1px solid var(--border);border-radius:9px;padding:9px 12px}
.search-box input{border:none;outline:none;flex:1;background:transparent}
.date-filter{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.date-field{display:flex;flex-direction:column;font-size:12px;color:var(--dim);gap:3px}
.date-field input{border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:var(--surface-strong)}
.capacity{display:flex;gap:8px;align-items:center;font-size:13.5px}
.capacity span{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.capacity.occupied span{background:var(--orange)}
.notice{background:var(--green-soft);border:1px solid var(--accent);color:var(--accent-ink);border-radius:9px;padding:10px 14px;margin-bottom:12px;display:flex;justify-content:space-between;gap:10px}
.notice button{background:none;border:none;font-size:16px}

/* ---------- kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media (max-width:980px){.kanban{grid-template-columns:1fr}}
.kanban-column{background:var(--surface);border:1px solid var(--border);border-radius:12px;min-height:300px}
.column-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;border-bottom:1px solid var(--border)}
.column-head h2{margin:0;font-size:18px}
.column-head p{margin:2px 0 0;color:var(--dim);font-size:13px}
.column-count{background:var(--surface-muted);border-radius:999px;padding:2px 11px;font-weight:700}
.column-body{padding:12px;display:flex;flex-direction:column;gap:12px}
.empty-column{border:1.5px dashed var(--border);border-radius:10px;padding:20px;color:var(--dim);text-align:center}
.empty-column span{font-size:22px;font-weight:800;color:var(--border-strong)}
.job-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:11px;padding:13px 14px}
.job-card:hover{border-color:var(--border-strong)}
.card-line{display:flex;justify-content:space-between;align-items:center;gap:8px}
.job-id{color:var(--dim);font-weight:700;font-size:13px}
.type-chip{font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--green-soft);color:var(--accent-ink)}
.type-chip.option{background:var(--orange-soft);color:var(--orange)}
.type-chip.check{background:#faf3d7;color:#8a6d1d}
.type-chip.tmc{background:var(--tmc-soft);color:var(--tmc)}
.job-card h3{margin:8px 0 4px;font-size:17px}
.card-meta{color:var(--dim);font-size:13px}
.brand-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.brand-row span{border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:13px}
.brand-row span.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.fail-note{background:#fdeceb;color:var(--danger);border-radius:8px;padding:8px 10px;font-size:13px;margin-top:9px}
.active-strip{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--accent-ink);font-size:13.5px;font-weight:600}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--orange);animation:pl 1.2s infinite}
@keyframes pl{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.results{margin-top:11px;border-top:1px solid var(--border);padding-top:10px}
.results h4{margin:0 0 8px;font-size:13.5px}
.file-btn{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 11px;margin-bottom:7px}
.file-btn:hover{border-color:var(--accent)}
.file-btn small{color:var(--dim)}
.file-type{font-weight:800;font-size:11.5px;border-radius:5px;padding:2px 6px;background:var(--green-soft);color:var(--accent-ink)}
.inputs-list{margin:9px 0 0;padding:0;list-style:none;font-size:13px;color:var(--dim)}
.inputs-list li{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.inputs-list a{color:var(--accent-ink)}

/* ---------- dialog ---------- */
.dialog-backdrop{position:fixed;inset:0;background:rgba(15,25,20,.45);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:26px 14px;z-index:50}
.dialog{background:var(--surface-strong);border-radius:14px;box-shadow:var(--shadow);width:min(680px,100%);padding:22px}
.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}
.dialog-head .serial{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:800}
.dialog-head h2{margin:3px 0 0;font-size:22px}
.icon-button{background:none;border:none;font-size:20px;color:var(--dim)}
.type-picker{border:none;padding:0;margin:14px 0}
.type-picker legend{font-weight:700;margin-bottom:8px}
.type-picker .grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media (max-width:560px){.type-picker .grid{grid-template-columns:1fr}}
.type-picker button{text-align:left;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:11px 13px}
.type-picker button strong{display:block}
.type-picker button small{color:var(--dim)}
.type-picker button.selected{border-color:var(--accent);background:var(--green-soft)}
.type-picker button.selected.option{border-color:var(--orange);background:var(--orange-soft)}
.type-picker button.selected.check{border-color:#8a6d1d;background:#faf3d7}
.type-picker button.selected.tmc{border-color:var(--tmc);background:var(--tmc-soft)}
.dialog label{display:block;font-weight:600;margin:14px 0 6px}
.dialog input[type=text],.dialog textarea{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
.brand-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.brand-picker button{border:1.5px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:600}
.brand-picker button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.brand-picker input{border:1px dashed var(--border-strong);border-radius:999px;padding:6px 12px;width:140px;background:var(--surface)}
.check-rule{display:flex;gap:10px;background:var(--surface-muted);border-radius:9px;padding:10px 12px;margin-top:14px;font-size:13.5px}
.check-rule p{margin:0}.check-rule span{color:var(--dim);display:block}
.upload-zone{margin-top:16px}
.upload-button{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:10px;padding:14px}
.upload-button small{display:block;color:var(--dim)}
.selected-files{list-style:none;margin:10px 0 0;padding:0}
.selected-files li{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:8px;padding:7px 11px;margin-bottom:6px;font-size:13.5px}
.selected-files small{color:var(--dim);margin-left:8px}
.selected-files button{background:none;border:none;color:var(--danger);font-size:16px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.form-progress{color:var(--accent-ink);font-weight:600}
.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.detail-meta dt{color:var(--dim);font-size:12.5px}
.detail-meta dd{margin:2px 0 0;font-weight:700}
.detail-sec h3{margin:16px 0 8px;font-size:15px}
.detail-sec ul{list-style:none;margin:0;padding:0}
.detail-sec li{border:1px solid var(--border);border-radius:8px;padding:8px 11px;margin-bottom:6px;font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.detail-sec a{color:var(--accent-ink);font-weight:600}
.log-list{font-size:13px;color:var(--dim);max-height:300px;overflow:auto}
.log-list li{border:none;padding:3px 0}
table.users{width:100%;border-collapse:collapse;margin-top:12px}
table.users th,table.users td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.token-box{background:#17211e;color:#b8f1da;border-radius:9px;padding:12px;font-family:Consolas,monospace;word-break:break-all;margin-top:10px}
.muted{color:var(--dim)}

/* ---------- avatar (v6) ---------- */
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border);background:var(--surface-muted)}
.avatar.sm{width:20px;height:20px;font-size:11px}
.avatar.fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:800;font-size:14px;border-color:var(--accent)}
.creator-inline{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.ghost-button.sm{padding:5px 10px;font-size:13px}
.ghost-button.danger-text{color:var(--danger);border-color:#e3b3ae}
.ghost-button.danger-text:hover{border-color:var(--danger);color:var(--danger)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.detail-meta{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

/* ---------- tiến độ xử lý (v7) ---------- */
.done-line{margin-top:10px;font-size:13.5px;color:var(--dim)}
.done-line b{color:var(--accent-ink)}
.log-list li{display:flex;justify-content:flex-start;align-items:baseline;gap:8px;flex-wrap:wrap}
.log-time{color:var(--dim);font-size:12.5px;white-space:nowrap}
.log-stage{background:var(--surface-muted);border:1px solid var(--border);border-radius:20px;padding:1px 8px;font-size:12px;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.log-msg{color:inherit}

/* ===== DARK MODE — AI theme (preview) ===== */
:root{
  color-scheme:dark;
  --bg:#04090f; --surface:#081423; --surface-strong:#0b1c30; --surface-muted:#10263f;
  --text:#e9f5ff; --dim:#93b4cc; --border:#1c3d5c; --border-strong:#2e5f8a;
  --accent:#17a8e8; --accent-ink:#8fe3ff; --green-soft:rgba(23,168,232,.13);
  --orange:#ff9046; --orange-soft:rgba(255,144,70,.13);
  --tmc:#57b6ff; --tmc-soft:rgba(87,182,255,.13);
  --danger:#ff6f66; --shadow:0 22px 60px rgba(0,0,0,.6);
}
body{background-color:var(--bg);
  background-image:
  radial-gradient(1100px 550px at 85% -10%, rgba(23,168,232,.15), transparent 60%),
  radial-gradient(900px 520px at -10% 110%, rgba(23,168,232,.09), transparent 60%),
  url('/wallpaper.jpg');
  background-size:auto,auto,cover;background-position:0 0,0 0,center;background-attachment:fixed}
.auth-wrap{background:linear-gradient(90deg, rgba(3,10,20,.80) 0%, rgba(3,10,20,.42) 48%, rgba(3,10,20,.18) 100%), url('/wallpaper.jpg') center/cover no-repeat}
.auth-card{background:rgba(7,20,36,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(110,210,255,.38);box-shadow:0 0 0 1px rgba(23,168,232,.10), 0 24px 70px rgba(0,0,0,.65), 0 0 46px rgba(23,168,232,.20)}
.auth-card .logo{color:var(--accent-ink)}
.auth-card input{background:rgba(9,26,45,.9);color:var(--text)}
.auth-logo{background:#fff;border-radius:10px;padding:6px 10px}
.primary-button,.new-button{background:linear-gradient(135deg,#0e86c8,#1db4f5);box-shadow:0 6px 22px rgba(23,168,232,.35)}
.view-tabs button.active{background:linear-gradient(135deg,#0e86c8,#1db4f5);border-color:transparent;box-shadow:0 4px 16px rgba(23,168,232,.35)}
.brand-row span.primary{background:linear-gradient(135deg,#0e86c8,#1db4f5);border-color:transparent}
.kanban-column{background:linear-gradient(180deg, rgba(17,40,66,.45), rgba(7,18,32,.78))}
.job-card{box-shadow:0 4px 18px rgba(0,0,0,.38)}
.job-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px rgba(23,168,232,.35), 0 12px 32px rgba(0,0,0,.55)}
.type-chip.check{background:rgba(250,211,77,.14);color:#ffd95e}
.type-picker button.selected.check{border-color:#c9a227;background:rgba(250,211,77,.12)}
.form-error{background:rgba(255,111,102,.12);border-color:rgba(255,111,102,.42);color:#ffb3ad}
.fail-note{background:rgba(255,111,102,.12);color:#ffb3ad}
.ghost-button.danger-text{border-color:rgba(255,111,102,.42)}
.log-stage{background:rgba(23,168,232,.14);border-color:rgba(23,168,232,.35);color:var(--accent-ink)}
.active-strip,.done-line b,.detail-sec a,.inputs-list a,.column-head .column-count{color:var(--accent-ink)}
.dialog{background:var(--surface-strong)}
.dialog-backdrop{background:rgba(2,6,12,.72);backdrop-filter:blur(3px)}
.token-box{background:#02070b}
/* nền hologram toàn trang: ảnh đã giảm opacity sẵn trong file; lớp phủ đăng nhập nhẹ hơn */
.auth-wrap{background:linear-gradient(90deg, rgba(3,10,20,.55) 0%, rgba(3,10,20,.25) 48%, rgba(3,10,20,.08) 100%), url('/wallpaper.jpg') center/cover no-repeat}
/* chữ trắng + tiêu đề vàng / xanh ngọc bích (anh Đức chốt 21/10) */
:root{--text:#ffffff; --dim:#bcd6ea; --gold:#ffd23e; --jade:#25e2a0}
.work-header h1{color:var(--gold)}
.topbar .brand{color:var(--gold)}
.auth-card h1{color:var(--gold)}
.job-card h3{color:var(--gold)}
.column-head h2{color:var(--jade)}
.dialog-head h2{color:var(--jade)}
.detail-sec h3,.results h4{color:var(--jade)}
.workflow-rule strong{color:var(--jade)}
.context-line{color:var(--jade)}
/* frame có nền cho các phần nội dung + opacity 15% (anh Đức chốt 21/10) */
h1{color:var(--gold)}
.page-panel{background:var(--surface-strong);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 18px 40px rgba(0,0,0,.38)}
.page-panel table.users{width:100%}
.users th{color:var(--jade)}
/* màu theo trạng thái (anh Đức chốt 21/10): Hàng chờ = vàng, Đang thực hiện = cam, Đã hoàn thành = ngọc bích */
:root{--orange:#ff9f2e}
.kanban-column:nth-child(1) .column-head h2{color:var(--gold)}
.kanban-column:nth-child(2) .column-head h2{color:var(--orange)}
.kanban-column:nth-child(3) .column-head h2{color:var(--jade)}
.kanban-column:nth-child(1) .column-count{color:var(--gold);border-color:var(--gold)}
.kanban-column:nth-child(2) .column-count{color:var(--orange);border-color:var(--orange)}
.kanban-column:nth-child(3) .column-count{color:var(--jade);border-color:var(--jade)}
.active-strip{color:var(--orange)}
.active-strip .pulse{background:var(--orange)}
.page-panel .detail-sec{margin-bottom:24px}
.page-panel .detail-sec:last-child{margin-bottom:0}
:root{color-scheme:dark}
input,select,textarea{background-color:#07182b;color:var(--text)}