/*
Theme Name: Flatsome Child - KidsWorld - Hệ Thống Siêu Thị Mẹ Bầu & Em Bé
Theme URI: http://onepage.io.vn/
Description: Child Theme chuyên biệt chuẩn KidsPlaza cho KidsWorld - Cung cấp bởi OnePage.io.vn
Author: OnePage Studio
Author URI: http://onepage.io.vn/
Template: flatsome
Version: 1.0.0
Text Domain: flatsome-child-me-va-be
*/

/* ==========================================================================
   CSS TÙY BIẾN CHUẨN KIDSPLAZA.VN CHO KIDSWORLD
   ========================================================================== */

/* 1. Header Main & Ô Tìm Kiếm */
.header-main .header-inner {
    align-items: center !important;
}

.header-main .flex-left {
    flex: 1 1 auto !important;
    max-width: 580px !important;
    margin: 0 30px !important;
}

.header-main .header-search-form {
    width: 100% !important;
    max-width: 580px !important;
    margin: 0 !important;
}

.header-main .header-search-form-wrapper,
.header-main .searchform-wrapper,
.header-main form.searchform {
    width: 100% !important;
    margin: 0 !important;
}

.header-main .searchform-wrapper input.search-field {
    width: 100% !important;
    height: 44px !important;
    border: 2px solid #0066cc !important;
    border-radius: 25px !important;
    padding: 0 50px 0 20px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.08) !important;
    transition: all 0.2s ease !important;
}

.header-main .searchform-wrapper input.search-field:focus {
    border-color: #f37021 !important;
    box-shadow: 0 2px 12px rgba(243, 112, 33, 0.18) !important;
}

.header-main .searchform-wrapper button.submit-button {
    position: absolute !important;
    right: 3px !important;
    top: 3px !important;
    bottom: 3px !important;
    width: 44px !important;
    height: 38px !important;
    background: #0066cc !important;
    border-radius: 0 22px 22px 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.header-main .searchform-wrapper button.submit-button:hover {
    background: #f37021 !important;
}

.header-main .searchform-wrapper button.submit-button i {
    color: #ffffff !important;
    font-size: 16px !important;
}

/* 2. Cụm Tài Khoản & Giỏ Hàng Bên Phải */
.header-main .header-nav-main.nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.header-main .account-item a,
.header-main .cart-link {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1e293b !important;
}

.header-main .cart-link {
    background: #fff3e0 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    border: 1px solid #ffd8a8 !important;
    color: #f37021 !important;
}

.header-main .cart-icon strong {
    background-color: #f37021 !important;
    color: #ffffff !important;
}

/* 3. Thanh Menu Ngang Nền Xanh Chuẩn KidsPlaza */
#wide-nav,
.header-bottom {
    background-color: #0066cc !important;
    border-top: none !important;
    box-shadow: 0 3px 10px rgba(0, 102, 204, 0.15) !important;
}

.header-bottom .nav > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 12px 16px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.header-bottom .nav > li:hover > a {
    background-color: #004c99 !important;
    color: #ffeb3b !important;
}

.header-bottom .nav > li:first-child > a {
    background-color: #004c99 !important;
    color: #ffffff !important;
}

/* 4. Tùy Biến Chân Trang (Footer) Sáng Sủa Chuẩn Mẹ & Bé */
.footer-wrapper {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.absolute-footer {
    background-color: #004c99 !important;
    color: #e2e8f0 !important;
    padding: 16px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.absolute-footer .copyright-footer,
.absolute-footer a {
    color: #e2e8f0 !important;
    font-size: 13px !important;
}

.absolute-footer strong {
    color: #ffffff !important;
}