/*
 * News Tabs — horizontal category nav (news listing page).
 * Design source: Figma 407:50044 (desktop), 407:51616 (mobile).
 */

.iw-news-tabs {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #ffffff;
  font-family: inherit;
  color: #3d3d3d;
  -webkit-font-smoothing: antialiased;
}

.iw-news-tabs__list {
  max-width: var(--iw-container-max);
  margin: 0 auto;
  padding: 0 var(--iw-container-pad-x);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  /* Sites with many categories: tab row scrolls horizontally instead of
     wrapping. Hide the scrollbar visually but keep touch/wheel scroll. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.iw-news-tabs__list::-webkit-scrollbar { display: none; }

.iw-news-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Reserve the active state's 2px underline space on every tab so heights
     stay consistent and labels don't jump when the active tab changes. */
  padding: 18px 4px;
  border-bottom: 2px solid transparent;
  color: #3d3d3d;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  /* Don't let flex squeeze long labels; force them to overflow + scroll. */
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition: border-color 0.12s, color 0.12s;
}
.iw-news-tabs__tab:hover,
.iw-news-tabs__tab:focus-visible {
  color: var(--iw-accent, #4564ed);
  border-bottom-color: var(--iw-accent, #4564ed);
}

.iw-news-tabs__tab--active,
.iw-news-tabs__tab--active:hover {
  border-bottom-color: var(--iw-accent, #4564ed);
  color: var(--iw-accent, #4564ed);
}

.iw-news-tabs__label { display: inline-block; }

@media (max-width: 991px) {
  /* Edge-bleed scroll: container padding 0, first/last child mang margin =
     container-pad-x. Pattern này đồng nhất với t1/tab-filter, pdh-grid,
     features-row. Lý do: padding-right trên flex scroll container không
     extend scroll region → tab cuối bị cắt khi scroll hết. */
  .iw-news-tabs__list {
    padding: 0;
    gap: 12px;
    scroll-padding-left: var(--iw-container-pad-x);
  }
  .iw-news-tabs__list > .iw-news-tabs__tab:first-child {
    margin-left: var(--iw-container-pad-x);
  }
  .iw-news-tabs__list > .iw-news-tabs__tab:last-child {
    margin-right: var(--iw-container-pad-x);
  }

  .iw-news-tabs__tab {
    /* Mobile typography per Figma 407:51616: Semibold 14/20. */
    padding: 18px 4px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
  }
}