.sl-btns { display:flex; gap:10px; flex-wrap:wrap; }
.sl-btn { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; background:#111; color:#fff; text-decoration:none; font-weight:600; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.sl-btn:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.18); }
.sl-btn .sl-icon { width:100%; height:20px; display:block; }
/* Providers */
.sl-google{background:#DB4437;color:#ffffff}
.sl-google .sl-icon {
    width:20px;
    height:20px;
    background: currentColor; /* จะใช้กับ mask */
    -webkit-mask: url("../img/google.svg") no-repeat center / contain;
            mask: url("../img/google.svg") no-repeat center / contain;
  }

.sl-facebook{background:#1877f2;color:#fff}
.sl-facebook .sl-icon{
    width:20px;
    height:20px;
    background: currentColor; /* จะใช้กับ mask */
    -webkit-mask: url("../img/facebook.svg") no-repeat center / contain;
            mask: url("../img/facebook.svg") no-repeat center / contain;
  }

.sl-line {background:#06C755;color:#fff;}
  .sl-line .sl-icon {
    width:20px;
    height:20px;
    background: currentColor; /* จะใช้กับ mask */
    -webkit-mask: url("../img/line.svg") no-repeat center / contain;
            mask: url("../img/line.svg") no-repeat center / contain;
  }

.sl-linkedin{background:#0a66c2;color:#fff}
.sl-linkedin .sl-icon{
    width:20px;
    height:20px;
    background: currentColor; /* จะใช้กับ mask */
    -webkit-mask: url("../img/linkedin.svg") no-repeat center / contain;
            mask: url("../img/linkedin.svg") no-repeat center / contain;
  }

.sl-google, .sl-facebook, .sl-line, .sl-linkedin {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .6em 1em;
    border-radius: .5em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease;
}
.sl-google:hover { background:#f1f1f1; }
.sl-facebook:hover { background:#f1f1f1; }
.sl-line:hover { background:#f1f1f1; }
.sl-linkedin:hover { background:#f1f1f1; }
/* v1.2.6 button styles */
.sl-btns { display:flex; flex-direction:column; gap:10px; width:100%; }
.sl-btn { display:flex; align-items:center; justify-content:center; width:100%; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:700; line-height:1; border:0; box-sizing:border-box; }
.sl-btn .sl-icon { width:20px; height:20px; margin-right:10px; display:inline-block; }
.sl-btn .sl-label { display:inline-block; }
.sl-line { background:#06C755; color:#fff; }
.sl-google { background:#db4437; color:#fff; }
.sl-facebook { background:#1877f2; color:#fff; }
/* Make svg white regardless of source color */
.sl-btn .sl-icon svg, .sl-btn .sl-icon path { fill:#fff !important; }
.sl-btn .sl-icon img { filter:brightness(0) invert(1); }