/* Force Orange Override - Final fix for all green colors */
:root {
    --color-global: #ff6600 !important;
    --color-txt-header: linear-gradient(90deg,#cc5200 -4%,#ff6600 98.33%) !important;
}

/* Force all green/blue colors to orange */
*[style*="#23b15b"],
*[style*="#21ac5a"], 
*[style*="#02543e"],
*[style*="#118f3e"],
*[style*="color: #23b15b"],
*[style*="color: #21ac5a"],
*[style*="color: #02543e"], 
*[style*="color: #118f3e"] {
    color: #ff6600 !important;
}

*[style*="background-color: #23b15b"],
*[style*="background-color: #21ac5a"],
*[style*="background-color: #02543e"],
*[style*="background-color: #118f3e"],
*[style*="background: #23b15b"],
*[style*="background: #21ac5a"],
*[style*="background: #02543e"],
*[style*="background: #118f3e"] {
    background-color: #ff6600 !important;
}

/* Common class overrides */
.color-global,
a.color-global,
.title-holder,
.name,
.product-name {
    color: #ff6600 !important;
}

/* Any element with green/blue background */
.bg-primary,
.bg-success,
.bg-info {
    background-color: #ff6600 !important;
}

/* Button overrides */
.btn-primary,
.btn-success,
.btn-info {
    background-color: #ff6600 !important;
    border-color: #ff6600 !important;
}

/* Text colors */
.text-primary,
.text-success,
.text-info {
    color: #ff6600 !important;
}


/* Title sections */
.title,
.heading,
.section-title {
    color: #ff6600 !important;
}

/* Logo 500x500 Responsive Styling */
.header-top .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 160px !important;
    height: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.header-top .logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
}

.header-top .logo:hover {
    transform: scale(1.02) !important;
}

/* Responsive logo cho mobile */
@media (max-width: 768px) {
    .header-top .logo {
        max-width: 140px !important;
        height: 60px !important;
    }
}

@media (max-width: 480px) {
    .header-top .logo {
        max-width: 120px !important;
        height: 50px !important;
    }
}

/* Footer layout adjustments */
.footer-main .content-footer-main {
    width: 100% !important;
}

.footer-main .content-footer-main > .d-flex {
    width: 100% !important;
}

.footer-main .content-showrrom {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 40px !important;
    width: 100% !important;
}

.footer-main .logo {
    flex-shrink: 0 !important;
    margin-right: 40px !important;
    align-self: flex-start !important;
}

.footer-main .logo img {
    max-width: 300px !important;
    height: auto !important;
}

.footer-main .list-showrrom {
    flex: 1 !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 30px !important;
    margin-top: 0 !important;
}

/* Make sure footer items align properly */
.footer-main .item-showrrom {
    min-width: 200px !important;
    flex-shrink: 0 !important;
}

.footer-main .item-showrrom .title {
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #fff !important;
    text-transform: uppercase !important;
}

/* Mobile responsive footer */
@media (max-width: 768px) {
    .footer-main .content-showrrom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }
    
    .footer-main .logo {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        align-self: center !important;
    }
    
    .footer-main .logo img {
        max-width: 250px !important;
    }
    
    .footer-main .list-showrrom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    .footer-main .item-showrrom {
        min-width: auto !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .footer-main .logo img {
        max-width: 280px !important;
    }
    
    .footer-main .list-showrrom {
        gap: 20px !important;
    }
    
    .footer-main .item-showrrom {
        min-width: 180px !important;
    }
}

/* About-us section image positioning */
.homepage .about-us-home .position-image {
    position: relative !important;
    width: 100% !important;
    min-height: 620px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 80px !important;
}

.homepage .about-us-home .position-image .image-center {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 520px !important;
    height: 460px !important;
    max-width: 90% !important;
    object-fit: cover !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

.homepage .about-us-home .position-image .image-center:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive adjustments for about image */
@media (max-width: 992px) {
    .homepage .about-us-home .position-image {
        min-height: 400px !important;
        padding-left: 40px !important;
    }
    
    .homepage .about-us-home .position-image .image-center {
        width: 440px !important;
        height: 390px !important;
    }
}

@media (max-width: 768px) {
    .homepage .about-us-home .position-image {
        min-height: 300px !important;
        margin-bottom: 30px !important;
        padding-left: 20px !important;
        justify-content: center !important;
    }
    
    .homepage .about-us-home .position-image .image-center {
        width: 360px !important;
        height: 320px !important;
    }
}

@media (max-width: 480px) {
    .homepage .about-us-home .position-image {
        min-height: 250px !important;
        padding-left: 10px !important;
    }
    
    .homepage .about-us-home .position-image .image-center {
        width: 300px !important;
        height: 260px !important;
        border-radius: 10px !important;
    }
}

/* === Footer Bottom Section Styling (Optimized) === */

.footer-bottom {
    background-color: #1a1a1a; /* Sử dụng màu nền tối, đặc thay vì trong suốt */
    border-top: 1px solid #444444; /* Thêm đường kẻ mảnh để phân tách với phần trên */
    margin-top: 30px; /* Giữ khoảng cách với nội dung footer chính */
    padding: 20px 0 !important; /* Tăng khoảng đệm cho thoáng hơn */
    text-align: center; /* Đảm bảo nội dung luôn ở giữa */
}

.footer-bottom .content-txt {
    font-size: 14px !important; /* Tăng cỡ chữ cho dễ đọc hơn */
    color: #fff !important; /* Dùng màu xám dịu, chuyên nghiệp */
    line-height: 1.6 !important;
}

/* Tinh chỉnh cho thiết bị di động */
@media (max-width: 768px) {
    .footer-bottom {
        padding: 15px !important;
    }
    
    .footer-bottom .content-txt {
        font-size: 13px !important; /* Giữ chữ đủ lớn để đọc trên điện thoại, không nên dùng 10px */
    }
}

/* Mega Menu Optimization - Full width after removing bestsellers */
.header-menu .menu-hover .content-menu-hover {
    width: 100% !important;
    max-width: 1200px !important;
}

.header-menu .menu-hover .list-holder {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 30px !important;
}

.header-menu .menu-hover .item-holder {
    flex: 1 !important;
    max-width: 200px !important;
    min-width: 180px !important;
}

/* Responsive mega menu adjustments */
@media (max-width: 1024px) {
    .header-menu .menu-hover .list-holder {
        gap: 20px !important;
    }
    
    .header-menu .menu-hover .item-holder {
        max-width: 180px !important;
        min-width: 160px !important;
    }
}

@media (max-width: 768px) {
    .header-menu .menu-hover .list-holder {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .header-menu .menu-hover .item-holder {
        max-width: 100% !important;
        min-width: auto !important;
    }
}