#embed-filter {


  .diamond-item:has(.diamond-grid-item.selected) {
      border: 3px solid #013a40;
    }

  .diamond-grid-item.selected {
    border: none !important;
  }

  .diamond-item:has(.diamond-grid-item.selected-pair) {
      border: 3px solid #013a40;
    }

  .diamond-grid-item.selected-pair {
    border: none !important;
  }
  
  
  .category-wrapper {
    display: block;
  }

  @media (min-width: 1080px) {
    .category-wrapper {
      display: none;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .slick-slide {
    margin-right: 14px !important;
  }

  #pagination span,
  #pagination a {
    width: 24px !important;
    height: 24px !important;
    line-height: 0px !important;
    font-weight: 500 !important;
    padding: 0;
    color: #000;
  }

  .active > .page-link {
    border-color: transparent !important;
  }

  .page-item:first-child .page-link {
    border-radius: 100% !important;
  }
  .page-item:last-child .page-link {
    border-radius: 100% !important;
  }

  .page-link {
    border: none !important;
  }

  .pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
    align-items: center;
  }

  .pagination a {
    margin-right: 0 !important;
    display: flex !important;
  }

  .pagination a:hover {
    background: #e4e4e4 !important;
    color: #000 !important;
  }

  .pagination li {
    margin: 0;
  }

  .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    color: #18382d;
    border-radius: 100%;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    border-color: transparent;
    font-family: "Helvetica Neue";
  }

  .pagination .page-link:hover {
    background: #f5f5f5;
    border-radius: 100%;
    color: #18382d;
  }

  .pagination .page-item.active .page-link {
    background: #013a40;
    color: #fff !important;
    border-radius: 100%;
  }

  .pagination .page-item.disabled .page-link {
    color: #ccc;
    cursor: not-allowed;
    background: #f9f9f9;
  }

  .pagination .page-item.disabled .page-link:hover {
    background: #f9f9f9;
    color: #ccc;
  }

  .pagination .page-link.prev,
  .pagination .page-link.next {
    font-weight: 600;
    border-radius: 100%;
  }

  .img-desk {
    display: block;
  }
  .img-mb {
    display: none;
  }
  @media (max-width: 720px) {
    .img-desk {
      display: none;
    }
    .img-mb {
      display: block;
    }
  }

  .active-category {
      position: relative;           /* cha làm mốc cho ::before */
      display: inline-block;        /* để width/100% hoạt động ổn với inline */
      background: linear-gradient(to bottom, #FFFFFF33, #D4F6EE);
    }
    
  .active-category::before {
      content: "";                  /* BẮT BUỘC cho ::before/::after */
      position: absolute;
      left: 0;
      right: 0;                     /* hoặc width: 100% + left: 0 */
      bottom: 0;                    /* dùng 0 cho chuẩn */
      height: 3px;
      background: #057C80;
      display: block;               /* tuỳ chọn, giúp chiều cao áp dụng rõ ràng */
    }

   #event-slide_prev {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-100%);
    left: -10px;
    width: 32px;
    height: 32px;
    border-radius: 24px;
    background-color: #FFFFFFCC;
    color: #000;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
   #event-slide_next {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-100%);
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 24px;
    background-color: #FFFFFFCC;
    color: #000;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
}


/* Clarity range slider */
#claritys_slider.noUi-horizontal {
  height: 8px;
  background: #e5e7eb; /* nền xám nhạt */
  border-radius: 9999px;
}
#claritys_slider .noUi-connect {
  background: #013A40; /* phần được chọn */
}
#claritys_slider .noUi-handle {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2px solid #013A40;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  top: -9px; /* căn giữa track */
}
#claritys_slider .noUi-handle::before,
#claritys_slider .noUi-handle::after {
  display: none; /* ẩn gạch dọc mặc định */
}

/* Nhãn mốc (pips) hiển thị phía trên track */
#claritys_slider .noUi-pips {
  padding: 0;
}
#claritys_slider .noUi-value {
  color: #cfd4da; /* xám nhạt cho mốc chưa chọn */
  font-weight: 600;
  top: -46px; /* đưa lên trên track */
  font-size: 12px;
}
#claritys_slider .noUi-value.pip-active {
  color: #013A40; /* mốc nằm trong khoảng được chọn */
}
#claritys_slider .noUi-marker {
  display: none; /* ẩn chấm mốc để sạch UI */
}

// 
.noUi-horizontal {
  height: 8px !important;
}
/* Clarity range slider */
#colors_slider.noUi-horizontal {
  height: 8px;
  background: #e5e7eb; /* nền xám nhạt */
  border-radius: 9999px;
}
#colors_slider .noUi-connect {
  background: #013A40; /* phần được chọn */
}
#colors_slider .noUi-handle {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2px solid #013A40;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  top: -9px; /* căn giữa track */
}
#colors_slider .noUi-handle::before,
#colors_slider .noUi-handle::after {
  display: none; /* ẩn gạch dọc mặc định */
}

/* Nhãn mốc (pips) hiển thị phía trên track */
#colors_slider .noUi-pips {
  padding: 0;
}
#colors_slider .noUi-value {
  color: #cfd4da; /* xám nhạt cho mốc chưa chọn */
  font-weight: 600;
  top: -46px; /* đưa lên trên track */
  font-size: 12px;
}
#colors_slider .noUi-value.pip-active {
  color: #013A40; /* mốc nằm trong khoảng được chọn */
}
#colors_slider .noUi-marker {
  display: none; /* ẩn chấm mốc để sạch UI */
}