/* --- General Styles for Tre Tre --- */
body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #f9f8f6;
    color: #444;
    /* T?o kho?ng tr?ng ? ??u trang ?? header c? ??nh không che m?t n?i dung */
    padding-top: 90px;
}

/* --- Header --- */
.navbar .nav-link {
    font-weight: 500;
    margin: 0 0.5rem;
}

    .navbar .nav-link.active {
        font-weight: 700;
        color: #3A5C43 !important;
    }

/* --- Footer --- */
.main-footer {
    background-color: #3A5C43; /* Màu xanh rêu ??m */
}

    .main-footer a {
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .main-footer a:hover {
            text-decoration: underline;
            opacity: 0.8;
        }

.footer-bottom {
    background-color: #000000;
    color: #ccc;
    font-size: 0.9rem;
}

/* --- Other Custom Styles --- */
.btn-custom-green {
    background-color: #6A8B4C;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .btn-custom-green:hover {
        background-color: #59773d;
        color: white;
    }

.product-card {
    transition: all 0.3s ease;
}

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

/* --- Custom Header Styles --- */
.header-custom {
    background-color: #3A5C43; /* Màu xanh rêu ??m gi?ng footer */
}

    /* ??m b?o các icon (tìm ki?m, ng??i dùng, gi? hàng) c?ng có màu tr?ng */
    .header-custom .d-flex .btn {
        color: #ffffff;
    }

    /* Tùy ch?nh màu cho link menu ?ang active ?? n?i b?t h?n */
    .header-custom .navbar-nav .nav-link.active {
        color: #f0f0f0 !important;
        font-weight: 700;
    }

/* --- Custom Green Button (Nếu bạn đã có thì bỏ qua) --- */
.btn-custom-green {
    background-color: #3A5C43; /* Màu xanh rêu đậm */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

    .btn-custom-green:hover {
        background-color: #2e4935; /* Màu xanh đậm hơn khi di chuột qua */
        color: white;
    }

/* --- Custom Green Text Link (Class mới) --- */
.text-custom-green {
    color: #3A5C43; /* Màu xanh rêu đậm */
    text-decoration: none;
}

    .text-custom-green:hover {
        color: #2e4935; /* Màu xanh đậm hơn khi di chuột qua */
        text-decoration: underline;
    }

/* --- TÙY CHỈNH MÀU SẮC CHO TRANG SẢN PHẨM --- */

/* Ghi đè màu của nút primary (dùng cho nút "Apply Filters") */
.btn-primary {
    background-color: #3A5C43;
    border-color: #3A5C43;
}

    .btn-primary:hover {
        background-color: #2e4935; /* Màu xanh đậm hơn khi di chuột qua */
        border-color: #2e4935;
    }

/* Ghi đè màu của nút outline-primary (dùng cho nút "View Details") */
.btn-outline-primary {
    color: #3A5C43;
    border-color: #3A5C43;
}

    .btn-outline-primary:hover {
        background-color: #3A5C43;
        color: #fff;
    }

/* Ghi đè màu của chữ primary (dùng cho giá tiền) */
.text-primary {
    color: #3A5C43 !important; /* !important để chắc chắn ghi đè */
}

/* Class tùy chỉnh cho tiêu đề "Filters" */
.filter-header {
    color: #3A5C43;
    font-weight: bold;
}

/* --- Custom Page Header Style --- */
.page-header h1 {
    color: #3A5C43; /* Màu xanh rêu chủ đạo */
}

.page-header hr {
    border-top: 2px solid #3A5C43;
    width: 80px; /* Độ rộng của gạch chân */
    opacity: 1; /* Hiển thị rõ nét */
}

/* --- Testimonials Section --- */
.testimonials-section {
    background-color: #f8f9fa; /* Màu nền xám rất nhạt */
    padding: 60px 0;
}

    /* Thêm hiệu ứng nhẹ cho card đánh giá */
    .testimonials-section .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .testimonials-section .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
        }

/* --- About Page Section Styles --- */
.about-page .section-heading {
    color: #3A5C43; /* Màu xanh lá cây */
    font-weight: bold;
    position: relative; /* Cần thiết cho gạch chân */
    display: inline-block; /* Để gạch chân vừa với chữ */
    padding-bottom: 8px; /* Khoảng cách giữa chữ và gạch chân */
}

    /* Tạo gạch chân màu cam */
    .about-page .section-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px; /* Độ dài gạch chân */
        height: 3px; /* Độ dày gạch chân */
        background-color: #f39c12; /* Màu cam */
    }

/* Căn giữa gạch chân cho tiêu đề căn giữa */
.about-page .text-center .section-heading::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Thêm chút khoảng cách và nền cho các khối */
.about-page .section-block {
    /* background-color: #fdfdfd; */ /* Tùy chọn: nền hơi khác biệt */
    /* border-radius: 8px; */ /* Tùy chọn: bo góc nhẹ */
    /* padding: 3rem 1.5rem; */ /* Tùy chọn: thêm padding */
    margin-bottom: 3rem !important; /* Đảm bảo khoảng cách giữa các section */
}

/* --- TÙY CHỈNH MÀU CHO THANH TIẾN TRÌNH CHECKOUT --- */

.checkout-steps .nav-link.active {
    background-color: #3A5C43; /* Màu xanh rêu header/footer */
    color: white; /* Đổi màu chữ thành trắng cho dễ đọc */
    /* Có thể bỏ border nếu muốn */
    /* border: 1px solid #3A5C43; */
}

/* Tùy chọn: Đổi màu cho bước chưa hoàn thành (disabled) nếu muốn */
/*
.checkout-steps .nav-link.disabled {
    background-color: #e9ecef;
    color: #6c757d;
}
*/