* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--f-family); /* Đã đổi sang biến */
    -webkit-tap-highlight-color: transparent;
}

body {
    display: flex;
    height: 100vh;
    background: var(--bg);
    color: var(--t);
    overflow: hidden;
}

.app-ct {
    display: none;
    width: 100%;
    height: 100%;
}

.app-ct.auth {
    display: flex;
}

.sb {
    width: 240px;
    background: var(--sf);
    border-right: 1px solid var(--b);
    display: flex;
    flex-direction: column;
    padding: 24px;
    z-index: 100;
}

.logo {
    font-size: var(--f-size-lg);       /* Đã đổi (18px) */
    font-weight: var(--f-weight-bold); /* Đã đổi (700) */
    color: var(--p);
    margin-bottom: 32px;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-btn {
    background: none;
    border: none;
    padding: 12px;
    text-align: left;
    font-size: var(--f-size-base);         /* Đã đổi (14px) */
    font-weight: var(--f-weight-semibold); /* Đã đổi (600) */
    color: var(--ts);
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    gap: 12px;
}

.m-btn.active {
    background: var(--bg);
    color: var(--p);
}

.main {
    flex: 1;
    padding: 32px;
    height: 100vh;
    padding-bottom: 60px;
    overflow-y: hidden;
    box-sizing: border-box;
}

.usr-bar {
    display: flex;
    justify-content: flex-end;
    font-size: var(--f-size-sm);           /* Đã đổi (13px) */
    font-weight: var(--f-weight-semibold); /* Đã đổi (600) */
    color: var(--ts);
    margin-bottom: 15px;
}

.page {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.page.active {
    display: block;
}

h2 {
    font-size: var(--f-size-md);       /* Đã đổi (20px -> map về md/lg tùy hệ thống, ở đây dùng md 20px) */
    font-weight: var(--f-weight-bold); /* Đã đổi (700) */
    margin-bottom: 20px;
}

.btn-sm {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: var(--f-size-base);     /* Đã đổi (14px) */
    font-weight: var(--f-weight-bold); /* Đã đổi (700) */
    color: var(--white);
    background: var(--p);
    cursor: pointer;
    margin-top: 10px;
}

.gr {
    margin-bottom: 16px;
    text-align: left;
}

.gr label {
    display: block;
    font-size: var(--f-size-xs);           /* Đã đổi (11px) */
    font-weight: var(--f-weight-semibold); /* Đã đổi (600) */
    color: var(--ts);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.gr input,
.gr select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--b);
    border-radius: 10px;
    font-size: var(--f-size-md);           /* Đã đổi (15px -> đồng bộ lên md) */
    outline: none;
    background: var(--input-bg);
    font-weight: var(--f-weight-medium);   /* Đã đổi (500) */
}

.gr input:focus,
.gr select:focus {
    border-color: var(--p);
    background: var(--sf);
}

.logout-btn:hover {
    background: var(--danger-light) !important;
}

#gc::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}