.lkn-hero { padding: var(--space-6) var(--space-4) var(--space-4); text-align: center; max-width: 760px; margin: 0 auto; }
.lkn-hero__eyebrow { color: var(--color-accent); font-weight: 700; font-size: var(--text-body-sm); margin-bottom: var(--space-2); }
.lkn-hero h1 { font-family: var(--font-family-display); font-size: var(--text-h1); margin-bottom: var(--space-3); }
.lkn-hero p { color: var(--color-text-muted); font-size: var(--text-body-lg); }

.lkn-more { padding: var(--space-4) var(--space-4) var(--space-6); }
.lkn-section-title { font-family: var(--font-family-display); font-size: var(--text-h2); margin: var(--space-2) var(--space-4) var(--space-3); }

/* ---------- HÔM NAY BẠN NÊN LUYỆN GÌ? ---------- */
.lkn-today { padding: 0 var(--space-4); margin-bottom: var(--space-2); }
.lkn-today__card {
  background: var(--gradient-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-3);
}
.lkn-today__card--guest { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-1); }
.lkn-today__card--guest p { color: var(--color-text-muted); }
.lkn-today__eyebrow { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-bottom: var(--space-2); }
.lkn-today__main { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.lkn-today__icon { font-size: 2.4rem; flex-shrink: 0; }
.lkn-today__title { font-family: var(--font-family-display); font-size: var(--text-h3); margin-bottom: 4px; }
.lkn-today__sub { font-size: var(--text-body-sm); opacity: .9; }
.lkn-today__card p { margin-bottom: var(--space-3); }
.lkn-today__card .btn-primary { background: #fff; color: var(--color-primary); }
.lkn-today__card .btn-primary:hover { background: rgba(255,255,255,0.9); }
.lkn-today__card--guest .btn-primary { background: var(--color-primary); color: var(--color-text-on-primary); }

/* ---------- DASHBOARD 6 KỸ NĂNG ---------- */
.lkn-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}
.skill-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-1);
}
.skill-card__head { display: flex; align-items: center; gap: var(--space-2); }
.skill-card__icon { font-size: 1.6rem; }
.skill-card h3 { font-family: var(--font-family-display); font-size: var(--text-h4); margin: 0; }
.skill-card__desc { color: var(--color-text-muted); font-size: var(--text-body-sm); margin: 0; }

.skill-card__status--muted { color: var(--color-text-faint); font-size: var(--text-body-sm); font-style: italic; }

.skill-card__mastery { display: flex; align-items: center; gap: var(--space-2); }
.skill-card__bar { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-alt); overflow: hidden; }
.skill-card__bar-fill { height: 100%; background: var(--gradient-primary); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-standard); }
.skill-card__pct { font-family: var(--font-family-mono); font-weight: 700; font-size: var(--text-body-sm); min-width: 38px; text-align: right; }

.skill-card__level {
  display: inline-block; align-self: flex-start;
  font-size: var(--text-caption); font-weight: 700;
  padding: 2px 10px; border-radius: var(--radius-full);
}
.skill-card__level--weak { background: var(--color-error-bg); color: var(--color-error); }
.skill-card__level--improving { background: var(--color-warning-bg); color: var(--color-warning); }
.skill-card__level--decent { background: var(--color-primary-soft); color: var(--color-primary); }
.skill-card__level--good { background: var(--color-success-bg); color: var(--color-success); }

.skill-card__cta { margin-top: auto; }
.skill-card__secondary { font-size: var(--text-body-sm); color: var(--color-primary); font-weight: 600; }

@media (max-width: 480px) {
  .lkn-today__main { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ---------- LUYỆN NHANH 5 PHÚT + LỖI CỦA TÔI ---------- */
.lkn-quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-5);
}
.lkn-quick-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}
.lkn-quick-card--accent { background: var(--gradient-accent); color: #fff; border: none; }
.lkn-quick-card--accent p { color: rgba(255,255,255,0.9); }
.lkn-quick-card--accent .btn-primary { background: #fff; color: var(--color-accent); }
.lkn-quick-card__icon { font-size: 1.8rem; margin-bottom: var(--space-1); }
.lkn-quick-card__title { font-family: var(--font-family-display); font-size: var(--text-h4); margin-bottom: var(--space-2); }
.lkn-quick-card p { font-size: var(--text-body-sm); margin-bottom: var(--space-3); color: var(--color-text-muted); }