/* ===== Main CSS - Shared Styles ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Nude Color Palette - Multiple Shades */
    --color-primary: #d4a574;        /* Warm beige */
    --color-secondary: #9b59b6;      /* Purple */
    --color-accent: #e8d5b7;         /* Light cream */
    
    /* Additional Nude Colors */
    --nude-1: #d4a574;               /* Warm beige */
    --nude-2: #c9a882;               /* Soft tan */
    --nude-3: #b8956a;               /* Medium beige */
    --nude-4: #d4c4a8;               /* Sand beige */
    --nude-5: #e6d3b3;               /* Pale beige */
    --nude-6: #c4a77d;               /* Muted tan */
    
    --color-success: #4caf50;        /* Green */
    --color-warning: #ff9800;        /* Orange */
    --color-error: #f44336;          /* Red */
    
    /* Text Colors - Giữ màu cũ */
    --text-primary: #333;            /* Dark gray (màu cũ) */
    --text-secondary: #666;          /* Medium gray (màu cũ) */
    --text-light: #999;              /* Light gray (màu cũ) */
    --text-white: #ffffff;           /* White (màu cũ) */
    
    /* Background Colors - Nude + Purple */
    --bg-primary: #faf8f5;           /* Cream white */
    --bg-secondary: #f5f1eb;          /* Light beige */
    --bg-dark: #1a1a1a;              /* Dark (màu cũ) */
    --bg-dark-secondary: #2d2d2d;    /* Medium dark (màu cũ) */
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 25px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(155, 89, 182, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --text-primary: #ffffff;        /* White (màu cũ) */
    --text-secondary: #b0b0b0;       /* Light gray (màu cũ) */
    --text-light: #888;              /* Gray (màu cũ) */
    --bg-primary: #1a1a1a;           /* Dark (màu cũ) */
    --bg-secondary: #2d2d2d;          /* Medium dark (màu cũ) */
    --bg-dark: #0a0a0a;              /* Very dark (màu cũ) */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: background var(--transition-normal), color var(--transition-normal);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Typography - In đậm hơn */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;  /* Tăng từ 700 lên 800 */
    line-height: 1.2;
    color: var(--text-primary);
}

h1 {
    font-weight: 900;  /* H1 cực đậm */
}

p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-weight: 500;  /* Thêm font-weight cho paragraph */
}

strong, b {
    font-weight: 700;  /* In đậm hơn */
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #1a1a1a;  /* Màu tối thay vì trắng */
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 700;  /* Tăng từ 600 lên 700 */
    border: none;
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    font-size: 1rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--text-white);
}

.btn-secondary:hover {
    background: var(--text-white);
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
}