/* ═══════════════════════════════════════════════════════════════════
   ld-auth.css — nút đăng nhập / menu tài khoản trên thanh trên (mọi trang).
   Màu khai bằng biến CÓ giá trị dự phòng: trang chủ và các trang phụ khai
   bảng màu ở hai nơi khác nhau (index.html · legal.css).
   ═══════════════════════════════════════════════════════════════════ */
.lda{position:relative;display:inline-flex;align-items:center;margin-right:10px}

/* Nút "Đăng nhập": viền rỗng — không tranh với nút Tải xuống hồng đặc ngay cạnh. */
.lda-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  color:#fff;font:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:border-color .2s,background .2s,transform .2s;
}
.lda-btn svg{width:16px;height:16px;flex:0 0 auto}
.lda-btn:hover:not(:disabled){border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);transform:translateY(-1px)}
.lda-btn:disabled{opacity:.7;cursor:default}
.lda-btn:focus-visible,.lda-me:focus-visible{outline:2px solid var(--pink,#FF2D8F);outline-offset:3px}

/* Đã đăng nhập: ảnh + tên gọi + mũi tên */
.lda-me{
  display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;
  border-radius:100px;cursor:pointer;color:#fff;font:inherit;font-size:13.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  transition:border-color .2s,background .2s;max-width:190px;
}
.lda-me:hover:not(:disabled){border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.lda-me:disabled{cursor:default;padding-right:8px}
.lda-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lda-caret{width:14px;height:14px;flex:0 0 auto;opacity:.7;transition:transform .2s}
.lda.is-open .lda-caret{transform:rotate(180deg)}

.lda-av{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--pink,#FF2D8F),var(--violet,#7A3CFF));
}
.lda-av img{width:100%;height:100%;object-fit:cover;display:block}
.lda-av-lg{width:40px;height:40px;font-size:17px}

.lda-spin{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:ldaSpin .8s linear infinite;
}
@keyframes ldaSpin{to{transform:rotate(360deg)}}

.lda-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:250px;
  padding:6px;border-radius:14px;
  background:#15151F;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility 0s .16s;
}
.lda.is-open .lda-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s}
.lda-who{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.lda-who-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.lda-who-txt b{font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lda-who-txt span{font-size:12px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lda-item{
  display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;
  border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.86);text-decoration:none;
}
.lda-item:hover,.lda-item:focus-visible{background:rgba(255,255,255,.07);color:#fff;outline:none}
.lda-out{color:#ff8db8}

.lda-toast{
  position:fixed;left:50%;bottom:24px;z-index:9999;max-width:min(92vw,460px);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:12px;font-size:14px;line-height:1.5;color:#fff;
  background:#1d1d29;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:opacity .2s,transform .2s;
}
.lda-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* Điện thoại: chỉ còn icon / ảnh — thanh trên chật. */
@media(max-width:600px){
  .lda{margin-right:6px}
  .lda-btn{padding:8px 9px}
  .lda-btn .lda-txt,.lda-name,.lda-caret{display:none}
  .lda-me{padding:3px}
}
@media (prefers-reduced-motion:reduce){
  .lda-btn,.lda-me,.lda-menu,.lda-caret,.lda-toast{transition:none}
  .lda-spin{animation-duration:2s}
}