/* =========================================================================
   EduOne · Greenie — Hub môn học · action card · KPI · companions · accents
   =========================================================================
   Bổ sung cho luồng THCS mới: trang chính học sinh (chọn môn), dashboard giáo
   viên, và panel học liệu phái sinh trong Studio. Dùng token, không hardcode.
   ========================================================================= */

/* ---------- Back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.back-link:hover { color: var(--c-primary-600); }

/* ---------- Accent trên learn-head (thanh nhấn theo môn) ---------- */
.learn-head.accent-tech, .learn-head.accent-primary { position: relative; padding-left: var(--s-4); }
.learn-head.accent-tech::before, .learn-head.accent-primary::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: var(--r-full);
}
.learn-head.accent-tech::before { background: var(--grad-tech); }
.learn-head.accent-primary::before { background: var(--grad-primary); }
.learn-head .eyebrow i { margin-right: 4px; }

/* ---------- Grid hub (2–3 thẻ lớn) ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); align-items: stretch; }
@media (max-width: 860px) { .hub-grid { grid-template-columns: 1fr; } }

/* ---------- Thẻ môn học (student hub) ---------- */
.subject-card { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.subject-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; }
.subject-card.accent-tech::after { background: var(--grad-tech); }
.subject-card.accent-primary::after { background: var(--grad-primary); }
.subject-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.subject-head .feat-ic { margin-bottom: 0; }
.subject-head .badge { margin-left: auto; }
.subject-card .feat-ic { width: 46px; height: 46px; font-size: 1.35rem; }
.subject-progress { margin-top: auto; }
.subject-card p { color: var(--c-text-2); }

/* ---------- Action card (dashboard GV) ---------- */
.action-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-decoration: none; color: inherit; position: relative; }
.action-card p { color: var(--c-text-2); font-size: var(--fs-sm); }
.action-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--c-primary-600); font-size: var(--fs-sm); }
.action-card.accent-tech .action-cta { color: var(--c-tech-600); }
.action-card:hover .action-cta i { transform: translateX(3px); transition: transform var(--t); }

/* ---------- KPI card ---------- */
.kpi-card { display: flex; flex-direction: column; gap: var(--s-3); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--s-4); background: var(--c-primary-50); border-radius: var(--r); }
.kpi-num { font-size: var(--fs-2xl); font-weight: var(--fw-extra); color: var(--c-primary-700); line-height: 1.1; }
.kpi-label { font-size: var(--fs-sm); color: var(--c-text-2); }
.tick-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.tick-list li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--c-text-2); }
.tick-list li::before { content: '\2713'; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary-100); color: var(--c-primary-700); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Section title (Studio) ---------- */
.section-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 var(--s-4); }
.section-title i { color: var(--c-tech-600); }

/* ---------- Companions (học liệu phái sinh) ---------- */
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .comp-grid { grid-template-columns: 1fr; } }
.comp { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r); padding: var(--s-4); }
.comp .blk-title i { color: var(--c-tech-600); margin-right: 4px; }
.comp-text { min-height: 120px; font-size: var(--fs-sm); font-family: var(--font-mono); white-space: pre; }

/* ---------- End-of-lesson project (STEAM) ---------- */
.end-project { border: 1px solid var(--c-primary-200); background: linear-gradient(180deg, var(--c-primary-50), var(--c-surface)); }
.end-project p { color: var(--c-text-2); font-size: var(--fs-sm); }