:root{--bg:#f5f7fb;--card:#fff;--text:#1f2a44;--muted:#7d879c;--primary:#5d5fef;--shadow:0 10px 30px rgba(24,39,75,.08);} 
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app-shell{display:flex;min-height:100vh}.sidebar{width:280px;background:#1f2740;padding:16px 18px;position:sticky;top:0;height:100vh;overflow:auto}.content-wrap{flex:1;padding:24px}
.shadow-soft{box-shadow:var(--shadow)!important}.brand-box,.topbar,.card,.stat-card,.hero-card{border-radius:22px}.brand-box{background:linear-gradient(135deg,#2a3558,#1b2239)}
.side-nav .nav-link{color:#d7dcee;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px}.side-nav .nav-link.active,.side-nav .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.btn-gradient{background:linear-gradient(135deg,#5d5fef,#7a3df0);border:none;color:#fff;padding:.75rem 1.1rem;border-radius:14px}.btn-gradient:hover{color:#fff;opacity:.95}
.text-link{cursor:pointer}.modal-body-scroll{max-height:70vh;overflow:auto}.filter-card .form-label{font-weight:600;font-size:.9rem}.table-modern thead th{font-size:.85rem;color:#667085;background:#f8faff}.table-modern tbody td{vertical-align:middle}
.hero-card{background:linear-gradient(135deg,#ffffff,#eef2ff);padding:28px 30px;box-shadow:var(--shadow)}.eyebrow{display:inline-block;background:#eef2ff;color:#4f46e5;font-weight:700;border-radius:999px;padding:.35rem .7rem;font-size:.78rem}.hero-stat{background:#fff;border-radius:18px;padding:16px 18px;min-width:260px;box-shadow:var(--shadow)}.hero-stat-label{font-size:.86rem;color:var(--muted)}.hero-stat-value{font-size:1.7rem;font-weight:800;color:#111827}
.stat-card{background:#fff;padding:22px;box-shadow:var(--shadow)}.stat-label{color:var(--muted);font-weight:600;margin-bottom:8px}.stat-value{font-size:2rem;font-weight:800}.stat-note{font-size:.85rem;color:var(--muted)}
.metric-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}.soft-progress{height:10px;border-radius:999px;background:#edf2f7}.soft-progress .progress-bar{background:linear-gradient(135deg,#5d5fef,#7a3df0)}.bg-soft-primary{background:#eef2ff!important;color:#4f46e5!important}
.timeline-list{display:flex;flex-direction:column;gap:14px}.timeline-item{display:flex;gap:12px;align-items:flex-start}.timeline-dot{width:12px;height:12px;border-radius:50%;background:#5d5fef;box-shadow:0 0 0 5px rgba(93,95,239,.12);margin-top:6px}.xsmall{font-size:.75rem}
@media (max-width: 991px){.app-shell{display:block}.sidebar{width:auto;height:auto;position:relative}.content-wrap{padding:16px}.hero-stat{min-width:100%}}
body{
	background: #f3f7fb !important;
}

.dash-page{
	padding: 8px 0 18px;
}

/* Header lớn */
.dash-header-card{
	background: linear-gradient(135deg, #eef6ff 0%, #dcecff 48%, #cfe4ff 100%);
	border: 1px solid #d9e7f5;
	border-radius: 28px;
	padding: 32px;
	box-shadow: 0 14px 34px rgba(15,23,42,.07);
}

.dash-chip{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(37,99,235,.10);
	color: #2563eb;
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 14px;
}

.dash-title{
	font-size: 42px;
	line-height: 1.15;
	font-weight: 900;
	color: #0f172a;
	margin-bottom: 12px;
}

.dash-subtitle{
	color: #475569;
	font-size: 16px;
	line-height: 1.75;
	max-width: 850px;
}

.dash-money-card{
	background: rgba(255,255,255,.85);
	border: 1px solid rgba(37,99,235,.12);
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 12px 24px rgba(37,99,235,.08);
	text-align: right;
}

.money-label{
	font-size: 13px;
	color: #64748b;
	font-weight: 700;
	margin-bottom: 8px;
}

.money-value{
	font-size: 34px;
	line-height: 1.15;
	font-weight: 900;
	color: #2563eb;
	margin-bottom: 8px;
}

.money-sub{
	color: #64748b;
	font-size: 13px;
}

/* Filter */
.dash-filter-card{
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	padding: 22px;
	box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.card-head-line{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.card-head-icon{
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(37,99,235,.10);
	color: #2563eb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.card-head-text h5{
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
}

.card-head-text p{
	margin: 2px 0 0;
	color: #64748b;
	font-size: 13px;
}

.dash-filter-card .form-label{
	color: #475569;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 8px;
}

.dash-filter-card .form-select{
	height: 48px;
	border-radius: 14px;
	border: 1px solid #dbe5f0;
	background: #fbfdff;
}

.filter-actions{
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.filter-actions .btn{
	height: 46px;
	border-radius: 14px;
	padding: 0 18px;
	font-weight: 700;
}

/* KPI cards */
.kpi-card{
	background: #fff;
	border: 1px solid #e5edf6;
	border-radius: 22px;
	padding: 22px;
	box-shadow: 0 10px 24px rgba(15,23,42,.05);
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 138px;
	transition: .2s ease;
}

.kpi-card:hover{
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(15,23,42,.08);
}

.kpi-icon{
	width: 62px;
	height: 62px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex: 0 0 62px;
}

.bg-blue{ background: rgba(37,99,235,.12); color: #2563eb; }
.bg-cyan{ background: rgba(6,182,212,.12); color: #0891b2; }
.bg-green{ background: rgba(16,185,129,.12); color: #059669; }
.bg-amber{ background: rgba(245,158,11,.14); color: #d97706; }

.kpi-title{
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 6px;
}

.kpi-value{
	font-size: 30px;
	line-height: 1.1;
	font-weight: 900;
	color: #0f172a;
}

.kpi-note{
	margin-top: 8px;
	color: #94a3b8;
	font-size: 13px;
}

/* Panel card */
.panel-card{
	background: #fff;
	border: 1px solid #e5edf6;
	border-radius: 24px;
	box-shadow: 0 10px 24px rgba(15,23,42,.05);
	overflow: hidden;
}

.panel-head{
	padding: 22px 24px 0;
}

.panel-head h5{
	margin: 0;
	font-size: 19px;
	font-weight: 900;
	color: #0f172a;
}

.panel-body{
	padding: 22px 24px 24px;
}

/* Stats */
.stat-line,
.update-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.stat-line span,
.update-row span{
	color: #334155;
	font-weight: 600;
}

.stat-line strong,
.update-row strong{
	color: #0f172a;
	font-weight: 900;
	font-size: 18px;
}

.modern-progress{
	height: 12px;
	border-radius: 999px;
	background: #e9eff7;
	overflow: hidden;
}

.modern-progress .progress-bar{
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.mini-grid{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 14px;
	margin-top: 8px;
}

.mini-box{
	background: #f8fbff;
	border: 1px solid #e8eef6;
	border-radius: 18px;
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mini-box span{
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
}

.mini-box strong{
	color: #0f172a;
	font-size: 24px;
	font-weight: 900;
}

.alert-list{
	display: grid;
	gap: 12px;
}

.alert-row{
	background: #f8fbff;
	border: 1px solid #e8eef6;
	border-radius: 16px;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.alert-row span{
	font-size: 14px;
	color: #334155;
	font-weight: 600;
}

.alert-row strong{
	font-size: 18px;
	font-weight: 900;
	color: #0f172a;
}

.update-row{
	padding: 15px 16px;
	background: #f8fbff;
	border: 1px solid #e8eef6;
	border-radius: 16px;
	margin-bottom: 12px;
}

/* Table */
.dashboard-table thead th{
	background: #f8fbff;
	border-bottom: 1px solid #e9eff5;
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 16px 20px;
}

.dashboard-table tbody td{
	padding: 16px 20px;
	border-color: #eef3f8;
	color: #1e293b;
}

.dashboard-table tbody tr:hover{
	background: #fbfdff;
}

.num-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(37,99,235,.10);
	color: #1d4ed8;
	font-weight: 800;
}

/* Timeline */
.activity-item{
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
}

.activity-item:last-child{
	padding-bottom: 0;
}

.activity-dot{
	width: 12px;
	height: 12px;
	margin-top: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
	box-shadow: 0 0 0 6px rgba(37,99,235,.10);
	flex: 0 0 12px;
}

.activity-content{
	flex: 1;
	padding-bottom: 18px;
	border-bottom: 1px dashed #e2e8f0;
}

.activity-item:last-child .activity-content{
	border-bottom: none;
	padding-bottom: 0;
}

.activity-title{
	color: #0f172a;
	font-weight: 800;
	margin-bottom: 4px;
}

.activity-title span{
	color: #94a3b8;
}

.activity-desc{
	color: #64748b;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 4px;
}

.activity-time{
	color: #94a3b8;
	font-size: 12px;
}

@media (max-width: 991.98px){
	.dash-header-card{
		padding: 24px;
	}

	.dash-title{
		font-size: 28px;
	}

	.money-value{
		font-size: 26px;
	}

	.kpi-value{
		font-size: 24px;
	}
}
.section-title {
	font-weight: 700;
	font-size: 1.05rem;
	color: #1e293b;
}
.detail-card, .panel-card, .kpi-card, .dash-filter-card, .dash-header-card{
	padding: 10px 20px;
}