/*
Theme Name: flatsome-child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM ZESTY BRANDING CSS HERE.   ***************/

:root {
    --zesty-pink: #ffb0b6;
    --zesty-pink-hover: #ff9da4;
    --zesty-yellow: #ffe57b;
    --zesty-yellow-hover: #ffd948;
    --zesty-bg: #fef3ee;
    --zesty-dark: #333333;
    --zesty-text: #4a4a4a;
}

/* 1. Thiết lập màu nền toàn trang và màu chữ */
body {
    background-color: var(--zesty-bg) !important;
    color: var(--zesty-text);
    font-family: "Be Vietnam Pro", sans-serif;
}

/* 2. Đổi màu toàn bộ hệ thống Header của Flatsome để loại bỏ màu xanh mặc định */
.header-main {
    background-color: var(--zesty-bg) !important;
}

#top-bar {
    background-color: var(--zesty-bg) !important;
}

.header-bottom {
    background-color: var(--zesty-pink) !important;
}

/* Đổi màu menu và liên hệ trên header bottom */
.header-bottom-nav > li > a {
    color: #ffffff !important;
}
.header-bottom-nav > li > a:hover {
    color: var(--zesty-yellow) !important;
}

/* Đổi màu nút search */
.searchform button[type="submit"] {
    background-color: var(--zesty-pink) !important;
    border-color: var(--zesty-pink) !important;
    color: #ffffff !important;
}
.searchform button[type="submit"]:hover {
    background-color: var(--zesty-pink-hover) !important;
    border-color: var(--zesty-pink-hover) !important;
}

/* 3. Đồng bộ màu sắc nút bấm và hiệu ứng hover */
.button.primary, .btn-primary, .is-primary, button[type="submit"]:not(.search-submit) {
    background-color: var(--zesty-pink) !important;
    border-color: var(--zesty-pink) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    border-radius: 99px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.button.primary:hover, .btn-primary:hover, button[type="submit"]:hover {
    background-color: var(--zesty-pink-hover) !important;
    border-color: var(--zesty-pink-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 176, 182, 0.4);
}

.button.secondary, .btn-secondary, .is-secondary {
    background-color: var(--zesty-yellow) !important;
    border-color: var(--zesty-yellow) !important;
    color: var(--zesty-dark) !important;
    transition: all 0.3s ease;
    border-radius: 99px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.button.secondary:hover, .btn-secondary:hover {
    background-color: var(--zesty-yellow-hover) !important;
    border-color: var(--zesty-yellow-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 229, 123, 0.4);
}

/* 4. Tối ưu UI giỏ hàng & thanh toán */
.checkout-button, .checkout-button:hover {
    font-size: 1.1em !important;
    padding: 10px 20px !important;
}

.order-total, .cart-subtotal, .shipping {
    font-weight: bold !important;
}

.order-total td strong span {
    color: var(--zesty-pink) !important;
    font-size: 1.3em !important;
    font-weight: 800 !important;
}

/* Đổi màu giá sản phẩm sang màu đỏ nổi bật */
.price, .price ins, .price .amount, ins .amount, .amount {
    color: #e53e3e !important;
    font-weight: bold !important;
}

.price del, .price del .amount {
    color: #a0aec0 !important;
    font-weight: normal !important;
    font-size: 0.85em !important;
}

/* Form input styling */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
    background-color: #ffffff !important;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: var(--zesty-pink) !important;
    box-shadow: 0 0 5px rgba(255, 176, 182, 0.5) !important;
}

/* 5. Responsive Product Layout */
@media (max-width: 549px) {
    .products.row-small .col {
        width: 50% !important;
        max-width: 50% !important;
        flex-basis: 50% !important;
    }
}

/* Ẩn hoàn toàn phần bài viết/portfolio liên quan bị lỗi */
.related-posts,
#related-posts,
.blog-related-posts,
.portfolio-related-posts,
.related-portfolio,
.related-posts-wrapper,
.related.posts {
    display: none !important;
}