/* ============================================================
   หอพักนักศึกษา มทส. — ชุดสไตล์หน้าเข้าสู่ระบบ / ลืมรหัสผ่าน (lg-ui)
   ใช้ใน login.php และ forgot.php — ฉากหอพักอยู่ที่ controll/lg-scene.php
   ฝั่งซ้าย: แผงส้ม มทส. + ฉากหอพัก (ไฟห้อง/ราวตากผ้า/จักรยาน/เมฆ/นก)
   ฝั่งขวา: ฟอร์ม
   ทุก class ขึ้นต้นด้วย lg- (login) — สำรองแบบเดิมไว้ที่ login.php.bak-20261026
   ============================================================ */
:root {
    --lg-brand:      #F26522;   /* ส้ม มทส. */
    --lg-deep:       #b84508;   /* ปุ่ม/ลิงก์ — ตัวหนังสือขาวอ่านชัด */
    --lg-deeper:     #8a3305;
    --lg-tint:       #fff0e6;
    --lg-tint-2:     #fdf1e8;
    --lg-bg:         #fffaf6;
    --lg-ink:        #2a1406;
    --lg-muted:      #6e5a4c;
    --lg-line:       #f3e1d4;
    --lg-brand-rgb:  242, 101, 34;

    /* โทนฉากหอพักบนพื้นส้ม */
    --lg-bldg:       #d4530f;
    --lg-bldg-far:   #e05c16;
    --lg-trim:       #a83f0a;
    --lg-ground:     #8f3206;
    --lg-light:      #fff1d6;

    --lg-radius:     12px;
    --lg-ease:       cubic-bezier(.2, .8, .25, 1);
    --lg-spring:     cubic-bezier(.34, 1.56, .64, 1);
}

html, body { min-height: 100%; }

/* หน้านี้ไม่ได้โหลด reset จึงตั้ง box-sizing เอง */
.lg-auth, .lg-auth *, .lg-auth *::before, .lg-auth *::after { box-sizing: border-box; }

/* concss.php บังคับฟอนต์ด้วย !important — ล็อกให้เป็นชุดเดียวทั้งหน้า */
.lg-auth, .lg-auth * { font-family: "Kanit", sans-serif !important; }

body {
    margin: 0;
    background: var(--lg-bg);
    color: var(--lg-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- โครงหน้า 2 ฝั่ง (จอแคบ: แผงส้มขึ้นไปอยู่ด้านบน) ---------- */
.lg-auth {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

/* ============================================================
   ฝั่งซ้าย — แผงส้ม มทส.
   ============================================================ */
.lg-hero {
    position: relative;
    flex: 1 1 480px;
    min-width: 0;
    min-height: 100vh;
    background: var(--lg-brand);
    color: var(--lg-ink);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.lg-hero-in {
    position: relative;
    z-index: 3;
    padding: 44px 56px 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* วงแหวนตกแต่ง หมุนช้า ๆ */
.lg-ring {
    position: absolute;
    z-index: 0;
    right: -140px; top: -140px;
    width: 420px; height: 420px;
    border-radius: 50%;
    border: 58px solid rgba(255, 255, 255, .13);
    animation: lga-spin-slow 60s linear infinite;
    pointer-events: none;
}
.lg-ring::after {
    content: "";
    position: absolute;
    left: 34px; top: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
}
@keyframes lga-spin-slow { to { transform: rotate(360deg); } }

.lg-brandrow { display: flex; align-items: center; gap: 14px; }
.lg-logo {
    width: 56px; height: 56px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(90, 30, 0, .45);
    overflow: hidden;
    animation: lga-bob 6s ease-in-out infinite;
}
.lg-logo img { width: 40px; height: auto; display: block; }
@keyframes lga-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-5px) rotate(-4deg); }
}
.lg-brandtext { display: flex; flex-direction: column; line-height: 1.3; }
.lg-brandtext b { font-size: 18px; font-weight: 600; }
.lg-brandtext span { font-size: 13px; font-weight: 400; }

.lg-headline { margin: 0; font-size: 46px; line-height: 1.18; font-weight: 600; letter-spacing: -.3px; }
.lg-headline em { font-style: normal; color: #fff; }

/* "วันนี้จะ ___" — คำหมุนเปลี่ยนเองทุก 3 วินาที */
.lg-rotate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 19px;
    font-weight: 500;
}
.lg-rotate-box {
    display: inline-block;
    height: 42px;
    overflow: hidden;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--lg-ink);
    color: #fff;
    vertical-align: middle;
}
.lg-rotate-list {
    display: flex;
    flex-direction: column;
    animation: lga-rotate 12s var(--lg-ease) infinite;
}
.lg-rotate-list span { height: 42px; line-height: 42px; white-space: nowrap; }
.lg-rotate-list span::after { content: " ✦"; color: var(--lg-brand); font-size: 13px; }
@keyframes lga-rotate {
    0%,  28% { transform: translateY(0); }
    33%, 61% { transform: translateY(-25%); }
    66%, 94% { transform: translateY(-50%); }
    100%     { transform: translateY(-75%); }
}

.lg-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.lg-points li {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    font-size: 15px; font-weight: 500;
    transition: background-color .25s ease, transform .3s var(--lg-spring);
}
.lg-points li:hover { background: rgba(255, 255, 255, .2); transform: translateX(6px); }
.lg-points .lg-pi {
    width: 42px; height: 42px; flex: none;
    border-radius: 12px;
    background: #fff;
    color: var(--lg-deep);
    display: flex; align-items: center; justify-content: center;
    transition: transform .4s var(--lg-spring);
}
.lg-points li:hover .lg-pi { transform: rotate(-10deg) scale(1.08); }
.lg-points svg { width: 21px; height: 21px; }

/* ฟองไอคอนลอย (กุญแจ / เตียง / ประแจ) */
.lg-bubble {
    position: absolute;
    z-index: 2;
    width: 54px; height: 54px;
    border-radius: 18px;
    background: #fff;
    color: var(--lg-deep);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 28px -12px rgba(90, 30, 0, .5);
    animation: lga-float 7s ease-in-out infinite;
    pointer-events: none;
}
.lg-bubble svg { width: 26px; height: 26px; }
.lg-bubble--1 { right: 12%; top: 22%; animation-delay: -1s; }
.lg-bubble--2 { right: 26%; top: 38%; width: 44px; height: 44px; border-radius: 14px; animation-delay: -3.4s; animation-duration: 8s; }
.lg-bubble--3 { right: 8%;  top: 47%; width: 40px; height: 40px; border-radius: 13px; animation-delay: -5.2s; animation-duration: 9s; }
.lg-bubble--2 svg, .lg-bubble--3 svg { width: 20px; height: 20px; }
@keyframes lga-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-16px) rotate(6deg); }
}

/* ============================================================
   ฉากหอพัก — วาดด้วย SVG ทั้งหมด (ไม่ใช้ไฟล์ภาพ), สีทึบ ไม่มีไล่สี
   ============================================================ */
.lg-scene-wrap {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: 100%;
    transform: translate3d(var(--px, 0), 0, 0);
    transition: transform .4s ease-out;
}
.lg-scene { display: block; width: 100%; height: auto; max-height: 46vh; }

.lg-s-bldg     { fill: var(--lg-bldg); }
.lg-s-bldg-far { fill: var(--lg-bldg-far); }
.lg-s-trim     { fill: var(--lg-trim); }
.lg-s-ground   { fill: var(--lg-ground); }
.lg-s-tree     { fill: #c9480b; }
.lg-s-sign     { fill: #fff; }
.lg-s-signtxt  { fill: var(--lg-deep); font-size: 9px; font-weight: 600; letter-spacing: 1px; }

/* หน้าต่างห้องพัก — ไฟติด/ดับสลับกันไปคนละจังหวะ */
.lg-win {
    fill: var(--lg-light);
    opacity: .18;
    animation: lga-win var(--d, 9s) linear var(--t, 0s) infinite;
}
.lg-win--on { opacity: .95; }
@keyframes lga-win {
    0%,  38%  { opacity: .18; }
    39%, 76%  { opacity: .95; }
    77%, 100% { opacity: .18; }
}

/* ดวงอาทิตย์ (กลางวัน) / ดวงจันทร์ (หลัง 18:00) */
.lg-sun-rays { transform-origin: center; transform-box: fill-box; animation: lga-spin-slow 30s linear infinite; }
.lg-sun, .lg-sun-rays line { fill: #fff3e0; stroke: #fff3e0; }
.lg-moon { display: none; fill: #fff3e0; }
.lg-night .lg-sun-g { display: none; }
.lg-night .lg-moon  { display: inline; }
.lg-night .lg-win   { opacity: .3; }

/* เมฆลอยผ่าน */
.lg-cloud { fill: #fff; opacity: .55; }
.lg-cloud--a { animation: lga-cloud 46s linear infinite; }
.lg-cloud--b { animation: lga-cloud 64s linear -22s infinite; opacity: .4; }
@keyframes lga-cloud {
    from { transform: translateX(-140px); }
    to   { transform: translateX(640px); }
}

/* นกบินผ่าน */
.lg-bird { fill: none; stroke: var(--lg-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.lg-birds { animation: lga-birds 26s linear infinite; }
.lg-bird { animation: lga-flap .5s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes lga-birds {
    0%   { transform: translate(-60px, 0); }
    100% { transform: translate(600px, -30px); }
}
@keyframes lga-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* ราวตากผ้า — เสื้อแกว่งตามลม */
.lg-line-rope { fill: none; stroke: var(--lg-trim); stroke-width: 1.4; }
.lg-cloth {
    transform-origin: top center;
    transform-box: fill-box;
    animation: lga-swing 2.8s ease-in-out infinite alternate;
}
.lg-cloth:nth-of-type(2) { animation-delay: -.9s; animation-duration: 3.2s; }
.lg-cloth:nth-of-type(3) { animation-delay: -1.7s; animation-duration: 2.5s; }
@keyframes lga-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* ต้นไม้ไหว */
.lg-sway { transform-origin: bottom center; transform-box: fill-box; animation: lga-sway 5s ease-in-out infinite alternate; }
@keyframes lga-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* ไฟหน้าประตูกับเสาไฟ */
.lg-lamp      { fill: var(--lg-light); animation: lga-lamp 4.5s ease-in-out infinite; }
.lg-lamp-glow { fill: var(--lg-light); opacity: .3; animation: lga-glow 4.5s ease-in-out infinite; }
@keyframes lga-lamp { 0%, 100% { opacity: .95; } 50% { opacity: .7; } }
@keyframes lga-glow { 0%, 100% { opacity: .3; } 50% { opacity: .12; } }

/* จักรยานปั่นผ่านหน้าหอเป็นระยะ */
.lg-bike { animation: lga-bike 18s linear infinite; }
.lg-bike * { stroke: var(--lg-ink); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lg-bike .lg-bike-rider { stroke-width: 3; }
.lg-bike .lg-bike-bag { fill: #fff; stroke-width: 1.6; }
.lg-wheel { animation: lga-wheel .8s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes lga-bike {
    0%        { transform: translateX(-80px); }
    60%, 100% { transform: translateX(600px); }
}
@keyframes lga-wheel { to { transform: rotate(360deg); } }

/* แมวหอพัก — กระดิกหาง */
.lg-cat { fill: var(--lg-ink); }
.lg-cat-tail { fill: none; stroke: var(--lg-ink); stroke-width: 2.4; stroke-linecap: round; transform-origin: 0 100%; transform-box: fill-box; animation: lga-tail 1.6s ease-in-out infinite alternate; }
@keyframes lga-tail { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }

/* ============================================================
   ฝั่งขวา — ฟอร์ม
   ============================================================ */
.lg-side {
    position: relative;
    flex: 1 1 520px;
    min-width: 0;
    min-height: 100vh;
    padding: 88px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.lg-langbar {
    position: absolute;
    top: 26px; right: 30px;
    display: flex; gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--lg-line);
}
.lg-lang {
    min-width: 46px; height: 34px;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--lg-muted);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s var(--lg-spring);
}
.lg-lang:hover { color: var(--lg-ink); transform: translateY(-1px); }
.lg-lang.is-on { background: var(--lg-ink); color: #fff; }
.lg-lang:focus-visible { outline: 2px solid var(--lg-brand); outline-offset: 2px; }

.lg-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 17px; }
.lg-form.is-shake { animation: lga-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes lga-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

.lg-head { display: flex; align-items: center; gap: 16px; }
/* กุญแจหอ — แกว่งเบา ๆ, หมุนไขกุญแจตอนกำลังตรวจสอบ, เด้งเป็นเครื่องหมายถูกตอนสำเร็จ */
.lg-key {
    position: relative;
    width: 58px; height: 58px; flex: none;
    border-radius: 18px;
    background: var(--lg-tint);
    color: var(--lg-deep);
    display: flex; align-items: center; justify-content: center;
}
.lg-key svg { width: 28px; height: 28px; transition: opacity .2s ease, transform .4s var(--lg-spring); }
.lg-key-ic { animation: lga-jiggle 4s ease-in-out infinite; transform-origin: 30% 70%; }
@keyframes lga-jiggle {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-14deg); }
    88% { transform: rotate(10deg); }
    92% { transform: rotate(-6deg); }
}
.lg-key.is-busy .lg-key-ic { animation: lga-turn .9s var(--lg-ease) infinite; }
@keyframes lga-turn { 0% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.lg-key-ok { position: absolute; opacity: 0; transform: scale(.3); }
.lg-key.is-done { background: var(--lg-deep); color: #fff; }
.lg-key.is-done .lg-key-ic { opacity: 0; transform: scale(.3); animation: none; }
.lg-key.is-done .lg-key-ok { opacity: 1; transform: scale(1); }

.lg-greet { margin: 0 0 2px; font-size: 13.5px; font-weight: 500; color: var(--lg-deep); }
.lg-title { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; }
.lg-lead  { margin: 2px 0 0; font-size: 14.5px; font-weight: 300; color: var(--lg-muted); }

.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-label { font-size: 14px; font-weight: 500; color: var(--lg-ink); margin: 0; }

.lg-input-wrap { position: relative; display: block; }
.lg-input-wrap > .lg-icon {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    width: 19px; height: 19px;
    color: var(--lg-muted);
    pointer-events: none;
    transition: color .18s ease, transform .3s var(--lg-spring);
}
.lg-input {
    width: 100%;
    height: 52px;
    padding: 0 46px;
    border: 1.5px solid var(--lg-line);
    border-radius: var(--lg-radius);
    background: #fff;
    color: var(--lg-ink);
    font-size: 15.5px;
    outline: none;
    transition: border-color .18s ease, box-shadow .25s ease, transform .2s ease;
}
.lg-input::placeholder { color: #a8968a; font-weight: 300; }
.lg-input:hover { border-color: #ecc9b0; }
.lg-input:focus {
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 4px var(--lg-tint), 0 10px 22px -14px rgba(var(--lg-brand-rgb), .7);
}
.lg-input:focus ~ .lg-icon { color: var(--lg-deep); transform: translateY(-50%) scale(1.15) rotate(-6deg); }
.lg-input--pass { padding-right: 52px; }

.lg-eye {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.lg-eye:hover { color: var(--lg-deep); background: var(--lg-tint); }
.lg-eye:focus-visible { outline: 2px solid var(--lg-brand); outline-offset: 1px; }
.lg-eye svg { width: 19px; height: 19px; transition: transform .3s var(--lg-spring); }
.lg-eye:active svg { transform: scale(.8); }

/* แจ้งเตือน Caps Lock */
.lg-caps {
    display: none;
    align-items: center; gap: 6px;
    margin-top: 2px;
    font-size: 12.5px; font-weight: 500;
    color: var(--lg-deeper);
}
.lg-caps.is-on { display: flex; animation: lga-pop .3s var(--lg-spring) both; }
.lg-caps svg { width: 15px; height: 15px; }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lg-remember {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 300;
    cursor: pointer; user-select: none; margin: 0;
}
.lg-remember input {
    appearance: none; -webkit-appearance: none;
    flex: none;
    width: 20px; height: 20px;
    margin: 0;
    border: 1.5px solid #d9bfae;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background-color .16s ease, border-color .16s ease, transform .3s var(--lg-spring);
}
.lg-remember input:checked { background: var(--lg-deep); border-color: var(--lg-deep); transform: scale(1.06); }
.lg-remember input:checked::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: lga-pop .25s var(--lg-spring) both;
}
.lg-remember input:focus-visible { outline: 2px solid var(--lg-brand); outline-offset: 2px; }

.lg-forgot {
    font-size: 14px; font-weight: 500;
    color: var(--lg-deep);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;  /* เส้นใต้วิ่ง — เอฟเฟกต์ ไม่ใช่การไล่สี */
    transition: background-size .3s var(--lg-ease), color .2s ease;
}
.lg-forgot:hover, .lg-forgot:focus { color: var(--lg-deeper); background-size: 100% 1.5px; text-decoration: none; }

/* reCAPTCHA — ให้กล่องอยู่กลางและไม่ล้นบนจอแคบ */
.lg-captcha { display: flex; justify-content: center; min-height: 78px; }
.lg-captcha > div { max-width: 100%; }

/* ---------- ปุ่มเข้าสู่ระบบ ---------- */
.lg-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: var(--lg-radius);
    background: var(--lg-deep);
    color: #fff;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 14px 26px -14px rgba(138, 51, 5, .8);
    transition: transform .2s var(--lg-spring), box-shadow .2s ease, background-color .2s ease;
}
.lg-btn:hover  { background: var(--lg-deeper); transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(138, 51, 5, .9); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid rgba(var(--lg-brand-rgb), .5); outline-offset: 2px; }
.lg-btn[disabled] { cursor: progress; }
.lg-btn.is-done { background: #2f7a3e; }

/* แสงกวาดผ่านปุ่มเป็นระยะ — เอฟเฟกต์เคลื่อนไหว ไม่ใช่การไล่สีพื้น */
.lg-btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    animation: lga-shine 4.5s ease-in-out 1.5s infinite;
}
@keyframes lga-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.lg-btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.lg-btn-arrow { width: 19px; height: 19px; transition: transform .3s var(--lg-spring); }
.lg-btn:hover .lg-btn-arrow { transform: translateX(4px); }
.lg-btn.is-busy .lg-btn-arrow, .lg-btn.is-done .lg-btn-arrow { display: none; }
.lg-spin {
    display: none;
    width: 18px; height: 18px;
    border: 2.4px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lga-spin .7s linear infinite;
}
.lg-btn.is-busy .lg-spin { display: inline-block; }
.lg-btn.is-done .lg-spin { display: none; }
@keyframes lga-spin { to { transform: rotate(360deg); } }

/* ระลอกคลื่นตอนกด */
.lg-ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: lga-ripple .6s ease-out forwards;
}
@keyframes lga-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ---------- ช่วยเหลือ / ท้ายฟอร์ม ---------- */
.lg-hint {
    margin: 2px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--lg-line);
    font-size: 14px;
    font-weight: 300;
    color: var(--lg-muted);
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.lg-help {
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--lg-deep);
    background: transparent;
    color: var(--lg-deep);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .3s var(--lg-spring);
}
.lg-help:hover { background: var(--lg-deep); color: #fff; transform: translateY(-1px); }
.lg-help:focus-visible { outline: 3px solid rgba(var(--lg-brand-rgb), .5); outline-offset: 2px; }

.lg-copy { margin: 0; text-align: center; font-size: 12.5px; font-weight: 300; color: var(--lg-muted); }

/* ---------- ภาพช่วยเหลือแบบเต็มจอ ---------- */
.lg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 20, 6, .86);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1600;
    padding: 40px 20px;
}
.lg-overlay.is-open { display: flex; animation: lga-fade .3s ease both; }
@keyframes lga-fade { from { opacity: 0; } to { opacity: 1; } }
.lg-overlay img {
    max-width: 92%;
    max-height: 88%;
    border-radius: 10px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
    animation: lga-pop .35s var(--lg-ease) both;
}
@keyframes lga-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.lg-overlay-x {
    position: absolute;
    top: 18px; right: 26px;
    width: 46px; height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 28px; line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, transform .25s var(--lg-ease);
}
.lg-overlay-x:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

/* ---------- ทยอยปรากฏทีละชิ้น ---------- */
[data-in] { animation: lga-up .72s var(--lg-ease) both; }
@keyframes lga-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
[data-in="1"]  { animation-delay: .10s; }
[data-in="2"]  { animation-delay: .18s; }
[data-in="3"]  { animation-delay: .26s; }
[data-in="4"]  { animation-delay: .34s; }
[data-in="5"]  { animation-delay: .42s; }
[data-in="6"]  { animation-delay: .50s; }
[data-in="7"]  { animation-delay: .58s; }
[data-in="8"]  { animation-delay: .66s; }
[data-in="9"]  { animation-delay: .74s; }

/* แผงส้มสไลด์เข้าจากซ้าย */
.lg-hero { animation: lga-slide .9s var(--lg-ease) both; }
@keyframes lga-slide { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- จอแคบ / มือถือ ---------- */
@media (max-width: 1040px) {
    .lg-hero { min-height: 0; }
    .lg-hero-in { padding: 32px 28px 0; gap: 22px; }
    .lg-headline { font-size: 34px; }
    .lg-points, .lg-bubble { display: none; }
    .lg-scene { max-height: 220px; }
    .lg-side { min-height: 0; padding: 40px 18px 32px; }
    .lg-langbar { position: static; align-self: flex-end; }
}
@media (max-width: 420px) {
    .lg-headline { font-size: 28px; }
    .lg-rotate { font-size: 16px; }
    .lg-ring { width: 300px; height: 300px; border-width: 40px; right: -120px; top: -120px; }
}

/* ============================================================
   เครื่องที่ปิด Animation — คงการจางเข้า ตัดการเคลื่อนไหวที่วนไม่รู้จบ
   ============================================================ */
@keyframes lga-fadeonly { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .lg-ring, .lg-logo, .lg-bubble, .lg-sun-rays, .lg-cloud, .lg-birds, .lg-bird,
    .lg-cloth, .lg-sway, .lg-bike, .lg-wheel, .lg-cat-tail, .lg-key-ic,
    .lg-btn::before { animation: none; }
    .lg-rotate-list { animation: none; }
    .lg-win  { animation: none; }
    .lg-win--on { opacity: .95; }
    .lg-lamp { animation: none; opacity: .95; }
    .lg-lamp-glow { animation: none; opacity: .3; }
    .lg-bike { transform: translateX(150px); }
    .lg-cloud--a { transform: translateX(60px); }
    .lg-cloud--b { transform: translateX(300px); }
    .lg-birds { display: none; }
    .lg-btn::before { display: none; }
    .lg-hero, [data-in] { animation-name: lga-fadeonly; animation-duration: .5s; }
    .lg-scene-wrap { transform: none !important; transition: none; }
    .lg-input:focus ~ .lg-icon { transform: translateY(-50%); }
    .lg-points li:hover, .lg-points li:hover .lg-pi { transform: none; }
    .lg-ripple { display: none; }
    .lg-spin { animation-duration: 1.1s; }
}

/* ============================================================
   เฉพาะหน้าลืมรหัสผ่าน (forgot.php)
   ============================================================ */

/* ขั้นตอน 1-2-3 บนแผงส้ม */
.lg-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 440px; counter-reset: lgstep; }
.lg-steps li {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    font-size: 15px; font-weight: 500;
    transition: background-color .25s ease, transform .3s var(--lg-spring);
}
.lg-steps li:hover { background: rgba(255, 255, 255, .2); transform: translateX(6px); }
.lg-steps li::before {
    counter-increment: lgstep;
    content: counter(lgstep);
    width: 42px; height: 42px; flex: none;
    border-radius: 50%;
    background: #fff;
    color: var(--lg-deep);
    font-size: 18px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
/* เส้นประเชื่อมระหว่างขั้น */
.lg-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 28px; top: 50px;
    height: 14px;
    border-left: 2px dashed rgba(42, 20, 6, .45);
}
/* ขั้นที่กำลังทำอยู่ — ไฮไลต์ตามสถานะฟอร์ม */
.lg-steps li.is-now { background: rgba(255, 255, 255, .24); }
.lg-steps li.is-now::before { background: var(--lg-ink); color: #fff; animation: lga-pulse 1.8s ease-in-out infinite; }
.lg-steps li.is-ok::before { content: "✓"; background: var(--lg-ink); color: #fff; }
@keyframes lga-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(42, 20, 6, .35); }
    50%      { box-shadow: 0 0 0 8px rgba(42, 20, 6, 0); }
}

/* ซองจดหมาย — ไอคอนหัวฟอร์ม */
.lg-key-mail { animation: lga-jiggle 4s ease-in-out infinite; transform-origin: 50% 80%; }

/* การ์ด "ส่งลิงก์แล้ว" */
.lg-sent {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 26px 22px 22px;
    border-radius: 18px;
    background: #fff;
    border: 1.5px solid var(--lg-line);
    text-align: center;
    animation: lga-pop .45s var(--lg-spring) both;
}
.lg-sent-art { position: relative; width: 120px; height: 84px; }
.lg-sent-art svg { position: absolute; }
.lg-sent-env { left: 18px; top: 18px; width: 84px; height: 62px; color: var(--lg-deep); }
.lg-sent-plane {
    left: 0; top: 0; width: 34px; height: 34px;
    color: var(--lg-brand);
    animation: lga-fly 2.6s var(--lg-ease) .2s infinite;
}
@keyframes lga-fly {
    0%   { transform: translate(-10px, 40px) rotate(-8deg) scale(.7); opacity: 0; }
    25%  { opacity: 1; }
    70%  { transform: translate(90px, -6px) rotate(10deg) scale(1); opacity: 1; }
    100% { transform: translate(120px, -24px) rotate(16deg) scale(.8); opacity: 0; }
}
.lg-sent h3 { margin: 4px 0 0; font-size: 22px; font-weight: 600; color: var(--lg-ink); }
.lg-sent p  { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--lg-muted); }
.lg-sent .lg-sent-to {
    display: inline-block;
    max-width: 100%;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--lg-tint);
    color: var(--lg-deeper);
    font-size: 14px; font-weight: 500;
    overflow-wrap: anywhere;
}
.lg-sent-tip {
    display: flex; align-items: flex-start; gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--lg-tint-2);
    font-size: 13px; font-weight: 300; line-height: 1.6;
    color: var(--lg-ink);
    text-align: left;
}
.lg-sent-tip svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--lg-deep); }

/* ปุ่มรอง (ส่งอีกครั้ง / ใช้อีเมลอื่น) */
.lg-btn2 {
    width: 100%;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: var(--lg-radius);
    border: 1.5px solid var(--lg-deep);
    background: transparent;
    color: var(--lg-deep);
    font-size: 15px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background-color .2s ease, color .2s ease, transform .3s var(--lg-spring);
}
.lg-btn2:hover:not([disabled]) { background: var(--lg-deep); color: #fff; transform: translateY(-1px); }
.lg-btn2[disabled] { cursor: not-allowed; border-color: var(--lg-line); color: var(--lg-muted); }
.lg-btn2:focus-visible { outline: 3px solid rgba(var(--lg-brand-rgb), .5); outline-offset: 2px; }
.lg-btn2 svg { width: 17px; height: 17px; }
.lg-linkbtn {
    border: 0; background: transparent; padding: 6px 4px; min-height: 36px;
    color: var(--lg-deep); font-size: 14px; font-weight: 500; cursor: pointer;
}
.lg-linkbtn:hover { color: var(--lg-deeper); text-decoration: underline; }

/* กลับไปหน้าเข้าสู่ระบบ */
.lg-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    align-self: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 14.5px; font-weight: 500;
    color: var(--lg-deep);
    text-decoration: none;
}
.lg-back svg { width: 18px; height: 18px; transition: transform .3s var(--lg-spring); }
.lg-back:hover { color: var(--lg-deeper); text-decoration: none; }
.lg-back:hover svg { transform: translateX(-5px); }

/* ปุ่มส่ง — เครื่องบินกระดาษพุ่งออกตอนกด */
.lg-btn-plane { width: 19px; height: 19px; transition: transform .3s var(--lg-spring); }
.lg-btn:hover .lg-btn-plane { transform: translate(3px, -3px) rotate(-8deg); }
.lg-btn.is-busy .lg-btn-plane { display: none; }

@media (max-width: 1040px) {
    .lg-steps { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-key-mail, .lg-sent-plane, .lg-steps li.is-now::before { animation: none; }
    .lg-sent-plane { transform: translate(84px, 0); }
    .lg-sent { animation-name: lga-fadeonly; }
    .lg-steps li:hover, .lg-back:hover svg, .lg-btn:hover .lg-btn-plane { transform: none; }
}

/* ============================================================
   เฉพาะหน้าตั้งรหัสผ่านใหม่ (reset_password.php)
   ============================================================ */

/* แถบความแข็งแรงของรหัสผ่าน 4 ช่อง */
.lg-meter { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lg-meter-bars { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.lg-meter-bars i {
    display: block; height: 6px; border-radius: 999px;
    background: var(--lg-line);
    transform-origin: left center;
    transition: background-color .3s ease;
}
.lg-meter-bars i.is-on { animation: lga-bar .35s var(--lg-spring) both; }
@keyframes lga-bar { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
.lg-meter[data-lv="1"] .is-on { background: #c62828; }
.lg-meter[data-lv="2"] .is-on { background: #d97706; }
.lg-meter[data-lv="3"] .is-on { background: #b84508; }
.lg-meter[data-lv="4"] .is-on { background: #2f7a3e; }
.lg-meter-txt { flex: none; min-width: 74px; text-align: right; font-size: 12.5px; font-weight: 500; color: var(--lg-muted); }
.lg-meter[data-lv="1"] .lg-meter-txt { color: #b71c1c; }
.lg-meter[data-lv="4"] .lg-meter-txt { color: #2f7a3e; }

/* เช็กลิสต์เงื่อนไข — ติ๊กถูกเองระหว่างพิมพ์ */
.lg-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lg-checks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 300; color: var(--lg-muted); transition: color .2s ease; }
.lg-checks li > span:first-child {
    width: 20px; height: 20px; flex: none;
    border-radius: 50%;
    border: 1.5px solid #d9bfae;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, border-color .2s ease, transform .35s var(--lg-spring);
}
.lg-checks li svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .35s var(--lg-spring); }
.lg-checks li.is-ok { color: var(--lg-ink); font-weight: 400; }
.lg-checks li.is-ok > span:first-child { background: #2f7a3e; border-color: #2f7a3e; color: #fff; transform: scale(1.08); }
.lg-checks li.is-ok svg { opacity: 1; transform: scale(1); }
.lg-checks li.is-bad { color: #b71c1c; }
.lg-checks li.is-bad > span:first-child { border-color: #c62828; }

/* แถบแจ้งข้อผิดพลาดจากเซิร์ฟเวอร์ */
.lg-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8e1c12;
    font-size: 14px; font-weight: 400; line-height: 1.55;
    animation: lga-pop .35s var(--lg-spring) both;
}
.lg-alert svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* ไอคอนวงกลมใหญ่ของการ์ดผลลัพธ์ (สำเร็จ / ลิงก์ใช้ไม่ได้) */
.lg-state-ic {
    width: 84px; height: 84px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: lga-pop .5s var(--lg-spring) .1s both;
}
.lg-state-ic svg { width: 40px; height: 40px; }
.lg-state-ic--ok  { background: #e6f4ea; color: #2f7a3e; box-shadow: 0 0 0 10px #f2faf4; }
.lg-state-ic--bad { background: var(--lg-tint); color: var(--lg-deep); box-shadow: 0 0 0 10px var(--lg-tint-2); }
.lg-state-ic--ok svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: lga-draw .6s ease-out .45s forwards;
}
@keyframes lga-draw { to { stroke-dashoffset: 0; } }

/* แถบนับถอยหลังพากลับหน้า login */
.lg-countbar { width: 100%; height: 5px; border-radius: 999px; background: var(--lg-line); overflow: hidden; }
.lg-countbar i { display: block; height: 100%; background: #2f7a3e; transform-origin: left center; animation: lga-count var(--lg-count, 5s) linear forwards; }
@keyframes lga-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ปุ่มหลักแบบลิงก์ (<a class="lg-btn">) */
a.lg-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.lg-btn:hover, a.lg-btn:focus { color: #fff; text-decoration: none; }
.lg-btn[disabled]:not(.is-busy) { background: #d9bfae; box-shadow: none; transform: none; cursor: not-allowed; }
.lg-btn[disabled]:not(.is-busy)::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .lg-meter-bars i.is-on, .lg-state-ic, .lg-alert { animation: none; }
    .lg-state-ic--ok svg path { animation: none; stroke-dashoffset: 0; }
    .lg-countbar i { animation: none; }
}

/* ============================================================
   ฝั่งซ้ายโทนเบา "ลอยนุ่ม" — 2 พ.ย. 2569
   แทนพื้นส้มทึบ #F26522 ด้วยพื้นครีมพีช + ส้มเป็นแค่สีเน้น (ชุดเดียวกับหน้าในระบบหลังล็อกอิน)
   ใช้กับ login / forgot / reset_password (แผง .lg-hero ตัวเดียวกัน)
   ก่อนปรับสำรองที่ lg-ui.css.bak-20261102 — ลบบล็อกนี้ทิ้งก็กลับเป็นแผงส้มทึบ
   ============================================================ */
.lg-hero {
    /* โทนฉากหอพักบนพื้นครีม */
    --lg-bldg:     #f6b483;
    --lg-bldg-far: #f9c9a3;
    --lg-trim:     #e7894e;
    --lg-ground:   #e8915a;
    --lg-light:    #fffdf7;

    background:
        radial-gradient(85% 60% at 100% 0%, #FFE2CC 0%, rgba(255,226,204,0) 70%),
        radial-gradient(70% 55% at 0% 100%, #FFEBDD 0%, rgba(255,235,221,0) 70%),
        #fff6ee;
    color: #3d2b1c;
    border-right: 1px solid rgba(61,43,28,.06);
}

/* ตราดอกสุริยะจาง ๆ แทนวงแหวนขาว */
.lg-ring {
    border: 0;
    width: 380px; height: 380px;
    right: -120px; top: -120px;
    background: url("../images/surya_mark.png") no-repeat center / contain;
    opacity: .1;
}
.lg-ring::after { display: none; }

.lg-logo { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(61,43,28,.05), 0 12px 24px -12px rgba(61,43,28,.35); }
.lg-brandtext b { color: #3d2b1c; font-weight: 500; }
.lg-brandtext span { color: #6f5e50; font-weight: 300; }

.lg-headline { color: #3d2b1c; font-weight: 500; }
.lg-headline em {
    color: #E8491D;
    background: linear-gradient(135deg, #F7A64A, #E8491D);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lg-rotate { color: #6f5e50; font-weight: 400; }
.lg-rotate-box {
    background: linear-gradient(135deg, #F7A64A, #E8491D);
    box-shadow: 0 10px 20px -10px rgba(232,73,29,.8);
}
.lg-rotate-list span::after { color: #fff3e0; }

.lg-points li { color: #3d2b1c; font-weight: 400; }
.lg-points li:hover { background: rgba(255,255,255,.75); box-shadow: 0 10px 22px -16px rgba(61,43,28,.35); }
.lg-points .lg-pi {
    color: #E8491D;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(61,43,28,.05), 0 8px 16px -10px rgba(61,43,28,.3);
}

.lg-bubble {
    color: #E8491D;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(61,43,28,.05), 0 14px 28px -14px rgba(61,43,28,.35);
}

/* ฉาก: ตัวหอสีพีช หน้าต่างขาว ดวงอาทิตย์ส้ม */
.lg-s-tree    { fill: #f0a46d; }
.lg-s-sign    { fill: #fff; stroke: #e7894e; stroke-width: 1; }
.lg-s-signtxt { fill: #B83A12; }
.lg-win       { opacity: .35; }
.lg-win--on   { opacity: .95; }
@keyframes lga-win-soft {
    0%,  38%  { opacity: .35; }
    39%, 76%  { opacity: .95; }
    77%, 100% { opacity: .35; }
}
.lg-win { animation-name: lga-win-soft; }
.lg-sun, .lg-sun-rays line { fill: #F7A64A; stroke: #F7A64A; }
.lg-moon  { fill: #f2a15e; }
.lg-cloud { fill: #fff; opacity: .9; }
.lg-cloud--b { opacity: .75; }
.lg-bird  { stroke: #8b6a52; }
.lg-bike *, .lg-cat, .lg-cat-tail { stroke: #5a4232; }
.lg-cat   { fill: #5a4232; }
.lg-lamp, .lg-lamp-glow { fill: #ffd27a; }

/* กลางคืน: พื้นอมม่วงพีชหม่นลงนิด ไฟห้องเด่นขึ้น */
.lg-night .lg-hero {
    background:
        radial-gradient(85% 60% at 100% 0%, #f6d9cf 0%, rgba(246,217,207,0) 70%),
        #f7ebe4;
}
.lg-night .lg-win { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    .lg-win { animation: none; }
}

/* ขั้นตอน 1-2-3 ของ forgot / reset บนพื้นครีม */
.lg-steps li { color: #3d2b1c; font-weight: 400; }
.lg-steps li:hover { background: rgba(255,255,255,.75); box-shadow: 0 10px 22px -16px rgba(61,43,28,.35); }
.lg-steps li::before {
    color: #E8491D;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(61,43,28,.05), 0 8px 16px -10px rgba(61,43,28,.3);
}
.lg-steps li:not(:last-child)::after { border-left-color: rgba(232,73,29,.35); }
.lg-steps li.is-now { background: rgba(255,255,255,.8); box-shadow: 0 10px 22px -16px rgba(61,43,28,.35); }
.lg-steps li.is-now::before { background: linear-gradient(135deg, #F7A64A, #E8491D); color: #fff; }
.lg-steps li.is-ok::before { background: #2f8a57; color: #fff; }

/* จอแคบ: แผงซ้ายขึ้นไปอยู่บน — เส้นคั่นเป็นด้านล่างแทน */
@media (max-width: 1040px) {
    .lg-hero { border-right: 0; border-bottom: 1px solid rgba(61,43,28,.06); }
}
@media (max-width: 420px) {
    .lg-ring { width: 260px; height: 260px; right: -90px; top: -90px; }
}