/* ==========================================================================
   BỘ BIẾN CẤU HÌNH GIAO DIỆN KHÁCH HÀNG (CLIENT THEME VARIABLES)
   Phiên bản: 2.0 (Cập nhật chuẩn theo HDTEG Brand Guidelines 2025)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@400;600;700&display=swap');

:root {
    /* 1. MÀU SẮC THƯƠNG HIỆU (Theo Trang 8 - Brand Guidelines) */
    --client-primary: #3777bc; /* Xanh HDTEG (Pantone 660 C) */
    --client-gray: #6d6e71; /* Xám HDTEG (Pantone 424 C) - Dùng cho Text phụ/Icon */
    /* 2. DẢI MÀU HỖ TRỢ (Theo Trang 9 - Brand Guidelines) */
    --client-primary-dark: #1f3a60; /* Xanh Analogous đậm - Dùng cho Hover Nút, Nền Footer */
    --client-primary-light: #5fa3e8; /* Xanh Analogous sáng */

    --client-neutral-light: #e1e4e8; /* Xám trung tính sáng - Dùng cho nền Mega Menu, viền */
    --client-neutral-dark: #3c3c3c; /* Xám đen - Dùng cho màu chữ chính (Body Text) */

    --client-accent: #f28c38; /* Cam Complementary - MÀU NHẤN MẠNH (Giá, Nút Hotline) */
    --client-accent-hover: #e46f4a; /* Cam đỏ (Modern Accent) - Khi hover nút nhấn mạnh */
    /* 3. TYPOGRAPHY (FONT CHỮ - Theo Trang 10) */
    --client-font-family: 'Montserrat', sans-serif; /* Font sạch sẽ cho nội dung dài */
    --client-font-heading: 'SUSE', sans-serif; /* Font thương hiệu cho Tiêu đề, Slogan */

    --client-text-color: var(--client-neutral-dark);
    --client-text-muted: var(--client-gray);
    /* 4. HEADER & MENU NAVBAR */
    /* Khuyến nghị Header nền Trắng để làm nổi bật Logo màu Xanh (Trang 15 Guidelines) */
    --client-header-bg: #ffffff;
    --client-header-text: var(--client-primary-dark);
    --client-header-hover-text: var(--client-primary);
    --client-header-hover-bg: #f5f7f9;
    /* 5. FOOTER (CHÂN TRANG) */
    --client-footer-bg: var(--client-primary-dark); /* Dùng màu xanh đậm #1F3A60 cho sang trọng */
    --client-footer-text: #ffffff;
    /* 6. E-COMMERCE (BÁN HÀNG) */
    --client-price-color: var(--client-accent); /* Giá tiền dùng màu Cam Tương phản #F28C38 */
    --client-product-border: var(--client-neutral-light); /* Viền ô sản phẩm màu xám nhạt #E1E4E8 */
    --client-product-hover-shadow: 0 10px 25px rgba(31, 58, 96, 0.1); /* Bóng đổ ám màu xanh đậm thương hiệu */
    /* 7. HÌNH DÁNG (SHAPES & BORDERS) */
    --client-border-radius: 4px; /* Bo góc nhẹ tương đồng với nét chữ HDTEG */
}

/* ==========================================================================
   ÁP DỤNG BIẾN VÀO CÁC THÀNH PHẦN CORE CỦA WEBSITE
   ========================================================================== */
body {
    font-family: var(--client-font-family);
    color: var(--client-text-color);
    background-color: #ffffff;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .slogan-text {
    font-family: var(--client-font-heading); /* Áp dụng font SUSE cho tiêu đề */
    color: var(--client-primary-dark);
    font-weight: 700;
}

/* Các lớp tiện ích màu sắc */
.text-primary-theme {
    color: var(--client-primary) !important;
}

.bg-primary-theme {
    background-color: var(--client-primary) !important;
}

.text-accent {
    color: var(--client-accent) !important;
}

/* Nút bấm (Buttons) */
.btn-theme {
    background-color: var(--client-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--client-border-radius);
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-theme:hover {
        background-color: var(--client-primary-dark); /* Đổi sang màu Xanh đậm khi hover */
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(55, 119, 188, 0.4);
    }

/* Nút Nhấn mạnh (Call-to-action chính như: Gửi Yêu Cầu Báo Giá) */
.btn-accent {
    background-color: var(--client-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--client-border-radius);
    font-weight: 700;
    transition: all 0.3s ease;
}

    .btn-accent:hover {
        background-color: var(--client-accent-hover);
        color: #ffffff;
    }

/* Form Inputs */
.form-control {
    border-radius: var(--client-border-radius);
    border-color: var(--client-neutral-light);
}

    .form-control:focus {
        border-color: var(--client-primary);
        box-shadow: 0 0 0 0.25rem rgba(55, 119, 188, 0.2);
    }

/* Header Navbar */
.main-navbar {
    background-color: var(--client-header-bg);
    border-bottom: 1px solid var(--client-neutral-light);
}

    .main-navbar .nav-link {
        color: var(--client-header-text) !important;
        font-family: var(--client-font-heading);
        font-weight: 600;
        text-transform: uppercase;
        padding: 15px 20px;
        letter-spacing: 0.5px;
        transition: color 0.2s ease;
    }

        .main-navbar .nav-link:hover, .main-navbar .nav-link.active {
            color: var(--client-header-hover-text) !important;
        }

/* Footer */
.site-footer {
    background-color: var(--client-footer-bg);
    color: var(--client-footer-text);
}

    .site-footer a {
        color: var(--client-neutral-light);
        text-decoration: none;
        transition: color 0.2s;
    }

        .site-footer a:hover {
            color: var(--client-accent);
        }

/* Product Grid (E-commerce) */
.product-card {
    border: 1px solid var(--client-product-border);
    border-radius: var(--client-border-radius);
    transition: all 0.3s ease;
    background: #fff;
    overflow: hidden;
}

    .product-card:hover {
        box-shadow: var(--client-product-hover-shadow);
        transform: translateY(-5px);
        border-color: var(--client-primary-light);
    }

.product-price {
    color: var(--client-price-color);
    font-family: var(--client-font-heading); /* Font SUSE cho giá tiền */
    font-weight: 700;
    font-size: 1.3rem;
}