/* ==============================================
   LAYOUT: Container + ghit-* utilities
   ============================================== */

/* ── Container ── */
.ghit-wrap,
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Background glow (fixed decoration) ── */
.ghit-bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 600px at 10% 0%, rgba(91,33,182,.08) 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 90% 20%, rgba(37,99,235,.07) 0%, transparent 70%);
}

/* ── Main content area ── */
.ghit-main {
  position: relative;
  z-index: 1;
}

/* ── Section container ── */
.ghit-section,
.ghit-section-hero {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Section head row (label+title / viewall) ── */
.ghit-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.ghit-section-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin: 4px 0 0;
}

/* ── Label chip ── */
.ghit-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.ghit-label--teal { color: var(--color-teal); }
.ghit-label--purple { color: var(--color-purple); }

/* ── Label + divider row ── */
.ghit-label-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ghit-label-row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── View-all link ── */
.ghit-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-purple);
  white-space: nowrap;
  flex-shrink: 0;
}
.ghit-viewall svg { transition: transform var(--t-fast); }
.ghit-viewall:hover svg { transform: translateX(4px); }

/* ── Card base ── */
.ghit-card {
  transition: box-shadow var(--t-normal), transform var(--t-normal);
  will-change: transform;
}
.ghit-card:hover {
  box-shadow: 0 20px 48px -16px rgba(15,23,42,.18);
  transform: translateY(-2px);
}

/* ── Title link ── */
.ghit-ttl { transition: color var(--t-fast); }
.ghit-ttl:hover { color: var(--color-purple) !important; }

/* ── 3-col article grid ── */
.ghit-grid3 {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 24px;
  align-items: start;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ── Layout: classic inner wrapper ── */
.inner-wrapper {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
#primary { min-width: 0; }
#sidebar-primary { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 16px); }

@media (max-width: 1180px) {
  .ghit-grid3 { grid-template-columns: 220px 1fr; }
  /* Không ẩn cả .ghit-rail — chỉ ẩn có chọn lọc bên trong (xem single.css:
     .ghit-rail-series/.ghit-rail-allseries/.ghit-app-promo), giữ lại
     "Gợi ý tiếp theo" cho mobile. Cho rail xuống hàng riêng, full-width. */
  .ghit-grid3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ghit-grid3 { grid-template-columns: 1fr; }
  .ghit-grid3 > :first-child { display: none; }
  .inner-wrapper { grid-template-columns: 1fr; }
  #sidebar-primary { position: static; }
}
@media (max-width: 600px) {
  .ghit-wrap, .container, .ghit-section, .ghit-section-hero, .ghit-grid3 { padding-inline: 16px; }
}