/* ===== Phong cách hoc.ai.vn: nền kem ấm, điểm nhấn coral ===== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Exo+2:wght@600;700;800&display=swap');

:root{
  --cream:#FAF9F5; --card:#FFFDF8; --tan:#F3EDE1; --tan2:#F5F0E8;
  --ink:#3D3D3A; --head:#141413; --muted:#6C6A64;
  --coral:#CC785C; --coral-d:#B5674D; --coral-tint:rgba(204,120,92,.10);
  --dark:#181715; --line:#E8E2D6;
  --hot:#CC785C; --warm:#D9A441; --cold:#9AA0A6;
  --ok:#2F9E6B; --danger:#C0503C;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,19,.04),0 4px 16px rgba(20,20,19,.05);
  --font:'Be Vietnam Pro',system-ui,'Segoe UI',sans-serif;
  --font-head:'Exo 2',var(--font);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--cream);color:var(--ink);font-size:14px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--head);margin:0;font-weight:700}
a{color:var(--coral);text-decoration:none}
button{font-family:var(--font);cursor:pointer}

/* ===== Đăng nhập ===== */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--dark)}
.login-card{background:var(--card);border-radius:20px;padding:36px 34px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.logo-box{width:34px;height:34px;border-radius:9px;background:var(--dark);display:flex;align-items:center;justify-content:center}
.logo-node{width:13px;height:13px;border-radius:50%;background:var(--coral)}
.login-card h1{font-size:19px}
.login-card p.sub{color:var(--muted);margin:2px 0 22px;font-size:13px}
.login-card label{display:block;font-weight:600;color:var(--head);margin:12px 0 5px;font-size:13px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff}
.login-card input:focus{outline:none;border-color:var(--coral)}
.login-err{color:var(--danger);font-size:13px;margin-top:10px;min-height:18px}

/* ===== Bố cục chính ===== */
#app{display:none;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:230px;background:var(--dark);padding:20px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:6px 8px 20px}
.wordmark{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:1.5px;color:#0F2E6E;display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.wordmark .diamond{width:10px;height:10px;background:#1E88E5;transform:rotate(45deg);border-radius:2px;display:inline-block}
.wordmark .z{color:#1E88E5}                 /* ZONE = xanh da trời đậm */
/* WORK = xanh nước biển đậm (#0F2E6E) áp cho cả 2 nền; sidebar tối đặt logo trên nền sáng để đọc rõ */
.sidebar .wordmark{background:#F5F3EF;padding:6px 11px;border-radius:9px}
.login-logo .wordmark{font-size:26px}
.brand-sub{color:#8FB6C9;font-size:10px;font-weight:600;letter-spacing:.5px}
.brand .name{color:#F5F3EF;font-family:var(--font-head);font-weight:800;font-size:16px;line-height:1.1}
.brand .name small{display:block;color:var(--coral);font-size:10px;font-weight:600;letter-spacing:.5px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#C9C4BA;font-weight:500;font-size:14px;border:none;background:none;width:100%;text-align:left;transition:.12s}
.nav-item .ic{width:18px;text-align:center;font-size:15px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--coral);color:#fff}
.nav-item .badge{margin-left:auto;background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px}
.nav-item.active .badge{background:rgba(255,255,255,.25)}
.sidebar .spacer{flex:1}
.nav-foot{color:#8A857C;font-size:12px;padding:8px 12px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
.nav-foot b{color:#C9C4BA}
.logout{color:#B08575}

.main{margin-left:230px;padding:26px 30px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.topbar h2{font-size:24px}
.topbar .who{color:var(--muted);font-size:13px}

/* ===== Thẻ & lưới ===== */
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .lbl{color:var(--muted);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.stat .val{font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--head);margin-top:6px}
.stat .val.coral{color:var(--coral)}
.stat.hot{border-color:var(--coral);background:var(--coral-tint)}
.stat small{color:var(--muted);font-size:12px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.panel-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-h h3{font-size:16px}
.panel-b{padding:6px 0}

/* ===== Bảng ===== */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;padding:9px 18px;border-bottom:1px solid var(--line)}
td{padding:11px 18px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--tan2)}
.name-cell{font-weight:600;color:var(--head)}
.sub-cell{color:var(--muted);font-size:12.5px}

/* ===== Badge / chip ===== */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.chip.hot{background:var(--coral-tint);color:var(--coral-d)}
.chip.warm{background:rgba(217,164,65,.14);color:#9C7418}
.chip.cold{background:#EEF0F1;color:#6B7178}
.chip.src{background:var(--tan);color:var(--muted)}
.chip.now{background:#FBE3DC;color:#B5341F;font-weight:700}
tr.row-now td{background:#FDF1EC}
.dot{width:7px;height:7px;border-radius:50%}
.dot.hot{background:var(--hot)} .dot.warm{background:var(--warm)} .dot.cold{background:var(--cold)}
.status{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:600;background:var(--tan);color:var(--muted)}
.status.tuvan{background:rgba(217,164,65,.14);color:#9C7418}
.status.baogia{background:var(--coral-tint);color:var(--coral-d)}
.status.chot{background:rgba(47,158,107,.14);color:var(--ok)}
.status.mat{background:#EEE;color:#999}
.status.chualh{background:#E7EDF3;color:#5B6B7A}
.score-bar{width:44px;height:6px;border-radius:4px;background:var(--line);display:inline-block;vertical-align:middle;overflow:hidden;margin-right:7px}
.score-bar>i{display:block;height:100%;background:var(--coral)}
.due-pos{color:var(--danger);font-weight:700}
.due-zero{color:var(--ok);font-weight:600}

/* ===== Nút ===== */
.btn{border:1px solid var(--line);background:#fff;color:var(--head);padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--tan2)}
.btn.primary{background:var(--coral);border-color:var(--coral);color:#fff}
.btn.primary:hover{background:var(--coral-d)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn.ghost{border:none;background:none;color:var(--coral);padding:5px 8px}
.btn.danger{color:var(--danger)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar input,.toolbar select,.field input,.field select,.field textarea{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;background:#fff;font-family:var(--font)}
.toolbar input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral)}
.search{min-width:210px}

/* ===== Modal ===== */
.modal-bg{position:fixed;inset:0;background:rgba(20,20,19,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal{background:var(--card);border-radius:16px;width:520px;max-width:100%;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.modal.wide{width:720px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-h h3{font-size:18px}
.modal-h .x{border:none;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.modal-b{padding:20px 22px}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;color:var(--head);margin-bottom:5px;font-size:13px}
.field input,.field select,.field textarea{width:100%}
.field textarea{min-height:70px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{color:var(--muted);font-size:12.5px;margin-top:4px}

.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.course-chip{border:1px solid var(--line);background:var(--card);color:var(--head);padding:8px 14px;border-radius:20px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.course-chip:hover{background:var(--tan2)}
.course-chip.active{background:var(--coral);border-color:var(--coral);color:#fff}
.course-chip .cc-n{background:var(--tan);color:var(--muted);border-radius:12px;padding:0 8px;font-size:12px;font-weight:700}
.course-chip.active .cc-n{background:rgba(255,255,255,.25);color:#fff}
.note-inline{width:100%;min-width:130px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:var(--font);background:#fff;color:var(--ink)}
.note-inline:focus{outline:none;border-color:var(--coral)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.suggest{background:var(--coral-tint);border:1px solid var(--coral);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--coral-d);margin-top:8px}
.suggest b{color:var(--head)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:100;opacity:0;transition:.2s}
.toast.show{opacity:1}
.mini-bars{display:flex;flex-direction:column;gap:8px}
.mini-row{display:flex;align-items:center;gap:10px;font-size:13px}
.mini-row .m-lbl{width:100px;color:var(--muted)}
.mini-row .m-track{flex:1;height:8px;background:var(--tan);border-radius:5px;overflow:hidden}
.mini-row .m-track>i{display:block;height:100%;background:var(--coral)}
.mini-row .m-val{width:78px;text-align:right;color:var(--head);font-weight:600}

@media(max-width:820px){
  .sidebar{width:64px;padding:16px 8px;overflow:hidden}
  .brand-sub,.nav-item span.t,.nav-foot{display:none}
  .wordmark{font-size:12px;letter-spacing:0;gap:3px}
  .wordmark .diamond{width:7px;height:7px}
  .nav-item{justify-content:center}
  .main{margin-left:64px;padding:18px 14px}
}

/* Trợ lý AI */
.chip-btn{background:var(--tan2);border:1px solid var(--line);color:var(--head);border-radius:20px;padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.15s}
.chip-btn:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.mini-copy{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:2px 9px;font-size:11.5px;cursor:pointer;vertical-align:middle}
.mini-copy:hover{background:var(--tan2);color:var(--head)}

/* Cảnh báo khách sắp nguội */
.alert-cool{background:#fdecec;border:1px solid #f3b4b4;border-radius:12px;padding:12px 15px}
.chip-cool{background:#fff;border:1px solid #e79b9b;color:#b4232a;border-radius:20px;padding:5px 12px;font-size:12.5px;cursor:pointer;font-weight:600}
.chip-cool:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
@media (prefers-color-scheme:dark){.alert-cool{background:#2a1616;border-color:#5a2a2a}.chip-cool{background:#3a1e1e;color:#ff9b9b}}

/* Ô nhập/chọn trực tiếp trong bảng học viên */
.cell-inline{width:100%;min-width:96px;max-width:170px;padding:6px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font-size:13px;font-family:inherit;color:var(--head)}
.cell-inline:hover{border-color:var(--line);background:#fff}
.cell-inline:focus{border-color:var(--coral);background:#fff;outline:none}
select.cell-inline{cursor:pointer}

/* Bảng khách tiềm năng: gọn hơn + GHIM cột nút "Chăm" bên phải để luôn thấy */
#lead-tbl td, #lead-tbl th{padding-left:10px;padding-right:10px;font-size:13px}
#lead-tbl .act-sticky{position:sticky;right:0;background:var(--card);box-shadow:-8px 0 8px -7px rgba(0,0,0,.18);z-index:2}
#lead-tbl thead .act-sticky{z-index:3;background:var(--card)}
#lead-tbl tr:hover .act-sticky{background:var(--tan2)}
#lead-tbl tr.row-now .act-sticky{background:#FDF1EC}