/* ────────────────────────────────────────────────────────────────────── Document Center (/tai-lieu) — kho tài liệu công ty phẳng. ADR-038. Global (không isolation) vì MudDrawer/MudTabs portal — ::deep không thấm. Màu lấy từ token app.css (--blue-*/--slate-*/--file-*), KHÔNG hardcode hex. ────────────────────────────────────────────────────────────────────── */ .dc-page { display: flex; flex-direction: column; gap: 16px; } .dc-crumbs { font-size: 12px; } .dc-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Stat strip (5 chip) ── */ .dc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .dc-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; background: var(--slate-0); border: 1px solid var(--slate-200); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s, box-shadow .12s; } .dc-stat:hover { border-color: var(--blue-300); } .dc-stat-active { border-color: var(--blue-700); box-shadow: 0 0 0 3px var(--blue-50); } /* Vòng tròn nền màu quanh icon (khớp DocStatChip design source: 40px, accentBg + accent). Không có token tint *-bg → dùng color-mix với --slate-0 (#fff), giữ token-pure. */ .dc-stat-ico { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .dc-stat-ico-primary { background: var(--blue-50); color: var(--blue-700); } .dc-stat-ico-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); } .dc-stat-ico-warning { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); } .dc-stat-ico-error { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0)); color: var(--error-500); } .dc-stat-ico-default { background: var(--slate-100); color: var(--slate-600); } .dc-stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .dc-stat-label { font-size: 12px; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Filter bar ── */ .dc-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--slate-0); border: 1px solid var(--slate-200); border-radius: 12px; } .dc-search { min-width: 220px; flex: 1 1 220px; } .dc-narrow { width: 160px; } /* ── Shell: sidebar + main ── */ .dc-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px; align-items: start; } .dc-sidebar { position: sticky; top: 12px; } .dc-side-card { padding: 10px; border: 1px solid var(--slate-200); border-radius: 12px; } .dc-side-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-500); padding: 6px 8px; } .dc-side-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--slate-700); } .dc-side-item:hover { background: var(--slate-50); } .dc-side-active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; } .dc-cat-body { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .dc-cat-body > .flex-grow-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-cat-count { font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; } .dc-cat-spacer { width: 30px; display: inline-block; } /* Danh mục con: thụt lề + đường nối cây (vertical + stub) khớp design source .doc-cat-sub. */ .dc-cat-sub { padding-left: 38px; font-size: 13px; position: relative; } .dc-cat-sub::before { content: ""; position: absolute; left: 23px; top: -2px; bottom: 50%; width: 1px; background: var(--slate-300); } .dc-cat-sub::after { content: ""; position: absolute; left: 23px; top: 50%; width: 9px; height: 1px; background: var(--slate-300); } .dc-cat-sub:last-child::before { bottom: 50%; } .dc-cat-actions { display: none; flex: none; } .dc-side-item.dc-cat:hover .dc-cat-actions { display: inline-flex; } /* ── Main ── */ .dc-main { min-width: 0; } .dc-main-toolbar { display: flex; align-items: center; margin-bottom: 8px; } .dc-empty { text-align: center; padding: 64px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px dashed var(--slate-300); border-radius: 12px; } .dc-row-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; } .dc-row-main { min-width: 0; } .dc-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dc-ver-chip { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; color: var(--slate-600); background: var(--slate-100); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } /* Org-path: màu brand navy + đậm (khớp design source — nổi org-path lên). */ .dc-row-org { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--blue-700); font-weight: 600; margin-top: 2px; } .dc-row-org .mud-icon-root { font-size: 11px !important; } .dc-row-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cột Hiệu lực: tách 2 dòng (từ → đến); dòng "đến" đổi màu cảnh báo theo trạng thái. */ .dc-hl { font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.45; } .dc-hl-from { color: var(--slate-700); } .dc-hl-to { color: var(--slate-500); } .dc-hl-to.dc-hl-warn { color: var(--warning-500); font-weight: 600; } .dc-hl-to.dc-hl-err { color: var(--error-500); font-weight: 600; } /* ── Cột Cập nhật: ngày + avatar người cập nhật (A7) ── */ .dc-upd { display: flex; flex-direction: column; gap: 3px; } .dc-upd-by { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--slate-700); } .dc-upd-avatar { width: 22px !important; height: 22px !important; font-size: 10px !important; } .dc-upd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; } /* ── Badge số sidebar "Truy cập nhanh" (A2) ── */ .dc-quick-count { flex: none; font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; } .dc-side-active .dc-quick-count { color: var(--blue-700); } /* ── Grid view ── */ .dc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .dc-card { padding: 14px; border: 1px solid var(--slate-200); border-radius: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .dc-card:hover { border-color: var(--blue-300); box-shadow: 0 4px 14px rgba(15,23,42,.08); } /* Thẻ grid đầy đủ (khớp DocGrid design source): head[chip|badge+ghim] · title · code·size·v · desc · meta · foot */ .dc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .dc-card-head-r { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .dc-card-pin { font-size: 12px; color: var(--blue-700); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } .dc-card-pin .mud-icon-root { font-size: 11px !important; } .dc-card-title { display: flex; align-items: center; gap: 4px; font-weight: 600; } .dc-card-title .mud-icon-root, .dc-row-title .mud-icon-root { font-size: 13px !important; } .dc-card-code { font-size: 12px; color: var(--slate-500); margin-top: 2px; } .dc-card-desc { font-size: 13px; color: var(--slate-600); margin-top: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dc-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .dc-card-cat { font-size: 12px; color: var(--slate-700); background: var(--slate-100); border-radius: 999px; padding: 2px 9px; } .dc-card-dept { font-size: 12px; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-card-foot { display: flex; align-items: center; margin-top: 10px; gap: 8px; } .dc-card-foot-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate-500); min-width: 0; } .dc-card-foot-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-card-av { width: 22px !important; height: 22px !important; font-size: 10px !important; } .dc-card-stats { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; flex: none; } .dc-card-stats .mud-icon-root { font-size: 11px !important; vertical-align: -3px; } /* ── FileTypeChip (icon loại file kiểu Google Drive — SVG do FileIconHelper.Svg sinh, MÀU NHÚNG TRONG SVG). Giữ nguyên kích thước hộp cũ (30×36/36×42/48×58) để không xô layout list; svg vuông tự căn giữa. ── */ .dc-ftc { display: inline-flex; align-items: center; justify-content: center; flex: none; } .dc-ftc svg { width: 100%; height: auto; aspect-ratio: 1; display: block; } .dc-ftc-sm { width: 30px; height: 36px; } .dc-ftc-md { width: 36px; height: 42px; } .dc-ftc-lg { width: 48px; height: 58px; } /* ── Detail drawer ── */ .dc-drawer-head { padding: 16px; border-bottom: 1px solid var(--slate-200); } .dc-badges { display: flex; flex-wrap: wrap; gap: 4px; } /* Tiêu đề tài liệu trong drawer — 18px/700 (khớp

design source), ghi đè Typo.h6 của Mud. */ .dc-drawer-head .dc-drawer-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--fg-1); margin: 8px 0 4px; } /* Badge trạng thái PHẲNG kiểu chấm-dot (khớp .badge .dot design source) — thay MudChip. Dùng cho DocStatusChip (list/grid/drawer) + nhãn Đã ghim / Hạn chế / Mật / Hiện hành. Token-pure: nền = color-mix tint *-500 trên nền trắng (KHÔNG dùng *-bg semantic chưa có). */ .dc-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 4px 9px; border-radius: 999px; } .dc-badge .dc-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex: none; } .dc-badge .mud-icon-root { font-size: 11px !important; } .dc-badge-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); } .dc-badge-warning { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); } .dc-badge-error { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0)); color: var(--error-500); } .dc-badge-info { background: color-mix(in srgb, var(--info-500) 14%, var(--slate-0)); color: var(--info-500); } .dc-badge-neutral { background: var(--slate-100); color: var(--fg-2); } .dc-badge-brand { background: var(--brand-soft); color: var(--brand); } /* Action bar: 2 nút chính co giãn + nút icon cố định, wrap khi hẹp (khớp thiết kế) */ .dc-drawer-actions { display: flex; gap: 6px; flex-wrap: wrap; } .dc-drawer-actions .dc-act-main { flex: 1; } /* Nhãn mục IN HOA (B5) — khớp .doc-section-label design source (12px/700/.08em) */ .dc-section { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--fg-3); } /* THÔNG TIN — lưới 2 cột CÓ KẺ Ô, nền trắng (khớp .doc-meta-grid design source). Mỗi ô border-right + border-bottom; bỏ viền ở cột cuối + hàng cuối → khung bảng gọn. */ .dc-info-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; } .dc-info-cell { display: flex; flex-direction: column; min-width: 0; padding: 10px 14px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); } .dc-info-cell:nth-child(2n) { border-right: none; } .dc-info-cell:nth-last-child(-n+2) { border-bottom: none; } .dc-info-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); } .dc-info-val { font-size: 13.5px; color: var(--fg-1); margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* THỐNG KÊ — 3 thẻ viền: NHÃN trên, SỐ dưới (khớp DocMini design source) */ .dc-stat-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .dc-stat-box { border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; background: var(--slate-50); } .dc-stat-box-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); } .dc-stat-box-num { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--fg-1); margin-top: 4px; font-variant-numeric: tabular-nums; } /* NGƯỜI TẢI LÊN — avatar chữ-cái-đầu + dòng phụ "tải lên {ngày}" (B3) */ .dc-uploader { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--slate-900); } .dc-up-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; } .dc-uploader-info { min-width: 0; line-height: 1.3; } .dc-uploader-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-uploader-sub { font-size: 12px; color: var(--slate-500); } /* TAG — pill nền xám nhạt (khớp .doc-tag design source), chỉ hiển thị (không lọc trong drawer) */ .dc-tags { display: flex; flex-wrap: wrap; gap: 6px; } .dc-tag { font-size: 12.5px; font-weight: 500; color: var(--fg-2); background: var(--slate-100); border-radius: 999px; padding: 3px 9px; } /* Tab "Phiên bản" — count pill inline (khớp .doc-drawer-tab .t-count design source) */ .dc-tab-label { display: inline-flex; align-items: center; gap: 6px; } .dc-tab-count { font-size: 12px; font-weight: 600; color: var(--fg-3); background: var(--slate-100); padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; } .dc-drawer-tabs .mud-tab-active .dc-tab-count { background: var(--brand-soft); color: var(--brand); } /* Tab drawer KHÔNG in hoa (khớp .doc-drawer-tab design source: sentence-case 13.5px/500, active brand/600). Ghi đè text-transform:uppercase mặc định của MudBlazor .mud-tab — specificity (0,3,0) thắng mọi default. */ .dc-drawer-tabs.mud-tabs .mud-tab { text-transform: none; letter-spacing: normal; font-size: 13.5px; font-weight: 500; } .dc-drawer-tabs.mud-tabs .mud-tab.mud-tab-active { font-weight: 600; } /* Padding nội dung tab (khớp .doc-drawer-body design source: 18px 20px 24px). Đặt trên .mud-tabs-panels (container nhận nội dung khi ApplyEffectsToContainer=true) thay vì PanelClass="pa-4". Specificity (0,3,0) thắng default; padding ở container cha KHÔNG bị child reset triệt tiêu. */ .dc-drawer-tabs.mud-tabs .mud-tabs-panels { padding: 18px 20px 24px; } /* Footer 2 HÀNG (khớp ảnh thiết kế): hàng phụ + nút chính full-width "Tải phiên bản mới" */ .dc-drawer-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-1); } .dc-foot-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dc-foot-primary { width: 100%; } /* ── Tab Phiên bản: timeline (dot + đường nối) + pill + actions (khớp .doc-version-list design source) ── */ /* Header tab Phiên bản: nhãn "Lịch sử phiên bản" + nút "Tải phiên bản mới" (khớp VersionsTab design) */ .dc-ver-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dc-ver-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .dc-ver-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; } .dc-ver-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--slate-200); } .dc-ver-item:last-child { padding-bottom: 0; } .dc-ver-item:last-child::before { display: none; } .dc-ver-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--slate-300); flex: none; margin-top: 3px; box-shadow: 0 0 0 3px var(--slate-0); z-index: 1; } .dc-ver-item.is-current .dc-ver-dot { background: var(--blue-700); } .dc-ver-body { min-width: 0; flex: 1; } .dc-ver-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dc-ver-pill { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--slate-700); background: var(--slate-100); border-radius: 6px; padding: 2px 8px; } .dc-ver-pill.is-current { color: var(--blue-700); background: var(--blue-50); } .dc-ver-when { font-size: 12px; color: var(--slate-500); } .dc-ver-note { font-size: 13px; color: var(--slate-900); margin-top: 4px; } .dc-ver-meta { font-size: 12px; color: var(--slate-500); margin-top: 4px; } .dc-ver-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; margin-left: -6px; } /* ── Tab Quyền: thẻ Phạm vi xem (3 mức, thẻ áp dụng được tick — khớp AccessRow design source) ── */ .dc-access-list { display: flex; flex-direction: column; gap: 8px; } .dc-access-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--slate-25); opacity: .6; } .dc-access-row.is-on { background: var(--slate-0); opacity: 1; border-color: var(--blue-300); } .dc-access-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .dc-access-ico-toan { background: var(--blue-50); color: var(--blue-700); } .dc-access-ico-hanche { background: color-mix(in srgb, var(--warning-500) 16%, var(--slate-0)); color: var(--warning-500); } .dc-access-ico-mat { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0)); color: var(--error-500); } .dc-access-txt { flex: 1; min-width: 0; } .dc-access-title { font-size: 13px; font-weight: 600; color: var(--slate-900); } .dc-access-sub { font-size: 12px; color: var(--slate-500); } /* ── Tab Quyền: hoạt động gần đây có avatar ── */ .dc-activity { display: flex; flex-direction: column; gap: 10px; } .dc-activity-row { display: flex; align-items: flex-start; gap: 10px; } .dc-act-av { width: 28px !important; height: 28px !important; font-size: 11px !important; flex: none; } .dc-activity-body { min-width: 0; } .dc-activity-text { font-size: 13px; color: var(--slate-900); } .dc-activity-when { font-size: 12px; color: var(--slate-500); margin-top: 2px; } /* ── Responsive (theo §20: 1280/1024/720/520) ── */ @media (max-width: 1280px) { .dc-stats { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1024px) { .dc-stats { grid-template-columns: repeat(3, 1fr); } .dc-shell { grid-template-columns: 1fr; } .dc-sidebar { position: static; } .dc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .dc-stats { grid-template-columns: repeat(2, 1fr); } .dc-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .dc-stats { grid-template-columns: 1fr; } } /* Drawer chi tiết: thu THÔNG TIN về 1 cột khi hẹp (khớp .doc-meta-grid responsive design source) */ @media (max-width: 600px) { .dc-info-panel { grid-template-columns: 1fr; } .dc-info-cell { border-right: none; } .dc-info-cell:nth-last-child(2) { border-bottom: 1px solid var(--border-1); } } /* ══════════════ MODAL (Batch D) ══════════════ */ /* Nhãn field tự vẽ (khớp .input-label design source) — dùng khi không phải MudField. */ .dc-field-label { display: block; font-size: 13px; font-weight: 500; color: var(--slate-700); margin-bottom: 6px; } .dc-field-hint { font-weight: 400; color: var(--slate-500); } /* AddCategory: picker biểu tượng (tile) + màu (swatch tròn) — khớp icon/color picker design source. */ .dc-pick-grid { display: flex; flex-wrap: wrap; gap: 8px; } .dc-pick { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-1); background: var(--slate-0); color: var(--slate-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dc-pick:hover { border-color: var(--blue-300); } .dc-pick.is-on { border-color: var(--blue-700); background: var(--blue-50); color: var(--blue-700); box-shadow: 0 0 0 2px var(--blue-50); } .dc-swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--slate-0); cursor: pointer; box-shadow: 0 0 0 1px var(--border-1); padding: 0; } .dc-swatch.is-on { box-shadow: 0 0 0 2px var(--blue-700); } .dc-swatch-brand { background: var(--blue-700); } .dc-swatch-success { background: var(--success-500); } .dc-swatch-warning { background: var(--warning-500); } .dc-swatch-error { background: var(--error-500); } .dc-swatch-info { background: var(--info-500); } .dc-swatch-violet { background: var(--file-zip-fg); } .dc-swatch-neutral { background: var(--slate-500); } /* Request: chip mức ưu tiên (chấm màu theo tone — khớp .urgency-chip design source). */ .dc-prio { display: flex; flex-wrap: wrap; gap: 8px; } .dc-prio-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--slate-0); color: var(--slate-700); font-size: 13px; cursor: pointer; font-family: inherit; } .dc-prio-chip:hover { border-color: var(--blue-300); } .dc-prio-chip.is-on { background: var(--blue-50); border-color: var(--blue-700); color: var(--blue-700); font-weight: 600; } .dc-prio-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--slate-400); flex: none; } .dc-prio-info .dc-prio-dot { background: var(--info-500); } .dc-prio-warning .dc-prio-dot { background: var(--warning-500); } .dc-prio-error .dc-prio-dot { background: var(--error-500); } /* Request: danh sách yêu cầu gần đây. */ .dc-req-recent { border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; } .dc-req-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border-1); font-size: 12.5px; } .dc-req-row:first-child { border-top: none; } .dc-req-code { color: var(--slate-500); flex: none; } .dc-req-title { color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dc-req-status { font-size: 11px; border-radius: 999px; padding: 1px 8px; flex: none; } .dc-req-success { background: color-mix(in srgb, var(--success-500) 14%, var(--slate-0)); color: var(--success-500); } .dc-req-error { background: color-mix(in srgb, var(--error-500) 14%, var(--slate-0)); color: var(--error-500); } .dc-req-info { background: var(--blue-50); color: var(--blue-700); } .dc-req-when { color: var(--slate-500); flex: none; } /* MoveCategory: cây danh mục có "đang ở đây" + breadcrumb đích. */ .dc-move-current { font-size: 12.5px; color: var(--slate-500); margin-bottom: 8px; } .dc-move-target { font-size: 13px; color: var(--blue-700); margin-top: 8px; } .dc-move-tree { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border-1); border-radius: 10px; padding: 6px; } .dc-move-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; background: transparent; border: none; cursor: pointer; font-size: 13.5px; color: var(--slate-700); font-family: inherit; } .dc-move-row:hover { background: var(--slate-50); } .dc-move-row.is-on { background: var(--blue-50); color: var(--blue-700); font-weight: 600; } .dc-move-sub { padding-left: 28px; } .dc-move-here { font-size: 11px; color: var(--slate-500); background: var(--slate-100); border-radius: 999px; padding: 1px 7px; flex: none; } /* ── Bản xem trước HTML trong form upload (.docx): banner xác nhận + khung preview + overlay toàn màn hình ── */ .dc-prev-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success-500) 10%, var(--slate-0)); border: 1px solid color-mix(in srgb, var(--success-500) 30%, var(--slate-0)); } .dc-prev-banner-busy { background: var(--slate-50); border-color: var(--border-1); color: var(--slate-500); font-size: 13px; gap: 8px; } .dc-prev-ok { color: var(--success-500); flex: none; font-size: 12px !important; } .dc-prev-msg { display: flex; flex-direction: column; min-width: 0; flex: 1; } .dc-prev-msg b { font-size: 13px; font-weight: 600; color: var(--slate-900); } .dc-prev-msg span { font-size: 12px; color: var(--slate-500); } .dc-prev-frame { margin-top: 8px; border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; } .dc-prev-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--slate-50); border-bottom: 1px solid var(--border-1); color: var(--slate-500); } .dc-prev-head-t { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-prev-body { max-height: 360px; overflow-y: auto; padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: var(--slate-900); background: var(--slate-0); } .dc-prev-body :where(h1,h2,h3,h4) { margin: .6em 0 .3em; line-height: 1.3; } .dc-prev-body p { margin: 0 0 .5em; } .dc-prev-body table { border-collapse: collapse; max-width: 100%; } .dc-prev-body img { max-width: 100%; height: auto; } /* HTML trung thực cao do WmlToHtmlConverter sinh (wrapper .doc-html, style INLINE). Bù rule GeneralCss bị strip cùng