:root{ --ink:#2B1220; --wine:#5E1F42; --wine-2:#73304F; --wine-3:#401530; --slate:#6E5C64; --slate-soft:#9C8A92; --paper:#F5F1F0; --paper-card:#FFFFFF; --paper-raised:#FFFFFF; --line:#E7DBE0; --line-strong:#D8C5CE; --gold:#E8B93A; --gold-ink:#8A6115; --gold-soft:#FBEAB3; --forest:#2F6B3E; --forest-soft:#DCEBDD; --rust:#C2540C; --rust-soft:#F5DFCB; --rose:#A6416F; --rose-soft:#F1DCE7; --slate-status:#5C4B53; --slate-status-soft:#E9E0E4; --radius-s:4px; --radius-m:8px; --shadow-card:0 1px 2px rgba(43,18,32,.07), 0 1px 0 rgba(43,18,32,.05); --shadow-pop:0 12px 32px rgba(43,18,32,.2), 0 2px 8px rgba(43,18,32,.12); --font-body:'Inter', system-ui, sans-serif; --font-display:'Fraunces', serif; } /* ---------- Accent switcher (data-accent trên , độc lập với data-theme) ---------- Wine (mặc định) dùng thẳng giá trị ở :root phía trên. Forest chỉ đổi hue "brand" (--wine*/--gold*), giữ nguyên các màu trạng thái (--forest/--rust/--rose dùng cho .stamp, dq-level...) để không xung đột ý nghĩa "màu thương hiệu" (đổi theo lựa chọn user) với "màu trạng thái dữ liệu" (cố định). */ :root[data-accent="forest"]{ --wine:#1F5E4A; --wine-2:#2A7860; --wine-3:#153F32; --gold:#3FA98C; --gold-ink:#1B4D3E; --gold-soft:#D9EFE7; } /* ---------- Light/Dark mode (data-theme trên ) ---------- */ :root[data-theme="dark"]{ --ink:#F1E9E4; --slate:#C7B7BE; --slate-soft:#8F7D85; --paper:#191218; --paper-card:#241C23; --paper-raised:#2B2129; --line:#3A2C34; --line-strong:#4B3A43; --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.25); --shadow-pop:0 16px 36px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; color:var(--ink); letter-spacing:-.01em; } .mono{font-family:'IBM Plex Mono', monospace;} a{color:inherit; text-decoration:none;} button{font-family:inherit;} /* ---------- App shell ---------- */ .app{display:grid; grid-template-columns:236px 1fr; min-height:100vh;} .sidebar{ background:var(--wine); color:#EDE6D2; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:22px 16px 18px; border-right:1px solid var(--wine-3); } .brand{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 6px 20px; margin-bottom:16px; border-bottom:1px solid var(--wine-3);} .brand-mark{ width:34px;height:34px; border-radius:6px; overflow:hidden; background:linear-gradient(155deg, var(--gold) 0%, var(--gold-ink) 100%); display:flex;align-items:center;justify-content:center; font-family:var(--font-display); font-weight:900; color:var(--ink); font-size:16px; flex:none; } .brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.2;} .brand-text strong{font-family:var(--font-display); font-size:16.5px; font-weight:700; color:#F7F4EA;} .brand-text span{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#D8AEBF;} .nav-group{margin-bottom:18px;} .nav-label{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#C98FA6; padding:0 10px 8px;} .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-s); color:#E3CCD6; font-size:13.5px; font-weight:500; cursor:pointer; margin-bottom:2px; border-left:2px solid transparent; } .nav-item .ic{width:17px; text-align:center; opacity:.85; font-size:14px;} .nav-item:hover{background:var(--wine-2); color:#fff;} .nav-item.active{background:var(--wine-2); color:#fff; border-left:2px solid var(--gold);} .sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--wine-3);} .sidebar-foot .who{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#C98FA6; margin:0 0 6px;} .sidebar-foot .whoami{font-size:13px; font-weight:600; color:#F1E7C6; margin-bottom:6px;} .logout-link{font-size:12px; color:#E3CCD6; display:block; margin-top:6px;} .logout-link:hover{color:#fff;} .main{min-width:0;} .topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--line-strong); background:var(--paper-raised); position:sticky; top:0; z-index:20; } .topbar-title{display:flex; flex-direction:column; gap:2px;} .eyebrow{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft); display:flex; align-items:center; gap:6px;} .topbar h1{font-size:20px;} .topbar-right{display:flex; align-items:center; gap:14px;} .avatar{ width:32px;height:32px;border-radius:50%; background:var(--wine-2); color:#F1E7C6; display:flex;align-items:center;justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-display); border:1px solid var(--gold); } .view{padding:24px 28px 60px; max-width:1600px;} .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;} .section-head h2{font-size:22px;} .section-head p.desc{margin:4px 0 0; color:var(--slate); font-size:13px; max-width:620px;} .btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; } .btn-primary{background:var(--wine); color:#F7F1DE; border-color:var(--wine);} .btn-primary:hover{background:var(--wine-2);} .btn-gold{background:var(--gold); color:#241A05; border-color:var(--gold);} .btn-gold:hover{background:#96690F;} .btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink);} .btn-ghost:hover{background:var(--paper-card);} .btn-sm{padding:6px 11px; font-size:12px;} .btn:disabled{opacity:.4; cursor:not-allowed;} .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;} .stat-card{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 16px 14px; box-shadow:var(--shadow-card);} .stat-card .label{font-size:11.5px; color:var(--slate); text-transform:uppercase; letter-spacing:.06em;} .stat-card .value{font-family:var(--font-display); font-size:30px; font-weight:700; margin-top:6px; color:var(--ink);} .stat-card .trend{font-size:11.5px; margin-top:6px; color:var(--forest); font-weight:500;} .stat-card .trend.down{color:var(--rust);} .panel{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-card);} .panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);} .panel-head h3{font-size:15.5px;} .panel-body{padding:18px;} .grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;} .funnel-row{display:flex; align-items:center; gap:12px; margin-bottom:11px;} .funnel-row:last-child{margin-bottom:0;} .funnel-label{width:120px; font-size:12.5px; color:var(--slate); flex:none;} .funnel-track{flex:1; background:var(--paper); border-radius:4px; height:20px; overflow:hidden; border:1px solid var(--line);} .funnel-fill{height:100%; background:linear-gradient(90deg, var(--wine-2), var(--wine)); display:flex; align-items:center; justify-content:flex-end; padding-right:8px;} .funnel-fill span{color:#F1E7C6; font-size:11px; font-weight:600; font-family:'IBM Plex Mono',monospace;} .funnel-fill.gold{background:linear-gradient(90deg,#C9A24D, var(--gold));} .funnel-fill.gold span{color:#241A05;} table{width:100%; border-collapse:collapse; font-size:13px;} th{text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--slate-soft); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);} /* Kéo giãn chiều rộng cột - xem static/table-resize.js, áp dụng cho mọi trong app */ .col-resize-handle{ position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:3; touch-action:none; } .col-resize-handle:hover, .col-resize-handle:active{background:var(--gold); opacity:.55;} td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle;} tr:last-child td{border-bottom:none;} tbody tr.clickable{cursor:pointer;} tbody tr.clickable:hover{background:var(--paper);} .rank-name{display:flex; align-items:center; gap:9px; font-weight:600;} .mini-avatar{width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:10px; font-weight:700; font-family:var(--font-display); color:#fff; flex:none;} .bar-mini{background:var(--paper); border:1px solid var(--line); border-radius:3px; height:6px; width:80px; overflow:hidden;} .bar-mini i{display:block; height:100%; background:var(--gold);} .overdue-item{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line);} .overdue-item:last-child{border-bottom:none;} .overdue-item .oi-name{font-weight:600; font-size:13px;} .overdue-item .oi-meta{font-size:11.5px; color:var(--slate);} .overdue-tag{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--rust); background:var(--rust-soft); padding:3px 7px; border-radius:4px; font-weight:600;} .stamp{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:3px 9px 3px 8px; border-radius:3px; border:1.5px dashed currentColor; text-transform:uppercase; white-space:nowrap; } .stamp.moi{color:var(--slate-status); background:var(--slate-status-soft);} .stamp.follow{color:var(--gold-ink); background:var(--gold-soft);} .stamp.hen{color:#A6416F; background:#F1DCE7;} .stamp.chot{color:var(--forest); background:var(--forest-soft);} .stamp.loai{color:var(--rust); background:var(--rust-soft);} .filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; padding:12px 14px; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m);} .filter-bar input[type=search], .filter-bar input[type=text], .filter-bar select{ font-family:inherit; font-size:12.5px; border:1px solid var(--line-strong); border-radius:6px; padding:7px 10px; background:var(--paper-raised); color:var(--ink); } .filter-bar input[type=search]{flex:1; min-width:180px;} .filter-spacer{flex:1;} .lead-table-wrap{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card);} .lead-name-cell{display:flex; align-items:center; gap:10px;} .lead-name-cell .info strong{display:block; font-size:13px;} .lead-name-cell .info span{font-size:11.5px; color:var(--slate); font-family:'IBM Plex Mono',monospace;} .school-tag{font-size:11.5px; color:var(--slate);} .program-tag{display:block; font-size:11px; color:var(--slate-soft);} .sale-chip{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;} .row-date{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate);} .row-date.overdue{color:var(--rust); font-weight:600;} .detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px;} .detail-title strong{font-family:var(--font-display); font-size:22px; display:block;} .detail-title .sub{font-size:12.5px; color:var(--slate); margin-top:4px; font-family:'IBM Plex Mono',monospace;} .detail-tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap;} .detail-block{margin-bottom:22px;} .detail-block h4{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate-soft); margin-bottom:10px;} .kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-size:12.5px;} .kv-grid .k{color:var(--slate); font-size:11px;} .kv-grid .v{font-weight:600; margin-top:1px;} .relay{display:flex; align-items:center; flex-wrap:wrap; gap:0; padding:12px 4px;} .relay-node{display:flex; flex-direction:column; align-items:center; gap:5px; min-width:64px;} .relay-seal{ width:38px; height:38px; border-radius:50%; border:2px dashed var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--gold-ink); background:var(--gold-soft); transform:rotate(-4deg); } .relay-node span{font-size:10px; color:var(--slate); text-align:center; line-height:1.25;} .relay-arrow{flex:none; width:34px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--slate-soft); margin:0 2px 20px;} .relay-arrow .ln{width:100%; height:1.5px; background:var(--line-strong); position:relative;} .relay-arrow small{font-family:'IBM Plex Mono',monospace; font-size:9.5px;} .handoff-reason{background:var(--paper-card); border:1px solid var(--line); border-left:3px solid var(--gold); padding:9px 11px; border-radius:0 6px 6px 0; font-size:12px; color:var(--ink); margin-top:6px;} .timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:18px;} .tl-item{position:relative; padding-bottom:18px;} .tl-item:last-child{padding-bottom:0;} .tl-item::before{content:''; position:absolute; left:-24px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--paper-raised); border:2.5px solid var(--gold);} .tl-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;} .tl-head .who{font-weight:700; font-size:12.5px;} .tl-head .when{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--slate-soft);} .tl-channel{font-size:10px; font-weight:600; color:var(--slate); background:var(--paper-card); border:1px solid var(--line); padding:1px 6px; border-radius:3px;} .tl-content{font-size:12.5px; color:var(--ink); line-height:1.5;} .tl-next{font-size:11.5px; color:var(--gold-ink); margin-top:4px;} .form-block{border-top:1px solid var(--line); padding:14px 22px; display:flex; flex-direction:column; gap:10px; background:var(--paper-card); border-radius:var(--radius-m); margin-top:16px;} .form-block label{font-size:11.5px; color:var(--slate); font-weight:600; display:block; margin-bottom:4px;} .form-block input, .form-block select, .form-block textarea{ width:100%; font-family:inherit; font-size:13px; border:1px solid var(--line-strong); border-radius:6px; padding:8px 10px; background:var(--paper-raised); color:var(--ink); margin-bottom:10px; } .form-block textarea{resize:vertical; min-height:70px;} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .panel-body form label{font-size:11px; color:var(--slate); font-weight:600; display:block; margin-bottom:4px; margin-top:2px;} .panel-body form input[type=text], .panel-body form input[type=password], .panel-body form input[type=number], .panel-body form input[type=search], .panel-body form select, .panel-body form textarea{ width:100%; font-family:inherit; font-size:13px; border:1px solid var(--line-strong); border-radius:6px; padding:8px 10px; background:var(--paper-raised); color:var(--ink); margin-bottom:10px; } .panel-body form textarea{resize:vertical; min-height:70px;} .stepper{display:flex; align-items:center; margin-bottom:24px; flex-wrap:wrap;} .step{display:flex; align-items:center; gap:9px; color:var(--slate-soft); flex:none;} .step .num{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:'IBM Plex Mono',monospace; background:var(--paper-raised); color:var(--slate);} .step.done .num{background:var(--forest); border-color:var(--forest); color:#fff;} .step.current .num{background:var(--gold); border-color:var(--gold); color:#241A05;} .step.current span{color:var(--ink); font-weight:700;} .step span{font-size:12.5px; font-weight:500;} .step-line{flex:1; height:1.5px; background:var(--line-strong); margin:0 10px; max-width:70px;} .step-line.done{background:var(--forest);} .import-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:18px;} .dropzone{border:1.5px dashed var(--line-strong); border-radius:var(--radius-m); background:var(--paper-card); padding:34px 20px; text-align:center;} .dropzone .dz-icon{font-size:26px; margin-bottom:8px;} .dropzone p{margin:2px 0; font-size:12.5px; color:var(--slate);} .dropzone .fname{display:inline-block; margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--paper-raised); border:1px solid var(--line); padding:4px 9px; border-radius:4px;} .dropzone input[type=file]{margin-top:12px;} /* ---------- Lưới nhập liệu dạng Excel (import.html, tab "Nhập bảng") ---------- */ .entry-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); } .entry-counts{display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--slate); margin-right:auto;} .entry-counts b{font-family:'IBM Plex Mono',monospace; font-size:13px;} .entry-counts .c-valid b{color:var(--forest);} .entry-counts .c-error b{color:var(--rust);} .entry-filter-group{display:flex; gap:4px; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:3px;} .entry-filter-btn{ border:none; background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:var(--slate); padding:5px 10px; border-radius:4px; cursor:pointer; } .entry-filter-btn.active{background:var(--wine); color:#F7F1DE;} .entry-filter-btn[data-filter="error"].active{background:var(--rust); color:#fff;} .entry-filter-btn[data-filter="valid"].active{background:var(--forest); color:#fff;} .entry-table-wrap{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:auto; max-height:520px;} table.entry-table{table-layout:fixed; border-collapse:separate; border-spacing:0; min-width:1240px;} .entry-table th{position:sticky; top:0; background:var(--paper-card); z-index:6; border-right:1px solid var(--line); white-space:nowrap;} .entry-table th .req{color:var(--rust);} .entry-table td{padding:0; border-right:1px solid var(--line); vertical-align:middle;} .entry-table th:last-child, .entry-table td:last-child{border-right:none;} .entry-table th.col-no, .entry-table td.row-no{width:44px;} .entry-table th.col-del, .entry-table td:last-child{width:40px;} .entry-table .row-no{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--slate-soft); text-align:center; padding:0 6px; user-select:none; background:var(--paper); position:sticky; left:0; z-index:3; } .entry-table th.col-no{position:sticky; left:0; z-index:7;} .entry-table input, .entry-table select{ width:100%; border:1px solid transparent; border-radius:0; background:transparent; font-family:inherit; font-size:12.5px; padding:9px 8px; color:var(--ink); } .entry-table input:focus, .entry-table select:focus{ outline:none; border:1.5px solid var(--gold); background:var(--gold-soft); position:relative; z-index:2; } .entry-table input.cell-invalid{background:var(--rust-soft); color:var(--rust);} .entry-table tr[data-status="error"] .row-no{background:var(--rust-soft); color:var(--rust); font-weight:700;} .entry-table tr[data-status="valid"] .row-no{background:var(--forest-soft); color:var(--forest); font-weight:700;} .entry-row-del{ border:none; background:transparent; color:var(--slate-soft); cursor:pointer; font-size:15px; width:100%; padding:8px 0; line-height:1; } .entry-row-del:hover{color:var(--rust);} .entry-table-wrap.filter-valid tr[data-status="error"], .entry-table-wrap.filter-valid tr[data-status="empty"]{display:none;} .entry-table-wrap.filter-error tr[data-status="valid"], .entry-table-wrap.filter-error tr[data-status="empty"]{display:none;} .entry-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap;} .entry-empty-msg{padding:22px; text-align:center; color:var(--slate-soft); font-size:12.5px;} /* border-collapse:separate (thay vì collapse kế thừa từ table{} chung) - bắt buộc phải tách ra để position:sticky trên th/td hoạt động đúng, tránh lỗi mất chữ/mất viền khi cuộn ngang. */ .preview-table{table-layout:fixed; border-collapse:separate; border-spacing:0;} .preview-table th, .preview-table td{ width:150px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); word-break:break-word; white-space:normal; vertical-align:top; line-height:1.35; } .preview-table th:last-child, .preview-table td:last-child{border-right:none;} .preview-table tr:last-child td{border-bottom:none;} .preview-table td > .cell-clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:2.7em; } .preview-table td.err{background:var(--rust-soft);} .preview-table tr.err-row td{color:var(--rust);} .cell-note{display:block; font-size:10px; color:var(--rust); font-weight:600; margin-top:2px;} /* Ghim 1 cột khi cuộn ngang bảng rộng nhiều cột (VD "Họ tên" ở bảng xem trước import) - offset trái được JS tính lại động theo chiều rộng thật của các cột đứng trước, xem import_preview.html */ .preview-table .sticky-col{position:sticky; left:0; z-index:4; background:var(--paper-card); box-shadow:2px 0 4px rgba(43,18,32,.10);} .preview-table thead .sticky-col{z-index:5;} .preview-table tr.err-row .sticky-col{background:var(--rust-soft);} .side-note{background:var(--wine); color:#DCE3EE; border-radius:var(--radius-m); padding:16px; font-size:12px; line-height:1.6;} .side-note h4{color:#F1E7C6; font-size:12.5px; margin-bottom:6px; font-family:var(--font-display);} .side-note code{font-family:'IBM Plex Mono',monospace; background:var(--wine-2); padding:1px 5px; border-radius:3px; font-size:11px;} .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} .team-card{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px; box-shadow:var(--shadow-card);} .team-head{display:flex; align-items:center; gap:11px; margin-bottom:12px;} .team-head .info strong{display:block; font-size:14.5px; font-family:var(--font-display);} .team-head .info span{font-size:11.5px; color:var(--slate);} .team-avatar{width:40px;height:40px;border-radius:50%; display:flex; align-items:center;justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; flex:none;} .capacity-label{display:flex; justify-content:space-between; font-size:11px; color:var(--slate); margin-bottom:4px;} .capacity-bar{height:7px; border-radius:4px; background:var(--paper); border:1px solid var(--line); overflow:hidden; margin-bottom:12px;} .capacity-bar i{display:block; height:100%; background:var(--gold);} .team-tags{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;} .region-tag{font-size:10.5px; background:var(--paper); border:1px solid var(--line); padding:2px 7px; border-radius:10px; color:var(--slate);} .team-foot{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; padding-top:10px; border-top:1px dashed var(--line);} .active-toggle{display:flex; align-items:center; gap:6px; font-weight:600;} .active-toggle .dot{width:7px;height:7px;border-radius:50%; background:var(--forest);} .active-toggle.off .dot{background:var(--slate-soft);} .active-toggle.off{color:var(--slate-soft);} .role-badge{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.02em;} .role-badge.rb-admin{background:var(--wine); color:#F1E7C6;} .role-badge.rb-lead_manager{background:var(--gold-soft); color:var(--gold-ink);} .role-badge.rb-sale{background:#F1DCE7; color:#A6416F;} .role-badge.rb-data_provider{background:var(--forest-soft); color:var(--forest);} .flash{padding:10px 14px; border-radius:6px; font-size:12.5px; margin-bottom:14px;} .flash.error{background:var(--rust-soft); color:var(--rust); border:1px solid var(--rust);} .flash.ok{background:var(--forest-soft); color:var(--forest); border:1px solid var(--forest);} /* ---------- Dashboard chất lượng dữ liệu ---------- */ .tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px;} .tile{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; box-shadow:var(--shadow-card);} .tile-label{font-size:11.5px; color:var(--slate); text-transform:uppercase; letter-spacing:.05em;} .tile-value{font-family:var(--font-display); font-size:26px; font-weight:700; margin-top:6px;} .tile-sub{font-size:11.5px; color:var(--slate-soft); margin-top:4px;} .dq-callout{display:flex; gap:14px; background:var(--rust-soft); border:1px solid var(--rust); border-radius:var(--radius-m); padding:14px 18px; margin-bottom:18px;} .dq-callout .icon{font-size:19px; line-height:1;} .dq-callout h3{margin:0 0 4px; font-size:13.5px; color:var(--rust);} .dq-callout p{margin:0; font-size:12.5px; color:var(--slate);} .stackbar{display:flex; width:100%; height:20px; border-radius:4px; overflow:hidden; background:var(--line);} .stackbar .seg{height:100%; border-right:2px solid var(--paper-card);} .stackbar .seg:last-child{border-right:none;} .legend-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px;} .legend-item{display:flex; align-items:baseline; gap:6px; font-size:12.5px;} .legend-swatch{width:9px; height:9px; border-radius:2px; display:inline-block; align-self:center; flex:none;} .legend-name{color:var(--slate);} .legend-value{font-weight:700;} .legend-pct{font-weight:400; color:var(--slate-soft);} .dq-barrow{display:flex; align-items:center; gap:10px; padding:5px 0;} .dq-barrow-label{width:200px; flex:none; font-size:12px; color:var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .dq-barrow-track{flex:1; background:var(--paper); border-radius:4px; height:14px;} .dq-barrow-fill{height:100%; background:var(--wine); border-radius:4px;} .dq-barrow-value{width:56px; text-align:right; font-size:12px; font-weight:600; font-family:'IBM Plex Mono',monospace;} .dq-meterrow{display:flex; align-items:center; gap:10px; padding:6px 0;} .dq-meterrow-label{width:170px; flex:none; font-size:12px; color:var(--slate);} .dq-meterrow-track{flex:1; border-radius:4px; height:12px;} .dq-meterrow-fill{height:100%; border-radius:4px;} .dq-meterrow-value{width:44px; text-align:right; font-size:12px; font-weight:700; font-family:'IBM Plex Mono',monospace;} .level-good{color:var(--forest);} .level-warning{color:var(--gold-ink);} .level-critical{color:var(--rust);} .track-good{background:var(--forest-soft);} .track-warning{background:var(--gold-soft);} .track-critical{background:var(--rust-soft);} .fill-good{background:var(--forest);} .fill-warning{background:var(--gold);} .fill-critical{background:var(--rust);} .mini-track{height:9px; border-radius:3px;} .mini-fill{height:100%; border-radius:3px;} @media (max-width:920px){ .tiles{grid-template-columns:repeat(2,1fr);} } /* ---------- Login page ---------- */ .login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--wine);} .login-card{background:var(--paper-card); border-radius:var(--radius-m); padding:36px 34px; width:360px; box-shadow:var(--shadow-pop);} .login-card h1{font-size:22px; margin-bottom:4px;} .login-card p{color:var(--slate); font-size:12.5px; margin-bottom:22px;} .login-card input{width:100%; font-family:inherit; font-size:13.5px; border:1px solid var(--line-strong); border-radius:6px; padding:10px 12px; margin-bottom:12px;} .login-card label{font-size:11.5px; color:var(--slate); font-weight:600; display:block; margin-bottom:4px;} .login-card .btn{width:100%; justify-content:center; margin-top:6px;} .login-hint{margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); font-size:11px; color:var(--slate-soft); line-height:1.6;} /* ===================================================================== Pane A (sidebar) expand/collapse + cụm toggle (ngôn ngữ / màu accent / mode) ===================================================================== */ .app{grid-template-columns:236px 1fr var(--paneb-w, 320px);} html[data-panea="collapsed"] .app{grid-template-columns:64px 1fr var(--paneb-w, 320px);} html[data-paneb="collapsed"] .app{grid-template-columns:236px 1fr 52px;} html[data-panea="collapsed"][data-paneb="collapsed"] .app{grid-template-columns:64px 1fr 52px;} html[data-panea="collapsed"] .sidebar{width:64px; padding-left:10px; padding-right:10px;} html[data-panea="collapsed"] .brand{justify-content:center; padding:0 0 16px;} html[data-panea="collapsed"] .brand-text, html[data-panea="collapsed"] .nav-label, html[data-panea="collapsed"] .nav-item .lbl, html[data-panea="collapsed"] .account-panel-toggle, html[data-panea="collapsed"] .sidebar-foot{display:none;} html[data-panea="collapsed"] .nav-item{justify-content:center; padding:9px 0;} /* Function UI (lang/accent/theme) PHẢI luôn hiện dạng icon-only khi rail collapse, bất kể trạng thái nút collapse cục bộ (.account-panel-toggle) đang expanded hay collapsed - ghi đè rule bên dưới. */ html[data-panea="collapsed"] .sidebar-toggles{display:flex !important;} .panea-toggle{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-bottom:16px; padding:7px 0; border-radius:var(--radius-s); border:1px solid rgba(232,185,58,.55); background:rgba(0,0,0,.12); color:var(--gold); font-size:11.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-card); } .panea-toggle:hover{background:var(--gold); color:#241A05;} .panea-toggle .arrow{transition:transform .15s ease;} html[data-panea="collapsed"] .panea-toggle .arrow{transform:rotate(180deg);} html[data-panea="collapsed"] .panea-toggle .txt{display:none;} /* Wrapper CHUNG cho nút collapse dọc + Account info/Function UI - margin-top:auto đặt trên wrapper này (không phải trên .account-panel-toggle bên trong) để cả cụm luôn neo đáy dính liền nhau, kể cả khi nút toggle bị display:none lúc Pane A về rail (trước đây neo nhờ "ăn theo" margin-top:auto của nút toggle, nút bị ẩn => mất chỗ dựa, cả khối trôi lên ngay dưới nav-icon). */ .pane-a-bottom-group{margin-top:auto; width:100%; display:flex; flex-direction:column;} /* Nút collapse/expand RIÊNG cho cụm Account info + Function UI (khác nút .panea-toggle ở trên - nút đó thu toàn bộ Pane A về rail, nút này chỉ ẩn/hiện cụm phía dưới Nav, sidebar vẫn full width). Nổi hơn bản trước (viền + nền mờ thường trực, không chỉ lúc hover) để rõ ràng là bấm được. */ .account-panel-toggle{ display:flex; align-items:center; justify-content:center; gap:4px; width:100%; margin-bottom:10px; padding:6px 0; border:1px solid var(--wine-3); border-radius:var(--radius-s); background:rgba(0,0,0,.14); color:#E3CCD6; cursor:pointer; font-size:11px; } .account-panel-toggle:hover{color:#F7F4EA; background:rgba(0,0,0,.26); border-color:#C98FA6;} .account-panel-toggle .chevron{display:inline-block; transition:transform .15s ease;} html[data-account-panel="collapsed"] .account-panel-toggle .chevron{transform:rotate(180deg);} /* Chỉ có tác dụng khi Pane A đang expanded đầy đủ - lúc Pane A về rail, rule ở trên ghi đè để Function UI luôn hiện, Account info luôn ẩn, bất kể trạng thái 2 dòng dưới đây. */ html[data-account-panel="collapsed"] .sidebar-foot, html[data-account-panel="collapsed"] .sidebar-toggles{display:none;} .sidebar-toggles{margin-top:14px; display:flex; flex-direction:column; gap:8px;} .lang-switch{display:flex; gap:2px; background:rgba(0,0,0,.18); border-radius:20px; padding:3px;} .lang-btn{ flex:1; border:none; background:transparent; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.03em; color:#D8AEBF; padding:5px 0; border-radius:16px; cursor:pointer; } .lang-btn.active{background:var(--wine-2); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);} .lang-switch-collapsed{ width:100%; border:none; background:rgba(0,0,0,.18); color:#F1E7C6; font-size:10.5px; font-weight:700; padding:6px 0; border-radius:20px; cursor:pointer; } .accent-switch{display:flex; gap:5px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:5px; justify-content:center;} .accent-swatch{ width:20px; height:20px; border-radius:50%; border:none; cursor:pointer; padding:0; flex:none; box-shadow:0 0 0 2px transparent; } .accent-swatch[data-accent="wine"]{background:linear-gradient(135deg, #F5F1F0 50%, #5E1F42 50%);} .accent-swatch[data-accent="forest"]{background:linear-gradient(135deg, #F5F1F0 50%, #1F5E4A 50%);} .accent-swatch.active{box-shadow:0 0 0 2px var(--wine-2), 0 0 0 3.5px var(--gold);} .accent-switch-collapsed{ width:24px; height:24px; border-radius:50%; margin:0 auto; border:2px solid var(--gold); cursor:pointer; background:linear-gradient(135deg, #F5F1F0 50%, var(--wine) 50%); } .theme-toggle-btn{ width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:#F1E7C6; border-radius:9px; padding:7px 0; font-size:15px; cursor:pointer; line-height:1; } .theme-toggle-btn:hover{background:rgba(0,0,0,.3);} .theme-toggle-btn.full-only{align-items:center; justify-content:center; gap:8px;} .theme-toggle-btn.full-only .icon{font-size:15px; line-height:1;} .theme-toggle-btn.full-only .txt{font-size:12px; font-weight:600; letter-spacing:.02em;} .sidebar .full-only{display:flex;} .sidebar .collapsed-only{display:none;} html[data-panea="collapsed"] .sidebar .full-only{display:none;} html[data-panea="collapsed"] .sidebar .collapsed-only{display:flex;} html[data-panea="collapsed"] .sidebar .collapsed-only.theme-toggle-btn{display:block;} /* Account drawer - bấm "Tài khoản" trong Account info mở panel trượt ra bên hông (cạnh Pane A), không điều hướng sang trang riêng. `/account` vẫn tồn tại làm fallback không-JS. */ .account-drawer-backdrop{ position:fixed; inset:0; background:rgba(43,18,32,.45); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:40; } .account-drawer-backdrop.open{opacity:1; pointer-events:auto;} .account-drawer{ position:fixed; top:0; left:0; height:100vh; width:380px; max-width:90vw; background:var(--paper-raised); border-right:1px solid var(--line-strong); box-shadow:var(--shadow-pop); z-index:41; transform:translateX(-100%); transition:transform .2s ease; display:flex; flex-direction:column; padding:22px 22px 26px; overflow-y:auto; } /* Dock bằng translateX() thay vì đổi `left` - translateX(-100%) lúc đóng luôn tính theo bề rộng CHÍNH nó (380px) nên chỉ đưa mép phải panel về đúng vị trí `left` cũ; nếu `left` > 0 (như 236px trước đây) mép phải đó vẫn nằm giữa Pane A => panel "đóng" vẫn đè hết Pane A (đúng lỗi user báo). Neo `left:0` cố định, chỉ dịch bằng transform nên lúc đóng luôn sạch hoàn toàn khỏi khung nhìn bất kể Pane A đang expanded/collapsed. */ .account-drawer.open{transform:translateX(236px);} html[data-panea="collapsed"] .account-drawer.open{transform:translateX(64px);} .account-drawer-close{ align-self:flex-end; width:28px; height:28px; border-radius:8px; border:1px solid var(--line-strong); background:transparent; cursor:pointer; font-size:13px; color:var(--slate); margin-bottom:12px; flex:none; } .account-drawer-close:hover{background:var(--paper); color:var(--ink);} @media (max-width:920px){ .account-drawer{width:min(92vw,380px);} .account-drawer.open{transform:translateX(0);} } /* ===================================================================== Pane B (panel phải) - 3 khối 5/4/1, expand/collapse, resize, tab chat ===================================================================== */ .paneb-outer{position:relative; min-width:0;} .paneb{ height:100vh; position:sticky; top:0; display:flex; flex-direction:column; background:var(--paper-card); border-left:1px solid var(--line); overflow:hidden; } html[data-paneb="collapsed"] .paneb{width:52px;} .paneb-resize{ position:absolute; top:0; left:-3px; width:7px; height:100%; cursor:col-resize; z-index:5; touch-action:none; } .paneb-resize:hover, .paneb-resize.active{background:var(--gold); opacity:.5;} html[data-paneb="collapsed"] .paneb-resize{display:none;} .paneb-toggle{ /* z-index PHẢI cao hơn .topbar (z-index:20, position:sticky) - nút này cố ý nhô ra khỏi .paneb-outer bằng left âm để đè lên cạnh phải topbar, nếu thấp hơn sẽ bị topbar che mất nửa nút (bug thực tế gặp ở dự án 003 . ESH, 2026-08-30). */ position:absolute; top:14px; left:-14px; width:28px; height:28px; border-radius:50%; z-index:25; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--wine); background:var(--paper-raised); color:var(--wine); box-shadow:var(--shadow-card); font-size:13px; } .paneb-toggle:hover{background:var(--wine); color:#fff;} .paneb-toggle .arrow{display:inline-block; transition:transform .15s ease;} html[data-paneb="collapsed"] .paneb-toggle .arrow{transform:rotate(180deg);} .paneb-block{border-bottom:1px solid var(--line); overflow:auto; padding:14px 16px;} .paneb-block:last-child{border-bottom:none;} .paneb-block h4{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-soft); margin:0 0 10px; display:flex; align-items:center; gap:6px;} .paneb-chart{flex:5; min-height:0;} .paneb-help{flex:4; min-height:0; font-size:12.5px; color:var(--slate); line-height:1.6;} .paneb-help p{margin:0 0 8px;} .paneb-chat{flex:1; min-height:0; display:flex; flex-direction:column; transition:flex .18s ease;} .paneb-chat.open{flex:10; position:absolute; inset:0; background:var(--paper-card); z-index:8;} .paneb-chat-head{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer;} .paneb-chat-head h4{margin:0;} .paneb-chat.open .paneb-chat-head{cursor:default;} .paneb-chat-body{flex:1; display:none; flex-direction:column; min-height:0;} .paneb-chat.open .paneb-chat-body{display:flex;} .paneb-chat-log{flex:1; overflow:auto; padding:14px; font-size:12.5px; color:var(--slate);} .paneb-chat-msg{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:10px 12px; margin-bottom:8px;} .paneb-chat-form{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line);} .paneb-chat-form input{ flex:1; font-family:inherit; font-size:12.5px; border:1px solid var(--line-strong); border-radius:6px; padding:8px 10px; background:var(--paper-raised); color:var(--ink); } .paneb-soon{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-ink); background:var(--gold-soft); padding:2px 7px; border-radius:10px;} .paneb-empty{font-size:12.5px; color:var(--slate-soft); margin:0;} .paneb-mini-stat{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; border-bottom:1px dashed var(--line); font-size:12.5px;} .paneb-mini-stat:last-child{border-bottom:none;} .paneb-mini-stat b{font-family:var(--font-display); font-size:16px; color:var(--wine);} html[data-paneb="collapsed"] .paneb-block{display:none;} .paneb-rail{display:none; flex-direction:column; align-items:center; gap:18px; padding-top:54px;} html[data-paneb="collapsed"] .paneb-rail{display:flex;} .paneb-rail button{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--slate); cursor:pointer; font-size:14px; } .paneb-rail button:hover{background:var(--wine); color:#fff; border-color:var(--wine);} @media (max-width:1180px){ .app{grid-template-columns:236px 1fr !important;} html[data-panea="collapsed"] .app{grid-template-columns:64px 1fr !important;} .paneb-outer{display:none;} } @media (max-width:920px){ .app{grid-template-columns:1fr !important;} .sidebar{position:sticky; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:12px 14px; gap:14px; width:auto !important;} .brand{border:none; padding:0; margin:0;} .nav-group{display:flex; margin:0; gap:4px;} .nav-label, .sidebar-foot{display:none;} .sidebar-toggles{display:none;} .panea-toggle{display:none;} .stat-row{grid-template-columns:1fr 1fr;} .grid-2, .import-grid, .team-grid{grid-template-columns:1fr;} .view{padding:18px 16px 50px;} }