:root {
    --primary-navy: #0A2647;
    --secondary-navy: #144272;
    --light-navy: #205295;
    --accent-color: #2C74B3;
}
body {
    padding-top: 70px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #f0f2f5;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .card-header, th {
    font-weight: 700;
}
.navbar { background-color: var(--primary-navy); }
.nav-tabs { border-bottom: none; }
.nav-tabs .nav-link { color: rgba(255, 255, 255, 0.75); border: none; font-weight: 500; }
.nav-tabs .nav-link:hover { color: #FFFFFF; }
.nav-tabs .nav-link.active {
    color: #FFFFFF;
    background-color: var(--secondary-navy);
    border-bottom: 3px solid var(--accent-color);
    font-weight: 700;
}
.form-section { background-color: #fff; border: 1px solid #dee2e6; padding: 1.5rem; border-radius: 0.375rem; }
.btn-primary { background-color: var(--secondary-navy); border-color: var(--secondary-navy); }
.btn-primary:hover { background-color: var(--light-navy); border-color: var(--light-navy); }
.btn-primary:disabled { background-color: var(--secondary-navy); border-color: var(--secondary-navy); }
.card-header { background-color: var(--primary-navy); color: white; }
.table th, .table td { vertical-align: middle; text-align: center; }
#login-wrapper {
    background-color: var(--primary-navy);
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart-container {
  position: relative;
  height: 250px;
  width: 100%;
}

/* --- UPDATE START --- */
#tong-quan .card {
    min-height: 360px;
}
#tong-quan .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- UPDATE END --- */