/* ============================================================
     TOKEN HỆ THỐNG — bảng màu xám / bạc (monochrome)
     ============================================================ */
  :root{
    --void:        #0d0d0f;   /* nền chính */
    --surface:     #17171a;   /* nền card */
    --surface-2:   #1f2023;   /* nền card nổi / hover */
    --line:        #303136;   /* viền */
    --line-soft:   #232427;
    --silver-dim:  #86888f;   /* chữ phụ */
    --silver:      #c7c9cf;   /* chữ chính */
    --silver-bright:#f1f2f5;  /* tiêu đề / nhấn */
    --metal-a:     #e9eaed;
    --metal-b:     #9a9ca4;
    --metal-c:     #d7d9dd;
    --radius:      14px;
    --radius-sm:   8px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--void);
    color:var(--silver);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* nền hoa văn kim loại rất mờ cho toàn trang */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 800px 500px at 15% -10%, rgba(255,255,255,0.05), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,255,255,0.035), transparent 55%);
    pointer-events:none;
    z-index:0;
  }

  h1,h2,h3{ font-family:'Space Grotesk', sans-serif; color:var(--silver-bright); }
  .mono{ font-family:'JetBrains Mono', monospace; }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--metal-b); color:#0d0d0f; }

  /* placeholder text — chỗ này cậu tự điền nội dung sau */
  .ph{
    color:var(--silver-dim);
    border-bottom:1px dashed var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size:0.9em;
  }

  /* ============================================================
     THANH ĐIỀU HƯỚNG TRÊN CÙNG
     ============================================================ */
  .topbar{
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px clamp(20px, 5vw, 56px);
    background:linear-gradient(to bottom, rgba(13,13,15,0.92), rgba(13,13,15,0.6) 80%, transparent);
    backdrop-filter:blur(6px);
  }

  .brand{
    display:flex; align-items:baseline; gap:8px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--silver-bright);
    letter-spacing:0.02em;
  }
  .brand .dot{ color:var(--metal-b); }

  /* khối bên phải topbar — chứa avatar (nếu đã login) + nút burger */
  .topbar-right{ display:flex; align-items:center; gap:14px; }

  .profile-chip{
    display:block;
    width:38px; height:38px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    flex-shrink:0;
    transition:border-color .25s ease, transform .25s ease;
  }
  .profile-chip:hover{ border-color:var(--metal-b); transform:translateY(-2px); }
  .profile-chip img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* nút Login ném thẳng lên góc web (trong topbar), màu bạc + hiệu ứng ánh kim quét qua */
  .login-pill{
    position:relative;
    overflow:hidden;
    display:inline-flex; align-items:center;
    font-family:'JetBrains Mono', monospace;
    font-size:13px; font-weight:600;
    padding:10px 22px;
    border-radius:999px;
    color:#0d0d0f;
    background:linear-gradient(135deg, var(--metal-a), var(--metal-c) 45%, var(--metal-b));
    white-space:nowrap;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .login-pill:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.4); }
  .login-pill::after{
    content:"";
    position:absolute; top:0; left:-150%;
    width:55%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
    transform:skewX(-20deg);
    animation:pill-shine 3s ease-in-out infinite;
  }
  @keyframes pill-shine{
    0%{ left:-150%; }
    50%{ left:150%; }
    100%{ left:150%; }
  }

  /* nút hamburger 3 gạch */
  .burger{
    position:relative;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    cursor:pointer;
    z-index:210;
    transition:background .25s ease, border-color .25s ease;
  }
  .burger:hover{ border-color:var(--metal-b); }
  .burger-lines{ position:relative; width:18px; height:12px; }
  .burger-lines span{
    position:absolute; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--metal-a), var(--metal-b));
    border-radius:2px;
    transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease, top .35s ease;
  }
  .burger-lines span:nth-child(1){ top:0; }
  .burger-lines span:nth-child(2){ top:5px; }
  .burger-lines span:nth-child(3){ top:10px; }

  .burger.open .burger-lines span:nth-child(1){ top:5px; transform:rotate(45deg); }
  .burger.open .burger-lines span:nth-child(2){ opacity:0; }
  .burger.open .burger-lines span:nth-child(3){ top:5px; transform:rotate(-45deg); }

  /* ============================================================
     PANEL MENU TRƯỢT RA
     ============================================================ */
  .nav-overlay{
    position:fixed; inset:0;
    z-index:200;
    background:rgba(9,9,10,0.75);
    backdrop-filter:blur(10px);
    opacity:0; visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    display:flex; justify-content:flex-end;
  }
  .nav-overlay.open{ opacity:1; visibility:visible; }

  .nav-panel{
    width:min(420px, 88vw);
    height:100%;
    background:linear-gradient(180deg, var(--surface), var(--void));
    border-left:1px solid var(--line);
    padding:100px 40px 40px;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1);
    display:flex; flex-direction:column;
  }
  .nav-overlay.open .nav-panel{ transform:translateX(0); }

  .nav-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    color:var(--silver-dim);
    letter-spacing:0.12em;
    margin-bottom:24px;
  }

  .nav-list{ list-style:none; display:flex; flex-direction:column; gap:4px; }
  .nav-list a{
    display:flex; align-items:baseline; gap:12px;
    padding:14px 4px;
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(20px, 4vw, 26px);
    color:var(--silver-dim);
    border-bottom:1px solid var(--line-soft);
    transition:color .25s ease, padding-left .25s ease;
  }
  .nav-list a .cmd{ color:var(--metal-b); }
  .nav-list a:hover{ color:var(--silver-bright); padding-left:12px; }
  .nav-list a.active{ color:var(--silver-bright); }

  .nav-footer{
    margin-top:auto;
    padding-top:24px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--silver-dim);
  }

  /* ============================================================
     BỐ CỤC CHUNG CÁC SECTION
     ============================================================ */
  section{
    position:relative;
    z-index:1;
    padding:160px clamp(20px, 6vw, 80px) 100px;
    max-width:1100px;
    margin:0 auto;
    border-top:1px solid var(--line-soft);
  }
  section:first-of-type{ border-top:none; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--metal-b);
    letter-spacing:0.08em;
    margin-bottom:16px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--metal-b);
  }

  .section-title{
    font-size:clamp(32px, 5vw, 52px);
    font-weight:700;
    margin-bottom:20px;
    letter-spacing:-0.01em;
  }
  .section-sub{
    color:var(--silver-dim);
    max-width:60ch;
    font-size:16px;
    margin-bottom:48px;
  }

  /* ============================================================
     HIỆU ỨNG HIỆN RA KHI CUỘN (SCROLL REVEAL)
     ============================================================ */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    filter:blur(2px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
    transition-delay:calc(var(--i, 0) * 70ms);
  }
  .reveal.visible{ opacity:1; transform:translateY(0); filter:blur(0); }

  /* ============================================================
     HERO / HOME
     ============================================================ */
  .hero{ padding-top:180px; min-height:92vh; display:flex; flex-direction:column; justify-content:center; }
  .hero-name{
    font-size:clamp(40px, 8vw, 84px);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.02em;
    background:linear-gradient(120deg, var(--silver-bright) 30%, var(--metal-b) 50%, var(--silver-bright) 70%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shine 7s linear infinite;
  }
  @keyframes shine{ 0%{background-position:0% 0;} 100%{background-position:-220% 0;} }

  .hero-role{
    margin-top:18px;
    font-family:'JetBrains Mono', monospace;
    font-size:clamp(14px, 2vw, 17px);
    color:var(--silver-dim);
  }
  .hero-text{
    margin-top:28px;
    max-width:58ch;
    font-size:16px;
    color:var(--silver);
  }
  .hero-scroll{
    margin-top:64px;
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    color:var(--silver-dim);
  }
  .hero-scroll .bar{
    width:1px; height:30px;
    background:linear-gradient(var(--metal-b), transparent);
    animation:pulse-bar 1.8s ease-in-out infinite;
  }
  @keyframes pulse-bar{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

  /* ============================================================
     THÔNG TIN — bảng thông số + badge
     ============================================================ */
  .spec-list{ border-top:1px solid var(--line-soft); margin-bottom:56px; }
  .spec-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 4px;
    border-bottom:1px solid var(--line-soft);
    font-family:'JetBrains Mono', monospace;
    font-size:15px;
  }
  .spec-row .k{ color:var(--silver-dim); }
  .spec-row .v{ color:var(--silver-bright); }

  /* ============================================================
     PROFILE CARD — banner kim loại + avatar nổi + tên có hiệu ứng
     ============================================================ */
  .profile-card{
    position:relative;
    isolation:isolate;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg, var(--surface), var(--void));
    overflow:hidden;
    margin-bottom:48px;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
    animation:card-border-pulse 6s ease-in-out infinite;
  }
  /* lớp ánh sáng chạy khắp cả card (kể cả phần dưới banner), không chỉ riêng banner */
  .profile-card::before{
    content:"";
    position:absolute; inset:0;
    z-index:0;
    background:
      radial-gradient(circle 320px at 15% 10%, rgba(255,255,255,0.07), transparent 60%),
      radial-gradient(circle 280px at 90% 60%, rgba(255,255,255,0.05), transparent 55%),
      radial-gradient(circle 240px at 30% 95%, rgba(255,255,255,0.04), transparent 55%);
    background-size:180% 180%;
    animation:card-glow-drift 12s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes card-glow-drift{
    0%,100%{ background-position:0% 0%, 100% 0%, 50% 100%; }
    50%{ background-position:100% 60%, 20% 80%, 80% 20%; }
  }
  @keyframes card-border-pulse{
    0%,100%{ box-shadow:0 20px 60px rgba(0,0,0,0.35), 0 0 0 rgba(255,255,255,0); }
    50%{ box-shadow:0 20px 60px rgba(0,0,0,0.35), 0 0 46px rgba(255,255,255,0.07); }
  }

  .profile-banner{
    height:150px;
    position:relative;
    z-index:1;
    background:
      radial-gradient(ellipse 420px 220px at 12% 0%, rgba(255,255,255,0.14), transparent 60%),
      radial-gradient(ellipse 380px 220px at 90% 20%, rgba(255,255,255,0.09), transparent 55%),
      linear-gradient(120deg, #1c1d21, #2a2b30 45%, #1c1d21);
    background-size:200% 200%;
    animation:banner-drift 10s ease-in-out infinite;
  }
  .profile-banner::after{
    content:"";
    position:absolute; inset:0;
    background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
  }
  @keyframes banner-drift{
    0%,100%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
  }

  .profile-card-body{ position:relative; z-index:1; padding:0 32px 32px; }

  .profile-avatar-wrap{
    position:relative;
    width:112px;
    margin-top:-64px;
    margin-bottom:16px;
  }
  /* quầng sáng nhấp nháy phía sau avatar để nó không bị lạc lõng trên banner */
  .profile-avatar-wrap::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:32px;
    background:radial-gradient(circle, rgba(255,255,255,0.28), transparent 70%);
    filter:blur(10px);
    animation:avatar-glow-pulse 3.4s ease-in-out infinite;
    z-index:0;
  }
  @keyframes avatar-glow-pulse{
    0%,100%{ opacity:0.35; transform:scale(0.94); }
    50%{ opacity:0.7; transform:scale(1.04); }
  }
  .profile-avatar-lg{
    position:relative;
    z-index:1;
    width:104px; height:104px;
    border-radius:24px;
    border:4px solid var(--surface);
    background:var(--surface);
    object-fit:cover;
    display:block;
    box-shadow:0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
  }

  .profile-name-row{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:10px 16px;
    margin-bottom:6px;
  }
  .profile-name-block{ display:flex; align-items:center; gap:8px; position:relative; }
  .profile-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:26px;
    color:var(--silver-bright);
  }
  .profile-tag{ color:var(--silver-dim); font-size:13px; }

  /* badge Title do admin "give" — màu tự chọn theo từng title */
  .title-badge{
    display:inline-flex; align-items:center;
    font-family:'JetBrains Mono', monospace;
    font-size:12px; font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid var(--badge-color, var(--metal-b));
    color:var(--badge-color, var(--silver-bright));
    background:color-mix(in srgb, var(--badge-color, var(--silver-bright)) 14%, transparent);
    white-space:nowrap;
  }

  /* ============================================================
     ADMIN PANEL — form tạo Title + bảng user để "give"
     ============================================================ */
  .admin-block{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg, var(--surface), var(--void));
    padding:28px;
    margin-bottom:40px;
  }
  .admin-block h3{
    font-size:18px; margin-bottom:6px;
  }
  .admin-block .desc{ color:var(--silver-dim); font-size:14px; margin-bottom:22px; }

  .form-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; }
  .form-row:last-child{ margin-bottom:0; }

  .form-input, .form-select{
    appearance:none;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--silver-bright);
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    padding:11px 14px;
    outline:none;
    transition:border-color .2s ease;
    flex:1 1 180px;
    min-width:0;
  }
  .form-input:focus, .form-select:focus{ border-color:var(--metal-b); }

  .form-color{
    -webkit-appearance:none; appearance:none;
    width:44px; height:44px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-2);
    padding:2px;
    cursor:pointer;
    flex:0 0 44px;
  }
  .form-color::-webkit-color-swatch{ border-radius:8px; border:none; }

  .admin-table{ width:100%; border-collapse:collapse; margin-top:4px; }
  .admin-table th{
    text-align:left; color:var(--silver-dim);
    font-family:'JetBrains Mono', monospace;
    font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:.04em;
    padding:10px 8px;
    border-bottom:1px solid var(--line-soft);
  }
  .admin-table td{
    padding:12px 8px;
    border-bottom:1px solid var(--line-soft);
    font-size:14px;
    vertical-align:middle;
  }
  .admin-table tr:last-child td{ border-bottom:none; }
  .admin-user-cell{ display:flex; align-items:center; gap:10px; }
  .admin-user-avatar{ width:32px; height:32px; border-radius:8px; object-fit:cover; flex-shrink:0; }
  .admin-user-name{ color:var(--silver-bright); font-weight:600; }
  .admin-user-tag{ color:var(--silver-dim); font-size:12px; }

  .title-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:10px 4px;
    border-bottom:1px solid var(--line-soft);
  }
  .title-row:last-child{ border-bottom:none; }
  .btn-danger{
    appearance:none; cursor:pointer;
    background:transparent;
    border:1px solid #4a2b2f;
    color:#e08a92;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    padding:8px 14px;
    border-radius:999px;
    transition:background .2s ease, border-color .2s ease;
  }
  .btn-danger:hover{ background:rgba(224,138,146,0.1); border-color:#e08a92; }

  .btn-sm{ padding:9px 16px; font-size:13px; }

  @media (max-width:640px){
    .admin-table thead{ display:none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
    .admin-table tr{ border-bottom:1px solid var(--line-soft); padding:12px 0; }
    .admin-table td{ border-bottom:none; padding:4px 0; }
    .admin-table td.give-cell{ margin-top:8px; }
  }

  /* nút "v" mở menu chọn hiệu ứng chữ */
  .effect-toggle-btn{
    appearance:none; cursor:pointer;
    width:26px; height:26px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--silver-dim);
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease, border-color .2s ease, color .2s ease;
  }
  .effect-toggle-btn:hover{ border-color:var(--metal-b); color:var(--silver-bright); }
  .effect-toggle-btn.open{ transform:rotate(180deg); border-color:var(--metal-b); color:var(--silver-bright); }

  .effect-menu{
    position:absolute; top:calc(100% + 10px); left:0;
    min-width:168px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:12px;
    padding:6px;
    box-shadow:0 16px 40px rgba(0,0,0,0.45);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:20;
  }
  .effect-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .effect-option{
    appearance:none; border:none; cursor:pointer;
    width:100%; text-align:left;
    background:transparent;
    color:var(--silver);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    padding:9px 10px;
    border-radius:8px;
    transition:background .15s ease, color .15s ease;
  }
  .effect-option:hover{ background:rgba(255,255,255,0.06); color:var(--silver-bright); }
  .effect-option.active{ color:var(--silver-bright); }
  .effect-option.active::after{ content:" ✓"; color:var(--metal-b); }

  /* ---- các hiệu ứng chữ cho tên ---- */
  .name-effect-default{ color:var(--silver-bright); }

  .name-effect-shine{
    background:linear-gradient(100deg, var(--metal-b) 0%, #fff 45%, var(--metal-b) 60%, var(--metal-b) 100%);
    background-size:250% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:name-shine 3s linear infinite;
  }
  @keyframes name-shine{
    0%{ background-position:200% center; }
    100%{ background-position:-50% center; }
  }

  .name-effect-rainbow{
    background:linear-gradient(90deg, #ff6b6b, #ffd166, #7ee787, #6ec6ff, #c792ea, #ff6b6b);
    background-size:300% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:name-rainbow 6s linear infinite;
  }
  @keyframes name-rainbow{
    0%{ background-position:0% center; }
    100%{ background-position:-300% center; }
  }

  .name-effect-neon{
    color:#f5f6fa;
    animation:name-neon 2.4s ease-in-out infinite;
  }
  @keyframes name-neon{
    0%,100%{ text-shadow:0 0 6px rgba(255,255,255,0.55), 0 0 18px rgba(154,156,164,0.5); }
    50%{ text-shadow:0 0 14px rgba(255,255,255,0.9), 0 0 32px rgba(154,156,164,0.8); }
  }

  .name-effect-glitch{
    position:relative;
    color:var(--silver-bright);
    animation:name-glitch-shift 3.6s infinite;
  }
  .name-effect-glitch::before,
  .name-effect-glitch::after{
    content:attr(data-text);
    position:absolute; left:0; top:0;
    width:100%; overflow:hidden;
    color:var(--silver-bright);
  }
  .name-effect-glitch::before{
    color:#ff5c7a;
    animation:name-glitch-1 2.8s infinite;
    z-index:-1;
  }
  .name-effect-glitch::after{
    color:#5ce1ff;
    animation:name-glitch-2 2.8s infinite;
    z-index:-1;
  }
  @keyframes name-glitch-shift{
    0%,92%,100%{ transform:translate(0,0); }
    93%{ transform:translate(-1px,1px); }
    95%{ transform:translate(1px,-1px); }
  }
  @keyframes name-glitch-1{
    0%,92%,100%{ clip-path:inset(0 0 0 0); transform:translate(0,0); opacity:0; }
    93%{ clip-path:inset(10% 0 60% 0); transform:translate(-2px,0); opacity:0.8; }
    95%{ clip-path:inset(60% 0 5% 0); transform:translate(2px,0); opacity:0.8; }
  }
  @keyframes name-glitch-2{
    0%,92%,100%{ clip-path:inset(0 0 0 0); transform:translate(0,0); opacity:0; }
    93%{ clip-path:inset(55% 0 15% 0); transform:translate(2px,0); opacity:0.8; }
    95%{ clip-path:inset(8% 0 55% 0); transform:translate(-2px,0); opacity:0.8; }
  }

  /* ============================================================
     "Abyssal Hunter" — hiệu ứng tên CỐ ĐỊNH, chỉ admin give được
     (xanh-đen đổi màu + đàn cá bơi quanh + mỏ neo đen mờ phía sau)
     ============================================================ */
  .profile-name-fx-wrap{ position:relative; display:inline-block; }

  .name-effect-abyssal{
    background:linear-gradient(100deg, #051019 0%, #0b3d63 20%, #17c9e8 42%, #041824 58%, #0a1830 76%, #1565c0 100%);
    background-size:320% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:name-abyssal-shift 5s ease-in-out infinite;
    filter:drop-shadow(0 0 10px rgba(23,201,232,0.35));
  }
  @keyframes name-abyssal-shift{
    0%{ background-position:0% center; }
    50%{ background-position:100% center; }
    100%{ background-position:0% center; }
  }

  .abyssal-decor{
    position:absolute; inset:-16px -50px;
    pointer-events:none;
    z-index:-1;
    display:none;
  }
  .abyssal-decor.active{ display:block; }

  /* mỏ neo phía sau — hình SVG vẽ tay, dùng làm mask để nhuộm đúng gradient màu của tên */
  .abyssal-anchor{
    position:absolute; top:50%; left:50%;
    width:60px; height:84px;
    transform:translate(-50%,-50%);
    background:linear-gradient(100deg, #051019 0%, #0b3d63 20%, #17c9e8 42%, #041824 58%, #0a1830 76%, #1565c0 100%);
    background-size:320% auto;
    -webkit-mask-image:url('assets/img/anchor.svg');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-image:url('assets/img/anchor.svg');
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    animation:name-abyssal-shift 5s ease-in-out infinite, abyssal-anchor-flicker 4.2s ease-in-out infinite;
  }
  @keyframes abyssal-anchor-flicker{
    0%,100%{ opacity:0.16; }
    40%{ opacity:0.38; }
    55%{ opacity:0.12; }
    75%{ opacity:0.30; }
  }

  /* cá bơi lượn sát ngay hàng chữ tên — ảnh SVG vẽ tay thay vì emoji, chuyển động y như cũ */
  .fish-swim{
    position:absolute; top:50%; left:50%;
    width:30px; height:auto;
    display:block;
    pointer-events:none;
    filter:drop-shadow(0 0 4px rgba(23,201,232,0.4));
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
  }
  @keyframes abyssal-fish-a{
    0%{   transform:translate(-46px, -6px) scaleX(1); }
    24%{  transform:translate(-14px, 7px) scaleX(1); }
    25%{  transform:translate(-12px, 7px) scaleX(-1); }
    49%{  transform:translate(20px, -7px) scaleX(-1); }
    50%{  transform:translate(22px, -7px) scaleX(1); }
    100%{ transform:translate(-46px, -6px) scaleX(1); }
  }
  @keyframes abyssal-fish-b{
    0%{   transform:translate(40px, 6px) scaleX(-1); }
    49%{  transform:translate(-18px, -7px) scaleX(-1); }
    50%{  transform:translate(-16px, -7px) scaleX(1); }
    99%{  transform:translate(40px, 6px) scaleX(1); }
    100%{ transform:translate(42px, 6px) scaleX(-1); }
  }
  @keyframes abyssal-fish-c{
    0%{   transform:translate(-8px, -9px) scaleX(1); }
    39%{  transform:translate(28px, 5px) scaleX(1); }
    40%{  transform:translate(28px, 5px) scaleX(-1); }
    79%{  transform:translate(-24px, 8px) scaleX(-1); }
    80%{  transform:translate(-24px, 8px) scaleX(1); }
    100%{ transform:translate(-8px, -9px) scaleX(1); }
  }

  /* bong bóng nước — nổi từ dưới tên bay lên rồi mờ dần biến mất, lặp lại */
  .abyssal-bubble{
    position:absolute; top:50%; left:50%;
    aspect-ratio:1/1;
    pointer-events:none;
    background:linear-gradient(100deg, #051019 0%, #0b3d63 20%, #17c9e8 42%, #041824 58%, #0a1830 76%, #1565c0 100%);
    background-size:320% auto;
    -webkit-mask-image:url('assets/img/bubble.svg');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-image:url('assets/img/bubble.svg');
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
    animation-timing-function:ease-out;
    animation-iteration-count:infinite;
  }
  @keyframes abyssal-bubble-1{
    0%{   transform:translate(-20px, 30px) scale(0.5); opacity:0; }
    12%{  opacity:0.85; }
    55%{  transform:translate(-12px, -8px) scale(0.85); }
    88%{  opacity:0.5; }
    100%{ transform:translate(-4px, -44px) scale(1.05); opacity:0; }
  }
  @keyframes abyssal-bubble-2{
    0%{   transform:translate(6px, 34px) scale(0.4); opacity:0; }
    14%{  opacity:0.8; }
    58%{  transform:translate(12px, -4px) scale(0.75); }
    90%{  opacity:0.45; }
    100%{ transform:translate(18px, -42px) scale(0.95); opacity:0; }
  }
  @keyframes abyssal-bubble-3{
    0%{   transform:translate(-4px, 36px) scale(0.55); opacity:0; }
    16%{  opacity:0.9; }
    60%{  transform:translate(2px, -6px) scale(0.9); }
    92%{  opacity:0.5; }
    100%{ transform:translate(6px, -46px) scale(1.1); opacity:0; }
  }

  /* ============================================================
     "Gargantua" — hiệu ứng tên CỐ ĐỊNH, chỉ admin give được
     (hố đen + chân trời sự kiện + vành đai bồi tụ cam xoay + bụi vũ trụ rơi vào)
     ============================================================ */
  .name-effect-gargantua{
    position:relative;
    color:#08070a;
    -webkit-text-stroke:0.6px rgba(255,150,60,0.85);
    animation:gargantua-text-pulse 3.4s ease-in-out infinite;
  }
  @keyframes gargantua-text-pulse{
    0%,100%{ text-shadow:0 0 6px rgba(255,140,50,0.5), 0 0 16px rgba(255,90,20,0.3), 0 0 30px rgba(255,60,10,0.16); }
    50%{ text-shadow:0 0 11px rgba(255,175,90,0.85), 0 0 26px rgba(255,110,30,0.55), 0 0 46px rgba(255,70,15,0.3); }
  }

  .gargantua-decor{
    position:absolute; inset:-50px -50px;
    pointer-events:none;
    z-index:-1;
    display:none;
  }
  .gargantua-decor.active{ display:block; }

  /* vành đai bồi tụ — ảnh SVG elip có sẵn gradient + glow, chỉ lo xoay bằng CSS */
  .gargantua-ring{
    position:absolute; top:50%; left:50%;
    width:104px; height:38px;
    transform:translate(-50%,-50%) rotate(-16deg);
    pointer-events:none;
    animation:gargantua-ring-spin 5s linear infinite;
  }
  @keyframes gargantua-ring-spin{
    from{ transform:translate(-50%,-50%) rotate(-16deg) rotate(0deg); }
    to{   transform:translate(-50%,-50%) rotate(-16deg) rotate(360deg); }
  }

  /* chân trời sự kiện — vùng đen tuyệt đối ở tâm, nuốt hết ánh sáng */
  .gargantua-horizon{
    position:absolute; top:50%; left:50%;
    width:30px; height:30px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 38% 34%, #170e06 0%, #000 60%, #000 100%);
    box-shadow:0 0 20px 5px rgba(0,0,0,0.85), 0 0 3px 1px rgba(255,150,60,0.35);
    z-index:1;
  }

  /* bụi vũ trụ bị hút dần vào tâm hố đen rồi biến mất, lặp lại — ảnh SVG sparkle */
  .gargantua-dust{
    position:absolute; top:50%; left:50%;
    width:15px; height:15px;
    pointer-events:none;
    animation-timing-function:ease-in;
    animation-iteration-count:infinite;
  }
  @keyframes gargantua-dust-1{
    0%{ transform:translate(56px,-16px) scale(1); opacity:0; }
    12%{ opacity:0.9; }
    75%{ transform:translate(6px,2px) scale(0.5); opacity:0.7; }
    100%{ transform:translate(0,0) scale(0); opacity:0; }
  }
  @keyframes gargantua-dust-2{
    0%{ transform:translate(-52px,14px) scale(1); opacity:0; }
    14%{ opacity:0.9; }
    78%{ transform:translate(-4px,-6px) scale(0.5); opacity:0.7; }
    100%{ transform:translate(0,0) scale(0); opacity:0; }
  }
  @keyframes gargantua-dust-3{
    0%{ transform:translate(6px,-40px) scale(1); opacity:0; }
    10%{ opacity:0.9; }
    76%{ transform:translate(2px,-4px) scale(0.5); opacity:0.7; }
    100%{ transform:translate(0,0) scale(0); opacity:0; }
  }
  @keyframes gargantua-dust-4{
    0%{ transform:translate(-18px,38px) scale(1); opacity:0; }
    13%{ opacity:0.9; }
    77%{ transform:translate(-6px,6px) scale(0.5); opacity:0.7; }
    100%{ transform:translate(0,0) scale(0); opacity:0; }
  }

  /* ============================================================
     "Aurora Penguin" — hiệu ứng tên mở khoá theo ROLE Discord
     (hồng-xanh trời đổi màu kiểu cực quang + chim cánh cụt lạch bạch)
     ============================================================ */
  .name-effect-aurora_penguin{
    background:linear-gradient(100deg, #ff6fd8 0%, #b06bff 22%, #6fa8ff 45%, #6fe3ff 65%, #ff9ad6 85%, #ff6fd8 100%);
    background-size:300% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:name-aurora-shift 6s ease-in-out infinite;
    filter:drop-shadow(0 0 10px rgba(255,140,220,0.35));
  }
  @keyframes name-aurora-shift{
    0%{ background-position:0% center; }
    50%{ background-position:100% center; }
    100%{ background-position:0% center; }
  }

  .aurora-decor{
    position:absolute; inset:-30px -42px;
    pointer-events:none;
    z-index:-1;
    display:none;
  }
  .aurora-decor.active{ display:block; }

  /* quầng sáng cực quang mờ trôi nhẹ phía sau tên */
  .aurora-glow{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 140px 60px at 30% 40%, rgba(255,110,216,0.28), transparent 65%),
      radial-gradient(ellipse 140px 60px at 72% 62%, rgba(111,168,255,0.24), transparent 65%);
    filter:blur(7px);
    animation:aurora-glow-drift 7s ease-in-out infinite;
  }
  @keyframes aurora-glow-drift{
    0%,100%{ transform:translate(-6px, 0); opacity:0.7; }
    50%{ transform:translate(6px, -3px); opacity:1; }
  }

  /* chim cánh cụt lạch bạch qua lại cạnh tên — emoji có sẵn của máy */
  .penguin-waddle{
    position:absolute; top:50%; left:50%;
    display:inline-block;
    font-size:20px;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
  }
  @keyframes penguin-waddle-a{
    0%{   transform:translate(-42px, 10px) rotate(-7deg) scaleX(1); }
    10%{  transform:translate(-42px, 5px) rotate(7deg) scaleX(1); }
    20%{  transform:translate(-28px, 10px) rotate(-7deg) scaleX(1); }
    30%{  transform:translate(-14px, 5px) rotate(7deg) scaleX(1); }
    40%{  transform:translate(0px, 10px) rotate(-7deg) scaleX(1); }
    50%{  transform:translate(0px, 5px) rotate(7deg) scaleX(-1); }
    60%{  transform:translate(-14px, 10px) rotate(-7deg) scaleX(-1); }
    70%{  transform:translate(-28px, 5px) rotate(7deg) scaleX(-1); }
    80%{  transform:translate(-42px, 10px) rotate(-7deg) scaleX(-1); }
    90%{  transform:translate(-42px, 5px) rotate(7deg) scaleX(1); }
    100%{ transform:translate(-42px, 10px) rotate(-7deg) scaleX(1); }
  }
  @keyframes penguin-waddle-b{
    0%{   transform:translate(38px, 8px) rotate(7deg) scaleX(-1); }
    10%{  transform:translate(38px, 4px) rotate(-7deg) scaleX(-1); }
    20%{  transform:translate(24px, 8px) rotate(7deg) scaleX(-1); }
    30%{  transform:translate(10px, 4px) rotate(-7deg) scaleX(-1); }
    40%{  transform:translate(-4px, 8px) rotate(7deg) scaleX(-1); }
    50%{  transform:translate(-4px, 4px) rotate(-7deg) scaleX(1); }
    60%{  transform:translate(10px, 8px) rotate(7deg) scaleX(1); }
    70%{  transform:translate(24px, 4px) rotate(-7deg) scaleX(1); }
    80%{  transform:translate(38px, 8px) rotate(7deg) scaleX(1); }
    90%{  transform:translate(38px, 4px) rotate(-7deg) scaleX(1); }
    100%{ transform:translate(38px, 8px) rotate(7deg) scaleX(-1); }
  }

  .group-label{
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    color:var(--silver-dim);
    margin-bottom:14px;
    letter-spacing:0.04em;
  }
  .badge-group{ margin-bottom:44px; }
  .badge-row{ display:flex; flex-wrap:wrap; gap:12px; }

  .badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 16px 10px 10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    color:var(--silver);
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
    position:relative;
    overflow:hidden;
  }
  .badge:hover{
    transform:translateY(-2px);
    border-color:var(--metal-b);
    background:var(--surface-2);
  }
  .badge .icon{
    width:26px; height:26px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--metal-a), var(--metal-b));
    color:#0d0d0f;
    flex-shrink:0;
  }
  .badge .icon svg{ width:14px; height:14px; }

  /* ============================================================
     SERVICES — trạng thái trống, chờ nội dung
     ============================================================ */
  .empty-card{
    border:1px dashed var(--line);
    border-radius:var(--radius);
    padding:56px 32px;
    text-align:center;
    color:var(--silver-dim);
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    background:var(--surface);
  }
  .empty-card .big{
    font-family:'Space Grotesk', sans-serif;
    font-size:22px;
    color:var(--silver);
    margin-bottom:10px;
  }

  /* ============================================================
     DONATIONS
     ============================================================ */
  .donate-card{
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    flex-wrap:wrap;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
  }
  .donate-card .label{
    font-family:'Space Grotesk', sans-serif;
    font-size:22px;
    color:var(--silver-bright);
    margin-bottom:6px;
  }
  .donate-card .desc{ color:var(--silver-dim); font-size:14px; max-width:40ch; }

  .btn{
    appearance:none; border:none; cursor:pointer;
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    padding:14px 26px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--metal-a), var(--metal-c) 45%, var(--metal-b));
    color:#0d0d0f;
    font-weight:600;
    transition:transform .25s ease, box-shadow .25s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.35); }

  /* modal QR */
  .modal-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(9,9,10,0.8);
    backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .modal-overlay.open{ opacity:1; visibility:visible; }

  .modal-box{
    width:min(380px, 100%);
    background:linear-gradient(180deg, var(--surface), var(--void));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px;
    text-align:center;
    transform:scale(.92); transition:transform .3s ease;
  }
  .modal-overlay.open .modal-box{ transform:scale(1); }

  .modal-close{
    position:absolute; top:18px; right:20px;
    background:none; border:none; color:var(--silver-dim);
    font-family:'JetBrains Mono', monospace; font-size:20px; cursor:pointer;
  }
  .modal-box{ position:relative; }

  ..qr-box{
    width:200px;
    height:200px;
    margin:20px auto;
    border:1px dashed var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.qr-box img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

  .bank-info{ text-align:left; margin-top:20px; font-family:'JetBrains Mono', monospace; font-size:13px; }
  .bank-info div{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-soft); }
  .bank-info .k{ color:var(--silver-dim); }

  /* ============================================================
     SERVERS — danh sách server Discord (banner, tên, nút join)
     ============================================================ */
  .servers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:24px;
  }

  .server-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .3s ease, border-color .3s ease;
  }
  .server-card:hover{
    transform:translateY(-4px);
    border-color:var(--metal-b);
  }

  /* banner trên cùng — thay bằng <img> khi có ảnh thật */
  .server-banner{
    position:relative;
    width:100%;
    aspect-ratio:16/6;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.06), transparent 60%),
      linear-gradient(120deg, #232427, #2c2d31 40%, #1a1b1d);
    display:flex; align-items:center; justify-content:center;
    color:var(--silver-dim);
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    border-bottom:1px solid var(--line);
  }
  .server-banner img{
    width:100%; height:100%;
    object-fit:cover; display:block;
  }

  /* icon server đè lên góc banner */
  .server-icon{
    position:absolute;
    left:20px; bottom:-22px;
    width:56px; height:56px;
    border-radius:16px;
    background:linear-gradient(135deg, var(--metal-a), var(--metal-b));
    border:3px solid var(--surface);
    display:flex; align-items:center; justify-content:center;
    color:#0d0d0f;
    flex-shrink:0;
    overflow:hidden;
  }
  .server-icon svg{ width:26px; height:26px; }
  .server-icon img{
    width:100%; height:100%;
    object-fit:cover;
    border-radius:inherit;
  }

  .server-body{ padding:34px 22px 22px; }

  .server-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
  .server-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:20px;
    color:var(--silver-bright);
  }
  .server-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--silver-dim);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px 10px;
    white-space:nowrap;
  }
  .server-tag .pulse{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    background:#22c55e;
    margin-right:6px;
    box-shadow:0 0 0 rgba(34,197,94,0.5);
    animation:pulse-dot 2s infinite;
  }
  @keyframes pulse-dot{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
    70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }

  .server-desc{
    color:var(--silver-dim);
    font-size:14px;
    margin-bottom:22px;
  }

  /* nút Join — dùng chung style .btn (màu bạc) nhưng full-width trong card */
  .btn-block{
    display:block;
    width:100%;
    text-align:center;
  }

  /* khu chứa 2 nút Join + View Server nằm cạnh nhau */
  .server-actions{ display:flex; gap:10px; }
  .server-actions .btn,
  .server-actions .btn-outline{ flex:1; text-align:center; }

  /* nút viền bạc (dùng cho View Server) */
  .btn-outline{
    appearance:none; border:none; cursor:pointer;
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    padding:14px 20px;
    border-radius:999px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--silver);
    font-weight:600;
    transition:border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .btn-outline:hover{
    border-color:var(--metal-b);
    color:var(--silver-bright);
    transform:translateY(-2px);
  }

  /* popup "View Server" — icon tròn + thông số */
  .server-info-icon{
    width:64px; height:64px;
    margin:0 auto;
    border-radius:18px;
    overflow:hidden;
    background:var(--surface-2);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .server-info-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
  .bank-info .v{ color:var(--silver-bright); }

  /* ============================================================
     SERVICES — nhiều ô sản phẩm/dịch vụ cạnh nhau
     ============================================================ */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
  }

  /* ============================================================
     ToS
     ============================================================ */
  .tos-text p{ margin-bottom:16px; color:var(--silver); font-size:15px; }
  .tos-text p:first-child{ margin-top:0; }

  footer{
    text-align:center; padding:40px 20px 60px;
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    color:var(--silver-dim);
  }
  .online{
    color:#22c55e;
    font-weight:600;
}

  @media (max-width:640px){
    section{ padding:120px 20px 80px; }
    .donate-card{ flex-direction:column; align-items:flex-start; }
  }

  /* Tôn trọng người dùng giảm chuyển động */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; filter:none; }
  }