/* ພື້ນຫຼັງສວຍໆ ສຳລັບໜ້າກ່ອນເຂົ້າລະບົບ (login / ສະໝັກ / ຢືນຢັນອີເມວ / join ແບບ Guest)
   ໂຫຼດສະເພາະຜູ້ທີ່ຍັງບໍ່ login — ເສັ້ນເຄືອຂ່າຍ (canvas) ມາຈາກ landing-network.js */
.lm-auth-bg {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(rgba(27,122,75,.13) 1px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(135deg, #e3f2e9 0%, #f5f9f6 45%, #e8f3ec 70%, #dcefe3 100%);
  background-size: 26px 26px, 200% 200%;
  animation: lmAuthShift 18s ease-in-out infinite alternate;
}
/* ກ້ອນແສງຟຸ້ງ ສີຂຽວ/ທອງ ລອຍຊ້າໆ */
.lm-auth-bg::before, .lm-auth-bg::after {
  content: ''; position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.lm-auth-bg::before {
  width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax;
  background: radial-gradient(circle, rgba(27,122,75,.38), rgba(27,122,75,0) 68%);
  animation: lmAuthFloatA 22s ease-in-out infinite alternate;
}
.lm-auth-bg::after {
  width: 40vmax; height: 40vmax; right: -12vmax; bottom: -18vmax;
  background: radial-gradient(circle, rgba(201,162,39,.34), rgba(201,162,39,0) 68%);
  animation: lmAuthFloatB 26s ease-in-out infinite alternate;
}
@keyframes lmAuthShift  { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
@keyframes lmAuthFloatA { from { transform: translate(0,0) scale(1); } to { transform: translate(14vmax,10vmax) scale(1.15); } }
@keyframes lmAuthFloatB { from { transform: translate(0,0) scale(1); } to { transform: translate(-12vmax,-8vmax) scale(1.2); } }

/* ກາດ: ແກ້ວໂປ່ງໃສ + ເສັ້ນທອງດ້ານເທິງ */
.lm-auth-bg .lm-card {
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.75); border-top: 3px solid var(--lm-gold);
  box-shadow: 0 24px 60px rgba(11,61,46,.18), 0 2px 8px rgba(11,61,46,.08) !important;
  animation: lmAuthRise .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lmAuthRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lm-auth-bg, .lm-auth-bg::before, .lm-auth-bg::after, .lm-auth-bg .lm-card { animation: none; }
}

/* ໜ້າ Login: ເຊື່ອງເມນູທາງຊ້າຍ, ສະແດງໂລໂກຢູ່ແຖບເທິງແທນ */
.lm-noside .lm-side { display: none !important; }
/* ໂລໂກ/ຊື່ຢູ່ແຖບເທິງສະແດງສະເພາະມືຖື (ຈໍໃຫຍ່ສະແດງຢູ່ຄໍລຳຊ້າຍແລ້ວ) */
@media (max-width: 767.98px) { .lm-noside .lm-top-brand.d-md-none { display: inline-flex !important; align-items: center; } }
.lm-noside .lm-topbar button[data-bs-target="#lmSide"] { display: none !important; }

/* ===== ໜ້າ Login ແບບ 2 ຄໍລຳ: ຊ້າຍ = ຊື່ໂປຣແກຣມ + ພື້ນຫຼັງ, ຂວາ = ຟອມ ===== */
.lm-noside main { position: relative; }
.lm-login-flash { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 5; width: min(520px, 92%); }
.lm-login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - 55px); position: relative; z-index: 1; }

.lm-login-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center;
  padding: 3rem 2.5rem; color: #fff; text-align: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(201,162,39,.30), rgba(201,162,39,0) 45%),
    radial-gradient(circle at 85% 90%, rgba(27,122,75,.55), rgba(27,122,75,0) 55%),
    linear-gradient(150deg, #0b3d2e 0%, #11603f 55%, #1b7a4b 100%);
}
/* ຮູບພື້ນຫຼັງ (ຈາກ admin/landing-background) + ຊັ້ນສີຂຽວທັບ */
.lm-login-hero.has-bg::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-img) center / cover no-repeat;
}
.lm-login-hero.has-bg::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(11,61,46, calc(var(--hero-ov, .55) + .1)), rgba(11,61,46, var(--hero-ov, .55)));
}
.lm-login-hero-inner { max-width: 460px; }
.lm-login-logo { max-height: 120px; max-width: 70%; width: auto; object-fit: contain; background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom: 1.25rem; }
.lm-login-form-logo { max-height: 88px; max-width: 70%; width: auto; object-fit: contain; }
.lm-login-icon { width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem;
  background: rgba(255,255,255,.14); border: 2px solid rgba(201,162,39,.8); }
.lm-login-name { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.2; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.lm-login-rule { width: 64px; height: 3px; border-radius: 3px; background: var(--lm-gold); margin: 1rem auto; }
.lm-login-tag { font-size: 1.05rem; opacity: .92; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

.lm-login-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; position: relative; z-index: 1; }
.lm-login-form-inner { width: 100%; max-width: 420px; }

@media (max-width: 767.98px) {
  .lm-login { grid-template-columns: 1fr; min-height: 0; }
  .lm-login-hero { padding: 1.75rem 1.25rem; }
  .lm-login-form-logo { max-height: 68px; }
  .lm-login-icon { width: 56px; height: 56px; font-size: 1.6rem; margin-bottom: .75rem; }
  .lm-login-name { font-size: 1.5rem; }
  .lm-login-rule { margin: .6rem auto; }
  .lm-login-tag { font-size: .95rem; }
  .lm-login-flash { position: static; transform: none; width: auto; padding: .75rem .75rem 0; }
}