:root {
    /* Màu chủ đạo mới: Teal đậm */
    --primary-color: #0a657f;
    /* Màu hover: Đậm hơn và sâu hơn */
    --primary-hover: #004e64;
    /* Màu nền: Chuyển từ xám lạnh sang xám xanh rất nhạt (Slate-50) để hợp với màu Teal */
    --bg-light: #f1f5f9;
    
    /* Các biến màu phụ trợ chuyên nghiệp */
    --text-main: #1e293b; /* Slate-800: Đen dịu thay vì đen tuyền */
    --text-secondary: #64748b; /* Slate-500: Màu chữ phụ sang trọng */
    --border-color: #e2e8f0; /* Viền xám tinh tế */
    --white: #ffffff;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-light);
    font-size: 20px;
    color: var(--text-main);
    /* Giúp chữ hiển thị sắc nét hơn */
    -webkit-font-smoothing: antialiased;
}

/* --- NAVBAR --- */
.navbar-custom {
    background: var(--white);
    /* Shadow màu xanh nhẹ thay vì đen, tạo cảm giác lơ lửng hiện đại */
    box-shadow: 0 4px 6px -1px rgba(0, 104, 133, 0.05), 0 2px 4px -1px rgba(0, 104, 133, 0.03);
    padding: 12px 0;
    margin-bottom: 25px;
    border-top: 4px solid var(--primary-color);
}

/* --- UTILITIES --- */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* --- BUTTONS --- */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 104, 133, 0.2); /* Shadow nhẹ cùng tông */
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 6px rgba(0, 78, 100, 0.25);
}

/* --- PROJECT ITEM --- */
.project-item {
    background: var(--white);
    border-radius: 8px;
    /* Viền nhạt hơn để trông thoáng */
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.project-item:hover {
    transform: translateY(-2px);
    /* Shadow khi hover mềm mại hơn */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    /* Đổi viền thành màu primary nhưng nhạt hơn 1 chút cho tinh tế */
    border-color: rgba(0, 104, 133, 0.5);
}

/* --- STATUS BADGES --- */
/* Sử dụng hệ màu Pastel hiện đại, dễ đọc */
.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: 600; /* Giảm độ đậm một chút để thanh thoát */
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.bg-pending {
    background: #fff7ed; /* Orange-50 */
    color: #c2410c;       /* Orange-700 */
    border: 1px solid #ffedd5;
}

.bg-approved {
    background: #f0fdfa; /* Teal-50 pha xanh ngọc */
    color: #0f766e;       /* Teal-700 */
    border: 1px solid #ccfbf1;
}

.bg-rejected {
    background: #fef2f2; /* Rose-50 */
    color: #be123c;       /* Rose-700 */
    border: 1px solid #ffe4e6;
}

/* --- CARDS --- */
.main-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-header-custom {
    /* Thay vì màu xám chết (#f8f9fa), dùng màu pha chút xanh của primary */
    background: rgba(0, 104, 133, 0.03); 
    padding: 12px 20px;
    border-bottom: 6px solid var(--border-color);
    font-weight: 700;
    color: var(--primary-color);
    border-left: 10px solid #dc3545
}

/* --- FORMS --- */
.form-content {
    padding: 25px;
	
}

.form-label {
    font-weight: 600;
    color: #4950578f;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.form-label::after {
    content: " *";
    color: #ef4444; /* Đỏ tươi hiện đại hơn đỏ sẫm cũ */
}

.no-required .form-label::after {
    content: "";
}

/* --- UPLOAD BOX --- */
.upload-box {
    border: 2px dashed #cbd5e1; /* Slate-300 */
    border-radius: 8px;
    padding: 15px;
    background: #f8fafc; /* Slate-50 */
    text-align: center;
    transition: 0.2s ease-in-out;
    color: var(--text-secondary);
}

.upload-box:hover {
    border-color: var(--primary-color);
    /* Nền chuyển sang màu primary cực nhạt */
    background: rgba(0, 104, 133, 0.04);
    color: var(--primary-color);
}

/* --- PREVIEW AREA --- */
.preview-area {
    margin-top: 10px;
    font-size: 0.85rem;
    text-align: left;
    background: var(--white);
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.preview-area.active {
    display: block;
}

.img-preview-box {
    width: 120px;
    height: 160px;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    overflow: hidden;
    margin-top: 5px;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}

.img-preview-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 104, 133, 0.1); /* Hiệu ứng glow nhẹ khi hover */
}

.img-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.crop-container {
    max-height: 500px;
    display: flex;
    justify-content: center;
    background: #1e293b; /* Nền tối sang trọng cho khu vực crop ảnh */
}

.crop-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* --- LOADING & OVERLAYS --- */
#loadingOverlay, #successScreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px); /* Làm mờ nền phía sau - hiệu ứng kính */
}

#loadingOverlay {
    background: rgba(255, 255, 255, 0.85);
}

#successScreen {
    background: rgba(255, 255, 255, 0.95);
}

/* --- CUSTOM BADGES (ABC) --- */
/* Cập nhật để hài hòa với tone #006885 */

.abc-badge {
    font-size: 16px;
    font-weight: 500;
    /* Đổi sang màu Teal Green để hợp với Primary */
    color: #115e59; /* Teal-800 */
    background-color: #ccfbf1; /* Teal-100 */
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #99f6e4; /* Teal-200 */
    box-shadow: 0 1px 2px rgba(0, 104, 133, 0.05);
    gap: 6px;
}

.abc-minimal {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Màu cam cháy đậm (Burnt Orange) thay vì cam neon (#fc3804) */
    /* Màu này tạo độ tương phản bổ sung (Complementary) rất đẹp với màu Teal #006885 */
    background-color: #ea580c; 
    padding: 6px 12px; /* Thêm padding nhẹ nếu chưa có để màu nền đẹp hơn */
    border-radius: 6px; /* Bo góc nhẹ để đồng bộ */
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
}