/* ============================================================================ BDHVS DESIGN SYSTEM — "Civic Trust" v1.0.0 ---------------------------------------------------------------------------- Lớp thiết kế thống nhất cho toàn bộ cổng Công Dân Số Tuyên Quang. Nạp CUỐI CÙNG trong để chuẩn hóa mọi trang mà không sửa markup, không đổi URL, không đổi nhãn điều hướng (Redesign - Preserve). Direction: trust-first public sector - VARIANCE 4 / MOTION 3 / DENSITY 5 - 1 màu chủ đạo công vụ (xanh institution), 1 họ xám (slate), mực off-black - Bo góc thống nhất: thẻ 16px · điều khiển 10px · chip/badge dạng pill - Blur chỉ dùng cho phần tử cố định (nav/overlay) — không blur nội dung cuộn - Chuyển động 180–240ms, bezier(0.16,1,0.3,1), tôn trọng prefers-reduced-motion - Font: Be Vietnam Pro (hỗ trợ tiếng Việt đầy đủ), số liệu dùng tabular-nums ========================================================================== */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------------------------- */ :root { /* Màu chủ đạo công vụ — đủ tương phản AA trên nền trắng khi dùng làm chữ */ --ds-primary: #1d4ed8; --ds-primary-strong: #1e40af; --ds-primary-soft: rgba(37, 99, 235, 0.08); --ds-primary-softer: rgba(37, 99, 235, 0.05); --ds-on-primary: #ffffff; /* Họ trung tính slate duy nhất */ --ds-ink: #0f172a; --ds-ink-soft: #334155; --ds-muted: #556274; --ds-faint: #94a3b8; --ds-canvas: #f4f6f9; --ds-surface: #ffffff; --ds-surface-sunken: #f8fafc; --ds-hairline: #e2e8f0; /* Trạng thái */ --ds-success: #15803d; --ds-warning: #b45309; --ds-danger: #dc2626; --ds-info: #0369a1; /* Hình học */ --ds-radius-card: 16px; --ds-radius-control: 10px; --ds-radius-chip: 999px; --ds-border-width: 1px; /* Đổ bóng nhuộm slate — không bóng đen thuần */ --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-2: 0 4px 14px rgba(15, 23, 42, 0.07); --ds-shadow-3: 0 16px 36px rgba(15, 23, 42, 0.10); /* Chuyển động */ --ds-ease: cubic-bezier(0.16, 1, 0.3, 1); --ds-speed: 200ms; /* Typography */ --ds-font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } [data-theme="dark"] { --ds-primary: #60a5fa; --ds-primary-strong: #93c5fd; --ds-primary-soft: rgba(96, 165, 250, 0.12); --ds-primary-softer: rgba(96, 165, 250, 0.07); --ds-on-primary: #0b1220; --ds-ink: #f1f5f9; --ds-ink-soft: #cbd5e1; --ds-muted: #94a3b8; --ds-faint: #64748b; --ds-canvas: #0b1220; --ds-surface: #151e31; --ds-surface-sunken: #101828; --ds-hairline: #293548; --ds-success: #4ade80; --ds-warning: #fbbf24; --ds-danger: #f87171; --ds-info: #38bdf8; --ds-shadow-1: 0 1px 2px rgba(2, 6, 23, 0.5); --ds-shadow-2: 0 4px 14px rgba(2, 6, 23, 0.45); --ds-shadow-3: 0 16px 36px rgba(2, 6, 23, 0.55); } /* --------------------------------------------------------------------------- 2. NỀN TẢNG CHỮ — Be Vietnam Pro trước tiên, Inter chỉ là dự phòng --------------------------------------------------------------------------- */ body, [data-theme="light"] body, [data-theme="dark"] body { font-family: var(--ds-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ds-font-sans); letter-spacing: -0.01em; line-height: 1.25; } p { line-height: 1.65; } /* Số liệu bảng, thống kê, mã định danh luôn căn đều */ .table td, .table th, .portal-hero-stat strong, .bdhv-stat-value, [data-tabular] { font-variant-numeric: tabular-nums; } /* Tiêu đề viết hoa từng từ đầu — chấm dứt chữ IN HOA toàn câu */ .glass-header, .pill-thead tr th, .header-title-pill h1, .header-status-pill, .bdhv-kicker { text-transform: none !important; letter-spacing: 0 !important; } .glass-header { font-weight: 700 !important; } ::selection { background: rgba(37, 99, 235, 0.18); } kbd { padding: 2px 6px; border: 1px solid var(--ds-hairline); border-bottom-width: 2px; border-radius: 6px; background: var(--ds-surface-sunken); color: var(--ds-ink); font-size: 0.85em; } /* --------------------------------------------------------------------------- 3. TẬP TRUNG BẰNG NHÌN (accessibility) — vòng focus rõ ràng, đồng bộ accent --------------------------------------------------------------------------- */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: 4px; } .form-control:focus-visible, .form-select:focus-visible { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-soft); } /* --------------------------------------------------------------------------- 4. NÚT — cao độ đồng bộ, cảm giác bấm vật lý, chữ luôn đọc được --------------------------------------------------------------------------- */ .btn { border-radius: var(--ds-radius-control); font-weight: 600; transition: transform var(--ds-speed) var(--ds-ease), box-shadow var(--ds-speed) var(--ds-ease), background-color var(--ds-speed) var(--ds-ease), color var(--ds-speed) var(--ds-ease); } .btn:active { transform: translateY(1px) scale(0.98); } .btn-primary { background-color: var(--ds-primary); border-color: var(--ds-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--ds-primary-strong); border-color: var(--ds-primary-strong); } .btn-outline-primary { color: var(--ds-primary); border-color: var(--ds-primary); } .btn-outline-primary:hover { background-color: var(--ds-primary); border-color: var(--ds-primary); } /* --------------------------------------------------------------------------- 5. THẺ / PANEL — một hệ bo góc, viền hairline, bóng nhuộm màu nền --------------------------------------------------------------------------- */ .card, .bdhv-panel, .table-container-pill { border-radius: var(--ds-radius-card); } .card { border: var(--ds-border-width) solid var(--ds-hairline); box-shadow: var(--ds-shadow-1); } .bdhv-panel, .table-container-pill { border: var(--ds-border-width) solid var(--ds-hairline); box-shadow: var(--ds-shadow-2); } .modal-content { border-radius: var(--ds-radius-card); border: var(--ds-border-width) solid var(--ds-hairline); } .dropdown-menu { border-radius: 14px; border: var(--ds-border-width) solid var(--ds-hairline); box-shadow: var(--ds-shadow-3); } /* --------------------------------------------------------------------------- 6. BIỂU MẪU — label phía trên, lỗi phía dưới, placeholder đủ tương phản --------------------------------------------------------------------------- */ .form-label { font-weight: 600; color: var(--ds-ink-soft); margin-bottom: 6px; } .form-control, .form-select { border-radius: var(--ds-radius-control); border-color: var(--ds-hairline); transition: border-color var(--ds-speed) var(--ds-ease), box-shadow var(--ds-speed) var(--ds-ease); } .form-control::placeholder { color: var(--ds-faint); opacity: 1; } .form-text, .invalid-feedback { font-size: 0.82rem; } .invalid-feedback { color: var(--ds-danger); } /* --------------------------------------------------------------------------- 7. BẢNG — nền đặc, bỏ blur trên nội dung cuộn (hiệu năng GPU trên di động) --------------------------------------------------------------------------- */ .pill-thead { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--ds-surface-sunken) !important; border-bottom: 1px solid var(--ds-hairline) !important; } .pill-thead tr th { color: var(--ds-muted) !important; font-weight: 700 !important; font-size: 0.78rem !important; letter-spacing: 0.02em !important; } [data-theme="dark"] .pill-thead tr th { color: var(--ds-muted) !important; } .table > :not(caption) > * > * { padding-block: 12px; } .table tbody tr { transition: background-color var(--ds-speed) var(--ds-ease); } .table tbody tr:hover { background-color: var(--ds-primary-softer); } /* Vùng bảng tổng: nền phẳng thay khối bóng kính dày */ .table-container-pill { background: var(--ds-surface); box-shadow: var(--ds-shadow-1) !important; padding: 6px; } /* --------------------------------------------------------------------------- 8. THANH ĐIỀU HƯỚNG / HEADER — chỉ phần tử cố định mới dùng blur --------------------------------------------------------------------------- */ .breadcrumb-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--ds-surface) !important; border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-radius-chip) !important; box-shadow: var(--ds-shadow-1); } .header-status-pill, .header-title-pill { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ds-surface); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-1); } .header-title-pill h1 { font-weight: 700; } /* --------------------------------------------------------------------------- 9. BADGE / CHIP — pill thống nhất, trạng thái theo token --------------------------------------------------------------------------- */ .badge { border-radius: var(--ds-radius-chip); font-weight: 600; padding: 4px 10px; } .badge.bg-success { background-color: var(--ds-success) !important; } .badge.bg-danger { background-color: var(--ds-danger) !important; } .badge.bg-warning { background-color: var(--ds-warning) !important; } .badge.bg-info { background-color: var(--ds-info) !important; } .alert { border-radius: 14px; border: var(--ds-border-width) solid var(--ds-hairline); } .alert-primary { border-left: 3px solid var(--ds-primary); } .alert-success { border-left: 3px solid var(--ds-success); } .alert-danger { border-left: 3px solid var(--ds-danger); } .alert-warning { border-left: 3px solid var(--ds-warning); } /* --------------------------------------------------------------------------- 10. LIQUID GLASS CŨ — hạ nhiệt xuống bề mặt phẳng tin cậy, giữ nhận diện xanh --------------------------------------------------------------------------- */ .header-selector-card { border-radius: 14px; box-shadow: var(--ds-shadow-1); } .nav-link-top { border-radius: var(--ds-radius-chip); } .nav-link-top.active { background: var(--ds-primary) !important; box-shadow: var(--ds-shadow-1) !important; } .mobile-bottom-nav { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); box-shadow: 0 -1px 0 var(--ds-hairline); } /* --------------------------------------------------------------------------- 11. SCROLLBAR + TIỆN ÍCH NHỎ --------------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--ds-hairline) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ds-hairline); border-radius: var(--ds-radius-chip); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ds-faint); } .text-balance { text-wrap: balance; } /* Skeleton shimmer dùng cho trạng thái tải (thay spinner tròn) */ .ds-skeleton { position: relative; overflow: hidden; background: var(--ds-surface-sunken); border-radius: 8px; min-height: 1em; } .ds-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--ds-surface) 65%, transparent), transparent ); animation: ds-shimmer 1.4s infinite; } @keyframes ds-shimmer { 100% { transform: translateX(100%); } } /* --------------------------------------------------------------------------- 12. HIỆU CHỈNH BIẾN LEGACY — hiệu màu cũ sang chuẩn công vụ (style.css khai báo :root, [data-theme="light"]; khớp độ đặc hiệu để thắng nhờ thứ tự nạp sau cùng) --------------------------------------------------------------------------- */ :root, :root[data-theme="light"], [data-theme="light"] { --primary: #1d4ed8; --primary-light: #4f80e2; --primary-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); --shadow-primary: 0 10px 20px rgba(29, 78, 216, 0.16); --text-muted: #556274; /* Đồng bộ Bootstrap 5.3 về cùng họ xanh */ --bs-primary: #1d4ed8; --bs-primary-rgb: 29, 78, 216; --bs-link-color: #1d4ed8; --bs-link-color-rgb: 29, 78, 216; --bs-link-hover-color: #1e40af; } [data-theme="dark"] { --shadow-primary: 0 10px 20px rgba(96, 165, 250, 0.12); } /* Header kính cũ nằm trong luồng cuộn → nền đặc thay blur (hiệu năng di động) */ .glass-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--ds-surface-sunken) !important; border-bottom: 1px solid var(--ds-hairline) !important; } /* --------------------------------------------------------------------------- 13. GIẢM CHUYỂN ĐỘNG — bắt buộc với mọi hiệu ứng ở mức MOTION 3+ --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }