/* ===== Header & layout ===== */
.th{overflow:visible!important;position:relative;z-index:100}
.th .centernav.bound{overflow:visible;position:relative;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:0 5px}
.th .searchx.minmb{flex:1 1 220px;min-width:220px}

/* ===== User widget ===== */
.user-system-widget{display:flex;align-items:center;gap:12px;position:relative;z-index:110}
#thememode{display:flex;align-items:center;gap:8px;margin-top:0}
.user-system-widget .username-text{max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--ps-fg)}
.user-system-widget span.label{font-weight:700}
.user-system-widget .user-dropdown-toggle{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 8px;white-space:nowrap;background:transparent;border:0;cursor:pointer}

/* ===== Avatar ===== */
.user-system-widget .avatar-frame-wrapper{position:relative;width:48px;height:48px;flex:0 0 48px;display:inline-block}
.user-system-widget .avatar-frame-wrapper img[alt=""]{pointer-events:none}
.us-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}
.us-frame{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:150%;height:150%;background-size:cover;background-repeat:no-repeat;pointer-events:none;z-index:2;max-width:70px}

/* ===== Dropdown ===== */
.user-system-widget .dropdown{position:relative}
.user-system-widget .user-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:99998;min-width:180px;max-height:70vh;overflow:auto;margin:0;padding:0;background:var(--ps-bg);color:var(--ps-fg);border:1px solid var(--ps-border);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.12);display:none}
span.caret-icon {color:var(--ps-fg)}
.user-system-widget .dropdown.show .user-dropdown-menu{display:block}
.user-system-widget .dropdown-item{display:block;padding:8px 12px;line-height:1.45;color:inherit;text-decoration:none;font-weight:700}
.user-system-widget .dropdown-item:hover{background:color-mix(in srgb,var(--ps-fg) 8%,var(--ps-bg))}
.user-system-widget .dropdown-divider{margin:6px 0;border:0;border-top:1px solid var(--ps-border)}

/* ===== Guest actions ===== */
.us-guest-actions{display:flex;align-items:center;gap:15px}
.us-link,.login-button{display:flex;align-items:center;gap:6px;text-decoration:none}
.us-link{color:#fff;background:var(--accent,#0073aa);padding:0 5px;border-radius:5px}
.login-button{padding:6px 12px;background:var(--accent,#0073aa);color:#fff;border:0;border-radius:4px;cursor:pointer}
.us-link:hover,.login-button:hover{opacity:.85}

/* ===== Alignment helpers ===== */
.user-system-widget .dropdown,.user-system-widget .user-dropdown-toggle{margin-inline:auto}

/* ===== Responsive ===== */
@media (max-width:800px){
  .user-system-widget .username-text{color:#4cf800}
  .th .centernav.bound > .srcmob{margin-left:auto}
  .th .centernav.bound > .user-system-widget{margin-left:auto}
}
@media (max-width:768px){
  .user-system-widget .username-text{max-width:92px}
  #thememode{margin-left:4px}
}
@media (max-width:480px){
  .th{height:auto!important}
  .th .centernav.bound{flex-wrap:wrap;row-gap:8px}
  .user-system-widget{order:99;flex:1 0 100%;width:100%}
  .user-system-widget .us-guest-actions{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;margin-inline:auto}
  .user-system-widget .user-dropdown-menu{position:static!important;justify-content:center;gap:12px;background:transparent;border:0;box-shadow:none;padding:0;margin:0;max-height:none}
  .user-system-widget .dropdown-item{flex:0 0 auto;padding:10px;border-radius:8px}
}

/* Khung hiển thị frame bằng ::after */
.avatar-frame-wrapper {
  position: relative;
  display: inline-block;
  width: 40px; height: 40px;
}
.avatar-frame-wrapper.has-frame::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
}

/* Avatar/frames */
.avatar-wrapper{width:48px;height:48px;position:relative;flex-shrink:0}
.frame-basic::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/basic.png')}
.frame-silver::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/silver.png')}
.frame-gold::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/gold.png')}
.frame-platinum::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/platinum.png')}
.frame-diamond::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/diamond.png')}
.frame-legend::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/legend.png')}
.frame-admin::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/admin.png')}