@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  --max-w: 1240px;
  --font-display: 'Cormorant', 'Cormorant Garamond', serif;
  --font-body: 'Be Vietnam Pro', 'BeVietnamPro', sans-serif;
  --font-nav: 'Be Vietnam Pro', 'BeVietnamPro', sans-serif;
  --bg: #FFFFFF;
  --bg-section: #FFFFFF;
  --bg-soft: #F4F7FD;
  --white: #FFFFFF;
  /* ---------- PRIMARY / SECONDARY (Chủ đạo #132466, Hover toàn bộ #2A52BE, Giá màu đen #111111) ---------- */
  --primary: #132466;
  --primary-hover: #2A52BE;
  --primary-light: #E5EAF8;
  --secondary: #132466;
  --success: #7BA893;
  --alert: #B5453D;
  --text-base: #222222;
  --text-headline: #111111;
  --text-muted: #6E7288;
  --divider: #E2E2E2;
  --link: #132466;
  --link-hover: #2A52BE;
  --widget-link: #6E7288;
  --widget-link-hover: #2A52BE;
  --tooltip-text: #FFFFFF;
  --tooltip-bg: #132466;
  --btn-cart-bg: var(--primary);
  --btn-cart-bg-hover: var(--primary-hover);
  --badge-sale: #132466;
  --badge-new: #D87935;
  --badge-custom: #6E7288;
  --review-stars: #D87935;
  --price-regular: #888888;
  --price-sale: #111111;
  --text-dark: var(--text-base);
  --text-navy: var(--text-headline);
  --border: var(--divider);
  --gold: var(--review-stars);
  --primary-dark: var(--primary-hover);
}

/* ==========================================================================
   GLOBAL PRODUCT PRICE & TYPOGRAPHY STYLING (GIÁ SẢN PHẨM MÀU ĐÊN)
   ========================================================================== */
.price,
.cat-price,
.cat-price ins,
.mina-sp-price,
.mina-sp-price ins,
.amount,
.woocommerce-Price-amount,
.price ins {
  color: #111111 !important;
}

.price del,
.price del *,
.cat-price del,
.cat-price del *,
.mina-sp-price del,
.mina-sp-price del * {
  color: #888888 !important;
}

/* Product Titles & Cat_Products Block Titles ('Be Vietnam Pro') */
.mina-sp-title,
.product-title,
.product_title,
.cat-card-body h3,
.cat-card-body h3 a,
.cat-title,
.cat-heading-main,
.cat-heading-sub,
.cat-section-title,
.cat-header-titles h2,
.cat-header-titles h3,
.mina-search-prod-title,
.mina-search-prod-title a {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
}

/* ==========================================================================
   UNIFIED BUTTON DESIGN SYSTEM (PRIMARY #132466 | HOVER #2A52BE)
   ========================================================================== */

/* 1. PRIMARY BUTTONS — NÚT THÊM GIỎ HÀNG & NÚT THAO TÁC CHÍNH */
.btn-add,
.btn-add-cart,
.cat-card-body .btn-add.button,
.cat-card-body .btn-add-cart,
.mina-sp-add-btn,
.single_add_to_cart_button,
.add_to_cart_button,
.ajax_add_to_cart,
.btn-drawer-checkout,
.mina-btn-checkout,
.mina-btn-primary,
.mina-hero-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: 1px solid var(--primary, #132466) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 14px rgba(19, 36, 102, 0.22) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  outline: none !important;
}

/* Triệt tiêu icon ✓ / spinner trùng lặp của WooCommerce default pseudo-elements :after & :before */
.btn-add:after,
.btn-add:before,
.btn-add-cart:after,
.btn-add-cart:before,
.mina-sp-add-btn:after,
.mina-sp-add-btn:before,
.single_add_to_cart_button:after,
.single_add_to_cart_button:before,
.add_to_cart_button:after,
.add_to_cart_button:before,
.ajax_add_to_cart:after,
.ajax_add_to_cart:before,
.added_to_cart {
  display: none !important;
  content: none !important;
}

.btn-add:hover,
.btn-add-cart:hover,
.cat-card-body .btn-add.button:hover,
.cat-card-body .btn-add-cart:hover,
.mina-sp-add-btn:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.ajax_add_to_cart:hover,
.btn-drawer-checkout:hover,
.mina-btn-checkout:hover,
.mina-btn-primary:hover,
.mina-hero-search-btn:hover {
  background: var(--primary-hover, #2A52BE) !important;
  border-color: var(--primary-hover, #2A52BE) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(42, 82, 190, 0.38) !important;
}

.btn-add:active,
.btn-add-cart:active,
.cat-card-body .btn-add.button:active,
.mina-sp-add-btn:active,
.single_add_to_cart_button:active,
.btn-drawer-checkout:active,
.mina-btn-checkout:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(19, 36, 102, 0.2) !important;
}


/* 2. SECONDARY BUTTONS — NÚT XEM CHI TIẾT & NÚT PHỤ */
.btn-view-detail,
.btn-detail,
.cat-view-all,
.btn-drawer-cart,
.mina-btn-view-cart,
.mina-btn-secondary,
.mina-search-prod-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--primary, #132466) !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border: 1px solid var(--primary, #132466) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  outline: none !important;
}

.btn-view-detail:hover,
.btn-detail:hover,
.cat-view-all:hover,
.btn-drawer-cart:hover,
.mina-btn-view-cart:hover,
.mina-btn-secondary:hover,
.mina-search-prod-btn:hover {
  background: var(--primary-hover, #2A52BE) !important;
  border-color: var(--primary-hover, #2A52BE) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(42, 82, 190, 0.25) !important;
}

.btn-view-detail:active,
.btn-detail:active,
.cat-view-all:active,
.btn-drawer-cart:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}


/* 3. OUT OF STOCK BUTTONS — NÚT HẾT HÀNG / TẠM NGƯNG */
.out-of-stock-btn,
.btn-out-of-stock,
.mina-sp-out-of-stock-msg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background-color: var(--bg-soft, #F5F5F5) !important;
  color: var(--text-muted, #6E7288) !important;
  border: 1px solid var(--border, #E2E2E2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  box-shadow: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1240px;
  margin: 0 auto;
}

.topbar-spacer {
  width: 96px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-navy);
}

.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--primary-dark);
  margin-top: 2px;
}

.topbar-icons {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 96px;
  justify-content: flex-end;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--text-navy);
  display: flex;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.cart-dot {
  position: relative;
}

.cart-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-dark);
}

.navrow {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.navlinks {
  display: flex;
  justify-content: center;
  gap: 44px;
  padding: 16px 0;
  max-width: 1240px;
  margin: 0 auto;
}

.navlinks a:hover,
.navlinks a.active {
  color: var(--primary-hover);
}

/* Flatsome Header Custom CSS (Luxury Beauty Brand Styling) */
#header .header-nav>li>a,
#header .header-bottom-nav>li>a,
#header .nav-top-link,
#wide-nav .nav-top-link,
#header .nav>li>a {
  font-family: var(--font-nav, 'Plus Jakarta Sans', 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  position: relative !important;
  padding: 10px 0 !important;
  margin: 0 14px !important;
  transition: color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#header .nav-dropdown>li>a,
#header .sub-menu>li>a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  transition: color 0.2s ease !important;
}

/* Hiệu ứng thanh gạch chân mảnh khi Hover */
#header .header-nav>li>a::after,
#header .header-bottom-nav>li>a::after,
#wide-nav .nav-top-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2.5px !important;
  background-color: #2A52BE !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#header .header-nav>li>a:hover,
#header .header-bottom-nav>li>a:hover,
#header .nav-top-link:hover,
#wide-nav .nav-top-link:hover,
#header .nav>li>a:hover,
#header .header-nav>li.active>a,
#header .header-nav>li.current-menu-item>a,
#header .header-bottom-nav>li.current-menu-item>a,
#header .header-bottom-nav>li.active>a,
.header-bottom-nav>li:hover>a,
#header .nav-dropdown>li>a:hover,
#header .sub-menu>li>a:hover {
  color: #2A52BE !important;
}

#header .header-nav>li>a:hover::after,
#header .header-bottom-nav>li>a:hover::after,
#wide-nav .nav-top-link:hover::after,
#header .header-bottom-nav>li.current-menu-item>a::after,
#header .header-bottom-nav>li.active>a::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

#header .header-search>a:hover i,
#header .cart-item .header-cart-link:hover i,
#header .mobile-nav .nav-icon a:hover i {
  color: var(--primary-hover, #2A52BE) !important;
  transform: scale(1.1);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.hero-wrap {
  position: relative;
  background: var(--bg-soft);
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 70px;
  gap: 20px;
  min-height: 440px;
}

.hero-badge {
  display: inline-block;
  background: var(--text-navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.25;
  color: var(--text-navy);
  text-transform: uppercase;
  margin-bottom: 22px;
  max-width: 460px;
}

.hero-features {
  display: flex;
  gap: 26px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 150px;
}

.hero-feature .dot {
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--primary-dark);
}

.hero-feature span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.btn-cta {
  display: inline-block;
  background: var(--primary-dark);
  color: var(--white);
  padding: 14px 40px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background .2s ease;
}

.btn-cta:hover {
  background: var(--primary-hover);
}

.hero-disclaimer {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 420px;
  line-height: 1.5;
}

.hero-visual {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-tube {
  position: relative;
  width: 110px;
  height: 280px;
  background: linear-gradient(180deg, #ffffff, var(--primary-light));
  border-radius: 14px 14px 30px 30px;
  box-shadow: 0 30px 60px -22px rgba(46, 27, 33, 0.28);
  z-index: 3;
}

.hero-tube::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 26px;
  background: var(--gold);
  border-radius: 6px;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 30px -12px rgba(46, 27, 33, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
  letter-spacing: 0.02em;
  padding: 6px;
}

.bubble.b1 {
  width: 78px;
  height: 78px;
  top: 12%;
  left: 4%;
}

.bubble.b2 {
  width: 92px;
  height: 92px;
  bottom: 10%;
  left: 10%;
}

.bubble.b3 {
  width: 70px;
  height: 70px;
  top: 38%;
  right: 2%;
}

.hero-newtag {
  position: absolute;
  top: 6%;
  right: 14%;
  background: var(--gold);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 4;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(46, 27, 33, 0.2);
  z-index: 5;
}

.carousel-arrow.left {
  left: 14px;
}

.carousel-arrow.right {
  right: 14px;
}

.carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-bottom: 18px;
}

.carousel-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.carousel-dots span.active {
  background: var(--primary-dark);
  width: 18px;
  border-radius: 3px;
}

/* ==========================================================================
   TRUST STRIP (marquee)
   ========================================================================== */
.trust-strip {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  background: var(--white);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.trust-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 14px;
  animation: trust-scroll var(--trust-duration, 28s) linear infinite;
}

.trust-strip:hover .trust-track {
  animation-play-state: paused;
}

.trust-track .trust-item {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-navy);
  white-space: nowrap;
}

.trust-track .trust-item .sep {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  margin: 0 18px !important;
}

@keyframes trust-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-track {
    animation: none;
  }
}

/* ==========================================================================
   CATEGORY / PRODUCT SECTION (WooCommerce + Flatsome optimized)
   Đã gộp 3 lớp override trùng lặp trong bản gốc thành 1 bộ rule duy nhất.
   ========================================================================== */
.cat-section {
  padding: 60px 0;
  max-width: 1240px;
  margin: 0 auto;
}

.cat-heading {
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-navy);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}

.cat-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.cat-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cat-filters a {
  font-size: 14.5px;
  color: var(--text-muted);
  transition: color .2s ease;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.cat-filters a:hover,
.cat-filters a.active {
  color: var(--primary-dark);
}

.cat-filters a.active {
  font-weight: 600;
  /* border-color: var(--primary-dark); */
}

/* --- Thanh cuộn ngang sản phẩm --- */
.cat-scroll {
  width: 100%;
  min-width: 0;
  /* bắt buộc để grid con không tràn khỏi cột 1fr */
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE / Edge */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.cat-scroll:active {
  cursor: grabbing;
}

.cat-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cat-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: stretch;
  width: max-content;
}

/* CARD SẢN PHẨM ULTRA COMPACT */
.cat-card.swiper-slide {
  height: auto !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border: 1px solid var(--border, #BAC5E1);
  border-radius: 10px;
  padding: 0 0 8px;
  background: var(--white, #FFFFFF);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  box-sizing: border-box;
}

.cat-card.swiper-slide.cat-slide-hidden {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.cat-card.swiper-slide:hover {
  box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.18);
}

/* THUMBNAIL */
.cat-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 10px 10px 0 0;
  background: var(--white, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  overflow: hidden;
}

.cat-thumb a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  object-position: center;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.cat-card:hover .cat-thumb img {
  padding: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  object-fit: cover !important;
}

.cat-thumb img.primary-img {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.cat-thumb img.secondary-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.05);
}

.cat-card:hover .cat-thumb img.primary-img {
  opacity: 0;
}

.cat-card:hover .cat-thumb img.secondary-img {
  opacity: 1;
  transform: scale(1);
}

.cat-card:hover .cat-thumb img.primary-img:only-child {
  opacity: 1;
  transform: scale(1.06);
}

/* Product Card Tags Styling */
.cat-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.cat-card-tags .tag-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary, #1A2560);
  background: var(--bg-soft, #E4E9F7);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  display: inline-block;
}

/* NỘI DUNG CARD BODY COMPACT */
.cat-card-body {
  padding: 0 8px;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: flex-start !important;
}

.cat-card-body h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-headline, #1B1216);
  margin-bottom: 3px;
  min-height: 40px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-card-body h3 a {
  color: var(--text-headline, #1B1216);
  transition: color 0.2s ease;
}

.cat-card-body h3 a:hover {
  color: var(--primary, #1A2560);
}

/* GIÁ SẢN PHẨM COMPACT */
.cat-price {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary, #1A2560) !important;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 18px;
}

.cat-price .amount {
  color: var(--primary, #1A2560) !important;
}

.cat-price del,
.cat-price del * {
  color: #999999 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.cat-price ins {
  text-decoration: none !important;
  color: var(--primary, #1A2560) !important;
  font-weight: 700;
  font-size: 15px !important;
}

.cat-price .woocommerce-Price-currencySymbol,
.cat-price u {
  font-size: 130% !important;
  margin-left: 0 !important;
  padding-left: 2px !important;
  border-bottom: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: baseline !important;
}

.cat-price del,
.cat-price del * {
  color: #999999 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.cat-price del {
  position: relative !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.cat-price del::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: calc(100% - 17px) !important;
  height: 0 !important;
  border-top: 1px solid #999999 !important;
  background-color: transparent !important;
  transform: translateY(-50%) !important;
}

/* NÚT Thêm giỏ hàng */
.cat-card-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: auto !important;
}

.cat-card-body .btn-add.button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: var(--primary, #1A2560) !important;
  color: var(--white, #FFFFFF) !important;
  padding: 10px 4px !important;
  border: 1px solid var(--primary, #1A2560) !important;
  border-radius: 999px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  line-height: 1.2 !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
}

.cat-card-body .btn-add.button.added,
.cat-card-body .btn-add.button.loading {
  background: var(--primary, #1A2560) !important;
  color: var(--white, #FFFFFF) !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 10px 4px !important;
  border: 1px solid var(--primary, #1A2560) !important;
  font-size: 13px !important;
  display: flex !important;
  transform: none !important;
  opacity: 1 !important;
}

.cat-card-body .btn-add.button:hover {
  background: var(--primary-hover, #132466) !important;
  color: var(--white, #FFFFFF) !important;
  border-color: var(--primary-hover, #132466) !important;
  box-shadow: 0 4px 12px rgba(26, 37, 96, 0.35) !important;
  transform: translateY(-1px);
}

.cat-card-body .btn-view.button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: var(--white, #FFFFFF) !important;
  color: var(--primary, #1A2560) !important;
  padding: 10px 4px !important;
  border: 1px solid var(--primary, #1A2560) !important;
  border-radius: 999px !important;
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 40px !important;
  line-height: 1.2 !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
  text-decoration: none;
  position: relative !important;
}

.cat-card-body .btn-view.button:hover {
  background: var(--bg-soft, #E4E9F7) !important;
  color: var(--primary, #1A2560) !important;
  box-shadow: 0 4px 12px rgba(26, 37, 96, 0.15) !important;
  transform: translateY(-1px);
}

.cat-card-buttons .added_to_cart,
.cat-card-body .added_to_cart,
.added_to_cart,
.cat-card-buttons> :not(.btn-add.button) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
}

/* SWIPER SCROLLBAR */
.cat-progress.swiper-scrollbar {
  height: 3px !important;
  background: var(--primary-light, #C4CCDE) !important;
  border-radius: 999px !important;
  position: relative !important;
  width: 30vw !important;
  max-width: 320px !important;
  min-width: 180px !important;
  margin: 24px 0 0 0 !important;
  left: 0 !important;
  right: auto !important;
  opacity: 1 !important;
  display: block !important;
}

.cat-progress .swiper-scrollbar-drag {
  height: 100% !important;
  background: var(--primary, #1A2560) !important;
  border-radius: 999px !important;
  cursor: grab;
}

/* Thanh tiến trình cuộn ngang */
.cat-progress {
  position: relative;
  height: 2px;
  width: 100%;
  max-width: 100%;
  margin: 24px 0 0;
  background: var(--primary-light);
  border-radius: 999px;
  overflow: hidden;
}

.cat-progress::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--scroll-progress, 30%);
  background: var(--primary-dark);
  border-radius: 999px;
  transition: width .12s linear;
  display: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  background: var(--bg-soft);
  padding: 70px 32px 40px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--text-navy);
  margin-bottom: 14px;
}

.footer-desc {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 520px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 34px;
  line-height: 1.7;
}

.footer-news h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-navy);
  margin-bottom: 18px;
}

.footer-form {
  display: flex;
  max-width: 420px;
  border-bottom: 1px solid var(--text-navy);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.footer-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-navy);
  font-family: inherit;
}

.footer-form input::placeholder {
  color: var(--text-muted);
}

.footer-form button {
  background: none;
  border: none;
  color: var(--text-navy);
  display: flex;
}

.footer-form button svg {
  width: 20px;
  height: 20px;
}

.footer-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 44px;
}

.footer-consent input {
  margin-top: 3px;
}

.footer-consent a {
  color: var(--text-navy);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-hashtag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-navy);
}

.socials {
  display: flex;
  gap: 16px;
}

.socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-navy);
  transition: background .2s ease, color .2s ease;
}

.socials a:hover {
  background: var(--primary-dark);
  color: var(--white);
  border-color: var(--primary-dark);
}

.socials svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   FLOATING ELEMENTS
   ========================================================================== */
.float-gift {
  position: fixed;
  left: 0;
  bottom: 120px;
  background: var(--text-navy);
  color: var(--white);
  padding: 14px 10px;
  border-radius: 0 10px 10px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
}

.float-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--secondary) !important;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -10px rgba(27, 18, 22, 0.5);
}

/* Hide floating chat when off-canvas drawer (like mini-cart) is open */
html.has-off-canvas .float-chat,
body.has-off-canvas .float-chat,
html.has-off-canvas .makieky-floating-contact,
body.has-off-canvas .makieky-floating-contact {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Hide floating chat when dropdown cart is hovered/active */
body:has(.cart-item:hover) .float-chat,
body:has(.cart-item.active) .float-chat,
body:has(.cart-item.current-dropdown) .float-chat,
body:has(.cart-item:hover) .makieky-floating-contact,
body:has(.cart-item.active) .makieky-floating-contact,
body:has(.cart-item.current-dropdown) .makieky-floating-contact {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Make floating widget buttons match the dark navy order button */
.btn-toggle-control,
.btn-back-to-top {
  background: var(--secondary) !important;
}

.btn-toggle-control:hover,
.btn-back-to-top:hover {
  background: #000 !important;
}

.float-chat svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   RESPONSIVE (≤900px) — đã gộp 2 media query trùng lặp
   ========================================================================== */
@media (max-width: 900px) {
  .navlinks {
    flex-wrap: wrap;
    gap: 18px 24px;
    padding: 14px 20px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    text-align: center;
  }

  .hero-features {
    justify-content: center;
  }

  .hero-disclaimer {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual {
    height: 260px;
    margin-top: 20px;
  }

  .cat-layout {
    grid-template-columns: 1fr;
  }

  .cat-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

#footer-wrapper,
.footer-wrapper,
#footer {
  background: #000 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.header-bottom {
  padding-bottom: 0 !important;
  border-bottom: 0.01px solid #ccc !important;
}

.site-footer {
  background: #000;
  color: #EADFE0;
  padding: 64px 32px 32px;
}

.site-footer .footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.site-footer-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.site-footer-divider::before,
.site-footer-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(234, 223, 224, 0.15);
}

.site-footer-plus {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 40px;
}

/* Brand column */
.site-footer-brand img {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 28px;
  display: block;
}

.site-footer-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(234, 223, 224, 0.7);
  margin-bottom: 20px;
  max-width: 280px;
}

.site-footer-socials {
  display: flex;
  gap: 12px;
}

.site-footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(234, 223, 224, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EADFE0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.site-footer-socials a svg {
  width: 15px;
  height: 15px;
}

.site-footer-socials a:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

/* Link columns: Ve makieky, Chinh sach */
.site-footer-col h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EADFE0;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-footer-col h5::before {
  content: '+';
  color: var(--gold);
}

.site-footer-col a {
  display: block;
  font-size: 13.5px;
  color: rgba(234, 223, 224, 0.7);
  margin-bottom: 12px;
}

.site-footer-col a:hover {
  color: var(--primary-light);
}

/* Contact column */
.site-footer-contact li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(234, 223, 224, 0.8);
  margin-bottom: 14px;
  align-items: flex-start;
  list-style: none;
}

.site-footer-contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}

.site-footer-news-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(234, 223, 224, 0.12);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.site-footer-news-box h6 {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #EADFE0;
  margin-bottom: 8px;
}

.site-footer-news-box p {
  font-size: 12px;
  color: rgba(234, 223, 224, 0.6);
  margin-bottom: 14px;
  line-height: 1.5;
}

.site-footer-news-box form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(234, 223, 224, 0.3);
  padding-bottom: 8px !important;
}

.site-footer-news-box input {
  flex: 1;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #EADFE0 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
}

.site-footer-news-box input:focus {
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
}

.site-footer-news-box input:-webkit-autofill,
.site-footer-news-box input:-webkit-autofill:hover,
.site-footer-news-box input:-webkit-autofill:focus {
  -webkit-text-fill-color: #EADFE0 !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  box-shadow: 0 0 0px 1000px #000 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.site-footer-news-box input::placeholder {
  color: rgba(234, 223, 224, 0.4);
}

.site-footer-news-box button {
  background: none;
  border: none;
  color: var(--gold);
  display: flex;
}

.site-footer-news-box button svg {
  width: 18px;
  height: 18px;
}

/* Bottom bar, white background */
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  margin-top: 48px;
  padding: 18px 24px;
}

.site-footer-copy {
  font-size: 13px;
  color: #222222;
  font-weight: 500;
}

.site-footer-copy strong {
  color: #1A2560;
  font-weight: 700;
}

.site-footer-badges {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 10.5px;
  color: var(--text-dark);
}

.site-footer-notice svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

.site-footer-notice strong {
  display: block;
  color: var(--text-navy);
  font-size: 11px;
}

@media (max-width:900px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
}

@media (max-width:560px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {
  display: none !important;
}

/* ==========================================================================
   MINA ARCHIVE TOOLBAR (UX/UI LUXURY BRAND STYLING)
   - Border nhạt sang trọng, bo góc bo cong mềm mại
   - Tìm kiếm dáng Pill thanh lịch với nút Icon tròn
   - Sắp xếp Dropdown & Đếm sản phẩm tinh tế
   ========================================================================== */
.mina-archive-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: var(--white, #FFFFFF) !important;
  border: 1px solid rgba(234, 217, 222, 0.7) !important;
  /* Border nhạt hơn, màu pastel hài hòa */
  border-radius: 14px !important;
  padding: 12px 20px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 4px 18px rgba(26, 37, 96, 0.03) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.mina-archive-toolbar:hover {
  border-color: var(--primary-light, #C4CCDE) !important;
  box-shadow: 0 6px 22px rgba(26, 37, 96, 0.06) !important;
}

/* 1. Phần Sắp Xếp (Sorting Dropdown) */
.mina-toolbar-sort {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mina-toolbar-sort label {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #8C6B72) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.mina-toolbar-sort select#mina-orderby {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid rgba(234, 217, 222, 0.6) !important;
  /* Border nhạt */
  border-radius: 8px !important;
  padding: 6px 30px 6px 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1.3 !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2373263B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.mina-toolbar-sort select#mina-orderby:hover,
.mina-toolbar-sort select#mina-orderby:focus {
  border-color: var(--primary, #1A2560) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 96, 0.08) !important;
}

/* 2. Ô Tìm Kiếm Realtime (Center Search Pill Input) */
.mina-toolbar-search {
  flex: 1 !important;
  max-width: 380px !important;
  margin: 0 auto !important;
}

.mina-search-input-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.mina-toolbar-search-input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid rgba(234, 217, 222, 0.6) !important;
  /* Border nhạt */
  border-radius: 999px !important;
  /* Dáng Pill bo tròn thanh lịch */
  padding: 0 42px 0 16px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13px !important;
  color: var(--text-headline, #1B1216) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.mina-toolbar-search-input::placeholder {
  color: var(--text-muted, #8C6B72) !important;
  font-size: 12.5px !important;
  opacity: 0.85 !important;
}

.mina-toolbar-search-input:focus,
.mina-toolbar-search-input:hover {
  background: #FFFFFF !important;
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 96, 0.08) !important;
}

.mina-toolbar-search-btn {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.mina-toolbar-search-btn i {
  font-size: 12px !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
  top: unset !important;
}

.mina-toolbar-search-btn:hover {
  background: var(--primary-hover, #2A52BE) !important;
  transform: translateY(-50%) scale(1.06) !important;
  box-shadow: 0 3px 8px rgba(26, 37, 96, 0.25) !important;
}

/* 3. Phần Đếm Số Lượng Sản Phẩm (Total Count Badge) */
.mina-toolbar-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid rgba(234, 217, 222, 0.6) !important;
  /* Border nhạt */
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--primary, #1A2560) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* Căn chỉnh 3 phần của Toolbar (Sort Trái - Search Giữa - Count Phải) */
.mina-toolbar-sort {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.mina-toolbar-search {
  flex: 1.2 !important;
  max-width: 380px !important;
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.mina-toolbar-count-wrap {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* 4. Responsive Toolbar trên Mobile / Tablet */
@media (max-width: 768px) {
  .mina-archive-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }

  .mina-toolbar-sort {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .mina-toolbar-search {
    max-width: 100% !important;
    width: 100% !important;
    order: -1 !important;
  }

  .mina-toolbar-count {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   MINA ARCHIVE LAYOUT & SIDEBAR FILTER (LUXURY BRAND STYLING)
   - Layout 2 Cột: Sidebar Bộ lọc bên trái + Lưới Sản phẩm bên phải
   - Sidebar Filter thiết kế dạng Card phẳng viền nhạt thanh lịch
   - Phân trang dạng Pill / Tròn hiện đại
   ========================================================================== */
.mina-archive-layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  margin-top: 10px !important;
}

/* --- SIDEBAR BỘ LỌC BÊN TRÁI --- */
.mina-filter-sidebar {
  background: var(--white, #FFFFFF) !important;
  border: 1px solid rgba(234, 217, 222, 0.7) !important;
  /* Border nhạt hài hòa */
  border-radius: 16px !important;
  /* padding: 24px 20px !important; */
  box-shadow: 0 4px 20px rgba(26, 37, 96, 0.03) !important;
  position: sticky !important;
  top: 100px !important;
  z-index: 10 !important;
}

.mina-filter-title {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-headline, #1B1216) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid var(--primary-light, #C4CCDE) !important;
}

.mina-filter-group {
  margin-bottom: 20px !important;
}

.mina-filter-group:last-child {
  margin-bottom: 0 !important;
}

.mina-filter-group-name {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--primary, #1A2560) !important;
  margin: 0 0 10px 0 !important;
  text-transform: capitalize !important;
}

.mina-filter-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--primary-light, #C4CCDE) transparent !important;
}

.mina-filter-list::-webkit-scrollbar {
  width: 4px;
}

.mina-filter-list::-webkit-scrollbar-thumb {
  background: var(--primary-light, #C4CCDE);
  border-radius: 4px;
}

.mina-filter-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--text-base, #2E1B21) !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.mina-filter-item:hover {
  background: var(--bg-soft, #E4E9F7) !important;
  color: var(--primary-hover, #2A52BE) !important;
}

.mina-filter-item input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  accent-color: var(--primary, #1A2560) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Nút Cài Đặt Lại Bộ Lọc */
.mina-filter-sidebar a[href*="filter"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 12px !important;
  margin-top: 16px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--primary-hover, #2A52BE) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--primary-light, #C4CCDE) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mina-filter-sidebar a[href*="filter"]:hover {
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-color: var(--primary, #1A2560) !important;
}

/* --- LƯỚI SẢN PHẨM BÊN PHẢI (4 SẢN PHẨM 1 DÒNG) --- */
.mina-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px 16px !important;
  align-items: stretch !important;
}

/* --- PHÂN TRANG (PAGINATION) --- */
.mina-pagination-wrap {
  grid-column: 1 / -1 !important;
  margin-top: 36px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.mina-pagination-wrap ul.page-numbers {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mina-pagination-wrap ul.page-numbers li {
  margin: 0 !important;
  padding: 0 !important;
}

.mina-pagination-wrap ul.page-numbers a,
.mina-pagination-wrap ul.page-numbers span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 1px solid rgba(234, 217, 222, 0.7) !important;
  background: #FFFFFF !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mina-pagination-wrap ul.page-numbers span.current {
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 4px 12px rgba(26, 37, 96, 0.25) !important;
}

.mina-pagination-wrap ul.page-numbers a:hover {
  background: var(--bg-soft, #E4E9F7) !important;
  color: var(--primary-hover, #2A52BE) !important;
  border-color: var(--primary-hover, #2A52BE) !important;
}

/* --- RESPONSIVE MOBILE / TABLET CHO LAYOUT --- */
@media (max-width: 1200px) {
  .mina-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .mina-archive-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mina-filter-sidebar {
    position: static !important;
  }

  .mina-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
  }
}

@media (max-width: 480px) {
  .mina-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   SITE FOOTER (BLACK LUXURY THEME - MÀU CHỦ ĐẠO LÀ MÀU ĐEN)
   - Nền đen #111111 / #0B0B0B sang trọng chuẩn Luxury Cosmetic Brand
   - Chữ trắng bạc #CCCCCC & #FFFFFF tương phản cao, dịu mắt
   - Icon mạng xã hội & Nút gửi dáng tròn phối màu Đen - Trắng đẳng cấp
   ========================================================================== */
footer.site-footer {
  background: #111111 !important;
  color: #CCCCCC !important;
  padding: 60px 0 30px 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid #222222 !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  position: relative !important;
  clear: both !important;
  width: 100% !important;
  z-index: 99 !important;
}

.site-footer .footer-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Divider / Plus Accent */
.site-footer-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
  position: relative !important;
}

.site-footer-divider::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  background: #222222 !important;
  z-index: 1 !important;
}

.site-footer-plus {
  position: relative !important;
  z-index: 2 !important;
  background: #111111 !important;
  padding: 0 16px !important;
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 300 !important;
}

/* 4-Column Grid */
.site-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr !important;
  gap: 40px !important;
  margin-bottom: 50px !important;
}

/* Column 1: Brand */
.site-footer-brand img {
  max-width: 170px !important;
  height: auto !important;
  margin-bottom: 18px !important;
  display: block !important;
  filter: brightness(1.1) !important;
}

.site-footer-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #999999 !important;
  margin-bottom: 22px !important;
}

.site-footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.site-footer-socials a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #222222 !important;
  color: #FFFFFF !important;
  border: 1px solid #333333 !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.site-footer-socials a svg {
  width: 18px !important;
  height: 18px !important;
}

.site-footer-socials a:hover {
  background: #FFFFFF !important;
  color: #111111 !important;
  border-color: #FFFFFF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

/* Columns 2 & 3 & 4: General Headers & Links */
.site-footer-col h5 {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
  letter-spacing: 0.02em !important;
  text-transform: capitalize !important;
}

.site-footer-col a,
.site-footer-col ul.site-footer-menu li a {
  display: block !important;
  font-size: 13.5px !important;
  color: #CCCCCC !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.site-footer-col a:hover,
.site-footer-col ul.site-footer-menu li a:hover {
  color: #FFFFFF !important;
  transform: translateX(4px) !important;
}

.site-footer-col ul.site-footer-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Contact List */
.site-footer-contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

.site-footer-contact li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  color: #CCCCCC !important;
  margin-bottom: 12px !important;
  line-height: 1.45 !important;
}

.site-footer-contact li svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: #FFFFFF !important;
  margin-top: 2px !important;
}

/* Newsletter Box (Thẻ Nhận Tin Nền Tối Sang Trọng) */
.site-footer-news-box {
  background: #1A1A1A !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.site-footer-news-box h6 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.site-footer-news-box p {
  font-size: 12.5px !important;
  color: #999999 !important;
  margin-bottom: 14px !important;
  line-height: 1.45 !important;
}

.site-footer-news-box form,
.site-footer-news-box .wpcf7 form {
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

.site-footer-news-box .wpcf7-form-control-wrap {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

body .site-footer-news-box input[type="email"],
body .site-footer-news-box input.wpcf7-email,
body .site-footer-news-box input.wpcf7-text {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  background: #111111 !important;
  border: 1px solid #333333 !important;
  border-radius: 999px !important;
  padding: 0 48px 0 16px !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
  outline: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

body .site-footer-news-box input[type="email"]::placeholder,
body .site-footer-news-box input.wpcf7-email::placeholder {
  color: #777777 !important;
}

body .site-footer-news-box input[type="email"]:focus,
body .site-footer-news-box input.wpcf7-email:focus {
  background: #0B0B0B !important;
  border-color: #FFFFFF !important;
}

/* Nút Tròn Hoàn Hảo (1:1 Aspect Ratio Circular Button) */
.site-footer-news-box button,
.site-footer-news-box input[type="submit"],
.site-footer-news-box button[type="submit"],
.site-footer-news-box .wpcf7-submit {
  position: absolute !important;
  right: 5px !important;
  top: 21px !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #111111 !important;
  border: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
  z-index: 5 !important;
}

.site-footer-news-box button svg,
.site-footer-news-box button[type="submit"] svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #111111 !important;
  fill: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.site-footer-news-box button:hover,
.site-footer-news-box input[type="submit"]:hover,
.site-footer-news-box button[type="submit"]:hover,
.site-footer-news-box .wpcf7-submit:hover {
  background: #E5E5E5 !important;
  color: #000000 !important;
  transform: translateY(-50%) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

.site-footer-news-box .wpcf7-response-output {
  margin: 10px 0 0 0 !important;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  background: #222222 !important;
  border: 1px solid #333333 !important;
  color: #FFFFFF !important;
}



/* Bottom Bar */
.site-footer-copy {
  font-size: 13px !important;
  color: #222222 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

.site-footer-copy strong {
  color: #1A2560 !important;
  font-weight: 700 !important;
}

.site-footer-copy a {
  color: #1A2560 !important;
  text-decoration: underline !important;
}

.site-footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-top: 24px !important;
  border-top: 1px solid #222222 !important;
  flex-wrap: wrap !important;
}


.site-footer-notice {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1A1A1A !important;
  border: 1px solid #333333 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  color: #FFFFFF !important;
}

.site-footer-notice svg {
  width: 16px !important;
  height: 16px !important;
  color: #FFFFFF !important;
}

.site-footer-notice strong {
  display: block !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}

/* Responsive Footer */
@media (max-width: 992px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 576px) {
  .site-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .site-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   HEADER MEGA MENU DYNAMIC OVERRIDE (100vw CĂN GIỮA - 4 CỘT - MỖI CỘT 5 DÒNG)
   ========================================================================== */
#header .header-bottom-nav>li,
#header .header-nav>li,
#wide-nav .nav>li {
  position: static !important;
}

#wide-nav,
#header .header-bottom {
  position: relative !important;
}

/* Loại bỏ tất cả đầu nhọn tam giác mũi tên */
#header .nav-dropdown::before,
#header .nav-dropdown::after,
#header .sub-menu::before,
#header .sub-menu::after,
.nav-dropdown-has-arrow:before,
.nav-dropdown-has-arrow:after,
.has-dropdown:before,
.has-dropdown:after {
  display: none !important;
  content: none !important;
}

/* Khung Mega Menu 100vw Căn giữa màn hình */
#header .header-bottom-nav>li>.nav-dropdown,
#header .header-bottom-nav>li>.sub-menu,
#header .header-nav>li>.nav-dropdown,
#header .header-nav>li>.sub-menu,
#wide-nav .nav-dropdown,
#wide-nav .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: none !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  border-top: 1px solid var(--divider, #BAC5E1) !important;
  box-shadow: 0 20px 45px rgba(27, 18, 22, 0.08) !important;
  padding: 32px calc((100vw - 1240px) / 2) !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s !important;
  z-index: 9999 !important;
  list-style: none !important;

  /* Grid 4 Cột - Mỗi cột 5 Dòng (Tự động tràn dòng xuống cột 2, 3, 4) */
  display: grid !important;
  grid-template-rows: repeat(5, auto) !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px 36px !important;
  align-items: start !important;
}

/* Padding cho màn hình nhỏ hơn 1280px */
@media (max-width: 1280px) {

  #header .nav-dropdown,
  #header .sub-menu,
  #wide-nav .nav-dropdown,
  #wide-nav .sub-menu {
    padding: 28px 32px !important;
  }
}

/* Kích hoạt khi Hover */
#header .header-bottom-nav>li:hover>.nav-dropdown,
#header .header-bottom-nav>li:hover>.sub-menu,
#header .header-nav>li:hover>.nav-dropdown,
#header .header-nav>li:hover>.sub-menu,
#wide-nav .nav>li:hover>.nav-dropdown,
#wide-nav .nav>li:hover>.sub-menu,
#wide-nav li:hover>.nav-dropdown,
#wide-nav li:hover>.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: grid !important;
}

/* Định dạng Menu Cấp 2 (Chữ KHÔNG in đậm - font-weight: 400) */
#header .nav-dropdown>li,
#header .header-bottom-nav>li>.sub-menu>li,
#wide-nav .header-bottom-nav>li>.sub-menu>li {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

#header .nav-dropdown>li>a,
#header .header-bottom-nav>li>.sub-menu>li>a,
#wide-nav .header-bottom-nav>li>.sub-menu>li>a {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  /* Không in đậm */
  color: var(--text-headline, #1B1216) !important;
  text-transform: capitalize !important;
  letter-spacing: -0.01em !important;
  padding: 5px 12px 5px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  display: block !important;
  width: 100% !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

#header .nav-dropdown>li:hover>a,
#header .nav-dropdown>li>a:hover,
#header .header-bottom-nav>li>.sub-menu>li:hover>a,
#wide-nav .header-bottom-nav>li>.sub-menu>li:hover>a {
  color: var(--primary-hover, #2A52BE) !important;
  transform: translateX(4px) !important;
}

/* Menu Cấp 3 nếu có */
#header .nav-dropdown>li>ul.sub-menu,
#header .header-bottom-nav>li>.sub-menu>li>ul.sub-menu,
#wide-nav .header-bottom-nav>li>.sub-menu>li>ul.sub-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  padding: 0 0 0 10px !important;
  margin: 4px 0 8px 0 !important;
  height: auto !important;
  max-height: none !important;
}

#header .nav-dropdown>li>ul.sub-menu>li>a,
#header .header-bottom-nav>li>.sub-menu>li>ul.sub-menu>li>a,
#wide-nav .header-bottom-nav>li>.sub-menu>li>ul.sub-menu>li>a {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--text-base, #2E1B21) !important;
  line-height: 1.45 !important;
  padding: 4px 0 !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

#header .nav-dropdown>li>ul.sub-menu>li>a:hover,
#header .header-bottom-nav>li>.sub-menu>li>ul.sub-menu>li>a:hover,
#wide-nav .header-bottom-nav>li>.sub-menu>li>ul.sub-menu>li>a:hover {
  color: var(--primary-hover, #2A52BE) !important;
  transform: translateX(4px) !important;
  font-weight: 500 !important;
}

.row.row-main:has(.makieky-about-wrap),
.row.row-main:has(.makieky-policy-wrap) {
  max-width: unset !important;
}

/* ==========================================================================
   WOOCOMMERCE NOTICES & ERROR MESSAGES (CHUẨN THƯƠNG HIỆU MAKIEKY)
   ========================================================================== */
.woocommerce-notice,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--border, #DCE3F2) !important;
  border-left: 4px solid var(--primary, #1A2560) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14px !important;
  color: var(--text-headline, #12193F) !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 15px rgba(26, 37, 96, 0.05) !important;
  list-style: none !important;
}

.woocommerce-error {
  background: #FFF0F2 !important;
  border-color: #F8D7DA !important;
  border-left-color: var(--alert, #C0453D) !important;
  color: var(--alert, #C0453D) !important;
}

.woocommerce-message {
  background: #E8F5E9 !important;
  border-color: #C8E6C9 !important;
  border-left-color: var(--success, #5B9C8B) !important;
  color: var(--success, #5B9C8B) !important;
}

.woocommerce-info {
  background: var(--bg-soft, #E4E9F7) !important;
  border-color: var(--border, #DCE3F2) !important;
  border-left-color: var(--primary, #1A2560) !important;
  color: var(--text-headline, #12193F) !important;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin-bottom: 4px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  list-style: none !important;
}

.woocommerce-error li:last-child {
  margin-bottom: 0 !important;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  float: right !important;
  margin-left: 14px !important;
  transition: all 0.2s ease !important;
}

.woocommerce-error .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background: var(--primary-hover, #2A52BE) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   WOOCOMMERCE CART PAGE (TRANG GIỎ HÀNG LUXURY UX/UI)
   ========================================================================== */
.woocommerce-cart .page-wrapper,
.woocommerce-cart .cart-container {
  /* padding-top: 30px !important; */
  padding-bottom: 60px !important;
}

.woocommerce-cart table.shop_table {
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(26, 37, 96, 0.03) !important;
}

.woocommerce-cart table.shop_table th {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-headline, #1B1216) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
}

.woocommerce-cart table.shop_table td {
  padding: 18px 16px !important;
  border-bottom: 1px solid rgba(234, 217, 222, 0.6) !important;
  vertical-align: middle !important;
}

.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none !important;
}

/* Ảnh sản phẩm trong Giỏ hàng */
.woocommerce-cart td.product-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  padding: 4px !important;
}

.woocommerce-cart td.product-name a {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  transition: color 0.2s ease !important;
}

.woocommerce-cart td.product-name a:hover {
  color: var(--primary, #1A2560) !important;
}

.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--primary, #1A2560) !important;
}

/* Nút Xóa Sản Phẩm */
.woocommerce-cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--bg-soft, #E4E9F7) !important;
  color: var(--primary, #1A2560) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.woocommerce-cart td.product-remove a.remove:hover {
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  transform: scale(1.1) !important;
}

/* Khung Nhập Số Lượng Quantity */
.woocommerce-cart td.product-quantity .quantity input {
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
}

/* Thẻ Tổng Giỏ Hàng (Cart Totals Card) */
.woocommerce-cart .cart_totals {
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  box-shadow: 0 6px 24px rgba(26, 37, 96, 0.04) !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid var(--primary-light, #C4CCDE) !important;
}

.woocommerce-cart .cart_totals table.shop_table {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 24px !important;
}

.woocommerce-cart .cart_totals td,
.woocommerce-cart .cart_totals th {
  padding: 12px 0 !important;
  background: transparent !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 6px 20px rgba(26, 37, 96, 0.25) !important;
  transition: all 0.25s ease !important;
  margin-top: 10px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--primary-hover, #2A52BE) !important;
  box-shadow: 0 8px 24px rgba(26, 37, 96, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT PAGE (TRANG THANH TOÁN LUXURY UX/UI)
   ========================================================================== */
.woocommerce-checkout form.checkout {
  padding-top: 20px !important;
  padding-bottom: 60px !important;
}

.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .col-1 h3,
.woocommerce-checkout .col-2 h3 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid var(--primary-light, #C4CCDE) !important;
}

.woocommerce-checkout .form-row label {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 6px !important;
}

.woocommerce-checkout .form-row label .required {
  color: var(--primary, #1A2560) !important;
}

/* Form Ô Nhập Liệu (Input, Select, Textarea) */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100% !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--divider, #BAC5E1) !important;
  background: #FFFFFF !important;
  padding: 0 16px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--text-headline, #1B1216) !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout textarea {
  height: 100px !important;
  padding: 12px 16px !important;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 96, 0.08) !important;
  background: #FFFFFF !important;
}

/* Thẻ Đơn Hàng & Phương Thức Thanh Toán (Order Review & Payment Box) */
.woocommerce-checkout #order_review {
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  box-shadow: 0 8px 28px rgba(26, 37, 96, 0.05) !important;
}

.woocommerce-checkout #payment {
  background: var(--bg-soft, #E4E9F7) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  margin-top: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  padding-bottom: 16px !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
}

/* Nút Đặt Hàng (Place Order Button) */
.woocommerce-checkout #place_order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(26, 37, 96, 0.25) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  margin-top: 16px !important;
}

.woocommerce-checkout #place_order:hover {
  background: var(--primary-hover, #2A52BE) !important;
  box-shadow: 0 8px 24px rgba(26, 37, 96, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   SALE BADGE (NHÃN GIẢM GIÁ TỰ ĐỘNG -XX%)
   ========================================================================== */
.cat-thumb {
  position: relative !important;
}

.cat-thumb .sale-badge,
.hero-newtag.sale-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  z-index: 5 !important;
  box-shadow: 0 4px 12px rgba(26, 37, 96, 0.25) !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* ==========================================================================
   MAKIEKY CART PAGE & CHECKOUT PAGE TEMPLATE STYLES (MATCHING DEMO UX/UI)
   ========================================================================== */

/* Page Hero Banner Full Screen Width (100vw) */
.makieky-cart-wrapper .pg-hero,
.makieky-checkout-wrapper .pg-hero {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  padding: 36px 0 26px !important;
  box-sizing: border-box !important;
}

.makieky-cart-wrapper .wrap,
.makieky-checkout-wrapper .wrap,
.makieky-cart-wrapper .pg-hero .wrap,
.makieky-checkout-wrapper .pg-hero .wrap,
.makieky-cart-wrapper .ship-bar .wrap {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  box-sizing: border-box !important;
}

.makieky-cart-wrapper .ship-bar .wrap,
.makieky-checkout-wrapper .wrap {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.makieky-cart-wrapper .breadcrumb,
.makieky-checkout-wrapper .breadcrumb {
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 12px !important;
}

.makieky-cart-wrapper .breadcrumb a:hover,
.makieky-checkout-wrapper .breadcrumb a:hover {
  color: var(--primary, #1A2560) !important;
}

.makieky-cart-wrapper .pg-hero h1,
.makieky-checkout-wrapper .pg-hero h1 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 8px !important;
}

.makieky-cart-wrapper .item-count {
  font-size: 13.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-top: 6px !important;
}

/* Stepper Progress Bar in Checkout */
.makieky-checkout-wrapper .steps {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.makieky-checkout-wrapper .step {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-checkout-wrapper .step .dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--divider, #BAC5E1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #8C6B72) !important;
  flex: none !important;
}

.makieky-checkout-wrapper .step.done .dot {
  background: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
}

.makieky-checkout-wrapper .step.current {
  color: var(--text-headline, #1B1216) !important;
  font-weight: 600 !important;
}

.makieky-checkout-wrapper .step.current .dot {
  border-color: var(--primary, #1A2560) !important;
  color: var(--primary, #1A2560) !important;
}

.makieky-checkout-wrapper .step-line {
  width: 32px !important;
  height: 1px !important;
  background: var(--divider, #BAC5E1) !important;
}

/* Free Shipping Progress Bar */
.makieky-cart-wrapper .ship-bar {
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
}

.makieky-cart-wrapper .ship-bar .msg {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 10px !important;
}

.makieky-cart-wrapper .ship-bar .msg svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--primary, #1A2560) !important;
  flex: none !important;
}

.makieky-cart-wrapper .ship-bar .msg strong {
  color: var(--primary, #1A2560) !important;
}

.makieky-cart-wrapper .ship-track {
  height: 6px !important;
  border-radius: 99px !important;
  background: var(--primary-light, #C4CCDE) !important;
  overflow: hidden !important;
}

.makieky-cart-wrapper .ship-fill {
  height: 100% !important;
  background: var(--primary, #1A2560) !important;
  border-radius: 99px !important;
  transition: width 0.4s ease !important;
}

/* Layout for Cart Body & Checkout Body */
.makieky-cart-wrapper .cart-body,
.makieky-checkout-wrapper .co-body {
  padding: 44px 0 80px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 44px !important;
  align-items: flex-start !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Cart Item Rows */
.makieky-cart-wrapper .cart-list {
  display: flex !important;
  flex-direction: column !important;
}

.makieky-cart-wrapper .cart-row {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
}

.makieky-cart-wrapper .mini-tube {
  width: 74px !important;
  height: 74px !important;
  border-radius: 12px !important;
  background: var(--bg-soft, #E4E9F7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  overflow: hidden !important;
}

.makieky-cart-wrapper .mini-tube img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
}

.makieky-cart-wrapper .cart-info h3 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 4px !important;
}

.makieky-cart-wrapper .cart-info span {
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-cart-wrapper .cart-info .remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-top: 8px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.makieky-cart-wrapper .cart-info .remove svg {
  width: 12px !important;
  height: 12px !important;
}

.makieky-cart-wrapper .cart-info .remove:hover {
  color: var(--primary, #1A2560) !important;
}

.makieky-cart-wrapper .price-unit {
  font-size: 14px !important;
  color: var(--text-muted, #8C6B72) !important;
  white-space: nowrap !important;
}

.makieky-cart-wrapper .qty {
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.makieky-cart-wrapper .qty button {
  all: unset !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary, #1A2560) !important;
  font-size: 16px !important;
  cursor: pointer !important;
}

.makieky-cart-wrapper .qty button:hover {
  background: var(--bg-soft, #E4E9F7) !important;
}

.makieky-cart-wrapper .qty input {
  width: 32px !important;
  text-align: center !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: var(--text-headline, #1B1216) !important;
  background: none !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.makieky-cart-wrapper .price-line {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  white-space: nowrap !important;
}

.makieky-cart-wrapper .continue-shop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 26px !important;
  font-size: 13.5px !important;
  color: var(--primary, #1A2560) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.makieky-cart-wrapper .continue-shop svg {
  width: 14px !important;
  height: 14px !important;
}

/* Summary Card in Cart & Checkout (Obagi Style Soft Neutral Background) */
.makieky-cart-wrapper .summary,
.makieky-checkout-wrapper .summary {
  position: sticky !important;
  top: 24px !important;
  border: 1px solid var(--border, #E2E2E2) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  background: #F8F9FA !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

.makieky-cart-wrapper .summary h3,
.makieky-checkout-wrapper .summary h3 {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--text-headline, #111111) !important;
  margin-bottom: 18px !important;
}

.makieky-cart-wrapper .sum-row,
.makieky-checkout-wrapper .sum-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13.5px !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  color: var(--text-base, #33384F) !important;
  padding: 8px 0 !important;
}

.makieky-cart-wrapper .sum-row.muted,
.makieky-checkout-wrapper .sum-row.muted {
  color: var(--text-muted, #6E7288) !important;
}

.makieky-cart-wrapper .sum-row.discount span:last-child,
.makieky-checkout-wrapper .sum-row.discount span:last-child {
  color: var(--primary, #132466) !important;
  font-weight: 700 !important;
}

.makieky-cart-wrapper .sum-total,
.makieky-checkout-wrapper .sum-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 14px 0 4px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--border, #E2E2E2) !important;
}

.makieky-cart-wrapper .sum-total span:first-child,
.makieky-checkout-wrapper .sum-total span:first-child {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  color: var(--text-headline, #111111) !important;
}

.makieky-cart-wrapper .sum-total span:last-child,
.makieky-checkout-wrapper .sum-total span:last-child {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-style: normal !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

.makieky-cart-wrapper .coupon {
  display: flex !important;
  gap: 8px !important;
  margin: 18px 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}

.makieky-cart-wrapper .coupon div.flex-row,
.makieky-cart-wrapper .coupon div.form-row,
.makieky-cart-wrapper .coupon div.flex-col {
  display: contents !important;
}

.makieky-cart-wrapper .coupon input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 44px !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  background: #FFFFFF !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.makieky-cart-wrapper .coupon button {
  flex: none !important;
  height: 44px !important;
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(19, 36, 102, 0.15) !important;
}

.makieky-cart-wrapper .coupon button:hover {
  background: var(--primary-hover, #2A52BE) !important;
}

.makieky-cart-wrapper .checkout-btn,
.makieky-checkout-wrapper .place-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(19, 36, 102, 0.2) !important;
  box-sizing: border-box !important;
}

.makieky-cart-wrapper .checkout-btn:hover,
.makieky-checkout-wrapper .place-order:hover {
  background: var(--primary-hover, #2A52BE) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(19, 36, 102, 0.3) !important;
}

.makieky-cart-wrapper .checkout-btn svg,
.makieky-checkout-wrapper .place-order svg {
  width: 16px !important;
  height: 16px !important;
}

.makieky-cart-wrapper .pay-icons {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 16px !important;
}

.makieky-cart-wrapper .pay-icons span {
  width: 36px !important;
  height: 24px !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted, #8C6B72) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.makieky-cart-wrapper .secure-note {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: center !important;
  font-size: 11.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-top: 14px !important;
}

.makieky-cart-wrapper .secure-note svg {
  width: 12px !important;
  height: 12px !important;
  color: var(--primary, #1A2560) !important;
}

/* Checkout Form Sections */
.makieky-checkout-wrapper .section {
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  padding: 26px !important;
  margin-bottom: 24px !important;
}

.makieky-checkout-wrapper .section h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-headline, #1B1216) !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 20px !important;
}

.makieky-checkout-wrapper .section h2 .num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
  font-size: 11.5px !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

/* Mini Item in Checkout Summary Sidebar */
.makieky-checkout-wrapper .mini-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
}

.makieky-checkout-wrapper .mini-item .mini-tube {
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  position: relative !important;
}

.makieky-checkout-wrapper .mini-item .mini-tube img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.makieky-checkout-wrapper .mini-item .mini-tube .qty-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: var(--secondary, #1B1216) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.makieky-checkout-wrapper .mini-item .info {
  flex: 1 !important;
  min-width: 0 !important;
}

.makieky-checkout-wrapper .mini-item .info h4 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-headline, #1B1216) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.makieky-checkout-wrapper .mini-item .info span {
  font-size: 11.5px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-checkout-wrapper .mini-item .price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  white-space: nowrap !important;
}

.makieky-checkout-wrapper .trust-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.makieky-checkout-wrapper .trust-row .t {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-checkout-wrapper .trust-row .t svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--primary, #1A2560) !important;
  flex: none !important;
}

.makieky-checkout-wrapper .trust-row a {
  color: var(--primary, #1A2560) !important;
  text-decoration: underline !important;
}

.makieky-checkout-wrapper .moit-mini {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--divider, #BAC5E1) !important;
  font-size: 10.5px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-checkout-wrapper .moit-mini svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--gold, #D8B978) !important;
  flex: none !important;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS FOR CART AND CHECKOUT
   ========================================================================== */
@media (max-width: 900px) {
  .makieky-cart-wrapper .wrap,
  .makieky-checkout-wrapper .wrap,
  .makieky-cart-wrapper .pg-hero .wrap,
  .makieky-checkout-wrapper .pg-hero .wrap,
  .makieky-cart-wrapper .ship-bar .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .makieky-cart-wrapper .cart-body,
  .makieky-checkout-wrapper .co-body {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 20px !important;
    padding-bottom: 50px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .makieky-cart-wrapper .summary,
  .makieky-checkout-wrapper .summary {
    position: static !important;
    padding: 20px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 768px) {
  .pg-hero {
    padding: 24px 0 20px !important;
  }
  .pg-hero h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  .pg-hero .item-count {
    font-size: 12.5px !important;
    margin-bottom: 12px !important;
  }
  .pg-hero .steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 4px 10px 8px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pg-hero .steps::-webkit-scrollbar {
    display: none !important;
  }
  .pg-hero .steps .step {
    font-size: 11.5px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .pg-hero .steps .step .dot {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .pg-hero .steps .step-line {
    width: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Cart Row Mobile Layout */
  .makieky-cart-wrapper .cart-row {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "thumb info info"
      "thumb qty price" !important;
    gap: 8px 12px !important;
    align-items: center !important;
    padding: 16px 0 !important;
  }

  .makieky-cart-wrapper .mini-tube {
    grid-area: thumb !important;
    width: 68px !important;
    height: 68px !important;
    align-self: start !important;
    border-radius: 10px !important;
  }

  .makieky-cart-wrapper .cart-info {
    grid-area: info !important;
  }

  .makieky-cart-wrapper .cart-info h3 {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  .makieky-cart-wrapper .price-unit {
    display: none !important;
  }

  .makieky-cart-wrapper .qty {
    grid-area: qty !important;
    justify-self: start !important;
    height: 32px !important;
  }

  .makieky-cart-wrapper .qty button {
    width: 28px !important;
    height: 28px !important;
  }

  .makieky-cart-wrapper .qty input {
    width: 30px !important;
    height: 28px !important;
    font-size: 12.5px !important;
  }

  .makieky-cart-wrapper .price-line {
    grid-area: price !important;
    justify-self: end !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #111111 !important;
  }

  .makieky-cart-wrapper .cart-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .makieky-cart-wrapper .cart-actions a.continue-shop,
  .makieky-cart-wrapper .cart-actions button[name="update_cart"],
  .makieky-cart-wrapper .cart-actions .button {
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .makieky-cart-wrapper .coupon {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .makieky-cart-wrapper .coupon input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    border: 1.5px solid var(--border, #E2E8F0) !important;
  }

  .makieky-cart-wrapper .coupon button {
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }

  .makieky-cart-wrapper .checkout-btn {
    height: 48px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }
}

/* ==========================================================================
   SUPER CLEAN CHECKOUT LAYOUT FIX (CHUẨN UX/UI LUXURY MAKIEKY)
   ========================================================================== */
.makieky-checkout-wrapper #customer_details,
.makieky-checkout-wrapper .col-1,
.makieky-checkout-wrapper .col-2,
.makieky-checkout-wrapper .woocommerce-billing-fields,
.makieky-checkout-wrapper .woocommerce-billing-fields__field-wrapper {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.makieky-checkout-wrapper .section {
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

.makieky-checkout-wrapper .section h2 {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  /* font-style: italic !important; */
  font-size: 20px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--text-headline, #1B1216) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
  padding-bottom: 0 !important;
  border: none !important;
}

.makieky-checkout-wrapper .section h2 .num {
  display: none !important;
}

/* Grid Layout 2 Columns for Billing Fields */
.makieky-checkout-wrapper .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.makieky-checkout-wrapper .form-grid .form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Full Width Fields (Họ và tên, Địa chỉ giao hàng, Ghi chú) */
.makieky-checkout-wrapper .form-grid #billing_first_name_field,
.makieky-checkout-wrapper .form-grid #billing_address_1_field,
.makieky-checkout-wrapper .form-grid #order_comments_field,
.makieky-checkout-wrapper .form-grid .form-row-wide {
  grid-column: 1 / -1 !important;
}

/* Half Width Fields (Số điện thoại, Email) */
.makieky-checkout-wrapper .form-grid #billing_phone_field,
.makieky-checkout-wrapper .form-grid .form-row-first {
  grid-column: 1 / 2 !important;
}

.makieky-checkout-wrapper .form-grid #billing_email_field,
.makieky-checkout-wrapper .form-grid .form-row-last {
  grid-column: 2 / 3 !important;
}

.makieky-checkout-wrapper .form-grid label {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 2px !important;
}

.makieky-checkout-wrapper .form-grid label .required {
  color: var(--primary, #1A2560) !important;
  text-decoration: none !important;
}

.makieky-checkout-wrapper .form-grid input[type="text"],
.makieky-checkout-wrapper .form-grid input[type="email"],
.makieky-checkout-wrapper .form-grid input[type="tel"],
.makieky-checkout-wrapper .form-grid select {
  width: 100% !important;
  height: 44px !important;
  border-radius: 9px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  background: #FFFFFF !important;
  padding: 0 14px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--text-headline, #1B1216) !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.makieky-checkout-wrapper .form-grid textarea {
  width: 100% !important;
  height: 80px !important;
  border-radius: 9px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  background: #FFFFFF !important;
  padding: 10px 14px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--text-headline, #1B1216) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}

.makieky-checkout-wrapper .form-grid input:focus,
.makieky-checkout-wrapper .form-grid select:focus,
.makieky-checkout-wrapper .form-grid textarea:focus {
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 96, 0.08) !important;
}

/* Hide shipping fields & checkbox */
.makieky-checkout-wrapper .woocommerce-shipping-fields,
.makieky-checkout-wrapper #ship-to-a-different-address,
.makieky-checkout-wrapper .shipping_address {
  display: none !important;
}

/* Coupon Box Fix */
.makieky-checkout-wrapper .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-left: 4px solid var(--primary, #1A2560) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-size: 13.5px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .makieky-checkout-wrapper .co-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  .makieky-checkout-wrapper .co-main-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .makieky-checkout-wrapper .section {
    padding: 20px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .makieky-checkout-wrapper .form-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .makieky-checkout-wrapper .form-grid .form-row {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .makieky-checkout-wrapper .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .makieky-checkout-wrapper .form-grid input[type="text"],
  .makieky-checkout-wrapper .form-grid input[type="email"],
  .makieky-checkout-wrapper .form-grid input[type="tel"],
  .makieky-checkout-wrapper .form-grid select,
  .makieky-checkout-wrapper .form-grid textarea,
  .makieky-checkout-wrapper input.input-text {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}





.makieky-checkout-wrapper .form-grid .form-row input,
.makieky-checkout-wrapper .form-grid .form-row select,
.makieky-checkout-wrapper .form-grid .form-row textarea {
  font-size: 13.5px !important;
  font-family: inherit !important;
  color: var(--text-headline, #1B1216) !important;
  background: #FFFFFF !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
}

.makieky-checkout-wrapper .form-grid .form-row textarea {
  height: 80px !important;
}

.makieky-checkout-wrapper .form-grid .form-row input:focus,
.makieky-checkout-wrapper .form-grid .form-row select:focus,
.makieky-checkout-wrapper .form-grid .form-row textarea:focus {
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 0 0 3px rgba(26, 37, 96, 0.08) !important;
}

/* ==========================================================================
   UNIFIED STEPPER HEADER (Merged directly inside Hero Banner)
   ========================================================================== */

/* Hide standalone Flatsome checkout page title bar */
.checkout-page-title,
.page-title.checkout-page-title {
  display: none !important;
}

/* Stepper inside Hero Banner (.pg-hero .steps) */
/* Stepper inside Hero Banner (.pg-hero .steps) */
.pg-hero .steps,
.makieky-cart-wrapper .steps,
.makieky-checkout-wrapper .steps,
.steps {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-top: 16px !important;
  box-sizing: border-box !important;
}

.pg-hero .steps .step,
.makieky-cart-wrapper .steps .step,
.makieky-checkout-wrapper .steps .step,
.steps .step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #6E7288) !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.pg-hero .steps a.step:hover,
.makieky-cart-wrapper .steps a.step:hover,
.makieky-checkout-wrapper .steps a.step:hover {
  color: var(--primary, #132466) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

.pg-hero .steps .step .dot,
.makieky-cart-wrapper .steps .step .dot,
.makieky-checkout-wrapper .steps .step .dot,
.steps .step .dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--divider, #BAC5E1) !important;
  color: var(--text-muted, #6E7288) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Active / Current Step */
.pg-hero .steps .step.current,
.makieky-cart-wrapper .steps .step.current,
.makieky-checkout-wrapper .steps .step.current,
.steps .step.current {
  background: #FFFFFF !important;
  color: var(--primary, #132466) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(19, 36, 102, 0.12) !important;
  border: 1px solid var(--border, #E2E8F0) !important;
  opacity: 1 !important;
}

.pg-hero .steps .step.current .dot,
.makieky-cart-wrapper .steps .step.current .dot,
.makieky-checkout-wrapper .steps .step.current .dot,
.steps .step.current .dot {
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
}

/* Completed / Done Step */
.pg-hero .steps .step.done .dot,
.makieky-cart-wrapper .steps .step.done .dot,
.makieky-checkout-wrapper .steps .step.done .dot,
.steps .step.done .dot {
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
}

/* Step Connector Line */
.pg-hero .steps .step-line,
.makieky-cart-wrapper .steps .step-line,
.makieky-checkout-wrapper .steps .step-line,
.steps .step-line {
  width: 24px !important;
  height: 1.5px !important;
  background: var(--divider, #BAC5E1) !important;
  opacity: 0.8 !important;
  flex-shrink: 0 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .pg-hero .steps,
  .makieky-cart-wrapper .steps,
  .makieky-checkout-wrapper .steps,
  .steps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 2px 10px !important;
    gap: 6px !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
  }

  .pg-hero .steps::-webkit-scrollbar,
  .makieky-cart-wrapper .steps::-webkit-scrollbar,
  .makieky-checkout-wrapper .steps::-webkit-scrollbar,
  .steps::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .pg-hero .steps .step,
  .makieky-cart-wrapper .steps .step,
  .makieky-checkout-wrapper .steps .step,
  .steps .step {
    font-size: 11.5px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
  }

  .pg-hero .steps .step .dot,
  .makieky-cart-wrapper .steps .step .dot,
  .makieky-checkout-wrapper .steps .step .dot,
  .steps .step .dot {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }

  .pg-hero .steps .step-line,
  .makieky-cart-wrapper .steps .step-line,
  .makieky-checkout-wrapper .steps .step-line,
  .steps .step-line {
    width: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* Custom Breadcrumb Styles */
.mina-breadcrumb {
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.mina-breadcrumb a {
  color: var(--text-muted, #8C6B72) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.mina-breadcrumb a:hover {
  color: var(--primary, #1A2560) !important;
}

.mina-breadcrumb .sep {
  color: var(--text-muted, #8C6B72) !important;
  opacity: 0.6 !important;
}

.mina-breadcrumb .current {
  color: var(--text-headline, #1B1216) !important;
  font-weight: 500 !important;
}

/* Compact Place Order Button */
.makieky-checkout-wrapper .place-order,
.makieky-checkout-wrapper #place_order,
#payment #place_order,
button[name="woocommerce_checkout_place_order"] {
  padding: 10px 24px !important;
  height: 42px !important;
  min-height: 42px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  margin-top: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Payment Notice / Message Box Styling */
#payment .woocommerce-info,
#payment .woocommerce-notice,
.woocommerce-checkout .woocommerce-info {
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-left: 4px solid var(--primary, #1A2560) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}

#payment .woocommerce-info .message-container {
  padding: 0 !important;
  text-align: left !important;
}

.customer_details .section {
  display: block !important;
}

/* Mini Items List in Order Summary */
.makieky-checkout-wrapper .mini-items-list {
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  padding-bottom: 14px !important;
}

.makieky-checkout-wrapper .mini-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 0 !important;
}

.makieky-checkout-wrapper .mini-tube {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.makieky-checkout-wrapper .mini-tube img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9px !important;
}

.makieky-checkout-wrapper .mini-tube .qty-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  z-index: 2 !important;
}

.makieky-checkout-wrapper .mini-item .info {
  flex: 1 !important;
  min-width: 0 !important;
}

.makieky-checkout-wrapper .mini-item .info h4 {
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.35 !important;
}

.makieky-checkout-wrapper .mini-item .price {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  white-space: nowrap !important;
}

a.showcoupon {
  font-weight: 600 !important;
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT NOTICES & ERRORS (FULL GRID SPAN AT TOP)
   ========================================================================== */
.makieky-checkout-wrapper .woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup,
form.checkout .woocommerce-NoticeGroup-checkout,
.co-body>.woocommerce-NoticeGroup-checkout {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-NoticeGroup,
form.checkout .woocommerce-error,
.woocommerce-error.message-wrapper {
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-left: 4px solid var(--primary, #1A2560) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 0 0 20px 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li,
form.checkout .woocommerce-error li {
  font-size: 13.5px !important;
  color: var(--primary, #1A2560) !important;
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li:last-child,
form.checkout .woocommerce-error li:last-child {
  margin-bottom: 0 !important;
}

.woocommerce-NoticeGroup-checkout .woocommerce-error li a,
form.checkout .woocommerce-error li a {
  color: var(--primary, #1A2560) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.woocommerce-NoticeGroup-checkout .message-container,
form.checkout .woocommerce-error .message-container {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}

/* Swiper Navigation Buttons Global Fix */
.cat-scroll-wrap {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.cat-nav-btn {
  position: absolute !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border, #BAC5E1) !important;
  color: var(--primary, #1A2560) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s ease !important;
}

.cat-nav-prev {
  left: 15px !important;
}

.cat-nav-next {
  right: 15px !important;
}

.cat-nav-btn:hover {
  background: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(26, 37, 96, 0.3) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.cat-nav-btn.swiper-button-disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.cat-nav-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.cat-nav-btn::after,
.cat-nav-btn::before {
  display: none !important;
}

@media (max-width: 768px) {
  .cat-nav-prev {
    left: 4px !important;
  }

  .cat-nav-next {
    right: 4px !important;
  }
}

/* ==========================================================================
   MAKIEKY BLOG ARCHIVE & SINGLE POST TEMPLATE STYLES
   ========================================================================== */
.blog-page-wrap .narrow,
.single-post-wrap .narrow {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

/* Blog Archive Hero */
.blog-hero {
  background: var(--bg-soft, #E4E9F7) !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  padding: 52px 0 40px !important;
  text-align: center !important;
}

.blog-hero .breadcrumb {
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}

.blog-hero .breadcrumb a:hover {
  color: var(--primary, #1A2560) !important;
}

.blog-hero h1 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  color: var(--text-headline, #1B1216) !important;
  margin: 0 !important;
}

.blog-hero p {
  margin-top: 10px !important;
  color: var(--text-muted, #8C6B72) !important;
  font-size: 14.5px !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.blog-search-box {
  max-width: 420px !important;
  margin: 26px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
}

.blog-search-box svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--text-muted, #8C6B72) !important;
  flex: none !important;
}

.blog-search-box input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  background: none !important;
}

/* Filter Pills */
.blog-filter-bar {
  padding: 34px 0 8px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.blog-filter-bar a,
.blog-filter-bar button {
  all: unset !important;
  cursor: pointer !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  color: var(--text-muted, #8C6B72) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}

.blog-filter-bar a:hover,
.blog-filter-bar button:hover {
  border-color: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
}

.blog-filter-bar a.active,
.blog-filter-bar button.active {
  background: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
}

.blog-filter-count {
  text-align: center !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  padding: 14px 0 8px !important;
}

/* Featured Post */
.blog-featured {
  padding: 26px 0 10px !important;
}

.featured-card {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 0 !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
  text-decoration: none !important;
}

.featured-card:hover {
  box-shadow: 0 24px 48px -20px rgba(27, 18, 22, 0.18) !important;
}

.featured-thumb {
  min-height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.featured-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.featured-thumb svg {
  width: 64px !important;
  height: 64px !important;
  opacity: 0.9 !important;
}

.featured-body {
  padding: 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.post-tag {
  display: inline-flex !important;
  align-self: flex-start !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--primary, #1A2560) !important;
  background: var(--primary-light, #C4CCDE) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
}

.featured-body h2 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}

.featured-body p {
  font-size: 14px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 18px !important;
}

.post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.post-meta .dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--text-muted, #8C6B72) !important;
}

.post-meta .avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.post-meta .avatar svg {
  width: 12px !important;
  height: 12px !important;
}

/* Blog Grid */
.blog-grid {
  padding: 36px 0 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.post-card {
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
}

.post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -18px rgba(27, 18, 22, 0.16) !important;
  border-color: var(--primary-light, #C4CCDE) !important;
}

.post-thumb {
  height: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.post-thumb svg {
  width: 38px !important;
  height: 38px !important;
  opacity: 0.9 !important;
}

.post-body {
  padding: 20px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.post-body h3 {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.post-body h3 a:hover {
  color: var(--primary, #1A2560) !important;
}

.post-body p {
  font-size: 13px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 14px !important;
  flex: 1 !important;
}

/* Category Gradient Thumbnails */
.thumb-skincare {
  background: linear-gradient(150deg, #C4CCDE, #E4E9F7) !important;
  color: var(--primary, #1A2560) !important;
}

.thumb-makeup {
  background: linear-gradient(150deg, #1A2560, #132466) !important;
  color: #C4CCDE !important;
}

.thumb-tips {
  background: linear-gradient(150deg, #BAC5E1, #E4E9F7) !important;
  color: var(--primary-hover, #132466) !important;
}

.thumb-review {
  background: linear-gradient(150deg, #1B1216, #2E1B21) !important;
  color: var(--gold, #D8B978) !important;
}

.thumb-trend {
  background: linear-gradient(150deg, #D8B978, #C4CCDE) !important;
  color: var(--secondary, #1B1216) !important;
}

/* Single Post Hero & Cover */
.single-post-hero {
  background: var(--bg-soft, #E4E9F7) !important;
  border-bottom: 1px solid var(--divider, #BAC5E1) !important;
  padding: 44px 0 40px !important;
}

.single-post-hero .breadcrumb {
  font-size: 12.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin-bottom: 16px !important;
}

.single-post-hero .breadcrumb a:hover {
  color: var(--primary, #1A2560) !important;
}

.single-post-hero h1 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: clamp(26px, 4.4vw, 40px) !important;
  color: var(--text-headline, #1B1216) !important;
  line-height: 1.3 !important;
  margin-bottom: 18px !important;
}

.article-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 13px !important;
  color: var(--text-muted, #8C6B72) !important;
  flex-wrap: wrap !important;
}

.article-meta .dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: var(--text-muted, #8C6B72) !important;
}

.article-meta .avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

.article-meta .avatar svg {
  width: 14px !important;
  height: 14px !important;
}

.single-post-cover {
  margin-top: -30px !important;
  height: 340px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--bg-soft, #E4E9F7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 30px 60px -26px rgba(26, 37, 96, 0.22) !important;
  position: relative !important;
  z-index: 2 !important;
}

.single-post-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.single-post-cover svg {
  width: 70px !important;
  height: 70px !important;
  color: var(--text-muted, #6E7288) !important;
  opacity: 0.85 !important;
}

/* Article Body Layout */
.article-wrap {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 60px 28px 0 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 220px !important;
  gap: 36px !important;
  align-items: start !important;
}

.share-col {
  position: sticky !important;
  top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.share-col a {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #8C6B72) !important;
  transition: all 0.2s ease !important;
}

.share-col a:hover {
  background: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
}

.share-col svg, .share-col i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  line-height: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-col a:nth-child(1) svg,
.share-col a:nth-child(1) svg path {
  fill: currentColor !important;
  stroke: none !important;
}

.share-col a:nth-child(2) svg,
.share-col a:nth-child(2) svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8px !important;
}

.article-body h2 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 23px !important;
  color: var(--text-headline, #1B1216) !important;
  margin: 34px 0 14px !important;
}

.article-body h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin: 24px 0 10px !important;
}

.article-body p {
  font-size: 15px !important;
  color: var(--text-base, #2E1B21) !important;
  margin-bottom: 16px !important;
}

.article-body ul,
.article-body ol {
  margin: 0 0 16px 22px !important;
}

.article-body li {
  font-size: 15px !important;
  margin-bottom: 8px !important;
}

.article-body strong {
  color: var(--text-headline, #1B1216) !important;
}

.article-body blockquote {
  border-left: 3px solid var(--primary, #1A2560) !important;
  padding: 4px 0 4px 20px !important;
  margin: 26px 0 !important;
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-size: 18px !important;
  color: var(--text-headline, #1B1216) !important;
}

.inline-img {
  height: 220px !important;
  border-radius: 14px !important;
  background: linear-gradient(150deg, var(--primary-light, #C4CCDE), var(--bg-soft, #E4E9F7)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 26px 0 !important;
  color: var(--primary, #1A2560) !important;
}

.inline-img svg {
  width: 44px !important;
  height: 44px !important;
}

.step-card {
  display: flex !important;
  gap: 16px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}

.step-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

.step-card h4 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 5px !important;
}

.step-card p {
  font-size: 13.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin: 0 !important;
}

.tags-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 34px 0 !important;
}

.tags-row a {
  font-size: 12px !important;
  color: var(--text-muted, #8C6B72) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
}

.tags-row a:hover {
  color: var(--primary, #1A2560) !important;
  border-color: var(--primary-light, #C4CCDE) !important;
}

/* Author Box */
.author-box {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  margin: 20px 0 50px !important;
}

.author-box .avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

.author-box .avatar svg {
  width: 22px !important;
  height: 22px !important;
}

.author-box h4 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 5px !important;
}

.author-box p {
  font-size: 13px !important;
  color: var(--text-muted, #8C6B72) !important;
  margin: 0 !important;
}

/* Related Posts */
.blog-related {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px;
}

.blog-related h3 {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--text-headline, #1B1216) !important;
  margin-bottom: 24px !important;
}

.related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.r-card {
  border: 1px solid var(--divider, #BAC5E1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.r-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px -16px rgba(27, 18, 22, 0.16) !important;
}

.r-thumb {
  height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(150deg, var(--primary-light, #C4CCDE), var(--bg-soft, #E4E9F7)) !important;
  color: var(--primary, #1A2560) !important;
  overflow: hidden !important;
}

.r-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.r-thumb svg {
  width: 28px !important;
  height: 28px !important;
}

.r-body {
  padding: 16px 18px !important;
}

.r-body h4 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.r-body span {
  font-size: 11.5px !important;
  color: var(--text-muted, #8C6B72) !important;
  display: block !important;
  margin-top: 8px !important;
}

@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr !important;
  }

  .featured-thumb {
    min-height: 200px !important;
  }

  .blog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  .article-wrap {
    grid-template-columns: 1fr !important;
  }

  .share-col {
    position: static !important;
    flex-direction: row !important;
    margin-bottom: 20px !important;
  }

  .related-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-filter-bar {
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-left: 4px !important;
  }

  .related-grid {
    grid-template-columns: 1fr !important;
  }

  .single-post-cover {
    height: 220px !important;
  }
}

/* ==========================================================================
   MAKIEKY CHECKOUT PAYMENT METHODS UX/UI STYLES
   ========================================================================== */
#payment,
.woocommerce-checkout-payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 10px !important;
}

ul.wc_payment_methods,
ul.payment_methods,
.woocommerce-checkout-payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border: none !important;
}

li.wc_payment_method,
li.pay-option,
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method {
  background: var(--bg-soft, #E4E9F7) !important;
  border: 1.5px solid var(--border, #BAC5E1) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

li.wc_payment_method:hover {
  border-color: var(--primary-light, #C4CCDE) !important;
  background: #FFFFFF !important;
}

li.wc_payment_method.active,
li.wc_payment_method:has(input[type="radio"]:checked) {
  background: #FFFFFF !important;
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 4px 16px rgba(26, 37, 96, 0.12) !important;
}

li.wc_payment_method label,
.woocommerce-checkout-payment ul.payment_methods li label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  user-select: none !important;
  background: transparent !important;
  border: none !important;
}

/* Thêm box ẩn để cân bằng kích thước với icon, giúp chữ nằm chính giữa */
li.wc_payment_method label::after,
.woocommerce-checkout-payment ul.payment_methods li label::after {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  flex-shrink: 0 !important;
}

/* Radio Button Styling */
li.wc_payment_method input[type="radio"],
.woocommerce-checkout-payment input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border: 2px solid var(--border, #BAC5E1) !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
}

li.wc_payment_method input[type="radio"]:hover {
  border-color: var(--primary, #1A2560) !important;
}

li.wc_payment_method input[type="radio"]:checked {
  border-color: var(--primary, #1A2560) !important;
  background-color: var(--primary, #1A2560) !important;
  box-shadow: inset 0 0 0 3.5px #FFFFFF !important;
}

/* Icon Styling & Strict SVG Size Limit */
li.wc_payment_method .ic,
li.wc_payment_method span.ic {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary, #1A2560) !important;
}

li.wc_payment_method .ic svg,
li.wc_payment_method svg,
li.wc_payment_method img {
  width: 24px !important;
  height: 24px !important;
  max-width: 38px !important;
  max-height: 26px !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Title Styling */
li.wc_payment_method .txt,
li.wc_payment_method span.txt {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

li.wc_payment_method h4,
li.wc_payment_method label h4 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
}

/* Payment Box / Description */
div.payment_box,
.woocommerce-checkout-payment div.payment_box {
  padding: 14px 20px 16px 54px !important;
  border-top: 1px solid var(--border, #BAC5E1) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  font-size: 13.5px !important;
  color: var(--text-base, #2E1B21) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

div.payment_box::before {
  display: none !important;
}

div.payment_box p {
  margin: 0 0 8px 0 !important;
  font-size: 13.5px !important;
  color: var(--text-base, #2E1B21) !important;
}

div.payment_box p:last-child {
  margin-bottom: 0 !important;
}

/* Place Order Button Styling */
.place-order {
  padding: 0 !important;
  margin-top: 20px !important;
  background: transparent !important;
}

#place_order,
button[name="woocommerce_checkout_place_order"],
.woocommerce-checkout-payment button#place_order {
  width: 100% !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: var(--font-body, 'Jost', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 16px rgba(26, 37, 96, 0.25) !important;
  display: block !important;
  text-align: center !important;
}

#place_order:hover,
button[name="woocommerce_checkout_place_order"]:hover {
  background: var(--primary-hover, #132466) !important;
  box-shadow: 0 8px 24px rgba(26, 37, 96, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Hide duplicate place order button inside WooCommerce payment block */
#payment .form-row.place-order {
  display: none !important;
}

/* 4-Step Process Bar Styling */
.steps {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}

.steps .step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #8C6B72) !important;
  text-decoration: none !important;
}

.steps .step.current,
.steps .step.done {
  color: var(--primary, #1A2560) !important;
  font-weight: 700 !important;
}

.steps .step .dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border, #BAC5E1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  color: var(--text-muted, #8C6B72) !important;
}

.steps .step.current .dot {
  background: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
}

.steps .step.done .dot {
  background: var(--bg-soft, #E4E9F7) !important;
  border-color: var(--primary, #1A2560) !important;
  color: var(--primary, #1A2560) !important;
}

.steps .step-line {
  width: 24px !important;
  height: 1px !important;
  background: var(--border, #BAC5E1) !important;
}

/* ==========================================================================
   DROPDOWN MINI CART (WooCommerce UX/UI Upgrade - MAKIEKY Brand)
   ========================================================================== */
.nav-dropdown.nav-dropdown-default,
#header .cart-popup,
.header-nav .nav-dropdown {
  border-radius: 16px !important;
  box-shadow: 0 20px 48px -12px rgba(27, 18, 22, 0.18), 0 0 0 1px rgba(234, 217, 222, 0.8) !important;
  border: none !important;
  background: #FFFFFF !important;
  padding: 0 !important;
  width: 360px !important;
  max-width: 90vw !important;
  overflow: hidden !important;
}

/* Remove default li styling inside widget */
li.html.widget_shopping_cart {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.widget_shopping_cart_content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Mobile cart off-canvas sticky footer fix */
.off-canvas .widget_shopping_cart,
.off-canvas .widget_shopping_cart_content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #FFFFFF !important;
}
.off-canvas .ux-mini-cart-footer {
  margin-top: auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 9999 !important;
}
.off-canvas .woocommerce-mini-cart,
.off-canvas .cart_list.product_list_widget {
  max-height: none !important;
  flex: 1 1 auto !important;
}

/* Mini Cart List */
.woocommerce-mini-cart,
.cart_list.product_list_widget {
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--divider, #BAC5E1) transparent !important;
}

.woocommerce-mini-cart::-webkit-scrollbar {
  width: 5px !important;
}

.woocommerce-mini-cart::-webkit-scrollbar-thumb {
  background-color: var(--divider, #BAC5E1) !important;
  border-radius: 99px !important;
}

/* Individual Cart Item - Flex Row Layout */
.woocommerce-mini-cart-item.mini_cart_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  /* Reset Flatsome's padding-left: 60px */
  margin: 0 !important;
  border-bottom: 1px dashed var(--divider, #BAC5E1) !important;
  position: relative !important;
  background: #FFFFFF !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce-mini-cart-item.mini_cart_item:last-child {
  border-bottom: none !important;
}

.woocommerce-mini-cart-item.mini_cart_item:hover {
  background: var(--bg-soft, #E4E9F7) !important;
}

/* 1. Thumbnail Image Link & Product Title */
.woocommerce-mini-cart-item.mini_cart_item>a:not(.remove) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--text-headline, #1B1216) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
  position: relative !important;
}

.woocommerce-mini-cart-item.mini_cart_item img,
.cart_list.product_list_widget img {
  position: static !important;
  /* Reset Flatsome's position: absolute; left: 0 */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  background: #FFFFFF !important;
  padding: 3px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.woocommerce-mini-cart-item.mini_cart_item>a:not(.remove):hover {
  color: var(--primary-hover, #2A52BE) !important;
}

/* 2. Quantity & Price */
.ux-mini-cart-qty,
.woocommerce-mini-cart-item .quantity {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--primary, #1A2560) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  order: 2 !important;
}

.ux-mini-cart-qty .amount,
.woocommerce-mini-cart-item .amount {
  color: var(--primary, #1A2560) !important;
  font-weight: 700 !important;
}

/* 3. Remove '×' Button */
.woocommerce-mini-cart-item .remove {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  background: var(--bg-soft, #E4E9F7) !important;
  color: var(--text-muted, #8C6B72) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  order: 3 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  flex-shrink: 0 !important;
}

.woocommerce-mini-cart-item .remove:hover {
  background: var(--alert, #B5453D) !important;
  color: #FFFFFF !important;
  border-color: var(--alert, #B5453D) !important;
  transform: scale(1.1) !important;
}

/* Footer Section (Subtotal + Buttons) */
.ux-mini-cart-footer {
  background: var(--bg-soft, #E4E9F7) !important;
  border-top: 1px solid var(--divider, #BAC5E1) !important;
  padding: 18px 20px !important;
  border-radius: 0 0 16px 16px !important;
}

.woocommerce-mini-cart__total.total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--text-headline, #1B1216) !important;
  border: none !important;
}

.woocommerce-mini-cart__total.total strong {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted, #8C6B72) !important;
}

.woocommerce-mini-cart__total.total .amount {
  font-family: var(--font-body, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary, #1A2560) !important;
}

/* Action Buttons (Xem giỏ hàng & Thanh toán) */
.woocommerce-mini-cart__buttons.buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.woocommerce-mini-cart__buttons.buttons .button {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  text-decoration: none !important;
}

/* 'Xem giỏ hàng' Button (Outline Style) */
.woocommerce-mini-cart__buttons.buttons a:not(.checkout) {
  border: 1px solid var(--primary, #1A2560) !important;
  color: var(--primary, #1A2560) !important;
  background: #FFFFFF !important;
}

.woocommerce-mini-cart__buttons.buttons a:not(.checkout):hover {
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
  border-color: var(--primary, #1A2560) !important;
  transform: translateY(-1px) !important;
}

/* 'Thanh toán' Button (Solid Primary CTA Style) */
.woocommerce-mini-cart__buttons.buttons a.checkout {
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--primary, #1A2560) !important;
  box-shadow: 0 4px 12px rgba(26, 37, 96, 0.25) !important;
}

.woocommerce-mini-cart__buttons.buttons a.checkout:hover {
  background: var(--primary-hover, #2A52BE) !important;
  border-color: var(--primary-hover, #2A52BE) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(159, 43, 72, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Empty Cart Dropdown UI Upgrade */
.ux-mini-cart-empty {
  padding: 36px 24px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.ux-mini-cart-empty-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: var(--bg-soft, #E4E9F7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
}

.ux-mini-cart-empty-icon svg {
  width: 36px !important;
  height: 36px !important;
  opacity: 0.7 !important;
  color: var(--primary, #1A2560) !important;
  fill: var(--primary, #1A2560) !important;
}

.woocommerce-mini-cart__empty-message,
.woocommerce-mini-cart__empty-message.empty {
  text-align: center !important;
  padding: 0 !important;
  color: var(--text-muted, #8C6B72) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 20px 0 !important;
}

.return-to-shop {
  margin: 0 !important;
  padding: 0 !important;
}

/* 'Quay lại cửa hàng' Button */
.return-to-shop a.button,
a.button.wc-backward,
.return-to-shop .button.primary {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 11px 28px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid var(--primary, #1A2560) !important;
  box-shadow: 0 4px 14px rgba(26, 37, 96, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  text-decoration: none !important;
}

.return-to-shop a.button:hover,
a.button.wc-backward:hover,
.return-to-shop .button.primary:hover {
  background: var(--primary-hover, #2A52BE) !important;
  border-color: var(--primary-hover, #2A52BE) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(159, 43, 72, 0.32) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   HEADER SEARCH DROPDOWN & LIVE SEARCH RESULTS POPUP (MAKIEKY Brand)
   ========================================================================== */
/* Disable default hover display on header search dropdown */
li.header-search-dropdown:not(.active-search-open) .nav-dropdown,
li.header-search-dropdown:not(.active-search-open) .nav-dropdown-default,
li.header-search-dropdown:hover:not(.active-search-open) .nav-dropdown,
li.header-search-dropdown:hover:not(.active-search-open) .nav-dropdown-default {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Enable display ONLY when active-search-open class is toggled on CLICK */
li.header-search-dropdown.active-search-open .nav-dropdown,
li.header-search-dropdown.active-search-open .nav-dropdown-default {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Position search form inline right next to the search icon (to its left side) */
li.header-search-dropdown {
  position: relative !important;
}

.header-search-dropdown .nav-dropdown,
.header-search-dropdown .nav-dropdown-default {
  position: absolute !important;
  right: 100% !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  width: 340px !important;
  max-width: 80vw !important;
  overflow: visible !important;
  max-height: none !important;
  z-index: 9999 !important;
}

li.header-search-form.search-form,
.header-search-form-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

/* Single Layer Clean Search Box Pill */
.searchform-wrapper.ux-search-box {
  background: #FFFFFF !important;
  border: 1.5px solid var(--divider, #BAC5E1) !important;
  border-radius: 999px !important;
  padding: 4px 6px 4px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(27, 18, 22, 0.12) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  position: relative !important;
}

.searchform-wrapper.ux-search-box:focus-within {
  border-color: var(--primary, #1A2560) !important;
  box-shadow: 0 12px 32px -5px rgba(26, 37, 96, 0.2) !important;
}

.searchform-wrapper.ux-search-box form {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  position: relative !important;
}

/* Input Search Field */
.searchform-wrapper.ux-search-box input.search-field,
.searchform-wrapper.ux-search-box input[type="search"] {
  all: unset !important;
  box-sizing: border-box !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  font-size: 13.5px !important;
  font-family: var(--font-body, sans-serif) !important;
  color: var(--text-headline, #1B1216) !important;
  height: 36px !important;
  line-height: 36px !important;
}

.searchform-wrapper.ux-search-box input.search-field::placeholder,
.searchform-wrapper.ux-search-box input[type="search"]::placeholder {
  color: var(--text-muted, #8C6B72) !important;
  opacity: 0.8 !important;
}

/* Search Submit Button */
.searchform-wrapper.ux-search-box button[type="submit"] {
  all: unset !important;
  box-sizing: border-box !important;
  background: var(--primary, #1A2560) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
}

.searchform-wrapper.ux-search-box button[type="submit"]:hover {
  background: var(--primary-hover, #2A52BE) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(159, 43, 72, 0.25) !important;
}

/* Disable Flatsome's native dark autocomplete popup to avoid black tooltip box */
.autocomplete-suggestions,
.live-search-results {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  box-shadow: 0 12px 32px -8px rgba(27, 18, 22, 0.16) !important;
  margin-top: 10px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}

.autocomplete-suggestion,
.ux-search-result,
.live-search-results li,
.live-search-results a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px dashed var(--divider, #BAC5E1) !important;
  text-decoration: none !important;
  transition: background 0.18s ease !important;
  cursor: pointer !important;
}

.autocomplete-suggestion:last-child,
.ux-search-result:last-child,
.live-search-results li:last-child {
  border-bottom: none !important;
}

.autocomplete-suggestion:hover,
.autocomplete-selected,
.ux-search-result:hover,
.live-search-results a:hover {
  background: var(--bg-soft, #E4E9F7) !important;
}

/* Result Image */
.autocomplete-suggestion img,
.ux-search-result img,
.live-search-results img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  background: #FFFFFF !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
}

/* Result Title */
.autocomplete-suggestion .title,
.autocomplete-suggestion .name,
.ux-search-result .title,
.live-search-results .title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  line-height: 1.3 !important;
  flex: 1 !important;
}

/* Result Price / Category */
.autocomplete-suggestion .price,
.ux-search-result .price,
.live-search-results .price {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--primary, #1A2560) !important;
  white-space: nowrap !important;
}

/* Custom High-Speed Instant Live Search Results Popup */
.makieky-ajax-search-results {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  box-shadow: 0 16px 40px -8px rgba(27, 18, 22, 0.18) !important;
  margin-top: 8px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  display: none;
  scrollbar-width: thin !important;
}

.search-loading,
.search-no-results {
  padding: 16px 18px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--text-muted, #8C6B72) !important;
}

.makieky-search-results-list {
  display: flex !important;
  flex-direction: column !important;
}

.search-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px dashed var(--divider, #BAC5E1) !important;
  text-decoration: none !important;
  color: var(--text-headline, #1B1216) !important;
  transition: background 0.18s ease !important;
}

.search-result-item:hover {
  background: var(--bg-soft, #E4E9F7) !important;
}

.search-result-item .item-thumb {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 8px !important;
  border: 1px solid var(--divider, #BAC5E1) !important;
  overflow: hidden !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

.search-result-item .item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.search-result-item .item-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.search-result-item .item-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #1B1216) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 2px !important;
}

.search-result-item .item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 12px !important;
}

.search-result-item .amount {
  font-weight: 700 !important;
  color: var(--primary, #1A2560) !important;
}

.search-result-item .search-post-cat {
  color: var(--text-muted, #8C6B72) !important;
}

.search-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.badge-product {
  background: var(--primary-light, #C4CCDE) !important;
  color: var(--primary, #1A2560) !important;
}

.badge-post {
  background: #FFF3D6 !important;
  color: #B5841D !important;
}

.search-results-footer {
  padding: 10px 14px !important;
  background: var(--bg-soft, #E4E9F7) !important;
  text-align: center !important;
  border-top: 1px solid var(--divider, #BAC5E1) !important;
}

.search-results-footer a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--primary, #1A2560) !important;
  text-decoration: none !important;
}

.search-results-footer a:hover {
  color: var(--primary-hover, #2A52BE) !important;
}

span.woocommerce-Price-currencySymbol {
  transform: translateY(10%) !important;
}

/* Fix vertical alignment for quantity input */
.quantity input.qty,
.woocommerce .quantity input.qty,
.makieky-cart-wrapper .quantity .qty {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: none !important;
  vertical-align: middle !important;
}

/* Fix header search form overflowing left on mobile */
@media (max-width: 768px) {

  .header-main .header-search-form,
  .header-bottom .header-search-form,
  .header-search-form,
  .searchform {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }
}

/* Force fix for newsletter button overflowing the input border */
.site-footer-news-box button,
.site-footer-news-box button[type="submit"],
.site-footer-news-box input[type="submit"],
.site-footer-news-box .wpcf7-submit {
  right: 5px !important;
}

/* Fix slider arrows overflowing screen edges */
body .slider-wrapper .flickity-prev-next-button.previous,
body .flickity-prev-next-button.previous,
.slider-nav-circle .flickity-prev-next-button.previous {
  left: 20px !important;
  transform: translateY(-50%) !important;
}

body .slider-wrapper .flickity-prev-next-button.next,
body .flickity-prev-next-button.next,
.slider-nav-circle .flickity-prev-next-button.next {
  right: 20px !important;
  transform: translateY(-50%) !important;
}

.slick-prev {
  left: 20px !important;
  z-index: 10 !important;
}

.slick-next {
  right: 20px !important;
  z-index: 10 !important;
}

/* Normalize slider dots size */
.flickity-page-dots .dot,
.slick-dots li button:before {
  width: 12px !important;
  height: 12px !important;
}

/* Fix footer copyright color */
.site-footer-copy {
  color: var(--text-dark) !important;
  font-weight: 500;
}

.site-footer-copy strong {
  color: var(--primary) !important;
}


.mina-sp-section-title,
.cat-card-buttons>a {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
}

.checkout_coupon.woocommerce-form-coupon .button {
  border-radius: 8px !important;
  background-color: var(--primary, #1A2560) !important;
}


/* Hide default WooCommerce "(optional)" text in checkout since we manually added "(không bắt buộc)" */
.woocommerce-checkout .optional,
.woocommerce-checkout .form-row .optional {
  display: none !important;
}

@media (min-width: 769px) {
  .checkout_coupon.woocommerce-form-coupon .button {
    margin-left: 12px !important;
  }
}

.mina-rec-widget {
  width: 100%;
  box-sizing: border-box;
}

.mina-rec-header {
  margin-bottom: 14px;
}

.mina-rec-tag {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6E7288);
  display: block;
  margin-bottom: 2px;
}

.mina-rec-heading {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-headline, #111111);
  margin: 0;
  line-height: 1.3;
}

.mina-rec-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mina-rec-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border, #E2E2E2);
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.25s ease;
}

.mina-rec-item:hover {
  border-color: var(--primary-hover, #2A52BE);
  box-shadow: 0 4px 14px rgba(42, 82, 190, 0.1);
}

.mina-rec-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mina-rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}

.mina-rec-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mina-rec-title {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-headline, #111111) !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mina-rec-title:hover {
  color: var(--primary-hover, #2A52BE) !important;
}

.mina-rec-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mina-rec-price * {
  color: #111111 !important;
}

.mina-rec-price del,
.mina-rec-price del * {
  color: #888888 !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

.mina-rec-add-btn {
  align-self: flex-start;
  padding: 6px 16px !important;
  font-size: 12px !important;
  height: auto !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  margin-top: 2px !important;
}

.blog-cat-badges {
  overflow: visible !important;
}

.cat-pill-more {
  position: relative;
  cursor: pointer;
}

.makieky-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px;
  width: max-content;
  max-width: 280px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  color: #111111;
  cursor: default;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  border: 1px solid var(--border, #E2E2E2);
}

.cat-pill-more:hover .makieky-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.makieky-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 12px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
}

.makieky-tooltip::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 12px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent var(--border, #E2E2E2) transparent;
  z-index: -1;
}

.makieky-tooltip-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #6E7288);
  margin-bottom: 10px;
  text-align: left;
  line-height: 1;
}

.makieky-tooltip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.makieky-tooltip .cat-pill {
  color: var(--primary, #1A2560) !important;
  background: var(--bg-soft, #E4E9F7) !important;
  backdrop-filter: none !important;
}

.wpcf7-form-control-wrap {
  position: relative !important;
  display: block !important;
}

span.wpcf7-not-valid-tip {
  position: static !important;
  display: block !important;
  color: #e2401c !important;
  font-size: 13.5px !important;
  margin-top: 6px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  font-weight: 500 !important;
  transform: none !important;
  text-align: left !important;
}

.wpcf7-form-control.wpcf7-not-valid {
  border-color: #e2401c !important;
  background-color: #fffafa !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  display: none !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  display: block !important;
  background: #E8FCF1 !important;
  color: #2F7B53 !important;
  border: 1px solid #A4E3C1 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 24px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(47, 123, 83, 0.1) !important;
}
/* 5. Ẩn spinner mặc định của CF7 bị lệch */
.wpcf7-spinner { display: none !important; }

/* 6. Xóa mũi tên tam giác mặc định của tooltip lỗi */
span.wpcf7-not-valid-tip::before, span.wpcf7-not-valid-tip::after { display: none !important; }

/* ==========================================================================
   MAKIEKY LUXURY MOBILE SIDEBAR & SUBMENU HIERARCHY STYLING
   ========================================================================== */

/* 1. Mobile Sidebar Container - Full Width & Spacious */
.mobile-sidebar {
  background: #FFFFFF !important;
  box-shadow: 4px 0 25px rgba(19, 36, 102, 0.12) !important;
  max-width: 440px !important;
  width: 92vw !important;
}

@media (max-width: 576px) {
  .mobile-sidebar {
    width: 94vw !important;
    max-width: 100% !important;
  }
}

.mobile-sidebar .sidebar-menu {
  padding: 0 !important;
  background: #FFFFFF !important;
}

/* 2. Mobile Search Bar Inside Drawer - 1 Single Clean Border */
#main-menu .header-search-form,
.mobile-sidebar .header-search-form {
  padding: 14px 16px 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

#main-menu .header-search-form-wrapper,
#main-menu .searchform-wrapper,
#main-menu .ux-search-box,
#main-menu .searchform-wrapper.is-normal,
#main-menu .searchform-wrapper.form-flat,
.mobile-sidebar .header-search-form-wrapper,
.mobile-sidebar .searchform-wrapper,
.mobile-sidebar .ux-search-box {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}

#main-menu .searchform-wrapper form,
.mobile-sidebar .searchform-wrapper form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#main-menu .searchform-wrapper input.search-field,
.mobile-sidebar .searchform-wrapper input.search-field {
  width: 100% !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: var(--bg-soft, #F8FAFC) !important;
  border: 1.5px solid var(--border, #E2E8F0) !important;
  padding: 0 95px 0 16px !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13px !important;
  color: var(--text-headline, #111111) !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#main-menu .searchform-wrapper input.search-field:focus,
.mobile-sidebar .searchform-wrapper input.search-field:focus {
  border-color: var(--primary, #132466) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(19, 36, 102, 0.08) !important;
}

#main-menu .searchform-wrapper button[type="submit"],
.mobile-sidebar .searchform-wrapper button[type="submit"] {
  position: absolute !important;
  right: 3px !important;
  top: 3px !important;
  bottom: 3px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--primary, #132466) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  box-shadow: none !important;
}

#main-menu .searchform-wrapper button[type="submit"]:hover,
.mobile-sidebar .searchform-wrapper button[type="submit"]:hover {
  background: var(--primary-hover, #2A52BE) !important;
}

/* 3. Level 1 Menu Items */
.mobile-sidebar .nav-sidebar {
  padding: 4px 0 16px !important;
  margin: 0 !important;
  list-style: none !important;
}

.mobile-sidebar .nav-sidebar > li.menu-item {
  position: relative !important;
  border-bottom: 1px solid #F1F5F9 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: background 0.2s ease !important;
}

.mobile-sidebar .nav-sidebar > li.menu-item:last-child {
  border-bottom: none !important;
}

.mobile-sidebar .nav-sidebar > li.menu-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 18px !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--text-headline, #111111) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
}

.mobile-sidebar .nav-sidebar > li.menu-item:hover > a,
.mobile-sidebar .nav-sidebar > li.menu-item.current-menu-item > a,
.mobile-sidebar .nav-sidebar > li.menu-item.active > a {
  color: var(--primary, #132466) !important;
  background: #F8FAFC !important;
}

/* 4. Accordion Toggle Button */
.mobile-sidebar .nav-sidebar li.has-child > button.toggle,
.mobile-sidebar .nav-sidebar li.menu-item-has-children > button.toggle {
  position: absolute !important;
  right: 8px !important;
  top: 5px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #EEF2F6 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #132466 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10 !important;
  outline: none !important;
  padding: 0 !important;
}

.mobile-sidebar .nav-sidebar li.has-child > button.toggle:hover,
.mobile-sidebar .nav-sidebar li.has-child.active > button.toggle {
  background: rgba(19, 36, 102, 0.12) !important;
  color: var(--primary, #132466) !important;
}

.mobile-sidebar .nav-sidebar li.has-child > button.toggle i,
.mobile-sidebar .nav-sidebar li.has-child > button.toggle svg {
  display: inline-block !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 14px !important;
}

.mobile-sidebar .nav-sidebar li.has-child.active > button.toggle i,
.mobile-sidebar .nav-sidebar li.has-child.active > button.toggle svg {
  transform: rotate(180deg) !important;
}

/* 5. Level 2 Sub-menu (Clean Minimalist Accordion - No Border, No Shadow) */
.mobile-sidebar .nav-sidebar .sub-menu,
.mobile-sidebar .nav-sidebar .children {
  display: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 0 10px 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

.mobile-sidebar .nav-sidebar li.active > .sub-menu,
.mobile-sidebar .nav-sidebar li.active > .children {
  display: block !important;
  animation: minaSubMenuFadeIn 0.2s ease forwards;
}

@keyframes minaSubMenuFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 6. Submenu Group Headers - Pure Text, Clean Alignment */
.mina-submenu-group-header {
  display: block !important;
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--primary, #132466) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 14px 18px 4px 18px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.mina-submenu-group-header:first-of-type,
.mina-submenu-group-header.mina-group-congdung {
  padding-top: 8px !important;
}

.mina-submenu-group-header svg {
  display: none !important;
}

/* 7. Submenu Items & Links - Pure Minimalist Typography & Even Spacing */
.mobile-sidebar .nav-sidebar .sub-menu li,
.mobile-sidebar .nav-sidebar .children li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mobile-sidebar .nav-sidebar .sub-menu li a,
.mobile-sidebar .nav-sidebar .children li a {
  font-family: var(--font-body, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #475569 !important;
  text-transform: none !important;
  padding: 7px 18px 7px 24px !important;
  border-radius: 0 !important;
  display: block !important;
  transition: color 0.15s ease, padding 0.15s ease !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

.mobile-sidebar .nav-sidebar .sub-menu li a:hover,
.mobile-sidebar .nav-sidebar .children li a:hover,
.mobile-sidebar .nav-sidebar .sub-menu li.current-menu-item a,
.mobile-sidebar .nav-sidebar .children li.current-menu-item a {
  color: var(--primary, #132466) !important;
  background: transparent !important;
  font-weight: 600 !important;
  padding-left: 28px !important;
  border: none !important;
  box-shadow: none !important;
}

.mina-sub-item-icon {
  display: none !important;
}

/* 8. Badges & Special Elements */
.mina-menu-sale-tag {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  margin-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}


/* Circular Header Cart Button & Perfectly Centered Icon */
.cart-item .header-button,
.header-button:has(.header-cart-link) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

a.header-cart-link.circle,
.header-button a.header-cart-link,
a.header-cart-link.icon.primary.button.circle.is-small {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

a.header-cart-link.circle i,
.header-button a.header-cart-link i,
a.header-cart-link.icon.primary.button.circle.is-small i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  line-height: 1 !important;
  font-size: 16px !important;
  text-align: center !important;
}

a.header-cart-link.circle i[data-icon-label]:after,
.header-button a.header-cart-link i[data-icon-label]:after {
  top: -6px !important;
  right: -8px !important;
}

.mina-drawer-body{
  padding: 15px !important;
}