body{
    font-family:'Segoe UI', Tahoma, sans-serif;
    margin:0;
    display:flex;   
    min-height:100vh;
}

.login-page{
    
    display:flex;
    justify-content:center; /* กลางแนวนอน */
   /* align-items:center;      กลางแนวตั้ง */
}

.social-login-wrapper{
    width:320px;         
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}


/* ปุ่มหลัก */
.btn.bar.login.social{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:100%;
    padding:14px 20px;
    border:none;
    border-radius:6px;

    font-size:16px;
    font-weight:500;
    color:#fff;
    cursor:pointer;

    transition:all .3s ease;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* icon */
.btn.bar.login.social i{
    font-size:18px;
}

/* Google */
.btn.bar.login.social.google{
    background:linear-gradient(90deg,#ea4335,#fbbc05);
}
.btn.bar.login.social.google:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(234,67,53,.4);
}

/* Facebook */
.btn.bar.login.social.facebook{
    background:#1877f2;
}
.btn.bar.login.social.facebook:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(24,119,242,.45);
}

/* LINE */
.btn.bar.login.social.line{
    background:#06c755;
}
.btn.bar.login.social.line:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(6,199,85,.45);
}

/* Password */
.btn.bar.login.social.password{
    background:linear-gradient(90deg,#4b5563,#1f2937);
}
.btn.bar.login.social.password:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(31,41,55,.5);
}

/* Apple */
.btn.bar.login.social.apple{
    background:#000;
}
.btn.bar.login.social.apple:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.6);
}


/* เอฟเฟคกด */
.btn.bar.login.social:active{
    transform:scale(.98);
}