/* --- 1. MỞ KHÓA TRÌNH DUYỆT (Cho phép cuộn trang để vuốt thanh địa chỉ) --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
    margin: 0; 
    background-color: #e2e8f0; /* bg-slate-200 */
}
.dark body {
    background-color: #0f172a; /* bg-slate-900 */
}

/* --- 2. HỆ MÀU GIAO DIỆN SỔ THU CHI --- */
.bg-gradient-sunsilk { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.dark .bg-gradient-sunsilk { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;}
.bg-gradient-invest { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.dark .bg-gradient-invest { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;}
.bg-gradient-card { background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }

.dark .bg-white { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
.dark .bg-slate-50 { background-color: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.dark .bg-slate-100 { background-color: #334155 !important; }
.dark .text-slate-800, .dark .text-slate-700 { color: #f1f5f9 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }

/* --- 3. ĐỊNH DẠNG COMPONENT --- */
.input-money-container { display: flex; align-items: center; position: relative; height: 100%; }
.thousand-unit { position: absolute; right: 10px; font-weight: 600; color: #94a3b8; pointer-events: none; }
.select-wrapper { position: relative; height: 100%; }
.select-wrapper::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #64748b; font-size: 0.8rem; }

@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.item-new { animation: slideIn 0.3s ease-out forwards; }

/* --- 4. TÙY CHỈNH THANH CUỘN (SCROLLBAR) --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

optgroup { font-weight: 900; color: #1e40af; }
.dark optgroup { color: #38bdf8; }

input[type="month"] {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

/* --- 5. ĐIỀU CHỈNH KHUNG APP (Hỗ trợ kéo vuốt) --- */
.app-container { 
    min-height: 100vh; /* Chuyển từ height cố định sang min-height thả rông */
    display: flex; 
    flex-direction: column; 
    margin: 0 auto; /* Căn giữa app trên màn hình máy tính */
    background-color: #ffffff;
}

.tab-content { 
    display: none; 
    flex: 1; 
    /* ĐÃ XÓA: overflow-y: auto (Trả quyền cuộn cho trình duyệt) */
    padding-bottom: 35px; /* Chừa không gian 85px ở đáy cho Menu bám lên */
}
.tab-content.active { display: block; animation: slideIn 0.2s ease-out; }

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.animate-draw-check {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawCheck 1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
    /* 🔴 BỘ LUẬT ÉP ẨN TÍNH NĂNG (Bất khả xâm phạm) */
    body.hide-feature-bank .require-feature-bank { 
        display: none !important; 
    }
    body.hide-feature-invest .require-feature-invest { 
        display: none !important; 
    }

@keyframes subTabFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtab-animate {
    animation: slideIn 0.2s ease-out forwards;
}

/* --- 6. HIỆU ỨNG MŨI TÊN CUỘN TAB K2 --- */
@keyframes arrowPulseRight {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

@keyframes arrowPulseLeft {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-3px);
        opacity: 1;
    }
}

.arrow-pulse-right {
    animation: arrowPulseRight 1.2s ease-in-out infinite;
}

.arrow-pulse-left {
    animation: arrowPulseLeft 1.2s ease-in-out infinite;
}

/* --- 7. TÙY CHỈNH Ô CHỌN NGÀY & MỞ LỊCH --- */
input[type="date"],
input[type="month"] {
    position: relative;
}

/* Vùng chỉ báo lịch (calendar-picker-indicator) nằm gọn ở góc phải (rộng 36px) để bấm góc phải mở lịch, còn bấm vùng chữ mở bàn phím */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 36px !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}