/* 
=================================
PHƯƠNG ÁN 1: MODERN TECH 
Bảng màu chủ đạo cho trang web bán điện thoại
=================================
*/

:root {
    /* Màu chính - Modern Tech Store */
    --primary-color: #1e293b;           /* Xám xanh đậm - Professional & Modern */
    --secondary-color: #ffffff;          /* Trắng - Sạch sẽ, tối giản */
    --accent-color: #3b82f6;             /* Xanh dương - Điểm nhấn CTA */
    --background-color: #fefefe;         /* Trắng kem dịu mắt - Không chói, thoải mái */
    --background-light: #f9fafb;         /* Background sáng hơn nhưng dịu mắt */
    
    /* Màu bổ sung */
    --text-primary: #1e293b;            /* Text chính */
    --text-secondary: #64748b;           /* Text phụ */
    --border-color: #e2e8f0;             /* Viền */
    --shadow-color: rgba(30, 41, 59, 0.1); /* Bóng đổ */
    
    /* Màu gradient cho header */
    --header-gradient: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    
    /* Màu gradient cho banner */
    --banner-gradient: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    
    /* Màu trạng thái */
    --success-color: #28a745;            /* Thành công */
    --warning-color: #ffc107;            /* Cảnh báo */
    --danger-color: #dc3545;             /* Lỗi */
    --info-color: #17a2b8;               /* Thông tin */
}

/* 
=================================
HƯỚNG DẪN SỬ DỤNG:
=================================

1. Header/Navigation: 
   background-color: var(--primary-color);
   color: var(--secondary-color);

2. Nền trang chính:
   background-color: var(--background-color);

3. Nút mua hàng/CTA:
   background-color: var(--accent-color);
   color: var(--secondary-color);

4. Text chính:
   color: var(--text-primary);

5. Giá sản phẩm (nổi bật):
   color: var(--accent-color);
   font-weight: bold;

6. Cards sản phẩm:
   background-color: var(--secondary-color);
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 4px var(--shadow-color);

7. Footer:
   background-color: var(--primary-color);
   color: var(--secondary-color);
*/

/* Ví dụ áp dụng cơ bản */
.modern-tech-theme {
    /* Header */
    .header {
        background-color: var(--primary-color);
        color: var(--secondary-color);
    }
    
    /* Nút chính */
    .btn-primary {
        background-color: var(--accent-color);
        color: var(--secondary-color);
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        background-color: #0056cc;
        transform: translateY(-1px);
    }
    
    /* Card sản phẩm */
    .product-card {
        background-color: var(--secondary-color);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 2px 8px var(--shadow-color);
        transition: all 0.3s ease;
    }
    
    .product-card:hover {
        box-shadow: 0 4px 16px var(--shadow-color);
        transform: translateY(-2px);
    }
    
    /* Giá sản phẩm */
    .price {
        color: var(--accent-color);
        font-weight: bold;
        font-size: 1.25rem;
    }
    
    /* Text */
    .text-primary {
        color: var(--text-primary);
    }
    
    .text-secondary {
        color: var(--text-secondary);
    }
}