/***************
 * MPL TOOLBAR (one row, pixel-straight)
 ***************/
.mpl-bar{
  background:#f6f6f6;
  border:1px solid #eee;
  height:50px;                 /* CHIỀU CAO CỐ ĐỊNH */
  padding:0 16px;
  margin:16px 0 22px;
  display:flex;                /* 1 HÀNG */
  align-items:center;          /* canh giữa dọc */
  justify-content:space-between;
  gap:16px;
}

/* Left: count */
.mpl-bar__count{
  font-size:14px;
  line-height:1;
  margin:0;
}

/* Right: actions (Filter + Sort) */
.mpl-bar__actions{
  display:flex;
  align-items:center;
  gap:24px;
  line-height:0;               /* kill baseline lệch */
}
.mpl-bar__actions *{ margin:0; }
.mpl-bar__actions button{ border:0; background:transparent; padding:0; }

/* FILTER */
.mpl-bar__filter{
  display:inline-flex; align-items:center; gap:8px;
  line-height:1; cursor:pointer; font-weight:600; font-size:14px;
}
.mpl-bar__filter-icon svg{ display:block; height:1em; width:auto; }

/* SORT */
.mpl-bar__sort{ position:relative; display:inline-flex; align-items:center; gap:10px; line-height:1; }
.mpl-bar__sort-label{ font-weight:600; font-size:14px; }
.mpl-bar__sort-toggle{
  display:inline-flex; align-items:center; gap:6px;
  line-height:1; cursor:pointer; font-size:14px; font-weight:700;
}
.mpl-caret{ display:block; height:1em; width:auto; }

/* Dropdown Sort */
.mpl-bar__sort-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:210px;
  background:#fff; border:1px solid #ddd; border-radius:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  list-style:none; margin:0; padding:6px 0; display:none; z-index:1050;
}
.mpl-bar__sort-menu.show{ display:block; }
.mpl-bar__sort-menu li{ padding:10px 14px; cursor:pointer; }
.mpl-bar__sort-menu li:hover{ background:#f4f4f4; }

/* ===== Drawer Filter (Product Sidebar) ===== */
.mpl-drawer{ position:fixed; inset:0; display:none; z-index:1100; }
.mpl-drawer.show{ display:block; }
.mpl-drawer__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.mpl-drawer__panel{
  position:absolute; right:0; top:0; height:100%; width:min(470px,92vw);
  background:#fff; box-shadow:-12px 0 30px rgba(0,0,0,.2);
  display:flex; flex-direction:column;
}
.mpl-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #eee;
}
.mpl-drawer__body{ padding:16px; overflow:auto; height:100%; background: #f9f9f9;}

/* Nút đóng filter (hình tròn, X giữa tâm) */
.mpl-drawer__close {
  background: none;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;

  display: flex;                /* dùng flex để căn giữa X */
  align-items: center;
  justify-content: center;

  font-size: 16px;              /* cỡ chữ vừa phải */
  line-height: 1;               /* bỏ line-height mặc định */
  color: #000;                  /* màu chữ X */
  transition: all 0.2s ease;
}

.mpl-drawer__close:hover {
  border-color: #000;
  background-color: #f8f8f8;    /* hiệu ứng nhẹ khi hover */
}

/* (Tuỳ chọn) Nếu muốn X đậm hơn */
.mpl-drawer__close:focus,
.mpl-drawer__close:active {
  outline: none;
}


/* lock scroll khi mở drawer */
html.mpl-no-scroll, html.mpl-no-scroll body{ overflow:hidden; }

@media (max-width:767px){
  .mpl-bar{ height:42px; padding:0 12px; }
}


/***********************
 * Layered Nav as CHECKBOX (kiểu hình 2)
 ***********************/
.mpl-drawer__body .woocommerce-widget-layered-nav{
  --box: 16px;      /* kích thước ô */
  --gap: 10px;      /* khoảng cách ô ↔ nhãn */
  --bd:  2px;       /* độ dày viền */
  --c:   #111;      /* màu viền & fill khi chọn */
  --bd-muted:#c8c8c8; /* màu viền thường */
}

/* mỗi item 1 dòng, chừa chỗ cho ô ở bên trái */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li{
  position:relative;
  display:flex; align-items:center; gap:var(--gap);
  padding:0px 12px 0px calc(var(--box) + var(--gap) + 14px);
  cursor:pointer;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li:last-child{ border-bottom:0; }

/* nhãn + số lượng */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li a{
  flex:1 1 auto; text-decoration:none; color:inherit;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li .count{
  color:#9a9a9a; margin-left:8px;
}

/* ô vuông: viền đen 1px, nền trắng, góc vuông */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: var(--box);
  height: var(--box);
  transform: translateY(-50%);
  box-sizing: border-box;

  /* chính phần style bạn muốn */
  border: 1px solid #000;   /* viền đen 1px */
  background: #fff;         /* nền trắng */
  border-radius: 0;         /* góc vuông */
  
  transition: border-color 0.15s, background-color 0.15s;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li:hover::before {
  border-color: #000;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::before {
  background: #000;
  border-color: #000;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 6px;
  height: 10px;
  transform: translateY(-58%) rotate(45deg);
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
}

/* KHÓA .chosen của Woo để không vẽ tick */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.chosen:not(.mpl-selected)::before{
  background:#fff; border-color:var(--bd-muted);
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.chosen:not(.mpl-selected)::after{
  content:none;
}

/* CHỈ dùng .mpl-selected cho trạng thái đã chọn */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::before{
  background:var(--c); border-color:var(--c);
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::after{
  content:"";
  position:absolute; left:13px; top:50%;
  width:6px; height:10px;
  transform:translateY(-58%) rotate(45deg);
  border:2px solid #fff; border-top:0; border-left:0;
}

/* trạng thái disabled (không có sản phẩm) */
.mpl-drawer__body .woocommerce-widget-layered-nav-list
li.wc-layered-nav-term--hidden,
.mpl-drawer__body .woocommerce-widget-layered-nav-list
li a[aria-disabled="true"]{
  opacity:.45; pointer-events:none;
}

/* nếu có dot màu từ theme/plugin thì căn cho đẹp (không dùng thì bỏ qua) */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li a .color-swatch{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  margin-right:8px; vertical-align:middle; border:1px solid #e3e3e3;
}

/* Footer cố định trong panel */
.mpl-drawer__foot{
  position: sticky; bottom: 0; z-index: 3;
  background:#fff; border-top:1px solid #eee;
  display:flex; gap:12px; justify-content:space-between;
  padding:12px 16px;
}
.mpl-filter-clear, .mpl-filter-apply{
  appearance:none; cursor:pointer; padding:10px 14px; border-radius:4px;
  font-weight:600; font-size:14px;
}
.mpl-filter-clear{
  border:1px solid #ddd; background:#fff;
}
.mpl-filter-clear:hover{ border-color:#000; }
.mpl-filter-apply{
  border:1px solid #111; background:#111; color:#fff;
}
.mpl-filter-apply:hover{ filter:brightness(1.05); }

/* Cho phép chọn nhiều: dùng class .mpl-selected như .chosen */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::before{
  background:#111; border-color:#111;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::after{
  content:""; position:absolute; left:14px; top:50%;
  width:6px; height:10px; transform:translateY(-55%) rotate(45deg);
  border:2px solid #fff; border-top:0; border-left:0;
}


/* --- PATCH: Vẽ dấu tick chỉ theo .mpl-selected, KHÔNG theo .chosen --- */

/* Woo mặc định gắn .chosen cho item đang lọc -> reset lại UI nếu KHÔNG có .mpl-selected */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.chosen:not(.mpl-selected)::before{
  background:#fff;                 /* ô vuông trắng như chưa chọn */
  border-color: var(--border);
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.chosen:not(.mpl-selected)::after{
  content:none;                     /* ẩn dấu tick mặc định */
}

/* Dấu tick chỉ hiển thị khi có .mpl-selected */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::before{
  background:#111; border-color:#111;
}
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::after{
  content:""; position:absolute; left:14px; top:50%;
  width:6px; height:10px; transform:translateY(-55%) rotate(45deg);
  border:2px solid #fff; border-top:0; border-left:0;
}
/* === Xóa border-top mặc định của Flatsome trong Filter Drawer === */
.mpl-drawer__body .widget > ul > li,
.mpl-drawer__body ul.menu > li {
  border-top: none !important;
}

/* ===== Chia filter thành 2 cột và chỉnh font nhỏ ===== */
.mpl-drawer__body .woocommerce-widget-layered-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* chia 2 cột bằng nhau */
}

.mpl-drawer__body .woocommerce-widget-layered-nav-list li {
  border: none; /* ẩn viền ngăn dòng */
  padding: 6px 8px 6px 28px; /* chừa chỗ cho checkbox */
  font-size: 13px; /* chữ nhỏ hơn */
  line-height: 1.4;
}

/* Căn checkbox chính xác khi chuyển qua layout grid */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li::before {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* Ẩn đường kẻ từ Flatsome (nếu vẫn còn sót) */
.mpl-drawer__body .widget > ul > li,
.mpl-drawer__body ul.menu > li {
  border-top: none !important;
}

/* Kích cỡ ô và lề trái (đang dùng 2 cột) */
.mpl-drawer__body .woocommerce-widget-layered-nav {
  --box: 16px;           /* size ô vuông */
  --left-pad: 6px;       /* đúng bằng 'left' của ::before */
}

/* Ô vuông – nền trắng, viền đen 1px */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li::before{
  left: var(--left-pad);
  width: var(--box); height: var(--box);
  border: 1px solid #000;
  background: #fff;
  border-radius: 0;
}

/* Khi CHỌN: tô đen ô */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::before{
  background: #000;
  border-color: #000;
}

/* Dấu ✓ căn giữa tuyệt đối trong ô (dù đổi font/padding vẫn đúng) */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.mpl-selected::after{
  content:"";
  position:absolute;
  left: calc(var(--left-pad) + var(--box) / 2); /* giữa theo width ô */
  top: 50%;
  width: 6px; height: 10px;
  transform: translate(-50%, -58%) rotate(45deg); /* căn tâm + nghiêng */
  border: 1px solid #fff;           /* tick trắng */
  border-top: 0; border-left: 0;
}

/* ===========================
   FOOTER BUTTONS STYLE
   =========================== */

.mpl-drawer__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fff;
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* CLEAR ALL */
.mpl-filter-clear {
  flex: 1;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.mpl-filter-clear:hover {
  background: #000;
  color: #fff;
}

/* VIEW PRODUCTS */
.mpl-filter-apply {
  flex: 1;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.mpl-filter-apply:hover {
  background: #333;
  border-color: #333;
}

/* Nếu muốn nhìn giống “Hermès” hơn (góc vuông và sát mép) */
.mpl-filter-clear,
.mpl-filter-apply {
  border-radius: 0;
}

/* ===== Canh hàng link filter & khoảng cách hợp lý ===== */
.mpl-drawer__body .woocommerce-widget-layered-nav-list a{
  display: inline-flex;          /* để :before, text, swatch cùng một hàng */
  align-items: center;           /* căn giữa theo trục dọc */
  gap: 12px;                     /* tăng khoảng cách giữa ô vuông và chữ */
  line-height: 1.55;             /* chiều cao dòng ổn định, giúp giữa dòng */
  vertical-align: middle;        /* dự phòng cho trình duyệt cũ */
  padding-right: 6px;            /* đệm nhẹ bên phải */
}

/* Ô vuông (pseudo) trước chữ – không cần margin riêng, giao cho gap */
.mpl-drawer__body .woocommerce-widget-layered-nav-list a::before{
  flex: 0 0 16px;                /* cố định kích thước để không co giãn */
  margin: 0;
  position: relative;
  top: 0;                        /* đảm bảo không bị lệch dọc */
}

/* ===== Swatch tròn nằm SAU chữ, căn giữa thật chuẩn ===== */
.mpl-swatch-img{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-grid;          /* center tuyệt đối theo cả 2 chiều */
  place-items: center;           /* tương đương align+justify center */
  overflow: hidden;
  flex: 0 0 16px;
  order: 2;                      /* nằm sau phần chữ */
  margin-left: 10px;             /* khoảng cách chữ ↔ swatch */
  transform: translateY(0.5px);  /* tinh chỉnh cực nhỏ cho thị giác */
}
.mpl-swatch-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Khoảng cách mỗi dòng item cho thoáng mắt */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li{
  padding: 8px 12px;
}

/* Khi đã chọn, chỉ đậm chữ – không làm lệch swatch */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li.chosen a{
  font-weight: 600;
}

/* Mỗi item trong filter = 1 hàng, có chỗ cho ... nếu tên dài */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li{
  display:flex;                 /* a + count nằm cùng một hàng */
  align-items:center;
  gap: 10px;                    /* khoảng cách chữ ↔ count */
}

/* Anchor chứa ô vuông + label + swatch (ở bên phải) */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li > a{
  flex: 1 1 auto;               /* cho phép chiếm phần còn lại */
  min-width: 0;                 /* bắt buộc để ellipsis hoạt động trong flex */
  white-space: nowrap;          /* không cho xuống dòng */
  overflow: hidden;             /* cắt phần dư */
  text-overflow: ellipsis;      /* thay bằng … */
  display: inline-flex;         /* vẫn giữ căn giữa theo dọc */
  align-items: center;
  gap: 12px;                    /* ô vuông ↔ chữ ↔ swatch */
}

/* Số lượng (count) ở bên phải vẫn cố định, không bị ép cắt */
.mpl-drawer__body .woocommerce-widget-layered-nav-list li > .count{
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: .6;                 /* tuỳ chọn: làm nhẹ màu số cho dễ nhìn */
}