/* =========================================================================
   Star button — hiệu ứng ngôi sao bay (Uiverse.io by MuhammadHasann)
   Scope vào .btn-star để không ảnh hưởng các .btn khác trong app.
   ========================================================================= */
.btn-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 38px;
  background: #fec195;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
  border: 3px solid #fec195;
  border-radius: 10px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  overflow: visible;
}
.btn-star svg.arrow { width: 18px; height: 18px; }

.btn-star .star-1,
.btn-star .star-2,
.btn-star .star-3,
.btn-star .star-4,
.btn-star .star-5,
.btn-star .star-6 {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
}
.btn-star .star-1 { top: 20%; left: 20%; width: 25px; transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); }
.btn-star .star-2 { top: 45%; left: 45%; width: 15px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.btn-star .star-3 { top: 40%; left: 40%; width: 5px;  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.btn-star .star-4 { top: 20%; left: 40%; width: 8px;  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.btn-star .star-5 { top: 25%; left: 45%; width: 15px; transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01); }
.btn-star .star-6 { top: 5%;  left: 50%; width: 5px;  transition: all 0.8s ease; }

.btn-star:hover {
  background: transparent;
  color: #fec195;
  box-shadow: 0 0 25px #fec1958c;
}

.btn-star:hover .star-1 { top: -80%; left: -30%; width: 25px; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.btn-star:hover .star-2 { top: -25%; left: 10%;  width: 15px; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.btn-star:hover .star-3 { top: 55%;  left: 25%;  width: 5px;  filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.btn-star:hover .star-4 { top: 30%;  left: 80%;  width: 8px;  filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.btn-star:hover .star-5 { top: 25%;  left: 115%; width: 15px; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.btn-star:hover .star-6 { top: 5%;   left: 60%;  width: 5px;  filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }

.btn-star .fil0 { fill: #fffdef; }

/* Khi đang xử lý / disabled: khoá hiệu ứng để tránh nhấp nháy */
.btn-star:disabled,
.btn-star[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  background: #fec195;
  color: #181818;
  box-shadow: none;
}
.btn-star:disabled:hover { background: #fec195; color: #181818; box-shadow: none; }
.btn-star:disabled:hover .star-1,
.btn-star:disabled:hover .star-2,
.btn-star:disabled:hover .star-3,
.btn-star:disabled:hover .star-4,
.btn-star:disabled:hover .star-5,
.btn-star:disabled:hover .star-6 { top: auto; left: auto; z-index: -5; filter: drop-shadow(0 0 0 #fffdef); }