:root{
    --bg-deep: #060414;
    --bg-mid: #0c0a1e;
    --card: #12102a;
    --card-bar: #0a0818;
    --card-line: #2c2650;
    --text: #ece7fb;
    --text-soft: #9a92bd;
    --accent: #9d8cff;
  }
  
  *{ box-sizing: border-box; }
  
  body{
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    background:
      radial-gradient(ellipse 800px 500px at 15% 10%, rgba(157,140,255,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 700px 500px at 85% 30%, rgba(95,214,196,0.09) 0%, transparent 55%),
      radial-gradient(ellipse 900px 700px at 50% 100%, rgba(139,109,255,0.10) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
  }
  
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1.4px 1.4px at 10% 20%, #ffffff 100%, transparent),
      radial-gradient(1.2px 1.2px at 25% 65%, #ffffff 100%, transparent),
      radial-gradient(1.6px 1.6px at 40% 15%, #ffffff 100%, transparent),
      radial-gradient(1.2px 1.2px at 55% 80%, #ffffff 100%, transparent),
      radial-gradient(1.4px 1.4px at 70% 35%, #ffffff 100%, transparent),
      radial-gradient(1.2px 1.2px at 85% 60%, #ffffff 100%, transparent),
      radial-gradient(1.6px 1.6px at 92% 12%, #ffffff 100%, transparent),
      radial-gradient(1.2px 1.2px at 5% 85%, #ffffff 100%, transparent),
      radial-gradient(1.4px 1.4px at 33% 45%, #ffffff 100%, transparent),
      radial-gradient(1.2px 1.2px at 62% 55%, #ffffff 100%, transparent);
    background-repeat: repeat;
    background-size: 100% 100%;
    opacity: 0.55;
    animation: twinkle 5s ease-in-out infinite alternate;
  }
  
  @keyframes twinkle{
    from{ opacity: 0.35; }
    to{ opacity: 0.7; }
  }
  
  .glyphs{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
  }
  
  .glyphs span{
    position: absolute;
    opacity: 0.14;
    font-size: 1.1rem;
    white-space: nowrap;
  }
  
  .g1{ top: 8%; left: 6%; transform: rotate(-6deg); font-size: 0.95rem; }
  .g2{ top: 18%; right: 8%; transform: rotate(4deg); }
  .g3{ top: 62%; left: 4%; transform: rotate(3deg); font-size: 0.9rem; }
  .g4{ top: 72%; right: 10%; transform: rotate(-4deg); }
  .g5{ top: 40%; right: 3%; transform: rotate(8deg); font-size: 0.85rem; }
  .g6{ top: 88%; left: 20%; transform: rotate(-2deg); font-size: 0.85rem; }
  
  header, main, footer{ position: relative; z-index: 1; }
  
  /* ---- terminal window (dùng chung cho mọi trang) ---- */
  .terminal{
    max-width: 620px;
    margin: 3.5rem auto 3rem;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(157,140,255,0.10), 0 20px 40px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  
  .terminal-bar{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1rem;
    background: var(--card-bar);
    border-bottom: 1px solid var(--card-line);
  }
  
  .terminal-bar .dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .terminal-bar .dot.red{ background: #ff5f57; }
  .terminal-bar .dot.yellow{ background: #febc2e; }
  .terminal-bar .dot.green{ background: #28c840; }
  
  .terminal-bar .path{
    flex: 1;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-soft);
  }
  
  .terminal-body{ padding: 2.2rem 1.9rem 2.4rem; text-align: center; }
  
  .terminal-body .comment{
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-soft);
    margin: 0 0 0.6rem;
  }
  
  .terminal-body h1{
    font-size: clamp(1.7rem, 4.2vw, 2.3rem);
    font-weight: 600;
    margin: 0 0 1.3rem;
    letter-spacing: 0.01em;
  }
  
  .terminal-body .prompt{
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88rem;
    color: var(--accent);
    text-align: left;
    display: inline-block;
  }
  
  .terminal-body .prompt .sym{ color: var(--text-soft); margin-right: 0.5em; }
  .terminal-body .cursor{ animation: blink 1s step-start infinite; }
  @keyframes blink{ 50%{ opacity: 0; } }
  
  main{ max-width: 700px; margin: 0 auto; padding: 0 1.5rem 4rem; }
  
  /* ---- trang chủ: catalog cards ---- */
  .catalog{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
  
  .card{
    background: var(--card);
    width: 220px;
    border: 1px solid var(--card-line);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  
  .card:hover, .card:focus-visible{
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 26px rgba(157,140,255,0.28), 0 18px 30px rgba(0,0,0,0.4);
    outline: none;
  }
  
  .card .file-tab{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--card-bar);
    border-bottom: 1px solid var(--card-line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-soft);
  }
  
  .card .file-tab .dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  
  .card .cover{
    width: 100%;
    height: 130px;
    object-fit: cover;
    filter: saturate(0.85) brightness(0.85) contrast(1.05);
    display: block;
  }
  
  .card .body-pad{ padding: 0.9rem 1rem 1.2rem; }
  .card h2{ font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; }
  .card .note{ font-size: 0.82rem; color: var(--text-soft); margin: 0; line-height: 1.45; }
  
  /* ---- trang con: danh sách bài tập ---- */
  .exercise-list{
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .exercise-list li{
    background: var(--card);
    border: 1px solid var(--card-line);
    border-left: 3px solid var(--lang-color, var(--accent));
    border-radius: 8px;
  }
  
  .exercise-list a{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
  }
  
  .exercise-list a::before{
    content: "</>";
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--lang-color, var(--accent));
    opacity: 0.85;
  }
  
  .exercise-list a:hover{
    background: var(--card-bar);
    color: var(--accent);
    transform: scale(1.03);
    box-shadow: 0 0 0 1px var(--accent), 0 8px 18px rgba(0,0,0,0.40);
  }
  
  .back-link{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-soft);
    text-decoration: none;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: 0.55rem 1rem;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  
  .back-link:hover{ color: var(--accent); border-color: var(--accent); }
  
  footer{
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-soft);
    padding: 0 1.5rem 3rem;
  }
  
  @media (max-width: 480px){
    .card{ width: 100%; max-width: 320px; }
    .glyphs span{ display: none; }
  }