/* Indicator tròn có số nằm giữa */
.carousel-indicators [data-bs-target] {
  width: 13px;
  height: 13px;
  aspect-ratio: 1 / 1;        /* luôn giữ tỉ lệ 1:1, tránh méo */
  flex: 0 0 auto;       /* không bị ép co giãn */
  border-radius: 50%;
  background-color: #0c826f;
  color: #ffffff;
  font-size: 10px; 

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

  border: none;
  margin: 0 4px;
  opacity: 0.7;
  transition: all 0.3s ease;
  text-indent: 0;              /* xoá thụt lề mặc định của Bootstrap */
  overflow: hidden;            /* tránh bị kéo dãn */

  border: 1px solid #0c826f;
  background: rgba(255, 255, 255, 0.8) !important; /* Nền trong suốt */
  backdrop-filter: blur(1px);      
}

.carousel-indicators [data-bs-target]:hover {
  opacity: 1;  
  background: rgba(255, 255, 255, 1) !important; /* Nền trong suốt */
  color: #0c826f;
  transform: scale(1.2); /* Phóng to nút nhẹ khi hover */
}

.carousel-indicators .active {
  background-color: #0078d4;
  opacity: 1;
  background: rgba(255, 255, 255, 1) !important;  
  box-shadow: 0 0 10px #0c826f;
  color: #0c826f;
  font-weight: 600;  
  overflow: visible; /* cho bong bóng bay ra ngoài */
  transform: scale(1.5) translateY(-5px); /* Phóng to + bay lên */
  transition: all 0.3s ease; /* hiệu ứng mượt */
}

/* tạo 3 bong bóng bay lên */
.carousel-indicators .active::before,
.carousel-indicators .active::after,
.carousel-indicators .active span.bubble {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #0c826f;
  border-radius: 50%;
  opacity: 0;
  animation: bubbleUp 1s ease-out forwards;
}

/* tạo 1 bong bóng thứ 3 bằng thẻ giả span */
.carousel-indicators .active span.bubble {
  display: block;
  animation-delay: 0.2s;
}

.carousel-indicators .active::before {
  animation-delay: 0s;
  transform: translateX(-10px);
}
.carousel-indicators .active::after {
  animation-delay: 0.4s;
  transform: translateX(10px);
}

@keyframes bubbleUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px) scale(1.5);
    opacity: 0;
  }
}

/* Hiệu ứng trái tim bay khi nhấn like */
.heart-fly {
  position: absolute;
  font-size: 20px;
  color: #ed2f72;
  animation: fly 1s ease-out forwards;
  pointer-events: none;
}

@keyframes fly {
  0%   { transform: translateY(0) scale(1);   opacity: 1; }
  100% { transform: translateY(-60px) scale(1.5); opacity: 0; }
}

/* hiệu ứng phát sáng + rung nút */
.like-anim {
  animation: glowAndShake 0.6s ease;
}

@keyframes glowAndShake {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.2) rotate(-5deg); }
  50%  { transform: scale(1.1) rotate(5deg); }
  75%  { transform: scale(1.2) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/*----------- Nút Prev / Next mặc định bootstrap --------------*/
/* Nút Prev / Next mặc định */
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: 10%; /* gần hơn so với cạnh trái */
}

.carousel-control-next {
    right: 10%; /* gần hơn so với cạnh phải */
}


/* Hover effect */
/* Hiệu ứng hover nền mờ + phóng to icon */
.carousel-control-prev:hover,
.carousel-control-next:hover {    
  background-color: rgba(0, 0, 0, 0);
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.carousel-control-prev::after,
.carousel-control-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;

  /* gradient vòng tròn */
  background: conic-gradient(#ffffff, #0c826f);

  /* chỉ giữ lại phần viền */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 0px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 0px));

  transform: translate(-50%, -50%);
  opacity: 0;

  /* animation quay vòng */
  animation: spin 2s linear infinite;
  transition: opacity 0.3s ease; /* chỉ còn opacity mờ dần */
}

.carousel-control-prev:hover::after,
.carousel-control-next:hover::after {
  opacity: 1; /* hover thì hiện rõ vòng tròn */
}

/* keyframes cho quay liên tục */
@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/*-------- Phóng to full ----------*/
.phongto {      
  position: fixed;
  z-index: 9999;  /* đặt cực cao để nổi trên hết */
  top: 15px;
  right: 8px;
  transition: all 0.3s ease;
}

.btn-link.custom-btn {
    text-decoration: none;   /* bỏ gạch chân */
    color: black;         /* xanh ngọc */
    font-size: 18px;         /* cỡ chữ */
  }

  .btn-link.custom-btn:hover {
    color: #2f485f;           /* xanh đậm hơn khi hover */    
    text-decoration: none;   /* vẫn không gạch chân */
  }

  .dropdown-item.custom-item {
    text-decoration: none;   /* bỏ gạch chân */
    color: black;        /* xanh ngọc */
    font-size: 14px;         /* cỡ chữ */
  }

  .dropdown-item.custom-item:hover {
    background-color: #ecf0f5; /* hiệu ứng hover nhẹ */
    color: #2f485f;              /* xanh đậm hơn khi hover */
  }
  


/*--------Màn hình thu dọc-----------*/
@media screen and (max-width: 735px) {

  .carousel-control-prev {
    left: 1%; /* gần hơn so với cạnh trái */
  }

  .carousel-control-next {
    right: 1%; /* gần hơn so với cạnh phải */
  }      

  /* Nút Prev / Next mặc định */
  .carousel-control-prev,
  .carousel-control-next {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.5); /* nền trắng mờ */
  }

  /* Hover effect */
  .carousel-control-prev:hover,
  .carousel-control-next:hover {    
    background-color: rgba(255, 255, 255, 0.8); /* nền trắng mờ */
  }

  .carousel-control-prev::after,
  .carousel-control-next::after {  
  width: 39px;
  height: 39px;  
  }
   
}

/*--------Giao diện điện thoại---------*/
@media screen and (max-width: 480px) {

  /*-------- Phóng to full ----------*/
  .btn-link.custom-btn {   
    font-size: 20px;         /* cỡ chữ */
  }
  
  .dropdown-item.custom-item {   
    font-size: 15px;         /* cỡ chữ */
  }
  
  .phongto {      
    display: none;
  }
   
  

}