/* Theme CSS — migrated from Code Snippets #43 */
/* =========================================================
   BRAND · UI Full Styles for Flatsome 3.20.x
   ====================================================== */

/* ---------- 0) ROOT (theo site) ---------- */
:root{
  --brand-primary: var(--fs-color-primary, var(--primary-color, #1b1717));
  --brand-secondary: var(--main-hnc-color, var(--secondary-color, #221f1f));

  --brand-shadow: 0 1px 2px #221F1F4C
  --brand-shadow-focus: 0 0 0 3px #221F1F4C, 0 2px 6px #221F1F4C;

  --brand-accent:#1b1717;   /* Accent */
  --brand-ink:#221f1f;      /* Text color */
  --brand-border:#221F1F4C; /* Border subtle */
  --brand-price:#7b2e2f;    /* Price color */
  --brand-bg:#ffffff;

  --brand-radius:5px;       /* Global radius */
  --brand-input-h:45px;     /* Global input height */
}

/* =========================================================
   A) BASE & A11Y
   ====================================================== */
:where(input, textarea, select, button, a){ outline:none; }
:where(input, textarea, select, button, a):focus-visible{
  border-color:var(--brand-secondary);
  box-shadow:var(--brand-shadow-focus);
}

/* Giảm chuyển động nếu người dùng chọn */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* iOS tap highlight */
:where(input, textarea, select, button, a){ -webkit-tap-highlight-color:transparent; }

/* =========================================================
   B) BUTTONS & BASICS
   ====================================================== */
button,
input[type="button"],
input[type="submit"],
a.button,
.button,
.btn,
.ux-btn,
.ux-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button{
  border-radius:var(--brand-radius) !important;
  border-color:var(--brand-border) !important;
}

/* =========================================================
   C) FORM CONTROLS (Woo + CF7 + native)
   ====================================================== */

/* Khối chung */
:where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select
){
  background:#fff !important;
  color:var(--brand-primary) !important;
  border:1.5px solid var(--brand-border);
  width:100%;
  box-sizing:border-box;
  border-radius:var(--brand-radius) !important;
  padding:12px 14px;
  line-height:1.2;
  height:var(--brand-input-h) !important;
  box-shadow:var(--brand-shadow);
  transition:border-color .18s ease, box-shadow .18s ease, transform .06s ease, filter .18s ease;
}
input[type="search"] {max-height:40px}
textarea, .wpcf7 form textarea{ min-height:140px; resize:vertical; }

:where(input, textarea, select):hover{
  border-color:color-mix(in oklab, var(--brand-primary) 30%, #221F1F4C);
}
:where(input, textarea, select):focus,
:where(input, textarea, select):focus-visible{
  border-color:var(--brand-secondary) !important;
  box-shadow:var(--brand-shadow-focus) !important;
}
:where(input, textarea, select, search, email):active{
  border-color:var(--brand-secondary) !important;
  box-shadow:var(--brand-shadow-focus) !important;
  transform:translateY(1px); filter:brightness(.99);
}

/* Woo form rows */
.woocommerce .input-text,
.woocommerce form .form-row .input-text{
  border-radius:var(--brand-radius) !important;
}

/* Select fallback height */
select{ min-height:var(--brand-input-h) !important; }

/* Contact Form 7 */
.wpcf7 form ::placeholder{ color:#221F1F4C; }
.wpcf7 form .wpcf7-not-valid,
.wpcf7 form [aria-invalid="true"]{
  border-color:#D64545 !important;
  box-shadow:0 0 0 3px rgba(214,69,69,.15) !important;
}

/* Disable blue shadows added by some themes */
:where(input, textarea, select){
  box-shadow:none;
}

/* Toggle button reset */
button.toggle,
button.toggle:hover,
button.toggle:active,
button.toggle:focus{
  border:none !important; outline:none !important; box-shadow:none !important;
  background:transparent;
}

/* =========================================================
   D) SELECT2 (Flatsome/CF7/Woo dùng nhiều)
   ====================================================== */
.select2-container .select2-selection--single{
  height:var(--brand-input-h) !important;
  border-radius:var(--brand-radius) !important;
  border:1.5px solid var(--brand-border) !important;
  box-shadow:var(--brand-shadow);
}
.select2-container .select2-selection--single .select2-selection__rendered{
  line-height:calc(var(--brand-input-h) - 4px) !important;
  padding-left:12px; padding-right:34px;
  color:var(--brand-primary);
}
.select2-container .select2-selection--single .select2-selection__arrow{
  height:var(--brand-input-h) !important; right:8px; width:22px;
}
.select2-dropdown{
  border:1.5px solid var(--brand-border);
  border-radius:calc(var(--brand-radius) + 2px);
  box-shadow:0 6px 18px #221F1F4C;
}

/* =========================================================
   E) QUANTITY (product/cart/mini-cart)
   ====================================================== */
.woocommerce .quantity.buttons_added,
.woocommerce .ux-quantity.quantity.buttons_added{
  display:inline-flex; align-items:center;
  height:30px; background:#fff;
  border:1.5px solid var(--brand-border);
  border-radius:var(--brand-radius);
  overflow:hidden; box-shadow:0 1px 2px rgba(16,57,83,.05);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce .quantity.buttons_added:hover,
.woocommerce .ux-quantity.quantity.buttons_added:hover{
  border-color:color-mix(in oklab, var(--brand-primary) 30%, #2F6F9742);
}
.woocommerce .quantity.buttons_added:focus-within,
.woocommerce .ux-quantity.quantity.buttons_added:focus-within{
  border-color:var(--brand-secondary) !important;
  box-shadow:0 0 0 3px rgba(47,111,151,.16);
}

/* buttons +/- */
.woocommerce .ux-quantity__button.button.is-form,
.woocommerce .quantity .plus,
.woocommerce .quantity .minus{
  background:transparent; border:0 !important; box-shadow:none !important;
  color:var(--brand-primary);
  width:10px; height:100%;
  display:grid; place-items:center; cursor:pointer;
  transition:transform .06s ease, background-color .12s ease;
}
.woocommerce .ux-quantity__button.button.is-form:active,
.woocommerce .quantity .plus:active,
.woocommerce .quantity .minus:active{
  transform:translateY(1px); background-color:rgba(47,111,151,.06);
}

/* input qty */
.woocommerce .quantity .qty,
.woocommerce .ux-quantity .qty{
  width:30px; min-width:20px; height:100%;
  margin:0; padding:0 10px; text-align:center;
  background:transparent; color:var(--brand-primary);
  border:0 !important; box-shadow:none !important;
  border-left:1px solid rgba(0,0,0,.06);
  border-right:1px solid rgba(0,0,0,.06);
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.woocommerce .quantity.buttons_added .input-text.qty.text{ height:100% !important; }

/* =========================================================
   F) PRICE 
   ====================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .woocommerce-Price-amount,
.woocommerce .amount{
  color:var(--brand-price) !important;
}
.woocommerce .price del,
.woocommerce del .woocommerce-Price-amount{ opacity:.55; color:inherit !important; }
.woocommerce .price ins,
.woocommerce ins .woocommerce-Price-amount{ color:var(--brand-price) !important; }

/* Ẩn giá cơ bản WooCommerce khi đã dùng total addon */
.single-product div.product .summary .jr-base-price--hidden{
  display: none !important;
}

/* Ẩn khối total gốc của plugin (vẫn để trong DOM cho JS cập nhật) */
.single-product div.product .summary .wcpa_price_summary{
  display: none !important;
}

/* Box total clone hiển thị như giá chính dưới tiêu đề */
.single-product div.product .summary .jr-addon-total--as-main-price{
  margin: 6px 0 14px;
}

/* Dòng li clone – bỏ border, bullet, margin của theme */
.single-product div.product .summary .jr-addon-total--as-main-price .jr-addon-total-main{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Label "Total:" nhỏ và nhẹ hơn */
.single-product div.product .summary .jr-addon-total--as-main-price .jr-addon-total-main > span:first-child{
  font-size: 0.85em;
  font-weight: 400;
  opacity: .75;
  margin-right: 4px;
}

/* Giá trị tiền – to, đậm, màu brand-price */
.single-product div.product .summary .jr-addon-total--as-main-price .wcpa_price,
.single-product div.product .summary .jr-addon-total--as-main-price .price_value{
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--brand-price, #7b2e2f);
}

/* Ẩn khối Total gốc của WooCommerce Custom Product Addons */
.single-product div.product .summary .wcpa_price_summary{
  display: none !important;
}

/* Đưa Giá (hnc-price-under-title) xuống dưới Rating */
.single-product .product-info.summary.entry-summary{
  display: flex;
  flex-direction: column;
}

/* Mặc định: mọi thứ nằm phía dưới, rồi mình kéo các block cần thiết lên đúng thứ tự */
.single-product .product-info.summary.entry-summary > *{
  order: 99;
}

/* Thứ tự mong muốn */
.single-product .product-info.summary.entry-summary > nav.woocommerce-breadcrumb{ order: 10; }
.single-product .product-info.summary.entry-summary > h1.product-title{ order: 20; }
.single-product .product-info.summary.entry-summary > .is-divider{ order: 30; }

.single-product .product-info.summary.entry-summary > .woocommerce-product-rating{
  order: 40;
  margin-bottom: 6px;
}

.single-product .product-info.summary.entry-summary > #hnc-price-under-title{
  order: 50;
  margin-top: 0;
  margin-bottom: 14px;
}

/* Short description dưới giá */
.single-product .product-info.summary.entry-summary > .product-short-description{ order: 55; }

/* Nếu vẫn giữ khối price-wrapper (đang hidden) thì để sau */
.single-product .product-info.summary.entry-summary > .price-wrapper{ order: 60; }
.single-product .product-info.summary.entry-summary > form.cart{ order: 70; }


/* =========================================================
   G) BREADCRUMB như H1 (Flatsome)
   ====================================================== */
body.woocommerce nav.woocommerce-breadcrumb.breadcrumbs.uppercase{
  display:block;
  font-family:var(--heading-font, var(--font-heading, inherit));
  font-weight:700;
  font-size:clamp(28px, 2.4vw, 42px);
  line-height:1.2; letter-spacing:0;
  margin:0 0 12px;
}
body.woocommerce nav.woocommerce-breadcrumb a{
  color:var(--fs-color-heading, var(--heading-color, #1b1717));
  font-family:var(--heading-font, inherit);
  text-decoration:none;
}

/* =========================================================
   H) SHOP ORDERING (select.orderby)
   ====================================================== */
.woocommerce .woocommerce-ordering{ min-width:230px; }
.woocommerce .woocommerce-ordering select.orderby{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  font:inherit; color:var(--brand-ink); background-color:var(--brand-bg);
  border:1.5px solid var(--brand-border);
  border-radius:var(--brand-radius) !important;
  height:var(--brand-input-h) !important;
  line-height:1.2; padding:10px 40px 10px 14px; box-shadow:0 1px 2px rgba(54,43,43,0.05);
  transition:border-color .15s ease, box-shadow .15s ease, transform .04s ease;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%232B2F36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.woocommerce .woocommerce-ordering select.orderby:hover{
  border-color:var(--brand-primary) !important;
  box-shadow:0 2px 6px rgba(18,88,193,0.12);
}
.woocommerce .woocommerce-ordering select.orderby:focus{
  border-color:var(--brand-primary) !important;
  box-shadow:0 0 0 3px rgba(18,88,193,0.12), 0 2px 6px rgba(18,88,193,0.12);
}
.woocommerce .woocommerce-ordering select.orderby:active{
  transform:translateY(1px);
  border-color:var(--brand-accent) !important;
  box-shadow:0 0 0 3px rgba(18,88,193,0.12);
}
.woocommerce .woocommerce-ordering select.orderby option{ color:var(--brand-ink); }

/* Row Filter left + Sorting right */
.category-filtering.category-filter-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:nowrap;
}
.category-filtering .filter-button{ margin:0; display:inline-flex; align-items:center; gap:6px; }
.category-filtering .inline-block{ margin-left:auto; display:inline-flex; align-items:center; }
.woocommerce-result-count{ display:none !important; }
@media (max-width:600px){
  .woocommerce .woocommerce-ordering{ min-width:160px; }
  .woocommerce .woocommerce-ordering select.orderby{ padding-right:34px; font-size:14px; }
}
@media (max-width:380px){
  .category-filtering.category-filter-row{ flex-wrap:wrap; row-gap:8px; }
  .category-filtering .inline-block{ margin-left:0; width:100%; justify-content:flex-start; }
}

/* =========================================================
   I) MINI-CART – border thay line.png
   ====================================================== */
.off-canvas .widget_shopping_cart .mini_cart_item,
.woocommerce-mini-cart li.mini_cart_item{
  background-image:none !important;
  border-bottom:1px solid rgba(16,57,83,.10);
}

/* =========================================================
   J) SHIPPING METHODS – radio đẹp
   ====================================================== */
ul.woocommerce-shipping-methods, #shipping_method{ list-style:none; margin:0; padding:0; }
.woocommerce-shipping-methods .shipping__list_item{ margin:8px 0; }
.woocommerce-shipping-methods .shipping_method{ position:absolute; opacity:0; pointer-events:none; }
.woocommerce-shipping-methods .shipping__list_label{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:12px 14px 12px 42px;
  border:1.5px solid var(--brand-border); border-radius:var(--brand-radius);
  color:var(--brand-ink); background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  cursor:pointer;
}
.woocommerce-shipping-methods .shipping__list_label::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:2px solid var(--brand-border);
  background:#fff; transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-shipping-methods .shipping__list_label::after{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%) scale(.6);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--brand-accent) 55%, transparent 56%);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.woocommerce-shipping-methods .shipping__list_label:hover{
  border-color:color-mix(in oklab, var(--brand-accent) 25%, var(--brand-border));
}
.woocommerce-shipping-methods .shipping_method:focus-visible + .shipping__list_label{
  border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(47,111,151,.16);
}
.woocommerce-shipping-methods .shipping_method:checked + .shipping__list_label{
  border-color:var(--brand-accent);
  background:color-mix(in oklab, var(--brand-accent) 6%, #fff);
}
.woocommerce-shipping-methods .shipping_method:checked + .shipping__list_label::before{
  border-color:var(--brand-accent); box-shadow:0 0 0 2px rgba(47,111,151,.12);
}
.woocommerce-shipping-methods .shipping_method:checked + .shipping__list_label::after{
  opacity:1; transform:translateY(-50%) scale(1);
}
.woocommerce-shipping-methods .shipping__list_label .woocommerce-Price-amount{ font-weight:600; }

/* =========================================================
   K) TERMS CHECKBOX – custom phẳng, không “lớp xám”
   ====================================================== */


/* dấu * gọn hơn */
.woocommerce .woocommerce-form__label.checkbox > .required{ display:none !important; }
.woocommerce a.woocommerce-terms-and-conditions-link::after{
  content:"*"; font-size:.75em; position:relative; top:-.25em; margin-left:.05em;
}

/* CF7 inline newsletter (áp dụng đúng khối bạn gửi) */
.cf7-inline > p{
  display:flex; align-items:stretch; gap:10px;
  width:100%; margin:0 !important;
}

/* Email = 2/3 chiều ngang */
.cf7-inline > p > .wpcf7-form-control-wrap{
  flex:0 0 66.6667%; max-width:66.6667%;
}
.cf7-inline > p > .wpcf7-form-control-wrap > input.wpcf7-email{
  width:100%; height:45px; padding:0 14px; margin:0 !important; box-sizing:border-box;
}

/* Nút = 1/3, màu theo cài đặt website */
.cf7-inline > p > input.wpcf7-submit{
  flex:1 0 33.3333%; max-width:33.3333%;
  height:45px; padding:0 16px; border-radius:5px; margin:0 !important; box-sizing:border-box;
  background:var(--brand-primary, var(--fs-color-primary, var(--primary-color, #1b1717))) !important;
  border:1px solid var(--brand-primary, var(--fs-color-primary, var(--primary-color, #1b1717))) !important;
  color:#fff !important;
  transition:filter .12s ease, transform .06s ease, box-shadow .18s ease;
}
.cf7-inline > p > input.wpcf7-submit:hover{ filter:brightness(.96); }
.cf7-inline > p > input.wpcf7-submit:active{ transform:translateY(1px); }

/* Xóa ô ngoài cùng bên phải (spinner) và xuống dòng <br> */
.cf7-inline > p > .wpcf7-spinner{ display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; }
.cf7-inline > p > br{ display:none; }

/* Mobile: xếp dọc 100% chiều ngang */
@media (max-width:480px){
  .cf7-inline > p{ flex-direction:column; }
  .cf7-inline > p > .wpcf7-form-control-wrap,
  .cf7-inline > p > input.wpcf7-submit{ flex:0 0 auto; max-width:100%; width:100%; }
}

/* Breadcrumb trên tiêu đề — reset từ heading style về navigation nhỏ gọn */
.single-product nav.woocommerce-breadcrumb.breadcrumbs.uppercase {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: #888 !important;
    margin: 0 0 6px !important;
    text-transform: none !important;
}
.single-product nav.woocommerce-breadcrumb.breadcrumbs.uppercase a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-decoration: none;
}
.single-product nav.woocommerce-breadcrumb.breadcrumbs.uppercase a:hover {
    color: var(--brand-primary, #1b1717) !important;
    text-decoration: underline;
}

/* 2. In đậm tiêu đề sản phẩm */
.single-product .product-title.product_title.entry-title {
    font-weight: 700;
	text-transform: uppercase;  /* in HOA toàn bộ tiêu đề */
}

/* Mô tả ngắn dưới giá — compact, 2 dòng max, fade */
.single-product .product-short-description {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin: 8px 0 12px;
    max-height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 1. Nút wishlist bên ngoài – chỉ còn icon trái tim */
.wishlist-icon .wishlist-button.button.is-outline.circle.icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: auto !important;
  border-radius: 0 !important;
}

/* Icon trái tim Flatsome */
.wishlist-icon .wishlist-button .icon-heart {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: color .15s ease; /* mượt hơn khi đổi màu */
}

/* Khi hover / giữ / nhấn → trái tim màu đỏ */
.wishlist-icon .wishlist-button:hover .icon-heart,
.wishlist-icon .wishlist-button:focus .icon-heart,
.wishlist-icon .wishlist-button:active .icon-heart {
  color: #7b2e2f !important; /* đổi mã màu nếu bạn muốn đỏ kiểu khác */
}

/* Xoá outline khi focus / click */
.wishlist-icon .wishlist-button:focus,
.wishlist-icon .wishlist-button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 2. Bên trong popup YITH – chỉ giữ trái tim */
.wishlist-popup .yith-wcwl-add-to-wishlist a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: auto !important;
}

/* SVG trái tim của YITH */
.wishlist-popup .yith-wcwl-add-to-wishlist a .yith-wcwl-icon-svg {
  width: 25px;
  height: 25px;
  display: inline-block;
  transition: fill .15s ease;
}

/* Hover / giữ / nhấn SVG → đỏ */
.wishlist-popup .yith-wcwl-add-to-wishlist a:hover .yith-wcwl-icon-svg,
.wishlist-popup .yith-wcwl-add-to-wishlist a:focus .yith-wcwl-icon-svg,
.wishlist-popup .yith-wcwl-add-to-wishlist a:active .yith-wcwl-icon-svg {
  fill: #7b2e2f !important;
}

/* Ẩn toàn bộ text / span / feedback trong YITH wishlist */
.yith-wcwl-add-to-wishlist a span,
.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-wishlistaddedbrowse span,
.yith-wcwl-wishlistexistsbrowse span {
  display: none !important;
}

/* 3. Không cho hover/active làm lộ nền hoặc viền */
.wishlist-icon .wishlist-button:hover,
.wishlist-popup .yith-wcwl-add-to-wishlist a:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ẩn hoàn toàn khối đen dưới icon wishlist */
.wishlist-icon .wishlist-popup {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}