/* ===================================================================== FTEL · Sales & HR Dashboard — hệ thống giao diện Tông màu lấy theo bộ nhận diện FPT: xanh dương chủ đạo, cam nhấn, xanh lá cho tín hiệu tốt. Nền xám rất nhạt, thẻ trắng, viền mảnh. ===================================================================== */ :root { /* thương hiệu */ --fpt-blue: #0072BC; --fpt-blue-700: #005A96; --fpt-blue-900: #003057; --fpt-orange: #F37021; --fpt-orange-700: #D65F12; --fpt-green: #00A650; --fpt-green-700: #04843F; /* nền & chữ */ --bg: #F5F8FC; --card: #FFFFFF; --border: #E4E9F0; --border-strong: #D2DAE5; --text: #17212E; --text-muted: #667789; --text-soft: #8A99AB; /* trạng thái */ --ok: var(--fpt-green); --ok-soft: #E6F6ED; --warn: #C2791B; --warn-soft: #FDF3E3; --bad: #C8372D; --bad-soft: #FCEDEC; --info-soft: #E8F2FB; /* bảng */ --row-sub: #EDF3F9; --row-total: #DCE8F4; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(0, 58, 107, .04), 0 2px 6px rgba(0, 58, 107, .05); --shadow-md: 0 6px 18px rgba(0, 58, 107, .10); --grad-sidebar: linear-gradient(172deg, #021B33 0%, #032B52 38%, #003F78 72%, #0062A8 100%); --grad-nut: linear-gradient(135deg, #0072BC 0%, #1E90DB 100%); --grad-nut-hover: linear-gradient(135deg, #00609F 0%, #0B7FCB 100%); --sidebar-w: 212px; --topbar-h: 61px; --ease: cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; } /* Nền trang FPT Aurora: loang xanh góc trên phải, cam đào góc dưới trái - rất nhạt, đứng yên khi cuộn */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 100% 0%, rgba(0, 114, 188, .13) 0%, rgba(0, 114, 188, 0) 70%), radial-gradient(900px 560px at 0% 100%, rgba(243, 112, 33, .10) 0%, rgba(243, 112, 33, 0) 70%), radial-gradient(700px 500px at 55% 45%, rgba(0, 166, 80, .025) 0%, rgba(0, 166, 80, 0) 70%), var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #C7D1DE; border-radius: 8px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #A9B7C9; } /* ---------------------------------------------------------- bố cục */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--grad-sidebar); color: #fff; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 20; box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 4px 0 24px rgba(2, 27, 51, .10); isolation: isolate; } /* vệt sáng xanh góc dưới menu tạo chiều sâu */ .sidebar::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none; background: radial-gradient(120% 70% at 20% 100%, rgba(55, 165, 230, .28) 0%, rgba(55, 165, 230, 0) 70%); } .sidebar .brand { padding: 16px 14px 14px; border-bottom: 1px solid rgba(255, 255, 255, .09); display: flex; align-items: center; gap: 8px; } .brand-mark { flex: 1; min-width: 0; } /* Nút thu gọn nằm cố định ở đáy menu, bấm một cái là thu lại / mở ra */ .side-toggle { background: rgba(255, 255, 255, .05); border: none; border-top: 1px solid rgba(255, 255, 255, .09); color: #CBDCEA; cursor: pointer; width: 100%; padding: 13px 18px; text-align: left; display: flex; align-items: center; gap: 11px; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .1px; transition: background .16s var(--ease), color .16s var(--ease); } .side-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; } .side-toggle { flex: 0 0 auto; } .brand-mark { display: flex; align-items: center; gap: 10px; } .brand-dots { display: flex; gap: 3px; } .brand-dots i { width: 7px; height: 16px; border-radius: 2px; display: block; } .brand-dots i:nth-child(1) { background: var(--fpt-orange); } .brand-dots i:nth-child(2) { background: var(--fpt-green); } .brand-dots i:nth-child(3) { background: #37A5E6; } /* ảnh logo đã cắt sát nét chữ (bỏ lề trong suốt) nên cỡ này là cỡ thật của logo */ .logo-img { width: 50px; height: auto; object-fit: contain; flex: 0 0 50px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); } .app-shell.thu-gon .logo-img { width: 40px; flex-basis: 40px; } .brand .logo { font-size: 15.5px; font-weight: 700; letter-spacing: .3px; } .brand .sub { font-size: 11.5px; color: #9FC0DA; margin-top: 4px; letter-spacing: .2px; } .sidebar .nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .sidebar .nav::-webkit-scrollbar { width: 6px; } .sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: none; } .sidebar .nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: #8DB8DC; padding: 16px 12px 8px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; color: #D2E2F0; text-decoration: none; font-size: 13.5px; font-weight: 500; position: relative; border: 1px solid transparent; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); } .nav-item.active { background: linear-gradient(90deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 100%); border-color: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; transform: none; box-shadow: 0 4px 14px rgba(0, 10, 25, .18), inset 0 1px 0 rgba(255, 255, 255, .08); } .nav-item.active svg { color: #7CC4F2; } .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #F37021 0%, #00A650 100%); } .nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.8; } .sidebar .foot { padding: 12px 18px 14px; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 12px; color: #9FC0DA; flex: 0 0 auto; } .sidebar .foot .who { color: #fff; font-weight: 600; font-size: 13px; } .sidebar .foot a { color: #CBDCEA; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 500; } .sidebar .foot a:hover { color: #fff; } .sidebar .foot .foot-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .sidebar .foot a.active { color: #fff; } .bang-thong-tin th { text-align: left; width: 150px; color: var(--text-muted); font-weight: 500; } .main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: rgba(255, 255, 255, .80); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid rgba(210, 222, 236, .7); padding: 15px 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 15; } /* đường mảnh xanh - cam - xanh lá dưới thanh tiêu đề */ .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, #0072BC 0%, #37A5E6 35%, #F37021 70%, #00A650 100%); opacity: .55; } .topbar h1 { font-size: 19px; margin: 0; font-weight: 660; letter-spacing: -.3px; } .topbar .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .topbar .spacer { flex: 1; } .page { padding: 22px 28px 44px; } /* Thanh lọc đầu trang dính ngay dưới tiêu đề: cuộn tới đâu cũng đổi được kỳ và chi nhánh */ .toolbar.loc-trang { position: sticky; top: var(--topbar-h); z-index: 12; margin: -22px -28px 16px; padding: 13px 28px 11px; background: rgba(245, 248, 252, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* ---------------------------------------------------------- thẻ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px 20px; margin-bottom: 20px; } .card > h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 660; letter-spacing: -.1px; } .card > .desc { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 17px 15px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease); } .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fpt-blue); } .kpi:nth-child(2)::after { background: var(--fpt-orange); } .kpi:nth-child(3)::after { background: var(--fpt-green); } .kpi:nth-child(4)::after { background: #37A5E6; } .kpi:nth-child(5)::after { background: #8C6FD1; } .kpi.ok::after { background: var(--ok); } .kpi.warn::after { background: var(--warn); } .kpi.bad::after { background: var(--bad); } .kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-soft); font-weight: 600; } .kpi .value { font-size: 27px; font-weight: 680; margin-top: 7px; letter-spacing: -.8px; font-variant-numeric: tabular-nums; } .kpi .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; } .delta { font-size: 12.5px; font-weight: 650; } .delta.up { color: var(--ok); } .delta.down { color: var(--bad); } /* ---------------------------------------------------------- điều khiển */ .toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .toolbar .grow { flex: 1; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; } .field > label { font-size: 10.5px; font-weight: 650; color: var(--text-soft); text-transform: uppercase; letter-spacing: .7px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--info-soft); color: var(--fpt-blue-700); } .badge.ok { background: var(--ok-soft); color: var(--fpt-green-700); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.muted { background: #EEF2F7; color: var(--text-muted); } .btn { border: 1px solid var(--border-strong); background: var(--card); color: var(--text); padding: 8px 15px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; transition: all .16s var(--ease); white-space: nowrap; } .btn:hover { border-color: var(--fpt-blue); color: var(--fpt-blue-700); background: #F8FBFE; } .btn.primary { background: var(--grad-nut); border-color: #0072BC; color: #fff; box-shadow: 0 2px 8px rgba(0, 114, 188, .22); } .btn.primary:hover { background: var(--grad-nut-hover); border-color: #00609F; color: #fff; } .btn.blue { background: var(--fpt-blue); border-color: var(--fpt-blue); color: #fff; } .btn.blue:hover { background: var(--fpt-blue-700); border-color: var(--fpt-blue-700); color: #fff; } .btn.icon { padding: 8px 10px; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn svg { width: 15px; height: 15px; } /* segmented control */ .seg { display: inline-flex !important; background: #E9EEF4; padding: 3px; border-radius: 9px; gap: 2px; border: none !important; } .seg .seg-item { padding: 7px 15px !important; border-radius: 7px !important; font-size: 13px; font-weight: 600; color: var(--text-muted) !important; cursor: pointer; border: none !important; background: transparent !important; font-family: inherit; transition: all .16s var(--ease); } .seg .seg-item:hover { color: var(--text) !important; } .seg .seg-item.active { background: var(--card) !important; color: var(--fpt-blue-700) !important; box-shadow: var(--shadow-sm); } /* chip chọn ngày / kỳ */ .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .chip-scroll { display: flex; gap: 5px; overflow-x: auto; padding: 3px 2px 7px; max-width: 100%; } .chip { min-width: 36px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; transition: all .14s var(--ease); font-variant-numeric: tabular-nums; } .chip:hover { border-color: var(--fpt-blue); color: var(--fpt-blue-700); } .chip.active { background: var(--fpt-blue); border-color: var(--fpt-blue); color: #fff; box-shadow: 0 1px 4px rgba(0, 114, 188, .32); } .chip.has-data::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--fpt-green); margin-left: 5px; } .chip.active.has-data::after { background: #fff; } .chip.ghost { border-style: dashed; } /* zoom */ .zoom-box { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); padding: 2px; } .zoom-box .btn { border: none; padding: 5px 9px; font-size: 15px; line-height: 1; } .zoom-box .btn:hover { background: #F1F6FB; } .zoom-val { min-width: 52px; text-align: center; font-size: 12.5px; font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; } .zoom-wrap { transform-origin: top left; } /* thông báo */ .alert { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; } .alert.info { background: var(--info-soft); border-color: #CDE2F5; color: #0C4B7E; } .alert.ok { background: var(--ok-soft); border-color: #BFE8D2; color: #0A5B31; } .alert.warn { background: var(--warn-soft); border-color: #F4DFBC; color: #8A5709; } .alert.bad { background: var(--bad-soft); border-color: #F4CFCC; color: #93241C; } .upload-zone { border: 2px dashed #C6D3E2; border-radius: var(--radius); padding: 36px; text-align: center; color: var(--text-muted); background: #FAFCFE; cursor: pointer; transition: all .18s var(--ease); } .upload-zone:hover { border-color: var(--fpt-orange); background: #FFF8F3; color: var(--fpt-orange-700); } table.simple { width: 100%; border-collapse: collapse; font-size: 13px; } table.simple th { text-align: left; font-weight: 650; color: var(--text-soft); border-bottom: 1px solid var(--border); padding: 9px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; } table.simple td { padding: 9px 10px; border-bottom: 1px solid #F2F5F9; } table.simple tr:last-child td { border-bottom: none; } /* ---------------------------------------------------------- AG Grid */ .ag-theme-ftel { --ag-font-family: inherit; --ag-font-size: 13px; --ag-border-color: var(--border); --ag-header-background-color: #F5F8FB; --ag-header-foreground-color: var(--text-soft); --ag-odd-row-background-color: #FCFDFE; --ag-row-hover-color: #F3F8FD; --ag-selected-row-background-color: var(--info-soft); --ag-header-column-separator-display: block; --ag-header-column-separator-color: var(--border); --ag-cell-horizontal-border: solid var(--border); } .ag-theme-ftel .ag-header-cell-label, .ag-theme-ftel .ag-header-group-cell-label { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; } .ag-theme-ftel .ag-header-group-cell { background: #E9F1F9; color: var(--fpt-blue-900); border-bottom: 1px solid var(--border); } .ag-theme-ftel .ag-header-group-cell-label { justify-content: center; } .ag-theme-ftel .ag-root-wrapper { border-radius: var(--radius-sm); overflow: hidden; border-color: var(--border); } .ag-theme-ftel .ag-cell { font-variant-numeric: tabular-nums; } .ag-theme-ftel .ag-pinned-left-cols-container { box-shadow: 3px 0 6px -4px rgba(16, 30, 54, .22); } /* ---------------------------------------------------------- đăng nhập */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #021B33 0%, #032B52 35%, #003F78 68%, #0062A8 100%); padding: 20px; position: relative; overflow: hidden; } .login-wrap::before, .login-wrap::after { content: ""; position: absolute; border-radius: 50%; opacity: .17; } .login-wrap::before { width: 460px; height: 460px; background: var(--fpt-orange); top: -170px; right: -120px; } .login-wrap::after { width: 380px; height: 380px; background: var(--fpt-green); bottom: -160px; left: -110px; } .login-card { width: 100%; max-width: 404px; background: #fff; border-radius: 16px; padding: 34px 32px 30px; box-shadow: 0 22px 60px rgba(0, 20, 40, .38); position: relative; z-index: 2; } .login-card .brand-dots { margin-bottom: 16px; } .login-card .brand-dots i { height: 18px; width: 8px; } .login-card h1 { font-size: 20px; margin: 0 0 5px; letter-spacing: -.3px; } .login-card p.sub { margin: 0 0 24px; color: var(--text-muted); font-size: 13px; } .login-card label { display: block; font-size: 10.5px; font-weight: 650; margin-bottom: 7px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .7px; } .login-card input { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; font-family: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .login-card input:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 3px rgba(0, 114, 188, .14); } .login-card button { width: 100%; padding: 12px; background: var(--grad-nut); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 650; cursor: pointer; font-family: inherit; transition: background .16s var(--ease); box-shadow: 0 4px 14px rgba(0, 114, 188, .28); } .login-card button:hover { background: var(--grad-nut-hover); } .login-err { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; } .login-foot { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--text-soft); } /* ---------------------------------------------------------- dropdown Dash */ .Select-control, .is-open > .Select-control { border-color: var(--border-strong) !important; border-radius: var(--radius-sm) !important; min-height: 38px; box-shadow: none !important; } .Select-control:hover { border-color: var(--fpt-blue) !important; } .Select-placeholder, .Select--single > .Select-control .Select-value { line-height: 36px !important; } .Select-menu-outer { border-radius: var(--radius-sm) !important; border-color: var(--border-strong) !important; box-shadow: var(--shadow-md) !important; overflow: hidden; } .VirtualizedSelectFocusedOption { background: var(--info-soft) !important; } ._dash-loading { color: transparent; } /* ------------------------------------------------ sidebar thu gọn */ .app-shell.thu-gon { --sidebar-w: 66px; } .app-shell.thu-gon .brand { flex-direction: column; gap: 10px; padding: 14px 8px; } .app-shell.thu-gon .brand-text, .app-shell.thu-gon .nav-group, .app-shell.thu-gon .nav-item > span:last-child, .app-shell.thu-gon .foot .who, .app-shell.thu-gon .foot > div:nth-child(2), .app-shell.thu-gon .side-toggle span, .app-shell.thu-gon .foot a span:last-child { display: none; } .app-shell.thu-gon .side-toggle { justify-content: center; padding: 13px 0; } .app-shell.thu-gon .brand-dots { transform: scale(.85); } .app-shell.thu-gon .nav { padding: 10px 8px; } .app-shell.thu-gon .nav-item { justify-content: center; padding: 11px 0; } .app-shell.thu-gon .nav-item.active::before { left: -8px; } .app-shell.thu-gon .foot { padding: 12px 8px; text-align: center; } .app-shell.thu-gon .foot a { justify-content: center; margin-top: 0; } .app-shell.thu-gon .foot .foot-links { flex-direction: column; align-items: center; gap: 12px; } /* ------------------------------------------------ ô chọn ngày (lịch) */ .date-pick .SingleDatePickerInput { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); } .date-pick .DateInput { width: 132px; border-radius: var(--radius-sm); background: transparent; } .date-pick .DateInput_input { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); padding: 8px 12px; line-height: 20px; background: transparent; border: none; } .date-pick .DateInput_input__focused { border: none; box-shadow: inset 0 0 0 2px rgba(0, 114, 188, .18); } .date-pick .SingleDatePicker_picker { z-index: 40; } .date-pick .CalendarDay__selected, .date-pick .CalendarDay__selected:hover { background: var(--fpt-blue); border-color: var(--fpt-blue); } .date-pick .CalendarDay__default:hover { background: var(--info-soft); border-color: var(--border); } .date-pick .CalendarDay__blocked_out_of_range { color: #C9D3DF; } .date-pick .DayPickerKeyboardShortcuts_show__bottomRight { display: none; } /* toolbar gọn hơn */ .toolbar .field > label { white-space: nowrap; } .page > .toolbar:first-child { margin-bottom: 16px; } /* nhãn nút gạt không được xuống dòng */ .seg { width: auto !important; flex-wrap: nowrap; } .seg .seg-item { flex: 0 0 auto !important; white-space: nowrap; width: auto !important; } .brand .logo, .brand .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand .sub { font-size: 10.5px; } /* ------------------------------------------------ biểu đồ & bảng rộng Laptop 13-14" chỉ đủ chỗ cho một biểu đồ mỗi hàng; từ 1500px mới xếp đôi. Nhờ vậy không bao giờ phải kéo ngang cả trang mới xem hết biểu đồ. */ .chart-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; } .chart-col { flex: 1 1 100%; min-width: 0; } .chart-col > .card { margin-bottom: 0; } .chart-col .js-plotly-plot { width: 100% !important; } @media (min-width: 1500px) { .chart-col { flex: 1 1 calc(50% - 10px); } } .card { max-width: 100%; } .zoom-wrap { transform-origin: top left; max-width: 100%; } .card > .toolbar:first-of-type { margin-bottom: 12px; } .card .toolbar .field > label { font-size: 11px; } /* thanh công cụ ngay trên bảng: gọn hơn thanh lọc ở đầu trang */ .card .toolbar .desc { margin: 0; align-self: center; max-width: 52ch; } /* ------------------------------------------------ hộp thoại thêm mới */ .modal { display: none; } .modal.mo { display: block; } .modal-nen { position: fixed; inset: 0; background: rgba(11, 32, 51, .45); backdrop-filter: blur(1.5px); z-index: 90; } .modal-hop { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(6, 24, 44, .28); } .modal-dau { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-dau .grow { flex: 1; } .modal-dau h3 { margin: 0; font-size: 15.5px; font-weight: 680; } .modal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; } .modal-x:hover { color: var(--fpt-orange); } .modal-than { padding: 18px 20px 4px; } .modal-chan { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: #FAFCFE; border-radius: 0 0 14px 14px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .field.rong { width: 100%; } .field.rong > label { display: block; margin-bottom: 5px; } .inp { width: 100%; padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 13px; border: 1px solid var(--border); background: #fff; color: var(--text); } .inp:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 3px #0072bc22; } .btn.nguy-hiem { color: #A32218; border-color: #F0C6C1; } .btn.nguy-hiem:hover { background: #FDECEA; border-color: #E39A92; } .chip.canh-bao { color: #8A5709; background: #FFF7E0; border-color: #F0D9A6; cursor: default; font-weight: 600; } /* ------------------------------------------------ chọn kỳ báo cáo */ .chon-ky { display: flex; align-items: stretch; gap: 6px; } .nut-ky { border: 1px solid var(--border); background: #fff; color: var(--text-muted); border-radius: var(--radius-sm); width: 30px; cursor: pointer; font-size: 17px; line-height: 1; transition: all .16s var(--ease); } .nut-ky:hover { border-color: var(--fpt-blue); color: var(--fpt-blue); background: #F3F9FE; } /* ------------------------------------------------ trang hướng dẫn */ .hd-mo-dau { font-size: 14px; line-height: 1.72; color: var(--text); margin: 0 0 20px; } .buoc-list { display: flex; gap: 18px; flex-wrap: wrap; } .buoc { flex: 1 1 260px; display: flex; gap: 13px; align-items: flex-start; background: #F7FAFD; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 16px; } .buoc-so { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--fpt-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .buoc-ten { font-weight: 660; font-size: 13.5px; margin-bottom: 5px; } .buoc-noi-dung { font-size: 13px; line-height: 1.65; color: var(--text-muted); } .hd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } @media (max-width: 1100px) { .hd-list { grid-template-columns: 1fr; } } .hd-muc { border-left: 3px solid var(--fpt-orange); padding: 2px 0 2px 14px; } .hd-ten { font-weight: 660; font-size: 13.5px; } .hd-hoi { font-size: 12.5px; color: var(--fpt-blue); margin: 2px 0 5px; font-weight: 500; } .hd-noi { font-size: 13px; line-height: 1.68; color: var(--text-muted); } /* ------------------------------------------------ bảng dài thì cuộn trong khung */ .bang-cuon .ag-root-wrapper { max-height: none; } .card .ag-theme-ftel .ag-header { position: sticky; top: 0; z-index: 2; } /* ================================================= Báo cáo Tổng (bản sắp xếp lại) Thanh lọc: ngày và chi nhánh chung một hàng. Thẻ bảng: tên + phạm vi bên trái, thao tác bên phải. Chú thích màu gập lại, bấm mới mở. */ .topbar-noi { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .thanh-du-lieu { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } .thanh-du-lieu .thanh-dl { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; } .thanh-du-lieu a.thanh-dl:hover { filter: brightness(.96); } /* cho bôi đen và Ctrl+C nội dung trong bảng */ .ag-theme-ftel .ag-cell, .ag-theme-ftel .ag-header-cell-text { user-select: text; -webkit-user-select: text; } .ag-theme-ftel .o-lien-ket { cursor: pointer; } .ag-theme-ftel .o-sua { cursor: pointer; color: var(--fpt-blue); font-weight: 600; text-align: center; } .ag-theme-ftel .o-sua:hover { color: var(--fpt-orange); text-decoration: underline; } #qt-user-grid .ag-row, #qt-staff-grid .ag-row { cursor: default; } .modal .date-pick .SingleDatePickerInput { width: 100%; } .ag-theme-ftel .o-lien-ket:hover { text-decoration: underline; color: var(--fpt-blue); } .nut-menu, .menu-nen { display: none; } .chon-ngay { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; } .chon-ngay .nut-ky { width: 34px; } .btn.nho { padding: 6px 12px; font-size: 13px; } .chon-nhanh { width: 190px; } .chon-nhanh .Select-placeholder { color: var(--text-muted) !important; font-weight: 600; font-size: 13px; } .thanh-canh-bao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .thanh-canh-bao .btn { background: #fff; } .badge .cham { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; } .badge .cham.nhap-nhay { animation: nhap-nhay 1.6s ease-in-out infinite; } @keyframes nhap-nhay { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .the-dau { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .the-ten { flex: 1 1 260px; min-width: 0; } .the-ten h3 { margin: 0 0 2px; font-size: 15px; font-weight: 680; } .the-ten .desc { font-size: 12.5px; color: var(--text-muted); } .the-nut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .zoom-box .zoom-nhan { font-size: 12.5px; min-width: 104px; justify-content: center; color: var(--text-muted); } .chu-giai { margin: 0 0 12px; font-size: 12.5px; } .chu-giai summary { cursor: pointer; color: var(--fpt-blue-700); font-weight: 600; width: max-content; } .chu-giai summary:hover { color: var(--fpt-orange); } .cg-than { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; margin-top: 8px; background: #F7FAFD; border: 1px solid var(--border); border-radius: var(--radius-sm); } .cg-dong { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .cg-ten { width: 160px; font-weight: 600; color: var(--text); } .cg-o { padding: 2px 9px; border-radius: 5px; font-weight: 650; font-size: 12px; font-variant-numeric: tabular-nums; } .cg-ghi { color: var(--text-muted); } /* ================================================= Điện thoại (< 768px) */ @media (max-width: 767px) { .app-shell, .app-shell.thu-gon { --sidebar-w: 248px; } .sidebar { transform: translateX(-100%); transition: transform .22s var(--ease); z-index: 60; box-shadow: 8px 0 30px rgba(0, 20, 40, .3); } body.menu-mo .sidebar { transform: none; } body.menu-mo .menu-nen { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11, 32, 51, .45); } .main { margin-left: 0 !important; } .side-toggle { display: none !important; } /* menu trên điện thoại luôn hiện đủ chữ, bỏ qua chế độ thu gọn của máy tính */ .app-shell.thu-gon .brand-text, .app-shell.thu-gon .nav-group, .app-shell.thu-gon .foot .who, .app-shell.thu-gon .foot > div:nth-child(2) { display: block; } .app-shell.thu-gon .nav-item > span:last-child, .app-shell.thu-gon .foot a span:last-child { display: inline; } .app-shell.thu-gon .brand { flex-direction: row; padding: 16px 14px 14px; } .app-shell.thu-gon .nav { padding: 12px; } .app-shell.thu-gon .nav-item { justify-content: flex-start; padding: 10px 12px; } .app-shell.thu-gon .foot { padding: 12px 18px 14px; text-align: left; } .app-shell.thu-gon .foot a { justify-content: flex-start; margin-top: 10px; } .app-shell.thu-gon .foot .foot-links { flex-direction: row; align-items: center; gap: 16px; } .nut-menu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); cursor: pointer; } .topbar { padding: 10px 14px; gap: 10px; } .topbar-noi { flex-wrap: wrap; gap: 4px 10px; } .topbar h1 { font-size: 17px; } .topbar .sub, .topbar .spacer { display: none; } .thanh-du-lieu .badge.muted { display: none; } .thanh-du-lieu .thanh-dl span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .topbar .badge { font-size: 11.5px; padding: 3px 9px; } .page { padding: 14px 14px 32px; } .toolbar.loc-trang { position: static; margin: -14px -14px 12px; padding: 10px 14px; gap: 10px; } .toolbar .field { min-width: 0; width: 100%; } .chon-ngay .date-pick { flex: 1 1 auto; } .chon-ngay .date-pick .DateInput { width: 100%; } .chon-nhanh { flex: 1 1 150px; width: auto; } .loc-trang .seg { display: flex !important; width: 100% !important; } .loc-trang .seg .seg-item { flex: 1 1 0 !important; text-align: center; } .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .kpi { padding: 12px 12px 11px; } .kpi .label { font-size: 10px; letter-spacing: .4px; } .kpi .value { font-size: 21px; margin-top: 4px; } .kpi .hint { font-size: 11.5px; } .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } .card { padding: 14px 14px 16px; border-radius: 10px; } .the-nut { width: 100%; } .the-nut .zoom-box { display: none; } .the-nut .btn.primary { flex: 1; justify-content: center; } .cg-ten { width: 100%; } .ag-theme-ftel { --ag-font-size: 12.5px; } } @media (max-width: 767px) { .the-nut .seg .seg-item { padding: 7px 12px !important; } .ag-theme-ftel .ag-header-cell-label, .ag-theme-ftel .ag-header-group-cell-label { font-size: 9.5px; letter-spacing: .2px; } .ag-theme-ftel .ag-header-cell { padding-left: 6px; padding-right: 6px; } } /* ------------------------------------------------ tiêu đề cột không cắt ngang từ Chỉ xuống dòng giữa các từ. Cột hẹp hơn từ dài nhất sẽ được assets/khong_rot_chu.js nới ra. */ .ag-theme-ftel .ag-header-cell-text { word-break: keep-all; overflow-wrap: normal; hyphens: none; text-overflow: clip; } .ag-theme-ftel .ag-header-cell-label { letter-spacing: .3px; } .ag-theme-ftel .ag-header-cell, .ag-theme-ftel .ag-header-group-cell { padding-left: 8px; padding-right: 8px; } /* ------------------------------------------------ tiêu đề bảng giống ảnh chụp báo cáo Hàng nhóm cột (INTERNET, TĂNG TRƯỞNG...): nền xanh FPT, chữ trắng đậm, vạch trắng ngăn nhóm. Hàng tên cột: nền xanh nhạt, chữ xanh đậm, viết thường cho dễ đọc. */ .ag-theme-ftel { --ag-header-background-color: #E3EEF8; --ag-header-foreground-color: #0B2E4F; --ag-header-column-separator-color: #C5D6E8; } .ag-theme-ftel .ag-header-group-cell-with-group { background: #0072BC; color: #fff; border-right: 1px solid rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(255, 255, 255, .85); } .ag-theme-ftel .ag-header-group-cell-with-group .ag-header-group-cell-label { color: #fff; font-weight: 700; font-size: 11.5px; letter-spacing: .4px; } .ag-theme-ftel .ag-header-group-cell-no-group { background: #E3EEF8; border-bottom: none; } .ag-theme-ftel .ag-header-cell-label { color: #0B2E4F; font-weight: 650; font-size: 11.5px; text-transform: none; letter-spacing: 0; } .ag-theme-ftel .ag-header-row-column-group + .ag-header-row-column .ag-header-cell { border-top: none; } .ag-theme-ftel .ag-header { border-bottom: 1px solid #B9CBE0; } @media (max-width: 767px) { .ag-theme-ftel .ag-header-cell-label { font-size: 10.5px; letter-spacing: 0; } .ag-theme-ftel .ag-header-group-cell-with-group .ag-header-group-cell-label { font-size: 10.5px; } } /* ------------------------------------------------ cột số liệu căn giữa (mọi bảng) Cột số (type numericColumn, hoặc class o-giua) căn giữa cả ô lẫn tiêu đề, giống bảng tính báo cáo. Cột chữ (tên phòng, họ tên, acc...) vẫn căn trái để dễ dò. */ .ag-theme-ftel .ag-right-aligned-cell, .ag-theme-ftel .o-giua { text-align: center; justify-content: center; } .ag-theme-ftel .ag-right-aligned-header .ag-header-cell-label, .ag-theme-ftel .tieu-de-giua .ag-header-cell-label { flex-direction: row; justify-content: center; } .ag-theme-ftel .ag-right-aligned-header .ag-header-cell-text, .ag-theme-ftel .tieu-de-giua .ag-header-cell-text { text-align: center; } /* ---------- Phân tích bán hàng: 6 chỉ số không để lẻ một thẻ xuống dòng ---------- */ .kpi-row.kpi-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1280px) { .kpi-row.kpi-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 767px) { .kpi-row.kpi-6 { grid-template-columns: 1fr 1fr; } } .kpi-row.kpi-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 1440px) { .kpi-row.kpi-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (max-width: 767px) { .kpi-row.kpi-7 { grid-template-columns: 1fr 1fr; } } /* ---------- Báo cáo phòng + Phân tích bán hàng (đợt hoàn thiện) ---------- */ /* laptop từ 1200px: biểu đồ / bảng phụ xếp đôi cho trang đỡ dài */ @media (min-width: 1200px) { .chart-row.doi > .chart-col { flex: 1 1 calc(50% - 10px); } } .chart-row.doi { align-items: stretch; } .chart-row.doi > .chart-col > .card { height: 100%; } /* thanh công cụ đầu thẻ: tiêu đề trái, điều khiển phải */ .the-thanh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .the-thanh .grow { flex: 1; } .the-thanh .o-tim, .o-tim { width: 220px !important; flex: 0 0 auto; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 13px; min-width: 210px; background: #fff; } .o-tim:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 3px rgba(0,114,188,.12); } /* chú giải cách tính */ .dinh-nghia { margin: 4px 0 14px; } .dinh-nghia .cg-tieu-de { cursor: pointer; font-size: 12.5px; color: var(--fpt-blue); font-weight: 600; } .dn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 22px; margin-top: 10px; padding: 12px 14px; background: #F6F9FC; border-radius: 10px; } .dn-dong { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .dn-dong b { color: var(--text); margin-right: 6px; } /* ngăn chi tiết nhân sự trượt từ phải */ .ngan { display: none; } .ngan.mo { display: block; } .ngan-nen { position: fixed; inset: 0; background: rgba(11, 32, 51, .40); z-index: 90; } .ngan-hop { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(760px, 100vw); background: #fff; box-shadow: -18px 0 50px rgba(6, 24, 44, .25); overflow-y: auto; animation: ngan-vao .18s ease-out; } @keyframes ngan-vao { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } } .ngan-dau { position: sticky; top: 0; background: #fff; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); } .ngan-dau h3 { margin: 0; font-size: 17px; } .ngan-dau .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .ngan-than { padding: 16px 22px 26px; } .ct-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .ct-o { background: #F6F9FC; border: 1px solid #E6EDF4; border-radius: 10px; padding: 10px 12px; } .ct-o .nhan { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); } .ct-o .so { font-size: 20px; font-weight: 700; color: #0B2E4F; margin-top: 2px; } .ct-o .phu { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .ct-chip { display: inline-block; background: #FBE3E1; color: #93241C; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; margin: 0 6px 6px 0; } .ct-chip.ok { background: #DCF5E6; color: #0A5B31; } .ngan-than h4 { margin: 16px 0 8px; font-size: 13.5px; } @media (max-width: 767px) { .ct-luoi { grid-template-columns: 1fr 1fr; } } /* dòng phòng không thuộc nhóm kinh doanh: chữ nhạt, không tô màu so sánh */ .ag-theme-ftel .dong-phu .ag-cell { color: #7A8796; } /* ---------- Hiệu suất nhân sự ---------- */ .chu-mau { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 6px; font-size: 12px; color: var(--text-muted); } .mau-chip { display: inline-flex; align-items: center; gap: 6px; } .mau-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .tab-lon .seg { padding: 4px; } .tab-lon .seg-item { font-size: 14px !important; padding: 9px 20px !important; font-weight: 600; } /* cụm tải mẫu + import Excel */ .cum-import { display: flex; gap: 8px; align-items: center; } .upload-nut { display: inline-block; } .modal-rong .modal-hop { width: min(1040px, calc(100vw - 40px)); } /* ---------- Báo cáo Tổng: đường phân khối cột và phân bầy ---------- */ #tq-grid .ag-cell.khoi-dau, #tq-grid .ag-header-cell.khoi-dau, #tq-grid .ag-header-group-cell.khoi-dau { border-left: 2px solid #8FB0D0 !important; } #tq-grid .ag-pinned-left-cols-container .ag-cell:last-child, #tq-grid .ag-pinned-left-header .ag-header-cell:last-child { border-right: 2px solid #8FB0D0 !important; } #tq-grid .ag-row.dong-tong-bay { border-bottom: 2px solid #6F93B8 !important; } #tq-grid .ag-row.dong-tong-cn { border-top: 2px solid #6F93B8 !important; } #tq-grid .ag-row.dong-tong { border-top: 2px solid #3E6E9E !important; } #tq-grid .ag-header-group-cell { border-right: 0 !important; } /* Bảng "Số bán theo ngày": kẻ khối theo tuần, tô nhạt cuối tuần, dòng tổng đậm và có viền */ #tk-grid .ag-cell.dau-tuan, #tk-grid .ag-header-cell.dau-tuan { border-left: 2px solid #8FB0D0 !important; } #tk-grid .ag-header-cell.cuoi-tuan { background: #EEF2F7; } #tk-grid .ag-row .ag-cell.cuoi-tuan { box-shadow: inset 0 0 0 999px rgba(15, 45, 80, .035); } #tk-grid .ag-pinned-left-cols-container .ag-cell:last-child, #tk-grid .ag-pinned-left-header .ag-header-cell:last-child { border-right: 2px solid #8FB0D0 !important; } #tk-grid .ag-pinned-right-cols-container .ag-cell:first-child, #tk-grid .ag-pinned-right-header .ag-header-cell:first-child { border-left: 2px solid #8FB0D0 !important; } #tk-grid .ag-row.dong-tong-bay, #tk-grid .ag-row.dong-khac { border-top: 2px solid #6F93B8 !important; } #tk-grid .ag-row.dong-tong { border-top: 2px solid #3E6E9E !important; border-bottom: 2px solid #3E6E9E !important; } #tk-grid .ag-row.dong-tong-bay .ag-cell, #tk-grid .ag-row.dong-tong .ag-cell, #tk-grid .ag-row.dong-khac .ag-cell { box-shadow: none; } #tq-grid .ag-header-cell-resize::after { display: none; } /* ô chọn mức phóng to bảng Báo cáo Tổng */ .zoom-box .zoom-chon { width: 150px; } .zoom-box .zoom-chon .dash-dropdown, .zoom-box .zoom-chon > div { border: none !important; box-shadow: none !important; min-height: 30px; } /* ---------- Nạp dữ liệu: trạng thái đang lưu + kết quả ---------- */ .xoay { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: xoay .8s linear infinite; } @keyframes xoay { to { transform: rotate(360deg); } } .ds-ket-qua { margin: 8px 0 0; padding-left: 4px; list-style: none; } .ds-ket-qua li { margin: 4px 0; } .dau-ok { color: #0A7A3E; font-weight: 800; } .dau-bad { color: #B42318; font-weight: 800; } #up-commit:disabled { opacity: .75; cursor: progress; } /* ---------------------------------------------------------- trợ lý AI */ .the-ai { border-color: #CFE1F2; background: linear-gradient(180deg, #F7FBFF 0%, var(--card) 140px); } .ai-kq:not(:empty) { margin-top: 14px; } .ai-goi-y { font-size: 13px; color: var(--text-muted); padding: 10px 12px; border: 1px dashed #CFE1F2; border-radius: 8px; } .ai-md { font-size: 13.5px; line-height: 1.6; color: var(--text); } .ai-md p { margin: 0 0 6px; } .ai-md ul, .ai-md ol { margin: 4px 0 8px; padding-left: 20px; } .ai-md li { margin: 3px 0; } .ai-md table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; } .ai-md th, .ai-md td { border: 1px solid var(--border); padding: 3px 8px; } .ai-meta { font-size: 11.5px; color: var(--text-soft); margin-top: 8px; } .ai-nut-noi { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; padding: 9px 16px 9px 9px; border: none; border-radius: 999px; cursor: pointer; font: 600 13.5px inherit; font-family: inherit; color: #fff; background: var(--grad-nut); box-shadow: 0 8px 24px rgba(0, 72, 130, .32); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .ai-nut-noi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 72, 130, .38); } .ai-khung { position: fixed; right: 22px; bottom: 76px; z-index: 61; width: 400px; height: min(620px, calc(100vh - 110px)); display: none; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 40, 80, .25); overflow: hidden; } .ai-khung.mo { display: flex; } .ai-dau { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; color: #fff; background: var(--grad-sidebar); } .ai-dau .grow { flex: 1; min-width: 0; } .ai-dau .ai-phu { font-size: 11.5px; opacity: .8; } .ai-dau .modal-x { color: #fff; } .ai-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); } .ai-tin { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; } .ai-toi { align-self: flex-end; background: var(--fpt-blue); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; } .ai-ban { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .ai-ban .ai-md { font-size: 13px; } .ai-ban .ai-md > :last-child { margin-bottom: 0; } .ai-loi { background: var(--warn-soft); border-color: #F4DFBC; } .ai-ten { font-size: 11px; font-weight: 700; color: var(--fpt-blue-700); margin-bottom: 2px; } .ai-goi-y-cau { align-self: flex-start; border: 1px solid #CFE1F2; background: #F1F7FD; color: var(--fpt-blue-700); padding: 6px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer; } .ai-goi-y-cau:hover { background: #E3EFFA; } .ai-log { position: relative; } .ai-lich { display: flex; flex-direction: column; gap: 10px; } .ai-lich:empty { display: none; } .ai-dang-go .ai-ten { color: var(--text-muted); font-weight: 600; } .ai-cham { display: flex; gap: 4px; padding: 4px 0 2px; } .ai-log:has(.ai-dang-go) .ai-goi-y-hang { display: none; } .ai-khung:has(.ai-dang-go) #ai-chat-gui { opacity: .55; pointer-events: none; } .ai-dang-go i { width: 7px; height: 7px; border-radius: 50%; background: #8FA9C4; animation: ai-nhay 1s infinite; } .ai-dang-go i:nth-child(2) { animation-delay: .15s; } .ai-dang-go i:nth-child(3) { animation-delay: .3s; } @keyframes ai-nhay { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .ai-go { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--card); } .ai-o { flex: 1; resize: none; height: 42px; max-height: 120px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 11px; font: inherit; font-size: 13.5px; } .ai-o:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 3px #0072bc22; } .ai-bat { margin-bottom: 14px; font-weight: 600; } @media (max-width: 640px) { .ai-khung { right: 8px; left: 8px; bottom: 70px; width: auto; height: calc(100vh - 90px); } .ai-nut-noi { right: 14px; bottom: 14px; } .ai-nut-noi span:last-child { display: none; } .ai-nut-noi { padding: 9px; } } /* ---------------------------------------------------------- con cáo Mây */ .cao-boc { display: inline-flex; line-height: 0; flex: none; } .cao-boc > * { margin: 0 !important; line-height: 0; } .cao { width: 100%; height: 100%; overflow: visible; transition: transform .25s var(--ease); } .cao-mat { transform-box: fill-box; transform-origin: center; animation: cao-chop 5s infinite; } @keyframes cao-chop { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } .cao-boc.nho { width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; } .cao-boc.vua { width: 34px; height: 34px; } .ai-nut-noi { padding: 5px 18px 5px 5px; gap: 10px; } .ai-nut-noi .cao-boc { width: 46px; height: 46px; padding: 3px; border-radius: 50%; background: #FFF4EA; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); } .cao-dau { transform-box: view-box; transform-origin: 38px 46px; transition: transform .18s ease-out; } .cao-duoi { transform-box: view-box; transform-origin: 47px 60px; animation: cao-vay 1.1s ease-in-out infinite alternate; } @keyframes cao-vay { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } } .ai-nut-noi:hover .cao-duoi { animation-duration: .35s; } .ai-nut-noi:hover .cao { transform: translateY(-2px) scale(1.06); } .ai-dau .cao-boc { padding: 3px; border-radius: 50%; background: #FFF4EA; } .ai-goi-y-hang { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 2px; } .ai-goi-y-nhan { font-size: 11px; font-weight: 650; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; } .ai-goi-y-cau { text-align: left; max-width: 92%; } .ai-tin { flex: none; } /* ô nhập bí mật dạng chữ thường nhưng hiện dấu chấm (tránh trình duyệt tự điền mật khẩu đã lưu) */ .o-an input, input.o-an { -webkit-text-security: disc; text-security: disc; } .ai-dang-viet { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fpt-blue-700); padding: 12px 14px; border: 1px dashed #CFE1F2; border-radius: 8px; background: #F7FBFF; } .ai-dang-viet .ai-cham { display: flex; gap: 4px; } .ai-dang-viet i { width: 7px; height: 7px; border-radius: 50%; background: #5B9BD5; animation: ai-nhay 1s infinite; } .ai-dang-viet i:nth-child(2) { animation-delay: .15s; } .ai-dang-viet i:nth-child(3) { animation-delay: .3s; } .the-ai .btn.primary:disabled { opacity: .6; cursor: progress; } /* Ads IBB7: khối mẫu JSON cho n8n */ .khoi-ma { background: #0B2E4F; color: #E6F0FA; border-radius: 10px; padding: 14px 16px; font-size: 12.5px; line-height: 1.55; overflow-x: auto; white-space: pre; margin: 10px 0 0; } /* ---------- ⓘ ghi chú: di chuột / chạm mới hiện (giao diện gọn) ---------- */ .tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; cursor: help; outline: none; } .tip-i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #9AA9BA; color: #7A8A9C; font: italic 700 10.5px/13px Georgia, serif; text-align: center; flex: none; transition: all .15s; } .tip:hover .tip-i, .tip:focus .tip-i { border-color: var(--fpt-blue); color: #fff; background: var(--fpt-blue); } .tip-noi { display: none; position: absolute; top: calc(100% + 8px); left: -10px; z-index: 60; width: max-content; max-width: min(420px, 86vw); padding: 12px 15px; border-radius: 10px; background: #1F2A37; color: #F3F6FA; font: 400 13px/1.6 inherit; font-style: normal; text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; box-shadow: 0 8px 24px rgba(15, 30, 50, .22); } .tip-noi.trai { left: auto; right: -10px; } .tip-noi::before { content: ""; position: absolute; top: -5px; left: 14px; width: 10px; height: 10px; background: #1F2A37; transform: rotate(45deg); } .tip-noi.trai::before { left: auto; right: 14px; } .tip:hover .tip-noi, .tip:focus .tip-noi, .tip:focus-within .tip-noi { display: block; } .tip:has(.tip-noi:empty) { display: none; } .tieu-de-tip { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .ghi-chu { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-muted); } .ghi-chu .tip { margin-left: 0; } .ghi-chu:has(.tip-noi:empty) { display: none; } /* ---------- bảng không kéo dài quá màn hình: nhiều dòng thì cuộn trong khung, tiêu đề cột đứng yên ---------- */ .ag-theme-ftel:has(.ag-layout-auto-height) { max-height: 70vh; overflow: auto; border-radius: 10px; } .ag-theme-ftel:has(.ag-layout-auto-height) .ag-root-wrapper, .ag-theme-ftel:has(.ag-layout-auto-height) .ag-root { overflow: visible; } .ag-theme-ftel:has(.ag-layout-auto-height) .ag-header { position: sticky; top: 0; z-index: 5; } .zoom-wrap .ag-theme-ftel, .ag-theme-ftel.khong-gioi-han { max-height: none !important; overflow: visible !important; } /* ---------- Ads IBB7 ---------- */ .ads-tab-tip { align-self: flex-end; margin-bottom: 10px; } .nd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .nd-the { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 11px 14px; background: #fff; } .nd-the b { display: block; font-size: 13.5px; margin-bottom: 4px; } .nd-the span { font-size: 12.8px; color: #3B4A5C; line-height: 1.5; } .nd-the.bad { border-left-color: var(--bad); background: #FFF8F7; } .nd-the.warn { border-left-color: #E3A008; background: #FFFBF0; } .nd-the.ok { border-left-color: var(--fpt-green-700); background: #F5FBF7; } .nd-the.info { border-left-color: var(--fpt-blue); background: #F4F9FE; } .hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } .hai-cot > .card { margin: 0; min-width: 0; } .ct-dau { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 2px 0 10px; } .ct-dau .chip { cursor: default; } .chu-mau { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-muted); margin-top: 8px; } .chu-mau i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; } .link-page { font-size: 12.5px; color: var(--fpt-blue); text-decoration: none; white-space: nowrap; } .link-page:hover { text-decoration: underline; } .ag-theme-ftel .ag-cell a { color: var(--fpt-blue-700); text-decoration: none; } .ag-theme-ftel .ag-cell a:hover { text-decoration: underline; } @media (max-width: 640px) { .hai-cot { grid-template-columns: 1fr; } .nd-luoi { grid-template-columns: 1fr; } } .ghi-chu-nhan { font-size: 12px; color: var(--text-muted); } .nd-the { display: flex; flex-direction: column; gap: 2px; } .nd-ten { font-size: 13px; font-weight: 650; color: #3B4A5C; } .nd-so { font-size: 17px; font-weight: 750; color: #1F2A37; margin-bottom: 2px; } .nd-the.bad .nd-so { color: var(--bad); } .nd-the.ok .nd-so { color: var(--fpt-green-700); } .nd-the.info .nd-so { color: var(--fpt-blue); } .nd-viec { font-size: 12.5px; color: #3B4A5C; line-height: 1.45; margin-top: 2px; } .nd-luoi { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .nd-the { display: flex; flex-direction: column; gap: 2px; } .nd-ten { font-size: 13px; font-weight: 650; color: #3B4A5C; } .nd-so { font-size: 17px; font-weight: 750; color: #1F2A37; margin-bottom: 2px; } .nd-the.bad .nd-so { color: var(--bad); } .nd-the.ok .nd-so { color: var(--fpt-green-700); } .nd-the.info .nd-so { color: var(--fpt-blue); } .nd-viec { font-size: 12.5px; color: #3B4A5C; line-height: 1.45; margin-top: 2px; } .nd-luoi { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .modal-hop.modal-rong { width: min(1240px, calc(100vw - 40px)); } #ads-md-ct .modal-nen { cursor: pointer; } /* bảng có kẻ đường lưới đủ cột + hàng (như Báo cáo Tổng) */ .ag-theme-ftel.luoi-ke .ag-cell, .ag-theme-ftel.luoi-ke .ag-header-cell, .ag-theme-ftel.luoi-ke .ag-header-group-cell { border-right: 1px solid #D9E2EC !important; } .ag-theme-ftel.luoi-ke .ag-row { border-bottom: 1px solid #D9E2EC; } .ag-theme-ftel.luoi-ke .ag-header { border-bottom: 1px solid #C9D6E3; } .ag-theme-ftel.luoi-ke .ag-floating-bottom { border-top: 2px solid #9DB6CE; } .ag-theme-ftel.luoi-ke .ag-floating-bottom .ag-cell { font-weight: 700; background: #EEF4FA; } /* Ads IBB7: dữ liệu cần kiểm tra, cột Chủ nhật ở Tracking ngày */ .kiem-tra { border: 1px solid #F3D38A; background: #FFF8E6; border-radius: 10px; padding: 8px 14px; margin: 0 0 14px; font-size: 13px; } .kiem-tra.bad { border-color: #F2B8B0; background: #FDF0EE; } .kiem-tra.info { border-color: #CFE0F2; background: #F3F8FD; } .kiem-tra summary { cursor: pointer; font-weight: 700; color: #3B2F0A; } .kiem-tra.bad summary { color: #93241C; } .kiem-tra.info summary { color: #0C3B66; } .kiem-tra ul { margin: 8px 0 2px; padding-left: 18px; } .kiem-tra li { margin: 3px 0; line-height: 1.45; } .kiem-tra li.kt-bad { color: #93241C; font-weight: 600; } .ag-theme-ftel .ag-header-cell.cot-cn { color: #C8372D; } /* Phân tích bán hàng - đi sâu một tỉnh */ .ct-tinh { border: 1px solid #CFE0F2; background: #F7FAFD; border-radius: 12px; padding: 12px 14px; margin: 14px 0 4px; } .ct-tinh-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .ct-tinh-ten { font-weight: 700; font-size: 13px; color: #0C3B66; margin: 0 0 6px; } .ba-cot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1100px) { .ba-cot { grid-template-columns: minmax(0, 1fr); } } .hai-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; } @media (max-width: 1100px) { .hai-luoi { grid-template-columns: minmax(0, 1fr); } } /* Ô bấm được để mở chi tiết: chữ xanh như đường dẫn + mũi tên, cả dòng hiện tay trỏ */ .ag-theme-ftel .ag-cell.o-bam { color: #0B6BB5; font-weight: 600; cursor: pointer; } .ag-theme-ftel .ag-cell.o-bam .ag-cell-value::after { content: "›"; margin-left: 6px; color: #8FB4D6; font-weight: 700; } .ag-theme-ftel .ag-row-hover .ag-cell.o-bam .ag-cell-value { text-decoration: underline; } .ag-theme-ftel .ag-row-hover .ag-cell.o-bam .ag-cell-value::after { color: var(--fpt-orange, #F37021); } .goi-y-bam { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #0B6BB5; background: #EEF5FC; border: 1px dashed #A8CBEE; border-radius: 8px; padding: 4px 10px; } /* ghi chú nhiều câu: mỗi câu một dòng, có chấm đầu dòng và khoảng cách */ .tip-dong { position: relative; padding-left: 14px; margin: 0 0 7px; } .tip-dong:last-child { margin-bottom: 0; } .tip-dong::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #7FB2E5; } .tip-noi > div > b:first-child { color: #FFFFFF; } /* Chú thích trong bảng (ag-grid): xuống dòng theo đúng chỗ đã viết, không dính thành cục chữ */ .ag-tooltip { white-space: pre-line; max-width: 420px; line-height: 1.55; } .ag-theme-ftel .co-chu-thich { cursor: help; } .ag-theme-ftel .co-chu-thich .ag-header-cell-text { text-decoration: underline dotted 1px; text-underline-offset: 3px; } /* ---------------- Nhập tồn (/nhapton): bảng sửa trong ô trên laptop, thẻ + form trên điện thoại */ .kpi-row.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 767px) { .kpi-row.kpi-4 { grid-template-columns: 1fr 1fr; } } #nt-luoi .ag-row.dong-nhom { background: var(--row-total); } #nt-luoi .ag-row.dong-nhom .ag-cell { font-weight: 700; color: var(--fpt-blue-900); } /* Màu dòng theo thứ tự ưu tiên tăng dần (luật sau đè luật trước, cùng độ đặc hiệu): 1. KH đang suy nghĩ - tím: đã có hướng nhưng CÒN PHẢI quay lại chốt, nên cảnh báo gấp vẫn đè lên. 2. Đỏ / vàng - cảnh báo cần xử lý. 3. Huỷ - xám: ca đã khép lại, không còn việc gì nên đè lên cả cảnh báo. Tím và xám không nằm trong thang đánh giá xanh/vàng/đỏ, chúng chỉ nói ca đang ở trạng thái nào. */ #nt-luoi .ag-row.dong-suy-nghi { background: #F7F5FD; } #nt-luoi .ag-row.dong-suy-nghi .ag-cell[col-id="hop_dong"] { box-shadow: inset 3px 0 0 #7E63C8; } /* dòng cần xử lý: tô cả dòng + vạch màu ở cột Hợp đồng để TP lướt là thấy */ #nt-luoi .ag-row.dong-do { background: #FFF6F5; } #nt-luoi .ag-row.dong-vang { background: #FFFBEF; } #nt-luoi .ag-row.dong-do .ag-cell[col-id="hop_dong"] { box-shadow: inset 3px 0 0 var(--bad); } #nt-luoi .ag-row.dong-vang .ag-cell[col-id="hop_dong"] { box-shadow: inset 3px 0 0 var(--warn); } #nt-luoi .ag-row.dong-huy, #nt-luoi .ag-row.dong-huy .ag-cell { color: var(--text-soft); background: #F4F6F9; } #nt-luoi .ag-row.dong-huy .ag-cell[col-id="hop_dong"] { box-shadow: inset 3px 0 0 #B6BFCB; } /* 4 ô số cũng là nút lọc */ .kpi.kpi-bam { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; } .kpi.kpi-bam.dang-chon { border-color: var(--fpt-blue); box-shadow: 0 0 0 2px var(--fpt-blue) inset, var(--shadow-md); } .kpi.kpi-bam.dang-chon .label { color: var(--fpt-blue-700); } /* ô chọn nhân viên (tick nhiều người) + tìm + Excel ngay trên danh sách */ .toolbar.nt-loc { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .nt-o-nv { min-width: 340px; max-width: 560px; } @media (max-width: 767px) { .nt-o-nv { min-width: 0; width: 100%; } .toolbar.nt-loc .field { flex: 1 1 100%; } .toolbar.nt-loc .o-tim { width: 100% !important; } } #nt-luoi .ag-cell.o-dam { font-weight: 600; } /* Ô bắt buộc chưa điền: viền đứt nhạt + chữ gợi ý, nhìn ra là ô cần điền chứ không phải báo lỗi */ #nt-luoi .ag-cell.o-sale { background: #FEFCF7; } #nt-luoi .ag-cell[col-id="ghi_chu"] { border-left: 2px solid #E4D3B2; } #nt-luoi .ag-cell.o-thieu { background: #FFFAF0; box-shadow: inset 0 0 0 1px #EBC58C; } #nt-luoi .ag-cell.o-thieu .ag-cell-value::after { color: #A9834A; font-style: italic; font-weight: 400; } #nt-luoi .ag-cell.o-thieu[col-id="ghi_chu"] .ag-cell-value::after { content: "Bấm để ghi tình trạng..."; } #nt-luoi .ag-cell.o-thieu[col-id="loai_moc"] .ag-cell-value::after { content: "Chọn mốc"; } #nt-luoi .ag-cell.o-thieu[col-id="ngay_moc"] .ag-cell-value::after { content: "Chọn ngày"; } #nt-luoi .ag-cell.o-thieu[col-id="phuong_an"] .ag-cell-value::after { content: "Chọn phương án"; } #nt-luoi .ag-header-cell.vung-sale { border-left: 2px solid #E4D3B2; } #nt-luoi .ag-row:not(.dong-nhom):hover .ag-cell.o-sale { background: #FFF6E4; } #nt-nv-luoi .ag-row { cursor: pointer; } .nt-pham-vi { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 10px; } .nt-pham-vi b { color: var(--text); font-weight: 650; } #nt-luoi .ag-cell-wrap-text { line-height: 1.45; padding-top: 6px; padding-bottom: 6px; word-break: break-word; } /* Phương án: nhãn màu như sheet cũ */ #nt-luoi .ag-cell.pa-cho .ag-cell-value, .pa.pa-cho { background: #E8EAED; color: #3C4043; } #nt-luoi .ag-cell.pa-huy .ag-cell-value, .pa.pa-huy { background: #FAD2CF; color: #A50E0E; } /* tím chứ không vàng: vàng đang là màu của "đến hạn hôm nay", để vàng thì hai ý khác nhau lại cùng một màu và mất tác dụng cảnh báo */ #nt-luoi .ag-cell.pa-suy-nghi .ag-cell-value, .pa.pa-suy-nghi { background: #E7E0FA; color: #4A32A0; } #nt-luoi .ag-cell.pa-xong .ag-cell-value, .pa.pa-xong { background: #473822; color: #FFFFFF; } #nt-luoi .ag-cell[class*="pa-"] .ag-cell-value, .pa { border-radius: 999px; padding: 2px 10px; font-size: 12.5px; white-space: nowrap; } #nt-luoi .ag-cell[class*="pa-"] .ag-cell-value { white-space: normal; line-height: 1.35; display: inline-block; } .pa.pa-trong { background: #FFFAF0; color: #8A5A00; border: 1px dashed #F0B35B; } .nt-dien-thoai { display: none; } @media (max-width: 767px) { .nt-laptop { display: none !important; } .nt-dien-thoai { display: flex; flex-direction: column; gap: 8px; } } .nt-nhom { background: var(--row-total); color: var(--fpt-blue-900); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 6px; } .nt-the { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text); } .nt-the.do { border-left-color: var(--bad); } .nt-the.vang { border-left-color: var(--warn); } .nt-the.huy { opacity: .6; } .nt-the.chi-xem { cursor: default; } /* tài khoản dùng chung chưa chọn tên: chỉ xem */ .nt-the.thieu:not(.do):not(.vang) { border-left-color: #F0B35B; } .nt-the-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .nt-the-dau .grow { flex: 1; } .nt-the-gc { margin: 6px 0; font-size: 13.5px; line-height: 1.45; } .nt-the-gc.thieu { color: #8A5A00; font-style: italic; } .nt-the-chan { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-muted); } .nt-moc { font-weight: 600; color: var(--text); } .nt-cb.do { color: var(--bad); font-weight: 650; } .nt-cb.vang { color: var(--warn); font-weight: 650; } /* Tracking ngày · các dòng tổng: USD là số chính, VNĐ quy đổi là dòng phụ nhỏ và nhạt ở dưới. Khối tổng để nền phẳng, không tô màu nhiệt: tổng luôn vượt thang màu của các page nên màu không nói lên gì, mà nền đậm làm dòng VNĐ khó đọc. (Chủ app 24/09/2026) */ #ads-g-ngay .ag-floating-bottom .ag-cell { background: #EEF4FA !important; } #ads-g-ngay .ag-cell.o-hai-dong .ag-cell-value { display: block; width: 100%; white-space: pre; overflow: hidden; font-size: 10.5px; font-weight: 500; line-height: 1.34; color: #64809A; letter-spacing: .1px; } #ads-g-ngay .ag-cell.o-hai-dong .ag-cell-value::first-line { font-size: 12.5px; font-weight: 700; color: #0C3B66; letter-spacing: -.1px; } /* Báo cáo ngày: laptop sửa trong bảng, điện thoại mỗi người một thẻ (chốt 24/09/2026) */ /* điện thoại: mặc định BẢNG như máy tính (chốt 08/10/2026), nút Bảng / Thẻ ở đầu khung để đổi sang mỗi người một thẻ */ .bn-dien-thoai, .bn-chi-dt { display: none; } @media (max-width: 767px) { .bn-chi-dt { display: block; } body[data-bn-dang="the"] .bn-laptop { display: none !important; } body[data-bn-dang="the"] .bn-dien-thoai { display: flex; flex-direction: column; gap: 8px; } } #bn-luoi .ag-cell.o-dam { font-weight: 600; } #bn-luoi .ag-cell.o-sale { background: #FEFCF7; } #bn-luoi .ag-floating-bottom .ag-cell.o-sale { background: #EEF4FA; } /* dòng TỔNG giữ nền của nó */ #bn-luoi .ag-cell.o-thieu { background: #FFFAF0; box-shadow: inset 0 0 0 1px #F0DCBE; } #bn-luoi .ag-header-cell.vung-sale { border-bottom: 2px solid #E4D3B2; } #bn-luoi .ag-row:hover .ag-cell.o-sale { background: #FFF6E4; } /* Ba khối cột (số bán · dự kiến online · Net/Pay): kẻ dọc đậm ở cột mở đầu mỗi khối */ #bn-luoi .ag-header-group-cell.nhom-khoi .ag-header-group-text { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; color: var(--fpt-blue-700); } #bn-luoi .ag-header-group-cell.nhom-khoi { background: #EAF1F8; justify-content: center; border-bottom: 1px solid #C6D6E6; } #bn-luoi .ag-header-cell.khoi-dau, #bn-luoi .ag-cell.khoi-dau, #bn-luoi .ag-header-group-cell.nhom-khoi + .ag-header-group-cell.nhom-khoi { border-left: 2px solid #8AA3C0; } .bn-the { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--fpt-blue); border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; } .bn-the.thieu { border-left-color: #F0B35B; } .bn-the.chi-xem { cursor: default; opacity: .75; } .bn-the-dau { display: flex; align-items: center; gap: 8px; font-size: 14px; } .bn-the-dau .grow { flex: 1; } .bn-lk { font-weight: 700; color: var(--fpt-blue-700); font-variant-numeric: tabular-nums; } /* Nhãn "Nhập trước" khi Trưởng phòng / sale mở báo cáo của ngày chưa tới */ .bn-sau { margin-left: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; background: #FFF4DF; border: 1px solid #F0DCBE; border-radius: 999px; padding: 3px 10px; vertical-align: middle; } .bn-the-so { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 4px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .bn-the-gc { font-size: 13px; line-height: 1.45; } .bn-the-gc.thieu { color: #8A5A00; font-style: italic; } .form-grid.bn-chu { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Nút đang chạy (VD "Fox viết giúp"): khoá lại và quay biểu tượng cho biết app đang làm */ .btn.dang-chay, .btn:disabled { opacity: .72; cursor: progress; } .btn.dang-chay svg { animation: xoay 1.1s linear infinite; } /* Thẻ chỉ số bấm được (Báo cáo ngày: bấm thẻ Luỹ kế tháng để đặt mục tiêu) */ .kpi-bam { font: inherit; text-align: left; cursor: pointer; width: 100%; } .kpi-bam:hover { border-color: var(--fpt-blue); box-shadow: 0 2px 10px rgba(0, 114, 188, .12); } .kpi-sua { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fpt-blue); background: #EEF5FC; border: 1px solid #CFE3F6; border-radius: 999px; padding: 3px 9px; } .kpi-bam:hover .kpi-sua { background: var(--fpt-blue); border-color: var(--fpt-blue); color: #FFFFFF; } @media (max-width: 767px) { .kpi-sua { position: static; margin-top: 8px; } } /* ---------- Đang tải (assets/dang_tai.js) ---------- */ /* thanh chạy trên đầu trang + con trỏ "đang chờ" cho mọi lượt hỏi máy chủ */ #thanh-tai { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s; } #thanh-tai::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, rgba(0, 114, 188, 0), #0072BC 40%, #F37021 70%, rgba(243, 112, 33, 0)); animation: thanh-tai 1.05s ease-in-out infinite; } html.dang-tai #thanh-tai { opacity: 1; } html.dang-tai body { cursor: progress; } @keyframes thanh-tai { from { transform: translateX(-100%); } to { transform: translateX(300%); } } @keyframes quay-tai { to { transform: rotate(360deg); } } /* khối sắp đổi nội dung: mờ đi + vòng xoay ở giữa (bảng, biểu đồ, thẻ chỉ số) */ .ag-theme-ftel, .kpi-row, .dash-graph { position: relative; } .ag-theme-ftel[data-dang-tai] > *, .kpi-row[data-dang-tai] > *, .dash-graph[data-dang-tai] > *, #page-content[data-dang-tai] > * { opacity: .45; transition: opacity .15s; } .ag-theme-ftel[data-dang-tai]::after, .kpi-row[data-dang-tai]::after, .dash-graph[data-dang-tai]::after, #page-content[data-dang-tai]::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 5; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid #CFE3F5; border-top-color: #0072BC; animation: quay-tai .75s linear infinite; pointer-events: none; } #page-content[data-dang-tai]::after { position: fixed; top: 42vh; left: calc(50% + var(--sidebar-w, 0px) / 2); } /* ---------- Bảng nhân sự bấm được (assets/nhan_su_bam.js, app/ui/ngan_nhan_su.py) ---------- */ .nhan-su-bam .ag-row:not(.ag-row-pinned) { cursor: pointer; } .nhan-su-bam .ag-row:not(.ag-row-pinned) .ag-cell[col-id="ho_ten"], .nhan-su-bam .ag-row:not(.ag-row-pinned) .ag-cell[col-id="ten"] { color: #0B6BB5; font-weight: 600; } .nhan-su-bam .ag-row:not(.ag-row-pinned) .ag-cell[col-id="ho_ten"] .ag-cell-value:not(:empty)::after, .nhan-su-bam .ag-row:not(.ag-row-pinned) .ag-cell[col-id="ten"] .ag-cell-value:not(:empty)::after { content: "›"; margin-left: 6px; color: #8FB4D6; font-weight: 700; } .nhan-su-bam .ag-row-hover:not(.ag-row-pinned) .ag-cell[col-id="ho_ten"] .ag-cell-value, .nhan-su-bam .ag-row-hover:not(.ag-row-pinned) .ag-cell[col-id="ten"] .ag-cell-value { text-decoration: underline; } .nhan-su-bam .ag-row-hover:not(.ag-row-pinned) .ag-cell[col-id="ho_ten"] .ag-cell-value::after, .nhan-su-bam .ag-row-hover:not(.ag-row-pinned) .ag-cell[col-id="ten"] .ag-cell-value::after { color: var(--fpt-orange, #F37021); } .ngan-than { min-height: 260px; } .ngan-tai { min-height: 260px; } /* ---------- Nhập báo cáo ngày bằng giọng nói (assets/ghi_am.js, app/ui/pages/baocaongay_giong.py) ---------- */ .bn-gn-nut { position: fixed; right: 16px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 10px; } .bn-gn-mic, .bn-gn-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; } .bn-gn-mic { height: 58px; padding: 0 22px 0 18px; border-radius: 999px; font-size: 15px; background: var(--fpt-orange, #F37021); box-shadow: 0 10px 24px rgba(243, 112, 33, .45); } .bn-gn-mic.dang-nghe { background: #C8372D; animation: gn-nhap 1.2s ease-in-out infinite; } .bn-gn-go { height: 42px; padding: 0 14px; border-radius: 999px; font-size: 13px; background: #0B3A66; box-shadow: 0 6px 16px rgba(11, 58, 102, .35); } @keyframes gn-nhap { 50% { box-shadow: 0 0 0 12px rgba(200, 55, 45, .2); } } #bn-gn-tt { display: none; position: fixed; left: 12px; right: 12px; bottom: 92px; z-index: 80; max-width: 560px; margin-left: auto; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: #fff; background: #0B3A66; box-shadow: 0 8px 22px rgba(6, 24, 44, .3); } #bn-gn-tt.co { display: block; } #bn-gn-tt.nghe { background: #C8372D; } #bn-gn-tt.loi { background: #8A5A00; } .bn-gn-chu { width: 100%; min-height: 76px; resize: vertical; } .bn-gn-the { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; } .bn-gn-nguoi { border: 1px solid var(--border); border-left: 4px solid var(--fpt-blue); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .bn-gn-nguoi.thieu { border-left-color: #F0B35B; background: #FFFAF0; } .bn-gn-nghe { font-size: 12.5px; color: var(--text-muted); } .bn-gn-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; } .bn-gn-luoi .field { min-width: 0; } .bn-gn-luoi .field > label { font-size: 11.5px; } .bn-gn-co { margin: 0; } @media (max-width: 767px) { #bn-gn .modal-hop { top: 0; left: 0; transform: none; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } #bn-gn .modal-chan { position: sticky; bottom: 0; } .bn-gn-mic .gn-chu { display: inline; } } body:has(#bn-gn-mic) .page { padding-bottom: 110px; } /* nút micro nổi không che thẻ cuối trang */ /* ---- Danh bạ (app/ui/pages/danhba.py) + nút copy dùng chung (assets/sao_chep.js) ---- */ .db-o-tim { width: 420px !important; max-width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border-strong, #C9D1DC); border-radius: 8px; font: inherit; background: #fff; } .db-chan .grow { flex: 1; } .db-dem { margin: 10px 0; } .db-the { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .db-dau { display: flex; gap: 10px; align-items: center; } .db-vien { flex: 0 0 38px; height: 38px; border-radius: 50%; background: #E6EEF8; color: var(--fpt-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .db-ten { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .db-nhom-n { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #EEF2F6; color: #475467; } .db-nhom-n.giam_doc, .db-nhom-n.pho_giam_doc { background: #E6EEF8; color: var(--fpt-blue); } .db-dong { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; } .db-dong.phu { font-size: 12px; color: var(--text-muted); } .db-gia-tri { overflow-wrap: anywhere; min-width: 0; color: inherit; } .db-nhan { color: var(--text-muted); font-size: 12px; } .db-ghi-chu { font-size: 12px; color: var(--text-muted); background: #F7F8FA; border-radius: 8px; padding: 5px 8px; } .db-chan { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .db-nguon { font-size: 11px; color: var(--text-muted); } .db-nap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; } .nut-chep { position: relative; flex: 0 0 auto; width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; color: var(--text-muted); padding: 0; } .nut-chep:hover { color: var(--fpt-blue); border-color: var(--fpt-blue); } .nut-chep.lon { width: auto; height: auto; padding: 9px 16px; gap: 7px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); } .nut-chep.lon.primary { color: #fff; } .nut-chep.lon.primary:hover { color: #fff; } .nut-chep.da-chep::after, .nut-chep.chep-loi::after { content: "Đã copy"; position: absolute; top: -28px; right: 0; background: #0B3A66; color: #fff; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 6px; white-space: nowrap; z-index: 5; } .nut-chep.chep-loi::after { content: "Không copy được"; background: #8A5A00; } @media (max-width: 767px) { .db-nap { grid-template-columns: 1fr; } .db-o-tim { width: 100% !important; } .toolbar .field:has(.db-o-tim), .toolbar .field:has(.db-cb) { flex: 1 1 100%; } .db-cb { width: 100%; } } /* ---- Soạn email (app/ui/pages/soanmail.py, assets/soan_mail.js): chọn loại · form · lá thư sửa được ---- */ .sm-loai { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } @media (max-width: 1100px) { .sm-loai { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm-loai-the { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; text-align: left; font: inherit; background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: border-color .12s, background .12s, color .12s; } .sm-loai-the:hover { border-color: var(--fpt-blue); background: #F5F9FD; } .sm-loai-bt { display: inline-flex; align-items: center; color: #6B7C93; } .sm-loai-ten { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--text); } .sm-loai-the.chon { background: var(--fpt-blue); border-color: var(--fpt-blue); } .sm-loai-the.chon .sm-loai-bt, .sm-loai-the.chon .sm-loai-ten { color: #fff; } .sm-luoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; margin-top: 12px; align-items: start; } .sm-o { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 12px 14px; margin-bottom: 14px; } .sm-o .field { min-width: 0; } .sm-o .sm-dai { grid-column: 1 / -1; } .sm-ta { width: 100%; min-height: 96px; resize: vertical; } .sm-fox-dong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .sm-fox-dong .desc { flex: 1 1 200px; margin: 0; font-size: 12px; } .sm-them { margin-top: 12px; } .sm-them > summary { cursor: pointer; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--fpt-blue-700); } .sm-them[open] > summary { margin-bottom: 6px; } .sm-them .desc { margin: 4px 0 0; font-size: 12px; } /* lá thư: đầu thư (Đến / CC / gợi ý / tiêu đề) rồi nội dung, giống cửa sổ soạn thư của Outlook */ .card.sm-thu { padding: 0; } .sm-thu-dau { border-radius: 14px 14px 0 0; } .sm-hanh-dong { border-radius: 0 0 14px 14px; } .sm-thu-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 16px 10px; } .sm-thu-dau h3 { margin: 0; font-size: 14.5px; } .sm-chips { display: flex; flex-direction: column; } .sm-dong-chip { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 42px; padding: 6px 16px; border-top: 1px solid var(--border); } .sm-vt, .sm-nhan { width: 52px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .sm-chip { display: inline-flex; align-items: center; gap: 6px; background: #E6EEF8; color: var(--fpt-blue); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; } .sm-cv { color: #475467; font-size: 11px; margin-left: 5px; } .sm-chip.khoa { background: #EEF0F3; color: #475467; padding-right: 10px; } .sm-x { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; padding: 0 6px; } .sm-tay { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--border); } .sm-tay .inp { flex: 1; min-width: 200px; } .sm-gy-khoi { padding: 10px 16px 12px; background: #F6F9FC; border-top: 1px solid var(--border); } .sm-gy-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sm-gy-dau label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .sm-gy-dv { width: 230px; max-width: 100%; } .sm-dong-tieu { display: flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-top: 1px solid var(--border); } .sm-tieu { flex: 1; min-width: 0; min-height: 1.5em; padding: 2px 6px; border-radius: 6px; font-weight: 600; font-size: 14px; outline: none; overflow-wrap: anywhere; } .sm-sua-bao { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: #FFF8E6; color: #7A5200; border-top: 1px solid #F3DFA8; font-size: 12.5px; } .sm-sua-bao.an { display: none; } .sm-than { min-height: 220px; padding: 16px 18px; border-top: 1px solid var(--border); outline: none; cursor: text; font-family: Calibri, Arial, sans-serif; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; } .sm-than:hover { background: #FBFDFF; } .sm-than:focus, .sm-tieu:focus { background: #F4F9FE; box-shadow: inset 0 0 0 2px #0072bc33; } .sm-than:empty::before { content: "Điền thông tin ở khung bên trái, nội dung thư sẽ hiện ở đây."; color: var(--text-muted); } .sm-than p { margin: 0 0 12px; } .sm-thieu { background: #FFF1D6; color: #8A5A00; border-radius: 4px; padding: 0 3px; } .sm-hanh-dong { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; background: #F8FAFC; border-top: 1px solid var(--border); } .sm-nut { display: flex; gap: 8px; flex-wrap: wrap; } .sm-hanh-dong .desc { margin: 0; font-size: 12px; } .sm-db-kq { display: grid; gap: 10px; max-height: 60vh; overflow: auto; } @media (min-width: 901px) and (min-height: 760px) { .sm-thu { position: sticky; top: 10px; } } @media (max-width: 900px) { .sm-luoi { grid-template-columns: 1fr; } } @media (max-width: 767px) { .sm-loai { grid-template-columns: 1fr; gap: 6px; } .sm-loai-the { padding: 9px 12px; } .sm-o { grid-template-columns: 1fr; } .sm-nut .btn { flex: 1 1 45%; } .sm-gy-dv { width: 100%; } } /* Soạn email: cả ba biểu mẫu dựng sẵn, chỉ hiện biểu mẫu của loại đang chọn (đổi loại tức thì, ô đã gõ không mất) */ .sm-khung .sm-form { display: none; } .sm-khung.loai-ca_hot .f-ca_hot, .sm-khung.loai-hoa_don .f-hoa_don, .sm-khung.loai-ha_tang .f-ha_tang, .sm-khung.loai-ha_tang_moi .f-ha_tang_moi, .sm-khung.loai-bo_phat .f-bo_phat, .sm-khung.loai-tranh_chap .f-tranh_chap { display: block; } /* Danh bạ: chế độ Sơ đồ cây theo phòng ban (căn giữa, có đường nối đầy đủ) - assets/danh_ba.js */ .db-so-do { --duong: #9FB1C6; overflow-x: auto; padding: 4px 0 12px; } .db-cay-trong { width: max-content; min-width: 100%; display: flex; flex-direction: column; align-items: center; } .db-goc { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .db-than { width: 0; height: 22px; border-left: 1.5px solid var(--duong); } .db-nhanh { display: flex; justify-content: center; } .db-pb { position: relative; width: 276px; padding: 22px 12px 0; flex: 0 0 auto; } .db-pb::before, .db-pb::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--duong); } .db-pb::after { right: auto; left: 50%; border-left: 1.5px solid var(--duong); } .db-pb:first-child::before, .db-pb:last-child::after { border: 0 none; } .db-pb:last-child::before { border-right: 1.5px solid var(--duong); border-radius: 0 8px 0 0; } .db-pb:first-child::after { border-radius: 8px 0 0 0; } .db-pb:only-child::before, .db-pb:only-child::after { display: none; } .db-pb:only-child { padding-top: 0; } .db-pb-ten, .db-sub-ten { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 8px; font-weight: 600; } .db-pb-ten { background: var(--fpt-blue); color: #fff; padding: 8px 12px; font-size: 13px; } .db-pb-ten i, .db-sub-ten i { font-style: normal; font-weight: 500; font-size: 12px; opacity: .8; } .db-sub-ten { background: #E6EEF8; color: var(--fpt-blue); padding: 6px 10px; font-size: 12px; } .db-ds { margin-left: 12px; padding: 10px 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .db-ds > * { position: relative; } .db-ds > *::before { content: ""; position: absolute; left: -16px; top: 17px; width: 16px; border-top: 1.5px solid var(--duong); } .db-ds > *::after { content: ""; position: absolute; left: -16px; top: 0; bottom: -8px; border-left: 1.5px solid var(--duong); } .db-ds > *:first-child::after { top: -10px; } .db-ds > *:last-child::after { bottom: auto; height: 17px; } .db-sub .db-ds { margin-left: 0; padding-left: 16px; } .db-n { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .db-n > b { font-size: 13px; font-weight: 600; } .db-n-cv { font-size: 11.5px; color: var(--text-muted); } .db-n-gc { align-self: flex-start; max-width: 100%; font-size: 11px; color: var(--fpt-blue); background: #E6EEF8; border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .db-n-dong { display: flex; align-items: center; gap: 5px; font-size: 11.5px; min-width: 0; } .db-n-dong .db-gia-tri { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .db-n-dong a.db-gia-tri { flex: 0 0 auto; overflow: visible; } .db-n .nut-chep { width: 22px; height: 20px; } .db-n-sua { align-self: flex-start; margin-top: 3px; } .db-n-cu { align-self: flex-start; font-style: normal; font-size: 10.5px; color: #8A5A00; background: #FFF1D6; border-radius: 999px; padding: 1px 8px; } .db-n.goc { width: 236px; border-top: 3px solid var(--fpt-blue); align-items: center; text-align: center; } .db-n.goc .db-n-dong, .db-n.goc .db-n-gc { align-self: center; } .db-n.trong { color: var(--text-muted); border-style: dashed; font-size: 12px; } @media (max-width: 900px) { .db-cay-trong { width: auto; align-items: stretch; } .db-than, .db-pb::before, .db-pb::after { display: none; } .db-nhanh { flex-direction: column; gap: 14px; } .db-pb { width: auto; padding: 0; } .db-goc { margin-bottom: 14px; } .db-n.goc { width: 100%; } } /* Danh bạ: thẻ nạp file (giống trang Nạp dữ liệu), cách danh sách bên trên cho thoáng */ .db-khung-nap { margin-top: 28px; } .db-nap-tieu { margin-bottom: 8px; } .db-nap-o .upload-zone { padding: 28px; } /* Ô chọn chi nhánh: gõ để tìm, danh sách gom theo khu vực (assets/danh_ba.js) */ .db-cb { position: relative; width: 270px; } .db-cb-o { width: 100%; height: 36px; padding: 0 12px; } .db-cb-ds { display: none; position: absolute; z-index: 40; top: 100%; left: 0; right: 0; max-height: 360px; overflow-y: auto; margin-top: 4px; background: #fff; border: 1px solid var(--border-strong, #C9D1DC); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 24, 40, .16); padding: 4px 0 6px; } .db-cb.mo .db-cb-ds { display: block; } .db-cb-nh { position: sticky; top: 0; z-index: 1; padding: 7px 12px; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--fpt-blue); } .db-cb-nh:first-child { margin-top: 0; } .db-cb-it { padding: 7px 12px; font-size: 13.5px; cursor: pointer; } .db-cb-it:hover { background: #F0F5FB; } .db-cb-it.on { background: #E6EEF8; color: var(--fpt-blue); font-weight: 600; } /* Soạn email: hộp Tra danh bạ báo "đã thêm" (assets/soan_mail.js) */ #sm-db-kq .db-the[data-trang="den"], #sm-db-kq .db-the[data-trang="cc"] { border-color: #8FD1AE; background: #F3FAF6; } #sm-db-kq .btn.da-them { background: #1E8E5A; border-color: #1E8E5A; color: #fff; pointer-events: none; } .sm-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); z-index: 5000; padding: 9px 16px; border-radius: 999px; background: #0B3A66; color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 20px #0b3a6640; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } .sm-toast.hien { opacity: 1; transform: translate(-50%, 0); } .sm-trai > .field { margin-bottom: 16px; } /* Soạn email: phân cấp chữ - tên ô đậm vừa, chữ mẫu / ví dụ nhạt lui, ghi chú nhỏ nhạt, bớt chữ in hoa */ .sm-trai .field > label, .sm-trai .field.rong > label { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); } .sm-bb { color: #E5484D; font-weight: 500; } .sm-trai .inp, .sm-thu .inp { border-color: #DCE2EA; } .sm-trai .inp::placeholder, .sm-thu .inp::placeholder, .sm-o-chao::placeholder, .sm-ta::placeholder { color: #A8B2C0; font-weight: 400; opacity: 1; } .sm-o { gap: 16px 14px; margin-bottom: 18px; } .sm-trai .field.rong { padding-top: 18px; border-top: 1px solid var(--border); } .sm-them { padding-top: 6px; border-top: 1px solid var(--border); margin-top: 14px; } .sm-fox-dong .tip { margin-left: 2px; } .sm-dong-chip .desc { color: #98A2B3; font-size: 13px; } .sm-dong-chao { display: flex; align-items: center; gap: 6px; padding: 4px 16px; border-top: 1px solid var(--border); min-height: 42px; } .sm-o-chao { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); padding: 6px; border-radius: 6px; } .sm-o-chao:focus { background: #F4F9FE; box-shadow: inset 0 0 0 2px #0072bc33; } .sm-gy-dau label { font-weight: 500; } .sm-tieu { font-size: 14.5px; } .sm-vt, .sm-nhan { font-weight: 500; color: #8A94A4; } /* Soạn email: lá thư gọn - gợi ý một dòng tiêu đề, lời chào nằm dưới tiêu đề */ .sm-gy-dau { justify-content: space-between; margin-bottom: 10px; } .sm-gy-chon { display: flex; align-items: center; gap: 8px; } .sm-gy-chon label { font-size: 13px; font-weight: 500; color: #8A94A4; } .sm-gy-dv { width: 210px; } .sm-thu-dau { padding-bottom: 12px; } /* Soạn email: gợi ý người nhận là một nút xổ xuống (assets/soan_mail.js tô dòng đã chọn) */ .sm-gy-khoi { position: relative; } .sm-gy-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--fpt-blue-700); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .sm-gy-dd > summary::-webkit-details-marker { display: none; } .sm-gy-dd > summary::after { content: "▾"; font-size: 11px; } .sm-gy-dd[open] > summary { border-color: var(--fpt-blue); box-shadow: 0 0 0 3px #0072bc1f; } .sm-gy-menu { position: absolute; left: 16px; right: 16px; top: calc(100% - 6px); z-index: 30; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px #0b3a6633; padding: 4px; } .sm-gy { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; } .sm-gy:hover { background: #F4F8FC; } .sm-gy-ten { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; } .sm-gy .btn.nho { padding: 3px 12px; font-size: 12.5px; border-radius: 999px; min-width: 52px; justify-content: center; } .sm-gy .sm-ap-chinh { background: #E6EEF8; border-color: #C9DBF0; color: var(--fpt-blue-700); font-weight: 600; } .sm-gy[data-trang="den"] .btn[data-vt="den"], .sm-gy[data-trang="cc"] .btn[data-vt="cc"] { background: #1E8E5A; border-color: #1E8E5A; color: #fff; pointer-events: none; } .sm-gy[data-trang="den"] .btn[data-vt="den"]::before, .sm-gy[data-trang="cc"] .btn[data-vt="cc"]::before { content: "✓"; } .sm-gy[data-trang="den"], .sm-gy[data-trang="cc"] { background: #F3FAF6; } /* ---- Theo dõi Online trong ngày (app/ui/pages/baocaongay_online.py, assets/online.js) ---- Phẳng, trung tính, đường kẻ mảnh, không đổ bóng / gradient / hoạt hình. Màu chỉ để báo trạng thái. */ .onl { --onl-cho: #B54708; --onl-dang: #175CD3; --onl-dang-nen: #E8F1FD; --onl-xong: #067647; --onl-do: #B42318; --onl-chu: #1F2933; --onl-mo: #667085; --onl-ke: #E4E7EC; margin-top: 14px; } .onl-tren { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; } .onl-tren h3 { margin: 0; font-size: 16px; } .onl-ngay { font-size: 13px; color: var(--onl-mo); } .onl-chon-nhan { font-size: 12.5px; color: var(--onl-mo); } .onl-nv-chon { min-width: 230px; max-width: 100%; padding: 7px 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--onl-chu); background: #fff; border: 1.5px solid #B8C4D2; border-radius: 6px; cursor: pointer; } .onl-nv-chon:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 3px #0072bc22; } .onl-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .onl-k { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px 10px; background: #fff; border: 1px solid var(--onl-ke); border-left: 4px solid #98A2B3; border-radius: 8px; } .onl-k span { font-size: 12.5px; color: var(--onl-mo); } .onl-k b { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .onl-k em { font-style: normal; font-size: 12px; color: #98A2B3; } .onl-k.cho { border-left-color: #E9B872; } .onl-k.cho b { color: var(--onl-cho); } .onl-k.dang { border-left-color: #6FA1EC; } .onl-k.dang b { color: var(--onl-dang); } .onl-k.xong { border-left-color: #4DB486; } .onl-k.xong b { color: var(--onl-xong); } .onl-thanh { display: flex; height: 6px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: #EEF0F3; } .onl-thanh i { display: block; height: 100%; transition: width .3s ease; } .onl-thanh .x { background: var(--onl-xong); } .onl-thanh .d { background: var(--onl-dang); } .onl-thanh .c { background: #E9B872; } .onl-hen-tt span { font-size: 12px; } #onl-msg:not(:empty) { margin-top: 8px; } .onl-xl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; padding: 9px 14px; border-left: 3px solid var(--onl-do); background: #FEF3F2; color: #7A271A; font-size: 13px; } .onl-xl:empty { display: none; } .onl-xl button { border: 1px solid #F0B8B2; border-radius: 6px; background: #fff; padding: 3px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--onl-do); cursor: pointer; } .onl-xl button:hover { background: #FDECEA; } /* mỗi khung giờ là một cột */ .onl-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 12px; margin-top: 14px; align-items: start; } .onl-cot { background: #F4F6F9; border: 1px solid var(--onl-ke); border-radius: 8px; min-width: 0; } .onl-cot > header { padding: 11px 12px 10px; border-top: 3px solid #D0D5DD; border-radius: 7px 7px 0 0; background: #ECEFF4; } .onl-cot.nay > header { border-top-color: var(--fpt-blue); background: #E3EEFB; } .onl-cot.sau > header { border-top-color: #98C1EE; } .onl-cot.tre > header { border-top-color: var(--onl-do); background: #FCE9E7; } .onl-cot.qua > header { color: #98A2B3; } .onl-cot-ten { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; } .onl-tag { font-size: 11.5px; font-weight: 600; color: var(--onl-mo); } .onl-tag.nay { color: var(--fpt-blue); } .onl-tag.tre { color: var(--onl-do); } .onl-cot-so { margin-top: 2px; font-size: 12.5px; color: var(--onl-mo); font-variant-numeric: tabular-nums; } .onl-cot-so b { font-size: 18px; color: var(--onl-chu); font-weight: 700; } .onl-mini { display: flex; overflow: hidden; height: 3px; margin-top: 7px; border-radius: 2px; background: #D5DAE2; } .onl-mini i { display: block; height: 100%; } .onl-mini .x { background: var(--onl-xong); } .onl-mini .d { background: var(--onl-dang); } .onl-mini .c { background: #E9B872; } /* mỗi ca một thẻ: mã HĐ + nhãn trạng thái màu ở góc, người phụ trách, hai nút đổi trạng thái */ .onl-ds { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 2px; } .onl-ds:empty { display: none; } .onl-c { background: #fff; border: 1px solid var(--onl-ke); border-radius: 8px; padding: 9px 10px 9px; display: flex; flex-direction: column; gap: 6px; } .onl-c:hover { border-color: #C4CCD8; } .onl-c.qua { border-color: #F0B8B2; } .onl-c-dau { display: flex; align-items: center; gap: 8px; } .onl-ma { font-size: 14.5px; font-weight: 700; letter-spacing: .2px; font-variant-numeric: tabular-nums; } .onl-c.da_online .onl-ma { color: var(--onl-xong); } .onl-bg { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; } .onl-bg.du_kien { background: #FEF3E2; color: var(--onl-cho); } .onl-bg.dang_lam { background: var(--onl-dang-nen); color: var(--onl-dang); } .onl-bg.da_online { background: #E6F4EC; color: var(--onl-xong); } .onl-c-ai { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; color: #344054; min-height: 4px; } .onl-c-ai:empty { display: none; } .onl-tre { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--onl-do); } .onl-c-ai small { flex-basis: 100%; font-size: 12px; color: #98A2B3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onl-c-nut { display: flex; align-items: center; gap: 6px; } .onl-b { border: 1px solid #D0D5DD; border-radius: 6px; background: #fff; padding: 4px 10px; font: inherit; font-size: 12.5px; color: #344054; cursor: pointer; white-space: nowrap; } .onl-b:hover { background: #F2F4F7; } .onl-b.on { border-color: var(--onl-dang); background: var(--onl-dang-nen); color: var(--onl-dang); font-weight: 650; } .onl-b.chinh { border-color: #A6D9BF; color: var(--onl-xong); font-weight: 650; } .onl-b.chinh:hover { background: var(--onl-xong); border-color: var(--onl-xong); color: #fff; } .onl-mn { position: relative; flex: none; } .onl-mn > summary { list-style: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #98A2B3; font-size: 16px; cursor: pointer; } .onl-mn > summary::-webkit-details-marker { display: none; } .onl-mn > summary:hover, .onl-mn[open] > summary { background: #EEF2F7; color: var(--onl-chu); } .onl-mn-ds { position: absolute; right: 0; top: calc(100% + 2px); z-index: 40; width: 266px; padding: 4px 0; background: #fff; border: 1px solid var(--onl-ke); border-radius: 8px; box-shadow: 0 8px 24px #0b3a6626; } .onl-mn-nhom { padding: 6px 6px; } .onl-mn-nhom + .onl-mn-nhom { border-top: 1px solid var(--onl-ke); } .onl-mn-nhan { padding: 0 6px 4px; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: #98A2B3; } .onl-mn-hang { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 6px; font-size: 12.5px; color: var(--onl-mo); } .onl-mn-ds select { width: 100%; min-width: 0; padding: 4px 6px; font: inherit; font-size: 12.5px; border: 1px solid #D0D5DD; border-radius: 5px; background: #fff; color: var(--onl-chu); } .onl-mn-nhom > button { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 5px; font: inherit; font-size: 13px; color: var(--onl-chu); cursor: pointer; } .onl-mn-nhom > button small { font-size: 11.5px; color: #98A2B3; } .onl-mn-nhom > button:hover { background: #F2F4F7; } .onl-mn-nhom > button.luu-y { color: #9A5B13; } .onl-mn-nhom > button.luu-y:hover { background: #FDF1DC; } .onl-mn-nhom > button.xoa { color: var(--onl-do); } .onl-mn-nhom > button.xoa:hover { background: #FDECEA; } /* chân cột: gõ / dán mã + HĐ tồn */ .onl-chan { position: relative; padding: 8px 10px 10px; border-top: 1px solid #F0F2F5; } .onl-nhap { width: 100%; padding: 6px 9px; font: inherit; font-size: 13px; border: 1px dashed #C4CCD8; border-radius: 6px; background: #fff; color: var(--onl-chu); } .onl-nhap::placeholder { color: #A8B2C0; } .onl-nhap:focus { outline: none; border: 1px solid var(--fpt-blue); box-shadow: 0 0 0 3px #0072bc1c; } .onl-goi { margin-top: 10px; font-size: 12.5px; color: var(--onl-mo); } .onl-ton { margin-top: 6px; } .onl-ton > summary { list-style: none; display: inline-block; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--fpt-blue); } .onl-ton > summary::-webkit-details-marker { display: none; } .onl-ton > summary::after { content: " ▾"; font-size: 10px; } .onl-ton-ds { position: absolute; left: 10px; right: 10px; z-index: 40; max-height: 240px; overflow-y: auto; margin-top: 4px; background: #fff; border: 1px solid var(--onl-ke); border-radius: 8px; box-shadow: 0 8px 24px #0b3a6626; } .onl-ton-ds button { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-top: 1px solid #F0F2F5; background: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .onl-ton-ds button:first-child { border-top: 0; } .onl-ton-ds button:hover { background: #F1F6FD; } .onl-ton-ds b { font-variant-numeric: tabular-nums; } .onl-ton-ds span { font-size: 12px; color: var(--onl-mo); } .onl-md-ls { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; max-height: 120px; overflow-y: auto; } .onl-md-nhan { font-size: 12px; font-weight: 650; color: var(--text); } .onl-md-gio { display: inline-block; width: 44px; color: #A8B2C0; } @media (max-width: 767px) { .onl-nv-chon { flex: 1 1 100%; } .onl-luoi { grid-template-columns: 1fr; } } /* tiến độ nhập báo cáo đầu ngày (assets/tien_do_nhap.js) */ .bn-td { margin: 12px 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid #D9822B; border-radius: 8px; background: #fff; font-size: 13px; } .bn-td.xong { border-left-color: #067647; color: #067647; font-weight: 600; } .bn-td-so { display: flex; align-items: center; gap: 10px; } .bn-td-so b { font-size: 16px; font-variant-numeric: tabular-nums; } .bn-td-thanh { display: inline-block; width: 140px; height: 5px; border-radius: 3px; background: #EEF0F3; overflow: hidden; } .bn-td-thanh i { display: block; height: 100%; background: #067647; } .bn-td-ds { margin-top: 6px; color: var(--text-muted); line-height: 1.9; } .bn-td-nv { border: 0; background: none; margin: 0 6px 0 2px; padding: 0; font: inherit; font-weight: 600; color: var(--fpt-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .bn-td-nv:hover { color: var(--fpt-blue-700); } .bn-td-them { font-size: 12.5px; } /* cửa sổ Hiệu quả & xu hướng */ /* Cửa sổ "Hiệu quả & xu hướng": ô chỉ số, thanh kết quả, nhận định, biểu đồ, bảng nhân viên bấm được */ .hq-dau, .hq-nv-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 14px; font-size: 13.5px; color: var(--text-muted); } .hq-dau b { color: var(--text); } .hq-luoi-the { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .hq-the { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid #D0D5DD; border-radius: 8px; background: #fff; min-width: 0; } .hq-the.tot { border-left-color: #12B76A; } .hq-the.luu_y { border-left-color: #F79009; } .hq-the.xau { border-left-color: #D92D20; } .hq-the-nhan { font-size: 12.5px; color: var(--text-muted); } .hq-the-so { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; } .hq-the-phu { font-size: 12px; color: var(--text-muted); } .hq-cl { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #667085; } .hq-cl.tot { color: #067647; } .hq-cl.xau { color: #B42318; } .hq-khoi { margin-bottom: 18px; } .hq-tde { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--text); } .hq-ghi { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); } .hq-ghi-nho { font-weight: 400; font-size: 12px; color: var(--text-muted); } .hq-thanh { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #F2F4F7; } .hq-seg { height: 100%; min-width: 3px; } .hq-chu-ds { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); } .hq-chu-thich i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; } .hq-chu-thich b { color: var(--text); font-variant-numeric: tabular-nums; } .hq-nd-khoi { padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: #F9FAFB; } .hq-nd { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: #344054; } .hq-nd li { display: flex; gap: 10px; align-items: baseline; } .hq-cham { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #98A2B3; transform: translateY(-1px); } .hq-cham.tot { background: #12B76A; } .hq-cham.luu_y { background: #F79009; } .hq-cham.xau { background: #D92D20; } .hq-do { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; } .hq-bang { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .hq-bang th { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border-strong); font-weight: 600; color: var(--text-muted); font-size: 12px; white-space: nowrap; } .hq-bang td { text-align: right; padding: 8px 10px; border-bottom: 1px solid #F0F2F5; } .hq-bang th:first-child, .hq-bang td:first-child { text-align: left; } .hq-bang td.ten { font-weight: 600; } .hq-bang th:last-child, .hq-bang td:last-child { text-align: left; } .hq-hang { cursor: pointer; } .hq-hang:hover td { background: #F1F6FD; } .hq-hang td.ten { color: var(--fpt-blue); } .hq-td-tl { white-space: nowrap; } .hq-td-tl b { display: inline-block; min-width: 38px; } .hq-mini { display: inline-block; width: 70px; height: 6px; margin-right: 8px; border-radius: 3px; background: #EEF2F7; vertical-align: middle; overflow: hidden; } .hq-mini i { display: block; height: 100%; background: #98A2B3; } .hq-mini.tot i { background: #12B76A; } .hq-mini.luu_y i { background: #F79009; } .hq-mini.xau i { background: #D92D20; } .hq-hh { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #F2F4F7; color: #475467; } .hq-hh.tot { background: #E8F6EE; color: #067647; } .hq-hh.luu_y { background: #FEF0C7; color: #B54708; } .hq-hh.xau { background: #FDECEA; color: #B42318; } .hq-hh.kq-chua_len { background: #FDECEA; color: #B42318; } .hq-hh.kq-tre { background: #FEF0C7; color: #B54708; } .hq-hh.kq-doi { background: #EEF2F7; color: #475467; } .hq-nv-ten { font-size: 17px; font-weight: 700; color: var(--text); } .hq-ve { padding: 5px 12px; font-size: 13px; } @media (max-width: 1100px) { .hq-luoi-the { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .hq-do { grid-template-columns: 1fr; } .hq-bang { display: block; overflow-x: auto; } } @media (max-width: 560px) { .hq-luoi-the { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* liên kết với Nhập tồn: ca hẹn thi công hôm nay chưa xếp khung giờ + nhãn lệch ngày */ .onl-hen { margin-top: 8px; } .onl-hen-tt { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--fpt-blue); cursor: pointer; } .onl-hen-tt span { font-size: 11px; } .onl-hen-ds { margin-top: 6px; padding: 10px 14px; border-left: 3px solid var(--fpt-blue); background: #F1F6FD; font-size: 13px; display: flex; flex-direction: column; gap: 8px; } .onl-hen-khung { display: flex; align-items: center; gap: 8px; color: #344054; font-weight: 600; } .onl-hen-khung span { font-weight: 400; font-size: 12px; color: var(--onl-mo); } .onl-hen-khung select { padding: 3px 6px; font: inherit; font-size: 12.5px; border: 1px solid #D0D5DD; border-radius: 5px; background: #fff; } .onl-hen-nguoi { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-top: 8px; border-top: 1px solid #DCE7F5; } .onl-hen-ma { display: flex; flex-wrap: wrap; gap: 6px; } .onl-hen-ma button { border: 1px solid #B7CDEB; border-radius: 6px; background: #fff; padding: 2px 9px; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #1F3A5F; cursor: pointer; } .onl-hen-ma button:hover { border-color: var(--fpt-blue); background: var(--fpt-blue); color: #fff; } .onl-hen-ma button.tat { border-color: transparent; background: none; color: var(--fpt-blue); font-weight: 600; } .onl-hen-ma button.tat:hover { background: #E1ECFA; color: var(--fpt-blue); } @media (max-width: 767px) { .onl-hen-nguoi { grid-template-columns: 1fr; gap: 4px; } } .onl-lech { font-style: normal; font-size: 11.5px; font-weight: 600; color: #9A5B13; background: #FDF1DC; padding: 0 7px; border-radius: 999px; } .onl-ton-ds i { font-style: normal; font-weight: 600; color: #9A5B13; } #onl-md .modal-hop { max-width: 400px; } /* Báo cáo ngày: lỗi khi gõ vào bảng hiện nổi ở cuối màn hình (bảng dài, dòng báo ở đầu trang nằm ngoài tầm nhìn nên sale tưởng ô tự nhảy lại) và tự mờ đi sau ~10 giây */ #bn-msg { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100vw - 32px)); pointer-events: none; } #bn-msg .alert { margin: 0; box-shadow: 0 8px 24px #1018282e; pointer-events: auto; animation: bn-msg-tat .4s ease 10s forwards; } @keyframes bn-msg-tat { to { opacity: 0; visibility: hidden; } } /* Theo dõi Online: thêm ca phát sinh bằng tay (mã HĐ, người phụ trách, khung giờ, ghi chú) */ .onl-them-mo { margin-left: 10px; border: 0; border-radius: 6px; background: var(--fpt-blue); color: #fff; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .onl-them-mo:hover { filter: brightness(1.1); } /* hai dòng nhắc gập (chưa khai đủ giờ / Nhập tồn hẹn hôm nay): cùng một kiểu thanh, có mũi tên bên phải để biết bấm sẽ xổ xuống */ .onl-hen-tt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 6px; text-align: left; } .onl-hen-tt { background: #F1F6FD; } .onl-hen-tt:hover { background: #E4EEFB; } .onl-hen-tt span { font-size: 12px; } .onl-them-f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .onl-them-f label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 0; } .onl-them-f label:first-child, .onl-them-f label:last-of-type { grid-column: 1 / -1; } .onl-them-f input, .onl-them-f select { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 400; border: 1px solid #D0D5DD; border-radius: 6px; background: #fff; color: #1F2933; } .onl-them-f input:focus, .onl-them-f select:focus { outline: none; border-color: var(--fpt-blue); box-shadow: 0 0 0 2px #0072bc22; } .onl-them-loi { grid-column: 1 / -1; min-height: 0; font-size: 12.5px; color: #B42318; } .onl-them-loi:empty { display: none; } @media (max-width: 560px) { .onl-them-f { grid-template-columns: 1fr; } } #onl-tm .modal-hop { max-width: 460px; } /* Dời ca sang ngày khác (hộp chọn khung giờ + ghi chú) và ô xếp khung giờ ngay trên thẻ ca "Chưa hẹn giờ" */ .onl-xep { width: 100%; margin: 2px 0 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: #9A5B13; border: 1px dashed #D9822B; border-radius: 6px; background: #FFF9F0; cursor: pointer; } .onl-xep:hover { background: #FDF1DC; } .onl-them-f select option { color: #1F2933; } .onl-mn-chan { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; border-top: 1px solid var(--onl-ke); } .onl-mn-ok { flex: 1; padding: 7px 10px; border: 0; border-radius: 6px; background: var(--fpt-blue); color: #fff; font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; } .onl-mn-ok:hover:not(:disabled) { filter: brightness(1.1); } .onl-mn-ok:disabled { background: #EEF2F7; color: #98A2B3; cursor: default; } .onl-mn-huy { flex: 1; padding: 6px 10px; border: 1px solid #F4CFCC; border-radius: 6px; background: #fff; color: #B42318; font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; } .onl-mn-huy:hover { background: #FDECEA; } .sm-toast .onl-ht { margin-left: 8px; padding: 2px 10px; border: 1px solid #ffffff80; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; pointer-events: auto; } .sm-toast .onl-ht:hover { background: #ffffff26; } #onl-toast.hien { pointer-events: auto; } /* Thống kê ca dời (ẩn sẵn, bấm thanh xám để mở) */ .onl-doi { margin-top: 8px; } .onl-doi-tt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px; background: #F2F4F7; font: inherit; font-size: 13px; font-weight: 600; color: #475467; text-align: left; cursor: pointer; } .onl-doi-tt:hover { background: #E7EAF0; } .onl-doi-tt span { font-size: 12px; } .onl-doi-ds { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 10px 14px; border-left: 3px solid #98A2B3; background: #F9FAFB; font-size: 13px; } .onl-doi-nhan { margin-bottom: 4px; font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: #667085; } .onl-doi-nhan em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: #98A2B3; margin-left: 4px; } .onl-doi-d { display: grid; grid-template-columns: 170px 54px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid #EAECF0; } .onl-doi-d span { color: #667085; font-size: 12.5px; } .onl-doi-ma { display: flex; flex-wrap: wrap; gap: 6px; } .onl-doi-ma i { font-style: normal; padding: 1px 8px; border: 1px solid #D0D5DD; border-radius: 6px; background: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #344054; } @media (max-width: 767px) { .onl-doi-d { grid-template-columns: 1fr; gap: 2px; } } /* Báo cáo ngày: trạng thái lưu của bảng nhập (assets/bang_nhap.js) */ .bn-luu-tt { align-self: center; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .bn-luu-tt.dang { color: #667085; } .bn-luu-tt.xong { color: #067647; } .bn-luu-tt.loi { padding: 3px 10px; border-radius: 999px; background: #FDECEA; color: #B42318; cursor: pointer; } .onl-doi-ve { border: 1px solid #D0D5DD; border-radius: 6px; background: #fff; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fpt-blue); cursor: pointer; white-space: nowrap; } .onl-doi-ve:hover { border-color: var(--fpt-blue); background: #F1F6FD; } /* Báo cáo ngày: ONL sáng / chiều / Đã online tự đếm từ ca ở Theo dõi Online (hôm nay trở về trước) - ô xám, không gõ tay */ #bn-luoi .ag-cell.o-tu-ca { background: #F1F4F8; color: #3C556F; cursor: default; } #bn-luoi .ag-row:hover .ag-cell.o-tu-ca { background: #E9EEF4; } .onl .onl-lk { margin: 8px 0 0; font-size: 12px; color: var(--onl-mut, #6B7C93); } .onl-k.doi { border-left-color: #A593DB; font: inherit; text-align: left; cursor: pointer; } .onl-k.doi b { color: #6B4FBB; } .onl-k.doi:hover { background: #F7F5FD; } /* Theo dõi Online đang tạm dừng: chỉ còn một thanh nhỏ, bấm mới mở */ .onl-gap { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 9px 14px; font: inherit; font-size: 13.5px; text-align: left; color: #475467; background: #F4F6F9; border: 1px dashed #C9D2DE; border-radius: 8px; cursor: pointer; } .onl-gap:hover { background: #EEF2F7; } .onl-gap b { color: #1D2939; font-weight: 650; } .onl-gap-ghi { flex: 1; color: #98A2B3; font-size: 12.5px; } .onl-gap-mui { font-size: 12px; transition: transform .15s; } .onl-gap.mo .onl-gap-mui { transform: rotate(180deg); } .onl-gap.mo { margin-bottom: 14px; } /* Soạn email: hai nút nhỏ đổi mẫu trong cùng một thẻ (nhóm Xin đầu tư hạ tầng) */ .sm-con { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: #EEF2F7; border-radius: 11px; } .sm-con-the { flex: 1 1 0; padding: 11px 14px; font: inherit; font-size: 14.5px; font-weight: 600; color: #475467; background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .sm-con-the:hover { color: var(--fpt-blue-700); } .sm-con-the.chon { color: var(--fpt-blue-700); background: #fff; box-shadow: 0 1px 3px #1018281f; } /* Soạn email: dãy nút "Gợi ý nhanh" thêm câu tình huống có sẵn (mẫu Xin thêm bộ phát) */ .sm-cau-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .sm-cau-nhan { font-size: 12px; color: var(--text-muted); margin-right: 2px; } .sm-cau { padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--fpt-blue-700); background: #EEF5FC; border: 1px solid #CFE0F2; border-radius: 999px; cursor: pointer; } .sm-cau:hover { background: #E1EEFB; border-color: var(--fpt-blue); } /* ---------------------------------------------------------- Khối DVKH và chuyển khối */ /* Chuyển khối: một nút chữ cạnh "Thoát" ở chân menu, bấm thì xổ danh sách lên trên */ .sidebar .foot { position: relative; } .khoi-doi { position: static; } .khoi-hien { list-style: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: 6px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .30); cursor: pointer; user-select: none; transition: background .16s var(--ease), border-color .16s var(--ease); } .khoi-hien::-webkit-details-marker { display: none; } .khoi-hien:hover, .khoi-doi[open] .khoi-hien { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .5); } .khoi-ds { display: none; position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 30; padding: 4px; border-radius: 8px; background: #0E3A62; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 -8px 24px rgba(0, 10, 25, .35); } .khoi-doi[open] .khoi-ds { display: block; } .khoi-muc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 13px; text-decoration: none; color: #D2E2F0; } .khoi-muc:hover { background: rgba(255, 255, 255, .08); color: #fff; } .khoi-muc.active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .10); } .khoi-muc small { white-space: nowrap; font-size: 10.5px; color: #9FC0DA; } /* menu thu gọn: chỉ còn biểu tượng, danh sách xổ sang bên phải */ .app-shell.thu-gon .khoi-hien span:last-child { display: none; } .app-shell.thu-gon .khoi-ds { left: calc(100% + 8px); right: auto; bottom: 6px; width: 200px; } @media (max-width: 767px) { .app-shell.thu-gon .khoi-hien span:last-child { display: inline; } .app-shell.thu-gon .khoi-ds { left: 12px; right: 12px; bottom: calc(100% - 4px); width: auto; } } .dv-cap-nhat { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .dv-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px; font-size: 12px; } .dv-nguon { color: var(--text-muted); } .dv-ngay-nguon { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; } .dv-ghi-chu-du-lieu { font-size: 12.5px; color: var(--text-muted); background: #FFFBEB; border: 1px solid #F5E3A8; border-radius: 9px; padding: 9px 13px; margin-bottom: 16px; line-height: 1.5; } .dv-ghi-chu-du-lieu b { color: #7A5A00; } .dv-ngay .DateInput_input { font-size: 13px; padding: 6px 9px; } .dv-kpi-bang { width: 100%; border-collapse: collapse; font-size: 13px; } .dv-kpi-bang th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); font-weight: 650; padding: 6px 10px; border-bottom: 1px solid var(--border); } .dv-kpi-bang th:first-child { text-align: left; } .dv-kpi-bang td { text-align: right; padding: 9px 10px; border-bottom: 1px solid #F0F3F7; font-variant-numeric: tabular-nums; font-weight: 600; } .dv-kpi-bang td.dv-ten { text-align: left; font-weight: 500; color: var(--text); } .dv-kpi-bang tr:last-child td { border-bottom: none; } .dv-kpi-bang tr:hover td { background: #F8FAFC; } .dv-luoi-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(620px, 100%), 1fr)); gap: 16px; margin-bottom: 4px; } .dv-luoi-kpi > .card { margin: 0; min-width: 0; } .dv-chua-co { color: var(--text-soft); font-weight: 500; font-size: 12px; } .dv-tot { color: var(--ok); } .dv-xau { color: var(--bad); } .dv-vang { color: #B7791F; } .dv-nd-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; } .dv-nd { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--fpt-blue); border-radius: 10px; padding: 13px 16px 14px; } .dv-nd.bad { border-left-color: var(--bad); } .dv-nd.warn { border-left-color: #E8A33D; } .dv-nd.ok { border-left-color: var(--ok); } .dv-nd.info { border-left-color: var(--fpt-blue); } .dv-nd-dau { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; } .dv-muc { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #E8F2FA; color: var(--fpt-blue-700); } .dv-nd.bad .dv-muc { background: #FDE8E6; color: #B42318; } .dv-nd.warn .dv-muc { background: #FDF1DC; color: #8A5709; } .dv-nd.ok .dv-muc { background: #E3F6EA; color: #0A5B31; } .dv-chu-de { font-size: 12px; color: var(--text-muted); } .dv-nd-tieu-de { font-size: 14.5px; font-weight: 650; line-height: 1.35; margin-bottom: 4px; } .dv-nd-noi-dung { font-size: 13px; color: #44546A; line-height: 1.55; } .dv-nd-goi-y { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); line-height: 1.5; } .dv-nd-goi-y b { color: var(--fpt-blue-700); } .dv-hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; } .dv-hai-cot > .card { margin: 0; min-width: 0; } @media (max-width: 640px) { .dv-luoi-kpi, .dv-nd-luoi, .dv-hai-cot { grid-template-columns: 1fr; } } .dv-huong-dan { margin: 0; padding-left: 20px; font-size: 13px; color: #44546A; line-height: 1.7; } .dv-huong-dan code { background: #EEF2F7; padding: 2px 6px; border-radius: 5px; font-size: 12px; } /* DVKH: thẻ chỉ số có xu hướng, dải cột nhỏ, thanh tiêu đề nhóm biểu đồ */ .dv-the-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } /* sáu thẻ: 3 x 2, hoặc cả hàng khi màn rộng - không để 5 + 1 lẻ */ @media (min-width: 1800px) { .dv-the-luoi { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 900px) { .dv-the-luoi { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dv-the-luoi { grid-template-columns: 1fr; } } .dv-the { display: flex; flex-direction: column; min-width: 0; } .dv-the .value { margin-top: 6px; } .dv-xh-dong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px; line-height: 1.3; } .dv-xh { font-size: 12.5px; font-weight: 650; } .dv-xh-ghi { font-size: 11px; color: var(--text-soft); } .dv-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 10px; } .dv-spark i { flex: 1 1 0; min-width: 3px; background: #CFE3F4; border-radius: 2px 2px 0 0; display: block; } .dv-spark i.cuoi { background: var(--fpt-blue); } .dv-tieu-nhom { margin: 22px 0 10px; font-size: 13px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 10px; } .dv-tieu-nhom::after { content: ""; flex: 1; height: 1px; background: var(--border); } .dv-khoang-cach { height: 16px; } .dv-ba-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; } .dv-ba-cot > .card { margin: 0; min-width: 0; } .dv-ket-luan { font-size: 13px; color: #44546A; line-height: 1.55; margin: 2px 0 10px; } .dv-ket-luan b { color: var(--text); } @media (max-width: 640px) { .dv-ba-cot { grid-template-columns: 1fr; } } .dv-nhom { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-width: 0; } .dv-nhom-ten { font-size: 14px; font-weight: 680; margin-bottom: 2px; } .dv-nhom .desc { margin-bottom: 8px; } .dv-nguoi { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13px; } .dv-nguoi:first-of-type { border-top: 0; } .dv-kpi-bang td { white-space: nowrap; } .dv-kpi-bang td.dv-ten { white-space: normal; min-width: 160px; } .dv-kpi-bang th { white-space: normal; line-height: 1.25; } .kpi .value .dv-so-dai { font-size: 20px; letter-spacing: -.4px; white-space: nowrap; } .dv-kpi-bang td.dv-ten .tip { margin-left: 6px; vertical-align: middle; } /* Thẻ chỉ số có ⓘ: chú thích bật ra ngoài mép thẻ nên thẻ không được cắt phần tràn (bản cũ cắt mất nửa chú thích) */ .kpi:has(.tip) { overflow: visible; } .kpi:has(.tip)::after { border-radius: var(--radius) var(--radius) 0 0; } .kpi:has(.tip):hover, .kpi:has(.tip:focus-within) { z-index: 5; } .dv-the .tip-noi { max-width: 300px; } .dv-the:nth-child(3n) .tip-noi { left: auto; right: -10px; } .dv-the:nth-child(3n) .tip-noi::before { left: auto; right: 14px; } @media (min-width: 1800px) { .dv-the:nth-child(3n) .tip-noi { left: -10px; right: auto; } .dv-the:nth-child(3n) .tip-noi::before { left: 14px; right: auto; } .dv-the:nth-child(n+5) .tip-noi { left: auto; right: -10px; } .dv-the:nth-child(n+5) .tip-noi::before { left: auto; right: 14px; } } /* ===== Tra cứu giá (giafpt) ===== */ .gf-tab { margin-bottom: 14px; } .gf-dd { min-width: 230px; } .gf-dd-nho { min-width: 200px; } .gf-hai-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .gf-ben-khoi { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px 12px; background: var(--card, #fff); min-width: 0; } .gf-ben { font-size: 12px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } .gf-ben-o { display: flex; gap: 12px; flex-wrap: wrap; } .gf-ben-o .field { flex: 1 1 200px; min-width: 0; } .gf-ben-o .gf-dd { min-width: 0; } .gf-tick { align-self: center; font-size: 13px; } .gf-mo-ta { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text); } .gf-mo-ta li { margin: 2px 0; } .gf-nhom-gia { border-top: 1px solid var(--border); padding: 8px 0; } .gf-nhom-gia summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 2px 0; } .gf-nhom-gia .chips { margin-top: 8px; } @media (max-width: 900px) { .gf-hai-ben { grid-template-columns: 1fr; } .gf-dd, .gf-dd-nho { min-width: 0; width: 100%; } } /* ===== Tra cứu giá: thẻ gói cước gom theo nhóm ===== */ .gf-ds { display: flex; flex-direction: column; gap: 22px; } .gf-muc-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .gf-muc-dau h3 { margin: 0; font-size: 16px; } .gf-chung { background: #EEF4FA; border: 1px solid #D6E3F0; border-radius: var(--radius-sm, 8px); padding: 9px 14px; margin-bottom: 12px; font-size: 13px; } .gf-chung-nhan { display: block; font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: var(--fpt-blue); margin-bottom: 4px; } .gf-chung ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; } .gf-chung li::before { content: "•"; color: var(--fpt-blue); margin-right: 6px; } .gf-cho { color: var(--text-muted); font-style: italic; } .gf-luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .gf-the { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px; background: #fff; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; transition: border-color .15s, box-shadow .15s; } .gf-the:hover, .gf-the:focus-visible { border-color: var(--fpt-blue); box-shadow: 0 2px 10px rgba(0, 114, 188, .14); } .gf-the-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .gf-the-ten { font-weight: 650; font-size: 14px; line-height: 1.3; min-width: 0; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gf-nhan { flex: 0 0 auto; font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 999px; background: #E9EEF4; color: var(--text-muted); } .gf-nhan-re { background: #E3F5EB; color: #00844A; } .gf-the-gia { display: flex; align-items: baseline; gap: 2px; } .gf-gia { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--fpt-blue); } .gf-dong { font-size: 15px; font-weight: 650; color: var(--fpt-blue); } .gf-dv { font-size: 12px; color: var(--text-muted); margin-left: 4px; } .gf-mui { color: var(--text-muted); margin-right: 3px; font-weight: 700; } .gf-uu-dai { font-size: 12px; color: #00844A; font-weight: 600; } .gf-the-xem { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 12.5px; font-weight: 600; color: var(--fpt-blue); display: flex; justify-content: space-between; } .gf-the:hover .gf-mui-xem { transform: translateX(3px); } .gf-mui-xem { transition: transform .15s; } .gf-ct-tieu { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 10px 0 6px; } .gf-dd-nhieu { min-width: 260px; } /* thẻ gói cước: các dòng thông tin cố định (nhãn trái, giá trị phải) để so giữa các thẻ */ .gf-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 12.5px; padding: 8px 0 2px; border-top: 1px solid var(--border); } .gf-fk { color: var(--text-muted); white-space: nowrap; } .gf-fv { text-align: right; font-weight: 600; min-width: 0; } .gf-fv-phi { color: #C8372D; } .gf-fv-xanh { color: #00844A; } .gf-fv-cho { color: var(--text-muted); font-weight: 400; } .gf-toc-do { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; font-weight: 600; line-height: 1.35; } /* nút tròn chọn nhóm (giống trang gói cước fpt.vn) + sửa thẻ tràn khung */ .gf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .gf-pill { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--text); transition: border-color .15s, background .15s, color .15s; } .gf-pill:hover { border-color: var(--fpt-blue); } .gf-pill:has(input:checked) { background: #E8F1FA; border-color: var(--fpt-blue); color: var(--fpt-blue); font-weight: 650; } .gf-pill-in { display: none; } .gf-facts { grid-template-columns: auto minmax(0, 1fr); } .gf-fv { white-space: normal; } .gf-pills { gap: 8px; } .gf-pills .dash-options-list-option { margin: 0; padding: 0; display: inline-flex; } .gf-pills .dash-options-list-option-wrapper { display: none; } .gf-pills .dash-options-list-option:has(input:checked) .gf-pill { background: #E8F1FA; border-color: var(--fpt-blue); color: var(--fpt-blue); font-weight: 650; } .gf-pills .dash-options-list-option:hover .gf-pill { border-color: var(--fpt-blue); } /* giờ lấy giá ở góc thanh lọc; 7 nút nhóm thu gọn để xuống dòng gọn ở màn 800 px */ .gf-pills .gf-pill { padding: 7px 13px; font-size: 13px; } .gf-moi-hang { display: flex; align-items: center; gap: 14px; } .gf-moi-hang .nt-nut { margin: 0; } .gf-luc { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .gf-luu-y { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 16px; font-size: 14px; line-height: 1.5; border-color: #EBC688; border-left: 5px solid var(--warn); background: #FFF4DC; color: #6B4208; } .gf-luu-y > svg { flex: none; margin-top: 2px; color: var(--warn); } .gf-luu-y-dau { font-weight: 750; font-size: 14.5px; color: #8A5000; margin-bottom: 1px; } /* bảng "Giá theo cách thanh toán" trong cửa sổ chi tiết: cột Ưu đãi xuống dòng gọn, không giãn dòng */ #gf-ct-bang .ag-cell-wrap-text { line-height: 1.4; padding-top: 6px; padding-bottom: 6px; word-break: break-word; } /* === Phễu bán hàng (Báo cáo Tổng) === */ .the-pheu { margin-top: 14px; } .pheu-chon-dv { min-width: 190px; } .pheu-khung { background: #F4F7FB; border-radius: 8px; overflow: visible; border: 1px solid #E2E8F0; } .pheu-dong { display: grid; grid-template-columns: 1fr 340px 1fr; align-items: center; min-height: 60px; position: relative; } .pheu-dong:hover, .pheu-dong:focus-within { z-index: 20; } .pheu-dong.pheu-ranh-nhom { border-top: 1px dashed #CBD5E1; } .pheu-dong.pheu-ranh-con::after { content: ""; position: absolute; top: 0; left: calc(50% - 140px); right: 0; border-top: 1px dashed #CBD5E1; pointer-events: none; } .pheu-trai { padding-left: 22px; font-size: 12px; font-weight: 700; color: #1D68B4; letter-spacing: 0.03em; text-transform: uppercase; } .pheu-giua { height: 60px; padding: 1.5px 0; display: flex; align-items: stretch; justify-content: center; z-index: 1; } .pheu-khoi { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; cursor: default; transition: filter .15s ease; } .pheu-khoi:hover { filter: brightness(1.06); } .pheu-so { font-size: 15px; font-weight: 700; line-height: 1.2; } .pheu-pct { font-size: 12px; font-weight: 500; opacity: .95; line-height: 1.2; margin-top: 2px; } .pheu-phai { padding-right: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 12px; font-weight: 600; color: #334155; z-index: 2; } .pheu-phai .tip-noi { top: auto; bottom: calc(100% + 8px); width: 250px; } .pheu-phai .tip-noi::before { top: auto; bottom: -5px; } .the-pheu .the-ten .tip-noi { width: 340px; } .pheu-ten-tang { letter-spacing: 0.02em; } @media (max-width: 768px) { .pheu-dong { grid-template-columns: 76px 1fr 96px; min-height: 54px; } .pheu-giua { height: 54px; } .pheu-trai { padding-left: 10px; font-size: 11px; } .pheu-phai { padding-right: 10px; font-size: 11px; } .pheu-dong.pheu-ranh-con::after { left: 76px; } } /* --- So sánh phễu giữa các phòng (Lưới phễu & Bảng so sánh) --- */ .pheu-ss-khung { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E2E8F0; } .pheu-ss-dau { margin-bottom: 12px; } .pheu-ss-tieu-de { margin: 0; font-size: 14px; font-weight: 700; color: #0F172A; } .pheu-nho-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .pheu-nho-the { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); } .pheu-nho-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .pheu-nho-dau-trai { display: flex; align-items: center; gap: 2px; } .pheu-nho-ten { font-size: 14px; font-weight: 700; color: #0F172A; } .pheu-nho-phu { font-size: 12px; font-weight: 500; color: #64748B; } .pheu-nho-huy-hieu { font-size: 11px; font-weight: 600; color: #0D6EFD; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .pheu-nho-dong { display: grid; grid-template-columns: 74px 1fr; align-items: center; height: 42px; } .pheu-nho-nhan { position: relative; font-size: 11.5px; color: #334155; font-weight: 500; display: flex; align-items: center; } .pheu-nho-nhan::after { content: ""; flex: 1; border-bottom: 1px dashed #CBD5E1; margin: 0 6px; } .pheu-nho-nhan-chu { white-space: nowrap; } .pheu-nho-thap { height: 42px; padding: 1.5px 0; display: flex; align-items: stretch; justify-content: center; } .pheu-nho-so { font-size: 12.5px; font-weight: 700; line-height: 1.1; } .pheu-nho-pct { font-size: 10.5px; font-weight: 500; opacity: .95; line-height: 1.1; margin-top: 1px; } .pheu-nho-the .tip-noi { top: calc(100% + 6px); bottom: auto; width: 250px; } .pheu-ss-bang-boc { overflow-x: auto; border: 1px solid #CBD5E1; border-radius: 8px; } .pheu-ss-bang { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; } .pheu-ss-bang th, .pheu-ss-bang td { padding: 7px 10px; border-bottom: 1px solid #E2E8F0; text-align: center; white-space: nowrap; } .pheu-ss-bang thead th { background: #F1F5F9; color: #1E293B; font-weight: 700; font-size: 12px; border-bottom: 1px solid #CBD5E1; } .pheu-ss-bang th.o-trai, .pheu-ss-bang td.o-trai { text-align: left; } .pheu-ss-bang .khoi-dau { border-left: 1.5px solid #CBD5E1; } .pheu-ss-bang tbody tr:hover { background: #F8FAFC; } .pheu-ss-bang tr.pheu-ss-tong td { background: #DCE8F5; font-weight: 700; color: #002B4E; border-top: 1.5px solid #94A3B8; } /* --- Phản hồi hệ thống (nút ghim bên phải + popup giữa màn hình + quản trị) --- */ .ph-nut-noi { position: fixed; right: 22px; bottom: 86px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 1.5px solid #155EEF; border-radius: 999px; background: #FFFFFF; color: #155EEF; cursor: pointer; font: 600 13.5px inherit; font-family: inherit; box-shadow: 0 8px 22px rgba(21, 94, 239, .20), 0 2px 6px rgba(15, 23, 42, .08); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .ph-nut-noi:hover { transform: translateY(-2px); background: #F5F8FF; box-shadow: 0 12px 28px rgba(21, 94, 239, .28); } .ph-ico-noi { display: inline-flex; line-height: 0; } .ph-ico-noi p { margin: 0; line-height: 0; } .ph-badge-noi { background: #F04438; color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; line-height: 1.4; } @media (max-width: 640px) { .ph-nut-noi { right: 14px; bottom: 74px; padding: 9px 12px; } } .ph-badge-menu { margin-left: auto; background: #F04438; color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.4; } .app-shell.thu-gon .ph-badge-menu { position: absolute; top: 4px; right: 4px; padding: 0 5px; font-size: 10px; } .ph-khung { display: none; position: fixed; inset: 0; z-index: 1200; } .ph-khung.mo { display: flex; align-items: center; justify-content: center; } .ph-nen { position: fixed; inset: 0; background: rgba(11, 28, 48, .52); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: ph-nen-hien .16s ease-out; } @keyframes ph-nen-hien { from { opacity: 0; } to { opacity: 1; } } @keyframes ph-hien { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ph-hop { position: relative; z-index: 1201; width: min(460px, calc(100vw - 32px)); background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 12px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(6, 24, 44, .32), 0 4px 12px rgba(6, 24, 44, .12); animation: ph-hien .18s ease-out; } .ph-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ph-dau-trai { display: flex; align-items: center; gap: 8px; } .ph-ico-sao { display: inline-flex; line-height: 0; } .ph-ico-sao p { margin: 0; line-height: 0; } .ph-tieu-de { font-size: 16px; font-weight: 700; color: #155EEF; letter-spacing: -.1px; } .ph-dong { border: 0; background: transparent; color: #1E293B; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; } .ph-dong:hover { background: #F1F5F9; color: #0F172A; } .ph-mo-ta { font-size: 13.5px; line-height: 1.5; color: #1E293B; margin: 10px 0 14px; } .ph-than { display: flex; flex-direction: column; gap: 12px; } .ph-chon .Select-control { border-radius: 6px !important; border-color: #D0D5DD !important; min-height: 38px !important; } .ph-chon.is-focused > .Select-control { border-color: #155EEF !important; box-shadow: 0 0 0 2px rgba(21, 94, 239, .18) !important; } .ph-o-nhap { width: 100%; height: 112px; padding: 10px 12px; border: 1px solid #D0D5DD; border-radius: 6px; font: inherit; font-size: 13.5px; color: #0F172A; resize: vertical; background: #FFFFFF; } .ph-o-nhap::placeholder { color: #98A2B3; } .ph-o-nhap:focus { outline: none; border-color: #155EEF; box-shadow: 0 0 0 2px rgba(21, 94, 239, .18); } .ph-msg:not(:empty) { margin-top: 10px; } .ph-chan { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ph-link-admin { font-size: 13px; font-weight: 600; color: #155EEF; text-decoration: none; } .ph-link-admin:hover { text-decoration: underline; } .ph-nut-gui { padding: 9px 18px; border-radius: 6px; border: 1px solid #155EEF; background: #155EEF; color: #FFFFFF; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; } .ph-nut-gui:hover:not(:disabled) { background: #004EEB; border-color: #004EEB; } .ph-nut-gui:disabled { background: #EAECEF; border-color: #D5D9E0; color: #98A2B3; cursor: not-allowed; opacity: 1; } .ph-ct-khung { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 6px; } .ph-ct-noidung { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #CBD5E1; white-space: pre-wrap; color: #0F172A; font-weight: 500; } /* ------------------------------------------------ Bản tin Zalo: ô chọn nhiều phòng trong hộp thêm / sửa người nhận */ .bt-o-phong { margin-top: 14px; } #bt-modal .modal-than:has(.dash-dropdown[data-state="open"]), #btd-modal .modal-than:has(.dash-dropdown[data-state="open"]) { padding-bottom: 230px; } /* chừa chỗ cho danh sách xổ xuống, hộp thoại cắt nội dung tràn */ #bt-modal .modal-hop, #btd-modal .modal-hop { top: 9vh; transform: translateX(-50%); } /* neo đầu hộp để ô Phòng không nhảy khi hộp dài ra */ /* ---------- Phòng Online: 5 thẻ chỉ số ---------- */ .kpi-row.kpi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1280px) { .kpi-row.kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 767px) { .kpi-row.kpi-5 { grid-template-columns: 1fr 1fr; } }