/* ============================================================
   Chiến Math — shared component styles
   "Học toán cùng thầy Chiến"
   ============================================================ */
:root{
  --brand:#4f46e5; --brand-600:#4f46e5; --brand-700:#4338ca;
}
*{ box-sizing:border-box; }
body{ font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
.font-display{ font-family:'Plus Jakarta Sans',sans-serif; }

.text-gradient{
  background:linear-gradient(135deg,#4f46e5,#7c3aed,#2563eb);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-gradient{ background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(20px); border-bottom:1px solid rgba(226,232,240,.7); }

/* sidebar nav */
.nav-item{ transition:all .18s; }
.nav-item.active{ background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.08)); color:#4f46e5; }
.nav-item.active .nav-dot{ opacity:1; }
.nav-dot{ opacity:0; transition:opacity .2s; }

/* cards */
.card{ background:#fff; border:1px solid #eef0f4; border-radius:1rem; }
.card-hover{ transition:transform .25s, box-shadow .25s, border-color .25s; }
.card-hover:hover{ transform:translateY(-3px); box-shadow:0 20px 50px -20px rgba(79,70,229,.30); border-color:#c7d2fe; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.875rem; border-radius:.75rem; transition:all .2s; cursor:pointer; }
.btn-primary{ background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; box-shadow:0 12px 30px -12px rgba(79,70,229,.6); }
.btn-primary:hover{ box-shadow:0 8px 20px -10px rgba(79,70,229,.5); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:#334155; border:1px solid #e2e8f0; }
.btn-ghost:hover{ background:#f8fafc; border-color:#cbd5e1; }

/* table */
.tbl{ width:100%; font-size:.875rem; border-collapse:collapse; }
.tbl thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#64748b; background:#f8fafc; padding:.75rem 1.25rem; }
.tbl tbody td{ padding:.9rem 1.25rem; border-top:1px solid #f1f5f9; }
.tbl tbody tr{ transition:background .15s; }
.tbl tbody tr:hover{ background:#f8fafc; }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:11px; font-weight:600; padding:.2rem .55rem; border-radius:.45rem; }
.badge-green{ background:#ecfdf5; color:#047857; }
.badge-amber{ background:#fffbeb; color:#b45309; }
.badge-slate{ background:#f1f5f9; color:#475569; }
.badge-blue{ background:#eef2ff; color:#4338ca; }
.badge-rose{ background:#fff1f2; color:#be123c; }
.badge-sky{ background:#f0f9ff; color:#0369a1; }

/* toggle */
.toggle{ width:2.5rem; height:1.375rem; background:#e2e8f0; border-radius:999px; position:relative; transition:.2s; }
.toggle::after{ content:''; position:absolute; top:2px; left:2px; width:1.125rem; height:1.125rem; background:#fff; border-radius:999px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
input:checked + .toggle{ background:#4f46e5; }
input:checked + .toggle::after{ transform:translateX(1.125rem); }

/* dual list */
.dl-col{ border:1px solid #e2e8f0; border-radius:1rem; display:flex; flex-direction:column; overflow:hidden; }

/* scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

/* chart */
.chart-line{ stroke-dasharray:3000; stroke-dashoffset:3000; animation:dash 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@keyframes dash{ to{ stroke-dashoffset:0; } }
.chart-area{ opacity:0; animation:fadeArea .9s ease-out 1s forwards; }
@keyframes fadeArea{ to{ opacity:1; } }
.chart-dot{ transition:r .2s; cursor:pointer; }
.chart-col:hover .chart-guide{ opacity:1; }
.chart-guide{ opacity:0; transition:opacity .2s; }

/* progress */
.bar-track{ height:.45rem; background:#eef2f7; border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:linear-gradient(90deg,#4f46e5,#7c3aed); border-radius:999px; }

/* line clamp helper */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* video thumbnail play button (matches Member page) */
@keyframes pulse-ring{ 0%{ transform:scale(.85); opacity:.7; } 80%,100%{ transform:scale(1.4); opacity:0; } }
.play-pulse::before{ content:''; position:absolute; inset:0; border-radius:9999px; background:rgba(255,255,255,.4); animation:pulse-ring 2s cubic-bezier(.2,.8,.2,1) infinite; }
/* mini PDF page preview icon */
.pdf-mini{ box-shadow:0 4px 12px -4px rgba(15,23,42,.2); }
/* full PDF reader page (matches Member document view) */
.pdf-page{ background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 10px 30px -10px rgba(15,23,42,.15); }

.modal-backdrop{ background:rgba(15,23,42,.45); backdrop-filter:blur(4px); }

/* member home background treatment (grid + floating math symbols) */
.bg-grid{
  background-image:
    linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.math-symbol{ position:absolute; font-family:'Plus Jakarta Sans', serif; font-weight:700; color:rgba(99,102,241,0.10); pointer-events:none; user-select:none; }

/* skeleton loading shimmer */
.cm-skel{ background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%); background-size:400% 100%; animation:cm-shimmer 1.4s ease infinite; }
@keyframes cm-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* breadcrumb (public/member pages) */
.cm-breadcrumb{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:#64748b; }

/* drag & drop upload zone */
.dropzone{ border:2px dashed #cbd5e1; transition:all .25s; }
.dropzone:hover{ background:#f8fafc; }
.dropzone.dragover{ border-color:#4f46e5; background:#eef2ff; transform:scale(1.01); }