/* ===== Notice Bar ===== */
.notice-bar{
  --nb-height: 40px;           /* chiều cao bar */
  --nb-bg: #444444;            /* nền */
  --nb-color: #f59e0b;         /* màu chữ (amber) */
  --nb-pad-x: 12px;            /* padding 2 bên trên mobile */
  --nb-speed: 45s;             /* tốc độ chạy (giảm số để chạy nhanh hơn) */

  width: 100%;
  background: var(--nb-bg);
  color: var(--nb-color);
  height: var(--nb-height);
  display: flex;
  align-items: center;
}

.nb-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 var(--nb-pad-x);
}

/* desktop padding rộng hơn */
@media (min-width: 768px){
  .notice-bar{ --nb-pad-x: 60px; }
}
@media (min-width: 1024px){
  .notice-bar{ --nb-pad-x: 350px; }
}

.nb-icon{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.nb-icon img{
  width: 18px; height: 14px; object-fit: contain;
}
@media (min-width: 768px){
  .nb-icon img{ width: 20px; height: 20px; }
}
.nb-label{
  font-size: 12px;
}
@media (min-width: 768px){
  .nb-label{ font-size: 14px; }
}

/* Marquee */
.nb-marquee{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.nb-track{
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  animation: nb-scroll var(--nb-speed) linear infinite;
  will-change: transform;
}
.notice-bar:hover .nb-track{ animation-play-state: paused; }

.nb-msg{
  font-size: 12px;
}
@media (min-width: 768px){
  .nb-msg{ font-size: 14px; }
}

/* Tắt animation cho người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .nb-track{ animation: none; }
}