/* ============================================================================
 * STUDENT HUB — UNIFIED DESIGN SYSTEM V13 (SINGLE SOURCE OF TRUTH)
 * File: /assets/stu_design_system.css
 * Dùng chung cho: index.html, student.html (/hv/:slug & /s/:token), assets/stu_v10_crm.js
 * ============================================================================ */

:root {
  /* 1. Bảng màu nền & Bề mặt (Surfaces) */
  --stu-bg-page: #f8fafc;
  --stu-bg-surface: #ffffff;
  --stu-bg-subtle: #f1f5f9;
  --stu-bg-warm-paper: #fffdf9;

  /* 2. Bảng màu chữ (Typography Colors) */
  --stu-text-primary: #0f172a;
  --stu-text-secondary: #334155;
  --stu-text-muted: #64748b;
  --stu-text-subtle: #94a3b8;

  /* 3. Bảng màu ngữ nghĩa (Semantic Colors) */
  --stu-primary: #2563eb;
  --stu-primary-hover: #1d4ed8;
  --stu-primary-soft: #eff6ff;
  --stu-primary-soft-hover: #dbeafe;
  --stu-primary-border: #bfdbfe;
  --stu-primary-border-hover: #93c5fd;

  --stu-zalo: #0369a1;
  --stu-zalo-hover: #075985;
  --stu-zalo-soft: #e0f2fe;
  --stu-zalo-soft-hover: #bae6fd;
  --stu-zalo-border: #7dd3fc;
  --stu-zalo-border-hover: #38bdf8;

  --stu-fb: #1d4ed8;
  --stu-fb-hover: #1e3a8a;
  --stu-fb-soft: #eef2ff;
  --stu-fb-soft-hover: #e0e7ff;
  --stu-fb-border: #c7d2fe;
  --stu-fb-border-hover: #a5b4fc;

  --stu-teal: #0f766e;
  --stu-teal-hover: #115e59;
  --stu-teal-soft: #f0fdfa;
  --stu-teal-border: #99f6e4;

  --stu-emerald: #047857;
  --stu-emerald-hover: #065f46;
  --stu-emerald-soft: #ecfdf5;
  --stu-emerald-soft-hover: #d1fae5;
  --stu-emerald-border: #a7f3d0;
  --stu-emerald-border-hover: #6ee7b7;

  --stu-amber: #b45309;
  --stu-amber-hover: #92400e;
  --stu-amber-soft: #fffbeb;
  --stu-amber-border: #fde68a;

  --stu-rose: #e11d48;
  --stu-rose-hover: #be123c;
  --stu-rose-soft: #fff1f2;
  --stu-rose-soft-hover: #ffe4e6;
  --stu-rose-border: #fecdd3;
  --stu-rose-border-hover: #fda4af;

  --stu-indigo: #4f46e5;
  --stu-indigo-hover: #4338ca;
  --stu-indigo-soft: #eef2ff;
  --stu-indigo-border: #c7d2fe;

  --stu-violet: #7c3aed;
  --stu-violet-hover: #6d28d9;
  --stu-violet-soft: #f5f3ff;
  --stu-violet-soft-hover: #ede9fe;
  --stu-violet-border: #ddd6fe;
  --stu-violet-border-hover: #c4b5fd;

  --stu-tiktok-bg: #0f172a;
  --stu-tiktok-bg-hover: #1e293b;
  --stu-tiktok-text: #f8fafc;
  --stu-tiktok-border: #334155;

  /* 4. Viền & Đổ bóng (Borders & Elevation) */
  --stu-border-subtle: rgba(226, 232, 240, 0.85);
  --stu-border-strong: #cbd5e1;
  --stu-shadow-2xs: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
  --stu-shadow-xs: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --stu-shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --stu-shadow-card-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.07), 0 4px 10px -4px rgba(15, 23, 42, 0.04);

  /* 5. Bo góc (Border Radius) */
  --stu-radius-xs: 0.375rem;
  --stu-radius-sm: 0.5rem;
  --stu-radius-md: 0.75rem;
  --stu-radius-lg: 1rem;
  --stu-radius-xl: 1.25rem;
  --stu-radius-pill: 9999px;

  /* 6. Font chữ (Typography Families) */
  --stu-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --stu-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* 7. Chuyển động (Transitions) */
  --stu-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
 * BASE, STICKY-SAFE OVERFLOW & ACCESSIBILITY
 * ============================================================================ */
html, body {
  font-family: var(--stu-font-sans);
  background-color: var(--stu-bg-page);
  color: var(--stu-text-primary);
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

.font-mono {
  font-family: var(--stu-font-mono);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--stu-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--stu-bg-subtle);
}
::-webkit-scrollbar-thumb {
  background: var(--stu-border-strong);
  border-radius: var(--stu-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--stu-text-subtle);
}

/* Polyfill cho Tailwind shadow-xs / shadow-2xs */
.shadow-2xs {
  box-shadow: var(--stu-shadow-2xs);
}
.shadow-xs {
  box-shadow: var(--stu-shadow-xs);
}

/* Shake animation for invalid PIN */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.animate-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Inline Edit Mode Highlight (specificity without !important) */
body.edit-active [data-editable="true"],
.edit-active [data-editable="true"] {
  outline: 2px dashed var(--stu-primary);
  outline-offset: 2px;
  cursor: text;
  border-radius: 4px;
  background-color: rgba(239, 246, 255, 0.6);
  transition: background-color var(--stu-transition);
}
body.edit-active [data-editable="true"]:hover,
.edit-active [data-editable="true"]:hover {
  background-color: rgba(219, 234, 254, 0.9);
}

/* ============================================================================
 * HIGH-PERFORMANCE CARD CONTAINERS (CSS CONTENT-VISIBILITY)
 * ============================================================================ */
.stu-card {
  background-color: var(--stu-bg-surface);
  border-radius: var(--stu-radius-lg);
  border: 1px solid var(--stu-border-subtle);
  box-shadow: var(--stu-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--stu-transition), border-color var(--stu-transition);
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.stu-card:hover {
  box-shadow: var(--stu-shadow-card-hover);
}

.stu-card-compact {
  background-color: var(--stu-bg-surface);
  border-radius: var(--stu-radius-lg);
  border: 1px solid var(--stu-border-subtle);
  padding: 1rem;
  box-shadow: var(--stu-shadow-card);
  transition: box-shadow var(--stu-transition), transform var(--stu-transition);
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
.stu-card-compact:hover {
  box-shadow: var(--stu-shadow-card-hover);
}

/* ============================================================================
 * SEMANTIC BUTTONS & PLATFORM ACTION BADGES (SINGLE SOURCE OF TRUTH)
 * ============================================================================ */
.stu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--stu-radius-sm);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  transition: background-color var(--stu-transition), border-color var(--stu-transition), color var(--stu-transition), box-shadow var(--stu-transition), transform var(--stu-transition);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.stu-btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--stu-radius-xs);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  transition: background-color var(--stu-transition), border-color var(--stu-transition), color var(--stu-transition), box-shadow var(--stu-transition);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

/* Nút Mở Google Drive (Emerald) */
.stu-btn-drive {
  background-color: var(--stu-emerald-soft);
  color: var(--stu-emerald-hover);
  border: 1px solid var(--stu-emerald-border);
}
.stu-btn-drive:hover {
  background-color: var(--stu-emerald-soft-hover);
  border-color: var(--stu-emerald-border-hover);
}

/* Nút Zalo Chat (Sky Cyan — tách biệt rõ với Facebook) */
.stu-btn-zalo {
  background-color: var(--stu-zalo-soft);
  color: var(--stu-zalo-hover);
  border: 1px solid var(--stu-zalo-border);
}
.stu-btn-zalo:hover {
  background-color: var(--stu-zalo-soft-hover);
  border-color: var(--stu-zalo-border-hover);
}

/* Nút Facebook / Reels FB (Royal Indigo) */
.stu-btn-fb {
  background-color: var(--stu-fb-soft);
  color: var(--stu-fb-hover);
  border: 1px solid var(--stu-fb-border);
}
.stu-btn-fb:hover {
  background-color: var(--stu-fb-soft-hover);
  border-color: var(--stu-fb-border-hover);
}

/* Nút YouTube (Rose/Red) */
.stu-btn-yt {
  background-color: var(--stu-rose-soft);
  color: var(--stu-rose-hover);
  border: 1px solid var(--stu-rose-border);
}
.stu-btn-yt:hover {
  background-color: var(--stu-rose-soft-hover);
  border-color: var(--stu-rose-border-hover);
}

/* Nút TikTok (Slate Dark) */
.stu-btn-tiktok {
  background-color: var(--stu-tiktok-bg);
  color: var(--stu-tiktok-text);
  border: 1px solid var(--stu-tiktok-border);
}
.stu-btn-tiktok:hover {
  background-color: var(--stu-tiktok-bg-hover);
}

/* Nút Mở Bài Viết Học Viên (Teal) */
.stu-btn-article {
  background-color: var(--stu-teal);
  color: var(--stu-bg-surface);
  border: 1px solid transparent;
  box-shadow: var(--stu-shadow-2xs);
}
.stu-btn-article:hover {
  background-color: var(--stu-teal-hover);
}

/* Nút Share Chế Độ Học Viên Xem (Violet Soft — tách biệt với Facebook) */
.stu-btn-share-public {
  background-color: var(--stu-violet-soft);
  color: var(--stu-violet-hover);
  border: 1px solid var(--stu-violet-border);
}
.stu-btn-share-public:hover {
  background-color: var(--stu-violet-soft-hover);
  border-color: var(--stu-violet-border-hover);
}

/* ============================================================================
 * STRUCTURED CONTENT BOXES (TRANSCRIPT, REVIEW & MENTORSHIP CHECKLIST)
 * ============================================================================ */
.stu-transcript-box {
  background-color: var(--stu-bg-warm-paper);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: var(--stu-radius-md);
  padding: 0.875rem;
}

.stu-review-good {
  padding: 0.75rem 0.875rem;
  border-radius: var(--stu-radius-md);
  background-color: rgba(236, 253, 245, 0.88);
  border: 1px solid rgba(167, 243, 208, 0.95);
  color: var(--stu-text-secondary);
}

.stu-review-warn {
  padding: 0.75rem 0.875rem;
  border-radius: var(--stu-radius-md);
  background-color: rgba(255, 241, 242, 0.85);
  border: 1px solid rgba(254, 205, 211, 0.95);
  color: var(--stu-text-secondary);
}

.stu-review-fix {
  padding: 0.75rem 0.875rem;
  border-radius: var(--stu-radius-md);
  background-color: rgba(239, 246, 255, 0.88);
  border: 1px solid rgba(191, 219, 254, 0.95);
  color: var(--stu-text-secondary);
}

.stu-checklist-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--stu-radius-md);
  border: 1px solid var(--stu-border-subtle);
  background-color: var(--stu-bg-surface);
  transition: background-color var(--stu-transition), border-color var(--stu-transition);
}
.stu-checklist-item:hover {
  border-color: var(--stu-border-strong);
}
.stu-checklist-item[data-status="done"] {
  background-color: var(--stu-emerald-soft);
  border-color: var(--stu-emerald-border);
}
.stu-checklist-item[data-status="doing"] {
  background-color: var(--stu-amber-soft);
  border-color: var(--stu-amber-border);
}