/* Forum index, thread list (XenForo structItem table) and pagination. */

/* ---------- node / forum list ---------- */
.node-list { list-style: none; margin: 0; padding: 0; }
.node-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.node-row:last-child { border-bottom: 0; }
.node-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--block-header-bg);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: calc(15px * var(--ui-scale));
}
.node-main { flex: 1 1 auto; min-width: 0; }
.node-title { font-size: calc(17px * var(--ui-scale)); font-weight: var(--fw-bold); }
.node-title a { color: var(--link); }
:root[data-theme="dark"] .node-title a { color: var(--text); }
.node-title a:hover { color: var(--link-hover); }
.node-desc { font-size: calc(13px * var(--ui-scale)); color: var(--dimmed); margin-top: 2px; }
.node-stats {
  flex: 0 0 auto;
  font-size: calc(12px * var(--ui-scale));
  color: var(--dimmed);
  text-align: right;
  min-width: 120px;
}
.node-stats strong { color: var(--text); font-weight: var(--fw-bold); }
.node-children {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 4px;
  border-left: 2px solid var(--border);
}
.node-children li { padding: 4px 0 4px 10px; font-size: calc(15px * var(--ui-scale)); }

/* ---------- thread list (XenForo structItem table) ---------- */
.structItemContainer { list-style: none; margin: 0; padding: 0; width: 100%; }
.structItemContainer-group { display: block; }
.structItem {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-faint);
  list-style: none;
  margin: 0;
  padding: 0;
}
.structItemContainer > .structItem:first-child,
.structItemContainer > .structItemContainer-group:first-child > .structItem:first-child { border-top: 0; }
.structItem-cell {
  display: table-cell;
  vertical-align: top;
  padding: 10px 8px;
}
.structItem-cell--icon { width: 52px; }
.structItem-cell--iconEnd { width: 40px; padding-left: 4px; }
.structItem-cell--iconEnd .structItem-iconContainer { padding-top: 6px; }
.structItem-cell--meta { width: 135px; }
.structItem-cell--latest { width: 190px; text-align: right; }
.structItem-cell--latest a { color: var(--link); }
:root[data-theme="dark"] .structItem-cell--latest a { color: var(--text); }
.structItem-cell--latest a:hover { color: var(--link-hover); }
.structItem-iconContainer { position: relative; }
.structItem-iconContainer .avatar { display: block; width: 36px; height: 36px; }
.structItem-iconContainer .avatar--xxs { width: 24px; height: 24px; }

.structItem-title { font-size: calc(16px * var(--ui-scale)); font-weight: 400; margin: 0; padding: 0; line-height: 1.35; }
.structItem-title .label { font-weight: 400; }
.structItem-title a { color: var(--link); }
:root[data-theme="dark"] .structItem-title a { color: var(--text); }
.structItem-title a:hover { color: var(--link-hover); }
/* Unread threads are bold on voz.vn; reading the thread clears it (API is_unread). */
.structItem--thread.is-unread .structItem-title,
.structItem--thread.is-unread .structItem-title a { font-weight: var(--fw-bold); }
.structItem--thread.is-unread .structItem-title .label { font-weight: 400; }
.structItemContainer-group--sticky .structItem-title a { color: #ff6600; }
:root[data-theme="dark"] .structItemContainer-group--sticky .structItem-title a { color: #ff8a3d; }

.structItem-minor { font-size: calc(12px * var(--ui-scale)); color: var(--dimmed); }
.structItem-minor a { color: inherit; text-decoration: none; }
.structItem-minor a:hover { text-decoration: underline; }
.structItem-parts { list-style: none; margin: 0; padding: 0; display: inline; }
.structItem-parts > li { display: inline; margin: 0; padding: 0; }
.structItem-parts > li:nth-child(even) { color: var(--dimmed-2); }
.structItem-parts > li::before { content: "\00B7\20"; }
.structItem-parts > li:first-child::before { content: ""; display: none; }

.structItem-pageJump { margin-left: 8px; font-size: calc(12px * var(--ui-scale)); }
.structItem-pageJump a {
  color: var(--dimmed-2);
  background: var(--content-bg-alt);
  border: 1px solid var(--border);
  text-decoration: none;
  border-radius: 2px;
  padding: 0 3px;
  opacity: .5;
  transition: all .25s ease;
}
.structItem:hover .structItem-pageJump a { opacity: 1; }
.structItem-pageJump a:hover { text-decoration: none; background: var(--content-bg); }

.structItem-statuses { list-style: none; margin: 0; padding: 0; float: right; }
.structItem-statuses > li { float: left; margin-left: 8px; }
.structItem-status {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  color: var(--dimmed);
}
.structItem-status--sticky {
  width: .75em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M306.5 186.6l-5.7-42.6H328c13.2 0 24-10.8 24-24V24c0-13.2-10.8-24-24-24H56C42.8 0 32 10.8 32 24v96c0 13.2 10.8 24 24 24h27.2l-5.7 42.6C29.6 219.4 0 270.7 0 328c0 13.2 10.8 24 24 24h144v104c0 .9.1 1.7.4 2.5l16 48c2.4 7.3 12.8 7.3 15.2 0l16-48c.3-.8.4-1.7.4-2.5V352h144c13.2 0 24-10.8 24-24 0-57.3-29.6-108.6-77.5-141.4zM50.5 304c8.3-38.5 35.6-70 71.5-87.8L138 96H80V48h224v48h-58l16 120.2c35.8 17.8 63.2 49.4 71.5 87.8z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M306.5 186.6l-5.7-42.6H328c13.2 0 24-10.8 24-24V24c0-13.2-10.8-24-24-24H56C42.8 0 32 10.8 32 24v96c0 13.2 10.8 24 24 24h27.2l-5.7 42.6C29.6 219.4 0 270.7 0 328c0 13.2 10.8 24 24 24h144v104c0 .9.1 1.7.4 2.5l16 48c2.4 7.3 12.8 7.3 15.2 0l16-48c.3-.8.4-1.7.4-2.5V352h144c13.2 0 24-10.8 24-24 0-57.3-29.6-108.6-77.5-141.4zM50.5 304c8.3-38.5 35.6-70 71.5-87.8L138 96H80V48h224v48h-58l16 120.2c35.8 17.8 63.2 49.4 71.5 87.8z'/%3E%3C/svg%3E") no-repeat center;
}
.structItem-status--locked {
  width: .875em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 192h-32v-46.6C368 65.8 304 .2 224.4 0 144.8-.2 80 64.5 80 144v48H48c-26.5 0-48 21.5-48 48v224c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V240c0-26.5-21.5-48-48-48zm-272-48c0-52.9 43.1-96 96-96s96 43.1 96 96v48H128v-48zm272 320H48V240h352v224z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 192h-32v-46.6C368 65.8 304 .2 224.4 0 144.8-.2 80 64.5 80 144v48H48c-26.5 0-48 21.5-48 48v224c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V240c0-26.5-21.5-48-48-48zm-272-48c0-52.9 43.1-96 96-96s96 43.1 96 96v48H128v-48zm272 320H48V240h352v224z'/%3E%3C/svg%3E") no-repeat center;
}

.structItem-snippet {
  font-size: calc(13px * var(--ui-scale));
  color: var(--dimmed-2);
  margin: 4px 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* XenForo "pairs" — label left, value right, aligned across rows. */
.pairs { padding: 0; margin: 0; overflow: hidden; }
.pairs--spaced + .pairs { margin-top: 6px; }
.pairs > dt { padding: 0; margin: 0; color: var(--dimmed); }
.pairs > dt::after { content: ":"; }
.pairs > dd { padding: 0; margin: 0; }
.pairs--justified::before,
.pairs--justified::after { content: " "; display: table; }
.pairs--justified::after { clear: both; }
.pairs--justified > dt { float: left; max-width: 100%; margin-right: 6px; }
.pairs--justified > dd { float: right; text-align: right; max-width: 100%; }

/* ---------- pagination ---------- */
.pageNav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  font-size: calc(14px * var(--ui-scale));
}
.pageNav-main {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pageNav-page { display: block; }
.pageNav a,
.pageNav span.current,
.pageNav-jumpBtn {
  display: inline-block;
  min-width: 30px;
  padding: 5px 9px;
  text-align: center;
  border: 0;
  border-radius: 2px;
  background: var(--surface-accent);
  color: var(--link);
  font: inherit;
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.4;
  cursor: pointer;
}
.pageNav span.current {
  background: var(--block-header-bg);
  color: var(--on-dark);
  font-weight: var(--fw-bold);
  cursor: default;
}
:root[data-theme="dark"] .pageNav a,
:root[data-theme="dark"] .pageNav-jumpBtn,
:root[data-theme="dark"] .pageNav-scrollBtn { color: var(--text); }
.pageNav a:hover,
.pageNav-jumpBtn:hover { background: var(--surface-accent-hover); color: var(--link-hover); }
.pageNav-jump { font-weight: var(--fw-bold); }
.pageNav-skip { display: block; }
.pageNav-jumpBtn { min-width: 30px; }
.pageNav-input {
  width: 62px;
  padding: 5px 6px;
  border: 1px solid var(--block-header-bg);
  border-radius: 2px;
  font: inherit;
  font-size: calc(14px * var(--ui-scale));
  text-align: center;
  color: var(--text);
  background: var(--surface);
}
.pageNav-extra { margin-left: auto; display: inline-flex; align-items: center; }

/* "Cuộn liên tục" opt-in button, only rendered in the manual mode.
   Icon-only, and wears the same colours as the pager links beside it. */
.pageNav-scrollBtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: 2px;
  background: var(--surface-accent);
  color: var(--link);
  font: inherit;
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.4;
  cursor: pointer;
}
.pageNav-scrollIcon { display: inline-block; line-height: 1; }
.pageNav-scrollBtn:hover:not(:disabled) { background: var(--surface-accent-hover); color: var(--link-hover); }
.pageNav-scrollBtn.is-active { background: var(--block-header-bg); color: var(--on-dark); cursor: default; }
.pageNav-scrollBtn.is-active .pageNav-scrollIcon { animation: infinite-scroll-nudge 1s ease-in-out infinite; }
@keyframes infinite-scroll-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pageNav-scrollBtn.is-active .pageNav-scrollIcon { animation: none; }
}

/* Sentinel for continuous scrolling: renders the next-page status and is the
   element the IntersectionObserver watches. Zero extra chrome when idle. */
.infinite-sentinel { display: flex; justify-content: center; padding: 10px 12px; font-size: calc(12px * var(--ui-scale)); color: var(--chrome-dimmed); }
.infinite-sentinel[data-state="busy"] .infinite-status::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--border);
  border-top-color: var(--link);
  border-radius: 50%;
  animation: infinite-spin .7s linear infinite;
}
.infinite-sentinel[data-state="error"] { color: var(--danger-text); }
@keyframes infinite-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .infinite-sentinel[data-state="busy"] .infinite-status::before { animation: none; }
}

/* Floating "stop continuous scroll" control: a round icon-only button pinned to the right
   edge, lifted off the bottom so it clears mobile browser chrome and the pager. Only
   rendered while scrolling is armed. */
.infinite-stop {
  position: fixed;
  right: 16px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--block-header-bg);
  color: var(--on-dark);
  font: inherit;
  font-size: calc(16px * var(--ui-scale));
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transition: background-color .15s ease, transform .15s ease, opacity .2s ease;
}
/* Hidden while scrolling down: still focusable/clickable for keyboard and assistive tech,
   just not painted, so a scroll never yanks the control out from under a screen reader. */
.infinite-stop.is-hidden {
  opacity: 0;
  transform: translateY(8px) scale(.9);
  pointer-events: none;
}
.infinite-stop:hover { background: var(--block-header-hover); }
.infinite-stop:active { transform: scale(.94); }
.infinite-stop:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; }
.infinite-stop.is-hidden:focus-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .infinite-stop { transition: none; }
  .infinite-stop:active { transform: none; }
  .infinite-stop.is-hidden { transform: none; }
}
/* Narrow screens: keep it clear of the pager and thumb reach. */
@media (max-width: 620px) {
  .infinite-stop { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: 38px; height: 38px; }
}
/* Narrow screens: the pager already wraps, but with the optional scroll button it can
   get crowded. Tighten the cells and drop the numbers farthest from the current page so
   ‹ Trước / numbers / Sau › / button still fit on one line. */
@media (max-width: 620px) {
  .pageNav { padding: 8px 6px; gap: 3px; }
  .pageNav a,
  .pageNav span.current,
  .pageNav-jumpBtn { min-width: 26px; padding: 4px 6px; font-size: calc(13px * var(--ui-scale)); }
  .pageNav-jump { padding: 4px 6px; font-size: calc(13px * var(--ui-scale)); }
  .pageNav-scrollBtn { min-width: 26px; min-height: 26px; padding: 4px 6px; font-size: calc(13px * var(--ui-scale)); }
  .pageNav-main { gap: 1px; }
}
/* Very narrow: drop the pages two steps out, but always keep the first page, the last page,
   the current page's immediate neighbours and the "…" jump cell. Hiding by position
   (nth-child) used to leave only the current number, because the "…" cell shifted every
   index and the last page was never one of the two kept cells. */
@media (max-width: 400px) {
  .pageNav-page--far { display: none; }
}

.pageNav a.pageNav-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0;
  background: none;
  font-size: calc(13px * var(--ui-scale));
  color: var(--nav-fg);
}
.pageNav a.pageNav-author:hover { background: none; color: var(--on-dark); }
.pageNav-author svg { flex: 0 0 auto; opacity: .8; }