:root{
  --primary:#0ea5e9;        /* xanh da trời chủ đạo */
  --primary-d:#0284c7;
  --sky:#38bdf8;
  --navy:#0c4a6e;           /* xanh đậm cho biểu đồ */
  --teal:#14b8a6;
  --bg:#f3f7fb; --card:#fff; --text:#0f2436; --muted:#647890; --line:#e6edf4;
  --good:#16a34a; --mid:#d97706; --bad:#dc2626;
  --shadow:0 6px 20px rgba(13,60,99,.07);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body{ margin:0; font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; background:var(--bg); color:var(--text); padding-bottom:24px; }
.hidden{ display:none !important; }

/* Topbar trắng */
.topbar{ position:sticky; top:0; z-index:20; background:#fff; color:var(--navy); padding-top:env(safe-area-inset-top); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; }
.topbar h1{ margin:0; font-size:18px; font-weight:800; color:var(--navy); }
.whoami{ background:#e0f2fe; color:var(--primary-d); border:none; padding:7px 12px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; }

.status-banner{ position:fixed; left:50%; transform:translateX(-50%); top:calc(10px + env(safe-area-inset-top)); z-index:80; width:auto; max-width:calc(100% - 24px); margin:0; padding:11px 14px; border-radius:10px; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.status-banner.error{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.status-banner.info{ background:#e0f2fe; color:#075985; border:1px solid #bae6fd; }

/* Tệp đính kèm */
.file-drop{ display:block; border:1.5px dashed var(--primary); background:#f0f9ff; color:var(--primary-d); border-radius:10px; padding:12px; text-align:center; font-size:13px; font-weight:600; cursor:pointer; }
.file-drop:hover{ background:#e0f2fe; }
.file-list{ display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.file-item{ display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:7px 9px; }
.file-item img{ width:42px; height:42px; object-fit:cover; border-radius:7px; }
.file-item .file-ic{ font-size:22px; width:42px; text-align:center; }
.file-item .file-name{ flex:1; min-width:0; font-size:13px; color:var(--text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .file-rm{ border:none; background:#fee2e2; color:#b91c1c; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:13px; }
.file-item.pending{ border-style:dashed; border-color:var(--primary); }
.file-item .file-new{ font-size:10px; font-weight:700; color:#fff; background:var(--primary); border-radius:6px; padding:2px 6px; }
.proj-thumbs{ display:flex; gap:6px; margin-top:10px; align-items:center; }
.proj-thumbs img{ width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.proj-thumbs .more{ font-size:12px; color:var(--muted); font-weight:600; }

/* Period bar */
.period-bar{ position:sticky; top:53px; z-index:15; background:var(--bg); padding:12px 16px 8px; display:flex; flex-direction:column; gap:8px; }
.seg{ display:flex; background:#e3ecf5; border-radius:12px; padding:4px; }
.seg-btn{ flex:1; border:none; background:transparent; padding:9px; border-radius:9px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
.seg-btn.active{ background:#fff; color:var(--primary-d); box-shadow:var(--shadow); }
.period-selects{ display:flex; gap:8px; }
.period-selects select{ flex:1; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px; color:var(--text); }

.report-scroll{ padding:4px 16px; }
.sec-title{ font-size:13px; font-weight:800; color:var(--navy); margin:20px 2px 11px; text-transform:uppercase; letter-spacing:.5px; }
.hint{ font-size:13px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:14px 0; }
.empty{ text-align:center; color:var(--muted); padding:46px 20px; line-height:1.6; }
.muted-row{ padding:12px; color:var(--muted); font-size:13px; }

/* ===== Báo cáo ===== */
.rpt-title-box{ background:linear-gradient(120deg,var(--primary),var(--sky)); color:#fff; border-radius:16px; padding:16px; margin:14px 0; box-shadow:var(--shadow); }
.rpt-title{ font-size:18px; font-weight:800; }
.rpt-sub{ font-size:12.5px; opacity:.95; margin-top:4px; }
.rpt-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.rpt-hl{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:13px 14px; box-shadow:var(--shadow); border-top:3px solid var(--primary); }
.rpt-hl .hl-ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:19px; background:#e0f2fe; margin-bottom:8px; }
.rpt-hl .rl{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.rpt-hl .rn{ font-size:27px; font-weight:800; line-height:1.1; margin-top:2px; color:var(--navy); }
.rpt-hl .rs{ font-size:11px; color:#94a3b8; margin-top:1px; }
.rpt-sale-break{ margin-top:6px; }
.rpt-sale-title{ font-size:13px; font-weight:700; margin:8px 0 6px; }
.sale-pill{ display:inline-block; background:#e0f2fe; color:var(--primary-d); border-radius:20px; padding:3px 11px; margin:3px; font-size:12.5px; }

/* ===== Charts ===== */
.chart-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow); margin-bottom:12px; }
.chart-title{ font-size:14px; font-weight:700; margin-bottom:10px; color:var(--navy); }
.chart-card canvas{ max-height:230px; }
.chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chart-grid .chart-card{ margin-bottom:0; }
.chart-grid canvas{ max-height:170px; }

/* ===== KPI page ===== */
.kpi-toolbar{ display:flex; gap:8px; margin:12px 0; }
.kpi-toolbar select{ flex:1; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px; }
.kpi-two-col{ display:grid; grid-template-columns:1fr; gap:12px; }
.kpi-col-box{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.kpi-col-head{ color:#fff; padding:11px 14px; font-size:14px; font-weight:700; }
.kpi-col-head.sale{ background:linear-gradient(120deg,var(--primary),var(--sky)); }
.kpi-col-head.kt{ background:linear-gradient(120deg,var(--navy),var(--primary-d)); }
.kpi-act-btns{ display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:11px; }
.kpi-act-btn{ border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:9px 8px; font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; }
.kpi-act-btn:active{ background:#dbeafe; }
.kpi-entries{ padding:0 11px 11px; display:flex; flex-direction:column; gap:7px; }
.kpi-entry{ display:flex; align-items:center; gap:7px; background:var(--bg); border-radius:10px; padding:8px 10px; font-size:13px; cursor:pointer; }
.kpi-entry:active{ background:#dbeafe; }
.ke-main{ flex:1; min-width:0; }
.ke-date{ font-size:11px; color:var(--muted); white-space:nowrap; }
.et-badge{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:7px; white-space:nowrap; color:#fff; }
.et-badge.t-khaosat{ background:var(--primary); } .et-badge.t-phuongan{ background:var(--navy); }
.et-badge.t-huongdan{ background:var(--teal); } .et-badge.t-thamky{ background:#6366f1; }
.sale-badge{ display:inline-block; background:#e0f2fe; color:var(--primary-d); border-radius:10px; padding:1px 7px; margin-left:4px; font-size:11px; }

/* Summary table */
.kpi-summary-box{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px; margin-top:14px; }
.kpi-sum-head{ display:flex; justify-content:space-between; font-weight:700; font-size:14px; margin-bottom:8px; color:var(--navy); }
.kpi-sum-head span:last-child{ color:var(--muted); font-weight:600; font-size:12.5px; }
.sum-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.sum-tbl th{ text-align:left; color:var(--muted); font-weight:700; padding:6px; border-bottom:2px solid var(--line); }
.sum-tbl th:not(:first-child){ text-align:right; }
.sum-tbl td{ padding:7px 6px; border-bottom:1px solid #f1f5f9; }
.sum-tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.sum-tbl tr.tot td{ font-weight:800; border-top:2px solid var(--line); background:#f0f7fd; }
.pct{ font-size:11px; margin-left:4px; font-weight:700; }
.pct.g{ color:var(--good); } .pct.m{ color:var(--mid); } .pct.b{ color:var(--bad); }

.sale-chk-wrap{ display:flex; flex-wrap:wrap; gap:6px; }
.sale-chk{ display:flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:6px 9px; font-size:13px; cursor:pointer; }
.sale-chk input{ width:auto; accent-color:var(--primary); }
.ke-type-label{ font-weight:700; color:var(--primary-d); font-size:14px; margin-bottom:4px; }

/* ===== Dự án ===== */
.month-sep{ font-size:13px; font-weight:800; color:var(--navy); margin:16px 2px 8px; text-transform:uppercase; }
.proj-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); margin-bottom:10px; cursor:pointer; border-left:5px solid var(--primary); }
.proj-top{ display:flex; justify-content:space-between; gap:8px; }
.proj-cust{ font-weight:700; font-size:15px; flex:1; }
.proj-name{ color:var(--muted); font-size:13px; margin-top:3px; }
.proj-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pbadge{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap; }
.pbadge.done{ background:#dcfce7; color:#15803d; } .pbadge.doing{ background:#fef3c7; color:#b45309; }

/* ===== Chips / Tasks ===== */
.chip{ font-size:12px; padding:4px 9px; border-radius:20px; background:#eef4fa; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.chip.rev{ background:#e0f2fe; color:var(--primary-d); font-weight:600; }
.chip.due-soon{ background:#fff7ed; color:#c2410c; } .chip.overdue{ background:#fef2f2; color:#b91c1c; font-weight:600; }
.chip.prio-cao{ background:#fef2f2; color:var(--bad); } .chip.prio-trung{ background:#fffbeb; color:#b45309; } .chip.prio-thap{ background:#f0fdf4; color:#15803d; }
.filters{ display:flex; gap:8px; padding:12px 16px; overflow-x:auto; }
.filters select{ flex:1 0 auto; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:14px; }
.task-list{ padding:0 16px; display:flex; flex-direction:column; gap:10px; }
.task{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); border-left:5px solid #94a3b8; cursor:pointer; }
.task.s-doing{ border-left-color:var(--primary); } .task.s-done{ border-left-color:var(--good); opacity:.7; } .task.s-done .task-title{ text-decoration:line-through; }
.task-head{ display:flex; justify-content:space-between; gap:8px; }
.task-title{ font-weight:600; font-size:16px; margin:0; }
.task-desc{ color:var(--muted); font-size:14px; margin:6px 0 0; }
.task-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.task-status-btn{ border:none; background:#eef4fa; border-radius:8px; padding:5px 8px; font-size:13px; cursor:pointer; white-space:nowrap; }

/* ===== FAB + nav ===== */
.fab{ position:fixed; right:20px; bottom:calc(24px + env(safe-area-inset-bottom)); width:58px; height:58px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:30px; box-shadow:0 6px 18px rgba(14,165,233,.5); cursor:pointer; z-index:30; }
.fab:active{ background:var(--primary-d); }
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:35; background:#fff; border-top:1px solid var(--line); display:flex; padding-bottom:env(safe-area-inset-bottom); }
.nav-btn{ flex:1; border:none; background:transparent; padding:9px 0 10px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--muted); cursor:pointer; }
.nav-btn span{ font-size:20px; } .nav-btn.active{ color:var(--primary); font-weight:700; }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; background:rgba(12,36,54,.5); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.modal-card{ background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0; padding:0 0 calc(16px+env(safe-area-inset-bottom)); max-height:92vh; overflow-y:auto; }
.modal-card h2{ position:sticky; top:0; z-index:2; background:#fff; margin:0; padding:18px 20px 14px; font-size:18px; color:var(--navy); border-bottom:1px solid var(--line); }
.modal-card form{ padding:6px 20px 4px; }
.modal-card label{ display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; font-weight:600; }
.modal-card input,.modal-card textarea,.modal-card select{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; color:var(--text); background:#fff; }
.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.modal-card textarea{ resize:vertical; min-height:64px; }
/* Lưới form: 1 cột trên điện thoại, 2 cột trên màn hình lớn */
.form-grid{ display:grid; grid-template-columns:1fr; gap:0 16px; }
.fld{ display:flex; flex-direction:column; }
.fld>label{ margin:12px 0 4px; }
.fld.full{ grid-column:1 / -1; }
.row{ display:flex; gap:10px; } .row>div{ flex:1; }
.modal-actions{ position:sticky; bottom:0; background:#fff; display:flex; align-items:center; gap:8px; margin:14px -20px 0; padding:14px 20px calc(4px+env(safe-area-inset-bottom)); border-top:1px solid var(--line); } .modal-actions .spacer{ flex:1; }
.btn-primary{ background:var(--primary); color:#fff; border:none; padding:12px 22px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; }
.btn-soft{ background:#e0f2fe; color:var(--primary-d); border:none; padding:9px 14px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.btn-ghost{ background:#eef4fa; color:var(--text); border:none; padding:12px 18px; border-radius:10px; font-size:15px; cursor:pointer; }
.btn-danger{ background:#fef2f2; color:var(--bad); border:none; padding:12px 16px; border-radius:10px; font-size:15px; cursor:pointer; }

@media (min-width:600px){
  .modal{ align-items:center; } .modal-card{ border-radius:18px; max-width:720px; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  .kpi-two-col{ grid-template-columns:1fr 1fr; }
  .rpt-highlights{ grid-template-columns:repeat(5,1fr); }
}

/* ===== Dashboard Báo cáo (gói gọn 1 màn hình) ===== */
.dash{ padding:8px 14px 0; }
.dash-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.dash-title{ font-size:15px; font-weight:800; color:var(--navy); }
.dash-by{ font-size:12px; color:var(--muted); white-space:nowrap; }
.dash-verdict{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-left:6px solid var(--muted); border-radius:14px; padding:12px 16px; margin-bottom:12px; box-shadow:var(--shadow); }
.dash-verdict.v-good{ border-left-color:var(--good); } .dash-verdict.v-mid{ border-left-color:var(--mid); } .dash-verdict.v-bad{ border-left-color:var(--bad); }
.dash-verdict .v-badge{ text-align:center; flex-shrink:0; min-width:84px; }
.dash-verdict .v-pct{ font-size:30px; font-weight:800; line-height:1; }
.dash-verdict.v-good .v-pct{ color:var(--good); } .dash-verdict.v-mid .v-pct{ color:var(--mid); } .dash-verdict.v-bad .v-pct{ color:var(--bad); }
.dash-verdict .v-word{ font-size:11px; font-weight:800; letter-spacing:.4px; margin-top:3px; padding:2px 8px; border-radius:20px; display:inline-block; }
.dash-verdict.v-good .v-word{ background:#dcfce7; color:#15803d; } .dash-verdict.v-mid .v-word{ background:#fef3c7; color:#b45309; } .dash-verdict.v-bad .v-word{ background:#fee2e2; color:#b91c1c; }
.dash-verdict .v-text{ font-size:13.5px; color:var(--text); line-height:1.5; }
.dash-hl{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.dash-hl .rpt-hl{ padding:9px 11px; border-radius:13px; }
.dash-hl .rpt-hl .hl-ico{ width:30px; height:30px; font-size:16px; border-radius:9px; margin-bottom:5px; }
.dash-hl .rpt-hl .rl{ font-size:10px; }
.dash-hl .rpt-hl .rn{ font-size:22px; }
.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.panel.accent{ border:1.5px solid var(--primary); }
.panel-h{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--navy); padding:9px 12px; border-bottom:1px solid var(--line); }
.panel-sub{ font-size:11px; font-weight:500; color:var(--muted); }
.mini-btn{ margin-left:auto; border:none; background:#e0f2fe; color:var(--primary-d); border-radius:8px; padding:5px 9px; font-size:11.5px; font-weight:700; cursor:pointer; }
.panel-body{ flex:1; min-height:0; padding:10px 12px; }
.panel-body.tbl-wrap{ overflow:auto; }
.panel-body.chart-wrap{ position:relative; }
.panel-body.chart-wrap canvas{ position:absolute; top:10px; left:10px; right:10px; bottom:10px; }
.sum-tbl.mini th,.sum-tbl.mini td{ padding:5px 6px; font-size:12.5px; }
.trd-up{ color:var(--good); font-weight:700; } .trd-down{ color:var(--bad); font-weight:700; } .trd-flat{ color:var(--muted); }
.dash-actions{ padding:10px 16px; } .dash-actions .btn-primary{ width:100%; }
.panel-body{ overflow:auto; }
.chart-host{ position:relative; width:100%; height:100%; min-height:150px; }
.chart-host canvas{ position:absolute; inset:0; }
.mt-h{ font-size:12px; font-weight:700; color:var(--navy); margin:8px 0 4px; }
.mt-row{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:3px 0; border-bottom:1px solid #f1f5f9; }
.mt-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Trang Mô hình & Đào tạo */
.rnd-head{ display:flex; align-items:center; justify-content:space-between; }
.mh-card{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:12px 13px; box-shadow:var(--shadow); margin:8px 0; cursor:pointer; }
.mh-top{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.mh-top b{ font-size:14px; }
.mh-stt{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; background:#eef4fa; color:var(--muted); }
.mh-stt.s-hoanthanh{ background:#dcfce7; color:#15803d; } .mh-stt.s-dangchay{ background:#dbeafe; color:#1d4ed8; }
.mh-stt.s-tamdung{ background:#fef3c7; color:#b45309; } .mh-stt.s-lenke{ background:#fff; color:#64748b; border:1px solid #cbd5e1; }
.mh-bar{ height:7px; background:#eef4fa; border-radius:5px; margin:8px 0 6px; overflow:hidden; }
.mh-bar div{ height:100%; background:linear-gradient(90deg,var(--primary),var(--sky)); border-radius:5px; }
.mh-sub{ font-size:12px; color:var(--muted); }

@media (min-width:920px){
  .dash{ height:calc(100dvh - 264px); display:flex; flex-direction:column; overflow:hidden; }
  .dash-grid{ flex:1; min-height:0; grid-template-rows:1fr 1fr; }
  .dash-actions{ position:fixed; right:18px; bottom:84px; padding:0; z-index:25; }
  .dash-actions .btn-primary{ width:auto; box-shadow:var(--shadow); }
}
@media (max-width:919px){
  .dash-hl{ grid-template-columns:repeat(2,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
  .panel-body.chart-wrap{ height:200px; }
}

/* ===== In / PDF ===== */
/* ===== Phiếu đánh giá (scorecard) ===== */
.sc{ padding:12px 16px 4px; max-width:760px; margin:0 auto; }
.sc-head{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.sc-verdict{ display:flex; align-items:center; gap:18px; color:#fff; border-radius:18px; padding:16px 20px; box-shadow:var(--shadow); }
.v-big{ font-size:46px; font-weight:800; line-height:1; }
.v-big span{ font-size:20px; }
.v-info{ flex:1; min-width:0; }
.v-word{ font-size:17px; font-weight:800; }
.v-sub{ font-size:13px; opacity:.96; margin-top:2px; }
.v-ovbar{ height:8px; background:rgba(255,255,255,.35); border-radius:6px; margin-top:8px; overflow:hidden; }
.v-ovbar i{ display:block; height:100%; background:#fff; border-radius:6px; }
.sc-sec{ font-size:12px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 10px; }
.sc-note{ font-weight:500; color:var(--muted); text-transform:none; }
.sc-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sc-row .nm{ width:150px; flex-shrink:0; font-size:14px; font-weight:600; }
.sc-row .bar{ flex:1; height:20px; background:#eef4fa; border-radius:10px; overflow:hidden; }
.sc-row .bar i{ display:block; height:100%; border-radius:10px; }
.sc-row .val{ width:128px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sc-row .val b{ font-size:15px; }
.sc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sc-chips span{ background:#eef4fa; border-radius:20px; padding:7px 13px; font-size:13px; color:var(--text); }
.sc-chips span.warn{ background:#fef3c7; color:#b45309; font-weight:600; }
.sc-actions{ display:flex; gap:10px; padding:12px 16px; max-width:1100px; margin:0 auto; }
.sc-actions .btn-primary{ flex:1; }

/* ===== Báo cáo biểu đồ (hero + lưới) ===== */
.rep{ padding:10px 16px 4px; max-width:1100px; margin:0 auto; }
.rep-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:10px 0; }
.rep-tile{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--primary); border-radius:12px; padding:9px 10px; box-shadow:var(--shadow); text-align:center; }
.rt-v{ font-size:23px; font-weight:800; line-height:1.1; }
.rt-l{ font-size:11px; color:var(--muted); margin-top:2px; }
.rep-hero{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:10px 14px; margin:12px 0; }
.rep-h{ font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.rep-hero-body{ position:relative; height:176px; }
.rep-hero-body canvas{ position:absolute; inset:0; }
.rep-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rep-card{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:10px 12px; }
.rep-cbody{ position:relative; height:138px; }
.rep-cbody canvas{ position:absolute; inset:0; }
.rep-insight{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.ins-col{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px; }
.ins-col.act{ border-left-color:var(--good); }
.ins-h{ font-size:13px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.ins-col ul{ margin:0; padding-left:18px; }
.ins-col li{ font-size:13px; line-height:1.55; margin-bottom:5px; }
@media (max-width:560px){ .rep-insight{ grid-template-columns:1fr; } }

/* ===== Báo cáo phụ (mô hình/chia sẻ/kế hoạch) ===== */
.rep-extra{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.ex-col{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px; }
.ex-h{ font-size:13px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.ex-col ul{ margin:0; padding-left:18px; } .ex-col li{ font-size:12.5px; line-height:1.5; margin-bottom:4px; }
.ex-plan{ font-size:13px; line-height:1.9; }
@media (max-width:760px){ .rep-extra{ grid-template-columns:1fr; } }

/* ===== Trang chủ 6 nút ===== */
.home-ic{ background:var(--primary); color:#fff; border:none; height:42px; border-radius:21px; font-size:15px; font-weight:700; padding:0 18px; cursor:pointer; margin-right:10px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 4px 12px -3px var(--primary); }
.home-ic:active{ background:var(--primary-d); }
.pa-frame{ width:100%; height:calc(100dvh - 56px); border:0; display:block; background:#fff; }

/* ===== Kết quả test mẫu ===== */
/* ===== KQPT — dạng Tab (Tạo phiếu | Xem trước) ===== */
#page-kqpt{ overflow:hidden; box-sizing:border-box; height:calc(100dvh - 80px); }
.kq-wrap{ height:100%; display:flex; flex-direction:column; gap:10px; padding:10px 16px 8px; box-sizing:border-box; }
.kq-tabbar{ flex:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-bottom:2px solid var(--line); padding-bottom:8px; }
.kq-tab{ border:none; background:#eef4fa; color:var(--navy); border-radius:10px 10px 0 0; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer; }
.kq-tab.active{ background:var(--primary); color:#fff; }
.kq-sheetbtn{ margin-left:auto; text-decoration:none; display:inline-flex; align-items:center; }
.kq-pane{ flex:1; min-height:0; overflow-y:auto; }
.kq-pane.hidden{ display:none; }
.kq-card{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px; }
.kq-sec{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:800; color:var(--navy); margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed var(--line); }
.kq-card .form-grid{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.kq-erow{ display:grid; grid-template-columns:1.4fr .6fr 1.2fr .8fr .8fr .8fr 30px; gap:5px; margin-bottom:6px; }
.kq-erow.bun{ grid-template-columns:1.6fr .6fr 1.3fr .9fr .9fr 30px; }
.kq-erow input{ padding:7px 8px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; min-width:0; }
.kq-del{ border:none; background:#fef2f2; color:var(--bad); border-radius:8px; cursor:pointer; font-size:13px; }
.kq-doc{ border:1px solid var(--line); border-radius:8px; padding:22px 26px; background:#fff; overflow-x:auto; max-width:900px; margin:0 auto; box-shadow:0 6px 22px rgba(15,36,54,.1); }
@media (max-width:820px){ #page-kqpt{ height:auto; overflow:visible; } .kq-pane{ overflow:visible; } }
.kq-cols-head,.kq-rows-head{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; color:var(--navy); margin:14px 0 8px; }
.kq-cols{ display:flex; flex-wrap:wrap; gap:8px; }
.kq-col-chip{ display:flex; align-items:center; gap:4px; background:#eef4fa; border:1px solid var(--line); border-radius:9px; padding:3px 4px 3px 8px; }
.kq-col-chip input{ border:none; background:transparent; font-size:12.5px; width:96px; min-width:0; padding:4px 0; }
.kq-pick-head{ font-size:12.5px; color:var(--muted); margin:8px 0 6px; }
.kq-param-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.kq-pchip{ border:1px solid var(--primary); background:#e0f2fe; color:var(--primary-d); border-radius:20px; padding:5px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.kq-pchip:active{ background:#bae6fd; }
.kq-pchip.has-qc{ background:var(--primary); border-color:var(--primary); color:#fff; }
.kq-note{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-family:inherit; line-height:1.6; min-height:120px; resize:vertical; color:var(--text); }
.home-wrap{ width:100%; margin:0; padding:16px 22px; }
.home-hello{ font-size:18px; color:var(--navy); margin:6px 2px 16px; } .home-hello .home-sub{ font-size:13px; color:var(--muted); font-weight:500; margin-top:2px; }
.home-grid{ display:block; }
.home-group{ margin-bottom:20px; }
.home-group-t{ font-size:12.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.home-gr{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 12px; }
.home-btn{ justify-self:center; width:max-content; display:flex; flex-direction:column; align-items:center; gap:10px; background:transparent; border:none; box-shadow:none; padding:0; cursor:pointer; }
.home-btn .hb-ic{ font-size:46px; line-height:1; width:104px; height:104px; border-radius:28px; display:grid; place-items:center;
  background:var(--hc,#0ea5e9); box-shadow:0 12px 24px -8px var(--hc,#0ea5e9); transition:transform .08s; }
.home-btn:active .hb-ic{ transform:scale(.92); }
.home-btn .hb-t{ font-size:14.5px; font-weight:700; color:var(--navy); text-align:center; }
@media (min-width:820px){ .home-gr{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:380px){ .home-gr{ grid-template-columns:repeat(2,1fr); } }

/* File trên thẻ Mô hình/Chia sẻ */
.mh-files{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mh-files img{ width:46px; height:46px; object-fit:cover; border-radius:7px; border:1px solid var(--line); }
.file-chip{ display:inline-flex; align-items:center; gap:4px; background:#eef4fa; color:var(--primary-d); border-radius:8px; padding:5px 9px; font-size:12px; text-decoration:none; }

/* ===== Trang chủ 2 cột: nút trái, cột thông báo phải (dài, nổi bật) ===== */
.home-cols{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:stretch; }
.home-side{ background:#fff; border:1px solid var(--line); border-top:5px solid #db2777; border-radius:16px;
  box-shadow:0 16px 38px -12px rgba(219,39,119,.45); overflow:hidden; align-self:stretch;
  min-height:calc(100dvh - 215px); display:flex; }
.home-reminders{ flex:1; display:flex; flex-direction:column; min-height:0; }
.hr-h{ background:linear-gradient(120deg,#db2777,#f472b6); color:#fff; font-size:14.5px; font-weight:800; padding:14px 16px; letter-spacing:.2px; }
.hr-row{ flex:1; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.hr-chip{ background:#fdf2f8; border:1px solid #fbcfe8; border-left:4px solid #db2777; border-radius:10px; padding:11px 12px; font-size:13px; line-height:1.45; }
.hr-chip.soon{ background:#fff7ed; border-color:#fed7aa; border-left-color:#d97706; }
.hr-chip.late{ background:#fef2f2; border-color:#fecaca; border-left-color:var(--bad); color:#b91c1c; }
.hr-empty{ font-size:13px; color:var(--muted); padding:6px 2px; }
@media (max-width:820px){ .home-cols{ grid-template-columns:1fr; } .home-side{ min-height:auto; } }

/* ===== Kanban 3 cột ===== */
.kanban{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 16px; align-items:start; }
.kb-col{ background:#eef2f6; border:1px solid var(--line); border-radius:14px; padding:8px; min-height:120px; }
.kb-head{ font-size:13px; font-weight:800; padding:6px 6px 10px; display:flex; align-items:center; gap:6px; }
.kb-head.c-todo{ color:#64748b; } .kb-head.c-doing{ color:var(--primary-d); } .kb-head.c-done{ color:#15803d; }
.kb-n{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1px 8px; font-size:12px; }
.kb-body{ display:flex; flex-direction:column; gap:8px; }
.kb-empty{ color:#94a3b8; font-size:12px; text-align:center; padding:10px; }
.kanban .task{ padding:11px 12px; }
.kanban .task .task-title{ font-size:14px; }
.kb-moves{ display:flex; justify-content:space-between; margin-top:8px; }
.kb-move{ border:none; background:#eef4fa; color:var(--primary-d); border-radius:8px; padding:4px 11px; font-size:13px; cursor:pointer; }
.kb-move:active{ background:#dbeafe; }
@media (max-width:700px){ .kanban{ grid-template-columns:1fr; } }

/* ===== Lịch hẹn ===== */
#reminder-list{ display:flex; flex-direction:column; gap:9px; }
.rm-item{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-left:5px solid #db2777; border-radius:12px; padding:11px 13px; box-shadow:var(--shadow); }
.rm-item.past{ border-left-color:#94a3b8; } .rm-item.done{ opacity:.6; border-left-color:var(--good); } .rm-item.done .rm-title{ text-decoration:line-through; }
.rm-check,.rm-edit{ border:none; background:transparent; font-size:18px; cursor:pointer; }
.rm-main{ flex:1; min-width:0; } .rm-title{ font-weight:700; font-size:15px; } .rm-when{ font-size:12.5px; color:var(--muted); margin-top:2px; }
@media (max-width:900px){ .rep-grid{ grid-template-columns:1fr 1fr; } .rep-tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .rep-grid{ grid-template-columns:1fr; } .rep-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sc-row .nm{ width:104px; font-size:12.5px; } .sc-row .val{ width:104px; font-size:12px; } .v-big{ font-size:38px; } }

/* ===== In / PDF ===== */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; padding:0; }
  .page{ display:block !important; }
  #page-kpi,#page-project,#page-rnd,#page-tasks{ display:none !important; }
  .sc-verdict, .sc-row .bar i{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* Báo cáo nền tối: giữ nguyên màu khi in */
  #page-report{ height:auto !important; }
  .dash2,.d2-card,.d2-feature{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .dash2-top{ height:240px !important; }
  .dash2-grid{ height:420px !important; }
}

/* =====================================================================
   BÁO CÁO — Dashboard nền tối (giao diện báo cáo) · 1 màn hình, không cuộn
   ===================================================================== */
#page-report{ display:flex; flex-direction:column; gap:8px; padding:8px 12px 6px; height:calc(100dvh - 196px); box-sizing:border-box; overflow:hidden; }
#page-report.hidden{ display:none; }

.dash2{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(160deg,#0b1220 0%,#0f1c30 55%,#11243a 100%);
  border:1px solid #1e2d44; border-radius:18px; padding:14px 16px;
  box-shadow:0 14px 40px rgba(2,8,23,.5);
}
.dash2-head{ display:flex; justify-content:space-between; align-items:center; color:#e2e8f0; }
.dash2-head #d2-period{ font-size:17px; font-weight:800; letter-spacing:.3px; }
.dash2-head #d2-by{ font-size:12.5px; color:#7dd3fc; background:rgba(125,211,252,.12); padding:5px 12px; border-radius:999px; }

.dash2-top{ display:grid; grid-template-columns:1fr 1fr 2.2fr; gap:12px; height:28%; min-height:0; }
.dash2-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; flex:1; min-height:0; }

.d2-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.14);
  border-radius:14px; padding:9px 12px; display:flex; flex-direction:column; min-height:0;
  transition:border-color .15s;
}
.d2-card:hover{ border-color:rgba(56,189,248,.4); }
.d2-h{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#94a3b8; margin-bottom:5px; display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none;
}
.d2-big{ font-size:13px; font-weight:800; color:#22d3ee; text-transform:none; letter-spacing:0; }

.dash2 .chart-host{ position:relative; flex:1; min-height:0; }
.dash2 .chart-host canvas{ position:absolute; inset:0; width:100%!important; height:100%!important; }
.d2-gauge .chart-host{ display:flex; align-items:center; justify-content:center; }
.d2-gval{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:24px; font-weight:800; color:#22d3ee; }
.d2-feature{ background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(168,85,247,.07)); border-color:rgba(56,189,248,.22); }

/* Bảng số liệu trong panel tối */
.d2-num{ flex:1; min-height:0; overflow:auto; }
/* 2 ô kế hoạch: bảng lấp đầy ô, dàn đều dòng, KHÔNG cuộn */
#num-khth, #num-next{ overflow:hidden; }
#num-khth .d2-tbl, #num-next .d2-tbl{ height:100%; }
#num-khth .d2-tbl td, #num-khth .d2-tbl th,
#num-next .d2-tbl td, #num-next .d2-tbl th{ padding-top:0; padding-bottom:0; }
.d2-tbl{ width:100%; border-collapse:collapse; font-size:12px; color:#e2e8f0; }
.d2-tbl th{ text-align:left; font-weight:700; color:#94a3b8; font-size:10px; text-transform:uppercase; letter-spacing:.3px; padding:4px 6px; border-bottom:1px solid rgba(148,163,184,.28); white-space:nowrap; }
.d2-tbl th:not(:first-child), .d2-tbl td:not(:first-child){ text-align:right; }
.d2-tbl td{ padding:5px 6px; border-bottom:1px solid rgba(148,163,184,.1); white-space:nowrap; }
.d2-tbl td.n{ font-weight:700; font-variant-numeric:tabular-nums; }
.d2-tbl td.th{ color:#22d3ee; }
.d2-tbl tr.tot td{ border-top:1px solid rgba(148,163,184,.32); border-bottom:none; font-weight:800; color:#fff; padding-top:6px; }
.d2-tbl tr.tot td.th{ color:#22d3ee; }
.d2-tbl td.pc{ font-weight:800; }
.d2-tbl td.pc.ok{ color:#34d399; }
.d2-tbl td.pc.mid{ color:#fbbf24; }
.d2-tbl td.pc.low{ color:#f87171; }
.d2-tbl td.st{ font-weight:600; color:#cbd5e1; font-size:11.5px; }
.d2-tbl td.st.ok-st{ color:#34d399; }
.d2-tbl td:first-child{ max-width:0; width:99%; overflow:hidden; text-overflow:ellipsis; }
.d2-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:#64748b; font-size:12.5px; font-style:italic; text-align:center; }

/* =====================================================================
   KPI — gọn 1 màn hình, không cuộn (Tổng hợp donut ở trên + 2 cột dưới)
   ===================================================================== */
#page-kpi{ overflow:hidden; box-sizing:border-box; height:calc(100dvh - 196px); }
.kpi-wrap{ height:100%; display:flex; flex-direction:column; gap:10px; padding:8px 16px 6px; box-sizing:border-box; }
.kpi-top{ flex:none; margin:0 !important; padding:12px 14px; }
.kpi-sum-head{ display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--navy); font-size:15px; margin-bottom:10px; }
.kpi-sum-head span:last-child{ font-size:13px; color:var(--muted); font-weight:600; }
.kpi-donuts{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.kd-card{ display:flex; flex-direction:column; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 6px; }
.kd-t{ font-size:12px; font-weight:700; color:var(--navy); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.kd-host{ position:relative; width:78px; height:78px; }
.kd-host canvas{ position:absolute; inset:0; }
.kd-v{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:800; }
.kd-sub{ font-size:11.5px; color:var(--muted); } .kd-sub b{ color:var(--text); }

.kpi-wrap .kpi-toolbar{ flex:none; margin:0; }
.kc-n{ font-weight:600; opacity:.9; }
.kpi-wrap .kpi-two-col{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:12px; }
.kpi-wrap .kpi-col-box{ display:flex; flex-direction:column; min-height:0; }
.kpi-wrap .kpi-col-head{ flex:none; }
.kpi-wrap .kpi-act-btns{ flex:none; }
.kpi-wrap .kpi-entries{ flex:1; min-height:0; overflow-y:auto; }

/* Nút ✕ xóa nhanh trong mỗi hoạt động */
.ke-del{ flex:none; border:none; background:#fee2e2; color:#dc2626; width:24px; height:24px; border-radius:7px; font-size:13px; font-weight:700; cursor:pointer; line-height:1; }
.ke-del:hover{ background:#dc2626; color:#fff; }

/* =====================================================================
   DỰ ÁN — Bảng lưới (grid) có thanh công cụ, lọc cột, sắp xếp
   ===================================================================== */
#page-project{ overflow:hidden; box-sizing:border-box; height:calc(100dvh - 196px); }
.grid-wrap{ height:100%; display:flex; flex-direction:column; gap:10px; padding:10px 16px 8px; box-sizing:border-box; }
.grid-toolbar{ flex:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.grid-search{ flex:1; min-width:200px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff; }
.gbtn{ border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:10px; padding:9px 13px; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.gbtn:hover{ background:#f0f7fd; }
.gbtn.add{ background:var(--primary); color:#fff; border-color:var(--primary); }
.gbtn.add:hover{ background:var(--primary-d); }
.gbtn.del.on{ background:#dc2626; color:#fff; border-color:#dc2626; }
.grid-count{ margin-left:auto; font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }

.grid-scroll{ flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.dgrid{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:12px; }
.dgrid th,.dgrid td{ padding:5px 8px; border-bottom:1px solid #eef2f6; text-align:left; white-space:normal; word-break:break-word; vertical-align:middle; }
.dgrid .dg-head th{ white-space:nowrap; }
.dgrid tbody td{ vertical-align:top; }
.dgrid .a-right{ text-align:right; } .dgrid .a-center{ text-align:center; white-space:nowrap; }
/* Bề rộng cột cân đối (tổng ~100%) để vừa khung, không cuộn ngang */
.dgrid col.c-chk{ width:30px; } .dgrid col.c-customer{ width:13%; } .dgrid col.c-project_name{ width:15%; }
.dgrid col.c-industry{ width:9%; } .dgrid col.c-province{ width:8%; } .dgrid col.c-task_type{ width:9%; }
.dgrid col.c-problem{ width:17%; } .dgrid col.c-progress{ width:8%; } .dgrid col.c-result{ width:17%; }
.dgrid col.c-month{ width:5%; } .dgrid col.c-files{ width:5%; }
.dgrid .dg-head th{ position:sticky; top:0; z-index:3; background:#0c4a6e; color:#fff; font-weight:700; cursor:pointer; user-select:none; }
.dgrid .dg-head th:hover{ background:#0e5a82; }
.dg-ar{ font-size:11px; }
.dgrid .dg-filter th{ position:sticky; top:35px; z-index:2; background:#eef4fa; padding:5px 7px; }
.dg-fin,.dg-fsel{ width:100%; box-sizing:border-box; padding:5px 6px; border:1px solid var(--line); border-radius:7px; font-size:12px; background:#fff; }
.dgrid .dg-chk{ width:36px; text-align:center; padding:8px 4px; }
.dgrid tbody .dg-row{ cursor:pointer; }
.dgrid tbody .dg-row:nth-child(even){ background:#fafcfe; }
.dgrid tbody .dg-row:hover{ background:#e7f3fb; }
.pchip{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pchip.ok{ background:#dcfce7; color:#15803d; } .pchip.doing{ background:#dbeafe; color:#1d4ed8; }
.dg-wrap{ display:block; white-space:normal; word-break:break-word; line-height:1.35; }
/* ===== Nhân vật bảo hộ + hiệu ứng cửa (trang trí, pointer-events:none) ===== */
#mascot{ position:fixed; left:14px; bottom:12px; width:84px; z-index:45; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)); animation:mascotBob 2.6s ease-in-out infinite; }
#mascot img{ width:100%; height:auto; display:block; -webkit-user-select:none; user-select:none; }
#mascot:active{ filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)) brightness(1.05); }
/* Bong bóng thoại */
#mascot-bubble{ position:absolute; left:8px; bottom:calc(100% + 8px); white-space:nowrap; background:#fff; color:#0c4a6e; border:2px solid var(--primary); border-radius:14px; padding:8px 13px; font-size:13px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.22); opacity:0; transform:scale(.5); transform-origin:bottom left; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,1.4,.5,1); }
#mascot-bubble::after{ content:""; position:absolute; left:22px; top:100%; border:8px solid transparent; border-top-color:var(--primary); }
#mascot-bubble.show{ opacity:1; transform:scale(1); }
/* Quẩy chào */
#mascot.wave{ animation:mascotWaveHi 1.5s ease-in-out; }
@keyframes mascotWaveHi{ 0%{transform:rotate(0)} 12%{transform:rotate(-9deg)} 26%{transform:rotate(9deg)} 40%{transform:rotate(-9deg)} 54%{transform:rotate(7deg)} 70%{transform:rotate(-5deg)} 85%{transform:rotate(3deg)} 100%{transform:rotate(0)} }
@keyframes mascotBob{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-6px) rotate(-1deg) } }
#mascot.walk{ animation:mascotWalk .42s ease-in-out 3; }
@keyframes mascotWalk{ 0%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(5deg)} 100%{transform:translateY(0) rotate(-5deg)} }
/* Hiệu ứng CỬA ĐÔI 3D mở vào trong (thật hơn) */
#door-fx{ position:fixed; inset:0; z-index:60; pointer-events:none; display:none; overflow:hidden; perspective:1700px; perspective-origin:50% 48%; }
#door-fx.run{ display:block; }
#door-fx .door-dim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, rgba(2,8,23,0) 30%, rgba(2,8,23,.55) 100%); opacity:0; }
#door-fx.closing .door-dim{ animation:dimIn .42s ease both; }
#door-fx.opening .door-dim{ animation:dimOut .5s ease both; }
@keyframes dimIn{ from{opacity:0} to{opacity:1} }
@keyframes dimOut{ from{opacity:1} to{opacity:0} }
#door-fx .door{
  position:absolute; top:0; bottom:0; width:50.4%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 18%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.02) 2px 4px),
    linear-gradient(105deg, #0b3a5c 0%, #1d6fa5 30%, #38bdf8 50%, #1d6fa5 70%, #0b3a5c 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.10), inset 0 0 70px rgba(0,0,0,.45);
  backface-visibility:hidden;
}
/* ô panel chìm trên cánh cửa */
#door-fx .door::before{
  content:""; position:absolute; left:14%; right:14%; top:10%; bottom:10%;
  border-radius:8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), inset 0 6px 18px rgba(0,0,0,.35), 0 2px 4px rgba(255,255,255,.06);
}
/* tay nắm cửa (gần khe giữa) */
#door-fx .door-knob{ position:absolute; top:50%; width:13px; height:34px; border-radius:7px; background:linear-gradient(180deg,#fde68a,#f59e0b); box-shadow:0 1px 4px rgba(0,0,0,.4); transform:translateY(-50%); }
#door-fx .door.l{ left:0; transform-origin:left center; transform:rotateY(-118deg); }
#door-fx .door.l .door-knob{ right:14px; }
#door-fx .door.r{ right:0; transform-origin:right center; transform:rotateY(118deg); }
#door-fx .door.r .door-knob{ left:14px; }
/* Pha ĐÓNG: cánh cửa xoay từ mở -> đóng kín che màn hình */
#door-fx.closing .door.l{ animation:doorCloseL .42s cubic-bezier(.45,0,.2,1) both; }
#door-fx.closing .door.r{ animation:doorCloseR .42s cubic-bezier(.45,0,.2,1) both; }
@keyframes doorCloseL{ from{transform:rotateY(-118deg)} to{transform:rotateY(0deg)} }
@keyframes doorCloseR{ from{transform:rotateY(118deg)} to{transform:rotateY(0deg)} }
/* Pha MỞ: cửa xoay từ đóng -> mở để lộ trang mới */
#door-fx.opening .door.l{ animation:doorOpenL .5s cubic-bezier(.3,0,.25,1) both; }
#door-fx.opening .door.r{ animation:doorOpenR .5s cubic-bezier(.3,0,.25,1) both; }
@keyframes doorOpenL{ from{transform:rotateY(0deg)} to{transform:rotateY(-118deg)} }
@keyframes doorOpenR{ from{transform:rotateY(0deg)} to{transform:rotateY(118deg)} }
@media print{ #mascot,#door-fx{ display:none !important; } }
@media (max-width:700px){ #mascot{ width:60px; } }

.ai-status{ font-size:12.5px; margin:2px 0 6px; min-height:16px; }
.ai-status.running{ color:#0369a1; } .ai-status.ok{ color:#15803d; } .ai-status.err{ color:#b45309; }
.m-ai-charts{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.m-chart-card{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; }
.m-chart-title{ font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.m-chart-host{ position:relative; height:220px; }
.m-chart-host canvas{ position:absolute; inset:0; }
/* Cửa sổ XEM mô hình */
.mv-meta{ font-size:14px; color:var(--text); margin:2px 0 12px; }
.mv-result{ margin-top:8px; font-size:13.5px; color:var(--muted); }
.mv-sec .mv-h{ font-size:13px; font-weight:800; color:var(--navy); margin:6px 0; }
.mv-summary{ white-space:pre-wrap; line-height:1.55; font-size:15px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:13px 15px; }
/* Cửa sổ Xem rộng hơn cho dễ đọc */
#model-view .modal-card{ max-width:960px; }
#model-view > .modal-card > .mv-meta,
#model-view > .modal-card > .mv-sec,
#model-view > .modal-card > .m-ai-charts,
#model-view > .modal-card > .file-list{ margin-left:22px; margin-right:22px; }
#model-view .m-chart-host{ height:300px; }
@media (max-width:1000px){ #model-view .modal-card{ max-width:96vw; } }
.mv-file-select{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff; }
.mv-file-preview{ margin-top:10px; }
.mv-file-preview .mv-img{ max-width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.mv-file-preview .mv-frame{ width:100%; height:62vh; border:1px solid var(--line); border-radius:10px; background:#fff; }
.mv-file-open{ margin-top:8px; }
.task-amis-btn{ text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap; margin-left:auto; }

/* ===== Khóa chỉnh sửa ===== */
.topbar-right{ display:flex; align-items:center; gap:8px; }
.lockbtn{ border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:20px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.lockbtn.on{ background:#dcfce7; border-color:#86efac; color:#15803d; }
/* Khi CHỈ XEM: ẩn mọi nút thêm/sửa/xóa (vẫn xem, tìm, lọc, xuất, in, mở link) */
body.locked #add-btn,
body.locked #proj-add, body.locked #proj-del,
body.locked #mh-add, body.locked #mh-del,
body.locked #cs-add, body.locked #cs-del,
body.locked #kpi-plan-btn,
body.locked #add-reminder-btn,
body.locked .kpi-act-btn,
body.locked .ke-del,
body.locked .kb-move,
body.locked .rm-check, body.locked .rm-edit{ display:none !important; }

/* ===== Mô hình: dùng chung lưới .dgrid, thêm cột & chip riêng ===== */
#page-model{ overflow:hidden; box-sizing:border-box; height:calc(100dvh - 196px); }
.dgrid col.cm-chk{ width:30px; } .dgrid col.cm-name{ width:23%; } .dgrid col.cm-status{ width:14%; }
.dgrid col.cm-progress{ width:13%; } .dgrid col.cm-result{ width:30%; } .dgrid col.cm-month{ width:7%; } .dgrid col.cm-files{ width:7%; }
.mstt{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; display:inline-block; }
.mstt.s-lenke{ background:#fff; color:#64748b; border:1px solid #cbd5e1; }
.mstt.s-dangchay{ background:#dbeafe; color:#1d4ed8; }
.mstt.s-hoanthanh{ background:#dcfce7; color:#15803d; }
.mstt.s-tamdung{ background:#fef3c7; color:#b45309; }
.mh-pcell{ display:flex; align-items:center; gap:6px; }
.mh-pcell .mh-pbar{ flex:1; height:7px; background:#e7eef5; border-radius:6px; overflow:hidden; }
.mh-pcell .mh-pbar>div{ height:100%; background:var(--primary); border-radius:6px; }
.mh-pcell>span{ font-size:11px; font-weight:700; color:var(--navy); white-space:nowrap; }
@media (max-width:820px){ #page-model{ height:auto; overflow:visible; } }

/* ===== Chia sẻ case study: dùng chung lưới .dgrid ===== */
#page-share{ overflow:hidden; box-sizing:border-box; height:calc(100dvh - 196px); }
.dgrid col.cs-chk{ width:30px; } .dgrid col.cs-title{ width:26%; } .dgrid col.cs-dtype{ width:18%; }
.dgrid col.cs-summary{ width:36%; } .dgrid col.cs-month{ width:7%; } .dgrid col.cs-files{ width:7%; }
.cschip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; display:inline-block; }
.cschip.cs{ background:#fef9c3; color:#a16207; } .cschip.kt{ background:#e0e7ff; color:#4338ca; }
@media (max-width:820px){ #page-share{ height:auto; overflow:visible; } }
.dg-empty{ text-align:center; color:var(--muted); font-style:italic; padding:24px; }
.dgrid tfoot .dg-tot td{ position:sticky; bottom:0; z-index:2; background:#f0f7fd; font-weight:800; color:var(--navy); border-top:2px solid var(--line); }

@media (max-width:820px){
  #page-project{ height:auto; overflow:visible; }
  .grid-count{ margin-left:0; }
}

@media (max-width:820px){
  #page-kpi{ height:auto; overflow:visible; }
  .kpi-donuts{ grid-template-columns:repeat(3,1fr); }
  .kpi-wrap .kpi-two-col{ grid-template-columns:1fr; grid-template-rows:none; }
  .kpi-wrap .kpi-entries{ overflow:visible; }
}

@media (max-width:820px){
  #page-report{ height:auto; min-height:calc(100dvh - 156px); }
  .dash2-top{ grid-template-columns:1fr 1fr; height:auto; }
  .dash2-top .d2-feature{ grid-column:1 / -1; min-height:150px; }
  .dash2-grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .d2-card{ min-height:165px; }
  .d2-gauge{ min-height:140px; }
}

/* ====== TRÌNH TẠO BÁO CÁO PPT ====== */
.ppt-modal{ position:fixed; inset:0; z-index:120; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.ppt-modal.hidden{ display:none; }
.ppt-dialog{ background:#fff; width:min(960px,100%); max-height:94vh; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.ppt-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#2B3A8C; color:#fff; font-size:17px; font-weight:700; }
.ppt-x{ background:rgba(255,255,255,.15); color:#fff; border:none; width:32px; height:32px; border-radius:8px; font-size:15px; cursor:pointer; }
.ppt-x:hover{ background:rgba(255,255,255,.3); }
.ppt-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.ppt-seg{ display:inline-flex; border:1px solid #cbd5e1; border-radius:9px; overflow:hidden; }
.ppt-seg button{ border:none; background:#fff; padding:7px 14px; cursor:pointer; font-size:13px; color:#475569; }
.ppt-seg button.active{ background:#2B3A8C; color:#fff; font-weight:700; }
.ppt-toolbar select{ padding:7px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; }
.ppt-btn{ border:none; border-radius:9px; padding:8px 16px; font-size:13.5px; font-weight:700; cursor:pointer; }
.ppt-btn.primary{ background:#29ABE2; color:#fff; }
.ppt-btn.primary:hover{ background:#1d95c7; }
.ppt-btn.ai{ background:#7c3aed; color:#fff; }
.ppt-btn.ai:hover{ background:#6d28d9; }
.ppt-btn.ghost{ background:#e2e8f0; color:#475569; padding:8px 12px; }
.ppt-btn.ghost:hover{ background:#cbd5e1; }
.ppt-btn.export{ background:#b91c1c; color:#fff; font-size:15px; padding:11px 26px; }
.ppt-btn.export:hover{ background:#991616; }
.ppt-tip{ font-size:12px; color:#64748b; }
.ppt-editor{ padding:16px 18px; overflow-y:auto; flex:1; background:#f1f5f9; }
.ppt-empty,.ppt-empty2{ text-align:center; color:#64748b; padding:26px 10px; font-size:14px; }
.ppt-empty2{ padding:12px; font-style:italic; }
.ppt-imgnote{ background:#eef6ff; border:1px solid #cfe2f5; color:#1e3a5f; border-radius:10px; padding:9px 13px; margin-bottom:12px; font-size:12.5px; line-height:1.5; }
.ppt-imgnote.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.ppt-card{ background:#fff; border:1px solid #e2e8f0; border-radius:12px; margin-bottom:14px; overflow:hidden; }
.ppt-card-t{ background:#eaf2fb; color:#1F2A5A; font-weight:700; font-size:14.5px; padding:10px 14px; border-bottom:1px solid #dbe7f3; }
.ppt-card-b{ padding:12px 14px; }
.ppt-row{ margin-bottom:10px; }
.ppt-lb{ display:block; font-size:12.5px; font-weight:600; color:#334155; margin-bottom:4px; }
.ppt-lb-note{ font-weight:400; color:#94a3b8; }
.ppt-in,.ppt-ta,.ppt-num{ width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; font-size:13.5px; font-family:inherit; box-sizing:border-box; }
.ppt-ta{ resize:vertical; min-height:60px; line-height:1.5; }
.ppt-in:focus,.ppt-ta:focus,.ppt-num:focus{ outline:none; border-color:#29ABE2; box-shadow:0 0 0 2px rgba(41,171,226,.2); }
.ppt-tbl{ width:100%; border-collapse:collapse; }
.ppt-tbl th{ background:#2B3A8C; color:#fff; font-size:12.5px; padding:7px 6px; text-align:center; }
.ppt-tbl td{ border:1px solid #e2e8f0; padding:5px 6px; text-align:center; }
.ppt-tbl td.l{ text-align:left; font-weight:600; color:#1F2A5A; }
.ppt-num{ text-align:center; padding:6px; }
.ppt-mini{ font-size:11.5px; color:#94a3b8; margin-top:6px; }
.ppt-block{ border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; margin-bottom:12px; background:#fafcff; }
.ppt-block-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#1F2A5A; }
.ppt-del{ background:#fee2e2; color:#b91c1c; border:none; border-radius:7px; padding:5px 10px; font-size:12px; cursor:pointer; }
.ppt-del.sm{ padding:4px 8px; }
.ppt-del:hover{ background:#fecaca; }
.ppt-add{ background:#dcfce7; color:#166534; border:1px dashed #86efac; border-radius:9px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; width:100%; }
.ppt-add:hover{ background:#bbf7d0; }
.ppt-thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
.ppt-thumb{ position:relative; width:96px; }
.ppt-thumb img{ width:96px; height:66px; object-fit:cover; border-radius:7px; border:2px solid #cbd5e1; display:block; }
.ppt-thumb.off img{ opacity:.35; filter:grayscale(1); }
.ppt-thumb.on img{ border-color:#29ABE2; }
.ppt-thumb-b{ position:absolute; bottom:3px; left:3px; right:3px; text-align:center; font-size:10.5px; font-weight:700; padding:2px 0; border-radius:5px; cursor:pointer; background:rgba(41,171,226,.92); color:#fff; }
.ppt-thumb.off .ppt-thumb-b{ background:rgba(100,116,139,.9); }
.ppt-noimg{ font-size:12.5px; color:#94a3b8; font-style:italic; }
.ppt-share{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ppt-share .ppt-in{ flex:1; }
.ppt-badge{ font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; background:#e0e7ff; color:#3730a3; white-space:nowrap; }
.ppt-ck{ display:flex; align-items:center; gap:8px; font-size:13px; color:#334155; }
.ppt-foot{ padding:12px 18px; border-top:1px solid #e2e8f0; text-align:center; background:#fff; }
@media(max-width:640px){ .ppt-toolbar{ gap:7px; } .ppt-tip{ width:100%; } }

/* ====== TRÌNH CHIẾU TRONG WEB (Canva-style) ====== */
.ppt-btn.show{ background:#0f766e; color:#fff; }
.ppt-btn.show:hover{ background:#0b5c55; }
body.show-open{ overflow:hidden; }
.show-stage{ position:fixed; inset:0; z-index:200; background:#0b1020; display:flex; flex-direction:column; }
.show-stage.hidden{ display:none; }
.show-slide{ flex:1; position:relative; overflow:hidden; cursor:pointer; display:flex; }
.s-blob{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.5; pointer-events:none; animation:floaty 9s ease-in-out infinite; }
.s-blob.b1{ width:42vmin; height:42vmin; background:radial-gradient(circle at 30% 30%,#29ABE2,transparent 70%); top:-10vmin; right:-8vmin; }
.s-blob.b2{ width:38vmin; height:38vmin; background:radial-gradient(circle at 50% 50%,#7c3aed88,transparent 70%); bottom:-12vmin; left:-8vmin; animation-delay:1.5s; }
.s-blob.b3{ width:26vmin; height:26vmin; background:radial-gradient(circle at 50% 50%,#0f766e88,transparent 70%); top:40%; right:12%; animation-delay:.8s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-3vmin) scale(1.06);} }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
@keyframes popIn{ from{ opacity:0; transform:scale(.86);} to{ opacity:1; transform:scale(1);} }
.anim{ opacity:0; animation:riseIn .6s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }
.anim.pop{ animation-name:popIn; }
.show-slide .s-content{ flex:1; padding:5vmin 6vmin; background:linear-gradient(135deg,#f4f8ff 0%,#eaf2fb 100%); position:relative; display:flex; flex-direction:column; color:#1F2A5A; }
.s-corner-logo{ position:absolute; top:3.4vmin; right:5vmin; height:5vmin; opacity:.92; }
.s-head{ margin-bottom:2.4vmin; }
.s-kicker{ display:inline-block; font-size:1.9vmin; font-weight:800; letter-spacing:.16em; color:#29ABE2; text-transform:uppercase; margin-bottom:.6vmin; }
.s-title{ font-size:5vmin; font-weight:900; line-height:1.08; color:#1F2A5A; margin:0; max-width:82%; }
.s-title:after{ content:""; display:block; width:9vmin; height:.7vmin; border-radius:1vmin; background:linear-gradient(90deg,#2B3A8C,#29ABE2); margin-top:1.4vmin; }
.s-body{ flex:1; min-height:0; }
.show-slide .s-cover{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6vmin; position:relative; background:linear-gradient(135deg,#1b2a6b 0%,#2B3A8C 55%,#1b6fa8 100%); color:#fff; overflow:hidden; }
.s-logo-card{ background:#fff; border-radius:2.4vmin; padding:2.4vmin 3.4vmin; box-shadow:0 2vmin 6vmin rgba(0,0,0,.35); margin-bottom:3.4vmin; }
.s-logo-card img{ height:8vmin; display:block; }
.s-cover-kicker{ font-size:2.1vmin; font-weight:800; letter-spacing:.22em; color:#7FD3F2; text-transform:uppercase; margin-bottom:1.6vmin; }
.s-cover-title{ font-size:6.6vmin; font-weight:900; line-height:1.06; margin:0 0 2vmin; max-width:88%; text-shadow:0 1vmin 3vmin rgba(0,0,0,.25); }
.s-cover-sub{ font-size:2.6vmin; color:#dbe7f5; }
.s-cover-badge{ margin-top:3vmin; font-size:2.2vmin; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:1vmin 2.6vmin; border-radius:100px; }
.s-agenda{ display:flex; flex-direction:column; gap:1.8vmin; margin-top:1vmin; }
.s-agenda-item{ display:flex; align-items:center; gap:2.4vmin; background:#fff; border-radius:2vmin; padding:2.2vmin 2.8vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.08); font-size:2.9vmin; font-weight:700; color:#1F2A5A; }
.s-agenda-num{ flex:none; width:6.4vmin; height:6.4vmin; border-radius:50%; background:linear-gradient(135deg,#2B3A8C,#29ABE2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:3vmin; font-weight:900; }
.s-kpi-stats{ display:flex; gap:2.4vmin; margin-bottom:2.4vmin; }
.stat{ flex:1; background:#fff; border-radius:2vmin; padding:2.4vmin; text-align:center; box-shadow:0 1vmin 3vmin rgba(43,58,140,.1); border-top:.8vmin solid #29ABE2; }
.stat-n{ font-size:6vmin; font-weight:900; color:#2B3A8C; line-height:1; }
.stat-n .u{ font-size:3vmin; }
.stat-l{ font-size:1.9vmin; color:#5B6472; margin-top:.8vmin; font-weight:600; }
.s-kpi-grid{ flex:1; display:grid; grid-template-columns:1.15fr .85fr; gap:2.8vmin; min-height:0; }
.s-chart-box{ background:#fff; border-radius:2vmin; padding:2vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.1); position:relative; min-height:40vmin; }
.s-chart-box canvas{ display:block; width:100%!important; height:100%!important; }
.s-tbl{ width:100%; border-collapse:collapse; background:#fff; border-radius:2vmin; overflow:hidden; box-shadow:0 1vmin 3vmin rgba(43,58,140,.1); align-self:start; }
.s-tbl th{ background:#2B3A8C; color:#fff; padding:1.4vmin; font-size:1.9vmin; }
.s-tbl td{ padding:1.3vmin 1.4vmin; border-bottom:1px solid #eef2f8; font-size:2vmin; text-align:center; color:#1F2A5A; }
.s-tbl td.l{ text-align:left; font-weight:700; }
.s-tbl .ok{ color:#1E8449; font-weight:800; }
.s-tbl .no{ color:#c0392b; font-weight:800; }
.s-split{ display:grid; grid-template-columns:1fr 1fr; gap:3vmin; height:100%; min-height:0; }
.s-split.one{ grid-template-columns:1fr; }
.s-info{ overflow:hidden; }
.s-chips{ display:flex; flex-wrap:wrap; gap:1.2vmin; margin-bottom:2vmin; }
.s-chip{ background:#e0edfb; color:#1d4ed8; font-weight:700; font-size:1.9vmin; padding:.8vmin 1.8vmin; border-radius:100px; }
.s-field{ margin-bottom:2vmin; }
.s-field b{ display:block; font-size:2.2vmin; color:#2B3A8C; margin-bottom:.7vmin; }
.s-field p{ margin:0; font-size:2.1vmin; line-height:1.5; color:#33405c; }
.s-field ul{ margin:.3vmin 0 0; padding-left:2.6vmin; }
.s-field li{ font-size:2.05vmin; line-height:1.55; color:#33405c; margin-bottom:.5vmin; }
.s-imgs{ display:grid; gap:1.6vmin; height:100%; max-height:100%; min-height:0; align-content:stretch; overflow:hidden; }
.s-imgs.c1{ grid-template-rows:minmax(0,1fr); }
.s-imgs.c2{ grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
.s-imgs.c3{ grid-template-rows:repeat(3,minmax(0,1fr)); }
.s-img{ border-radius:1.6vmin; overflow:hidden; box-shadow:0 1vmin 3vmin rgba(0,0,0,.18); background:#fff; min-height:0; }
.s-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.s-summary{ font-size:2.4vmin; line-height:1.6; color:#33405c; background:#fff; border-radius:2vmin; padding:3vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.08); border-left:.8vmin solid #29ABE2; white-space:pre-line; }
.s-share-list{ display:flex; flex-direction:column; gap:1.6vmin; }
.s-share-row{ display:flex; align-items:center; gap:2vmin; background:#fff; border-radius:1.6vmin; padding:2vmin 2.6vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.08); font-size:2.4vmin; color:#1F2A5A; font-weight:600; }
.s-badge{ flex:none; font-size:1.7vmin; font-weight:800; padding:.7vmin 1.6vmin; border-radius:100px; background:#e0e7ff; color:#3730a3; }
.s-note{ font-size:3vmin; font-weight:800; color:#2B3A8C; background:#fff; border-radius:2vmin; padding:3vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.1); margin-bottom:2.4vmin; border-left:.8vmin solid #29ABE2; }
.s-concl{ display:flex; flex-direction:column; gap:1.6vmin; }
.s-concl-item{ display:flex; align-items:flex-start; gap:1.8vmin; font-size:2.6vmin; color:#33405c; background:#fff; border-radius:1.6vmin; padding:2vmin 2.6vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.07); }
.s-concl-item .ic{ color:#1E8449; font-size:3vmin; flex:none; }
.s-plan{ display:flex; align-items:center; justify-content:center; height:100%; }
.s-plan .s-tbl{ width:70%; max-width:800px; }
.s-plan .s-tbl td{ font-size:2.4vmin; padding:1.8vmin; }
.s-plan .tot td{ background:#eaf2fb; font-weight:900; color:#2B3A8C; }
.show-slide .s-end{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#1b2a6b,#2B3A8C 60%,#0f766e); color:#fff; }
.s-end h1{ font-size:8vmin; font-weight:900; margin:2vmin 0 1vmin; }
.s-end p{ font-size:2.8vmin; color:#7FD3F2; }
.show-bar{ flex:none; display:flex; align-items:center; gap:1.4vmin; padding:12px 20px; background:rgba(11,16,32,.92); color:#fff; }
.show-nav{ background:rgba(255,255,255,.12); color:#fff; border:none; width:40px; height:40px; border-radius:10px; font-size:24px; cursor:pointer; line-height:1; }
.show-nav:hover{ background:rgba(255,255,255,.25); }
.show-nav:disabled{ opacity:.3; cursor:default; }
.show-count{ font-size:14px; min-width:56px; text-align:center; font-weight:700; }
.show-prog{ flex:1; height:6px; background:rgba(255,255,255,.15); border-radius:100px; overflow:hidden; }
#show-prog-in{ height:100%; background:linear-gradient(90deg,#29ABE2,#7c3aed); width:0; transition:width .4s ease; }
.show-ic{ background:rgba(255,255,255,.12); color:#fff; border:none; width:40px; height:40px; border-radius:10px; font-size:16px; cursor:pointer; }
.show-ic:hover{ background:rgba(255,255,255,.25); }
.show-hint{ position:absolute; bottom:66px; left:50%; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.6); background:rgba(11,16,32,.5); padding:5px 14px; border-radius:100px; pointer-events:none; animation:fadeHint 5s forwards; }
@keyframes fadeHint{ 0%,70%{opacity:1;} 100%{opacity:0;} }
@media(max-width:640px){ .s-kpi-grid{ grid-template-columns:1fr; } .s-split{ grid-template-columns:1fr; } .s-title{ max-width:100%; font-size:6vmin; } .s-kpi-stats{ flex-wrap:wrap; } }

/* Gallery ảnh thực địa (từ phương án) */
.s-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:2vmin; align-content:start; height:100%; }
.s-gitem{ margin:0; border-radius:1.6vmin; overflow:hidden; background:#fff; box-shadow:0 1vmin 3vmin rgba(0,0,0,.15); display:flex; flex-direction:column; }
.s-gitem img{ width:100%; height:26vmin; object-fit:cover; display:block; }
.s-gitem figcaption{ font-size:1.7vmin; color:#33405c; padding:1vmin 1.4vmin; font-style:italic; text-align:center; }
.s-gallery:has(.s-gitem:nth-child(4)) .s-gitem img{ height:19vmin; }
@media(max-width:640px){ .s-gallery{ grid-template-columns:1fr 1fr; } }

/* Chi tiết hoạt động KPI trong trình chiếu */
.s-acts{ display:grid; grid-template-columns:1fr 1fr; gap:2vmin; align-content:start; }
.s-actgrp{ background:#fff; border-radius:1.6vmin; padding:1.6vmin 2vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.08); }
.s-actgrp-h{ font-size:2.2vmin; font-weight:800; color:#2B3A8C; margin-bottom:1vmin; display:flex; align-items:center; gap:1vmin; }
.s-actn{ font-size:1.6vmin; background:#29ABE2; color:#fff; border-radius:100px; padding:.2vmin 1.4vmin; font-weight:700; }
.s-actrow{ font-size:1.95vmin; color:#33405c; line-height:1.5; padding:.5vmin 0; border-bottom:1px dashed #eef2f8; }
.s-actrow b{ color:#1F2A5A; }
.s-actrow.more{ color:#94a3b8; font-style:italic; border-bottom:none; }
.s-actsale{ font-size:1.5vmin; color:#7c3aed; background:#f3e8ff; border-radius:100px; padding:.1vmin 1vmin; }
@media(max-width:640px){ .s-acts{ grid-template-columns:1fr; } }

.s-actsrc{ font-size:1.4vmin; font-weight:700; padding:.1vmin 1vmin; border-radius:100px; }
.s-actsrc.sale{ background:#dbeafe; color:#1d4ed8; }
.s-actsrc.kt{ background:#dcfce7; color:#166534; }

/* ====== TRỢ LÝ NỔI (con người máy) ====== */
.mascot-panel{ position:fixed; right:16px; bottom:118px; width:min(370px,92vw); max-height:72vh; overflow-y:auto; background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 16px 50px rgba(0,0,0,.28); z-index:160; }
.mascot-panel.hidden{ display:none; }
.mp-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#2B3A8C; color:#fff; font-weight:700; border-radius:16px 16px 0 0; position:sticky; top:0; }
.mp-x{ background:rgba(255,255,255,.15); border:none; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:14px; }
.mp-x:hover{ background:rgba(255,255,255,.3); }
.mp-body{ padding:12px 16px 16px; }
.mp-sec-t{ font-size:12.5px; font-weight:800; color:#2B3A8C; margin:14px 0 7px; }
.mp-sec-t:first-child{ margin-top:0; }
.mp-warns{ display:flex; flex-direction:column; gap:6px; }
.mp-item{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#334155; background:#f8fafc; border:1px solid #eef2f8; border-radius:9px; padding:8px 10px; cursor:pointer; }
.mp-item:hover{ filter:brightness(.98); }
.mp-item.late{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.mp-item.soon{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.mp-item.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.mp-empty{ font-size:13px; color:#16a34a; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; padding:10px; text-align:center; }
.mp-acts{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-act{ flex:1 0 30%; background:#eef4ff; color:#1d4ed8; border:1px solid #dbe7f8; border-radius:9px; padding:9px 6px; font-size:12.5px; font-weight:700; cursor:pointer; }
.mp-act:hover{ background:#dbe7fb; }
.mp-ask{ display:flex; gap:6px; }
.mp-ask input{ flex:1; border:1px solid #cbd5e1; border-radius:9px; padding:9px 10px; font-size:13px; box-sizing:border-box; }
.mp-ask input:focus{ outline:none; border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.18); }
.mp-ask button{ background:#7c3aed; color:#fff; border:none; border-radius:9px; padding:9px 16px; font-weight:700; cursor:pointer; }
.mp-ask button:hover{ background:#6d28d9; }
.mp-ans{ margin-top:8px; }
.mp-a{ font-size:13px; color:#1f2a5a; background:#f5f3ff; border:1px solid #e9d5ff; border-radius:9px; padding:10px 12px; line-height:1.55; }
.mp-a.muted{ color:#64748b; background:#f8fafc; border-color:#eef2f8; }
.mp-a.warn{ color:#9a3412; background:#fff7ed; border-color:#fed7aa; }
@media(max-width:640px){ .mascot-panel{ right:8px; left:8px; width:auto; bottom:100px; } }

/* Anh tai lieu (PDF) hien tron ven + lightbox phong to */
.s-img{ position:relative; cursor:zoom-in; }
.s-img.doc{ background:#eef2f7; }
.s-img.doc img{ object-fit:contain; }
.s-img-cap{ position:absolute; left:0; right:0; bottom:0; background:rgba(15,23,42,.62); color:#fff; font-size:1.6vmin; padding:.6vmin 1.2vmin; text-align:center; }
.s-gitem img{ cursor:zoom-in; }
#show-lightbox{ position:absolute; inset:0; background:rgba(4,7,18,.93); display:none; align-items:center; justify-content:center; z-index:60; cursor:zoom-out; }
#show-lightbox.on{ display:flex; }
#show-lightbox img{ max-width:95%; max-height:95%; object-fit:contain; border-radius:1vmin; box-shadow:0 2vmin 8vmin rgba(0,0,0,.6); background:#fff; }

/* ====== HIỆU ỨNG SINH ĐỘNG (Canva-style) ====== */
/* Mỗi slide một kiểu vào */
.show-slide>.t0{ animation:tFade .55s ease both; }
.show-slide>.t1{ animation:tSlide .55s cubic-bezier(.2,.7,.3,1) both; }
.show-slide>.t2{ animation:tZoom .55s cubic-bezier(.2,.7,.3,1) both; }
.show-slide>.t3{ animation:tUp .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes tFade{ from{opacity:0;} to{opacity:1;} }
@keyframes tSlide{ from{opacity:0; transform:translateX(6vmin);} to{opacity:1; transform:none;} }
@keyframes tZoom{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:none;} }
@keyframes tUp{ from{opacity:0; transform:translateY(5vmin);} to{opacity:1; transform:none;} }
/* Vòng tròn % tự vẽ */
.s-ring{ width:12vmin; height:12vmin; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; background:conic-gradient(#29ABE2 0deg,#e3ecf7 0deg); }
.s-ring b{ width:8.6vmin; height:8.6vmin; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:2.9vmin; font-weight:900; color:#2B3A8C; }
.s-ring .u2{ font-size:1.7vmin; font-weight:800; margin-left:.2vmin; }
/* Mũi tên so tháng trước */
.s-delta{ font-size:1.7vmin; font-weight:800; margin-top:.6vmin; color:#64748b; }
.s-delta.up{ color:#16a34a; }
.s-delta.down{ color:#dc2626; }
/* Thanh tiến độ chạy trong bảng KPI */
.s-tbl .s-bar{ height:.8vmin; background:#e8eef7; border-radius:100px; overflow:hidden; margin-top:.5vmin; }
.s-tbl .s-bar i{ display:block; height:100%; width:var(--w,0%); background:linear-gradient(90deg,#2B3A8C,#29ABE2); border-radius:100px; animation:barW 1.1s cubic-bezier(.2,.7,.3,1) both; animation-delay:.4s; }
@keyframes barW{ from{ width:0; } }
/* Ảnh chuyển động nhẹ kiểu phim tài liệu (không áp cho trang PDF) */
.s-img:not(.doc) img, .s-gitem img{ animation:kenb 16s ease-in-out infinite alternate; }
@keyframes kenb{ from{ transform:scale(1); } to{ transform:scale(1.1) translate(1.5%,-1.5%); } }
/* Khó khăn & Cần hỗ trợ trên slide dự án */
.s-field.warn b{ color:#b45309; }
.s-field.ask{ background:#fffbeb; border-left:.6vmin solid #f59e0b; border-radius:1.2vmin; padding:1.2vmin 1.6vmin; }
.s-field.ask b{ color:#92400e; }
/* Slide Kiến nghị trình sếp */
.s-kn{ display:flex; flex-direction:column; gap:1.8vmin; }
.s-kn-item{ display:flex; align-items:flex-start; gap:2vmin; background:#fff; border-radius:1.8vmin; padding:2.2vmin 2.6vmin; box-shadow:0 1vmin 3vmin rgba(43,58,140,.1); font-size:2.6vmin; font-weight:600; color:#1F2A5A; border-left:.8vmin solid #f59e0b; }
.s-kn-num{ flex:none; width:5.4vmin; height:5.4vmin; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.6vmin; font-weight:900; }
.s-kn-foot{ margin-top:2.6vmin; font-size:2vmin; font-style:italic; color:#5B6472; text-align:center; }