/* Ô thông báo khẩn trên thanh đầu trang máy tính (bms-topbar-alerts.js, anh Hiệp 29/10/2026).
   Nằm giữa cây "BMS / Module / Tab" và ô tìm kiếm (ô tìm kiếm thu gọn 240px). Cao 40px r8 như nút máy tính,
   nút trong ô 32px r6. Vàng = nhắc, đỏ = khẩn (còn ≤ 30 phút hoặc Thông báo nội bộ loại Khẩn). Điện thoại ẩn. */
.topbar-alerts[hidden] { display: none !important; }
html.bms-phone-v2 .topbar-alerts { display: none !important; }

@media (min-width: 901px) {
  html:not(.bms-phone-v2) body.bms-opendesign-v8 .topbar .shell-global-search:not(#\#) { width: 240px; flex: 0 0 240px; margin-left: auto; }
  html:not(.bms-phone-v2) body.bms-opendesign-v8 .topbar .topbar-context { flex: 0 0 auto; }

  html:not(.bms-phone-v2) .topbar-alerts {
    --tba-bg: #FFF8EB; --tba-line: #F6CF8E; --tba-ink: #7A4B00; --tba-tag: #D97706;
    container-type: inline-size;
    display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; height: 40px; margin: 0 16px 0 24px; padding: 0 6px 0 4px;
    border: 1px solid var(--tba-line); border-radius: 8px; background: var(--tba-bg); color: var(--tba-ink);
    font: 500 14px/1 Roboto, system-ui, sans-serif; box-sizing: border-box; overflow: hidden;
  }
  html:not(.bms-phone-v2) .topbar-alerts[data-tone="urgent"] { --tba-bg: #FEF2F2; --tba-line: #F8B4B4; --tba-ink: #8A1C1C; --tba-tag: #DC2626; }

  .topbar-alerts .tba-tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 6px; background: var(--tba-tag); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .01em; }
  .topbar-alerts .tba-tag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .topbar-alerts[data-tone="urgent"] .tba-tag { animation: tba-pulse 1.6s ease-in-out infinite; }

  .topbar-alerts .tba-text { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
  .topbar-alerts .tba-run { display: inline-flex; gap: 48px; }
  .topbar-alerts .tba-text:not(.is-running) .tba-run > span { display: block; overflow: hidden; text-overflow: ellipsis; }
  .topbar-alerts .tba-text.is-running { mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .topbar-alerts .tba-text.is-running .tba-run { animation: tba-marquee var(--tba-duration, 12s) linear infinite; }
  .topbar-alerts:hover .tba-text.is-running .tba-run { animation-play-state: paused; }
  .topbar-alerts .tba-text em { font-style: normal; font-weight: 700; }

  .topbar-alerts .tba-actions, .topbar-alerts .tba-picks { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
  .topbar-alerts .tba-btn { height: 32px; padding: 0 12px; border: 1px solid var(--tba-tag); border-radius: 6px; background: #fff; color: var(--tba-ink); font: 600 13px/1 Roboto, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
  .topbar-alerts .tba-btn:hover { background: var(--tba-tag); color: #fff; }
  .topbar-alerts .tba-btn.is-ghost { border-color: var(--tba-line); background: transparent; }
  .topbar-alerts .tba-btn.is-ghost:hover { border-color: var(--tba-tag); background: #fff; color: var(--tba-ink); }
  .topbar-alerts .tba-btn:disabled { opacity: .55; cursor: progress; }
  .topbar-alerts .tba-compact { display: none; background: var(--tba-tag); color: #fff; }
  @container (max-width: 620px) {
    .topbar-alerts .tba-picks { display: none; }
    .topbar-alerts .tba-compact { display: inline-block; }
  }
  @container (max-width: 300px) { .topbar-alerts .tba-text { display: none; } }

  .topbar-alerts .tba-pager { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: var(--tba-ink); font: 600 12px/1 Roboto, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .topbar-alerts :where(button):is(.tba-pager button, .tba-close), .topbar-alerts :where(.tba-close):is(.tba-pager button, .tba-close) { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
  .topbar-alerts :where(button):is(.tba-pager button, .tba-close):hover, .topbar-alerts :where(.tba-close):is(.tba-pager button, .tba-close):hover { background: rgba(0, 0, 0, .06); }
  .topbar-alerts :is(.tba-pager, .tba-close) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .topbar-alerts .tba-close { flex: 0 0 auto; color: var(--tba-ink); opacity: .7; }
  .topbar-alerts :where(button):is(button):focus-visible { outline: 2px solid #0757B8; outline-offset: 1px; }
}

@keyframes tba-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tba-distance, 400px))); } }
@keyframes tba-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); } 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) {
  .topbar-alerts .tba-text.is-running .tba-run, .topbar-alerts[data-tone="urgent"] .tba-tag { animation: none; }
}

/* Vừa báo cơm xong: xanh, có nút Chọn lại (29/10/2026). Nút nơi đang chọn khi chọn lại thì tô đặc. */
@media (min-width: 901px) {
  html:not(.bms-phone-v2) .topbar-alerts[data-tone="ok"] { --tba-bg: #ECFDF3; --tba-line: #A6E3C0; --tba-ink: #0F5132; --tba-tag: #15803D; }
  .topbar-alerts .tba-btn[aria-pressed="true"] { background: var(--tba-tag); color: #fff; }
}