/* ============================================================
   VayTốcĐộ - Xóa tài khoản & dữ liệu
   ============================================================ */

.del-page{
  padding:60px 0 88px;
  background:
    radial-gradient(760px 420px at 84% 4%, var(--cyan-soft) 0%, transparent 62%),
    radial-gradient(620px 400px at 6% 96%, var(--pink-soft) 0%, transparent 60%),
    var(--bg-alt);
  border-bottom:3px solid var(--line);
}
.del-wrap{ max-width:760px; }

.del-head{ text-align:center; margin-bottom:38px; }
.del-head h1{
  font-size:clamp(30px,4.4vw,46px); font-weight:800; letter-spacing:-.8px; margin-bottom:12px;
}
.del-head p{ margin:0 auto; color:var(--ink-2); font-size:16.5px; max-width:52ch; }

/* ---------- progress ---------- */
.del-steps{
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; margin-bottom:30px;
}
.ds-item{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:var(--ink-3);
  background:#fff; border:2.5px solid var(--line); border-radius:999px;
  padding:6px 16px 6px 8px;
  transition:background .2s, color .2s, box-shadow .2s;
}
.ds-item > span{
  width:24px; height:24px; border-radius:50%; border:2.5px solid var(--line);
  background:#fff; display:grid; place-items:center;
  font-family:'Baloo 2',sans-serif; font-size:14px; line-height:1; color:var(--ink);
}
.ds-item.is-active{
  background:var(--cyan); color:var(--ink); box-shadow:var(--sh-sm);
}
.ds-item.is-done{ background:var(--cyan-soft); color:var(--ink); }
.ds-item.is-done > span{ background:var(--cyan); }
.ds-item.is-active > span{ background:#fff; }

/* ---------- card ---------- */
.del-card{
  background:#fff; border:var(--bd); border-radius:var(--r-lg);
  box-shadow:8px 8px 0 var(--cyan);
  padding:40px 38px;
}

.pane{ display:none; }
.pane.is-on{ display:block; animation:paneIn .3s ease both; }
@keyframes paneIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.pane-title{
  font-family:'Baloo 2',sans-serif; font-size:23px; font-weight:800;
  line-height:1.3; margin:0 0 22px; text-align:center;
}

/* ---------- inputs ---------- */
.in-field{ display:block; margin-bottom:18px; }
.in-label{
  display:block; font-size:14.5px; font-weight:800; color:var(--ink-2); margin-bottom:8px;
}
.in-field input{
  width:100%; height:58px; padding:0 20px;
  font-family:'Nunito',sans-serif; font-size:16.5px; font-weight:600; color:var(--ink);
  background:#fff; border:2.5px solid var(--line); border-radius:var(--r-sm);
  outline:none; box-shadow:3px 3px 0 rgba(17,20,23,.12);
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.in-field input::placeholder{ color:#a8b1b8; font-weight:600; }
.in-field input:focus{
  box-shadow:4px 4px 0 var(--cyan); transform:translate(-1px,-1px);
}

.code-row{ display:flex; align-items:flex-end; gap:12px; }
.in-field-grow{ flex:1 1 auto; margin-bottom:0; }
.count-btn{
  flex:0 0 auto; height:58px; min-width:140px; padding:0 18px;
  font-family:'Baloo 2',sans-serif; font-size:15px; font-weight:700; color:var(--ink);
  background:var(--yellow); border:2.5px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-sm); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.count-btn:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line); }
.count-btn:active:not(:disabled){ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }
.count-btn:disabled{ background:#eceff1; color:var(--ink-3); cursor:not-allowed; box-shadow:2px 2px 0 var(--line); }

/* ---------- main button ---------- */
.del-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:60px; margin-top:26px;
  font-family:'Baloo 2',sans-serif; font-size:19px; font-weight:700;
  color:#fff; background:var(--ink);
  border:2.5px solid var(--line); border-radius:999px;
  box-shadow:var(--sh-sm); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.del-btn:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--line); }
.del-btn:active:not(:disabled){ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }
.del-btn:disabled{ opacity:.55; cursor:not-allowed; }
.del-btn-ghost{ background:var(--cyan); color:var(--ink); text-decoration:none; }
.del-btn-sm{ height:48px; font-size:16px; margin-top:20px; }

/* ---------- notice ---------- */
.notice-box{
  background:var(--yellow-soft); border:2.5px solid var(--line); border-radius:var(--r);
  padding:24px 26px;
}
.notice-box p{ margin:0 0 12px; font-size:16px; color:var(--ink-2); }
.notice-box p:last-child{ margin-bottom:0; }
.notice-box strong{ color:var(--ink); font-size:17px; }

/* ---------- done ---------- */
.pane-done{ text-align:center; }
.pane-done.is-on{ display:block; }
.done-badge{
  width:92px; height:92px; margin:6px auto 20px;
  display:grid; place-items:center;
  background:var(--cyan); border:var(--bd); border-radius:50%; box-shadow:var(--sh);
}
.done-text{
  font-family:'Baloo 2',sans-serif; font-size:24px; font-weight:800; margin:0;
}

/* ---------- info ---------- */
.del-info{
  margin-top:34px; background:#fff; border:2.5px solid var(--line);
  border-radius:var(--r); padding:26px 28px; box-shadow:var(--sh-sm);
}
.del-info h3{ font-size:19px; font-weight:800; margin-bottom:14px; }
.del-info ul{ display:grid; gap:10px; }
.del-info li{
  position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-2);
}
.del-info li::before{
  content:''; position:absolute; left:4px; top:9px;
  width:9px; height:9px; border:2px solid var(--line); border-radius:3px; background:var(--pink);
}
.del-info a{ color:var(--cyan-dark); font-weight:700; text-decoration:underline; word-break:break-word; }

/* ---------- loading ---------- */
.loading-mask{
  position:fixed; inset:0; z-index:300; background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center;
}
.loading-mask.is-on{ display:flex; }
.spinner{
  width:56px; height:56px; border-radius:50%;
  border:6px solid var(--cyan-soft); border-top-color:var(--cyan-dark);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- message dialog ---------- */
.msg-mask{
  position:fixed; inset:0; z-index:320; background:rgba(10,14,17,.82);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.msg-mask.is-on{ display:flex; }
.msg-box{
  position:relative; width:100%; max-width:400px; text-align:center;
  background:#fff; border:var(--bd); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:40px 32px 32px;
  animation:paneIn .25s ease both;
}
.msg-ico{
  width:66px; height:66px; margin:0 auto 18px;
  display:grid; place-items:center;
  font-family:'Baloo 2',sans-serif; font-size:36px; font-weight:800; line-height:1;
  background:var(--pink); border:var(--bd); border-radius:50%; box-shadow:var(--sh-sm);
}
.msg-text{
  margin:0; font-size:17px; font-weight:700; color:var(--ink-2); word-break:break-word;
}
.msg-close{
  position:absolute; top:12px; right:14px; width:38px; height:38px;
  font-size:24px; line-height:1; color:var(--ink);
  background:#fff; border:2.5px solid var(--line); border-radius:50%;
  cursor:pointer; box-shadow:2px 2px 0 var(--line);
}
.msg-close:hover{ background:var(--yellow); }

/* ---------- footer tweak ---------- */
.del-page + .site-footer{ padding:34px 0 26px; }
.site-footer .f-bottom a{ color:var(--cyan); }

/* ---------- responsive ---------- */
@media (max-width:620px){
  .del-page{ padding:40px 0 60px; }
  .del-card{ padding:26px 20px; }
  .pane-title{ font-size:20px; }
  .del-steps{ gap:6px; }
  .ds-item{ font-size:12.5px; padding:5px 12px 5px 6px; }
  .ds-item > span{ width:21px; height:21px; font-size:12.5px; }
  .code-row{ flex-direction:column; align-items:stretch; gap:14px; }
  .count-btn{ width:100%; }
  .in-field input, .del-btn, .count-btn{ height:54px; }
  .del-info{ padding:22px 18px; }
}