@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;700&family=Poppins:wght@300;400;500;700&family=Rubik:wght@400;500&display=swap");

/* =========================================================
   1. BẢNG MÀU CHÍNH: ĐỒNG BỘ 100% VỚI ADMIN
========================================================= */
:root {
    /* Tự động liên kết với biến màu của Admin từ header.php */
    --bg-cream: var(--gomi-bg, #FFF5F7);      
    --pink-pastel: var(--gomi-light, #FFD6E7);   
    --pink-cta: var(--gomi-primary, #FF6FAE);      
    
    --text-dark: #4A4A4A;     
    --white: #ffffff;
    /* Bóng đổ chuyển sang màu trung tính để phù hợp với mọi loại Theme */
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.08); 
}

/* =========================================================
   2. THIẾT LẬP CHUNG (GLOBAL)
========================================================= */
body:not(.dark-mode) {
    font-family: 'Poppins', 'Rubik', sans-serif;
    color: var(--text-dark) !important;
    background-color: var(--bg-cream) !important; 
    padding-bottom: 80px !important; /* Chừa chỗ cho menu mobile */
}

a { text-decoration: none !important; transition: all 0.3s ease; }
ul { list-style: none; padding: 0; margin: 0; }
button:focus { outline: none; }

/* =========================================================
   3. MÀU SẮC CHỮ VÀ GIÁ TIỀN (Tự Động)
========================================================= */
body:not(.dark-mode) .text-danger, 
body:not(.dark-mode) .price, 
body:not(.dark-mode) .home-price-display,
body:not(.dark-mode) .product-price {
    color: var(--pink-cta) !important;
    font-weight: 700;
}

body:not(.dark-mode) .text-muted {
    color: #888888 !important;
}

/* =========================================================
   4. HEADER & NAVBAR 
========================================================= */
body:not(.dark-mode) header.header-main, 
body:not(.dark-mode) .main-header {
    background: var(--pink-pastel) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

header .search-box input, .navbar input {
    border-radius: 50px; 
    border: 1px solid var(--pink-pastel); 
    padding-left: 20px;
}

/* =========================================================
   5. ĐỒNG BỘ MÀU TẤT CẢ CÁC LOẠI NÚT BẤM (BUTTONS)
========================================================= */
.btn, button, .action-btn {
    border-radius: 50px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Bắt tất cả các nút Buy Now, Add Cart, Submit... ép màu Admin */
body:not(.dark-mode) .btn-primary, 
body:not(.dark-mode) .btn-buy, 
body:not(.dark-mode) .add-to-cart,
body:not(.dark-mode) .btn[style*="linear-gradient"], 
body:not(.dark-mode) .btn[style*="#ff1493"],
body:not(.dark-mode) .btn-home-add,
body:not(.dark-mode) button[type="submit"] {
    background: var(--pink-cta) !important;
    background-image: none !important; /* Phá vỡ hiệu ứng gradient chết */
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; 
}

/* Hover tự động làm sậm màu hiện tại */
body:not(.dark-mode) .btn-primary:hover, 
body:not(.dark-mode) .btn-buy:hover, 
body:not(.dark-mode) .btn-home-add:hover,
body:not(.dark-mode) button[type="submit"]:hover {
    filter: brightness(0.85) !important; 
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* =========================================================
   6. CARD SẢN PHẨM & GIAO DIỆN CHỌN SIZE
========================================================= */
body:not(.dark-mode) .product-card, 
body:not(.dark-mode) .grid-item, 
body:not(.dark-mode) .card {
    border: none !important; 
    border-radius: 15px !important;
    background: var(--white) !important; 
    overflow: hidden; 
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

body:not(.dark-mode) .product-card:hover, 
body:not(.dark-mode) .grid-item:hover, 
body:not(.dark-mode) .card:hover {
    transform: translateY(-5px); 
    box-shadow: var(--shadow-soft);
}

/* Tiêu đề sản phẩm */
.product-title, h4, h5 {
    font-family: 'Baloo Thambi 2', cursive; 
    color: var(--text-dark);
}

/* Nút Chọn Size mềm mại hơn */
body:not(.dark-mode) .active-size,
body:not(.dark-mode) .btn-size.active {
    background-color: var(--pink-cta) !important;
    color: var(--white) !important;
    border-color: var(--pink-cta) !important;
}

/* =========================================================
   7. FIX VỊ TRÍ NÚT CHAT BỊ THẤP DƯỚI ĐÁY MÀN HÌNH
========================================================= */
#zalo-chat-widget, 
.zalo-chat-widget, 
.fb_dialog, 
.fb-customerchat,
.call-now-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    bottom: 120px !important; /* Đẩy lên cao để không bị che bởi Menu Mobile Footer */
    z-index: 2147483647 !important;
}