@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:wght@700;900&display=swap');
:root {
    /* Palette màu "High Energy" */
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
    --surface: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --text-main: #1e293b;
    --text-light: #64748b;
    --highlight: #8b5cf6;
    --success: #10b981;
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
    --radius: 20px;
    --font-heading: 'Merriweather', serif; /* Font có chân cho tiêu đề */
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: #f0f9ff;
    /* Hiệu ứng nền Gradient mờ ảo */
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0; padding: 20px;
    min-height: 100vh;
}

/* --- Thanh Tiến Độ --- */
.progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 6px;
    background: #e2e8f0; z-index: 1000;
}
.progress-bar {
    height: 100%; width: 0%;
    background: var(--primary-gradient);
    transition: width 0.3s ease;
    box-shadow: var(--shadow-glow);
}

.container {
    max-width: 900px;
    margin: 40px auto;
    background: var(--surface);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.8);
    overflow: hidden;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Header --- */
header {
    padding: 40px 40px 20px;
    text-align: center;
}

h1 {
    font-size: 2.5rem; font-weight: 800; margin: 0 0 10px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.subtitle { color: var(--text-light); font-size: 1.1rem; }

/* --- Navigation Tabs --- */
.nav-tabs {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    gap: 20px; flex-wrap: wrap;
}

.tab-group { display: flex; gap: 10px; }

.tab-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: white;
    color: #6366f1;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

/* --- Right Actions --- */
.action-group {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}

.btn-result {
    background: #1e293b; color: white;
    padding: 12px 24px; border-radius: 12px;
    border: none; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
    transition: transform 0.2s;
}
.btn-result:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(30, 41, 59, 0.3); }

.link-reset {
    font-size: 0.85rem; color: #94a3b8;
    background: none; border: none; cursor: pointer;
    text-decoration: underline; transition: color 0.2s;
}
.link-reset:hover { color: #ef4444; }

/* --- Content Area --- */
.content-area { padding: 40px; min-height: 400px; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.intro-card {
    background: linear-gradient(to right, #eff6ff, #f5f3ff);
    border-left: 5px solid #6366f1;
    padding: 20px; border-radius: 12px;
    margin-bottom: 30px; color: #334155;
}

/* --- Questions --- */
.q-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.q-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
    border-color: #e0e7ff;
}

.q-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 15px; display: block; }

.options-grid { display: grid; gap: 10px; }

.opt-label {
    display: flex; align-items: center;
    padding: 15px;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.opt-label:hover { border-color: #cbd5e1; background: #f8fafc; }

/* Active State */
.opt-label:has(input:checked) {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #7c3aed;
}

.opt-label input {
    margin-right: 15px; width: 20px; height: 20px;
    accent-color: #7c3aed;
}

/* --- Footer Nav --- */
.footer-nav { margin-top: 40px; text-align: center; }
.btn-next {
    background: white; border: 2px solid #6366f1; color: #6366f1;
    padding: 15px 40px; font-size: 1.1rem; font-weight: 700;
    border-radius: 50px; cursor: pointer; transition: all 0.2s;
}
.btn-next:hover { background: #6366f1; color: white; }

.finish-btn {
    background: #1e293b; color: white; border: none;
}
.finish-btn:hover { background: #0f172a; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* --- Modal --- */
.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px);
    z-index: 2000; padding: 20px;
}
.modal-content {
    background: white; max-width: 800px; margin: 5vh auto;
    border-radius: 24px; padding: 40px; position: relative;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    max-height: 90vh; overflow-y: auto;
    animation: zoomIn 0.3s;
}
@keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.close-modal {
    position: absolute; right: 25px; top: 25px; font-size: 24px;
    cursor: pointer; color: #94a3b8; transition: 0.2s;
}
.close-modal:hover { color: #ef4444; }

.modal-header-text { text-align: center; margin-bottom: 30px; }
.modal-header-text h2 { font-size: 2rem; margin: 0; }
.modal-header-text p { color: #64748b; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.res-box { 
    background: #f8fafc; padding: 25px; border-radius: 16px; text-align: center; 
    border: 1px solid #e2e8f0;
}
.res-val { 
    font-size: 2.5rem; font-weight: 800; display: block; margin: 10px 0;
    background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.res-box small { color: #64748b; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95rem; }
th { background: #f1f5f9; text-align: left; padding: 12px; color: #64748b; font-size: 0.85rem; text-transform: uppercase; }
td { border-bottom: 1px solid #e2e8f0; padding: 12px; }

.alert-box {
    display:none; padding: 20px; text-align: center; 
    color: #ef4444; background: #fef2f2; border-radius: 8px; margin-top: 10px;
}
.modal-footer { text-align: center; margin-top: 30px; }

@media (max-width: 600px) {
    .nav-tabs { flex-direction: column; align-items: stretch; }
    .action-group { align-items: stretch; margin-top: 10px; }
    .btn-result { text-align: center; }
    .result-grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.8rem; }
}
h1, h2, h3, .q-title, .modal-header-text h2 {
    font-family: var(--font-heading); /* Áp dụng Merriweather cho tiêu đề */
    letter-spacing: -0.5px; /* Thu hẹp khoảng cách chữ một chút cho chặt chẽ */
}
.res-val {
    font-family: var(--font-heading);}
/* ... Giữ nguyên phần :root và body cũ ... */
:root {
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --surface: rgba(255, 255, 255, 0.95);
    --text-main: #1e293b;
    --radius: 20px;
}

/* --- THÊM PHẦN STYLE CHO CỔNG CHÀO (WELCOME GATE) --- */
#welcome-screen { text-align: center; padding-bottom: 20px; }

.gate-box {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.1);
    padding: 10px; /* Tạo viền trắng */
}

.gate-content {
    background: #f8fafc;
    padding: 30px;
    border-radius: 18px;
    border: 1px dashed #cbd5e1;
}

.gate-content h3 { margin-top: 0; color: #1e293b; font-size: 1.5rem; }

.form-group { margin-bottom: 20px; text-align: left; }
.form-group label {
    display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: #475569;
}
.form-group input {
    width: 100%; padding: 14px;
    border: 1px solid #e2e8f0; border-radius: 12px;
    font-size: 1rem; transition: all 0.2s; outline: none;
}
.form-group input:focus {
    border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.btn-start {
    width: 100%; padding: 16px;
    background: var(--primary-gradient);
    color: white; font-weight: 800; font-size: 1.1rem;
    border: none; border-radius: 12px;
    cursor: pointer; margin-top: 10px;
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s;
}
.btn-start:hover { transform: translateY(-3px); }

.privacy-note { font-size: 0.8rem; color: #94a3b8; margin-top: 15px; }

/* ... Giữ nguyên các phần CSS cũ (progress-bar, q-card, modal...) ... */
/* Nếu bạn copy đè thì hãy dán đè toàn bộ nội dung file css cũ bằng file css này nếu muốn chắc chắn,
   nhưng phần trên chỉ là bổ sung. Để an toàn, hãy giữ lại phần CSS cũ và paste đoạn trên vào cuối file */