@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Lato:wght@300;400;700&family=Lora:wght@400;500;600;700&family=Merriweather:wght@300;400;700;900&family=Montserrat:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&family=Oswald:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap');

body { font-family: 'Inter', sans-serif; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Layout */
.main-wrapper { display: flex; height: calc(100vh - 72px); }
.tab-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; transition: 0.2s; color: #64748b; }
.dark .tab-icon-btn { color: #94a3b8; }
.tab-icon-btn.active { background: #6366f1; color: white !important; box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39); }
.tab-icon-btn:hover:not(.active) { background: #e2e8f0; }
.dark .tab-icon-btn:hover:not(.active) { background: #374151; }

/* Inputs & Colors */
.cv-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #e2e8f0; outline: none; transition: 0.2s; font-size: 13px; background: #ffffff; color: #1f2937; margin-bottom: 12px; }
.cv-input:focus { border-color: #6366f1; }
.dark .cv-input { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.color-circle { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; }
.color-circle.active { border-color: white; outline: 2px solid #6366f1; }
.color-circle.active::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: white; font-size: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* --- CV PREVIEW PAGE (A4) --- */
#cv-export-wrapper { transform-origin: top center; transition: transform 0.2s; display: flex; flex-direction: column; gap: 2rem; --accent: #6366f1; }

.preview-page { 
    width: 210mm; min-height: 297mm; height: 297mm; 
    background: #ffffff !important; color: #1f2937 !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex; 
    position: relative;
    overflow: hidden;
}

.cv-left { width: 35%; background-color: #f8fafc; padding: 40px 30px; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.cv-right { width: 65%; padding: 40px; }
.cv-heading { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; padding-bottom: 6px; margin-bottom: 16px; margin-top: 24px; }

.icon-box { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: var(--accent); color: white; border-radius: 6px; font-size: 10px; margin-right: 8px; flex-shrink: 0; }

.high-res-img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

/* --- PRINT CSS --- */
@media print { 
    @page { size: A4 portrait; margin: 0; }
    
    body, html { 
        margin: 0 !important; 
        padding: 0 !important; 
        height: auto !important; 
        width: auto !important; 
        background: white !important; 
        overflow: visible !important; 
    }
    
    .main-wrapper { height: auto !important; overflow: visible !important; display: block !important; }
    .preview-container { padding: 0 !important; height: auto !important; overflow: visible !important; display: block !important; position: static !important; } 
    
    .no-print { display: none !important; } 
    
    #cv-export-wrapper { gap: 0 !important; transform: none !important; display: block !important; }
    
    .preview-page { 
        margin: 0 !important; 
        box-shadow: none !important; 
        border: none !important; 
        width: 210mm !important; 
        /* Giảm nhẹ 0.5mm để tránh lỗi làm tròn pixel gây tràn trang */
        height: 296.5mm !important; 
        page-break-after: always !important; 
        break-after: page !important;
        page-break-inside: avoid !important; 
        overflow: hidden !important; 
    } 
    
    /* QUAN TRỌNG: JS trong main.js của bạn sẽ tự thêm class .last-page cho trang cuối cùng đang hiển thị */
    .preview-page.last-page { 
        page-break-after: auto !important; 
        break-after: auto !important;
    } 
    
    .cv-left { background-color: #f8fafc !important; } 
}