/* student/home.css — trang chủ chung cho học sinh (student/index.html), Wave 6 (UI/UX pivot).
   Tự chứa, không phụ thuộc host/ hay shared/ui.css — cùng triết lý landing.css (token riêng,
   không đè lên hệ thống khác). Tông chủ đạo: xanh dương (nhất quán thương hiệu) + xanh lá
   (điểm nhấn "miễn phí"/"tham gia"), khác cổng giáo viên (vàng) để học sinh phân biệt rõ. */

:root {
  --sh-bg: #f7f9fc;
  --sh-surface: #ffffff;
  --sh-border: #e8ecf3;
  --sh-text: #1e2233;
  --sh-text-muted: #6b7280;
  --sh-blue: #2563eb;
  --sh-blue-dark: #1e3a8a;
  --sh-blue-weak: #eff6ff;
  --sh-green: #16a34a;
  --sh-green-dark: #14532d;
  --sh-green-weak: #eafaf0;
  --sh-purple-weak: #f3eeff;
  --sh-amber-weak: #fff6df;
  --sh-radius-lg: 20px;
  --sh-radius: 14px;
  --sh-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 10px rgba(16, 24, 40, 0.05);
  --sh-shadow-hover: 0 10px 28px rgba(16, 24, 40, 0.10);
  --sh-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--sh-bg); color: var(--sh-text); font-family: var(--sh-font); }
a { color: inherit; }

.sh-header { background: var(--sh-surface); border-bottom: 1px solid var(--sh-border); position: sticky; top: 0; z-index: 20; }
.sh-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.sh-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.sh-brand-icon { height: 32px; width: auto; }
.sh-brand-text { display: block; font-weight: 800; font-size: 17px; color: var(--sh-text); }
.sh-brand-sub { display: block; font-size: 11px; color: var(--sh-text-muted); }
.sh-nav { display: flex; gap: 20px; flex: 1; }
.sh-nav a { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--sh-text-muted); }
.sh-nav a:hover { color: var(--sh-blue); }
.sh-header-actions { display: flex; gap: 10px; flex-shrink: 0; }

.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  transition: filter 0.12s, box-shadow 0.12s;
}
.sh-btn:hover { filter: brightness(0.96); }
.sh-btn-block { width: 100%; padding: 13px 18px; font-size: 14.5px; }
.sh-btn-outline { background: var(--sh-surface); border: 1px solid var(--sh-border); color: var(--sh-text); }
.sh-btn-primary { background: var(--sh-blue); color: #fff; }
.sh-btn-primary:hover { background: var(--sh-blue-dark); }
.sh-btn-blue { background: var(--sh-blue); color: #fff; }
.sh-btn-blue:hover { background: var(--sh-blue-dark); }
.sh-btn-green { background: var(--sh-green); color: #fff; }

.sh-hero { max-width: 760px; margin: 0 auto; padding: 44px 24px 8px; text-align: center; }
.sh-hero h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.25; letter-spacing: -0.01em; }
.sh-hero-sub { margin: 0; font-size: 16px; color: var(--sh-text-muted); }

.sh-choice-row {
  max-width: 980px;
  margin: 32px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.sh-choice-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  padding: 26px;
  box-shadow: var(--sh-shadow);
  display: flex;
  flex-direction: column;
}
.sh-choice-card--green { background: linear-gradient(160deg, #eafaf0, #f2fdf6); border-color: #b9ecc9; }
.sh-choice-card--blue { background: linear-gradient(160deg, #eff6ff, #f3f8ff); border-color: #c7ddfd; }
.sh-choice-icon { font-size: 28px; margin-bottom: 10px; }
.sh-choice-card h2 { margin: 0 0 6px; font-size: 19px; }
.sh-choice-card > p { margin: 0 0 18px; font-size: 13.5px; color: var(--sh-text-muted); line-height: 1.5; }

.sh-join-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.sh-join-form input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  background: var(--sh-surface);
  font-size: 14.5px;
  font-family: inherit;
  color: var(--sh-text);
}
.sh-join-form input:focus { outline: 2px solid var(--sh-green); outline-offset: 1px; }
.sh-choice-banner {
  margin: auto 0 0;
  font-size: 12.5px;
  color: var(--sh-green-dark);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #b9ecc9;
  border-radius: var(--sh-radius);
  padding: 12px 14px;
  line-height: 1.5;
}

.sh-subject-row { display: flex; gap: 8px; margin-bottom: 16px; }
.sh-subject-btn {
  flex: 1;
  border: 1px solid var(--sh-border);
  background: var(--sh-surface);
  border-radius: 10px;
  padding: 12px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-text);
  cursor: pointer;
}
.sh-subject-btn:hover { border-color: var(--sh-blue); color: var(--sh-blue-dark); }
.sh-check-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-check-list li { font-size: 12.5px; color: var(--sh-text-muted); }

.sh-more { max-width: 1200px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
.sh-more h2 { margin: 0 0 8px; font-size: 24px; }
.sh-more-sub { margin: 0 0 28px; color: var(--sh-text-muted); font-size: 14.5px; }
.sh-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sh-more-card {
  display: block;
  text-align: left;
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-shadow);
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}
.sh-more-card:hover { box-shadow: var(--sh-shadow-hover); transform: translateY(-2px); }
.sh-more-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; margin-bottom: 10px; }
.sh-more-card--purple .sh-more-icon { background: var(--sh-purple-weak); }
.sh-more-card--green .sh-more-icon { background: var(--sh-green-weak); }
.sh-more-card--blue .sh-more-icon { background: var(--sh-blue-weak); }
.sh-more-card--amber .sh-more-icon { background: var(--sh-amber-weak); }
.sh-more-card h3 { margin: 0 0 4px; font-size: 15px; }
.sh-more-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--sh-text-muted); line-height: 1.45; }
.sh-more-link { font-size: 12.5px; font-weight: 700; color: var(--sh-blue); }

.sh-footer-tagline { text-align: center; padding: 40px 24px 48px; color: var(--sh-text-muted); font-size: 13.5px; }

@media (max-width: 760px) {
  .sh-nav { display: none; }
  .sh-hero h1 { font-size: 26px; }
  .sh-choice-row { grid-template-columns: 1fr; }
  .sh-more-grid { grid-template-columns: 1fr 1fr; }
  .sh-header-actions .sh-btn-outline { display: none; }
}