/* ============================================================
   AUTH COLORFUL UI - Buff MXH (login / register / forgot-password)
   Phong cách: nền trắng + mảng màu pastel (xanh lá / xanh dương
   / vàng / đỏ) xếp nghệ thuật, card trắng sạch, accent gradient
   nhiều màu. Tươi sáng, trẻ trung, không đại trà.
   Chạy trên nền Bootstrap/Datum/AdminLTE sẵn có. Không thêm thư viện.
   ============================================================ */

:root{
  --c-green:#22c55e;
  --c-blue:#3b82f6;
  --c-yellow:#facc15;
  --c-red:#ef4444;
  --ink:#0f172a;
  --ink-soft:#64748b;
  --line:#e6e8ee;
}

.auth-colorful-body{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color:var(--ink);
}

/* ----- Khối màu trang trí (bo góc, xếp nghệ thuật) ----- */
.color-blob{
  position:absolute;
  border-radius:34px;
  filter:blur(2px);
  z-index:0;
  animation:colorFloat 16s ease-in-out infinite;
  box-shadow:0 20px 60px rgba(15,23,42,.10);
}
.color-blob.green{ width:300px;height:300px;background:linear-gradient(135deg,#bbf7d0,#22c55e);top:-90px;left:-80px;transform:rotate(-12deg); }
.color-blob.blue { width:260px;height:260px;background:linear-gradient(135deg,#bfdbfe,#3b82f6);top:8%;right:-70px;animation-delay:-4s; }
.color-blob.yellow{ width:230px;height:230px;background:linear-gradient(135deg,#fef08a,#facc15);bottom:-70px;left:12%;animation-delay:-8s;transform:rotate(10deg); }
.color-blob.red{ width:210px;height:210px;background:linear-gradient(135deg,#fecaca,#ef4444);bottom:6%;right:10%;animation-delay:-12s; }
.color-blob.small{ width:120px;height:120px;border-radius:50%; }
.color-blob.small.s1{ top:40%;left:6%;background:#a7f3d0; }
.color-blob.small.s2{ top:18%;left:30%;background:#fde68a;animation-delay:-6s;}
@keyframes colorFloat{
  0%,100%{ transform:translate(0,0) rotate(var(--rot,0deg)); }
  50%{ transform:translate(20px,-18px) rotate(calc(var(--rot,0deg) + 8deg)); }
}

/* Optional nền ảnh mờ */
.auth-colorful-body .auth-bg-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.06;z-index:0;
}

/* chấm trống nhẹ */
.color-dots{
  position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(15,23,42,.06) 1.4px,transparent 1.4px);
  background-size:30px 30px;
  mask-image:radial-gradient(circle at center,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at center,#000 25%,transparent 80%);
}

/* ----- Card trắng ----- */
.cf-card{
  position:relative;z-index:2;
  width:100%;max-width:460px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(15,23,42,.14), 0 8px 24px rgba(15,23,42,.06);
  padding:36px 34px 28px;
  animation:cfCardIn .7s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
@keyframes cfCardIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* dải màu trên đỉnh card */
.cf-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--c-green),var(--c-blue),var(--c-yellow),var(--c-red));
}

.cf-card .cf-logo{ text-align:center;margin-bottom:14px; }
.cf-card .cf-logo img{ max-height:58px;width:auto;transition:transform .3s; }
.cf-card .cf-logo img:hover{ transform:scale(1.06); }

.cf-card h3{
  font-size:27px;font-weight:800;text-align:center;margin:0 0 6px;
  color:var(--ink);letter-spacing:-.2px;
}
/* chữ nhiều màu cho tiêu đề */
.cf-card h3 .cf-grad{
  background:linear-gradient(90deg,var(--c-green),var(--c-blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cf-card .cf-sub{
  text-align:center;color:var(--ink-soft);font-size:14px;margin-bottom:22px;
}

/* ----- Field ----- */
.cf-field{ position:relative;margin-bottom:16px; }
.cf-field label{
  display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:7px;
}
.cf-field label .cf-link{
  float:right;color:var(--c-blue);font-weight:600;text-decoration:none;
}
.cf-field label .cf-link:hover{ text-decoration:underline; }

.cf-input-wrap{ position:relative;display:flex;align-items:center; }
.cf-input-wrap .cf-ico{
  position:absolute;left:14px;font-size:16px;pointer-events:none;transition:.2s;
}
/* đổi màu icon theo type */
.cf-input-wrap .cf-ico.green{ color:var(--c-green); }
.cf-input-wrap .cf-ico.blue { color:var(--c-blue); }
.cf-input-wrap .cf-ico.yellow{ color:#d9a406; }
.cf-input-wrap .cf-ico.red{ color:var(--c-red); }

.cf-input{
  width:100%;height:52px;padding:0 14px 0 44px;
  border-radius:14px;border:1.5px solid var(--line);
  background:#f8fafc;color:var(--ink);font-size:15px;
  transition:all .22s ease;outline:none;
}
.cf-input::placeholder{ color:#94a3b8; }
.cf-input:focus{
  border-color:var(--c-blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(59,130,246,.16);
}
.cf-input:focus ~ .cf-ico,
.cf-input-wrap:focus-within .cf-ico{ transform:scale(1.15); }
.cf-input.has-toggle{ padding-right:46px; }

.cf-toggle-eye{
  position:absolute;right:10px;background:transparent;border:none;
  color:#94a3b8;cursor:pointer;padding:8px;font-size:16px;border-radius:8px;transition:.2s;
}
.cf-toggle-eye:hover{ color:var(--c-blue);background:#eff6ff; }

/* reCAPTCHA */
.cf-recaptcha{ display:flex;justify-content:center;margin:6px 0 4px; }

/* checkbox */
.cf-check{
  display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#475569;
  margin:6px 0 14px;line-height:1.5;user-select:none;cursor:pointer;
}
.cf-check input{ margin-top:3px;width:18px;height:18px;accent-color:var(--c-green);flex:0 0 auto; }
.cf-check a{ color:var(--c-blue);text-decoration:none;font-weight:600; }
.cf-check a:hover{ text-decoration:underline; }

/* ----- Submit button (gradient 4 màu) ----- */
.cf-btn{
  width:100%;height:54px;border:none;border-radius:16px;
  font-size:16px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(120deg,var(--c-green),var(--c-blue),var(--c-yellow),var(--c-red));
  background-size:280% 280%;
  box-shadow:0 14px 28px rgba(59,130,246,.32);
  transition:transform .18s,box-shadow .25s,background-position .8s;
  position:relative;overflow:hidden;
}
.cf-btn:hover:not(:disabled){
  transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 18px 34px rgba(239,68,68,.30);
}
.cf-btn:active:not(:disabled){ transform:translateY(0); }
.cf-btn:disabled{ opacity:.7;cursor:not-allowed; }
.cf-btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:cfShine 4s ease-in-out infinite;
}
@keyframes cfShine{ 0%{left:-130%;} 60%{left:150%;} 100%{left:150%;} }

/* footer */
.cf-foot{ text-align:center;font-size:14px;color:#475569;margin-top:18px; }
.cf-foot a{ font-weight:800;text-decoration:none;transition:.2s;
  background:linear-gradient(90deg,var(--c-green),var(--c-blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.cf-foot a:hover{ filter:brightness(1.1); }

/* back home */
.cf-back-home{
  position:fixed;top:18px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:30px;
  background:#fff;border:1.5px solid var(--line);color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.08);transition:.2s;
}
.cf-back-home:hover{ transform:translateX(-3px);border-color:var(--c-blue);color:var(--c-blue); }

/* strength meter (đa màu) */
.cf-strength{ margin:-6px 0 14px; }
.cf-strength-bar{ height:7px;border-radius:7px;background:#e6e8ee;overflow:hidden; }
.cf-strength-fill{ height:100%;width:0%;border-radius:7px;transition:.3s; }
.cf-strength-text{ font-size:12px;margin-top:5px;color:#64748b;display:flex;justify-content:space-between;font-weight:600; }

/* perks (4 ô màu) */
.cf-perks{ list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.cf-perks li{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#334155;
  border-radius:14px;padding:10px 12px;border:1.5px solid var(--line);
}
.cf-perks li i{ font-size:15px; }
.cf-perks li:nth-child(1){ background:#ecfdf5;border-color:#a7f3d0; }
.cf-perks li:nth-child(1) i{ color:var(--c-green); }
.cf-perks li:nth-child(2){ background:#eff6ff;border-color:#bfdbfe; }
.cf-perks li:nth-child(2) i{ color:var(--c-blue); }
.cf-perks li:nth-child(3){ background:#fffbeb;border-color:#fde68a; }
.cf-perks li:nth-child(3) i{ color:#d9a406; }
.cf-perks li:nth-child(4){ background:#fef2f2;border-color:#fecaca; }
.cf-perks li:nth-child(4) i{ color:var(--c-red); }

/* badge stats (đăng ký) */
.cf-stats{
  display:flex;gap:12px;justify-content:center;margin-bottom:18px;
}
.cf-stat{
  text-align:center;background:#f8fafc;border:1.5px solid var(--line);
  border-radius:14px;padding:8px 14px;min-width:84px;
}
.cf-stat b{ display:block;font-size:18px;font-weight:800;line-height:1.1; }
.cf-stat span{ font-size:11px;color:#64748b;font-weight:600; }
.cf-stat.g b{ color:var(--c-green); }
.cf-stat.b b{ color:var(--c-blue); }
.cf-stat.y b{ color:#d9a406; }

/* responsive */
@media (max-width:520px){
  .cf-card{ padding:26px 20px 22px;border-radius:22px; }
  .cf-card h3{ font-size:23px; }
  .cf-perks{ grid-template-columns:1fr; }
  .cf-back-home{ top:10px;left:10px; }
}

/* loader datum */
.auth-colorful-body #loading{ position:fixed;inset:0;z-index:9999;background:rgba(255,255,255,.7);display:none; }