/* === LIQUID FILL EFFECT FOR CATEGORY BUTTONS === */
.nav.nav-pills a.liquid-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #1f3353;
  border-radius: 10px;
  background: #fff;                /* nền trắng mặc định */
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #1f3353 !important;       /* chữ xanh thương hiệu */
}

/* Hiệu ứng fill */
.nav.nav-pills a.liquid-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#1f3353 0 0)
    no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
  z-index: 0;
  transition: 0.3s var(--t, 0s),
    background-position 0.3s calc(0.3s - var(--t, 0s));
}

/* Hover fill */
.nav.nav-pills a.liquid-btn:hover::before,
.nav.nav-pills a.liquid-btn.active::before {
  --p: 100%;
  --t: 0.3s;
}

/* Giữ text nổi trên lớp fill */
.nav.nav-pills a.liquid-btn span {
  position: relative;
  z-index: 1;
}

.nav.nav-pills a.liquid-btn {
  text-align: center;
  line-height: 1.2;
}

.nav.nav-pills a.liquid-btn span {
  font-size: clamp(0.7rem, 0.9vw, 0.95rem);
}


/* Khi hover đổi màu text */
.nav.nav-pills a.liquid-btn.active span {
  color: #fff;                     /* chữ trắng khi hover */
}


/* Hai nút mỗi hàng trên màn hình nhỏ */
/* Mobile: dùng dropdown, ẩn pills */
@media (max-width: 768px) {
  .nav.nav-pills {
    display: none !important;
  }

  #category-select {
    display: block;
  }
}

/* Desktop/Tablet: ẩn dropdown, hiện pills */
@media (min-width: 769px) {
  #category-select {
    display: none;
  }
}

/* Style cho dropdown (Bootstrap form-select + pill look) */
#category-select {
  width: 100%;
  margin: 12px 0 20px;
  border-radius: 9999px;
  padding: .75rem 1.25rem;
  border: 2px solid #1f3353;
  background-color: #fff;
  color: #1f3353;
  font-weight: 600;
}

/* 1) Text ở trên lớp fill + có thể delay đổi màu */
.nav.nav-pills a.liquid-btn span{
  position: relative;
  z-index: 1;
  transition: color 0s var(--cdelay, 0s); /* dùng biến để điều khiển delay */
}

/* 2) Khi hover/active: bật fill + đặt delay đổi màu chữ = thời gian fill (0.3s) */
.nav.nav-pills a.liquid-btn:hover::before,
.nav.nav-pills a.liquid-btn.active::before{
  --p: 100%;
  --t: 0.3s;      /* thời gian fill */
}

.nav.nav-pills a.liquid-btn:hover,
.nav.nav-pills a.liquid-btn.active{
  --cdelay: 0.3s;  /* trì hoãn đổi màu chữ tới khi nền xanh đã lên */
}

.nav.nav-pills a.liquid-btn:hover span,
.nav.nav-pills a.liquid-btn.active span{
  color:#fff;
}

/* 3) (tuỳ chọn) tăng độ an toàn khi rê nhanh qua lại */
.nav.nav-pills a.liquid-btn{ will-change: transform; }