/* SGK v2.3.79 · Five-grade identity + route-lock polish
   Grade 3 = blue · Grade 4 = green · Grade 6 = orange · Grade 8 = purple · Grade 9 = rose (preview).
   Grade 9 added 2026-10-22: without it, html[data-sgk-grade="9"] had no --grade-accent,
   leaving .primary buttons ("Bắt đầu ôn") white-on-white.
   Visual-only overrides; shared SGK layout and learning functions are unchanged. */

html[data-sgk-grade="3"]{
  --grade-accent:#1d4ed8;--grade-dark:#1e3a8a;--grade-soft:#eff6ff;--grade-soft-2:#dbeafe;--grade-line:#93c5fd;--grade-ink:#1e40af;
}
html[data-sgk-grade="4"]{
  --grade-accent:#047857;--grade-dark:#065f46;--grade-soft:#ecfdf5;--grade-soft-2:#d1fae5;--grade-line:#6ee7b7;--grade-ink:#065f46;
}
html[data-sgk-grade="6"]{
  --grade-accent:#b45309;--grade-dark:#92400e;--grade-soft:#fff7ed;--grade-soft-2:#ffedd5;--grade-line:#fdba74;--grade-ink:#9a3412;
}
html[data-sgk-grade="8"]{
  --grade-accent:#6d28d9;--grade-dark:#5b21b6;--grade-soft:#f5f3ff;--grade-soft-2:#ede9fe;--grade-line:#c4b5fd;--grade-ink:#5b21b6;
}
html[data-sgk-grade="9"]{
  --grade-accent:#be185d;--grade-dark:#9d174d;--grade-soft:#fdf2f8;--grade-soft-2:#fce7f3;--grade-line:#f9a8d4;--grade-ink:#9d174d;
}

/* The grade picker itself is permanently colour-coded even on the general /sgk page. */
.grade-btn[data-grade="3"]{background:#eff6ff!important;border-color:#93c5fd!important;color:#1e40af!important}
.grade-btn[data-grade="3"] small{color:#3b65a7!important}
.grade-btn[data-grade="3"].active{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important}
.grade-btn[data-grade="3"].active small{color:#dbeafe!important}

.grade-btn[data-grade="4"]{background:#ecfdf5!important;border-color:#6ee7b7!important;color:#065f46!important}
.grade-btn[data-grade="4"] small{color:#34725e!important}
.grade-btn[data-grade="4"].active{background:#047857!important;border-color:#047857!important;color:#fff!important}
.grade-btn[data-grade="4"].active small{color:#d1fae5!important}

.grade-btn[data-grade="6"]{background:#fff7ed!important;border-color:#fdba74!important;color:#9a3412!important}
.grade-btn[data-grade="6"] small{color:#9a5b31!important}
.grade-btn[data-grade="6"].active{background:#b45309!important;border-color:#b45309!important;color:#fff!important}
.grade-btn[data-grade="6"].active small{color:#ffedd5!important}

.grade-btn[data-grade="8"]{background:#f5f3ff!important;border-color:#c4b5fd!important;color:#5b21b6!important}
.grade-btn[data-grade="8"] small{color:#7455a7!important}
.grade-btn[data-grade="8"].active{background:#6d28d9!important;border-color:#6d28d9!important;color:#fff!important}
.grade-btn[data-grade="8"].active small{color:#ede9fe!important}

.grade-btn[data-grade="9"]{background:#fdf2f8!important;border-color:#f9a8d4!important;color:#9d174d!important}
.grade-btn[data-grade="9"] small{color:#a34a78!important}
.grade-btn[data-grade="9"].active{background:#be185d!important;border-color:#be185d!important;color:#fff!important}
.grade-btn[data-grade="9"].active small{color:#fce7f3!important}

/* Strong but calm page identity for the selected grade. */
html[data-sgk-grade] body{
  background:linear-gradient(180deg,var(--grade-soft) 0,#eef3f1 260px,#e6efea 620px)!important;
}
html[data-sgk-grade] .ribbon,
html[data-sgk-grade] .catalog-status{
  background:var(--grade-dark)!important;color:#fff!important;
}
html[data-sgk-grade] .catalog-status span{color:#fff!important;opacity:.86}
html[data-sgk-grade] .catalog-card{
  background:linear-gradient(135deg,#fff 0%,var(--grade-soft) 74%,var(--grade-soft-2) 100%)!important;
  border-color:var(--grade-line)!important;
}
html[data-sgk-grade] .hero-main{
  background:linear-gradient(135deg,#fff 0%,var(--grade-soft) 100%)!important;
  border-color:var(--grade-line)!important;
}
html[data-sgk-grade] .topbar .pill,
html[data-sgk-grade] .pill{
  background:var(--grade-soft-2)!important;border-color:var(--grade-line)!important;color:var(--grade-ink)!important;
}
html[data-sgk-grade] .tabs{background:var(--grade-soft)!important;border-color:var(--grade-line)!important}
html[data-sgk-grade] .tabs button.active,
html[data-sgk-grade] .primary,
html[data-sgk-grade] .filters button.active,
html[data-sgk-grade] .lesson-map button.active .lesson-enter,
html[data-sgk-grade] .lesson-status-current .lesson-state,
html[data-sgk-grade] .karaoke-card .karaoke-controls .primary,
html[data-sgk-grade] .karaoke-card .karaoke-speed button.active,
html[data-sgk-grade] .teacher-grade .primary{
  background:var(--grade-accent)!important;border-color:var(--grade-accent)!important;color:#fff!important;
}
html[data-sgk-grade] .tabs button.lesson-focus,
html[data-sgk-grade] .lesson-map button.active,
html[data-sgk-grade] .lesson-map button.lesson-status-current{
  background:linear-gradient(135deg,var(--grade-soft-2),#fff)!important;border-color:var(--grade-line)!important;color:var(--grade-ink)!important;
}
html[data-sgk-grade] .lesson-enter,
html[data-sgk-grade] .lesson-callout,
html[data-sgk-grade] .lesson-scope-notice,
html[data-sgk-grade] .lesson-source-badge,
html[data-sgk-grade] .lesson-source-mini{
  background:var(--grade-soft)!important;border-color:var(--grade-line)!important;color:var(--grade-ink)!important;
}
html[data-sgk-grade] .bar i{background:var(--grade-accent)!important}
html[data-sgk-grade] .unit-select:focus,
html[data-sgk-grade] input:focus,
html[data-sgk-grade] textarea:focus{
  border-color:var(--grade-accent)!important;box-shadow:0 0 0 3px rgba(62,92,120,.16)!important;
}

/* The grade-specific student URL shows one grade only. */
.grade-picker.grade-route-locked{
  display:grid!important;
  grid-template-columns:minmax(180px,320px) minmax(220px,1fr)!important;
  align-items:stretch!important;
  gap:10px!important;
}
.grade-picker.grade-route-locked .grade-btn.route-locked{
  opacity:1!important;cursor:default!important;min-height:66px!important;
}
.grade-route-note{
  display:flex;align-items:center;padding:12px 14px;border:1px solid var(--grade-line);
  border-radius:14px;background:var(--grade-soft);color:var(--grade-ink);font-weight:800;line-height:1.45;
}
html[data-sgk-grade-locked="1"] .catalog-head .sub:after{
  content:" · Khối đã được khóa theo đường dẫn riêng.";
  color:var(--grade-ink);font-weight:800;
}

/* Login and teacher-assignment surfaces inherit the same grade identity. */
html[data-sgk-grade] .vnn-sgk-login-card{border-color:var(--grade-line)!important}
html[data-sgk-grade] .vnn-sgk-login-eyebrow{color:var(--grade-ink)!important}
html[data-sgk-grade] .vnn-sgk-login-submit,
html[data-sgk-grade] .vnn-sgk-assigned-banner button{
  background:var(--grade-accent)!important;color:#fff!important;
}
html[data-sgk-grade] .vnn-sgk-assigned-banner{
  background:linear-gradient(135deg,var(--grade-soft),#fff)!important;border-color:var(--grade-line)!important;
}
html[data-sgk-grade] .vnn-sgk-assigned-banner span{color:var(--grade-ink)!important}

@media(max-width:700px){
  .grade-picker.grade-route-locked{grid-template-columns:1fr!important}
  .grade-route-note{font-size:13px}
}