/* ============================================================
   site.css — riêng cho trang chủ (index.html).
   Chỉ dùng var(--*) từ tokens.css.
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.topbar-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-base);
  flex: none;
}
.brand-mark {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.brand-sub { color: var(--c-text-3); font-weight: var(--fw-normal); font-size: var(--fs-sm); }

.tabs {
  display: flex; gap: var(--sp-1);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--c-text-2);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabs a:hover { background: var(--c-surface-2); color: var(--c-text); }
.tabs a[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent); }

/* Hàng 2 trên màn hẹp: tab xuống dòng riêng cho đỡ chật */
@media (max-width: 860px) {
  .topbar-inner { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
}

.page {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}

.page-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-bottom: var(--sp-6);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.page-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-text-3); }

/* Thanh tiến độ tick của tab hiện tại */
.tick-bar {
  display: none;
  align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.tick-bar.is-on { display: flex; }
.tick-track {
  flex: 1; height: 6px;
  background: var(--c-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.tick-fill {
  height: 100%; width: 0;
  background: var(--c-accent);
  border-radius: var(--radius-full);
  transition: width var(--dur) var(--ease);
}
.tick-num { color: var(--c-text-2); font-variant-numeric: tabular-nums; flex: none; }

.skeleton {
  height: 1em; margin-bottom: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--radius-sm);
  animation: pulse 1.2s var(--ease) infinite;
}
.skeleton:nth-child(2) { width: 80%; }
.skeleton:nth-child(3) { width: 60%; }
@keyframes pulse { 50% { opacity: .45; } }

.site-foot {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}