/* VN Number Lite v3.2 – Ultimate (Full Edition) */
:root{
  --g1:#2563eb; --g2:#7c3aed;
  --bd:#e5e7eb; --text:#111827; --muted:#475569;
}
/* HERO */
.vnU-hero{
  position: relative;
  width: 100vw;          /* full màn hình */
  left: 50%;
  right: 50%;
  margin-left: -50vw;    /* bỏ giới hạn container */
  margin-right: -50vw;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  padding:80px 0 90px;
  color:#fff;
  text-align:center;
  border-radius:0 0 0 0; /* bỏ bo tròn để liền khối */
  box-shadow:0 18px 40px rgba(17,24,39,.18);
  z-index: 0;
}
.vnU-hero__inner {
  max-width: 900px;
  margin: 0 auto;
}
.vnU-hero__inner{max-width:980px;margin:0 auto}
.vnU-hero__icon{font-size:36px;margin-bottom:6px}
.vnU-hero__title{margin:4px 0 6px;font-size:32px;font-weight:800;color:#fff}
.vnU-hero__sub{margin:0;opacity:.95}

/* CARD */
.vnU-card{
  max-width:980px; margin:-30px auto 24px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--bd); border-radius:18px; padding:24px 22px;
  box-shadow:0 14px 44px rgba(17,24,39,.12);
  font-family:Inter,Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif; color:var(--text);
}

/* FIELD */
.vnU-field{margin-bottom:12px}
.vnU-label{font-weight:700;display:block;margin-bottom:8px}
.vnU-input{
  width:100%; border:3px solid var(--bd); border-radius:16px; padding:20px 22px; min-height:160px;
  font-size:18px; line-height:1.6; resize:vertical; outline:none;
  transition:border-color .25s, box-shadow .25s, background-color .25s;
}
.vnU-input:focus{border-color:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.20); background:#faf5ff}

/* ACTIONS */
.vnU-actions{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 6px}
.vnU-btn{border-radius:50px; padding:12px 20px; font-weight:700; cursor:pointer; transition:transform .05s, box-shadow .25s, opacity .2s}
.vnU-btn--primary{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6); border:none; color:#fff; flex:1 0 220px;
  box-shadow:0 10px 20px rgba(59,130,246,.25);
}
.vnU-btn--primary:hover{box-shadow:0 14px 26px rgba(59,130,246,.35)}
.vnU-btn--primary:active{transform:translateY(1px)}
.vnU-btn--ghost{background:#fff; border:2px solid var(--bd); color:#374151}
.vnU-btn--ghost:hover{border-color:#8b5cf6; color:#8b5cf6; background:#faf5ff}

/* SAMPLES */
.vnU-samples{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 6px}
.vnU-samples__title{font-weight:700; color:#374151}
.vnU-chip{border-radius:999px; border:1px solid #e5e7eb; padding:6px 12px; background:#fff; cursor:pointer}
.vnU-chip:hover{background:#faf5ff; border-color:#8b5cf6; color:#8b5cf6}

/* RESULTS */
.vnU-results{
  display:none; opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease;
  margin-top:14px; padding:18px; border:1px solid var(--bd); border-radius:16px; background:#fff;
  box-shadow:0 6px 20px rgba(17,24,39,.08);
}
.vnU-results.is-visible{display:block; opacity:1; transform:none}
.vnU-results__title{margin:0 0 12px; font-size:18px; color:#334155}
.vnU-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width: 900px){ .vnU-grid{grid-template-columns:1fr 1fr} }

.vnU-block{border:1px solid var(--bd); border-radius:14px; background:#fff8ff; padding:12px}
.vnU-block__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.vnU-block h3{margin:0; color:#7c3aed; font-size:15px}
.vnU-out{background:#fff; border:1px dashed var(--bd); border-radius:10px; padding:10px 12px; min-height:22px; line-height:1.6}
.vnU-copy{border-radius:999px; border:1px solid #f0d7ff; background:#f7ecff; padding:6px 12px; cursor:pointer}
.vnU-copy:hover{background:#eddcff}

/* HISTORY */
.vnU-history{margin-top:14px}
.vnU-history__title{font-weight:700; margin-bottom:8px}
#vnU-history-list{list-style:none; margin:0; padding:0}
#vnU-history-list li{display:flex; justify-content:space-between; gap:10px; border:1px solid var(--bd); border-radius:10px; padding:8px 10px; margin-bottom:8px; background:#fff}
#vnU-history-list li button{border:1px solid #e5e7eb; border-radius:999px; background:#eef2ff; padding:6px 10px}