/* ธรรศกรเบอร์มงคล — CSS หน้า login/register (ใช้ร่วม) */
.auth-wrap{min-height:calc(100vh - 88px);display:flex;align-items:center;justify-content:center;padding:44px 0;position:relative;overflow:hidden}
/* ambient เติมพื้นที่ว่างไม่ให้โล่ง */
.auth-wrap::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;top:-160px;left:-150px;pointer-events:none;
  background:radial-gradient(circle,rgba(250,183,88,.16),transparent 68%)}
.auth-wrap::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;bottom:-200px;right:-170px;pointer-events:none;
  background:radial-gradient(circle,rgba(214,138,42,.12),transparent 68%)}
.auth-card{position:relative;z-index:1;width:100%;max-width:840px;background:#fff;border:1px solid var(--line-strong);border-radius:26px;
  overflow:hidden;box-shadow:0 42px 90px -42px rgba(58,27,16,.5),0 8px 24px -12px rgba(58,27,16,.2);display:grid;grid-template-columns:.8fr 1fr}
/* panel น้ำตาลเข้ม → โลโก้ทองเด่นไม่แบน */
.auth-side{position:relative;background:linear-gradient(158deg,#54301b 0%,#3a1b10 58%,#280f07 100%);color:#fff;
  padding:46px 38px;display:flex;flex-direction:column;justify-content:center;gap:22px;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 80% at 18% 8%,rgba(250,183,88,.22),transparent 52%)}
.auth-side>*{position:relative;z-index:1}
.auth-side .zo{position:absolute;right:-70px;bottom:-80px;width:260px;height:260px;opacity:.1;color:var(--gold-bright);z-index:0;animation:spin 90s linear infinite;pointer-events:none}
.auth-side .logo{width:auto;filter:drop-shadow(0 6px 18px rgba(250,183,88,.45))}
.auth-side h2{font-family:"Kanit";font-size:1.58rem;font-weight:600;line-height:1.35;background:linear-gradient(120deg,#fff,var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-side p{font-weight:300;opacity:.82;line-height:1.65;font-size:.96rem}
.auth-side .ben{display:flex;flex-direction:column;gap:15px}
.auth-side .ben .b{display:flex;align-items:center;gap:12px;font-family:"Kanit";font-size:.9rem;opacity:.95}
.auth-side .ben .b .ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(250,183,88,.28),rgba(250,183,88,.12));border:1px solid rgba(250,183,88,.28);color:var(--gold-bright)}
.auth-side .ben .b .ic .mi{font-family:"Material Symbols Rounded";font-size:1.2rem}
/* ฟอร์ม */
.auth-form{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.auth-form h1{font-family:"Kanit";font-size:1.7rem;color:var(--ink);margin-bottom:4px}
.auth-form .sub{color:var(--muted);font-weight:300;margin-bottom:22px}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.af{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}.af.full{grid-column:1/-1}
.af label{font-family:"Kanit";font-size:.85rem;font-weight:500;color:var(--ink-2)}.af label .req{color:var(--red)}
.af .inp{position:relative;display:flex;align-items:center}
.af .inp>.mi{position:absolute;left:13px;color:var(--gold-deep);font-size:1.15rem;font-family:"Material Symbols Rounded";pointer-events:none}
.af input,.af textarea{width:100%;font-family:"Noto Sans Thai";font-size:.95rem;color:var(--ink);background:#FFFDF9;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px 12px 42px;outline:none;transition:.2s}
.af textarea{padding-left:14px;resize:vertical;min-height:70px}
.af input:focus,.af textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow);background:#fff}
.af input.err,.af textarea.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.af .eye{position:absolute;right:8px;cursor:pointer;background:none;border:none;padding:6px;display:grid;place-items:center}
.af .eye .mi{font-family:"Material Symbols Rounded";font-size:1.2rem;color:var(--muted)}
.auth-btn{width:100%;margin-top:6px;padding:14px;border:none;border-radius:13px;cursor:pointer;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#fff;font-family:"Kanit";font-weight:600;font-size:1.02rem;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow-gold);transition:.2s}
.auth-btn:hover{transform:translateY(-2px)}.auth-btn:disabled{opacity:.6;cursor:default;transform:none}
.auth-btn .mi{font-family:"Material Symbols Rounded"}
.auth-alt{text-align:center;margin-top:18px;font-family:"Kanit";font-size:.9rem;color:var(--muted)}
.auth-alt a{color:var(--gold-text);font-weight:600}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;font-family:"Kanit";font-size:.86rem}
.auth-row label{display:flex;align-items:center;gap:6px;color:var(--ink-2);cursor:pointer}
.auth-row a{color:var(--gold-text)}
.auth-msg{display:none;align-items:center;gap:8px;padding:11px 14px;border-radius:11px;font-family:"Kanit";font-size:.88rem;margin-bottom:16px}
.auth-msg.show{display:flex}
.auth-msg.err{background:#FBEDEC;border:1px solid #F3CFCB;color:#C0392B}
.auth-msg.ok{background:#E8F5EE;border:1px solid #BFE3CF;color:#2E8B57}
.auth-msg .mi{font-family:"Material Symbols Rounded";font-size:1.15rem}
.demo-hint{margin-top:14px;font-size:.8rem;color:var(--muted);text-align:center;font-family:"Kanit";background:var(--gold-soft);border-radius:10px;padding:9px}
.demo-hint b{color:var(--gold-text);font-family:"Space Grotesk"}
@media(max-width:820px){.auth-card{grid-template-columns:1fr;max-width:440px}.auth-side{display:none}.af-grid{grid-template-columns:1fr}}

/* ===== บล็อกเสริมใต้การ์ด (กันหน้าโล่ง) ===== */
.auth-card{margin-left:auto;margin-right:auto}
.auth-wrap .container{display:flex;flex-direction:column;align-items:center;gap:24px}
.auth-extras{width:100%;max-width:940px;display:flex;flex-direction:column;gap:14px}
.ax-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ax-stat{background:#fff;border:1px solid var(--line-strong);border-radius:16px;padding:15px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.ax-stat .v{font-family:"Space Grotesk";font-weight:700;font-size:1.55rem;color:var(--gold-text);line-height:1}
.ax-stat .l{font-family:"Kanit";font-size:.8rem;color:var(--muted);margin-top:5px}
.ax-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ax-b{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow-sm)}
.ax-b>.mi{font-family:"Material Symbols Rounded";font-size:1.65rem;color:var(--gold-deep);flex:none}
.ax-b div b{font-family:"Kanit";font-size:.86rem;color:var(--ink);display:block;line-height:1.35}
.ax-b div span{font-size:.75rem;color:var(--muted);font-family:"Noto Sans Thai"}
.ax-feat{background:#fff;border:1px solid var(--line-strong);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.ax-feat-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ax-feat-h>span{font-family:"Kanit";font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.ax-feat-h>span .mi,.ax-feat-h a .mi{font-family:"Material Symbols Rounded"}
.ax-feat-h>span .mi{color:var(--gold-deep)}
.ax-feat-h a{font-family:"Kanit";font-size:.84rem;color:var(--gold-text);display:flex;align-items:center;gap:3px}
.ax-feat-h a .mi{font-size:1rem}
.ax-feat-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ax-num{border:1px solid var(--line-strong);border-radius:12px;padding:12px 8px;text-align:center;transition:.2s;background:#FFFDF9;display:block}
.ax-num:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.ax-num img{height:17px;margin-bottom:6px}
.ax-num .nn{font-family:"Space Grotesk";font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:.3px}
.ax-num .np{font-family:"Kanit";font-size:.72rem;color:var(--muted);margin-top:3px}
@media(max-width:820px){.ax-stats{grid-template-columns:repeat(2,1fr)}.ax-badges{grid-template-columns:1fr}.ax-feat-g{grid-template-columns:repeat(2,1fr)}}

/* โลโก้เดิมกว้าง 520px แต่กล่องกว้าง ~296px และ .auth-side มี overflow:hidden
   โลโก้จึงถูกตัดหายไปครึ่งขวาโดยไม่มีใครเห็นว่าผิด */
.auth-side .logo{max-width:100%;height:auto;object-fit:contain}