/* Trang /ctv/. Nền chung ở assets/lite-base.css. */
.cv-hero {
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cv-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: start; padding-block: var(--s7) var(--s8); }
.cv-hero__text { padding-left: var(--s5); border-left: 2px solid var(--red); }
.cv-rates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); }
.cv-rates li { display: grid; gap: 2px; padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.cv-rates strong { font: 700 2.25rem/1 var(--font-display); color: var(--red); }
.cv-rates span { font-size: 0.875rem; color: var(--ink-soft); }
.cv-example { margin-top: var(--s4); color: var(--ink-soft); font-size: 0.9375rem; }
.cv-example:empty { display: none; }

.cv-panel { display: grid; gap: var(--s4); padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cv-panel__title { font-size: 1.5rem; }
.cv-result { display: grid; gap: var(--s2); padding: var(--s4); background: oklch(95% 0.04 150); border-radius: var(--radius-s); }
.cv-result__code { font: 700 2rem/1.1 var(--font-display); letter-spacing: 0.04em; }
.cv-result__link { width: 100%; font-size: 0.875rem; }
.cv-result__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cv-result__actions .btn { flex: 1 1 140px; }

.cv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s5); counter-reset: step; }
.cv-steps li { display: grid; gap: var(--s1); align-content: start; padding: var(--s4); border-top: 3px solid var(--red); background: var(--card); border-radius: var(--radius-s); counter-increment: step; }
.cv-steps strong::before { content: counter(step) ". "; color: var(--red); }
.cv-steps span { color: var(--ink-soft); font-size: 0.9375rem; }

.cv-note { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--red-tint); border-left: 3px solid var(--red); border-radius: var(--radius-s); font-size: 0.9375rem; max-width: 70ch; }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.kit__post { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s2); padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.kit__post h3 { font: 600 1rem/1.3 var(--font-body); }
.kit__post textarea { width: 100%; min-height: 180px; resize: vertical; font-size: 0.9375rem; line-height: 1.5; background: var(--paper); }
.kit__sub { margin-top: var(--s7); margin-bottom: var(--s3); }
.kit-links { display: grid; gap: var(--s2); }
.kit-links li { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.6fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); }
.kit-links div { display: grid; }
.kit-links input { width: 100%; font-size: 0.875rem; }
.kit-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.kit-photos li { display: grid; gap: var(--s2); }
.kit-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 4px solid var(--card); border-radius: var(--radius-s); box-shadow: var(--shadow); }

.cv-lookup { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s7); align-items: start; }
.cv-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cv-stats { display: grid; gap: var(--s3); }
.cv-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.cv-sum div { padding: var(--s3); background: var(--paper); border-radius: var(--radius-s); }
.cv-sum dt { font-size: 0.8125rem; color: var(--ink-soft); }
.cv-sum dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-table-wrap { overflow-x: auto; }
.cv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cv-table th, .cv-table td { padding: var(--s2) var(--s1); border-bottom: 1px solid var(--line); text-align: left; }
.cv-table td:nth-child(n+3), .cv-table th:nth-child(n+3) { text-align: right; }

@media (max-width: 900px) {
  .cv-hero__grid, .cv-lookup { grid-template-columns: 1fr; gap: var(--s6); }
  .cv-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cv-hero__text { padding-left: var(--s4); }
  .cv-rates, .cv-steps, .cv-row { grid-template-columns: 1fr; }
  .cv-panel { padding: var(--s4); }
  .kit { grid-template-columns: 1fr; }
  .kit-links li { grid-template-columns: 1fr auto; }
  .kit-links div { grid-column: 1 / -1; }
  .cv-sum dd { font-size: 0.9375rem; }
}