:root {
  --bg1: #fdf4fb;
  --bg2: #eaf3ff;
  --card: rgba(255, 255, 255, 0.88);
  --line: #ece6f5;
  --text: #4a4566;
  --muted: #9a93b5;
  --accent: #a58bff;         /* oai huong */
  --accent-2: #ff9ec7;       /* hong dao */
  --mint: #7fd8c3;
  --track: #efeaf8;
  --shadow: 0 10px 30px rgba(120, 100, 180, 0.14);
  --radius: 22px;
  --gap: 16px;
  --rail-w: 88px;
  --panel-w: 340px;
  --top-h: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { color: var(--text); font: 15px/1.45 "Quicksand", "Segoe UI", system-ui, sans-serif; font-weight: 600;
  background: radial-gradient(ellipse at 40% 40%, #ffffff 0%, #f7f0ff 45%, #e6efff 100%);
  -webkit-tap-highlight-color: transparent; user-select: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input { user-select: text; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.screen { position: fixed; inset: 0; pointer-events: none; }
.screen > * { pointer-events: auto; }
.screen[hidden] { display: none; }

/* ------------------------------------------------ nut chung */
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card);
  box-shadow: var(--shadow); color: var(--text); transition: transform .15s; }
.round.sm { width: 38px; height: 38px; }
.round:hover { transform: translateY(-2px); }
.round.on { color: var(--accent); }
.round.on svg { fill: currentColor; }
.chip { padding: 3px 10px; border-radius: 999px; background: #f4f0fb; color: var(--muted); font-size: 12px; }
.chip.on { background: #efe8ff; color: var(--accent); }

/* ================================================ TAO NHAN VAT */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: var(--top-h); display: flex; align-items: center;
  gap: 20px; padding: 0 20px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.logo svg { width: 28px; height: 28px; fill: var(--accent-2); stroke: none; }
.logo span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps { display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 4px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.steps li { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--track); font-size: 12px; }
.steps li.active { background: linear-gradient(90deg, #efe8ff, #ffe8f3); color: var(--text); }
.steps li.active b { background: var(--accent); color: #fff; }
.steps li.soon { opacity: .7; }

.rail { position: absolute; left: var(--gap); top: 50%; transform: translateY(-50%); width: var(--rail-w);
  display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 2px; border-radius: 16px; color: var(--muted); font-size: 12px; transition: background .2s, color .2s; }
.rail button svg { width: 26px; height: 26px; }
.rail button:hover { background: #f6f2ff; color: var(--text); }
.rail button.active { background: linear-gradient(160deg, #efe8ff, #ffe9f4); color: var(--accent); }

.badge { position: absolute; top: calc(var(--top-h) + 4px); left: calc(var(--rail-w) + var(--gap) * 2); padding: 6px 14px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); font-size: 14px; color: var(--muted); }
.badge b { color: var(--text); }
.stage-tools { position: absolute; bottom: 18px; display: flex; gap: 10px; align-items: center; transform: translateX(-50%);
  left: calc((var(--rail-w) + var(--gap) * 2 + 100vw - var(--panel-w) - var(--gap) * 2) / 2); }
.pill { display: flex; padding: 4px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.pill button { padding: 8px 16px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.pill button.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; }

.panel { position: absolute; right: var(--gap); top: var(--top-h); bottom: var(--gap); width: var(--panel-w);
  display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 14px; }
.gender { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gender button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 16px;
  background: #f7f4fc; color: var(--muted); border: 2px solid transparent; transition: all .2s; }
.gender .sym { font-size: 18px; }
.gender button.active { background: #fff; color: var(--text); border-color: var(--accent); box-shadow: 0 6px 16px rgba(165, 139, 255, .25); }
.gender button[data-g="female"].active { border-color: var(--accent-2); box-shadow: 0 6px 16px rgba(255, 158, 199, .3); }
.panel-head { margin: 12px 2px 2px; }
.panel-head h2 { margin: 0; font-size: 19px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }

.tab-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: #ddd3f2 transparent; touch-action: pan-y; }
.group { margin-top: 12px; }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.group-head .grow { flex: 1; }
.face-group .group-head > span:first-child, .face-group .group-head .grow { display: none; }
.face-group .group-head { order: 0; }
.face-reg { order: -1; flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #f6f2fd;
  color: var(--text); font-size: 14px; text-align: left; }
.face-reg small { min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; display: grid; place-items: center; }
.face-reg small:empty { display: none; }
.face-reg i { margin-left: auto; font-style: normal; color: var(--muted); transition: transform .15s; }
.face-reg.open i { transform: rotate(90deg); }
.face-group.collapsed > :not(.group-head) { display: none; }
.face-group { margin-top: 6px; }
.slider { padding: 5px 0; }
.slider label { display: flex; justify-content: space-between; cursor: default; font-size: 14px; }
.slider.changed label { color: var(--accent); }
.val { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 24px; background: none; margin: 0; cursor: pointer; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) 0, var(--accent-2) var(--p, 50%), var(--track) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--track); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(120, 100, 180, .3); transition: transform .15s; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }

.tri { padding: 8px 12px; margin: 6px 0; border-radius: 16px; background: #faf8fe; }
.tri-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.tri.changed .tri-head .name { color: var(--accent); }
.tri-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tri-cell { min-width: 0; }
.tri-cell .lab { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.mini { width: 26px; height: 26px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; font-size: 13px; }
.mini:hover { background: #efe8ff; color: var(--accent); }
.add-bone { display: flex; gap: 8px; margin-top: 10px; }
.add-bone select { flex: 1; min-width: 0; background: #faf8fe; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.add-bone button { padding: 6px 12px; border-radius: 12px; background: #efe8ff; color: var(--accent); white-space: nowrap; }

.panel-foot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; display: grid; gap: 8px; }
.name-input { background: #faf8fe; border: 2px solid var(--line); border-radius: 14px; padding: 8px 14px; color: var(--text); outline: none; min-width: 0; }
.name-input:focus { border-color: var(--accent); }
.foot-btns { position: relative; display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; }
.ghost { padding: 9px 6px; border-radius: 14px; background: #f6f2fd; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost:hover { background: #efe8ff; }
.menu { position: absolute; right: 0; bottom: 50px; display: grid; min-width: 200px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); z-index: 5; }
.menu[hidden] { display: none; }
.menu button { text-align: left; padding: 10px 12px; border-radius: 10px; }
.menu button:hover { background: #f6f2fd; }
.primary { padding: 12px; border-radius: 16px; color: #fff; font-size: 16px; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px rgba(200, 130, 220, .35); transition: transform .15s; }
.primary:hover { transform: translateY(-2px); }

/* ================================================ THE GIOI */
.w-card { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.w-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.w-card b { display: block; font-size: 16px; }
.w-card small { color: var(--muted); font-size: 12px; font-weight: 500; }
.w-tools { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
.tool { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); white-space: nowrap; }
.tool.icon { width: 44px; padding: 0; justify-content: center; }
.tool.on { color: var(--accent); }
.tool[hidden] { display: none; }
.w-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); color: var(--muted); font-size: 13px; white-space: nowrap; pointer-events: none; }
.w-picker { position: absolute; top: 66px; right: 14px; display: grid; gap: 4px; min-width: 200px; padding: 8px; border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow); z-index: 5; }
.w-picker[hidden] { display: none; }
.w-picker button.on { color: var(--accent); font-weight: 700; }
.w-picker b { padding: 4px 12px; color: var(--muted); font-size: 12px; }
/* dieu khien cam ung (drive.js) - chi hien tren man cam ung */
.w-pad, .w-acts { display: none; }
@media (pointer: coarse) {
  .w-pad { display: block; position: absolute; left: 28px; bottom: 28px; width: 132px; height: 132px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.45); border: 2px solid rgba(165, 139, 255, 0.35); touch-action: none; }
  .w-pad i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); pointer-events: none; }
  .w-acts { display: grid; position: absolute; right: 24px; bottom: 24px; grid-template-columns: auto auto; gap: 10px; align-items: end; }
  .w-acts .act { min-width: 74px; height: 50px; padding: 0 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
    font-weight: 700; color: var(--text); touch-action: none; }
  .w-acts .act.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .w-acts .act.big { width: 84px; height: 84px; border-radius: 50%; color: #fff; font-size: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .w-hint { display: none; }
}
@media (pointer: coarse) and (max-height: 560px) {
  .w-pad { left: 18px; bottom: 18px; width: 112px; height: 112px; }
  .w-acts { right: 16px; bottom: 16px; gap: 8px; }
  .w-acts .act { min-width: 64px; height: 42px; font-size: 13px; }
  .w-acts .act.big { width: 72px; height: 72px; }
}

/* ================================================ chung */
.loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted);
  background: rgba(253, 248, 255, 0.9); transition: opacity .3s; z-index: 20; }
.loading.hidden { opacity: 0; pointer-events: none; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: bob 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--accent-2); }
.dots i:nth-child(3) { animation-delay: .3s; background: var(--mint); }
@keyframes bob { 50% { transform: translateY(-8px); } }
.toast { position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 20px); padding: 10px 20px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .3s; z-index: 30; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#rotate-hint { display: none; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(160deg, var(--bg1), var(--bg2)); color: var(--text); text-align: center; padding: 24px; }
#rotate-hint svg { width: 88px; height: 88px; stroke: var(--accent); stroke-width: 2.2; animation: tilt 2.2s infinite ease-in-out; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate-hint { display: flex; } }

/* dien thoai xoay ngang / man thap */
@media (max-height: 560px) {
  :root { --gap: 10px; --rail-w: 64px; --panel-w: 300px; --top-h: 48px; }
  body { font-size: 14px; }
  .logo { font-size: 16px; }
  .logo svg { width: 22px; height: 22px; }
  .steps li { font-size: 12px; padding: 3px 10px 3px 3px; }
  .steps b { width: 20px; height: 20px; }
  .rail { gap: 2px; padding: 6px; }
  .rail button { padding: 8px 2px; font-size: 10px; }
  .rail button svg { width: 22px; height: 22px; }
  .panel { padding: 10px 12px; }
  .gender button { padding: 6px; }
  .panel-head { margin-top: 6px; }
  .panel-head h2 { font-size: 16px; }
  .panel-head p { display: none; }
  .panel-foot { grid-template-columns: 1fr; padding-top: 8px; gap: 6px; margin-top: 6px; }
  .name-input { padding: 6px 12px; }
  .ghost { padding: 7px 4px; font-size: 13px; }
  .primary { padding: 9px; font-size: 15px; }
  .round { width: 38px; height: 38px; }
  .pill button { padding: 6px 12px; font-size: 13px; }
  .stage-tools { bottom: 10px; gap: 6px; }
  .badge { font-size: 12px; padding: 4px 10px; }
  .tool { height: 38px; padding: 0 12px; font-size: 13px; }
  .tool.icon { width: 38px; }
  .w-ava { width: 32px; height: 32px; }
  .w-hint { font-size: 12px; bottom: 10px; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .steps li.soon { display: none; }
}
@media (max-height: 560px) {
  .panel-head { display: none; }
  .gender { margin-bottom: 4px; }
  .panel-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .foot-btns { grid-template-columns: repeat(3, 36px); gap: 4px; }
  .foot-btns .t { display: none; }
  .ghost { height: 34px; padding: 0; display: grid; place-items: center; }
  .panel-foot .primary { grid-column: 1 / -1; }
}

/* dang co san + tron 2 dang */
.base-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.base-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px;
  background: #faf8fe; border: 2px solid transparent; font-size: 12px; color: var(--text); transition: all .15s; min-width: 0; }
.base-card span:last-child { text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.base-card .ico { font-size: 22px; line-height: 1.1; }
.base-card:hover { background: #f3eefe; }
.base-card.active { border-color: var(--accent); background: #fff; box-shadow: 0 4px 12px rgba(165, 139, 255, .25); }
.base-mix { margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg, #f4efff, #fff0f7); }
.mix-title { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.mix-row select { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; font-size: 13px; }
.mix-x { color: var(--accent-2); font-size: 12px; }
.mix-pct { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
@media (max-height: 560px) {
  .base-card { padding: 5px 2px; font-size: 11px; }
  .base-card .ico { font-size: 18px; }
}

/* buoc + tu do */
.steps li[data-step] { cursor: pointer; transition: background .2s; }
.steps li[data-step]:not(.active):hover { background: #f6f2fd; }
.creator.mode-outfit .rail { display: none; }
.creator.mode-outfit .badge { left: var(--gap); }
.creator.mode-outfit .stage-tools { left: calc((100vw - var(--panel-w) - var(--gap)) / 2); }
/* buoc 3: xem lai truoc khi vao game */
.creator.mode-play #random, .creator.mode-play #reset { display: none; }
.sum-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.sum-row > div { display: grid; gap: 4px; min-width: 0; }
.sum-row small { color: var(--muted); font-size: 12px; font-weight: 600; }
.sum-row b { font-weight: 600; }
.sum-row .chip { flex: none; cursor: pointer; }
.sum-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sum-item { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #f6f2ff; font-size: 13px; max-width: 100%; }
.sum-item img, .sum-item .ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.sum-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-hint { margin: 12px 4px 0; color: var(--muted); font-size: 13px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cat-chips .chip { padding: 5px 12px; font-size: 13px; }
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 6px; }
.item-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 16px;
  background: #faf8fe; border: 2px solid transparent; min-width: 0; transition: all .15s; }
.item-card:hover { background: #f3eefe; }
.item-card.worn { border-color: var(--accent); background: #fff; box-shadow: 0 4px 12px rgba(165, 139, 255, .25); }
.item-card .thumb { width: 100%; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, #fff, #f1ebff);
  display: grid; place-items: center; overflow: hidden; font-size: 28px; }
.item-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-card .nm { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card small { font-size: 11px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); font-weight: 500; margin: 30px 10px; line-height: 1.6; }
@media (max-height: 560px) { .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* hop thoai cua game */
.dlg-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(74, 69, 102, 0.28); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s; }
.dlg-back.show { opacity: 1; }
.dlg-back.lock-elsewhere { z-index: 99999; background: rgba(40, 36, 60, .72); }   /* dang choi o noi khac: phu kin game */
.dlg { width: min(380px, 100%); padding: 24px 22px 18px; border-radius: 26px; background: #fff; text-align: center;
  box-shadow: 0 24px 60px rgba(120, 100, 180, .3); transform: translateY(12px) scale(.96); transition: transform .18s; }
.dlg-back.show .dlg { transform: none; }
.dlg-icon { width: 58px; height: 58px; margin: -54px auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg, #efe8ff, #ffe8f3); box-shadow: 0 8px 20px rgba(165, 139, 255, .3); }
.dlg.danger .dlg-icon { background: linear-gradient(135deg, #ffe9ee, #ffd9e3); }
.dlg h3 { margin: 4px 0 6px; font-size: 18px; color: var(--text); }
.dlg p { margin: 0 0 4px; color: var(--muted); font-weight: 500; line-height: 1.5; white-space: pre-line; }   /* xuong dong trong noi dung */
.dlg-btns { display: flex; gap: 10px; margin-top: 18px; }
.dlg-btns button { flex: 1; padding: 11px 10px; border-radius: 16px; font-size: 15px; }
.dlg-cancel { background: #f4f0fb; color: var(--text); }
.dlg-cancel:hover { background: #ebe3fd; }
.dlg-danger { color: #fff; background: linear-gradient(90deg, #ff7b9c, #ff9ec7); box-shadow: 0 8px 18px rgba(255, 110, 150, .35); }
.dlg-btns .primary { padding: 11px 10px; }
.dlg-btns button:focus-visible { outline: 3px solid rgba(165, 139, 255, .5); outline-offset: 2px; }

/* tu do dang tab */
.w-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-top: 10px;
  background: #f4f0fb; border-radius: 14px; }
.w-tabs button { padding: 8px 6px; border-radius: 11px; color: var(--muted); white-space: nowrap; }
.w-tabs button.on { background: #fff; color: var(--text); box-shadow: 0 3px 10px rgba(120, 100, 180, .15); }
.cat-chips .chip.no-items { opacity: .55; }
.item-card.none .thumb { font-size: 26px; color: var(--muted); background: repeating-linear-gradient(45deg, #faf8fe, #faf8fe 8px, #f3effb 8px, #f3effb 16px); }
.reset-outfit { display: block; margin: 10px auto 4px; padding: 6px 14px; }
.cat-chips { align-items: flex-start; }
.cat-chips .chip { flex: none; white-space: nowrap; line-height: 1.4; }

/* doi ngon ngu */
.lang-switch { display: flex; gap: 2px; padding: 3px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.lang-switch button { padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); }
.lang-switch button.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; }
.lang-switch.tool { height: auto; padding: 3px; }
.topbar .lang-switch { margin-left: auto; }
.topbar .steps + .lang-switch { margin-left: 0; }
/* do shop trong tu do: nhan gia (bac / vang) - chi hien thi, server quyet dinh */
.item-card .thumb { position: relative; }
.item-card .pr-tag { position: absolute; left: 3px; right: 3px; bottom: 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: rgba(255, 255, 255, .92); color: #6f6a80; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.item-card .pr-tag.gold { color: #b07800; background: #fff6d8; }
.sum-warn { margin: 10px 4px 0; padding: 8px 10px; border-radius: 12px; background: #fff3d6; color: #8a6400; font-size: 12px; font-weight: 600; }

/* Tab Than hinh (2026-10-17): moi bo phan 1 thanh To/nho + mo rong 3 truc */
.part { padding: 6px 12px 8px; margin: 6px 0; border-radius: 16px; background: #faf8fe; }
.part-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.part-row .name { flex: 1; cursor: default; }
.part-row .val { color: var(--muted); font-variant-numeric: tabular-nums; }
.part.changed .part-row .name, .part.changed .part-row .val { color: var(--accent); }
.part .more { transition: transform .15s; }
.part.open .more { transform: rotate(90deg); }
.part input.main { width: 100%; }
.part-axes { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.part.open .part-axes { display: grid; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 4px 2px; }

/* trang diem (tab Mat) */
.mk-looks { margin: 2px 0 8px; }
.mk-chips, .mk-fin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-fin { margin-top: 6px; }
.mk-fin > span { font-size: 12px; color: var(--muted); margin-right: 2px; }
.mk-chips .chip, .mk-fin .chip { font-size: 12px; padding: 4px 10px; }
.mk-fin .chip.active { background: var(--accent); color: #fff; }
.mk-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mk-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.15); padding: 0; cursor: pointer; }
.mk-sw.active { box-shadow: 0 0 0 2px var(--accent); }
.mk-clean { margin: 2px 0 6px; font-size: 12px; }
.mk-hides { margin: 0 0 8px; }
.mk-desk-btn { font-size: 12px; }
.skin-row { margin: 2px 0 8px; }
.skin-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.skin-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(120,100,180,.18); padding: 0; cursor: pointer; transition: transform .12s; }
.skin-dot:hover { transform: scale(1.1); }
.skin-dot.active { box-shadow: 0 0 0 2.5px var(--accent), 0 2px 6px rgba(120,100,180,.25); }
.skin-pick .skin-name { margin-left: auto; font-size: 12px; color: var(--muted); }
.mk-hint { font-size: 12px; color: var(--muted); margin: 2px 2px 6px; line-height: 1.4; }
.mk-slot { padding: 8px 0 10px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.mk-slot:first-of-type { border-top: 0; }
.mk-head { display: flex; justify-content: space-between; font-size: 13px; margin: 0 2px 6px; color: var(--muted); }
.mk-slot.on .mk-head { color: inherit; }
.mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 10px;
  border: 1px solid transparent; background: rgba(255,255,255,.04); color: inherit; cursor: pointer; min-width: 0; }
.mk-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #d9b9a3; }
.mk-opt.none span { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 20px; color: var(--muted); }
.mk-opt small { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-opt:hover { border-color: rgba(255,255,255,.18); }
.mk-opt.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mk-ctl:empty { display: none; }
.mk-ctl { margin-top: 6px; }
.mk-color { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 2px 0; }
.mk-color span { flex: 1; color: var(--muted); }
.mk-color input[type=color] { width: 40px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }

/* ------------------------------------------------ Ban trang diem (js/screens/makeupdesk.js) */
.creator.desk-open .panel, .creator.desk-open .rail, .creator.desk-open .stage-tools, .creator.desk-open .steps,
.creator.desk-open #stat { display: none !important; }
#mk-desk { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#mk-desk > * { pointer-events: auto; }
.mkd-tools { position: absolute; left: var(--gap); top: var(--top-h); bottom: var(--gap); width: 92px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  scrollbar-width: thin; }
.mkd-tool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 14px; color: var(--muted);
  border: 2px solid transparent; background: transparent; }
.mkd-tool svg { width: 26px; height: 26px; }
.mkd-tool small { font-size: 10.5px; line-height: 1.15; text-align: center; }
.mkd-tool:hover { background: #f7f4fc; }
.mkd-tool.active { color: var(--accent); background: linear-gradient(135deg, #efe8ff, #ffe8f3); border-color: #e2d8ff; }
.mkd-panel { position: absolute; right: var(--gap); top: var(--top-h); bottom: var(--gap); width: 300px; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; overflow-y: auto; }
.mkd-title { display: flex; flex-direction: column; }
.mkd-title b { font-size: 18px; }
.mkd-title small { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.mkd-tool-name { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--accent); }
.mkd-tool-name svg { width: 22px; height: 22px; }
.mkd-body { display: flex; flex-direction: column; gap: 8px; }
.mkd-pal { align-items: center; }
.mkd-pick { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center;
  background: conic-gradient(#f66, #fd6, #6d6, #6df, #96f, #f6c, #f66); box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; }
.mkd-pick input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.mkd-stencils { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mkd-st { aspect-ratio: 1; border-radius: 10px; background: #f7f4fc; border: 2px solid transparent; position: relative; }
.mkd-st::after { content: ""; position: absolute; inset: 6px; background: var(--c, #d42a3a);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mkd-st.active { border-color: var(--accent); }
.mkd-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mkd-row .chip { font-size: 12px; padding: 5px 10px; }
.mkd-row .chip:disabled { opacity: .45; }
.mkd-done { margin-top: auto; }
.mkd-cam { position: absolute; left: 50%; bottom: var(--gap); transform: translateX(-50%); display: flex; gap: 8px; }
.mkd-cam .tool { width: 44px; padding: 0; justify-content: center; font-size: 18px; }
.mkd-cursor { position: fixed; left: 0; top: 0; pointer-events: none !important; z-index: 21; }
.mkd-cursor i { position: absolute; left: 0; top: 0; border: 1.5px solid #a58bff; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.mkd-cursor span { position: absolute; left: 10px; top: 8px; width: 26px; height: 26px; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(60,40,90,.6)); }
.mkd-cursor span svg { width: 100%; height: 100%; }
#view.painting { cursor: none; }
#view.grab { cursor: grab; }
#view.grab:active { cursor: grabbing; }
@media (max-width: 900px), (max-height: 520px) {
  .mkd-tools { width: 62px; padding: 6px 4px; }
  .mkd-tool small { display: none; }
  .mkd-panel { width: 240px; padding: 12px; gap: 8px; }
  .mkd-title small { display: none; }
}

/* ------------------------------------------------ bo cuc tiet kiem cho (2026-10-18): buoc 1, 2 khong co chan bang;
   Ngau nhien / Dat lai / ⋯ thu thanh bieu tuong canh Nu / Nam; ten + Vao game chi o buoc 3; nut › cuoi thanh buoc */
.panel-top { display: flex; gap: 8px; align-items: stretch; }
.panel-top .gender { flex: 1; min-width: 0; }
.panel-top .foot-btns { display: flex; gap: 6px; flex: none; }
.panel-top .foot-btns .ghost { width: 40px; padding: 0; display: grid; place-items: center; font-size: 16px; }
.panel-top .foot-btns .t { display: none; }
.creator:not(.mode-play) .panel-foot { display: none; }
.creator.mode-play .panel-foot { grid-template-columns: 1fr; }
.creator.mode-play .foot-btns #random, .creator.mode-play .foot-btns #reset { display: none; }
.steps .step-next { padding: 0; }
.steps .step-next button { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 20px; line-height: 1; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 3px 10px rgba(165, 139, 255, .35); display: grid; place-items: center; }
.creator.mode-play .steps .step-next { display: none; }
@media (max-height: 560px) {
  .panel-top { gap: 6px; }
  .panel-top .foot-btns { gap: 4px; }
  .panel-top .foot-btns .ghost { width: 34px; height: auto; font-size: 14px; }
  .gender button { padding: 5px; font-size: 13px; gap: 4px; }
  .gender .sym { font-size: 15px; }
  .steps .step-next button { width: 24px; height: 24px; font-size: 17px; }
  .logo span, .logo b { display: none; }
}

/* ================================================ DANG NHAP / DANG KY (auth.js) - uu tien dien thoai, doc + ngang */
.auth { position: fixed; inset: 0; z-index: 60; background: radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f7f0ff 45%, #e6efff 100%);
  transition: opacity .25s; }
.auth[hidden] { display: none; }
.auth.leaving { opacity: 0; pointer-events: none; }
body.authing #rotate-hint { display: none !important; }        /* dang nhap duoc ca khi cam doc */
.au-lang { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.au-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex;
  padding: max(56px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.au-card { margin: auto; width: min(400px, 100%); padding: 26px 22px 20px; border-radius: 28px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 60px rgba(120, 100, 180, .18); }
.au-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; }
.au-brand svg { width: 44px; height: 44px; fill: var(--accent-2); stroke: none; filter: drop-shadow(0 6px 12px rgba(255, 158, 199, .45)); }
.au-brand b { font-size: 24px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-brand small { color: var(--muted); font-size: 13px; font-weight: 500; }
.auth form { display: grid; gap: 12px; }
.auth form[hidden] { display: none; }
.auth h1 { margin: 0; font-size: 20px; text-align: center; color: var(--text); }
.au-sub { margin: -4px 0 0; color: var(--muted); font-weight: 500; font-size: 14px; text-align: center; line-height: 1.5; }
.au-field { display: grid; gap: 5px; }
.au-field > span:first-child { font-size: 13px; color: var(--muted); padding-left: 4px; }
.au-field input { width: 100%; height: 50px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--line); background: #faf8fe;
  font-size: 16px; color: var(--text); outline: none; transition: border-color .15s, background .15s; -webkit-appearance: none; appearance: none; }
.au-field input::placeholder { color: #c3bdd6; font-weight: 500; }
.au-field input:focus { border-color: var(--accent); background: #fff; }
.au-field.bad input { border-color: #ff8fab; background: #fff6f8; }
.au-pw { position: relative; display: block; }
.au-pw input { padding-right: 52px; }
.au-eye { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.au-eye.on { color: var(--accent); }
.au-eye.on svg path { stroke-dasharray: 2 2; }
.au-hint { font-size: 12px; color: var(--muted); font-weight: 500; padding-left: 4px; }
.au-err { font-style: normal; font-size: 12.5px; color: #e5577a; padding-left: 4px; min-height: 0; }
.au-err:empty { display: none; }
.au-field.bad .au-hint { display: none; }
.au-msg { margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff0f4; color: #d9466c; font-size: 14px; text-align: center; }
.au-msg.info { background: #effaf6; color: #2f9b80; }
.au-msg[hidden] { display: none; }
.au-submit { height: 52px; margin-top: 4px; font-weight: 700; }
.au-submit:disabled { opacity: .65; transform: none; }
.auth form.busy .au-submit { cursor: progress; }
.au-links { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.au-links.one { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 14px; }
.au-links a { display: inline-block; padding: 8px 10px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 14px; }
.au-links a.strong { color: var(--accent); font-weight: 700; }
.au-links a:hover, .au-links a:focus-visible { background: #f4effe; outline: none; }
.au-links.one a { padding: 8px 4px; }

/* dien thoai xoay ngang (man thap): logo ben trai, form ben phai, gon lai */
@media (orientation: landscape) and (max-height: 560px) {
  .au-scroll { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .au-card { width: min(640px, 100%); display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 22px; }
  .au-brand { margin: 0; }
  .au-brand svg { width: 56px; height: 56px; }
  .auth form { gap: 8px; }
  .auth h1 { font-size: 18px; text-align: left; }
  .au-sub { text-align: left; }
  .au-field input { height: 44px; }
  .au-eye { width: 36px; height: 36px; }
  .au-submit { height: 46px; }
  .au-links { flex-direction: row; justify-content: space-between; }
  .au-links.one { justify-content: flex-start; }
}
@media (max-width: 360px) { .au-card { padding: 22px 16px 16px; } }

/* the goc trai (avatar mac dinh + ten tai khoan) + bang ten nhan vat tren dau (world._placeNameplate) */
.w-ava svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2; }
.w-card b { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-plate { position: absolute; left: 0; top: 0; pointer-events: none !important; visibility: hidden; padding: 2px 10px; border-radius: 999px;
  background: rgba(74, 69, 102, .45); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: 60vw;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); will-change: transform; }
.w-plate:empty { display: none; }
@media (max-height: 560px) { .w-ava svg { width: 20px; height: 20px; } .w-plate { font-size: 12px; } }
/* man hep (dien thoai ngang): thanh cong cu the gioi chi hien bieu tuong -> khong de len the goc trai */
@media (max-width: 1100px) {
  .w-tools button.tool { width: 44px; padding: 0; justify-content: center; }
  .w-tools button.tool > span { display: none; }
}
@media (max-width: 1100px) and (max-height: 560px) { .w-tools button.tool { width: 38px; } .w-tools { gap: 6px; } }

/* ================================================ HAO QUANG (aurashop.js) */
.w-plate .lv { font-style: normal; margin-right: 6px; color: var(--ac); text-shadow: 0 0 6px var(--ac); }
.aura-panel { position: absolute; right: 14px; top: 70px; bottom: 14px; width: min(380px, 48vw); display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--radius); background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); z-index: 6; }
.aura-panel[hidden] { display: none; }
.world.shop-open .w-acts, .world.shop-open .w-pad, .world.shop-open .w-hint { display: none !important; }
.ap-head { display: flex; align-items: center; gap: 8px; }
.ap-head b { font-size: 17px; }
.ap-wallet { margin-left: auto; display: flex; gap: 6px; }
.ap-wallet .cur { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #f4f0fb; font-size: 13px; }
.ap-wallet .cur i { font-style: normal; color: var(--text); }
.ap-wallet .silver { color: #9aa3b5; }
.ap-wallet .gold { color: #e0a800; }
.ap-close:not(.back-btn) { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.ap-tabs { margin-top: 0; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; overflow-y: auto; min-height: 90px; flex: 1; align-content: start; padding: 2px; }
.ap-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px;
  background: #faf8fe; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.ap-card img { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 35%, transparent); }
.ap-card .nm { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-card small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ap-card.on { border-color: var(--ac); background: #fff; }
.ap-card.worn::after { content: "✓"; position: absolute; top: 4px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; color: #fff; background: var(--ac); }
.ap-detail { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 8px; }
.ap-dhead { display: flex; align-items: baseline; gap: 8px; }
.ap-dhead b { font-size: 16px; color: var(--text); }
.ap-lv { font-size: 13px; color: var(--ac); font-weight: 700; }
.ap-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ap-pips button { height: 28px; border-radius: 8px; background: #f1edf8; color: var(--muted); font-size: 12px; }
.ap-pips button.got { background: color-mix(in srgb, var(--ac) 30%, #fff); color: var(--text); }
.ap-pips button.pv { outline: 2px solid var(--ac); outline-offset: 1px; color: var(--text); font-weight: 700; }
.ap-hint { margin: 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.ap-acts { display: grid; gap: 6px; }
.ap-acts button { padding: 10px; border-radius: 14px; font-size: 14px; }
.ap-acts .ghost { padding: 10px; }
.ap-up { color: #fff; background: linear-gradient(90deg, #ffb347, #ff7eb3); box-shadow: 0 6px 16px rgba(255, 140, 120, .3); }
.ap-acts .short { opacity: .55; }
.ap-max { text-align: center; color: var(--ac); font-weight: 700; padding: 8px; }
@media (max-height: 560px) {
  .aura-panel { top: 58px; bottom: 8px; right: 8px; padding: 10px; gap: 6px; width: min(360px, 50vw); }
  .ap-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
  .ap-card { padding: 4px 2px; border-radius: 12px; }
  .ap-card img { max-width: 36px; border-radius: 9px; }
  .ap-card .nm { font-size: 11px; }
  .ap-card small { font-size: 10px; }
  .ap-pips button { height: 24px; }
  .ap-acts button { padding: 7px; font-size: 13px; }
  .ap-detail { gap: 6px; padding-top: 6px; }
  .ap-hint { display: none; }
  .aura-panel { overflow-y: auto; }
  .ap-grid { flex: none; overflow: visible; }
  .ap-acts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .ap-acts button { padding: 8px 6px; font-size: 12px; line-height: 1.2; }
}

/* ---- nang cap bang da (aurashop.js v2) */
.ap-tabs { grid-auto-columns: 1fr; }
.gem { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
.gem i { position: absolute; inset: 4px; transform: rotate(45deg); border-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 35%, #fff), var(--gc) 55%, color-mix(in srgb, var(--gc) 60%, #000));
  box-shadow: 0 0 8px color-mix(in srgb, var(--gc) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.gem b { position: relative; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.gem em { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 999px;
  background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ap-up-box { display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: linear-gradient(135deg, #faf7ff, #fff5f8); }
.ap-up-title { font-weight: 700; font-size: 14px; }
.ap-up-sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.ap-stones { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-stone { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 6px 3px; border-radius: 12px; background: #fff;
  border: 2px solid transparent; min-width: 48px; }
.ap-stone small { font-size: 11px; color: var(--text); font-weight: 700; }
.ap-stone.on { border-color: var(--ac); }
.ap-stone.none { opacity: .45; }
.ap-up-info { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.ap-rate { font-weight: 700; color: var(--ac); font-size: 15px; }
.ap-luck { color: #2f9b80; }
.ap-fee { color: var(--muted); }
.ap-charm { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ap-charm.none { opacity: .55; }
.ap-risk { font-size: 12px; color: #e0567d; font-weight: 600; }
.ap-risk.safe { color: #2f9b80; }
.ap-up-box .ap-up { padding: 10px; border-radius: 14px; font-size: 14px; }
.ap-up-box .short, .bag .short, .ap-acts .short { opacity: .55; }
.ap-hint.show { display: block !important; }
.ap-banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 3;
  display: grid; justify-items: center; gap: 2px; padding: 14px 26px; z-index: 8; border-radius: 20px; color: #fff; transition: all .25s; text-align: center; }
.ap-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ap-banner b { font-size: 24px; letter-spacing: .04em; }
.ap-banner span { font-size: 13px; }
.ap-banner.ok { background: linear-gradient(135deg, #ffb347, #ff7eb3); box-shadow: 0 10px 30px rgba(255, 140, 120, .5); }
.ap-banner.fail { background: linear-gradient(135deg, #8a86a6, #5b5675); box-shadow: 0 10px 30px rgba(60, 50, 90, .4); animation: shake .4s; }
@keyframes shake { 20%, 60% { margin-left: -6px; } 40%, 80% { margin-left: 6px; } }
.bag { display: grid; gap: 6px; }
.bag-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bag-name { width: 78px; font-size: 13px; flex: none; }
.bag-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; flex: 1; min-width: 0; }
.bag-cell { display: grid; place-items: center; padding: 4px 0 6px; border-radius: 10px; background: #faf8fe; border: 2px solid transparent; }
.bag-cell.none .gem { opacity: .3; }
.bag-cell.on { border-color: var(--accent); background: #fff; }
.bag-row.charm { padding-top: 6px; border-top: 1px dashed var(--line); }
.bag-count { font-size: 13px; font-weight: 700; }
.btn-mini { padding: 5px 10px; border-radius: 10px; background: #f3eefd; font-size: 12px; }
.ap-buy { padding: 9px; border-radius: 14px; background: #fff6dc; color: #9a6b00; }
.aura-panel { position: absolute; }
@media (max-height: 560px) {
  .gem { width: 24px; height: 24px; }
  .gem b { font-size: 10px; }
  .ap-stone { min-width: 40px; padding: 3px 4px 2px; }
  .ap-up-box { padding: 7px; gap: 4px; }
  .bag-name { width: 60px; font-size: 11px; }
  .bag-cell { padding: 2px 0 4px; }
  .aura-panel.is-bag .ap-grid { flex: none; }
}

.pr-tag.owned { background: #e6f8f1; color: #2f9b80; }
.aura-panel.is-bag .ap-grid { display: block; flex: none; overflow: visible; }
.aura-panel.is-bag { overflow-y: auto; }
.aura-panel.is-bag .ap-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aura-panel.is-bag .ap-acts button { font-size: 12px; padding: 8px 6px; line-height: 1.25; }
.aura-panel.is-bag .ap-dhead { align-items: center; }
.aura-panel.is-bag > * { flex-shrink: 0; }
.world.shop-open .ap-banner { left: calc((100% - min(380px, 48vw)) / 2); }
@media (max-height: 560px) {
  .aura-panel > * { flex-shrink: 0; }
  .world.shop-open .ap-banner { left: calc((100% - min(360px, 50vw)) / 2); top: 34%; }
  .ap-banner { padding: 10px 18px; }
  .ap-banner b { font-size: 19px; }
}

/* ================================================ THONG TIN NHAN VAT + TU DO (charinfo.js) */
.w-card#w-info { cursor: pointer; transition: transform .15s; }
.w-card#w-info:hover { transform: translateY(-2px); }
.ci { position: absolute; inset: 0; z-index: 9; display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 40vw); gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: radial-gradient(ellipse 34% 60% at 30% 52%, transparent 55%, rgba(46, 38, 78, .38) 100%); }
.ci[hidden] { display: none; }
.world.char-open > :not(.ci):not(.ap-banner):not(.toast) { visibility: hidden; }
.ci-left { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 0; }
/* 2 che do: info = chi nhan vat ben trai + hop thoai thong tin; wardrobe = o do 2 ben + tab do */
.ci[data-mode="info"] .ci-col, .ci[data-mode="info"] .ci-tabs, .ci[data-mode="info"] .ci-chips, .ci[data-mode="info"] .ci-grid, .ci[data-mode="info"] .ci-filter, .ci[data-mode="info"] .tab-row,
.ci[data-mode="info"] .ci-bottom, .ci[data-mode="wardrobe"] .ci-info { display: none; }
/* hang duoi nhan vat (Tu do): o Pet · hao quang · o Xe */
.ci-bottom { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.ci-comp { width: 76px; flex: none; }
.ci-comp .ci-slot { width: 100%; }
.ci-bottom .ci-aura { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ci-slot { min-height: 64px; }
.ci-slot:not(.full) { background: rgba(255, 255, 255, .55); }
.ci[data-mode="info"] .ci-stage { grid-template-columns: minmax(0, 1fr); }
.ci-info { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ci-id { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(135deg, #f6f0ff, #eef6ff); }
.ci-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
.ci-av.m { background: linear-gradient(135deg, #8fb5ff, var(--accent)); }
.ci-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ci-field > small { font-size: 11px; color: var(--muted); }
.ci-name { font: inherit; font-size: 18px; font-weight: 700; color: var(--text); width: 100%; min-width: 0; padding: 4px 10px; border-radius: 12px;
  border: 2px solid transparent; background: rgba(255, 255, 255, .7); }
.ci-name:hover { border-color: var(--line); }
.ci-name:focus { outline: none; border-color: var(--accent); background: #fff; }
.ci-user { font-size: 12px; color: var(--muted); padding-left: 10px; }
.ci-rows { margin: 0; display: grid; gap: 2px; }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.ci-row dt { font-size: 13px; color: var(--muted); flex: none; }
.ci-row dd { margin: 0; font-size: 14px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-aura-row { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 12px; border-radius: 999px; background: #f4f0fb; font-size: 13px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 40%, transparent); }
.ci-aura-row .ic { color: var(--ac); text-shadow: 0 0 6px var(--ac); }
.ci-bio { position: relative; flex: none; }
.ci-bio textarea { font: inherit; font-size: 14px; font-weight: 500; color: var(--text); resize: none; width: 100%; min-height: 88px; padding: 8px 10px;
  border-radius: 14px; border: 2px solid var(--line); background: #fbf9ff; line-height: 1.45; }
.ci-bio textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.ci-count { position: absolute; top: 0; right: 4px; font-size: 11px; color: var(--muted); }
.ci-wallet { display: inline-flex; gap: 6px; }
.ci-wallet .cur { padding: 3px 10px; border-radius: 999px; background: #f4f0fb; font-size: 13px; color: var(--text); }
.ci-wallet .silver::first-letter { color: #9aa3b5; }
.ci-wallet .gold::first-letter { color: #e0a800; }
.ci-stage { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 8px; min-height: 0; }
.ci-col { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-height: 0; }
.ci-slot { position: relative; display: grid; justify-items: center; gap: 1px; padding: 5px 3px 4px; border-radius: 14px; background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow); border: 2px dashed #ddd3f2; min-height: 0; }
.ci-slot.full { border: 2px solid #e6dcff; }
.ci-slot img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.ci-slot .ic { font-size: 22px; line-height: 40px; height: 40px; opacity: .55; }
.ci-slot.full .ic { opacity: 1; }
.ci-slot small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ci-slot.full small { color: var(--text); }
.ci-x { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 10px; color: #fff; background: #ff8fab; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ci-mid { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ci-view { min-height: 0; cursor: grab; touch-action: none; border-radius: 22px; }
.ci-view:active { cursor: grabbing; }
.ci-rot { position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.ci-rot button { width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); font-size: 17px; }
.ci-aura { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 45%, transparent), var(--shadow); font-size: 13px; max-width: 100%; }
.ci-aura .ic { color: var(--ac); text-shadow: 0 0 8px var(--ac); }
.ci-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-radius: var(--radius); background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); }
.ci-rhead { display: flex; align-items: center; justify-content: space-between; }
.ci-rhead b { font-size: 17px; }
.ci-close { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.ci-close:hover { background: #f4f0fb; }
.ci-tabs { margin-top: 0; grid-auto-columns: auto; overflow-x: auto; }
.ci-tabs button { padding: 7px 10px; font-size: 13px; }
.ci-chips:empty { display: none; }
.ci-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.ci-grid .empty, .ci-grid .ci-note, .ci-grid .reset-outfit { grid-column: 1 / -1; }
.ci-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.ci-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.ci-foot button { padding: 11px; border-radius: 14px; }
.ci-foot .primary:disabled { opacity: .5; transform: none; }
@media (max-height: 560px) {
  .ci { padding: 8px; gap: 8px; grid-template-columns: minmax(0, 1fr) min(360px, 42vw); }
  .ci-left { gap: 6px; }
  .ci-info { gap: 6px; }
  .ci-id { padding: 6px 8px; gap: 8px; border-radius: 14px; }
  .ci-av { width: 38px; height: 38px; font-size: 18px; }
  .ci-name { font-size: 15px; padding: 2px 8px; }
  .ci-row { min-height: 26px; padding: 2px 4px; }
  .ci-row dt { font-size: 11px; }
  .ci-row dd, .ci-aura-row { font-size: 12px; }
  .ci-bio textarea { min-height: 64px; font-size: 13px; padding: 6px 8px; }
  .ci-wallet .cur { font-size: 11px; padding: 2px 8px; }
  .ci-stage { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; }
  .ci-col { gap: 4px; }
  .ci-slot { padding: 3px; border-radius: 10px; }
  .ci-slot img { width: 30px; height: 30px; border-radius: 8px; }
  .ci-slot .ic { font-size: 17px; line-height: 30px; height: 30px; }
  .ci-slot small { display: none; }
  .ci-slot { min-height: 38px; }
  .ci-comp { width: 46px; }
  .ci-bottom { gap: 6px; }
  .ci-rot { bottom: 52px; }
  .ci-rot button { width: 28px; height: 28px; font-size: 14px; }
  .ci-aura { padding: 4px 12px; font-size: 11px; }
  .ci-right { padding: 8px; gap: 6px; }
  .ci-rhead b { font-size: 14px; }
  .ci-tabs button { padding: 5px 8px; font-size: 11px; }
  .ci-foot button { padding: 7px; font-size: 13px; }
}

/* ================================================ CHAT (chat.js) */
.w-chat { position: absolute; top: 86px; left: 14px; width: min(320px, 38vw); display: grid; gap: 4px; padding: 6px; border-radius: 16px;
  background: rgba(40, 34, 64, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; }
.ch-log { height: 116px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; font-size: 13px; line-height: 1.35;
  overscroll-behavior: contain; scrollbar-width: thin; user-select: text; }
.ch-log::before { content: ""; margin-top: auto; }
.ch-row { overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); font-weight: 500; }
.ch-row b { color: #ffd6f0; font-weight: 700; }
.ch-row.me b { color: #c9f3ff; }
.ch-form { display: flex; align-items: center; gap: 4px; }
.ch-form input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 10px; border: 0; outline: none; font-size: 14px;
  background: rgba(255, 255, 255, .88); color: var(--text); }
.ch-form input:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.ch-count { font-size: 10px; opacity: .8; min-width: 34px; text-align: right; }
.ch-count.full { color: #ffb3c6; opacity: 1; }
.ch-send, .ch-toggle { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.ch-send { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ch-toggle { background: rgba(255, 255, 255, .18); }
.w-chat.min { width: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.w-chat.min .ch-log, .w-chat.min input, .w-chat.min .ch-count, .w-chat.min .ch-send { display: none; }
.w-chat.min .ch-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); }
.w-bubble { position: absolute; left: 0; top: 0; pointer-events: none !important; visibility: hidden; max-width: min(220px, 46vw); padding: 6px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(60, 40, 110, .25); overflow-wrap: anywhere; text-align: center; opacity: 0; transition: opacity .2s;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-bubble.show { opacity: 1; }
.w-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
@media (max-height: 560px) {
  .w-chat { top: 80px; left: 8px; width: min(260px, 34vw); padding: 4px; border-radius: 12px; }
  .ch-log { height: 72px; font-size: 11px; }
  .ch-form input { height: 28px; font-size: 13px; }
  .ch-send, .ch-toggle { width: 28px; height: 28px; }
  .w-bubble { font-size: 11px; padding: 4px 9px; }
}

/* tiem Dap Da (world._checkShop / aurashop.shopGate) */
.w-shopbtn { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px; color: #fff; font-size: 16px;
  font-weight: 700; background: linear-gradient(90deg, #b45cff, #ff6fb5); box-shadow: 0 8px 24px rgba(200, 90, 220, .45); animation: shopPulse 1.6s infinite; z-index: 4; }
.w-shopbtn[hidden] { display: none; }
@keyframes shopPulse { 50% { box-shadow: 0 8px 34px rgba(255, 110, 200, .75); transform: translateX(-50%) scale(1.04); } }
.world.shop-open .w-shopbtn, .world.char-open .w-shopbtn { display: none; }
.ap-gate { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff6e8; color: #8a5a00; font-size: 13px; font-weight: 600; }
.ap-gate .primary { padding: 9px; font-size: 14px; }
@media (max-height: 560px) { .w-shopbtn { bottom: 150px; padding: 9px 18px; font-size: 14px; } }

/* ================================================ KHONG GIAN TIEM DAP DA (shopspace.js) */
.ss { position: absolute; inset: 0; z-index: 9; display: grid; grid-template-columns: minmax(0, 1fr) min(560px, 56vw); gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
.ss[hidden] { display: none; }
.world.space-open > :not(.ss):not(.ap-banner):not(.toast) { visibility: hidden; }
.world.space-open .ap-banner { left: calc((100% - min(560px, 56vw)) / 2); top: 28%; }
.ss-left { position: relative; min-height: 0; }
.ss-view { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.ss-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-radius: var(--radius); background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); }
.ss-head { display: flex; align-items: center; gap: 8px; }
.ss-head b { font-size: 17px; }
.ss-wallet { margin-left: auto; display: flex; gap: 6px; }
.ss-wallet .cur { padding: 3px 10px; border-radius: 999px; background: #f4f0fb; font-size: 13px; }
.ss-wallet .cur i { font-style: normal; color: var(--text); }
.ss-wallet .silver { color: #9aa3b5; } .ss-wallet .gold { color: #e0a800; }
.ss-close { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.ss-tabs { margin-top: 0; }
.ss-tabs button { font-size: 13px; }
.ss-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 2px; }
.ss-hint, .ss-sub { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.sg { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; }
.sg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--gc) 60%, transparent)); }
.sg b { position: absolute; left: -2px; top: -2px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-size: 11px;
  color: #fff; background: color-mix(in srgb, var(--gc) 80%, #333); }
.sg em { position: absolute; right: -4px; bottom: -2px; font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ss-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ss-offer { display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--gc) 14%, #fff)); border: 2px solid color-mix(in srgb, var(--gc) 35%, #fff); }
.ss-offer .sg { width: 64px; height: 64px; }
.ss-price { font-size: 12px; color: var(--muted); }
.ss-qty { display: flex; align-items: center; gap: 4px; }
.ss-qty button { width: 28px; height: 28px; border-radius: 8px; background: #f1edf8; font-weight: 700; }
.ss-qty button:last-child { width: auto; padding: 0 8px; font-size: 12px; }
.ss-qty span { min-width: 30px; text-align: center; font-weight: 700; }
.ss-buy { width: 100%; padding: 8px 6px; font-size: 13px; }
.ss-bag { display: grid; gap: 4px; }
.ss-bagrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ss-bagcell { display: grid; justify-items: center; gap: 1px; padding: 4px 0; border-radius: 12px; background: #faf8fe; }
.ss-bagcell .sg { width: 42px; height: 42px; }
.ss-bagcell small { font-size: 10px; color: #2f9b80; font-weight: 700; min-height: 13px; }
.ss-bagcell.none { opacity: .4; }
.ss-pair { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ss-arrow { font-size: 24px; color: var(--accent); }
.ss-slot { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; width: 64px; height: 72px; border-radius: 14px;
  border: 2px dashed #d9cff0; background: #faf8fe; }
.ss-slot.full { border-style: solid; border-color: #e3d8ff; background: #fff; }
.ss-slot.big { width: 96px; height: 104px; }
.ss-slot.big .sg { width: 64px; height: 64px; }
.ss-slot.result { background: linear-gradient(160deg, #fff, #f3ecff); }
.ss-slot.result .sg { opacity: .85; }
.ss-slot small { font-size: 11px; color: var(--muted); }
.ss-slot.full small { color: #2f9b80; font-weight: 700; }
.ss-plus { font-size: 26px; color: #c9bde6; }
.ss-aimg { width: 60px; height: 60px; border-radius: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 50%, transparent); }
.ss-rate { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; text-align: center; }
.ss-rate b { font-size: 26px; color: var(--accent); }
.ss-rate span { font-size: 12px; color: var(--muted); }
.ss-rate .ss-luck { color: #2f9b80; font-weight: 700; }
.ss-mats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ss-acts { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.ss-acts button, .ss-go { padding: 11px 8px; border-radius: 14px; font-size: 14px; }
.ss-go:disabled { opacity: .5; transform: none; }
.ss-auras { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ss-aura { flex: none; display: grid; justify-items: center; gap: 1px; padding: 4px; border-radius: 12px; border: 2px solid transparent; background: #faf8fe; }
.ss-aura img { width: 40px; height: 40px; border-radius: 9px; }
.ss-aura small { font-size: 10px; }
.ss-aura.on { border-color: var(--ac); background: #fff; }
.ss-aura.locked img { filter: grayscale(.7) brightness(.8); }
.ss-ahead { display: flex; align-items: center; gap: 8px; }
.ss-ahead b { font-size: 16px; }
.ss-alv { font-size: 13px; color: var(--accent); font-weight: 700; }
.ss-eq { margin-left: auto; padding: 6px 12px; }
.ss-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ss-pips button { height: 28px; border-radius: 8px; background: #f1edf8; color: var(--muted); font-size: 12px; }
.ss-pips button.got { background: color-mix(in srgb, var(--ac) 30%, #fff); color: var(--text); }
.ss-pips button.pv { outline: 2px solid var(--ac); outline-offset: 1px; font-weight: 700; color: var(--text); }
.ss-max { text-align: center; font-weight: 700; color: var(--accent); padding: 10px; }
@media (max-height: 560px) {
  .ss { padding: 8px; gap: 8px; grid-template-columns: minmax(0, 1fr) min(500px, 60vw); }
  .ss-panel { padding: 8px; gap: 6px; }
  .ss-head b { font-size: 14px; }
  .ss-tabs button { font-size: 11px; padding: 6px 4px; }
  .ss-body { gap: 6px; }
  .sg { width: 40px; height: 40px; }
  .ss-bagcell .sg { width: 32px; height: 32px; }
  .ss-slot { width: 50px; height: 56px; } .ss-slot.big { width: 70px; height: 76px; } .ss-slot.big .sg { width: 46px; height: 46px; }
  .ss-aimg { width: 44px; height: 44px; }
  .ss-rate b { font-size: 20px; }
  .ss-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-offer { padding: 6px; } .ss-offer .sg { width: 44px; height: 44px; }
  .ss-acts button, .ss-go { padding: 8px 6px; font-size: 12px; }
  .ss-pips button { height: 22px; }
}
.ss-top { display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; }
.ss-top .ss-rate { flex-direction: column; align-items: center; max-width: 240px; gap: 2px; }
@media (max-height: 560px) { .ss-top { flex-wrap: nowrap; } .ss-top .ss-rate span { font-size: 10px; } .ss-sub { font-size: 10px; } }
.ss-aoffers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ss-aoffer { display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: #faf8fe; border: 2px solid color-mix(in srgb, var(--ac) 25%, #fff); }
.ss-aoffer img { width: 44px; height: 44px; border-radius: 10px; }
.ss-aoffer b { font-size: 12px; text-align: center; }
.ss-aoffer small { font-size: 10px; color: #2f9b80; font-weight: 700; }
.ss-aoffer .ss-buy { padding: 6px 4px; font-size: 11px; }
.ss-aura.worn { box-shadow: inset 0 0 0 2px #2f9b80; }
.ap-copies { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-copy { padding: 5px 10px; border-radius: 999px; background: #f4f0fb; font-size: 12px; font-weight: 700; }
.ap-copy.worn { background: color-mix(in srgb, var(--ac) 30%, #fff); color: var(--text); }
@media (max-height: 560px) { .ss-aoffers { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .ss-aoffer img { width: 34px; height: 34px; } }

/* nut QUAY LAI goc tren trai – quy uoc cho moi giao dien trong (nguoi dung 2026-10-19: khong dung X) */
.back-btn { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--card);
  box-shadow: var(--shadow); color: var(--text); font-weight: 700; font-size: 14px; flex: none; }
.back-btn svg { width: 22px; height: 22px; stroke-width: 2.4; }
.back-btn:hover { transform: translateX(-2px); }
.ss-left > .back-btn { position: absolute; left: 0; top: 0; z-index: 2; }
.ci-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ci-top .ci-info { flex: 1; min-width: 0; }
@media (max-height: 560px) { .back-btn { height: 34px; padding: 0 10px 0 6px; font-size: 12px; } .back-btn svg { width: 18px; height: 18px; } }

/* thanh % ngang + hoat canh nang cap (shopspace.suspense) */
.back-btn.ss-close, .back-btn.ci-close { width: auto; height: 40px; border-radius: 999px; color: var(--text); }
@media (max-height: 560px) { .back-btn.ss-close, .back-btn.ci-close { height: 34px; } }
.ss-rate { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
.ss-top .ss-rate { max-width: 280px; flex: 1; }
.ss-bar { position: relative; height: 26px; border-radius: 13px; background: #ece6f6; overflow: hidden; box-shadow: inset 0 1px 3px rgba(60, 40, 110, .2); }
.ss-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 13px 0 0 13px; background: linear-gradient(90deg, #7fd8c3, #4fc6a0);
  transition: width .35s cubic-bezier(.3, 1.4, .5, 1); }
.ss-lfill { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #9fe8c0, #9fe8c0 5px, #c3f3d8 5px, #c3f3d8 10px); transition: all .35s; }
.ss-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #2b2540; text-shadow: 0 0 4px #fff; }
.ss-mark { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; display: none;
  box-shadow: 0 0 0 2px #3a2f60, 0 0 10px #fff; }
.ss-mark.on { display: block; }
.ss-bar.hot .ss-mark { background: #c9ffe8; }
.ss-bar.win { box-shadow: 0 0 0 3px #4fc6a0, 0 0 18px #7fd8c3; }
.ss-bar.lose { box-shadow: 0 0 0 3px #ff6b8b, 0 0 18px #ff9eb3; }
.ss-body.rolling { pointer-events: none; }
.ss-body.rolling .ss-bag { opacity: .4; transition: opacity .3s; }
.ss-slot.absorb { animation: absorb .6s ease-in forwards; }
@keyframes absorb { 60% { transform: translateY(-14px) scale(1.08); opacity: 1; } 100% { transform: translateY(-60px) scale(.2); opacity: 0; } }
.ss-pair.charging .ss-slot.big:first-child { animation: shake .09s infinite; box-shadow: 0 0 0 3px #ffd56b, 0 0 calc(var(--shake, 1px) * 6) #ffd56b; }
.ss-pair.charging .ss-arrow { animation: pulseArr .5s infinite; }
@keyframes shake { 0% { transform: translate(calc(var(--shake, 1px) * -1), 0) rotate(-1deg); } 50% { transform: translate(var(--shake, 1px), calc(var(--shake, 1px) * -.5)) rotate(1deg); } 100% { transform: translate(0, var(--shake, 1px)); } }
@keyframes pulseArr { 50% { transform: scale(1.4); color: #ffb347; } }
.ss-pair.burst .result { animation: burst .7s ease-out; box-shadow: 0 0 0 3px #4fc6a0, 0 0 30px #7fd8c3; }
@keyframes burst { 0% { transform: scale(.8); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ss-pair.crack .ss-slot.big:first-child { animation: crack .5s; filter: grayscale(.6); }
@keyframes crack { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-height: 560px) { .ss-bar { height: 20px; } .ss-pct { font-size: 12px; } }
.ss-top .ss-rate { align-items: stretch; min-width: 200px; }
.ss-bar { width: 100%; flex: none; }
@media (max-height: 560px) { .ss-top .ss-rate { min-width: 150px; } }
.ss-pct { line-height: 1; }
@media (max-height: 560px) { .ss-bar { height: 22px; } .ss-pct { font-size: 12px; } }

/* thanh cuon gon (nguoi dung: tho) – doc: manh, mo, chi ro khi re chuot; ngang: an han (vuot / lan van cuon duoc) */
* { scrollbar-width: thin; scrollbar-color: rgba(165, 139, 255, .28) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(165, 139, 255, .28); border-radius: 999px; }
*:hover::-webkit-scrollbar-thumb { background: rgba(165, 139, 255, .55); }
*::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.ss-auras, .ci-tabs, .w-tabs, .ap-copies, .cat-chips { scrollbar-width: none; }
.ss-auras::-webkit-scrollbar, .ci-tabs::-webkit-scrollbar, .w-tabs::-webkit-scrollbar, .ap-copies::-webkit-scrollbar, .cat-chips::-webkit-scrollbar { display: none; }
@media (pointer: coarse) { * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } }

/* the bao ho (tiem Dap Da) */
.ss-charmshop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px;
  background: linear-gradient(135deg, #f1fbf6, #eef6ff); border: 2px solid #cdeee0; }
.ss-charm-big { font-size: 30px; }
.ss-charm-txt { display: grid; gap: 1px; min-width: 0; }
.ss-charm-txt small { font-size: 11px; color: var(--muted); }
.ss-charm-txt .ss-own { color: #2f9b80; font-weight: 700; }
.ss-charmshop .ss-buy { width: auto; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.ss-charm { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ss-charm.none { opacity: .5; }
.ss-charm input { width: 18px; height: 18px; accent-color: #2f9b80; }
.ss-charm-ic { font-size: 18px; }
.ss-risk { text-align: center; font-size: 12px; font-weight: 700; color: #e0567d; }
.ss-risk.safe { color: #2f9b80; }
@media (max-height: 560px) { .ss-charmshop { grid-template-columns: auto minmax(0, 1fr) auto; } .ss-charmshop .ss-buy:last-child { display: none; } }

/* ================================================ BAN TRANG DIEM (creator che do studio, mo tu Tu do – 2026-10-19) */
.studio-back, .studio-title { display: none; }
.creator.studio .studio-back { display: inline-flex; }
.creator.studio .studio-title { display: block; font-size: 18px; margin-left: 4px; }
.creator.studio .logo, .creator.studio .steps, .creator.studio #gender, .creator.studio #name,
.creator.studio [data-logout] { display: none !important; }
.creator.studio .panel-foot { display: grid; grid-template-columns: 1fr; }
.creator.studio .panel-top { justify-content: flex-end; }
.ci-rhead .ci-studio { font-size: 13px; padding: 6px 12px; }
.ci[data-mode="info"] .ci-studio { display: none; }
@media (max-height: 560px) { .creator.studio .studio-title { font-size: 15px; } .ci-rhead .ci-studio { font-size: 11px; padding: 4px 9px; } }

/* ================================================ TIEM PET & XE / THOI TRANG (storefront.js – 2026-10-19) */
.sf .sf-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.sf .sf-empty { grid-column: 1 / -1; }
.sf-card .pr-tag { font-size: 11px; }
.sf-foot { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-top: 8px; border-top: 1px solid var(--line); }
.sf-foot .sf-hint { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.sf-sel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sf-sel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-sel small { color: var(--muted); }
.sf-foot button { flex: none; min-width: 150px; padding: 11px 18px; border-radius: 14px; }
.sf-foot button:disabled { opacity: .55; transform: none; }
.w-picker small { display: block; padding: 4px 8px; font-size: 12px; color: var(--muted); max-width: 220px; }
@media (max-height: 560px) {
  .sf-foot { min-height: 38px; padding-top: 6px; }
  .sf-foot button { min-width: 120px; padding: 7px 12px; font-size: 13px; }
  .sf-foot .sf-hint { font-size: 11px; }
}
/* Tu do – tab Hao quang */
.ci-aura-card .thumb img { object-fit: contain; padding: 8px; filter: drop-shadow(0 0 6px var(--ac)); }
.ci-aura-card.worn { border-color: var(--ac); }

/* ================================================ HUD goc trai + o chat day man hinh (2026-10-19, nguoi dung sap lai) */
/* the: avatar | username + vi bac/vang; ten map NGOAI the (ben duoi); khung tin nhan duoi nua; o nhap chat giua day man hinh */
.w-card { border-radius: 22px; padding: 7px 16px 7px 7px; }
.w-card b { font-size: 15px; line-height: 1.2; }
.w-wallet { display: flex; gap: 5px; margin-top: 3px; }
.w-wallet .cur { padding: 1px 8px; border-radius: 999px; background: #f4f0fb; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.w-wallet .cur i { font-style: normal; }
.w-wallet .silver { color: #9aa3b5; }
.w-wallet .gold { color: #e0a800; }
.w-wallet .cur i { color: var(--text); }
.w-map { position: absolute; top: 76px; left: 20px; font-size: 12px; font-weight: 700; color: #fff; pointer-events: none;
  text-shadow: 0 1px 3px rgba(40, 30, 70, .7), 0 0 8px rgba(40, 30, 70, .4); white-space: nowrap; }
.w-chat { top: 98px; }
.w-chat.min { display: none; }
.w-chatbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(460px, 40vw); padding: 5px; border-radius: 16px;
  background: rgba(40, 34, 64, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; z-index: 3; }
.w-chatbar .ch-toggle.off { opacity: .55; }
.w-hint { bottom: 66px; }
.world.char-open .w-chatbar, .world.space-open .w-chatbar { visibility: hidden; }
@media (max-height: 560px) {
  .w-card { padding: 5px 12px 5px 5px; border-radius: 18px; }
  .w-card b { font-size: 13px; }
  .w-wallet .cur { font-size: 10px; padding: 0 6px; }
  .w-map { top: 58px; left: 14px; font-size: 10px; }
  .w-chat { top: 76px; }
  .w-chatbar { bottom: 8px; width: min(340px, 36vw); padding: 4px; border-radius: 12px; }
}

/* thanh tab / chip cuon ngang (ui.js hScroll): khong co gian theo khung, keo duoc, mo mep khi con tab bi che */
.hscroll { overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; cursor: grab; user-select: none; -webkit-user-select: none; }
.ci-tabs.hscroll, .sf-tabs.hscroll { grid-auto-columns: max-content; }
.hscroll.can-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.hscroll.can-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.hscroll.can-l.can-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ci-right, .ss-panel { min-width: 0; }
.ci-tabs, .ci-chips, .sf-tabs { flex: none; max-width: 100%; }

/* ================================================ thanh cong cu the gioi gon (2026-10-19) + Cai dat (settings.js) */
.seg-tool { display: flex; gap: 2px; padding: 3px; height: 44px; align-items: stretch; }
.seg-tool button { min-width: 38px; padding: 0 9px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg-tool button.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; }
.w-tools .lang-switch.tool { height: 44px; padding: 3px; }
.w-tools .lang-switch button { padding: 0 8px; font-size: 12px; min-width: 34px; }
.tool.icon svg { width: 21px; height: 21px; }
.world.no-plates #w-plate, .world.no-bubbles #w-bubble { display: none !important; }
.st { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 12px; background: rgba(46, 38, 78, .28); }
.st[hidden] { display: none; }
.st-card { width: min(520px, 94vw); max-height: min(92vh, 640px); display: flex; flex-direction: column; border-radius: var(--radius);
  background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); overflow: hidden; }
.st-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px; }
.st-head b { font-size: 18px; }
.st-body { overflow-y: auto; padding: 0 16px 14px; }
.st-sec h4 { margin: 10px 0 4px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-lab { display: flex; flex-direction: column; min-width: 0; }
.st-lab span { font-size: 14px; }
.st-lab small { font-size: 11px; color: var(--muted); font-weight: 500; }
.st-slider { display: flex; align-items: center; gap: 8px; flex: none; width: min(220px, 46%); }
.st-slider input { flex: 1; accent-color: var(--accent); }
.st-slider b { width: 30px; text-align: right; font-size: 13px; }
.st-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #f2edfb; flex: none; }
.st-seg button { padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--muted); font-weight: 700; }
.st-seg button.on { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(120, 100, 180, .2); }
.st-switch { position: relative; flex: none; width: 44px; height: 26px; }
.st-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.st-switch i { position: absolute; inset: 0; border-radius: 999px; background: #e3dcf1; transition: background .2s; }
.st-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: transform .2s; }
.st-switch input:checked + i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.st-switch input:checked + i::after { transform: translateX(18px); }
/* Thong tin nhan vat: Tu do + Dang xuat cuoi trang */
.ci-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; flex: none; }
.ci-act { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 14px; background: #f4f0fb; font-weight: 700; color: var(--text); }
.ci-act .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ci-act:hover { background: #ece4fb; }
.ci-act.danger { color: #e0577a; background: #fdeff3; }
@media (max-height: 560px) {
  .seg-tool, .w-tools .lang-switch.tool { height: 36px; }
  .seg-tool button { min-width: 32px; padding: 0 7px; font-size: 11px; }
  .st-card { max-height: 94vh; }
  .st-head { padding: 8px 12px 4px; }
  .st-row { padding: 5px 0; }
  .st-lab span { font-size: 12px; }
  .ci-act { padding: 7px; font-size: 12px; }
}
/* 2.5D|3D, VI|EN: thap hon (nguoi dung: ha padding doc), canh giua theo hang nut */
.w-tools { align-items: center; }
.seg-tool, .w-tools .lang-switch.tool { height: 36px; padding: 2px; }
.seg-tool button, .w-tools .lang-switch button { line-height: 1; }
@media (max-height: 560px) { .seg-tool, .w-tools .lang-switch.tool { height: 30px; } }

/* chat: avatar moi dong, nut bat/tat nen, thanh keo do dai (2026-10-19) */
.w-chat { position: absolute; }
.ch-row { display: flex; align-items: flex-start; gap: 6px; }
.ch-av { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); text-shadow: none; }
.ch-msg { min-width: 0; overflow-wrap: anywhere; }
.ch-bg { position: absolute; top: 4px; right: 4px; z-index: 1; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .16); opacity: .55; transition: opacity .15s; }
.ch-bg svg { width: 15px; height: 15px; stroke-width: 2; }
.ch-grip { height: 12px; margin: 0 -6px -6px; display: grid; place-items: center; cursor: ns-resize; touch-action: none; opacity: .55; transition: opacity .15s; }
.ch-grip i { width: 36px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .75); }
.w-chat:hover .ch-bg, .w-chat:hover .ch-grip, .w-chat.resizing .ch-grip { opacity: 1; }
.w-chat.no-bg { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.w-chat.no-bg .ch-row { text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 6px rgba(0, 0, 0, .45); }
.w-chat.no-bg .ch-bg { background: rgba(40, 34, 64, .35); }
.w-chat.no-bg .ch-grip i { background: rgba(40, 34, 64, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.ch-log { padding-right: 24px; }
@media (pointer: coarse) { .ch-bg, .ch-grip { opacity: .85; } .ch-grip { height: 16px; } }
@media (max-height: 560px) { .ch-av { width: 16px; height: 16px; font-size: 9px; } .ch-bg { width: 20px; height: 20px; } }

/* chat: nut + bang bieu tuong cam xuc (2026-10-19) */
.ch-emo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 18px; background: rgba(255, 255, 255, .18); }
.ch-emo.on { background: rgba(255, 255, 255, .45); }
.ch-emoji { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow); color: var(--text); }
.ch-emoji[hidden] { display: none; }
.ch-emo-tabs { display: flex; gap: 4px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ch-emo-tabs button { width: 36px; height: 30px; border-radius: 10px; font-size: 17px; opacity: .55; }
.ch-emo-tabs button.on { opacity: 1; background: #f2edfb; }
.ch-emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; max-height: 168px; overflow-y: auto; }
.ch-emo-grid button { height: 36px; border-radius: 10px; font-size: 21px; line-height: 1; }
.ch-emo-grid button:hover { background: #f2edfb; transform: scale(1.12); }
@media (max-height: 560px) {
  .ch-emo { width: 28px; height: 28px; font-size: 15px; }
  .ch-emoji { padding: 6px; }
  .ch-emo-grid { max-height: 120px; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); }
  .ch-emo-grid button { height: 30px; font-size: 18px; }
}

/* khu vuc (channels.js): nut canh ten map + danh sach khu */
.w-place { position: absolute; top: 74px; left: 18px; display: flex; align-items: center; gap: 8px; z-index: 4; }
.w-place .w-map { position: static; }
.w-ch { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap;
  background: rgba(40, 34, 64, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.w-ch.on, .w-ch:hover { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.w-chlist { position: absolute; top: 98px; left: 14px; z-index: 8; width: min(300px, 70vw); max-height: calc(100% - 200px); overflow-y: auto;
  display: grid; gap: 3px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); }
.w-chlist[hidden] { display: none; }
.w-chlist > b { padding: 2px 6px 4px; font-size: 13px; color: var(--muted); }
.ch-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 11px; text-align: left; }
.ch-item:hover:not(:disabled) { background: #f4f0fb; }
.ch-item.on { background: #efe8ff; box-shadow: inset 0 0 0 2px var(--accent); }
.ch-item.full { opacity: .5; cursor: not-allowed; }
.ch-item .nm { font-weight: 700; font-size: 13px; }
.ch-item small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ch-item .bar { height: 6px; border-radius: 6px; background: #ece6f6; overflow: hidden; }
.ch-item .bar > i { display: block; height: 100%; border-radius: 6px; background: #7fd8c3; }
.ch-item .bar.ok > i { background: #8fb5ff; }
.ch-item .bar.busy > i { background: #ffb36b; }
.ch-item .bar.full > i { background: #ff8fab; }
@media (max-height: 560px) {
  .w-place { top: 56px; left: 12px; gap: 6px; }
  .w-ch { font-size: 10px; padding: 1px 7px; }
  .w-chlist { top: 76px; max-height: calc(100% - 140px); padding: 6px; }
  .ch-item { padding: 4px 6px; }
}

/* man chuyen khu (channels.js overlay) */
.ch-load { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(36, 28, 66, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: chIn .25s ease; transition: opacity .25s; }
.ch-load[hidden] { display: none; }
.ch-load.out { opacity: 0; }
@keyframes chIn { from { opacity: 0; } to { opacity: 1; } }
.ch-load-card { display: grid; justify-items: center; gap: 8px; padding: 22px 30px; min-width: min(320px, 80vw); border-radius: 22px;
  background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); }
.ch-load-card b { font-size: 17px; }
.ch-load-card small { font-size: 12px; color: var(--muted); font-weight: 500; }
.ch-load-card .spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #ece6f6; border-top-color: var(--accent); animation: chSpin .8s linear infinite; }
@keyframes chSpin { to { transform: rotate(360deg); } }
.ch-load-card .bar { width: 100%; height: 6px; border-radius: 6px; background: #ece6f6; overflow: hidden; margin-top: 4px; }
.ch-load-card .bar > i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ch-item.full { cursor: pointer; }

/* Cai dat > Huong dan */
.st-guide { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 2px; padding: 10px 12px; border-radius: 14px; background: #f4f0fb; text-align: left; }
.st-guide:hover { background: #ece4fb; }
.st-guide .ic { font-size: 22px; }
.st-guide .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-guide small { color: var(--muted); font-size: 12px; font-weight: 500; }
.st-guide > i { font-style: normal; font-size: 22px; color: var(--muted); }
.gd-row { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gd-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.gd-keys kbd { min-width: 26px; padding: 3px 8px; border-radius: 8px; background: #fff; border: 1px solid #ddd3f2; border-bottom-width: 3px;
  font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--text); text-align: center; white-space: nowrap; }
.gd-txt { font-size: 13px; }
@media (max-height: 560px) { .gd-row { padding: 4px 0; } .gd-txt { font-size: 12px; } .gd-keys kbd { font-size: 11px; padding: 2px 6px; } }
/* nut bat/tat nen chat: sat trai, cung hang voi thanh keo o mep duoi (nguoi dung: dang nam phia ngoai ben phai) */
.ch-bg { top: auto; right: auto; left: 4px; bottom: 2px; width: 22px; height: 22px; }
.ch-log { padding-right: 4px; }
.ch-grip { margin-left: 22px; margin-right: 22px; }
@media (max-height: 560px) { .ch-bg { width: 18px; height: 18px; bottom: 1px; } .ch-bg svg { width: 12px; height: 12px; } }
.ch-log { padding-bottom: 10px; }
@media (max-height: 560px) { .ch-log { padding-bottom: 8px; } }

/* ================================================ VIP + cap Tai san / Quyen ru + khung (prestige.js – 2026-10-19) */
/* huy hieu: icon + so cap; mau theo dai 10 cap (TikTok LIVE kieu), cap 50 anh kim chay */
.pb { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 5px 0 3px; border-radius: 999px; font-size: 10px; font-weight: 800;
  color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  position: relative; overflow: hidden; flex: none; }
.pb svg { width: 11px; height: 11px; stroke: none; }
.pb b { font-weight: 800; }
.pb-b0 { background: linear-gradient(135deg, #7bc89a, #43b37a); }
.pb-b1 { background: linear-gradient(135deg, #6fb6ff, #3f7cf0); }
.pb-b2 { background: linear-gradient(135deg, #b48cff, #7b4fe8); }
.pb-b3 { background: linear-gradient(135deg, #ffb35c, #f07a2a); }
.pb-b4 { background: linear-gradient(135deg, #ff7aa0, #e8366f); }
.pb-b5 { background: linear-gradient(135deg, #ffe27a, #e5a50a 45%, #fff3b8 55%, #d48a00); background-size: 200% 100%; animation: pbShine 2.4s linear infinite; color: #7a4a00; text-shadow: none; }
.pb-charm.pb-b0 { background: linear-gradient(135deg, #ffb3cf, #ff7aa8); }
.pb-charm.pb-b1 { background: linear-gradient(135deg, #ff9ec7, #ff5c95); }
.pb-charm.pb-b2 { background: linear-gradient(135deg, #ff8fd8, #d94fd0); }
.pb-charm.pb-b3 { background: linear-gradient(135deg, #ff9c8a, #ff4f6b); }
.pb-charm.pb-b4 { background: linear-gradient(135deg, #ff6fa8, #c41a6b); }
.pb-b3::after, .pb-b4::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); animation: pbSweep 3.2s ease-in-out infinite; }
@keyframes pbShine { to { background-position: -200% 0; } }
@keyframes pbSweep { 60%, 100% { transform: translateX(120%); } }
.pb-vip { padding: 0 6px 0 4px; }
.pb-v0 { background: #e8e2f3; color: var(--muted); text-shadow: none; box-shadow: inset 0 0 0 1px #d8cfee; }
.pb-v1 { background: linear-gradient(135deg, #e0a070, #a8643a); }
.pb-v2 { background: linear-gradient(135deg, #e6ebf2, #8e9bb0); color: #3d4657; text-shadow: none; }
.pb-v3 { background: linear-gradient(135deg, #ffe27a, #d99a00); color: #6b4300; text-shadow: none; }
.pb-v4 { background: linear-gradient(135deg, #b8f0ff, #3fb4d6 60%, #b8a8ff); }
.pb-v5 { background: linear-gradient(90deg, #ff7ad9, #a58bff, #58d6ff, #7dffb0, #ffe27a, #ff7ad9); background-size: 300% 100%; animation: pbShine 3s linear infinite; }
.pb-v4::after, .pb-v5::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  transform: translateX(-120%); animation: pbSweep 2.6s ease-in-out infinite; }

/* khung avatar: avatar tron o giua, SVG khung to 1.5 lan de hoa tiet (vuong mien, canh) thoi ra ngoai */
.afr { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; }
.afr .afr-in { width: var(--s) !important; height: var(--s) !important; }
.afr .frm { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.58); height: calc(var(--s) * 1.58); transform: translate(-50%, -50%);
  pointer-events: none; overflow: visible; filter: drop-shadow(0 1px 2px rgba(40, 20, 80, .35)); }
.frm .frm-spin { transform-origin: 60px 60px; animation: frmSpin 6s linear infinite; }
.frm .frm-halo { transform-origin: 60px 60px; animation: frmPulse 2.4s ease-in-out infinite; }
.frm-rainbow { animation: frmHue 6s linear infinite; }
@keyframes frmSpin { to { transform: rotate(360deg); } }
@keyframes frmPulse { 50% { opacity: .45; transform: scale(1.04); } }
@keyframes frmHue { to { filter: hue-rotate(360deg) drop-shadow(0 1px 2px rgba(40, 20, 80, .35)); } }
.lav { display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.lav svg { width: 62%; height: 62%; stroke: #fff; stroke-width: 2; fill: none; }
.w-card .afr { margin: 0 2px; }
.ch-row .afr { cursor: pointer; margin-top: 1px; }
.ch-row .afr .ch-av { margin: 0; }

/* khung tin nhan (dong chat): nen + vien theo hang, hoa tiet goc */
.ch-row.bb { position: relative; padding: 3px 8px 3px 4px; margin: 1px 0; border-radius: 12px; }
.ch-row.bb::before { position: absolute; top: -6px; right: 6px; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.bb-vip1 { background: linear-gradient(90deg, rgba(185, 119, 74, .38), rgba(243, 192, 143, .18)); box-shadow: inset 0 0 0 1px rgba(243, 192, 143, .55); }
.bb-vip2 { background: linear-gradient(90deg, rgba(142, 155, 176, .42), rgba(238, 242, 247, .16)); box-shadow: inset 0 0 0 1px rgba(238, 242, 247, .65); }
.bb-vip3 { background: linear-gradient(90deg, rgba(217, 154, 0, .42), rgba(255, 226, 122, .2)); box-shadow: inset 0 0 0 1px rgba(255, 226, 122, .8); }
.bb-vip3::before { content: "👑"; }
.bb-vip4 { background: linear-gradient(90deg, rgba(63, 180, 214, .45), rgba(184, 168, 255, .28)); box-shadow: inset 0 0 0 1px rgba(216, 246, 255, .85), 0 0 10px rgba(63, 180, 214, .45); }
.bb-vip4::before { content: "👑"; }
.bb-vip5 { background: linear-gradient(90deg, rgba(255, 122, 217, .45), rgba(165, 139, 255, .4), rgba(88, 214, 255, .4), rgba(255, 122, 217, .45)); background-size: 300% 100%;
  animation: pbShine 6s linear infinite; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 122, 217, .55); }
.bb-vip5::before { content: "💎👑"; }
.bb-wealth20 { background: linear-gradient(90deg, rgba(47, 139, 216, .4), rgba(169, 228, 255, .15)); box-shadow: inset 0 0 0 1px rgba(169, 228, 255, .7); }
.bb-wealth20::before { content: "💎"; }
.bb-wealth40 { background: linear-gradient(90deg, rgba(59, 108, 255, .5), rgba(26, 166, 183, .3)); box-shadow: inset 0 0 0 1px rgba(233, 248, 255, .9), 0 0 10px rgba(59, 108, 255, .5); }
.bb-wealth40::before { content: "💎💎"; }
.bb-charm20 { background: linear-gradient(90deg, rgba(255, 92, 149, .4), rgba(255, 192, 220, .16)); box-shadow: inset 0 0 0 1px rgba(255, 192, 220, .75); }
.bb-charm20::before { content: "💗"; }
.bb-charm40 { background: linear-gradient(90deg, rgba(233, 64, 143, .5), rgba(255, 211, 110, .25)); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .9), 0 0 10px rgba(255, 63, 136, .5); }
.bb-charm40::before { content: "💖💗"; }
.ch-tags { display: inline-flex; gap: 2px; margin-right: 3px; vertical-align: 1px; }
.ch-tags .pb { height: 14px; font-size: 9px; }
.ch-tags .pb svg { width: 9px; height: 9px; }
.ch-who { cursor: pointer; }
.ch-who:hover { text-decoration: underline; }
.ch-row.ch-sys { justify-content: center; text-align: center; font-weight: 700; padding: 3px 8px; margin: 2px 0; border-radius: 12px; }
.ch-row.ch-sys.gift { background: linear-gradient(90deg, rgba(255, 158, 199, .35), rgba(255, 226, 122, .35)); color: #fff4c2; box-shadow: inset 0 0 0 1px rgba(255, 226, 122, .6); }

/* the goc trai: nut / huy hieu VIP canh username */
.w-nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.w-vip { display: inline-flex; align-items: center; padding: 0; border-radius: 999px; flex: none; }
.w-vip.none { height: 16px; padding: 0 7px; font-size: 10px; font-weight: 800; color: #b07800; background: linear-gradient(135deg, #fff6d8, #ffe9a8); box-shadow: inset 0 0 0 1px #f2cf6a; }
.w-vip:hover { transform: translateY(-1px); }
.w-plate .pb { margin-right: 4px; height: 14px; font-size: 9px; }
.w-plate .pb svg { width: 9px; height: 9px; }

/* Thong tin nhan vat: 3 cap */
.ci-levels { display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg, #fbf8ff, #f4f9ff); flex: none; }
.ci-lv { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.ci-lv > .pb { height: 20px; font-size: 12px; padding: 0 7px 0 4px; }
.ci-lv > .pb svg { width: 14px; height: 14px; }
.ci-lv-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; flex: 1; min-width: 0; font-size: 13px; }
.ci-lv-txt small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); font-weight: 500; }
.ci-lv-bar { height: 7px; border-radius: 7px; background: #ece6f6; overflow: hidden; }
.ci-lv-bar > i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #6fb6ff, #3f7cf0); }
.ci-lv-bar.charm > i { background: linear-gradient(90deg, #ff9ec7, #ff5c95); }
.ci-lv-btn { flex: none; font-size: 12px; padding: 4px 10px; background: linear-gradient(135deg, #fff6d8, #ffe9a8); color: #8a5a00; }

/* Tu do: tab Khung */
.ci-frame-h { grid-column: 1 / -1; margin: 6px 0 0; font-weight: 700; color: var(--text); }
.ci-frame .thumb { display: grid; place-items: center; overflow: visible; }
.ci-frame.locked .thumb > :not(.lock) { filter: grayscale(.85) opacity(.55); }
.ci-frame .lock { position: absolute; right: 6px; top: 6px; font-size: 14px; }
.ci-bb-demo { padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(40, 34, 64, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); position: relative; }
.ci-bb-demo.bb::before { position: absolute; top: -8px; right: 2px; font-size: 12px; }

/* bang VIP */
.vip-ov .st-card { width: min(980px, 96vw); }
.vip-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; font-size: 14px; }
.vip-status .pb { height: 20px; font-size: 12px; }
.vip-gold { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #fff6d8; color: #b07800; font-weight: 800; font-size: 13px; }
.vip-list { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding: 18px 2px 6px; }
.vip-tier { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 18px; background: #fbf9ff;
  box-shadow: inset 0 0 0 1px #ece6f6; text-align: center; min-width: 150px; }
.vip-tier.cur { box-shadow: inset 0 0 0 2px var(--accent), 0 6px 18px rgba(165, 139, 255, .25); }
.vt1 { background: linear-gradient(180deg, #fff4ea, #fbf9ff); } .vt2 { background: linear-gradient(180deg, #f3f6fa, #fbf9ff); }
.vt3 { background: linear-gradient(180deg, #fff7d6, #fbf9ff); } .vt4 { background: linear-gradient(180deg, #e9fbff, #f6f2ff); }
.vt5 { background: linear-gradient(180deg, #ffe9f8, #eef0ff 50%, #e9fff6); }
.vip-tier > b { font-size: 15px; margin-top: 10px; }
.vip-price { font-size: 12px; font-weight: 800; color: #b07800; }
.vip-av svg { width: 60%; }
.vip-bb { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(40, 34, 64, .55); position: relative; margin-top: 4px; }
.vip-bb.bb::before { position: absolute; top: -8px; right: 2px; font-size: 11px; }
.vip-perks { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; font-size: 11px; text-align: left; width: 100%; }
.vip-perks li::before { content: "✓ "; color: #3ab28a; font-weight: 800; }
.vip-perks li.more { color: var(--muted); }
.vip-perks li.more::before { content: "… "; color: var(--muted); }
.vip-tier button { width: 100%; margin-top: auto; padding: 8px; border-radius: 12px; font-size: 13px; }
.vip-tier button:disabled { opacity: .55; }
.vip-note { font-size: 11px; color: var(--muted); font-weight: 500; margin: 8px 0 0; }

/* the ho so + tang qua */
.pc-ov .st-card { width: min(440px, 94vw); }
.pc-body { display: grid; gap: 12px; padding-bottom: 16px; }
.pc-head { display: flex; align-items: center; gap: 22px; padding: 14px 6px 6px 14px; }
.pc-head .lav { font-size: 26px; }
.pc-names { display: grid; gap: 3px; min-width: 0; }
.pc-name { font-size: 18px; }
.pc-names small { color: var(--muted); font-size: 12px; }
.pc-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.pc-badges .pb { height: 20px; font-size: 12px; padding: 0 7px 0 4px; }
.pc-badges .pb svg { width: 14px; height: 14px; }
.pc-bio { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fbf9ff; font-size: 13px; white-space: pre-wrap; }
.pc-gift { padding: 11px; border-radius: 14px; }
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gift { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: #fbf9ff; box-shadow: inset 0 0 0 1px #ece6f6; }
.gift.on { background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 4px 12px rgba(165, 139, 255, .25); }
.gift .gi { font-size: 28px; line-height: 1.1; }
.gift .gn { font-size: 11px; font-weight: 700; }
.gift small { font-size: 10px; color: #b07800; font-weight: 800; }
.gift-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.gift-total { font-weight: 800; color: #b07800; }
.gift-wallet { display: block; color: var(--muted); margin-bottom: 8px; }
.pc-card .st-body > .primary { width: 100%; padding: 11px; border-radius: 14px; }
@media (max-height: 560px) {
  .vip-list { padding-top: 14px; }
  .vip-tier { padding: 10px 8px; gap: 4px; }
  .vip-perks { font-size: 10px; }
  .gift .gi { font-size: 22px; }
  .gift { padding: 5px 3px; }
}

/* prestige v2: anh that (assets/prestige – Tien Mong, test local) */
.afr .frm-img { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.62); height: calc(var(--s) * 1.62); transform: translate(-50%, -50%);
  pointer-events: none; user-select: none; filter: drop-shadow(0 1px 2px rgba(30, 15, 60, .35)); }
.pbv { height: 18px; width: auto; vertical-align: middle; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ch-tags .pbv, .w-plate .pbv { height: 16px; }
.w-plate .pbv { margin-right: 3px; }
.ci-lv > .pbv, .pc-badges .pbv, .vip-status .pbv { height: 24px; }
.w-vip .pbv { height: 20px; }
.bbd { position: absolute; background: no-repeat center / contain; pointer-events: none; z-index: 1; }
.bbd-left_up { left: -8px; top: -12px; }
.bbd-left { left: -14px; top: 50%; transform: translateY(-50%); }
.bbd-left_down { left: -8px; bottom: -8px; }
.bbd-right { right: -16px; top: -14px; }
.ch-row.bb { margin: 9px 16px 5px 8px; padding: 0 4px 0 0; }
.ch-row.bb .ch-msg { color: #fff; }
.vip-bb, .ci-bb-demo { position: relative; }
.vip-bb.bb, .ci-bb-demo.bb { margin: 10px 14px 4px; padding: 0 6px; }
.vip-emblem { width: 44px; height: 44px; margin: -30px 0 -6px; filter: drop-shadow(0 3px 6px rgba(80, 40, 120, .35)); }
/* sua: o do 2 ben nhan vat (Tu do) bi bep – quy tac goc .ci-slot co min-height 0 dung sau */
.ci-col .ci-slot, .ci-comp .ci-slot { min-height: 64px; }
@media (max-height: 560px) { .ci-col .ci-slot, .ci-comp .ci-slot { min-height: 38px; } }
/* hoa van bong chat: ra ngoai goc, chua cho ben phai cho chu */
.ch-row.bb { padding-right: 22px; }
.bbd-right { right: -10px; top: -12px; }
.bbd-left { left: -10px; top: auto; bottom: -8px; transform: none; }
.bbd-left_up { left: -10px; top: -12px; }

/* huy hieu cap bang anh (2026-10-20): khien rong (Tai san) / ngoc (Quyen ru) + so cap chu vien */
.pbi { position: relative; display: inline-flex; align-items: center; height: 18px; flex: none; vertical-align: middle; }
.pbi img { height: 100%; width: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.pbi b { margin-left: -3px; font-size: 11px; font-weight: 900; color: #fff; line-height: 1;
  text-shadow: -1px -1px 0 #3a2160, 1px -1px 0 #3a2160, -1px 1px 0 #3a2160, 1px 1px 0 #3a2160, 0 0 4px rgba(0, 0, 0, .5); }
.pbi.pb-b3 b, .pbi.pb-b4 b { color: #ffe9a8; }
.pbi.pb-b5 b { color: #ffe27a; text-shadow: -1px -1px 0 #7a3a00, 1px -1px 0 #7a3a00, -1px 1px 0 #7a3a00, 1px 1px 0 #7a3a00, 0 0 6px #ffcc33; }
.pbi.pb-b4 img, .pbi.pb-b5 img { animation: pbiGlow 2.2s ease-in-out infinite; }
@keyframes pbiGlow { 50% { filter: drop-shadow(0 0 4px rgba(255, 215, 120, .95)) brightness(1.12); } }
.ch-tags .pbi { height: 17px; }
.ch-tags .pbi b { font-size: 10px; }
.ci-lv > .pbi, .pc-badges .pbi { height: 30px; }
.ci-lv > .pbi b, .pc-badges .pbi b { font-size: 14px; }
.pbi { background: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible; animation: none !important; }
.pbi::after { content: none !important; }

/* ================================================ chat nen diu, de thuong (2026-10-20): pastel hong-tim sang, chu tim dam */
.w-chat:not(.no-bg) { background: linear-gradient(160deg, rgba(255, 246, 251, .80), rgba(243, 236, 255, .76) 60%, rgba(236, 246, 255, .74));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #5b4a7a; border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(150, 110, 200, .18); border-radius: 18px; }
.w-chat:not(.no-bg)::before { content: "♡"; position: absolute; right: 10px; top: 4px; font-size: 12px; color: #f4a6c8; opacity: .8; pointer-events: none; }
.w-chat:not(.no-bg) .ch-row { text-shadow: none; font-weight: 600; }
.w-chat:not(.no-bg) .ch-row b { color: #e2669e; }
.w-chat:not(.no-bg) .ch-row.me b { color: #7b6cf0; }
.w-chat:not(.no-bg) .ch-row.bb .ch-msg { color: #fff; text-shadow: 0 1px 2px rgba(40, 20, 70, .55); }
.w-chat:not(.no-bg) .ch-row.ch-sys.gift { background: linear-gradient(90deg, #ffe3ef, #fff4d6); color: #c2577f; box-shadow: inset 0 0 0 1px #ffd0e2; }
.w-chat:not(.no-bg) .ch-bg { color: #b18ad8; background: rgba(255, 255, 255, .7); }
.w-chat:not(.no-bg) .ch-grip i { background: #d9c6f2; }
.w-chat:not(.no-bg) .ch-log { scrollbar-color: #e3d4f6 transparent; }
.w-chatbar { background: linear-gradient(160deg, rgba(255, 246, 251, .82), rgba(243, 236, 255, .78)); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(150, 110, 200, .18); color: #5b4a7a; }
.w-chatbar .ch-count { color: #a48cc4; opacity: 1; }
.w-chatbar .ch-toggle, .w-chatbar .ch-emo { background: rgba(255, 255, 255, .75); }
.w-chatbar input { background: #fff; }

/* Thong tin nhan vat: tieu de cap do + nut xem dac quyen */
.ci-lv-head { display: flex; align-items: center; justify-content: space-between; }
.ci-lv-head b { font-size: 13px; color: var(--muted); }
.ci-guide { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #7b5bd6; background: #efe8ff; }
.ci-guide:hover { background: #e4d9ff; }
.ci-lv.tap { cursor: pointer; border-radius: 10px; }
.ci-lv.tap:hover { background: rgba(165, 139, 255, .08); }

/* bang Dac quyen & cap do */
.lg-ov .st-card { width: min(620px, 95vw); }
.lg-tabs { margin: 0 16px 6px; }
.lg-body { display: grid; gap: 6px; padding-bottom: 14px; }
.lg-now { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg, #fbf6ff, #f1f8ff); }
.lg-now .pbi, .lg-now .pbv { height: 34px; }
.lg-now .pbi b { font-size: 15px; }
.lg-nowtxt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.lg-nowtxt small { color: var(--muted); font-size: 12px; font-weight: 500; }
.lg-go { margin-left: auto; padding: 4px 12px; background: linear-gradient(135deg, #fff6d8, #ffe9a8); color: #8a5a00; font-size: 12px; }
.lg-note { margin: 2px 4px 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
.lg-row { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px;
  background: #fbf9ff; box-shadow: inset 0 0 0 1px #efe9f8; }
.lg-row.lvl { grid-template-columns: 52px minmax(0, 1fr) auto; }
.lg-row .pbi { height: 28px; }
.lg-row .pbv { height: 26px; justify-self: center; }
.lg-row.got { background: linear-gradient(90deg, #f7f2ff, #fff); }
.lg-row:not(.got) { opacity: .78; }
.lg-row.cur { box-shadow: inset 0 0 0 2px var(--accent), 0 4px 14px rgba(165, 139, 255, .25); opacity: 1; }
.lg-info { display: grid; gap: 2px; min-width: 0; }
.lg-info b { font-size: 14px; }
.lg-info small { color: #b07800; font-size: 11px; font-weight: 700; }
.lg-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lg-perks span { padding: 1px 8px; border-radius: 999px; background: #f0eafb; font-size: 11px; font-weight: 600; color: #6a5a8a; }
.lg-perks span.rw { background: #fff0d4; color: #a0660a; }
.lg-bb { position: relative; padding: 0 8px; font-size: 12px; font-weight: 700; color: #fff; margin: 8px 12px 4px 4px; }
.lg-prev { min-width: 34px; display: grid; place-items: center; }
@media (max-height: 560px) { .lg-row { padding: 5px 8px; } .lg-info b { font-size: 12px; } }
/* bang noi (VIP, dac quyen, ho so) mo tu man Thong tin / Tu do: khong bi an theo char-open */
.world.char-open > .vip-ov, .world.char-open > .lg-ov, .world.char-open > .pc-ov { visibility: visible !important; z-index: 14; }

/* huy hieu chi icon; man Thong tin / ho so: icon + "Cap N" (2026-10-20) */
.pbi.lbl { gap: 4px; }
.pbi.lbl b { margin-left: 0; font-size: 12px; color: var(--text); text-shadow: none; white-space: nowrap; }
.ci-lv > .pbi.lbl, .pc-badges .pbi.lbl { height: 26px; padding: 0 8px 0 2px !important; border-radius: 999px; background: #f4f0fb !important; }
.ci-lv > .pbi.lbl b, .pc-badges .pbi.lbl b { font-size: 12px; }
.lg-now .pbi.lbl b { font-size: 13px; }
/* khung tin nhan chi boc phan noi dung */
.ch-row.has-bb { align-items: flex-start; }
.ch-text.bb { position: relative; display: inline-block; vertical-align: top; max-width: 100%; margin: 6px 14px 4px 4px; padding: 0 4px; color: #fff;
  text-shadow: 0 1px 2px rgba(40, 20, 70, .55); font-weight: 600; line-height: 1.35; }
.w-chat:not(.no-bg) .ch-text.bb { color: #fff; }
.ch-text .bbd-right { right: -12px; top: -10px; }

/* ================================================ ten tren / icon duoi (chat + bang ten) – 2026-10-20 */
.ch-msg.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.ch-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.ch-head .ch-tags { margin: 0; gap: 3px; }
.ch-head .ch-tags .pbi, .ch-head .ch-tags .pbv { height: 15px; }
.ch-msg.stack > span:not(.ch-text) { padding-left: 0; }
.ch-msg.stack > .ch-text.bb { margin: 4px 12px 3px 2px; }
.ch-row { margin-bottom: 3px; }
/* bang ten tren dau: 2 dong */
.w-plate { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 10px 3px; border-radius: 12px; line-height: 1.15; }
.w-plate .pl-name { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.w-plate .pl-icons { display: flex; align-items: center; gap: 3px; }
.w-plate .pl-icons .pbi, .w-plate .pl-icons .pbv { height: 15px; margin: 0; }
.w-plate .pl-icons .lv { margin: 0 0 0 2px; font-size: 11px; }
/* hoa van khung tin nhan: nam SAU khung (z -1), chi thoi ra o goc – khong che chu */
.ch-text .bbd, .vip-bb .bbd, .ci-bb-demo .bbd, .lg-bb .bbd { z-index: -1; }
.ch-text .bbd-right, .vip-bb .bbd-right, .lg-bb .bbd-right { right: -14px; top: -12px; }
.ch-text .bbd-left, .ch-text .bbd-left_down { left: -12px; bottom: -10px; top: auto; transform: none; }
.ch-text .bbd-left_up { left: -12px; top: -12px; }
/* chat kieu app: [avatar] [ten / icon] [noi dung ben phai] (2026-10-20) */
.ch-msg.stack { flex-direction: row; align-items: flex-start; gap: 6px; flex: 1; }
.ch-msg.stack > .ch-head { flex: none; max-width: 42%; }
.ch-msg.stack > .ch-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.ch-msg.stack > span:not(.ch-text) { flex: 1; min-width: 0; padding-top: 0; }
.ch-msg.stack > .ch-text.bb { flex: 0 1 auto; min-width: 0; margin: 2px 14px 6px 4px; }

/* ================================================ MAU TEN (prestige name colors – 2026-10-20) */
.nc-white { color: #fff; } .nc-pink { color: #ff9ec7; } .nc-sky { color: #8fd3ff; } .nc-mint { color: #8fe8c8; }
.nc-vip1 { color: #f0a868; }
.nc-vip2, .nc-vip3, .nc-vip4, .nc-vip5, .nc-wealth20, .nc-wealth40, .nc-charm20, .nc-charm40 {
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; }
.nc-vip2 { background-image: linear-gradient(90deg, #dfe6ef, #9aa7bb, #f4f7fb); }
.nc-vip3 { background-image: linear-gradient(90deg, #ffe27a, #e09a00, #fff1b0); }
.nc-vip4 { background-image: linear-gradient(90deg, #7fe4ff, #3fb4d6, #b8a8ff); }
.nc-vip5 { background-image: linear-gradient(90deg, #ff7ad9, #a58bff, #58d6ff, #7dffb0, #ffe27a, #ff7ad9); background-size: 300% 100%; animation: pbShine 4s linear infinite; }
.nc-wealth20 { background-image: linear-gradient(90deg, #8cc6ff, #3f7cf0); }
.nc-wealth40 { background-image: linear-gradient(90deg, #6fa8ff, #ffe27a, #3f7cf0); background-size: 200% 100%; animation: pbShine 3s linear infinite; }
.nc-charm20 { background-image: linear-gradient(90deg, #ffb3d1, #ff5c95); }
.nc-charm40 { background-image: linear-gradient(90deg, #ff6fa8, #ffd36e, #ff3f88); background-size: 200% 100%; animation: pbShine 3s linear infinite; }
/* tren nen chat pastel sang: mau nhat doi sang tong dam cho doc ro; gradient them vien mo */
.w-chat:not(.no-bg) .nc, .w-chat:not(.no-bg) .nc-white { color: #6a5a8a; }
.w-chat:not(.no-bg) .nc-pink { color: #e2669e; } .w-chat:not(.no-bg) .nc-sky { color: #3f9ad8; } .w-chat:not(.no-bg) .nc-mint { color: #2fae8a; }
.w-chat:not(.no-bg) .nc-vip1 { color: #c47a3a; }
.w-chat:not(.no-bg) .nc[class*="nc-vip"]:not(.nc-vip1), .w-chat:not(.no-bg) .nc[class*="nc-wealth"], .w-chat:not(.no-bg) .nc[class*="nc-charm"] { filter: drop-shadow(0 0 1px rgba(60, 30, 100, .55)); }

/* bang ten tren dau: KHONG nen, ten theo mau da chon (vien toi de doc tren map) */
.w-plate { background: none !important; padding: 0; text-shadow: 0 0 3px rgba(20, 10, 40, .9), 0 1px 2px rgba(0, 0, 0, .8); }
.w-plate .pl-name { font-size: 15px; font-weight: 800; }
.w-plate .pl-name[class*="nc-vip"]:not(.nc-vip1), .w-plate .pl-name[class*="nc-wealth"], .w-plate .pl-name[class*="nc-charm"] { filter: drop-shadow(0 0 2px rgba(20, 10, 40, .95)) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.w-plate .pl-icons img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }

/* nut an / hien nen chat: goc TREN TRAI */
.ch-bg { top: 4px; left: 4px; bottom: auto; right: auto; }
.ch-log { padding-top: 24px; }
.ch-grip { margin-left: 0; margin-right: 0; }

/* Thong tin nhan vat > Khung & mau ten */
.ci-style { display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg, #fff7fb, #f4f6ff); flex: none; }
.ci-style-h { font-size: 13px; color: var(--muted); }
.ci-style-row { display: grid; gap: 3px; }
.ci-style-row > small { font-size: 11px; color: var(--muted); font-weight: 700; }
.ci-style-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px 4px 6px; scrollbar-width: none; }
.ci-style-list::-webkit-scrollbar { display: none; }
.ci-style-opt { flex: none; min-width: 52px; height: 52px; display: grid; place-items: center; padding: 0 8px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #ece6f6; }
.ci-style-opt.on { box-shadow: inset 0 0 0 2px var(--accent), 0 3px 10px rgba(165, 139, 255, .3); }
.ci-bb-mini { position: relative; padding: 0 6px; font-size: 11px; font-weight: 700; color: #fff; margin: 4px 8px; }
.ci-bb-mini.plain { padding: 3px 8px; border-radius: 10px; background: #8a7ab0; }
.ci-bb-mini .bbd { z-index: -1; }
.ci-nc-demo { font-size: 13px; font-weight: 800; padding: 3px 6px; border-radius: 8px; background: #3a3256; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

/* icon tien (2026-10-20): vang = nguyen bao, bac = dong bac (assets/ui – anh Tien Mong, test local) */
.cur.silver::before, .cur.gold::before { content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-right: 3px; vertical-align: -0.28em;
  background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); flex: none; }
.cur.silver::before { background-image: url(/assets/ui/cur_silver.png?v=2); }
.cur.gold::before { background-image: url(/assets/ui/cur_gold.png?v=2); }
.cur.silver, .cur.gold { display: inline-flex; align-items: center; }
.cur.silver::first-letter, .cur.gold::first-letter { color: inherit; }
.ci-style-list.hscroll { cursor: grab; }
.ci-style-list .ci-style-opt.on { order: 0; }
/* Tu do > Hao quang > Da */
.ci-stone { cursor: default; }
.ci-stone .thumb { display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--gc, #a58bff) 22%, #fff), #f6f2fd 70%); }
.ci-stone .thumb img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(60, 30, 100, .3)); }
.ci-stone .thumb > span:first-child { font-size: 34px; }
.ci-stone.empty-stone .thumb > :not(.pr-tag) { filter: grayscale(.9) opacity(.45); }
.lg-body { padding-bottom: 22px; }
.lg-perks .lg-nc { background: #3a3256; }
.lg-perks .lg-nc b { font-weight: 800; }
.lg-row.lvl { padding: 6px 10px; }

/* Thong tin (2026-10-20): Ten / @username / ID + nut copy; Tai san / Quyen ru chi icon + cap */
.ci-id .ci-field { gap: 1px; }
.ci-idline { display: flex; align-items: center; gap: 4px; padding-left: 10px; font-size: 13px; color: var(--muted); min-width: 0; }
.ci-idline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-idline.id { font-size: 12px; }
.ci-copy { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.ci-copy:hover { background: rgba(120, 100, 200, .12); color: var(--accent); }
.ci-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci-lv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ci-lv-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--text); text-align: left; min-width: 0; }
.ci-lv-chip:hover { border-color: var(--accent); }
.ci-lv-chip > .pb { flex: none; }
.ci-lv-chip > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ci-lv-chip small { font-size: 11px; color: var(--muted); }
.ci-lv-chip b { font-size: 13px; }
.ci-lv-chip > .pbi { height: 24px; }

/* Thong tin v2 (2026-10-20): ten + nut sua, nut copy / sua sat phai; mau ten hien khi sua ten */
.ci-nameline, .ci-idline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ci-idline { padding-left: 2px; }
.ci-idline > span { flex: 1; min-width: 0; }
.ci-name-txt { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; color: var(--text); padding-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-nameline .ci-name { flex: 1; background: #fff; border-color: var(--accent); }
.ci-copy.ok { color: #fff; background: var(--accent); }
.ci-namecolors .ci-style-list { padding-top: 4px; }
@media (max-height: 560px) { .ci-name-txt { font-size: 15px; } }

/* NEN THONG TIN THEO BAC TAI SAN (2026-10-20): .ci-right[data-wb=0..5] chi o che do info – mau khop huy hieu pb-bN */
.ci-right[data-wb="0"] { --wb1: #edf9f1; --wb2: #7bc89a; --wb3: #2f9e67; }
.ci-right[data-wb="1"] { --wb1: #edf4ff; --wb2: #6fb6ff; --wb3: #3a6fe0; }
.ci-right[data-wb="2"] { --wb1: #f3eeff; --wb2: #b48cff; --wb3: #6c3fdc; }
.ci-right[data-wb="3"] { --wb1: #fff3e6; --wb2: #ffb35c; --wb3: #e2661c; }
.ci-right[data-wb="4"] { --wb1: #fff0f4; --wb2: #ff7aa0; --wb3: #d42a62; }
.ci-right[data-wb="5"] { --wb1: #fff7dc; --wb2: #ffcf3f; --wb3: #c27a00; }
.ci[data-mode="info"] .ci-right[data-wb] {
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--wb2) 22%, transparent), transparent 60%),
    linear-gradient(170deg, var(--wb1) 0%, #fff 34%, #fff 72%, var(--wb1) 100%);
  box-shadow: var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--wb2) 45%, transparent); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-id { position: relative; overflow: hidden; isolation: isolate; flex: none;
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(125deg, var(--wb2), var(--wb3));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--wb3) 35%, transparent); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-id::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 14px); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-name-txt { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-idline { color: rgba(255, 255, 255, .88); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-id .ci-copy { color: rgba(255, 255, 255, .9); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-id .ci-copy:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.ci[data-mode="info"] .ci-right[data-wb] .ci-id .ci-copy.ok { background: #fff; color: var(--wb3); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-levels,
.ci[data-mode="info"] .ci-right[data-wb] .ci-namecolors { background: linear-gradient(135deg, var(--wb1), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb2) 30%, transparent); }
.ci[data-mode="info"] .ci-right[data-wb] .ci-lv-chip:hover { border-color: var(--wb3); }
/* bac 3+: vet sang luot qua the dau; bac 5 (cap 50): them lap lanh + vien vang chuyen dong */
.ci[data-mode="info"] .ci-right[data-wb="3"] .ci-id::after, .ci[data-mode="info"] .ci-right[data-wb="4"] .ci-id::after,
.ci[data-mode="info"] .ci-right[data-wb="5"] .ci-id::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%; animation: wbSheen 4.5s ease-in-out infinite; }
.ci[data-mode="info"] .ci-right[data-wb="5"] .ci-id::before { opacity: .9;
  background: radial-gradient(circle at 12% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 68% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 85% 70%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 40% 85%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 55% 45%, #fff8 0 1px, transparent 2px); animation: wbTwinkle 2.6s ease-in-out infinite; }
.ci[data-mode="info"] .ci-right[data-wb="5"] { box-shadow: var(--shadow), inset 0 0 0 2px #ffd34d, 0 0 22px rgba(255, 196, 40, .35); }
.ci[data-mode="info"] .ci-right[data-wb="5"] .ci-name-txt { color: #fffbe6; text-shadow: 0 1px 2px #8a5400, 0 0 8px rgba(255, 230, 140, .8); }
@keyframes wbSheen { 0%, 25% { background-position: 150% 0; } 75%, 100% { background-position: -50% 0; } }
@keyframes wbTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ci-right[data-wb] .ci-id::after, .ci-right[data-wb] .ci-id::before { animation: none; } }

/* goc trai: the thong tin + nut BALO (Tu do) ben canh (2026-10-20) */
.w-tl { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 28px); }
.w-tl > .w-card { position: static; min-width: 0; }
.w-bag { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--card); box-shadow: var(--shadow); transition: transform .15s; }
.w-bag img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.w-bag:hover { transform: translateY(-2px); }
.w-bag:active { transform: scale(.94); }
@media (max-height: 560px) { .w-bag { width: 42px; height: 42px; } .w-bag img { width: 32px; height: 32px; } }
.ci-acts { grid-template-columns: 1fr; }

/* Dang xuat: icon goc phai tren hop Thong tin (2026-10-20) */
.ci-logout { display: none; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; place-items: center; cursor: pointer;
  background: #fff0f2; color: #e5484d; box-shadow: inset 0 0 0 1px #ffd4da; transition: background .15s, transform .15s; }
.ci-logout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci-logout:hover { background: #e5484d; color: #fff; }
.ci-logout:active { transform: scale(.92); }
.ci[data-mode="info"] .ci-logout { display: grid; }
@media (max-height: 560px) { .ci-logout { width: 28px; height: 28px; } .ci-logout svg { width: 15px; height: 15px; } }

/* icon Tien Mong (2026-10-20, CHI TEST LOCAL): cai dat, tui qua, vien da tiem Dap Da */
.tool.icon.img-ic img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); transition: transform .3s; }
.tool.icon.img-ic:hover img { transform: rotate(45deg); }
@media (max-height: 560px) { .tool.icon.img-ic img { width: 28px; height: 28px; } }
.pc-gift { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pc-gift .gift-ic { width: 26px; height: 26px; object-fit: contain; margin: -6px 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.w-shopbtn { display: inline-flex; align-items: center; gap: 6px; }
.w-shopbtn .shop-ic { width: 30px; height: 30px; object-fit: contain; margin: -8px 0 -8px -6px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.ss-title { display: inline-flex; align-items: center; gap: 6px; }
.ss-title img { width: 28px; height: 28px; object-fit: contain; }

/* nut nhanh pet / xe canh nut gui (2026-10-20) */
.ch-comp { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #ece6f6; transition: transform .15s, box-shadow .15s, background .15s; }
.ch-comp img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(.85) opacity(.6); transition: filter .2s; }
.ch-comp.on { background: linear-gradient(135deg, #fff4fb, #f1ebff); box-shadow: inset 0 0 0 2px var(--accent), 0 2px 8px rgba(165, 139, 255, .35); }
.ch-comp.on img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2)); }
.ch-comp:hover img { filter: none; }
.ch-comp:active { transform: scale(.9); }
.ch-comp.busy { opacity: .6; pointer-events: none; }
@media (max-height: 560px) { .ch-comp { width: 30px; height: 30px; } .ch-comp img { width: 24px; height: 24px; } }
/* Thong tin: hien tren dau */
.ci-plate { display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg, #fbf8ff, #f4f9ff); flex: none; }
.ci[data-mode="info"] .ci-right[data-wb] .ci-plate { background: linear-gradient(135deg, var(--wb1), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb2) 30%, transparent); }
.ci-plate-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ci-plate-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); }
.ci-plate-opt .ck { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: #e3dcf1; }
.ci-plate-opt.on { color: var(--text); border-color: var(--accent); }
.ci-plate-opt.on .ck { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ci-plate .ci-note { margin: 0; }
/* the ho so (nen sang): mau ten dam hon cho de doc (giong chat co nen) */
.pc-name.nc, .pc-name.nc-white { color: #6a5a8a; }
.pc-name.nc-pink { color: #e2669e; } .pc-name.nc-sky { color: #3f9ad8; } .pc-name.nc-mint { color: #2fae8a; } .pc-name.nc-vip1 { color: #c47a3a; }
.pc-name[class*="nc-vip"]:not(.nc-vip1), .pc-name[class*="nc-wealth"], .pc-name[class*="nc-charm"] { filter: drop-shadow(0 0 1px rgba(60, 30, 100, .55)); }

/* nut thu cung / xe ra ngoai khung chat (ben phai), cung kieu nut balo */
.w-qcomp { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.w-qcomp .ch-comp { width: 46px; height: 46px; background: var(--card); box-shadow: var(--shadow); }
.w-qcomp .ch-comp img { width: 36px; height: 36px; }
.w-qcomp .ch-comp.on { background: linear-gradient(135deg, #fff4fb, #f1ebff); box-shadow: inset 0 0 0 2px var(--accent), 0 4px 14px rgba(165, 139, 255, .45); }
@media (max-height: 560px) { .w-qcomp { left: calc(100% + 6px); gap: 6px; } .w-qcomp .ch-comp { width: 38px; height: 38px; } .w-qcomp .ch-comp img { width: 30px; height: 30px; } }

/* Thong tin: tuoi / them ngay sinh (2026-10-20) */
.ci-age small { color: var(--muted); font-size: 12px; font-weight: 500; }
.ci-birth-edit { display: inline-flex; align-items: center; gap: 6px; }
.ci-birth-edit input { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); }
.au-field input[type="date"] { color: var(--text); }

/* PHAP LY (2026-10-20, ND 147/2024): nhan do tuoi, khuyen cao 180 phut, dong y dieu khoan */
.age-badge { display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 900;
  color: #fff; background: linear-gradient(135deg, #ffb347, #f07a2a); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); letter-spacing: .3px; }
.au-scroll { flex-direction: column; }
.au-col { margin: auto; width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px; }
.au-col .au-card { margin: 0; width: 100%; }
.au-legal { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 12px; color: var(--muted); padding: 0 8px; }
.au-rate { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.au-health { margin: 0; font-weight: 700; color: #c4651e; }
.au-policy { display: flex; gap: 8px; align-items: center; }
.au-policy a { color: #6c4fd8; font-weight: 700; text-decoration: none; }
.au-policy a:hover { text-decoration: underline; }
.au-agree { flex-direction: row !important; align-items: flex-start; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text); cursor: pointer; }
.au-agree .au-agree-tx { flex: 1; min-width: 0; line-height: 1.45; }
.au-agree a { color: #6c4fd8; font-weight: 700; }
.au-agree .au-err { flex-basis: 100%; }
.au-chk { position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px; }
.au-chk input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.au-chk i { position: absolute; inset: 0; border-radius: 6px; border: 2px solid var(--line); background: #faf8fe; pointer-events: none; }
.au-chk input:checked + i { border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.au-chk input:checked + i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 900; }
.au-agree.bad .au-chk i { border-color: #ff6b8a; }
.ld-health { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 700; color: #c4651e; }
.w-legal { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; max-width: calc(50vw - 260px); padding: 3px 8px 3px 3px;
  border-radius: 9px; background: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 600; color: #6a5a8a; pointer-events: none; z-index: 3; }
.w-legal .age-badge { height: 18px; min-width: 26px; font-size: 10px; }
@media (max-width: 1000px), (max-height: 560px) { .w-legal span:not(.age-badge) { display: none; } .w-legal { padding: 3px; } }
.health-banner { position: fixed; left: 50%; top: 14px; z-index: 80; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px 10px 12px; border-radius: 16px; background: rgba(255, 248, 238, .97); border: 1px solid #ffd9a8; box-shadow: 0 10px 30px rgba(200, 120, 40, .25);
  transform: translate(-50%, -140%); opacity: 0; transition: transform .35s, opacity .35s; pointer-events: none; }
.health-banner.show { transform: translate(-50%, 0); opacity: 1; }
.health-banner .hb-ic { font-size: 22px; }
.health-banner .hb-tx { display: grid; gap: 1px; }
.health-banner b { font-size: 13px; color: #b85a12; }
.health-banner small { font-size: 12px; color: #8a6a4a; }
.au-field.au-agree { display: flex; } .au-agree .au-agree-tx { flex: 1 1 0; }
.st-guide { text-decoration: none; color: inherit; }
.age-badge { background: linear-gradient(135deg, #ff5a5f, #d81e3a); }   /* nhan 18+ mau do (2026-10-20) */

/* doi username o Thong tin (2026-10-20) */
.ci-unedit { gap: 4px; }
.ci-unedit .at { flex: none; font-weight: 700; }
.ci-unin { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 3px 8px; border-radius: 9px; border: 1.5px solid #fff; background: rgba(255, 255, 255, .95); color: var(--text); outline: none; }
.ci-unbtn { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 9px; background: #fff; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ci-unbtn:disabled { opacity: .6; }
.ci-unbtn .cur { font-size: 12px; }
/* ten dai trong chat (2026-10-20, ten nhan vat toi da 30 ky tu): xuong toi da 2 dong thay vi cat 1 dong */
.ch-msg.stack > .ch-head b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }

/* Tu do (2026-10-20): gioi tinh, outfit, khoa mon */
.ci-gender { display: none; gap: 2px; padding: 3px; border-radius: 999px; background: #f1ebfb; margin-left: auto; margin-right: 8px; }
.ci[data-mode="wardrobe"] .ci-gender { display: inline-flex; }
.ci-gender button { width: 34px; height: 28px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 800; color: var(--muted); cursor: pointer; }
.ci-gender button.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 6px rgba(165, 139, 255, .4); }
.ci-gender button[data-g="female"].on { background: linear-gradient(135deg, #ff9ec7, #ff6fa8); }
.ci-gender button[data-g="male"].on { background: linear-gradient(135deg, #8fb5ff, #5b8cff); }
.item-card { position: relative; }
.ci-lockbtn { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-style: normal;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: pointer; opacity: .75; }
.ci-lockbtn.on { opacity: 1; background: #fff4d6; box-shadow: inset 0 0 0 1.5px #f2b632; }
.ci-lockbtn:hover { opacity: 1; }
.ci-slot { position: relative; }
.ci-lock { position: absolute; left: 3px; top: 3px; font-size: 11px; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.wd-add .thumb span { font-size: 30px; color: var(--accent); }
.wd-thumb { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; }
.wd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; min-height: 0; }
/* anh outfit toan than kieu IMVU (2026-10-26): 1 anh nguoi mac ca bo, khong chia luoi */
.wd-thumb.wd-snap { display: block; padding: 0; background: linear-gradient(180deg, #fbf7ff, #f1e9ff); }
.wd-thumb.wd-snap img { object-fit: contain; border-radius: 0; }
.wd-card .ci-x { position: absolute; top: 4px; right: 4px; }
.wd-card .wd-cam { right: 26px; background: #b79cff; font-size: 11px; }   /* chup lai anh / doi ten (2026-10-26) */
/* man chup outfit (2026-10-26): khung 3:4 giua man, ngoai khung toi; nhan vat ve tren canvas game ben duoi */
.snap-studio { position: fixed; inset: 0; z-index: 9000; touch-action: none; }
.snap-frame { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); height: 74vh; max-width: 88vw; aspect-ratio: 3 / 4;
  border: 2px dashed rgba(255, 255, 255, .85); border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(48, 34, 72, .45); pointer-events: none; }
.snap-back { position: absolute; top: 12px; left: 12px; }
.snap-panel { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(420px, 92vw); display: grid; gap: 6px;
  padding: 10px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); text-align: center; }
.snap-panel small { color: var(--muted, #8a7fa0); }
.snap-name { height: 38px; border-radius: 10px; border: 1px solid rgba(140, 110, 190, .35); padding: 0 12px; font: inherit; text-align: center; }
.snap-go { height: 40px; border-radius: 999px; }
.snap-tools { display: flex; justify-content: center; gap: 6px; }   /* xoay / zoom / dat lai (2026-10-27) */
.snap-tools .chip { min-width: 40px; height: 34px; font-size: 16px; font-weight: 800; }
.wd-miss { color: #d6476f !important; font-weight: 700; }

/* kieu mat / mui / mieng (tab Mat, 2026-10-20) */
.fp-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.fp-row::-webkit-scrollbar { display: none; }
.fp-card { flex: none; width: 82px; display: grid; justify-items: center; gap: 1px; padding: 7px 4px 6px; border: 0; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1px #ece6f6; cursor: pointer; font: inherit; color: var(--text); }
.fp-card .ic { font-size: 20px; line-height: 1.1; }
.fp-card b { font-size: 11.5px; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fp-card small { font-size: 10.5px; color: var(--muted); }
.fp-card small .cur { font-size: 11px; font-weight: 700; }
.fp-card.on { box-shadow: inset 0 0 0 2px var(--accent), 0 3px 10px rgba(165, 139, 255, .3); }
.fp-card.on.edited { box-shadow: inset 0 0 0 2px #c9b8ff; }
.fp-card.locked { background: #faf7ff; }
.fp-card.locked .ic { filter: grayscale(.4); }

/* chinh khuon trang diem (GD3, 2026-10-20) */
.mk-xf { margin-top: 4px; border-radius: 12px; background: #faf7ff; }
.mk-xf-head { width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); }
.mk-xf-head small { color: var(--accent); font-weight: 600; }
.mk-xf-head i { margin-left: auto; font-style: normal; transition: transform .2s; }
.mk-xf.open .mk-xf-head i { transform: rotate(90deg); }
.mk-xf-body { padding: 0 10px 8px; display: grid; gap: 2px; }

/* khuon mat mau + anh xem truoc kieu (2026-10-20) */
.fp-card .fp-img { width: 66px; height: 66px; object-fit: cover; border-radius: 10px; margin-bottom: 3px; background: #f1ecf9; }
.fp-row.big .fp-card { width: 104px; padding: 6px 5px; }
.fp-row.big .fp-card .fp-img { width: 92px; height: 104px; }
.fp-row.big .fp-card .ic { font-size: 30px; padding: 26px 0; }
.fp-card.locked .fp-img { filter: saturate(.8); }

/* logo AVA (2026-10-20, assets/ui/logo.png cat tu logo/logo.png) thay ngoi sao o man dang nhap */
.au-brand .au-logo { width: min(210px, 62vw); height: auto; filter: drop-shadow(0 6px 14px rgba(150, 80, 230, .35)); user-select: none; }
@media (max-height: 560px) { .au-brand .au-logo { width: 150px; } }
/* Tiem Dap Da: mac thu hao quang truoc khi mua (2026-10-20) */
.ss-try { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--ac) 10%, #fff); border: 2px solid color-mix(in srgb, var(--ac) 45%, #fff); }
.ss-try-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-try-head img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.ss-try-txt { display: grid; min-width: 0; flex: 1; }
.ss-try-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-try-txt small { font-size: 11px; color: var(--muted); font-weight: 600; }
.ss-try-off { flex: none; padding: 5px 10px; border-radius: 10px; background: #f1edf8; color: var(--muted); font-size: 12px; font-weight: 700; }
.ss-try-note { font-size: 10px; color: var(--muted); }
.ss-aoffer img { cursor: pointer; }
.ss-aoffer.trying { border-color: var(--ac); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 35%, transparent); }
.ss-try-btn { width: 100%; padding: 3px 0; border-radius: 9px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--ac) 14%, #fff); color: var(--text); }
.ss-aoffer.trying .ss-try-btn { background: var(--ac); color: #fff; }
/* Nhan thoi gian choi (2026-10-20, nguoi dung: chi nhan, khong thong bao can tro) – .w-legal + so phut hom nay */
.w-legal .lg-min { flex: none; font-weight: 800; color: #6a5a8a; white-space: nowrap; }
.w-legal.over { background: rgba(255, 240, 222, .85); color: #b85a12; }
.w-legal.over .lg-min { color: #c4651e; }
.w-legal.lg-pulse { animation: lgPulse 1.2s ease-in-out 3; }
@keyframes lgPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 170, 80, .45); background: rgba(255, 236, 210, .95); } }
@media (max-width: 1000px), (max-height: 560px) { .w-legal { max-width: none; } .w-legal .lg-min { display: inline; font-size: 10px; padding-right: 4px; } }
.w-legal { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; row-gap: 0; line-height: 1.25; }
.w-legal .age-badge { grid-row: span 2; align-self: center; }
@media (max-width: 1000px), (max-height: 560px) { .w-legal { grid-template-columns: auto auto; } .w-legal .age-badge { grid-row: auto; } }
/* nguoi choi khac (others.js, 2026-10-21): bang ten + bong chat rieng tung nguoi, dung chung kieu .w-plate / .w-bubble */
.w-oplate { opacity: 0.92; }

/* Phong nguoi choi (rooms.js, 2026-10-21) */
.w-roomsbtn { background: linear-gradient(145deg, #fff, #f1ebff); box-shadow: 0 3px 10px rgba(120, 100, 180, .25); }
.w-roomsbtn svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w-roomleave { background: linear-gradient(90deg, #ff8fb1, #ffb36b) !important; }
.rm-card { width: min(560px, 94vw); }
.rm-body { display: flex; flex-direction: column; gap: 10px; }
.rm-tabs { align-self: flex-start; }
.rm-here { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #f4efff; font-weight: 700; font-size: 14px; }
.rm-here .ghost { flex: none; padding: 6px 12px; background: #fff; }
.rm-list { display: flex; flex-direction: column; gap: 8px; }
.rm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #faf8ff; border: 1px solid var(--line); }
.rm-row.here { border-color: var(--accent); background: #f3edff; }
.rm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rm-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-info small { font-size: 12px; color: var(--muted); }
.rm-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #fff; background: #9a90b8; }
.rm-tag.public { background: linear-gradient(90deg, #36c28a, #3fb4d6); }
.rm-acts { display: flex; gap: 6px; flex: none; }
.rm-acts .primary { padding: 8px 16px; font-size: 14px; border-radius: 12px; }
.rm-acts .primary:disabled { opacity: .5; transform: none; cursor: default; }
.rm-acts .ghost { padding: 8px 10px; font-size: 16px; }
.rm-add, .rm-create { margin-top: 4px; }
.rm-add:disabled { opacity: .5; transform: none; }
.rm-note { text-align: center; color: var(--muted); }
.rm-empty { margin: 8px 0; color: var(--muted); font-size: 14px; text-align: center; }
.rm-h { margin: 6px 0 0; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.rm-input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 15px; }
.rm-shells { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rm-shell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 14px; background: #faf8ff; border: 2px solid var(--line); text-align: left; }
.rm-shell.on { border-color: var(--accent); background: #f3edff; }
.rm-shell b { font-size: 15px; }
.rm-shell-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #eee9f8; }
.rm-free { font-size: 12px; font-weight: 800; color: #36a37a; }
.rm-del { color: #e0577a; background: #fdeff3; }

/* Trang tri phong (roomedit.js, 2026-10-21) */
.w-decorate { background: linear-gradient(90deg, #36c28a, #3fb4d6) !important; }
.world.editing #w-chatbar, .world.editing #w-pad, .world.editing .w-pad-btns, .world.editing #w-chat, .world.editing .w-legal { display: none !important; }
.re-panel { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; width: min(980px, calc(100% - 20px)); max-height: 40vh;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); }
.re-panel[hidden], .re-bar[hidden] { display: none; }
/* tam an bang trang tri (2026-10-27): chi con dong tieu de gon (Hien / Huy / Luu) */
.re-panel.mini { width: auto; max-width: calc(100% - 20px); padding: 6px 8px; }
.re-panel.mini > :not(.re-head), .re-panel.mini .re-head > :not(b):not(.re-mini):not(.re-cancel):not(.re-save) { display: none; }
.re-panel.mini .re-head { flex-wrap: nowrap; }
.re-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.re-head > b { font-size: 16px; }
.re-grow { flex: 1; }
.re-count { color: var(--muted); }
.re-head .primary, .re-head .ghost { padding: 7px 16px; font-size: 14px; border-radius: 12px; }
.re-cats { display: flex; gap: 4px; overflow-x: auto; flex: none; scrollbar-width: none; }
.re-cats button { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: #f3eefc; }
.re-cats button.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.re-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; overflow-y: auto; min-height: 0; }
.re-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; background: #faf8ff; border: 1px solid var(--line); }
.re-item:hover { border-color: var(--accent); }
.re-item.off { opacity: .45; }
.re-item img { width: 64px; height: 64px; object-fit: contain; }
.re-nm { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.re-item small { font-size: 11px; color: var(--muted); }
.re-own { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); }
.re-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; }
.re-bar { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); }
.re-selname { font-size: 13px; margin-right: 4px; }
.re-tool { padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; background: #f3eefc; color: var(--text); }
.re-tool.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.re-size { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.re-size input { width: 110px; accent-color: var(--accent); }
.re-size b { width: 38px; font-size: 12px; }
@media (max-height: 560px) { .re-panel { max-height: 46vh; padding: 6px 8px; } .re-item img { width: 44px; height: 44px; } .re-bar { top: 52px; } }

/* Cho pose doi (roompose.js, 2026-10-21) */
.w-unpose { background: linear-gradient(90deg, #ff6fae, #b07cff) !important; }
.w-unpose.pulse { animation: unposePulse 0.5s ease-in-out 4; }   /* dang pose doi ma bam di: nhac bam Roi pose (2026-10-31) */
@keyframes unposePulse { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 111, 174, 0.35); } }
.pm-card { width: min(380px, 94vw); }
.pm-body { display: flex; flex-direction: column; gap: 8px; }
.pm-hint { margin: 0; font-size: 13px; color: var(--muted); }
.pm-slot { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 12px;
  border-radius: 14px; border: 2px solid var(--line); background: #faf8ff; text-align: left; }
.pm-slot .pm-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; }
.pm-slot.male .pm-ic { background: #5aa9ff; }
.pm-slot.female .pm-ic { background: #ff6fae; }
.pm-slot small { color: var(--muted); }
.pm-slot:not(:disabled):hover { border-color: var(--accent); }
.pm-slot:disabled { opacity: .55; cursor: default; }
.pm-leave { padding: 9px; }
.pm-now { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff0f7, #f3eeff); }
.pm-now-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; }
.pm-now-top > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-time { flex: none; font-variant-numeric: tabular-nums; color: var(--accent); }
.pm-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(120, 90, 200, .18); }
.pm-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6fae, #b07cff); }
.pm-now-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-replay { padding: 9px; }
.re-pose { padding-top: 10px; }
.re-heart { font-size: 30px; color: #ff6fae; line-height: 1.2; }
.re-hint { color: var(--muted); }
.rm-home { flex: none; font-size: 14px; }
.rm-map b { color: var(--accent); }

/* Shop tai cho: hang chon nhom + so luong da co (storefront.js, 2026-10-21) */
.sf-kinds { margin-bottom: 2px; }
.sf-kinds button { font-weight: 800; }
.sf-count { position: absolute; top: 4px; left: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); background: rgba(255,255,255,.9); border-radius: 999px; padding: 0 6px; }

/* Nhan GA / AP / VIP (rating.js, 2026-10-21) */
.rt-badge { display: inline-block; flex: none; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .03em; color: #fff; line-height: 1.5; }
.rt-ap { background: linear-gradient(90deg, #ff5a7a, #ff8f5a); }
.rt-vip { background: linear-gradient(90deg, #d99a00, #f3c74f); }
.rt-badge.lock { filter: grayscale(.35); opacity: .85; }
.rt-badge.lock::before { content: "🔒 "; }
.item-card .thumb .rt-badge, .re-item .rt-badge { position: absolute; top: 4px; right: 6px; }
.rm-tag.locked { background: #8a8199; }
.rm-lockmsg { color: #e0577a !important; }

/* Ban be (friends.js, 2026-10-21) */
#w-friends { position: relative; }
#w-friends.has-dot::after { content: attr(data-n); position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: #ff4d6d; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.w-invite { background: linear-gradient(90deg, #5aa9ff, #a58bff) !important; }
.fr-card { width: min(520px, 94vw); }
.fr-body { display: flex; flex-direction: column; gap: 8px; }
.fr-tabs { align-self: flex-start; }
.fr-tabs .fr-n { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #ff4d6d; color: #fff; font-style: normal; font-size: 11px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #faf8ff; border: 1px solid var(--line); }
.fr-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #b9aee0, #9c90c4); position: relative; }
.fr-row.on .fr-av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #36c28a; box-shadow: 0 0 0 2px #fff; }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-info small { font-size: 12px; color: var(--muted); }
.fr-acts { display: flex; gap: 6px; flex: none; }
.fr-acts .primary, .fr-acts .ghost { padding: 7px 12px; font-size: 13px; border-radius: 11px; }
.fr-tag { font-size: 12px; font-weight: 700; color: var(--muted); }
.fr-find { display: flex; gap: 8px; }
.fr-find .primary { padding: 8px 16px; font-size: 14px; border-radius: 12px; }
.fr-empty, .fr-hint { margin: 6px 0; color: var(--muted); font-size: 13px; text-align: center; }

/* Danh sach pose trong phong (roompose.js, 2026-10-21) */
.w-poses { background: linear-gradient(90deg, #ff6fae, #ff9a8b) !important; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #faf8ff; text-align: left; }
.pl-row:hover, .pl-row.on { border-color: var(--accent); }
.pl-row b { flex: 1; font-size: 14px; }
.pl-heart { color: #ff6fae; font-size: 20px; }
.pl-dots { display: flex; gap: 5px; }
.pl-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.pl-dot.m { background: #5aa9ff; } .pl-dot.f { background: #ff6fae; } .pl-dot.e { background: #c9c4d3; }

/* He thu trong shop (storefront.js + shoptry.js, 2026-10-21) */
.sf.trying .ss-left { pointer-events: none; }
.sf.trying .ss-left .ss-close { pointer-events: auto; }
.sf-tray { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100% - min(560px, 46vw) - 36px);
  padding: 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); }
.sf-tray[hidden] { display: none; }
.sf-tray-t { flex: none; font-size: 12px; color: var(--muted); writing-mode: horizontal-tb; }
.sf-tray-list { display: flex; gap: 8px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.sf-ti { position: relative; flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .6; }
.sf-ti.on { opacity: 1; }
.sf-ti-th { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #fff, #f1ebff); border: 2px solid var(--line); font-size: 24px; padding: 2px; }
.sf-ti.on .sf-ti-th { border-color: var(--accent); }
.sf-ti-th img { width: 100%; height: 100%; object-fit: contain; }
.sf-ti small { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
.sf-ti-x { position: absolute; top: -5px; right: -2px; width: 20px; height: 20px; border-radius: 50%; padding: 0; font-size: 11px; line-height: 20px; color: #fff; background: #e0577a; }
.sf-tray-buy { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.sf-tray-buy .primary { padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.sf-total { font-size: 11px; font-weight: 700; text-align: center; color: var(--muted); }
.try-bar { top: 14px; left: 30%; }
@media (max-height: 560px) { .sf-ti { width: 48px; } .sf-ti-th { width: 44px; height: 44px; } }

/* Dich chuyen co the (bodyadjust.js, 2026-10-21) */
.w-adjust { background: linear-gradient(90deg, #7a8cff, #4fc3c9) !important; }
.ba-panel { position: absolute; right: 14px; bottom: 84px; z-index: 9; width: min(300px, 80vw); display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow); }
.ba-panel[hidden] { display: none; }
.ba-title { font-size: 15px; }
.ba-axes { align-self: flex-start; }
.ba-axes button { min-width: 44px; font-size: 14px; }
.ba-row { display: flex; align-items: center; gap: 8px; }
.ba-row input { flex: 1; accent-color: var(--accent); }
.ba-val { width: 52px; text-align: right; font-size: 13px; }
.ba-zero { padding: 5px 9px; font-size: 12px; }
.ba-hint { color: var(--muted); font-size: 12px; }
.ba-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-acts .primary, .ba-acts .ghost { padding: 9px; font-size: 14px; border-radius: 12px; }
@media (max-height: 560px) { .ba-panel { bottom: 60px; padding: 8px 10px; gap: 5px; } }
.ba-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-btn.dim { opacity: .45; }
.ba-origin { padding: 6px; font-size: 12px; }
.ba-btn.on { background: linear-gradient(135deg, #f1ebff, #ffe3f1); box-shadow: inset 0 0 0 2px var(--accent); }
#w-poslock.on svg { stroke: #e0577a; }

/* Bo cuc HUD moi (2026-10-21): icon Tien Mong (CHI TEST LOCAL) + chu duoi; cot phai = viec trong phong; thanh duoi chia 2 nhom */
.w-icon { position: relative; overflow: visible; }
.w-icon img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.ic-cap { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(60, 40, 110, .9), 0 0 6px rgba(60, 40, 110, .6); pointer-events: none; }
.w-tl { gap: 12px; padding-bottom: 6px; }
.w-rcol { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 22px; }
.w-rcol .w-bag[hidden] { display: none; }
.world.editing .w-rcol, .world.space-open .w-rcol { display: none; }
.w-qcomp { align-items: center; }
.qc-sep { width: 2px; height: 28px; border-radius: 2px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 4px rgba(60, 40, 110, .3); }
.w-qcomp .ba-btn img { width: 30px; height: 30px; object-fit: contain; }
#w-dots img { width: 22px; height: 30px; }
.w-qcomp .ba-btn.on { background: linear-gradient(135deg, #f1ebff, #ffe3f1); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
#w-dots:not(.on) img { filter: grayscale(1); opacity: .55; }
@media (max-height: 560px) {
  .w-icon img { width: 34px; height: 34px; }
  .ic-cap { font-size: 9px; bottom: -12px; }
  .w-rcol { gap: 16px; }
  .w-qcomp .ba-btn img { width: 24px; height: 24px; }
}
/* HUD moi: chu duoi icon can them cho -> ha hang ten map + khung chat (2026-10-21) */
.w-tl { gap: 16px; }
.ic-cap { z-index: 2; }
.w-place { top: 90px; }
.w-chat { top: 116px; }
.w-chlist { top: 114px; }
@media (max-height: 560px) {
  .w-tl { gap: 12px; }
  .w-place { top: 70px; }
  .w-chat { top: 94px; }
  .w-chlist { top: 92px; }
}
.ba-panel { right: 86px; }
@media (max-height: 560px) { .ba-panel { right: 70px; } }

/* Tin nhan rieng (dm.js) + xem ho so tu ban be (2026-10-21) */
.pc-ov { z-index: 14; }
.dm-ov { z-index: 13; }
#w-dm { position: relative; }
#w-dm.has-dot::after { content: attr(data-n); position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: #ff4d6d; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.fr-av.tap, .fr-info.tap { cursor: pointer; }
.fr-info.tap:hover b { color: var(--accent); }
.pc-rel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.pc-rel .primary { padding: 9px 18px; font-size: 14px; border-radius: 12px; }
.pc-tag { font-size: 13px; font-weight: 700; color: var(--muted); }
.dm-card { width: min(760px, 96vw); height: min(560px, 92vh); max-height: none; }
.dm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; gap: 10px; padding: 0 12px 12px; }
.dm-side { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 8px; }
.dm-conv { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; text-align: left; background: none; }
.dm-conv:hover { background: #f6f2fd; }
.dm-conv.on { background: #efe8ff; }
.dm-conv.online .fr-av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #36c28a; box-shadow: 0 0 0 2px #fff; }
.dm-conv .fr-av { width: 34px; height: 34px; }
.dm-ci { min-width: 0; display: flex; flex-direction: column; }
.dm-ci b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-ci small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-n { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 18px; padding: 0 5px; border-radius: 999px; background: #ff4d6d; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.dm-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-top { display: flex; align-items: baseline; gap: 8px; }
.dm-peer { font-size: 15px; font-weight: 800; padding: 0; background: none; color: var(--text); }
.dm-peer:hover { color: var(--accent); }
.dm-top small { color: var(--muted); font-size: 12px; }
.dm-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; background: #faf8ff; }
.dm-day { align-self: center; font-size: 11px; color: var(--muted); padding: 2px 8px; }
.dm-msg { align-self: flex-start; max-width: 78%; display: flex; flex-direction: column; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #fff;
  box-shadow: 0 1px 4px rgba(120, 100, 180, .15); font-size: 14px; word-break: break-word; }
.dm-msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.dm-msg small { align-self: flex-end; font-size: 10px; opacity: .65; }
.dm-form { display: flex; gap: 6px; }
.dm-form .primary { padding: 8px 16px; border-radius: 12px; }
.dm-empty { margin: auto; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 640px) {
  .dm-body { grid-template-columns: 1fr; }
  .dm-body.has-peer .dm-side { display: none; }
  .dm-body:not(.has-peer) .dm-main { display: none; }
}
@media (max-height: 560px) { .dm-body { grid-template-columns: 180px 1fr; } }

/* Anh dai dien tai len + the ho so (2026-10-21) */
.lav.img, .ch-av.img, .fr-av.img, .w-ava.img, .ci-av.img { background-size: cover !important; background-position: center; color: transparent; }
.w-ava.img svg { display: none; }
.ci-av-edit { position: relative; cursor: pointer; overflow: visible; }
.ci-av-cam { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-style: normal; font-size: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); color: initial; }
.ci-av-rm { position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; padding: 0; font-size: 10px; line-height: 20px; color: #fff; background: #e0577a; }
.pc-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); font-weight: 700; }
.pc-g.male { color: #3d8fe0; } .pc-g.female { color: #e0569a; }
.pc-on.on { color: #2fae7c; }
.av-ov { z-index: 20; }
.av-card { width: min(360px, 94vw); }
.av-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.av-hint { color: var(--muted); text-align: center; }
.av-stage { position: relative; width: 280px; height: 280px; border-radius: 16px; overflow: hidden; touch-action: none; }
.av-stage canvas { display: block; cursor: grab; }
.av-stage canvas:active { cursor: grabbing; }
.av-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--accent);
  background: radial-gradient(circle at center, transparent 139px, rgba(40, 30, 70, .45) 140px); }
.av-zoom { display: flex; align-items: center; gap: 8px; width: 280px; }
.av-zoom input { flex: 1; }
.av-body .ba-acts { width: 100%; }
.world.char-open > .av-ov, .world.char-open > .dm-ov { visibility: visible !important; }
.ba-modes { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.ba-modes button { font-size: 13px; }

/* Tin nhan 3 tab: ban be / nhom / he thong (dm.js, 2026-10-21) */
.dm-tabs { margin-left: auto; }
.dm-tabs button { position: relative; font-size: 12px; }
.dm-tabs .fr-n { margin-left: 4px; }
.dm-gav { font-style: normal; font-size: 18px; background: linear-gradient(135deg, #9fd3ff, #c9b6ff) !important; }
.dm-newgrp { padding: 8px; font-size: 13px; border-radius: 12px; margin-bottom: 4px; }
.dm-ginv { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: #fff4e6; border: 1px solid #ffd9a8; }
.dm-ginv b { font-size: 13px; }
.dm-ginv small { font-size: 11px; color: var(--muted); }
.dm-ginv .fr-acts .primary, .dm-ginv .fr-acts .ghost { padding: 5px 10px; font-size: 12px; }
.dm-mini { padding: 4px 10px; font-size: 12px; border-radius: 10px; }
.dm-from { font-size: 11px; color: var(--accent); }
.dm-sys { align-self: center; font-size: 11px; color: var(--muted); padding: 2px 10px; border-radius: 999px; background: #efe9fb; }
.dm-pick { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.dm-pickrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #faf8ff; font-size: 14px; }
.dm-pickrow .fr-av { width: 30px; height: 30px; cursor: pointer; }
.dm-sysbox { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.dm-note { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #faf8ff; border: 1px solid var(--line); }
.dm-note.new { border-color: var(--accent); background: #f4efff; }
.dm-note.k-admin { background: #fff8e8; border-color: #ffd98a; }
.dm-nic { flex: none; font-style: normal; font-size: 22px; }
.dm-ntext { font-size: 14px; white-space: normal !important; }
.dm-note .dm-ci small { white-space: normal; }
.dm-done { flex: none; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .dm-tabs button { padding: 4px 7px; font-size: 11px; } }

/* Goi y bat thong bao tin nhan (notify.js, 2026-10-21) */
.nf-ask { position: absolute; right: 16px; bottom: 84px; z-index: 11; width: min(360px, 90vw); display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); animation: nfIn .35s ease; }
.nf-ask .ic { font-size: 26px; }
.nf-ask .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nf-ask .tx b { font-size: 14px; }
.nf-ask .tx small { font-size: 12px; color: var(--muted); }
.nf-ask .acts { display: flex; flex-direction: column; gap: 4px; }
.nf-ask .acts button { padding: 6px 12px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
.nf-btn { padding: 6px 14px; font-size: 13px; border-radius: 10px; }
@keyframes nfIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-row.ch-sys.join, .ch-row.ch-sys.leave { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(60, 40, 110, .6); }
.w-chat:not(.no-bg) .ch-row.ch-sys.join { color: #2f9f74; text-shadow: none; background: #e6f8f0; }
.w-chat:not(.no-bg) .ch-row.ch-sys.leave { color: #8a7fa6; text-shadow: none; background: #f1edf8; }
/* Khung avatar MONG (2026-10-21): thay anh khung Tien Mong (qua day, che anh). Vong ~7% co avatar, mau theo bac. */
.afr.thin .frm-ring { position: absolute; inset: calc(var(--s) * -0.07); border-radius: 50%; pointer-events: none;
  padding: max(2px, calc(var(--s) * 0.055)); background: linear-gradient(135deg, var(--c2), var(--c1) 50%, var(--c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.afr.thin.fr-r4 .frm-ring, .afr.thin.fr-r5 .frm-ring { box-shadow: 0 0 calc(var(--s) * 0.12) var(--c2); }
.afr.thin.fr-r4, .afr.thin.fr-r5 { filter: drop-shadow(0 0 calc(var(--s) * 0.06) var(--c2)); }
.afr.thin.fr-rainbow .frm-ring { background: conic-gradient(#ff7ad9, #a58bff, #58d6ff, #7dffb0, #ffe27a, #ff7ad9); animation: frSpin 4s linear infinite; }
@keyframes frSpin { to { transform: rotate(360deg); } }
.afr.thin .frm-gem { position: absolute; left: 50%; top: calc(var(--s) * -0.2); transform: translateX(-50%); font-style: normal; line-height: 1;
  font-size: max(9px, calc(var(--s) * 0.28)); color: var(--c1); text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 1px 2px rgba(0, 0, 0, .3); pointer-events: none; }
.afr.thin .frm-gem.charm { color: #ff4f8b; }
/* vao / ra phong: dong sat trai nhu tin nhan, [icon Tai san] Ten + chu (nguoi dung 2026-10-21) */
.ch-row.ch-sys.join, .ch-row.ch-sys.leave { justify-content: flex-start; align-items: center; text-align: left; gap: 4px; width: fit-content; max-width: 100%; margin-left: 0; }
.ch-row.ch-sys.join .pbi, .ch-row.ch-sys.leave .pbi { height: 15px; }
.ch-row.ch-sys.join b, .ch-row.ch-sys.leave b { color: inherit; }
.ci-join-opt .pbi, .ci-join-opt .pbv { height: 16px; }
/* tin nhan / ban be / tu do: ben trai o nhap chat, doi xung cum thu cung / xe ben phai (2026-10-21) */
.w-qsoc { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.w-qsoc .w-bag { width: 46px; height: 46px; background: var(--card); box-shadow: var(--shadow); }
.w-qsoc .w-bag img { width: 36px; height: 36px; }
.w-qsoc .ic-cap { display: none; }
.w-qsoc .w-bag:hover { transform: translateY(-2px); }
@media (max-height: 560px) { .w-qsoc { right: calc(100% + 6px); gap: 6px; } .w-qsoc .w-bag { width: 38px; height: 38px; } .w-qsoc .w-bag img { width: 30px; height: 30px; } }
/* dong canh bao suc khoe ben trai: chua cho cum .w-qsoc */
@media (min-width: 1001px) and (min-height: 561px) { .w-legal { max-width: calc(50vw - 420px); } }
/* man cam ung hep: cum nut len tren o nhap chat (khong de len can gat .w-pad) */
@media (pointer: coarse) and (max-width: 900px) { .w-qsoc { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: none; } }
/* phong thu (shoptry): lop goc .ss phu kin man hinh -> chuot/cham xuyen xuong canvas de xoay / phong camera, bam san (2026-10-21) */
.sf.trying { pointer-events: none; }
.sf.trying .ss-panel, .sf.trying .sf-tray, .sf.trying .try-bar, .sf.trying .ss-left .ss-close { pointer-events: auto; }
/* bang Phong: avatar nguoi dang trong phong (bam -> ho so) */
.rm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.rm-who .afr { cursor: pointer; }
.rm-who .afr:hover { transform: translateY(-1px); }
.rm-av { width: 26px; height: 26px; margin: 0; font-size: 12px; font-weight: 800; color: #fff; }
.rm-more { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
/* nguoi trong phong (roompeople.js) */
.rp-card { width: min(420px, calc(100vw - 32px)); }
.rp-body { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 460px); overflow-y: auto; }
.rp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: #faf8ff; border: 1px solid var(--line); }
.rp-row.me { border-color: var(--accent); background: #f3edff; }
.rp-row .afr { cursor: pointer; flex: none; }
.rp-av { width: 40px; height: 40px; margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.rp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rp-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rp-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.rp-owner { font-size: 14px; }
.rp-tags { display: flex; align-items: center; gap: 4px; }
.rp-tags .pbi, .rp-tags .pbv { height: 18px; }
.rp-kick { flex: none; padding: 6px 14px; border-radius: 999px; color: #d24b6e; border: 1px solid #f3c2d0; background: #fff; font-weight: 700; cursor: pointer; }
.rp-kick:hover { background: #fff0f4; }
/* thanh cong cu gom vao nut ☰ (2026-10-21): bam -> hien hang ngang ben trai nut; cot phai (Cua hang, Phong, Trang tri, Pose, Moi ban) duoi nut */
.w-toolpop { display: none; align-items: center; gap: 8px; }
.w-tools.open .w-toolpop { display: flex; animation: tpIn .18s ease-out; }
@keyframes tpIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.w-tools .w-menu { width: 44px; padding: 0; justify-content: center; }
.w-tools .w-menu.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.w-tools .w-menu.on svg { stroke: #fff; }
.w-rcol { top: 74px; transform: none; }
@media (max-height: 560px) { .w-rcol { top: 58px; gap: 16px; } }
/* cot icon (Cua hang, Phong, Trang tri, Pose, Moi ban) cung an / hien theo nut ☰ (nguoi dung 2026-10-21): mo menu = hang ngang cong cu + cot doc icon */
.world:not(:has(.w-tools.open)) .w-rcol { display: none; }
.w-rcol { animation: tpDown .18s ease-out; }
@keyframes tpDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-height: 560px) {
  .w-rcol { top: 54px; gap: 14px; }
  .w-rcol .w-bag { width: 38px; height: 38px; }
  .w-rcol .w-icon img { width: 32px; height: 32px; }
}
/* the Thong tin: nut xoa / doi anh dai dien nam TREN vong khung (khong bi khung de), dat ra ngoai vong (2026-10-21) */
.ci-av-cam, .ci-av-rm { z-index: 3; box-shadow: 0 1px 4px rgba(40, 20, 70, .3); }
.ci-av-cam { right: -9px; bottom: -9px; }
.ci-av-rm { left: -10px; top: -10px; }
/* bo icon moi (logo/, 2026-10-21): 2.5D/3D = 1 nut may anh khoa/mo, ☰, Thoat ket, nut gui chat */
.tool.icon.img-ic.no-spin:hover img { transform: scale(1.08); }
.w-tools .w-menu.on { background: #fff; box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.tool .tool-img { width: 24px; height: 24px; object-fit: contain; }
.ch-send { background: none !important; padding: 0; }
.ch-send img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(40, 20, 70, .25)); transition: transform .15s; }
.ch-send:hover img { transform: translateX(2px) scale(1.06); }
@media (max-height: 560px) { .ch-send img { width: 26px; height: 26px; } }
/* che do chup anh (2026-10-21): an moi thu trong lop giao dien tru bang ten / bong chat tren dau va nut thoat */
.world.photo > *:not(#w-photo-exit):not(.w-photo-bar):not(.w-photo-frame):not(.w-plate):not(.w-bubble) { display: none !important; }
.w-photo-exit { position: absolute; top: 14px; right: 14px; z-index: 20; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .55); box-shadow: 0 2px 10px rgba(40, 20, 70, .25); opacity: .7; transition: opacity .2s; }
.w-photo-exit:hover { opacity: 1; }
.w-photo-exit[hidden] { display: none; }
.w-photo-exit img { width: 34px; height: 34px; object-fit: contain; }
@media (max-height: 560px) { .w-photo-exit { top: 10px; right: 10px; width: 40px; height: 40px; } .w-photo-exit img { width: 30px; height: 30px; } }
/* nut Dich chuyen co the: icon 9 (logo/9.png, co san nen tron) phu kin nut, giu mau (2026-10-21) */
.w-qcomp #w-adjust { background: none; }
.w-qcomp #w-adjust img { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(60, 40, 110, .25)); }
.w-qcomp #w-adjust.on img { filter: drop-shadow(0 0 6px var(--accent)); }
/* 2 ben o chat: nut gom hien / an cum icon (2026-10-21) */
.q-group.collapsed > :not(.q-tog) { display: none !important; }
.q-tog { position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--card); box-shadow: var(--shadow); transition: transform .15s; }
.q-tog svg { width: 22px; height: 22px; fill: var(--accent); opacity: .85; transition: transform .25s; }
.q-tog:hover { transform: translateY(-2px); }
.q-tog.on { background: linear-gradient(135deg, #fff4fb, #f1ebff); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.q-tog.on svg { transform: rotate(45deg); }
.q-tog.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ff4f7b; box-shadow: 0 0 0 2px #fff; }
@media (max-height: 560px) { .q-tog { width: 38px; height: 38px; } .q-tog svg { width: 18px; height: 18px; } }
.q-group:not(.collapsed) .q-tog.has-dot::after { display: none; }
@media (min-width: 1001px) and (min-height: 561px) { .w-legal { max-width: calc(50vw - 480px); } }   /* chua cho cum trai + nut gom */
/* Moi ban vao phong: o tim + danh sach cuon rieng (2026-10-21) */
.fr-invq { width: 100%; margin-bottom: 8px; }
.fr-invlist { display: flex; flex-direction: column; gap: 8px; }
/* bang Phong (2026-10-21): o tim + dong chu phong */
.rm-search { width: 100%; margin: 2px 0 4px; }
.rm-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.rm-owner .rm-by { font-weight: 700; color: var(--text); opacity: .8; }
.rm-owner .rm-n { margin-left: 2px; }
.rm-tag.home { background: #fff3cf; color: #b07a00; }
.rm-content { display: flex; flex-direction: column; gap: 10px; }
/* mau ten = MAU DON (2026-10-21, nguoi dung: gradient dau mat). Nen toi: sang; nen sang (chat co nen, the ho so): dam hon */
.nc-vip2, .nc-vip3, .nc-vip4, .nc-vip5, .nc-wealth20, .nc-wealth40, .nc-charm20, .nc-charm40 {
  background: none !important; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; animation: none !important; }
.nc-vip1 { color: #f0a868 !important; }        /* dong */
.nc-vip2 { color: #c9d3e0 !important; }        /* bac */
.nc-vip3 { color: #ffd24a !important; }        /* vang */
.nc-vip4 { color: #6fd8f2 !important; }        /* bach kim */
.nc-vip5 { color: #c59bff !important; }        /* kim cuong */
.nc-wealth20 { color: #8cbcff !important; } .nc-wealth40 { color: #5f9bff !important; }
.nc-charm20 { color: #ff9ec7 !important; } .nc-charm40 { color: #ff5c95 !important; }
.w-chat:not(.no-bg) .nc-vip1, .pc-name.nc-vip1, .rp-name.nc-vip1 { color: #c47a3a !important; }
.w-chat:not(.no-bg) .nc-vip2, .pc-name.nc-vip2, .rp-name.nc-vip2 { color: #7d8aa0 !important; }
.w-chat:not(.no-bg) .nc-vip3, .pc-name.nc-vip3, .rp-name.nc-vip3 { color: #c99100 !important; }
.w-chat:not(.no-bg) .nc-vip4, .pc-name.nc-vip4, .rp-name.nc-vip4 { color: #1f9ec2 !important; }
.w-chat:not(.no-bg) .nc-vip5, .pc-name.nc-vip5, .rp-name.nc-vip5 { color: #8a5cf0 !important; }
.w-chat:not(.no-bg) .nc-wealth20, .pc-name.nc-wealth20, .rp-name.nc-wealth20 { color: #3f7cf0 !important; }
.w-chat:not(.no-bg) .nc-wealth40, .pc-name.nc-wealth40, .rp-name.nc-wealth40 { color: #2457c9 !important; }
.w-chat:not(.no-bg) .nc-charm20, .pc-name.nc-charm20, .rp-name.nc-charm20 { color: #e2669e !important; }
.w-chat:not(.no-bg) .nc-charm40, .pc-name.nc-charm40, .rp-name.nc-charm40 { color: #d23a76 !important; }
.w-chat:not(.no-bg) .nc[class*="nc-"], .pc-name[class*="nc-"] { filter: none !important; }
.w-plate .pl-name[class*="nc-"] { filter: none !important; }
.rp-name.nc, .rp-name.nc-white { color: var(--text); } .rp-name.nc-pink { color: #e2669e; } .rp-name.nc-sky { color: #3f9ad8; } .rp-name.nc-mint { color: #2fae8a; }
/* Tin nhan > He thong: bam doc day du + danh sach mon tang / thu hoi (2026-10-22) */
.dm-note.tap { cursor: pointer; }
.dm-note.tap:hover { background: #f6f2ff; }
.dm-nlines { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0; font-size: 13px; font-weight: 700; }
.dm-nlines .pos { color: #2f9f74; } .dm-nlines .neg { color: #d6476f; } .dm-nlines .more { color: var(--muted); font-weight: 600; }
.nt-detail-back { position: fixed; inset: 0; z-index: 400; background: rgba(40, 30, 70, .35); display: grid; place-items: center; padding: 16px; }
.nt-detail { width: min(440px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(40, 20, 80, .3); padding: 18px 20px; display: grid; gap: 8px; color: var(--text); }
.nt-dhead { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.nt-dic { font-size: 26px; }
.nt-dtime { color: var(--muted); }
.nt-dtext { margin: 0; white-space: pre-line; line-height: 1.5; }
.nt-dlines { margin: 0; padding: 10px 12px; list-style: none; display: grid; gap: 6px; background: #faf8ff; border-radius: 12px; font-weight: 700; }
.nt-dlines .pos { color: #2f9f74; } .nt-dlines .neg { color: #d6476f; }
.nt-dacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* 2026-10-22: icon Tin nhan LUON hien canh o chat (ca khi thu gon) + so tin chua doc; nut gom hien so cua nut dang an */
.q-group.collapsed > #w-dm { display: grid !important; }
.q-tog.has-dot::after { content: attr(data-n); width: auto; min-width: 18px; height: 18px; padding: 0 4px; top: -2px; right: -2px; border-radius: 999px;
  color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; background: #ff4d6d; }
#w-dm.has-dot::after { z-index: 2; }
/* dong mon co icon (2026-10-22) */
.nl { display: inline-flex; align-items: center; gap: 6px; }
.nl-ic { width: 22px; height: 22px; object-fit: contain; flex: none; font-style: normal; font-size: 17px; line-height: 22px; text-align: center; }
.nt-dlines .nl-ic { width: 34px; height: 34px; font-size: 24px; line-height: 34px; border-radius: 8px; background: #fff; }
.nt-dlines li.nl { display: flex; gap: 10px; }

/* xoa / thu hoi tin nhan (2026-10-22) */
.dm-msg { position: relative; }
.dm-more { position: absolute; top: 2px; right: 4px; width: 24px; height: 20px; padding: 0; border-radius: 8px; font-weight: 900; line-height: 1; opacity: 0; color: inherit; background: rgba(255, 255, 255, .6); }
.dm-msg:hover .dm-more, .dm-msg:focus-within .dm-more { opacity: 1; }
@media (hover: none) { .dm-more { opacity: .7; } }
.dm-msg.recalled > span { font-style: italic; opacity: .6; }
.dm-menu { position: absolute; z-index: 30; top: 24px; right: 0; display: grid; min-width: 150px; background: #fff; border-radius: 12px; box-shadow: 0 8px 26px rgba(40, 20, 80, .22); overflow: hidden; }
.dm-msg:not(.me) .dm-menu { right: auto; left: 0; }
.dm-menu button { padding: 9px 14px; text-align: left; font-weight: 700; color: var(--text); }
.dm-menu button:hover { background: #f6f2ff; }
.dm-menu button.danger { color: #d6476f; }

/* doi vang -> bac (2026-10-22) */
.w-wallet .cur.silver { display: inline-flex; align-items: center; gap: 3px; }
.w-exch { width: 16px; height: 16px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); cursor: pointer; }
.w-exch:hover { transform: scale(1.15); }
.ex-card { width: min(380px, 100%); }
.ex-inp { width: 100%; font-size: 18px; font-weight: 700; }
.ex-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-quick button { padding: 5px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.ex-out { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 12px; background: #faf8ff; font-size: 18px; font-weight: 800; }
.ex-out .cur { padding: 2px 10px; border-radius: 999px; background: #fff; }
.ex-out .gold { color: #e0a800; } .ex-out .silver { color: #8a97ad; }
.ex-arrow { color: var(--muted); }

/* thong bao nap vang (2026-10-22) */
.nt-topup { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #fff8e1, #fff1c4); font-size: 16px; font-weight: 700; }
.nt-topic { width: 40px; height: 40px; object-fit: contain; }
.nt-topup b { font-size: 28px; color: #c48a00; }
.ci-unbtn .free { font-size: 11px; color: #188a63; }

/* chi tai khoan duoc cap (2026-10-22): an dang ky / quen mat khau / dieu khoan tren trang dang nhap */
#ui-auth.invite-only .au-links, #ui-auth.invite-only .au-policy, #ui-auth.invite-only form[data-view="register"], #ui-auth.invite-only form[data-view="forgot"] { display: none !important; }

/* ♡ wishlist + 🎁 tang + 🛒 mua rieng (storefront.js / prestige.js, 2026-10-22) */
.sf-card .thumb { position: relative; }
.sf-acts { position: absolute; top: 4px; left: 4px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.sf-acts i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 6px rgba(80, 60, 140, .2); cursor: pointer; color: #e0577a; }
.sf-acts i:hover { transform: scale(1.1); }
.sf-acts .sf-wish.on { background: #ffe3ec; }
.sf-ti-buy { position: absolute; top: -5px; left: -2px; width: 22px; height: 22px; border-radius: 50%; padding: 0; font-size: 11px; line-height: 22px; background: #fff;
  box-shadow: 0 2px 6px rgba(80, 60, 140, .25); }
.sf-ti-buy:disabled { opacity: .5; }
.sf-gp-back { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(40, 30, 70, .3); padding: 16px; }
.sf-gp { width: min(380px, 100%); max-height: 80vh; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgba(40, 20, 80, .3); }
.sf-gp-head { display: flex; align-items: center; gap: 8px; }
.sf-gp-head b { flex: 1; font-size: 16px; }
.sf-gp-x { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: #f3eefd; }
.sf-gp-price { color: var(--muted); font-weight: 700; }
.sf-gp-q { border: 2px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; outline: none; }
.sf-gp-q:focus { border-color: var(--accent); }
.sf-gp-list { display: grid; gap: 4px; overflow-y: auto; min-height: 0; }
.sf-gp-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; border-radius: 12px; background: #fbf9ff; border: 1px solid var(--line); text-align: left; }
.sf-gp-row:hover { border-color: var(--accent); background: #f3eefd; }
.sf-gp-row small { color: var(--muted); font-size: 12px; }
.sf-gp-none { color: var(--muted); font-size: 13px; margin: 4px 2px; }
.pc-wish { margin-top: 6px; }
.pc-wl { display: grid; gap: 8px; }
.pc-wl-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fbf9ff; border: 1px solid var(--line); }
.pc-wl-th { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #f3eefd; display: grid; place-items: center; overflow: hidden; font-size: 22px; }
.pc-wl-th img { width: 100%; height: 100%; object-fit: cover; }
.pc-wl-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pc-wl-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-wl-info small { font-size: 12px; font-weight: 700; }
.pc-wl-buy { flex: none; padding: 7px 12px; font-size: 13px; }
.pc-wl-empty { text-align: center; padding: 12px 0; }
/* hop tang: dong nguoi nhan day du (anh, ten, @username · ID, gioi, VIP, cap) */
.sf-gp-row { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
.sf-gp-row:disabled { opacity: .55; cursor: not-allowed; }
.sf-gp-row .afr { flex: none; }
.sf-gp-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sf-gp-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-gp-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sf-gp-g { font-size: 12px; font-weight: 800; }
.sf-gp-g.male { color: #4a8fe0; } .sf-gp-g.female { color: #e0577a; }
.sf-gp-on { flex: none; font-size: 11px; color: var(--muted); }
.sf-gp-on.on { color: #2f9f74; font-weight: 700; }
.sf-gp-warn { flex: none; font-size: 11px; font-weight: 700; color: #d6476f; max-width: 110px; text-align: right; }
/* khay do thu: chua cho nut goc ✕ / 🛒 (nho ra ngoai anh) – truoc bi xen do overflow-x (2026-10-22) */
.sf-tray-list { padding: 8px 6px 2px; margin: -8px -6px -2px; }
.sf-ti-x, .sf-ti-buy { z-index: 1; }
.dlg-btns.dlg-col { flex-direction: column; } .dlg-btns.dlg-col button { width: 100%; }

/* tu do: 👕 Mac o day (do tam theo noi, 2026-10-22) – an o che do Thong tin */
[data-mode="info"] .ci-wear { display: none; }
/* chan tu do 3 nut (Huy · Mac o day · Luu lam mac dinh) – 1 hang; Thong tin van 2 nut */
#w-char:not([data-mode="info"]) .ci-foot { grid-template-columns: .8fr 1fr 1.3fr; }
#w-char:not([data-mode="info"]) .ci-foot button { padding: 11px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* dang khoi dong (main.js, 2026-10-22): man cho che, giau man tao nhan vat toi khi biet vao the gioi hay tao moi */
body.booting #loading { opacity: 1 !important; pointer-events: auto; }
body.booting #ui-creator { visibility: hidden; }

/* phong thu shop: goc 2.5D / 3D + diem noi that (shoptry.js, 2026-10-22) */
.try-view { position: absolute; left: 12px; top: 62px; z-index: 7; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.try-view[hidden] { display: none; }
.try-seg { display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(80, 60, 140, .18); }
.try-seg button { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
.try-seg button.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; }
.try-pts { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .9); color: var(--muted); box-shadow: 0 4px 14px rgba(80, 60, 140, .18); }
.try-pts.on { color: #d6477f; background: #ffe9f2; }
.sf.trying .try-view { pointer-events: auto; }   /* thanh goc 2.5D / 3D + diem noi that bam duoc khi dang thu phong (2026-10-22) */

/* ===== dien thoai (2026-10-22): nut di chuyen dang bieu tuong + vung cham toi thieu ===== */
@media (pointer: coarse) {
  /* cum nut: Nhay to o goc, 3 nut tron vong cung quanh */
  .w-acts { display: block; width: 168px; height: 168px; right: 18px; bottom: 18px; gap: 0; }
  .w-acts .act { position: absolute; min-width: 0; width: 54px; height: 54px; padding: 0; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .88); border: 2px solid rgba(165, 139, 255, .35); color: #7a5cf0; }
  .w-acts .act svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  .w-acts #w-sprint svg { fill: currentColor; stroke-width: 1.2; }
  .w-acts .act.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
  .w-acts .act:active { transform: scale(.92); }
  .w-acts .act.big { width: 82px; height: 82px; right: 0; bottom: 0; border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .w-acts .act.big svg { width: 36px; height: 36px; stroke-width: 2.4; }
  .w-acts #w-leap { right: 96px; bottom: 4px; }
  .w-acts #w-sprint { right: 82px; bottom: 74px; }
  .w-acts #w-walk { right: 12px; bottom: 100px; }
  /* vung cham toi thieu cho nut nho (giu kich thuoc nhin thay, noi rong vung bam) */
  #w-vip, #w-exch, .w-wallet .cur + button, #w-ch, #w-roomleave, .ch-bg, .ch-toggle, .ch-emo, .ch-send { position: relative; }
  #w-vip::after, #w-exch::after, #w-ch::after, #w-roomleave::after, .ch-bg::after { content: ""; position: absolute; inset: -10px; }
  .ch-toggle, .ch-emo, .ch-send { min-width: 36px; min-height: 36px; }
}
@media (pointer: coarse) and (max-height: 560px) {
  .w-acts { width: 150px; height: 150px; right: 12px; bottom: 12px; }
  .w-acts .act { width: 48px; height: 48px; }
  .w-acts .act svg { width: 23px; height: 23px; }
  .w-acts .act.big { width: 72px; height: 72px; }
  .w-acts .act.big svg { width: 32px; height: 32px; }
  .w-acts #w-leap { right: 84px; bottom: 2px; }
  .w-acts #w-sprint { right: 72px; bottom: 64px; }
  .w-acts #w-walk { right: 10px; bottom: 86px; }
  /* dong 18+ / thoi gian: len tren can gat, khong de len */
  .w-legal { bottom: auto; top: calc(100% - 156px); }
  .w-pad { bottom: 14px; }
}

/* 👥 nhan vat ao (seatghosts.js, 2026-10-22) */
.gh-ctl { display: inline-flex; gap: 6px; align-items: center; }
.gh-tog { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .9); color: var(--muted); box-shadow: 0 4px 14px rgba(80, 60, 140, .18); white-space: nowrap; }
.gh-tog.on { color: #6b4fe0; background: #efe9ff; }
.gh-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(80, 60, 140, .18); }
.gh-seg button { width: 30px; height: 28px; border-radius: 999px; font-weight: 800; color: var(--muted); }
.gh-seg button.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.re-head .gh-tog, .re-head .gh-seg { box-shadow: none; background: #f3eefd; }

/* ---- sua loi giao dien 2026-10-24 ---- */
#rotate-hint { z-index: 1000; }                             /* man "xoay ngang" phu len MOI popup (truoc: hop doi vang hien de len) */
@media (pointer: coarse) {                                  /* vung cham >= ~40px cho nut nho trong shop / DM (giu kich thuoc nhin thay) */
  .sf-acts i { position: relative; }
  .sf-ti-x::after, .sf-ti-buy::after, .sf-acts i::after, .dm-more::after { content: ""; position: absolute; inset: -8px; }
}
@media (max-height: 460px) {                                /* dien thoai ngang: hop chi tiet / doi vang khong bi cat nut duoi */
  .nt-detail-back { padding: 8px; }
  .nt-detail { max-height: calc(100vh - 16px); padding: 12px 16px; gap: 6px; }
  .nt-dacts { position: sticky; bottom: -12px; margin: 0 -16px -12px; padding: 8px 16px; background: #fff; }
  .ex-inp { font-size: 16px; }
  .ex-out { padding: 6px; font-size: 16px; }
}
.mkd-back { position: absolute; left: var(--gap, 12px); top: calc((var(--top-h) - 38px) / 2); z-index: 3; pointer-events: auto; }   /* ban trang diem: Quay lai goc tren trai (thay cho logo) */
.creator.desk-open:not(.studio) .logo { visibility: hidden; }
.creator.studio .mkd-back { display: none; }                /* che do studio da co nut Quay lai cua man */
.sf.trying .sf-gp-back { pointer-events: auto; }           /* bang tang qua mo khi dang thu phong: van bam / go duoc (2026-10-24 – truoc bi ke thua pointer-events none) */
/* phong thu shop (2026-10-24): thanh chinh noi that + thanh xem nam GON trong cot trai – truoc tran sang cot shop (dien thoai: de nut Quay lai / tab Thoi trang) */
.sf .try-view, .sf .try-bar { max-width: calc(100% - min(560px, 56vw) - 36px); }
.sf .try-bar { top: auto; bottom: 132px; left: 12px; transform: none; justify-content: flex-start; }
@media (max-height: 560px) { .sf .try-bar { bottom: 96px; } .sf .try-view { top: 56px; } .sf .try-view .gh-tog, .sf .try-view button { padding: 5px 9px; font-size: 12px; } }
.world.space-open > .vip-ov, .world.space-open > .lg-ov, .world.space-open > .pc-ov, .world.space-open > .av-ov, .world.space-open > .dm-ov { visibility: visible !important; z-index: 14; }   /* mo tu trong shop: khong bi an */
/* ---- bo loc hang + nhan NEW (goodsfilter.js, 2026-10-24) ---- */
.sf-filter:empty, .ci-filter:empty { display: none; }
.gf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.gf-chip { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); background: #f5f1fd; border: 1px solid transparent; }
.gf-chip.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.gf-chip.gf-ap.on { background: linear-gradient(90deg, #ff6b8b, #ff9a6b); }
.gf-chip.gf-vip.on { background: linear-gradient(90deg, #f2b200, #ffcf4d); }
.gf-chip.gf-fresh:not(.on) { color: #e0457b; }
.gf-q { flex: 1 1 100%; min-width: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; color: var(--text); }   /* o tim theo ten (2026-10-27): hang rieng; 14px+ de iOS khong tu phong to */
.gf-q:focus { outline: none; border-color: var(--accent); }
@media (pointer: coarse) { .gf-q { font-size: 16px; } }   /* iOS: duoi 16px se tu phong to khi go */
.gf-sort { margin-left: auto; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--text); }
@media (max-height: 560px) { .gf-bar { gap: 4px; margin-bottom: 6px; } .gf-chip { padding: 3px 9px; font-size: 11px; } .gf-sort { font-size: 11px; padding: 3px 6px; } }
.new-badge { position: absolute; top: 4px; right: 6px; z-index: 1; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .05em; line-height: 1.5;
  color: #fff; background: linear-gradient(90deg, #ff4f8b, #ff8a4c); box-shadow: 0 2px 6px rgba(255, 79, 139, .35); }
.item-card .thumb .new-badge ~ .rt-badge { top: 24px; }     /* co ca NEW + nhan: xep doc */
.item-card.locked .thumb img, .item-card.locked .thumb > span:first-child { filter: grayscale(.6); opacity: .65; }
/* ---- dong tac nhan vat (actionbar.js / Tu do › Dong tac, 2026-10-24) ---- */
.ab-pop { position: absolute; right: 86px; top: 50%; transform: translateY(-50%); z-index: 11; width: min(340px, calc(100vw - 120px)); padding: 12px;
  border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 44px rgba(60, 40, 120, .28); display: grid; gap: 10px; }
.ab-pop[hidden] { display: none; }
.ab-head { display: flex; align-items: center; gap: 6px; }
.ab-head b { flex: 1; font-size: 15px; }
.ab-stop, .ab-edit { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #f3eefd; color: var(--text); }
.ab-stop:not(:disabled) { color: #fff; background: linear-gradient(90deg, #ff6b8b, #ff9a6b); }
.ab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ab-slot { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 62px; padding: 6px 4px; border-radius: 14px;
  background: linear-gradient(160deg, #fff, #f3edff); border: 1.5px solid #ece4fb; }
.ab-slot.vacant { border-style: dashed; color: var(--muted); opacity: .8; }
.ab-slot.on { border-color: transparent; background: linear-gradient(135deg, #ffd1e6, #e6dcff); box-shadow: 0 0 0 2px var(--accent) inset; }
.ab-slot .ab-ic { font-size: 22px; line-height: 1; }
.ab-ic .act-img { width: 28px; height: 28px; object-fit: cover; border-radius: 7px; display: block; }   /* anh dong tac (2026-10-26) */
.ab-slot.mini .ab-ic .act-img { width: 20px; height: 20px; border-radius: 5px; }
.act-card .thumb .act-img { width: 100%; height: 100%; object-fit: cover; }
.ab-slot .ab-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; color: var(--muted); }
.ab-slot .ab-n { position: absolute; top: 3px; left: 6px; font-style: normal; font-size: 9px; font-weight: 900; color: #b9a8e6; }
.ab-hint { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.ab-row { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: #faf7ff; }
.ab-row-t { color: var(--muted); font-size: 11px; font-weight: 700; }
.ab-row-slots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.ab-slot.mini { min-height: 40px; padding: 2px; border-radius: 10px; }
.ab-slot.mini .ab-ic { font-size: 16px; }
.ab-slot.sel { box-shadow: 0 0 0 2px var(--accent) inset; background: #fff; }
.ab-slot .ab-x { position: absolute; top: -5px; right: -4px; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; line-height: 16px; color: #fff; background: #e0577a; }
.act-card { position: relative; }
.act-card .thumb > span:first-child { font-size: 34px; }
.act-card.pv { box-shadow: 0 0 0 2px var(--accent-2) inset; }
.act-eq { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 3px 8px rgba(120, 80, 220, .3); z-index: 2; }
.act-eq.on { background: #c9bde6; }
.pc-join { margin-top: 6px; }
@media (max-width: 760px), (max-height: 460px) {
  .ab-pop { right: 70px; width: min(300px, calc(100vw - 96px)); padding: 10px; gap: 8px; }
  .ab-slot { min-height: 50px; }
  .ab-row-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (pointer: coarse) { .ab-slot .ab-x::after, .act-eq::after { content: ""; position: absolute; inset: -8px; } }
/* cham ngoi / cho pose kieu handle IMVU (2026-10-24): nhan ten khi re chuot */
.sd-tip { position: absolute; z-index: 9; pointer-events: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  color: #5b3fa8; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(60, 40, 120, .2); }
.sd-tip[hidden] { display: none; }
.re-sub { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; color: #7a5ad8; }
.ab-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: #f3eefd; }
.ab-tabs button { flex: 1; padding: 5px 4px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.ab-tabs button.on { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ab-grid { grid-template-columns: repeat(5, 1fr); }
.ab-row-slots { grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (max-width: 760px), (max-height: 460px) { .ab-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; } .ab-row-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ab-tabs button { font-size: 11px; } }

/* dang mac dinh (2026-10-24): ★ tren the dong tac (Tu do › Dong tac) + o thanh dong tac */
.act-def { position: absolute; top: 6px; left: 36px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px;
  color: #b9a9d9; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(120, 80, 220, .2); z-index: 2; cursor: pointer; }
.act-def.on { color: #fff; background: linear-gradient(135deg, #ffb340, #ff7aa8); }
.act-isdef { background: linear-gradient(135deg, #ffb340, #ff7aa8) !important; color: #fff !important; }
.act-defrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-slot .ab-def { position: absolute; right: 4px; bottom: 2px; color: #ff9a3c; font-size: 12px; }
@media (pointer: coarse) { .act-def::after { content: ""; position: absolute; inset: -8px; } }

/* nut Thu o day shop (2026-10-24): nho hon nut Mua, dung truoc */
.sf-foot button.sf-try { min-width: 96px; margin-left: auto; }
.sf-foot button.sf-try + button { margin-left: 0; }
@media (max-height: 560px), (max-width: 760px) { .sf-foot button.sf-try { min-width: 70px; padding-left: 10px; padding-right: 10px; } }

/* khay do thu: mon dang xem (chua giu) – vien net dut (2026-10-24) */
.sf-ti.peek .sf-ti-th { outline: 2px dashed var(--accent, #9b7cff); outline-offset: -2px; }

/* the AP o Thong tin nhan vat (2026-10-24) */
.ci-ap .ci-ap-badge { font-size: 11px; padding: 2px 9px; }
.ci-ap .ci-ap-badge.off { filter: grayscale(1); opacity: .55; }

/* pose ngan / dai (2026-10-24) */
.pl-sec { display: block; margin: 10px 2px 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.re-lens { margin-bottom: 6px; }
.re-grid > .re-lens { grid-column: 1 / -1; }
.pl-tabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.pl-tabs button { flex: 1; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--line); background: #faf8ff; font-weight: 700; font-size: 13px; }
.pl-tabs button.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Mon bo phan (2026-10-25): 3 nhom trigger Size / Huong / Scum trong tab Trigger cua thanh dong tac */
.ab-bp { margin-top: 10px; }
.ab-bp-t { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.ab-bp-g { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-bp-b { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #f3eefd; color: var(--text); }
.ab-bp-b.on { background: linear-gradient(135deg, #ffd1e6, #e6dcff); box-shadow: 0 0 0 2px var(--accent) inset; }
@media (max-width: 760px), (max-height: 460px) { .ab-bp-b { padding: 5px 8px; font-size: 11px; } }

/* Shop che do tang (the thong tin › Tang qua, 2026-10-26) */
.sf-giftfor { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border-radius: 12px; background: linear-gradient(90deg, #ffe3f1, #efe6ff); color: #6b3d8f; font-weight: 600; font-size: 13px; }
.sf-giftfor button { border: 0; border-radius: 999px; padding: 4px 12px; background: #fff; color: #8a4fb8; cursor: pointer; font-weight: 600; }

/* Bang ten tren dau (2026-10-26): [VIP] mau VIP truoc ten + so cap canh icon Tai san / Quyen ru */
.w-plate .pt-row { display: inline-flex; align-items: center; gap: 5px; }
.w-plate .pl-vip { font-style: normal; font-weight: 900; font-size: .7em; letter-spacing: .6px; line-height: 1; padding: 2px 5px;
  border-radius: 5px; color: #fff; box-shadow: 0 0 4px var(--vc), inset 0 0 0 1px rgba(255, 255, 255, .5);
  text-shadow: -1px -1px 0 rgba(40, 20, 0, .55), 1px -1px 0 rgba(40, 20, 0, .55), -1px 1px 0 rgba(40, 20, 0, .55), 1px 1px 0 rgba(40, 20, 0, .55); }
.w-plate .pl-lvb { margin-right: 4px; }
.w-plate .pl-lvn { font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; margin-left: 1px; color: #fff;
  text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55); }
.w-plate .pl-lvb.pb-b3 .pl-lvn, .w-plate .pl-lvb.pb-b4 .pl-lvn { color: #ffe9a8; }
.w-plate .pl-lvb.pb-b5 .pl-lvn { color: #ffe27a; }

/* Thong tin > Doi mat khau (2026-10-26) */
.ci-pw-row { display: grid; gap: 6px; }
.ci-pw-row input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid #e3d9f5; background: #fff; font: inherit; }
.ci-pw-btn { margin-top: 8px; }

.ci-pw { flex: none; }
.ci-pw-open { width: 100%; padding: 10px 14px; border-radius: 16px; border: 1px solid #e3d9f5; background: #fff; color: #6a5a8a; font: inherit; font-weight: 700; cursor: pointer; text-align: left; box-shadow: none; }
.ci-pw-open:hover { background: #f8f4ff; }
.ci-pw-open.on { background: #f3edff; border-color: #c9b6f2; }
.ci-pw-form { margin-top: 8px; }
.ci-pw-form[hidden] { display: none; }

/* Hop thoai doi mat khau (2026-10-26) */
.ci-pw-dlg { width: min(360px, 92vw); }
.ci-pw-dlg .ci-pw-row { margin: 8px 0 2px; }
.dlg .ci-pw-err, .ci-pw-err { min-height: 18px; margin: 4px 0 0; color: #e0457b !important; font-size: 13px; font-weight: 600; }

/* Man loading toan man (loadscreen.js, 2026-10-26): logo giua, thanh tien do o day, "Loading..<n>%" tren thanh */
.ld-screen { position: fixed; inset: 0; z-index: 9000; display: none; opacity: 1; transition: opacity .35s ease; }
.ld-screen.on { display: block; }
.ld-screen.out { opacity: 0; }
.ld-bg { position: absolute; inset: 0; background:
  radial-gradient(1200px 700px at 20% 15%, #ffd9ec 0%, transparent 60%),
  radial-gradient(1000px 800px at 85% 80%, #d9e4ff 0%, transparent 60%),
  linear-gradient(160deg, #f6ecff 0%, #fde8f3 50%, #e8f0ff 100%); }
.ld-logo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(320px, 55vw); height: auto;
  filter: drop-shadow(0 10px 30px rgba(150, 100, 200, .35)); animation: ldFloat 3s ease-in-out infinite; }
@keyframes ldFloat { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
.ld-foot { position: absolute; left: 50%; bottom: max(28px, 5vh); transform: translateX(-50%); width: min(720px, 86vw); display: grid; gap: 8px; justify-items: center; }
.ld-label { font-weight: 800; font-size: 15px; letter-spacing: .5px; color: #7a5aa8; font-variant-numeric: tabular-nums; }
.ld-track { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(160, 130, 220, .35); overflow: hidden; }
.ld-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #b48cff, #ff8fc8); box-shadow: 0 0 10px rgba(255, 143, 200, .7); }
.ld-tip { color: #9a8ab8; font-size: 12px; text-align: center; }

/* Bang ten NGUOI KHAC (2026-10-26, 30 nguoi/map): bo filter drop-shadow (ve lai dat moi khung) – chi giu text-shadow */
.w-oplate .pl-icons img, .w-oplate .pbi img, .w-oplate .pl-name[class*="nc-"] { filter: none !important; }
.w-oplate .pbi.pb-b4 img, .w-oplate .pbi.pb-b5 img { animation: none !important; }

/* Mat khau phong (2026-10-26) */
.rm-tag.pass { background: #fff1d6; color: #b07a12; }
.rm-pass { display: flex; gap: 6px; align-items: center; }
.rm-pass .rm-input { flex: 1; min-width: 0; }
.rm-pass-clr.on { background: #ffe1ea; color: #d23a6a; }
.dlg .dlg-input { width: 100%; box-sizing: border-box; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid #e3d9f5; font: inherit; }

/* Phong mac dinh khong xoa duoc (2026-10-26) */
.rm-keep { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted, #9a8ab8); }

/* hang icon (Cua hang, Phong, Trang tri, Pose, Dong tac, Moi ban): HANG NGANG ngay duoi hang ☰ – MOI thiet bi (nguoi dung 2026-10-26;
   truoc la cot doc). Dien thoai thu nho them o khoi ben duoi. */
.w-rcol { flex-direction: row; top: 70px; right: 14px; gap: 10px; transform: none; align-items: flex-start; }
@media (max-height: 560px) { .w-rcol { top: 54px; gap: 8px; } }

/* ================================================ BO CUC DIEN THOAI (2026-10-26, nguoi dung: nut qua to, cot doc vuong, ban phim day man)
   Chi man cam ung (pointer: coarse) – may tinh giu nguyen. Dat CUOI file de de len cac quy tac cu. */
@media (pointer: coarse) {
  /* 1) hang icon (Cua hang, Phong, Trang tri, Pose, Dong tac, Moi ban): NGANG ngay duoi hang ☰ ⚙️ 📷, hien khi mo ☰ */
  .w-tools { top: 10px; right: 10px; gap: 6px; }
  .w-tools button.tool, .w-tools .tool.icon, .w-tools .w-menu { width: 36px; height: 36px; }
  .w-tools .tool.icon img, .w-tools .w-menu img { width: 26px; height: 26px; }
  .w-tools .seg-tool, .w-tools .lang-switch.tool { height: 36px; }
  .w-rcol { flex-direction: row; top: 52px; right: 10px; gap: 6px; transform: none; align-items: flex-start; }
  .w-rcol .w-bag { width: 36px; height: 36px; }
  .w-rcol .w-icon img { width: 30px; height: 30px; }
  .w-rcol .ic-cap { font-size: 9px; margin-top: 1px; }
  @keyframes tpDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* 2) can di chuyen + nut dieu khien ~70% */
  .w-pad { left: 16px; bottom: 30px; width: 92px; height: 92px; }          /* chua cho dong canh bao 18+ ben duoi */
  /* dong "18+ · choi qua 180 phut" (2026-10-26, nguoi dung): xuong DAY man, ngay duoi can di chuyen (truoc nam phia tren can) */
  .w-legal { top: auto; bottom: 4px; left: 12px; padding: 2px 6px 2px 2px; font-size: 10px; }
  .w-legal .age-badge { height: 16px; min-width: 24px; font-size: 9px; }
  .w-pad i { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  /* nut Nhay to o goc, 3 nut nho xep THANG LEN phia tren (truoc: vong cung sang trai -> de nhom nut canh o chat) */
  .w-acts { right: 12px; bottom: 12px; width: 56px; height: 200px; }
  .w-acts .act { width: 38px; height: 38px; }
  .w-acts .act svg { width: 18px; height: 18px; }
  .w-acts .act.big { width: 56px; height: 56px; right: 0; bottom: 0; }
  .w-acts .act.big svg { width: 24px; height: 24px; }
  .w-acts #w-leap { right: 9px; bottom: 66px; }
  .w-acts #w-sprint { right: 9px; bottom: 112px; }
  .w-acts #w-walk { right: 9px; bottom: 158px; }

  /* 3) o chat gon + 2 nhom nut mo NGANG sat o chat (khong xo len che nhan vat) */
  .w-chatbar { bottom: 10px; width: min(300px, 30vw); padding: 4px; border-radius: 14px; }
  .w-chatbar .ch-form { gap: 3px; }
  .w-chatbar .ch-form input { height: 30px; font-size: 13px; }
  .w-chatbar .ch-toggle, .w-chatbar .ch-emo { width: 30px; height: 30px; font-size: 15px; }
  .w-chatbar .ch-send img { width: 24px; height: 24px; }
  .w-chatbar .ch-count { display: none; }                      /* o day chi de cham mo; dem ky tu o o noi tren ban phim */
  .w-qsoc { right: calc(100% + 6px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: row; gap: 5px; }
  /* nhom phai 7 nut: 2 hang x 4 (wrap-reverse: hang dau nam DUOI, ngang o chat; hang 2 ngay tren) – khong tran mep / de nut Nhay */
  .w-qcomp { left: calc(100% + 6px); top: auto; bottom: 0; transform: none; gap: 5px; flex-wrap: wrap-reverse; width: calc(34px * 4 + 5px * 3); }
  .w-qcomp .qc-sep { display: none; }
  .w-qsoc .w-bag, .w-qcomp .ch-comp, .q-tog { width: 34px; height: 34px; }
  .w-qsoc .w-bag img, .w-qcomp .ch-comp img { width: 26px; height: 26px; }
  .w-qcomp .ba-btn img { width: 22px; height: 22px; }
  .q-tog svg { width: 16px; height: 16px; }
  .q-tog.has-dot::after { width: 9px; height: 9px; }

  /* 4) o nhap chat noi tren ban phim (chat.js openKbd) – o duoi day chi de cham mo */
  .ch-kbd { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: 30%; z-index: 9600;
    display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--card);
    box-shadow: 0 6px 24px rgba(40, 20, 70, .25); }
  .ch-kbd[hidden] { display: none; }
  .ch-kbd input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 0; outline: none; font: inherit;
    font-size: 16px; background: #fff; box-shadow: 0 0 0 2px var(--accent); }    /* 16px: iOS khong tu phong to */
  .ch-kbd .ch-count { font-size: 11px; color: #a48cc4; min-width: 34px; text-align: right; }
  .ch-kbd button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; }
  .ch-kbd button img { width: 28px; height: 28px; }
}

/* ================================================ che do chup (2026-10-26): xoay doc + chup anh */
/* nut che do chup (xoay / chup / thoat) DUOI DAY giua man (2026-10-26, nguoi dung: dang o tren, chuyen xuong bottom) */
.w-photo-bar { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; gap: 14px; align-items: center; }
.w-photo-bar .w-photo-exit { position: static; }
.w-photo-btn { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); }
.w-photo-btn[hidden] { display: none; }
.w-photo-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w-photo-btn.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.w-photo-btn.on svg { stroke: #fff; }
.w-photo-btn.shot { width: 56px; height: 56px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.w-photo-btn.shot svg { width: 28px; height: 28px; stroke: #fff; }
@media (max-height: 560px) { .w-photo-bar { bottom: max(10px, env(safe-area-inset-bottom)); gap: 12px; } .w-photo-btn { width: 40px; height: 40px; } .w-photo-btn.shot { width: 48px; height: 48px; } }
/* khung anh doc 9:16 (man van ngang: iPhone / may tinh) – ngoai khung toi; cam may doc that thi khong can khung */
.w-photo-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 92%; aspect-ratio: 9 / 16; z-index: 15; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(30, 20, 50, .45); }
.w-photo-frame[hidden] { display: none; }
@media (orientation: portrait) { .w-photo-frame { display: none !important; } }
/* dang chup anh doc: cho cam may doc that (khong hien lop "hay xoay ngang") */
body.photo-portrait #rotate-hint { display: none !important; }
.photo-flash { position: fixed; inset: 0; z-index: 9800; background: #fff; pointer-events: none; animation: phFlash .35s ease-out forwards; }
@keyframes phFlash { from { opacity: .85; } to { opacity: 0; } }

/* ================================================ SHOP / TU DO / THONG TIN TREN DIEN THOAI (2026-10-26, nguoi dung: list san pham
   qua nho, tab chiem nhieu cho): panel rong hon (them cot), tieu de + tab + loc gon lai, an dong goi y cuoi shop khi chua chon mon
   (con nut Mua thi giu), the san pham / nut tim-qua / o slot nho hon. Chi ap cho cam ung + man thap (dien thoai xoay ngang). */
@media (pointer: coarse) and (max-height: 560px) {
  .ss { padding: 6px; gap: 6px; grid-template-columns: minmax(0, 1fr) min(460px, 50vw); }   /* 2026-10-31: 66vw -> 50vw, nhan vat rong hon */
  .ss-panel { padding: 6px 8px; gap: 4px; }
  .ss-head { gap: 6px; min-height: 22px; }
  .ss-head b { font-size: 13px; }
  .ss-wallet { gap: 4px; }
  .ss-wallet .cur { padding: 1px 7px; font-size: 11px; }
  .ss-tabs { padding: 2px; gap: 2px; border-radius: 10px; }
  .ss-tabs button { font-size: 11px; padding: 3px 6px; border-radius: 8px; }
  .sf-kinds:empty { display: none; }
  .sf-filter { min-height: 0; }
  .sf-filter .gf-chip { padding: 1px 8px; font-size: 11px; min-height: 20px; }
  .sf-filter .gf-sort { height: 22px; font-size: 11px; padding: 0 6px; }
  .sf-filter .gf-q, .ci-filter .gf-q { flex: 1 1 110px; height: 24px; padding: 0 10px; }   /* dien thoai ngang: o tim chung hang chip */
  .sf .sf-grid, .ci-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }
  .item-card { padding: 3px; border-radius: 12px; gap: 0; }
  .item-card .thumb { border-radius: 9px; }
  .item-card .nm { font-size: 11px; }
  .item-card small { font-size: 9px; }
  .item-card .pr-tag, .sf-card .pr-tag { font-size: 9px; padding: 0 4px; bottom: 2px; }
  .sf-acts { gap: 3px; }
  .sf-acts i { width: 20px; height: 20px; font-size: 11px; }
  .sf-foot { min-height: 0; padding-top: 4px; }
  .sf-foot:not(:has(button)) { display: none; }
  .sf-foot .sf-hint { display: none; }
  .sf-foot button { min-width: 96px; padding: 5px 10px; font-size: 12px; }
  .ci { padding: 6px; gap: 6px; grid-template-columns: minmax(0, 1fr) min(400px, 48vw); }
  .ci-right { padding: 6px 8px; gap: 4px; }
  .ci-rhead { min-height: 0; }
  .ci-rhead b { font-size: 13px; }
  .ci-gender button { height: 22px; width: 28px; font-size: 12px; }
  .ci-rhead .ci-studio { font-size: 10px; padding: 2px 7px; }
  .ci-tabs { padding: 2px; gap: 2px; border-radius: 10px; }
  .ci-tabs button { padding: 3px 7px; font-size: 11px; border-radius: 8px; }
  .ci-foot button { padding: 5px; font-size: 12px; border-radius: 11px; }
  .ci-stage { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .ci-slot, .ci-col .ci-slot, .ci-comp .ci-slot { min-height: 32px; padding: 2px; }
  .ci-slot img { width: 26px; height: 26px; }
  .ci-slot .ic { font-size: 15px; line-height: 26px; height: 26px; }
  .ci-comp { width: 38px; }
  .ci-id { padding: 4px 8px; }
  .ci-av { width: 34px; height: 34px; }
  .ci-row { min-height: 22px; padding: 1px 4px; }
  .ci-row dt { font-size: 10px; }
  .ci-row dd { font-size: 11px; }
}

/* ================================================ NUT DI CHUYEN THU GON (2026-10-26, nguoi dung): mobile chi con nut ▲ goc phai duoi,
   bam mo -> cot Nhay / Khinh cong / Chay / Di bo hien phia tren. PC: an nut ▲, giu nguyen. */
.act-tg { display: none; }
@media (pointer: coarse) {
  .w-acts { width: 56px; height: 210px; pointer-events: none; }
  .w-acts .act[hidden] { display: none !important; }        /* nut Di bo cu (world.js an) – CSS display: grid dang de len [hidden] */
  .w-acts > * { pointer-events: auto; }
  .w-acts .act-tg { display: grid; place-items: center; position: absolute; right: 8px; bottom: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%;
    color: var(--accent); background: rgba(255, 255, 255, .88); border: 1.5px solid rgba(165, 139, 255, .45); box-shadow: var(--shadow); }
  .w-acts .act-tg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .w-acts.open .act-tg svg { transform: rotate(180deg); }
  .w-acts:not(.open) .act { display: none; }
  .w-acts .act.big { right: 0; bottom: 50px; }
  .w-acts #w-leap { bottom: 114px; }
  .w-acts #w-sprint { bottom: 160px; }
}

/* ================================================ BANG DONG TAC SAT MEP PHAI (2026-10-27, nguoi dung: tren mobile chiem cho): cot nut doc
   ben phai da thanh hang ngang -> bo khoang trong 70-86px. Mobile: sat mep, dat tren nut ▲ goc duoi (khong de hang icon), o gon. */
.ab-pop { right: 16px; }
@media (pointer: coarse) {
  .ab-pop { right: 8px; top: auto; bottom: 60px; transform: none; width: min(272px, calc(100vw - 24px)); max-height: calc(100% - 150px);
    overflow-y: auto; padding: 8px; gap: 6px; }
  .ab-head b { font-size: 13px; }
  .ab-stop, .ab-edit { padding: 3px 8px; font-size: 11px; }
  .ab-tabs button { padding: 3px 4px; font-size: 10px; }
  .ab-grid { gap: 5px; }
  .ab-slot { min-height: 40px; padding: 3px 2px; border-radius: 11px; }
  .ab-hint { font-size: 10px; }
}

/* ================================================ MENU 3 HANG + NUT DONG TAC LUON HIEN (2026-10-27, nguoi dung: hang dau qua dai; dong tac
   cho vao trong cung, khong an theo menu). Hang 1: toan man / thoat ket / chup / cai dat / ☰. Hang 2: icon (Cua hang ... Moi ban,
   Dong tac SAT MEP PHAI). Hang 3: 2.5D|3D + VI|EN (chi khi mo ☰). Menu dong: hang 2 chi con nut Dong tac. */
.w-rcol #w-act { order: 99; }
.world:not(:has(.w-tools.open)) .w-rcol { display: flex; }
.world:not(:has(.w-tools.open)) .w-rcol > :not(#w-act):not(#w-poses) { display: none; }   /* nut Pose trong phong cung khong an theo menu (2026-10-31) */
.w-tools .w-toolpop #w-lock, .w-tools .w-toolpop .lang-switch { position: absolute; top: 130px; }
.w-tools .w-toolpop .lang-switch { right: 0; }
.w-tools .w-toolpop #w-lock { right: 82px; }
@media (max-height: 560px) { .w-tools .w-toolpop #w-lock, .w-tools .w-toolpop .lang-switch { top: 98px; } }
@media (pointer: coarse) { .w-tools .w-toolpop #w-lock, .w-tools .w-toolpop .lang-switch { top: 98px; } }

/* ================================================ (2026-10-27, nguoi dung) nut Dong tac PC qua to; nut Nhay mobile qua to; o chat ban phim */
@media (pointer: fine) {
  .w-rcol .w-bag { width: 40px; height: 40px; }
  .w-rcol .w-icon img { width: 34px; height: 34px; }
  .w-rcol .ic-cap { font-size: 10px; }
  .w-tools .w-toolpop #w-lock, .w-tools .w-toolpop .lang-switch { top: 118px; }
}
@media (pointer: fine) and (max-height: 560px) { .w-tools .w-toolpop #w-lock, .w-tools .w-toolpop .lang-switch { top: 98px; } }
@media (pointer: coarse) {
  .w-acts { width: 48px; height: 180px; }
  .w-acts .act-tg { right: 4px; }
  .w-acts .act { width: 34px; height: 34px; }
  .w-acts .act svg { width: 17px; height: 17px; }
  .w-acts .act.big { width: 46px; height: 46px; right: 1px; bottom: 48px; }
  .w-acts .act.big svg { width: 22px; height: 22px; }
  .w-acts #w-leap { right: 7px; bottom: 102px; }
  .w-acts #w-sprint { right: 7px; bottom: 142px; }
  .ch-kbd { transition: top .14s ease-out; }
}

/* khung chat keo ca NGANG (2026-10-27, nguoi dung): tay nam day khung doi chieu cao + chieu rong (pref.w -> --chw), dau ◢ o goc */
.w-chat.has-w:not(.min) { width: var(--chw) !important; }
.ch-grip { cursor: nwse-resize; position: relative; }
.ch-grip::after { content: "◢"; position: absolute; right: 4px; bottom: 1px; font-size: 10px; line-height: 1; color: rgba(255, 255, 255, .85); pointer-events: none; }
/* nut Nhay bang cac nut khac (2026-10-27, nguoi dung) */
@media (pointer: coarse) {
  .w-acts { height: 170px; }
  .w-acts .act.big { width: 34px; height: 34px; right: 7px; bottom: 48px; }
  .w-acts .act.big svg { width: 17px; height: 17px; stroke-width: 2.1; }
  .w-acts #w-leap { bottom: 88px; }
  .w-acts #w-sprint { bottom: 128px; }
}
/* hang 3 (2.5D/3D + VI/EN) bay ra xa roi moi ve (2026-10-27, nguoi dung): animation tpIn co transform tren .w-toolpop -> trong luc
   chay, .w-toolpop thanh khung chua cho 2 nut absolute -> lech cho. Khung chi mo dan (khong transform); hang 3 truot xuong rieng. */
@keyframes tpFade { from { opacity: 0; } to { opacity: 1; } }
.w-tools.open .w-toolpop { animation: tpFade .18s ease-out; }
.w-tools.open .w-toolpop #w-lock, .w-tools.open .w-toolpop .lang-switch { animation: tpDown .18s ease-out; }

/* ================================================ TAB -> O CHON (2026-10-27, nguoi dung: tab Tu do / Cua hang / Dong tac chiem cho; bang
   Dong tac qua to che nhan vat). ui.js tabSelect: nut + popup tu ve dong bo voi hang nut tab. Dien thoai / man thap: an hang nut, hien o chon. */
.tab-row { display: none; }
@media (pointer: coarse), (max-height: 560px) {
  .tab-row:not([hidden]) { display: flex; gap: 6px; align-items: center; min-width: 0; }
  .tab-src { display: none !important; }
  .tab-sel { flex: 1 1 0; min-width: 0; }
  .tab-sel[hidden] { display: none; }
  .tab-sel .tab-sel-btn { display: block; width: 100%; height: 30px; padding: 0 24px 0 12px; text-align: left; white-space: nowrap; overflow: hidden; border-radius: 999px; border: 1px solid #e3dbf5; color: var(--text);
    background: #f6f2fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d6aa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px;
    font: inherit; font-size: 12px; font-weight: 700; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
}
@media (pointer: coarse) {
  .ab-pop { width: min(232px, calc(100vw - 24px)); padding: 6px; gap: 5px; }
  .ab-pop .ab-grid { gap: 4px; }
  .ab-pop .ab-slot { min-height: 34px; padding: 2px; border-radius: 9px; }
  .ab-pop .ab-slot .ab-ic { font-size: 16px; }
  .ab-pop .ab-ic .act-img { width: 20px; height: 20px; }
  .ab-pop .ab-slot .ab-nm { font-size: 8px; }
  .ab-pop .ab-slot .ab-n { font-size: 7px; top: 1px; left: 3px; }
  .ab-pop .ab-hint { display: none; }
  .ab-pop .ab-head b { font-size: 12px; }
}
/* hang nut 2 ben o chat CAN THANG (2026-10-27, nguoi dung: 2 ben lech): mobile – ca 2 nhom canh DAY cung 1 duong (hang duoi = giua o chat),
   cung cach o chat 6px; nhom phai qua 4 nut thi hang thu 2 nam tren, sat phia o chat. */
@media (pointer: coarse) {
  .w-qsoc, .w-qcomp { top: auto; bottom: 6px; transform: none; gap: 5px; }
  .w-qsoc { right: calc(100% + 6px); }
  .w-qcomp { left: calc(100% + 6px); }
}

/* BANG DONG TAC NEO DUOI MENU, 3 COT (2026-10-27, nguoi dung): top / right dat bang JS (actionbar.place), cuon neu thap */
.ab-pop { bottom: auto !important; transform: none !important; width: 214px; max-height: calc(100% - var(--ab-top, 140px) - 70px); overflow-y: auto; }
.ab-pop .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ab-pop .ab-row-slots { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (pointer: coarse) { .ab-pop { width: 168px; } }
/* dau bang gon + o co theo cot + tab dang chon o moi thiet bi (2026-10-27) */
.ab-head { gap: 4px; }
.ab-head b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ab-stop, .ab-edit { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; font-size: 13px; flex: none; }
.ab-pop .ab-slot { min-width: 0; overflow: hidden; }
.ab-pop .tab-row:not([hidden]) { display: flex; }
.ab-pop .tab-src { display: none !important; }
.ab-pop .tab-sel { flex: 1 1 0; min-width: 0; }
.ab-pop .tab-sel .tab-sel-btn { display: block; width: 100%; height: 30px; padding: 0 24px 0 12px; text-align: left; white-space: nowrap; overflow: hidden; border-radius: 999px; border: 1px solid #e3dbf5; color: var(--text);
  background: #f6f2fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d6aa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px;
  font: inherit; font-size: 12px; font-weight: 700; -webkit-appearance: none; appearance: none; }
.ab-pop .ab-hint { font-size: 11px; }
/* bang dong tac: bo tieu de, dem rong hon, ICON TO – TEN NHO (2026-10-27, nguoi dung: nhin ro icon hon ten) */
.ab-pop { padding: 12px; gap: 8px; width: 226px; }
.ab-pop .tab-row { gap: 5px; }
.ab-pop .ab-grid { gap: 7px; }
.ab-pop .ab-slot { min-height: 66px; padding: 6px 3px 4px; gap: 3px; border-radius: 13px; }
.ab-pop .ab-slot .ab-ic { font-size: 30px; line-height: 1; }
.ab-pop .ab-ic .act-img { width: 38px; height: 38px; border-radius: 9px; }
.ab-pop .ab-slot .ab-nm { font-size: 9px; font-weight: 600; line-height: 1.15; }
.ab-pop .ab-slot .ab-n { font-size: 8px; top: 3px; left: 5px; }
@media (pointer: coarse) {
  .ab-pop { padding: 10px; gap: 7px; width: 186px; }
  .ab-pop .ab-grid { gap: 6px; }
  .ab-pop .ab-slot { min-height: 54px; padding: 5px 2px 3px; border-radius: 11px; }
  .ab-pop .ab-slot .ab-ic { font-size: 25px; }
  .ab-pop .ab-ic .act-img { width: 32px; height: 32px; border-radius: 8px; }
  .ab-pop .ab-slot .ab-nm { font-size: 8px; }
  .ab-pop .ab-slot .ab-n { font-size: 7px; top: 2px; left: 4px; }
}
/* bang dong tac: CHI LUOI O CUON, hang chon kieu mua + ⏹ ✎ dung yen (2026-10-27, nguoi dung) */
.ab-pop { display: flex; flex-direction: column; overflow: hidden !important; }
.ab-pop > :not(.ab-grid) { flex: none; }
.ab-pop > .ab-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; touch-action: pan-y; }
/* the dong tac trong Tu do (o nho tren dien thoai): − va ★ xep DOC o mep trai, nho lai; nhan o / mac dinh nho (2026-10-27, nguoi dung: icon,
   nhan chong cheo) */
@media (pointer: coarse), (max-height: 560px) {
  .act-card .act-eq, .act-card .act-def { width: 20px; height: 20px; font-size: 11px; left: 4px; }
  .act-card .act-eq { top: 4px; }
  .act-card .act-def { top: 28px; }
  .act-card .thumb .pr-tag { font-size: 8px; padding: 0 4px; line-height: 1.6; }
  .act-card .thumb > span:first-child { font-size: 26px; }
}
/* CAN MEP TRAI + NUT NEN CHAT (2026-10-27, nguoi dung: hang phong sat trai; icon an / hien nen chat lech): the nhan vat, hang ten phong,
   khung chat cung cach mep 14px; ◑ va ♡ trang tri cung cach vien 8px, cung do cao, cung co 18px. */
.w-place { left: 14px !important; }
.w-chat { left: 14px !important; }
.w-chat .ch-bg { top: 6px !important; left: 8px !important; bottom: auto !important; right: auto !important; width: 18px !important; height: 18px !important; border-radius: 6px; }
.w-chat .ch-bg svg { width: 12px !important; height: 12px !important; }
.w-chat:not(.no-bg)::before { top: 6px; right: 8px; width: 18px; height: 18px; line-height: 18px; text-align: center; }
/* (2026-10-27q, nguoi dung) can nut di chuyen + o sap xep dong tac + nut nen chat */
@media (pointer: coarse) {
  .w-pad { left: calc(26px + env(safe-area-inset-left, 0px)); bottom: 34px; }   /* can gat cach mep (iPhone ngang: cong them tai tho) */
  .w-legal { left: calc(14px + env(safe-area-inset-left, 0px)) !important; }
}
.w-card { left: calc(14px + env(safe-area-inset-left, 0px)) !important; }
.w-place { left: calc(14px + env(safe-area-inset-left, 0px)) !important; }
.w-chat { left: calc(14px + env(safe-area-inset-left, 0px)) !important; }
/* o sap xep dong tac (Tu do): o gian DAY cot, cao deu */
.ab-row .ab-row-slots { align-items: stretch; }
.ab-row .ab-slot.mini { width: 100%; min-width: 0; min-height: 42px; justify-self: stretch; }
.ab-row .ab-slot.mini .ab-x { top: -4px; right: -4px; }
/* nut ◑: chi icon (bo nen vuong) – doi xung voi ♡ */
.w-chat .ch-bg, .w-chat:not(.no-bg) .ch-bg { background: none !important; box-shadow: none !important; }
.w-chat.no-bg .ch-bg { background: rgba(40, 34, 64, .35) !important; border-radius: 50%; }

/* Xem anh dai dien phong to (2026-10-28): avatarcrop.js viewAvatar */
.av-ov.av-view { z-index: 30; display: grid; place-items: center; background: rgba(20, 12, 36, .78); }
.av-view-img { width: min(78vmin, 520px); height: min(78vmin, 520px); object-fit: cover; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45); animation: avZoom .18s ease-out; }
.av-view-back { position: absolute; left: 14px; top: 14px; }
@keyframes avZoom { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pc-head .lav.img { cursor: zoom-in; }

/* ================================================ THE MON SHOP KIEU IMVU (2026-10-28, storefront.js card) */
.sf .sf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sf-card { align-items: stretch; gap: 4px; padding: 7px 7px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: center; }
.sf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-card.worn { border-color: #f2b632; box-shadow: 0 4px 14px rgba(242, 182, 50, .28); }
.sf-cname { display: block; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-card .thumb { border-radius: 10px; }
.sf-card .sf-csub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* gia goc phai duoi anh, nhan (NEW / AP / VIP) goc trai duoi */
.sf-card .pr-tag.sf-price { left: auto; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; max-width: calc(100% - 8px);
  padding: 1px 7px 1px 4px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(60, 40, 110, .18); }
.sf-card .pr-tag.sf-price.owned { padding: 1px 7px; background: #e6f8f1; }
.item-card .thumb img.sf-cur { width: 14px; height: 14px; object-fit: contain; flex: none; }
.sf-tags { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 3px; z-index: 1; max-width: 55%; flex-wrap: wrap-reverse; }
.item-card .thumb .sf-tags .new-badge, .item-card .thumb .sf-tags .rt-badge { position: static; }
/* hang cuoi: ♡ 🎁 | Thu Mua */
.sf-crow { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.sf-cicons { display: flex; gap: 2px; min-height: 26px; align-items: center; }
.sf-ic { width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #b9b1cc; }
.sf-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sf-ic.sf-wish svg { fill: currentColor; stroke: none; }
.sf-ic:hover { background: #f3eefe; color: #8f84a8; }
.sf-ic.sf-wish:hover, .sf-ic.sf-wish.on { color: #ef5a86; }
.sf-ic.sf-gift:hover { color: #e39a1c; }
.sf-cbtns { display: flex; gap: 4px; margin-left: auto; }
.sf-cb { height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sf-cb.try { background: #ece7f8; color: #5b4f78; }
.sf-cb.off { background: #fff; color: #5b4f78; border: 1.5px solid #d9d2ea; }
.sf-cb.buy { background: #ffc531; color: #3b2a00; }
.sf-cb.buy:hover { background: #ffb800; }
.sf-cb.dim { background: #f1eef7; color: #9a93ab; }
.sf-cb:disabled { cursor: default; }
@media (max-height: 560px), (pointer: coarse) and (max-height: 700px) {
  .sf .sf-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
  .sf-card { padding: 4px 4px 4px; gap: 2px; border-radius: 11px; }
  .sf-cname { font-size: 11px; }
  .sf-card .sf-csub { font-size: 9px; }
  .sf-card .pr-tag.sf-price { font-size: 9.5px; bottom: 2px; right: 2px; }
  .item-card .thumb img.sf-cur { width: 11px; height: 11px; }
  .sf-tags { left: 2px; bottom: 2px; }
  .sf-ic { width: 22px; height: 22px; }
  .sf-ic svg { width: 16px; height: 16px; }
  .sf-cicons { min-height: 22px; }
  .sf-cb { height: 21px; padding: 0 6px; font-size: 10px; border-radius: 6px; }
}

/* ================================================ CAU TRUC SHOP KIEU IMVU (2026-10-28, storefront.js render / renderTop / renderFilter / khay / Mua ngay) */
.sf .sf-kinds { grid-auto-columns: max-content; justify-content: start; gap: 2px; padding: 3px; }
.sf .sf-kinds button { padding: 6px 11px; font-size: 13px; white-space: nowrap; }
.sf-topr { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -4px 0 -2px; }
.sf-rate { display: inline-flex; padding: 2px; gap: 2px; border-radius: 999px; background: #f1edf9; }
.sf-rate button { height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--muted); background: transparent; }
.sf-rate button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(60, 40, 110, .18); }
.sf-rate.off { opacity: .45; }
.sf-cart { height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #f1edf9; color: var(--muted); }
.sf-cart.has { background: #ffc531; color: #3b2a00; }
.sf-filter { display: flex; flex-direction: column; gap: 6px; }
.sf-frow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sf-flab { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.sf-dd { height: 28px; padding: 0 22px 0 9px; border-radius: 8px; border: 1px solid #e3dbf5; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; min-width: 0; max-width: 150px; }
.sf-frow .gf-q { flex: 1 1 120px; min-width: 90px; height: 28px; margin-left: auto; }
.sf-frow .gf-sort { height: 28px; font-size: 12.5px; }
.sf-frow .gf-fresh { height: 26px; }
.sf-pager { margin-left: auto; display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.sf-pinfo { font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.sf-pg { min-width: 24px; height: 24px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 800; background: #f1edf9; color: #5b4f78; }
.sf-pg.on { background: #ffc531; color: #3b2a00; }
.sf-pg:disabled { opacity: .35; }
.sf-pgdot { font-style: normal; color: var(--muted); font-size: 12px; }
/* khay do thu: dai anh + hang Hoan tac / Tong / Mua */
.sf-tray { flex-direction: column; align-items: stretch; gap: 6px; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: 760px; padding: 8px 10px; }
.sf-tray-strip { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sf-tray-nav { flex: none; width: 22px; height: 48px; padding: 0; border-radius: 8px; font-size: 18px; font-weight: 800; color: var(--muted); background: #f3eff9; }
.sf-tray .sf-tray-list { flex: 1; gap: 8px; scrollbar-width: none; padding: 8px 6px 2px; margin: -8px 0 -2px; }
.sf-tray .sf-tray-list::-webkit-scrollbar { display: none; }
.sf-tray .sf-ti { width: auto; opacity: .7; }
.sf-tray .sf-ti.on { opacity: 1; }
.sf-tray .sf-ti-th { width: 52px; height: 52px; border-radius: 8px; }
.sf-tray-foot { display: flex; align-items: center; gap: 10px; }
.sf-undo { white-space: nowrap; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 800; background: #f1edf9; color: #5b4f78; }
.sf-undo:disabled { opacity: .45; }
.sf-tray-n { font-size: 11.5px; color: var(--muted); }
.sf-total { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sf-total small { color: var(--muted); }
.sf-money { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; white-space: nowrap; }
.sf-money .sf-cur, img.sf-cur { width: 15px; height: 15px; object-fit: contain; }
.sf-money .sf-cur:not(:first-child) { margin-left: 6px; }
.sf-traybuy { height: 30px; padding: 0 16px; font-size: 13px; }
/* bang Mua ngay */
.sf-co-back { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(40, 28, 70, .35); }
.sf-co { width: min(560px, 96vw); max-height: min(560px, 92vh); display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: 0 16px 50px rgba(40, 20, 80, .35); overflow: hidden; }
.sf-co-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sf-co-head b { font-size: 16px; }
.sf-co-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; }
.sf-co-h { margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
.sf-co-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 6px; border-radius: 12px; background: #f6f3fc; }
.sf-co-th { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #fff; font-size: 22px; }
.sf-co-th img { width: 100%; height: 100%; object-fit: contain; }
.sf-co-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sf-co-info > b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-co-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.sf-co-acts .sf-cb { height: 24px; font-size: 11px; }
.sf-co-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #faf8fe; }
.sf-co-bal { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.sf-co-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 150px; }
.sf-co-line small { color: var(--muted); text-transform: capitalize; }
.sf-co-line.lack .sf-money { color: #e0577a; }
.sf-co-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sf-co-cost > small { color: var(--muted); font-size: 12px; }
.sf-co-cost > .sf-money { font-size: 17px; }
.sf-co-lack { color: #e0577a; font-weight: 700; }
.sf-co-all { height: 34px; padding: 0 22px; font-size: 14px; border-radius: 9px; }
.world.space-open > #w-store .sf-co-back { visibility: visible; }
@media (max-height: 560px), (pointer: coarse) and (max-height: 700px) {
  .sf .sf-kinds button { padding: 4px 8px; font-size: 11.5px; }
  .sf-topr { margin: 0; }
  .sf-filter { gap: 3px; }
  .sf-frow { gap: 4px; }
  .sf-dd, .sf-frow .gf-q, .sf-frow .gf-sort { height: 24px; font-size: 11px; }
  .sf-pg { min-width: 20px; height: 20px; font-size: 10.5px; }
  .sf-pinfo, .sf-flab { font-size: 10.5px; }
  .sf-tray { padding: 5px 7px; gap: 4px; }
  .sf-tray .sf-ti-th { width: 40px; height: 40px; }
  .sf-tray-nav { height: 40px; width: 18px; }
  .sf-undo, .sf-traybuy { height: 24px; font-size: 11px; padding: 0 9px; }
  .sf-tray-n { display: none; }
  .sf-tray-foot { gap: 6px; }
  .sf-total { font-size: 11.5px; }
  .sf-co { max-height: 96vh; }
  .sf-co-th { width: 38px; height: 38px; }
}

/* ================================================ NGUOI TAO / CREATOR (2026-10-28) */
.sf-card .sf-csub { display: flex; justify-content: center; align-items: baseline; gap: 3px; min-width: 0; }
.sf-by { min-width: 0; padding: 0; background: none; border: 0; font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sf-by.admin { color: #8f84a8; }
.sf-by:hover { color: #7a5cf0; }
.sf-crbar { background: linear-gradient(90deg, #f3edff, #fff4e0); }
.pc-creator { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, #a58bff, #ff8fab); }
.pc-crshop { align-self: flex-start; margin-top: 2px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: #f3edff; color: #6b4fd8; }

/* ================================================ TU DO: THE MON KIEU SHOP (2026-10-28, charinfo.js card) */
.ci-grid.shoplike { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.sf-by.plain { text-decoration: none; cursor: inherit; }
.wd-item .ci-lk { font-size: 13px; background: #f3eff9; border-radius: 8px; }
.wd-item .ci-lk.on { background: #fff4d6; box-shadow: inset 0 0 0 1.5px #f2b632; }
.wd-item.none .thumb { display: grid; place-items: center; font-size: 30px; }
.wd-item.none { justify-content: flex-start; }
@media (max-height: 560px), (pointer: coarse) and (max-height: 700px) {
  .ci-grid.shoplike { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 5px; }
}
.ci[data-mode="wardrobe"] .ci-filter.wd-filter { display: flex; flex-direction: column; gap: 6px; }   /* chi o Tu do – man Thong tin dung chung khung (2026-10-28: bo loc lo ra o Thong tin) */
.ci-filter.wd-filter .sf-frow .gf-q { flex: 1 1 120px; }
@media (max-height: 560px), (pointer: coarse) and (max-height: 700px) { .ci-filter.wd-filter { gap: 3px; } }

/* SHOWROOM (2026-10-28): bang Mua ngay / xem anh mo khi dang thu phong / noi that: bam duoc, khong lot xuong canh 3D */
.sf.trying .sf-co-back, .sf.trying .sf-co-back * { pointer-events: auto; }
.sf-trigs { display: flex; gap: 4px; flex-wrap: wrap; max-width: 46%; }
.sf-trig { padding: 5px 10px; font-size: 12px; }
.sf-trig.on { background: #ffe9a8; }

/* ================================================ BANG PHONG DANG THE KIEU IMVU (2026-10-28, rooms.js roomCard / renderInfo) */
.rm-card { width: min(920px, 96vw); max-height: min(92vh, 760px); }
.rm-tabs { overflow-x: auto; }
.rm-tabs button { white-space: nowrap; }
.rm-content > .sf-pager { justify-content: flex-end; margin: 2px 0 6px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; margin-bottom: 8px; }
.rm-grid > .rm-empty { grid-column: 1 / -1; }
.rm-tile { display: flex; flex-direction: column; gap: 3px; padding: 7px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); min-width: 0; }
.rm-tile.here { border-color: #f2b632; box-shadow: 0 4px 14px rgba(242, 182, 50, .25); }
.rm-ph { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #efe8ff, #ffe9f2) center / cover no-repeat;
  display: grid; place-items: center; cursor: pointer; }
.rm-ph.map { background: linear-gradient(135deg, #e3f4ff, #eaffef); cursor: default; }
.rm-ph-ic { font-size: 34px; opacity: .85; }
.rm-ph.big { cursor: default; }
.rm-ptags { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; }
.rm-ptags .rm-tag, .rm-ptags .rt-badge { font-size: 10px; }
.rm-fav { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 255, 255, .9); color: #b9b1cc; box-shadow: 0 1px 4px rgba(60, 40, 110, .2); }
.rm-fav.on { color: #ef5a86; }
.rm-tname { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.rm-tsub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-by { padding: 0; background: none; border: 0; font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rm-tmeta { display: flex; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.rm-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 3px; }   /* nhieu nut: xuong hang, khong tran the (2026-10-31) */
.rm-tfoot .rm-n { font-size: 12px; font-weight: 800; color: #6b5fa0; white-space: nowrap; }
.rm-tfoot .rm-n.full { color: #e0577a; }
.rm-tbtns { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
.rm-tb { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 800; background: #ece7f8; color: #5b4f78; white-space: nowrap; }
.rm-tb.go { background: #ffc531; color: #3b2a00; }
.rm-tb:disabled { opacity: .5; }
/* trang Thong tin */
.rm-itop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rm-iside { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm-iname { margin: 0; font-size: 19px; }
.rm-idesc { margin: 0; color: var(--text); font-size: 13px; white-space: pre-line; }
.rm-facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.rm-iacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rm-favbtn.on { color: #ef5a86; }
.rm-igo { min-width: 110px; }
.rm-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rm-person { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: #f6f3fc; text-align: left; font-size: 12.5px; font-weight: 700; min-width: 0; }
.rm-person span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* cai dat: anh phong */
.rm-phedit { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 12px; align-items: center; }
.rm-phbtns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rm-phbtns small { color: var(--muted); }
@media (max-height: 560px), (pointer: coarse) and (max-height: 700px) {
  .rm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .rm-tile { padding: 5px; }
  .rm-tname { font-size: 12px; }
  .rm-tb { height: 22px; padding: 0 7px; font-size: 11px; }
  .rm-itop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .rm-phedit { grid-template-columns: minmax(0, 200px) 1fr; }
}

/* Xem anh dai dien cua minh (2026-10-28): bo ✕ / 📷 tren avatar, nut Xoa anh / Thay anh duoi anh phong to */
.av-view-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.av-view-acts { display: flex; gap: 10px; }
.av-view-acts button { min-width: 120px; padding: 9px 16px; border-radius: 12px; font-weight: 800; }
.av-view-acts .av-act-del { color: #e0577a; background: #fff; border-color: #f3c1cf; }
.ci-av-edit { cursor: pointer; }

/* 2026-10-31 dien thoai ngang: bang shop hep (50vw) -> bo nhan "Hien thi / Sap xep / Trang x/N", chi giu ‹ trang dang xem ›, chu "Moi" 1 dong */
@media (pointer: coarse) and (max-height: 560px) {
  .sf-flab, .sf-pinfo, .sf-pgdot { display: none; }
  .sf-pager .sf-pg:not(.on):not(.nav) { display: none; }
  .sf-frow .gf-fresh { white-space: nowrap; flex: none; }
  .sf-dd { max-width: 110px; }
}

/* thu gon thanh chat (2026-10-31, nguoi dung): nut tha xuong tren thanh; gon = chi con icon, phan trong tra lai cho man hinh (bam xuyen) */
.ch-tuck { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 46px; height: 16px; padding: 0; border: 0; border-radius: 10px 10px 0 0;
  display: grid; place-items: center; cursor: pointer; color: var(--accent); background: var(--card); box-shadow: 0 -2px 8px rgba(60, 40, 110, .14); }
.ch-tuck::after { content: ""; position: absolute; inset: -10px -8px 0; }
.ch-tuck svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.w-chatbar.tucked .ch-tuck svg { transform: rotate(180deg); }
.ch-quick { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  place-items: center; cursor: pointer; font-size: 20px; line-height: 1; background: var(--card); box-shadow: var(--shadow); }
.w-chatbar.tucked:not(.quick) { background: none; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.w-chatbar.tucked:not(.quick) > * { pointer-events: auto; }
.w-chatbar.tucked:not(.quick) .ch-form { visibility: hidden; }
.w-chatbar.tucked:not(.quick) .ch-quick { display: grid; }
/* gon = an CA hang duoi (2 cum nut hai ben); nut tha sat day man, icon chat ngay tren nut tha */
.w-chatbar.tucked > .q-group { display: none; }
.w-chatbar.tucked:not(.quick) { bottom: env(safe-area-inset-bottom, 0px); }
.w-chatbar.tucked:not(.quick) .ch-tuck { bottom: -1px; }   /* -1px: bu vien 1px cua thanh */
.w-chatbar.tucked:not(.quick) .ch-quick { bottom: 22px; }
.w-hint { bottom: 82px; }

/* nut Pose sat nut Dong tac (2026-10-31, nguoi dung): truoc bi nut Moi ban chen giua khi mo menu */
.w-rcol #w-poses { order: 98; }

/* bang xoay camera (camctl.js, 2026-10-31, nguoi dung gui anh mau) */
#w-camtog { position: absolute; right: calc(100% + 6px); top: 50%; width: 36px; height: 36px; margin-top: -18px; min-width: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--accent); background: var(--card); box-shadow: var(--shadow); }
#w-camtog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#w-camtog.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.w-cam { position: absolute; right: 14px; top: 178px; z-index: 3; display: flex; align-items: flex-start; gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.w-cam[hidden] { display: none; }
.world.editing .w-cam, .world.space-open .w-cam, .world.shop-open .w-cam { display: none; }
.cam-ring { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; cursor: grab; touch-action: none; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 12%, rgba(255, 255, 255, .5) 13% 100%);
  border: 3px solid var(--accent); box-shadow: var(--shadow); }
.cam-ring:active { cursor: grabbing; }
.cam-mark { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }
.cam-mark::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.cam-arrow { position: absolute; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; touch-action: none; background: none; color: var(--accent); }
.cam-arrow:hover, .cam-arrow:active { background: rgba(165, 139, 255, .25); }
.cam-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cam-arrow.up { left: 50%; top: 8px; margin-left: -16px; }
.cam-arrow.down { left: 50%; bottom: 8px; margin-left: -16px; }
.cam-arrow.left { top: 50%; left: 8px; margin-top: -16px; }
.cam-arrow.right { top: 50%; right: 8px; margin-top: -16px; }
.cam-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cam-zb { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; touch-action: none; font: 800 17px/1 inherit; color: var(--accent); background: var(--card); box-shadow: var(--shadow); }
.cam-zb svg { width: 18px; height: 18px; fill: currentColor; }
.cam-track { position: relative; width: 28px; height: 64px; cursor: pointer; touch-action: none; }
.cam-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.cam-knob { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg); border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
@media (max-height: 560px), (pointer: coarse) {
  .w-cam { right: 76px; top: 154px; gap: 4px; }
  .cam-ring { width: 86px; height: 86px; }
  .cam-arrow { width: 28px; height: 28px; }
  .cam-arrow svg { width: 17px; height: 17px; }
  .cam-arrow.up { top: 4px; margin-left: -14px; }
  .cam-arrow.down { bottom: 4px; margin-left: -14px; }
  .cam-arrow.left { left: 4px; margin-top: -14px; }
  .cam-arrow.right { right: 4px; margin-top: -14px; }
  .cam-side { gap: 2px; }
  .cam-zb { width: 26px; height: 26px; font-size: 15px; }
  .cam-track { width: 26px; height: 34px; }
  #w-camtog { width: 30px; height: 30px; margin-top: -15px; }
}

/* thanh phat khi thu pose / dong tac o shop (tryplayer.js, 2026-11-01) */
.try-player { position: absolute; left: 12px; bottom: 132px; z-index: 6; display: flex; align-items: center; gap: 8px; right: 12px; box-sizing: border-box; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); pointer-events: auto; }
.try-player[hidden] { display: none; }
.try-player input[type=range] { flex: 1; min-width: 60px; }
.try-play, .try-rate { flex: none; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: #f1ecff; color: #5b3fc4; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.try-time { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.sf.has-player .try-bar { bottom: 184px; }
@media (max-height: 560px) { .try-player { bottom: 96px; padding: 3px 8px; gap: 6px; } .try-play, .try-rate { min-height: 32px; padding: 0 8px; } .sf.has-player .try-bar { bottom: 140px; } }

/* ================================================ POPUP CHON TAB (ui.js tabSelect, 2026-11-01) */
.tab-pop { position: fixed; z-index: 1000; display: grid; gap: 2px; width: max-content; max-width: min(320px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  border-radius: 16px; border: 1px solid #ece5f8; background: #fff; box-shadow: 0 12px 32px rgba(70, 50, 120, .24); animation: tab-pop-in .12s ease-out; }
.tab-pop button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 11px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; box-shadow: none; transform: none; }
.tab-pop button:hover { background: #f8f5fe; transform: none; }
.tab-pop button.on { background: #f1eafe; color: #7a55d8; font-weight: 700; }
.tab-pop button.on::after { content: "✓"; font-weight: 800; }
@keyframes tab-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ================================================ TIEM DAP DA: THE DA KHONG TRAN (2026-11-01) */
.ss-offers { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.ss-offer { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ss-offer > * { max-width: 100%; }
.ss-buy { box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.ss-price { overflow-wrap: anywhere; text-align: center; }
@media (pointer: coarse), (max-height: 560px) {
  .ss-offers { grid-template-columns: repeat(auto-fill, minmax(min(124px, 100%), 1fr)); gap: 6px; }
  .ss-offer { padding: 6px; }
  .ss-offer > b { font-size: 13px; text-align: center; }
  .ss-qty { gap: 2px; justify-content: center; }
  .ss-qty button { width: 24px; height: 26px; }
  .ss-qty button:last-child { padding: 0 4px; font-size: 11px; }
  .ss-qty span { min-width: 18px; font-size: 13px; }
  .ss-buy { padding: 7px 4px; font-size: 12px; }
}
.ss-body { grid-template-columns: minmax(0, 1fr); }
.ss-bagcell { min-width: 0; }
.ss-bagcell small { overflow-wrap: anywhere; font-size: 9px; }

/* O loc (ui.js pickerSelect): may tinh dung select, dien thoai dung nut + popup */
.dd-btn { display: none; }
@media (pointer: coarse), (max-height: 560px) {
  select.dd-src { display: none !important; }
  .dd-btn { display: inline-block; min-width: 0; max-width: 150px; padding: 0 22px 0 10px !important; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 700; box-shadow: none; transform: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d6aa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 9px 6px !important; }
}

/* Tu do tren man hep: 3 nut cuoi khong bi cat chu (2026-11-01) */
@media (max-width: 720px) and (max-height: 560px) {
  .ci-foot { gap: 5px; }
  .ci-foot button { padding: 6px 4px; font-size: 11.5px; line-height: 1.15; white-space: normal; }
}

/* Cum xoay camera tren dien thoai (2026-11-01, nguoi dung: chiem dien tich, bieu tuong chua can, kho bam, dia trang giua thua): vong 76 px, mui 30 px, cot +/−/ve giua cao bang vong, bo thanh truot (van co nut + chum 2 ngon). */
@media (max-height: 560px), (pointer: coarse) {
  .w-cam { right: max(6px, env(safe-area-inset-right)); top: 112px; gap: 4px; align-items: center; transition: top .15s ease-out; }   /* top: camctl.js _place */
  .cam-ring { width: 76px; height: 76px; border-width: 2px; background: radial-gradient(circle, rgba(255, 255, 255, .92) 0 11%, rgba(255, 255, 255, .55) 12% 100%); }
  .cam-mark::after { width: 8px; height: 8px; margin-left: -4px; bottom: -2px; box-shadow: 0 0 0 1.5px #fff; }
  .cam-arrow { width: 30px; height: 30px; }
  .cam-arrow svg { width: 15px; height: 15px; stroke-width: 3.4; }
  .cam-arrow.up { top: 0; margin-left: -15px; }
  .cam-arrow.down { bottom: 0; margin-left: -15px; }
  .cam-arrow.left { left: 0; margin-top: -15px; }
  .cam-arrow.right { right: 0; margin-top: -15px; }
  .cam-side { gap: 1px; }
  .cam-track { display: none; }
  .cam-zb { position: relative; width: 28px; height: 28px; font-size: 16px; }
  .cam-zb svg { width: 15px; height: 15px; }
  .cam-zb::after, #w-camtog::after { content: ""; position: absolute; inset: 0 -5px; }   /* vung cham rong hon nut */
  #w-camtog::after { inset: -6px; }
  #w-camtog svg { width: 15px; height: 15px; }
}

/* Man hep (2026-11-01): tiem da + nut tu do */
@media (max-height: 560px) {
  .ss-top { flex-wrap: nowrap; }
  .ss-top .ss-pair { flex: none; gap: 6px; }
  .ss-top .ss-arrow { font-size: 18px; }
  .ss-top .ss-rate { flex: 1 1 0; min-width: 0; }
  .ss-top .ss-rate span { overflow-wrap: anywhere; }
}
@media (max-width: 720px) and (max-height: 560px) {
  #w-char:not([data-mode="info"]) .ci-foot button { padding: 5px 3px; font-size: 11.5px; line-height: 1.15; white-space: normal; overflow: visible; }
}

/* Tu do: dung luong dang mac (charinfo.js renderWeight) */
.ci-weight { flex: none; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #e6f8f1; color: #2f9b80; }
.ci-weight[hidden] { display: none; }
.ci-weight[data-lv="warn"] { background: #fff3d9; color: #b47a00; }
.ci-weight[data-lv="bad"] { background: #ffe3e6; color: #c9344a; }
@media (max-height: 560px) { .ci-weight { margin-left: 5px; padding: 1px 6px; font-size: 11px; } }

/* Phong: dung luong ca phong + tung nguoi (roompeople.js renderSize) */
.rp-size { padding: 6px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; background: #e6f8f1; color: #2f9b80; }
.rp-size[data-lv="warn"] { background: #fff3d9; color: #b47a00; }
.rp-size[data-lv="bad"] { background: #ffe3e6; color: #c9344a; }
.rp-mb { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }