/* Popup Background */
.popup {
  display: none; /* Ẩn popup mặc định */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Nền đen với độ trong suốt */
  z-index: 1000; /* Đưa popup lên trên cùng */
  opacity: 0; /* Hiệu ứng ban đầu: ẩn */
  transition: opacity 0.3s ease; /* Hiệu ứng mờ dần */
  overflow: hidden; /* Đảm bảo nội dung không tràn ra ngoài */
}

/* Hiển thị popup (trạng thái active) */
.popup.active {
  display: block; /* Hiển thị popup */
  opacity: 1; /* Hiển thị rõ */
}

/* Popup Content */
.popupContent {
    position: fixed;             /* Cố định theo cửa sổ trình duyệt */
    top: 50%;                    /* Căn giữa theo chiều dọc */
    left: 50%;                   /* Căn giữa theo chiều ngang */
    transform: translate(-50%, -50%);  /* Dịch chuyển để tâm popup trùng với tâm màn hình */
    width: 90%;                  /* Thoải mái trên mobile */
    max-width: 600px;           /* Giới hạn trên desktop (tuỳ chỉnh) */
    max-height: 80vh;           /* Giới hạn chiều cao để không tràn màn hình */
    overflow-y: auto;           /* Cho phép cuộn nếu nội dung dài */
    background: rgba(35, 39, 42, 0.95);
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 1001;              /* Đặt trên overlay (popup) */
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .popupContent {
    max-width: 80%; /* Slightly wider on tablets */
    font-size: 15px;
  }
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .popupContent {
    width: 95%;
    max-width: 100%;
    max-height: 90vh;
    font-size: 14px; /* Adjust font for readability on small screens */
  }
}

/* Close Button */
.popupClose {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
font-size: 24px;
font-weight: bold;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.popupClose:hover {
  color: #ff0000; /* Đổi màu khi di chuột */
}

/* Responsive Styling */
@media (max-width: 768px) {
.popupContent {
    width: 95%;
    max-width: 100%;
    max-height: 90vh; /* Để popup choán hết chiều cao nếu cần */
    margin: 0; /* Bỏ margin nếu đang có */
}
}

.popupContent p {
  font-size: 14px; /* Cỡ chữ nhỏ hơn */
  line-height: 1.6; /* Tăng khoảng cách giữa các dòng */
  text-align: justify; /* Căn thẳng hai bên nội dung */
  margin: 15px 0; /* Khoảng cách trên và dưới nội dung */
  color: #ddd; /* Màu chữ xám nhạt */
}

body.noScroll {
  overflow: hidden; /* Khóa cuộn trang */
}

#footer {
  -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  width: 100%;
  max-width: 100%;
  margin-top: 2rem;
  text-align: center;
}

#footer .copyright {
  letter-spacing: 0.2rem;
  font-size: 0.6rem;
  opacity: 0.75;
  margin-bottom: 0;
  text-transform: uppercase;
}

body.is-article-visible #footer {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  -moz-filter: blur(0.1rem);
  -webkit-filter: blur(0.1rem);
  -ms-filter: blur(0.1rem);
  filter: blur(0.1rem);
  opacity: 0;
}

body.is-loading #footer {
  opacity: 0;
  }


#musicPlayer {
  display: flex; /* Sắp xếp các phần tử theo chiều ngang */
  align-items: center; /* Căn chỉnh các phần tử theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa icon và tên bài hát */
  position: fixed;
  top: 20px; /* Đặt cách mép trên 20px */
  right: 20px; /* Đặt cách mép phải 20px */
  z-index: 999; /* Đảm bảo luôn hiển thị phía trên */
  overflow: hidden; /* Ẩn các phần tử tràn khỏi container */
}

#songTitleWrapper {
  overflow: hidden; /* Ẩn văn bản vượt ra ngoài khung */
  position: relative; /* Để kiểm soát vị trí của văn bản */
  width: 150px; /* Giới hạn chiều rộng của tiêu đề bài hát */
}

#songTitle {
  display: inline-block; /* Giữ văn bản trên cùng một dòng */
  white-space: nowrap; /* Không xuống dòng */
  color: #333; /* Màu chữ */
  font-size: 14px; /* Cỡ chữ phù hợp */
  animation: marquee 5s linear infinite; /* Hiệu ứng marquee */
}

#musicButton {
  background-color: transparent; /* Loại bỏ nền */
  border: none; /* Loại bỏ viền */
  cursor: pointer; /* Thay đổi con trỏ khi hover */
}

#musicIcon {
  padding: 10px; /* Khoảng cách bên trong icon */
  background-color: transparent; /* Nền trong suốt */
  color: rgba(0, 0, 0, 0.5); /* Màu biểu tượng xám nhạt */
  opacity: 0.7; /* Biểu tượng hơi mờ */
  transition: opacity 0.3s ease, color 0.3s ease; /* Hiệu ứng mượt khi thay đổi */
}

#musicIcon:hover {
  opacity: 1; /* Hiển thị rõ khi hover */
  color: rgba(0, 0, 0, 1); /* Màu đậm hơn khi hover */
}

/* Hiệu ứng marquee */
@keyframes marquee {
  0% {
    transform: translateX(100%); /* Bắt đầu từ ngoài khung bên phải */
    opacity: 0; /* Mờ hoàn toàn */
  }
  10% {
    opacity: 1; /* Bắt đầu hiển thị */
  }
  90% {
    opacity: 1; /* Giữ nguyên hiển thị trong khoảng thời gian chạy */
  }
  100% {
    transform: translateX(-100%); /* Kết thúc ngoài khung bên trái */
    opacity: 0; /* Mờ hoàn toàn khi kết thúc */
  }
}

/* Footer styling */
/* Footer Styling */
#footer {
  position: absolute; /* Đặt footer trong section */
  bottom: 0; /* Gắn sát đáy */
  left: 0;
  width: 100%; /* Chiếm toàn bộ chiều ngang */
  text-align: center; /* Căn giữa nội dung */
  padding: 15px 0; /* Khoảng cách trên dưới */
  z-index: 100; /* Hiển thị trên các nội dung khác */
  background-color: transparent; /* Nền trong suốt */
  overflow: hidden; /* Ẩn phần nội dung tràn ra */
}

.footer-container {
  animation: kenburnsEffect 2s ease-out; /* Hiệu ứng xuất hiện Ken Burns */
}

.footer-text {
  font-family: 'Zilla Slab', serif; /* Font chữ Zilla Slab */
  font-size: 10px; /* Kích thước chữ nhỏ hơn */
  font-weight: 400; /* Độ đậm trung bình */
  color: #fff; /* Chữ màu trắng */
  text-transform: uppercase; /* Viết hoa chữ */
  letter-spacing: 1.5px; /* Khoảng cách giữa các chữ cái rộng hơn */
  line-height: 1.3; /* Chiều cao dòng để chữ dễ đọc */
}

.footer-links {
  list-style: none; /* Xóa bullet point */
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Căn giữa các liên kết */
  gap: 15px; /* Khoảng cách giữa các liên kết */
}

.footer-links li {
  display: inline-block; /* Hiển thị ngang */
}

.footer-links a {
  color: #fff; /* Màu chữ liên kết */
  text-decoration: none; /* Xóa gạch chân */
  font-size: 14px; /* Cỡ chữ liên kết */
  transition: color 0.3s ease; /* Hiệu ứng chuyển màu */
}

.footer-links a:hover {
  color: #00bcd4; /* Màu chữ khi hover */
}

@media (max-width: 768px) {
  .footer-text {
    font-size: 10px; /* Kích thước chữ nhỏ hơn trên màn hình nhỏ */
    letter-spacing: 1.5px; /* Khoảng cách chữ vừa phải hơn */
  }

  #footer {
    padding: 10px 0; /* Giảm khoảng cách trên dưới */
  }
}

@keyframes kenburnsEffect {
  0% {
    transform: scale(1.2); /* Phóng to lúc bắt đầu */
    opacity: 0; /* Mờ hoàn toàn */
  }
  50% {
    opacity: 0.5; /* Hiển thị dần */
  }
  100% {
    transform: scale(1); /* Trở về kích thước ban đầu */
    opacity: 1; /* Hiển thị rõ */
  }
}