/** * @nhom : Styles * @chucnang : Lớp giao diện "modern report" — hero sóng, KPI card, chart card, badge, bảng * @lienquan : theme-preview.html, theme-modern.js, styles/common.css * @alias : theme-modern, tm, modern-dashboard * * CÁCH DÙNG: thêm class "tm" vào . Không có class "tm" thì file này không * tác động tới bất kỳ trang cũ nào — an toàn khi nạp chung với common.css. * * Bảng màu giữ đúng thương hiệu hệ thống (xanh #185FA5) thay vì blue của Tailwind, * điểm nhấn cam #F97316 học từ mẫu. Muốn đổi tông chỉ sửa khối biến bên dưới. */ /* ============================================================ TOKEN — dùng chung cho .tm (component mới) và .tm-skin (khoác lên markup cũ, xem styles/theme-modern-skin.css). Sửa màu ở đây là đổi cả hai, khỏi lệch tông giữa trang mới và trang cũ. ============================================================ */ .tm, .tm-skin { /* Thang xanh dựng từ màu thương hiệu --blue: #185FA5 */ --tm-navy-900: #0C2E56; --tm-navy-800: #124A87; --tm-navy-600: #185FA5; --tm-navy-500: #3B82C4; --tm-navy-100: #DBEAFB; --tm-navy-50: #EFF6FF; /* Cam điểm nhấn — dùng tiết chế, chỉ cho số liệu nổi bật và trạng thái vượt */ --tm-orange-700: #C2410C; --tm-orange-600: #EA580C; --tm-orange-500: #F97316; --tm-orange-100: #FFEDD5; --tm-orange-50: #FFF7ED; /* Nền và chữ */ --tm-surface: #F8FAFC; --tm-card: #FFFFFF; --tm-hairline: #F1F5F9; --tm-line: #E2E8F0; --tm-txt: #1E293B; --tm-txt2: #475569; --tm-txt3: #94A3B8; /* Bo góc rộng + bóng nhiều lớp — đây là thứ tạo cảm giác "thoáng" của mẫu */ --tm-radius: 16px; --tm-radius-sm: 10px; --tm-shadow: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 10px 25px -5px rgba(15, 23, 42, .07); --tm-shadow-lg: 0 10px 25px rgba(15, 23, 42, .12); /* Be Vietnam Pro có đầy đủ dấu tiếng Việt và đủ weight để không phải giả đậm. */ --tm-font-display: var(--font-sans, 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif); } .tm { background: var(--tm-surface); color: var(--tm-txt); font-family: var(--font-main, 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: 0; } /* ------------------------------------------------------------ Vô hiệu hóa lớp viền 2px xám của common.css bên trong .tm. Viền dày là lý do chính khiến giao diện cũ trông nặng hơn mẫu. Selector 2 cấp nên thắng được các rule !important gốc. ------------------------------------------------------------ */ .tm .card, .tm .panel, .tm .box, .tm .stat, .tm .kpi, .tm .metric, .tm .table-wrap { border-width: 1px !important; border-color: var(--tm-hairline) !important; } .tm table, .tm th, .tm td { border-width: 0 !important; border-color: var(--tm-line) !important; } .tm input, .tm select, .tm textarea { border-width: 1px !important; border-color: #CBD5E1 !important; } .tm input:focus, .tm select:focus, .tm textarea:focus { border-width: 1px !important; border-color: var(--tm-orange-500) !important; } /* ============================================================ HERO — dải xanh đậm + đốm màu mờ + đường lượn sóng ============================================================ */ .tm-hero { position: relative; overflow: hidden; padding: 48px 0 64px; background: var(--tm-navy-900); color: #fff; } /* Hai đốm màu blur tạo chiều sâu cho nền phẳng */ .tm-hero-blobs { position: absolute; inset: 0; pointer-events: none; opacity: .3; } .tm-hero-blobs span { position: absolute; border-radius: 9999px; filter: blur(64px); mix-blend-mode: multiply; } .tm-hero-blobs span:nth-child(1) { top: -80px; left: -80px; width: 384px; height: 384px; background: var(--tm-navy-600); opacity: .5; } .tm-hero-blobs span:nth-child(2) { top: 40px; right: -80px; width: 320px; height: 320px; background: var(--tm-orange-500); opacity: .4; } .tm-hero-inner { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; } .tm-hero-kicker { margin-bottom: 16px; color: #FDBA74; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .tm-hero-title { margin-bottom: 16px; font-family: var(--tm-font-display); font-size: clamp(28px, 5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); } .tm-hero-title span { color: var(--tm-orange-500); } /* Gạch ngang ngắn dưới tiêu đề — chi tiết nhỏ nhưng làm bố cục "có nhịp" */ .tm-hero-rule { width: 96px; height: 4px; margin-bottom: 24px; border-radius: 9999px; background: var(--tm-orange-500); } .tm-hero-sub { max-width: 720px; color: var(--tm-navy-100); font-size: clamp(15px, 2vw, 19px); font-weight: 500; line-height: 1.6; } /* Đường lượn sóng chuyển từ hero xuống nền trang */ .tm-hero-wave { position: absolute; bottom: 0; left: 0; z-index: 20; display: block; width: 100%; height: 60px; transform: translateY(1px); } .tm-hero-wave path { fill: var(--tm-surface); } @media (max-width: 768px) { .tm-hero { padding: 32px 0 44px; } .tm-hero-wave { height: 36px; } } /* ============================================================ LAYOUT ============================================================ */ .tm-main { position: relative; z-index: 30; max-width: 1280px; margin: -24px auto 0; padding: 0 24px 48px; } .tm-section { margin-bottom: 40px; } .tm-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--tm-font-display); font-size: 22px; font-weight: 700; color: var(--tm-navy-900); } .tm-section-title .tm-ico { color: var(--tm-orange-500); } .tm-grid { display: grid; gap: 24px; } .tm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .tm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } /* Thanh công cụ nổi trên nền, nằm giữa hero và phần nội dung */ .tm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; padding: 14px 20px; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-radius: var(--tm-radius-sm); box-shadow: var(--tm-shadow); } .tm-toolbar label { display: inline-flex; align-items: center; gap: 10px; color: var(--tm-txt2); font-size: 13px; font-weight: 600; } .tm-toolbar select { padding: 8px 12px; background: #fff; border: 1px solid #CBD5E1; border-radius: 8px; color: var(--tm-navy-900); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; outline: none; } .tm-toolbar-note { color: var(--tm-txt3); font-size: 12px; } /* Trạng thái nạp / lỗi */ .tm-state { padding: 48px 24px; color: var(--tm-txt3); font-size: 14px; text-align: center; } .tm-state--error { color: #B91C1C; } /* ============================================================ KPI CARD — số lớn + icon trong vòng tròn nhạt + viền đáy màu ============================================================ */ .tm-kpi { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-bottom: 4px solid var(--tm-navy-600); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); transition: transform .3s ease, box-shadow .3s ease; } .tm-kpi:hover { transform: translateY(-4px); box-shadow: var(--tm-shadow-lg); } .tm-kpi-label { margin-bottom: 4px; color: #64748B; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .tm-kpi-value { font-family: var(--tm-font-display); font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--tm-navy-900); } .tm-kpi-sub { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--tm-navy-600); } .tm-kpi-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: var(--tm-navy-50); color: var(--tm-navy-600); } .tm-kpi-icon svg { width: 26px; height: 26px; } /* Biến thể cam cho chỉ số cần làm nổi */ .tm-kpi--accent { border-bottom-color: var(--tm-orange-500); } .tm-kpi--accent .tm-kpi-value { color: var(--tm-orange-600); } .tm-kpi--accent .tm-kpi-sub { color: var(--tm-orange-500); } .tm-kpi--accent .tm-kpi-icon { background: var(--tm-orange-50); color: var(--tm-orange-500); } .tm-kpi--muted { border-bottom-color: var(--tm-navy-900); } .tm-kpi--muted .tm-kpi-sub { color: #64748B; } .tm-kpi--muted .tm-kpi-icon { background: var(--tm-navy-100); color: var(--tm-navy-900); } /* ============================================================ CARD chung — dùng cho khối biểu đồ và nội dung ============================================================ */ .tm-card { padding: 28px; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); } .tm-card--flush { padding: 0; overflow: hidden; } .tm-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } /* Ô vuông bo tròn chứa icon — thay cho việc để icon trần cạnh chữ */ .tm-card-chip { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tm-radius-sm); background: var(--tm-navy-100); color: var(--tm-navy-600); } .tm-card-chip svg { width: 20px; height: 20px; } .tm-card-chip--accent { background: var(--tm-orange-100); color: var(--tm-orange-600); } .tm-card-title { font-family: var(--tm-font-display); font-size: 18px; font-weight: 700; color: var(--tm-navy-900); } /* Khung canvas cố định chiều cao — bắt buộc khi dùng maintainAspectRatio:false */ .tm-chart { position: relative; width: 100%; height: 288px; } /* ============================================================ FEATURE CARD — khối nội dung có icon chìm cỡ lớn ở góc ============================================================ */ .tm-feature { position: relative; overflow: hidden; padding: 30px; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-top: 4px solid var(--tm-navy-500); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); } .tm-feature--accent { border-top-color: var(--tm-orange-500); } .tm-feature-mark { position: absolute; top: -22px; right: -22px; color: var(--tm-navy-50); pointer-events: none; } .tm-feature-mark svg { width: 150px; height: 150px; } .tm-feature--accent .tm-feature-mark { color: var(--tm-orange-50); } .tm-feature-body { position: relative; z-index: 10; } .tm-feature-title { margin-bottom: 18px; font-family: var(--tm-font-display); font-size: 22px; font-weight: 700; color: var(--tm-navy-800); } .tm-feature--accent .tm-feature-title { color: var(--tm-orange-600); } .tm-feature-list { display: grid; gap: 16px; list-style: none; } .tm-feature-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--tm-txt2); line-height: 1.6; } .tm-feature-list .tm-ico { flex-shrink: 0; margin-top: 3px; color: var(--tm-orange-500); } .tm-feature--accent .tm-feature-list .tm-ico { color: var(--tm-navy-600); } .tm-feature-list strong { color: var(--tm-txt); font-weight: 700; } /* ============================================================ BADGE trạng thái — bề rộng cố định để cột không nhảy ============================================================ */ .tm-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 128px; padding: 5px 12px; border: 1px solid transparent; border-radius: 9999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .tm-badge svg { width: 13px; height: 13px; } .tm-badge--up { background: var(--tm-orange-100); border-color: #FED7AA; color: var(--tm-orange-700); } .tm-badge--ok { background: var(--tm-navy-100); border-color: #BFDBFE; color: var(--tm-navy-800); } .tm-badge--doing { background: #F1F5F9; border-color: var(--tm-line); color: #64748B; } /* ============================================================ BẢNG — đầu bảng xanh đậm, viền ngang mảnh, hover xanh nhạt. Thay cho DataTables; điều khiển bởi TM.table() trong theme-modern.js. ============================================================ */ .tm-table-panel { overflow: hidden; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); } .tm-table-banner { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--tm-navy-900); border-bottom: 4px solid var(--tm-orange-500); } .tm-table-banner .tm-card-chip { background: rgba(255, 255, 255, .16); color: #fff; } .tm-table-banner h3 { font-family: var(--tm-font-display); font-size: 18px; font-weight: 700; color: #fff; } .tm-table-banner p { margin-top: 2px; font-size: 12.5px; color: var(--tm-navy-100); } .tm-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 24px 6px; } .tm-table-toolbar label { display: inline-flex; align-items: center; gap: 8px; color: var(--tm-txt2); font-size: 13px; } .tm-table-toolbar select, .tm-table-toolbar input { padding: 7px 12px; background: #fff; border: 1px solid #CBD5E1; border-radius: 8px; color: var(--tm-txt); font: inherit; font-size: 13px; outline: none; } .tm-table-toolbar input { min-width: 240px; } .tm-table-toolbar input:focus { border-color: var(--tm-orange-500); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); } .tm-table-scroll { overflow-x: auto; padding: 12px 24px 0; } .tm-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; } .tm-table th { padding: 14px 10px; background: var(--tm-navy-900); color: #fff; font-family: var(--tm-font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; user-select: none; } .tm-table th:first-child { border-radius: 8px 0 0 8px; } .tm-table th:last-child { border-radius: 0 8px 8px 0; } .tm-table th[data-sortable] { cursor: pointer; } .tm-table th[data-sortable]:hover { background: var(--tm-navy-800); } /* Mũi tên sắp xếp: mờ khi chưa chọn, rõ khi đang sắp theo cột đó */ .tm-table th .tm-sort { display: inline-block; margin-left: 6px; opacity: .35; font-size: 10px; } .tm-table th[aria-sort] .tm-sort { opacity: 1; color: #FDBA74; } .tm-table td { padding: 13px 10px; border-bottom: 1px solid var(--tm-hairline) !important; color: var(--tm-txt2); vertical-align: middle; } .tm-table tbody tr:hover td { background: var(--tm-navy-50); } .tm-table tbody tr:last-child td { border-bottom: 0 !important; } .tm-td-num { text-align: center; font-weight: 700; color: var(--tm-navy-900); } .tm-td-accent { color: var(--tm-orange-600); font-weight: 600; } .tm-td-main { color: var(--tm-txt); font-weight: 500; min-width: 300px; white-space: normal; } .tm-td-empty { padding: 40px 10px; text-align: center; color: var(--tm-txt3); } .tm-table-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 24px 20px; color: var(--tm-txt2); font-size: 13px; } .tm-pager { display: flex; align-items: center; gap: 6px; } .tm-pager button { min-width: 34px; height: 34px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--tm-txt2); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease; } .tm-pager button:hover:not(:disabled):not([aria-current]) { background: var(--tm-navy-100); border-color: var(--tm-navy-500); color: var(--tm-navy-800); } .tm-pager button[aria-current] { background: var(--tm-orange-600); border-color: var(--tm-orange-600); color: #fff; font-weight: 700; } .tm-pager button:disabled { opacity: .4; cursor: default; } .tm-pager .tm-pager-gap { color: var(--tm-txt3); padding: 0 2px; } /* ============================================================ TASK CARD — khối nhiệm vụ đánh số ============================================================ */ .tm-task { display: flex; gap: 20px; padding: 20px; background: rgba(239, 246, 255, .5); border: 1px solid var(--tm-navy-100); border-radius: 12px; transition: border-color .2s ease; } .tm-task:hover { border-color: var(--tm-navy-500); } .tm-task-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: 2px; border-radius: 9999px; background: var(--tm-navy-600); box-shadow: 0 4px 8px rgba(24, 95, 165, .25); color: #fff; font-family: var(--tm-font-display); font-size: 20px; font-weight: 700; } .tm-task h4 { font-family: var(--tm-font-display); font-size: 17px; font-weight: 700; color: var(--tm-navy-900); } .tm-task p { margin-top: 8px; color: var(--tm-txt2); line-height: 1.65; } /* ============================================================ PANEL kết luận + FOOTER ============================================================ */ .tm-closing { position: relative; overflow: hidden; padding: 36px 40px; background: var(--tm-card); border: 1px solid var(--tm-hairline); border-top: 8px solid var(--tm-navy-600); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); } .tm-closing-deco { position: absolute; top: 0; right: 0; width: 256px; height: 256px; border-radius: 0 0 0 100%; background: var(--tm-orange-50); pointer-events: none; } .tm-closing-head { position: relative; z-index: 1; margin-bottom: 32px; text-align: center; } .tm-closing-head p { margin-bottom: 8px; color: var(--tm-orange-500); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .tm-closing-head h3 { font-family: var(--tm-font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--tm-navy-900); text-transform: uppercase; } .tm-footer { padding: 28px 24px; background: var(--tm-navy-900); color: var(--tm-navy-100); font-size: 13px; text-align: center; } /* ============================================================ TIỆN ÍCH ============================================================ */ .tm-ico { display: inline-flex; flex-shrink: 0; } .tm-ico svg { width: 18px; height: 18px; } .tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 640px) { .tm-main { padding: 0 16px 32px; } .tm-card, .tm-feature { padding: 20px; } .tm-closing { padding: 24px 20px; } .tm-table-scroll, .tm-table-toolbar, .tm-table-foot { padding-left: 16px; padding-right: 16px; } .tm-table-toolbar input { min-width: 0; width: 100%; } } /* In ấn: bỏ bóng và nền tối để không ngốn mực */ @media print { .tm { background: #fff; } .tm-hero { padding: 24px 0; background: #fff; color: var(--tm-navy-900); } .tm-hero-blobs, .tm-hero-wave, .tm-closing-deco { display: none; } .tm-hero-title { text-shadow: none; } .tm-hero-sub { color: var(--tm-txt2); } .tm-kpi, .tm-card, .tm-feature, .tm-closing, .tm-table-panel { box-shadow: none; border: 1px solid #CBD5E1; break-inside: avoid; } .tm-table-toolbar, .tm-table-foot { display: none; } }