body {
  padding-top: 174px;
  background-color: #fff;
  /* font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; */
}

.banner {
    background-color: #0f172a; /* Thay màu tối hơn hoặc trong suốt để nổi bật text màu white */
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem 0;
    font-size: 0.88rem;
    width: 100%;

    /* 🛠️ CẤU HÌNH PHỦ KÍN VÀ TỰ ĐỘNG PHÙ HỢP */
    height: auto;
    aspect-ratio: 16 / 9; /* Tỷ lệ mặc định cho Desktop */
    
    /* Chuyển từ 'contain' sang 'cover' để phủ kín hoàn toàn khung banner */
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}

.navbar-nav {
    gap: 10px;
}

/* Dot đỏ cảnh báo – nổi bật, có hiệu ứng nhẹ */
.unread-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ef4444;        /* màu đỏ */
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* Hiệu ứng nhấp nháy nhẹ để thu hút sự chú ý */
@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}