/* ============================================
   SHARED LIGHT THEME — truong.me product pages
   Apply to: all pages using style.css (dark-first)
   ============================================ */

/* --- Root Variables Override --- */
[data-theme="light"] {
    --bg: #f8fafc;
    --text: #0f172a;
    --text-sec: #475569;
    --text-muted: #475569;
    --bg-card: rgba(0,0,0,0.02);
    --bg-card-hover: rgba(0,0,0,0.04);
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.15);
    --green: #059669;
    --primary-glow: rgba(2,132,199,0.15);
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --accent-soft: rgba(2,132,199,0.1);
    --card-bg: #ffffff;
    --border-color: rgba(0,0,0,0.08);
}

/* --- Body --- */
[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* --- Background Glows --- */
[data-theme="light"] .bg-glow { opacity: 0.06 !important; }

/* --- Navigation --- */
[data-theme="light"] nav,
[data-theme="light"] #navbar {
    background: rgba(248,250,252,0.85) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] nav.scrolled { background: rgba(248,250,252,0.95) !important; }
[data-theme="light"] .logo, [data-theme="light"] .nav-brand { color: #0f172a !important; }
[data-theme="light"] .logo span, [data-theme="light"] .nav-brand span { color: #0284c7 !important; }
[data-theme="light"] .nav-links a { color: #475569 !important; }
[data-theme="light"] .nav-links a:hover { color: #0f172a !important; }
[data-theme="light"] .nav-links.show { background: rgba(248,250,252,0.98) !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .hamburger span { background: #0f172a !important; }
[data-theme="light"] .btn-nav { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.08) !important; color: #0f172a !important; }
[data-theme="light"] .btn-nav:hover { background: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .icon-toggle { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.08) !important; color: #475569 !important; }
[data-theme="light"] .pill-toggle { background: rgba(0,0,0,0.05) !important; }
[data-theme="light"] .pill-option.active { color: #ffffff !important; background: #0284c7 !important; }
[data-theme="light"] .dropdown-menu { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
[data-theme="light"] .dropdown-menu::before { border-bottom-color: #ffffff !important; }
[data-theme="light"] .dropdown-menu a { color: #475569 !important; }
[data-theme="light"] .dropdown-menu a:hover { background: rgba(0,0,0,0.04) !important; color: #0f172a !important; }

/* --- Hero --- */
[data-theme="light"] .hero h1,
[data-theme="light"] .hero-content h1 { color: #0f172a !important; }
[data-theme="light"] .hero-desc,
[data-theme="light"] .hero p { color: #475569 !important; }
[data-theme="light"] .version-pill { background: rgba(2,132,199,0.08) !important; border-color: rgba(2,132,199,0.15) !important; color: #0284c7 !important; }
[data-theme="light"] .stat-number { color: #0f172a !important; }
[data-theme="light"] .stat-label { color: #64748b !important; }
[data-theme="light"] .stat-divider { background: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .hero-stats { border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .btn-outline { color: #0f172a !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="light"] .btn-outline:hover { background: rgba(0,0,0,0.04) !important; }

/* --- App Preview --- */
[data-theme="light"] .app-preview { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.08) !important; }
[data-theme="light"] .preview-titlebar { background: rgba(0,0,0,0.02) !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .titlebar-text { color: #64748b !important; }
[data-theme="light"] .mini-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mini-card.active { border-color: rgba(0,210,106,0.3) !important; background: rgba(0,210,106,0.04) !important; }
[data-theme="light"] .mini-name { color: #0f172a !important; }
[data-theme="light"] .preview-footer { color: #64748b !important; border-top-color: rgba(0,0,0,0.06) !important; }

/* --- Section Headers --- */
[data-theme="light"] .section-header h2,
[data-theme="light"] h2 { color: #0f172a !important; }
[data-theme="light"] .section-header p { color: #475569 !important; }
[data-theme="light"] .section-badge { background: rgba(2,132,199,0.08) !important; color: #0284c7 !important; border-color: rgba(2,132,199,0.15) !important; }

/* --- Feature Cards --- */
[data-theme="light"] .feature-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .feature-card:hover { border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; }
[data-theme="light"] .feature-card h3 { color: #0f172a !important; }
[data-theme="light"] .feature-card p { color: #475569 !important; }
[data-theme="light"] .feature-icon { background: rgba(2,132,199,0.08) !important; color: #0284c7 !important; }

/* --- Step Cards --- */
[data-theme="light"] .step-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .step-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; }
[data-theme="light"] .step-card h3 { color: #0f172a !important; }
[data-theme="light"] .step-card p { color: #475569 !important; }
[data-theme="light"] .step-number { color: rgba(2,132,199,0.3) !important; }
[data-theme="light"] kbd { background: rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #0f172a !important; }
[data-theme="light"] code { background: rgba(0,0,0,0.05) !important; color: #0f172a !important; }

/* --- Shortcuts / Shortcut Cards --- */
[data-theme="light"] .shortcut-card,
[data-theme="light"] .shortcut-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .shortcut-card h3,
[data-theme="light"] .shortcut-item h3 { color: #0f172a !important; }
[data-theme="light"] .shortcut-card p,
[data-theme="light"] .shortcut-item p { color: #475569 !important; }
[data-theme="light"] .kbd, [data-theme="light"] .key {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* --- Timeline / Changelog --- */
[data-theme="light"] .timeline::before { background: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .timeline-version { color: #0f172a !important; }
[data-theme="light"] .timeline-date { color: #64748b !important; }
[data-theme="light"] .timeline-content {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin-top: 8px !important;
}
[data-theme="light"] .timeline-content ul li { color: #475569 !important; }

/* --- Timeline Markers & Tags --- */
[data-theme="light"] .timeline-marker {
    background: #cbd5e1 !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .timeline-item.current .timeline-marker {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 8px rgba(2,132,199,0.3) !important;
}
[data-theme="light"] .tag-latest {
    background: #059669 !important;
    color: #ffffff !important;
}
[data-theme="light"] .timeline-content ul li::before {
    color: #0284c7 !important;
}

/* --- FAQ --- */
[data-theme="light"] .faq-item { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .faq-question {
    color: #0f172a !important;
    background: rgba(0,0,0,0.01) !important;
}
[data-theme="light"] .faq-question:hover { background: rgba(0,0,0,0.03) !important; }
[data-theme="light"] .faq-question i { color: #64748b !important; }
[data-theme="light"] .faq-answer { background: rgba(0,0,0,0.01) !important; }
[data-theme="light"] .faq-answer p { color: #475569 !important; }
[data-theme="light"] .faq-answer a { color: #0284c7 !important; }

/* --- Footer (Light) --- */
[data-theme="light"] footer {
    background: #f1f5f9 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    color: #64748b !important;
}
[data-theme="light"] footer a { color: #475569 !important; }
[data-theme="light"] footer a:hover { color: #0f172a !important; }
[data-theme="light"] footer p { color: #64748b !important; }
[data-theme="light"] footer p a { color: #0284c7 !important; }

/* --- Install CTA --- */
[data-theme="light"] .install-cta { background: transparent !important; }

/* --- Gradient Text --- */
[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --- Buttons --- */
[data-theme="light"] .btn-primary { box-shadow: 0 2px 8px rgba(2,132,199,0.2) !important; }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 12px rgba(2,132,199,0.3) !important; }

/* --- Misc --- */
[data-theme="light"] .hero-visual .app-mockup { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .download-info { color: #64748b !important; }

/* --- Zalo-style FAQ (uses .faq-item h3/p instead of .faq-question) --- */
[data-theme="light"] .faq-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .faq-item h3 { color: #0f172a !important; }
[data-theme="light"] .faq-item p { color: #475569 !important; }
[data-theme="light"] .faq-list { margin-left: auto !important; margin-right: auto !important; }

/* --- Universal Section Headings --- */
[data-theme="light"] section h2 { color: #0f172a !important; }
[data-theme="light"] section > p { color: #475569 !important; }
[data-theme="light"] section h3 { color: #0f172a !important; }

/* --- Changelog List Items --- */
[data-theme="light"] .changelog-list li,
[data-theme="light"] .changelog-item { color: #475569 !important; }
[data-theme="light"] .changelog-item h3 { color: #0f172a !important; }
[data-theme="light"] .tag-fix, [data-theme="light"] .tag-new, [data-theme="light"] .tag-improve { opacity: 0.9; }

/* --- Nav Scrolled --- */
[data-theme="light"] .navbar { background: rgba(248,250,252,0.85) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
[data-theme="light"] .navbar.scrolled { background: rgba(248,250,252,0.95) !important; }

/* ============================================
   LAYOUT FIXES (apply to ALL themes)
   ============================================ */

/* Center FAQ list */
.faq-list {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center section headers */
.section-header {
    text-align: center;
}
.section-header p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Zalo-style section labels/titles/desc — center them */
.section-label,
.section-title,
.section-desc {
    text-align: center !important;
}
.section-desc {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Standardized Footer (all pages) ---- */
footer {
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 40px 24px !important;
    text-align: center !important;
    font-size: 13px;
    color: var(--text-muted, #8a8a9a);
}
footer .footer-links-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
footer .footer-links-row a {
    color: var(--text-sec, #8a8a9a);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}
footer .footer-links-row a:hover {
    color: var(--text, #f0f0f5);
}
footer > p {
    color: var(--text-muted, #8a8a9a);
    font-size: 13px;
    margin: 0;
}
footer > p a {
    color: var(--primary, #0068ff);
    text-decoration: none;
}
footer > p a:hover {
    text-decoration: underline;
}