/* 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 chỉ gồm màu #0c826f xoay mờ dần sang trong suốt */
  background: conic-gradient(#0c826f, transparent);

  /* Chỉ giữ lại viền mảnh 3px xung quanh */
  -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;
}

.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 ----------*/ 
/* =========================================================
  DARK MODE CHO FILE CAROUSEL & INDICATORS
  ========================================================= */

/* Cập nhật màu các chấm chọn ảnh (indicators) khi ở Dark Mode */
body.dark-mode .carousel-indicators [data-bs-target] {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: #0c826f;
  color: #2dd4bf;
}

body.dark-mode .carousel-indicators [data-bs-target]:hover {
  background: rgba(12, 130, 111, 0.9) !important;
  color: #ffffff;
}

body.dark-mode .carousel-indicators .active {
  background: rgba(12, 130, 111, 1) !important;
  color: #ffffff;
  box-shadow: 0 0 12px #2dd4bf;
}

/* Cập nhật các nút Prev / Next slider khi ở Dark Mode */
body.dark-mode .carousel-control-prev,
body.dark-mode .carousel-control-next {
  background-color: rgba(30, 41, 59, 0.6);
}

body.dark-mode .carousel-control-prev:hover,
body.dark-mode .carousel-control-next:hover {
  background-color: rgba(30, 41, 59, 0.9);
}

/* =========================================================
   DARK MODE HOÀN CHỈNH CHO CAROUSEL & INDICATORS
   ========================================================= */

/* --- A. NÚT CHUYỂN SLIDE (PREV / NEXT) --- */
/* 1. Đổi màu nền nút & thêm viền xám mỏng */
body.dark-mode .carousel-control-prev,
body.dark-mode .carousel-control-next {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid #334155 !important;
  backdrop-filter: blur(4px) !important;
}

/* 2. Mũi tên SVG bên trong: Luôn Trắng Tinh 100% (Không ngà) */
body.dark-mode .carousel-control-prev-icon,
body.dark-mode .carousel-control-next-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* 3. Hiệu ứng HOVER nút: Đổi màu viền & phát sáng */
body.dark-mode .carousel-control-prev:hover,
body.dark-mode .carousel-control-next:hover {
  background-color: #334155 !important;
  border-color: #2dd4bf !important;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.4) !important;
}

/* Mũi tên khi hover: Trắng tinh + phát sáng nhẹ */
body.dark-mode .carousel-control-prev:hover .carousel-control-prev-icon,
body.dark-mode .carousel-control-next:hover .carousel-control-next-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) !important;
  opacity: 1 !important;
}

/* 4. VÒNG XOAY GRADIENT KHI HOVER (Đã sửa lỗi không quay) */
body.dark-mode .carousel-control-prev::after,
body.dark-mode .carousel-control-next::after {
  background: conic-gradient(#2dd4bf, transparent) !important; /* Vệt xoay xanh ngọc */
}

/* Ép hiển thị vòng xoay rõ ràng khi di chuột vào */
body.dark-mode .carousel-control-prev:hover::after,
body.dark-mode .carousel-control-next:hover::after {
  opacity: 1 !important;
}
/* --- B. CÁC CHẤM CHỌN SLIDE (INDICATORS) --- */

/* 1. Trạng thái THƯỜNG */
body.dark-mode .carousel-indicators [data-bs-target] {
  background: rgba(30, 41, 59, 0.8) !important;
  color: #94a3b8 !important;
  border: 1px solid #94a3b8 !important;
  opacity: 0.85 !important;
}

/* 2. Trạng thái HOVER (Di chuột vào số) */
body.dark-mode .carousel-indicators [data-bs-target]:hover {
  background: #334155 !important;
  color: #2dd4bf !important;
  border-color: #2dd4bf !important;
  opacity: 1 !important;
}

/* 3. Trạng thái ACTIVE (Trang đang mở) */
body.dark-mode .carousel-indicators .active {
  background: rgba(30, 41, 59, 0.8) !important;  /* Nền tối mờ */
  color: #94a3b8 !important;                     /* Chữ/Số màu #94a3b8 */
  border-color: #2dd4bf !important;               /* Viền xanh ngọc nổi bật */
  box-shadow: 0 0 8px #2dd4bf !important;          /* Hiệu ứng phát sáng nhẹ */
  opacity: 1 !important;
}

/* 4. Hiệu ứng bong bóng bay khi Active */
body.dark-mode .carousel-indicators .active::before,
body.dark-mode .carousel-indicators .active::after,
body.dark-mode .carousel-indicators .active span.bubble {
  background: #2dd4bf !important;
}

/*--------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;
  }
   

}