/**
 * MISTER FAST LiveMapChat WEB V3.5.3.3
 * News ticker animation hotfix.
 * Keeps ticker in the existing header strip, one line, always moving.
 */

/* Disable legacy separate ticker only. */
.mf353-news-ticker{display:none!important}
.mf218-web-header.mf353-header-with-ticker{
  height:auto!important;
  min-height:0!important;
  padding-bottom:0!important;
}

.mf16-workspace-header.mf3532-inline-news-header{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:12px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0 10px 0 18px!important;
  overflow:hidden!important;
  background:#fff!important;
  border-bottom:1px solid #dce7f4!important;
}

.mf3532-inline-news{
  flex:1 1 0!important;
  min-width:0!important;
  width:0!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  color:#173b6f!important;
  white-space:nowrap!important;
}

.mf3532-news-label{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding-right:12px!important;
  background:#fff!important;
  position:relative!important;
  z-index:2!important;
  font-size:14px!important;
  line-height:1!important;
  white-space:nowrap!important;
  color:#003da5!important;
}

.mf3532-news-viewport{
  position:relative!important;
  flex:1 1 0!important;
  min-width:0!important;
  width:0!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)!important;
}

.mf3532-news-track{
  position:absolute!important;
  left:100%!important;
  top:50%!important;
  width:max-content!important;
  max-width:none!important;
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1!important;
  transform:translate3d(0,-50%,0)!important;
  animation-name:mf3533TickerMove!important;
  animation-duration:34s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-play-state:running!important;
  will-change:transform!important;
}

.mf3532-news-track span,
.mf3532-news-track i,
.mf3532-news-track b{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

.mf3532-news-track i{
  font-style:normal!important;
  color:#b9c7da!important;
}

.mf3532-news-track b{color:#003da5!important}

.mf3532-inline-news:hover .mf3532-news-track{
  animation-play-state:paused!important;
}

.mf3532-inline-news-header .mf16-header-tools{
  position:static!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
  z-index:3!important;
}

@keyframes mf3533TickerMove{
  0%{transform:translate3d(0,-50%,0)}
  100%{transform:translate3d(calc(-100% - 100vw),-50%,0)}
}

/* Intentionally keep animation active even when OS Reduce Motion is enabled,
   because this strip is an explicitly requested live news ticker. */
@media (prefers-reduced-motion:reduce){
  .mf3532-news-track{
    animation-name:mf3533TickerMove!important;
    animation-duration:40s!important;
    animation-iteration-count:infinite!important;
    animation-play-state:running!important;
  }
  .mf3532-inline-news:hover .mf3532-news-track{
    animation-play-state:paused!important;
  }
}

@media (max-width:900px){
  .mf16-workspace-header.mf3532-inline-news-header{
    height:54px!important;
    min-height:54px!important;
    padding-left:10px!important;
    gap:8px!important;
  }
  .mf3532-news-label{
    font-size:12px!important;
    padding-right:7px!important;
  }
  .mf3532-news-track{
    font-size:12px!important;
    gap:10px!important;
    animation-duration:30s!important;
  }
}

@media (max-width:560px){
  .mf16-workspace-header.mf3532-inline-news-header{
    height:50px!important;
    min-height:50px!important;
    padding:0 6px 0 8px!important;
  }
  .mf3532-news-label b{font-size:0!important}
  .mf3532-news-label b::after{
    content:'ข่าว :'!important;
    font-size:11px!important;
  }
  .mf3532-inline-news-header .mf16-header-tools{gap:4px!important}
  .mf3532-news-track{animation-duration:25s!important}
}