:root{
  --bg:#0b0c10; --card:#12141b; --text:#e8eaf0; --muted:#aab0c0;
  --border: rgba(255,255,255,.08);
  --radius:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.page-header{margin-bottom:16px}
.muted{color:var(--muted)}
a{color:inherit}



/* =========================================================
   Modern Tech Dark (Fixed dark gradient + neon running frame)
   Hover: neon green/cyan gradient border on inputs/buttons/links
   ========================================================= */

:root{
  --bg0: #050711;
  --bg1: #0A0F22;

  --text: rgba(245,247,255,.92);
  --muted: rgba(245,247,255,.62);

  --cardA: rgba(12, 16, 34, .72);
  --cardB: rgba(10, 12, 26, .56);

  --stroke: rgba(180,200,255,.14);

  /* neon gradient (green/cyan) */
  --neon1: #414bbb;
  --neon2: #367fa1;
  --neon3: #6BFF8E;

  --radius: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);

  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --shadow2: 0 10px 34px rgba(0,0,0,.46);
}

/* ---------- Base page (fixed dark gradient) ---------- */
html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1)); /* fixed */
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing: border-box; }
input, select, textarea, button{ font: inherit; }

.container{
  width: min(960px, calc(100% - 40px));
  margin: 34px auto 74px;
}

.row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .container{ width: min(960px, calc(100% - 28px)); }
  .row{ grid-template-columns: 1fr; }
}

.muted{ color: var(--muted); }

/* =========================================================
   Reusable Neon Border Wrapper (no extra HTML needed)
   Technique: pseudo-elements + mask to show border only
   ========================================================= */
.neon-border{
  position: relative;
  border-radius: var(--radius);
  isolation: isolate;
}

.neon-border::before{
  content:"";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon2), var(--neon1));
  background-size: 300% 100%;
  filter: blur(30px);
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}

/* the visible border that runs around (animated) */
.neon-border::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon2), var(--neon1));
  background-size: 300% 100%;
  opacity: .95;
  pointer-events: none;
  z-index: -1;

  /* mask to keep only border area */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: borderRun 3.2s linear infinite;
}

@keyframes borderRun{
  to{ background-position: 300% 0; }
}

/* =========================================================
   Card with running neon border around frame
   ========================================================= */
.card{
  position: relative;
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Apply the running border effect to the card */
.card{
  /* attach neon-border behaviors without adding class in HTML */
  isolation: isolate;
}
.card::before{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon2), var(--neon1));
  background-size: 300% 100%;
  filter: blur(12px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.card::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon2), var(--neon1));
  background-size: 300% 100%;
  opacity: .9;
  pointer-events: none;
  z-index: 0;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: borderRun 4s linear infinite;
}

/* keep content above the border layers */
.card > *{ position: relative; z-index: 1; }

/* subtle shimmer inside card */
.card .muted{
  text-shadow: 0 0 22px rgba(53,214,255,.08);
}

/* =========================================================
   Titles with neon gradient glow
   ========================================================= */
h1{
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: .2px;

  background: linear-gradient(90deg, var(--neon2), var(--neon1), var(--neon3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 0 14px rgba(53,214,255,.12));
  animation: titleGlow 4.6s var(--ease) infinite;
}

@keyframes titleGlow{
  0%   { background-position: 0% 50%; filter: drop-shadow(0 0 12px rgba(53,214,255,.12)); }
  50%  { background-position: 100% 50%; filter: drop-shadow(0 0 16px rgba(25,247,198,.14)); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 0 12px rgba(107,255,142,.10)); }
}

/* =========================================================
   Badge (including "← Về danh sách") with neon hover border
   ========================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(180,200,255,.16);
  background: rgba(8, 10, 22, .62);
  color: rgba(245,247,255,.80);
  font-size: 12.5px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
  position: relative;
}

/* neon border on hover for any badge link (including back button) */
a.badge::after{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3));
  opacity: 0;
  pointer-events: none;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  transition: opacity .22s var(--ease);
}

a.badge:hover{
  transform: translateY(-1px);
  filter: saturate(1.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.46);
}

a.badge:hover::after{
  opacity: 1;
}

a.badge:active{ transform: translateY(0) scale(.99); }

/* =========================================================
   Inputs / Select / Textarea — neon border only on hover/focus
   ========================================================= */
label.badge{
  margin-bottom: 8px;
  width: fit-content;
}

/* base */
.input, .select{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(180,200,255,.18);
  background: rgba(8, 10, 22, .64);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}

textarea.input{
  resize: vertical;
  min-height: 120px;
  line-height: 1.42;
}

.input::placeholder{ color: rgba(245,247,255,.38); }

/* Neon border effect using box-shadow + gradient ring mimic */
.input:hover, .select:hover{
  transform: translateY(-1px);
  border-color: rgba(25,247,198,.45);
  box-shadow:
    0 0 0 1px rgba(25,247,198,.22),
    0 0 0 6px rgba(25,247,198,.10),
    0 18px 60px rgba(53,214,255,.08);
}

/* Focus = brighter (neon green/cyan gradient vibe) */
.input:focus, .select:focus{
  border-color: rgba(53,214,255,.65);
  box-shadow:
    0 0 0 1px rgba(53,214,255,.25),
    0 0 0 7px rgba(25,247,198,.12),
    0 22px 70px rgba(53,214,255,.10);
}

/* select arrow */
.select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245,247,255,.70) 50%),
    linear-gradient(135deg, rgba(245,247,255,.70) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.select option{
  background: #0A0F22;
  color: var(--text);
}

/* validity hints (optional) */
.input:required:invalid{ border-color: rgba(255,120,120,.28); }
.input:required:valid{ border-color: rgba(107,255,142,.28); }

/* =========================================================
   Buttons — neon gradient border on hover + glow
   ========================================================= */
.btn{
  position: relative;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: .25px;
  color: rgba(5, 8, 14, .95);
  cursor: pointer;
  user-select: none;

  /* dark base (so hover border stands out) */
  background: linear-gradient(180deg, rgba(18,24,48,.92), rgba(10,14,28,.92));
  box-shadow: var(--shadow2);
  transform: translateZ(0);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

/* inner sheen */
.btn::before{
  content:"";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  opacity: .7;
  pointer-events: none;
}

/* gradient border (only visible on hover/focus) */
.btn::after{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3), var(--neon2), var(--neon1));
  background-size: 280% 100%;
  opacity: 0;
  pointer-events: none;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  transition: opacity .18s var(--ease);
}

/* hover = show border + glow + animate gradient */
.btn:hover{
  transform: translateY(-2px);
  filter: saturate(1.15);
  box-shadow:
    0 22px 70px rgba(25,247,198,.10),
    0 18px 60px rgba(53,214,255,.10),
    var(--shadow2);
}

.btn:hover::after{
  opacity: 1;
  animation: borderRun 2.2s linear infinite;
}

.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 7px rgba(25,247,198,.12),
    0 22px 70px rgba(53,214,255,.12),
    var(--shadow2);
}

.btn:focus-visible::after{
  opacity: 1;
  animation: borderRun 2.2s linear infinite;
}

.btn:active{
  transform: translateY(0) scale(.99);
}

/* =========================================================
   Post message badge
   ========================================================= */
#postMsg.badge{
  min-height: 34px;
  justify-content: center;
  opacity: .92;
}

/* optional states if you add classes via JS */
#postMsg.success{
  border-color: rgba(107,255,142,.34);
  box-shadow: 0 12px 40px rgba(107,255,142,.10);
}
#postMsg.error{
  border-color: rgba(255,120,120,.34);
  box-shadow: 0 12px 40px rgba(255,120,120,.10);
}

/* Selection */
::selection{ background: rgba(53,214,255,.20); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card::after, .card::before, body::before, body::after, .btn:hover::after{ animation: none !important; }
  *{ transition: none !important; }
}