/*
 Theme Name:   Envo eCommerce Child Theme (Diep Suong)
 Theme URI:    https://diepsuong.com/
 Description:  Giao diện Con An toàn cho Theme Envo eCommerce
 Author:       Diep Suong Shop
 Author URI:   https://diepsuong.com/
 Template:     envo-ecommerce
 Version:      1.0.0
*/
/* =======================================================
   BẮT ĐẦU CSS TÙY CHỈNH: ĐỎ, CHÂN TRANG TRẮNG, CỘT TRÁI
   ======================================================= */

/* --- 1. CSS THAY ĐỔI MÀU CHỦ ĐẠO (TỪ VÀNG SANG ĐỎ: #DC3545) - ĐỘ ƯU TIÊN CAO HƠN --- */

/* 1. Màu nền (Background Color) cho NÚT chính (Add to cart, Xem giỏ hàng) */
/* Cần ghi đè mạnh mẽ cho cả trang chi tiết sản phẩm (div.product) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce .widget_shopping_cart_content .buttons .button,
.woocommerce .return-to-shop .button,
.woocommerce div.product form.cart .button, /* Nút Thêm vào giỏ hàng trên trang SP */
.woocommerce div.product .single_add_to_cart_button {
    background-color: #DC3545 !important; /* Màu ĐỎ chủ đạo */
    color: #ffffff !important; 
    border: 1px solid #DC3545 !important;
}

/* 2. Màu nền (Background Color) khi rê chuột qua NÚT chính */
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce .widget_shopping_cart_content .buttons .button:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
    background-color: #E85564 !important; /* ĐỎ nhạt hơn khi hover */
    border-color: #E85564 !important;
}

/* 3. Màu chữ/biểu tượng cho các LIÊN KẾT, TIÊU ĐỀ, và các icon */
/* Thêm các selector cụ thể cho trang sản phẩm */
a,
a:not(.navbar-brand), 
a:not(.navbar-brand):hover, 
a:not(.navbar-brand):focus,
.main-menu-content .navbar-nav li a:hover,
.product-inner-wrap .woocommerce-loop-product__title a:hover,
.widget-title a:hover,
.menu-item-has-children .sub-menu li a:hover,
.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.button),
.header-widget-area i,
.amount-cart,
.cart-contents span.count,
.nav > li.active > a:after, .current-page-parent:after,
.woocommerce div.product .product_title,
.woocommerce .star-rating span:before { /* Ghi đè màu sao rating */
    color: #DC3545 !important; /* Màu ĐỎ chủ đạo */
    background-color: transparent !important;
}

/* 4. Đảm bảo nền icon cart, sale badge vẫn là màu đỏ */
.amount-cart,
.cart-contents span.count,
.onsale {
    background-color: #DC3545 !important;
    color: #ffffff !important;
}
.amount-cart:before {
    border-right-color: #DC3545 !important;
}

/* 5. Màu VIỀN (Border) cho các thành phần được nhấn mạnh */
.woocommerce-product-gallery__trigger:hover {
    border-color: #DC3545 !important;
}
/* BỘ CHỌN QUAN TRỌNG: Ghi đè màu link chung, đặc biệt khi Admin đang đăng nhập */
a,
a:not(.navbar-brand), 
a:not(.navbar-brand):hover, 
a:not(.navbar-brand):focus,
.main-menu-content .navbar-nav li a:hover,
.product-inner-wrap .woocommerce-loop-product__title a, /* Thêm selector cho link tiêu đề sản phẩm */
.product-inner-wrap .woocommerce-loop-product__title a:hover,
.widget-title a:hover,
.menu-item-has-children .sub-menu li a:hover,
.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart__buttons a:not(.button),
.header-widget-area i,
.amount-cart,
.cart-contents span.count,
.nav > li.active > a:after, .current-page-parent:after,
.woocommerce div.product .product_title,
.woocommerce .star-rating span:before { 
    color: #DC3545 !important; /* Màu ĐỎ chủ đạo */
    background-color: transparent !important;
}

/* --- 2. CSS ĐỔI MÀU CHÂN TRANG (FOOTER) SANG TRẮNG/XÁM NHẠT --- */

/* Thay đổi màu nền chân trang chính (Footer Widget Area) */
.footer-widget-area {
    background-color: #ffffff !important; /* Màu TRẮNG tinh */
    border-top: none !important; 
}

/* Thay đổi màu chữ trong chân trang (sang Xám đậm) */
.footer-widget-area,
.footer-widget-area a,
.footer-widget-area li,
.footer-widget-area p {
    color: #333333 !important; 
}

/* Thay đổi màu nền khu vực bản quyền (Site Info) */
.site-info {
    background-color: #f7f7f7 !important; /* Màu Xám nhạt */
    color: #666666 !important; /* Màu chữ xám nhạt hơn */
}
.site-info .footer-credits-text {
    color: #666666 !important;
}

/* Đổi màu chữ khi rê chuột trong chân trang */
.footer-widget-area a:hover {
    color: #DC3545 !important; /* Màu ĐỎ chủ đạo */
}

/* --- 3. CSS CHUYỂN CỘT SANG TRÁI (LEFT SIDEBAR) - PHIÊN BẢN GHI ĐÈ MẠNH HƠN --- */

/* 1. Thiết lập Flexbox và đảo ngược thứ tự cho mọi độ phân giải màn hình */
/* (Sử dụng selector mạnh hơn để ghi đè các container có liên quan) */
/* Cần đảm bảo container chính này là .site-content .row hoặc .col-md-9 và .col-md-3 */
.site-content > .container > .row {
    display: flex !important;
    /* Đảo ngược thứ tự các phần tử con: Sidebar (col-md-3) sẽ nằm trước Main Content (col-md-9) */
    flex-direction: row-reverse !important; 
}

/* 2. Điều chỉnh lề (Margin/Padding) cho cột Nội dung Chính (Main Content) */
/* Cột Main Content phải chiếm 75% chiều rộng và nằm bên phải */
.content-area.col-md-9 {
    /* Đảm bảo không bị lề bị ảnh hưởng bởi Flexbox */
    padding-left: 15px !important; 
    padding-right: 15px !important; 
}

/* 3. Điều chỉnh lề cho Cột Bên (Sidebar) */
/* Cột Sidebar phải chiếm 25% chiều rộng và nằm bên trái */
.widget-area.col-md-3 {
    /* Đảm bảo không bị lề bị ảnh hưởng bởi Flexbox */
    padding-right: 15px !important; 
    padding-left: 15px !important; 
}

/* KẾT THÚC CSS CHUYỂN CỘT */

/* =======================================================
   KẾT THÚC CSS TÙY CHỈNH
   ======================================================= */