/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/




/* Bo góc 9px cho những ảnh được chọn */
.ai-r9{
  border-radius: 16px !important;
}

/* Dùng khi ảnh có wrapper Flatsome (để clip góc đúng) */
.ai-r9-wrap,
.ai-r9-wrap img{
  border-radius: 12px !important;
}
.ai-r9-wrap{
  overflow: hidden; /* chỉ để cắt góc, không chạm transform/hover */
}

/* Nếu wrapper có overlay pseudo của Flatsome, đảm bảo cũng bo góc */
.ai-r9-wrap::before,
.ai-r9-wrap::after{
  border-radius: inherit !important;
}


/* Hàng sao nằm ngang + hover xoay từng sao */
.ai-stars-row {
  display: inline-flex;      /* bắt xếp ngang */
  gap: 4px;                  /* khoảng cách giữa các sao */
}

.ai-stars-row img {
  display: inline-block !important;
  transition: transform 0.25s ease;
  transform-origin: center center;
}

.ai-stars-row img:hover {
  transform: rotate(12deg) scale(1.05);
}






/* Khối tab dạng nút – chỉ áp cho Tabs có class fitblend-tab-nav */
.fitblend-tab-nav .nav.nav-pills {
  display: inline-flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

/* Reset li */
.fitblend-tab-nav .nav.nav-pills > .tab {
  list-style: none;
}

/* Nút tab – trạng thái bình thường (KHÔNG active) */
.fitblend-tab-nav .nav.nav-pills > .tab > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 9px;
  border: 1px solid transparent;      /* không viền */
  background: #f6f3f4;                /* nền xám hồng nhạt */
  color: #2b2b2b;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: all 0.2s ease;          /* giống “transition chung cho nút” */
  white-space: nowrap;
}

/* Hover tab CHƯA active – nổi lên + đậm màu hơn */
.fitblend-tab-nav .nav.nav-pills > .tab > a:hover {
  background: #ede7e9;                /* đậm hơn #f6f3f4 một chút */
  color: #1a1a1a;
  transform: translateY(-2px);
}

/* Tab đang active – giữ y nguyên như cũ */
.fitblend-tab-nav .nav.nav-pills > .tab.active > a {
  background: #3bb34a;
  border-color: #23b55f;
  color: #ffffff;
}

/* Mobile: cho dễ bấm */
@media (max-width: 768px) {
  .fitblend-tab-nav .nav.nav-pills {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .fitblend-tab-nav .nav.nav-pills > .tab {
    flex: 1 1 100%;
  }

  .fitblend-tab-nav .nav.nav-pills > .tab > a {
    width: 100%;
  }
}








/* ===========================
   FITBLEND MENU PRODUCT CARD
   Áp dụng cho: .product-small.box.fitblend-menu-grid
   =========================== */

/* Card chính */
.product-small.box.fitblend-menu-grid {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.product-small.box.fitblend-menu-grid:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}

/* Ảnh bo 2 góc trên */
.product-small.box.fitblend-menu-grid .box-image,
.product-small.box.fitblend-menu-grid .image-cover,
.product-small.box.fitblend-menu-grid .image-cover img {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.product-small.box.fitblend-menu-grid .image-cover img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  transition: transform 0.25s ease;
}

.product-small.box.fitblend-menu-grid:hover .image-cover img {
  transform: scale(1.06);
}

/* Nội dung text */
.product-small.box.fitblend-menu-grid .box-text {
  padding: 24px;
}

/* ===========================
   TITLE, MÔ TẢ, GIÁ
   =========================== */

/* Tiêu đề sản phẩm */
.product-small.box.fitblend-menu-grid .product-title {
  margin: 0 0 14px;
}

.product-small.box.fitblend-menu-grid .product-title a {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 500;
  color: #111827;
}

/* Mô tả ngắn (do PHP chèn) */
.fitblend-menu-grid .fitblend-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 12px;
}

/* Giá */
.fitblend-menu-grid .price {
  display: block;
}

.fitblend-menu-grid .price .woocommerce-Price-amount {
  font-size: 19px;
  font-weight: 500;
  color: #ff8a2f;
}

.fitblend-menu-grid .price del .woocommerce-Price-amount {
  color: #c4c4c4;
}

.fitblend-menu-grid .price del {
  margin-right: 8px;
}

/* Ẩn image-tools mặc định cho sạch */
.product-small.box.fitblend-menu-grid .image-tools {
  display: none !important;
}

/* ===========================
   NUTRITION PILLS: Calories & Protein
   =========================== */

.fitblend-menu-grid .fitblend-nutrition-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.fitblend-menu-grid .fitblend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* Calories pill (trắng) */
.fitblend-menu-grid .fitblend-pill--calories {
  background: #f3f3f3;
  color: #111827;
}

/* Protein pill (xanh lá) */
.fitblend-menu-grid .fitblend-pill--protein {
  background: #26b15c;
  color: #ffffff;
}

/* ===========================
   BADGE: BESTSELLER & GIẢM GIÁ
   – BESTSELLER trên
   – GIẢM GIÁ dưới
   – Cùng nằm góc phải
   =========================== */

/* Badge-container chỉ áp cho col có product-small.fitblend-menu-grid */
.col-inner:has(> .product-small.box.fitblend-menu-grid) > .badge-container {
  position: absolute;
  margin-top: 5px !important;
  top: 10px !important;
  right: 15px !important;
  left: auto !important;
  padding: 0;
  width: auto;
  height: 4em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}

/* Xoá style tròn/bóng mặc định của Flatsome */
.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge,
.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge-circle {
  position: static;
  background: transparent !important;
  box-shadow: none !important;
}

.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge-circle::before,
.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge-circle::after {
  display: none !important;
}

/* Base cho bubble (dùng chung cho Bestseller + Giảm giá) */
.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge-inner {
  position: static;
  height: 2.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
  pointer-events: auto;
}

/* BESTSELLER – màu cam */
.col-inner:has(> .product-small.box.fitblend-menu-grid)
  .badge-container .badge-inner.callout-new-bg.is-small.new-bubble {
  background: #ff8a2f !important;
}

/* GIẢM GIÁ – màu xanh */
.col-inner:has(> .product-small.box.fitblend-menu-grid)
  .badge-container .badge-inner.secondary.on-sale {
  background: #16a34a !important;
}

/* Cho text "Giảm giá!" ăn theo style bubble */
.col-inner:has(> .product-small.box.fitblend-menu-grid)
  .badge-container .badge-inner.secondary.on-sale .onsale {
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* Đổi thứ tự: cho BESTSELLER lên trên GIẢM GIÁ */
.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge {
  order: 1; /* mặc định phía dưới */
}

.col-inner:has(> .product-small.box.fitblend-menu-grid) .badge-container .badge:last-child {
  order: 0; /* badge cuối (Bestseller) nhảy lên trên */
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 768px) {
  .product-small.box.fitblend-menu-grid .box-text {
    padding: 18px 18px 20px;
  }
}






/* ===========================
   Bảng menu topping addon
   =========================== */

  .fitblend-topping-list {
    max-width: 100%;
    margin: 0 auto;
    font-size: 16px;
    color: #111827;
  }

  .fitblend-topping-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease;
  }

  .fitblend-topping-row:last-child {
    border-bottom: 1px solid #f1f5f9;
  }

  .fitblend-topping-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .fitblend-topping-name {
    font-weight: 500;
  }

  .fitblend-topping-protein {
    font-size: 14px;
    color: #16a34a;
  }

  .fitblend-topping-price {
    font-weight: 500;
    color: #ff8a2f;
    white-space: nowrap;
    transition: color 0.18s ease, transform 0.18s ease;
  }

  /* Hover effect “nặng đô” nhưng vẫn sang:
     - nền xám rất nhẹ
     - hơi nâng row lên + đổ bóng nhẹ
     - giá trượt nhẹ sang phải, đậm hơn */
  .fitblend-topping-row:hover {
    background-color: #f9fafb;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  }

  .fitblend-topping-row:hover .fitblend-topping-price {
    color: #ff7a12;
    transform: translateX(3px);
  }

  .fitblend-topping-row:hover .fitblend-topping-protein {
    color: #059669;
  }

  /* Note */
  .fitblend-topping-note {
    margin-top: 28px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #f9fafb;
    font-size: 14px;
    color: #4b5563;
  }




/* ===== FitBlend – Nutrition grid trên trang chi tiết sản phẩm ===== */

.fitblend-nutri-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 100%;       /* chỉnh tuỳ layout */
  margin: 24px 0 8px;
}

.fitblend-nutri-card {
  background: #f6f3f4;
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

/* Dòng số + đơn vị: 320 kcal, 32g... */
.fitblend-nutri-value {
  font-size: 22px;
  font-weight: 500;
  color: #16a34a;          /* xanh lá đậm */
}

/* Dòng label: Calories, Protein... */
.fitblend-nutri-label {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

/* Hover nhẹ cho vui */
.fitblend-nutri-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transition: all 0.18s ease;
}

/* Responsive: mobile 2 cột */
@media (max-width: 768px) {
  .fitblend-nutri-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}




/* Wrapper chiếm 100% vùng chứa, giá trái – nút phải */
.fitblend-price-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Giá */
.fitblend-price {
  font-size: 26px;
  font-weight: 600;
  color: #ff8a2f;
}

/* Để WooCommerce span bên trong ăn theo style trên */
.fitblend-price .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: 500;
  color: inherit;
}

/* Nút Đặt Ngay */
.fitblend-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 8px;
  background: #26b15c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.18s ease,
              transform 0.18s ease,
              box-shadow 0.18s ease;
}

.fitblend-cta-btn i {
  font-size: 14px;
}

.fitblend-cta-btn:hover {
  background: #1f9b50;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  color: #ffffff;
}

/* Mobile: thu nhỏ nhưng vẫn 1 dòng */
@media (max-width: 600px) {
  .fitblend-price-cta {
    gap: 16px;
  }

  .fitblend-price {
    font-size: 22px;
  }

  .fitblend-cta-btn {
    padding: 8px 18px;
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .fitblend-price {
    font-size: 20px;
  }

  .fitblend-cta-btn {
    padding: 7px 14px;
    font-size: 13px;
  }

  .fitblend-cta-btn i {
    font-size: 13px;
  }
}





/* =========================================
   1. BADGE SINGLE GALLERY – STYLE FITBLEND
   ========================================= */

/* Badge container trên khối product-images */
.single-product .product-images.woocommerce-product-gallery > .badge-container {
	position: absolute;
    top: 5px;
    right: 15px;
    left: auto;
    padding: 0;
    margin-top: 10px !important;
    width: auto;
    height: 2.8em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    pointer-events: none;
    z-index: 5;
}

/* Gỡ style vuông / shadow mặc định Flatsome */
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge,
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge-square {
  position: static;
  background: transparent !important;
  box-shadow: none !important;
}

.single-product .product-images.woocommerce-product-gallery > .badge-container .badge-square::before,
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge-square::after {
  display: none !important;
}

/* Base bubble chung */
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge-inner {
    position: static;
    height: 2.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
    pointer-events: auto;
}

/* BESTSELLER – cam */
.single-product .product-images.woocommerce-product-gallery > .badge-container
  .badge-inner.callout-new-bg.is-small.new-bubble {
  background: #ff8a2f !important;
}

/* GIẢM GIÁ – xanh */
.single-product .product-images.woocommerce-product-gallery > .badge-container
  .badge-inner.secondary.on-sale {
  background: #16a34a !important;
}

.single-product .product-images.woocommerce-product-gallery > .badge-container
  .badge-inner.secondary.on-sale .onsale {
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

/* Đổi thứ tự: Bestseller nằm TRÊN Giảm giá */
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge {
  order: 1;
}
.single-product .product-images.woocommerce-product-gallery > .badge-container .badge:last-child {
  order: 0;
}


/* =========================================
   2. ẢNH LỚN – BO 4 GÓC 8PX
   ========================================= */

/* Viewport của Flickity mới là khung clip */
.single-product .product-images.woocommerce-product-gallery
  .woocommerce-product-gallery__wrapper,
.single-product .product-images.woocommerce-product-gallery
  .woocommerce-product-gallery__wrapper .flickity-viewport {
  border-radius: 8px;
  overflow: hidden;
}

/* Ảnh lớn fill khung */
.single-product .product-images.woocommerce-product-gallery
  .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================
   3. THUMBNAILS – BO GÓC + HIỆU ỨNG SLIDER ĐẸP
   ========================================= */

.single-product .product-thumbnails.thumbnails .col a img {
  border-radius: 8px;
  opacity: 0.65;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* Thumb đang chọn (Flickity gắn .is-selected / .is-nav-selected lên .col) */
.single-product .product-thumbnails.thumbnails .col.is-selected a img,
.single-product .product-thumbnails.thumbnails .col.is-nav-selected a img,
.single-product .product-thumbnails.thumbnails .col:hover a img {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* Tạo khoảng hở nhẹ giữa các thumb */
.single-product .product-thumbnails.thumbnails .col {
  padding: 4px;
}




/* ==== FitBlend CF7 contact form (v2) ==== */
.fitblend-contact-form {
  width: 100%;
}

/* Row 2 cột đầu */
.fitblend-contact-form .fitblend-row {
  display: flex;
  gap: 12px;
  margin-bottom: 3px;
}

.fitblend-contact-form .fitblend-row--2cols .fitblend-field {
  flex: 1 1 0;
}

/* Field chung */
.fitblend-contact-form .fitblend-field {
  margin-bottom: 4px; /* gần nhau hơn */
}

.fitblend-contact-form .fitblend-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;        /* label đậm 500 */
  color: #111827;
}

/* Input / textarea */
.fitblend-contact-form input[type="text"],
.fitblend-contact-form input[type="email"],
.fitblend-contact-form input[type="tel"],
.fitblend-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f5f5f7;
  font-size: 15px;
  color: #111827;
  outline: none;
  height: 34px;            /* ô nhập cao 36px */
  box-shadow: none;        /* bỏ shadow hoàn toàn */
  transition: border-color 0.18s ease, background 0.18s ease;
}

/* Textarea riêng: cao hơn, không ép height 36 */
.fitblend-contact-form textarea {
  height: 100px;
  resize: vertical;
}

/* Placeholder */
.fitblend-contact-form ::placeholder {
  color: #9ca3af;
}

/* Focus */
.fitblend-contact-form input[type="text"]:focus,
.fitblend-contact-form input[type="email"]:focus,
.fitblend-contact-form input[type="tel"]:focus,
.fitblend-contact-form textarea:focus {
  border-color: #22c55e;
  background: #ffffff;
  box-shadow: none;        /* không shadow khi focus */
}

/* Submit button */
.fitblend-contact-form .fitblend-submit-wrap {
  margin-top: 6px;
}

.fitblend-contact-form .wpcf7-submit {
  width: 100%;
  margin-bottom: 2px;
  border: none;
  border-radius: 8px;
  background: #22c55e;
  color: #ffffff;
  height: 48px;            /* nút cao 48px */
  padding: 0 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-transform: none;    /* không ép UPPERCASE */
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.fitblend-contact-form .wpcf7-submit:hover {
  background: #16a34a;
  box-shadow: 0 14px 32px rgba(22, 163, 74, 0.45);
  transform: translateY(-1px);
}

/* CF7 error text */
.fitblend-contact-form .wpcf7-not-valid-tip {
  margin-top: 3px;
  font-size: 13px;
  color: #dc2626;
}

/* Global CF7 response message */
.fitblend-contact-form ~ .wpcf7-response-output {
  margin-top: 12px;
  border-radius: 8px;
  font-size: 14px;
}

/* ==== Responsive ==== */
@media (max-width: 768px) {
  .fitblend-contact-form .fitblend-row {
    flex-direction: column;
    gap: 8px;
  }
}