/* =========================
   HERO NEWS TICKER
   ========================= */
.hero-news{
  margin: 16px auto 0;
  width: 100%;
  max-width: 1100px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid var(--line);
  background: rgba(127,127,127,.06);
  border-radius: 12px;
  padding: 10px 12px;

  overflow: hidden;
}

/* ✅ NEW + YEAR nằm bên phải */
.hero-news__badge{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;

  padding: 4px 8px;
  border-radius: 999px;

  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.12);
  color: var(--text);

  flex: 0 0 auto;

  order: 2;
  margin-left: auto;
}

.hero-news__track{
  flex: 1;
  min-width: 0;
  overflow: hidden;

  order: 1;
}

/* marquee container */
.hero-news__marquee{
  display: flex;
  width: max-content;
  gap: 18px;

  /* chạy phải -> trái */
  animation: heroMarquee 40s linear infinite;

}

/* mỗi row là 1 cụm, mình nhân đôi 2 row để loop mượt */
.hero-news__row{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

/* item */
.hero-news__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;
  user-select: none;

  font-size: 13px;
  color: var(--text);
  opacity: .92;

  padding: 6px 10px;
  border-radius: 10px;

  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.hero-news__item:focus-visible{
  outline: 2px solid rgba(127,127,127,.45);
  outline-offset: 3px;
}

.hero-news__meta{
  opacity: .75;
}

/* dot ngăn cách */
.hero-news__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(127,127,127,.55);
  display: inline-block;
}

/* keyframes chạy mượt */
@keyframes heroMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* fallback list (ẩn mặc định) */
.hero-news__list{
  display: none;
}

/* Hover thì pause marquee để dễ click đọc */
.hero-news:hover .hero-news__marquee{
  animation-play-state: paused;
}

/* Reduce motion: tắt animation, hiện list */
@media (prefers-reduced-motion: reduce){
  .hero-news__marquee{
    animation: none !important;
  }
  .hero-news__track{
    display: none;
  }
  .hero-news__list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* =========================
   HERO NEWS INLINE (News + 2026 + list)
   ========================= */
.hero-news-inline{
  margin-top: 22px;
}

/* News canh giữa như ảnh */
.hero-news-inline__title{
  margin: 0 0 14px 0;
  font-size: 14.5px;
  line-height: 1.1;
  color: var(--muted);
  text-align: left;
}

.hero-news-inline__year{
  display: none;
}

.hero-news-inline__list{
  display: block;
}

.hero-news-inline__group{
  margin-top: 16px;
}

.hero-news-inline__group:first-child{
  margin-top: 0;
}

.hero-news-inline__groupYear{
  display: none;
  margin: 0 0 10px 0;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.1;
  color: #1d4ed8;
  text-align: left;
}

/* List trong mỗi năm: nằm trong khung 1100px */
.hero-news-inline__groupList{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  font-size: 18px;
  display: flex;
  flex-direction: column;
}

/* ✅ Item: grid 3 cột (bullet | title | date) -> bullet không bị chạy ra ngoài */
.hero-news-inline__item{
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  column-gap: 16px;

  padding: 0;
  border: 0;
  background: transparent;

  cursor: pointer;
  color: var(--text);

  font-size: 22px;
  line-height: 1.55;
}

/* ✅ Bullet nằm trong cột 1 */
.hero-news-inline__item::before{
  content: "•";
  display: block;
  grid-column: 1;
  font-size: 22px;
  line-height: 1;
  opacity: .95;
  transform: translateY(2px);
}

/* Title cột 2 */
.hero-news-inline__itemTitle{
  grid-column: 2;
  min-width: 0;
  text-align: left;
  font-size: 14.5px;
  color: var(--muted);
  /* nếu muốn xuống dòng: đổi normal */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-news-inline__month {
  margin-right: 3rem;
  display: none;
}

/* Focus keyboard */
.hero-news-inline__item:focus-visible{
  outline: 2px solid rgba(29,78,216,.35);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Mobile: cho phép title xuống dòng, date xuống dưới */
@media (max-width: 720px){
  .hero-news-inline__item{
    grid-template-columns: 22px 1fr;
    row-gap: 6px;
  }
  .hero-news-inline__itemTitle{
    white-space: normal;
  }

}