/* --- 1. CORE & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

:root {
    /* Colors System */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #EFF6FF;
    
    --text-main: #111827;      /* Màu chữ chính đậm hơn chút */
    --text-sec: #6B7280;
    
    --bg-body: #F3F4F6;
    --bg-card: #FFFFFF;
    
    --border-color: #E5E7EB;
    --border-focus: #BFDBFE;

    /* --- CẬP NHẬT KÍCH THƯỚC MỚI --- */
    --radius: 12px;            /* Bo góc mềm mại (Style Poppins cũ) */
    --header-h: 74px;          /* Tăng nhẹ chiều cao header */
    --sidebar-w: 260px;
    
    /* Input cao 48px: Chuẩn premium, rất dễ bấm & nhập liệu */
    --input-h: 48px;           
}

/* Base Settings */
body { 
    font-family: 'Be Vietnam Pro', sans-serif; 
    background-color: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    
    /* --- CỠ CHỮ TO HƠN --- */
    font-size: 15px; 
    line-height: 1.6; /* Tăng khoảng cách dòng giúp đọc dễ chịu hơn */
    font-weight: 400;
}

/* Ẩn Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

[x-cloak] { display: none !important; }

/* --- 2. FORM ELEMENTS --- */
.input-field {
    width: 100%;
    height: var(--input-h);
    padding: 0 16px; /* Tăng padding ngang chút */
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: #FFFFFF;
    color: var(--text-main);
    font-size: 15px; /* Chữ trong input cũng to lên */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.input-field::placeholder { color: #9CA3AF; font-weight: 400; }

.input-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* --- 3. BUTTONS --- */
.btn {
    height: var(--input-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px; /* Nút to hơn thì padding rộng hơn */
    border-radius: var(--radius);
    font-size: 15px; /* Chữ trong nút to lên */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    gap: 8px;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); /* Bóng đổ đẹp hơn */
}
.btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 6px 10px -2px rgba(37, 99, 235, 0.3); }

.btn-outline {
    background-color: white;
    border-color: var(--border-color);
    color: var(--text-main);
}
.btn-outline:hover { background-color: #F9FAFB; border-color: #D1D5DB; }

/* --- 4. CARDS & TABLES --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px; /* Card bo góc to hơn chút cho hợp với size chữ lớn */
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.table-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: white;
}

table.app-table { width: 100%; border-collapse: collapse; }

table.app-table thead th {
    background-color: #F8FAFC;
    color: var(--text-sec);
    font-size: 13px; /* Header bảng to lên xíu (12 -> 13) */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 16px 24px; /* Tăng padding */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

table.app-table tbody td {
    padding: 18px 24px; /* Tăng padding cho thoáng */
    font-size: 15px;    /* Chữ dữ liệu to 15px */
    color: var(--text-main);
    border-bottom: 1px solid #F3F4F6;
    font-variant-numeric: tabular-nums;
}

table.app-table tbody tr:last-child td { border-bottom: none; }
table.app-table tbody tr:hover { background-color: #F8FAFC; cursor: pointer; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px; /* Badge to hơn */
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* Toggle */
.toggle-checkbox:checked { right: 0; border-color: var(--primary); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--primary); }

/* Mobile */
@media screen and (max-width: 768px) {
    :root { 
        --input-h: 50px; /* Mobile ngón tay to nên cần to hơn nữa */
        --radius: 12px;
    }
    body { font-size: 16px; } /* Mobile chữ 16px chuẩn đọc báo */
    table.app-table thead { display: none; }
    table.app-table tbody td { 
        display: block; 
        text-align: right; 
        padding: 12px 16px;
        border-bottom: none;
    }
    table.app-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        color: var(--text-sec);
        text-transform: uppercase;
        font-size: 12px;
    }
    table.app-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 8px 0;
    }
}