/* ===== MARQUEE / NEWS TICKER (ĐÁY MÀN HÌNH) ===== */
#marquee {
    position: fixed;
    bottom: 0;
    left: 0;           /* Luôn bắt đầu từ mép trái màn hình */
    width: 100%;       /* Luôn chiếm 100% độ rộng thiết bị */
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    z-index: 1100;     /* Đảm bảo nằm trên các lớp bản đồ */
    transition: padding-left 0.3s ease; /* Hiệu ứng co giãn mượt mà */
}
/* Khi Sidebar ẩn (body có class .sidebar-hidden) */
body.sidebar-hidden #marquee {
    left: 0;
    width: 100%;
}

/* Phần luồng nội dung */
#marqueeTrack {
  flex: 1;
  text-align: center;
  white-space: nowrap; /* Đổi thành nowrap để marquee chạy mượt */
  overflow: hidden;
  min-height: 1.8em;
  transition: opacity 0.4s ease;
}

#marqueeTrack .item {
  display: inline-block;
  animation: fadeIn 0.4s ease forwards;
}

/* Liên kết và các dấu ngăn cách */
#marquee a {
  color: #ffd666;
  text-decoration: none;
  transition: text-decoration 0.2s;
}

#marquee a:hover {
  text-decoration: underline;
}

#marquee .dot {
  margin: 0 14px;
  opacity: 0.6;
}

/* Nút điều hướng (Prev/Next) */
#mqPrev,
#mqNext {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

#mqPrev:hover,
#mqNext:hover {
  color: #ff0;
}

/* Chế độ thủ công (Dừng cuộn) */
.marquee-track.marquee-manual {
  animation: none !important;
  padding-left: 0 !important;
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}

/* Tạm dừng khi di chuột qua */
#marquee:hover #marqueeTrack {
  animation-play-state: paused;
}

/* Hiệu ứng hoạt họa */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
/* Trên màn hình lớn (> 767.9px) */
@media (min-width: 768px) {
    /* Khi Sidebar đang HIỆN: Đẩy nội dung marquee sang phải 350px */
    body:not(.sidebar-hidden) #marquee {
        padding-left: 350px; 
    }

    /* Khi Sidebar đang ẨN: Marquee tự động tràn về lề trái */
    body.sidebar-hidden #marquee {
        padding-left: 0;
    }
    
    /* Đảm bảo track chứa chữ vẫn hiển thị đúng phần không gian trống */
    #marqueeTrack {
        flex: 1;
        overflow: hidden;
    }
}

/* Trên điện thoại (< 767.9px): Marquee luôn full 100% */
@media (max-width: 767.98px) {
    #marquee_ {height: auto;min-height: 36px;padding: 4px 10px;}
    #marquee {        padding-left: 0;    }
    #marqueeTrack {font-size: 13px}
    #mqPrev, #mqNext {width: 28px;height: 28px;}
}