/* ═══════ Material Design 3 (web/CSS-only) — xem skills/material-3 và vms/docs/MOCKUP-ADMIN-AI.html ═══════ Theme áp bằng class .light trên (đặt bởi /js/theme.js), mặc định tối theo :root. Vai trò MD3: paper=surface-container-lowest · surface=surface-container-low · panel/fill/thead=surface-container · accent*=primary/on-primary/primary-container · line/hair=outline-variant · border-hi=outline · ok/warn=extended success/warning role. */ :root { --font-sans: 'Inter', system-ui, 'Segoe UI', sans-serif; --font-mono: ui-monospace, Consolas, monospace; --ease-standard: cubic-bezier(.2,0,0,1); /* Thời lượng chuyển động (quy tắc: docs/DESIGN.md mục 8b) */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 250ms; /* Nút mở bản ghi bên Odoo: màu tím Odoo, giống nhau ở sáng/tối (docs/DESIGN.md mục 5) */ --odoo: #7B4775; --odoo-ink: #ffffff; /* Thang cỡ chữ: chỉ 5 cỡ, mọi font-size đi qua biến này (xem docs/context.md [2026-09-30]) */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 22px; --paper: #071619; --panel: #122a30; --fill: #122a30; --ink: #e9f3f4; --muted: #93b8bd; --text-mute: #78A0A5; --line: #1c3a40; --hair: #1c3a40; --accent: #58C4D1; --surface: #0d2126; --accent-ink: #04181c; --accent-dim: #0c3540; --border-hi: #27505a; --danger: #ef4444; --danger-dim: #2a1013; --warn: #f59e0b; --warn-dim: #2a1f0a; --ok: #22c55e; --ok-dim: #0f2317; --info: #38bdf8; --info-dim: #0c2d3d; --thead: #122a30; font-size: var(--fs-base); color-scheme: dark; } :root.light { --paper: #F2F6F7; --panel: #F9F8F5; --fill: #E7EEF0; --ink: #26282A; --muted: #4A4B4D; --text-mute: #5A6467; --line: #D6E2E4; --hair: #D6E2E4; --accent: #006874; --surface: #FFFFFF; --accent-ink: #ffffff; --accent-dim: #DCEEF0; --border-hi: #BFD3D6; --danger: #B91C1C; --danger-dim: #FEE2E2; --warn: #B45309; --warn-dim: #FEF3C7; --ok: #15803D; --ok-dim: #DCFCE7; --info: #0369A1; --info-dim: #E0F2FE; --thead: #E6E4DF; color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } .mono { font-family: var(--font-mono); } /* ---- icon button (theme toggle, ...) ---- */ .icon-btn { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; font-size: var(--fs-base); flex: none; } .icon-btn:hover { background: var(--fill); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } [data-theme-toggle]::before { content: "\25D1"; } /* ◑ */ :root.light [data-theme-toggle]::before { content: "\25D0"; } /* ◐ */ html.sidebar-collapsed .brand { justify-content: center; } html.sidebar-collapsed .brand > div { display: none; } /* ---- guest (login / change-password / not-found) ---- */ body.guest { background: var(--panel); } .guest-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .guest-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 32px; } .guest-card-head { margin-bottom: 4px; } .guest-title { font-size: var(--fs-xl); font-weight: 600; } .guest-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; } .center-text { text-align: center; } /* ---- trang đăng nhập (/login): luôn SÁNG, bảng màu riêng (khớp bảng màu light của app), không theo nút sáng/tối ---- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .login-shell { --l-ink: #26282A; --l-muted: #4A4B4D; --l-dim: #5F696C; --l-line: #D6E2E4; --l-hi: #BFD3D6; --l-accent: #006874; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; color: var(--l-ink); font-family: var(--font-sans); background: radial-gradient(ellipse 50% 45% at 18% 28%, rgba(0, 104, 116, .08), transparent 70%), radial-gradient(ellipse 45% 40% at 85% 85%, rgba(0, 104, 116, .06), transparent 70%), #F2F6F7; } .login-card { position: relative; width: 100%; max-width: 420px; padding: 36px 36px 34px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid var(--l-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 40, 48, .12); } .login-card::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--l-accent), transparent); } .login-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; } .login-logo { height: 64px; width: auto; display: block; } .login-title { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: .04em; color: var(--l-accent); } .login-chip { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--l-muted); border: 1px solid var(--l-hi); border-radius: 4px; padding: 3px 9px; } .login-kicker { margin: 10px 0 2px; text-align: center; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--l-dim); } .login-field { display: block; } .login-input { width: 100%; height: 46px; padding: 0 16px; font: inherit; font-size: var(--fs-base); color: var(--l-ink); background: #F9F8F5; border: 1px solid var(--l-hi); border-radius: 8px; } .login-input::placeholder { color: var(--l-dim); } .login-input:focus { outline: none; border-color: var(--l-accent); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(0, 104, 116, .16); } .login-input:-webkit-autofill { -webkit-text-fill-color: var(--l-ink); caret-color: var(--l-ink); box-shadow: 0 0 0 1000px #F9F8F5 inset; border-color: var(--l-hi); } .login-error { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: #B91C1C; } .login-btn { height: 46px; margin-top: 4px; font: inherit; font-size: var(--fs-base); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: #006874; border: none; border-radius: 8px; cursor: pointer; transition: background .15s var(--ease-standard); } .login-btn:hover { background: #00525c; } .login-btn:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 2px; } /* ---- shared card ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s var(--ease-standard); } .card:hover { border-color: var(--border-hi); } .card-head { padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel); border-radius: 12px 12px 0 0; } .card-head h2 { margin: 0; font-size: var(--fs-base); font-weight: 600; } /* ---- form fields ---- */ .field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted); } .inp { font: inherit; font-size: var(--fs-base); color: var(--ink); height: 40px; padding: 0 10px; border: 1px solid var(--border-hi); border-radius: 8px; background: var(--surface); } textarea.inp { height: auto; padding: 8px 10px; } .inp:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } .error-text { margin: 0; font-size: var(--fs-sm); color: var(--danger); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); color: var(--ink); height: 40px; padding: 0 16px; font: inherit; font-size: var(--fs-base); cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity .15s var(--ease-standard), background .15s var(--ease-standard); } .btn:hover { background: var(--fill); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn-primary:hover { opacity: .9; background: var(--accent); } .btn-odoo { background: var(--odoo); border-color: var(--odoo); color: var(--odoo-ink); font-weight: 600; } .btn-odoo:hover { opacity: .9; background: var(--odoo); } .btn-block { width: 100%; } .btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); } .link-btn { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--accent); cursor: pointer; text-decoration: underline; } .inline-form { display: inline; } /* ---- authenticated shell ---- */ .shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .sidebar { border-right: 1px solid var(--line); background: var(--panel); padding: 16px 14px; display: flex; flex-direction: column; gap: 18px; } .brand { display: flex; align-items: center; gap: 9px; } /* Mark cắt sát viền ảnh (mũi nhọn nằm đúng góc) => KHÔNG bo góc (border-radius cắt mất mũi nhọn); width:auto giữ tỉ lệ thật, flex:none chống bị co. */ .brand img { height: 32px; width: auto; flex: none; } .brand-name { font-size: var(--fs-base); font-weight: 600; } .brand-sub { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: .04em; text-transform: uppercase; } .sidebar nav { display: flex; flex-direction: column; gap: 1px; } .nav-group { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); padding: 14px 9px 5px; } .nav-group:first-child { padding-top: 0; } .sidebar nav a, .sidebar nav .disabled, .sidebar nav [data-sidebar-toggle] { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; font-size: var(--fs-base); color: var(--muted); text-decoration: none; } .sidebar nav a svg, .sidebar nav .disabled svg, .sidebar nav [data-sidebar-toggle] svg { width: 16px; height: 16px; flex: none; } .sidebar nav a:hover, .sidebar nav [data-sidebar-toggle]:hover { background: var(--fill); color: var(--ink); } .sidebar nav a.active { background: var(--accent-dim); color: var(--ink); font-weight: 600; } .sidebar nav .disabled { color: var(--text-mute); cursor: default; opacity: .6; } .sidebar nav [data-sidebar-toggle] { width: 100%; text-align: left; font: inherit; font-size: var(--fs-base); background: none; border: none; cursor: pointer; } .sidebar nav [data-sidebar-toggle] svg { transition: transform .15s var(--ease-standard); } html.sidebar-collapsed .sidebar nav [data-sidebar-toggle] svg { transform: rotate(180deg); } /* ---- sidebar thu gọn (toggle: /js/sidebar.js, class đặt trên ) ---- */ html.sidebar-collapsed .shell { grid-template-columns: 56px 1fr; } html.sidebar-collapsed .sidebar { padding: 16px 8px; align-items: center; } html.sidebar-collapsed .nav-group { display: none; } html.sidebar-collapsed .sidebar nav a, html.sidebar-collapsed .sidebar nav .disabled, html.sidebar-collapsed .sidebar nav [data-sidebar-toggle] { font-size: 0; justify-content: center; } html.sidebar-collapsed .sidebar nav a svg, html.sidebar-collapsed .sidebar nav .disabled svg, html.sidebar-collapsed .sidebar nav [data-sidebar-toggle] svg { width: 18px; height: 18px; } .main-col { min-width: 0; display: flex; flex-direction: column; } .topbar { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); } .topbar-search { flex: 1; max-width: 340px; } .topbar-search .inp { height: 30px; font-size: var(--fs-sm); border-radius: 8px; } .topbar-label { font-size: var(--fs-xs); color: var(--muted); } .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .company-badge { border: 1px solid var(--line); background: var(--surface); border-radius: 9999px; padding: 2px 10px; font-size: var(--fs-xs); } main { flex: 1; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 16px; } .page-title { margin: 0; font-size: var(--fs-xl); font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .back-link { font-size: var(--fs-sm); text-decoration: none; } .meta-row { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-sm); color: var(--muted); } .note { font-size: var(--fs-sm); color: var(--muted); } /* Khung ghi chú nổi bật (khác .note trần — .note dùng làm chữ chân trang nhỏ ở nhiều trang khác, không đổi được). Không có tiền tố kiểu "GHI CHÚ"/"GIẢ ĐỊNH" — đó là quy ước riêng của tài liệu mockup cho người review, không phải chữ cho NCC. */ .callout { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 11px 14px; font-size: var(--fs-sm); color: var(--ink); margin: 12px 0; line-height: 1.6; } .empty { padding: 24px; text-align: center; font-size: var(--fs-sm); color: var(--muted); } /* ---- tiles ---- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .tile { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 5px; } .tile-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .tile-value { font-size: var(--fs-xl); font-weight: 600; line-height: 1; } .tile-sub { font-size: var(--fs-xs); color: var(--muted); } /* ---- tables ---- */ .table-scroll { overflow-x: auto; } /* Menu "⋯" trong ô bảng: overflow-x:auto cắt luôn phần thò xuống dưới của menu ở hàng cuối, nên mở menu thì tạm bỏ cắt. */ .table-scroll:has(.menu-list:not([hidden])) { overflow: visible; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .table th, .table td { padding: 9px 14px; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; } .table th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: var(--thead); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--fill); } .table tbody tr.row-link { cursor: pointer; } /* Link nằm trong ô mã của hàng bấm được: dáng chữ đậm như /my, chỉ gạch chân khi rê chuột. */ .table td.strong a { color: inherit; text-decoration: none; } .table td.strong a:hover { text-decoration: underline; } .strong { font-weight: 600; } .line-desc { font-size: var(--fs-xs); color: var(--muted); white-space: normal; } /* ---- lists / pills / tags ---- */ .todo-list { list-style: none; margin: 0; padding: 0; } .todo-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .todo-list li:last-child { border-bottom: none; } .todo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pill { display: inline-block; border: 1px solid var(--line); border-radius: 9999px; line-height: 1.4; padding: 2px 10px; font-size: var(--fs-xs); background: var(--fill); color: var(--ink); } .pill-accent { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); font-weight: 600; } .tag-danger { font-size: var(--fs-xs); color: var(--danger); } /* ---- Phase 2: đính kèm, AI extract, banner trạng thái ---- */ .pad { padding: 14px; } .banner { border-radius: 12px; padding: 10px 14px; font-size: var(--fs-base); border: 1px solid; } .banner-ok { background: var(--ok-dim); border-color: var(--ok); color: var(--ok); } .banner-danger { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); } .banner-warn { background: var(--warn-dim); border-color: var(--warn); color: var(--warn); } .hint { font-size: var(--fs-xs); color: var(--muted); margin: 6px 0 0; } .att-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .att-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 10px; font-size: var(--fs-sm); } .att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-size { color: var(--text-mute); font-size: var(--fs-xs); flex-shrink: 0; font-family: var(--font-mono); } .link-btn.danger { color: var(--danger); } .extract-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .dim { color: var(--muted); font-size: var(--fs-xs); } .inp-ai { border-style: dashed; border-color: var(--info); background: var(--info-dim); } .confirm-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-base); line-height: 1.5; } .confirm-row input { margin-top: 3px; } .form-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 4px; } .form-actions .spacer { flex: 1; } /* ---- Phase 3: đơn hàng, hóa đơn, công nợ, trả hàng, hồ sơ ---- */ .panel-tint { background: var(--panel); } .ack-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .reject-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .reject-row .inp { flex: 1; min-width: 200px; } .stat-row { display: flex; flex-wrap: wrap; gap: 10px; } .stat-chip { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 12px; font-size: var(--fs-xs); color: var(--muted); text-decoration: none; } .stat-chip b { display: block; color: var(--accent); font-size: var(--fs-sm); font-family: var(--font-mono); margin-top: 2px; } /* Chuỗi chứng từ RFQ -> PO -> Hóa đơn -> Trả hàng (order-detail). */ .trace-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .trace-stage { display: flex; flex-direction: column; gap: 5px; min-width: 100px; } .trace-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .trace-chip { display: inline-block; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 5px 10px; font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--accent); text-decoration: none; } .trace-chip.trace-current { background: var(--accent-dim); border-color: var(--accent); color: var(--ink); font-weight: 600; } .trace-chip.trace-empty { color: var(--muted); border-style: dashed; } .trace-arrow { align-self: center; color: var(--muted); font-size: var(--fs-lg); margin-top: 15px; } /* Panel chat NCC <-> DPG (order-detail). */ .chat-thread { max-height: 340px; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { padding: 8px 10px; border-radius: 8px; background: var(--fill); } .chat-meta { font-size: var(--fs-xs); margin-bottom: 3px; } .chat-body { font-size: var(--fs-base); white-space: pre-wrap; } .chat-form { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); } .chat-form textarea { flex: 1; resize: vertical; } .two-col { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; } .two-col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .col-main, .col-side { display: flex; flex-direction: column; gap: 12px; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--panel); font-size: var(--fs-sm); border-radius: 0 0 12px 12px; } .progress-value { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .progress-value b { font-size: var(--fs-xl); } .progress-bar { margin-top: 8px; height: 8px; border-radius: 9999px; background: var(--fill); overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); } .plain-list { list-style: none; margin: 0; padding: 0; } .plain-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .plain-list li:last-child { border-bottom: none; } .totals-box { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel); font-size: var(--fs-base); border-radius: 0 0 12px 12px; } .totals-box div { display: flex; gap: 10px; } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); } .detail-grid > div { padding: 12px 14px; border-right: 1px solid var(--line); } .detail-grid > div:last-child { border-right: none; } .detail-grid-3 { border-bottom: none; } .cr-grid { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 10px; } .row-selected { background: var(--accent-dim); } @media (max-width: 900px) { .two-col, .two-col-even, .detail-grid, .cr-grid { grid-template-columns: 1fr; } .detail-grid > div { border-right: none; border-bottom: 1px solid var(--line); } } /* ---- Phase 4: quản trị ---- */ .eyebrow-label { margin: 0; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); } .admin-tab { padding: 9px 15px; font-size: var(--fs-base); text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tab:hover { color: var(--ink); } .admin-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .tab-count { line-height: 1.4; display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 9999px; background: var(--accent-dim); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; } .search-row { display: flex; flex-wrap: wrap; gap: 8px; } .search-row .inp:first-child { flex: 1; min-width: 200px; } .search-row select.inp { width: auto; padding: 0 6px; } .pill-dashed { border-style: dashed; color: var(--muted); background: transparent; } .pill-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-dim); font-weight: 600; } .pill-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-dim); font-weight: 600; } .pill-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); font-weight: 600; } .pill-info { border-color: var(--info); color: var(--info); background: var(--info-dim); } .chip { line-height: 1.4; display: inline-block; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); background: var(--surface); } .pager { display: flex; align-items: center; justify-content: center; gap: 14px; } .form-rows { display: flex; flex-direction: column; gap: 10px; } .form-row { display: grid; grid-template-columns: 220px 1fr; gap: 10px; font-size: var(--fs-base); } .fill-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .admin-table td, .admin-table th { white-space: normal; } /* Chỉ cột chữ dài được xuống dòng; mã, số tiền, pill và link thao tác giữ 1 dòng như bảng /my. */ .admin-table td.strong, .admin-table td.num, .admin-table th.num, .admin-table .pill, .admin-table td a.link { white-space: nowrap; } @media (max-width: 700px) { .form-row { grid-template-columns: 1fr; gap: 2px; } } /* ---- wizard 2 bước (rfq-quote) ---- */ .wiz { display: flex; align-items: center; gap: 0; margin: 0 0 4px; flex-wrap: wrap; } .wiz button { display: flex; align-items: center; gap: 9px; font: inherit; background: none; border: none; cursor: pointer; padding: 6px 4px; color: var(--muted); } .wiz button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .wiz .n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); flex: none; } .wiz .t { font-size: var(--fs-base); } .wiz button[aria-current] .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .wiz button[aria-current] .t { color: var(--ink); font-weight: 600; } .wiz button.done .n { background: var(--fill); border-color: var(--border-hi); color: var(--ink); } .wiz button.done .t { color: var(--ink); } .wiz .bar { width: 30px; height: 1px; background: var(--line); margin: 0 6px; flex: none; } .wiz .opt { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); } /* ---- xem tài liệu thật (iframe/img) + thông tin AI đọc được ---- */ .viewer { display: grid; grid-template-columns: 1fr 340px; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); margin-bottom: 14px; } @media (max-width: 1000px) { .viewer { grid-template-columns: 1fr; } } .docpane { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); background: var(--paper); } @media (max-width: 1000px) { .docpane { border-right: none; border-bottom: 1px solid var(--line); } } .docpane .top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel); } .docpane .top .lb { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .docpane .top .spacer { flex: 1; } .ftabs { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--panel); } .ftabs button { display: flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-sm); height: 28px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9999px; cursor: pointer; white-space: nowrap; } .ftabs button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); font-weight: 600; } .docstage { flex: 1; min-height: 520px; display: grid; place-items: center; background: var(--paper); overflow: auto; } .docstage iframe, .docstage img { width: 100%; height: 100%; min-height: 520px; border: none; object-fit: contain; background: #fff; transition: transform .15s ease; } .docstage .empty { padding: 24px; } .zoom { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); background: var(--panel); } .zoom button { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9999px; cursor: pointer; font: inherit; font-size: var(--fs-base); } .zoom .pc { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); min-width: 38px; text-align: center; } .infopane { background: var(--surface); display: flex; flex-direction: column; min-width: 0; } .infopane .itabs { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); } .infopane .itabs button { flex: 1; font: inherit; font-size: var(--fs-sm); padding: 10px 8px; border: none; background: none; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; } .infopane .itabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .infopane .ibody { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .infopane .sec { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; } .kv { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: var(--fs-sm); } .kv-row { display: flex; justify-content: space-between; gap: 8px; } .kv-row dt { color: var(--muted); } .kv-row dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; } .infopane .ibody { flex: 1; overflow: auto; } .kv.kv-grid { grid-template-columns: 104px 1fr; gap: 7px 10px; align-items: start; margin: 0; } .kv-grid dt { color: var(--muted); } .kv-grid dd { margin: 0; color: var(--ink); font-weight: 600; } .kv-grid dd.ai { color: var(--info); } .kv-grid dd.miss { color: var(--text-mute); font-style: italic; font-weight: 400; } .infopane .ifoot { border-top: 1px solid var(--line); padding: 11px; background: var(--panel); display: flex; gap: 8px; flex-wrap: wrap; } .infopane .ifoot form { display: contents; } .infopane .ifoot .btn { flex: 1; } .ftabs .chip { font-size: var(--fs-xs); margin-right: 4px; } /* ---- popup xem file (admin chi tiết RFQ, /js/rfq-ui.js::initDocModal) ---- */ .doc-modal { width: min(1000px, 94vw); max-width: none; height: 90vh; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); overflow: hidden; } .doc-modal[open] { display: flex; flex-direction: column; } .doc-modal::backdrop { background: rgba(0, 0, 0, .55); } .doc-modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: var(--fs-base); } .doc-modal-head .spacer { flex: 1; } .doc-modal-body { flex: 1; min-height: 0; background: var(--paper); display: grid; } .doc-modal-body iframe { width: 100%; height: 100%; border: none; background: #fff; } .doc-modal-body img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; } .doc-modal-body .empty { padding: 24px; align-self: center; text-align: center; } /* ---- trạng thái mời/báo giá (rfq-quote) ---- */ .sbar { display: flex; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow-x: auto; margin-bottom: 14px; } .sbar > div { display: flex; align-items: center; padding: 6px 20px 6px 26px; margin-left: -12px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); background: transparent; color: var(--muted); } .sbar > div:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); } .sbar > div.done { background: var(--fill); color: var(--ink); } .sbar > div.now { background: var(--accent); color: var(--accent-ink); } /* ---- đính tài liệu (rfq-quote; lồng trong form lớn ở profile, magic-link qua partials/file-drop.ejs): 1 vùng thả file + danh sách file đã chọn ---- */ .uploader { display: flex; flex-direction: column; gap: 10px; } /* Input thật vẫn nằm trong luồng Tab / trình đọc màn hình, chỉ không vẽ ra — label .dropzone đứng thay. */ .uploader-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); } .dropzone { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 20px 16px; text-align: center; cursor: pointer; border: 1.5px dashed var(--border-hi); border-radius: 12px; background: var(--panel); color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-dim); } /* Con không nhận sự kiện chuột: kéo file ngang qua icon/chữ sẽ không bắn dragleave làm viền nhấp nháy. */ .dropzone > * { pointer-events: none; } .uploader-input:focus-visible + .dropzone { outline: 2px solid var(--accent); outline-offset: 2px; } .dropzone-icon { box-sizing: content-box; padding: 9px; margin-bottom: 4px; border-radius: 9999px; background: var(--accent-dim); color: var(--accent); } .dropzone.dragover .dropzone-icon { background: var(--accent); color: var(--accent-ink); } .dropzone-title { color: var(--ink); font-size: var(--fs-base); } .dropzone-title b { font-weight: 600; } .dropzone-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .dropzone-hint { font-size: var(--fs-sm); } /* Đã có file thì vùng thả thu thành dải mỏng "thêm file khác", nhường chỗ cho danh sách. */ .uploader.has-files .dropzone { padding: 11px 16px; } .uploader.has-files .dropzone-icon, .uploader.has-files .dropzone-hint { display: none; } .card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .picked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .picked:empty { display: none; } .picked li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: var(--fs-sm); } .picked li.bad { border-color: var(--danger); background: var(--danger-dim); } .ftype { flex: none; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .04em; background: var(--fill); color: var(--muted); } .ftype[data-kind="pdf"] { background: var(--danger-dim); color: var(--danger); } .ftype[data-kind="xls"] { background: var(--ok-dim); color: var(--ok); } .ftype[data-kind="doc"] { background: var(--info-dim); color: var(--info); } .ftype[data-kind="img"] { background: var(--warn-dim); color: var(--warn); } .pname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pname-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .pname-sub { font-size: var(--fs-xs); color: var(--muted); } .picked li.bad .pname-sub { color: var(--danger); } .pdel { flex: none; width: 28px; height: 28px; border: 0; border-radius: 9999px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-lg); line-height: 1; } .pdel:hover { background: var(--fill); color: var(--ink); } .pdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .uploader-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .uploader-sum { font-size: var(--fs-sm); color: var(--muted); } .uploader-bar .btn:disabled { opacity: .45; cursor: not-allowed; } /* Chưa có JS thì thanh gửi vẫn hiện để form còn dùng được; có JS thì chỉ hiện khi đã chọn file. */ .uploader.js:not(.has-files) .uploader-bar { display: none; } @media (prefers-reduced-motion: reduce) { .dropzone { transition: none; } } /* ---- trợ lý đọc file — chat tĩnh + hỏi AI thật (rfq-quote, bước 2) ---- */ .grid2 { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; } @media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } } .chat { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; min-height: 280px; overflow: hidden; } .chat .ch { border-bottom: 1px solid var(--line); background: var(--panel); padding: 11px 14px; display: flex; align-items: center; gap: 8px; } .chat .ch h2 { margin: 0; font-size: var(--fs-base); font-weight: 600; } .chat .log { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 9px; font-size: var(--fs-sm); overflow-y: auto; max-height: 360px; } .msg { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; background: var(--panel); color: var(--muted); line-height: 1.6; } .msg b { color: var(--ink); font-weight: 600; } .msg.me { background: var(--accent-dim); border-color: var(--border-hi); color: var(--ink); margin-left: 26px; } .msg.err { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); } .chat .ask { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); } .chat .ask .inp { flex: 1; height: 32px; } /* ---- magic link (public, không sidebar) ---- */ .magic-wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 14px; } .magic-header { display: flex; align-items: center; } .brand-name-sm { font-size: var(--fs-base); font-weight: 600; color: var(--accent); } /* ---- /admin/accounts: dialog "+ Thêm" + menu "⋯" mỗi dòng bảng ---- */ dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0; max-width: 440px; width: 92vw; margin: auto; } dialog::backdrop { background: rgba(0, 0, 0, .5); } .menu { position: relative; display: inline-block; } .menu-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); overflow: hidden; z-index: 20; } .menu-list button, .menu-list a { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; color: var(--ink); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; box-sizing: border-box; } .menu-list button:hover, .menu-list a:hover { background: var(--fill); } @media (max-width: 720px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } main { padding: 14px; } } /* ---- chuỗi quan hệ hợp đồng (admin-contract-detail) — port nguyên từ wireframe ---- */ .chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin: 0 0 4px; } @media (max-width: 800px) { .chain { grid-template-columns: 1fr; gap: 8px; } .chain .arrow { transform: rotate(90deg); } } .chain .node { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); font-size: var(--fs-sm); min-width: 0; } .chain .node.mid { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); } .chain .node .h { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; } .chain .node .id { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); } .chain .node b { font-weight: 600; } .chain .arrow { color: var(--muted); text-align: center; font-size: var(--fs-lg); } /* ---- chuyển động (quy tắc: docs/DESIGN.md mục 8b): chỉ opacity/transform, fill-mode backwards, tắt hết khi reduced-motion ---- */ @keyframes fade-in { from { opacity: 0; } } @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } } @keyframes pop-in { from { opacity: 0; transform: scale(.98); } } @keyframes row-flash { from { background: color-mix(in srgb, var(--ok) 22%, transparent); } } @keyframes spin { to { transform: rotate(360deg); } } /* 1. Vào trang: chỉ nội dung, thanh bên/thanh trên đứng yên */ main, .magic-wrap, .login-card, .guest-card { animation: rise-in var(--dur) var(--ease-standard) backwards; } /* 3. Thông báo, hàng bảng */ .banner { animation: fade-in var(--dur) var(--ease-standard) backwards; } .table tbody tr { transition: background var(--dur-fast) var(--ease-standard); } tr:target { animation: row-flash 1.2s ease-out; } /* 4. Hộp thoại + menu: chỉ có hiệu ứng mở */ dialog[open], .menu-list:not([hidden]) { animation: pop-in var(--dur-fast) var(--ease-standard) backwards; } dialog[open]::backdrop { animation: fade-in var(--dur-fast) var(--ease-standard); } /* 5. Chuyển bước / tab: nội dung mờ dần, gạch chân .itabs trượt (vị trí do rfq-ui.js đặt) */ [data-pane]:not([hidden]), [data-ipane]:not([hidden]), [data-file-preview]:not([hidden]) { animation: fade-in var(--dur-fast) var(--ease-standard) backwards; } .infopane .itabs { position: relative; } .infopane .itabs::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--tab-w, 0); background: var(--accent); transform: translateX(var(--tab-x, 0)); opacity: 0; pointer-events: none; } .infopane .itabs.has-indicator::after { opacity: 1; } .infopane .itabs.is-ready::after { transition: transform var(--dur) var(--ease-standard); } .infopane .itabs.has-indicator button[aria-selected="true"] { border-bottom-color: transparent; } /* 2. Nút đang xử lý (rfq-ui.js::initBusyForms): vòng xoay là animation lặp DUY NHẤT được phép */ .btn.is-busy { pointer-events: none; } .btn.is-busy::before { content: ""; flex: none; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } /* 6. Đổi màu mềm */ .btn { transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .pill, .admin-tab, .ftabs button, .infopane .itabs button, .menu-list button, .menu-list a { transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } /* Luôn ở cuối file: tắt mọi chuyển động khi người dùng yêu cầu giảm chuyển động */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }