/* Account button + menu in the JLPT header (base_header.php). */
.jls-acct {
    --acct-ink:#1f2552; --acct-text:#2b3446; --acct-muted:#6b7684; --acct-line:#ece3da;
    --acct-soft:#fcf4eb; --acct-hover:#f6efe8; --acct-red:#cd2f39; --acct-gold:#b7791f;
    display:flex; align-items:center; gap:8px;
}
.jls-acct svg { width:18px; height:18px; flex:0 0 18px; display:block; }

/* Logged in: avatar · name · tier · chevron */
.jls-acct-btn {
    display:inline-flex; align-items:center; gap:8px; height:44px; max-width:280px;
    padding:0 10px 0 4px; margin:0; border:1px solid transparent; border-radius:999px;
    background:transparent; color:var(--acct-text); font:inherit; font-size:14px; line-height:1;
    cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s;
}
.jls-acct-btn:hover, .jls-acct.open .jls-acct-btn { background:var(--acct-hover); }
.jls-acct-btn:focus { outline:none; }
.jls-acct-btn:focus-visible { box-shadow:0 0 0 3px rgba(31,37,82,.18); }
.jls-acct-avatar {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px;
    width:34px; height:34px; border-radius:50%; overflow:hidden;
    background:var(--acct-ink); color:#fff; font-weight:700; font-size:15px;
}
.jls-acct-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.jls-acct-avatar--lg { flex-basis:46px; width:46px; height:46px; font-size:19px; }
.jls-acct-name { min-width:0; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.jls-acct-tier {
    flex:0 0 auto; padding:3px 7px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
    background:#fdf1d8; color:#8a5a12; border:1px solid #f1d9a6;
}
.jls-acct-tier--premium { background:#1f2552; color:#ffd36b; border-color:#1f2552; }
.jls-acct-chevron { color:var(--acct-muted); display:inline-flex; transition:transform .15s; }
.jls-acct-chevron svg { width:16px; height:16px; flex-basis:16px; }
.jls-acct.open .jls-acct-chevron { transform:rotate(180deg); }

/* Dropdown */
.jls-acct .jls-acct-menu {
    min-width:270px; max-width:calc(100vw - 16px); margin-top:8px; padding:6px;
    border:1px solid var(--acct-line); border-radius:14px; background:#fff;
    box-shadow:0 14px 36px rgba(31,37,82,.14);
}
.jls-acct-menu > li > a {
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
    color:var(--acct-text); font-size:14px; font-weight:500; white-space:nowrap;
}
.jls-acct-menu > li > a svg { color:var(--acct-muted); }
.jls-acct-menu > li > a:hover, .jls-acct-menu > li > a:focus { background:var(--acct-hover); color:var(--acct-ink); }
.jls-acct-menu > li > a:hover svg, .jls-acct-menu > li > a:focus svg { color:var(--acct-ink); }
.jls-acct-menu > li > a.jls-acct-vip, .jls-acct-menu > li > a.jls-acct-vip svg { color:var(--acct-gold); }
.jls-acct-menu > li > a.jls-acct-vip:hover { background:#fdf5e4; color:#8a5a12; }
.jls-acct-menu > li > a.jls-acct-logout:hover, .jls-acct-menu > li > a.jls-acct-logout:hover svg { color:var(--acct-red); background:#fdf0ef; }
.jls-acct-menu > .divider { margin:6px 4px; background:var(--acct-line); }
.jls-acct-head {
    display:flex; align-items:center; gap:12px; margin-bottom:6px; padding:12px;
    border-radius:10px; background:var(--acct-soft);
}
.jls-acct-who { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.jls-acct-who strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--acct-ink); font-size:15px; }
.jls-acct-who small { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--acct-muted); font-size:12px; }
.jls-acct-plan { margin-top:2px; padding:2px 8px; border-radius:999px; background:#fff; border:1px solid var(--acct-line); color:var(--acct-muted); font-size:11px; font-weight:600; }
.jls-acct-plan.is-vip { background:#fdf1d8; border-color:#f1d9a6; color:#8a5a12; }

/* Logged out: Đăng nhập (outline) + Đăng ký (filled) */
.nav-header .jls-acct > a.jls-acct-login, .nav-header .jls-acct > a.jls-acct-register {
    display:inline-flex; line-height:1; align-items:center; gap:6px; height:40px; padding:0 14px;
    border-radius:999px; font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none;
    transition:background-color .15s, border-color .15s, color .15s;
}
.jls-acct-login { border:1px solid var(--acct-line); background:#fff; color:var(--acct-ink); }
.jls-acct-login:hover, .jls-acct-login:focus { background:var(--acct-hover); color:var(--acct-ink); text-decoration:none; }
.jls-acct-register { border:1px solid var(--acct-red); background:var(--acct-red); color:#fff; }
.jls-acct-register:hover, .jls-acct-register:focus { background:#b8262f; border-color:#b8262f; color:#fff; text-decoration:none; }

@media (max-width:991px) {
    .jls-acct-name, .jls-acct-tier { display:none; }
    .jls-acct-btn { padding-right:8px; gap:4px; }
}
@media (max-width:720px) {
    .jls-acct-btn { height:40px; padding:0 4px 0 2px; border-color:transparent; background:transparent; }
    .jls-acct-chevron { display:none; }
    .nav-header .jls-acct > a.jls-acct-register { display:none; }
    .nav-header .jls-acct > a.jls-acct-login { width:40px; height:40px; padding:0; justify-content:center; }
    .jls-acct-login span { display:none; }
}