/* ==================================================================== */
/* BỘ GIAO DIỆN CHUẨN CỦA TRANG QUẢN TRỊ VIÊN (ADMIN)                   */
/* ==================================================================== */
:root { 
    --blue-dark: #004a99; 
    --success: #28a745; 
    --warning: #fd7e14; 
    --border: #e1e4e8; 
    --text-muted: #666; 
}

body { font-family: 'Segoe UI', Arial, sans-serif; background: #f0f2f5; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.header { border-bottom: 2px solid var(--blue-dark); padding-bottom: 15px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
.header h1 { color: var(--blue-dark); margin: 0; font-size: 24px; text-transform: uppercase; font-weight: 900; }
h2 { color: var(--blue-dark); font-size: 18px; margin-top: 0; margin-bottom: 25px; text-transform: uppercase; }

/* Box chứa của từng mục chính */
.section-box { border: 1px solid var(--border); padding: 25px; border-radius: 8px; margin-bottom: 30px; background: #fafbfc; }

/* ------------------------------------------------ */
/* HỆ THỐNG LƯỚI 2 CỘT (CĂN LỀ TĂM TẮP 100%)        */
/* ------------------------------------------------ */
.btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia chính xác 2 cột bằng nhau */
    gap: 15px; /* Khoảng cách giữa 2 cột */
    margin-bottom: 15px; /* Khoảng cách giữa các hàng ngang */
}

/* ------------------------------------------------ */
/* CHIỀU CAO 45PX CHO TẤT CẢ NÚT VÀ INPUT           */
/* ------------------------------------------------ */
.btn, .toggle-btn {
    height: 45px; 
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    border: none;
    gap: 8px;
}

.toggle-btn { border: 2px solid var(--blue-dark); background: transparent; color: var(--blue-dark); }
.toggle-btn:hover { background: #e6f0fa; }
.toggle-btn.active { background: var(--blue-dark); color: white; box-shadow: 0 4px 12px rgba(0,74,153,0.3); }

.btn { background: var(--blue-dark); color: white; }
.btn:hover { background: #003a75; }
.btn:disabled { background: #ccc; cursor: not-allowed; }
.btn-green { background: var(--success); } .btn-green:hover { background: #218838; }
.btn-orange { background: var(--warning); } .btn-orange:hover { background: #e06c00; }
.btn-excel { background: #1d6f42; } .btn-excel:hover { background: #155724; }
.btn-pink { background: #db2777; } .btn-pink:hover { background: #be185d; }

/* Khung Form Nhập Liệu */
.control-group { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.form-select { flex: 1; min-width: 80px; padding: 0 12px; height: 45px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: white; outline: none; box-sizing: border-box; }
.form-select:focus { border-color: var(--blue-dark); }
.w-full-name { min-width: 200px !important; }
.w-full { width: 100% !important; }

/* Autocomplete Nơi Sinh */
.autocomplete-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 6px; max-height: 250px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 4px; }
.autocomplete-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.autocomplete-item:hover { background: #e6f0fa; color: var(--blue-dark); font-weight: bold; }

/* Thẻ Chọn File (Cũng Cao 45px) */
input[type=file] { height: 45px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: white; width: 100%; box-sizing: border-box; }
input[type=file]::file-selector-button { height: 100%; border: none; background: #e2e8f0; color: #333; padding: 0 16px; border-radius: 4px; cursor: pointer; margin-right: 15px; font-weight: bold; transition: 0.2s; }
input[type=file]::file-selector-button:hover { background: #cbd5e1; }

.editor-container { margin-bottom: 20px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.status-box { padding: 15px; border-radius: 6px; margin-bottom: 15px; font-weight: bold; display: none; text-align: center; }
.msg-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ==================================================================== */
/* MÀN HÌNH KHÓA BẢO MẬT ADMIN                                          */
/* ==================================================================== */
#auth-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
    /* Thêm hình nền và phủ một lớp đen mờ 60% để làm nổi bật khung đăng nhập */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/hinh/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; justify-content: center; align-items: center;
    z-index: 99999;
}
.auth-box {
    background: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 350px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3); text-align: center;
}
.auth-box input {
    width: 100%; height: 45px; padding: 0 15px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 16px; outline: none; box-sizing: border-box; text-align: center;
}
.auth-box input:focus { border-color: var(--blue-dark); }


/* ==================================================================== */
/* TỐI ƯU HÓA DI ĐỘNG (MOBILE) - FIXED UI                               */
/* ==================================================================== */
@media (max-width: 768px) { 
    /* Cân đối lại không gian trống để màn hình rộng rãi hơn */
    body { padding: 8px; }
    .container { padding: 12px; }
    .section-box { padding: 12px; margin-bottom: 15px; }
    
    /* 1. HEADER: Khóa chặt nút Đăng xuất ở góc phải trên cùng */
    .header { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; padding-bottom: 12px; align-items: center; border-bottom: 2px solid var(--blue-dark); }
    .header h1 { font-size: 17px !important; }
    .header button.btn-orange { height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
    
    /* 2. CHUẨN HÓA ĐỘ CAO: Mọi ô nhập, thẻ select, nút bấm đều cao bằng nhau tăm tắp */
    .form-select, .btn, .toggle-btn, input[type=file] { height: 42px !important; font-size: 14px !important; }
    
    /* 3. LƯỚI NÚT VÀ ACCORDION */
    .btn-grid { grid-template-columns: 1fr !important; gap: 10px; margin-bottom: 15px; } 
    .empty-cell { display: none; } 
    .section-title { font-size: 15px; }
    .toggle-icon { width: 26px; height: 26px; font-size: 16px; }

    /* 4. FORM NHẬP PDF: Ép Ngày/Tháng/Năm nằm cùng 1 dòng thay vì rớt dọc */
    .control-group { display: flex; flex-direction: row !important; flex-wrap: wrap; gap: 8px; }
    .w-full-name { width: 100% !important; flex: 0 0 100% !important; }
    /* Chia đều 3 cột cho Ngày - Tháng - Năm và Giờ - Phút */
    .control-group select { flex: 1 1 calc(33.33% - 8px) !important; min-width: calc(33.33% - 8px) !important; }
    /* Ô Nơi sinh nằm trọn 100% dòng dưới */
    .control-group > div[style*="position: relative"] { width: 100% !important; flex: 0 0 100% !important; }
    
    /* 5. FORM TẠO THÀNH VIÊN: Nằm dọc nhưng các ô bằng nhau 100% */
    #sec-2 .control-group { flex-direction: column !important; gap: 10px !important; }
    #sec-2 .control-group > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; }
    
    /* 6. BẢNG DANH SÁCH: Cân đối lại padding, thu nhỏ icon và cụm nút bấm +- để không trào ngang */
    .member-table th, .member-table td { padding: 10px 5px; font-size: 13px; }
    .member-table button[onclick^="applyAdjust"] { padding: 4px 8px !important; height: auto !important; font-size: 14px; }
    .member-table input[id^="adj-val"] { width: 35px !important; font-size: 13px !important; }
    .member-btn-action { font-size: 16px !important; margin-right: 5px !important; }
}



/* ==================================================================== */
/* CSS QUẢN LÝ THÀNH VIÊN (MEMBER TABLE)                                */
/* ==================================================================== */

.member-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background: #fff;
}

.member-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    padding: 14px 10px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.member-table td {
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
    padding: 14px 10px;
    border-bottom: 1px solid var(--border);
}

.member-table tr:hover {
    background: #f1f5f9;
}

/* Hiệu ứng Icon thao tác (Khóa, Xóa, Đổi MK) */
.member-btn-action {
    transition: all 0.15s ease-in-out;
    display: inline-block;
    user-select: none;
    vertical-align: middle;
}

.member-btn-action:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Nút Cộng/Trừ lượt chuyên nghiệp */
.member-table button[onclick^="adjustCredits"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.member-table button[onclick*=" 1)"]:hover {
    background: #bae6fd !important;
    box-shadow: 0 2px 4px rgba(3, 105, 161, 0.15);
}

.member-table button[onclick*="-1)"]:hover {
    background: #fecaca !important;
    box-shadow: 0 2px 4px rgba(185, 28, 28, 0.15);
}

/* Ô nhập mật khẩu khi click đổi MK */
.member-table input[type="text"] {
    transition: all 0.2s ease;
}
.member-table input[type="text"]:focus {
    border-color: var(--blue-dark) !important;
    box-shadow: 0 0 0 2px rgba(0, 74, 153, 0.15);
}

/* Nút Phân trang danh sách thành viên */
#member-pagination button {
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    color: #334155;
    font-weight: bold;
    transition: all 0.2s;
}

#member-pagination button:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}