/* ==========================================================================
   Dải điểm nổi bật dưới băng chuyền hero (trang chủ) — thay dải chữ navy in hoa
   Tham khảo dải "Đối tác đồng hành" của SAPP: nền sáng liền mạch với section, mỗi mục là
   thẻ bo tròn có biểu tượng + mô tả ngắn, 2 mép mờ dần, chạy chậm (60 giây/vòng).
   Markup: .strip.strip--highlights > .strip-track > .strip-group ×2 (nhóm 2 aria-hidden, giống
   hệt nhóm 1) → dịch -50% (keyframes tickerScroll trong site-sections.css) là vòng liền mạch.
   Rê chuột → dừng (có sẵn); giảm chuyển động → đứng yên và kéo ngang được.
   ========================================================================== */

html body .strip.strip--highlights {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fe 100%);
  border-top: 1px solid #e5eaf5;
  border-bottom: 1px solid #e5eaf5;
  color: #1e3a8a;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
html body .strip--highlights .strip-track {
  gap: 0;
  width: max-content;
  padding: 16px 0;
  animation-duration: 60s;
}
/* Mỗi nhóm có khoảng cách cuối bằng khoảng cách giữa các thẻ → 2 nhóm bằng nhau tuyệt đối */
html body .strip--highlights .strip-group {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}
html body .strip--highlights .strip-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 18px 8px 8px;
  border: 1px solid #dbe3f3;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 42, 86, .06);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
html body .strip--highlights .strip-chip b { color: #1e3a8a; font-weight: 700; }
html body .strip--highlights .strip-chip__desc { color: #475569; }
html body .strip--highlights .strip-chip__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef2ff;
  color: #2b26fb;
}
html body .strip--highlights .strip-chip__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Báo chí đưa tin (2026-11-02): .strip--press = nhãn đứng yên bên trái + vùng thẻ chạy ngang ----
   Mỗi thẻ là <a> mở bài báo ở tab mới. Rê chuột hoặc Tab vào thẻ → dải dừng để đọc/bấm.
   Mép mờ dần chuyển từ cả dải sang riêng vùng chạy (nhãn không bị mờ).
   Tốc độ ~35px/giây (≈ tốc độ dải cũ): 17 thẻ dài hơn → thời lượng vòng dài hơn. */
html body .strip.strip--press {
  display: flex;
  align-items: center;
  -webkit-mask-image: none;
          mask-image: none;
}
html body .strip--press .strip-press__label {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 18px 0 clamp(16px, 2vw, 28px); /* thẳng lề trái header (28px) */
  border-right: 1px solid #dbe3f3;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body .strip--press .strip-press__label-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e40af;
  color: #fff;
}
html body .strip--press .strip-press__label-icon svg,
html body .strip--press .strip-chip__go {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body .strip--press .strip-press__label-icon svg { width: 21px; height: 21px; }
html body .strip--press .strip-press__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 94%, transparent 100%);
}
html body .strip--press .strip-track { animation-duration: 300s; }
html body .strip--press:focus-within .strip-track { animation-play-state: paused; }

html body .strip--press .strip-chip--press {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
/* Tiêu đề dài → 1 dòng, cắt "…" (đủ tiêu đề trong title + aria-label) */
html body .strip--press .strip-chip--press .strip-chip__desc {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .strip--press .strip-chip__go {
  flex: none;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  transition: color .2s, transform .2s;
}
html body .strip--press .strip-chip--press:hover,
html body .strip--press .strip-chip--press:focus-visible {
  border-color: #1e40af;
  box-shadow: 0 8px 22px rgba(30, 64, 175, .16);
  transform: translateY(-2px);
  outline: none;
}
html body .strip--press .strip-chip--press:hover .strip-chip__desc,
html body .strip--press .strip-chip--press:focus-visible .strip-chip__desc { color: #0a1330; }
html body .strip--press .strip-chip--press:hover .strip-chip__go,
html body .strip--press .strip-chip--press:focus-visible .strip-chip__go { color: #1e40af; transform: translate(2px, -2px); }
/* chừa chỗ cho thẻ nhích lên 2px khi rê chuột (vùng chạy có overflow: hidden) */
html body .strip--press .strip-track { padding-top: 18px; padding-bottom: 18px; }

@media (max-width: 600px) {
  html body .strip--press .strip-press__label { gap: 0; padding: 0 10px 0 12px; }
  html body .strip--press .strip-press__label > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html body .strip--press .strip-press__label-icon { width: 34px; height: 34px; }
  html body .strip--press .strip-chip--press .strip-chip__desc { max-width: 230px; }
  html body .strip--press .strip-track { padding-top: 14px; padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .strip.strip--press { overflow: hidden; }
  html body .strip--press .strip-press__viewport { overflow-x: auto; }
}

@media (max-width: 600px) {
  html body .strip--highlights .strip-track { padding: 12px 0; }
  html body .strip--highlights .strip-chip { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .strip.strip--highlights { overflow-x: auto; }
  html body .strip--highlights .strip-track { animation: none; }
  html body .strip--highlights .strip-group[aria-hidden="true"] { display: none; }
}
