/* ============================================================
   SKIN v1.8.0 — "Trắng sáng, thoáng và mềm"
   Lớp giao diện đặt SAU style.css: chỉ đổi kiểu dáng (màu, bo góc, đổ bóng, khoảng thở),
   KHÔNG đổi cấu trúc HTML/JS. Muốn quay về giao diện cũ: bỏ dòng <link> skin-v18.css trong index.php.

   Định hướng:
   • Nền trắng thật, chỉ còn một vệt màu cực nhạt ở góc để đỡ phẳng.
   • Bỏ các khối 3D nặng (icon gradient đậm + bóng đen) → ô pastel mềm, viền mảnh, bóng nhẹ.
   • Mọi thẻ cùng một ngôn ngữ: nền trắng, viền 1px nhạt, bo 22–26px, bóng đổ dài và mờ.
   • Màu thương hiệu (hồng → cam) chỉ dùng cho điểm nhấn: nút chính, tab đang chọn, nút "+" giữa.
   • Chữ đậm tương phản cao, tiêu đề dùng Baloo 2.
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg2:#fbf9ff;
  --surface:#ffffff;
  --panel:rgba(36,26,61,.04);
  --panel-strong:rgba(36,26,61,.07);
  --line:rgba(36,26,61,.10);
  --sk-ink:#241a3d;
  --sk-card-shadow:0 1px 2px rgba(36,26,61,.05), 0 12px 28px -14px rgba(36,26,61,.18);
  --sk-soft-shadow:0 1px 2px rgba(36,26,61,.04), 0 6px 16px -10px rgba(36,26,61,.16);
  --sk-grad:linear-gradient(120deg,#ff3d9a,#ff6a5c 60%,#ff9a44);
}
body{
  background:
    radial-gradient(520px 340px at 0% -4%, #ffe6f4 0, transparent 70%),
    radial-gradient(480px 320px at 104% 2%, #e5f6ff 0, transparent 70%),
    #ffffff;
  background-attachment:fixed;
}

/* ---------- Thanh trên ---------- */
.topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.86) 72%,rgba(255,255,255,0) 100%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.topbar-user-av{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(36,26,61,.12), var(--sk-soft-shadow); background:#f4effb; }
.topbar-user-name{ font-size:14px; font-weight:800; color:var(--sk-ink); }
.chip{
  background:#fff; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
  padding:6px 12px 6px 9px; font-size:13.5px; font-weight:800; color:var(--sk-ink);
}
.chip.coin{ background:linear-gradient(180deg,#fffaf0,#fff2cf); border-color:#ffdf94; color:#6b4300; box-shadow:0 6px 14px -9px rgba(230,166,39,.7); }
.chip.diamond{ background:linear-gradient(180deg,#f4fdff,#dcf6fd); border-color:#a9e6f4; color:#00566b; box-shadow:0 6px 14px -9px rgba(11,182,214,.6); }
.chip.bean{ background:linear-gradient(180deg,#f6fff9,#dcf7e6); border-color:#a8e5c0; color:#0b5a30; }
.profile-btn{ background:#fff; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow); }
.topbar-more-menu{ background:#fff; border-radius:18px; box-shadow:0 18px 40px -16px rgba(36,26,61,.35); border:1px solid var(--line); }

/* ---------- Tiêu đề mục ---------- */
.section-head{ margin:24px 0 12px; }
.section-head h2{ font-family:'Baloo 2',sans-serif; font-size:21px; font-weight:800; color:var(--sk-ink); letter-spacing:-.01em; }
.section-head .link-btn{
  color:var(--magenta-ink,#c2127a); font-weight:800; font-size:12.5px; padding:6px 12px; border-radius:999px;
  background:#fff0f8; border:1px solid #ffd3ea;
}
.online-now-title, .nominee-rail-head{ font-family:'Baloo 2',sans-serif; font-size:17px; font-weight:800; color:var(--sk-ink); }

/* ---------- Đề cử ---------- */
.nominee-rail-wrap{ padding-top:10px; }
.nominee-rail{ padding-top:12px; margin-top:-4px; padding-left:4px; gap:14px; }
.nominee-av-wrap{ background:linear-gradient(145deg,#fff,#f3ecff); box-shadow:var(--sk-soft-shadow); }
.nominee-item.is-me .nominee-av-wrap{ background:linear-gradient(135deg,#ff8a5c,#ff3d9a); color:#fff; }
.nominee-label{ font-weight:800; color:var(--sk-ink); font-size:11.5px; }
.nominee-ribbon{ font-size:10px; padding:2px 8px; box-shadow:0 4px 10px -4px rgba(255,61,154,.7); }
.nominee-viewers{ background:rgba(36,26,61,.82); font-size:10px; }

/* ---------- Lưới chức năng: một thẻ trắng, icon pastel ---------- */
.lobby-quick-grid{
  background:#fff; border:1px solid var(--line); border-radius:26px; padding:16px 2px 12px;
  box-shadow:var(--sk-card-shadow); gap:14px 0;
}
.lobby-quick-item{ gap:6px; }
.lobby-quick-ico{
  width:52px; height:52px; border-radius:19px; font-size:23px; border:1px solid transparent;
  box-shadow:inset 0 1px 0 #ffffffcc, 0 8px 14px -10px rgba(36,26,61,.35);
}
.lobby-quick-item:active .lobby-quick-ico{ transform:scale(.92); box-shadow:none; }
.lobby-quick-ico.q-gold{ background:linear-gradient(160deg,#fff6d9,#ffe7a1); border-color:#ffe08a; }
.lobby-quick-ico.q-cyan{ background:linear-gradient(160deg,#e6f9ff,#bdeefb); border-color:#a2e3f5; }
.lobby-quick-ico.q-violet{ background:linear-gradient(160deg,#f1eaff,#d9c9ff); border-color:#cdb9ff; }
.lobby-quick-ico.q-amber{ background:linear-gradient(160deg,#fff0e0,#ffd5ab); border-color:#ffc590; }
.lobby-quick-ico.q-magenta{ background:linear-gradient(160deg,#ffeaf5,#ffc6e3); border-color:#ffb0d6; }
.lobby-quick-ico.q-mint{ background:linear-gradient(160deg,#e5fbf3,#b9f0da); border-color:#9fe6c8; }
.lobby-quick-ico.q-more{ background:#f6f3fb; border-color:var(--line); color:#4d4270; }
.lobby-quick-label{ font-size:11px; letter-spacing:-.01em; font-weight:700; color:#3b3058; line-height:1.2; }

/* ---------- Đang online ---------- */
.online-now-av{ background:#fff; border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(36,26,61,.12), var(--sk-soft-shadow); }
.online-now-dot{ border-color:#fff; }
.online-now-label{ color:#3b3058; font-size:11.5px; font-weight:700; }

/* ---------- Tìm kiếm + tab lọc ---------- */
.name-input{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 18px; color:var(--sk-ink);
  box-shadow:var(--sk-soft-shadow);
}
.name-input:focus{ border-color:#ff7ab8; box-shadow:0 0 0 4px rgba(255,61,154,.12), var(--sk-soft-shadow); }
.chat-filter-btn{ background:#fff; color:#4d4270; border:1px solid var(--line); font-weight:700; padding:8px 15px; box-shadow:var(--sk-soft-shadow); }
.chat-filter-btn.active{ background:var(--sk-grad); color:#fff; border-color:transparent; box-shadow:0 10px 20px -10px rgba(255,61,154,.8); transform:none; text-shadow:0 1px 2px rgba(120,0,60,.3); }

/* ---------- Thẻ phòng ---------- */
.room-list{ gap:14px; }
.room-card{
  border-radius:26px; box-shadow:0 1px 2px rgba(36,26,61,.06), 0 18px 30px -18px rgba(36,26,61,.55);
  padding:12px 14px 14px;
}
.room-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.room-card-thumb-wrap::after{
  background:linear-gradient(180deg,rgba(20,12,40,.28) 0%,rgba(20,12,40,0) 26%,rgba(20,12,40,0) 40%,rgba(20,12,40,.86) 100%);
}
.room-card-tag{ background:rgba(255,255,255,.88); color:var(--sk-ink); border:1px solid rgba(255,255,255,.9); text-shadow:none; font-weight:800; backdrop-filter:blur(8px); }
.room-card-tag.hot{ background:var(--sk-grad); color:#fff; border-color:transparent; text-shadow:0 1px 2px rgba(120,0,60,.35); }
.room-card-viewers{ background:rgba(20,12,40,.45); border-color:rgba(255,255,255,.25); }
.room-card-name{ font-size:15.5px; font-weight:800; letter-spacing:-.005em; }
.room-card-arrow{ background:rgba(255,255,255,.9); color:var(--sk-ink); width:22px; height:22px; font-size:15px; }
.room-card-host-name{ color:#fff; font-weight:600; }
.room-card.is-pinned{ box-shadow:0 1px 2px rgba(36,26,61,.06), 0 18px 32px -16px rgba(255,61,154,.65); }

/* ---------- Thanh điều hướng dưới ---------- */
.bottom-nav{
  background:rgba(255,255,255,.94); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--line); border-radius:26px 26px 0 0; box-shadow:0 -10px 30px -16px rgba(36,26,61,.28);
}
.bn-item{ color:#6a6390; font-weight:700; }
.bn-label{ font-size:10.5px; letter-spacing:-.03em; text-overflow:clip; }
.bn-center{ margin:0 2px; }
.bn-item .bn-icon{ opacity:.85; padding:3px 12px; border-radius:14px; transition:background .18s, transform .18s; }
.bn-item.active{ color:var(--magenta-ink,#c2127a); font-weight:800; }
.bn-item.active .bn-icon{ background:#fff0f8; opacity:1; transform:none; filter:none; box-shadow:inset 0 0 0 1px #ffd3ea; }
.bn-center::before{ opacity:.35; }
.bn-center-icon{ background:var(--sk-grad); box-shadow:0 12px 22px -8px rgba(255,61,154,.75), 0 0 0 5px #fff; }
.bn-center .bn-icon{ padding:0; background:none !important; box-shadow:none !important; }

/* ---------- Cửa sổ (modal) ---------- */
.modal-overlay{ background:rgba(36,26,61,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-sheet{ border:0; box-shadow:0 -24px 60px -24px rgba(36,26,61,.45); }
.modal-overlay:not(.center):not(.app-page):not(.fullpage) .modal-sheet{ border-radius:28px 28px 0 0; padding-top:26px; }
.modal-overlay:not(.center):not(.app-page):not(.fullpage) .modal-sheet::before{
  content:''; position:absolute; top:9px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:#ddd7ea;
}
.modal-title{ font-family:'Baloo 2',sans-serif; font-size:21px; font-weight:800; color:var(--sk-ink); letter-spacing:-.01em; }
.close-x{ background:var(--panel-strong); border-radius:50%; color:#4d4270; }

/* ---------- Nút ---------- */
.btn-primary{ background:var(--sk-grad); border-radius:18px; box-shadow:0 16px 28px -14px rgba(255,61,154,.8); }
.btn-mini{ border-radius:14px; box-shadow:0 8px 16px -10px rgba(36,26,61,.4); }
.banner-carousel{ border-radius:24px; box-shadow:var(--sk-card-shadow); }
.broadcast-banner{ border-radius:16px; background:linear-gradient(90deg,#fff0f8,#eefaff); border:1px solid #ffd3ea; color:var(--sk-ink); font-weight:600; }

/* ---------- Chat trong phòng ---------- */
.chat-msg{ background:#fff; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow); border-radius:16px; padding:7px 12px; }
.chat-msg.system{ background:transparent; border:0; box-shadow:none; }

/* ---------- Chuyển động nhẹ khi mở sảnh ---------- */
@keyframes sk-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lobby-quick-grid, .room-card{ animation:sk-rise .4s cubic-bezier(.2,.8,.2,1) both; }
.room-card:nth-child(2){ animation-delay:.04s; } .room-card:nth-child(3){ animation-delay:.08s; } .room-card:nth-child(4){ animation-delay:.12s; }
@media (prefers-reduced-motion:reduce){ .lobby-quick-grid, .room-card{ animation:none; } }

/* ============================================================
   PHÒNG THOẠI — chuyển hẳn sang tông trắng
   (trước đây thanh chat nền xanh navy đậm, tên phòng chữ trắng trên nền sáng → gần như mất chữ)
   ============================================================ */
.room-hero{ box-shadow:0 14px 30px -26px rgba(36,26,61,.45); }
.back-btn, .icon-btn{
  background:rgba(255,255,255,.88); color:var(--sk-ink); border:1px solid var(--line);
  box-shadow:var(--sk-soft-shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.back-btn:active, .icon-btn:active{ background:#fff; transform:scale(.92); }
.room-title-wrap{
  background:rgba(255,255,255,.9); border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
  padding:5px 14px 5px 5px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.room-title-wrap .rt-name{
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--sk-ink); -webkit-text-fill-color:var(--sk-ink); font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:800; letter-spacing:-.005em;
}
.room-title-wrap .rt-id{ color:#6a6390; font-weight:600; }
.room-avatar-img{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(36,26,61,.12), var(--sk-soft-shadow); }
.room-card-select-btn{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.9); color:var(--sk-ink); font-weight:700; font-size:12.5px; border:1px dashed rgba(36,26,61,.25);
}

/* Ghế ngồi */
#screen-room:not(.room-has-bg) .seat-avatar{ border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(36,26,61,.12), 0 10px 18px -10px rgba(36,26,61,.45); }
#screen-room:not(.room-has-bg) .seat.empty .seat-avatar{ background:#fff; border:1.5px dashed rgba(36,26,61,.28); color:#6a6390; box-shadow:none; font-size:16px; }
#screen-room:not(.room-has-bg) .seat-name{ color:var(--sk-ink); font-weight:700; }
#screen-room:not(.room-has-bg) .seat.empty .seat-name{ color:#6a6390; font-weight:600; }
#screen-room:not(.room-has-bg) .seat-index-tag{ background:#fff; color:#4d4270; border:1px solid var(--line); font-size:9px; padding:1px 6px; box-shadow:var(--sk-soft-shadow); }
.seat-mute-badge{ border-color:#fff; }
.seat-headset{ filter:none; }
.stage.mode-karaoke .seat.host .seat-avatar{ box-shadow:0 0 0 3px #ffe08a, 0 14px 26px -10px rgba(230,166,39,.8); }

/* Tab chuyển nội dung phòng */
.tab-btn{ background:#fff; color:#4d4270; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow); padding:8px 15px; }
.tab-btn.active{ background:var(--sk-grad); color:#fff; border-color:transparent; box-shadow:0 10px 20px -10px rgba(255,61,154,.8); text-shadow:0 1px 2px rgba(120,0,60,.3); }

/* Thanh chat: nền trắng kính mờ thay cho navy đậm */
.composer{
  --cx-bar:#ffffff; --cx-ctl:#f3effa; --cx-ctl-press:#e6dff3; --cx-ink:#241a3d; --cx-ink-dim:#6a6390;
  background:rgba(255,255,255,.95); border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -18px rgba(36,26,61,.35);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
.composer::before{ background:linear-gradient(90deg,transparent,rgba(255,61,154,.35),rgba(11,182,214,.35),transparent); }
.composer .chat-input{ background:var(--cx-ctl); }
.composer .chat-input:focus{ box-shadow:inset 0 0 0 1.5px #ff7ab8, 0 0 0 4px rgba(255,61,154,.1); }
.composer .mic-toggle.off{ color:#d62855; background:#ffeef2; }
.cx-round, .composer .mic-toggle, .composer .gift-btn{ border:1px solid rgba(36,26,61,.06); }
.cx-badge-btn{ filter:drop-shadow(0 4px 6px rgba(36,26,61,.22)); }
.cx-count{ box-shadow:0 0 0 2px #fff; }
.composer .send-btn{ background:var(--sk-grad); box-shadow:0 8px 14px -6px rgba(255,61,154,.7); }
.rexp-daily-corner:empty, .room-mode-badge:empty{ display:none; }

/* ============================================================
   TIN NHẮN v1.8.2 — danh sách hội thoại + khung chat
   ============================================================ */
/* ---------- Danh sách: tìm kiếm + lọc ---------- */
.dm-search-wrap{ position:relative; margin:2px 0 10px; }
.dm-search-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.55; pointer-events:none; }
.dm-search-input{
  width:100%; box-sizing:border-box; padding:11px 16px 11px 38px; border-radius:999px;
  border:1px solid var(--line); background:#fff; box-shadow:var(--sk-soft-shadow);
  font-size:14px; color:var(--sk-ink); outline:none; -webkit-appearance:none; appearance:none;
}
.dm-search-input:focus{ border-color:#ffb3d9; box-shadow:0 0 0 3px #ff3d9a22; }
.dm-filter-chips{ display:flex; gap:8px; margin:0 0 12px; }
.dm-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--sk-ink); font-size:13px; font-weight:800;
  box-shadow:var(--sk-soft-shadow); cursor:pointer;
}
.dm-chip.active{ background:var(--sk-grad); border-color:transparent; color:#fff; }
.dm-chip-n{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ff3d9a; color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.dm-chip.active .dm-chip-n{ background:#fff; color:#d6246f; }
.dm-chip-n.hidden{ display:none; }

/* ---------- Danh sách: dòng hội thoại ---------- */
.dm-chat-row{
  gap:12px; padding:12px 14px; border-radius:20px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--sk-soft-shadow); margin-bottom:10px; transition:transform .12s, box-shadow .12s;
}
.dm-chat-row:active{ transform:scale(.985); }
.dm-chat-row.dm-pinned{ background:linear-gradient(90deg,#fff6dc,#fff 72%); border-color:#ffe3a1; }
.dm-chat-row .dm-conv-row-avatar{ flex-shrink:0; }
.dm-cr-top{ display:flex; align-items:center; gap:8px; }
.dm-cr-name{ flex:1; min-width:0; font-weight:800; font-size:14.5px; color:var(--sk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-cr-time{ flex-shrink:0; font-size:11.5px; color:var(--text-faint); }
.dm-cr-bot{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.dm-chat-row .dm-preview{ flex:1; min-width:0; max-width:none; font-size:13px; color:var(--text-dim); }
.dm-chat-row.unread .dm-cr-time{ color:#d6246f; font-weight:800; }
.dm-chat-row.unread .dm-preview{ color:var(--sk-ink); font-weight:700; }
.dm-badge-n{
  flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--sk-grad);
  color:#fff; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -4px rgba(255,61,154,.7);
}
.dm-empty{ text-align:center; padding:44px 20px; }
.dm-empty-ico{ font-size:44px; margin-bottom:8px; }
.dm-empty-t{ font-weight:800; font-size:15px; color:var(--sk-ink); }
.dm-empty-s{ font-size:13px; color:var(--text-dim); margin-top:4px; }
.dm-online-strip{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:12px 12px 10px; box-shadow:var(--sk-soft-shadow); margin-bottom:12px; }

/* ---------- Khung chat riêng ---------- */
#modal-dm-thread .dm-thread-list{
  background:linear-gradient(180deg,#fbf9ff,#fff); border-radius:20px; padding:10px 10px 12px; gap:2px;
  overscroll-behavior:contain;
}
#modal-dm-thread .dm-bubble{
  max-width:80%; padding:9px 14px; border-radius:20px; font-size:14.5px; line-height:1.42;
  overflow-wrap:anywhere; white-space:pre-wrap;
}
#modal-dm-thread .dm-bubble.dm-first{ margin-top:8px; }
#modal-dm-thread .dm-bubble.them:not(.system-notice){
  background:#fff; color:var(--sk-ink); border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
  border-bottom-left-radius:6px;
}
#modal-dm-thread .dm-bubble.them:not(.system-notice):not(.dm-first){ border-top-left-radius:6px; }
#modal-dm-thread .dm-bubble.me{
  background:var(--sk-grad); color:#fff; box-shadow:0 6px 14px -8px rgba(255,61,110,.7);
  border-bottom-right-radius:6px;
}
#modal-dm-thread .dm-bubble.me:not(.dm-first){ border-top-right-radius:6px; }
#modal-dm-thread .dm-bubble.gif-msg{ background:transparent; border:none; box-shadow:none; padding:0; }
#modal-dm-thread .dm-bubble.gif-msg .chat-gif-img{ border-radius:16px; max-width:100%; display:block; }
#modal-dm-thread .dm-msg-row{ gap:8px; }
#modal-dm-thread .dm-msg-avatar{ width:30px; height:30px; }
#modal-dm-thread .dm-bubble.show-time::after{
  content:attr(data-time); display:block; margin-top:3px; font-size:10.5px; opacity:.7; text-align:right; white-space:normal;
}
.dm-day-divider{
  align-self:center; margin:12px 0 4px; padding:3px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; color:var(--text-faint); background:rgba(36,26,61,.05);
}
.dm-day-divider.dm-time-divider{ background:none; padding:0; margin:8px 0 2px; font-weight:600; }

/* ---------- Ô soạn tin dạng viên thuốc ---------- */
.dm-composer-wrap{ position:relative; flex:0 0 auto; }
#modal-dm-thread .dm-composer{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 5px 5px 8px;
  gap:2px; margin-top:10px; box-shadow:var(--sk-card-shadow);
}
#modal-dm-thread .dm-composer input{
  background:transparent; border:none; box-shadow:none; outline:none; padding:8px 6px;
  font-size:14.5px; color:var(--sk-ink); min-width:0;
}
#modal-dm-thread .dm-composer-icon{ width:34px; height:34px; background:transparent; border:none; font-size:18px; }
#modal-dm-thread .dm-composer-icon:active{ background:var(--panel-strong); }
#modal-dm-thread .dm-composer.has-text .dm-mic-btn,
#modal-dm-thread .dm-composer.has-text .dm-invite-btn{ display:none; }
#modal-dm-thread .dm-send-btn{
  width:38px; height:38px; padding:0; border-radius:50%; background:#e6e0f0; color:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center; transition:background .15s, transform .12s;
}
#modal-dm-thread .dm-composer.has-text .dm-send-btn{ background:var(--sk-grad); box-shadow:0 6px 14px -6px rgba(255,61,110,.8); }
#modal-dm-thread .dm-send-btn:active{ transform:scale(.92); }
.dm-scroll-fab{
  position:absolute; right:6px; bottom:calc(100% + 10px); width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sk-card-shadow); color:var(--sk-ink);
  font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:4;
}
.dm-scroll-fab.hidden{ display:none; }
.dm-scroll-fab-n{
  position:absolute; top:-6px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--sk-grad); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.dm-scroll-fab-n.hidden{ display:none; }

/* ============================================================
   v1.8.3 — Đánh bóng toàn app: chuyển động, thông báo, tiêu đề, trạng thái bấm
   ============================================================ */
html{ -webkit-tap-highlight-color:transparent; }
::selection{ background:#ffd3ea; color:var(--sk-ink); }
:focus-visible{ outline:2px solid #ff7ab8; outline-offset:2px; }
button, .lobby-quick-item, .room-card, .bn-item, .dm-conv-row{ -webkit-touch-callout:none; }
button:active:not(:disabled){ transition:transform .08s; }
.btn-primary:active, .btn-mini:active, .chat-filter-btn:active, .dm-chip:active{ transform:scale(.96); }
.btn-primary, .btn-mini, .chat-filter-btn, .dm-chip, .bn-icon{ transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }

/* Thanh cuộn mảnh, tinh tế */
*{ scrollbar-width:thin; scrollbar-color:#d9d2ea transparent; }
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:#d9d2ea; border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

/* Toast thường: nổi, mềm, có dải màu nhấn bên trái */
.toast{
  background:rgba(255,255,255,.96); border:1px solid var(--line); color:var(--sk-ink); font-weight:700;
  padding:11px 20px; box-shadow:0 18px 40px -16px rgba(36,26,61,.45), 0 2px 6px rgba(36,26,61,.08);
  animation:sk-toast-in .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes sk-toast-in{ from{ opacity:0; transform:translate(-50%,12px) scale(.96); } to{ opacity:1; transform:translate(-50%,0) scale(1); } }

/* Toast tin nhắn mới: kính trắng thay cho khối tím tối */
.dm-toast{
  background:rgba(255,255,255,.94); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--line); border-radius:22px; padding:12px 14px 12px 12px;
  box-shadow:0 22px 44px -18px rgba(36,26,61,.5), 0 2px 8px rgba(36,26,61,.08), inset 3px 0 0 #ff3d9a;
}
.dm-toast .dt-avatar{ width:42px; height:42px; background:linear-gradient(145deg,#fff,#f3ecff); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #ffd3ea; }
.dm-toast .dt-name{ color:var(--sk-ink); font-size:14px; }
.dm-toast .dt-msg{ color:var(--text-dim); font-size:12.5px; }
.dm-toast .dt-close{ background:var(--panel-strong); color:#4d4270; }

/* Tiêu đề cửa sổ kiểu "trang": đậm, gọn, có vệt gradient dưới */
.modal-overlay.app-page .modal-title{ font-family:'Baloo 2',sans-serif; color:var(--sk-ink); }
.modal-overlay.app-page .close-x{ width:36px; height:36px; font-size:18px; display:flex; align-items:center; justify-content:center; }
.modal-overlay.app-page .close-x.dm-thread-back{ background:#fff; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow); }

/* Tin nhắn: tiêu đề + liên kết dạng pill */
.dm-list-title .link-btn{
  padding:7px 12px; border-radius:999px; background:#fff0f8; border:1px solid #ffd3ea; color:#c2127a; font-weight:800;
  box-shadow:none;
}
.dm-list-title .link-btn:active{ background:#ffe3f2; }
.dm-list-title > span{ font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:800; color:var(--sk-ink); letter-spacing:-.01em; }

/* Dòng hội thoại: vào mượt từng dòng, avatar có viền trắng nổi */
@keyframes sk-row-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.dm-chat-row{ animation:sk-row-in .32s cubic-bezier(.2,.8,.2,1) both; }
.dm-chat-row:nth-child(2){ animation-delay:.03s; } .dm-chat-row:nth-child(3){ animation-delay:.06s; }
.dm-chat-row:nth-child(4){ animation-delay:.09s; } .dm-chat-row:nth-child(5){ animation-delay:.12s; }
.dm-chat-row:nth-child(n+6){ animation-delay:.15s; }
.dm-chat-row .dm-conv-row-avatar{ filter:drop-shadow(0 6px 10px rgba(36,26,61,.18)); }
.dm-chat-row.unread{ border-color:#ffd3ea; background:linear-gradient(90deg,#fff5fb,#fff 70%); }
.dm-online-item:active{ transform:scale(.94); }
.dm-online-name{ color:#3b3058; font-weight:700; }

/* Khung chat: header kính, tin mới vào có chuyển động nhẹ */
#modal-dm-thread .dm-thread-header{
  background:rgba(255,255,255,.88); border-bottom:1px solid var(--line);
  box-shadow:0 10px 24px -20px rgba(36,26,61,.5);
}
#modal-dm-thread .dm-thread-name{ color:var(--sk-ink); font-family:'Baloo 2',sans-serif; font-size:17px; }
#modal-dm-thread .dm-thread-sub{ color:#c2127a; font-weight:700; opacity:.85; }
#modal-dm-thread .dm-thread-view-profile{ background:#fff0f8; border-color:#ffd3ea; color:#c2127a; box-shadow:none; }
@keyframes sk-bubble-in{ from{ opacity:0; transform:translateY(6px) scale(.97); } to{ opacity:1; transform:none; } }
#modal-dm-thread .dm-bubble{ animation:sk-bubble-in .22s cubic-bezier(.2,.8,.2,1) both; transform-origin:bottom; }
#modal-dm-thread .dm-bubble.me{ transform-origin:bottom right; }
#modal-dm-thread .dm-bubble.them{ transform-origin:bottom left; }
#modal-dm-thread .dm-topcard{
  background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--sk-card-shadow);
}
#modal-dm-thread .dm-composer:focus-within{ border-color:#ffb3d9; box-shadow:0 0 0 4px rgba(255,61,154,.10), var(--sk-card-shadow); }

@media (prefers-reduced-motion:reduce){
  .dm-chat-row, #modal-dm-thread .dm-bubble, .toast{ animation:none; }
}

/* ============================================================
   v1.8.4 — QUẢNG TRƯỜNG: bài đăng dạng thẻ trắng, ô đăng bài, chủ đề, tương tác
   ============================================================ */
/* Ô "Bạn đang nghĩ gì?" */
.plaza-composer-card{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:14px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--sk-card-shadow);
  transition:transform .12s, box-shadow .2s;
}
.plaza-composer-card:active{ transform:scale(.985); }
.plaza-composer-card:focus-visible{ outline-offset:3px; }
.plaza-cc-text{
  flex:1; min-width:0; padding:11px 16px; border-radius:999px; background:var(--panel); color:var(--text-dim);
  font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plaza-cc-btn{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--sk-grad); color:#fff; font-size:19px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -10px rgba(255,61,154,.85);
}

/* Chủ đề + tab sắp xếp */
.plaza-topic-strip{ padding:2px 2px 10px; gap:10px; }
.plaza-topic-chip{
  background:#fff; border:1px solid var(--line); color:#4d4270; box-shadow:var(--sk-soft-shadow);
  padding:7px 14px 7px 7px; font-weight:800; transition:transform .12s;
}
.plaza-topic-chip:active{ transform:scale(.95); }
.plaza-topic-chip.active{ background:var(--sk-grad); color:#fff; border-color:transparent; box-shadow:0 10px 20px -10px rgba(255,61,154,.8); }
.plaza-topic-chip-ico{ background:#f4effb; }
.plaza-topic-chip.active .plaza-topic-chip-ico{ background:rgba(255,255,255,.28); }
.plaza-sort-tabs{ background:var(--panel); border-radius:999px; padding:4px; display:inline-flex; gap:2px; margin:2px 0 12px; }
.plaza-sort-tab{ background:transparent; border:0; border-radius:999px; padding:7px 16px; color:var(--text-dim); font-weight:800; transition:background .2s, color .2s, box-shadow .2s; }
.plaza-sort-tab.active{ background:#fff; color:var(--sk-ink); box-shadow:var(--sk-soft-shadow); }
#plaza-feed-heading{ font-family:'Baloo 2',sans-serif; font-size:17px !important; font-weight:800; color:var(--sk-ink); }

/* Thẻ bài đăng */
.plaza-post-card{
  background:#fff; border:1px solid var(--line); border-radius:26px; padding:16px 16px 10px;
  box-shadow:var(--sk-card-shadow); margin-bottom:14px; animation:sk-rise .38s cubic-bezier(.2,.8,.2,1) both;
}
.plaza-post-card:hover{ transform:none; box-shadow:var(--sk-card-shadow); }
.plaza-post-card.pinned{ border-color:#ffe3a1; background:linear-gradient(180deg,#fff9e8,#fff 40%); box-shadow:0 0 0 1px #ffe3a1, var(--sk-card-shadow); }
.plaza-post-card.official{ border-color:#bfeaf5; background:linear-gradient(180deg,#f1fbff,#fff 40%); box-shadow:0 0 0 1px #bfeaf5, var(--sk-card-shadow); }
.plaza-post-card.official.pinned{ border-color:#ffe3a1; background:linear-gradient(180deg,#fff9e8,#fff 40%); }
.plaza-pin-badge{ border-radius:999px; padding:3px 10px; margin-bottom:10px; box-shadow:0 4px 10px -6px rgba(36,26,61,.4); }
.plaza-post-head{ gap:12px; }
.plaza-post-head .mini-av-wrap{ border:0; filter:drop-shadow(0 6px 10px rgba(36,26,61,.16)); }
.plaza-post-author{ font-size:14.5px; font-weight:800; color:var(--sk-ink); }
.plaza-post-time{ font-size:11.5px; margin-top:1px; }
.plaza-post-del{ width:34px; height:34px; border-radius:50%; background:var(--panel); opacity:.8; }
.plaza-post-caption{ font-size:14.5px; line-height:1.55; color:var(--sk-ink); margin-top:12px; }
.plaza-post-caption.clamp{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.plaza-more-btn{ background:none; border:0; padding:4px 0 0; color:#c2127a; font-weight:800; font-size:13px; }
.plaza-post-img-wrap{ border-radius:20px; margin-top:12px; box-shadow:0 14px 26px -18px rgba(36,26,61,.55); }
.plaza-post-img-wrap img{ max-height:420px; }
.plaza-post-tag{
  margin-top:12px; padding:5px 12px; border-radius:999px; background:#fff0f8; border:1px solid #ffd3ea; color:#c2127a; font-weight:800;
}
.plaza-post-stats{ gap:6px; margin-top:12px; padding-top:8px; border-top:1px solid var(--line); }
.plaza-post-action{
  flex:1; justify-content:center; gap:6px; padding:9px 6px; border-radius:14px; font-size:13.5px; font-weight:800; color:#4d4270;
  transition:background .15s, color .15s, transform .12s;
}
.plaza-post-action:hover{ background:var(--panel); color:var(--sk-ink); }
.plaza-post-action:active{ transform:scale(.94); }
.plaza-post-action.active{ color:#e0245e; background:#fff0f4; }
@keyframes sk-heart-pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.28); } 70%{ transform:scale(.94); } 100%{ transform:scale(1); } }
.plaza-like-btn.pop{ animation:sk-heart-pop .38s cubic-bezier(.2,.9,.3,1.3); }

/* Khung chờ, trạng thái trống, soạn bài */
.plaza-skeleton{ background:#fff; border-radius:26px; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow); padding:16px; }
.plaza-empty{ background:#fff; border:1px dashed #d9d2ea; border-radius:26px; padding:40px 16px; }
.plaza-empty-title{ color:var(--sk-ink); font-size:15px; }
#plaza-compose-caption{ border-radius:22px; min-height:120px; font-size:15px; line-height:1.5; }
.plaza-compose-preview-box img{ border-radius:20px; box-shadow:var(--sk-soft-shadow); }
.plaza-compose-preview-remove{ box-shadow:0 6px 14px -6px rgba(36,26,61,.6); }
.plaza-lightbox-overlay{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.plaza-lightbox-overlay img{ border-radius:20px; }

@media (prefers-reduced-motion:reduce){ .plaza-post-card{ animation:none; } .plaza-like-btn.pop{ animation:none; } }

/* ============================================================
   v1.8.5 — PHÒNG THOẠI: ghế, tab, chat, banner, chuyển động
   (chỉ thêm kiểu dáng; chạy được cả khi phòng có ảnh nền riêng)
   ============================================================ */
/* ---- Thanh trên ---- */
.room-topbar{ gap:2px; }
.back-btn, .icon-btn{ width:38px; height:38px; transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }
.icon-btn:hover{ box-shadow:var(--sk-card-shadow); }
.room-title-wrap{ box-shadow:var(--sk-card-shadow); }
.room-title-wrap .rt-id{ font-size:11px; }

/* ---- Ghế: viền trắng nổi, tên dạng chip, sóng loa khi nói ---- */
.seat{ gap:5px; }
.seat-avatar{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.seat:not(.empty):active .seat-avatar{ transform:scale(.96); }
.seat-name{
  max-width:100%; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.82); color:var(--sk-ink);
  font-weight:700; box-shadow:0 2px 6px -3px rgba(36,26,61,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.seat.empty .seat-name{ background:rgba(255,255,255,.5); color:#6a6390; box-shadow:none; }
#screen-room.room-has-bg .seat-name{ background:rgba(20,12,40,.45); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
#screen-room.room-has-bg .seat.empty .seat-name{ background:rgba(20,12,40,.3); color:#ffffffd9; }
#screen-room.room-has-bg .seat-avatar{ border:2px solid rgba(255,255,255,.9); box-shadow:0 10px 20px -10px rgba(0,0,0,.6); }
#screen-room.room-has-bg .seat.empty .seat-avatar{ background:rgba(255,255,255,.16); border:1.5px dashed rgba(255,255,255,.7); color:#fff; backdrop-filter:blur(4px); }
.seat.empty .seat-avatar{ transition:background .2s, transform .2s; }
.seat.empty:active .seat-avatar{ transform:scale(.92); }
/* Đang nói: vòng gradient + sóng lan tỏa */
@keyframes sk-speak-wave{ 0%{ box-shadow:0 0 0 0 rgba(255,61,154,.45), 0 0 0 0 rgba(11,182,214,.35); } 100%{ box-shadow:0 0 0 14px rgba(255,61,154,0), 0 0 0 24px rgba(11,182,214,0); } }
.seat-ring.speaking{ border-color:#ff5aa9; animation:sk-speak-wave 1.3s ease-out infinite; }
.seat-ring.speaking.me{ border-color:#ff3d9a; }
/* Chủ phòng: vầng sáng vàng dịu */
.seat.host:not(.empty) .seat-ring{ border-color:#ffd76a; }
.seat.host:not(.empty) .seat-name{ background:linear-gradient(90deg,#fff3c4,#ffe08a); color:#5c3d00; }
#screen-room.room-has-bg .seat.host:not(.empty) .seat-name{ background:linear-gradient(90deg,#ffe9a0,#ffc94a); color:#4a3000; text-shadow:none; }

/* ---- Tab Chat / BXH / Thành viên: thanh phân đoạn ---- */
.room-tabs{
  margin:12px 16px 8px; padding:4px; gap:2px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sk-soft-shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.room-tabs .tab-btn{
  flex:1; text-align:center; padding:8px 6px; background:transparent; border:0; box-shadow:none; color:#4d4270; font-weight:800; white-space:nowrap;
  transition:background .2s, color .2s, box-shadow .2s;
}
.room-tabs .tab-btn.active{ background:var(--sk-grad); color:#fff; box-shadow:0 8px 16px -8px rgba(255,61,154,.8); }

/* ---- Bộ lọc chat ---- */
.chat-filter-btn{ font-size:12.5px; }

/* ---- Tin nhắn trong phòng ---- */
.chat-list{ gap:7px; padding:6px 14px 12px; }
.chat-msg{
  border-radius:18px 18px 18px 6px; padding:8px 13px; font-size:14px; line-height:1.45;
  background:rgba(255,255,255,.92); border:1px solid rgba(36,26,61,.07);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:sk-chat-in .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sk-chat-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.chat-msg .cn{ color:#c2127a; font-weight:800; }
.chat-msg .cm{ color:var(--sk-ink); }
.chat-msg.system{ background:rgba(36,26,61,.06); border:0; box-shadow:none; border-radius:999px; padding:3px 12px; color:#6a6390; font-size:12px; animation:none; backdrop-filter:none; }
.chat-msg.gift-msg{
  background:linear-gradient(90deg,#fff6dc,#ffeaf4); border:1px solid #ffe3a1; box-shadow:0 8px 16px -12px rgba(230,166,39,.8);
}
.chat-msg.gift-msg .cm{ color:#8a5a00; }
.chat-msg.app-broadcast-chat-msg{ border-radius:16px; background:linear-gradient(90deg,#eefaff,#fff0f8); border:1px solid #cdeefa; color:#0b6b82; }
.chat-msg.has-chat-frame{ backdrop-filter:none; -webkit-backdrop-filter:none; border:0; box-shadow:none; }

/* ---- Banner: thông báo, ghim, bình chọn, nhạc ---- */
.room-broadcast-banner, .announce-banner, .music-bar{
  margin:8px 14px 0; border:1px solid var(--line); border-radius:18px; box-shadow:var(--sk-soft-shadow);
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.announce-banner{ background:linear-gradient(90deg,#fff6dc,#fff0f8); border-color:#ffe3a1; color:var(--sk-ink); font-weight:600; }
.music-bar{ background:linear-gradient(90deg,#eefaff,#f6eeff); border-color:#cdeefa; padding:9px 14px; }
.music-bar .mb-progress-wrap{ background:rgba(36,26,61,.1); height:4px; border-radius:4px; }
.music-bar .mb-progress{ background:var(--sk-grad); border-radius:4px; }
.poll-banner{ margin:8px 14px 0; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:var(--sk-card-shadow); }

/* ---- Rương quà + bong bóng phòng thu nhỏ ---- */
.rch-widget{ filter:drop-shadow(0 10px 14px rgba(36,26,61,.3)); transition:transform .15s; }
.rch-widget:active{ transform:scale(.92); }
.room-bubble{ border-radius:22px; background:rgba(255,255,255,.95); border:1px solid var(--line); box-shadow:0 20px 40px -16px rgba(36,26,61,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
/* Bong bóng phòng thu nhỏ: nền sáng nên tên/hint phải là chữ tối (trước đây tên trắng trên nền trắng, hint quá nhạt) */
.room-bubble-name{ color:var(--sk-ink); font-size:14px; font-weight:800; max-width:150px; }
.room-bubble-hint{ color:#5b4a82; font-size:12px; font-weight:600; }

/* ---- Vào phòng: sân khấu hiện dần ---- */
@keyframes sk-stage-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
#screen-room:not(.hidden) .stage{ animation:sk-stage-in .45s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion:reduce){
  .seat-ring.speaking, .chat-msg, #screen-room:not(.hidden) .stage{ animation:none; }
}

/* ============================================================
   v1.8.6 — PHÒNG THOẠI: thanh trên gọn gàng, hết "rối"
   Trước đây: viên EXP ngày đè lên nút ←, thẻ tên phòng nhồi 3 dòng
   (tên + danh hiệu + chế độ / ID / cấp độ + thanh EXP + chữ "còn … EXP") trong
   khung viên thuốc, và tới 6 nút icon chen ở bên phải khiến tên phòng bị bóp nhỏ.
   Giờ: hàng 1 = [←] [thẻ phòng 2 dòng] [❤️] [⋯]; hàng 2 (.room-quickbar, cuộn ngang)
   chứa cấp độ phòng, EXP ngày, danh hiệu phòng, Bảo Hộ, Nhiệm Vụ Tiệc, Boss, Quản lý.
   ============================================================ */

/* ---- Hàng 1: ← | thẻ phòng | ❤️ ⋯ ---- */
.room-topbar{ gap:8px; align-items:center; }
.room-topbar .icon-row{ gap:6px; flex-shrink:0; }
.room-title-wrap{
  flex:1 1 auto; min-width:0; margin:0; gap:10px;
  padding:5px 14px 5px 5px; border-radius:22px;
}
.room-title-wrap .room-avatar-wrap{ margin:1px; }
.room-title-wrap .room-avatar-img{ width:38px; height:38px; }
.rt-main{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:3px; }
.room-title-wrap .rt-name-row{ min-width:0; }
.room-title-wrap .rt-name{ display:block; max-width:100%; font-size:15.5px; line-height:1.2; }
.rt-sub-row{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
.room-title-wrap .rt-id{ flex:0 0 auto; font-size:11px; line-height:1.2; white-space:nowrap; }

/* Chip chế độ phòng: trước đây chữ trắng trên nền gần trắng → rất khó đọc trên skin sáng */
.room-title-wrap .room-mode-badge{
  min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis;
  padding:2px 8px; font-size:10.5px; text-shadow:none; box-shadow:none;
  color:color-mix(in srgb, var(--rmb-c, #0bb6d6) 62%, #241a3d);
  background:color-mix(in srgb, var(--rmb-c, #0bb6d6) 14%, #fff);
  border-color:color-mix(in srgb, var(--rmb-c, #0bb6d6) 38%, #fff);
}

/* ---- Hàng 2: huy hiệu nhanh, cuộn ngang, mờ dần ở mép phải ---- */
.room-quickbar{
  position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  margin:6px -16px 0; padding:8px 16px 2px;   /* đệm trên/phải để vòng 🎁 nhỏ của huy hiệu không bị cắt */
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.room-quickbar::-webkit-scrollbar{ display:none; }
.room-quickbar > *{ flex:0 0 auto; }
.room-quickbar .rt-explevel-row:empty,
.room-quickbar #room-title-badge-slot:empty{ display:none; }
.room-quickbar .icon-btn{ width:36px; height:36px; font-size:15px; }
.room-quickbar .pm-badge-btn{ width:42px; height:42px; }

/* Cấp độ phòng (gộp với Sôi Động): gọn 1 chip, bỏ dòng chữ "còn … EXP" (chạm vào để xem chi tiết) */
.room-quickbar .rt-explevel-row{ margin:0; }
.room-quickbar .rexp-badge{
  height:32px; padding:0 8px 0 10px; gap:7px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.room-quickbar .rexp-label{ color:var(--sk-ink); font-size:11.5px; }
.room-quickbar .rexp-bar-wrap{ width:40px; background:rgba(36,26,61,.12); border:0; }
.room-quickbar .rexp-sub{ display:none; }

/* EXP ngày: không còn absolute đè lên nút ←; nền sáng, phần đạt được tô xanh nhạt */
.room-quickbar .rexp-daily-corner{
  position:static; top:auto; left:auto; z-index:auto; height:32px; padding:0 12px 0 5px; gap:6px;
  background:linear-gradient(90deg, #a6e9f2 var(--rexp-pct,0%), rgba(255,255,255,.94) var(--rexp-pct,0%));
  border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
}
.room-quickbar .rexp-daily-icon{ background:#fff; box-shadow:inset 0 0 0 1px rgba(36,26,61,.12); }
.room-quickbar .rexp-daily-label{ color:var(--sk-ink); text-shadow:none; font-size:11.5px; }

/* Danh hiệu phòng: nền trắng để đọc được trên cả phòng có ảnh nền riêng */
.room-quickbar .room-title-badge{
  height:32px; padding:0 12px 0 9px; font-size:11px; text-shadow:none; box-shadow:var(--sk-soft-shadow);
  background:linear-gradient(135deg, color-mix(in srgb, currentColor 14%, #fff), #fff);
}

@media (prefers-reduced-motion:reduce){
  .room-quickbar .pm-badge-btn{ animation:none; }
}

/* ============================================================
   v1.8.7 — ĐĂNG NHẬP / ĐĂNG KÝ: form đăng ký 3 bước
   1 Tài khoản → 2 Hồ sơ → 3 Về bạn; thanh tiến trình, kiểm tra ngay khi gõ,
   xem trước hồ sơ, nút hiện/ẩn mật khẩu, quà chào mừng.
   ============================================================ */
.pw-wrap{ position:relative; }
.pw-wrap .name-input{ padding-right:50px; }
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:12px; background:transparent; font-size:17px; line-height:1;
}
.pw-toggle:active{ background:rgba(36,26,61,.06); }

.auth-switch{ margin-top:16px; font-size:13px; color:var(--text-dim); text-align:center; }
.auth-switch button{ background:none; padding:2px 4px; color:#e6146e; font-weight:800; font-size:13px; }

.opt-tag{ font-weight:400; text-transform:none; letter-spacing:normal; color:var(--text-faint); }

.name-input.is-ok{ border-color:#12b886; box-shadow:0 0 0 4px rgba(18,184,134,.1); }
.name-input.is-bad{ border-color:#e5484d; box-shadow:0 0 0 4px rgba(229,72,77,.1); }
.field-msg{ min-height:18px; margin-top:6px; font-size:12px; line-height:1.45; color:var(--text-faint); text-align:left; }
.field-msg.ok{ color:#0b8f69; font-weight:700; }
.field-msg.bad{ color:#d62855; font-weight:700; }

.reg-gift{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px;
  margin:0 0 14px; padding:9px 12px; border-radius:14px;
  background:linear-gradient(90deg,#fff6dc,#ffeaf4); border:1px solid #ffe3a1; color:#8a5a00; font-size:12.5px; font-weight:700;
}
.reg-gift b{ background:#fff; border-radius:999px; padding:2px 9px; color:#b4570a; font-weight:800; }
.reg-ref{ margin:-4px 0 12px; font-size:12.5px; color:var(--text-dim); text-align:center; }
.reg-ref b{ color:var(--text); }

.reg-stepper{ display:flex; align-items:flex-start; margin:2px 0 16px; }
.reg-step{ flex:0 0 60px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.reg-step.done{ cursor:pointer; }
.rs-dot{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; background:#fff; border:2px solid var(--line); color:var(--text-faint);
  transition:background .25s, border-color .25s, color .25s, transform .25s;
}
.rs-label{ font-size:11px; font-weight:700; color:var(--text-faint); white-space:nowrap; transition:color .25s; }
.reg-step.active .rs-dot{ background:var(--sk-grad); border-color:transparent; color:#fff; transform:scale(1.08); box-shadow:0 10px 16px -10px rgba(255,61,154,.85); }
.reg-step.active .rs-label, .reg-step.done .rs-label{ color:var(--text); }
.reg-step.done .rs-dot{ background:#12b886; border-color:transparent; color:#fff; }
.rs-line{ flex:1; height:3px; margin:14px -4px 0; border-radius:2px; background:var(--line); position:relative; overflow:hidden; }
.rs-line::after{ content:''; position:absolute; inset:0; width:0; background:#12b886; transition:width .35s ease; }
.rs-line.filled::after{ width:100%; }

.reg-preview{
  display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:10px 12px; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sk-soft-shadow);
}
.reg-preview.hidden{ display:none; }
.rp-av{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto; overflow:hidden; background:#f3effa;
  display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid #fff; box-shadow:0 0 0 1.5px rgba(36,26,61,.12);
}
.rp-av .av-letter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:22px; }
.rp-text{ min-width:0; }
.rp-name{ font-weight:800; font-size:16px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-user{ font-size:12px; color:var(--text-faint); min-height:16px; }

.reg-pane{ text-align:left; animation:reg-pane-in .28s cubic-bezier(.2,.8,.2,1) both; }
.reg-pane.hidden{ display:none; }
@keyframes reg-pane-in{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.reg-title{ font-size:17px; font-weight:800; color:var(--text); margin:0 0 4px; font-family:'Baloo 2',sans-serif; }
.reg-sub{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin:0 0 14px; }

.pw-meter{ display:flex; gap:5px; margin-top:8px; }
.pw-meter i{ flex:1; height:5px; border-radius:3px; background:var(--line); transition:background .2s; }
.pw-meter[data-score="1"] i:nth-child(1){ background:#e5484d; }
.pw-meter[data-score="2"] i:nth-child(-n+2){ background:#f5a524; }
.pw-meter[data-score="3"] i{ background:#12b886; }

.reg-actions{ display:flex; gap:10px; margin-top:18px; }
.reg-actions .btn-primary{ margin-top:0; flex:1; }
.btn-reg-back{
  flex:0 0 auto; padding:0 18px; border-radius:18px; border:1px solid var(--line); background:#fff;
  font-weight:700; font-size:14px; color:var(--text-dim);
}
.btn-reg-back.hidden{ display:none; }
.btn-primary.is-loading{ opacity:.7; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .reg-pane{ animation:none; }
  .rs-dot, .rs-line::after{ transition:none; }
}