/* ===== Rotta Notion Web — dark theme kiểu Notion ===== */
/* ---------- KÝ TỰ TRONG KHOANH: ① ② ③ ⑴ ❶ ㊀ ----------
   Font chính không có mấy ký tự này nên trình duyệt mượn font khác cho từng chữ,
   ra nhỏ và mảnh hơn chữ xung quanh. Khai riêng một font CHỈ cho dải ký tự đó
   (unicode-range) rồi phóng cho khớp cỡ — chữ khác không bị ảnh hưởng gì. */
@font-face{
  font-family:"So Khoanh";
  src:local("Segoe UI Symbol"),local("Segoe UI"),local("Noto Sans Symbols 2"),
      local("Arial Unicode MS"),local("Apple Symbols"),local("DejaVu Sans");
  unicode-range:U+2460-24FF,U+2776-2793,U+3248-324F,U+3251-32BF;
  size-adjust:122%;
  font-display:swap;
}

:root{
  /* màu biểu đồ (nền tối) — xem HDSD mục 💰 để biết vì sao 5 mã này */
  --ch1:#3A82E8; --ch2:#B8891F; --ch3:#2E9B72; --ch4:#8A61BE; --ch5:#CF4E45;
  /* DNA người dùng Marketing — nền navy sâu của website, cyan var(--accent) của logo */
  --bg:#070A12; --bg2:#0C1322; --bg3:#121B2E; --panel:#152238;
  --line:rgba(120,160,220,.14); --line2:rgba(120,160,220,.30);
  --tx:#E9EEF6; --tx2:#93A0B6; --tx3:#5C6884;
  --accent:#19B7FF; --accent-rgb:25,183,255; --azure:#2E86FF; --azure-rgb:46,134,255; --navy:#041B52; --deep:#0B3D6E;
  --glow:rgba(var(--accent-rgb),.35);
  --red:#FF7A6E; --red-bg:#3A1F2A;
  --yellow:#F2C14E; --yellow-bg:#3A3220;
  --green:#5ED39A; --green-bg:#13332A;
  --blue:#4D9BFF; --blue-bg:#14284A;
  --gray-bg:#1C2740;
  --purple:#B48EE0; --purple-rgb:180,142,224; --purple-bg:#2B2446;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(120,160,220,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-head:"Bricolage Grotesque","Be Vietnam Pro","Segoe UI",sans-serif;
  --font-body:"So Khoanh","Be Vietnam Pro","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--font-body);
  font-size:14px; line-height:1.5; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
#app{display:flex;height:100vh}

/* ---------- sidebar ---------- */
#sidebar{
  width:260px;min-width:260px;background:var(--bg2);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.ws-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
.ws-logo{
  width:34px;height:34px;border-radius:8px;background:var(--navy);
  flex:none;overflow:hidden;
}
.ws-logo img{width:100%;height:100%;object-fit:cover;display:block}
.ws-name{font-weight:600;font-size:14px;line-height:1.2}
.ws-name span{display:block;font-weight:400;font-size:11px;color:var(--tx3)}
.side-search{padding:4px 12px 10px}
.side-search input{
  width:100%;background:var(--bg3);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;font-size:13px;outline:none;
}
.side-search input:focus{border-color:var(--accent)}
#nav{flex:1;overflow-y:auto;padding:4px 8px 12px}
.nav-label{
  font-size:11px;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.4px;
  padding:14px 8px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:7px;
  padding:4px 8px;border-radius:6px;color:var(--tx2);
  cursor:pointer;user-select:none;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-item:hover{background:var(--bg3);color:var(--tx)}
.nav-item.active{background:var(--panel);color:var(--tx)}
.nav-item .ico{flex:none;width:18px;text-align:center}
.nav-item .cnt{margin-left:auto;font-size:11px;color:var(--tx3)}
.nav-item .tw{flex:none;width:14px;text-align:center;color:var(--tx3);font-size:10px;cursor:pointer}
.nav-children{margin-left:14px;border-left:1px solid var(--line);padding-left:4px}

.side-foot{padding:10px 12px;border-top:1px solid var(--line)}
.ghost{
  width:100%;text-align:left;padding:6px 10px;border-radius:6px;
  color:var(--tx2);font-size:13px;
}
.ghost:hover{background:var(--bg3);color:var(--tx)}

/* ---------- main ---------- */
#main{flex:1;overflow-y:auto;position:relative}
#main:has(.board){overflow:hidden;display:flex;flex-direction:column}   /* kanban: khung ngoài chia dọc, board ăn hết chỗ còn lại */
/* bảng tính: lưới cuộn BÊN TRONG, hàng trang (tab) luôn đứng yên dưới màn hình */
#main:has(.sh-wrap){overflow:hidden;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;background:var(--bg);
  display:flex;align-items:center;gap:10px;
  padding:12px 28px;border-bottom:1px solid var(--line);
  min-height:50px;
}
/* Thanh công cụ luôn là MỘT DÒNG vuốt ngang. Thu hẹp cửa sổ thì vuốt để tới nút cuối,
   chứ không xuống dòng thành khối cao ngợp mắt (và cũng không có nút nào bị cắt mất). */
.topbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.topbar::-webkit-scrollbar{height:5px}
.topbar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.topbar > *{flex:none}
.topbar h1{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.topbar .crumb{color:var(--tx3);font-size:13px}
.topbar .spacer{flex:1}
.tb-btn{
  padding:5px 12px;border-radius:6px;font-size:13px;
  border:1px solid var(--line2);color:var(--tx2);
}
.tb-btn:hover{background:var(--bg3);color:var(--tx)}
.tb-btn.primary{background:var(--accent);border-color:var(--accent);color:#04121f;font-weight:600}
.tb-btn.primary:hover{filter:brightness(1.1)}
.view-toggle{display:flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.view-toggle button{padding:4px 12px;font-size:12.5px;color:var(--tx2)}
.view-toggle button.on{background:var(--panel);color:var(--tx)}

/* ---------- home ---------- */
.home-wrap{max-width:900px;margin:0 auto;padding:40px 28px}
.home-wrap h1{font-size:28px;margin-bottom:6px}
.home-sub{color:var(--tx2);margin-bottom:28px}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tile{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:16px;cursor:pointer;transition:border-color .15s;
}
.tile:hover{border-color:var(--accent)}
.tile .t-ico{font-size:22px}
.tile .t-title{font-weight:600;margin-top:8px}
.tile .t-sub{font-size:12px;color:var(--tx3);margin-top:2px}

/* ---------- board (kanban) ---------- */
.board{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 28px 10px;
  flex:1;min-height:0;                /* cao bằng đúng chỗ còn lại — có Quân sư hay không đều đúng */
  overflow-x:auto;overflow-y:hidden;
}
.board::-webkit-scrollbar{height:13px}
.board::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--bg);border-radius:8px}
.board::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
.col{
  min-width:290px;width:290px;flex:none;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:10px;
  max-height:100%;                    /* cột dài tự cuộn dọc bên trong như Trello */
  overflow-y:auto;
  padding-bottom:14px;                /* chừa đáy -> thẻ cuối cùng không bị cắt ngang */
  scrollbar-gutter:stable;
}
.col.drag-over{border-color:var(--accent);background:var(--bg3)}
.col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.col-head .dot{width:9px;height:9px;border-radius:50%}
.col-head .name{font-weight:600;font-size:13px}
.col-head .n{color:var(--tx3);font-size:12px}
.col-add{
  width:100%;text-align:left;color:var(--tx3);font-size:13px;
  padding:6px 8px;border-radius:6px;margin-top:6px;
}
.col-add:hover{background:var(--bg3);color:var(--tx)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.card:hover{border-color:var(--line2)}
.card.dragging{opacity:.4}
.card .c-title{font-size:13.5px;font-weight:500;display:flex;gap:6px;align-items:flex-start}
.card .c-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.card .c-date{font-size:11px;color:var(--tx3);margin-top:6px}
.card .c-actions{display:flex;gap:6px;margin-top:9px}
.badge{
  font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.badge .bdot{width:7px;height:7px;border-radius:50%}
/* chữ badge lấy từ bộ màu ngữ nghĩa — mỗi chủ đề tự override cho đủ tương phản */
.b-red{background:var(--red-bg);color:var(--red)}
.b-yellow{background:var(--yellow-bg);color:var(--yellow)}
.b-green{background:var(--green-bg);color:var(--green)}
.b-blue{background:var(--blue-bg);color:var(--blue)}
.b-gray{background:var(--gray-bg);color:var(--tx2)}
.b-purple{background:var(--purple-bg);color:var(--purple)}
.act{
  flex:1;font-size:12px;font-weight:600;padding:5px 0;border-radius:6px;
  border:1px solid var(--line2);color:var(--tx2);text-align:center;
}
.act:hover{color:var(--tx);border-color:var(--tx3)}
.act.start{border-color:var(--blue);color:var(--blue)}
.act.start:hover{background:var(--blue-bg)}
.act.end{border-color:var(--green);color:var(--green)}
.act.end:hover{background:var(--green-bg)}

/* ---------- table view (kiểu Notion) ---------- */
.tbl-wrap{
  height:calc(100vh - 52px);overflow:auto;
  padding:0 28px 6px 28px;
}
.tbl-wrap::-webkit-scrollbar{height:13px;width:11px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--bg);border-radius:8px}
#main:has(.tbl-wrap){overflow:hidden}
table.db{border-collapse:separate;border-spacing:0;min-width:100%}
table.db th{
  position:sticky;top:0;z-index:2;background:var(--bg);
  color:var(--tx3);font-weight:500;font-size:12px;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap;
}
table.db th .th-ico{margin-right:6px;opacity:.7;font-size:11px}
table.db td{
  padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px;
  max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tx2);
}
table.db td.c-title{font-weight:600;color:var(--tx);min-width:230px}
table.db td .c-ico{margin-right:7px}
table.db tr{cursor:pointer}
table.db tr:hover td{background:var(--bg2)}
table.db td .badge{margin-right:4px}
.cell-empty{color:var(--tx3);opacity:.55}
.cell-check{color:var(--green)}
.tbl-more{
  display:block;margin:10px 0;padding:7px 16px;border-radius:6px;
  border:1px solid var(--line2);color:var(--tx2);font-size:13px;
}
.tbl-more:hover{background:var(--bg3);color:var(--tx)}
.tbl-count{color:var(--tx3);font-size:12px;padding:6px 0 14px}

/* ---------- page view ---------- */
.page-wrap{max-width:820px;margin:0 auto;padding:34px 40px 120px}
.page-icon{font-size:56px;line-height:1;cursor:pointer;display:inline-block;border-radius:12px;transition:background .15s}
.page-icon:hover{background:rgba(127,127,127,.12)}
.page-title{
  font-size:34px;font-weight:800;margin:10px 0 20px;outline:none;
  border:none;background:none;width:100%;color:var(--tx);
}
.md{font-size:15.5px;line-height:1.7;color:var(--tx)}
.md h1{font-size:26px;margin:26px 0 8px;font-weight:700}
.md h2{font-size:21px;margin:22px 0 6px;font-weight:700}
.md h3{font-size:17px;margin:18px 0 4px;font-weight:700}
.md p{margin:6px 0}
.md ul,.md ol{margin:6px 0 6px 24px}
.md li{margin:3px 0}
.md li.todo{list-style:none;margin-left:-20px}
.md blockquote{
  border-left:3px solid var(--accent);padding:4px 14px;margin:10px 0;
  background:var(--bg2);border-radius:0 6px 6px 0;color:var(--tx2);
}
.md code{background:var(--bg3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px;font-family:Consolas,Menlo,monospace}
.md pre{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;margin:10px 0}
.md pre code{background:none;border:none;padding:0}
.md img{max-width:100%;border-radius:8px;margin:8px 0}
.md hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.md table{border-collapse:collapse;margin:10px 0;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:6px 10px;font-size:13.5px}
.md th{background:var(--bg2)}
.md-edit{
  width:100%;min-height:60vh;background:var(--bg2);color:var(--tx);
  border:1px solid var(--line);border-radius:8px;padding:16px;
  font-family:Consolas,Menlo,monospace;font-size:13.5px;line-height:1.6;
  outline:none;resize:vertical;
}
.md-edit:focus{border-color:var(--accent)}
.empty-note{color:var(--tx3);font-style:italic;padding:30px 0}

/* ---------- modal (chi tiết thẻ) ---------- */
#modal-root .overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;
  display:flex;justify-content:flex-end;
}
.detail{
  width:min(840px,95vw);height:100%;background:var(--bg2);
  border-left:1px solid var(--line);box-shadow:var(--shadow);
  overflow-y:auto;padding:14px 30px 60px;
  animation:slidein .18s ease;
}
.d-head{
  display:flex;align-items:center;gap:4px;
  position:sticky;top:-14px;z-index:6;background:var(--bg2);
  margin:0 -8px 8px;padding:6px 8px;border-bottom:1px solid var(--line);
}
.d-head .d-x{margin-left:auto}
/* trang nhúng trong panel chi tiết: giấu topbar/icon/tiêu đề trùng, nội dung full khổ */
.embed-page .topbar{display:none}
.embed-page .page-wrap{max-width:none;padding:4px 0 40px}
.embed-page .page-icon{display:none}
.embed-page .page-title{display:none}
.embed-page .blkrow .blk-handle{width:20px}
.embed-page .blk-hint{margin:12px 0 0;font-size:12px}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.detail .d-close{position:sticky;top:0;float:right;font-size:18px;color:var(--tx3);padding:4px 8px}
.detail .d-close:hover{color:var(--tx)}
.detail .d-title{
  font-size:24px;font-weight:800;width:100%;background:none;border:none;
  outline:none;color:var(--tx);margin:6px 0 18px;
}
.prop-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;min-height:32px}
.prop-row .p-name{width:170px;flex:none;color:var(--tx3);font-size:13px;padding-top:4px;
  display:flex;gap:6px;align-items:center}
.prop-row .p-val{flex:1}
.p-val input[type=text],.p-val input[type=datetime-local],.p-val input[type=date],.p-val select{
  width:100%;background:var(--bg3);border:1px solid var(--line);
  border-radius:6px;padding:5px 9px;font-size:13px;outline:none;
}
.p-val input:focus,.p-val select:focus{border-color:var(--accent)}
.d-actions{display:flex;gap:10px;margin:16px 0 8px}
.d-actions .act{padding:8px 0;font-size:13px}
.d-section{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.d-section h4{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.d-note{
  width:100%;min-height:110px;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-size:13.5px;outline:none;resize:vertical;color:var(--tx);
}
.d-note:focus{border-color:var(--accent)}
.d-del{color:var(--red);font-size:12.5px;margin-top:26px}
.d-del:hover{text-decoration:underline}

/* ---------- dashboard ---------- */
.dash-wrap{max-width:1060px;margin:0 auto;padding:24px 28px 80px}
.dash-controls{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.dash-controls select{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:6px 10px;font-size:13px;outline:none;color:var(--tx);
}
.dash-controls .lbl{color:var(--tx3);font-size:13px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat .s-num{font-size:26px;font-weight:800;line-height:1.1}
.stat .s-lbl{font-size:12px;color:var(--tx3);margin-top:4px}
.stat.s-accent .s-num{color:var(--accent)}
.stat.s-green .s-num{color:var(--green)}
.stat.s-blue .s-num{color:var(--blue)}
.stat.s-gray .s-num{color:var(--tx2)}
.dash-h{font-size:13px;font-weight:700;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.5px;margin:26px 0 10px}
/* khu ghim đầu trang tổng quan: bộ lọc + dàn số luôn hiện khi cuộn */
.dash-sticky{
  position:sticky;top:50px;z-index:8;background:var(--bg);
  margin:-24px -10px 14px;padding:16px 10px 12px;
  border-bottom:1px solid var(--line);
}
.dash-sticky .dash-controls{margin-bottom:12px}
.dash-sticky .stat-row{margin-bottom:0}
.dash-sticky .stat{padding:9px 14px}
.dash-sticky .stat .s-num{font-size:21px}
.chart-head{display:flex;align-items:center;gap:10px}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
@media (max-width:980px){.proj-grid{grid-template-columns:1fr}}
.proj-grid .proj-card{margin-bottom:0}
.proj-card.open{grid-column:1/-1}
.proj-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .15s;
}
.proj-card:hover{border-color:var(--line2)}
.proj-card.open{border-color:var(--accent)}
.proj-top{display:flex;align-items:center;gap:10px}
.proj-top .p-ico{font-size:18px}
.proj-top .p-name{font-weight:700;font-size:14.5px}
.proj-top .p-nums{margin-left:auto;font-size:12.5px;color:var(--tx3)}
.pbar{height:7px;background:var(--bg3);border-radius:4px;margin-top:10px;overflow:hidden}
.pbar>div{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.pbar.full>div{background:var(--green)}
.proj-tasks{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.pt-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;font-size:13px;cursor:pointer}
.pt-row:hover{background:var(--bg3)}
.pt-row .pt-status{flex:none}
.pt-row .pt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row .pt-date{margin-left:auto;flex:none;color:var(--tx3);font-size:11.5px}
.chart{display:flex;gap:10px;align-items:flex-end;height:130px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:16px 18px 10px}
.chart .cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;cursor:pointer}
.chart .cbar .bar{width:70%;max-width:46px;background:var(--blue-bg);border:1px solid var(--blue);border-radius:4px 4px 0 0;min-height:2px}
.chart .cbar.cur .bar{background:var(--accent);border-color:var(--accent)}
.chart .cbar .cnum{font-size:11px;color:var(--tx2)}
.chart .cbar .clbl{font-size:11px;color:var(--tx3)}
.arch-line{color:var(--tx3);font-size:13px;margin-top:18px;cursor:pointer}
.arch-line:hover{color:var(--tx2)}

/* ---------- block editor (sửa tại chỗ kiểu Notion) ---------- */
.blocks{outline:none}
.blk{position:relative;padding:2px 0;border-radius:4px}
.blk[contenteditable]{outline:none;min-height:1.4em;white-space:pre-wrap;word-break:break-word}
.blk[contenteditable]:hover{background:rgba(255,255,255,.02)}
.blk[contenteditable]:focus{background:rgba(255,255,255,.035)}
.blk:empty:not(:focus)::before{content:"";display:inline-block}
.blk.t-h1{font-size:26px;font-weight:700;margin:22px 0 4px}
.blk.t-h2{font-size:21px;font-weight:700;margin:18px 0 3px}
.blk.t-h3{font-size:17px;font-weight:700;margin:14px 0 2px}
.blk.t-bullet::before,.blk.t-num::before{color:var(--tx2)}
.blk.t-bullet{padding-left:22px}
.blk.t-bullet::before{content:"•";position:absolute;left:7px}
.blk.t-num{padding-left:26px}
.blk.t-num::before{content:attr(data-n) ".";position:absolute;left:4px}
.blk.t-todo{padding-left:2px}
.blk.t-todo .tick{position:absolute;left:2px;top:4px;cursor:pointer;font-size:14px}
.blk.t-todo.done{color:var(--tx3);text-decoration:line-through}
.blk.t-quote{border-left:3px solid var(--accent);padding-left:12px;color:var(--tx2)}
.blk.t-callout{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.blk.t-code{font-family:Consolas,Menlo,monospace;font-size:13px;background:var(--bg2);
  border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.blk.t-hr{border:none;border-top:1px solid var(--line);margin:14px 0;padding:0;height:0}
.blk.ro{color:var(--tx2)}
.blk-hint{color:var(--tx3);font-size:13px;margin:20px 0;font-style:italic}
#slash-menu{
  position:absolute;z-index:60;background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;box-shadow:var(--shadow);min-width:230px;max-height:320px;
  overflow-y:auto;padding:6px;
}
#slash-menu .sm-title{font-size:11px;color:var(--tx3);padding:4px 10px;text-transform:uppercase}
#slash-menu .sm-item{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13.5px}
#slash-menu .sm-item .si{width:22px;text-align:center;color:var(--tx2)}
#slash-menu .sm-item:hover,#slash-menu .sm-item.sel{background:var(--bg3)}
.save-dot{font-size:12px;color:var(--tx3)}

/* ---------- todo list (dashboard ngày/tuần) ---------- */
.todo-box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.todo-line{border-bottom:1px solid var(--line)}
.todo-line:last-child{border-bottom:none}
.todo-line .act{flex:none;padding:3px 10px;font-size:11.5px;margin-left:6px}
.todo-line .pt-date{display:flex;align-items:center}
.todo-line .badge{flex:none}

/* ---------- trang dự án ---------- */
.hier-nvc{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin-bottom:12px}
.hier-cvc{margin:10px 0 6px 12px;border-left:2px solid var(--line2);padding-left:14px}
.hier-title{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.hier-title.big{font-size:15px;font-weight:700}
.hier-n{color:var(--tx3);font-size:12px;font-weight:400}

/* ---------- block rows: tay cầm + kéo thả ---------- */
.blkrow{position:relative;display:flex;align-items:flex-start}
.blkrow>.blk{flex:1;min-width:0}
.blk-handle{
  flex:none;width:22px;text-align:center;color:var(--tx3);
  cursor:grab;opacity:0;font-size:13px;line-height:1.7;user-select:none;
  border-radius:4px;margin-top:1px;
}
.blkrow:hover .blk-handle{opacity:.75}
.blk-handle:hover{background:var(--bg3);color:var(--tx)}
.blkrow.dragging{opacity:.35}
.blkrow.drop-target>.blk{box-shadow:0 -2px 0 var(--accent)}
.blk.t-link{
  display:block;padding:5px 10px;border-radius:6px;cursor:pointer;
  border:1px solid transparent;
}
.blk.t-link:hover{background:var(--bg3);border-color:var(--line)}
.blk.t-link a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--line2)}
.blk.t-link a:hover{color:var(--accent)}

/* ---------- peek: mở trang / dự án dạng nửa màn hình kiểu Notion ---------- */
.peek-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.peek{
  position:fixed;top:0;right:0;height:100%;z-index:41;
  width:min(60vw,940px);min-width:520px;
  background:var(--bg);border-left:1px solid var(--line2);
  box-shadow:-8px 0 30px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  animation:peekin .16s ease;
}
@keyframes peekin{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.peek-bar{
  display:flex;align-items:center;gap:4px;
  padding:8px 12px;border-bottom:1px solid var(--line);flex:none;
}
.pk-btn{
  padding:3px 10px;border-radius:6px;font-size:15px;color:var(--tx2);
}
.pk-btn:hover{background:var(--bg3);color:var(--tx)}
.pk-hint{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.peek-body{flex:1;overflow-y:auto;position:relative}
.peek-body .topbar{padding:10px 20px}
.peek-body .page-wrap{padding:20px 30px 80px}
.peek-body .dash-wrap{padding:16px 22px 60px}
@media (max-width:900px){.peek{width:92vw;min-width:0}}

/* ---------- khối tĩnh (xem nhanh nội dung trang trong panel/dự án) ---------- */
.static-page .sb{margin:3px 0;padding-left:22px;position:relative}
.static-page .sb-b::before{content:"•";position:absolute;left:7px;color:var(--tx2)}
.static-page .sb-n::before{content:attr(data-n) ".";position:absolute;left:2px;color:var(--tx2)}
.dnote-view{
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:10px 14px;max-height:340px;overflow-y:auto;font-size:13.5px;
}

/* ---------- bảng màu khối + menu ⋮ panel ---------- */
.sm-colors{display:flex;gap:6px;padding:2px 10px 8px;flex-wrap:wrap}
.sw{
  width:21px;height:21px;border-radius:50%;border:1px solid var(--line2);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--tx3);
}
.sw:hover{border-color:var(--tx);transform:scale(1.12)}
.sw.cur{border:2px solid var(--accent)}
.d-menu{
  position:absolute;top:44px;right:14px;z-index:20;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  box-shadow:var(--shadow);min-width:210px;padding:6px;
}
.d-menu .sm-item{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13.5px}
.d-menu .sm-item:hover{background:var(--bg3)}
.d-menu .sm-item.danger{color:var(--red)}
.d-menu .sm-item .si{width:22px;text-align:center}
.blocks{padding-bottom:22vh}   /* vùng trống dưới bài cũng bấm được như Notion */

/* ---------- lên lịch nhanh trong panel chi tiết ---------- */
.sched-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 14px}
.sched-lbl{font-size:12.5px;color:var(--tx3)}
.sched-row .tb-btn{font-size:12px;padding:4px 10px}
.sched-row input[type=date]{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:4px 8px;font-size:12px;outline:none;color:var(--tx);
}

/* ---------- note mỗi ngày ---------- */
.notes-wrap{max-width:880px;margin:0 auto;padding:22px 28px 80px}
.note-comp{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px}
.note-in{
  width:100%;min-height:120px;background:var(--bg3);color:var(--tx);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font:inherit;font-size:14.5px;line-height:1.6;outline:none;
  resize:none;overflow:hidden;   /* tự nở cao theo nội dung, không thanh cuộn trong ô */
}
.note-in:focus{border-color:var(--accent)}
.note-main{
  min-height:58vh;               /* vùng viết lớn mở sẵn như trang soạn thảo, gõ dài thì nở tiếp vô hạn */
  background:transparent;border:none;padding:6px 2px;font-size:15px;
}
.note-main:focus{border:none}
.note-compbar{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.note-item{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;
}
.note-item.nd{opacity:.55}
.note-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.note-time{font-size:11.5px;color:var(--tx3)}
.note-acts{margin-left:auto;display:flex;gap:6px}
.note-acts .tb-btn{font-size:11.5px;padding:2px 9px}
.note-body{cursor:text;font-size:14px}
.note-body p{margin:3px 0}

/* ---------- video nhúng ---------- */
.video-wrap{position:relative;width:100%;max-width:720px;aspect-ratio:16/9;margin:8px 0}
.video-wrap iframe{width:100%;height:100%;border:none;border-radius:10px;background:#000}
/* Reel Facebook quay dọc 9:16 — dùng khung 16:9 thì hai bên đen kín (19/09) */
.video-wrap.doc{aspect-ratio:9/16;max-width:360px}
.video-wrap.hong{display:none}   /* tra không ra link gốc: giấu khung trắng, chỉ để lại dòng chữ + link ngoài */
/* Video Facebook để riêng tư sẽ ra khung trắng; câu này cho lối thoát */
.video-ngoai{font-size:12px;color:var(--muted,#8b95a5);margin:-2px 0 10px}

/* toast */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  padding:9px 18px;font-size:13px;box-shadow:var(--shadow);z-index:99;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
#toast.show{opacity:1}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- lịch tháng (calendar view) ---------- */
.cal-wrap{padding:14px 28px 30px;height:calc(100vh - 52px);overflow-y:auto}
#main:has(.cal-wrap){overflow:hidden}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cal-title{font-size:16px;font-weight:700;min-width:130px;text-align:center}
.cal-legend{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.cal-dow{font-size:11px;color:var(--tx3);text-align:center;padding:2px 0;font-weight:600}
.cal-cell{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  min-height:104px;padding:5px 6px;overflow:hidden;
}
.cal-cell.empty{background:transparent;border-color:transparent}
.cal-cell.today{border-color:var(--accent)}
.cal-num{
  font-size:12px;color:var(--tx3);font-weight:600;cursor:pointer;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;margin-bottom:3px;
}
.cal-num:hover{background:var(--bg3);color:var(--tx)}
.cal-cell.today .cal-num{background:var(--accent);color:#04121f}
.cal-task{
  font-size:11px;line-height:1.35;padding:2px 6px;border-radius:5px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background:var(--gray-bg);color:var(--tx2);
}
.cal-task:hover{filter:brightness(1.25)}
.cal-task.prog{background:var(--blue-bg);color:#a9c8ea}
.cal-task.done{background:var(--green-bg);color:#8fc79a;text-decoration:line-through;opacity:.75}
.cal-more{font-size:10.5px;color:var(--tx3);cursor:pointer;padding:1px 6px}
.cal-more:hover{color:var(--accent)}
@media (max-width:768px){
  .cal-wrap{padding:10px 10px 20px;height:calc(100dvh - 52px)}
  .cal-cell{min-height:70px;padding:3px 4px}
  .cal-task{font-size:9.5px;padding:1px 4px}
  .cal-legend{display:none}
}

/* ---------- chọn nhiều dòng + thanh công cụ nổi ---------- */
.blk.blk-selected{
  background:rgba(var(--accent-rgb),.14) !important;
  border-radius:6px;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35);
}
#sel-bar{
  position:fixed;z-index:80;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  max-width:360px;background:var(--panel);border:1px solid var(--line2);
  border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);padding:6px 8px 8px;
  animation:rise .15s ease-out;
}
#sel-bar.keo{transition:none;opacity:.94;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.sb-top{display:flex;align-items:center;gap:6px;width:100%;padding:0 2px 6px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
.sb-nam{cursor:grab;color:var(--tx3);font-size:13px;letter-spacing:-2px;user-select:none;
  padding:0 3px}
.sb-nam:active{cursor:grabbing}
.sb-dem{flex:1;font-size:11px;color:var(--tx3);font-weight:600}
.sb-mo{background:none;border:none;color:var(--tx3);font-size:11px;cursor:pointer;
  padding:2px 7px;border-radius:6px;font-family:inherit;white-space:nowrap}
.sb-mo:hover{background:var(--bg3);color:var(--accent)}
.sb-them{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;
  padding-top:5px;margin-top:3px;border-top:1px solid var(--line)}
#sel-bar.gon .sb-them{display:none}
.sb-btn{
  min-width:34px;height:32px;border-radius:7px;font-size:13.5px;font-weight:700;
  color:var(--tx2);border:1px solid transparent;padding:0 9px;
}
/* nút xóa: to, rõ, màu cảnh báo để không bấm nhầm mà cũng không phải mò */
.sb-btn.sb-del{
  color:var(--red);border-color:rgba(255,122,110,.45);background:rgba(255,122,110,.10);
  padding:0 12px;font-size:13px;margin-left:4px;
}
.sb-btn.sb-del:hover{background:#e05a4d;color:#fff;border-color:#e05a4d}
.sb-btn:hover{background:var(--bg3);color:var(--tx);border-color:var(--line2)}
.sb-dots{display:flex;align-items:center;gap:4px;padding:2px 4px}
.sb-lbl{font-size:10.5px;color:var(--tx3)}
.sw.sm{width:16px;height:16px;font-size:9px}

/* ---------- hiệu ứng chuyển động (tôn trọng cài đặt giảm chuyển động) ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:.06;transform:translateY(14px) scale(.985);
      transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.3,1.1)}
  .rv.rv-in{opacity:1;transform:none}
  .card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,opacity .38s ease}
  .card:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,0,0,.42)}
  .tile:hover{transform:translateY(-2px)}
  .tile{transition:transform .16s ease,border-color .16s ease,opacity .38s ease}
  .proj-card{transition:transform .16s ease,border-color .16s ease,opacity .38s ease}
  .proj-card:hover{transform:translateY(-1px)}
  .act,.tb-btn,.pk-btn,.sm-item{transition:background .13s ease,color .13s ease,border-color .13s ease}
  .pbar>div{transition:width .5s cubic-bezier(.2,.7,.3,1)}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .detail,.peek,#slash-menu,.d-menu{animation-duration:.18s}
}

/* ================= MOBILE (điện thoại / PWA) ================= */
#nav-toggle{
  display:none;position:fixed;top:9px;left:10px;z-index:70;
  width:38px;height:38px;border-radius:9px;background:var(--bg2);
  border:1px solid var(--line2);color:var(--tx);font-size:17px;
  align-items:center;justify-content:center;
}
#nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55;display:none}
body.nav-open #nav-backdrop{display:block}

/* máy cảm ứng: tay cầm khối luôn hiện mờ (không có hover) */
@media (pointer:coarse){
  .blkrow .blk-handle{opacity:.4}
  .act{padding:8px 0}
}

@media (max-width:768px){
  #nav-toggle{display:flex}
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:60;
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.5);
    width:280px;min-width:280px;
  }
  body.nav-open #sidebar{transform:none}
  #main{width:100vw}
  /* topbar 1 dòng, vuốt ngang được, chừa chỗ nút ☰ */
  .topbar{
    padding:9px 12px 9px 56px;gap:8px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  .topbar::-webkit-scrollbar{display:none}
  .topbar h1{font-size:14.5px;white-space:nowrap}
  .topbar .crumb{white-space:nowrap}
  .tb-btn{white-space:nowrap;flex:none}
  .board{padding:10px 12px 10px}
  .col{min-width:82vw;width:82vw}          /* mỗi cột gần full màn hình, vuốt ngang đổi cột */
  .tbl-wrap{padding:0 12px 6px;height:calc(100dvh - 52px)}
  .dash-wrap{padding:14px 12px 60px}
  .dash-sticky{margin:-14px -6px 12px;padding:10px 6px 8px}
  .dash-sticky .stat-row{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px}
  .dash-sticky .stat-row::-webkit-scrollbar{display:none}
  .dash-sticky .stat{min-width:104px;flex:none}
  .dash-controls{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .dash-controls::-webkit-scrollbar{display:none}
  .dash-controls select,.dash-controls .tb-btn{flex:none}
  .chart{padding:12px 10px 8px;gap:5px}
  .page-wrap{padding:18px 14px 90px}
  .page-title{font-size:26px}
  .detail{width:100vw;padding:10px 14px 60px}
  /* ĐIỆN THOẠI — khu trường thông tin của thẻ việc: xếp 2 cột cho đỡ dài, chữ to dễ bấm */
  .props-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;margin:4px 0 6px}
  .prop-row{flex-direction:column;align-items:stretch;gap:5px;padding:0;min-height:0;min-width:0}
  .prop-row .p-name{width:auto;padding-top:0;font-size:12.5px;line-height:1.25}
  .prop-row .p-name span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prop-row .p-val{width:100%;min-width:0}
  /* ô bấm cao hơn cho vừa đầu ngón tay, chữ 15px để khỏi bị iOS phóng to khi gõ */
  .props-grid .p-val input[type=text],.props-grid .p-val input[type=datetime-local],
  .props-grid .p-val input[type=date],.props-grid .p-val select,
  .props-grid .p-val .sel-dna,.props-grid .p-val .date-btn{
    width:100%;min-height:40px;font-size:15px;padding:8px 11px;border-radius:9px}
  .props-grid .p-val .sel-dna{justify-content:space-between}
  /* trường dài (ghi chú, link, nhiều nhãn) cho chiếm trọn hàng */
  .prop-row.rong{grid-column:1 / -1}
  .peek{width:100vw;min-width:0}
  .notes-wrap{padding:14px 12px 60px}
  .note-main{min-height:42vh}
  .home-wrap{padding:20px 14px}
  .tile-grid{grid-template-columns:1fr 1fr}
  .sched-row .tb-btn{padding:6px 10px}
  .todo-line{flex-wrap:wrap;row-gap:4px}
}

/* ---------- toggle list ---------- */
.blk.t-toggle{padding-left:2px;font-weight:500}
.blk.t-toggle .tgl{position:absolute;left:3px;top:3px;cursor:pointer;color:var(--tx2);font-size:12px;width:16px;text-align:center;border-radius:4px}
.blk.t-toggle .tgl:hover{background:var(--bg3);color:var(--tx)}
.static-page .sb-tg{font-weight:500;padding-left:2px}

/* ---------- bookmark (link -> thẻ xem trước) ---------- */
.t-bookmark{padding:2px 0}
a.bm{
  display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--bg2);text-decoration:none;color:var(--tx);max-width:720px;
  transition:border-color .15s,transform .15s;
}
a.bm:hover{border-color:var(--line2);transform:translateY(-1px);text-decoration:none}
.bm-text{flex:1;min-width:0;padding:10px 14px}
.bm-title{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-desc{font-size:12px;color:var(--tx2);margin-top:3px;max-height:34px;overflow:hidden;line-height:1.4}
.bm-url{font-size:11px;color:var(--tx3);margin-top:6px;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-fav{width:14px;height:14px;border-radius:3px;flex:none}
.bm-img{width:160px;flex:none;object-fit:cover;border-left:1px solid var(--line)}
@media (max-width:768px){.bm-img{width:92px}}

/* ---------- lightbox: xem ảnh toàn màn hình ---------- */
#lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;overflow:auto;
}
#lightbox.on{display:flex}
#lightbox img{max-width:96vw;max-height:94vh;object-fit:contain;cursor:zoom-in;border-radius:4px;
  transition:transform .14s ease;transform-origin:center center;user-select:none;-webkit-user-drag:none}
#lightbox img.keo-duoc{cursor:grab}
#lightbox img.dang-keo{cursor:grabbing;transition:none}
.lb-bar{position:fixed;top:10px;right:12px;display:flex;gap:6px;z-index:201}
.lb-bar .pk-btn{background:rgba(255,255,255,.1);color:#fff;font-size:16px;padding:6px 12px}
.lb-bar .pk-btn:hover{background:rgba(255,255,255,.22)}
.md img,.blk img,.static-page img,.note-body img{cursor:zoom-in}

/* ---------- chia cột (columns) ---------- */
.cols{display:flex;gap:16px;margin:4px 0;align-items:flex-start}
.colc{flex:1;min-width:0;padding:2px 4px;border-radius:6px;border:1px dashed transparent}
.blocks .cols:hover .colc{border-color:var(--line)}
.col-empty{color:var(--tx3);font-size:12px;cursor:pointer;padding:6px 8px;border-radius:6px}
.col-empty:hover{background:var(--bg3);color:var(--tx)}
.static-page .cols .colc{border:none;padding:0}
@media (max-width:768px){.cols{flex-direction:column;gap:6px}}


/* ================= DNA người dùng Marketing — lớp hoàn thiện ================= */
h1,h2,h3,.topbar h1,.page-title,.ws-name,.stat .s-num,.cal-title,.proj-top .p-name,
.home-wrap h1,.detail .d-title,.tile .t-title{font-family:var(--font-head);letter-spacing:-.01em}
.md code,.md pre,.blk.t-code,.md-edit{font-family:var(--font-mono)}
.ws-name{font-size:14.5px;font-weight:700}
.ws-name span{color:var(--accent);opacity:.8;letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;font-weight:600}
#sidebar{background:linear-gradient(180deg,#0A1120 0%,#070A12 100%)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));
  box-shadow:inset 3px 0 0 var(--accent);color:var(--tx);
}
.nav-label{color:var(--tx3);letter-spacing:.14em}
:root{--kinh:rgba(7,10,18,.82);--kinh2:#152238;--panel-grad:linear-gradient(180deg,#152238,#111B30)}
html[data-theme="toi"]{
  --ch1:#3A82E8; --ch2:#B8891F; --ch3:#2E9B72; --ch4:#8A61BE; --ch5:#CF4E45;--kinh:rgba(9,9,11,.86);--kinh2:#17171D}
html[data-theme="sang"]{
  --ch1:#1A53B0; --ch2:#B3541A; --ch3:#00806A; --ch4:#6B3FA0; --ch5:#B93A2C;--kinh:rgba(248,250,252,.9);--kinh2:#FFFFFF}
html[data-theme="hong"]{
  --ch1:#1A53B0; --ch2:#B3541A; --ch3:#00806A; --ch4:#6B3FA0; --ch5:#B93A2C;--kinh:rgba(255,247,250,.9);--kinh2:#FFFFFF}
.topbar{background:var(--kinh);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tb-btn.primary{
  background:linear-gradient(135deg,var(--azure),var(--accent));border:none;color:#041B52;
  box-shadow:0 6px 18px var(--glow);
}
.tb-btn.primary:hover{filter:brightness(1.08);box-shadow:0 8px 24px var(--glow)}
.view-toggle button.on{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.card{border-radius:12px;background:var(--panel-grad)}
.card:hover{border-color:rgba(var(--accent-rgb),.45)}
.col{border-radius:14px}
.tile,.proj-card,.stat,.note-item,.note-comp,.hier-nvc,.todo-box,.cal-cell{border-radius:14px}
.stat .s-num{font-size:27px}
.stat.s-accent .s-num{color:var(--accent);text-shadow:0 0 18px var(--glow)}
.pbar>div{background:linear-gradient(90deg,var(--azure),var(--accent))}
.pbar.full>div{background:linear-gradient(90deg,#2fb36f,var(--green))}
.chart .cbar.cur .bar{background:linear-gradient(180deg,var(--accent),var(--azure));border-color:transparent;box-shadow:0 0 14px var(--glow)}
.act.start{border-color:rgba(var(--blue-rgb,77,155,255),.55);color:var(--blue)}
.act.end{border-color:rgba(var(--green-rgb,94,211,154),.55);color:var(--green)}
input:focus,textarea:focus,select:focus,.side-search input:focus,.p-val input:focus,.p-val select:focus,
.note-in:focus,.md-edit:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
.blk[contenteditable]:focus{background:rgba(var(--accent-rgb),.05)}
.md blockquote,.blk.t-quote{border-left-color:var(--accent)}
.cal-cell.today{box-shadow:0 0 0 1px var(--accent),0 0 16px var(--glow)}
.detail,.peek{background:linear-gradient(180deg,var(--bg2),var(--bg))}
#slash-menu,.d-menu,#sel-bar{background:var(--kinh2);backdrop-filter:blur(12px)}
::-webkit-scrollbar-thumb{background:rgba(120,160,220,.22)}
::-webkit-scrollbar-thumb:hover{background:rgba(120,160,220,.4)}

/* ---- chuyển động mượt, một hệ easing chung ---- */
@media (prefers-reduced-motion: no-preference){
  #main.fade>*{animation:pagein .32s var(--ease) both}
  @keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .rv{transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .card,.tile,.proj-card,.note-item,.tb-btn,.act,.nav-item,.pk-btn,.sb-btn,.sw,.sm-item,.cal-task,.pt-row,.badge{
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .18s var(--ease),
               border-color .18s var(--ease),color .18s var(--ease),opacity .5s var(--ease);
  }
  .act:active,.tb-btn:active,.pk-btn:active,.sb-btn:active{transform:scale(.96)}
  .card:active{transform:scale(.99)}
  .nav-item:hover{transform:translateX(2px)}
  #sidebar{transition:transform .28s var(--ease)}
  .detail{animation:slidein .26s var(--ease)}
  .peek{animation:peekin .26s var(--ease)}
  #slash-menu,.d-menu,#sel-bar{animation:rise .18s var(--ease)}
  #lightbox img{transition:transform .18s var(--ease)}
  .blk-handle{transition:opacity .18s var(--ease),background .18s var(--ease)}
  .tgl,.tick{transition:transform .18s var(--ease)}
  .tgl:hover{transform:scale(1.15)}
  .pbar>div{transition:width .7s var(--ease)}
  .chart .bar{transition:height .6s var(--ease)}
}

/* ---------- biểu đồ thanh ngang theo tầng (trang dự án) ---------- */
.hbar-box{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:12px}
.hbar-row{display:grid;grid-template-columns:minmax(140px,1.2fr) 3fr auto;gap:12px;align-items:center;padding:6px 4px;border-radius:8px;cursor:pointer}
.hbar-row:hover{background:var(--bg3)}
.hbar-lbl{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:9px;background:var(--bg3);border-radius:5px;overflow:hidden}
.hbar-fill{height:100%;background:linear-gradient(90deg,var(--azure),var(--accent));border-radius:5px;transition:width .7s var(--ease)}
.hbar-fill.full{background:linear-gradient(90deg,#2fb36f,var(--green))}
.hbar-num{font-size:12px;color:var(--tx3);white-space:nowrap}
.hier-cvc .pbar,.hier-nvc>.pbar{margin:6px 0 4px;height:6px}
@media (max-width:768px){.hbar-row{grid-template-columns:1fr;gap:4px}}

/* ---------- thư viện phân loại trên sidebar ---------- */
.nav-cat{font-weight:600;color:var(--tx);margin-top:2px}
.nav-cat .cnt{font-weight:400}

/* ---------- ghi âm trong Note ---------- */
.note-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-btn.recording{background:var(--red-bg);border-color:var(--red);color:var(--red);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,110,.35)}50%{box-shadow:0 0 0 6px rgba(255,122,110,0)}}

/* ---------- vùng nhận file kéo-thả ---------- */
.drop-file{outline:2px dashed var(--accent) !important;outline-offset:4px;background:rgba(var(--accent-rgb),.06) !important}
.media-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 4px;
  padding-top:12px;border-top:1px solid var(--line)}
.media-bar .tb-btn{font-size:12.5px}
.video-wrap video{width:100%;height:100%;border-radius:10px;background:#000;display:block}

/* ---------- thanh định dạng nổi khi bôi đen ---------- */
.fmtbar{position:fixed;z-index:300;display:flex;align-items:center;gap:2px;
  background:var(--panel,#152238);border:1px solid var(--line);border-radius:9px;
  padding:4px 6px;box-shadow:0 8px 28px rgba(0,0,0,.45);animation:fmtin .12s ease}
@keyframes fmtin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fmt-btn{background:none;border:none;color:var(--tx);cursor:pointer;border-radius:6px;
  min-width:26px;height:26px;font-size:13px;font-family:inherit}
.fmt-btn:hover{background:var(--bg3)}
.fb-b{font-weight:800}.fb-i{font-style:italic}.fb-u{text-decoration:underline}.fb-s{text-decoration:line-through}
.fmt-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.fmt-sw{width:16px;height:16px;border-radius:50%;cursor:pointer;display:inline-block;
  border:1px solid rgba(255,255,255,.25);margin:0 2px;flex:none}
.fmt-sw:hover{transform:scale(1.2)}
.fmt-x{background:var(--bg3);color:var(--tx2);font-size:10px;line-height:15px;text-align:center}

/* ---------- ô chọn ngày ---------- */
.date-inp{cursor:pointer}
.date-inp::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(.7)}
.date-x{padding:2px 7px;margin-left:6px;font-size:11px}

/* ---------- tien do tren the ---------- */
.c-prog{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0}
.c-prog-track{flex:1 1 auto;min-width:0;height:5px;border-radius:3px;background:var(--bg3);overflow:hidden}
.c-prog-bar{height:100%;max-width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--azure,var(--azure)),var(--accent));transition:width .25s ease}
.c-prog-bar.hot{background:linear-gradient(90deg,#22c55e,var(--green))}
.c-prog-bar.full{background:linear-gradient(90deg,#22c55e,#22c55e)}
.c-prog-n{font-size:10.5px;color:var(--tx2);flex:0 0 auto;text-align:right;white-space:nowrap}
.prog-edit{display:flex;align-items:center;gap:8px;width:100%}
.prog-edit input[type=range]{flex:1;accent-color:var(--accent)}
.prog-lb{font-size:12px;color:var(--tx);width:38px;text-align:right}

/* ---------- quan su ---------- */
.advisor{background:var(--panel,#152238);border:1px solid var(--line);border-radius:10px;
  margin:10px 28px 0;flex:none;overflow:hidden}
#main:has(.board)>.topbar{flex:none}
.adv-head{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:6px 10px;font-size:12.5px;line-height:1.3;user-select:none}
.adv-head:hover{background:var(--bg3)}
.adv-t{font-weight:700;color:var(--accent);flex:none}
.adv-sum{color:var(--tx2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adv-x{flex:none;background:none;border:none;color:var(--tx3);cursor:pointer;
  font-size:13px;width:24px;height:22px;border-radius:6px;padding:0;font-family:inherit}
.adv-x:hover{background:var(--bg2);color:var(--tx)}
.advisor.open .adv-head{border-bottom:1px solid var(--line)}
.adv-body{padding:4px 6px 6px}
.adv-line{padding:5px 8px;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--tx);
  display:flex;gap:7px;align-items:baseline}
.adv-line:hover{background:var(--bg3)}
.adv-line b{font-weight:600}
.adv-i{flex:none}
.adv-rest{display:block;width:100%;text-align:left;padding:5px 8px;font-size:11.5px;
  color:var(--accent);background:none;border:none;cursor:pointer;border-radius:7px;font-family:inherit}
.adv-rest:hover{background:var(--bg3);text-decoration:underline}
.adv-body.scroll{max-height:42vh;overflow-y:auto}

/* ---------- tha the de xep vi tri ---------- */
.card.drop-above{box-shadow:0 -3px 0 0 var(--accent);border-radius:10px}

/* ---------- khoi anh chon duoc ---------- */
.imgblk{position:relative;border-radius:10px;outline:none}
.imgblk:focus{box-shadow:0 0 0 2px var(--accent)}
.imgblk-bar{position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:5}
.imgblk:hover .imgblk-bar,.imgblk:focus .imgblk-bar{display:flex}
.imgblk-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);cursor:pointer;
  background:var(--kinh);color:var(--tx);font-size:13px;line-height:1}
.imgblk-btn:hover{background:var(--accent);color:#04121f}


/* ---------- note: thu gon note dai ---------- */
.note-body.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;max-height:6.6em;position:relative}
.note-body.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6em;
  background:linear-gradient(to bottom,transparent,var(--bg2))}
.note-more{margin-top:6px;background:none;border:none;color:var(--accent);
  font-size:12.5px;cursor:pointer;padding:2px 0;font-family:inherit}
.note-more:hover{text-decoration:underline}

/* ---------- file ghi am: hien gon, khong phai khung video ---------- */
.aud-chip{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--line);
  border-radius:10px;padding:6px 10px;margin:6px 0;max-width:420px}
.aud-ic{flex:none;font-size:14px}
.aud-chip audio{flex:1;min-width:0;height:32px}
.aud-dl{flex:none;color:var(--tx3);text-decoration:none;font-size:15px;padding:0 2px}
.aud-dl:hover{color:var(--accent)}

/* ---------- thanh bao co ban moi ---------- */
#update-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:400;
  display:flex;align-items:center;gap:10px;background:var(--panel,#152238);
  border:1px solid var(--accent);border-radius:12px;padding:9px 12px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);font-size:13px;color:var(--tx);
  animation:rise .2s var(--ease,ease);max-width:calc(100vw - 24px)}
#update-bar button{background:linear-gradient(135deg,var(--azure),var(--accent));color:#041B52;border:none;
  border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
#update-bar .ub-x{background:none;color:var(--tx3);padding:4px 6px;font-weight:400}
#update-bar .ub-x:hover{color:var(--tx)}

/* ---------- note co ban tom tat ---------- */
.note-body.is-sum{border-left:2px solid var(--accent);padding-left:10px}


/* ---------- o tick / mui ten nam NGOAI vung go (gõ chữ khong bi vuong) ---------- */
.blkrow{display:flex;align-items:flex-start}
.blkrow>.blk{flex:1;min-width:0}
.row-tick,.row-tgl{flex:none;cursor:pointer;user-select:none;line-height:1.5;
  padding:2px 4px 0 0;color:var(--tx2)}
.row-tick{font-size:14px}
.row-tgl{font-size:12px;width:18px;text-align:center;border-radius:4px}
.row-tgl:hover{background:var(--bg3);color:var(--tx)}
.blkrow:has(.row-tick) .blk.t-todo.done{color:var(--tx3);text-decoration:line-through}

/* ---------- note co ghi am: thanh nghe len dau, luon thay ---------- */
.note-audio{margin:2px 0 6px}
.note-audio .aud-chip{margin:0}

/* dang keo chon nhieu dong -> khong boi chu lung tung */
.blocks.dragsel,.blocks.dragsel *{user-select:none !important;cursor:default}

/* ---------- lien ket the viec ---------- */
.blk.t-tasklink{padding:2px 0}
a.tasklink{display:flex;align-items:center;gap:9px;text-decoration:none;
  background:linear-gradient(90deg,rgba(var(--azure-rgb),.14),rgba(var(--accent-rgb),.06));
  border:1px solid rgba(var(--accent-rgb),.38);border-left:3px solid var(--accent);
  border-radius:9px;padding:9px 12px;margin:4px 0;color:var(--tx);transition:all .15s ease}
a.tasklink:hover{background:linear-gradient(90deg,rgba(var(--azure-rgb),.26),rgba(var(--accent-rgb),.12));
  border-color:var(--accent);transform:translateX(2px)}
.tl-ic{flex:none;font-size:14px}
.tl-name{flex:1;min-width:0;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-st{flex:none;font-size:10.5px;padding:2px 8px;border-radius:20px;
  background:var(--bg3);color:var(--tx2);white-space:nowrap}
.tl-st.done{background:rgba(111,191,122,.18);color:var(--green)}
.tl-go{flex:none;font-size:11px;color:var(--tx3);white-space:nowrap}
a.tasklink:hover .tl-go{color:var(--accent)}
a.tasklink.tl-dead{border-color:rgba(255,122,110,.4);background:rgba(255,122,110,.07)}
a.tasklink.tl-dead .tl-name{color:var(--red);font-weight:500}
/* chưa tra được tên (mạng/Drive chớp) — khác hẳn "đã bị xoá": bấm được để thử lại */
a.tasklink.tl-loi{border-color:rgba(255,183,77,.45);background:rgba(255,183,77,.08);cursor:pointer}
a.tasklink.tl-loi .tl-name{color:var(--yellow);font-weight:500}
a.tasklink.tl-loi .tl-go{color:var(--yellow)}
a.tasklink.tl-loi:hover{background:rgba(255,183,77,.16)}

/* ---------- nut quay lai the truoc ---------- */
.pk-btn.btn-back{width:auto;padding:0 10px;font-size:12px;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.35);border-radius:8px;max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:auto}
.pk-btn.btn-back:hover{background:rgba(var(--accent-rgb),.14)}

/* ---------- muc "Duoc nhac toi trong" ---------- */
.backlink-box{margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.bl-title{font-size:11.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:8px}
a.bl-item{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tx);
  background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;margin-bottom:6px;font-size:13px;transition:all .15s ease}
a.bl-item:hover{border-color:var(--accent);transform:translateX(2px)}
.bl-ic{flex:none}
.bl-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-ds{display:flex;flex-direction:column;gap:6px}
.bl-ds a.tasklink{margin:0}

/* ---------- quan su: dem viec + danh gia ngay ---------- */
.adv-done{flex:none;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--bg3);color:var(--tx2)}
.adv-done.good{background:rgba(111,191,122,.18);color:var(--green)}
.adv-done.mid{background:rgba(232,180,83,.18);color:var(--yellow)}
.adv-done.low{background:rgba(225,111,100,.16);color:var(--red)}
.adv-grade{flex:none;font-size:11px;color:var(--tx3);white-space:nowrap}
.adv-grade.good{color:var(--green)}.adv-grade.mid{color:var(--yellow)}.adv-grade.low{color:var(--red)}

.day-rep{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg3);border-radius:9px;padding:9px 12px;margin:2px 2px 8px}
.dr-cell{display:flex;align-items:baseline;gap:5px;font-size:11.5px;color:var(--tx3)}
.dr-cell b{font-size:17px;font-weight:700;color:var(--tx)}
.dr-cell.ok b{color:var(--green)}
.dr-cell.warn b{color:var(--yellow)}
.dr-grade{margin-left:auto;font-size:12px;display:flex;align-items:center;gap:8px;color:var(--tx)}
.dr-hint{font-size:11px;color:var(--tx3)}
.day-rep.good{box-shadow:inset 3px 0 0 var(--green)}
.day-rep.mid{box-shadow:inset 3px 0 0 var(--yellow)}
.day-rep.low{box-shadow:inset 3px 0 0 var(--red)}
.loc-tk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border-radius:9px;
  font-size:12.5px;color:var(--tx);background:rgba(232,180,83,.14);border:1px solid rgba(232,180,83,.45)}
.loc-tk b{font-weight:700}
.loc-tk-goi{font-size:11px;color:var(--tx3)}
.loc-tk .tb-btn{margin-left:auto}
.dr-wrap{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.dr-list{display:flex;flex-direction:column;gap:1px;padding:0 6px}
.dr-item{display:flex;align-items:baseline;gap:8px;padding:3px 8px;border-radius:6px;font-size:12px;cursor:pointer;color:var(--tx)}
.dr-item:hover{background:var(--bg3)}
.dr-item b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.dr-pt{flex:none;font-variant-numeric:tabular-nums;font-weight:700;color:var(--green);min-width:34px}
.dr-ly{font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= CUA SO NOI (mo nhieu the cung luc) ================= */
#win-root{position:fixed;inset:0;pointer-events:none;z-index:200}
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.62);overflow:hidden;
  animation:winIn .16s cubic-bezier(.2,.7,.3,1.05)}
@keyframes winIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.win.thu{display:none}
.win.dang-keo{transition:none;box-shadow:0 30px 90px rgba(0,0,0,.7);opacity:.96}
.win-head{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:move;
  background:var(--panel);border-bottom:1px solid var(--line);user-select:none;flex:none}
.win-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-btn{flex:none;width:26px;height:26px;border:none;background:none;color:var(--tx3);
  border-radius:7px;cursor:pointer;font-size:13px;line-height:26px;font-family:inherit}
.win-btn:hover{background:var(--bg3);color:var(--tx)}
.win-btn.win-x:hover{background:#e05a4d;color:#fff}
.win-body{flex:1;min-height:0;overflow:auto;padding:14px 18px}
.win-body .topbar{position:static;padding:0 0 10px}
.win-grip{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize}
.win-grip::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;
  border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);border-radius:0 0 3px 0}

/* thanh liet ke cua so dang mo */
#win-bar{position:fixed;left:0;right:0;bottom:0;z-index:190;display:none;
  align-items:center;gap:8px;padding:7px 12px;background:rgba(12,19,34,.94);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);overflow-x:auto}
.wb-lb{flex:none;font-size:11.5px;color:var(--tx3);font-weight:600}
.wb-item{flex:none;display:flex;align-items:center;gap:7px;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px;
  color:var(--tx);cursor:pointer;max-width:230px;font-family:inherit;white-space:nowrap}
.wb-item:hover{border-color:var(--accent)}
.wb-item.thu{opacity:.6;border-style:dashed}
.wb-x{color:var(--tx3);font-size:11px;padding:0 2px}
.wb-x:hover{color:var(--red)}
.wb-all{margin-left:auto;color:var(--tx3)}
@media (max-width:860px){
  .win{border-radius:12px}
  .win-head{cursor:default}
  .win-grip{display:none}
  #win-bar{padding:6px 8px}
}

/* ---------- chon nhieu note + de xuat tu AI ---------- */
.note-ck{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none;margin-right:2px}
.note-item.picked{border-color:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35)}
.note-pickbar{display:none;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--accent);border-radius:10px;
  padding:9px 12px;margin:0 0 12px;position:sticky;top:56px;z-index:6}
.note-pickbar.on{display:flex}
.pb-lb{font-size:12.5px;font-weight:700;color:var(--accent);margin-right:4px}

.d-title-static{font-size:18px;font-weight:700;margin:2px 0 4px;color:var(--tx)}
.de-list{margin:12px 0;max-height:52vh;overflow-y:auto}
.de-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:8px;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px}
.de-row.bo{opacity:.4}
.de-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin-top:6px;flex:none}
.de-mid{flex:1;min-width:0}
.de-ten{width:100%;background:transparent;border:none;border-bottom:1px dashed var(--line2);
  color:var(--tx);font-size:13.5px;font-weight:600;padding:3px 0;outline:none;font-family:inherit}
.de-ten:focus{border-bottom-color:var(--accent)}
.de-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.de-note{font-size:11.5px;color:var(--tx3);margin-top:6px;font-style:italic}
.de-bar{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- khoi dong bo ---------- */
.blk.t-sync{padding:0;margin:8px 0}
.syncblk{border:1px solid rgba(var(--purple-rgb),.45);border-left:3px solid #b48ee0;
  border-radius:10px;background:rgba(var(--purple-rgb),.06);overflow:hidden}
.sb-head{display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:rgba(var(--purple-rgb),.10);border-bottom:1px solid rgba(var(--purple-rgb),.25)}
.sb-tag{font-size:11px;font-weight:700;color:var(--purple);flex:none}
.sb-hint{font-size:10.5px;color:var(--tx3);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sb-copy{flex:none;background:none;border:1px solid rgba(var(--purple-rgb),.4);color:var(--purple);
  border-radius:6px;font-size:10.5px;padding:2px 7px;cursor:pointer;font-family:inherit}
.sb-copy:hover{background:rgba(var(--purple-rgb),.2);color:#fff}
.sb-dung{flex:none;font-size:10.5px;color:var(--purple);background:rgba(var(--purple-rgb),.16);
  padding:1px 7px;border-radius:8px;white-space:nowrap}
.sb-noi{flex:none;background:none;border:1px solid rgba(var(--purple-rgb),.4);color:var(--purple);
  font-size:10.5px;padding:2px 8px;border-radius:7px;cursor:pointer;font-family:inherit}
.sb-noi:hover{background:rgba(var(--purple-rgb),.2);color:#fff}
@media (max-width:768px){.sb-hint{display:none}}
.sb-body{padding:10px 12px;cursor:text;min-height:34px}
.sb-body:hover{background:rgba(var(--purple-rgb),.05)}
.sb-body p:first-child{margin-top:0}
.sb-body p:last-child{margin-bottom:0}
.sb-trong{color:var(--tx3);font-style:italic;font-size:13px;margin:0}
.sb-edit{width:100%;background:var(--bg);border:1px solid rgba(var(--purple-rgb),.5);
  border-radius:8px;color:var(--tx);font-size:13.5px;padding:9px 11px;outline:none;
  font-family:inherit;line-height:1.55;resize:vertical}

/* ---------- hop xem ngay (lich) ---------- */
.day-ov{position:fixed;inset:0;background:rgba(4,10,22,.62);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:150;animation:fadeIn .14s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.day-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:151;
  width:min(680px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.66);overflow:hidden;animation:winIn .18s cubic-bezier(.2,.7,.3,1.05)}
.day-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.day-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.day-title b{font-size:16px;color:var(--tx)}
.day-title span{font-size:11.5px;color:var(--tx3)}
.day-count{flex:none;font-size:11.5px;color:var(--tx2);background:var(--bg3);
  padding:3px 10px;border-radius:20px}
.day-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px}
.day-group{margin-bottom:14px}
.day-gh{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  margin-bottom:7px;color:var(--tx3)}
.day-gh.lich{color:var(--accent)}
.day-gh.han{color:var(--yellow)}
.day-gh.xong{color:var(--green)}
.day-item{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:6px;
  background:var(--bg3);border:1px solid var(--line);border-radius:9px;cursor:pointer;
  font-size:13px;transition:all .14s ease}
.day-item:hover{border-color:var(--accent);transform:translateX(2px)}
.day-item.xong{opacity:.62}
.day-item.xong .di-name{text-decoration:line-through}
.day-item.han{border-left:3px solid var(--yellow)}
.day-item.lich{border-left:3px solid var(--accent)}
.di-ic{flex:none}
.di-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di-pg{flex:none;font-size:10.5px;color:var(--tx3)}
.di-act{flex:none;display:flex;gap:4px}
.di-act .act{padding:2px 8px;font-size:12px}
.day-add{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line);
  background:var(--panel);flex:none}
.day-add input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:8px 11px;color:var(--tx);font-size:13px;outline:none;font-family:inherit}
.day-add input:focus{border-color:var(--accent)}

/* lich: o ngay bam duoc */
.cal-cell{cursor:pointer;transition:background .14s ease}
.cal-cell:not(.empty):hover{background:var(--bg3)}

/* ---------- cua so phong to het man hinh ---------- */
.win.to{left:12px !important;top:12px !important;
  width:calc(100vw - 24px) !important;height:calc(100vh - 70px) !important}

/* ---------- them dong trong bang ---------- */
.tbl-add{margin-top:10px;border:1px dashed var(--line2);border-radius:8px}

/* ---------- trang bi khoa ---------- */
.khoa-bar{display:flex;align-items:center;gap:12px;background:rgba(232,180,83,.10);
  border:1px solid rgba(232,180,83,.4);border-radius:10px;padding:9px 13px;margin-bottom:12px;
  font-size:12.5px;color:var(--yellow)}
.khoa-bar span{flex:1}
.tb-btn.locked{color:var(--yellow);border-color:rgba(232,180,83,.45)}
.blocks.khoa .blk[contenteditable="false"]{cursor:default}
.blocks.khoa .blk-handle{display:none}

/* ---------- keo tha trang trong sidebar ---------- */
.nav-item[draggable]{cursor:pointer}
.nav-item.dragging{opacity:.45}
.nav-item.drop-in{background:rgba(var(--accent-rgb),.18);outline:1px dashed var(--accent);
  outline-offset:-2px;border-radius:7px}

/* ---------- duong dan trang bam duoc ---------- */
.crumb-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.cr-link{color:var(--tx2);cursor:pointer;padding:2px 6px;border-radius:6px;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-link:hover{background:var(--bg3);color:var(--accent)}
.cr-sep{color:var(--tx3);flex:none}
.cr-cur{color:var(--tx);font-weight:600;max-width:280px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- nut quay lai chung (moi trang) ---------- */
/* ---- nút quay lại: nằm trong thanh tiêu đề, không đè nội dung ---- */
#nav-back.nb-trong-thanh{
  display:inline-flex;align-items:center;gap:6px;flex:none;max-width:230px;
  background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:6px 12px 6px 9px;font-size:12.5px;color:var(--tx2);cursor:pointer;
  font-family:inherit;transition:.14s var(--ease,ease)}
#nav-back.nb-trong-thanh:hover{border-color:var(--accent);color:var(--accent);
  background:var(--panel)}
#nav-back.nb-trong-tab{
  flex:none;align-self:center;display:flex;align-items:center;gap:5px;max-width:190px;
  height:28px;margin:0 6px 4px 0;padding:0 10px 0 8px;
  border:1px solid var(--line2);border-radius:8px;background:var(--bg3);
  color:var(--accent);font-size:12px;font-family:inherit;cursor:pointer;
}
#nav-back.nb-trong-tab:hover{border-color:var(--accent);background:var(--bg)}
#nav-back .nb-mui{font-size:14px;line-height:1;flex:none}
#nav-back .nb-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* trang không có thanh tiêu đề -> vẫn nổi, nhưng nhỏ gọn ở góc TRÊN trái */
@media (max-width:768px){
  #nav-back.nb-trong-thanh{max-width:150px;padding:5px 9px 5px 7px;font-size:12px}
}

/* ---------- nut + / ... trong sidebar ---------- */
.nav-item{position:relative}
.nav-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-act{display:none;align-items:center;gap:1px;flex:none;margin-left:auto;padding-left:4px}
.nav-item:hover .nav-act,.nav-item.active .nav-act{display:flex}
.nav-item:hover .cnt{display:none}
.na-btn{width:20px;height:20px;line-height:20px;text-align:center;border-radius:5px;
  color:var(--tx3);font-size:12px;cursor:pointer;flex:none}
.na-btn:hover{background:var(--bg);color:var(--accent)}
.nav-cat .nav-act .na-btn{font-size:13px}

/* nut quay lai trong khung (panel the / cua so) */
.khung-back{margin-right:8px;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.35);border-radius:8px;font-size:12px;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khung-back:hover{background:rgba(var(--accent-rgb),.14)}
a.cr-link{text-decoration:none}

/* ---------- khoi trong: chi cho go ---------- */
.blk.blk-trong::before{content:attr(data-goiy);color:var(--tx3);opacity:.75;
  pointer-events:none;position:absolute;left:0;top:2px;font-size:14px;font-weight:400}
.blk.blk-trong:focus::before{opacity:.42}
.blocks.khoa .blk.blk-trong::before{content:""}

/* ================= LICH: tut lai giao dien kieu Google Calendar ================= */
.cal-grid{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-dow{font-size:10.5px;color:var(--tx3);text-align:center;padding:9px 0;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;background:var(--panel)}
.cal-dow.cuoi{color:var(--tx2)}
.cal-cell{border:none;border-radius:0;background:var(--bg2);min-height:118px;padding:6px 7px;
  transition:background .13s ease}
.cal-cell.cuoi{background:rgba(255,255,255,.014)}
.cal-cell.qua{opacity:.62}
.cal-cell.empty{background:var(--bg);opacity:.35}
.cal-cell:not(.empty):hover{background:var(--bg3)}
.cal-cell.today{background:rgba(var(--accent-rgb),.07);box-shadow:inset 0 0 0 2px var(--accent)}
.cal-num{position:relative;width:26px;height:26px;font-size:12.5px;margin-bottom:5px}
.cal-cell.today .cal-num{background:var(--accent);color:#04121f;font-weight:700}
.cal-badge{position:absolute;top:-3px;right:-11px;min-width:15px;height:15px;line-height:15px;
  border-radius:9px;background:var(--azure,var(--azure));color:#fff;font-size:9.5px;font-weight:700;
  text-align:center;padding:0 4px}
.cal-badge.het{background:rgba(111,191,122,.9)}
.cal-task{font-size:11px;padding:3px 7px;border-radius:6px;margin-bottom:3px;
  border-left:2px solid transparent;transition:transform .12s ease}
.cal-task:hover{transform:translateX(2px)}
.cal-task.todo{background:rgba(120,150,190,.14);color:var(--tx2);border-left-color:#7896be}
.cal-task.prog{background:rgba(var(--accent-rgb),.16);color:#a9d8f5;border-left-color:var(--accent)}
.cal-task.done{background:rgba(111,191,122,.13);color:#8fc79a;border-left-color:var(--green);
  text-decoration:line-through;opacity:.75}
.cal-more{font-size:10.5px;color:var(--tx3);cursor:pointer;padding:2px 6px;border-radius:5px}
.cal-more:hover{background:var(--bg3);color:var(--accent)}
.cal-title{font-size:17px;font-weight:700;color:var(--tx);min-width:150px;text-align:center}

/* hop xem ngay: mo muot, ve lai thi khong nhay */
.day-box{animation:dayIn .22s cubic-bezier(.2,.8,.25,1)}
.day-ov{animation:fadeIn .18s ease}
.day-box.nhanh,.day-ov.nhanh{animation:none}
@keyframes dayIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
                 to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ================= O CHON NGAY kieu Google Calendar ================= */
.date-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px;color:var(--tx);
  font-size:13px;cursor:pointer;font-family:inherit;transition:all .13s ease}
.date-btn:hover{border-color:var(--accent)}
.db-ic{font-size:12px;opacity:.8}
.db-trong{color:var(--tx3)}
.db-gio{color:var(--tx2);font-size:12px}
.db-nhan{font-size:10.5px;background:rgba(var(--accent-rgb),.16);color:var(--accent);
  padding:1px 7px;border-radius:20px}

.dp{position:fixed;z-index:1000;width:282px;background:var(--panel);
  border:1px solid var(--line2);border-radius:14px;padding:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);animation:rise .15s var(--ease,ease)}
.dp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.dp-title{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--tx)}
.dp-nav{width:26px;height:26px;border:none;background:none;color:var(--tx2);
  border-radius:7px;cursor:pointer;font-size:16px;line-height:26px;font-family:inherit}
.dp-nav:hover{background:var(--bg3);color:var(--accent)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:9.5px;color:var(--tx3);text-align:center;font-weight:700;padding:3px 0;
  text-transform:uppercase}
.dp-day{height:32px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--tx);border-radius:8px;cursor:pointer;transition:all .1s ease}
.dp-day:hover{background:var(--bg3)}
.dp-day.mo{color:var(--tx3);opacity:.35;pointer-events:none}
.dp-day.hnay{box-shadow:inset 0 0 0 1.5px var(--accent);font-weight:700}
.dp-day.chon{background:var(--accent);color:#04121f;font-weight:700}
.dp-day.chon:hover{background:var(--accent)}
.dp-gio{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--tx3)}
.dp-gio-lbl{flex:0 0 auto}
.dp-gio-nut{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:7px;
  padding:5px 8px;color:var(--tx);font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;text-align:left;letter-spacing:.3px}
.dp-gio-nut:hover{border-color:var(--accent);color:var(--accent)}
/* bảng chọn giờ tự vẽ — 2 cột cuộn, cùng tông với lịch */
.dp-gio-bang{display:none;gap:6px;margin-top:6px}
.dp-gio-bang.mo{display:flex}
.dp-gio-cot{flex:1;max-height:132px;overflow-y:auto;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:3px;scrollbar-width:thin}
.dp-gio-cot::-webkit-scrollbar{width:6px}
.dp-gio-cot::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.dp-gio-o{padding:5px 0;text-align:center;border-radius:6px;font-size:12.5px;
  color:var(--tx2);cursor:pointer;font-variant-numeric:tabular-nums}
.dp-gio-o:hover{background:var(--panel);color:var(--tx)}
.dp-gio-o.chon{background:var(--accent);color:#04121f;font-weight:700}
.dp-gio-nhanh{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.dp-quick.sm{min-width:0;padding:4px 5px;font-size:10.5px}
.dp-quick.chon{border-color:var(--accent);color:var(--accent);
  background:rgba(var(--accent-rgb),.12)}
.dp-foot{display:flex;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.dp-quick{flex:1;min-width:62px;background:var(--bg3);border:1px solid var(--line);
  border-radius:7px;padding:5px 6px;color:var(--tx2);font-size:11px;cursor:pointer;font-family:inherit}
.dp-quick:hover{border-color:var(--accent);color:var(--accent)}
.dp-xoa:hover{border-color:#e05a4d;color:var(--red)}

/* ---------- menu chuot phai chung toan app ---------- */
.ctx-menu{position:fixed;z-index:1000;min-width:212px;max-width:290px;
  background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:5px;
  box-shadow:0 16px 46px rgba(0,0,0,.6);animation:rise .13s var(--ease,ease)}
.ctx-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;
  font-size:13px;color:var(--tx);cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ctx-item:hover{background:var(--bg3)}
.ctx-item.nguy{color:var(--red)}
.ctx-item.nguy:hover{background:rgba(224,90,77,.18)}
.cx-ic{flex:none;width:17px;text-align:center;font-size:12.5px;opacity:.9}
.ctx-sep{height:1px;background:var(--line);margin:4px 6px}
.ctx-title{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;
  padding:5px 10px 3px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- nut doi nhanh sang To-do / Toggle ---------- */
.fmt-blk{background:var(--bg3);border:1px solid var(--line);color:var(--tx2);
  border-radius:7px;padding:4px 9px;font-size:11.5px;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:all .12s ease}
.fmt-blk:hover{border-color:var(--accent);color:var(--accent)}
.fmt-blk.dang{background:var(--accent);color:#04121f;border-color:var(--accent);font-weight:700}
.sb-btn.sb-noi{background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.4);
  color:var(--accent);padding:0 11px;font-size:12px}
.sb-btn.sb-noi:hover{background:var(--accent);color:#04121f}

/* ============ HỘP THOẠI DNA — thay confirm/prompt cũ kỹ của trình duyệt ============ */
.dlg-nen{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,22,.62);backdrop-filter:blur(6px);animation:dlgVao .16s var(--ease,ease)}
@keyframes dlgVao{from{opacity:0}to{opacity:1}}
@keyframes dlgLen{from{opacity:0;transform:translateY(14px) scale(.97)}
                  to{opacity:1;transform:none}}
.dlg{width:min(460px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;box-shadow:0 26px 70px rgba(0,0,0,.62);padding:20px 20px 16px;
  animation:dlgLen .19s var(--ease,ease)}
.dlg-tit{font-family:"Bricolage Grotesque",var(--font,inherit);font-weight:700;font-size:16.5px;
  color:var(--tx);margin:0 0 6px;line-height:1.35;display:flex;gap:9px;align-items:flex-start}
.dlg-ic{font-size:19px;line-height:1.2;flex:0 0 auto}
.dlg-mo{font-size:13px;color:var(--tx3);line-height:1.55;margin:0 0 14px;white-space:pre-line}
.dlg-in{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--tx);font-size:14px;font-family:inherit;outline:none;margin-bottom:14px}
.dlg-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
textarea.dlg-in{min-height:96px;resize:vertical;line-height:1.5}
.dlg-nut{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-b{border:1px solid var(--line);background:var(--bg3);color:var(--tx2);border-radius:9px;
  padding:8px 15px;font-size:13px;font-family:inherit;cursor:pointer;transition:.14s var(--ease,ease)}
.dlg-b:hover{border-color:var(--line2);color:var(--tx)}
.dlg-b.chinh{border:none;color:#04121f;font-weight:700;
  background:linear-gradient(135deg,var(--azure,var(--azure)),var(--accent));
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.28)}
.dlg-b.chinh:hover{filter:brightness(1.08)}
.dlg-b.nguy{border-color:rgba(224,90,77,.5);color:var(--red)}
.dlg-b.nguy:hover{background:rgba(224,90,77,.16);border-color:#e05a4d}
@media (max-width:768px){.dlg-nut{flex-direction:column-reverse}.dlg-b{width:100%}}

/* ============ Ô CHỌN DNA — thay dropdown mặc định của trình duyệt ============ */
.sel-dna{display:inline-flex;align-items:center;gap:8px;justify-content:space-between;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  color:var(--tx);font-size:12.5px;font-family:inherit;cursor:pointer;min-width:0;
  transition:.14s var(--ease,ease)}
.sel-dna:hover{border-color:var(--accent)}
.sel-dna .sd-chu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-dna .sd-mui{opacity:.55;font-size:10px;flex:0 0 auto}
.sel-dna.mo{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}

/* nút lùi / tới một kỳ ở trang Tổng quan */
.dash-nhay{min-width:32px;padding:6px 9px;font-size:15px;line-height:1;font-weight:700}
.dash-nhay:hover{border-color:var(--accent);color:var(--accent)}

/* ============ BẢNG TÍNH ============ */
.sh-title{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--tx);
  font-family:"Bricolage Grotesque",inherit;font-weight:700;font-size:19px;padding:4px 8px}
.sh-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 18px 6px;
  border-bottom:1px solid var(--line)}
.sh-bar .sh-b{font-weight:800;min-width:34px}
.sh-mau{display:inline-flex;align-items:center;gap:5px;margin-left:6px}
.sh-mau .sw{width:17px;height:17px;border-radius:5px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;color:var(--tx3);
  border:1px solid rgba(255,255,255,.14)}
.sh-mau .sw:hover{transform:scale(1.15)}
.sh-goiy{margin-left:auto;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:46vw}
.sh-wrap{flex:1;overflow:auto;padding:0 0 60px;background:#0d0e12}
.sh-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px;margin:0}
/* chế độ TỐI của bảng = đen trung tính (kiểu Google Sheets dark), không dùng navy xanh của app */
.sh-grid th,.sh-grid td{border-right:1px solid #2a2d35;border-bottom:1px solid #2a2d35;padding:0}
.sh-grid tr:first-child th{border-top:1px solid #2a2d35}
.sh-grid tr>*:first-child{border-left:1px solid #2a2d35}
.sh-grid th{background:#1a1c22;color:#9aa3b2;font-weight:600;font-size:11px;
  position:relative;user-select:none}
.sh-goc{width:52px}
.sh-cot{height:30px;text-align:center;cursor:pointer}
.sh-hang{width:52px;text-align:center;cursor:pointer;position:relative}
.sh-keo{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:2}
.sh-o{height:30px;padding:4px 8px;color:#e8eaee;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:cell;background:#121317}
/* Ô đang chọn: tô bằng bóng ĐỔ VÀO TRONG chứ không đổi background.
   Bóng inset vẽ ĐÈ LÊN nền riêng của ô nhưng vẫn nằm DƯỚI chữ. Trước đây tô bằng
   background nên ô nào đã có màu nền riêng là nuốt mất dấu chọn — bảng của người dùng
   ô nào cũng có màu, bôi đen mà như không có gì xảy ra. */
.sh-o.chon{box-shadow:inset 0 0 0 9999px rgba(var(--azure-rgb),.26)}
.sh-o.neo{outline:2px solid var(--accent);outline-offset:-2px}
.sh-o.sua{outline:2px solid var(--accent);outline-offset:-2px;white-space:normal;
  overflow:visible;background:#1a1c22}
.sh-o.sh-ct{color:var(--accent);font-variant-numeric:tabular-nums}
.sh-hdrow .sh-o{background:linear-gradient(90deg,#23252c,#1a1c22);
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:12px}
@media (max-width:768px){
  .sh-goiy{display:none}
  .sh-grid{margin:8px 8px}
  .sh-o{height:36px;font-size:14px}
}

/* hộp Kết nối của bảng tính */
.dlg-rong{width:min(560px,calc(100vw - 32px))}
.kn-nhan{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent);margin:14px 0 4px}
.kn-trai{justify-content:flex-start;margin-bottom:2px}

/* ---- thu / mở thanh công cụ trái (desktop) ---- */
#nav-thu-btn{margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;
  width:26px;height:26px;color:var(--tx3);cursor:pointer;font-size:13px;line-height:1;flex:none}
#nav-thu-btn:hover{border-color:var(--accent);color:var(--accent)}
#nav-mo-btn{position:fixed;left:10px;top:10px;z-index:120;display:none;
  width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line2);
  color:var(--tx2);cursor:pointer;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#nav-mo-btn:hover{border-color:var(--accent);color:var(--accent)}
#sidebar{transition:margin-left .24s var(--ease,ease)}
body.nav-thu #sidebar{margin-left:-260px}
body.nav-thu #nav-mo-btn{display:block}
/* nút mở lại chiếm góc trái -> đẩy nội dung topbar + thanh công cụ sang phải kẻo đè nhau */
body.nav-thu .topbar{padding-left:58px}
body.nav-thu .sh-bar{padding-left:58px}
/* nut ☰ noi goc trai chiem cho -> day noi dung topbar sang phai de khoi de len nut dau tien */
body.nav-thu .topbar{padding-left:56px}
body.nav-thu .sh-bar{padding-left:56px}
@media (max-width:768px){
  #nav-thu-btn,#nav-mo-btn{display:none !important}     /* mobile đã có nút ☰ riêng */
  body.nav-thu #sidebar{margin-left:0}
}

/* ---- thanh công cụ bảng tính kiểu Google Sheets ---- */
.sh-sep{width:1px;height:20px;background:var(--line);margin:0 3px;flex:none}
.sh-bar .tb-btn{min-width:30px;padding:5px 8px}
.sh-bar .sh-b{font-weight:800}
.sh-bar .sh-i{font-style:italic;font-family:Georgia,serif}
.sh-bar .sh-s{text-decoration:line-through}
.sh-bar .sh-mauchu{border-bottom:3px solid var(--accent);padding-bottom:3px}
.sh-bangmau{position:fixed;z-index:600;display:flex;gap:6px;align-items:center;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);animation:rise .12s var(--ease,ease)}
.sh-bangmau .sw{width:22px;height:22px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16)}
.sh-bangmau .sw:hover{transform:scale(1.18)}
.sh-bangmau .sw.bo{background:var(--bg3);color:var(--tx3);display:flex;align-items:center;
  justify-content:center;font-size:11px}

/* hàng TRANG (tab) dưới bảng tính — như Google Sheets */
.sh-tabs{display:flex;align-items:center;gap:3px;padding:5px 12px 6px;flex:none;
  border-top:1px solid #2a2d35;background:#16171c;overflow-x:auto;scrollbar-width:thin}
.sh-tabs::-webkit-scrollbar{height:5px}
.sh-tabs::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
.sh-tab{background:none;border:none;border-radius:8px;padding:7px 15px;font-size:12.5px;
  color:var(--tx3);cursor:pointer;white-space:nowrap;font-family:inherit;font-weight:600;
  border-bottom:2px solid transparent;transition:.13s var(--ease,ease)}
.sh-tab:hover{background:var(--bg3);color:var(--tx)}
.sh-tab.on{color:var(--accent);border-bottom-color:var(--accent);
  background:var(--bg3);border-radius:8px 8px 0 0}
.sh-tab.them{min-width:32px;font-size:14px;padding:7px 9px}
.sh-tab.them:hover{color:var(--accent)}
@media (max-width:768px){.sh-tab{padding:9px 14px;font-size:13.5px}}

/* ---- BẢNG TÍNH NỀN SÁNG (bấm ☀️ trên thanh công cụ) — chỉ đổi khu bảng, app vẫn tối ---- */
.sh-sang .sh-wrap{background:#fff}
.sh-sang .sh-grid th,.sh-sang .sh-grid td{border-color:#d0d7de}
.sh-sang .sh-grid tr:first-child th,.sh-sang .sh-grid tr>*:first-child{border-color:#d0d7de}
.sh-sang .sh-grid th{background:#f6f8fa;color:#59636e}
.sh-sang .sh-o{background:#fff;color:#1f2328}
.sh-sang .sh-o.chon{box-shadow:inset 0 0 0 9999px rgba(9,105,218,.17)}
.sh-sang .sh-o.neo{outline-color:#0969da}
.sh-sang .sh-o.sua{outline-color:#0969da;background:#f6f8fa}
.sh-sang .sh-o.sh-ct{color:#0969da}
.sh-sang .sh-hdrow .sh-o{background:linear-gradient(90deg,#ddf4ff,#f0f8ff);color:#1f2328}
.sh-sang .sh-tabs{background:#f6f8fa;border-top-color:#d0d7de}
.sh-sang .sh-tab{color:#59636e}
.sh-sang .sh-tab:hover{background:#eef1f4;color:#1f2328}
.sh-sang .sh-tab.on{color:#0969da;border-bottom-color:#0969da;background:#fff}

/* thanh nhập liệu fx của bảng tính */
.sh-fx{display:flex;align-items:center;gap:8px;padding:6px 18px;flex:none;
  border-bottom:1px solid #2a2d35;background:#101216}
.fx-dc{min-width:46px;text-align:center;font-size:11.5px;color:#9aa3b2;
  border:1px solid #2a2d35;border-radius:6px;padding:5px 6px;font-variant-numeric:tabular-nums}
.fx-in{flex:1;background:#16181d;border:1px solid #2a2d35;border-radius:7px;
  padding:6px 10px;color:#e8eaee;font-size:13px;font-family:inherit;outline:none;min-width:0}
.fx-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13)}
.sh-sang .sh-fx{background:#f6f8fa;border-color:#d0d7de}
.sh-sang .fx-dc{color:#59636e;border-color:#d0d7de}
.sh-sang .fx-in{background:#fff;color:#1f2328;border-color:#d0d7de}
body.nav-thu .sh-fx{padding-left:58px}
@media (max-width:768px){.sh-fx{padding:6px 10px}}

/* nút mở trang hiện tại ra cửa sổ riêng */
.btn-win{min-width:34px;padding:6px 9px;font-size:14px}
.btn-win:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:768px){.btn-win{display:none}}   /* điện thoại không đa cửa sổ */

/* tay kéo giãn chiều cao hàng (mép dưới của số hàng) */
.sh-keo-h{position:absolute;left:0;bottom:-3px;width:100%;height:7px;cursor:row-resize;z-index:2}
.sh-hang:hover{background:#22252d;color:#e8eaee}
.sh-cot:hover{background:#22252d;color:#e8eaee}
.sh-sang .sh-hang:hover,.sh-sang .sh-cot:hover{background:#e7ecf1;color:#1f2328}

/* Ô ĐANG CHỌN — viền dày + chấm góc như Google Sheets, nhìn là biết đang ở đâu */
.sh-o.neo{outline:2px solid var(--accent);outline-offset:-2px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.sh-o.neo::after{content:"";position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;
  background:var(--accent);border:1px solid #0d0e12;border-radius:1px}
.sh-sang .sh-o.neo::after{border-color:#fff}
/* Ô ĐANG NHẬP — nền nổi hẳn + viền đậm hơn, con trỏ nhấp nháy thấy rõ */
.sh-o.sua{outline:2.5px solid var(--accent) !important;outline-offset:-2px;
  background:#1d2027 !important;white-space:normal;overflow:visible;z-index:3;
  box-shadow:0 6px 20px rgba(0,0,0,.45);caret-color:var(--accent)}
.sh-sang .sh-o.sua{background:#fff !important;box-shadow:0 6px 20px rgba(9,105,218,.18)}
.sh-o.sua::after{display:none}
/* ô đang được TRỎ khi gõ hàm bằng phím mũi tên */
.sh-o.tro{outline:2px dashed #E8924D;outline-offset:-2px;background:rgba(232,146,77,.14)}

/* bảng gợi ý cú pháp hàm */
.sh-goiyham{position:fixed;z-index:620;max-width:min(460px,86vw);
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  padding:8px 12px;box-shadow:0 12px 34px rgba(0,0,0,.5);animation:rise .12s var(--ease,ease);
  display:flex;flex-direction:column;gap:3px;pointer-events:none}
.sh-goiyham b{font-size:12.5px;color:var(--accent);font-family:"JetBrains Mono",monospace}
.sh-goiyham span{font-size:11.5px;color:var(--tx3);line-height:1.45}

/* ---------- ô ghi chú: gọn khi chưa dùng, bấm vào mới nở ---------- */
.note-comp.gon .note-main{min-height:0 !important;height:88px !important;overflow:hidden}
/* nở ra thì vừa tay: tối thiểu 200px, tối đa nửa màn hình rồi tự cuộn */
.note-comp:not(.gon) .note-main{min-height:200px !important;max-height:54vh;overflow-y:auto}
.note-comp.gon .note-compbar,.note-comp.gon .note-comp-hint{display:none}
.note-comp .note-main{transition:height .2s var(--ease,ease)}

/* ===== Ô GHI CHÚ = trái tim của trang này: nổi hẳn lên VÀ dính khi cuộn ===== */
.note-comp{position:sticky;top:var(--tb-h,60px);z-index:4;background:var(--bg2);
  transition:box-shadow .25s var(--ease,ease),border-color .25s var(--ease,ease),
  transform .25s var(--ease,ease),padding .18s var(--ease,ease);border-width:1.5px}
/* luôn nền đặc + bóng: khi cuộn qua, note phía sau chạy dưới ô này mà không lộ chữ */
.note-comp{background:var(--panel) !important;
  box-shadow:0 8px 26px rgba(4,10,22,.45)}
.note-comp.gon::after{content:"✍️ Ghi nhanh — ô này luôn ở đây kể cả khi anh cuộn xuống"}
/* viền sáng chạy quanh, mờ lúc nghỉ — rõ dần khi rê chuột, sáng hẳn khi đang gõ */
.note-comp::before{
  content:"";position:absolute;inset:-1.5px;border-radius:12px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,var(--azure,var(--azure)),var(--accent),var(--azure,var(--azure)));
  opacity:.28;transition:opacity .25s var(--ease,ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}
.note-comp:hover::before{opacity:.6}
.note-comp:focus-within::before{opacity:1}
.note-comp > *{position:relative;z-index:1}
.note-comp.gon{box-shadow:0 4px 18px rgba(var(--accent-rgb),.10)}
.note-comp.gon:hover{box-shadow:0 8px 26px rgba(var(--accent-rgb),.20);transform:translateY(-1px)}
.note-comp:focus-within{box-shadow:0 12px 40px rgba(var(--accent-rgb),.26);border-color:transparent}
/* nhịp thở rất nhẹ lúc chưa dùng, để mắt tự tìm tới chỗ này */
@keyframes noteTho{0%,100%{opacity:.24}50%{opacity:.5}}
.note-comp.gon::before{animation:noteTho 3.4s ease-in-out infinite}
.note-comp.gon:hover::before,.note-comp:focus-within::before{animation:none}
/* dòng nhắc khi chưa bấm vào */
.note-comp.gon::after{
  content:"✍️ Bấm vào đây ghi nhanh mọi thứ trong đầu — Ctrl+Enter để lưu";
  position:absolute;left:14px;bottom:-9px;font-size:10.5px;letter-spacing:.2px;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:2px 9px;
  color:var(--accent);z-index:2;pointer-events:none;white-space:nowrap;max-width:calc(100% - 28px);
  overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){
  .note-comp.gon::before{animation:none}
  .note-comp{transition:none}
}
@media (max-width:768px){
  .note-comp.gon .note-main{height:76px !important}
  .note-comp.gon::after{font-size:9.5px;left:10px}
}

/* ---------- thẻ note: có ảnh / có ghi âm thì khung to hơn ---------- */
.note-item.co-anh,.note-item.co-tieng{border-color:var(--line2)}
.note-item.co-anh .note-body.clamp{max-height:320px}
.note-item.co-tieng .note-body.clamp{max-height:200px}
.note-item.co-anh{box-shadow:0 6px 22px rgba(0,0,0,.28)}
.note-item.co-anh .note-body img{max-height:260px;width:auto;border-radius:10px}
.note-item.co-anh::before,.note-item.co-tieng::before{
  content:"🖼️ ảnh";position:absolute;right:12px;top:-9px;font-size:10px;letter-spacing:.3px;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:2px 8px;color:var(--tx3)}
.note-item.co-tieng::before{content:"🎙 ghi âm"}
.note-item.co-anh.co-tieng::before{content:"🖼️ + 🎙"}
.note-item{position:relative}

/* ---------- khung XEM CHI TIẾT NOTE (nổi lên, nền sau mờ) ---------- */
.nc-nen{position:fixed;inset:0;z-index:880;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,10,22,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:dlgVao .16s var(--ease,ease)}
.nc-nen.dang-dong{opacity:0;transition:opacity .13s}
.nc-hop{width:min(820px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:dlgLen .2s var(--ease,ease);overflow:hidden}
.nc-dau{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);
  flex:none;flex-wrap:wrap}
.nc-ngay{font-size:12.5px;color:var(--tx3)}
.nc-than{flex:1;overflow-y:auto;padding:16px 20px}
.nc-tab{display:flex;gap:6px;margin-bottom:12px}
.nc-noidung{font-size:14.5px;line-height:1.65}
.nc-noidung img{max-width:100%;border-radius:12px;margin:8px 0}
.nc-luuy{font-size:11.5px;color:var(--tx3);margin-bottom:8px}
.nc-o{width:100%;min-height:46vh;background:var(--bg3);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--tx);font-size:14.5px;line-height:1.6;
  font-family:inherit;outline:none;resize:vertical}
.nc-o:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.nc-chan{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line);
  flex:none;flex-wrap:wrap}
.nc-xoa:hover{border-color:#e05a4d;color:var(--red)}
@media (max-width:768px){
  .nc-nen{padding:0}
  .nc-hop{width:100%;max-height:100vh;height:100vh;border-radius:0}
  .nc-chan{overflow-x:auto}
}

/* đầu hàng / đầu cột ĐANG CHỌN — nhìn rõ đang chọn mấy hàng để chèn cho đúng */
.sh-hang.dc,.sh-cot.dc{background:var(--accent) !important;color:#04121f !important;
  font-weight:700}
.sh-sang .sh-hang.dc,.sh-sang .sh-cot.dc{background:#0969da !important;color:#fff !important}

/* ô chọn cỡ chữ trên thanh công cụ bảng tính */
.sh-bar .sel-dna{min-width:64px;padding:5px 8px}
.sh-cochu + .sel-dna .sd-chu{font-variant-numeric:tabular-nums;text-align:center;width:100%}

/* ---------- ĐIỆN THOẠI: hàng đầu của thẻ note đang chiếm quá nhiều chỗ ---------- */
@media (max-width:768px){
  .note-head{gap:6px;flex-wrap:nowrap;min-width:0}
  /* nhãn trạng thái: giữ biểu tượng, giấu phần chữ — chạm giữ vẫn đọc được tiêu đề */
  .note-head .badge{padding:2px 7px;gap:0;flex:none;font-size:11px}
  .note-head .badge .bd-chu{display:none}
  .note-time{flex:none;font-size:11px}
  .note-acts{gap:4px;flex:none;margin-left:auto}
  .note-acts .tb-btn{font-size:11px;padding:3px 8px;white-space:nowrap}
  /* nút dài nhất "Đánh dấu đã xử lý" -> rút còn biểu tượng trên màn hẹp */
  .note-item .note-ck{flex:none;margin:0}
}
@media (max-width:480px){
  .note-acts .tb-btn{padding:3px 7px;max-width:96px;overflow:hidden;text-overflow:ellipsis}
}
.badge .bd-ic{line-height:1}
.badge .bd-chu{margin-left:4px}

/* menu chọn dài (danh sách ngày/tuần/tháng) — cuộn trong menu, không tràn màn hình */
.ctx-menu.ctx-dai{max-height:min(62vh,420px);overflow-y:auto;scrollbar-width:thin}
.ctx-menu.ctx-dai::-webkit-scrollbar{width:7px}
.ctx-menu.ctx-dai::-webkit-scrollbar-thumb{background:var(--line2);border-radius:7px}

/* ---------- ĐIỆN THOẠI: thanh lọc Tổng quan không được bóp mất chữ ---------- */
@media (max-width:768px){
  .dash-controls{gap:6px}
  .dash-controls .sel-dna{min-width:104px;max-width:none;flex:0 0 auto;font-size:12.5px;padding:7px 10px}
  .dash-controls .sel-dna .sd-chu{overflow:visible;text-overflow:clip;white-space:nowrap}
  .dash-controls .tb-btn{flex:0 0 auto;white-space:nowrap}
  .dash-nhay{min-width:36px;padding:7px 10px}
  .ctx-menu.ctx-dai{max-height:56vh}
  .ctx-menu{min-width:190px;max-width:82vw}
}

/* ô tìm trong menu chọn (danh sách dài: việc lớn, dự án, ngày tháng…) */
.sd-tim{position:sticky;top:0;z-index:2;width:100%;box-sizing:border-box;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;margin-bottom:5px;color:var(--tx);font-size:12.5px;
  font-family:inherit;outline:none}
.sd-tim:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.16)}
.sd-trong{padding:10px;text-align:center;font-size:12px;color:var(--tx3)}

/* hộp chọn nổi cho danh sách dài (Việc lớn, Dự án, ngày tháng…) */
.hc-nen{z-index:940}
.hc-hop{width:min(560px,calc(100vw - 32px));max-height:82vh;display:flex;flex-direction:column}
.hc-tim{margin-bottom:10px;flex:none}
.hc-ds{flex:1;overflow-y:auto;margin:0 -4px 12px;padding:0 4px;scrollbar-width:thin}
.hc-ds::-webkit-scrollbar{width:8px}
.hc-ds::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.hc-muc{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;color:var(--tx);cursor:pointer;line-height:1.45}
.hc-muc:hover{background:var(--bg3)}
.hc-muc.dang{background:rgba(var(--accent-rgb),.12);color:var(--accent);font-weight:600}
.hc-tick{width:14px;flex:none;color:var(--accent)}
.hc-trong{padding:18px;text-align:center;font-size:12.5px;color:var(--tx3)}
@media (max-width:768px){
  .hc-hop{width:100%;max-height:88vh}
  .hc-muc{padding:12px 11px;font-size:14.5px}
}

/* ================= 🚀 BOT ĐĂNG BÀI (màn hình #bot) ================= */
.bot-wrap{display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.bot-the{
  background:var(--bg3);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.bot-h{
  font-family:var(--font-head);font-size:15px;font-weight:700;margin:0;
  color:var(--accent);letter-spacing:.01em;
}
.bot-phu{color:var(--tx2);font-size:13px;margin-top:3px}
.bot-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}

/* đèn tình trạng */
.bot-luoi-den{display:grid;grid-template-columns:1fr;gap:9px}
@container (min-width:700px){.bot-luoi-den{grid-template-columns:1fr 1fr}}
.bot-den{display:flex;gap:9px;align-items:flex-start}
.bot-den .bd{
  width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px;
}
.bot-den .bd.on{background:var(--green);box-shadow:0 0 8px rgba(94,211,154,.55)}
.bot-den .bd.off{background:var(--red);box-shadow:0 0 8px rgba(255,122,110,.5)}
.bd-chinh{font-size:13.5px;font-weight:600;color:var(--tx)}
.bd-phu{font-size:12.5px;color:var(--tx2);line-height:1.5}

/* hàng nút */
.bot-hang{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.bot-hang .tb-btn.nho{font-size:12px;padding:5px 9px;color:var(--tx3)}
.bot-hang .tb-btn.nho:hover{color:var(--red);border-color:var(--red)}

/* ô nhập */
.bot-luoi-o{display:grid;grid-template-columns:1fr;gap:11px}
@container (min-width:700px){.bot-luoi-o{grid-template-columns:1fr 1fr}}
.bot-o{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.bot-o>span{font-size:12px;font-weight:600;color:var(--tx2)}
.bot-o input{
  background:var(--bg2);border:1px solid var(--line);color:var(--tx);
  border-radius:8px;padding:8px 10px;font:400 13.5px/1.4 var(--font-body);width:100%;
}
.bot-o input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.bot-tip{font-size:11.5px;color:var(--tx3);font-style:normal;line-height:1.45}
.bot-khoa{align-items:flex-end;gap:8px}
.bot-khoa .bot-o{flex:1 1 320px}
.bot-khoa input{font-family:var(--font-mono);font-size:12.5px}

/* lời cảnh báo */
.bot-canh{
  border-left:3px solid var(--yellow);background:var(--yellow-bg);
  padding:9px 12px;border-radius:0 8px 8px 0;color:var(--tx2);font-size:12.5px;line-height:1.55;
}

/* cẩm nang */
.bot-cn{border-top:1px solid var(--line);padding:10px 0}
.bot-cn:first-child{border-top:0;padding-top:2px}
.bot-cn>summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--tx);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;
}
.bot-cn>summary::-webkit-details-marker{display:none}
.bot-cn>summary::before{content:"▸";color:var(--tx3);font-size:12px}
.bot-cn[open]>summary::before{content:"▾"}
.bot-cn ul{margin:8px 0 2px;padding-left:20px}
.bot-cn li,.bot-cn p{color:var(--tx2);font-size:13px;line-height:1.65;margin:5px 0}
.bot-cn b{color:var(--tx)}
.bot-cn code{
  font-family:var(--font-mono);font-size:12px;background:var(--bg2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--yellow);
}
.bot-chip{
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;
}
.bot-chip.do{background:var(--red-bg);color:var(--red)}
.bot-chip.vang{background:var(--yellow-bg);color:var(--yellow)}
.bot-chip.xanh{background:var(--green-bg);color:var(--green)}

/* nhật ký */
.bot-nk-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bot-nk{width:100%;min-width:440px;border-collapse:collapse;font-size:12.5px}
.bot-nk td{padding:6px 9px;border-top:1px solid var(--line);vertical-align:top;color:var(--tx2)}
.bot-nk tr:first-child td{border-top:0}
.bot-nk td.luc{color:var(--tx3);white-space:nowrap;font-family:var(--font-mono);font-size:11.5px}
.bot-nk td.ma{color:var(--accent);white-space:nowrap;font-weight:500}

/* ô đã gộp — cho xuống dòng vì thường là tiêu đề dài */
.sh-o.sh-gop{white-space:normal;overflow:hidden}

/* báo khi bảng chưa có cột Trạng thái (Kanban không dựng được) */
.kb-nostatus{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 28px 4px;
  padding:12px 16px;border:1px solid var(--line2);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--bg2);font-size:13px;color:var(--tx2);line-height:1.55}
.kb-nostatus b{color:var(--tx)}
.kb-nostatus .tb-btn{margin-left:auto;flex:none}
@media (max-width:768px){.kb-nostatus{margin:12px 14px 4px}.kb-nostatus .tb-btn{margin-left:0}}

/* ============ 📡 ROTTACAST — bot đăng bài trong ROTTA ============ */
.bot-tabs{display:flex;gap:2px;padding:0 28px;border-bottom:1px solid var(--line);
  position:sticky;top:60px;z-index:3;background:var(--bg)}
.bot-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--tx3);
  padding:10px 16px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:600;
  transition:.14s var(--ease,ease)}
.bot-tab:hover{color:var(--tx)}
.bot-tab.on{color:var(--accent);border-bottom-color:var(--accent)}

.bot-nhan{font-size:13px;font-weight:700;color:var(--tx2);margin:22px 0 10px}

/* ô số */
.bot-luoi-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.bot-oso{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.bot-oso b{display:block;font-size:26px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--tx)}
.bot-oso span{font-size:12px;color:var(--tx3)}
.bot-oso.xanh b{color:var(--accent)}
.bot-oso.ok b{color:#4CAF7D}
.bot-oso.loi b{color:var(--red)}

/* thẻ kênh */
.bot-luoi-kenh{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:12px}
.bot-kenh{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:.15s var(--ease,ease)}
.bot-kenh:hover{border-color:var(--line2)}
.bot-kenh.tot{border-left:3px solid #4CAF7D}
.bot-kenh.hong{border-left:3px solid #e05a4d}
.bot-kenh.chua{border-left:3px solid var(--line2)}
.bk-dau{display:flex;align-items:center;gap:10px}
.bk-ic{width:31px;height:31px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:16px;flex:none;background:var(--bg3)}
.bk-ten{font-weight:700;font-size:14px;color:var(--tx)}
.bk-tt{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:6px;line-height:1.4}
.bk-cham{width:8px;height:8px;border-radius:50%;flex:none;background:var(--tx3);margin-top:1px}
.bk-cham.tot{background:#4CAF7D;box-shadow:0 0 0 3px rgba(76,175,125,.18)}
.bk-cham.hong{background:#e05a4d;box-shadow:0 0 0 3px rgba(224,90,77,.18)}
.bot-kenh .bot-hang{margin:0}

/* bảng nhật ký */
.bot-nk{width:100%;border-collapse:collapse;font-size:13px}
.bot-nk th{text-align:left;padding:8px 10px;color:var(--tx3);font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}
.bot-nk td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.bot-nk tr:hover td{background:var(--bg3)}
.bot-nk .nk-luc{color:var(--tx3);white-space:nowrap}
.bot-muc{font-size:11px;padding:2px 8px;border-radius:9px;font-weight:700;white-space:nowrap}
.bot-muc.ok{background:rgba(76,175,125,.16);color:#4CAF7D}
.bot-muc.loi{background:rgba(224,90,77,.16);color:var(--red)}
.bot-muc.tin{background:rgba(var(--accent-rgb),.14);color:var(--accent)}

.bot-cn{margin:8px 0}
.bot-cn summary{cursor:pointer;font-size:13.5px;color:var(--accent)}
.bot-cn p{font-size:13px;color:var(--tx3);line-height:1.6;margin:6px 0 0}

@media (max-width:768px){
  .bot-tabs{padding:0 12px;overflow-x:auto;top:48px}
  .bot-tab{padding:10px 12px;font-size:13px}
  .bot-luoi-so{grid-template-columns:1fr 1fr}
}

/* ============ 🗂 THANH TAB + CỬA SỔ MÁY TÍNH THẬT ============
   #workspace bọc thanh tab và vùng nội dung thành một cột dọc, để thanh tab
   luôn nằm trên cùng và #main cuộn riêng bên dưới. */
#workspace{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh}
#workspace > #main{min-height:0}

#tabbar{
  flex:none;display:flex;align-items:stretch;gap:3px;
  padding:5px 8px 0;background:var(--bg2);border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
#tabbar::-webkit-scrollbar{height:5px}
#tabbar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

.rt-tab{
  flex:none;display:flex;align-items:center;gap:7px;max-width:230px;min-width:112px;
  padding:7px 8px 7px 11px;border-radius:8px 8px 0 0;cursor:pointer;
  background:transparent;border:1px solid transparent;border-bottom:none;
  color:var(--tx3);font-size:12.5px;user-select:none;transition:.13s var(--ease,ease);
}
.rt-tab:hover{background:var(--bg3);color:var(--tx2)}
.rt-tab.on{background:var(--bg);border-color:var(--line);color:var(--tx);font-weight:600;
  box-shadow:inset 0 2px 0 var(--accent)}
.rt-tab.keo{opacity:.4}
.rt-tab.dich{box-shadow:inset 3px 0 0 var(--accent)}
.rt-ic{flex:none;font-size:13px;line-height:1}
.rt-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-x{flex:none;width:17px;height:17px;line-height:1;border:0;border-radius:5px;
  background:none;color:var(--tx3);font-size:10px;cursor:pointer;opacity:0;font-family:inherit}
.rt-tab:hover .rt-x,.rt-tab.on .rt-x{opacity:1}
.rt-x:hover{background:#e05a4d;color:#fff}

.rt-them{flex:none;width:30px;border:0;background:none;color:var(--tx3);
  font-size:15px;cursor:pointer;border-radius:7px;font-family:inherit;align-self:center;height:28px}
.rt-them:hover{background:var(--bg3);color:var(--accent)}
.rt-dem{flex:1;min-width:8px}
.rt-tach{flex:none;align-self:center;height:26px;margin-bottom:4px;
  border:1px solid var(--line2);background:none;color:var(--tx3);
  font-size:11.5px;padding:0 10px;border-radius:7px;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.rt-tach:hover{border-color:var(--accent);color:var(--accent);background:var(--bg3)}

/* cửa sổ con (mở bằng 🗗): gọn hết mức, dành chỗ cho nội dung */
body.cua-so-con #tabbar{display:none}
body.cua-so-con.co-quaylai #tabbar{display:flex;padding-top:6px;padding-bottom:2px}
body.cua-so-con.co-quaylai.nav-thu #tabbar{padding-left:56px}   /* chừa nút ☰ nổi */
body.cua-so-con #workspace{height:100vh}

@media (max-width:768px){
  #tabbar{padding:4px 6px 0 56px;gap:2px}   /* chừa chỗ cho nút ☰ nổi ở góc trái */
  .rt-tab{min-width:78px;max-width:150px;padding:6px 6px 6px 9px;font-size:12px}
  #nav-back.nb-trong-tab{max-width:132px;height:26px;font-size:11.5px;padding:0 8px 0 6px}
  .rt-tach{display:none}
  .btn-win2{display:none}          /* điện thoại không có cửa sổ rời */
}

/* ============ 📱 RottaCast trên điện thoại ============
   Trước đây thanh tiêu đề dài hơn màn hình nên nút "Chạy quét ngay" và nút ↻ bị đẩy ra
   ngoài rìa, bấm không tới. Chữa gốc: cho thanh tiêu đề ĐƯỢC XUỐNG DÒNG thay vì cắt cụt —
   áp cho mọi trang, không riêng bot, để lần sau thêm nút mới cũng không văng ra ngoài. */
@media (max-width:768px){
  .topbar > h1{white-space:nowrap}
  .topbar .crumb{white-space:nowrap}
  .bot-phu{display:none}                       /* dòng phụ "bot đăng bài đa kênh" — bỏ cho gọn */

  .bot-tabs{padding:0 10px;overflow:visible}
  .bot-tab{flex:1;min-width:0;padding:9px 4px;font-size:12.5px;text-align:center}

  .bot-wrap{gap:10px}
  .home-wrap.bot-wrap{padding:14px 12px 28px}

  /* 4 ô số: gọn còn 1/2 chiều cao, vẫn đọc được số từ xa */
  .bot-luoi-so{grid-template-columns:1fr 1fr;gap:8px}
  .bot-oso{padding:9px 11px;border-radius:12px}
  .bot-oso b{font-size:21px}
  .bot-oso span{font-size:11px;line-height:1.3;display:block}

  /* thẻ kênh: một cột, bó sát */
  .bot-luoi-kenh{grid-template-columns:1fr;gap:8px}
  .bot-kenh{padding:11px 12px;gap:8px;border-radius:12px}
  .bk-ic{width:26px;height:26px;font-size:14px;border-radius:8px}
  .bk-ten{font-size:13px}
  .bk-tt{font-size:11.5px}
  .bot-nhan{margin:14px 0 8px}

  /* nút dài thì xuống dòng trong nút, đừng tràn ra ngoài thẻ */
  .bot-hang .tb-btn{white-space:normal;text-align:left;line-height:1.35}

  /* NHẬT KÝ: bảng 3 cột không vừa màn hình dọc -> mỗi dòng thành một thẻ nhỏ */
  .bot-nk,.bot-nk tbody,.bot-nk tr,.bot-nk td{display:block;width:100%;
    min-width:0;max-width:100%;flex:0 1 auto}
  .bot-nk td{overflow-wrap:anywhere}
  .bot-nk tr:first-child{display:none}          /* hàng tiêu đề: thẻ đã tự nói lên rồi */
  .bot-nk tr{border:1px solid var(--line);border-radius:11px;padding:9px 11px;
    margin-bottom:8px;background:var(--panel)}
  .bot-nk td{border:0;padding:1px 0}
  .bot-nk tr:hover td{background:none}
  .bot-nk .nk-luc{font-size:11px;color:var(--tx3)}
  .bot-nk td:nth-child(3){font-size:12.5px;line-height:1.5;margin-top:3px}

  /* cài đặt: ô nhập full chiều ngang, nút Lưu xuống dòng riêng cho dễ bấm */
  .bot-khoa{flex-direction:column;align-items:stretch}
  .bot-khoa .bot-o{flex:1 1 auto}
  .bot-khoa .tb-btn{align-self:flex-start}
  .bot-canh{font-size:12.5px;line-height:1.55}
  .bot-cn summary{font-size:13px}
}

/* ============ 🗃 KHO BẢNG TÍNH — nhóm, tìm, ghim ============ */
#main:has(.kb-khung){overflow:hidden;display:flex;flex-direction:column}
.kb-khung{flex:1;min-height:0;display:flex;align-items:stretch}

.kb-tim{
  flex:0 1 300px;min-width:120px;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:6px 11px;font-size:13px;color:var(--tx);
  font-family:inherit;outline:none;
}
.kb-tim:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.sh-dem{flex:none}

/* cột nhóm */
.kb-ben{
  flex:none;width:216px;border-right:1px solid var(--line);background:var(--bg2);
  overflow-y:auto;padding:10px 8px 20px;display:flex;flex-direction:column;gap:1px;
}
.kb-nhan{font-size:10.5px;font-weight:700;color:var(--tx3);letter-spacing:.5px;
  padding:14px 10px 4px}
.kb-nhom{
  display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;
  cursor:pointer;color:var(--tx2);font-size:13px;transition:.12s var(--ease,ease);
}
.kb-nhom:hover{background:var(--bg3);color:var(--tx)}
.kb-nhom.on{background:var(--bg3);color:var(--tx);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent)}
.kb-nhom.nhan{background:rgba(var(--accent-rgb),.18);box-shadow:inset 0 0 0 1px var(--accent)}
.kb-ic{flex:none;font-size:13px;line-height:1}
.kb-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-so{flex:none;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.kb-them{
  margin:10px 6px 0;background:none;border:1px dashed var(--line2);border-radius:8px;
  color:var(--tx3);font-size:12px;padding:7px;cursor:pointer;font-family:inherit;
}
.kb-them:hover{border-color:var(--accent);color:var(--accent)}

/* lưới bảng */
.kb-chinh{flex:1;min-width:0;overflow-y:auto;padding:0 0 30px}
.kb-thanh{display:flex;align-items:center;gap:10px;padding:14px 24px 10px;
  position:sticky;top:0;background:var(--bg);z-index:2}
.kb-tit{font-size:15px;font-weight:700;color:var(--tx)}
.kb-phu{font-size:12px;color:var(--tx3)}
.kb-nhieu{display:flex;align-items:center;gap:10px;margin:0 24px 10px;padding:9px 13px;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35);border-radius:10px;
  font-size:13px;color:var(--tx)}
.kb-luoi{padding:0 24px}
.kb-chinh .empty-note{margin:10px 24px}

.kb-o{position:relative;cursor:pointer}
.kb-o.keo{opacity:.4}
.kb-o.chon{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 6px 20px rgba(0,0,0,.35)}
.kb-o.ghim{border-left:3px solid var(--yellow)}
.kb-sao{position:absolute;top:9px;right:11px;font-size:12px}
.kb-duong{font-size:11px;color:var(--tx3);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width:768px){
  /* điện thoại: cột nhóm thành hàng chip cuộn ngang trên đầu */
  .kb-khung{flex-direction:column}
  .kb-ben{width:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;
    border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
  .kb-nhan,.kb-them{display:none}
  .kb-nhom{flex:none;padding:5px 11px;border-radius:20px;border:1px solid var(--line2);
    white-space:nowrap;padding-left:11px !important}
  .kb-nhom.on{box-shadow:none;border-color:var(--accent)}
  .kb-ten{overflow:visible}
  .kb-thanh{padding:12px 14px 8px}
  .kb-luoi,.kb-nhieu,.kb-chinh .empty-note{margin-left:0;margin-right:0;padding-left:14px;padding-right:14px}
  .kb-tim{flex:1 1 100%;order:9}
}

/* ============ 🔒 Ô DÍNH TRONG BẢNG TÍNH ============
   Hàng chữ cái (A B C…) và cột số thứ tự (1 2 3…) luôn dính, cộng thêm số hàng/cột
   dữ liệu mà người dùng tự cố định. Toạ độ top/left do JS đo và gắn thẳng vào ô. */
.sh-grid tr.dinh-tren{position:sticky}          /* dính DỌC đặt trên hàng, không trên ô */
.sh-grid .dinh-trai{position:sticky;left:0;z-index:4}
.sh-grid tr.dinh-tren .dinh-trai{z-index:6}     /* ô góc: nằm trên tất cả */
.sh-grid tr.dinh-tren td,.sh-grid td.dinh-trai{background:#121317}
.sh-grid tr.dinh-tren th,.sh-grid th.dinh-trai{background:#1a1c22}
.sh-sang .sh-grid tr.dinh-tren td,.sh-sang .sh-grid td.dinh-trai{background:#fff}
.sh-sang .sh-grid tr.dinh-tren th,.sh-sang .sh-grid th.dinh-trai{background:#f6f8fa}
/* ô dữ liệu đang được tô nền riêng thì giữ nền đó, đừng để nền đục đè mất */
.sh-grid td.dinh-tren[style*="background"],.sh-grid td.dinh-trai[style*="background"]{
  background-image:none}
/* vạch ranh giới vùng đã cố định — nhìn là biết đang đóng băng tới đâu */
.sh-grid .dinh-vien-d{box-shadow:inset 0 -2px 0 var(--accent)}
.sh-grid .dinh-vien-p{box-shadow:inset -2px 0 0 var(--accent)}
.sh-grid .dinh-vien-d.dinh-vien-p{
  box-shadow:inset 0 -2px 0 var(--accent),inset -2px 0 0 var(--accent)}
.sh-zoom-so{min-width:52px;font-variant-numeric:tabular-nums}

/* thanh công cụ bảng tính khi cửa sổ hẹp: một dòng vuốt ngang thay vì xếp 4-5 tầng */
@media (max-width:1100px){
  .sh-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .sh-bar::-webkit-scrollbar{height:5px}
  .sh-bar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
  .sh-bar > *{flex:none}
}

/* bảng tính dùng chung bộ chữ với app, và ưu tiên font "So Khoanh" cho ① ② ③ */
.sh-grid,.sh-fx,.sh-o{font-family:var(--font-body)}

/* ---------- hiển thị chữ trong ô bảng tính ---------- */
.sh-o.o-xuongdong{white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  text-overflow:clip;overflow:hidden;vertical-align:top;line-height:1.4;padding-top:6px}
.sh-o.o-tran{overflow:visible;text-overflow:clip;position:relative;z-index:1}

/* link trong ô bảng tính — bấm là mở tab trình duyệt mới */
.sh-o .sh-link{color:#5ab0ff;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sh-o .sh-link:hover{color:#8ec8ff}
.sh-sang .sh-o .sh-link{color:#0969da}
.sh-sang .sh-o .sh-link:hover{color:#0550ae}

/* Kéo bôi đen ô: CHẶN bôi đen chữ của trình duyệt.
   Trước đây kéo chọn 3 ô thì trình duyệt cũng bôi đen chữ chạy dài qua cả loạt ô khác —
   hai kiểu bôi đè lên nhau, nhìn rối và dễ tưởng đang chọn nhầm. Bảng tính có lệnh chép
   riêng (Ctrl+C chép đúng vùng ô đang chọn) nên không cần bôi đen chữ kiểu trình duyệt. */
.sh-grid{user-select:none;-webkit-user-select:none}
.sh-o.sua{user-select:text;-webkit-user-select:text}
.sh-o .sh-link{user-select:text;-webkit-user-select:text}

/* ---------- BẢNG TRONG TRANG: rộng hẹp hợp lý, kéo mép chỉnh cột ---------- */
.blk-bang{padding:0}
.blk-bang .bang-cuon{overflow-x:auto;max-width:100%;scrollbar-width:thin;
  border:1px solid var(--line);border-radius:8px}
.blk-bang .bang-cuon::-webkit-scrollbar{height:6px}
.blk-bang .bang-cuon::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.blk-bang table{display:table;table-layout:fixed;border-collapse:collapse;margin:0;
  width:auto;min-width:100%;font-size:13.5px}
.blk-bang th,.blk-bang td{border:1px solid var(--line);padding:8px 11px;vertical-align:top;
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;position:relative}
.blk-bang th{background:var(--bg3);font-weight:700;text-align:left}
.blk-bang tr:nth-child(even) td{background:rgba(255,255,255,.016)}
.blk-bang a{overflow-wrap:anywhere}
/* tay kéo ở mép phải mỗi cột — chỉ hiện khi rê chuột vào bảng cho đỡ rối */
.bcot-keo{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:2}
.blk-bang:hover .bcot-keo{background:linear-gradient(90deg,transparent 2px,
  rgba(var(--accent-rgb),.35) 2px,rgba(var(--accent-rgb),.35) 5px,transparent 5px)}
.bcot-keo:hover{background:var(--accent) !important}
.blk-bang.dang-keo-cot{user-select:none}
.blk-bang.dang-keo-cot .bcot-keo{background:var(--accent) !important}
@media (max-width:768px){
  .blk-bang th,.blk-bang td{padding:6px 8px;font-size:12.5px}
  .bcot-keo{display:none}
}
.blk-bang td[contenteditable],.blk-bang th[contenteditable]{cursor:text;outline:none}
.blk-bang td:focus,.blk-bang th:focus{box-shadow:inset 0 0 0 2px var(--accent);
  background:var(--bg3)}

/* ---------- BỘ CHỌN MÀU RGB ---------- */
.mau-hop{position:fixed;z-index:1000;width:268px;padding:12px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 46px rgba(0,0,0,.55);font-size:12.5px}
.mau-nhan{font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.4px;
  text-transform:uppercase;margin:0 0 7px}
.mau-nhan.nho{margin:12px 0 6px}
.mau-luoi{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.mau-luoi.gan{grid-template-columns:repeat(12,1fr)}
.mau-luoi .sw{width:100%;aspect-ratio:1;border-radius:5px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);transition:transform .1s}
.mau-luoi .sw:hover{transform:scale(1.18);border-color:#fff}
.mau-sv{position:relative;height:112px;border-radius:8px;cursor:crosshair;
  border:1px solid var(--line);overflow:hidden}
.mau-tro{position:absolute;width:13px;height:13px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
.mau-hue{position:relative;height:14px;margin-top:9px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.mau-troh{position:absolute;top:-3px;width:8px;height:calc(100% + 6px);border-radius:4px;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);transform:translateX(-50%);
  pointer-events:none}
.mau-hang{display:flex;align-items:center;gap:5px;margin-top:10px}
.mau-xem{width:26px;height:26px;border-radius:6px;flex:none;border:1px solid var(--line2)}
.mau-hex{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;color:var(--tx);font-family:var(--font-mono);font-size:12px;outline:none}
.mau-so{width:38px;flex:none;background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:5px 4px;color:var(--tx);font-size:11.5px;text-align:center;outline:none;
  font-variant-numeric:tabular-nums}
.mau-hex:focus,.mau-so:focus{border-color:var(--accent)}
.mau-nut{display:flex;gap:7px;margin-top:11px}
.mau-nut .tb-btn{flex:1;text-align:center;padding:6px 8px}
@media (max-width:768px){
  .mau-hop{width:calc(100vw - 24px);left:12px !important}
  .mau-luoi.gan{grid-template-columns:repeat(8,1fr)}
}
/* ô vừa được chọn vừa nằm trong hàng/cột đã cố định: giữ cả vạch ranh giới lẫn màu chọn */
.sh-grid .dinh-vien-d.chon{box-shadow:inset 0 0 0 9999px rgba(var(--azure-rgb),.26),
  inset 0 -2px 0 var(--accent)}
.sh-grid .dinh-vien-p.chon{box-shadow:inset 0 0 0 9999px rgba(var(--azure-rgb),.26),
  inset -2px 0 0 var(--accent)}

/* ---------- NÚT ĐANG CHỜ: chấm nhấp nháy + thanh chạy ---------- */
.tb-btn.dang-cho{position:relative;overflow:hidden;padding-bottom:8px;cursor:progress;
  opacity:1;border-color:var(--accent)}
.ncho-diem{display:inline-flex;gap:3px;margin-right:7px;vertical-align:middle}
.ncho-diem i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.32;
  animation:nchoNhay 1s infinite}
.ncho-diem i:nth-child(2){animation-delay:.16s}
.ncho-diem i:nth-child(3){animation-delay:.32s}
@keyframes nchoNhay{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}
.ncho-chu{font-variant-numeric:tabular-nums}
.ncho-thanh{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(125,125,125,.22);overflow:hidden}
.ncho-thanh > i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .25s linear}
/* không ước lượng được thời gian -> vệt sáng chạy qua lại cho biết máy vẫn đang làm */
.tb-btn.dang-cho.khong-uoc .ncho-thanh > i{width:38%;transition:none;
  animation:nchoChay 1.15s ease-in-out infinite}
@keyframes nchoChay{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){
  .ncho-diem i,.tb-btn.dang-cho.khong-uoc .ncho-thanh > i{animation:none}
  .tb-btn.dang-cho.khong-uoc .ncho-thanh > i{width:100%;opacity:.5}
}

/* ---------- 🔒 MÀN HÌNH TÍNH NĂNG TRẢ PHÍ ---------- */
.khoa-wrap{display:flex;justify-content:center;padding-top:48px}
.khoa-hop{max-width:560px;text-align:center;background:var(--panel);border:1px solid var(--line2);
  border-radius:18px;padding:40px 42px;box-shadow:var(--shadow)}
.khoa-ic{font-size:52px;margin-bottom:10px}
.khoa-hop h2{font-size:21px;margin-bottom:10px;font-family:var(--font-head)}
.khoa-mo{color:var(--tx2);font-size:14.5px;line-height:1.65}
.khoa-ds{text-align:left;margin:18px auto 4px;max-width:440px;color:var(--tx2);
  font-size:13.5px;line-height:1.7;padding-left:20px}
.khoa-ds li{margin-bottom:4px}
.khoa-lh{margin:20px 0 16px;padding:13px 17px;border:1px solid var(--glow);
  border-radius:12px;background:rgba(var(--accent-rgb),.07);font-size:14px;color:var(--tx)}
.khoa-lai{margin-top:2px}

/* ============ 🌓 CHỦ ĐỀ MÀU (settings.brand.giao_dien) ============
   Nguyên tắc phối: 4 TẦNG NỀN tách nhau rõ (nền app → cột/sidebar → ô nổi → thẻ trắng/panel),
   một MÀU NHẤN đậm + một MÀU PHỤ khác tông, bộ badge đa sắc pastel — không để cả app một màu. */

/* — ĐEN TUYỀN: than chì phân tầng, nhấn cyan giữ nguyên, viền ấm nhẹ cho đỡ lạnh — */
html[data-theme="toi"]{
  --accent-rgb:25,183,255;
  --bg:#09090B; --bg2:#101014; --bg3:#1B1B21; --panel:#141419;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.22);
  --tx:#EEEEF2; --tx2:#A6A6B0; --tx3:#6C6C76; --navy:#101014; --deep:#1B1B21;
  --panel-grad:linear-gradient(180deg,#17171D,#101015);
  --gray-bg:#222229; --blue-bg:#15243E; --green-bg:#12312A; --yellow-bg:#33301C;
  --red-bg:#38201F; --purple-bg:#2A2140;
}
html[data-theme="toi"] #sidebar{background:linear-gradient(180deg,#0D0D11 0%,#070709 100%)}

/* — TRẮNG SÁNG: nền xám-xanh dịu để thẻ TRẮNG nổi hẳn lên, nhấn xanh dương, chữ than đậm — */
html[data-theme="sang"]{
  --bg:#E9EDF4; --bg2:#F7F9FC; --bg3:#DEE5EF; --panel:#FFFFFF;
  --line:rgba(25,45,85,.17); --line2:rgba(25,45,85,.34);
  --tx:#141E2C; --tx2:#3E4C64; --tx3:#6F7A8D; --navy:#DCE4F0; --deep:#CBD7E7;
  --accent:#2470E8; --accent-rgb:36,112,232; --azure:#2E86FF; --glow:rgba(36,112,232,.20);
  --shadow:0 8px 26px rgba(30,50,90,.13), 0 0 0 1px rgba(25,45,85,.05);
  --panel-grad:linear-gradient(180deg,#FFFFFF,#F4F7FB);
  --gray-bg:#E7EBF2; --blue-bg:#DCEAFD; --green-bg:#D8F1E3; --yellow-bg:#F8EFD2;
  --red-bg:#FBE1DD; --purple-bg:#EAE2F8;
  --red:#B93A2C; --green:#1E7A4C; --yellow:#8A6C16; --blue:#1A53B0; --purple:#6B3FA0;
  --blue-rgb:26,83,176; --green-rgb:30,122,76; --purple-rgb:107,63,160;
}
html[data-theme="sang"] #sidebar{background:linear-gradient(180deg,#FCFDFF 0%,#E8EDF5 100%)}

/* — HỒNG PASTEL: nền kem hồng, sidebar hồng đào rõ tầng, nhấn hồng đậm + màu phụ TÍM LAVENDER,
     badge đa sắc kẹo ngọt — hồng nhưng không "một màu hồng" — */
html[data-theme="hong"]{
  --bg:#F6E8EF; --bg2:#FDF6F9; --bg3:#EFD5E2; --panel:#FFFFFF;
  --line:rgba(165,55,105,.22); --line2:rgba(165,55,105,.40);
  --tx:#381E2B; --tx2:#6E4256; --tx3:#966A7D; --navy:#F0D6E2; --deep:#E7C3D5;
  --accent:#D23F86; --accent-rgb:210,63,134; --azure:#8B68CC; --azure-rgb:139,104,204;
  --glow:rgba(210,63,134,.22);
  --shadow:0 8px 26px rgba(200,100,150,.15), 0 0 0 1px rgba(185,80,135,.07);
  --panel-grad:linear-gradient(180deg,#FFFFFF,#FBEFF5);
  --gray-bg:#F1E5EB; --blue-bg:#E7E1F7; --green-bg:#DCF2E5; --yellow-bg:#FAF0D5;
  --red-bg:#FBDFE5; --purple-bg:#F1DFF3;
  --red:#C24458; --green:#2A7A52; --yellow:#95701C; --blue:#5A4FB0; --purple:#9C4E9C;
  --blue-rgb:90,79,176; --green-rgb:42,122,82; --purple-rgb:156,78,156;
}
html[data-theme="hong"] #sidebar{background:linear-gradient(180deg,#FCF1F6 0%,#F0CADD 100%)}

/* hai chủ đề SÁNG: chỉnh mấy chỗ sinh ra cho nền tối */
html[data-theme="sang"] .tile,html[data-theme="hong"] .tile{background:var(--panel)}
html[data-theme="sang"] ::selection{background:rgba(var(--azure-rgb),.22)}
html[data-theme="hong"] ::selection{background:rgba(222,78,147,.2)}
html[data-theme="sang"] .card,html[data-theme="hong"] .card{box-shadow:0 1px 3px rgba(40,50,80,.10)}
html[data-theme="sang"] .col,html[data-theme="hong"] .col{background:var(--bg2)}
/* nút chính trên nền accent đậm: chữ trắng mới đủ tương phản (bản tối dùng chữ navy) */
html[data-theme="sang"] .tb-btn.primary,html[data-theme="hong"] .tb-btn.primary{color:#FFFFFF}
/* badge trên nền sáng: đậm chữ thêm một nấc, viền mảnh cho khỏi lẫn vào thẻ trắng */
html[data-theme="sang"] .badge,html[data-theme="hong"] .badge{
  font-weight:700;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
/* dòng meta nhỏ (sửa …/lịch …) trên thẻ: dùng tx3 đã tăng đậm, cỡ giữ nguyên */
html[data-theme="sang"] .card,html[data-theme="hong"] .card{border-color:var(--line)}
html[data-theme="sang"] .card:hover,html[data-theme="hong"] .card:hover{border-color:var(--line2)}
/* tiêu đề cột kanban + nhãn nhóm sidebar: rõ hơn trên nền sáng */
html[data-theme="sang"] .col-head,html[data-theme="hong"] .col-head{color:var(--tx2)}
html[data-theme="sang"] .nav-label,html[data-theme="hong"] .nav-label{color:var(--tx3)}

/* ---------- ⚙️ TRUNG TÂM CÀI ĐẶT ---------- */
.cdx{width:min(660px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden}
.cdx-dau{flex:none;display:flex;align-items:center;padding:16px 20px 12px;
  border-bottom:1px solid var(--line)}
.cdx-tit{flex:1;font-size:17px;font-weight:800;font-family:var(--font-head)}
.cdx-x{width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--tx3);
  font-size:14px;cursor:pointer}
.cdx-x:hover{background:var(--red-bg);color:var(--red)}
.cdx-than{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 22px;
  display:flex;flex-direction:column;gap:14px}
.cdx-sec{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.cdx-sech{font-size:13.5px;font-weight:700;margin-bottom:10px}
.cdx-phu{font-weight:400;font-size:12px;color:var(--tx3);margin-left:8px}
.cdx-secb{display:flex;flex-direction:column;gap:10px}
.cdx-hang2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cdx-o{display:flex;flex-direction:column;gap:4px}
.cdx-o>span{font-size:11.5px;font-weight:600;color:var(--tx3)}
.cdx-o input{background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:13.5px;color:var(--tx);outline:none;font-family:inherit}
.cdx-o input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.cdx-xem{font-size:12.5px;color:var(--tx2);background:var(--bg3);border-radius:9px;
  padding:8px 12px;line-height:1.5}
.cdx-nhan{font-size:11.5px;font-weight:600;color:var(--tx3)}
.cdx-nhan2{font-size:12.5px;color:var(--tx2);flex:none}
.cdx-chude{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.cdx-cd{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--tx2);font-size:12.5px;
  cursor:pointer;font-family:inherit;transition:.13s var(--ease,ease)}
.cdx-cd:hover{border-color:var(--line2);color:var(--tx)}
.cdx-cd.on{border-color:var(--accent);color:var(--tx);font-weight:600;
  box-shadow:0 0 0 2px var(--glow)}
.cdx-cdmau{width:22px;height:22px;border-radius:7px;flex:none;
  border:1px solid rgba(128,128,128,.35)}
.cdx-auto{display:flex;flex-direction:column;gap:8px;margin-top:9px;padding:10px;
  border:1px dashed var(--line2);border-radius:11px;background:var(--bg3)}
.cdx-autoo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2)}
.cdx-autoo>span{flex:none;min-width:88px}
.cdx-autoo select{flex:1;min-width:0;background:var(--panel);color:var(--tx);font-family:inherit;
  border:1px solid var(--line);border-radius:8px;padding:5px 7px;font-size:12px;cursor:pointer}
.cdx-hangnut{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cdx-sw{min-width:96px;height:28px;border-radius:8px;border:1px solid var(--line2);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--tx3)}
.cdx-sw:not(.rong){color:transparent}
@media (max-width:600px){.cdx-hang2{grid-template-columns:1fr}}
.cdx-inkey{flex:1;min-width:200px;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:13px;color:var(--tx);outline:none;
  font-family:var(--font-mono)}
.cdx-inkey:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.cdx-xem a{color:var(--accent)}

/* ---------- 💰 TÀI CHÍNH CÁ NHÂN (riêng bản người dùng) ---------- */
.tc-tabs{display:flex;gap:4px;padding:8px 20px 0;overflow-x:auto;scrollbar-width:thin;flex:none;
  border-bottom:1px solid var(--line);background:var(--bg)}
.tc-tab{flex:none;border:0;background:none;color:var(--tx3);font-family:inherit;font-size:13px;font-weight:600;
  padding:8px 12px;border-radius:9px 9px 0 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tc-tab:hover{color:var(--tx);background:var(--bg2)}
.tc-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tc-tab-n{font-size:10.5px;background:var(--accent);color:#fff;border-radius:99px;padding:1px 6px;font-weight:700}
.tc-tab-n.do{background:var(--red)}
.tc-noi{padding:16px 20px 40px;display:flex;flex-direction:column;gap:14px;max-width:1180px}
.tc-cnt{background:var(--accent)!important;color:#fff!important;border-radius:99px;padding:0 6px;font-weight:700}
.tc-chao{background:var(--bg2);border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--tx2)}
.tc-thang{display:flex;align-items:center;gap:8px}
.tc-thang-ten{font-family:var(--font-head);font-weight:800;font-size:18px;min-width:150px;text-align:center}
.tc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tc-stat{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;border-top:3px solid var(--accent)}
.tc-stat.no{border-top-color:var(--red)}.tc-stat.thu{border-top-color:var(--green)}.tc-stat.chi{border-top-color:var(--yellow)}
.tc-stat-nhan{font-size:11.5px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px}
.tc-stat-gt{font-family:var(--font-head);font-weight:800;font-size:22px;margin-top:4px;letter-spacing:-.3px}
.tc-stat-phu{font-size:11.5px;color:var(--tx3);margin-top:3px}
.tc-hai{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tc-sec{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.tc-sec-tit{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:10px}
.tc-sec-tit .tb-btn{margin-left:auto}
.tc-trong{font-size:12.5px;color:var(--tx3);line-height:1.55}
.tc-trong.lon{padding:30px;text-align:center;font-size:14px}
.tc-mo{font-size:11.5px;color:var(--tx3)}
.tc-bar-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:10px;font-size:12.5px;cursor:pointer;padding:3px 0}
.tc-bar-row:hover .tc-bar-ten{color:var(--accent)}
.tc-bar-ten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-bar{height:10px;background:var(--bg3);border-radius:99px;overflow:hidden}
.tc-bar-fill{height:100%;border-radius:99px;background:var(--red);opacity:.85}
.tc-bar-fill.thu{background:var(--green)}
.tc-bar-so{font-size:11.5px;color:var(--tx3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tc-han{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:var(--bg3);font-size:12.5px;flex-wrap:wrap}
.tc-han-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--gray-bg);color:var(--tx2);white-space:nowrap}
.tc-han-badge.hom{background:var(--red-bg);color:var(--red)}
.tc-han-badge.mai{background:var(--yellow-bg);color:var(--yellow)}
.tc-han-badge.qua{background:var(--red);color:#fff}
.tc-han-ten{flex:1;min-width:140px}
.tc-han-ngay{color:var(--tx3);margin-left:8px;font-size:11.5px}
.tc-han-so{font-weight:700;font-variant-numeric:tabular-nums}
.tc-tk-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tc-tk-mini-o{border-left:3px solid var(--accent);background:var(--bg3);border-radius:8px;padding:8px 10px;cursor:pointer}
.tc-tk-mini-ten{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-tk-mini-sd{font-weight:700;font-size:13.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.tc-tk-mini-sd.chi{color:var(--red)}
.tc-loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tc-loc-gach{color:var(--tx3)}
.tc-in{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--tx);
  outline:none;font-family:inherit;min-width:0}
.tc-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
select.tc-in{cursor:pointer}
.tc-in.nho{padding:4px 8px;font-size:12px;width:170px}
.tc-tom{font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-tien{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-tien.thu{color:var(--green)}.tc-tien.chi{color:var(--red)}.tc-tien.chuyen{color:var(--tx3)}
.tc-tien.lon{font-size:17px}
.tc-list{display:flex;flex-direction:column;gap:2px}
.tc-gd-ngay{font-size:11.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;margin:12px 0 4px;
  display:flex;align-items:center;gap:10px}
.tc-gd-ngay-tong{margin-left:auto;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.tc-gd{display:grid;grid-template-columns:auto 44px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  cursor:pointer;border:1px solid transparent}
.tc-gd:hover{background:var(--bg2);border-color:var(--line)}
.tc-gd.mo{opacity:.55}
.tc-gd.chua{border-left:3px solid var(--yellow)}
.tc-gd-gio{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.tc-gd-nd{min-width:0}
.tc-gd-tit{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-gd-meta{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-cb{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.tc-cpl{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:9px}
.tc-cpl-dau{display:flex;align-items:flex-start;gap:12px}
.tc-cpl-nd{flex:1;min-width:0}
.tc-cpl-nd .tc-gd-tit{white-space:normal}
.tc-goc{font-size:11px;color:var(--tx3);font-family:var(--font-mono,monospace);margin-top:3px;word-break:break-word;opacity:.8}
.tc-cpl-tk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-nhan{font-size:11.5px;font-weight:600;color:var(--tx3)}
.tc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tc-chip{border:1px solid var(--line);background:var(--panel);color:var(--tx2);border-radius:99px;padding:4px 10px;font-size:12px;
  cursor:pointer;font-family:inherit;transition:.12s}
.tc-chip:hover{border-color:var(--accent);color:var(--tx);background:var(--bg3)}
.tc-chip.goiy{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--glow);font-weight:600}
.tc-chip.xam{border-style:dashed}
.tc-chip.nho{border-color:transparent;background:var(--bg3)}
.tc-nho{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-nho.on .tc-chip.nho{border-color:var(--accent);color:var(--accent)}
.tc-nho-mo{font-size:11px;color:var(--tx3)}
.tc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tc-card{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:5px}
.tc-card.an{opacity:.5}
.tc-card-tit{display:flex;flex-direction:column;gap:1px}
.tc-card-tit b{font-size:13.5px}
.tc-card-tit span{font-size:11.5px;color:var(--tx3)}
.tc-card-sd{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.tc-card-sd.chi{color:var(--red)}
.tc-card-phu{font-size:11.5px;color:var(--tx3);line-height:1.5}
.tc-card-nut{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tc-prog{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden}
.tc-prog-fill{height:100%;background:var(--red);border-radius:99px}
.tc-prog-fill.thu{background:var(--green)}
.tb-btn.nho{padding:4px 9px;font-size:11.5px}
.tc-hang{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tc-o-ngang{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2)}
.tc-url{background:var(--bg3);border-radius:10px;padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px}
.tc-url code{flex:1;min-width:200px;word-break:break-all;font-size:11.5px;color:var(--tx)}
.tc-hd{background:var(--bg3);border-radius:10px;padding:8px 12px;font-size:12.5px}
.tc-hd summary{cursor:pointer;font-weight:600;color:var(--tx2)}
.tc-hd-than{margin-top:8px;line-height:1.6;color:var(--tx2)}
.tc-hd-than ol{padding-left:20px;margin:4px 0 8px}
.tc-hd-than code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11.5px}
/* hộp nhập liệu */
.tc-dlg{width:min(520px,calc(100vw - 24px));max-height:92vh;overflow-y:auto}
.tc-dlg.rong{width:min(720px,calc(100vw - 24px))}
.tc-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:4px 0 14px}
.tc-o{display:flex;flex-direction:column;gap:4px;min-width:0}
.tc-o>span{font-size:11.5px;font-weight:600;color:var(--tx3)}
.tc-o.check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1}
.tc-o.check>span{font-weight:500;color:var(--tx2);font-size:12.5px}
.tc-o input[type=color]{padding:2px;height:34px;width:60px}
.tc-o-mo{font-size:11px;color:var(--tx3);font-style:normal}
.tc-xemtruoc{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-height:220px;overflow:auto;font-size:12.5px}
.tc-xemtruoc.bang{overflow:auto}
.tc-xemtruoc table{border-collapse:collapse;font-size:11.5px;white-space:nowrap}
.tc-xemtruoc td{border:1px solid var(--line);padding:3px 6px;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tc-xemtruoc td.stt{color:var(--tx3);background:var(--bg3)}
.tc-xt{padding:5px 8px;background:var(--bg3);border-radius:7px}
.tc-xt.bo{color:var(--yellow)}
.tc-tile{border-top:3px solid var(--accent)}
@media (max-width:760px){
  .tc-hai{grid-template-columns:1fr}
  .tc-noi{padding:12px 12px 40px}
  .tc-bar-row{grid-template-columns:110px 1fr auto}
  .tc-gd{grid-template-columns:auto 40px 1fr;grid-template-areas:"cb gio nd" "cb . so"}
  .tc-gd>.tc-cb{grid-area:cb}.tc-gd>.tc-gd-gio{grid-area:gio}.tc-gd>.tc-gd-nd{grid-area:nd}.tc-gd>.tc-tien{grid-area:so;justify-self:end}
  .tc-form{grid-template-columns:1fr}
  .tc-tabs{padding:6px 8px 0}
  .tc-tab{padding:8px 9px;font-size:12.5px}
}
/* 💰 tiền mặt + sổ nợ (10/09 đợt 2) */
.tc-sec-tit.lon{font-size:15px;margin-top:6px}
.tc-sec-tit.con{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;margin-left:6px}
.tc-nhanh{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.tc-nhanh-ic{font-size:18px}
.tc-nhanh .tc-in{flex:1}
.tc-tm-ds{display:flex;flex-direction:column;gap:8px;margin:10px 0;max-height:46vh;overflow:auto}
.tc-tm-row{display:grid;grid-template-columns:110px 80px 1.2fr 1.4fr 1fr 130px 90px auto;gap:6px;align-items:end;
  background:var(--bg3);border-radius:10px;padding:8px 10px;border-left:3px solid var(--green)}
.tc-tm-row.chua{border-left-color:var(--yellow)}
.tc-tm-o{display:flex;flex-direction:column;gap:3px;min-width:0}
.tc-tm-o>span{font-size:10.5px;font-weight:600;color:var(--tx3)}
.tc-tm-o .tc-in{padding:5px 7px;font-size:12.5px;width:100%}
.tc-uu{background:var(--bg3);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tc-uu-tit{font-size:12px;font-weight:700;color:var(--tx2)}
.tc-uu-row{display:flex;align-items:center;gap:10px;font-size:12.5px;flex-wrap:wrap}
.tc-uu-so{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:11.5px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.tc-uu-lydo{color:var(--tx2);font-style:italic}
@media (max-width:760px){
  .tc-tm-row{grid-template-columns:1fr 1fr}
  .tc-nhanh .tc-in{font-size:12px}
}

/* 💰 ô ngày + ô màu kiểu app (bỏ ô mặc định của trình duyệt) — 12/09 */
.tc-ngay{width:100%;justify-content:flex-start}
.tc-form .tc-ngay,.tc-loc .tc-ngay{min-height:34px}
.tc-tm-o .tc-ngay{min-height:28px;font-size:12px;padding:3px 7px}
.tc-mau-o{width:100%;height:34px;border-radius:8px;border:1px solid var(--line2);cursor:pointer;padding:0}
.tc-mau-o:hover{border-color:var(--accent)}
.dp-gio-nut.trong{color:var(--tx3);font-style:italic}
.tc-tm-row{grid-template-columns:110px 80px 1.2fr 1.4fr 1fr 150px auto}
@media (max-width:760px){.tc-tm-row{grid-template-columns:1fr 1fr}}

/* 📜 sổ nợ: mốc hẹn · lịch sử trả · uy tín — 12/09 */
.tc-moc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg3);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;min-height:34px}
.tc-moc-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line2);
  border-radius:99px;padding:3px 5px 3px 10px;font-size:12px}
.tc-moc-x{border:0;background:none;color:var(--tx3);cursor:pointer;font-size:11px;padding:0 3px;border-radius:50%}
.tc-moc-x:hover{background:var(--red-bg);color:var(--red)}
.tc-uytin{background:var(--bg3);border-radius:8px;padding:5px 8px;margin-top:3px}
.tc-ok{color:var(--green)}
.tc-te{color:var(--red)}
.tc-ls{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:56vh;overflow:auto}
.tc-ls-row{display:flex;align-items:flex-start;gap:12px;background:var(--bg3);border-radius:10px;
  padding:9px 12px;border-left:3px solid var(--green)}
.tc-ls-row.huy{opacity:.55;border-left-color:var(--tx3)}
.tc-ls-row.huy .tc-tien{text-decoration:line-through}
.tc-ls-row.dao{border-left-color:var(--yellow);border-style:dashed}
.tc-ls-nd{flex:1;min-width:0}
.tc-ls-tit{font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ═══ 💰 Tổng quan: con số lớn · thanh đo · biểu đồ (12/09) ═══ */
.tc-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;background:var(--bg2);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.tc-hero-trai{border-right:1px solid var(--line);padding-right:18px}
.tc-hero-nhan{font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.6px;text-transform:uppercase}
/* con số chủ: font thường của app, KHÔNG dùng chữ số đều nhau (nhìn rời ở cỡ lớn) */
.tc-hero-so{font-family:var(--font-head);font-weight:800;font-size:46px;line-height:1.1;margin-top:4px;
  letter-spacing:-1px;color:var(--tx)}
.tc-hero-so2{font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1.15;margin-top:4px;
  letter-spacing:-.5px;color:var(--tx)}
.tc-hero-so2.te{color:var(--red)}
.tc-hero-phu{font-size:12px;color:var(--tx3);margin-top:6px;line-height:1.5}
.tc-hero-phai{display:flex;flex-direction:column;justify-content:center}
.tc-meter{height:9px;border-radius:99px;background:var(--bg3);overflow:hidden;margin-top:9px}
.tc-meter-fill{height:100%;border-radius:99px;background:var(--ch3);transition:width .25s}
.tc-meter-fill.te{background:var(--red)}
.tc-stat.bam{cursor:pointer}
.tc-stat.bam:hover{border-color:var(--accent)}
.tc-han-tong{background:none;border-top:1px solid var(--line2);border-radius:0;margin-top:2px;padding-top:9px}
/* biểu đồ */
.tc-bd{display:flex;flex-direction:column;gap:7px}
.tc-cot{display:flex;flex-direction:column;gap:4px}
.tc-svg{width:100%;height:116px;display:block;overflow:hidden}
.tc-cot-nhan{display:flex}
.tc-cot-nhan>span{flex:1;text-align:center;font-size:11px;color:var(--tx3)}
.tc-cg{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--tx2)}
.tc-cg-o{display:inline-flex;align-items:center;gap:6px}
.tc-cg-cham{width:10px;height:10px;border-radius:3px;flex:none}
.tc-chong{display:flex;height:26px;border-radius:7px;overflow:hidden;gap:2px;background:var(--bg3)}
.tc-chong-o{min-width:4px;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:10.5px;font-weight:700;cursor:default;transition:filter .12s}
.tc-chong-o:hover{filter:brightness(1.12)}
.tc-bd-bang{margin-top:8px;overflow-x:auto}
.tc-bd-bang table{border-collapse:collapse;font-size:12px;width:100%}
.tc-bd-bang th{text-align:left;color:var(--tx3);font-weight:600;font-size:11px;
  border-bottom:1px solid var(--line);padding:4px 8px}
.tc-bd-bang td{padding:4px 8px;border-bottom:1px solid var(--line)}
.tc-bd-bang td.so{text-align:right;font-variant-numeric:tabular-nums}
#tc-tip{position:fixed;z-index:1200;background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  padding:7px 10px;font-size:12px;color:var(--tx);box-shadow:var(--shadow);pointer-events:none;
  opacity:0;transition:opacity .12s;max-width:280px;line-height:1.5}
#tc-tip.hien{opacity:1}
@media (max-width:760px){
  .tc-hero{grid-template-columns:1fr}
  .tc-hero-trai{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:14px}
  .tc-hero-so{font-size:36px}
}
/* 🍩 hình tròn + đường — 12/09 */
.tc-tron-hang{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tc-tron{position:relative;width:132px;height:132px;flex:none}
.tc-tron-svg{width:100%;height:100%;display:block}
.tc-tron-mui{transition:filter .12s}
.tc-tron-mui:hover{filter:brightness(1.14)}
.tc-tron-tam{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none}
.tc-tron-so{font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:-.3px;color:var(--tx)}
.tc-tron-phu{font-size:10.5px;color:var(--tx3);margin-top:1px}
.tc-tron-cg{flex:1;min-width:190px;display:flex;flex-direction:column;gap:5px}
.tc-tron-cg-o{display:flex;align-items:center;gap:8px;font-size:12.5px}
.tc-tron-cg-ten{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2)}
.tc-tron-cg-so{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-svg.duong{height:110px}
@media (max-width:760px){.tc-tron-hang{gap:12px}.tc-tron{width:112px;height:112px}}

/* 🧾 nhiều đợt giải ngân trong một khoản nợ — 12/09 */
.tc-o-rong{grid-column:1/-1}
.tc-dot{display:flex;flex-direction:column;gap:8px;background:var(--bg3);border:1px solid var(--line);
  border-radius:10px;padding:9px 10px}
.tc-dot-row{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px;
  align-items:end;background:var(--panel);border-radius:9px;padding:9px 30px 9px 10px;border-left:3px solid var(--ch1)}
.tc-dot-row>.tb-btn{position:absolute;top:6px;right:6px;padding:2px 7px;line-height:1.2}
.tc-dot-o{display:flex;flex-direction:column;gap:3px;min-width:0}
.tc-dot-o>span{font-size:10px;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--tx3);white-space:nowrap}
.tc-dot-o .tc-in{padding:4px 7px;font-size:12px;width:100%}
.tc-dot-tong{font-size:11.5px;color:var(--tx2);line-height:1.5}
.tc-dot-ds{background:var(--bg3);border-radius:8px;padding:6px 9px;line-height:1.6}
@media (max-width:620px){.tc-dot-row{grid-template-columns:1fr 1fr}}

/* 🧮 xem trước tiền lãi — 12/09 */
.tc-xemlai{background:var(--bg3);border-left:3px solid var(--ch2);border-radius:9px;padding:9px 12px;
  font-size:12.5px;line-height:1.6;color:var(--tx2)}
.tc-xemlai b{color:var(--tx)}
.tc-han-phu{font-size:11px;color:var(--tx3);white-space:nowrap}

/* 📈 mốc lãi suất · cảnh báo · tin nhắc nợ — 12/09 */
.tc-moclai{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.tc-moclai-row{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;
  align-items:end;background:var(--bg3);border-radius:9px;padding:9px 30px 9px 10px;border-left:3px solid var(--ch2)}
.tc-moclai-row>.tb-btn{position:absolute;top:6px;right:6px;padding:2px 7px;line-height:1.2}
.tc-canhbao{background:var(--yellow-bg);color:var(--yellow);border-radius:8px;padding:6px 9px;font-weight:600}
.tc-sms{background:var(--bg3);border-radius:8px;padding:6px 9px;border-left:3px solid var(--ch1)}
.tc-xt.nhac{border-left:3px solid var(--ch1);background:var(--bg3)}
/* 📊 cửa vào tab biểu đồ + bộ lọc kỳ — 12/09 */
.tc-xemsau{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--bg2);border:1px dashed var(--line2);border-radius:14px;padding:14px 18px;
  font-family:inherit;font-size:14px;color:var(--tx);transition:.15s}
.tc-xemsau:hover{border-color:var(--accent);background:var(--bg3)}
.tc-xemsau>span:first-child{flex:1;line-height:1.55}
.tc-xemsau-mt{font-size:20px;color:var(--accent);flex:none}
.tc-loc-ky{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.tc-loc-ky .spacer{flex:1}
.tc-loc-ky .tc-thang-ten{font-size:14px;min-width:132px}
/* 📄 màn hình riêng cho một khoản nợ — 12/09 */
.tc-ct-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.tc-ct-dau .spacer{flex:1}
.tc-ct-ten{display:flex;flex-direction:column;line-height:1.35}
.tc-ct-ten b{font-family:var(--font-head);font-size:18px;letter-spacing:-.2px}
.tc-ct-ten span{font-size:12px;color:var(--tx3)}
.tc-ct-bang{display:flex;flex-direction:column;gap:1px}
.tc-ct-dong{display:grid;grid-template-columns:190px 1fr;gap:12px;font-size:13px;padding:6px 0;
  border-bottom:1px solid var(--line)}
.tc-ct-dong:last-child{border-bottom:0}
.tc-ct-dong>span{color:var(--tx3)}
.tc-ct-dot{display:grid;grid-template-columns:1.6fr repeat(5,minmax(84px,1fr));gap:10px;align-items:center;
  background:var(--bg3);border-radius:10px;padding:10px 12px;border-left:3px solid var(--ch1)}
.tc-ct-dot-ten{display:flex;flex-direction:column;line-height:1.35}
.tc-ct-dot-ten span{font-size:11px;color:var(--tx3)}
.tc-ct-dot-so{display:flex;flex-direction:column;gap:1px;font-size:13px}
.tc-ct-dot-so>span{font-size:10.5px;color:var(--tx3)}
.tc-ct-dot-moc{grid-column:1/-1;font-size:11.5px;color:var(--tx2);border-top:1px dashed var(--line2);padding-top:7px}
.tc-card.bam{cursor:pointer}
.tc-card.bam:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
@media (max-width:760px){
  .tc-ct-dong{grid-template-columns:1fr;gap:2px}
  .tc-ct-dot{grid-template-columns:1fr 1fr}
}
/* 📄 hộp nổi cho khoản nợ — cùng lối nền mờ + đóng mở mượt như hộp thoại Rotta (12/09) */
.tc-no-nen{align-items:flex-start;padding:4vh 16px;overflow-y:auto;z-index:880}
.tc-no-nen.dong{animation:dlgRa .16s var(--ease,ease) forwards}
@keyframes dlgRa{from{opacity:1}to{opacity:0}}
.tc-no-hop{width:min(960px,100%);max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg2);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);padding:16px;
  display:flex;flex-direction:column;gap:14px;
  animation:dlgLen .2s var(--ease,ease)}
.tc-no-nen.dong .tc-no-hop{animation:dlgXuong .16s var(--ease,ease) forwards}
@keyframes dlgXuong{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.985)}}
.tc-no-hop>.tc-ct-dau{position:sticky;top:-16px;z-index:2;margin:-16px -16px 0;border-radius:18px 18px 0 0;
  border:0;border-bottom:1px solid var(--line);background:var(--kinh);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tc-no-hop .tc-sec{background:var(--panel)}
@media (max-width:760px){
  .tc-no-nen{padding:0}
  .tc-no-hop{max-height:100vh;border-radius:0;border:0;width:100%}
  .tc-no-hop>.tc-ct-dau{border-radius:0}
}
/* 📡 theo dõi đường nối điện thoại — 12/09 */
.tc-den{border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.55;border-left:3px solid var(--tx3);background:var(--bg3)}
.tc-den.xanh{border-left-color:var(--green);background:var(--green-bg)}
.tc-den.vang{border-left-color:var(--yellow);background:var(--yellow-bg)}
.tc-den.do,.tc-den.tat{border-left-color:var(--red);background:var(--red-bg)}
.tc-nk{display:flex;flex-direction:column;gap:5px;max-height:420px;overflow:auto}
.tc-nk-row{display:flex;align-items:flex-start;gap:10px;background:var(--bg3);border-radius:9px;
  padding:7px 10px;border-left:3px solid var(--tx3)}
.tc-nk-row.ghi{border-left-color:var(--green)}
.tc-nk-row.bo_qua{border-left-color:var(--tx3);opacity:.72}
.tc-nk-row.nhac_no{border-left-color:var(--ch1)}
.tc-nk-row.trung,.tc-nk-row.trung_gan{border-left-color:var(--yellow);opacity:.8}
.tc-nk-nhan{font-size:10.5px;font-weight:700;color:var(--tx3);white-space:nowrap;min-width:78px;padding-top:2px}
.tc-nk-nd{flex:1;min-width:0}
.tc-nk-meta{font-size:11.5px;color:var(--tx2)}
.tc-nk-text{font-size:11.5px;color:var(--tx3);font-family:var(--font-mono,monospace);
  word-break:break-word;margin-top:2px;line-height:1.45}
/* ⚠ hai máy cùng làm máy chủ — 12/09 */
.canh-hai-may{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1300;
  max-width:min(720px,94vw);display:flex;align-items:center;gap:12px;
  background:var(--red-bg);color:var(--tx);border:1px solid var(--red);border-radius:12px;
  padding:11px 14px;font-size:13px;line-height:1.5;box-shadow:var(--shadow)}
.canh-hai-may b{color:var(--red)}
.canh-hai-may button{border:0;background:none;color:var(--tx3);font-size:14px;cursor:pointer;flex:none}

.tc-mau{white-space:pre-wrap;font-size:11px;color:var(--tx3);max-height:160px;overflow:auto;font-family:"JetBrains Mono",monospace}


/* ── biểu tượng trang dạng ảnh + bộ chọn biểu tượng (17/09) ── */
.ico-img{width:1.15em;height:1.15em;object-fit:cover;border-radius:4px;vertical-align:-0.2em;display:inline-block}
.ico-img.lon{width:72px;height:72px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.15);vertical-align:middle}
.ipk-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.ipk{background:var(--bg,#fff);color:inherit;border-radius:14px;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden}
.ipk-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(127,127,127,.25);font-size:15px}
.ipk-cur{font-size:26px;line-height:1}.ipk-cur .ico-img{width:32px;height:32px}
.ipk-x{margin-left:auto;border:0;background:transparent;font-size:16px;cursor:pointer;opacity:.7;color:inherit}.ipk-x:hover{opacity:1}
.ipk-hang{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px 0}
.ipk-inp{flex:1;min-width:180px;padding:8px 10px;border:1px solid rgba(127,127,127,.4);border-radius:8px;font:inherit;background:transparent;color:inherit}
.ipk-goiy{font-size:12px;opacity:.65}
.ipk-luoi{overflow:auto;padding:8px 14px 14px}
.ipk-nhom{font-size:12px;font-weight:600;opacity:.65;margin:10px 0 4px;text-transform:uppercase;letter-spacing:.03em}
.ipk-grid{display:flex;flex-wrap:wrap;gap:2px}
.ipk-e{width:38px;height:38px;border:0;background:transparent;border-radius:8px;font-size:22px;cursor:pointer;line-height:1}
.ipk-e:hover{background:rgba(127,127,127,.18);transform:scale(1.15)}.ipk-e.on{outline:2px solid var(--accent,#2f6df6)}
@media (max-width:480px){.ipk-e{width:34px;height:34px;font-size:20px}}

/* ── bảng màu xổ ra từ nút 🎨 Màu trên thanh chọn nhiều dòng (17/09) ── */
.sb-pop{flex-basis:100%;width:100%;display:flex;flex-direction:column;gap:6px;padding:8px 6px 4px;border-top:1px solid rgba(127,127,127,.28);margin-top:4px}
.sb-pop .sb-dots{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sb-pop .sb-btn{align-self:flex-start}
.sb-btn.on{outline:2px solid var(--accent,#19B7FF)}

.fmt-lbl{font-size:10px;opacity:.6;margin:0 2px 0 6px;align-self:center}

/* ── hỏi sau khi dán link: thẻ xem trước hay giữ link chữ (17/09) ── */
.lk-hoi{position:fixed;z-index:320;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;
  background:var(--kinh2,#152238);color:inherit;box-shadow:0 8px 28px rgba(0,0,0,.35);border:1px solid rgba(127,127,127,.3);animation:rise .18s var(--ease,ease)}
html[data-theme="sang"] .lk-hoi,html[data-theme="hong"] .lk-hoi{background:#fff}
.lk-nhan{font-size:12px;opacity:.65;margin-right:2px}
.lk-btn{border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;border-radius:8px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer}
.lk-btn:hover{background:rgba(127,127,127,.15)}
.lk-btn.chinh{background:var(--accent,#19B7FF);color:#fff;border-color:transparent}

/* ── bảng phím tắt: popup giữa màn hình, nền xung quanh mờ (17/09) ── */
.pt-bg{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,12,22,.38);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);animation:fadeIn .16s ease}
.pt-box{width:min(1040px,100%);max-height:90vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:var(--bg2,#0C1322);color:inherit;border:1px solid rgba(127,127,127,.28);box-shadow:0 24px 80px rgba(0,0,0,.45);animation:rise .2s var(--ease,ease)}
html[data-theme="sang"] .pt-box,html[data-theme="hong"] .pt-box{background:#fff}
.pt-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(127,127,127,.22)}
.pt-tt{font-size:17px;font-weight:700;white-space:nowrap}
.pt-loc{flex:1;min-width:120px;padding:8px 12px;border-radius:10px;border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;font:inherit}
.pt-x{border:0;background:transparent;color:inherit;font-size:17px;cursor:pointer;opacity:.7;padding:4px 8px;border-radius:8px}
.pt-x:hover{opacity:1;background:rgba(127,127,127,.15)}
.pt-than{overflow:auto;padding:14px 18px 6px;columns:2;column-gap:26px}
.pt-nhom{break-inside:avoid;margin:0 0 18px}
.pt-nhom-tt{font-weight:700;font-size:14px;margin-bottom:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pt-phu{font-weight:400;font-size:12px;opacity:.6}
.pt-hang{display:grid;grid-template-columns:minmax(150px,42%) 1fr;gap:10px;align-items:start;padding:5px 0;border-bottom:1px dashed rgba(127,127,127,.18);font-size:13px;line-height:1.45}
.pt-hang:last-child{border-bottom:0}
.pt-phim{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pt-phim.chu{font-weight:600;opacity:.9}
.pt-phim kbd{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:5px 7px;border-radius:6px;white-space:nowrap;
  background:rgba(127,127,127,.16);border:1px solid rgba(127,127,127,.35);border-bottom-width:2px}
.pt-hoac{font-size:11px;opacity:.55}
.pt-y{opacity:.92}
.pt-rong{padding:30px;text-align:center;opacity:.6;column-span:all}
.pt-chan{padding:10px 18px;font-size:12px;opacity:.6;border-top:1px solid rgba(127,127,127,.22)}
@media (max-width:760px){.pt-than{columns:1}.pt-hang{grid-template-columns:1fr}.pt-bg{padding:8px}}

/* ── Lịch sử Quân sư (17/09) ── */
.day-rep.super{box-shadow:inset 3px 0 0 #7a4fd6}.adv-grade.super{color:#7a4fd6}
.dr-ls{margin-left:auto;font-size:12px;padding:4px 10px}
.qs-box{width:min(1180px,100%)}
.qs-loc{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.qs-loc-b{border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.qs-loc-b.on{background:var(--accent,#19B7FF);border-color:transparent;color:#fff;font-weight:600}
.qs-than{overflow:auto;padding:16px 18px 4px;display:flex;flex-direction:column;gap:14px}
.qs-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.qs-ose{border:1px solid rgba(127,127,127,.25);border-radius:12px;padding:12px 14px}
.qs-ose-n{font-size:12px;opacity:.65}.qs-ose-t{font-size:26px;font-weight:800;line-height:1.2;margin:2px 0}.qs-ose-p{font-size:12px;opacity:.7}
.qs-chu{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
.qs-chu-i{display:inline-flex;align-items:center;gap:5px}.qs-chu-i i,.qs-cham{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.qs-the{border:1px solid rgba(127,127,127,.25);border-radius:12px;padding:12px 14px;min-width:0}
.qs-the-tt{font-weight:700;font-size:14px}.qs-the-phu{font-size:12px;opacity:.62;margin-top:2px}
.qs-hai{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qs-khung{margin-top:8px}.qs-svg{width:100%;height:auto;display:block;overflow:visible}
.qs-luoi{stroke:currentColor;stroke-opacity:.12;stroke-width:1}
.qs-vach{stroke:currentColor;stroke-opacity:.55;stroke-width:1;stroke-dasharray:5 4}
.qs-duong{fill:none;stroke:currentColor;stroke-opacity:.85;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.qs-truc{font-size:11px;fill:currentColor;opacity:.62}.qs-so{font-size:11.5px;font-weight:700;fill:currentColor}
.qs-tip{position:fixed;z-index:9700;display:none;pointer-events:none;background:#10151f;color:#f3f5f9;border-radius:9px;padding:8px 11px;font-size:12.5px;line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.4);max-width:280px}
.qs-nx{border-radius:12px;padding:12px 14px;background:rgba(127,127,127,.09)}
.qs-nx ul{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.65}
.qs-bang-cuon{max-height:320px;overflow:auto;margin-top:8px}
.qs-bang{width:100%;border-collapse:collapse;font-size:13px}
.qs-bang th{position:sticky;top:0;background:var(--bg2,#0C1322);text-align:left;padding:7px 8px;font-size:11.5px;opacity:.95;border-bottom:1px solid rgba(127,127,127,.3)}
html[data-theme="sang"] .qs-bang th,html[data-theme="hong"] .qs-bang th{background:#fff}
.qs-bang td{padding:6px 8px;border-bottom:1px solid rgba(127,127,127,.14);white-space:nowrap}
.qs-bang td.so{text-align:right;font-variant-numeric:tabular-nums}.qs-bang td.ghi{opacity:.6;font-size:12px}
@media (max-width:820px){.qs-hai{grid-template-columns:1fr}}



/* ── Cài đặt 2 cột: danh mục trái · một mục bên phải (17/09) ── */
.cdx.tabs{width:min(920px,96vw);height:min(680px,90vh);max-height:90vh}
.cdx-khung{flex:1;min-height:0;display:grid;grid-template-columns:228px 1fr}
.cdx-nav{display:flex;flex-direction:column;gap:3px;padding:12px 10px;overflow-y:auto;border-right:1px solid var(--line,rgba(127,127,127,.25));background:rgba(127,127,127,.05)}
.cdx-tim{margin:0 2px 8px;padding:8px 10px;border-radius:9px;border:1px solid var(--line,rgba(127,127,127,.3));background:var(--bg3,transparent);color:inherit;font:inherit;font-size:13px;outline:none}
.cdx-tim:focus{border-color:var(--accent)}
.cdx-nav-b{display:flex;align-items:flex-start;gap:9px;text-align:left;border:0;background:transparent;color:var(--tx2,inherit);padding:9px 10px;border-radius:10px;cursor:pointer;font:inherit;font-size:13.5px}
.cdx-nav-b:hover{background:rgba(127,127,127,.12);color:var(--tx,inherit)}
.cdx-nav-b.on{background:var(--glow,rgba(25,183,255,.16));color:var(--tx,inherit);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.cdx-nav-ic{flex:none;width:20px;text-align:center}
.cdx-nav-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.cdx-nav-t small{font-weight:400;font-size:11px;opacity:.6;line-height:1.3}
.cdx.tabs .cdx-than{padding:18px 22px 24px;gap:14px}
.cdx.tabs .cdx-sec{background:none;border:0;border-radius:0;padding:0}
.cdx.tabs .cdx-sech{font-size:17px;font-weight:800;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line,rgba(127,127,127,.25))}
.cdx.tabs .cdx-sec[hidden],.cdx-nav-b[hidden]{display:none}
@media (max-width:720px){
  .cdx.tabs{height:92vh}
  .cdx-khung{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .cdx-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line,rgba(127,127,127,.25));padding:8px;gap:6px;align-items:center}
  .cdx-tim{margin:0;min-width:130px;flex:none}
  .cdx-nav-b{flex:none;align-items:center;padding:7px 11px;white-space:nowrap}
  .cdx-nav-t small{display:none}
  .cdx-nav-b.on{box-shadow:inset 0 -3px 0 var(--accent)}
}

/* ── nút + màn hình con "Phân tích chuyên sâu" (17/09) ── */
.adv-ls{flex:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;color:#fff;
  padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,#2a78d6,#7a4fd6);box-shadow:0 3px 12px rgba(74,99,214,.35);transition:transform .12s,box-shadow .12s}
.adv-ls:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(74,99,214,.45)}
.qs-mini{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:10px;padding:12px 16px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(122,79,214,.35);background:linear-gradient(135deg,rgba(42,120,214,.10),rgba(122,79,214,.10));transition:transform .12s,box-shadow .12s}
.qs-mini:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(74,99,214,.22)}
.qs-mini-trai{flex:none}.qs-mini-tt{font-weight:800;font-size:15px}.qs-mini-phu{font-size:12px;opacity:.65;margin-top:2px}
.qs-mini-cot{flex:1 1 140px;min-width:120px;height:46px;display:flex;align-items:flex-end;gap:3px}
.qs-mini-cot i{flex:1;max-width:16px;border-radius:3px 3px 0 0;display:block}
.qs-mini-so{flex:none;display:flex;gap:18px}
.qs-mini-so span{display:flex;flex-direction:column;font-size:11.5px;opacity:.85;line-height:1.3}
.qs-mini-so b{font-size:19px;font-weight:800;opacity:1}
.qs-mini-mo{flex:none;margin-left:auto;font-weight:700;font-size:13px;color:#fff;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#2a78d6,#7a4fd6)}
@media (max-width:760px){.qs-mini{flex-wrap:wrap;gap:10px}.qs-mini-cot{order:3;flex-basis:100%}.adv-ls{padding:6px 10px;font-size:12px}}

/* nút + trên đầu cột Not started (17/09) */
.col-cong{margin-left:auto;flex:none;width:26px;height:26px;border-radius:8px;border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;
  font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s}
.col-cong:hover{background:var(--accent,#19B7FF);border-color:transparent;color:#fff}

/* ── thanh trạng thái offline / chờ đồng bộ (18/09) ── */
#off-bar{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:9800;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100vw - 24px);animation:rise .2s ease}
#off-bar.off{background:#b8471f}#off-bar.cho{background:#2a78d6}
#off-bar .off-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#off-bar .off-b{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
#off-bar .off-b:hover{background:rgba(255,255,255,.18)}
.tc-gd.cho-dong-bo{opacity:.7}

/* ── Rottafin: phải trả hằng tháng + chi phí cố định (18/09) ── */
.tc-bang-nv{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.tc-bang-nv td{padding:6px 8px;border-bottom:1px solid rgba(127,127,127,.14);vertical-align:top}
.tc-bang-nv tr.nhom td{font-weight:700;padding-top:12px;border-bottom:1px solid rgba(127,127,127,.3);background:rgba(127,127,127,.06)}
.tc-bang-nv td.so{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.tc-bang-nv td.ngay{white-space:nowrap;opacity:.8}.tc-bang-nv td.phu{opacity:.65;font-size:12px}
.tc-bang-nv tr.da td{opacity:.55;text-decoration:line-through}.tc-bang-nv tr.da td.so{text-decoration:line-through}
.tc-bang-nv tr.mo td{opacity:.7}
.tc-card.tc-mo{opacity:.55}.tc-card-nut{display:flex;gap:6px;margin-top:8px}
@media (max-width:640px){.tc-bang-nv td.phu{display:none}}

/* ── trang con dạng chip + link trần trong câu (18/09) ── */
.trang-con{margin-top:22px;padding-top:12px;border-top:1px solid rgba(127,127,127,.25);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.trang-con-tt{flex-basis:100%;font-size:12px;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.tasklink.tl-con{cursor:pointer}
a.url-tran{color:var(--accent,#19B7FF);text-decoration:underline;text-decoration-color:rgba(25,183,255,.45);text-underline-offset:2px;word-break:break-all;cursor:pointer}
a.url-tran:hover{text-decoration-color:currentColor}

/* nút ← Về thẻ trên thanh điều khiển của thẻ khi đang xem trang con (18/09) */
.d-back{margin-right:auto;font-weight:700;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 10px rgba(25,183,255,.35)}
.d-head .d-back{order:-1}

/* ── Dự án & Việc lớn + Kho dữ liệu (19/09) ── */
.duan-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;padding:14px 22px 30px}
.duan-trai{display:flex;flex-direction:column;gap:8px}
.duan-card{border:1px solid var(--line,rgba(127,127,127,.25));border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--bg2,transparent);transition:border-color .12s,transform .12s}
.duan-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.duan-card.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--glow,rgba(25,183,255,.08))}
.duan-card.dung{opacity:.55}
.duan-ten{font-weight:700;font-size:14px}.duan-phu{font-size:12px;opacity:.7;margin:3px 0 6px}.duan-pct{font-size:11px;opacity:.6;margin-top:3px}
.pbar.nho{height:5px}
.duan-phai{min-width:0}.duan-phai-dau{display:flex;gap:8px;justify-content:flex-end;margin-bottom:6px}
.duan-phai-noi .topbar h1{font-size:20px}
.seg{display:inline-flex;border:1px solid var(--line,rgba(127,127,127,.3));border-radius:9px;overflow:hidden;margin-left:12px}
.seg-b{border:0;background:transparent;color:inherit;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.seg-b.on{background:var(--accent);color:#fff;font-weight:600}
.kho-trang{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid rgba(127,127,127,.14)}
.kho-trang-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none;font-weight:600}
.kho-trang-ten:hover{color:var(--accent)}
.kho-trang-phu{font-size:12px;opacity:.6;white-space:nowrap}
.kho-trong{padding:6px 12px;font-size:12px;opacity:.5}
.arch-line .tb-btn{margin-left:10px;font-size:11.5px;padding:2px 8px}
@media (max-width:820px){.duan-wrap{grid-template-columns:1fr}.kho-trang{flex-wrap:wrap}}

/* 22/09: phần giờ vẽ lại riêng, giữ đúng bố cục cũ */
.dp-gio-khu{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dp-gio-khu .dp-gio{margin-top:0;padding-top:0;border-top:none}
.dp-gio-cot{overscroll-behavior:contain}