/* Small standalone control: no external icon library or network requests. */
.zx-role-picker{position:relative;width:100%;min-width:0;text-align:left}
body .zx-role-picker select.zx-role-native{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;clip-path:inset(50%);overflow:hidden;pointer-events:none}
body .zx-role-trigger{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:11px 14px!important;margin:0;border:1px solid #39404d!important;border-radius:12px;background:#171b22!important;color:#edf0f6!important;box-shadow:0 2px 5px #0001;font:inherit;text-align:left;text-transform:none;letter-spacing:normal;cursor:pointer;transition:border-color .15s,background-color .15s}
body .zx-role-trigger:hover:not(:disabled){border-color:#82606b!important;background:#1c2029!important}
body .zx-role-trigger[aria-expanded=true],body .zx-role-trigger:focus-visible{border-color:#e05572!important;outline:2px solid #d52c4a33;outline-offset:2px}
body .zx-role-trigger:disabled{opacity:.7;cursor:not-allowed;box-shadow:none}
body .zx-role-avatar{display:grid!important;place-items:center;flex:0 0 38px;width:38px;height:38px;border:1px solid #5d3341!important;border-radius:10px;background:linear-gradient(145deg,#432332,#281d29)!important;color:#f2b9c5!important;font:700 13px/1 "Segoe UI",sans-serif!important;letter-spacing:.02em;text-transform:none!important;overflow:hidden}
.zx-role-avatar svg{width:24px;height:24px}
.zx-role-class-icon{display:block;width:26px;height:26px;background-image:url('/public/images/profession.png?v=2');background-repeat:no-repeat;background-size:26px auto}
.zx-role-class-icon.is-truc-suong{background-image:url('/public/images/profession-truc-suong.png?v=1');background-position:center;background-size:contain}
body .zx-role-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;margin:0;text-align:left;text-transform:none!important;letter-spacing:normal}
body .zx-role-name{display:block;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef0f6!important;font-size:14px!important;font-weight:650!important;line-height:1.4!important;text-transform:none!important;letter-spacing:normal}
body .zx-role-caption{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a4adbd!important;font-size:12px!important;font-weight:400!important;line-height:1.4!important;text-transform:none!important;letter-spacing:normal}
body .zx-role-badge,body .zx-role-count{flex-shrink:0;padding:4px 8px;border:1px solid #3b414e;border-radius:6px;background:#252b35!important;color:#b8c1d0!important;font-size:11px!important;line-height:1.5;font-weight:500!important;text-transform:none!important;letter-spacing:normal}
body .has-selection .zx-role-badge{background:#34212b!important;color:#f5bdc9!important;border-color:#6f3444}
.zx-role-chevron{flex:0 0 7px;width:7px;height:7px;margin:0 3px 4px 2px;border:solid #98a3b4;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.zx-role-trigger[aria-expanded=true] .zx-role-chevron{transform:rotate(225deg);margin-top:5px}
body .zx-role-popover{position:fixed;z-index:1085;display:flex;flex-direction:column;box-sizing:border-box;padding:0;border:1px solid #49505e;border-radius:14px;background:#1a1e26!important;color:#edf0f6!important;box-shadow:0 16px 44px #0008;overflow:hidden;font-family:Inter,"Segoe UI",Arial,sans-serif;isolation:isolate;text-align:left}
body .zx-role-popover[hidden],body .zx-role-popover [hidden],body .zx-role-picker [hidden]{display:none!important}
.zx-role-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:16px 16px 12px}
.zx-role-heading-copy{display:grid;gap:3px;min-width:0}
body .zx-role-eyebrow{color:#bf8796!important;font-size:10px!important;font-weight:650;letter-spacing:.12em;line-height:1.5}
body .zx-role-heading-title{color:#f1f3f8!important;font-size:16px!important;font-weight:700;line-height:1.5}
.zx-role-search-wrap{flex-shrink:0;padding:0 12px 10px}
body .zx-role-popover input.zx-role-search{box-sizing:border-box;width:100%;height:40px;min-height:40px;margin:0;padding:0 12px;border:1px solid #3b4351!important;border-radius:8px;background:#12161d!important;color:#e9eef6!important;font:400 13px/1.4 Inter,"Segoe UI",Arial,sans-serif;box-shadow:none;outline-offset:1px}
body .zx-role-popover input.zx-role-search:focus{border-color:#b84d64!important;outline:1px solid #b84d6455}
.zx-role-list{min-height:0;max-height:255px;flex:1 1 auto;padding:0 7px 7px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4b3b46 transparent}
body .zx-role-option{display:flex;align-items:center;gap:11px;min-height:56px;margin:3px 0;padding:9px;border:1px solid transparent;border-radius:9px;background:transparent!important;cursor:pointer}
body .zx-role-option:hover,body .zx-role-option.is-active{background:#292932!important;border-color:#55505e}
body .zx-role-option[aria-selected=true]{background:#38212d!important;border-color:#904058}
.zx-role-option .zx-role-avatar{flex-basis:34px;width:34px;height:34px;border-radius:9px}
body .zx-role-check{width:22px;flex:0 0 22px;text-align:center;color:#f797ac!important;font-size:17px!important;visibility:hidden}
.zx-role-option[aria-selected=true] .zx-role-check{visibility:visible}
body .zx-role-no-results{padding:20px 16px 24px;text-align:center;color:#b9c2d0!important;font-size:13px!important}
body .zx-role-footer{flex-shrink:0;padding:10px 15px;border-top:1px solid #323846;color:#99a5b8!important;background:#171b22!important;font-size:11px!important;line-height:1.5}
body .gift-role-field:has(.zx-role-picker){display:block;border:0;background:transparent!important}
.gift-role-field:has(.zx-role-picker)>i{display:none}
@media(max-width:480px){body .zx-role-trigger{gap:10px;padding:10px 12px!important;min-height:64px}.zx-role-trigger .zx-role-badge{display:none}.zx-role-heading{padding:12px}.zx-role-footer{display:none}.zx-role-option{min-height:58px}}
@media(prefers-reduced-motion:reduce){.zx-role-trigger{transition:none}}