/* Tùy chỉnh kiểu cho mục menu đang hoạt động */
.navbar .navbar-nav .nav-item .nav-link.active {
  font-weight: bold; /* Làm chữ in đậm */
  color: #0d6efd !important; /* Đổi màu chữ thành màu xanh dương */
}

/* (Tùy chọn) Giữ nguyên màu xanh khi di chuột qua mục đang hoạt động */
/*
  .navbar .navbar-nav .nav-item .nav-link.active:hover {
    color: #0d6efd !important;
  }
  */
html {
  height: 100%; /* Đảm bảo html chiếm toàn bộ chiều cao */
}

body {
  display: flex;
  flex-direction: column; /* Sắp xếp các phần tử con theo chiều dọc */
  min-height: 100vh; /* Chiều cao tối thiểu bằng chiều cao của viewport */
  /* vh: viewport height, 100vh là 100% chiều cao khung nhìn */
}

main {
  flex-grow: 1; /* Cho phép <main> co giãn để chiếm không gian trống */
  /* Hoặc bạn có thể dùng flex: 1; là viết tắt của flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

/* Tùy chọn: Đảm bảo header và footer không co giãn quá mức nếu cần */
/*
  header, footer {
    flex-shrink: 0;
  }
  */

html {
  scroll-behavior: smooth;
}

#btn-back-to-top {
  position: fixed; /* Giữ cố định khi cuộn */
  bottom: 20px; /* Cách đáy 20px */
  right: 20px; /* Cách phải 20px */
  display: none; /* Mặc định ẩn đi */
  z-index: 99; /* Đảm bảo nổi lên trên các phần tử khác */
  border-radius: 50%; /* Bo tròn nút */
  padding: 0.5rem 0.8rem; /* Điều chỉnh padding cho nút tròn */
}

.card.h-100 {
  /* Nhắm vào các card có chiều cao bằng nhau */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  /* Thêm hiệu ứng chuyển động mượt cho transform và box-shadow */
}

.card.h-100:hover {
  transform: translateY(-5px); /* Nhấc card lên một chút khi hover */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.464) !important; /* Tăng bóng đổ */
}

/* ============================
   Button Effects
   ============================ */

/* --- Hiệu ứng chung cho các nút Bootstrap --- */
.btn {
  /* Thêm transition để hiệu ứng mượt mà */
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  /* Tăng nhẹ bóng đổ mặc định để rõ hơn */
  /* box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); */ /* Có thể giữ nguyên của Bootstrap nếu muốn */
}

/* Hiệu ứng khi di chuột qua các nút chính (Primary, Success, etc.) */
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  transform: translateY(-2px); /* Nút nhích nhẹ lên trên */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Bóng đổ rõ hơn */
}

/* Hiệu ứng khi di chuột qua các nút dạng outline */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover
/* Thêm các lớp .btn-outline-* khác nếu bạn dùng */ {
  transform: translateY(-2px); /* Nút nhích nhẹ lên trên */
  /* Bootstrap đã xử lý đổi màu nền/chữ, không cần thêm nhiều */
}

/* Hiệu ứng khi nhấn giữ nút (Active state) */
.btn:active {
  transform: translateY(0) scale(0.98); /* Hơi thu nhỏ lại để tạo cảm giác nhấn */
  /* Bootstrap đã xử lý trạng thái active khá tốt, không cần thêm shadow phức tạp */
}

/* --- Hiệu ứng riêng cho nút Back to Top --- */
#btn-back-to-top {
  /* Giữ các style cũ */
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 99;
  border-radius: 50%;
  padding: 0.5rem 0.8rem;
  /* Thêm transition */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    background-color 0.2s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0.8; /* Làm nút hơi mờ đi một chút */
}

#btn-back-to-top:hover {
  transform: scale(1.1); /* Phóng to nhẹ khi hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Bóng đổ rõ hơn */
  opacity: 1; /* Hiện rõ hoàn toàn */
}

#btn-back-to-top:active {
  transform: scale(1); /* Trở về kích thước gốc hoặc nhỏ hơn chút */
  /* Có thể thêm hiệu ứng nền tối hơn nếu muốn */
  /* filter: brightness(90%); */
}

/* Căn đều cho các đoạn văn trong phần Lời ngỏ và các phần tương tự */
.text-justify-custom p {
  text-align: justify;
  /* (Tùy chọn) Thêm một chút giãn dòng để dễ đọc hơn khi căn đều */
  /* line-height: 1.7; */
}

.avatar-layered-effect {
  position: relative;
  display: inline-block;
}

.avatar-layered-effect::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /* Ví dụ: một shape hình chữ nhật xoay nhẹ hoặc một họa tiết */
  background-color: var(--bs-info); /* Màu của shape nền */
  border-radius: 0.5rem;
  transform: rotate(-5deg) translate(-10px, -10px); /* Xoay và dịch chuyển shape */
  z-index: -1; /* Đưa ra sau ảnh */
  opacity: 0.3; /* Làm mờ shape nền */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.avatar-layered-effect img {
  position: relative; /* Để đảm bảo ảnh nổi lên trên pseudo-element */
  z-index: 1;
}

.avatar-gradient-frame {
  display: inline-block;
  padding: 10px; /* Khoảng cách để lộ nền gradient */
  /* Ví dụ nền gradient từ xanh dương sang xanh nhạt hơn */
  background-image: linear-gradient(
    135deg,
    var(--bs-primary) 0%,
    var(--bs-info) 100%
  );
  border-radius: 1rem; /* Bo góc nhiều hơn */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.avatar-gradient-frame img {
  display: block;
  border-radius: 0.75rem; /* Bo góc cho ảnh, nhỏ hơn bo góc của khung */
  /* Thêm viền trắng cho ảnh nếu muốn tách biệt khỏi nền gradient */
  /* border: 3px solid white; */
}
.avatar-frame-modern {
  position: relative; /* Cần thiết cho pseudo-elements hoặc định vị con */
  display: inline-block; /* Để div co lại theo kích thước ảnh */
  padding: 8px; /* Khoảng cách giữa ảnh và viền giả */
  background-color: #fff; /* Màu nền cho "khung" */
  border: 1px solid #dee2e6; /* Viền ngoài mỏng nhẹ */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Đổ bóng hiện đại */
  border-radius: 0.375rem; /* Bo góc nhẹ cho khung (tương đương rounded-3 của Bootstrap) */
}

/* Tùy chọn: Tạo thêm một lớp viền giả lệch đi một chút */
.avatar-frame-modern::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: 4px; /* Tạo hiệu ứng lệch */
  bottom: 4px; /* Tạo hiệu ứng lệch */
  border: 2px solid var(--bs-primary); /* Sử dụng màu primary của Bootstrap */
  border-radius: 0.375rem;
  z-index: -1; /* Đưa ra sau ảnh */
  opacity: 0.7;
}

.avatar-frame-modern img {
  display: block; /* Loại bỏ khoảng trống thừa dưới ảnh */
  border-radius: 0.25rem; /* Bo góc nhẹ cho chính ảnh nếu muốn */
}