/* ===== THONGTIN - Tet Glass Card ===== */
:root{
  --bg1:#240000;
  --bg2:#7a0000;
  --red:#ff2b2b;
  --gold:#ffd66b;

  --text:#fff7f2;
  --muted: rgba(255,255,255,.78);

  --card: rgba(0,0,0,.22);
  --stroke: rgba(255,255,255,.14);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);

  display:flex;
  align-items:center;
  justify-content:center;
  padding: 44px 16px;

  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,214,107,.25), transparent 60%),
    radial-gradient(800px 520px at 80% 25%, rgba(255,43,43,.28), transparent 62%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* ánh sáng nền */
body::before, body::after{
  content:"";
  position:fixed;
  width:520px; height:520px;
  border-radius:50%;
  filter: blur(48px);
  opacity:.22;
  z-index:-1;
}
body::before{
  left:-180px; top:-200px;
  background: radial-gradient(circle at 35% 35%, var(--red), transparent 60%);
}
body::after{
  right:-200px; bottom:-230px;
  background: radial-gradient(circle at 40% 40%, var(--gold), transparent 62%);
}

/* card bao toàn bộ nội dung (wrapper) */
.wrap{
  width: min(620px, 94vw);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  padding: 26px 22px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 60px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* tiêu đề */
h1{
  margin: 0 0 16px;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .3px;
  line-height:1.15;
}
h1::after{
  content:"";
  display:block;
  height:2px;
  margin-top: 12px;
  background: linear-gradient(90deg, transparent, rgba(255,214,107,.55), transparent);
  opacity:.9;
}

/* từng dòng info như “pill” */
p{
  margin: 12px 0;
  padding: 14px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;

  display:flex;
  justify-content:space-between;
  gap:14px;
}
p strong{ color: var(--text); }

/* link quay về = button */
a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top: 16px;
  padding: 13px 16px;
  width: 100%;

  text-decoration:none;
  color: var(--text);
  font-weight: 750;
  letter-spacing: .2px;

  border-radius: 16px;
  border: 1px solid rgba(255,214,107,.28);
  background:
    radial-gradient(120% 160% at 30% 10%, rgba(255,214,107,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,43,43,.22), rgba(255,255,255,.06));
  box-shadow:
    0 14px 30px rgba(0,0,0,.32),
    0 0 0 4px rgba(255,214,107,.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
}
a::after{ content:"↩"; opacity:.9; }

a:hover{
  transform: translateY(-2px);
  border-color: rgba(255,214,107,.45);
  filter: brightness(1.06);
  box-shadow:
    0 18px 40px rgba(0,0,0,.38),
    0 0 0 6px rgba(255,214,107,.08);
}
a:active{ transform: translateY(0) scale(.995); }
a:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(255,43,43,.22),
    0 0 0 1px rgba(255,43,43,.55),
    0 18px 40px rgba(0,0,0,.38);
}

/* mobile */
@media (max-width: 420px){
  .wrap{ padding: 22px 16px; border-radius: 22px; }
  p{ padding: 12px 12px; border-radius: 14px; }
  a{ border-radius: 14px; }
}