/* ===== SGTraco CRM — giao diện dùng chung ===== */
:root{
  --bg:#EDF1F2; --surface:#FFFFFF; --surface-2:#E8EEEF; --surface-3:#F6F9F9;
  --line:#D6E0E1; --line-soft:#E7EDEE;
  --ink:#0B171A; --ink-2:#41575D; --ink-3:#7A8E93;
  --accent:#0A5261; --accent-2:#0E7185; --accent-soft:#DCEBEE; --on-accent:#FFFFFF;
  --signal:#A85B0B; --signal-soft:#F8E8D4; --on-signal:#FFFFFF;
  --good:#1F6544; --good-soft:#DAEDE2; --bad:#94301F; --bad-soft:#F7DFDB;
  --side-bg:#124955; --side-2:#1A5E6C; --side-ink:#F0F8F9; --side-ink-2:#ACCFD5; --side-line:#28707E;
  --shadow-sm:0 1px 2px rgba(11,23,26,.05);
  --shadow:0 1px 2px rgba(11,23,26,.05), 0 10px 26px -16px rgba(11,23,26,.28);
  --shadow-lg:0 30px 70px -30px rgba(11,23,26,.45);
  --r:12px; --r-sm:8px;
  --font-ui:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:var(--font-ui);   /* số dùng chung font UI, chỉ khác ở tabular-nums */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070F11; --surface:#0F1B1E; --surface-2:#17262A; --surface-3:#0C1618;
    --line:#22353A; --line-soft:#1A2B2F;
    --ink:#E9F0F0; --ink-2:#A8BCC0; --ink-3:#758D92;
    --accent:#4FB0C2; --accent-2:#6ECAD9; --accent-soft:#0F2E35; --on-accent:#04171B;
    --signal:#E0A05B; --signal-soft:#2E2116; --on-signal:#1A1005;
    --good:#5FC08E; --good-soft:#12301F; --bad:#E08375; --bad-soft:#301A17;
    --side-bg:#04171B; --side-2:#0B2830; --side-ink:#D2E4E7; --side-ink-2:#6F959D; --side-line:#0E323C;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.8);
    --shadow-lg:0 30px 70px -30px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#070F11; --surface:#0F1B1E; --surface-2:#17262A; --surface-3:#0C1618;
  --line:#22353A; --line-soft:#1A2B2F;
  --ink:#E9F0F0; --ink-2:#A8BCC0; --ink-3:#758D92;
  --accent:#4FB0C2; --accent-2:#6ECAD9; --accent-soft:#0F2E35; --on-accent:#04171B;
  --signal:#E0A05B; --signal-soft:#2E2116; --on-signal:#1A1005;
  --good:#5FC08E; --good-soft:#12301F; --bad:#E08375; --bad-soft:#301A17;
  --side-bg:#04171B; --side-2:#0B2830; --side-ink:#D2E4E7; --side-ink-2:#6F959D; --side-line:#0E323C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -16px rgba(0,0,0,.8);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.9);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px; line-height:1.55; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums; font-optical-sizing:auto;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; text-wrap:balance}
p{margin:0}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
svg{display:block}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:6px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0}
.cond{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em}
.eyebrow{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em;
  font-weight:600; font-size:11.5px; color:var(--ink-3)}
.hide{display:none !important}

/* ---------- ĐĂNG NHẬP ---------- */
.login{position:fixed; inset:0; display:grid; grid-template-columns:1.05fr 1fr; z-index:100; background:var(--surface)}
.login-art{background:linear-gradient(145deg, #124955 0%, #0D3741 100%); color:#EAF5F6; padding:48px 52px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.login-art .glow{position:absolute; width:520px; height:520px; right:-160px; top:-140px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,176,194,.22), transparent 62%); pointer-events:none}
.logo{display:flex; align-items:center; gap:11px}
.logo .mark{width:34px; height:34px; flex:0 0 34px}
.logo b{font-family:var(--font-display); font-size:21px; letter-spacing:.01em; line-height:1; font-weight:800}
.logo span{display:block; font-size:10px; letter-spacing:.13em; font-weight:500; color:var(--side-ink-2); text-transform:uppercase; margin-top:3px}
.login-art h1{font-size:33px; line-height:1.2; max-width:15ch; margin-bottom:14px}
.login-art .lede{color:#A9CBD1; max-width:38ch; font-size:14.5px; line-height:1.65}
.login-art .pitch{margin:auto 0}
.login-form{display:grid; place-items:center; padding:40px 24px; overflow-y:auto; background:var(--surface)}
.login-card{width:100%; max-width:372px}
.login-card h2{font-size:23px; margin-bottom:4px}
.login-card .sub{color:var(--ink-2); font-size:13.5px; margin-bottom:22px}
.accts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 18px}
.acct{display:flex; flex-direction:column; gap:1px; padding:10px 12px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-3)}
.acct.on{border-color:var(--accent); background:var(--accent-soft)}
.acct b{font-size:13px} .acct span{font-size:11px; color:var(--ink-3)}
.or{display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:11.5px; margin:4px 0 16px}
.or::before,.or::after{content:""; height:1px; background:var(--line); flex:1}

/* ---------- KHUNG APP ---------- */
.app{display:none; grid-template-columns:238px 1fr; min-height:100vh}
.app.on{display:grid}
.sidebar{background:var(--side-bg); color:var(--side-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:20px 0 12px}
.sidebar .logo{padding:0 20px 20px}
.nav{display:flex; flex-direction:column; gap:2px; padding:0 10px; overflow-y:auto; flex:1}
.nav-label{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em;
  font-size:11px; color:var(--side-ink-2); padding:15px 10px 6px; font-weight:600}
.nav-item{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 10px; border-radius:var(--r-sm); color:var(--side-ink-2); font-size:13.5px}
.nav-item svg{width:17px; height:17px; flex:0 0 17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.nav-item:hover{background:var(--side-2); color:var(--side-ink)}
.nav-item.on{background:var(--side-2); color:#fff}
.nav-item.on svg{color:var(--accent-2)}
.nav-item .badge{margin-left:auto; background:var(--signal); color:var(--on-signal);
  font-size:10.5px; font-weight:700; border-radius:999px; padding:1px 7px; min-width:20px; text-align:center}
.side-user{margin:10px 10px 0; padding:11px; border-top:1px solid var(--side-line); display:flex; align-items:center; gap:10px}
.side-user .who b{display:block; font-size:13px; color:var(--side-ink); line-height:1.3}
.side-user .who span{font-size:11px; color:var(--side-ink-2)}
.side-user button{margin-left:auto; color:var(--side-ink-2); font-size:11.5px}
.avatar{width:32px; height:32px; border-radius:9px; background:var(--accent-2); color:#04171B;
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:0 0 32px}
.main{display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; gap:14px; padding:12px 24px; background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  padding-top:calc(12px + env(safe-area-inset-top))}
.topbar .mobile-logo{display:none; align-items:center; gap:9px}
.tright{margin-left:auto; display:flex; align-items:center; gap:12px}
.seg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px}
.seg button{padding:5px 12px; font-size:12.5px; color:var(--ink-2); border-radius:999px; white-space:nowrap}
.seg button.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm)}
.wrap{padding:22px 26px 40px; width:100%; max-width:none}
.screen{display:none} .screen.on{display:block; animation:fade .2s ease}
@keyframes fade{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}

/* ---------- THÀNH PHẦN ---------- */
.page-head{margin-bottom:18px; display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.page-head h2{font-size:21px}
.page-head p{margin-top:3px; color:var(--ink-2); font-size:13.5px; max-width:68ch}
.page-head .spacer{margin-left:auto}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm)}
.card-pad{padding:16px 18px}
.card-head{padding:13px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px}
.grid{display:grid; gap:14px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)} .g23{grid-template-columns:1.35fr 1fr}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px;
  border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); font-weight:600; font-size:13.5px}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.btn.warm{background:var(--signal); color:var(--on-signal)}
.btn.danger{background:var(--bad); color:#fff}
.btn.sm{padding:7px 12px; font-size:12.5px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5; pointer-events:none}
/* --- Ô nhập kiểu Material outlined: nhãn nằm trong ô, trượt lên viền khi gõ --- */
.field{position:relative; display:block; --field-bg:var(--surface)}
.field input,.field select,.field textarea{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px; font-size:15px; width:100%; color:var(--ink);
  transition:border-color .16s, box-shadow .16s}
.field textarea{min-height:88px; resize:vertical}
/* nhãn: mặc định canh giữa ô, trông như placeholder */
.field > label{
  position:absolute; left:8px; top:15px; z-index:1;
  font-size:15px; font-weight:400; line-height:1.25; color:var(--ink-3);
  padding:0 4px; max-width:calc(100% - 20px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; transform-origin:left top;
  background:var(--field-bg);
  transition:transform .16s cubic-bezier(.4,0,.2,1), color .16s}
/* nhãn trượt lên nằm đè lên viền trên */
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select + label,
.field input[type="date"] + label,
.field input[readonly] + label{
  transform:translateY(-22px) scale(.75)}
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label{color:var(--accent)}
/* viền dày 2px khi focus nhưng dùng inset shadow để chữ không bị nhích */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); outline:none; box-shadow:inset 0 0 0 1px var(--accent)}
/* gợi ý chỉ hiện khi đang gõ, để nhãn không chồng chữ */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:0; transition:opacity .16s}
.field input:focus::placeholder,.field textarea:focus::placeholder{opacity:1}
/* ô chỉ đọc: làm mờ đi thay vì tô nền, để nhãn trên viền không lệch màu */
.field input[readonly]{color:var(--ink-2); border-color:var(--line-soft)}
.field input[readonly] + label{color:var(--ink-3)}
/* ô có lỗi */
.field.bad input,.field.bad select{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.field.bad > label{color:var(--bad)}
/* .field-plain: giữ kiểu nhãn xếp trên, dùng cho thanh kéo KPI */
.field-plain{display:flex; flex-direction:column; gap:5px}
.field-plain > label{position:static; transform:none; font-size:12px; color:var(--ink-2);
  font-weight:500; padding:0; background:none; max-width:none}
.field input[type="range"]{padding:0; background:transparent; border:0; box-shadow:none;
  accent-color:var(--accent); height:22px}
.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
.pill.ok{background:var(--good-soft); color:var(--good)}
.pill.warn{background:var(--signal-soft); color:var(--signal)}
.pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.info{background:var(--accent-soft); color:var(--accent)}
.pill.mute{background:var(--surface-2); color:var(--ink-3)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-weight:600; color:var(--ink-3); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; padding:10px 18px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
td{padding:12px 18px; border-bottom:1px solid var(--line-soft)}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:0; white-space:nowrap}
th.num{font-family:var(--font-ui)}
td.mono{white-space:nowrap}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.note{font-size:12.5px; color:var(--ink-3); line-height:1.6}
.divider{height:1px; background:var(--line-soft); margin:14px 0}
.empty{padding:40px 18px; text-align:center; color:var(--ink-3); font-size:13.5px}
.hint{border-left:3px solid var(--accent); background:var(--accent-soft); padding:11px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13px}
.stat{padding:15px 18px; display:flex; flex-direction:column; gap:4px}
.stat .v{font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1.05; letter-spacing:-.03em}
.stat .v small{font-size:15px; font-weight:600; color:var(--ink-3); margin-left:3px}
.stat .d{font-size:11.5px; color:var(--ink-3)}
.stat.hot{box-shadow:var(--shadow-sm)}
.bar{height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; width:56px}
.bar i{display:block; height:100%; border-radius:3px; background:var(--accent)}
.bar i.good{background:var(--good)} .bar i.warn{background:var(--signal)} .bar i.bad{background:var(--bad)}
.chart-wrap{position:relative; padding:4px 16px 14px}
.chart-tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .12s; background:var(--ink);
  color:var(--bg); padding:6px 10px; border-radius:6px; font-size:12px; white-space:nowrap; transform:translate(-50%,-115%)}
.chart-tip.on{opacity:1}
/* --- Dòng bấm được: cả dòng là chỗ để mở, không cần nút riêng ở cuối --- */
.row-link{cursor:pointer}
tr.row-link td{transition:background .12s}
tr.row-link:hover td{background:var(--surface-3)}
.list-row.row-link{transition:background .12s}
.list-row.row-link:hover{background:var(--surface-3)}
.row-link:focus-visible{outline:2px solid var(--accent-2); outline-offset:-2px; border-radius:var(--r-sm)}
/* nút phụ nằm trong dòng vẫn giữ nền riêng để không bị nền hover nuốt mất */
.row-link .btn{position:relative; z-index:1}
.list-row{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.list-row:last-child{border-bottom:0}
.list-row .grow{flex:1; min-width:0}
.list-row .name{font-weight:600; font-size:14.5px}
.list-row .meta{font-size:12px; color:var(--ink-3); margin-top:2px}
.stars{letter-spacing:1.5px; color:var(--signal); font-size:13px}
.stars em{color:var(--ink-3); opacity:.3; font-style:normal}
.price{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; letter-spacing:-.01em; text-align:right}
.price small{display:block; font-family:var(--font-ui); font-weight:400; font-size:11px; color:var(--ink-3)}
.mbox{background:var(--surface-2); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:9px}
.mrow{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px}
.mrow.total{border-top:1px dashed var(--line); padding-top:11px}
.mrow.total b{font-family:var(--font-display); font-size:27px; color:var(--good); font-weight:700; letter-spacing:-.025em}
/* ---- Bảng việc (kanban): mỗi cột là một vùng thả ---- */
.kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start}
.col{background:var(--surface-2); border-radius:var(--r); padding:10px;
  border:1px solid transparent; transition:border-color .14s, background .14s}
.col h4{font-family:var(--font-display); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); padding:3px 5px 10px; display:flex; align-items:center; gap:7px}
.col h4 .ct{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.col h4 .cn{background:var(--surface); border-radius:999px; min-width:20px; text-align:center;
  padding:1px 7px; font-size:11px; color:var(--ink-2); font-weight:600; letter-spacing:0}
/* chấm màu cho biết chặng nào: xám -> xanh -> cam -> xanh lá */
.col h4 .cdot{width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--ink-3)}
.col h4 .cdot.s1{background:var(--accent-2)}
.col h4 .cdot.s2{background:var(--signal)}
.col h4 .cdot.s3{background:var(--good)}
.col-body{min-height:64px; display:flex; flex-direction:column; gap:8px}
/* cột đang được rê thẻ tới */
.col.over{background:var(--accent-soft); border-color:var(--accent-2)}
.col-empty{border:1px dashed var(--line); border-radius:var(--r-sm); padding:16px 10px;
  text-align:center; font-size:12px; color:var(--ink-3)}
.col.over .col-empty{border-color:var(--accent-2); color:var(--accent)}

.task{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 12px; width:100%; text-align:left; display:block; position:relative;
  cursor:grab; touch-action:pan-y; box-shadow:var(--shadow-sm);
  transition:box-shadow .14s, transform .14s, border-color .14s}
.task:hover{border-color:var(--accent-2); box-shadow:var(--shadow); transform:translateY(-1px)}
.task:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
/* vạch màu bên trái cho biết việc trễ hay đã xong */
.task.late{border-left:3px solid var(--bad); padding-left:10px}
.task.done .t{color:var(--ink-2)}
.task.done{background:var(--surface-3)}
.task .t{font-size:13px; font-weight:500; line-height:1.4}
.task .b{display:flex; gap:8px; align-items:center; margin-top:8px; font-size:11px; color:var(--ink-3); flex-wrap:wrap}
.task.late .due{color:var(--bad); font-weight:600}
.task .stamp.ok{color:var(--good)}
/* thẻ gốc mờ đi trong lúc kéo, bản sao bay theo con trỏ */
.task.dragging{opacity:.35}
.task-ghost{position:fixed; left:0; top:0; z-index:120; pointer-events:none;
  box-shadow:var(--shadow-lg); transform-origin:top left; rotate:-1.5deg; cursor:grabbing}
body.dragging-now{cursor:grabbing; user-select:none}
body.dragging-now .task{cursor:grabbing}
/* thanh tiến độ việc trong thẻ tóm tắt chuyến */
.jobprog{display:flex; align-items:center; gap:8px}
.jobprog .bar{width:88px}
.chip{background:var(--surface-2); border-radius:999px; padding:1px 8px; color:var(--ink-2)}
.stamp{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px; letter-spacing:0; color:var(--ink-3)}
.chain-step{display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:start; padding:10px 0}
.cdot{width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center;
  font-size:12px; font-weight:700; color:var(--ink-3); background:var(--surface)}
.chain-step.done .cdot{background:var(--good); border-color:var(--good); color:var(--surface)}
.chain-step.now .cdot{border-color:var(--signal); color:var(--signal)}
.chain-step .lbl{font-size:13.5px; font-weight:500}
.chain-step .sub{font-size:11.5px; color:var(--ink-3)}
.cline{height:12px; margin-left:12px; border-left:2px dashed var(--line)}
.rdots{display:inline-flex; gap:6px}
.rdot{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface-3)}
.rdot.on{background:var(--signal); border-color:var(--signal)}
/* --- Ô chứng từ đính kèm --- */
.filebox{display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-3)}
.filebox img{width:46px; height:46px; object-fit:cover; border-radius:6px; flex:0 0 46px;
  border:1px solid var(--line)}
.filebox .fileicon{width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center;
  border-radius:6px; background:var(--surface-2); color:var(--ink-3);
  font-size:11px; font-weight:700; letter-spacing:.04em}
.filebox .grow{flex:1; min-width:0}
.filebox b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filebox .note{font-size:11.5px}
.field-plain input[type="file"]{background:transparent; border:1px dashed var(--line);
  border-radius:var(--r-sm); padding:10px 12px; font-size:13px; width:100%; cursor:pointer}
.field-plain input[type="file"]:hover{border-color:var(--accent-2)}
.rate-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.rate-row:last-child{border-bottom:0}

/* ---------- MODAL ---------- */
.modal{position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:16px}
.modal.on{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(5,15,18,.5); backdrop-filter:blur(2px)}
.modal-card{position:relative; background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg);
  width:100%; max-width:460px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden}
.modal-head{padding:16px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:10px}
.modal-head h3{font-size:16.5px}
.modal-head button{margin-left:auto; color:var(--ink-3); font-size:22px; line-height:1; padding:0 4px}
.modal-body{padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.modal-foot{padding:14px 18px; border-top:1px solid var(--line-soft); display:flex; gap:10px}
.modal-foot .btn{flex:1}

/* ---------- TOAST + THANH CÀI ĐẶT ---------- */
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:500;
  z-index:95; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}
.installbar{display:none; align-items:center; gap:12px; padding:10px 24px; background:var(--signal-soft);
  border-bottom:1px solid var(--line); font-size:13px}
.installbar.on{display:flex}
.installbar b{color:var(--signal)}
.installbar .btn{margin-left:auto}

/* ---------- ĐIỀU HƯỚNG DƯỚI (điện thoại) ---------- */
.tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--surface);
  border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px;
  font-size:10.5px; color:var(--ink-3)}
.tabbar button svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tabbar button.on{color:var(--accent); font-weight:600}
.tabbar .dot{position:absolute; top:4px; margin-left:16px; width:7px; height:7px; border-radius:50%; background:var(--signal)}

/* ---------- ĐIỆN THOẠI / MÁY TÍNH BẢNG ---------- */
@media (max-width:900px){
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .login{grid-template-columns:1fr} .login-art{display:none}
  .app.on{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar .mobile-logo{display:flex}
  .topbar{padding-left:16px; padding-right:16px}
  .wrap{padding:16px 14px calc(84px + env(safe-area-inset-bottom))}
  .tabbar{display:flex}
  .g4,.g3,.g2,.g23,.kanban{grid-template-columns:1fr}
  .g4.m2,.g2.m2{grid-template-columns:1fr 1fr}
  .page-head h2{font-size:19px}
  .installbar{padding:10px 14px}
  th,td{padding:10px 12px}
  .card-head,.card-pad{padding-left:14px; padding-right:14px}
  .list-row{padding:12px 14px; gap:10px}
  .seg button{padding:6px 10px; font-size:12px}
  .viewas-label{display:none}
  .topbar #roleSwitch{display:none}
  .topbar{gap:10px}
  .stat .v{font-size:26px}
  .modal{align-items:flex-end; padding:0}
  .modal-card{max-width:none; border-radius:18px 18px 0 0; max-height:92vh}
  .btn{padding:11px 16px}
}
@media (display-mode: standalone){
  .installbar{display:none !important}
}

/* ================= TỜ BÁO GIÁ IN RA PDF =================
   Trên màn hình thì ẩn hẳn; lúc in thì giấu toàn bộ app và chỉ chừa tờ này.
   Màu ép về đen trắng vì bảng màu tối của app in ra giấy sẽ tốn mực và khó đọc. */
.print-area{display:none}

@media print{
  @page{size:A4; margin:14mm 14mm 16mm}
  html,body{height:auto !important; background:#fff !important; color:#000 !important}
  body{font-size:12pt}
  .app,.login,.tabbar,.modal,.toast,.installbar{display:none !important}
  .print-area{display:block; color:#000}

  .pr-head{display:flex; justify-content:space-between; align-items:flex-start;
    border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:16px}
  .pr-co{font-size:15pt; font-weight:800; letter-spacing:-.01em}
  .pr-sub{font-size:9.5pt; color:#333; line-height:1.5}
  .pr-right{text-align:right}
  .pr-title{font-size:20pt; font-weight:800; letter-spacing:.06em; margin-bottom:2px}

  .pr-to{margin-bottom:14px}
  .pr-lbl{font-size:8.5pt; text-transform:uppercase; letter-spacing:.1em; color:#555; margin-bottom:2px}
  .pr-kh{font-size:13pt; font-weight:700}

  .pr-tbl{width:100%; border-collapse:collapse; margin-bottom:14px}
  .pr-tbl th{background:#f0f0f0; border:1px solid #000; padding:7px 9px;
    font-size:9pt; text-transform:uppercase; letter-spacing:.05em; text-align:left}
  .pr-tbl td{border:1px solid #000; padding:9px; vertical-align:top; font-size:11pt}
  .pr-tbl .r{text-align:right}
  .pr-sum td{font-weight:800; font-size:12.5pt; background:#f7f7f7}

  .pr-note{font-size:10pt; line-height:1.7; margin-bottom:30px}
  .pr-sign{display:flex; justify-content:space-between; gap:60px; margin-top:34px;
    break-inside:avoid; page-break-inside:avoid}
  .pr-sign > div{flex:1; text-align:center}
  .pr-sign .pr-lbl{text-align:center}
  .pr-line{height:58px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}