/* ITC Avant Garde Gothic — bản cài sẵn trên máy công ty, tự phục vụ trong mạng
   nội bộ để máy nào mở app cũng thấy đúng một kiểu chữ. Cả 3 nét đều đủ dấu
   tiếng Việt (đã kiểm từng ký tự). */
@font-face{
  font-family:"Avant Garde Gothic TZ";
  src:url("/fonts/avantgarde-400.woff2") format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Avant Garde Gothic TZ";
  src:url("/fonts/avantgarde-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Avant Garde Gothic TZ";
  src:url("/fonts/avantgarde-700.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}

/* ==========================================================================
   TIZINO Design OS — giao diện theo ngôn ngữ Lark Base
   Nền xám nhạt, thẻ trắng bo nhẹ, bảng dày đặc, tag màu pastel.
   Màu nhấn dùng navy + gold của TIZINO thay cho xanh Lark.
   ========================================================================== */
:root{
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --surface-2:#F2F2F7;
  --surface-3:#E8E8ED;
  --border:#E5E5E7;
  --border-soft:#EFEFF2;

  --t1:#1D1D1F;
  --t2:#6E6E73;
  --t3:#86868B;

  --navy:#2E4A6B;
  --navy-h:#24405E;
  --navy-bg:#EDF1F6;
  --gold:#C89B3C;
  --gold-bg:#FBF3E3;

  --green:#2EA121; --green-bg:#F0FAEF;
  --orange:#D77900; --orange-bg:#FFF6E8;
  --red:#D83931;    --red-bg:#FEF1F1;
  --purple:#7642CC; --purple-bg:#F5F0FF;
  --cyan:#0C8189;   --cyan-bg:#EBF7F7;

  --r:10px;
  --r-lg:16px;
  --r-tron:980px;
  --sidebar:230px;
  --shadow:0 4px 20px rgba(0,0,0,.03);
  --nut-nen:#1D1D1F; --nut-chu:#FFFFFF;
  --bo-the:16px;
  --shadow-noi:0 8px 28px rgba(0,0,0,.07);

  /* sắc độ phụ — gom lại để đổi nền tối chỉ sửa một chỗ */
  --surface-mo:#FAFAFC;
  --surface-nhat:#FCFCFD;
  --t4:#C7C7CC;
  --vang:#E3A008;
  --green-vien:#C4E8C0;  --green-dam:#1E6B16;
  --red-vien:#F9C6C4;    --red-dam:#A32820;   --red-nhat:#FFFBFA;
  --gold-vien:#EBD9AE;   --gold-dam:#8A6415;
  --navy-vien:#C9D6E5;
  --purple-vien:#DDD0F5; --purple-dam:#4B2A8A;
  --orange-vien:#F5D9A8; --orange-dam:#7C2D12;
  --vien-anh:var(--border);
}

/* ===================== Nền tối ===================== */
/* Theo máy khi người dùng chọn "theo hệ thống" */
@media (prefers-color-scheme: dark) {
  :root:not([data-giao-dien="sang"]) {
    --bg:#16181C; --surface:#1E2126; --surface-2:#262A30; --surface-3:#2F343B;
    --border:#343941; --border-soft:#2B3037;
    --t1:#E8EAED; --t2:#A4ABB5; --t3:#7B828D; --t4:#5A616B;
    --navy:#8FB4E0; --navy-h:#A7C6EC; --navy-bg:#22303F;
    --gold:#D9B268; --gold-bg:#332A18;
    --green:#6FD160; --green-bg:#1B2A1B; --green-vien:#2F4A2C; --green-dam:#9BE28F;
    --orange:#F0A44A; --orange-bg:#33260F;
    --red:#F08A82;    --red-bg:#331F1E; --red-vien:#5A2E2B; --red-dam:#F3A9A2; --red-nhat:#241B1B;
    --purple:#B49BEE; --purple-bg:#2A2340; --purple-vien:#3E3560; --purple-dam:#CDBBF7;
    --cyan:#5FC7CE;   --cyan-bg:#162B2C;
    --surface-mo:#22252A; --surface-nhat:#1B1E23;
    --vang:#D9A93E; --gold-vien:#4A3E24; --gold-dam:#E3C57F;
    --navy-vien:#33465C; --orange-vien:#4D3A1C; --orange-dam:#F2C08A;
    --nut-nen:#F5F5F7; --nut-chu:#1D1D1F;
    --shadow:0 4px 20px rgba(0,0,0,.35); --shadow-noi:0 8px 28px rgba(0,0,0,.5);
  }
}
/* Khi người dùng tự chọn nền tối */
:root[data-giao-dien="toi"] {
  --bg:#16181C; --surface:#1E2126; --surface-2:#262A30; --surface-3:#2F343B;
  --border:#343941; --border-soft:#2B3037;
  --t1:#E8EAED; --t2:#A4ABB5; --t3:#7B828D; --t4:#5A616B;
  --navy:#8FB4E0; --navy-h:#A7C6EC; --navy-bg:#22303F;
  --gold:#D9B268; --gold-bg:#332A18;
  --green:#6FD160; --green-bg:#1B2A1B; --green-vien:#2F4A2C; --green-dam:#9BE28F;
  --orange:#F0A44A; --orange-bg:#33260F;
  --red:#F08A82;    --red-bg:#331F1E; --red-vien:#5A2E2B; --red-dam:#F3A9A2; --red-nhat:#241B1B;
  --purple:#B49BEE; --purple-bg:#2A2340; --purple-vien:#3E3560; --purple-dam:#CDBBF7;
  --cyan:#5FC7CE;   --cyan-bg:#162B2C;
  --surface-mo:#22252A; --surface-nhat:#1B1E23;
  --vang:#D9A93E; --gold-vien:#4A3E24; --gold-dam:#E3C57F;
  --navy-vien:#33465C; --orange-vien:#4D3A1C; --orange-dam:#F2C08A;
  --nut-nen:#F5F5F7; --nut-chu:#1D1D1F;
  --shadow:0 4px 20px rgba(0,0,0,.35); --shadow-noi:0 8px 28px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--t1);
  /* Font phải có sẵn glyph tiếng Việt. PingFang SC (tiếng Trung) không có,
     trình duyệt phải tự ghép dấu nên chữ vỡ: "Nguyêñ Hưũ Haỉ". */
  font:14.5px/1.65 "Avant Garde Gothic TZ","ITC Avant Garde Gothic","Century Gothic",
    -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- khung */
.shell{display:flex;min-height:100vh}

.side{
  width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.side .logo{
  padding:15px 16px 13px;font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--navy);border-bottom:1px solid var(--border-soft);
}
.side .logo span{color:inherit}
.side nav{padding:8px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.side .grp{
  padding:12px 8px 5px;font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--t3);
}
.side nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  color:var(--t1);font-size:13.5px;line-height:1.35;text-decoration:none;
}
.side nav a:hover{background:var(--surface-2);text-decoration:none}
.side nav a.on{background:var(--navy-bg);color:var(--navy);font-weight:600}
.side nav a .ic{
  width:17px;height:17px;flex:0 0 17px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--t3);
}
.side nav a.on .ic{color:var(--navy)}
.side .me{
  border-top:1px solid var(--border-soft);padding:10px 12px;display:flex;
  align-items:center;gap:9px;
}
.side .me .av{
  width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
  flex:0 0 26px;
}
.side .me .nm{flex:1;min-width:0;font-size:12.5px;line-height:1.25}
.side .me .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .me .nm span{color:var(--t3);font-size:11px}
.side .me button{
  background:none;border:0;color:var(--t3);cursor:pointer;font:inherit;font-size:12px;padding:2px 4px;
}
.side .me button:hover{color:var(--red)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 20px;height:49px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:15.5px;font-weight:600;margin:0;flex:1;letter-spacing:-.005em}
.topbar .hint{color:var(--t3);font-size:12.5px;font-weight:400}
.page{padding:18px 20px 56px;flex:1}

/* ---------------------------------------------------------------- thẻ */
.card{background:var(--surface);border:0;border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.card .hd{
  padding:16px 20px 12px;border-bottom:1px solid var(--border-soft);display:flex;
  align-items:center;gap:10px;
}
.card .hd h2{font-size:15px;font-weight:600;margin:0;flex:1;letter-spacing:-.01em}
.card .hd .sub{font-size:12px;color:var(--t3);font-weight:400}
.card .bd{padding:14px 15px}
.card .bd.tight{padding:0}

.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g21,.g2{grid-template-columns:1fr}}
@media (max-width:640px){.g4{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- ô số */
.kpi{background:var(--surface);border:0;border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow)}
.kpi .k{font-size:12.5px;color:var(--t3);font-weight:400;display:flex;align-items:center;gap:6px}
.kpi .v{font-size:32px;font-weight:400;line-height:1.2;margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpi .v a,.kpi .v b,.kpi .v span{font-weight:400}
.kpi .d{font-size:12px;color:var(--t3);margin-top:8px;display:flex;align-items:center;gap:5px}
.kpi .d .up{color:var(--green);font-weight:500}
.kpi .d .dn{color:var(--red);font-weight:500}
.kpi.warn .v{color:var(--red)}
.kpi.ok .v{color:var(--green)}
.kpi .spark{margin-top:7px}

/* ---------------------------------------------------------------- bảng */
.tw{overflow-x:auto;border-radius:var(--r-lg)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);
  border-left:0;border-right:0;vertical-align:middle;white-space:nowrap}
th{font-size:12.5px;color:var(--t3);font-weight:500;letter-spacing:.005em;
  background:var(--surface-mo);padding-top:11px;padding-bottom:11px;position:sticky;top:0}
td{color:var(--t1)}
tbody tr:hover td{background:var(--surface-mo)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:180px}
.t-mute{color:var(--t3)}

/* ---------------------------------------------------------------- tag */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 10px;
  border-radius:var(--r-tron);font-size:12px;font-weight:500;letter-spacing:0;
  background:color-mix(in srgb, var(--t3) 12%, transparent);color:var(--t2);
  white-space:nowrap;backdrop-filter:saturate(180%) blur(6px)}
.tag.navy{background:color-mix(in srgb, var(--navy) 12%, transparent);color:var(--navy)}
.tag.gold{background:color-mix(in srgb, var(--gold) 16%, transparent);color:var(--gold-dam)}
.tag.green{background:color-mix(in srgb, var(--green) 14%, transparent);color:var(--green-dam)}
.tag.orange{background:color-mix(in srgb, var(--orange) 15%, transparent);color:var(--orange-dam)}
.tag.red{background:color-mix(in srgb, var(--red) 13%, transparent);color:var(--red-dam)}
.tag.purple{background:color-mix(in srgb, var(--purple) 13%, transparent);color:var(--purple-dam)}
.tag.cyan{background:color-mix(in srgb, var(--cyan) 14%, transparent);color:var(--cyan)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;flex:0 0 7px}

/* ---------------------------------------------------------------- kanban */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:16px;
  overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:transparent;border-radius:var(--r-lg);padding:0 2px;border:0;min-width:280px}
.col h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--t1);
  display:flex;align-items:center;gap:8px;padding:0 4px;letter-spacing:-.01em}
.col h3 b{margin-left:auto;background:color-mix(in srgb, var(--t3) 12%, transparent);
  border:0;border-radius:var(--r-tron);padding:0 9px;font-size:11.5px;color:var(--t2);
  font-weight:600;line-height:20px}
.don{display:block;background:var(--surface);border:0;box-shadow:var(--shadow);
  border-radius:14px;padding:13px 14px;margin-bottom:10px;text-decoration:none;color:var(--t1);
  transition:transform .18s ease, box-shadow .18s ease}
.don:hover{transform:translateY(-2px);box-shadow:var(--shadow-noi);text-decoration:none}
.don .ma{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.don .kh{font-weight:500;font-size:13.5px;margin:3px 0 5px;line-height:1.35}
.don .meta{font-size:11.5px;color:var(--t3);display:flex;justify-content:space-between;gap:8px}
.don.tre{border-left:3px solid var(--red)}
.don.gap{border-left:3px solid var(--gold)}

/* ---------------------------------------------------------------- form */
label{display:block;font-size:12.5px;color:var(--t3);margin-bottom:6px;font-weight:500}
input,select,textarea{
  font:inherit;font-size:13.5px;padding:10px 14px;height:38px;border:0;
  border-radius:var(--r);background:var(--surface-2);color:var(--t1);width:100%;
  transition:box-shadow .15s ease, background .15s ease;
}
textarea{height:auto;line-height:1.55}
input:hover,select:hover,textarea:hover{background:var(--surface-3)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 22%, transparent)}
input[type=checkbox]{width:auto;height:auto}
.f{margin-bottom:11px}
.f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:11px;align-items:end}
.f-row .btnwrap{display:flex;gap:7px}

button,.btn{
  font:inherit;font-size:13.5px;font-weight:500;height:38px;padding:0 20px;
  border-radius:var(--r-tron);border:1px solid var(--nut-nen);background:var(--nut-nen);
  color:var(--nut-chu);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;text-decoration:none;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}
button:hover,.btn:hover{opacity:.86;text-decoration:none}
button:active,.btn:active{transform:scale(.975)}
button.phu,.btn.phu{background:var(--surface-2);color:var(--t1);border-color:transparent}
button.phu:hover,.btn.phu:hover{background:var(--surface-3);opacity:1}
button.vang{background:var(--gold);border-color:var(--gold);color:#33280C}
button.vang:hover{filter:brightness(.96)}
button.nho,.btn.nho{height:28px;padding:0 13px;font-size:12px}

.bao{padding:9px 13px;border-radius:var(--r);margin-bottom:14px;font-size:13px;
  display:flex;align-items:center;gap:8px}
.bao.loi{background:var(--red-bg);color:var(--red);border:1px solid var(--red-vien)}
.bao.ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-vien)}

/* ---------------------------------------------------------------- biểu đồ */
.chart{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--t2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.hbar{display:flex;flex-direction:column;gap:9px}
.hbar .r{display:grid;grid-template-columns:104px 1fr 92px;align-items:center;gap:10px;font-size:12.5px}
.hbar .nm{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .tr{height:16px;background:var(--surface-3);border-radius:3px;overflow:hidden}
.hbar .fl{height:100%;background:var(--navy);border-radius:3px}
.hbar .fl.g{background:var(--gold)}
.hbar .fl.r{background:var(--red)}
.hbar .vl{text-align:right;font-variant-numeric:tabular-nums;color:var(--t2)}
.hbar .vl b{color:var(--t1);font-weight:600}
.empty{padding:26px 10px;text-align:center;color:var(--t3);font-size:13px}

/* ---------------------------------------------------------------- đăng nhập */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:360px}
.login .logo{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:2px}
.login .logo span{color:inherit}
.login .sub{color:var(--t3);font-size:13px;margin:0 0 20px}
.login .card{padding:20px}

@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex:none;
    border-right:0;border-bottom:1px solid var(--border)}
  .side nav{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .side .grp{display:none}
  .side .me{order:-1}
  .page{padding:14px 12px 40px}
}

/* kéo thả */
.col.over{background:var(--navy-bg);outline:2px dashed var(--navy);outline-offset:-2px}
.don{cursor:grab}
.don:active{cursor:grabbing}
#bao-keo{position:sticky;top:57px;z-index:15}
.don.mo{opacity:.35}
.don.bay{position:fixed;z-index:999;pointer-events:none;box-shadow:0 8px 20px rgba(31,35,41,.18);
  transform:rotate(1.5deg);margin:0;opacity:.96}
.board .col{min-height:90px;touch-action:pan-x pan-y}
.don{touch-action:none;user-select:none;-webkit-user-select:none}
.don{-webkit-user-drag:none;-khtml-user-drag:none}
.don *{pointer-events:none}

/* chuyển chế độ xem — giống tab view của Lark Base */
/* thanh trượt capsule chuẩn iOS */
.views{display:inline-flex;gap:2px;margin-bottom:14px;background:var(--surface-2);
  border-radius:var(--r-tron);padding:3px;max-width:100%;overflow-x:auto}
.views a{padding:7px 16px;font-size:13px;font-weight:500;color:var(--t2);text-decoration:none;
  border-radius:var(--r-tron);white-space:nowrap;transition:background .15s ease, color .15s ease}
.views a:hover{color:var(--t1);text-decoration:none}
.views a.on{color:var(--t1);font-weight:600;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
tr.hang-tre td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.canh-bao{color:var(--red)}

/* ---------------------------------------------------------------- chat */
.chat{display:grid;grid-template-columns:200px 1fr;gap:12px;height:calc(100vh - 130px);min-height:440px}
.kenh{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:8px;overflow-y:auto}
.kenh .tieu{font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--t3);padding:6px 8px 8px}
.kenh a{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:var(--r);
  color:var(--t1);font-size:13.5px;text-decoration:none}
.kenh a:hover{background:var(--surface-2);text-decoration:none}
.kenh a.on{background:var(--navy-bg);color:var(--navy);font-weight:600}
.kenh .th{color:var(--t3);font-weight:600}
.kenh a.on .th{color:var(--navy)}
.kenh .tn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kenh .dem{font-size:11px;color:var(--t3)}

.khung{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden}
.dau-kenh{padding:11px 15px;border-bottom:1px solid var(--border-soft);display:flex;
  align-items:baseline;gap:10px;font-size:13.5px}
.dau-kenh .t-mute{font-size:12px}
.cuon{flex:1;overflow-y:auto;padding:14px 15px;display:flex;flex-direction:column;gap:12px}
.tin{display:flex;gap:9px;align-items:flex-start}
.tin .av{width:28px;height:28px;border-radius:50%;background:var(--surface-3);color:var(--t2);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;flex:0 0 28px}
.tin.toi .av{background:var(--navy);color:#fff}
.tin .noi{min-width:0}
.tin .dau{font-size:12px;font-weight:600;color:var(--t1);display:flex;gap:8px;align-items:baseline}
.tin .dau span{font-weight:400;color:var(--t3);font-size:11.5px}
.tin .chu{font-size:13.5px;color:var(--t1);margin-top:2px;word-wrap:break-word;line-height:1.5}
.go{display:flex;gap:8px;padding:11px 15px;border-top:1px solid var(--border-soft)}
.go input{flex:1}
@media (max-width:860px){
  .chat{grid-template-columns:1fr;height:auto}
  .kenh{display:flex;gap:4px;overflow-x:auto}
  .kenh .tieu{display:none}
  .cuon{max-height:50vh}
}
.tag.hong{background:#FBEFF8;color:#B02A8F}

/* lọc nhanh + dấu đánh giá */
.loc-nhanh{display:inline-flex;gap:2px;flex-wrap:wrap;margin-bottom:14px;
  background:var(--surface-2);border-radius:var(--r-tron);padding:3px;max-width:100%}
.loc-nhanh a{padding:6px 14px;border-radius:var(--r-tron);font-size:12.5px;font-weight:500;
  color:var(--t2);background:transparent;border:0;text-decoration:none;white-space:nowrap;
  transition:background .15s ease, color .15s ease}
.loc-nhanh a:hover{color:var(--t1);text-decoration:none}
.loc-nhanh a.on{background:var(--surface);color:var(--t1);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cham{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle}
.cham.khen{background:var(--green)}
.cham.loi{background:var(--red)}
.link-file{display:block;font-size:13px;word-break:break-all;line-height:1.4;
  padding:5px 8px;background:var(--navy-bg);border-radius:var(--r)}

/* ---------------------------------------------------------------- LỊCH */
.lich-dau{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.lich-dau div{font-size:11.5px;color:var(--t2);font-weight:600;text-align:center;padding:4px 0}
.lich{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lich .o{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r);
  min-height:96px;padding:6px 7px;display:flex;flex-direction:column;gap:3px}
.lich .o.trong{background:transparent;border-color:transparent}
.lich .o.nay{border-color:var(--navy);background:var(--navy-bg)}
.lich .so{font-size:12px;color:var(--t2);display:flex;justify-content:space-between;
  align-items:center;font-variant-numeric:tabular-nums}
.lich .so b{background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:0 6px;font-size:10.5px;line-height:16px;color:var(--t2)}
.lich .viec{display:flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--border);border-radius:4px;padding:2px 5px;font-size:11.5px;
  color:var(--t1);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lich .viec:hover{border-color:var(--navy);text-decoration:none}
.lich .viec.tre{border-left:2px solid var(--red)}
.lich .viec.gap{border-left:2px solid var(--gold)}
.cham-tt{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.lich .them{font-size:11px;color:var(--t3);padding-left:2px}

/* ---------------------------------------------------------------- GANTT */
.gantt-wrap{overflow-x:auto}
.gantt{--gw:30px;--gten:190px;min-width:calc(var(--gten) + 31 * var(--gw));position:relative}
.g-dau,.g-hang{display:grid;grid-template-columns:var(--gten) 1fr;align-items:stretch}
.g-dau{position:sticky;top:0;background:var(--surface-2);border-bottom:1px solid var(--border);z-index:2}
.g-ten{padding:7px 12px;font-size:12.5px;border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden}
.g-ten a{font-weight:600;font-size:12.5px}
.g-ten span{color:var(--t3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-dau .g-ten{font-size:12px;color:var(--t2);font-weight:600}
.g-luoi{display:flex;position:relative}
.g-ngay{width:var(--gw);flex:0 0 var(--gw);text-align:center;font-size:11px;color:var(--t3);
  padding:7px 0;border-right:1px solid var(--border-soft)}
.g-ngay.cn{background:var(--surface-nhat)}
.g-hang{border-bottom:1px solid var(--border-soft);min-height:34px}
.g-o{width:var(--gw);flex:0 0 var(--gw);border-right:1px solid var(--border-soft)}
.g-o.cn{background:var(--surface-nhat)}
.g-thanh{position:absolute;top:6px;height:21px;border-radius:4px;color:#fff;font-size:11px;
  line-height:21px;padding:0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-nay{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);z-index:1}

/* -------------------------------------------------------------- THƯ VIỆN */
.tv{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.tv-the{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;color:var(--t1);display:flex;flex-direction:column;
  box-shadow:var(--shadow)}
.tv-the:hover{border-color:var(--navy);text-decoration:none}
.tv-the.tre{border-left:3px solid var(--red)}
.tv-anh{height:62px;display:flex;align-items:center;gap:5px;padding:10px;flex-wrap:wrap;
  align-content:flex-start}
.tv-noi{padding:10px 12px 11px;display:flex;flex-direction:column;gap:2px;flex:1}
.tv-ma{font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.tv-kh{font-weight:600;font-size:13.5px;line-height:1.3}
.tv-bo{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-chan{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--t3);
  margin-top:6px;padding-top:7px;border-top:1px solid var(--border-soft)}

/* dải ô chỉ số nhỏ kiểu dashboard Lark */
.o-nho{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.on-o{background:var(--surface);padding:11px 13px;text-align:center}
.on-k{font-size:11.5px;color:var(--t2);line-height:1.3;min-height:30px;
  display:flex;align-items:center;justify-content:center}
.on-v{font-size:24px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.on-v.navy{color:var(--navy)} .on-v.green{color:var(--green)} .on-v.red{color:var(--red)}
.on-v.gold{color:var(--gold)} .on-v.orange{color:var(--orange)} .on-v.cyan{color:var(--cyan)}
.on-v.hong{color:#B02A8F}

/* chuông thông báo */
.chuong{position:relative;text-decoration:none;font-size:16px;line-height:1;padding:5px 7px;
  border-radius:var(--r);color:var(--t2)}
.chuong:hover{background:var(--surface-2);text-decoration:none}
.chuong b{position:absolute;top:-1px;right:-2px;background:var(--red);color:#fff;font-size:10px;
  line-height:15px;min-width:15px;padding:0 4px;border-radius:8px;text-align:center;font-weight:700}

/* checklist tự duyệt */
.cl{display:flex;flex-direction:column;gap:6px}
.cl-d{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1);margin:0;
  padding:6px 9px;border:1px solid var(--border-soft);border-radius:var(--r);cursor:pointer}
.cl-d:hover{background:var(--surface-2)}
.cl-d.xong{background:var(--green-bg);border-color:var(--green-vien)}
.cl-d input{width:auto;height:auto;margin:0}

/* cổng khách hàng */
.kh-trang{max-width:1000px;margin:0 auto;padding:0 18px 50px}
.kh-dau{display:flex;align-items:baseline;gap:14px;padding:20px 0 16px;
  border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap}
.kh-dau .logo{font-size:18px;font-weight:700;color:var(--navy)}
.kh-dau .logo span{color:inherit}
.kh-ten{font-size:14px;color:var(--t2)}
.kh-oso{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;
  margin-bottom:22px}
.kh-oso div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:13px 16px}
.kh-oso span{display:block;font-size:12.5px;color:var(--t2)}
.kh-oso b{display:block;font-size:22px;font-weight:700;margin-top:3px;color:var(--navy)}
.kh-oso b.cho{color:var(--orange)} .kh-oso b.xong{color:var(--green)} .kh-oso b.no{color:var(--red)}
.kh-h2{font-size:15px;font-weight:600;margin:24px 0 10px;color:var(--t1)}
.kh-the{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px 17px;margin-bottom:12px}
.kh-the.cho{border-left:3px solid var(--orange)}
.kh-the-dau{display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-bottom:10px;flex-wrap:wrap}
.kh-chan{margin-top:30px;padding-top:16px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--t3)}
.kpi .v a{color:inherit;text-decoration:none}
.kpi .v a:hover{color:var(--navy);text-decoration:underline}
.hbar .nm a{color:var(--t1);text-decoration:none}
.hbar .nm a:hover{color:var(--navy);text-decoration:underline}


/* cảnh báo tải khi phân công */
.tai-canh-bao{background:var(--red-bg);border:1px solid var(--red-vien);color:var(--red);
  border-radius:var(--r);padding:9px 12px;font-size:13px;margin-bottom:11px}
.tai-goi-y{background:var(--green-bg);border:1px solid var(--green-vien);border-radius:var(--r);
  padding:9px 12px;font-size:13px;margin-bottom:11px;color:var(--green)}
.tai-goi-y b{color:var(--t1)}
.ly-do-tre{font-size:11.5px}
details.nhanh{display:inline}
details.nhanh summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  height:26px;padding:0 10px;font-size:12px;font-weight:500;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);color:var(--t1)}
details.nhanh summary::-webkit-details-marker{display:none}
details.nhanh summary:hover{background:var(--surface-2);border-color:var(--t4)}
details.nhanh[open] summary{background:var(--navy-bg);border-color:var(--navy);color:var(--navy)}
details.nhanh .hop{position:absolute;z-index:30;margin-top:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 6px 18px rgba(31,35,41,.14);
  padding:12px;min-width:270px}

/* trao đổi trong đơn */
.cuon-don{display:flex;flex-direction:column;gap:11px;max-height:260px;overflow-y:auto;
  padding-top:12px;border-top:1px solid var(--border-soft)}
.tin.khach .av{background:var(--gold);color:#33280C}
.tin.khach .chu{background:var(--gold-bg);border-radius:6px;padding:6px 9px;display:inline-block}

/* đính ảnh vào yêu cầu */
.anh-xem{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.anh-o{position:relative;width:88px;height:88px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:var(--surface-2)}
.anh-o img{width:100%;height:100%;object-fit:cover;display:block}
.anh-o button{position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;
  border-radius:50%;background:rgba(0,0,0,.6);border:0;color:#fff;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.anh-o span{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;
  font-size:10px;text-align:center;padding:1px 0}
.anh-chon{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border:1px dashed var(--border);border-radius:var(--r);cursor:pointer;font-size:13.5px;
  color:var(--t2);background:var(--surface)}
.anh-chon:hover{border-color:var(--navy);color:var(--navy)}
.anh-chon input{display:none}
.anh-luoi{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.anh-luoi a{display:block;width:78px;height:78px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border)}
.anh-luoi img{width:100%;height:100%;object-fit:cover;display:block}

/* huy hiệu số việc chờ trên menu trái */
.side nav a .dem-menu{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red,var(--red));color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1
}
/* băng nhắc yêu cầu khách chờ tiếp nhận */
.bao.cho-nhan{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--orange-bg);border:1px solid var(--orange-vien);color:var(--orange-dam);margin-bottom:12px
}
.bao.cho-nhan .ds-yc{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.bao.cho-nhan .ds-yc a{
  background:var(--surface);border:1px solid var(--orange-vien);border-radius:999px;
  padding:3px 10px;font-size:12.5px;color:var(--orange-dam);text-decoration:none
}
.bao.cho-nhan .ds-yc a:hover{background:var(--orange-bg)}

[hidden]{display:none!important}

/* ===================== Cổng khách hàng — bản nâng cấp ===================== */
.kh-nhac{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;
  background:var(--orange-bg);border:1px solid var(--orange-vien);border-left:3px solid var(--orange);
  border-radius:var(--r-lg);color:var(--orange-dam);font-size:13.5px;text-decoration:none
}
.kh-nhac:hover{background:#FDEFD8;text-decoration:none}
.kh-nhac .cham{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;
  box-shadow:0 0 0 4px rgba(215,121,0,.16)}
.kh-nhac .di{margin-left:auto;font-weight:600;white-space:nowrap}

.kh-oso .o-no{display:flex;flex-direction:column;align-items:flex-start}
.kh-oso .qr-nut{margin-top:8px;height:28px;padding:0 11px;font-size:12.5px}

/* thẻ đơn đang chờ khách duyệt — viền nổi bật */
.kh-the.cho{
  border:2px solid var(--orange);border-left:4px solid var(--orange);
  box-shadow:0 2px 10px rgba(215,121,0,.13)
}
.kh-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kh-nut .xem-anh{
  background:var(--navy-bg);color:var(--navy);border:1px solid var(--navy-vien);font-weight:600
}
.kh-nut .xem-anh:hover{background:#E1E9F2;text-decoration:none}

/* bảng dữ liệu kiểu thẻ, phân cách bằng nền ghi nhạt */
.kh-bang{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:4px
}
.kh-bang table{width:100%;border-collapse:collapse}
.kh-bang thead th{
  background:var(--surface-mo);font-size:12px;font-weight:600;color:var(--t2);text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap
}
.kh-bang tbody td{padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--border-soft)}
.kh-bang tbody tr:last-child td{border-bottom:0}
.kh-bang tbody tr:nth-child(even) td{background:var(--surface-nhat)}
.kh-bang tbody tr:hover td{background:var(--surface-mo)}
.kh-bang tbody tr.con-no td{background:var(--red-nhat)}
.kh-bang .num{text-align:right;font-variant-numeric:tabular-nums}
.kh-bang .empty{padding:18px 0}

/* dải tiến độ 4 bước */
.bstep{display:flex;gap:3px;margin-bottom:5px}
.bstep i{display:block;width:26px;height:5px;border-radius:3px;background:var(--surface-3)}
.bstep.vang i.on{background:var(--vang)}
.bstep.cam i.on{background:var(--orange)}
.bstep.xanh i.on{background:var(--green)}
.nhan-td{font-size:12.5px;font-weight:600}
.nhan-td.vang{color:var(--gold-dam)} .nhan-td.cam{color:var(--orange)} .nhan-td.xanh{color:var(--green)}
.kh-chu-thich{
  display:flex;gap:16px;flex-wrap:wrap;padding:9px 14px;background:var(--surface-mo);
  border-top:1px solid var(--border-soft);font-size:12px;color:var(--t2)
}
.kh-chu-thich span{display:flex;align-items:center;gap:6px}
.kh-chu-thich i{width:14px;height:5px;border-radius:3px;display:block}
.kh-chu-thich i.vang{background:var(--vang)} .kh-chu-thich i.cam{background:var(--orange)}
.kh-chu-thich i.xanh{background:var(--green)}

/* hộp QR */
.qr-hop{
  border:0;border-radius:12px;padding:22px;max-width:330px;width:calc(100% - 32px);
  box-shadow:0 18px 44px rgba(31,35,41,.22);color:var(--t1)
}
.qr-hop::backdrop{background:rgba(31,35,41,.45)}
.qr-hop h3{margin:0 0 14px;font-size:16px;text-align:center}
.qr-dong{position:absolute;top:8px;right:8px}
.qr-dong button{
  background:transparent;border:0;color:var(--t3);font-size:15px;cursor:pointer;
  width:28px;height:28px;padding:0;border-radius:6px
}
.qr-dong button:hover{background:var(--surface-2);color:var(--t1)}
.qr-anh{display:flex;justify-content:center;margin-bottom:14px}
.qr-anh svg{width:200px;height:200px;border:1px solid var(--border);border-radius:8px}
.qr-tt{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:0 0 12px;font-size:13px}
.qr-tt dt{color:var(--t2)}
.qr-tt dd{margin:0;word-break:break-word}
.qr-tt dd .tien{color:var(--red);font-size:15px}
.qr-tt .chep{
  margin-left:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;
  font-size:11px;color:var(--t2);padding:1px 7px;cursor:pointer
}
.qr-tt .chep:hover{background:var(--surface-3)}
.qr-tt .chep.xong{background:var(--green-bg);border-color:var(--green-vien);color:var(--green)}
.qr-ghi{margin:0;font-size:12px;color:var(--t2);line-height:1.55;
  background:var(--surface-mo);border-radius:6px;padding:9px 11px}

@media (max-width:640px){
  .kh-bang{overflow-x:auto}
  .kh-bang table{min-width:560px}
  .kh-nut{flex-direction:column;align-items:stretch}
  .kh-nut .btn,.kh-nut button{width:100%;text-align:center;justify-content:center}
}
/* ảnh khách đính kèm trong bảng: giữ hàng gọn, bấm vào xem to */
.kh-bang .anh-luoi{display:flex;gap:6px;flex-wrap:wrap}
.kh-bang .anh-luoi img{width:44px;height:44px;object-fit:cover;border-radius:5px;
  border:1px solid var(--border);display:block}
.qr-tt dd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.qr-tt .chep{margin-left:0}

/* ---- Khách B2B: Sales phụ trách ---- */
.loc-sale{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px;
  padding:9px 12px;background:var(--surface-mo);border:1px solid var(--border);border-radius:var(--r-lg)
}
.loc-sale label{font-size:12.5px;color:var(--t2);margin:0;font-weight:600}
.loc-sale select{width:auto;min-width:210px;height:32px;font-size:13px;background:var(--surface)}
.loc-sale .bo-loc{font-size:12.5px;color:var(--t2)}
.dang-loc{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:9px 13px;font-size:13px;
  background:var(--purple-bg);border:1px solid var(--purple-vien);border-left:3px solid var(--purple);
  border-radius:var(--r-lg);color:var(--purple-dam)
}
.dang-loc a{margin-left:auto;font-weight:600;white-space:nowrap}
.tag-sale{
  display:inline-flex;align-items:center;gap:5px;background:var(--purple-bg);color:var(--purple-dam);
  border:1px solid var(--purple-vien);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;
  white-space:nowrap
}
.tag-sale i{font-style:normal;font-weight:500;color:var(--t2);font-variant-numeric:tabular-nums}
.cot-sale{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ma-noi-bo{font-size:11.5px;color:var(--t3);margin-top:2px}
.bat-buoc{color:var(--red)}
.tom-tat-sale{
  margin:0 0 10px;padding:10px 13px;font-size:13px;line-height:1.6;
  background:var(--navy-bg);border:1px solid var(--navy-vien);border-radius:var(--r-lg);color:var(--navy)
}
.bang-sale-kh{
  display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;padding:9px 13px;font-size:13px;
  background:var(--purple-bg);border:1px solid var(--purple-vien);border-radius:var(--r-lg);color:var(--purple-dam)
}
form.bang-sale-kh{align-items:center}
form.bang-sale-kh label{margin:0;font-size:12.5px;white-space:nowrap}
form.bang-sale-kh input{width:auto;min-width:170px;height:30px;font-size:13px;background:var(--surface)}
.kh-oso .ghi-chu{font-style:normal;color:var(--t3);font-size:11.5px}

/* bảng tiến độ gọn lại: 4 cột, hàng thấp, nhãn nằm cùng dòng với dải */
.bang-td tbody td{padding:9px 14px;vertical-align:middle}
.bang-td .o-ten b{font-size:13.5px}
.bang-td .o-phu{font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.4}
.bang-td .o-ngay{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--t2)}
.bang-td .o-ngay b{color:var(--t1)}
.bang-td .t-nhat{color:var(--t4)}
.bang-td .nhan-td{display:block;margin-bottom:5px}
.bang-td .bstep{margin:0}
.bang-td .bstep i{width:30px}
.hen-tre{color:var(--red);font-weight:600}
.hen-gap{color:var(--orange);font-weight:600}
.hen-con{color:var(--t3)}
.hen-xong{color:var(--green)}

/* ===================== Kênh trao đổi theo bộ ảnh ===================== */
.chat-khung{
  display:grid;grid-template-columns:250px 1fr;gap:12px;align-items:start
}
.chat-ds{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;max-height:520px;overflow-y:auto
}
.chat-bo{
  display:block;padding:10px 13px;border-bottom:1px solid var(--border-soft);
  text-decoration:none;color:var(--t1)
}
.chat-bo:last-child{border-bottom:0}
.chat-bo:hover{background:var(--surface-mo);text-decoration:none}
.chat-bo.on{background:var(--navy-bg);box-shadow:inset 3px 0 0 var(--navy)}
.chat-bo .ten{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.chat-bo .phu{font-size:11.5px;color:var(--t3);margin-top:3px}
.chat-bo .cham-do{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex:none
}
.chat-noi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden
}
.chat-dau{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-mo);font-size:13.5px
}
.chat-cuon{padding:14px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}

/* một tin */
.tin .av.av-khach{background:var(--purple-bg);color:var(--purple-dam)}
.tin .av.av-team{background:var(--navy-bg);color:var(--navy)}
.tin .dau{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tin .dau b{font-size:12.5px}
.vai-tro{
  font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 7px;letter-spacing:.2px
}
.vai-tro.v-khach{background:var(--purple-bg);color:var(--purple-dam)}
.vai-tro.v-team{background:var(--navy-bg);color:var(--navy)}
.the-anh{
  background:var(--gold-bg);color:var(--gold-dam);border:1px solid var(--gold-vien);border-radius:4px;
  padding:0 4px;font-weight:600;font-variant-numeric:tabular-nums
}
.tin-anh{margin-top:7px}
.tin-anh img{width:74px;height:74px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.chan-tin{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.tt-tin{font-size:11.5px;font-weight:600}
.tt-tin.tt-gui{color:var(--t3)}
.tt-tin.tt-nhan{color:var(--navy)}
.tt-tin.tt-xong{color:var(--green)}
.nut-xong{
  background:var(--green-bg);border:1px solid var(--green-vien);color:var(--green);border-radius:5px;
  font-size:11.5px;font-weight:600;padding:2px 9px;cursor:pointer;height:auto
}
.nut-xong:hover{background:#DFF3DD}

/* ô soạn tin */
.chat-soan{padding:11px 14px;border-top:1px solid var(--border);background:var(--surface-nhat)}
.chat-soan.ke{background:var(--navy-bg);outline:2px dashed var(--navy);outline-offset:-4px}
.soan-hang{display:flex;gap:8px;align-items:flex-end}
.soan-hang textarea{
  flex:1;min-height:38px;max-height:140px;resize:none;line-height:1.5;padding:9px 11px;
  font-family:inherit;font-size:13.5px
}
.soan-hang .kep{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  cursor:pointer;font-size:16px;margin:0
}
.soan-hang .kep:hover{background:var(--surface-2)}
.soan-hang .kep input{display:none}
.soan-hang button{height:38px;flex:none}
.soan-chu{margin:8px 0 0;font-size:11.5px;color:var(--t3)}

@media (max-width:760px){
  .chat-khung{grid-template-columns:1fr}
  .chat-ds{max-height:210px}
}

/* ---- Chi tiết đơn: trái làm việc, phải đối thoại với khách ---- */
.ct-2cot{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:12px;align-items:start;margin-bottom:12px}
.ct-chinh,.ct-ben{display:flex;flex-direction:column;gap:12px;min-width:0}
.ct-chinh .card,.ct-ben .card{margin-bottom:0}
.ct-ben{position:sticky;top:12px}
.ct-ben .cuon-don{max-height:340px}
@media (max-width:1100px){
  .ct-2cot{grid-template-columns:1fr}
  .ct-ben{position:static}
}
/* hàng link gọn: 3 ô + nút trên một dòng */
.f-link{align-items:end;gap:10px}
.f-link .mo-link{font-size:11.5px;font-weight:500;margin-left:6px}
.f-link input{height:34px}
.luu-y{margin:10px 0 0;font-size:13.5px;background:var(--gold-bg);border-radius:var(--r);
  padding:8px 11px;border:1px solid var(--gold-vien)}

/* ---- nhắc người trong kênh nội bộ ---- */
.the-nguoi{
  background:var(--navy-bg);color:var(--navy);border:1px solid var(--navy-vien);border-radius:4px;
  padding:0 5px;font-weight:600;font-size:12.5px;display:inline-block
}
.o-nhac{position:relative;flex:1;display:flex}
.o-nhac input{width:100%}
.nhac-ds{
  position:absolute;bottom:calc(100% + 6px);left:0;min-width:270px;z-index:20;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 8px 24px rgba(31,35,41,.14);overflow:hidden
}
.nhac-ds .d{display:flex;align-items:baseline;gap:8px;padding:7px 11px;cursor:pointer;font-size:13px}
.nhac-ds .d span{color:var(--t3);font-size:12px}
.nhac-ds .d.on,.nhac-ds .d:hover{background:var(--navy-bg)}

/* ---- chấm công theo WiFi văn phòng ---- */
.wifi-bao{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;
  border-radius:var(--r);font-size:12.5px;line-height:1.5
}
.wifi-bao.trong{background:var(--green-bg);border:1px solid var(--green-vien);color:var(--green-dam)}
.wifi-bao.ngoai{background:var(--red-bg);border:1px solid var(--red-vien);color:var(--red-dam)}
.wifi-bao.tat{background:var(--surface-2);border:1px solid var(--border);color:var(--t2)}
.wifi-bao .ip-toi{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:.85}
.chat .go #chon-don{flex:0 0 165px;width:165px;height:36px;font-size:13px;
  font-variant-numeric:tabular-nums}
.chat .go .o-nhac{flex:1;min-width:0}

/* ---- Kanban gọn cho khách xem tiến độ ---- */
.kh-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.kb-cot{border-right:1px solid var(--border-soft);min-width:0;background:var(--surface)}
.kb-cot:last-child{border-right:0}
.kb-dau{
  display:flex;align-items:center;gap:7px;padding:10px 12px;font-size:12.5px;font-weight:600;
  background:var(--surface-mo);border-bottom:1px solid var(--border);color:var(--t2)
}
.kb-dau b{margin-left:auto;font-size:12px;color:var(--t1);background:var(--surface);
  border:1px solid var(--border);border-radius:9px;padding:0 7px;line-height:17px}
.kb-cham{width:7px;height:7px;border-radius:50%;flex:none}
.kb-cot.vang .kb-cham{background:var(--vang)}
.kb-cot.cam  .kb-cham{background:var(--orange)}
.kb-cot.xanh .kb-cham{background:var(--green)}
.kb-the-ds{padding:10px;display:flex;flex-direction:column;gap:8px;
  max-height:400px;overflow-y:auto}
.kb-the{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:9px 11px;box-shadow:var(--shadow)
}
.kb-cot.cam .kb-the{border-left:3px solid var(--orange)}
.kb-cot.xanh .kb-the{border-left:3px solid var(--green)}
.kb-cot.vang .kb-the{border-left:3px solid var(--vang)}
.kb-ten{font-size:13.5px;font-weight:600;line-height:1.35;word-break:break-word}
.kb-phu{font-size:11.5px;color:var(--t3);margin-top:4px}
.kb-nut{display:inline-block;margin-top:7px;font-size:12px;font-weight:600;color:var(--orange)}
.kb-trong{padding:14px 0;text-align:center;color:var(--t4);font-size:13px}
@media (max-width:760px){
  .kh-board{grid-template-columns:1fr}
  .kb-cot{border-right:0;border-bottom:1px solid var(--border-soft)}
  .kb-the-ds{max-height:none}
}
/* thẻ đơn trên bảng kéo thả: khách hàng · gói ảnh · tên bộ · deadline */
.board .don .nhan-the{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 5px}
.board .don .nhan-the .tag{height:19px;padding:0 8px;font-size:11px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .don .kh{font-weight:500;font-size:14.5px;line-height:1.35;word-break:break-word}
.board .don .meta .dn{color:var(--red);font-weight:600}

/* ---- ảnh đại diện nhân sự ---- */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  overflow:hidden;font-weight:600;font-size:11.5px;line-height:1}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.o-avatar{display:flex;align-items:center;gap:4px}
.o-avatar label{margin:0;cursor:pointer;display:block;line-height:0}
.o-avatar label:hover .av{outline:2px solid var(--navy);outline-offset:1px}
.o-avatar input[type=file]{display:none}
.av-xoa{background:transparent;border:0;color:var(--t3);font-size:14px;cursor:pointer;
  padding:0 3px;height:auto}
.av-xoa:hover{color:var(--red)}
.board .don .nhan-the .tag{background:var(--surface-2);color:var(--t2);
  border:1px solid var(--border);font-weight:500}
.board .don .nhan-the .tag.purple::before,
.board .don .nhan-the .tag.cyan::before,
.board .don .nhan-the .tag.green::before,
.board .don .nhan-the .tag.navy::before{
  content:'';width:5px;height:5px;border-radius:50%;margin-right:5px;flex:none;display:inline-block
}
.board .don .nhan-the .tag.purple::before{background:var(--purple)}
.board .don .nhan-the .tag.cyan::before{background:var(--cyan)}
.board .don .nhan-the .tag.green::before{background:var(--green)}
.board .don .nhan-the .tag.navy::before{background:var(--navy)}
.board .don .nhan-the .the-kh{font-weight:600;color:var(--t1)}

/* ---- Google Drive: vùng kéo thả theo hạng mục ---- */
.drive-dau{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.drive-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.tha{border:1px solid var(--border);border-radius:var(--r-lg);padding:10px;background:var(--surface-nhat)}
.tha-dau{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:13px;margin-bottom:8px}
.tha-dau .t-mute{font-size:11.5px}
.tha-vung{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:76px;
  border:1.5px dashed var(--border);border-radius:var(--r);background:var(--surface);
  font-size:12px;color:var(--t2);cursor:pointer;margin:0;line-height:1.6;padding:8px
}
.tha-vung:hover,.tha-vung.ke{border-color:var(--navy);background:var(--navy-bg);color:var(--navy)}
.tha-ds{margin-top:8px;display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto}
.tha-f{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:5px;padding:4px 7px}
.tha-f span:last-child{color:var(--t3);white-space:nowrap}
.tha-f.dang{background:var(--gold-bg);border-color:var(--gold-vien)}
.tha-f.xong{background:var(--green-bg);border-color:var(--green-vien)}
.tha-f.hong{background:var(--red-bg);border-color:var(--red-vien)}
.tha-f a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-mo{display:inline-block;margin-top:7px;font-size:11.5px;color:var(--t2)}
form.bang-sale-kh .o-ten-bo{min-width:220px;font-weight:600}

/* ---- chủ đề đơn cần sửa ---- */
.cs-tom{padding:11px 14px;border-bottom:1px solid var(--border-soft);background:var(--red-nhat)}
.cs-hang{display:flex;align-items:center;gap:9px;font-size:12.5px;flex-wrap:wrap}
.cs-y{margin-top:8px;font-size:13.5px;line-height:1.55;background:var(--orange-bg);
  border:1px solid var(--orange-vien);border-radius:var(--r);padding:9px 11px;color:var(--orange-dam)}
.cs-tom .btn{margin-top:8px}
.cs-xong{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;
  border-top:1px solid var(--border);background:var(--green-bg)}
.cs-xong button{background:var(--green);border-color:var(--green)}
.cs-xong button:hover{background:#268A1B}
.cs-xong .t-mute{font-size:12px}
.board .don .mo-chu-de{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:600;
  color:var(--orange);cursor:pointer}
.board .don .mo-chu-de:hover{text-decoration:underline}
.chat-bo .nho-tag{height:16px;padding:0 6px;font-size:10.5px}

/* ---- hồ sơ cá nhân ---- */
.hs-anh{display:flex;align-items:center;gap:16px}
.hs-anh .av{font-size:26px}
.hs-chu{display:flex;flex-direction:column;gap:5px;min-width:0}
.hs-chu b{font-size:15px}
.hs-chu .t-mute{font-size:12.5px;line-height:1.5}
.o-vai{display:flex;gap:14px;flex-wrap:wrap}
.vai-tick{display:flex;align-items:center;gap:6px;margin:0;font-weight:500;font-size:13.5px}
.vai-tick input{width:auto;margin:0}
.side .me .nm{text-decoration:none;color:inherit}
.side .me .nm:hover b{text-decoration:underline}

/* ---- đổi nền sáng/tối ---- */
.doi-nen{display:flex;margin-left:auto}
.doi-nen button{
  background:transparent;border:1px solid var(--border);border-radius:var(--r);
  width:32px;height:32px;padding:0;font-size:14px;cursor:pointer;line-height:1
}
.doi-nen button:hover{background:var(--surface-2)}
.topbar .chuong{margin-left:8px}
.chon-nen{display:flex;gap:8px;flex-wrap:wrap}
.chon-nen button{height:34px}

/* ---- danh sách WiFi chấm công ---- */
.wifi-nay{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface-mo);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 14px}
.ip-lon{font-size:19px;font-variant-numeric:tabular-nums;display:block;margin-top:2px}
.wifi-them{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wifi-them input{width:auto;min-width:230px}


/* ---- menu chia nhóm ---- */
.side nav .grp:not(:first-child){margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border-soft)}

/* ---- tìm nhanh ⌘K ---- */
.mo-tim{
  background:transparent;border:1px solid var(--border);border-radius:var(--r);
  width:32px;height:32px;padding:0;font-size:13px;cursor:pointer;margin-left:auto
}
.mo-tim:hover{background:var(--surface-2)}
.doi-nen{margin-left:8px}
.tim-hop{
  border:0;border-radius:12px;padding:0;width:min(560px,calc(100% - 32px));
  background:var(--surface);color:var(--t1);box-shadow:0 20px 60px rgba(0,0,0,.28);
  margin-top:10vh
}
.tim-hop::backdrop{background:rgba(15,18,22,.5)}
.tim-hop input{
  width:100%;border:0;border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;
  height:52px;font-size:15px;padding:0 16px;background:transparent;color:var(--t1)
}
.tim-hop input:focus{outline:none;box-shadow:none}
.tim-kq{max-height:52vh;overflow-y:auto}
.tim-d{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 16px;
  text-decoration:none;color:var(--t1);border-bottom:1px solid var(--border-soft)
}
.tim-d b{grid-column:1;grid-row:1;font-size:13.5px}
.tim-d span{grid-column:1;grid-row:2;font-size:12px;color:var(--t3)}
.tim-d i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:11px;
  color:var(--t3);background:var(--surface-2);border-radius:var(--r-tron);padding:2px 10px}
.tim-d.on,.tim-d:hover{background:var(--navy-bg);text-decoration:none}
.tim-goi{padding:18px 16px;font-size:13px;color:var(--t3)}
.tim-chan{padding:9px 16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--t3);
  background:var(--surface-mo);border-radius:0 0 12px 12px}

/* ---- nút đang gửi ---- */
button.dang-gui{opacity:.65;pointer-events:none}

/* ---- thanh điều hướng dưới, chỉ cho điện thoại ---- */
.duoi{display:none}
@media (max-width:760px){
  .side nav,.side .logo{display:none}
  .side{position:static;width:auto;border:0;padding:0}
  .side .me{border-top:0;padding:10px 14px}
  .shell{display:block}
  .page{padding-bottom:74px}
  .duoi{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))
  }
  .duoi a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    font-size:10.5px;color:var(--t3);text-decoration:none;border-radius:var(--r)
  }
  .duoi a.on{color:var(--navy);background:var(--navy-bg)}
  .duoi a .ic{width:18px;height:18px}
  .tim-hop{margin-top:6vh}
}


/* ===================== Tinh chỉnh theo phong cách Apple ===================== */
/* Bọc mọi khu chức năng thành Bento Card trắng */
.tw{border-radius:var(--r-lg);overflow:hidden}
.card .bd{padding:16px 20px}
.card .bd.tight{padding:0}
.card .bd.tight .tw{border-radius:0}
.card .hd .sub{color:var(--t3);font-size:12.5px}

/* Ô số tổng quan */

/* Bảng trong thẻ: bỏ viền dọc, giữ đường ngang mờ */
table{min-width:560px}
.tw table tr:last-child td{border-bottom:0}
.kh-bang thead th{background:var(--surface-mo);letter-spacing:.005em;
  color:var(--t3);font-size:12.5px;font-weight:500;padding:11px 18px}
.kh-bang tbody td{padding:14px 18px}
.kh-bang{border:0;box-shadow:var(--shadow);border-radius:var(--r-lg)}
.bang-td tbody td{padding:12px 18px}

/* Thanh điều hướng trái */
.side{background:transparent;border-right:1px solid var(--border)}
.side nav a{border-radius:10px;font-weight:400}
.side nav a.on{background:var(--surface);box-shadow:var(--shadow);color:var(--t1)}
.side .grp{font-size:12px;letter-spacing:.01em;font-weight:500;color:var(--t3)}
.side .me{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);
  margin:10px;padding:10px 12px;border:0}

/* Thanh tiêu đề */
.topbar{background:transparent;border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.topbar h1{letter-spacing:-.02em;font-weight:600}
.mo-tim,.doi-nen button,.chuong{border-radius:var(--r-tron);border-color:transparent;
  background:var(--surface-2)}
.mo-tim:hover,.doi-nen button:hover{background:var(--surface-3)}

/* Hộp thoại */
dialog{border-radius:var(--r-lg)}
.qr-hop,.tim-hop{border-radius:18px}

/* Thẻ đơn trong Kanban: chấm màu ở đầu tên cột đã có sẵn .dot */
.col h3 .dot{width:8px;height:8px;flex:0 0 8px}
.don .ma{font-size:11.5px;letter-spacing:-.01em}
.don .kh{letter-spacing:-.01em}

/* Bảng dữ liệu của cổng khách cũng theo chuẩn trên */
.kh-the{border:0;box-shadow:var(--shadow);border-radius:var(--r-lg);padding:18px 20px}
.kh-the.cho{border:0;box-shadow:0 4px 20px color-mix(in srgb, var(--orange) 22%, transparent);
  outline:1.5px solid color-mix(in srgb, var(--orange) 45%, transparent);outline-offset:-1px}
.kh-h2{font-size:16px;font-weight:600;letter-spacing:-.015em;margin:26px 0 12px}

/* Khung chat */
.chat-ds,.chat-noi,.kenh,.khung{border:0;box-shadow:var(--shadow);border-radius:var(--r-lg)}
.chat-dau,.dau-kenh{background:var(--surface-mo);border-bottom:1px solid var(--border-soft)}

/* Vùng kéo thả Drive */
.tha{border:0;background:var(--surface-2);border-radius:14px}
.tha-vung{border-radius:12px;background:var(--surface)}

/* ===================== Nới khoảng thở ===================== */
/* Avant Garde là chữ hình học, chữ hoa rộng — cần nhiều khoảng trắng hơn mới
   đọc thoáng. Toàn bộ khối dưới đây chỉ chỉnh khoảng cách, không đổi màu. */
.page{padding:28px 32px 88px}
.topbar{height:60px;padding:0 32px}
.topbar h1{font-size:19px;letter-spacing:-.01em}
.topbar .hint{font-size:12.5px}

.grid{gap:20px}
.card{margin-bottom:0}
.card + .card,.card + .grid,.grid + .card,.grid + .grid{margin-top:20px}
.card .hd{padding:20px 24px 14px;gap:12px}
.card .hd h2{font-size:16px;letter-spacing:-.015em}
.card .bd{padding:20px 24px 24px}
.card .bd.tight{padding:0}

/* ô số tổng quan thoáng hơn */

/* bảng: hàng cao hơn, chữ đầu bảng giãn hơn */
th,td{padding:16px 22px}
th{letter-spacing:.005em;font-size:12.5px;font-weight:500}
.kh-bang thead th{padding:13px 22px;letter-spacing:.005em;font-size:12.5px;font-weight:500}
.kh-bang tbody td{padding:16px 22px}
.bang-td tbody td{padding:14px 22px}
table{min-width:600px}

/* biểu mẫu */
.f{margin-bottom:16px}
.f-row{gap:16px}
label{margin-bottom:8px;letter-spacing:.01em}
input,select,textarea{height:42px;padding:11px 16px}
textarea{height:auto}
button,.btn{height:42px;padding:0 24px;letter-spacing:.01em}
button.nho,.btn.nho{height:32px;padding:0 15px}

/* kanban rộng và thưa hơn */
.board{grid-auto-columns:296px;gap:20px}
.col{min-width:296px}
.col h3{margin-bottom:14px}
.don{padding:16px 17px;margin-bottom:12px;border-radius:16px}
.don .kh{margin:6px 0 8px;font-size:14px}
.don .nhan-the{margin:8px 0 6px}

/* thanh điều hướng trái */
.side{width:250px}
.side nav{padding:6px 12px}
.side nav a{padding:9px 12px;margin-bottom:3px}
.side .grp{margin:16px 12px 7px;letter-spacing:.01em}
.side nav .grp:not(:first-child){margin-top:20px;padding-top:16px}
.side .logo{padding:22px 20px 14px;letter-spacing:-.01em}

/* segmented control */
.views{padding:4px;margin-bottom:20px}
.views a{padding:9px 20px}
.loc-nhanh{padding:4px;margin-bottom:20px}
.loc-nhanh a{padding:7px 16px}

/* tiêu đề khu vực ở cổng khách */
.kh-h2{margin:34px 0 14px}
.kh-the{padding:22px 24px;margin-bottom:0}
.kh-the + .kh-the{margin-top:14px}
.kh-trang{max-width:1080px;padding:0 24px 64px}
.kh-oso{gap:16px;margin-bottom:22px}
.kh-oso div{padding:18px 20px}

/* chat */
.chat-cuon{padding:20px;gap:16px}
.chat-soan{padding:14px 20px}
.cuon-don{gap:14px}

@media (max-width:760px){
  .page{padding:18px 16px 92px}
  .topbar{padding:0 16px;height:54px}
  .card .hd{padding:16px 18px 12px}
  .card .bd{padding:16px 18px 18px}
  th,td{padding:13px 16px}
  .kh-trang{padding:0 16px 80px}
}
/* Nút nằm trong bảng thì nhỏ lại, không lấn số liệu */
td button,td .btn{height:32px;padding:0 15px;font-size:12.5px}
td form{display:inline-flex;gap:6px;align-items:center}
td input,td select{height:34px;padding:8px 12px;font-size:12.5px}


/* Avant Garde nét Demibold khá nặng — chỉ dùng cho tiêu đề và con số,
   chữ thân và menu để nét thường cho nhẹ mắt. */
.side nav a{font-weight:400}
.side nav a.on{font-weight:500}
label,th,.tag,.t-mute,.card .hd .sub,.kpi .k{font-weight:400}
button,.btn{font-weight:500}
.card .hd h2,.topbar h1{font-weight:600}
td{font-weight:400}


/* Con số lớn để nét mỏng cho nhẹ — Avant Garde Regular ở cỡ to nhìn thanh hơn */
.ip-lon{font-weight:400;font-size:22px;letter-spacing:-.02em}
.so-lon{font-weight:400;letter-spacing:-.02em}
.kh-oso b{font-weight:400;font-size:26px;letter-spacing:-.025em}


/* Tên bộ ảnh trên thẻ đơn: để nét thường cho nhẹ, chỉ hơi to hơn dòng khác */
.don .kh{font-weight:500;font-size:14.5px;letter-spacing:-.015em}
.board .don .nhan-the .the-kh{font-weight:500;color:var(--t2)}
.chat-bo .ten{font-weight:500}
.kb-ten{font-weight:500}
.bang-td .o-ten b{font-weight:500}
.tim-d b{font-weight:500}
/* nút đổi nền trên cổng khách */
.doi-nen-kh{
  margin-left:auto;background:var(--surface-2);border:0;border-radius:var(--r-tron);
  width:34px;height:34px;padding:0;font-size:14px;cursor:pointer;line-height:1;flex:none
}
.doi-nen-kh:hover{background:var(--surface-3)}
.kh-dau{align-items:center}

/* ô số hai bên dùng chung một kiểu: nét mỏng, cỡ to, siết chữ */
.kpi,.kh-oso div{border:0;box-shadow:var(--shadow);border-radius:var(--r-lg)}
.kh-oso b,.kpi .v{font-weight:400;letter-spacing:-.03em}

/* ---- Logo TIZINO PRODUCTION, đổi bản theo nền ---- */
.logo{display:flex;align-items:center;gap:10px}
.logo-anh{display:block;width:30px;height:30px;flex:none;position:relative}
.logo-anh img{width:100%;height:100%;object-fit:contain;display:block}
.logo-anh .l-toi{display:none}
.logo-chu{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.logo-chu span{font-size:10px;letter-spacing:.16em;color:var(--t1);font-weight:400}
.side .logo{font-size:15px;font-weight:600;color:var(--t1);letter-spacing:.01em}
.kh-dau .logo{font-size:15px;font-weight:600;color:var(--t1)}
.login .logo{font-size:19px;justify-content:center;margin-bottom:6px}
.login .logo-anh{width:38px;height:38px}
.login .logo-chu span{font-size:11px}

/* nền tối thì dùng logo bản sáng */
@media (prefers-color-scheme: dark){
  :root:not([data-giao-dien="sang"]) .logo-anh .l-sang{display:none}
  :root:not([data-giao-dien="sang"]) .logo-anh .l-toi{display:block}
}
:root[data-giao-dien="toi"] .logo-anh .l-sang{display:none}
:root[data-giao-dien="toi"] .logo-anh .l-toi{display:block}

/* Tên thương hiệu để trắng–đen theo nền, không dùng màu vàng */
.logo,.logo-chu,.logo-chu span{color:var(--t1)}

/* ---- đầu trang cổng khách: logo, dấu ×, tên đối tác cùng một hàng ---- */
.kh-dau{display:flex;align-items:center;gap:14px}
.kh-dau .logo{align-items:center;gap:11px}
.kh-dau .logo-anh{width:38px;height:38px}
.kh-dau .logo-chu{justify-content:center}
.kh-x{font-size:17px;color:var(--t4);font-weight:400;line-height:1;flex:none}
.kh-dau .kh-ten{font-size:17px;color:var(--t2);letter-spacing:.01em;line-height:1.2;
  align-self:center}
@media (max-width:560px){
  .kh-dau{gap:9px}
  .kh-dau .kh-ten{font-size:14px}
  .kh-x{font-size:14px}
}
/* Nhảy tới khối nào thì chừa chỗ cho thanh tiêu đề dính trên cùng */
.card[id],section[id],h2[id],[id^="yc"]{scroll-margin-top:84px}
@media (max-width:760px){.card[id],section[id],h2[id]{scroll-margin-top:70px}}
.bao-anh{margin:8px 0 0;font-size:12.5px;color:var(--orange-dam);
  background:var(--orange-bg);border-radius:var(--r);padding:8px 11px}

/* ---- trang chi tiết bộ ảnh phía khách ---- */
.ve-lai{display:inline-block;margin:4px 0 14px;font-size:13px;color:var(--t2)}
.ct-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.ct-h3{font-size:14px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em}
.ct-link{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--border-soft)}
.ct-link:last-of-type{border-bottom:0}
.ct-link-ten{font-size:13.5px;font-weight:500}
.ct-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.ct-luoi span{display:block;font-size:12px;color:var(--t3)}
.ct-luoi b{font-size:14px;font-weight:500}
.ct-nk{list-style:none;margin:0;padding:0;position:relative}
.ct-nk li{display:flex;gap:14px;padding:0 0 16px 18px;position:relative;font-size:13.5px;
  line-height:1.5}
.ct-nk li::before{content:'';position:absolute;left:0;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--t4)}
.ct-nk li:last-child::before{background:var(--green)}
.ct-nk li::after{content:'';position:absolute;left:3.5px;top:16px;bottom:0;width:1px;
  background:var(--border)}
.ct-nk li:last-child{padding-bottom:0}
.ct-nk li:last-child::after{display:none}
.ct-nk-luc{flex:0 0 74px;color:var(--t3);font-variant-numeric:tabular-nums;font-size:12.5px}
.kb-the{display:block;text-decoration:none;color:inherit}
.kb-the:hover{text-decoration:none;box-shadow:var(--shadow-noi);transform:translateY(-1px)}
.kb-nut.mo{color:var(--t3)}

/* ---- nút Zalo trên cổng khách ---- */
.nut-zalo{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:14px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);
  text-decoration:none;color:var(--t1)}
.nut-zalo:hover{text-decoration:none;box-shadow:var(--shadow-noi)}
.zl-icon{flex:none;width:44px;height:44px;border-radius:12px;background:#0068FF;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  letter-spacing:-.02em}
.nut-zalo b{display:block;font-size:14px;font-weight:500}
.nut-zalo i{display:block;font-style:normal;font-size:12.5px;color:var(--t3);
  line-height:1.5;margin-top:3px}
.zl-mo{margin-left:auto;flex:none;font-size:13px;font-weight:500;color:#0068FF;white-space:nowrap}
@media (max-width:640px){.zl-mo{display:none}}

/* ---- ô hỏi trợ lý ---- */
.tl-khung{display:flex;flex-direction:column;gap:12px}
.tl-cuon{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto}
.tl-tin{max-width:88%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}
.tl-bot{background:var(--surface-2);color:var(--t1);align-self:flex-start;
  border-bottom-left-radius:5px}
.tl-toi{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.tl-cho{opacity:.55;font-style:italic}
.tl-goi-y{display:flex;gap:8px;flex-wrap:wrap}
.tl-goi-y button{height:30px;padding:0 14px;font-size:12.5px;background:var(--surface-2);
  color:var(--t2);border-color:transparent;font-weight:400}
.tl-goi-y button:hover{background:var(--surface-3);opacity:1}
.tim-che-do{display:flex;gap:2px;padding:10px 12px 0}
.tim-che-do button{height:30px;padding:0 14px;font-size:12.5px;background:transparent;
  color:var(--t2);border-color:transparent;font-weight:400}
.tim-che-do button.on{background:var(--surface-2);color:var(--t1);font-weight:500}
.tl-trong-hop{padding:14px 16px 16px}
.tl-trong-hop .tl-cuon{max-height:44vh}

/* ---- màn Trợ lý riêng ------------------------------------------------- */
.tl-man{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.tl-man .tl-chinh{margin:0}
.tl-cao .tl-cuon{max-height:none;min-height:46vh;flex:1}
.tl-cao{min-height:56vh}
.tl-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.tl-ds li{display:flex;flex-direction:column;gap:2px}
.tl-ds b{font-weight:600;font-size:13px;text-transform:capitalize}
.tl-ds span{font-size:12px;color:var(--muc-2);line-height:1.5}
@media (max-width:900px){.tl-man{grid-template-columns:1fr}.tl-ben{order:-1}}

/* ---- tab Hướng dẫn bot ------------------------------------------------ */
.vb-o{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.vb-o label{font-weight:600;font-size:13px}
.vb-o .vb-mo-ta{font-size:12px;color:var(--muc-2);line-height:1.5}
.vb-o textarea{width:100%;min-height:96px;resize:vertical;font:inherit;font-size:13px;
  line-height:1.65;padding:11px 14px;border:0;border-radius:10px;background:var(--surface-2);
  color:inherit}
.vb-o textarea:focus{outline:2px solid var(--vien-focus,#1D1D1F);outline-offset:1px}
.vb-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vb-sua{font-size:11.5px;color:var(--muc-2)}

/* ---- hộp thư Zalo ------------------------------------------------------ */
.zl-man{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;
  align-items:stretch;height:calc(100vh - 150px);min-height:460px}

/* cột trái: danh sách hội thoại */
.zl-ben{display:flex;flex-direction:column;background:var(--surface);border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.03);overflow:hidden}
.zl-ben-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px 10px}
.zl-ben-dau b{font-size:15px;font-weight:600}
.zl-moi-nut{height:28px;padding:0 11px;font-size:12px;border:0;border-radius:99px;
  background:var(--surface-2);color:inherit;cursor:pointer}
.zl-moi-nut:hover{background:var(--surface-3)}
.zl-moi{display:flex;flex-direction:column;gap:7px;padding:0 16px 12px}
.zl-moi input{font:inherit;font-size:13px;padding:9px 12px;border:0;border-radius:9px;
  background:var(--surface-2);color:inherit}
.zl-moi button{height:32px;border:0;border-radius:99px;background:#1D1D1F;color:#fff;
  font:inherit;font-size:13px;cursor:pointer}
.zl-moi-nhac{font-size:11px;color:var(--muc-2);line-height:1.45}

.zl-ds{flex:1;overflow-y:auto;padding:0 8px 8px}
.zl-ds a{position:relative;display:flex;gap:10px;align-items:flex-start;padding:9px 10px;
  border-radius:11px;text-decoration:none;color:inherit}
.zl-ds a:hover{background:var(--surface-2)}
.zl-ds a.on{background:var(--surface-2)}
.zl-av{flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--surface-3)}
.zl-av-chu{display:inline-block;text-align:center;font-weight:600;font-size:14px;
  color:var(--muc-2)}
.zl-giua{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.zl-hang1{display:flex;align-items:baseline;gap:6px}
.zl-hang1 b{flex:1;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.zl-hang1 i{flex:0 0 auto;font-style:normal;font-size:11px;color:var(--muc-2)}
.zl-hang2{font-size:12px;color:var(--muc-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.zl-nhan{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.zl-tag{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:99px;
  background:var(--surface-3);color:var(--muc-2)}
.zl-tag-khach{background:#E8F1FF;color:#1B5FBF}
.zl-tag-noi_bo{background:#EAF6EC;color:#1D6B33}
.zl-dem{position:absolute;top:10px;right:10px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:#E5484D;color:#fff;font-size:10.5px;font-weight:600;
  line-height:18px;text-align:center}

/* cột phải: khung chat */
.zl-khung{display:flex;flex-direction:column;background:var(--surface);border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.03);overflow:hidden}
.zl-dau{display:flex;align-items:center;gap:11px;padding:13px 18px;
  border-bottom:1px solid var(--vach,rgba(0,0,0,.06))}
.zl-dau b{display:block;font-size:14.5px;font-weight:600}
.zl-dau i{display:block;font-style:normal;font-size:11.5px;color:var(--muc-2);margin-top:1px}
.zl-cuon{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.zl-d{max-width:70%;display:flex;flex-direction:column;gap:2px}
.zl-den{align-self:flex-start}
.zl-bot,.zl-toi{align-self:flex-end;align-items:flex-end}
.zl-ten{font-size:11px;font-weight:600;color:var(--muc-2);padding:0 4px}
.zl-ten-p{text-align:right}
.zl-bong{padding:9px 13px 7px;border-radius:14px;font-size:13.5px;line-height:1.55;
  background:var(--surface-2);word-break:break-word}
.zl-den .zl-bong{border-bottom-left-radius:5px}
.zl-bot .zl-bong,.zl-toi .zl-bong{border-bottom-right-radius:5px}
.zl-bot .zl-bong{background:#E8F1FF}
.zl-toi .zl-bong{background:#0068FF;color:#fff}
.zl-luc{display:block;margin-top:3px;font-size:10px;opacity:.62}
.zl-nhan-bot{font-size:10px;color:var(--muc-2);padding:0 4px}
.zl-canh{margin:0 18px;padding:9px 13px;border-radius:10px;background:#FFF6E5;
  color:#7A4E00;font-size:12.5px}
.zl-soan{display:flex;gap:8px;padding:12px 18px 6px}
.zl-soan input{flex:1;font:inherit;font-size:13.5px;padding:11px 15px;border:0;
  border-radius:99px;background:var(--surface-2);color:inherit}
.zl-soan button{height:40px;padding:0 20px;border:0;border-radius:99px;background:#0068FF;
  color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.zl-soan button:disabled{opacity:.5}
.zl-chan{padding:0 18px 14px;font-size:11px;color:var(--muc-2)}
.zl-trong{margin:auto;padding:28px;text-align:center;font-size:13px;color:var(--muc-2);
  line-height:1.6}

@media (prefers-color-scheme:dark){
  :root:not([data-giao-dien="sang"]) .zl-bot .zl-bong{background:#16294A}
  :root:not([data-giao-dien="sang"]) .zl-tag-khach{background:#16294A;color:#8FBCFF}
  :root:not([data-giao-dien="sang"]) .zl-tag-noi_bo{background:#14301C;color:#8FD9A4}
  :root:not([data-giao-dien="sang"]) .zl-canh{background:#332612;color:#F0C674}
}
:root[data-giao-dien="toi"] .zl-bot .zl-bong{background:#16294A}
:root[data-giao-dien="toi"] .zl-tag-khach{background:#16294A;color:#8FBCFF}
:root[data-giao-dien="toi"] .zl-tag-noi_bo{background:#14301C;color:#8FD9A4}
:root[data-giao-dien="toi"] .zl-canh{background:#332612;color:#F0C674}

@media (max-width:900px){.zl-man{grid-template-columns:1fr;height:auto}
  .zl-cuon{max-height:52vh}}

/* ảnh đại diện nhỏ trong bảng Cấu hình → Bot Zalo */
.zl-anh-nho{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:middle;
  margin-right:8px;background:var(--surface-2)}
/* "Chưa khai" tô hổ phách cho dễ thấy là còn việc phải làm */
.zl-tag-chua_khai{background:#FFF1D6;color:#8A5A00}
:root[data-giao-dien="toi"] .zl-tag-chua_khai{background:#3A2A0F;color:#F0C674}
@media (prefers-color-scheme:dark){:root:not([data-giao-dien="sang"]) .zl-tag-chua_khai{
  background:#3A2A0F;color:#F0C674}}

/* hai tab Hội thoại / Danh bạ */
.zl-tab{display:flex;gap:2px;background:var(--surface-2);border-radius:99px;padding:3px}
.zl-tab a{padding:5px 12px;border-radius:99px;font-size:12.5px;text-decoration:none;
  color:var(--muc-2)}
.zl-tab a.on{background:var(--surface);color:inherit;font-weight:600}
.zl-tab i{font-style:normal;opacity:.6}
/* một người trong danh bạ */
.zl-ban{margin:0}
.zl-ban button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;
  border:0;border-radius:11px;background:none;color:inherit;font:inherit;text-align:left;
  cursor:pointer}
.zl-ban button:hover{background:var(--surface-2)}

/* nút Ẩn / Xoá trên thanh tiêu đề hội thoại */
.zl-dau{position:relative}
.zl-dau>span:first-of-type{flex:1;min-width:0}
.zl-dau-nut{display:flex;gap:6px;flex:0 0 auto}
.zl-dau-nut form{margin:0}
.zl-dau-nut button{height:28px;padding:0 11px;border:0;border-radius:99px;
  background:var(--surface-2);color:var(--muc-2);font:inherit;font-size:12px;cursor:pointer}
.zl-dau-nut button:hover{background:var(--surface-3);color:inherit}
.zl-dau-nut button.nguy:hover{background:#FDE7E9;color:#B4232A}
:root[data-giao-dien="toi"] .zl-dau-nut button.nguy:hover{background:#3A1417;color:#FF9AA0}
@media (prefers-color-scheme:dark){:root:not([data-giao-dien="sang"]) .zl-dau-nut button.nguy:hover{
  background:#3A1417;color:#FF9AA0}}
/* dòng mở/đóng phần đã ẩn */
.zl-xem-an{display:block;margin:6px 10px 2px;padding:8px 10px;border-radius:10px;
  font-size:12px;color:var(--muc-2);text-decoration:none;text-align:center;
  background:var(--surface-2)}
.zl-xem-an:hover{color:inherit}