/**
 * Hello Elementor — Custom CSS tied to Elementor Site Settings
 * ----------------------------------------------------------------
 * Màu & font lấy từ: Elementor → Site Settings → Global Colors / Global Fonts.
 * Elementor xuất biến CSS trên body (ví dụ body.elementor-kit-123):
 *
 *   Màu (System):  --e-global-color-primary | secondary | text | accent
 *   Màu (Custom):  --e-global-color-{slug}  (slug = ID bạn đặt trong Custom Colors)
 *
 *   Font (System): --e-global-typography-{id}-font-family | font-size | font-weight
 *                  | line-height | letter-spacing | text-transform | ...
 *   Với id: primary | secondary | text | accent (+ custom typography IDs)
 *
 * Đồng bộ active Kit (dump Site Settings): Be Vietnam Pro; body 15px; h1–h6 16px / 400;
 * Theme Style nút 13px / 500; màu Primary #D91111, Text #2B2524, Accent #4CB5F5, Border #EDD4D4.
 * Fallback trong file này dùng khi không có class kit trên body — chỉnh trong Elementor thì ưu tiên biến --e-global-*.
 */
:root {
  /* —— Palette khách hàng —— */
  --color-brand-red: #d91111;
  --color-soft-red: #fceaea;
  --color-pearl-white: #f8f6f3;
  --color-ocean-blue: #4cb5f5;
  --color-gold-warm: #f5c46b;

  /* —— Màu hệ thống (map vào theme) —— */
  --color-primary: var(--color-brand-red);
  --color-secondary: var(--color-pearl-white);
  --color-text: #2b2524;
  --color-accent: var(--color-ocean-blue);

  /* —— Tùy chỉnh —— */
  --color-background: var(--color-soft-red);
  --color-button-primary-background: var(--color-brand-red);
  --color-button-background: var(--color-brand-red);
  --color-button-text: var(--color-pearl-white);
  --color-button-hover-background: var(--color-ocean-blue);
  --color-button-hover-text: var(--color-pearl-white);
  /* Kit Custom Color "Border" + Theme Style button border */
  --color-border: #edd4d4;
}

/* -------------------------------------------------------------------------
   1) Base — chữ & nền mặc định
   ------------------------------------------------------------------------- */
html {
  background-color: var(--color-pearl-white, #f8f6f3);
}

body {
  /* Nền pearl white; --color-background (soft red) dùng cho block/panel khi cần */
  background-color: var(--color-pearl-white, #f8f6f3);
  color: var(--color-text, var(--e-global-color-text, #2b2524));
  font-family: var(
    --e-global-typography-text-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  );
  font-size: var(--e-global-typography-text-font-size, 15px);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, 1.6);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
}

/* -------------------------------------------------------------------------
   2) Headings — đồng bộ Theme Style Kit (h1–h6: Be Vietnam Pro, 16px, 400, Primary)
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary, var(--e-global-color-primary, #d91111));
  font-family: var(
    --e-global-typography-primary-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  );
  font-weight: var(--e-global-typography-primary-font-weight, 400);
  /* Theme Style 16px: dùng secondary-size vì Global Primary trong kit vẫn 24px */
  font-size: var(--e-global-typography-secondary-font-size, 16px);
  line-height: var(--e-global-typography-primary-line-height, 1.3);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, normal);
  text-transform: var(--e-global-typography-primary-text-transform, none);
}

/* Tiêu đề trang dùng chung — editor: Additional CSS class → shop-page-heading. Alias: .shop-search-page__title */
.shop-page-heading,
.shop-search-page__title {
  margin: 0 0 2rem !important;
  font-family: var(
    --e-global-typography-primary-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  ) !important;
  font-size: var(--e-global-typography-secondary-font-size, 16px) !important;
  font-weight: var(--e-global-typography-primary-font-weight, 400) !important;
  line-height: var(--e-global-typography-primary-line-height, 1.3) !important;
  color: var(--color-primary, var(--e-global-color-primary, #d91111)) !important;
  text-align: center !important;
}

.shop-page-heading,
.shop-search-page__title {
  font-size: 32px !important;
}

/* -------------------------------------------------------------------------
   3) Links
   ------------------------------------------------------------------------- */
a {
  color: var(--color-accent, var(--e-global-color-accent, #4cb5f5));
  text-decoration-color: var(--color-accent, currentColor);
  font-weight: var(--e-global-typography-accent-font-weight, 500);
}

a:hover,
a:focus {
  color: var(--color-primary, var(--e-global-color-primary, #d91111));
}

/* -------------------------------------------------------------------------
   4) WooCommerce — giá, nút, breadcrumb (bám global colors / typography)
   ------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce-page .price {
  color: var(--color-primary, var(--e-global-color-primary, #d91111));
  font-weight: var(--e-global-typography-accent-font-weight, 500);
}

/* Breadcrumb: chữ mờ cho mục hiện tại + dấu /; link accent → hover primary (cùng logic link theme) */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  box-sizing: border-box;
  margin: 0 0 1.15rem;
  padding: 0;
  max-width: 100%;
  font-family: var(
    --e-global-typography-text-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  );
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
  color: color-mix(
    in srgb,
    var(--color-text, var(--e-global-color-text, #2b2524)) 62%,
    transparent
  );
}

@media (min-width: 768px) {
  .woocommerce .woocommerce-breadcrumb,
  .woocommerce-page .woocommerce-breadcrumb {
    font-size: var(--e-global-typography-text-font-size, 15px);
    margin-bottom: 1.35rem;
  }
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a {
  color: var(--color-accent, var(--e-global-color-accent, #4cb5f5));
  text-decoration: none;
  text-decoration-color: transparent;
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  transition: color 0.18s ease;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover {
  color: var(--color-primary, var(--e-global-color-primary, #d91111));
}

.woocommerce .woocommerce-breadcrumb a:focus-visible,
.woocommerce-page .woocommerce-breadcrumb a:focus-visible {
  color: var(--color-primary, var(--e-global-color-primary, #d91111));
  outline: 2px solid
    color-mix(
      in srgb,
      var(--color-primary, var(--e-global-color-primary, #d91111)) 45%,
      transparent
    );
  outline-offset: 3px;
  border-radius: 2px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(
    --color-button-background,
    var(--e-global-color-accent, #d91111)
  );
  color: var(--color-button-text, #f8f6f3);
  font-family: var(
    --e-global-typography-accent-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  );
  font-size: var(--e-global-typography-accent-font-size, 13px);
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  line-height: 1.2;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #edd4d4);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--color-button-hover-background, var(--color-ocean-blue));
  color: var(--color-button-hover-text, var(--color-pearl-white));
}

/* WooCommerce Blocks — Proceed to checkout / nút submit giỏ (đồng bộ nút theme) */
.wc-block-cart__submit .wc-block-components-button,
.wc-block-cart__submit-button.wc-block-components-button,
a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block button.wc-block-components-button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border, #edd4d4) !important;
  background-color: var(
    --color-button-background,
    var(--e-global-color-accent, #d91111)
  ) !important;
  color: var(--color-button-text, #f8f6f3) !important;
  font-family: var(
    --e-global-typography-accent-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  ) !important;
  font-size: var(--e-global-typography-accent-font-size, 13px) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 500) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease !important;
}

.wc-block-cart__submit .wc-block-components-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover,
a.wc-block-cart__submit-button:hover,
button.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block button.wc-block-components-button:hover {
  background-color: var(
    --color-button-hover-background,
    var(--color-ocean-blue)
  ) !important;
  color: var(--color-button-hover-text, var(--color-pearl-white)) !important;
  opacity: 1 !important;
}

.wc-block-cart__submit .wc-block-components-button:focus,
.wc-block-cart__submit .wc-block-components-button:focus-visible,
.wc-block-cart__submit-button.wc-block-components-button:focus-visible,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:focus-visible {
  outline: 2px solid var(--color-accent, #4cb5f5) !important;
  outline-offset: 2px !important;
}

.wc-block-cart__submit
  .wc-block-components-button[aria-disabled="true"],
.wc-block-cart__submit-button.wc-block-components-button[aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Mini cart drawer — cùng style nút checkout */
.wc-block-mini-cart__footer-checkout.wc-block-components-button,
a.wc-block-mini-cart__footer-checkout {
  min-height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border, #edd4d4) !important;
  background-color: var(
    --color-button-background,
    var(--e-global-color-accent, #d91111)
  ) !important;
  color: var(--color-button-text, #f8f6f3) !important;
  font-family: var(
    --e-global-typography-accent-font-family,
    "Be Vietnam Pro",
    system-ui,
    sans-serif
  ) !important;
  font-size: var(--e-global-typography-accent-font-size, 13px) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 500) !important;
  text-decoration: none !important;
}

.wc-block-mini-cart__footer-checkout.wc-block-components-button:hover,
a.wc-block-mini-cart__footer-checkout:hover {
  background-color: var(
    --color-button-hover-background,
    var(--color-ocean-blue)
  ) !important;
  color: var(--color-button-hover-text, var(--color-pearl-white)) !important;
}

/* -------------------------------------------------------------------------
   5) Form (theme + WooCommerce checkout)
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  color: var(--color-text, var(--e-global-color-text, #1a1a1a));
  border-color: var(--color-border, var(--e-global-color-secondary, #0303031a));
  font-family: var(--e-global-typography-text-font-family, inherit);
}

/* Nút clear (x) trong ô search — global */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-color: var(--color-background, #beb1a1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 24px 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 24px 24px;
  opacity: 1;
}

/* -------------------------------------------------------------------------
   6) Ghi chú — Typography thêm trong Elementor
   -------------------------------------------------------------------------
 * Biến màu theme: --color-primary | secondary | text | accent | background |
 *   button-background | button-text | border
 */

.category-title {
  font-size: 24px !important;
  font-weight: 500;
}

/* Hide Woo sale badge inside Elementor product images widget only */
.elementor-widget-woocommerce-product-images .onsale {
  display: none !important;
}

/* Elementor Woo Product Images widget - cleaner gallery */
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.elementor-widget-woocommerce-product-images
  .woocommerce-product-gallery__wrapper {
  background: #f8f8f8 !important;
}

.elementor-widget-woocommerce-product-images .flex-viewport {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 10px !important;
}

.elementor-widget-woocommerce-product-images
  .woocommerce-product-gallery__image,
.elementor-widget-woocommerce-product-images
  .woocommerce-product-gallery__image
  a,
.elementor-widget-woocommerce-product-images
  .woocommerce-product-gallery__image
  img {
  border: 1px solid var(--color-border, #0303031a) !important;
  border-radius: 10px !important;
}

.elementor-widget-woocommerce-product-images
  .woocommerce-product-gallery
  .flex-control-nav {
  display: flex !important;
  justify-content: center !important;
}

.elementor-widget-woocommerce-product-images .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  overflow-x: auto !important;
  padding: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff !important;
  border: 1px solid var(--color-border, #0303031a) !important;
  border-radius: 12px !important;
}

.elementor-widget-woocommerce-product-images .flex-control-thumbs li {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  margin: 0 !important;
  padding: 4px !important;
  background: #fff !important;
  border: 1px solid var(--color-border, #0303031a) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.elementor-widget-woocommerce-product-images .flex-control-thumbs img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  border: 0 !important;
  opacity: 0.95 !important;
  transition: opacity 0.2s ease !important;
}

.elementor-widget-woocommerce-product-images
  .flex-control-thumbs
  li:has(img.flex-active),
.elementor-widget-woocommerce-product-images .flex-control-thumbs li:hover {
  border-color: var(--color-accent, #beb1a1) !important;
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--color-accent, #beb1a1) 60%, transparent) !important;
}

.elementor-widget-woocommerce-product-images
  .flex-control-thumbs
  img.flex-active,
.elementor-widget-woocommerce-product-images .flex-control-thumbs img:hover {
  opacity: 1 !important;
}

/* Không ẩn .woovr-variations toàn site: plugin WPC ẩn table.variations khi có .woovr-variations —
   nếu ẩn cả woovr thì quick-buy/offcanvas trống. Trang PDP theme: shop-product-detail.css ẩn trong .shop-product-detail__cart-wrap */

/* Trang giỏ & thanh toán — cùng margin-top / max-width (tránh chỉ khớp .post-7 khi ID trang giỏ ≠ 7) */
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	margin-top: 40px !important;
	max-width: 1440px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-left: auto !important;
	margin-right: auto !important;
	min-width: 0 !important;
}

/* Tiêu đề trang Hello (.page-header > h1.entry-title) — giống .shop-page-heading */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
	text-align: center !important;
	margin-bottom: 0 !important;
}

body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title {
	margin: 0 0 2rem !important;
	font-family: var(
		--e-global-typography-primary-font-family,
		"Be Vietnam Pro",
		system-ui,
		sans-serif
	) !important;
	font-size: 32px !important;
	font-weight: var(--e-global-typography-primary-font-weight, 400) !important;
	line-height: var(--e-global-typography-primary-line-height, 1.3) !important;
	color: var(--color-primary, var(--e-global-color-primary, #d91111)) !important;
	text-align: center !important;
}

@media (max-width: 1024px) {
	body.woocommerce-cart .site-main,
	body.woocommerce-checkout .site-main {
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: hidden !important;
		overflow-x: clip !important;
	}

	body.woocommerce-cart .woocommerce,
	body.woocommerce-cart .entry-content,
	body.woocommerce-checkout .woocommerce,
	body.woocommerce-checkout .entry-content {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

/* Hello theme.css đặt .alignwide { margin-inline: -80px } — gỡ kéo rộng */
.alignwide {
	margin-inline: 0 !important;
}

.woosb-wrap.woosb-bundled {
	display: none !important;
}

/* Combo offcanvas: nhóm option cho từng sản phẩm con */
.shop-bundle-child-options {
	margin: 16px 0 8px;
}

.shop-bundle-child-options__item + .shop-bundle-child-options__item {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--color-border, #edd4d4);
}

.shop-bundle-child-options__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--color-text, #2b2524);
}

/* Menu header [shop_header_menu]: burger + full-screen — không bị Elementor/header đè (breakpoint đồng bộ JS) */
@media (max-width: 1023px) {
	.shop-header-menu .shop-header-menu__hamburger {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative !important;
		z-index: 20 !important;
	}

	.shop-header-menu .shop-header-menu__bar,
	.shop-header-menu .shop-header-menu__overlay {
		display: none !important;
	}

	/* Sheet append ra body — dùng attribute, mỗi shortcode có id riêng */
	body.shop-header-menu--mobile-open [data-mobile-menu-sheet]:not([hidden]) {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 2147483000 !important;
	}
}