:root { 
    --primary: #fe2c55; 
    --primary-hover: #e0274b; 
    --bg-color: #f4f7f6; 
    --box-bg: #ffffff; 
    --text-main: #333333; 
    --border: #e0e0e0; 
}
body { 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    background: var(--bg-color); 
    margin: 0; 
    padding: 20px; 
    color: var(--text-main); 
}
.container { 
    max-width: 1400px; 
    margin: auto; 
    background: var(--box-bg); 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}
.header { text-align: center; margin-bottom: 30px; }
.header h2 { color: var(--primary); margin: 0; font-size: 26px; text-transform: uppercase; }

.login-box { text-align: center; margin-top: 50px; padding: 40px; border: 1px dashed var(--border); border-radius: 8px; background: #fafafa; }
.login-box input { padding: 12px 15px; width: 280px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; margin-right: 10px; outline: none; }
button { padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
button:hover { background: var(--primary-hover); }

.toolbar { display: none; flex-direction: column; margin-bottom: 20px; background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid var(--border); }
.toolbar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px dashed #ccc; padding-bottom: 15px;}
.record-count { font-weight: 600; color: var(--primary); font-size: 15px; background: #ffe9ec; padding: 8px 15px; border-radius: 20px; }

.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; width: 100%; }
.filter-item { display: flex; flex-direction: column; }
.filter-item label { font-size: 12px; font-weight: bold; color: #666; margin-bottom: 5px; }
.filter-item select, .filter-item input { padding: 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; outline: none; }
.filter-item select:focus, .filter-item input:focus { border-color: var(--primary); }

/* KHU VỰC CSS DÀNH CHO BIỂU ĐỒ DASHBOARD */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.chart-container {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    height: 320px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.table-wrapper { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; display: none; }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
th, td { border-bottom: 1px solid var(--border); padding: 14px 10px; white-space: nowrap; }
th { background-color: #f1f3f5; color: #495057; font-weight: 600; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); }
td.content-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

.status-msg { text-align: center; margin-top: 15px; color: #dc3545; font-weight: 500; }
.loading { text-align: center; font-style: italic; color: #666; display: none; margin-top: 30px; font-size: 16px; }
/* Nút chọn thời gian nhanh */
.btn-quick { background: #e9ecef; color: #495057; padding: 7px 14px; font-size: 13px; font-weight: bold; border-radius: 6px; border: 1px solid #ced4da; cursor: pointer; transition: 0.2s; }
.btn-quick:hover { background: #17a2b8; color: white; border-color: #17a2b8; }

/* Hệ thống thẻ KPI So sánh */
.kpi-grid { display: none; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; }
.kpi-card { background: #fff; padding: 25px 20px; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 4px 6px rgba(0,0,0,0.02); text-align: center; }
.kpi-title { font-size: 13px; font-weight: bold; color: #888; margin-bottom: 10px; }
.kpi-value { font-size: 32px; font-weight: 800; color: var(--primary); margin-bottom: 10px; }
.kpi-trend { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 20px; display: inline-block; }

.trend-up { background: #d4edda; color: #155724; }
.trend-down { background: #f8d7da; color: #721c24; }
.trend-neutral { background: #e2e3e5; color: #383d41; }