/* ============================================================
   BÉ BỤ BẪM — Brand Override v2.1 (Tuscan Mom Vietnam)
   ============================================================
   Cập nhật: 19/07/2026
   
   THAY THẾ toàn bộ nội dung file bbb-brand-override.css cũ.
   Cách dùng: Chỉnh sửa code → Assets → mở bbb-brand-override.css
   → Ctrl+A → Delete → paste file này → Lưu.
   ============================================================ */

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* --- PALETTE v3.2 --- */
:root {
  --bbb-cacao:  #2D1F18;
  --bbb-kem:    #FBF4E9;
  --bbb-cam:    #D88563;
  --bbb-nung:   #A8472A;
  --bbb-dao:    #F4B7A8;
  --bbb-ma:     #E89180;
  --bbb-sage:   #9CAA8C;
  --bbb-bo:     #F5D77E;
  --bbb-kem2:   #F3E7D4;
  --bbb-line:   #E7D8C4;
  --bbb-white:  #FFFFFF;
}


/* ============================================================
   1. NỀN TRANG
   ============================================================ */
body {
  background-color: var(--bbb-kem) !important;
  color: var(--bbb-cacao) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */
h1, h2, h3,
.section-title, .section_title,
.title-module, .title_module,
.heading, .block-title, .block_title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--bbb-cacao) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-transform: none !important;
}


/* ============================================================
   3. BỎ ALL CAPS TOÀN SITE
   ============================================================ */
.section-title, .section_title,
.title-module, .title_module,
.menu-lv1 > a, .item_menu > a,
.mega-menu a, .nav-item a,
.breadcrumb a, .tab-title,
.btn, .button,
[class*="title"], [class*="heading"],
.product-name a, .product-title a {
  text-transform: none !important;
}


/* ============================================================
   4. HEADER / MENU
   ============================================================ */
header, .header, .header-top, .header-bottom,
.header_menu, .header-main, .site-header,
#header, .main-header, .header-nav, .header_nav,
.nav-wrapper, .mega-menu, .menu-desktop {
  background-color: var(--bbb-cacao) !important;
}

header a, .header a, .header-top a, .header-bottom a,
.header_menu a, .menu-lv1 > a, .item_menu > a,
.mega-menu a, .nav-item a, .site-header a, .header-nav a {
  color: var(--bbb-kem) !important;
}

header a:hover, .header a:hover,
.menu-lv1 > a:hover, .item_menu > a:hover,
.mega-menu a:hover, .nav-item a:hover {
  color: var(--bbb-cam) !important;
}

.header-top, .header_top_info, .topbar, .top-bar {
  background-color: var(--bbb-cacao) !important;
  color: var(--bbb-kem) !important;
}

.header-top a, .topbar a, .top-bar a {
  color: var(--bbb-kem) !important;
}


/* ============================================================
   5. SEARCH ICON — Fix #e50f8a magenta
   
   Vấn đề: span.fa.fa-search bên trong nút tìm kiếm
   bị theme gốc gán màu #e50f8a (magenta).
   ============================================================ */
.fa-search,
.fa.fa-search,
span.fa.fa-search,
.input-group-btn .fa-search,
.btn-action .fa-search,
.icon-fallback-text .fa-search,
button .fa-search {
  color: var(--bbb-white) !important;
}

.input-group-btn,
.input-group-btn .btn,
.btn-action .btn,
.btn.icon-fallback-text {
  background-color: var(--bbb-cam) !important;
  border-color: var(--bbb-cam) !important;
}

/* Search form container */
.search-form, .search-bar, .header-search, .header_search,
#search-form, .input-search, .search-input, .search-box,
[class*="search"] input[type="text"],
[class*="search"] input[type="search"] {
  background-color: var(--bbb-kem) !important;
  border: 2px solid var(--bbb-cam) !important;
  border-radius: 8px !important;
  color: var(--bbb-cacao) !important;
}


/* ============================================================
   6. NÚT BẤM (BUTTONS)
   ============================================================ */
.btn, .button, .btn-primary, .btn-main,
.btn-cart, .btn-add-cart, .add-to-cart,
.btn-buy, .btn-buynow, .btnAddToCart,
input[type="submit"], button[type="submit"],
.btn-default {
  background-color: var(--bbb-cam) !important;
  color: var(--bbb-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.btn:hover, .button:hover, .btn-primary:hover,
.btn-main:hover, .btn-cart:hover,
.btn-add-cart:hover, .add-to-cart:hover,
.btn-buy:hover, .btn-buynow:hover, .btnAddToCart:hover {
  background-color: var(--bbb-nung) !important;
  color: var(--bbb-white) !important;
}

/* Outline / secondary */
.btn-outline, .btn-secondary, .btn-view,
.viewmore a, .view-all a, .btn-viewmore {
  background-color: transparent !important;
  color: var(--bbb-cam) !important;
  border: 2px solid var(--bbb-cam) !important;
  border-radius: 8px !important;
  text-transform: none !important;
}

.btn-outline:hover, .btn-secondary:hover,
.btn-view:hover, .viewmore a:hover,
.view-all a:hover, .btn-viewmore:hover {
  background-color: var(--bbb-cam) !important;
  color: var(--bbb-white) !important;
}


/* ============================================================
   7. FLASH SALE
   ============================================================ */
.flash-sale, .flashsale, .flash_sale,
.module-flashsale, .section-flashsale,
[class*="flash-sale"], [class*="flashsale"] {
  background-color: var(--bbb-nung) !important;
}

.flash-sale .section-title, .flashsale .section-title,
[class*="flash-sale"] h2, [class*="flashsale"] h2,
[class*="flash-sale"] .title-module,
[class*="flashsale"] .title-module {
  color: var(--bbb-kem) !important;
}

/* Countdown */
.countdown, .countdownTimer,
.flash-sale .countdown, .flashsale .countdown,
[class*="flash-sale"] [class*="count"],
[class*="flashsale"] [class*="count"] {
  background-color: var(--bbb-cacao) !important;
  color: var(--bbb-bo) !important;
  border-radius: 6px !important;
}

/* Progress bar */
.flash-sale .progress, .flashsale .progress,
[class*="flashsale"] .progress-bar {
  background-color: var(--bbb-dao) !important;
}

.flash-sale .progress-bar, .flashsale .progress-bar,
[class*="flashsale"] .progress-bar > div {
  background-color: var(--bbb-cam) !important;
}


/* ============================================================
   8. GIÁ SẢN PHẨM
   ============================================================ */
.price, .pro-price, .product-price,
.special-price, .price-sale, .price-new, .price_new,
.price-box .price, .product-item .price,
.item-product .price, .pro-price span {
  color: var(--bbb-nung) !important;
}

.price-old, .price-compare, .compare-price,
.price_old, .price del, .product-price del {
  color: #999 !important;
  text-decoration: line-through !important;
}

/* Badge sale % */
.sale-badge, .product-sale, .label-sale,
.badge-sale, .sale-label,
[class*="sale-badge"], [class*="label-sale"] {
  background-color: var(--bbb-nung) !important;
  color: var(--bbb-white) !important;
  border-radius: 4px !important;
}


/* ============================================================
   9. THẺ SẢN PHẨM
   ============================================================ */
.product-item, .item-product, .product-card {
  background-color: var(--bbb-white) !important;
  border-radius: 12px !important;
  border: 1px solid var(--bbb-line) !important;
}

.product-item:hover, .item-product:hover, .product-card:hover {
  border-color: var(--bbb-cam) !important;
  box-shadow: 0 4px 16px rgba(45, 31, 24, 0.08) !important;
}

.product-name a, .product-title a {
  color: var(--bbb-cacao) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.product-name a:hover, .product-title a:hover {
  color: var(--bbb-cam) !important;
}


/* ============================================================
   10. LINK TOÀN SITE
   ============================================================ */
a { color: var(--bbb-cam); }
a:hover { color: var(--bbb-nung); }


/* ============================================================
   11. DANH MỤC SẢN PHẨM
   ============================================================ */
.category-item, .cate-item, .collection-item {
  border-radius: 12px !important;
}

.category-item a, .cate-item a, .collection-item a {
  color: var(--bbb-cacao) !important;
  font-weight: 600 !important;
}


/* ============================================================
   12. ============================================
   === FOOTER — FIX CHÍNH: GHI ĐÈ INLINE STYLE ===
   =============================================
   
   Vấn đề gốc: Haravan theme gán inline style trực tiếp
   lên HTML: <div class="mid-footer" style="background-color: #f9f9f9">
   
   CSS thường KHÔNG ghi đè được inline style, TRỪ KHI dùng
   !important trên selector đủ cụ thể.
   
   Selector dưới đây target chính xác class thực tế trên web.
   ============================================================ */

/* Footer wrapper — ghi đè class bg-white */
footer.footer,
footer.footer.bg-white,
footer.bg-white {
  background-color: var(--bbb-cacao) !important;
  color: var(--bbb-kem) !important;
}

/* Footer row 1 — GHI ĐÈ inline style="background-color: #f9f9f9" */
footer .mid-footer,
footer .mid-footer.pb-md-3,
.footer .mid-footer,
.mid-footer.pb-md-3,
div.mid-footer.pb-md-3 {
  background-color: var(--bbb-cacao) !important;
  color: var(--bbb-kem) !important;
}

/* Footer row 2 */
footer .mid-footer.pt-md-4,
.footer .mid-footer.pt-md-4,
.mid-footer.pt-md-4,
div.mid-footer.pt-md-4 {
  background-color: var(--bbb-cacao) !important;
  color: var(--bbb-kem) !important;
}

/* Footer bottom (copyright) */
.bg-footer-bottom,
.bg-footer-bottom.copyright,
footer .bg-footer-bottom {
  background-color: #241911 !important;
  color: var(--bbb-kem) !important;
  border-top: 1px solid rgba(251, 244, 233, 0.1) !important;
}

/* Footer headings */
footer h4, footer h5,
footer .footer-title,
.footer h4, .footer h5,
.mid-footer h4, .mid-footer h5 {
  color: var(--bbb-cam) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* Footer links */
footer a, .footer a, .mid-footer a {
  color: var(--bbb-dao) !important;
}

footer a:hover, .footer a:hover, .mid-footer a:hover {
  color: var(--bbb-cam) !important;
}

/* Footer phone number */
footer a[href^="tel"],
.mid-footer a[href^="tel"] {
  color: var(--bbb-bo) !important;
  font-weight: 700 !important;
}

/* Footer copyright text */
.bg-footer-bottom a {
  color: var(--bbb-dao) !important;
}


/* ============================================================
   13. MODAL KHUYẾN MÃI — Fix inline #e83378!important
   
   Vấn đề: <div class="modal-header" style="background: #e83378!important;">
   Giải pháp: dùng selector cực cụ thể + !important
   ============================================================ */
div.modal-header,
.modal .modal-header,
.modal-content .modal-header,
.modal-dialog .modal-header {
  background: var(--bbb-nung) !important;
  background-color: var(--bbb-nung) !important;
  color: var(--bbb-kem) !important;
  border-radius: 16px 16px 0 0 !important;
}

.modal-content, .swal2-popup {
  border-radius: 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ============================================================
   14. CART POPUP — Fix inline color: red
   
   Vấn đề: <span class="cart-popup-name" style="color: red;">
   ============================================================ */
span.cart-popup-name,
.cart-popup-name,
.your_product .cart-popup-name {
  color: var(--bbb-cam) !important;
}


/* ============================================================
   15. SMART SEARCH — Fix price color: red
   ============================================================ */
.smart-search-wrapper .item-ult .title p del {
  color: #999 !important;
}

.smart-search-wrapper .item-ult .title a {
  color: var(--bbb-cacao) !important;
}


/* ============================================================
   16. BREADCRUMB
   ============================================================ */
.breadcrumb, .bread-crumb, .breadcrumb-wrapper {
  background-color: var(--bbb-kem) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.breadcrumb a { color: var(--bbb-cam) !important; }


/* ============================================================
   17. SIDEBAR / BỘ LỌC
   ============================================================ */
.sidebar .widget-title, .sidebar .block-title, .filter-title {
  color: var(--bbb-cacao) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}


/* ============================================================
   18. BANNER & HÌNH ẢNH — Bo góc
   ============================================================ */
.banner-slider img, .home-slider img,
.banner img, .swiper-slide img {
  border-radius: 16px !important;
}


/* ============================================================
   19. TABS
   ============================================================ */
.tab-title.active, .nav-tabs .active, .tabs .active {
  color: var(--bbb-cam) !important;
  border-bottom-color: var(--bbb-cam) !important;
}


/* ============================================================
   20. PAGINATION
   ============================================================ */
.pagination .active a, .pagination .current {
  background-color: var(--bbb-cam) !important;
  color: var(--bbb-white) !important;
  border-color: var(--bbb-cam) !important;
}

.pagination a:hover {
  color: var(--bbb-cam) !important;
  border-color: var(--bbb-cam) !important;
}


/* ============================================================
   21. FORM INPUTS
   ============================================================ */
input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
textarea, select {
  border: 1px solid var(--bbb-line) !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
  border-color: var(--bbb-cam) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(216, 133, 99, 0.15) !important;
}


/* ============================================================
   22. GIỎI HÀNG BADGE
   ============================================================ */
.cart-count, .cart-badge, .count-cart,
[class*="cart-count"], [class*="count-holder"] {
  background-color: var(--bbb-nung) !important;
  color: var(--bbb-white) !important;
}


/* ============================================================
   23. SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bbb-kem); }
::-webkit-scrollbar-thumb { background: var(--bbb-cam); border-radius: 999px; }

/* ============================================================
   24. SELECTION
   ============================================================ */
::selection {
  background: var(--bbb-dao);
  color: var(--bbb-cacao);
}


/* ============================================================
   25. MOBILE MENU
   ============================================================ */
@media (max-width: 768px) {
  .mobile-menu, .nav-mobile,
  .menu-mobile, #nav-mobile {
    background-color: var(--bbb-cacao) !important;
  }
  
  .mobile-menu a, .nav-mobile a, .menu-mobile a {
    color: var(--bbb-kem) !important;
    border-bottom-color: rgba(251, 244, 233, 0.1) !important;
  }
  
  .mobile-menu a:hover, .nav-mobile a:hover {
    color: var(--bbb-cam) !important;
  }

  /* Menu toggle button on mobile */
  .toggle-nav, .menu-bar {
    background-color: var(--bbb-cam) !important;
  }
}


/* ============================================================
   26. DẢI ƯU ĐÃI / TRUST BAR
   ============================================================ */
.policy-item, .trust-bar, .trust-badge,
.service-item, [class*="policy"], [class*="trust"] {
  color: var(--bbb-cacao) !important;
}


/* ============================================================
   27. SOCIAL BUTTONS
   ============================================================ */
.fixzalo img, .fix_social a {
  border-radius: 50% !important;
}

/* ============================================================
   PATCH v2 — SWATCH FIX (THAY THẾ patch swatch cũ)
   
   Vấn đề: Nút phân loại đầu tiên bị nền Nâu Cacao/đen
   che mất text do ::before pseudo-element + các rule .btn
   từ CSS override bị áp nhầm vào swatch label.
   ============================================================ */

/* --- RESET: Loại trừ swatch ra khỏi style button chung --- */
.swatch-element label,
.swatch label,
.select-swatch label,
.product-swatch label,
div.swatch-element label,
div.swatch label {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #2D1F18 !important;
  border: 1px solid #E7D8C4 !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.swatch-element label:hover,
.swatch label:hover,
div.swatch-element label:hover {
  border-color: #D88563 !important;
  color: #D88563 !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* --- SELECTED: viền Cam Đất, nền Kem Sữa nhạt --- */
.swatch-element input:checked + label,
.swatch-element.active label,
.swatch-element label.active,
.swatch-element label.selected,
.swatch input:checked + label,
.select-swatch input:checked + label,
div.swatch-element input:checked + label {
  background-color: #FBF4E9 !important;
  background: #FBF4E9 !important;
  color: #A8472A !important;
  border: 2px solid #D88563 !important;
  font-weight: 700 !important;
}

/* --- QUAN TRỌNG NHẤT: Xóa sạch ::before và ::after --- */
.swatch-element label::before,
.swatch-element label::after,
.swatch label::before,
.swatch label::after,
.select-swatch label::before,
.select-swatch label::after,
div.swatch-element label::before,
div.swatch-element label::after,
.swatch-element input:checked + label::before,
.swatch-element input:checked + label::after,
.swatch input:checked + label::before,
.swatch input:checked + label::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
}

/* --- Hết hàng --- */
.swatch-element.soldout label,
.swatch-element.unavailable label {
  opacity: 0.4 !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
}

/* --- Ẩn radio input --- */
.swatch-element input[type="radio"],
.swatch input[type="radio"],
.select-swatch input[type="radio"] {
  display: none !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* --- Tiêu đề phân loại --- */
.swatch .header,
.swatch .swatch-title,
.swatch > label,
.select-swatch .header {
  color: #2D1F18 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* --- Khung giá sản phẩm (nền hồng nhạt) --- */
.price-box,
.product-price-box,
[class*="price-box"],
.pro-price-box {
  background-color: #FBF4E9 !important;
  border-radius: 8px !important;
}

/* ============================================================
   END PATCH v2 — SWATCH FIX
   ============================================================ */

/* ============================================================
   END — Bé Bụ Bẫm Brand Override v2.1
   Tổng: 27 sections, target chính xác theo DOM thực tế
   ============================================================ */