@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700;800&display=swap');

/* CSS Hệ thống - Florenté Warm Natural Aesthetic */
:root {
    --primary-color: #3C4A34; /* Xanh rêu Florenté */
    --primary-hover: #2D3827;
    --bg-color: #F8F4EF; /* Nền kem ấm */
    --card-bg: #FFFFFF;
    --text-main: #2C2825; /* Chữ nâu đen ấm */
    --text-muted: #7E766C; /* Chữ nâu xám nhẹ */
    --border-color: #E6DFD5; /* Viền be ấm */
    --accent-warm: #C8B29B;
    --accent-terracotta: #A67B5B;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Áp dụng Font Roboto Mono (Monospaced Numbers) giúp tất cả chữ số có ĐỘ RỘNG BẰNG NHAU 100% (Số 1 rộng bằng số 5, số 8, số 0) */
.sf-pro-num,
.inter-num,
.mono-num,
.kpi-value,
.kpi-percent,
.kpi-target-sub,
#reportTotalRevenue,
#salesAmountInput,
#editSalesDisplay,
#sales,
.amount-text,
.table-sales-val,
.sales-cheer-gif-text {
    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    letter-spacing: -0.5px;
}

body { background-color: var(--bg-color); color: var(--text-main); padding: 20px; line-height: 1.5; }
.container { max-width: 1600px; width: 98%; margin: 0 auto; }

/* Navigation Tabs & Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(60, 74, 52, 0.04);
}
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1;
}
.logo-title {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.nav-tabs {
    display: flex;
    gap: 6px;
    background: #F4ECE1;
    padding: 4px;
    border-radius: 10px;
}
.nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.nav-tab:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.6);
}
.nav-tab.active {
    background: #FFFFFF;
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(60, 74, 52, 0.08);
}
.app-page {
    width: 100%;
}
.form-page-container {
    max-width: 680px;
    margin: 0 auto;
}
.form-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}
.btn-back-link:hover {
    background: #F4ECE1;
    transform: translateX(-2px);
}

.header { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.header h1 { color: var(--primary-color); font-weight: 700; letter-spacing: -0.4px; }
.main-content { display: flex; gap: 20px; flex-wrap: wrap; }
.form-section { flex: 1; min-width: 300px; max-width: 360px; background: var(--card-bg); padding: 24px; border-radius: 12px; box-shadow: 0 4px 16px rgba(60, 74, 52, 0.04); border: 1px solid var(--border-color); }
.table-section { flex: 1; min-width: 600px; background: var(--card-bg); padding: 24px; border-radius: 12px; box-shadow: 0 4px 16px rgba(60, 74, 52, 0.04); border: 1px solid var(--border-color); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 14px; color: var(--text-main); }
.form-control { width: 100%; padding: 12px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; background: #FDFBF8; color: var(--text-main); line-height: 1.5; transition: all 0.2s ease-in-out; }
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(60, 74, 52, 0.12); background: #FFFFFF; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.btn { padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; text-align: center; display: inline-block; width: 100%; transition: all 0.2s ease; }
.btn:disabled { opacity: 0.7; cursor: not-allowed; }
.btn-primary { background-color: var(--primary-color); color: #F8F4EF; }
.btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-1px); }
.btn-secondary { background-color: #F1ECE4; color: var(--text-main); border: 1px solid var(--border-color); }
.btn-secondary:hover:not(:disabled) { background-color: #E5DDD3; }
.btn-danger { background-color: #BA4A3A; color: white; }
.btn-danger:hover:not(:disabled) { background-color: #9E3C2F; }
.btn-export-excel { background-color: #3C4A34; color: #F8F4EF; }
.btn-export-excel:hover:not(:disabled) { background-color: #2D3827; }
.btn-import-excel { background-color: #8C7A6B; color: white; }
.btn-import-excel:hover:not(:disabled) { background-color: #756557; }
.btn-export-pdf { background-color: #C49A6C; color: white; }
.btn-export-pdf:hover:not(:disabled) { background-color: #AF8557; }
.btn-report-month { background-color: #A67B5B; color: white; }
.btn-report-month:hover:not(:disabled) { background-color: #8E6547; }
.btn-sm { padding: 8px 14px; font-size: 13px; width: auto; border-radius: 6px; }
.edit-actions { display: none; gap: 10px; }
.table-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-box-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.search-box {
    padding: 8px 30px 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 250px;
    background: #FDFBF8;
    font-size: 14px;
    transition: all 0.2s ease;
}
.search-box:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(60, 74, 52, 0.1);
    background: #FFFFFF;
}
.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #94a3b8;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
}
.search-clear-btn:hover {
    color: #ef4444;
    background: #fee2e2;
}
.table-container { overflow-x: auto; }
table { width: 100%; min-width: 1200px; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 14px; vertical-align: middle; }
.nowrap { white-space: nowrap; }
.col-company { min-width: 200px; }
.col-notes { min-width: 150px; }
th { background-color: #F5EFE8; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
tbody tr:hover { background-color: #F8F3ED; cursor: pointer; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.money { color: #3C4A34; font-weight: 700; }
.pagination-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 5px; }
.page-btn { padding: 6px 12px; border: 1px solid var(--border-color); background: white; color: var(--text-main); border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; }
.page-btn:hover:not(.active):not(:disabled) { background: #F5EFE8; }
.history-btn-icon:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; background-color: #F3ECE2 !important; }
.page-btn.active { background: var(--primary-color); color: #F8F4EF; border-color: var(--primary-color); font-weight: 600; }
.page-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(44, 40, 37, 0.4); justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; padding: 24px; border-radius: 12px; width: 400px; max-width: 90%; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions .btn { width: auto; }
@media (max-width: 768px) { .table-section { min-width: 100%; } }
/* CSS Màn hình đăng nhập Florenté Light Mode */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #F4ECE1;
    padding: 20px;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}
.auth-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 44px 36px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 12px 32px rgba(60, 74, 52, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
    color: var(--text-main);
    border: 1px solid #E6DFD5;
}
.auth-card h2 { text-align: center; margin-bottom: 24px; color: var(--primary-color); font-weight: 700; font-size: 26px; margin-top: 0; letter-spacing: -0.5px; }
.auth-card .form-group { margin-bottom: 20px; }
.auth-card label { color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 8px; font-size: 14px; text-align: left; }
.auth-card .form-control { background: #FDFBF8; color: var(--text-main); border: 1px solid #E2D9CD; width: 100%; padding: 12px 14px; border-radius: 8px; font-size: 15px; transition: all 0.15s ease-in-out; }
.auth-card .form-control::placeholder { color: #A49B8E; }
.auth-card .form-control:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(60, 74, 52, 0.15); background: #FFFFFF; }
.auth-error-msg { color: #BA4A3A; font-size: 13px; text-align: center; margin-top: 15px; margin-bottom: 5px; display: none; font-weight: 500; }
.auth-card .btn-primary { background-color: var(--primary-color); color: #F8F4EF; padding: 12px 15px; border-radius: 8px; font-weight: 600; width: 100%; font-size: 15px; border: none; cursor: pointer; transition: background-color 0.15s ease; margin-top: 10px; }
.auth-card .btn-primary:hover { background-color: var(--primary-hover); }
.auth-footer-line { border-top: 1px solid #F0E8DC; margin-top: 25px; padding-top: 20px; }
.auth-footer-text { text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Modal Thao tác Khách hàng & Form Thêm/Sửa đẹp chuẩn theo hình */
.modal-overlay { z-index: 1000; }
#reportModal, #analysisModal { z-index: 1000; }
#customerActionModal { z-index: 1100; }
#editCustomerInfoModal, #updateSalesModal, #customerFormModal { z-index: 1150; }
#historyModal { z-index: 1180; }
#excelImportModal, #duplicateModal, #deleteModal, #warningModal, #notificationModal { z-index: 1200; }

/* Modal Option 2: Cập Nhật Doanh Số & Sản Phẩm */
.update-sales-modal {
    width: 550px;
    max-width: 90%;
    max-height: 85vh;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    border: 1px solid #EFE8DF;
    overflow-y: auto;
}
.update-sales-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #EFE8DF;
}
.update-sales-title {
    font-size: 18px;
    font-weight: 700;
    color: #00B87C;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.update-sales-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.btn-save-sales {
    background-color: #00B87C;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-save-sales:hover {
    background-color: #009E6A;
    box-shadow: 0 4px 14px rgba(0, 184, 124, 0.3);
}
.btn-cancel-sales {
    background-color: #F3EFE9;
    color: #4B5563;
    border: none;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-cancel-sales:hover {
    background-color: #E5DEC9;
    color: #1F2937;
}

.customer-form-modal {
    width: 580px;
    max-width: 90%;
    max-height: 85vh;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    border: 1px solid #EFE8DF;
    overflow-y: auto;
}
.modal-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #EFE8DF;
}
.modal-title-custom {
    font-size: 18px;
    font-weight: 700;
    color: #1B362B;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-close-custom {
    font-size: 26px;
    font-weight: bold;
    color: #9CA3AF;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close-custom:hover {
    color: #1F2937;
}
.form-group-custom {
    margin-bottom: 14px;
}
.form-group-custom label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #2C2825;
    margin-bottom: 5px;
}
.form-control-custom {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #EFE8DF;
    border-radius: 10px;
    font-size: 13.5px;
    background: #FAF7F2;
    color: #2C2825;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
}
.form-control-custom:focus {
    outline: none;
    border-color: #1B362B;
    box-shadow: 0 0 0 3px rgba(27, 54, 43, 0.1);
    background: #FFFFFF;
}
.form-control-custom::placeholder {
    color: #A49B8E;
}
.btn-submit-custom {
    width: 100%;
    background-color: #1B362B;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 6px;
}
.btn-submit-custom:hover {
    background-color: #12251D;
    box-shadow: 0 4px 14px rgba(27, 54, 43, 0.22);
}

.customer-action-modal {
    width: 520px;
    max-width: 95%;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}
.action-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid #E6DFD5;
}
.action-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}
.cust-id-highlight {
    color: #3B82F6;
    font-weight: 700;
}
.action-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.action-modal-close {
    font-size: 24px;
    font-weight: bold;
    color: #9CA3AF;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.action-modal-close:hover {
    color: var(--text-main);
}
.action-modal-body {
    padding: 16px 0 8px 0;
}
.action-modal-prompt {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 16px;
}
.action-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.action-option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1.5px solid #EFE8DF;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.action-option-card:hover {
    border-color: #C8B29B;
    background: #FAF7F2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(60, 74, 52, 0.08);
}
.action-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-bg-warm {
    background-color: #FEF3C7;
}
.icon-bg-green {
    background-color: #D1FAE5;
}
.icon-bg-blue {
    background-color: #DBEAFE;
}
.action-option-content {
    flex: 1;
}
.action-option-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.action-option-desc {
    font-size: 12.5px;
    color: #6B7280;
    line-height: 1.4;
}
.text-main {
    color: #1F2937;
}
.text-green {
    color: #059669;
}
.text-blue {
    color: #2563EB;
}
.action-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
}
.btn-close-custom {
    background-color: #F3EFE9;
    color: #4B5563;
    border: none;
    padding: 8px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-close-custom:hover {
    background-color: #E5DEC9;
    color: #1F2937;
}
.customer-id-cell {
    cursor: pointer;
    transition: opacity 0.15s;
}
.customer-id-cell:hover {
    opacity: 0.75;
}

/* Styling cho datalist dropdown hiện đại */
input[list]::-webkit-calendar-picker-indicator {
    display: none;
}

/* Custom autocomplete dropdown container */
.custom-autocomplete-wrapper {
    position: relative;
}

.custom-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(60, 74, 52, 0.15);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    padding: 4px;
}

.custom-autocomplete-dropdown.show {
    display: block;
}

.custom-autocomplete-item {
    padding: 10px 14px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.custom-autocomplete-item:hover,
.custom-autocomplete-item.selected {
    background: #F5EFE8;
    color: var(--primary-color);
}

.custom-autocomplete-item:active {
    background: #EFE8DF;
}

.custom-autocomplete-dropdown::-webkit-scrollbar {
    width: 8px;
}

.custom-autocomplete-dropdown::-webkit-scrollbar-track {
    background: #F8F4EF;
    border-radius: 4px;
}

.custom-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--accent-warm);
    border-radius: 4px;
}

.custom-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--accent-terracotta);
}

.custom-autocomplete-empty {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    font-style: italic;
}

/* Button export PDF hover effect */
#btnExportAnalysisPDF:hover,
#btnExportProductAnalysisPDF:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(60, 74, 52, 0.15);
}







/* KPI Progress Bar - Compact Modern Inline UI (Khớp chiều cao với nút Bảng Xếp Hạng Doanh Số) */
.kpi-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(60, 74, 52, 0.04);
    height: 38px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.kpi-bar-container:hover {
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
    border-color: #FCD34D;
}

.kpi-left-group {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.kpi-title {
    font-size: 10px;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.5px;
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    text-transform: uppercase;
}

.kpi-percent {
    font-size: 12.5px;
    font-weight: 900;
    color: #B45309;
    background: #FEF3C7;
    padding: 1px 7px;
    border-radius: 6px;
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    border: 1px solid #FDE68A;
}

.kpi-progress-bar {
    width: 100px;
    height: 8px;
    background: #E2E8F0;
    border-radius: 10px;
    overflow: visible;
    position: relative;
    flex-shrink: 0;
}

.kpi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #D97706 0%, #F59E0B 50%, #EAB308 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

/* Con mèo Mochi chạy động trên thanh progress */
.kpi-cat-runner {
    position: absolute;
    right: -13px;
    top: -20px;
    width: 28px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kpi-cat-runner:hover {
    transform: scale(1.35) translateY(-3px);
}

/* Bóng thoại động Mochi nhắn "Hiếu Hạnh cố lên nhé" */
.kpi-cat-speech {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px) scale(0.85);
    background: #FFFFFF;
    color: #1B362B;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(27, 54, 43, 0.22);
    border: 1.5px solid #F59E0B;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
}

.kpi-cat-speech::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 6px 5px;
    border-style: solid;
    border-color: transparent transparent #F59E0B transparent;
}

.kpi-cat-speech.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.kpi-cat-img {
    width: 26px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
    animation: catRunContinuous 0.5s ease-in-out infinite;
}

@keyframes catRunContinuous {
    0% {
        transform: translateY(0) rotate(-4deg);
    }
    25% {
        transform: translateY(-3px) rotate(0deg);
    }
    50% {
        transform: translateY(0) rotate(4deg);
    }
    75% {
        transform: translateY(-3px) rotate(0deg);
    }
    100% {
        transform: translateY(0) rotate(-4deg);
    }
}



.kpi-right-group {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.kpi-value {
    font-size: 14px;
    font-weight: 900;
    color: #0F172A;
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    letter-spacing: -0.2px;
}

.kpi-target-sub {
    font-size: 12px;
    color: #1E293B;
    font-weight: 800;
}

/* Header right alignment */
.header-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* GIF Cute Mascot Cổ Vũ Sales */
.sales-cheer-gif-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.sales-cheer-gif-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 5px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(60, 74, 52, 0.04);
    height: 36px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sales-cheer-gif-container:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.15);
    border-color: #FCD34D;
}

.sales-cheer-gif {
    height: 30px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    animation: mascotContinuousDance 2.2s ease-in-out infinite;
}

@keyframes mascotContinuousDance {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-4px) rotate(-8deg) scale(1.08);
    }
    50% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    75% {
        transform: translateY(-4px) rotate(8deg) scale(1.08);
    }
}

.sales-cheer-gif-text {
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #C2410C;
    white-space: nowrap;
}

.icon-bg-red {
    background: #FEF2F2;
}

.text-red {
    color: #DC2626;
}

/* Modal Chúc Mừng Mốc KPI - Ultra Premium Design */
.kpi-milestone-content {
    max-width: 490px;
    text-align: center;
    padding: 36px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 251, 235, 0.98) 100%);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    border: 2px solid rgba(252, 211, 77, 0.8);
    box-shadow: 0 25px 60px -10px rgba(217, 119, 6, 0.35), 0 0 40px rgba(245, 158, 11, 0.2);
    animation: milestonePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

@keyframes milestonePopIn {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.kpi-milestone-badge {
    display: inline-block;
    padding: 8px 22px;
    background: linear-gradient(90deg, #D97706, #F59E0B, #EC4899);
    background-size: 200% 100%;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 900;
    border-radius: 30px;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
    margin-bottom: 18px;
    animation: badgeShimmer 3s ease infinite alternate;
}

@keyframes badgeShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.kpi-milestone-mochi {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.kpi-mochi-gif {
    height: 85px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
    animation: mochiCelebrationDance 0.8s ease-in-out infinite alternate;
}

@keyframes mochiCelebrationDance {
    0% {
        transform: translateY(0) scale(1) rotate(-2deg);
    }
    100% {
        transform: translateY(-10px) scale(1.1) rotate(2deg);
    }
}

.kpi-milestone-title {
    font-size: 23px;
    font-weight: 900;
    color: #1E293B;
    margin: 0 0 14px 0;
    font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
    letter-spacing: -0.3px;
}

.kpi-milestone-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0;
}

/* Color Badges & Classes Phân Loại Khách Hàng */
.color-khach-moi { color: #2563EB !important; }
.color-thuong-xuyen { color: #16A34A !important; }
.color-khong-thuong-xuyen { color: #F97316 !important; }
.color-chua-lien-he { color: #D97706 !important; }
.color-khong-nhu-cau { color: #DC2626 !important; }

.badge-classification {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.2px;
}
.badge-khach-moi { background-color: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.badge-thuong-xuyen { background-color: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.badge-khong-thuong-xuyen { background-color: #FFF7ED; color: #F97316; border: 1px solid #FED7AA; }
.badge-chua-lien-he { background-color: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.badge-khong-nhu-cau { background-color: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }