:root {
  /* Màu chủ đạo Automatify (tím). Giữ nguyên TÊN biến --green* vì hàng trăm
     luật CSS đang dùng chúng — đổi tên là phải sửa hết, đổi giá trị thì không.
     Đây là màu của GIAO DIỆN, không đụng tới bản in hợp đồng: mẫu in có bảng
     màu riêng trong từng file và trong static/mau-preview.css. */
  --adbar-h:44px; --topbar-h:44px;
  --green:#8B3FD9; --green-d:#6B21A8; --green-l:#F3E8FF;
  --ink:#1b2a2f; --muted:#5d6e74; --line:#dce5e7; --danger:#c0392b; --blue:#1F72B8;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body {
  font-family:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin:0; color:var(--ink); background:#f6f8f8;
}
a { color:var(--green-d); text-decoration:none; }
a:hover { text-decoration:underline; }

.site-header {
  background:var(--green); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:24px; height:52px;
}
.site-header .brand, .site-header a { color:#fff; }
.site-header nav { display:flex; gap:18px; }

main { padding:24px; max-width:980px; margin:0 auto; }
.welcome h1 { color:var(--green-d); margin:0 0 6px; }
.cards { display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; flex:1 1 240px; }
.card h3 { margin:0 0 6px; color:var(--green-d); }
.card p { margin:0; color:var(--muted); }

.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-head h1 { margin:0; font-size:22px; color:var(--green-d); }

.btn {
  display:inline-block; border:1px solid var(--green); color:var(--green-d);
  background:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:14px;
}
.btn.primary { background:var(--green); color:#fff; }
.btn:hover { text-decoration:none; opacity:.92; }

table.data { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.data th { background:var(--green-l); color:var(--green-d); text-align:left; padding:10px 12px; font-size:13px; }
table.data td { padding:10px 12px; border-top:1px solid var(--line); font-size:14px; }
.row-actions { display:flex; gap:10px; align-items:center; }
.row-actions form { margin:0; }
.link-danger { background:none; border:none; color:var(--danger); cursor:pointer; padding:0; font:inherit; }
.empty { color:var(--muted); }

.form { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 20px 20px; }
.form fieldset { border:none; border-top:1px solid var(--line); padding:14px 0; margin:0; }
.form legend { color:var(--green-d); font-weight:600; padding:0; }
.form label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
.form input, .form textarea {
  display:block; width:100%; margin-top:4px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff;
}
.form input:focus, .form textarea:focus { outline:none; border-color:var(--green); }
.form .grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.form-actions { margin-top:16px; display:flex; gap:10px; }
.error-box { background:#fdecea; color:var(--danger); border:1px solid #f5c6cb; padding:10px 12px; border-radius:8px; margin-bottom:12px; }

/* ===== App shell (top bar) ===== */
/* sticky chứ KHÔNG fixed: thanh vẫn chiếm chỗ trong luồng, nên các khung tính
   theo calc(100vh - var(--topbar-h)) giữ nguyên đúng. Dùng fixed là chúng cao dư ra.
   Chiều cao để trong MỘT biến: trước đây viết cứng ở ba chỗ, sửa một chỗ là hai
   chỗ kia lệch ngay. Bằng thanh công cụ của Finder — trong khung nhúng hai thanh
   này xếp chồng lên nhau nên lệch chiều cao là nhìn thấy liền. */
.topbar { background:var(--green); color:#fff; height:var(--topbar-h); display:flex; align-items:center; gap:8px; padding:0 14px;
  position:sticky; top:0; z-index:50; }
.topbar .brand { display:flex; align-items:center; background:#fff; border-radius:7px; padding:3px 9px; }
.topbar .brand:hover { text-decoration:none; opacity:.95; }
.brand-logo { height:26px; width:auto; display:block; }
.top-title { color:#fff; font-size:14px; font-weight:600; opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; }
/* admin + ngôn ngữ luôn bám mép phải */
.topbar .lang-toggle { margin-left:auto; }
.lang-toggle { display:flex; gap:2px; background:rgba(255,255,255,.14); border-radius:20px; padding:2px; margin-right:8px; }
.lang-toggle a { color:#eaf4f1; font-size:12px; font-weight:600; padding:4px 9px; border-radius:16px; line-height:1; }
.lang-toggle a:hover { text-decoration:none; background:rgba(255,255,255,.12); }
.lang-toggle a.on { background:#fff; color:var(--green-d); }
/* Chu trình có tới 7 bước nên trên màn hình hẹp nó đẩy vỡ trang. Cho cuộn ngang
   trong chính thanh này: min-width:0 là bắt buộc, thiếu nó thì phần tử flex
   không co lại được và overflow-x vô tác dụng. */
.steps { display:flex; gap:4px; margin-left:16px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:thin; }
.steps::-webkit-scrollbar { height:4px; }
.steps::-webkit-scrollbar-thumb { background:rgba(255,255,255,.35); border-radius:4px; }
.steps .step { flex:none; }
.steps .step { color:#eaf4f1; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px; font-size:14px; }
.steps .step:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.steps .step.on { background:#fff; color:var(--green-d); }
.step-n { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.steps .step.on .step-n { background:var(--green); color:#fff; }
.user { position:relative; }
.user-btn { display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.14); border:none; color:#fff; padding:5px 8px; border-radius:20px; cursor:pointer; }
.avatar { width:26px; height:26px; border-radius:50%; background:#fff; color:var(--green-d); display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.user-pop { position:absolute; right:0; top:46px; background:#fff; border:1px solid var(--line); border-radius:10px; min-width:184px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; z-index:30; }
.user-pop a { display:block; padding:8px 10px; border-radius:7px; color:var(--ink); font-size:14px; }
.user-pop a:hover { background:var(--gl); text-decoration:none; }
.user-pop a.muted { color:var(--muted); cursor:default; }

/* ===== Container for simple pages ===== */
.container { padding:24px; max-width:980px; margin:0 auto; }
.container.narrow { max-width:720px; }

/* ===== Create-deal screen ===== */
.back-link { display:inline-block; margin-bottom:12px; font-size:13px; color:var(--muted); }
.back-link:hover { color:var(--green-d); }
.create-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 30px 30px; box-shadow:0 1px 14px rgba(10,95,86,.06); }
.create-head h1 { margin:0 0 6px; font-size:23px; color:var(--green-d); }
.create-head p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.step-flow { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:14px 16px; background:var(--green-l); border-radius:12px; }
.step-flow li { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--green-d); }
.step-flow .sf-n { width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.step-flow .sf-arrow { color:var(--green); font-weight:600; opacity:.65; }
.notice { margin:16px 0 0; padding:11px 14px; background:#fff6e9; border:1px solid #f0d9ad; border-radius:10px; font-size:13px; color:#7a5b1e; }
.notice a { color:#7a5b1e; text-decoration:underline; }

.create-form { margin-top:18px; }
.party-pick { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:12px; }
.pick-card { border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:#fbfdfd; }
.pick-tag { display:block; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; margin-bottom:7px; }
.pick-tag.a { color:var(--green-d); }
.pick-tag.b { color:#1f6f97; }
.pick-card select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.pick-card select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.pick-preview { margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5; }
.pick-preview .k { color:var(--green-d); font-weight:600; }
.pick-vs { align-self:center; color:var(--muted); font-size:18px; padding-top:18px; }

/* the party selects match the "Tên hồ sơ" input below (same size/border/font) */
.pick-row select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; }
.pick-row select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.name-field { display:block; margin-top:18px; }
.name-field .nf-label { display:block; font-size:13px; color:var(--ink); margin-bottom:5px; }
.name-field input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.name-field input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.create-actions { display:flex; gap:10px; align-items:center; margin-top:22px; }
.btn.big { padding:11px 20px; font-size:15px; font-weight:600; }

@media (max-width:640px) {
  .party-pick { grid-template-columns:1fr; }
  .pick-vs { display:none; }
  .step-flow { font-size:12px; }
}

/* ===== Workspace: 3 columns ===== */
.workspace { display:grid; grid-template-columns:372px minmax(330px,1fr) minmax(380px,1.05fr); height:calc(100vh - var(--topbar-h) - var(--adbar-h)); }
.col-list, .col-editor { overflow:auto; }
.col-list { border-right:1px solid var(--line); background:#fff; padding:10px 10px 0; display:flex; flex-direction:column; }
.col-editor { padding:14px 18px 28px; background:#f6f8f8; scrollbar-width:none; }
.col-editor::-webkit-scrollbar { width:0; height:0; }
/* Cột xem trước kiểu trình đọc PDF (Edge): nền tối, toolbar dính trên cùng,
   các tờ giấy trắng căn giữa. */
.col-preview { position:relative; background:#4b5054; overflow:auto; padding:0 0 30px; display:flex; flex-direction:column; align-items:center; scrollbar-width:none; }
.col-preview::-webkit-scrollbar { width:0; height:0; }
.paper-sizer { flex:0 0 auto; margin:16px auto 0; }
.paper { border:0; display:block; background:transparent; }
/* "Đang tạo bản xem…" overlay while the server renders the PDF (~1s).
   sticky so it stays near the top of the preview column while it scrolls. */
.preview-loading { position:sticky; top:52px; z-index:15; margin-top:10px;
  display:flex; align-items:center; gap:8px; background:rgba(30,34,36,.92); color:#eaf1f0;
  font-size:12px; padding:7px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.preview-loading[hidden] { display:none; }
.preview-loading .spin { width:13px; height:13px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:ocospin .7s linear infinite; }
.preview-loading__lottie { width:22px; height:22px; margin:-4px 0; flex:0 0 auto; }
@keyframes ocospin { to { transform:rotate(360deg); } }
/* toast — brief confirmation bottom-center */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:var(--green-d); color:#fff; font-size:13px; font-weight:500; padding:10px 18px;
  border-radius:24px; box-shadow:0 8px 26px rgba(0,0,0,.25); z-index:100; opacity:0;
  transition:opacity .22s ease, transform .22s ease; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* per-deal attachments (contract template uploads) */
.att-box { margin-top:14px; }
.att-list { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:5px; }
.att-list li { display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:13px; background:#fff; }
.att-list li a { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-list li form { margin:0 0 0 auto; }
.att-upload { margin:0; }

.list-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.list-head h2 { margin:0; font-size:15px; color:var(--green-d); }
.list-head-tools { display:flex; align-items:center; gap:6px; }
.icon-toggle { border:1px solid var(--line); background:#fff; color:var(--muted); width:26px; height:26px;
  border-radius:7px; cursor:pointer; font-size:14px; line-height:1; }
.icon-toggle:hover { border-color:var(--green); color:var(--green-d); }
/* left-list search + time grouping */
.list-controls { display:flex; gap:6px; margin-bottom:10px; }
.deal-search { flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 9px;
  font:inherit; font-size:12px; color:var(--ink); background:#fff; }
.deal-search:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.deal-group { flex:0 0 auto; border:1px solid var(--line); border-radius:8px; padding:6px 7px;
  font:inherit; font-size:12px; color:var(--muted); background:#fff; cursor:pointer; }
.deal-group:focus { outline:none; border-color:var(--green); }
.deal-group-head { font-size:11px; font-weight:700; color:var(--green-d); text-transform:uppercase;
  letter-spacing:.3px; margin:12px 2px 4px; }
.deal-group-head:first-child { margin-top:2px; }
.list-empty { color:var(--muted); font-size:12px; padding:8px 2px; }
/* collapse / re-open the left column — the » button sits on the TOP BAR
   (moved there by deals.js) so it never covers the editor heading */
.list-reopen { display:none; }
/* col-list is display:none when collapsed, so the grid drops to 2 tracks
   (editor + preview) — leaving it at 3 values would squeeze the editor into a
   0-width first track. */
.workspace.list-collapsed { grid-template-columns:minmax(330px,1fr) minmax(380px,1.05fr); }
/* Trang chỉ có MỘT khối (cài đặt, danh sách mẫu, quản trị): lưới 2 cột khiến nội
   dung dạt hẳn sang trái và bỏ trống nửa phải. Cho một cột và căn giữa trang. */
.workspace.single { grid-template-columns:minmax(0,860px); justify-content:center; }
.workspace.single .col-editor { border-right:none; }
.workspace.list-collapsed .col-list { display:none; }
body.list-collapsed .topbar .list-reopen { display:inline-flex; align-items:center;
  justify-content:center; width:28px; height:28px; padding:0; border-radius:8px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#fff;
  cursor:pointer; font-size:14px; line-height:1; }
body.list-collapsed .topbar .list-reopen:hover { background:rgba(255,255,255,.28); }
.doc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.doc-list li { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:9px; padding:5px 6px 5px 10px; }
.doc-list li.on { border-color:var(--green); background:var(--gl); }
.doc-list li a { flex:1; display:flex; flex-direction:column; gap:1px; color:var(--ink); }
.doc-list li a:hover { text-decoration:none; }
.doc-title { font-size:13px; font-weight:500; }
.doc-sub { font-size:11px; color:var(--muted); }
.doc-list form { margin:0; }
/* per-deal 4-step progress dots in the left list */
.deal-steps { display:flex; gap:3px; margin-top:5px; }
.deal-steps .ds { width:16px; height:16px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:10px; font-weight:600; }
.deal-steps .ds.done { background:var(--green); color:#fff; }
.deal-steps .ds.todo { background:#e6edee; color:var(--muted); }
/* top-bar step tick when that step already has a document */
.steps .step.done .step-n { background:#fff; color:var(--green); }
.steps .step.on.done .step-n { background:var(--green); color:#fff; }

.editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:2px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
/* Báo giá top cluster (version tabs + title/actions) stays pinned while scrolling */
.editor-topbar { position:sticky; top:0; z-index:10; background:#f6f8f8; margin:-14px -18px 10px; padding:12px 18px 0; border-bottom:1px solid var(--line); box-shadow:0 -16px 0 0 #f6f8f8, 0 5px 7px -5px rgba(0,0,0,.14); }
.editor-topbar .quote-tabs { margin-bottom:8px; }
.editor-topbar .editor-head { border-bottom:none; margin-bottom:0; padding-bottom:10px; }
.editor-head h2 { margin:0; font-size:16px; color:var(--green-d); }
.editor-form label { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.editor-form input, .editor-form textarea, .editor-form select {
  display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; font:inherit; font-size:13px; color:var(--ink); background:#fff;
}
.editor-form input:focus, .editor-form textarea:focus, .editor-form select:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--gl);
}
/* textareas auto-grow to fit their text (JS) — no inner scrollbar or manual resize */
.editor-form textarea { overflow:hidden; resize:none; }
/* EN field + its per-field ✨ Dịch button on one line */
.en-line { display:flex; align-items:flex-start; gap:6px; }
.editor-grid .proj-en { grid-column:2; }
.en-line .en-input { flex:1 1 auto; min-width:0; }
.tr-one { flex:0 0 auto; margin-top:4px; font-size:11px; padding:4px 9px; white-space:nowrap;
  border:1px dashed var(--green); border-radius:7px; background:#fff; color:var(--green-d); cursor:pointer; }
.tr-one:hover { background:var(--green-l); }
.tr-one:disabled { opacity:.55; cursor:default; }
/* English companion fields (auto-filled by AI, still editable) — subtly muted
   so the Vietnamese input stays primary but the saved English is visible. */
.editor-form .en-input {
  margin-top:4px; font-size:12px; font-style:italic; color:var(--muted);
  background:#fbfdfd; border-style:dashed;
}
.editor-form .en-input:focus { font-style:normal; color:var(--ink); }
.editor-form .en-input::placeholder { font-style:italic; color:#9fb0b3; }
.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.field-group { border-top:1px solid var(--line); margin-top:14px; padding-top:6px; }
.field-group h3 { font-size:13px; color:var(--green-d); margin:8px 0; }
.hint { font-size:12px; color:var(--muted); background:var(--gl); border-radius:8px; padding:8px 10px; }
.hint a { color:var(--green-d); }

.items { display:flex; flex-direction:column; gap:8px; }
.item-row { border:1px solid var(--line); border-radius:9px; background:#fff; padding:8px; display:flex; flex-direction:column; gap:8px; }
.item-row input { margin-top:0; }
.item-row textarea { margin-top:0; resize:vertical; width:100%; }
/* labeled field: small caption above each input so users know what it shows */
.item-row .fld { display:block; margin:0; }
.item-row .fld > span { display:block; font-size:11px; font-weight:600; color:var(--green-d); margin:0 0 3px 1px; }
.item-row .fld input, .item-row .fld textarea { width:100%; }
.item-row .meta3 { display:flex; gap:8px; align-items:flex-start; }
.item-row .meta3 > .fld { flex:1 1 0; min-width:0; }
.item-row .nums { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.item-row .nums .fld.w-unit { flex:0 0 72px; }
.item-row .nums .fld.w-num { flex:0 0 96px; }
.item-row .nums .fld.w-note { flex:1 1 110px; min-width:90px; }
.item-row .nums .row-del { margin-left:auto; flex:0 0 auto; margin-bottom:5px; }
/* Toolbar trên đầu cột xem (kiểu thanh công cụ PDF của Edge) */
.preview-bar { position:sticky; top:0; z-index:30; align-self:stretch; display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; padding:7px 12px; background:#323639; border-bottom:1px solid #26292b; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.preview-bar .btn { font-size:12px; padding:5px 10px; background:#fff; }
.pg-count { font-size:12px; font-weight:600; color:#e8eaed; }
.ov-note { font-size:12px; font-weight:600; color:#8fd6ca; }
/* zoom controls — scale only the preview pane */
.zoom-ctl { display:flex; align-items:center; gap:4px; margin-right:auto; }
.zoom-ctl button { min-width:24px; height:24px; padding:0 6px; line-height:1; border:1px solid #55595e; border-radius:6px; background:#43474c; color:#e8eaed; font-size:13px; cursor:pointer; }
.zoom-ctl button:hover { background:#55595e; }
.zoom-ctl #zoom-fit { font-size:11px; }
#zoom-val { min-width:42px; text-align:center; font-size:12px; font-weight:600; color:#e8eaed; }

/* per-row layout controls: ▲▼ reorder + "↵ new page" toggle */
.item-toolbar { display:flex; align-items:center; gap:6px; margin:-2px 0 2px; }
.row-move { width:24px; height:22px; padding:0; line-height:1; font-size:10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted); cursor:pointer; }
.row-move:hover { border-color:var(--green); color:var(--green-d); background:var(--green-l); }
.pb-toggle { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); cursor:pointer; user-select:none; }
.pb-toggle input[type="checkbox"] { width:auto; margin:0; accent-color: var(--green); }
.cond-row .row-tools { position:absolute; top:6px; right:32px; display:flex; gap:4px; }
.layout-grid { grid-template-columns:1fr 1fr 1fr; gap:0 10px; }
/* small utility button beside the "Danh mục" heading */
.field-group h3 .clear-breaks { float:right; margin:0; padding:3px 9px; font-size:11px; font-weight:400; }
.field-group h3.h3-row { display:flex; align-items:center; gap:6px; }
.field-group h3.h3-row .cond-break { font-weight:400; }

/* item detail lines (multiple per service) + product-catalog detail rows */
.item-row .details-field > span { display:block; font-size:11px; font-weight:600; color:var(--green-d); margin:0 0 3px 1px; }
.item-row .details, #detail-rows { display:flex; flex-direction:column; gap:7px; }
.detail-row { position:relative; border:1px solid var(--line); border-radius:8px; background:#fff; padding:7px 30px 7px 8px; display:flex; flex-direction:column; gap:5px; }
.detail-row textarea { width:100%; margin-top:0; }
/* "Dịch" inside a product detail row sits under the EN textarea, aligned right */
.detail-row > .tr-one { align-self:flex-end; }
.detail-del { position:absolute; top:6px; right:6px; width:20px; height:20px; padding:0; line-height:16px; text-align:center; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--danger); cursor:pointer; }
.detail-del:hover { background:#fbecea; }
.item-row .add-detail, #add-detail { margin-top:6px; font-size:12px; padding:5px 11px; }
.conds { display:flex; flex-direction:column; gap:8px; }
.cond-row { border:1px solid var(--line); border-radius:9px; background:#fff; padding:8px 34px 8px 8px; display:flex; flex-direction:column; gap:6px; position:relative; }
.cond-row .cond-label { font-weight:500; margin-top:0; }
.cond-row textarea { resize:vertical; width:100%; margin-top:0; }
.cond-row .row-del { position:absolute; top:7px; right:7px; }
.add-item { margin-top:8px; }

/* ===== Cột bảng giá (đổi vị trí / đổi tên / xóa / thêm) ===== */
.cots { display:flex; flex-direction:column; gap:6px; }
.cot-row { display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:9px; background:#fff; padding:6px 8px; }
.cot-grip { color:#b6c2c4; font-size:12px; letter-spacing:-2px; user-select:none; }
/* min-width:0 là điều kiện để ô chữ co lại được trong flex — thiếu nó thì tên
   cột dài đẩy các nút ▲▼× tràn ra ngoài viền. */
.cot-row .cot-nhan { flex:1; min-width:0; margin-top:0; }
.cot-note { color:var(--muted); font-size:12px; white-space:nowrap; }
.cot-row .row-tools { display:flex; gap:4px; }
.cot-add { margin-top:8px; }
.cot-add select { max-width:220px; }
/* Ô nhập của các cột tự nhập, trong từng dòng hàng hóa */
.cot-vals { display:flex; flex-wrap:wrap; gap:0 10px; }
.cot-vals .fld { flex:1 1 160px; min-width:0; }
.cot-vals:empty { display:none; }
.vat { max-width:150px; }
.row-del { width:26px; height:26px; border:none; background:#f3e1e0; color:var(--danger); border-radius:7px; cursor:pointer; font-size:16px; line-height:1; }
.row-del:hover { background:#eccfce; }
.btn.ghost { background:transparent; border:1px dashed var(--green); }
.coming { padding:40px 20px; color:var(--muted); }
.coming h2 { color:var(--green-d); }

@media (max-width:980px) {
  .workspace { grid-template-columns:1fr; height:auto; }
  .col-preview { height:78vh; }
  .col-list { border-right:none; border-bottom:1px solid var(--line); }
}

.ai-bar { display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.btn.ai { background:#eef6f4; border:1px solid var(--green); color:var(--green-d); }
.btn.ai:disabled { opacity:.55; cursor:default; }
.ai-status { font-size:12px; color:var(--muted); }
.head-actions { display:flex; gap:8px; align-items:center; }
.deal-parties { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink); background:#f0f5f4; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.deal-parties b { color:var(--green-d); }
.deal-parties.edit { flex-direction:column; align-items:stretch; gap:8px; }
.deal-parties .dp { display:flex; align-items:center; gap:10px; margin:0; }
.deal-parties .dp b { flex:0 0 46px; }
.deal-parties select { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; color:var(--ink); background:#fff; cursor:pointer; }
.deal-parties select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }

/* Multiple quotes per deal — version tabs + add button */
.quote-tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.quote-tabs .qtab { display:inline-block; padding:4px 11px; border:1px solid var(--line); border-radius:16px; font-size:12px; color:var(--muted); background:#fff; }
.quote-tabs a.qtab:hover { border-color:var(--green); text-decoration:none; }
.quote-tabs a.qtab.on { background:var(--green); color:#fff; border-color:var(--green); }
.qtab-add-form { margin:0; }
.quote-tabs .qtab.add { border-style:dashed; border-color:var(--green); color:var(--green-d); cursor:pointer; }
.qtab-wrap { display:inline-flex; align-items:center; gap:3px; }
.qtab-wrap form { margin:0; display:none; }
.qtab-wrap.on form, .qtab-wrap:hover form { display:inline-flex; }
.qtab-del { width:18px; height:18px; border:none; background:#f3e1e0; color:var(--danger); border-radius:50%; cursor:pointer; font-size:12px; line-height:1; padding:0; }
.qtab-del:hover { background:#eccfce; }
/* 🕘 menu listing EVERY quote version (only the 4 newest render as chips) */
.qtab-more { position:relative; display:inline-flex; }
.qtab-more .more-btn { cursor:pointer; }
.qtab-menu { position:absolute; left:0; top:30px; z-index:40; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; min-width:230px; max-height:290px; overflow:auto; }
.qtab-menu a { display:block; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--ink); }
.qtab-menu a:hover { background:var(--green-l); text-decoration:none; }
.qtab-menu a.on { background:var(--green); color:#fff; }
.qtab-menu a.on .muted { color:#d7ece8; }
.deal-code { color:var(--green-d); }

/* Item image picker (stored as data-URL) + suggested condition templates */
.img-field { display:flex; align-items:center; gap:6px; min-width:0; }
.img-btn { padding:6px 9px; font-size:12px; cursor:pointer; white-space:nowrap; }
.it-thumb { height:30px; max-width:52px; object-fit:cover; border:1px solid var(--line); border-radius:5px; }
.img-clear { width:20px; height:20px; border:none; background:#f3e1e0; color:var(--danger); border-radius:5px; cursor:pointer; font-size:13px; line-height:1; }
.cond-preset-row { display:flex; gap:8px; align-items:center; margin:2px 0 10px; }
.cond-preset { flex:1; min-width:0; display:block; padding:7px 9px; border:1px dashed var(--green); border-radius:8px; font:inherit; font-size:13px; color:var(--green-d); background:#fbfdfd; cursor:pointer; }
.cond-preset:focus { outline:none; box-shadow:0 0 0 2px var(--green-l); }
.cond-preset-row .btn { white-space:nowrap; font-size:12px; padding:7px 10px; }
.cond-preset-row .tpl-del, .fx-deldoc { border-color:var(--danger); color:var(--danger); }
.einvoice-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 4px; padding:10px 12px; border:1px dashed var(--green); border-radius:9px; background:#fbfdfd; font-size:12px; }
.einvoice-upload .btn { white-space:nowrap; cursor:pointer; }

/* ===== Auth (login / change password) ===== */
.auth-body { min-height:calc(100vh - var(--adbar-h)); display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#f0f5f4,#e3eeeb); padding:24px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 30px 26px; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(10,95,86,.10); text-align:center; }
.auth-logo { display:block; margin:0 auto 14px; }
.auth-card h1 { margin:0 0 4px; font-size:22px; color:var(--green-d); }
.auth-sub { margin:0 0 18px; font-size:13px; color:var(--muted); line-height:1.5; }
.auth-form { text-align:left; }
.auth-form label { display:block; font-size:13px; color:var(--ink); margin:12px 0 0; }
.auth-form input { display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.auth-form input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.auth-submit { width:100%; margin-top:18px; }
/* trang xác thực: thông báo trung tính, liên kết phụ, nút dạng chữ */
.notice-box { background:#eef7f4; color:var(--green-d); border:1px solid #cfe6df; padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:13px; text-align:left; }
.auth-alt { margin:14px 0 0; font-size:13px; color:var(--muted); }
.auth-alt a { color:var(--green-d); }
.auth-form .hint { display:block; margin-top:6px; background:none; padding:0; }
.btn.link { background:none; border:none; color:var(--green-d); text-decoration:underline; padding:6px 0; width:100%; cursor:pointer; font:inherit; font-size:13px; }
.auth-logout { margin-top:12px; }
.auth-logout .btn { width:100%; }
.user-name { padding:6px 10px 8px; font-weight:600; color:var(--green-d); border-bottom:1px solid var(--line); margin-bottom:4px; }
.menu-logout { margin:0; }
.menu-logout button { display:block; width:100%; text-align:left; padding:8px 10px; border:none; background:none; font:inherit; font-size:14px; color:var(--danger); cursor:pointer; border-radius:7px; }
.menu-logout button:hover { background:#fbecea; }
.preview-empty { margin:auto; padding:2rem; text-align:center; color:var(--muted); font-size:13px; }

/* small Print button + print (PDF) modal */
.icon-btn { padding:8px 10px; }
.print-modal { position:fixed; inset:0; z-index:60; background:rgba(15,22,24,.72); display:flex; align-items:center; justify-content:center; padding:22px; }
.print-modal[hidden] { display:none; }
.print-sheet { background:#fff; border-radius:12px; width:min(920px,96vw); height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.45); }
.print-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line); font-weight:600; color:var(--green-d); }
.print-sheet iframe { flex:1; border:0; width:100%; }

/* Editable commercial conditions (quote editor) */
.cond-edit { border:1px solid var(--line); border-radius:9px; background:#fff; margin-top:14px; padding:0 12px; }
.cond-edit summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--green-d); padding:10px 2px; list-style:none; }
.cond-edit summary::-webkit-details-marker { display:none; }
.cond-edit summary::before { content:"▸ "; color:var(--green); }
.cond-edit[open] summary::before { content:"▾ "; }
.cond-edit summary .muted { font-weight:400; }
.cond-edit label { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.cond-edit textarea, .cond-edit input { display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; color:var(--ink); background:#fff; }
.cond-edit textarea:focus, .cond-edit input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.cond-note { font-size:11px; margin:8px 0 12px; line-height:1.5; }
.cond-note b { color:var(--green-d); }
.contract-btn { border-color:var(--green); color:var(--green-d); font-weight:600; }
.scope-list { margin:6px 0; padding-left:18px; font-size:13px; color:var(--ink); }
.scope-list li { margin:4px 0; }

/* --- New-case party picker: single column, short-name dropdowns, info panel --- */
.party-stack { display:flex; flex-direction:column; gap:14px; }
.pick-block { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; }
.pick-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.5px; padding:2px 11px; border-radius:20px; margin-bottom:8px; }
.pick-tag.a { background:var(--green-l); color:var(--green-d); }
.pick-tag.b { background:#eef2fb; color:#2b4c86; }
.pick-row { display:flex; gap:8px; align-items:center; }
.pick-row select { flex:1 1 auto; min-width:0; }
.pick-row .add-co { white-space:nowrap; flex:0 0 auto; }
.pick-info { margin-top:10px; padding:9px 11px; border-radius:9px; background:var(--green-l); font-size:13px; line-height:1.55; }
.pick-info[hidden] { display:none; }
.pick-info .pi-name { font-weight:700; color:var(--ink); margin-bottom:1px; }
.pick-info .k { color:var(--muted); }

/* editor party picker rows (with + Add company) */
.deal-parties.edit .dp { display:block; margin-bottom:8px; }
.deal-parties.edit .dp b { display:block; font-size:12px; color:var(--green-d); margin-bottom:3px; }
.deal-parties.edit .dp-row { display:flex; gap:8px; align-items:center; }
.deal-parties.edit .dp-row select { flex:1 1 auto; min-width:0; }
.deal-parties.edit .dp-add { white-space:nowrap; flex:0 0 auto; }

/* --- Add-company modal --- */
.modal-overlay { position:fixed; inset:0; background:rgba(20,30,33,.5); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:1000; overflow:auto; }
.modal-overlay[hidden] { display:none; }
.modal-card { background:#fff; border-radius:14px; width:100%; max-width:560px; box-shadow:0 18px 50px rgba(0,0,0,.28); display:flex; flex-direction:column; max-height:90vh; }
.modal-body { overflow-y:auto; }
.modal-body fieldset { border:1px solid var(--line); border-radius:9px; margin:0 0 6px; padding:8px 12px 12px; }
.modal-body legend { font-size:12px; font-weight:600; color:var(--green-d); padding:0 6px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:16px; color:var(--green-d); }
.modal-close { border:none; background:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.modal-body { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.modal-body label { display:block; font-size:13px; color:var(--muted); }
.modal-body input, .modal-body select, .modal-body textarea { display:block; width:100%; margin-top:3px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px; color:var(--ink); background:#fff; }
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-l); }
.modal-body .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-body .error-box[hidden] { display:none; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }

/* ===== Trang chủ kiểu Finder (full màn hình) — finder.js dựng, .fx-* ===== */
.finder {
  height: calc(100vh - var(--topbar-h) - var(--adbar-h));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: #fff;
  overflow: hidden;
  font-size: 13px;
}

/* toolbar */
.fx-toolbar { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); background:#f4f8f7; }
.fx-nav { display:flex; gap:4px; }
.fx-rnd { width:28px; height:28px; border:1px solid var(--line); background:#fff; border-radius:7px; color:var(--ink); font-size:16px; line-height:1; cursor:pointer; }
.fx-rnd:hover:not(:disabled) { background:var(--green-l); border-color:var(--green); color:var(--green-d); }
.fx-rnd:disabled { opacity:.4; cursor:default; }
.fx-title { font-weight:600; font-size:14px; color:var(--ink); margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.fx-vswitch { display:flex; gap:2px; margin-left:auto; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.fx-vbtn { width:32px; height:28px; border:none; background:#fff; color:var(--muted); font-size:14px; cursor:pointer; }
.fx-vbtn:hover { background:#eef4f3; }
.fx-vbtn.on { background:var(--green-l); color:var(--green-d); }
.fx-sort { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.fx-sort select { font:inherit; font-size:12px; border:1px solid var(--line); border-radius:7px; padding:5px 6px; background:#fff; color:var(--ink); }
.fx-search input[type=search] { border:1px solid var(--line); border-radius:7px; padding:6px 11px; min-width:200px; font:inherit; font-size:13px; background:#fff; }
.fx-search input[type=search]:focus { outline:none; border-color:var(--green); }
.fx-newbtn { white-space:nowrap; background:var(--green); color:#fff; border-radius:7px; padding:7px 13px; font-weight:600; font-size:13px; }
.fx-newbtn:hover { background:var(--green-d); text-decoration:none; }

/* main = sidebar + content */
.fx-main { display:grid; grid-template-columns:214px minmax(0,1fr); min-height:0; }
.fx-sidebar { background:#eef3f2; border-right:1px solid var(--line); padding:10px 8px; overflow-y:auto;
  position:relative; display:flex; flex-direction:column; }
/* margin-top:auto đẩy nút xuống đáy dù danh sách dài ngắn thế nào; sticky để khi
   danh sách tràn phải cuộn thì nút vẫn thấy được. */
.fx-sbfoot { margin-top:auto; padding-top:8px; position:sticky; bottom:0;
  background:#eef3f2; display:flex; justify-content:flex-end; }
.fx-sidebar.collapsed .fx-sbfoot { justify-content:center; }

/* ── Thu gọn thanh bên ──────────────────────────────────────────────────────
   Lưới cha đặt bề rộng cột theo :has() — thanh bên tự quyết định, không cần
   ai đó nhớ gắn thêm class lên phần tử cha. */
.fx-main:has(> .fx-sidebar.collapsed) { grid-template-columns:56px minmax(0,1fr); }

.fx-sbtoggle { display:block; width:24px; height:24px; line-height:1; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted);
  font:inherit; font-size:13px; }
.fx-sbtoggle:hover { background:var(--green-l); color:var(--green-d); border-color:var(--green); }
.fx-sbtoggle:focus-visible { outline:2px solid var(--green); outline-offset:1px; }

/* Thu gọn: chỉ còn biểu tượng. Chữ ẩn bằng cách KHÔNG chiếm chỗ, và tiêu đề
   nhóm co về một vạch ngăn để vẫn thấy ranh giới giữa các nhóm. */
.fx-sidebar.collapsed { padding:10px 6px; }
.fx-sidebar.collapsed .fx-slabel,
.fx-sidebar.collapsed .fx-n { display:none; }
.fx-sidebar.collapsed .fx-sitem { justify-content:center; padding:7px 0; gap:0; }
.fx-sidebar.collapsed h5 { height:1px; margin:9px 6px; padding:0; overflow:hidden;
  background:var(--line); color:transparent; }
.fx-sidebar h5 { margin:12px 8px 3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; }
.fx-sidebar h5:first-child { margin-top:2px; }
.fx-sitem { display:flex; align-items:center; gap:8px; width:100%; padding:6px 9px; border:none; background:transparent; border-radius:7px; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; text-align:left; }
.fx-sitem:hover { background:#e2ebe9; text-decoration:none; }
.fx-sitem.on { background:#d5e8e4; color:var(--green-d); font-weight:600; }
/* Chữ dài không được đẩy vỡ cột: cắt bằng … thay vì tràn ra ngoài. min-width:0
   là bắt buộc, thiếu nó thì phần tử flex không co lại được và ellipsis vô tác dụng. */
.fx-slabel { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-sico { width:17px; text-align:center; flex:none; }
.fx-dot { width:12px; height:12px; border-radius:4px; flex:none; }
.fx-n { font-size:11px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:0 7px; color:var(--muted); }

/* content area */
.fx-content { overflow:auto; position:relative; outline:none; }
.fx-content:focus-visible { box-shadow:inset 0 0 0 2px var(--green-l); }

/* tiến độ chấm */
.fx-dots { display:inline-flex; gap:3px; }
.fx-dots i { width:7px; height:7px; border-radius:50%; background:#cfdbd9; }
.fx-dots i.ok { background:var(--green); }

/* item chung */
.fx-item { border:none; background:transparent; font:inherit; color:var(--ink); cursor:pointer; }
.fx-item.ghost { opacity:.55; }

/* ICON view */
.fx-icons { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:6px; padding:16px; align-content:start; }
.fx-icons .fx-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px 9px; border-radius:10px; text-align:center; }
.fx-icons .fx-item:hover { background:#f0f5f4; }
.fx-icons .fx-item.sel { background:#d5e8e4; }
.fx-thumb { height:52px; display:flex; align-items:flex-end; justify-content:center; }
.fx-label { font-weight:600; font-size:12px; line-height:1.25; word-break:break-word; max-width:118px; }
.fx-meta { font-size:10.5px; color:var(--muted); }

/* LIST view */
.fx-list { min-width:640px; }
.fx-lrow { display:grid; grid-template-columns:minmax(0,1fr) 130px 150px 130px; align-items:center; gap:8px; padding:6px 14px; border-bottom:1px solid #f0f4f3; font-size:13px; color:var(--ink); cursor:pointer; }
.fx-lrow.head { position:sticky; top:0; background:#f4f8f7; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; cursor:default; z-index:1; }
.fx-lrow:not(.head):hover { background:#f6faf9; }
.fx-lrow.sel { background:#d5e8e4; }
.fx-lname { display:flex; align-items:center; gap:4px; padding-left:calc(var(--d,0) * 18px); min-width:0; }
.fx-lname > :last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-tri { width:14px; flex:none; color:var(--muted); cursor:pointer; transition:transform .12s; font-size:10px; }
.fx-tri.open { transform:rotate(90deg); }
.fx-tri.sp { cursor:default; }
.fx-lico { display:inline-flex; width:22px; flex:none; }
.fx-lico .ico { width:20px; height:auto; }
.fx-st { font-size:11px; font-weight:600; border-radius:999px; padding:1px 8px; }
.fx-st.done { background:var(--green-l); color:var(--green-d); }
.fx-st.todo { background:#f0f0f0; color:#8a9793; }

/* COLUMN view (Miller) */
.fx-columns { display:flex; height:100%; overflow-x:auto; }
.fx-col { flex:none; width:240px; border-right:1px solid var(--line); overflow-y:auto; padding:6px; }
.fx-col.active { background:#fbfdfc; }
.fx-col.preview { width:250px; background:#fafcfb; padding:16px 14px; }
.fx-colempty { color:var(--muted); text-align:center; padding:16px; font-size:12px; }
.fx-crow { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border-radius:7px; text-align:left; font-size:13px; }
.fx-crow:hover { background:#eef4f3; }
.fx-crow.colsel, .fx-crow.sel { background:var(--green); color:#fff; }
.fx-crow.colsel .fx-chev, .fx-crow.colsel .fx-dots i { filter:brightness(2); }
.fx-crow.colsel .ico, .fx-crow.sel .ico { }
.fx-cname { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-crow:hover .fx-cname { white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
.ws-fold:hover .lbl { white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; }
.fx-chev { color:var(--muted); flex:none; }
.fx-crow.colsel .fx-chev { color:#fff; }
.fx-lico .ico, .fx-crow .ico { width:20px; height:auto; flex:none; }

/* GALLERY view */
.fx-gallery { display:grid; grid-template-columns:minmax(0,1fr) 262px; grid-template-rows:1fr auto; height:100%; }
.fx-gstage { grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; background:#f4f8f7; overflow:auto; }
.fx-ghero { transform:scale(2.2); }
.fx-gstrip { grid-column:1; grid-row:2; display:flex; gap:10px; overflow-x:auto; padding:12px 14px; border-top:1px solid var(--line); background:#fff; }
.fx-gthumb { flex:none; width:96px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px; border:1px solid transparent; border-radius:9px; background:#fff; cursor:pointer; }
.fx-gthumb:hover { background:#f0f5f4; }
.fx-gthumb.on { border-color:var(--green); background:var(--green-l); }
.fx-glabel { font-size:10.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:84px; }
.fx-ginfo { grid-column:2; grid-row:1 / span 2; border-left:1px solid var(--line); padding:18px 16px; overflow-y:auto; background:#fff; }

/* pane thông tin (preview / gallery info / quick look) */
.fx-qthumb { display:flex; align-items:center; justify-content:center; height:110px; margin-bottom:6px; }
.fx-qhint { color:var(--muted); font-size:12.5px; text-align:center; margin-top:40px; }
.fx-qname { margin:8px 0 2px; font-size:14px; word-break:break-word; }
.fx-qsub { color:var(--muted); font-size:11.5px; margin-bottom:12px; word-break:break-word; }
.fx-kv { border-top:1px solid #edf2f1; margin-bottom:12px; }
.kvrow { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:6px 0; border-bottom:1px solid #edf2f1; }
.kvrow span { color:var(--muted); flex:none; }
.kvrow b { font-weight:600; text-align:right; word-break:break-word; }
.fx-qact { display:flex; gap:8px; }
.fx-qact .btn { flex:1; text-align:center; }

/* path bar + status bar */
.fx-pathbar { display:flex; align-items:center; gap:2px; padding:5px 12px; border-top:1px solid var(--line); background:#f4f8f7; overflow-x:auto; white-space:nowrap; }
.fx-seg { border:none; background:transparent; font:inherit; font-size:12px; color:var(--green-d); padding:2px 6px; border-radius:6px; cursor:pointer; }
.fx-seg:hover { background:#e2ebe9; }
.fx-seg.dim { color:var(--muted); cursor:default; }
.fx-sep { color:#b8c6c3; font-size:11px; }
.fx-statusbar { display:flex; align-items:center; gap:14px; padding:5px 14px; border-top:1px solid var(--line); background:#eef3f2; color:var(--muted); font-size:11.5px; }
.fx-grow { flex:1; }

/* PDF nhúng (cột xem trước / gallery / quick look) */
.fx-pdfwrap { height:56%; min-height:260px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#f4f8f7; margin-bottom:10px; }
.fx-pdf { width:100%; height:100%; border:none; display:block; }
/* cột xem trước luôn nuốt hết phần còn trống — không để cột trống bên phải */
.fx-col.preview { flex:1 1 auto; width:auto; min-width:300px; }
.fx-col.preview.wide { display:flex; flex-direction:column; min-width:380px; }
.fx-col.preview.wide .fx-pdfwrap { flex:1; height:auto; }
.fx-col.preview.wide .fx-qact { max-width:560px; }
.fx-gpdf { width:min(760px,92%); height:94%; border:1px solid var(--line); border-radius:8px; background:#fff; }
.fx-qnote { font-size:12px; color:var(--muted); margin-bottom:10px; }

/* Quick Look overlay */
.fx-ql { position:fixed; inset:0; background:rgba(20,30,28,.45); display:flex; align-items:center; justify-content:center; z-index:100; }
.fx-qlbox { position:relative; width:min(560px,92vw); max-height:86vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.35); padding:26px; display:grid; grid-template-columns:180px 1fr; gap:20px; }
.fx-qlx { position:absolute; top:12px; right:12px; width:28px; height:28px; border:none; border-radius:50%; background:#eef3f2; color:var(--ink); cursor:pointer; font-size:13px; }
.fx-qlx:hover { background:#dde8e5; }
.fx-qlpreview { display:flex; align-items:center; justify-content:center; background:#f4f8f7; border-radius:10px; }
.fx-qlpreview .ico { transform:scale(1.7); }
.fx-qlbody .fx-qthumb { display:none; }
.fx-qlbox.pdfbox { display:block; width:min(860px,94vw); height:88vh; padding:18px 18px 16px; }
.fx-qlname { margin:0 34px 10px 0; font-size:14px; }
.fx-qlpdf { width:100%; height:calc(100% - 34px); border:1px solid var(--line); border-radius:8px; }

/* file đính kèm + danh mục trong Finder */
.fx-fileico { display:inline-flex; line-height:1; }
.fx-imgprev { width:100%; height:100%; object-fit:contain; background:#fff; }
.fx-coladd { display:block; margin:10px 8px; text-align:center; }
.fx-colnote { color:var(--muted); font-size:12px; text-align:center; padding:14px 10px; }

/* form nhân sự */
.hr-uploads { margin-top:14px; }
.hr-uprow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hr-uprow form { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.hr-uplabel { font-size:12.5px; color:var(--muted); display:block; width:100%; }
.hr-papers { list-style:none; margin:10px 0 0; padding:0; }
.hr-papers li { display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid #eef3f2; font-size:13px; }
.hr-papers form { margin-left:auto; }

/* trang nằm trong iframe của Finder: ẩn khung thừa, chỉ còn soạn thảo + preview */
html.framed .topbar .brand, html.framed .lang-toggle, html.framed .topbar .user { display:none !important; }
html.framed .col-list, html.framed .list-reopen { display:none !important; }
html.framed .workspace { grid-template-columns:minmax(330px,1fr) minmax(380px,1.05fr) !important; }
/* thanh xanh chỉ còn tiêu đề (không có 4 bước) trùng với tiêu đề của trình
   soạn thảo ngay dưới → trong iframe thì bỏ hẳn cho khỏi dính nhau */
html.framed .topbar.bare { display:none !important; }

/* modal 1 ô nhập (tạo thư mục / đổi tên) */
.fx-mbox { background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.35); padding:22px; width:min(420px,92vw); }
.fx-mbox h4 { margin:0 0 12px; font-size:15px; color:var(--green-d); }
.fx-minput { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font:inherit; font-size:14px; }
.fx-minput:focus { outline:none; border-color:var(--green); }
.fx-mact { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* context menu */
.fx-ctx { position:fixed; z-index:120; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 34px rgba(10,40,36,.22); padding:5px; min-width:190px; }
.fx-ctx button { display:block; width:100%; text-align:left; border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink); padding:7px 12px; border-radius:6px; cursor:pointer; }
.fx-ctx button:hover { background:var(--green); color:#fff; }

.fx-empty { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); padding:80px 20px; text-align:center; }

.locked-dest { background:var(--green-l); border:1px solid var(--green); border-radius:8px; padding:9px 12px; font-size:13.5px; color:var(--green-d); }

/* 2 cột duyệt kiểu Finder trong workspace */
.ws-browse { display:grid; grid-template-columns:150px minmax(0,1fr); flex:1; min-height:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.ws-folders { border-right:1px solid var(--line); overflow-y:auto; background:#eef3f2; padding:4px; }
.ws-fold { display:flex; align-items:center; gap:6px; width:100%; border:none; background:transparent; font:inherit; font-size:12px; padding:6px 7px; border-radius:7px; cursor:pointer; color:var(--ink); text-align:left; }
.ws-fold:hover { background:#e2ebe9; }
.ws-fold.on { background:var(--green); color:#fff; }
.ws-fold.on .fold-n { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.ws-fold .lbl { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-fico { width:14px; height:11px; border-radius:2px 3px 3px 3px; background:#17a08f; position:relative; flex:none; }
.ws-fico::before { content:""; position:absolute; top:-3px; left:0; width:6px; height:3px; border-radius:2px 2px 0 0; background:inherit; }
.ws-fold.on .ws-fico { background:#fff; }
.ws-deals { overflow-y:auto; min-width:0; background:#fff; }
.ws-empty-fold { padding:14px 12px; color:var(--muted); font-size:12.5px; list-style:none; }

/* nút đang gửi — chống bấm lặp */
button.busy { opacity:.55; pointer-events:none; }

/* sidebar workspace gom theo thư mục Finder */
.col-list details.fold { border-bottom:1px solid var(--line); }
.col-list details.fold summary { cursor:pointer; padding:8px 10px; font-weight:600; font-size:13px; color:var(--green-d); list-style:none; display:flex; align-items:center; gap:6px; }
.col-list details.fold summary::before { content:"▸"; font-size:10px; color:var(--muted); transition:transform .12s; }
.col-list details.fold[open] summary::before { transform:rotate(90deg); }
.col-list details.fold summary:hover { background:var(--green-l); }
.fold-n { margin-left:auto; font-size:11px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:0 7px; color:var(--muted); font-weight:400; }
.col-list details.fold .doc-list { margin:0; }

/* responsive: hẹp thì ẩn cột phụ */
@media (max-width:900px) {
  .fx-main { grid-template-columns:172px minmax(0,1fr); }
  .fx-gallery { grid-template-columns:minmax(0,1fr); }
  .fx-ginfo { display:none; }
  .fx-title { display:none; }
}
.create-card.coming { text-align:center; padding:40px 24px; }

/* ==== bổ sung tối thiểu (dùng token có sẵn) ==== */
/* khoang làm việc nhúng trong Finder */
.fx-workpane { padding:0; overflow:auto; background:#fff; }
.fx-workpane.nopad { padding:0; position:relative; display:block; }
.fx-wsframe { width:100%; height:100%; border:none; display:block; background:#fff; }
.fx-wsclose { position:absolute; top:10px; right:12px; z-index:6; width:26px; height:26px;
  border:none; border-radius:50%; background:rgba(20,40,36,.55); color:#fff; cursor:pointer; font-size:12px; }
.fx-wsclose:hover { background:rgba(20,40,36,.8); }
.fx-treecol { width:262px; }
.fx-treedeal { padding:3px 8px 3px 30px; font-size:12px; color:var(--muted); margin-left:16px;
  border-left:2px solid var(--green-l); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.fx-treedeal:hover { color:var(--green-d); background:#f0f5f4; }
.fx-treedeal.on { color:var(--green-d); font-weight:600; border-left-color:var(--green); }
.fx-pickinfo { margin-top:6px; font-size:12px; color:var(--muted); background:#fbfdfd;
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; line-height:1.5; }
.fx-pickinfo b { color:var(--green-d); }
/* hàng phụ cấp: 2 ô cạnh nhau trong khuôn .cond-row */
.cond-row/* form nhân sự: tải ảnh/giấy tờ + thẻ */
.hr-uprow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hr-uprow form, .hr-tplrow { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.hr-uplabel { font-size:12px; color:var(--muted); display:block; width:100%; }
.hr-papers { list-style:none; margin:10px 0 0; padding:0; }
.hr-papers li { display:flex; align-items:center; gap:8px; padding:5px 0;
  border-top:1px solid var(--line); font-size:13px; }
.hr-papers form { margin-left:auto; }

/* ===== Overlay "Đang xử lý…" toàn trang (Lottie) ===== */
.app-loading {
  position:fixed; inset:0; z-index:4000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,30,33,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease;
}
.app-loading.show { opacity:1; }
.app-loading__box {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:#fff; color:var(--ink);
  padding:26px 34px; border-radius:16px;
  box-shadow:0 14px 44px rgba(10,40,35,.28);
  min-width:180px;
}
.app-loading__ind {
  width:92px; height:92px;
  display:flex; align-items:center; justify-content:center;
}
.app-loading__spin {
  width:40px; height:40px; border:4px solid var(--green-l);
  border-top-color:var(--green); border-radius:50%;
  animation:ocospin .7s linear infinite;
}
.app-loading__text { margin:0; font-size:14px; font-weight:600; color:var(--green-d); }
@media (prefers-reduced-motion: reduce) {
  .app-loading { transition:none; }
  .app-loading__spin { animation:none; }
}

/* ===== Menu avatar: mục "Ngôn ngữ" + tab con VI/EN ===== */
.user-pop .menu-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:none; font:inherit; font-size:14px; color:var(--ink);
  padding:8px 10px; border-radius:7px; cursor:pointer; }
.user-pop .menu-item:hover { background:var(--green-l); }
.user-pop .mi-ico { font-size:14px; line-height:1; }
.user-pop .mi-arrow { margin-left:auto; color:var(--muted); }
.lang-sub { position:relative; }
.lang-fly { position:absolute; right:100%; top:-6px; margin-right:6px;
  background:#fff; border:1px solid var(--line); border-radius:10px; min-width:150px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:5px; z-index:40; }
.lang-fly .lang-opt { display:block; padding:8px 10px; border-radius:7px; color:var(--ink); font-size:14px; }
.lang-fly .lang-opt:hover { background:var(--green-l); text-decoration:none; }
.lang-fly .lang-opt.on { color:var(--green-d); font-weight:600; }
.lang-fly .lang-opt.on::before { content:"✓ "; color:var(--green); }

/* Bỏ pill VI/EN → đẩy menu avatar sang phải trên các trang còn thanh xanh */
.topbar .user { margin-left:auto; }

/* ===== Gộp topbar.bare + fx-toolbar (chỉ trang Finder) ===== */
.finder-merged .topbar { display:none !important; }
.finder-merged .finder { height:calc(100vh - var(--adbar-h)); }

/* Trong khung nhúng của Finder, trang CHA đã có dải liên hệ rồi — hiện thêm một
   cái nữa là hai dải chồng nhau. Đặt --adbar-h về 0 để các khung tính theo 100vh
   lấy lại đúng chiều cao, đồng thời ẩn hẳn dải. */
html.framed { --adbar-h:0px; }
html.framed .adbar { display:none !important; }
/* Nút góp ý cũng vậy: Finder nạp khoảng làm việc vào iframe, mà iframe đó
   cũng dùng base.html nên tự dưng ra hai nút chồng lên nhau. */
html.framed .ph-nut, html.framed .ph-hop { display:none !important; }
.fx-toolbar .brand { background:transparent; padding:0; margin-right:2px; display:flex; align-items:center; }
.fx-toolbar .brand .brand-logo { height:26px; width:auto; display:block; }
.fx-toolbar .user { position:relative; margin-left:6px; padding-left:10px; border-left:1px solid var(--line); }
.fx-toolbar .user-btn { background:transparent; border:none; color:var(--ink); padding:3px 5px; border-radius:20px; cursor:pointer; display:flex; align-items:center; gap:4px; }
.fx-toolbar .user-btn:hover { background:#e7efed; }
.fx-toolbar .user .avatar { background:var(--green); color:#fff; }
.fx-toolbar .user .chev { color:var(--muted); font-size:12px; }
.fx-toolbar .user-pop { top:42px; }

/* ── Thư viện mẫu + quy trình ─────────────────────────────────────────── */
.cat-head{ margin:18px 0 22px; }
.cat-head h1{ margin:0 0 6px; font-size:26px; }
.cat-lead{ color:#5b666c; line-height:1.6; margin:0 0 8px; }
.cat-basis{ color:#5b666c; font-size:14px; margin:0 0 8px; }
.cat-hint{ color:#5b666c; font-size:14px; margin:10px 0 0; }
.cat-link{ font-weight:600; }
.cat-back{ margin:14px 0 0; }
.cat-alert{ margin:10px 0; padding:10px 14px; background:#fff4e5;
            border-left:4px solid #e0a34a; border-radius:6px; }
.cat-note{ max-width:210mm; margin:14px auto; padding:12px 16px; background:#f6f8f8;
           border-left:4px solid #0a5f56; border-radius:6px; font-size:14px; line-height:1.6; }

.pill{ display:inline-block; padding:1px 8px; border-radius:999px;
       font-size:12px; font-weight:600; vertical-align:middle; }
.pill.ok{ background:#e3f3ec; color:#0a5f56; }
.pill.wait{ background:#eef1f2; color:#5b666c; }

.cat-group{ margin:0 0 26px; }
.cat-group h2{ font-size:13px; text-transform:uppercase; letter-spacing:1px;
               color:#0a5f56; border-bottom:1px solid #dfe5e6; padding-bottom:6px; margin:0 0 12px; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.cat-card{ display:block; padding:14px 16px; border:1px solid #dfe5e6; border-radius:8px;
           background:#fff; text-decoration:none; color:inherit; }
.cat-card:hover{ border-color:#0a5f56; background:#f6fbf9; }
.cat-card.warn{ border-left:4px solid #e0a34a; }
.cc-top{ display:flex; justify-content:space-between; align-items:center; }
.cc-no{ font-size:12px; color:#7c8c8c; }
.cc-name{ font-weight:600; font-size:15.5px; margin:3px 0 4px; }
.cc-desc{ font-size:13px; color:#5b666c; line-height:1.5; }
.cc-warn{ margin-top:6px; font-size:12px; color:#a5701c; }

/* Sơ đồ quy trình */
.qt{ margin:0 0 32px; }
.qt h2{ font-size:19px; margin:0 0 4px; }
.qt-desc{ color:#5b666c; margin:0 0 16px; line-height:1.6; }
.qt-flow{ list-style:none; margin:0; padding:0; }
.qt-step{ display:flex; gap:14px; position:relative; padding-bottom:18px; }
.qt-step:not(:last-child)::before{ content:""; position:absolute; left:15px; top:34px;
  bottom:0; width:2px; background:#dfe5e6; }
.qs-n{ flex:0 0 32px; height:32px; border-radius:50%; background:#0a5f56; color:#fff;
       display:flex; align-items:center; justify-content:center; font-weight:700; z-index:1; }
.qs-body{ flex:1; border:1px solid #dfe5e6; border-radius:8px; padding:12px 16px; background:#fff; }
.qs-head{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.qs-name{ font-weight:600; font-size:16px; }
.qs-role{ font-size:12px; color:#5b666c; background:#eef1f2; padding:1px 8px; border-radius:999px; }
.qs-desc{ margin:6px 0 0; color:#3d4a4f; line-height:1.55; }
.qs-notes{ margin:8px 0 0; padding-left:18px; font-size:14px; color:#5b666c; line-height:1.6; }
.qs-notes li{ margin:3px 0; }
.qs-links{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qs-tpl{ font-size:14px; font-weight:600; text-decoration:none; }
.qt-extra{ margin-top:6px; padding:10px 14px; background:#f6f8f8; border-radius:8px; font-size:14px; }

/* Ẩn ô nhập tiếng Anh khi FEATURE_TRANSLATE tắt.
   Ẩn bằng CSS chứ không bỏ khỏi HTML là có chủ ý: ô vẫn nằm trong form nên giá
   trị tiếng Anh đã nhập trước đây KHÔNG bị xóa khi người dùng lưu lại bản ghi.
   Bật cờ lên là thấy lại nguyên vẹn. */
.no-en .en-line,
.no-en .en-input:not(.en-line .en-input){ display:none !important; }

/* Logo trang web trên thanh trên cùng */
.brand-logo{ height:26px; width:auto; display:block; }
.brand{ display:flex; align-items:center; gap:8px; }

/* ── Thanh bên trên màn hình hẹp ─────────────────────────────────────────────
   Dưới 900px thì 214px chiếm quá nhiều chỗ; JS mặc định thu gọn ở mức này
   (vẫn mở lại được và lựa chọn đó được nhớ). Dưới 560px thì ép thu gọn hẳn
   vì mở ra là không còn chỗ cho nội dung. */
@media (max-width: 900px) {
  .fx-main { grid-template-columns:180px minmax(0,1fr); }
}
@media (max-width: 560px) {
  .fx-main,
  .fx-main:has(> .fx-sidebar.collapsed) { grid-template-columns:52px minmax(0,1fr); }
  .fx-sidebar .fx-slabel,
  .fx-sidebar .fx-n { display:none; }
  .fx-sidebar .fx-sitem { justify-content:center; padding:7px 0; gap:0; }
  .fx-sidebar h5 { height:1px; margin:9px 6px; padding:0; overflow:hidden;
    background:var(--line); color:transparent; }
}

/* ===== Dải liên hệ cố định dưới cùng =====================================
   Cố định nên nó KHÔNG chiếm chỗ trong luồng; các khung tính theo 100vh phải
   tự trừ đi --adbar-h, nếu không dải này che mất thanh trạng thái ở đáy. */
.adbar {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:var(--adbar-h); display:flex; align-items:center; gap:12px;
  /* Căn GIỮA cả cụm (theo yêu cầu). Trước đây chữ chiếm flex:1 nên nó dạt trái
     còn nút dạt phải, hai đầu xa nhau. */
  justify-content:center;
  padding:0 14px; color:#fff; font-size:13.5px;
  background:linear-gradient(90deg,#6B21A8 0%,#8B3FD9 55%,#A855F7 100%);
  box-shadow:0 -2px 10px rgba(0,0,0,.18);
}
.adbar-ico { flex:none; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  font-size:14px; }
/* min-width:0 để chữ dài cắt bằng "…" thay vì đẩy nút ra khỏi màn hình */
/* Không chiếm flex:1 nữa để cụm nằm giữa; vẫn min-width:0 + ellipsis để chữ dài
   bị cắt chứ không đẩy nút ra khỏi màn hình. */
.adbar-text { flex:0 1 auto; min-width:0; margin:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.adbar-tel { color:#fff; font-weight:700; text-decoration:underline;
  text-underline-offset:2px; }
.adbar-tel:hover { color:#F3E8FF; }
.adbar-btn { flex:none; background:#fff; color:#6B21A8; font-weight:600;
  padding:6px 14px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.adbar-btn:hover { background:#F3E8FF; text-decoration:none; }

@media (max-width: 560px) {
  :root { --adbar-h:40px; }
  .adbar { gap:8px; padding:0 10px; font-size:12.5px; }
  .adbar-ico { display:none; }
  .adbar-btn { padding:5px 10px; }
}

/* Không in dải này ra giấy. */
@media print { .adbar { display:none !important; } }

/* ===== Trang quản trị: dải số liệu + lưới thẻ người dùng ===== */
/* Trang quản trị KHÔNG bị bó 860px như các trang soạn thảo. Ở đó 860px là có ý:
   dòng chữ dài quá thì mệt mắt. Ở đây nội dung là LƯỚI THẺ, bó hẹp lại chỉ còn
   2 thẻ mỗi hàng trong khi màn hình đủ cho 4–5 — phải cuộn nhiều hơn để xem ít
   thông tin hơn. */
.workspace.single.qt-rong { grid-template-columns:minmax(0,1fr); }
.workspace.single.qt-rong .col-editor { padding-left:22px; padding-right:22px; }

/* Sáu con số cụ thể: để auto-fit tự chọn thì 6 ô thành 5 + 1 lạc lõng ở hàng
   dưới. Chốt số cột theo bề ngang màn hình cho nó luôn cân. */
.qt-stats { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1100px) { .qt-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px)  { .qt-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.qt-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:4px 0 12px; }
.qt-stat { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.qt-stat b { display:block; font-size:24px; line-height:1.1; color:var(--green-d); }
.qt-stat span { font-size:12px; color:var(--muted); }
.qt-canhbao { background:#fff6e5; border:1px solid #f0d9a8; border-radius:9px; padding:8px 12px; margin:0 0 12px; }

.qt-loc { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:14px; }
.qt-loc input[name="tim"] { flex:1; min-width:180px; margin-top:0; }
.qt-loc select { margin-top:0; max-width:220px; }
.qt-chip { display:inline-flex; align-items:center; padding:4px 11px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:13px; color:var(--ink); }
.qt-chip:hover { text-decoration:none; background:#f2f5f6; }
.qt-chip.on { background:var(--green); border-color:var(--green); color:#fff; }

/* auto-fill chứ không auto-fit: còn một thẻ thì nó giữ đúng bề rộng một thẻ,
   không kéo giãn ra hết hàng trông như lỗi hiển thị. */
.qt-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; align-items:start; }
.qt-the { background:#fff; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:11px; padding:12px 14px; }
.qt-the.tt-cham_tran { border-left-color:#e0a33a; }
.qt-the.tt-chua_xac_nhan { border-left-color:#e0a33a; }
.qt-the.tt-khoa { border-left-color:var(--danger); }
.qt-the.tt-da_xoa { border-left-color:var(--danger); opacity:.6; }
.qt-the.tt-binh_thuong { border-left-color:var(--green); }

.qt-the-dau { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
/* min-width:0 là điều kiện để ellipsis chạy trong flex — thiếu nó thì email dài
   đẩy nhãn vai trò tràn ra ngoài viền thẻ. */
.qt-email { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qt-vaitro { font-size:10.5px; font-weight:700; letter-spacing:.4px; padding:2px 7px; border-radius:20px; background:#eef2f3; color:var(--muted); white-space:nowrap; }
.qt-vaitro.chu { background:var(--green-l, #ece3fb); color:var(--green-d); }
.qt-org { font-size:13px; margin-bottom:6px; }

.qt-cot { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.qt-co { font-size:11.5px; padding:2px 8px; border-radius:20px; background:#eef2f3; color:var(--muted); }
.qt-co.tot { background:#e6f5ec; color:#1f7a45; }
.qt-co.canh { background:#fff2dc; color:#8a5a10; }
.qt-co.xau { background:#fbe9e8; color:var(--danger); }

.qt-thanh-nhan { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.qt-thanh-nhan b.xau { color:var(--danger); }
.qt-thanh { height:6px; border-radius:4px; background:#eef2f3; overflow:hidden; margin:3px 0; }
.qt-thanh i { display:block; height:100%; background:var(--green); }
.qt-the.tt-cham_tran .qt-thanh i { background:var(--danger); }
.qt-thanh-duoi { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-bottom:8px; }

.qt-so { display:flex; gap:12px; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.qt-so b { color:var(--ink); }
.qt-thoigian { display:flex; flex-direction:column; gap:1px; font-size:11.5px; color:var(--muted); margin-bottom:10px; }

.qt-nhom { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); padding-top:7px; margin-bottom:6px; }
.qt-nhom.canh { color:#8a5a10; border-top-color:#f0d9a8; }
.qt-nut { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.qt-nut form { display:inline-flex; }
.qt-nut .btn { font-size:12px; padding:4px 9px; }
.qt-nut .qt-xoa { border-color:#e3b7b5; color:var(--danger); }
.qt-quota { display:inline-flex; gap:4px; }
.qt-quota input { width:86px; margin-top:0; font-size:12px; padding:4px 7px; }

/* ===== Nhật ký ===== */
/* Lop .tbl truoc gio khong he co luat CSS nao — bang cu hien ra tran trui va
   dinh sat le trai. Bang nhat ky la thu doc theo hang nen phai co duong ke. */
.qt-nk { width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.qt-nk th { text-align:left; font-size:12px; text-transform:uppercase;
  letter-spacing:.4px; color:var(--muted); background:#f4f7f7;
  padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.qt-nk td { vertical-align:top; font-size:13px; padding:7px 12px;
  border-bottom:1px solid #eef2f3; }
.qt-nk tr:last-child td { border-bottom:none; }
.qt-nk tbody tr:hover td, .qt-nk tr:hover td { background:#fafcfc; }
.qt-nk .nk-gio, .qt-nk .nk-ip { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); }
.qt-nk tr.nk-canh td { background:#fff8ec; }
.qt-phantrang { display:flex; align-items:center; gap:10px; margin-top:12px; }

/* ===== Phản hồi khách hàng: nút nổi + hộp thoại ===== */
/* Nút nằm TRÊN dải liên hệ (--adbar-h) chứ không đè lên nó; đè lên thì trên máy
   hẹp nó che mất số điện thoại hỗ trợ. */
.ph-nut { position:fixed; right:16px; bottom:calc(var(--adbar-h) + 14px); z-index:60;
  display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:none;
  border-radius:24px; background:var(--green); color:#fff; font-size:14px;
  font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.22); }
.ph-nut:hover { filter:brightness(1.06); }
@media print { .ph-nut, .ph-hop { display:none !important; } }

.ph-hop { width:min(560px,94vw); border:none; border-radius:14px; padding:0;
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
.ph-hop::backdrop { background:rgba(16,24,28,.45); }
.ph-hop .form { padding:16px 18px 18px; }
.ph-dau { display:flex; align-items:center; justify-content:space-between; }
.ph-dau h3 { margin:0; color:var(--green-d); }
.ph-dong { border:none; background:transparent; font-size:24px; line-height:1;
  cursor:pointer; color:var(--muted); padding:0 4px; }
.ph-hop textarea { resize:vertical; }

/* ===== Danh sách phản hồi (khách xem + quản trị xử lý) ===== */
.ph-ds { display:flex; flex-direction:column; gap:10px; }
.ph-muc { background:#fff; border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:11px; padding:12px 14px; }
.ph-muc.tt-moi { border-left-color:var(--green); }
.ph-muc.tt-dang_xu_ly { border-left-color:#e0a33a; }
.ph-muc.tt-xong { border-left-color:#3aa76d; }
.ph-muc.tt-tu_choi { border-left-color:var(--danger); opacity:.75; }
.ph-muc-dau { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:5px; }
.ph-loai { font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px;
  background:#eef2f3; color:var(--muted); }
.ph-tt { font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; }
.ph-tt.tt-moi { background:#e8e0fb; color:var(--green-d); }
.ph-tt.tt-dang_xu_ly { background:#fff2dc; color:#8a5a10; }
.ph-tt.tt-xong { background:#e6f5ec; color:#1f7a45; }
.ph-tt.tt-tu_choi { background:#fbe9e8; color:var(--danger); }
/* min-width:0 để email dài không đẩy các nhãn bên trái tràn khỏi thẻ */
.ph-nguoi { margin-left:auto; min-width:0; font-size:12.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph-tieude { margin:2px 0 4px; font-size:15px; }
/* pre-wrap: khách xuống dòng thế nào thì hiện đúng thế ấy */
.ph-noidung { margin:0 0 6px; white-space:pre-wrap; line-height:1.55; }
.ph-meta { display:flex; flex-wrap:wrap; gap:12px; margin:0; font-size:12.5px; color:var(--muted); }
.ph-meta code { background:#f2f5f6; padding:1px 5px; border-radius:4px; }
.ph-traloi { margin-top:9px; padding:9px 11px; background:#f4f8f7;
  border-left:3px solid var(--green); border-radius:0 8px 8px 0; }
.ph-traloi p { margin:3px 0 0; white-space:pre-wrap; }
.ph-form { margin-top:9px; border-top:1px solid var(--line); padding-top:9px; }
.ph-form-hang { display:flex; gap:6px; margin-bottom:6px; }
.ph-form select { margin-top:0; max-width:190px; }
/* font-family:inherit — textarea không tự kế thừa phông của trang, mặc định
   là phông monospace của trình duyệt, nên ô trả lời trông khác hẳn phần còn lại. */
.ph-form textarea { width:100%; resize:vertical; margin-top:0; font-family:inherit;
  font-size:14px; }
.ph-dem { display:inline-block; min-width:18px; padding:0 5px; border-radius:20px;
  background:var(--danger); color:#fff; font-size:11px; line-height:18px; text-align:center; }