/* ============================================================
   MOT — Mother of Task · Design System v1.2
   NGÔN NGỮ MÀU DUY NHẤT — ĐÈN GIAO THÔNG (không concept nào khác):
   · XÁM   = chưa làm / trung tính
   · XANH  = ok, đã xong
   · VÀNG  = cận hạn, cảnh báo
   · ĐỎ    = quá hạn, có vấn đề
   Màu là tín hiệu thứ nhất, chữ chỉ là tín hiệu thứ hai.
   Chấm tròn trạng thái (.dot) cỡ macOS Finder, đổi màu theo thời gian.
   ============================================================ */
:root{
  --sp:8px; --gap:24px;
  --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px;
  --ink:#1d1d1f; --ink-2:#515154; --ink-3:#6e6e73; --ink-4:#86868b;
  --hairline:rgba(0,0,0,.07); --hairline-2:rgba(0,0,0,.12);
  /* — đèn giao thông (màu hệ thống Apple) — */
  --idle:#d1d1d6;                                      /* chưa làm */
  --ok:#34c759;   --ok-dark:#1d8348;   --ok-tint:#e9f9ef;   /* xong/ok */
  --warn:#ffcc00; --warn-dark:#8a6d00; --warn-tint:#fff7df; /* cận hạn */
  --bad:#ff3b30;  --bad-dark:#d70015;  --bad-tint:#ffeceb;  /* quá hạn */
  --brand:#639922; /* chỉ dùng cho chấm logo (nhận diện), không dùng cho trạng thái */
  --blue:#0066cc;
  --paper:#ffffff; --bg:#f5f5f7; --neutral-fill:#e8e8ed;
  --r:10px; --r-sm:7px;
  --sidebar-w:304px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.mot{
  font-family:'Be Vietnam Pro',-apple-system,sans-serif;
  font-size:var(--fs-base); color:var(--ink); background:var(--bg);
  line-height:1.5;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}

/* ---------- CHẤM TRẠNG THÁI — một ký hiệu cho toàn hệ thống ---------- */
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.dot.idle{background:var(--idle)}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}
.dot.sm{width:7px;height:7px}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;height:52px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:16px;padding:0 20px;
}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:.2px}
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--brand)} /* ngoại lệ: brand */
.vbadge{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);background:var(--neutral-fill);padding:2px 8px;border-radius:99px}
.tb-date{font-size:var(--fs-sm);color:var(--ink-3)}
.tb-spacer{flex:1}
.tb-user{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ink-3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:600}

/* ---------- Layout ---------- */
.shell{display:flex;height:calc(100vh - 52px)}
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);border-right:1px solid var(--hairline);background:var(--paper);overflow-y:auto;padding:14px 12px 32px}
.main{flex:1;overflow-y:auto;padding:24px 28px 80px;display:flex;justify-content:center}
.main-inner{width:100%;max-width:860px}

/* ---------- Tabs sidebar: Việc mới · Quá hạn · Cận hạn · Hoàn thành ---------- */
.stabs{display:flex;gap:3px;background:var(--bg);padding:3px;border-radius:9px;margin-bottom:12px}
.stab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:7px;font-size:10.5px;font-weight:600;color:var(--ink-3);line-height:1}
.stab .n{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.stab.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--ink)}
.stab:hover:not(.on){color:var(--ink-2)}

/* ---------- Item việc ---------- */
.titem{
  display:block;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;margin-top:2px;
}
.titem:hover{background:var(--bg)}
.titem.active{background:var(--neutral-fill);border-color:var(--hairline-2)}
.titem .trow1{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ink-4);margin-bottom:2px}
.titem .tcode{font-weight:600;color:var(--ink-3)}
.titem .tdue{margin-left:auto}
.titem .tdue.late{color:var(--bad-dark);font-weight:600}
.titem .ttitle{font-size:13px;font-weight:500;color:var(--ink);line-height:1.35}
/* hoàn thành: KHÔNG gạch chữ — chấm xanh là đủ tín hiệu */
.titem.done .ttitle{color:var(--ink-3)}
.titem .tproc{font-size:var(--fs-xs);color:var(--ink-4);margin-top:3px;display:flex;align-items:center;gap:6px}
.scale-pip{font-size:10px;font-weight:700;padding:0 5px;border-radius:4px;background:var(--bg);color:var(--ink-4);border:1px solid var(--hairline)}
.sempty{text-align:center;color:var(--ink-4);font-size:var(--fs-sm);padding:34px 10px}

/* ============================================================
   KHUNG TASK 4 VÙNG — bất biến cho mọi task
   ============================================================ */
.tcard{background:var(--paper);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* [1] HEADER — trung tính, chấm trạng thái đứng đầu */
.z-head{padding:18px 22px 16px;border-bottom:1px solid var(--hairline)}
.zh-row1{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:6px}
.chip-code{font-weight:700;color:var(--ink-2);background:var(--neutral-fill);padding:2px 9px;border-radius:99px;font-size:var(--fs-xs)}
.chip-proc{color:var(--ink-3)}
.chip-proc b{color:var(--ink-2);font-weight:600}
.zh-pic{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ink-4)}
.zh-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.2px;line-height:1.3}
.zh-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.zh-meta .m{font-size:var(--fs-sm);color:var(--ink-3)}
.zh-meta .m b{color:var(--ink-2);font-weight:600}
.zh-meta .m.late b{color:var(--bad-dark)}

/* [2] PHẦN VIỆC CỦA BẠN
   Chưa đủ mục bắt buộc → XÁM · đủ hết (.ready) → XANH */
.z-act{border-left:3px solid var(--hairline-2);padding:16px 22px 18px}
.z-lbl{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.z-lbl .req-track{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-4)}
.z-lbl .req-track b{color:var(--ink-2)}
.z-act.ready{border-left-color:var(--ok)}
.z-act.ready>.z-lbl{color:var(--ok-dark)}
.z-act.ready .req-track b{color:var(--ok-dark)}

/* hàng nhập liệu chuẩn — mọi loại field đều cùng giải phẫu */
.frow{display:grid;grid-template-columns:200px 1fr;gap:6px 16px;padding:11px 0;border-top:1px solid var(--hairline)}
.frow:first-of-type{border-top:none}
.flbl{font-size:13px;font-weight:500;color:var(--ink-2);padding-top:7px;line-height:1.35}
.flbl .rq{color:var(--bad-dark);margin-left:3px}
.flbl .hint{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--ink-4);margin-top:2px}
.fval{min-width:0}
.fin{width:100%;max-width:420px;padding:8px 11px;border:1px solid var(--hairline-2);border-radius:var(--r-sm);background:#fff;font-size:var(--fs-base)}
.fin:focus{outline:none;border-color:var(--ink-4);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.fin.sm{max-width:200px}
.f-unit{display:inline-flex;align-items:center;gap:8px}
.f-unit .u{font-size:var(--fs-sm);color:var(--ink-4)}
textarea.fin{max-width:100%;min-height:74px;resize:vertical}
/* đã nhập xong → xanh */
.fdone .fin{border-color:rgba(52,199,89,.5);background:#f7fcf9}

/* nút lựa chọn: chưa bấm = trắng/xám · bấm = xanh (vàng/đỏ nếu là lựa chọn cảnh báo/vấn đề) */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{padding:7px 16px;border:1px solid var(--hairline-2);border-radius:99px;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff}
.seg button:hover{border-color:var(--ink-4)}
.seg button.on{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.seg button.on.warn{background:var(--warn);border-color:var(--warn);color:#4a3b00}
.seg button.on.bad{background:var(--bad);border-color:var(--bad);color:#fff}

/* xác nhận 1 nút: chưa bấm = trắng viền xám · bấm rồi = xanh */
.confirm-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--hairline-2);color:var(--ink-2);font-weight:600;font-size:var(--fs-base)}
.confirm-btn:hover{border-color:var(--ink-4);background:var(--bg)}
.confirm-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;cursor:default;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.confirm-btn.ok:hover{background:var(--ok)}

/* checkbox: tick xanh sau khi check */
.ck{display:flex;align-items:flex-start;gap:10px;padding:7px 0;cursor:pointer}
.ck input{width:17px;height:17px;margin-top:2px;accent-color:var(--ok)}
.ck span{font-size:var(--fs-base);color:var(--ink-2)}

/* file: chưa có = xám gạch đứt · đã có = xanh */
.fdrop{display:flex;align-items:center;gap:10px;max-width:420px;padding:12px 14px;border:1.5px dashed var(--hairline-2);border-radius:var(--r-sm);color:var(--ink-4);font-size:13px;cursor:pointer}
.fdrop:hover{border-color:var(--ink-4);color:var(--ink-2);background:var(--bg)}
.fdrop.has{border-style:solid;border-color:rgba(52,199,89,.5);color:var(--ok-dark);background:#f7fcf9}

/* khối form nhúng từ collection khác */
.embed{border:1px solid var(--hairline-2);border-radius:var(--r);overflow:hidden;max-width:560px}
.embed-hd{display:flex;align-items:center;gap:8px;padding:8px 13px;background:var(--bg);border-bottom:1px solid var(--hairline);font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}
.embed-bd{padding:4px 14px}
.embed-bd .frow{grid-template-columns:160px 1fr}

/* các bước (task lớn): số bước xám → xong mới xanh */
.step{border:1px solid var(--hairline);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.step-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);cursor:pointer}
.step-no{width:22px;height:22px;border-radius:50%;background:var(--ink-4);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center}
.step.done .step-no{background:var(--ok)}
.step-ttl{font-size:13px;font-weight:600;color:var(--ink-2)}
.step-st{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-4)}
.step.done .step-st{color:var(--ok-dark);font-weight:600}
.step-bd{padding:2px 16px 8px}

/* footer hành động — luôn cùng một chỗ:
   [ghi chú] ......... [Sửa lại] [Hoàn thành]
   Sửa lại chỉ bấm được khi ĐÃ hoàn thành. */
.z-act-ft{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.ft-note{font-size:var(--fs-sm);color:var(--ink-4);flex:1}
.z-act.ready .ft-note{color:var(--ok-dark);font-weight:500}
.sua-btn{padding:10px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--hairline-2);color:var(--ink-2);font-weight:600}
.sua-btn:hover:not(:disabled){border-color:var(--ink-4);background:var(--bg)}
.sua-btn:disabled{opacity:.35;cursor:not-allowed}
.done-btn{padding:10px 26px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.done-btn:hover:not(:disabled){background:#000}
.done-btn:disabled{background:var(--bg);color:var(--ink-4);box-shadow:none;cursor:not-allowed;border:1px solid var(--hairline)}

/* [3] THÔNG TIN THAM KHẢO — trung tính toàn phần */
.z-ref{padding:16px 22px;border-top:1px solid var(--hairline);background:#fafafa}
.z-ref .z-lbl{color:var(--ink-3)}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ref-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r);padding:12px 14px}
.ref-card h4{font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px}
.kv .k{color:var(--ink-4)}
.kv .v{color:var(--ink-2);font-weight:500;text-align:right}
.kv .v.hot{color:var(--bad-dark);font-weight:600}
.rtable{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.rtable th{text-align:left;color:var(--ink-4);font-weight:600;padding:3px 8px 5px 0;border-bottom:1px solid var(--hairline)}
.rtable td{padding:4px 8px 4px 0;color:var(--ink-2);border-bottom:1px solid var(--hairline)}
.rtable tr:last-child td{border-bottom:none}
.rlink{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--blue);cursor:pointer}
.rlink:hover{text-decoration:underline}
.rlink .d{color:var(--ink-4);font-size:var(--fs-xs)}

/* [4] HƯỚNG DẪN — ẩn, cố ý làm trầm */
.z-guide{border-top:1px solid var(--hairline)}
.zg-toggle{width:100%;display:flex;align-items:center;gap:9px;padding:12px 22px;font-size:13px;color:var(--ink-4)}
.zg-toggle:hover{color:var(--ink-2);background:var(--bg)}
.zg-toggle .arr{margin-left:auto;transition:transform .15s}
.z-guide.open .zg-toggle .arr{transform:rotate(180deg)}
.zg-body{display:none;padding:4px 22px 20px;color:var(--ink-3);font-size:13px}
.z-guide.open .zg-body{display:block}
.g-media{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.g-thumb{width:190px;height:108px;border-radius:var(--r-sm);background:#e9e9eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink-4);font-size:var(--fs-xs);cursor:pointer;border:1px solid var(--hairline)}
.g-thumb:hover{background:#e2e2e4}
.g-thumb .ply{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.g-steps{list-style:none;counter-reset:gs}
.g-steps li{counter-increment:gs;display:flex;gap:10px;padding:4px 0}
.g-steps li:before{content:counter(gs);min-width:18px;height:18px;border-radius:50%;background:#e9e9eb;color:var(--ink-3);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}

/* hoàn thành: chỉ mờ phần nhập liệu, footer vẫn sống để bấm Sửa lại */
.tcard.completed .z-fields{opacity:.55;pointer-events:none}
.done-banner{display:none;align-items:center;gap:10px;padding:13px 22px;background:var(--ok-tint);color:var(--ok-dark);font-weight:600;font-size:var(--fs-base);border-bottom:1px solid rgba(52,199,89,.25)}
.tcard.completed .done-banner{display:flex}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:99px;font-size:13px;font-weight:500;opacity:0;transition:.25s;z-index:99;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* trống */
.allclear{text-align:center;padding:90px 0;color:var(--ink-4)}
.allclear .big{font-size:40px;margin-bottom:10px}

@media (max-width:760px){
  .sidebar{display:none}
  .frow{grid-template-columns:1fr}
  .flbl{padding-top:0}
}


/* ============================================================
   v1.3 — HAI KHO + TÌM KIẾM
   Kho chính = Công việc (xám/vàng/đỏ) · Kho phụ = Hoàn thành (xanh)
   Trong kho chính: mặc định TẤT CẢ, 3 chip màu chỉ là bộ lọc nhanh.
   Lọc nâng cao (phòng ban, quy trình, khách hàng…) gập gọn, ít dùng.
   ============================================================ */

/* Công tắc 2 kho */
.store-sw{display:flex;gap:3px;background:var(--bg);padding:3px;border-radius:9px;margin-bottom:8px}
.store-sw button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 4px;border-radius:7px;font-size:12px;font-weight:600;color:var(--ink-3)}
.store-sw button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--ink)}
.store-sw .n{font-size:11px;font-weight:700;color:var(--ink-4);background:var(--neutral-fill);border-radius:99px;padding:0 7px}
.store-sw button.on .n{background:var(--bg);color:var(--ink-2)}

/* Chip lọc nhanh theo trạng thái — chỉ trong kho Công việc */
.fchips{display:flex;gap:5px;margin-bottom:8px}
.fchip{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;border:1px solid var(--hairline-2);font-size:11px;font-weight:600;color:var(--ink-3);background:#fff}
.fchip:hover{border-color:var(--ink-4)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip .c{font-weight:700}

/* Thanh lọc nâng cao — gập gọn */
.advbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
.adv-toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-4);padding:5px 10px;border-radius:99px;border:1px dashed var(--hairline-2)}
.adv-toggle:hover{color:var(--ink-2);border-color:var(--ink-4)}
.adv-toggle .bdg{background:var(--ink);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:0 6px}
.adv-clear{font-size:11px;font-weight:500;color:var(--blue);margin-left:auto}
.adv-clear:hover{text-decoration:underline}

/* Bảng lọc nâng cao — khung thiết kế sẵn, thêm tiêu chí chỉ qua config */
.advp{background:var(--bg);border-radius:var(--r);padding:10px 10px 12px;margin-bottom:10px;display:grid;gap:8px}
.advp .arow{display:grid;gap:3px}
.advp .albl{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-4)}
.advp .fin{max-width:100%;padding:6px 9px;font-size:12px;background:#fff}


/* ============================================================
   v1.4 — DASHBOARD SẠCH, LỌC ẨN VÀO KÍNH LÚP
   Nguyên tắc: dùng nhiều = chiếm chỗ. Danh sách việc (99.5%
   thời gian) đứng một mình; mọi bộ lọc gập vào 1 icon tìm kiếm.
   Chấm trạng thái: 8px + ring 0.5px — đúng cỡ chấm tag Finder.
   ============================================================ */

/* chấm chuẩn Finder: 8px, viền trong 0.5px cho nét trên nền sáng */
.dot{width:8px;height:8px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.dot.sm{width:6px;height:6px}

/* header sidebar: tên kho + đếm + kính lúp */
.sb-hd{display:flex;align-items:center;gap:8px;padding:2px 6px 10px}
.sb-title{font-size:16px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.sb-cnt{font-size:11px;font-weight:600;color:var(--ink-4);background:var(--bg);padding:1px 8px;border-radius:99px}
.sb-search{margin-left:auto;position:relative;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.sb-search:hover{background:var(--bg);color:var(--ink)}
.sb-search.on{background:var(--neutral-fill);color:var(--ink)}
.sb-search .fbdg{position:absolute;top:1px;right:1px;width:8px;height:8px;border-radius:50%;background:var(--blue);border:1.5px solid #fff}

/* bảng tìm kiếm + lọc — chỉ hiện khi bấm kính lúp */
.spanel{background:var(--bg);border-radius:12px;padding:11px;margin-bottom:10px;display:grid;gap:10px}
.spanel .fin{background:#fff;max-width:100%;padding:7px 10px;font-size:12.5px}
.sp-lbl{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px;display:block}
.sp-row{display:flex;gap:5px;flex-wrap:wrap}
.spanel .store-sw{background:var(--neutral-fill);margin-bottom:0}
.spanel .fchips{margin-bottom:0;flex-wrap:wrap}

/* dòng tóm tắt khi panel đóng mà đang có lọc */
.fsummary{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--ink-3);padding:0 6px 8px}
.fsummary .x{color:var(--blue);font-weight:600;margin-left:auto}
.fsummary .x:hover{text-decoration:underline}


/* ============================================================
   v1.5 — NÚT HOÀN THÀNH THEO ĐÈN GIAO THÔNG + BỘ KIT CHUẨN + STUDIO
   Nút Hoàn thành: chưa xong = XÁM (mờ khi chưa đủ, đậm khi đủ),
   xong = XANH. Sửa lại → quay về xám. Liếc màu là biết.
   ============================================================ */
.done-btn{background:var(--ink-3);box-shadow:none}
.done-btn:hover:not(:disabled){background:var(--ink-2)}
.done-btn.ok:disabled{background:var(--ok);color:#fff;border:none;cursor:default;opacity:1}

/* xem trước tức thì cho số & ngày — chống nhầm chấm/phẩy, ngày/tháng */
.fprev{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3);background:var(--bg);padding:3px 10px;border-radius:99px;white-space:nowrap}
.fprev b{color:var(--ink);font-weight:600}
.fprev .us{color:var(--warn-dark)}

/* CỤM (cluster) — khung chuẩn duy nhất cho nhóm thông tin */
.clus{border:1px solid var(--hairline);border-radius:var(--r);margin-bottom:12px;background:#fff;overflow:hidden}
.clus-hd{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--hairline);font-size:12px;font-weight:700;color:var(--ink-2)}
.flow-tag{margin-left:auto;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--neutral-fill);color:var(--ink-3)}
.flow-tag.queue{background:var(--warn-tint);color:var(--warn-dark)}

/* LƯỚI HÀNG 1-4 — config chỉ chọn số, hệ thống tự sắp */
.cgrid{display:grid;gap:14px 18px;padding:14px}
.cgrid.c1{grid-template-columns:1fr}
.cgrid.c2{grid-template-columns:repeat(2,1fr)}
.cgrid.c3{grid-template-columns:repeat(3,1fr)}
.cgrid.c4{grid-template-columns:repeat(4,1fr)}
.cell .clbl2{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.cell .clbl2 .rq{color:var(--bad-dark);margin-left:3px}
.cell .hint2{display:block;font-size:11px;color:var(--ink-4);margin-top:4px}
.cell .fin{max-width:100%}
.cell .fin.sm{max-width:100%}
@media (max-width:900px){.cgrid.c3,.cgrid.c4{grid-template-columns:repeat(2,1fr)}}

/* ---------- STUDIO (xưởng mẫu — page riêng) ---------- */
.stu-wrap{max-width:1060px;margin:0 auto;padding:26px 28px 120px}
.stu-h{font-size:18px;font-weight:700;letter-spacing:-.3px;margin:36px 0 6px}
.stu-h:first-of-type{margin-top:0}
.stu-d{font-size:13px;color:var(--ink-3);margin-bottom:14px;max-width:740px}
.stu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tool-card{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:14px 16px}
.tool-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.tool-name{font-size:13px;font-weight:700}
.tool-code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:var(--ink-3);background:var(--bg);padding:1px 7px;border-radius:5px}
.tool-d{font-size:11.5px;color:var(--ink-4);margin-bottom:10px}
.cols-sw{display:flex;gap:5px;margin-bottom:10px}
.composer{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
.cfg-card{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;display:grid;gap:10px}
.cfg-card .fin{max-width:100%}
.kit-pick{display:flex;flex-wrap:wrap;gap:5px}
.json-out{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;line-height:1.55;background:#1d1d1f;color:#d8d8dc;border-radius:10px;padding:13px 15px;white-space:pre-wrap;max-height:320px;overflow:auto;margin-top:12px}
.tb-link{font-size:var(--fs-sm);color:var(--blue);text-decoration:none}
.tb-link:hover{text-decoration:underline}
@media (max-width:880px){.stu-grid{grid-template-columns:1fr}.composer{grid-template-columns:1fr}}


/* ============================================================
   v1.6 — confirm 2 chiều · ô ngày gõ tự nhiên + lịch · danh mục mã
   ============================================================ */
/* nút xác nhận: đã xanh vẫn bấm được để hủy (2 chiều) */
.confirm-btn.ok{cursor:pointer}
.confirm-btn.ok:hover{background:var(--ok-dark);border-color:var(--ok-dark)}

/* ô ngày: gõ chữ tự nhiên + nút lịch (giữ cách bấm chọn) */
.f-unit{position:relative}
.cal-btn{width:34px;height:34px;border:1px solid var(--hairline-2);border-radius:var(--r-sm);background:#fff;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cal-btn:hover{border-color:var(--ink-4);background:var(--bg)}
.cal-hid{position:absolute;left:0;bottom:0;width:0;height:0;opacity:0;pointer-events:none;border:0;padding:0}

/* danh mục chuẩn — bảng ma trận gọi theo mã */
.cat-wrap{background:#fff;border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.cat-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cat-table th{text-align:left;padding:9px 14px;background:var(--bg);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--hairline)}
.cat-table td{padding:8px 14px;border-bottom:1px solid var(--hairline);color:var(--ink-2);vertical-align:top}
.cat-table tr:last-child td{border-bottom:none}
.cat-table .stt{color:var(--ink-4);width:36px}
.cat-code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;background:var(--bg);padding:1px 8px;border-radius:5px;color:var(--ink);font-weight:600;white-space:nowrap}
.cat-loai{font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.cat-ten{font-weight:600;color:var(--ink);white-space:nowrap}
.cat-mota{color:var(--ink-3)}


/* v1.7 — form nhúng trong lưới cụm & card studio */
.cell .embed{max-width:100%}
.tool-card .embed{max-width:100%}
.tool-card .frow{grid-template-columns:1fr;gap:4px}
.tool-card .frow .flbl{padding-top:0}