:root{
    /* ===== Bảng màu MỚI: tông trắng/sáng hiện đại, cao cấp hơn (thay cho nền tối vũ trụ cũ).
       Giữ nguyên tên biến để mọi rule con (hàng trăm chỗ dùng var(--bg)/var(--panel)/var(--text)...)
       tự động ăn theo mà không cần sửa từng chỗ — đây là đòn bẩy lớn nhất để đổi tông màu toàn app. */
    --bg:#f7f6fb;
    --bg2:#fdfcff;
    --surface:#ffffff;
    --panel:rgba(23,17,38,.035);
    --panel-strong:rgba(23,17,38,.065);
    --line:rgba(23,17,38,.09);
    --magenta:#ff2e9a;
    --magenta-dim:#ff2e9a40;
    --cyan:#0bb6d6;
    --cyan-dim:#22d3ee33;
    --gold:#ffc94a;
    --gold-dim:#ffc94a40;
    --orange:#ff7a45;
    --orange-dim:#ff7a4540;
    --grad-hot:linear-gradient(120deg,#ff2e9a,#ff5f6d 55%,#ff9a44);
    --grad-hot-soft:linear-gradient(120deg,#ff2e9a1f,#ff9a441f);
    --grad-royal:linear-gradient(120deg,#7c3aed,#ff2e9a 60%,#ffc94a);
    --text:#181129;
    --text-dim:#655e82;
    --text-faint:#948caf;
    --danger:#ef4360;
    --radius:18px;
    --radius-sm:12px;
    /* Hệ thống đổ bóng dùng chung — tạo cảm giác "nổi khối" nhất quán cho card/nút/chip
       thay vì mỗi nơi tự bịa 1 kiểu bóng khác nhau (đây là điểm mấu chốt để nhìn "xịn" hơn). */
    --shadow-sm:0 2px 8px -4px rgba(23,17,38,.10);
    --shadow-md:0 10px 24px -12px rgba(23,17,38,.16);
    --shadow-lg:0 20px 44px -18px rgba(23,17,38,.22);
    font-family:'Inter',sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;} /* chặn Safari/Chrome tự phóng to chữ khi xoay ngang màn hình trên điện thoại */
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  button,a,.profile-btn,.btn-primary,.btn-mini,.chip,[onclick]{touch-action:manipulation;}
  html,body{height:100%;}
  /* Chặn triệt để hiệu ứng "bật đàn hồi" (rubber-band bounce) của Safari/Chrome mobile khi
     kéo quá đà lên/xuống/sang ngang — đây là nguyên nhân gây ra khoảng trống nền khó chịu
     lộ ra ở mép màn hình. Áp dụng cho MỌI phần tử trong #app (kể cả các khung cuộn lồng
     nhau như danh sách chat, bảng xếp hạng, tab ngang...) để không phải liệt kê từng class.
     touch-action:pan-y chặn hẳn cử chỉ kéo/vuốt SANG NGANG ngay từ đầu (không chỉ chặn hiệu
     ứng bật đàn hồi mà chặn luôn việc kéo lộ khoảng trống nền) — đây là phần cốt lõi để giao
     diện đứng yên, cố định giống các app di động thật (native app), chỉ cho phép cuộn dọc. */
  html,body{overflow-x:hidden; width:100%; max-width:100vw; touch-action:pan-y;}
  #app, #app *{overscroll-behavior:none;}
  html{overscroll-behavior:none;}
  body.room-page-body{height:100dvh; min-height:100dvh; max-height:100dvh; overflow:hidden; overscroll-behavior:none;}
  body{
    background:
      radial-gradient(900px 560px at 12% -8%, #ff2e9a14, transparent 60%),
      radial-gradient(800px 520px at 108% 6%, #22d3ee14, transparent 55%),
      radial-gradient(700px 480px at 50% 115%, #7c3aed12, transparent 60%),
      linear-gradient(180deg,var(--bg),var(--bg2) 55%,var(--bg));
    background-attachment:fixed;
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  #app{max-width:520px; margin:0 auto; height:100vh; height:100dvh; min-height:0; max-height:100dvh; position:relative; display:flex; flex-direction:column; overflow:hidden; touch-action:pan-y;}
  ::selection{background:var(--magenta-dim);}
  h1,h2,h3,.display{font-family:'Baloo 2',sans-serif;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  /* font-size:16px on all form fields stops iOS Safari from auto-zooming the page on focus */
  input,select,textarea{font-family:inherit; color:inherit; font-size:16px;}
  .hidden{display:none !important;}
  ::-webkit-scrollbar{width:6px; height:6px;}
  ::-webkit-scrollbar-thumb{background:#2b1f4522; border-radius:10px;}
  /* Thanh cuộn của khung phòng chính (room-scroll) làm to & rõ hơn hẳn mức mặc định
     mảnh 6px/13% opacity ở trên — để kéo bằng ngón tay trên di động dễ trúng hơn. */
  .room-scroll,
  .chat-list, .leaderboard-list, .members-list, .manage-panel{scrollbar-width:auto; scrollbar-color:#17112640 transparent;}
  .room-scroll::-webkit-scrollbar,
  .chat-list::-webkit-scrollbar, .leaderboard-list::-webkit-scrollbar, .members-list::-webkit-scrollbar, .manage-panel::-webkit-scrollbar{width:12px;}
  .room-scroll::-webkit-scrollbar-thumb,
  .chat-list::-webkit-scrollbar-thumb, .leaderboard-list::-webkit-scrollbar-thumb, .members-list::-webkit-scrollbar-thumb, .manage-panel::-webkit-scrollbar-thumb{background:#ffffff70; border-radius:999px; min-height:40px;}
  .room-scroll::-webkit-scrollbar-thumb:active,
  .chat-list::-webkit-scrollbar-thumb:active, .leaderboard-list::-webkit-scrollbar-thumb:active, .members-list::-webkit-scrollbar-thumb:active, .manage-panel::-webkit-scrollbar-thumb:active{background:#ffffffb0;}

  /* ---------- LOGIN ---------- */
  #screen-login{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:safe center; padding:32px 24px; gap:28px; text-align:center; overflow-y:auto; overflow-x:hidden; min-height:0;}
  .logo-mark{
    width:84px; height:84px; border-radius:26px;
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1px #ffffff14, 0 20px 50px -15px var(--magenta-dim);
  }
  .logo-mark img{width:100%; height:100%; object-fit:cover; display:block;}
  @keyframes spin-slow{to{filter:hue-rotate(360deg);}}
  .brand-title{font-size:34px; font-weight:800; letter-spacing:.5px;}
  .brand-sub{color:var(--text-dim); font-size:14.5px; max-width:320px; line-height:1.5;}
  .login-card{width:100%; background:linear-gradient(180deg,#2b1f450d,#2b1f4505); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 20px 60px -24px #000000aa, inset 0 1px 0 #ffffff14;}
  .field-label{font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; margin-bottom:8px; text-align:left;}
  .name-input{
    width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
    background:#2b1f4510; color:var(--text); font-size:16px; outline:none; transition:.2s;
  }
  .name-input:focus{border-color:var(--magenta);}
  .avatar-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:14px 0 4px;}
  .avatar-opt{
    aspect-ratio:1; border-radius:14px; background:#2b1f450c; border:2px solid transparent;
    display:flex; align-items:center; justify-content:center; font-size:22px; transition:.15s;
  }
  .avatar-opt.selected{border-color:var(--cyan); background:var(--cyan-dim); transform:scale(1.06);}
  .gender-pick{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 4px;}
  .gender-opt{
    padding:10px 6px; border-radius:12px; background:#2b1f450c; border:2px solid transparent;
    font-size:13.5px; font-weight:700; color:var(--text-dim); transition:.15s; text-align:center;
  }
  .gender-opt.selected{border-color:var(--cyan); background:var(--cyan-dim); color:var(--text);}
  /* Quyen rieng tu ho so: bat/tat hien thi gioi tinh & tuoi voi nguoi khac.
     Dung chung 1 component .lm-toggle-row cho ca 2 cong tac, style giong
     iOS switch (input checkbox that + track/thumb ve bang CSS). */
  .lm-toggle-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border-radius:12px; background:#2b1f450c; border:1px solid var(--line);
    margin-top:8px; font-size:12.5px; color:var(--text-dim);
  }
  .lm-toggle{position:relative; width:40px; height:23px; flex-shrink:0;}
  .lm-toggle input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
  .lm-toggle-track{
    position:absolute; inset:0; border-radius:999px; background:var(--line); transition:.2s;
  }
  .lm-toggle-track::after{
    content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
    background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
  }
  .lm-toggle input:checked ~ .lm-toggle-track{background:var(--cyan);}
  .lm-toggle input:checked ~ .lm-toggle-track::after{transform:translateX(17px);}
  .age-chip{
    display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; color:var(--text-dim);
    background:var(--panel); border-radius:999px; padding:2px 7px; margin-left:3px; vertical-align:middle;
  }
  .rel-chip{
    display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700;
    border-radius:999px; padding:2px 8px; margin-left:3px; vertical-align:middle;
  }
  .rel-chip.rel-single{background:#2fd88f2b; color:#5be3ac;}
  .rel-chip.rel-married{background:#ff2e9a2b; color:#ff7fc2;}
  .rel-chip.rel-dating{background:#ff8a2b2b; color:#ffb066;}
  .rel-chip.rel-secret{background:var(--panel); color:var(--text-dim);}
  .rel-pick{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0 0 4px;}
  .btn-primary{
    width:100%; padding:15px; border-radius:var(--radius-sm); font-weight:800; font-size:16px; margin-top:18px;
    background:var(--grad-hot); color:#fff; letter-spacing:.02em;
    box-shadow:0 12px 24px -10px var(--magenta-dim);
    position:relative; overflow:hidden;
  }
  .btn-primary::after{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, #ffffff55, transparent); transform:skewX(-20deg);
    animation:btn-sheen 3.2s ease-in-out infinite;
  }
  @keyframes btn-sheen{0%{left:-60%;} 40%{left:130%;} 100%{left:130%;}}
  .btn-primary:active{transform:scale(.98);}

  /* ---------- TOPBAR (trang chủ) ----------
     Giống hệt lý do của .bottom-nav ở dưới: position:sticky/fixed LỒNG bên trong một
     container có overflow-y:auto + -webkit-overflow-scrolling:touch (#screen-lobby) bị lỗi
     trên WebKit/iOS — có lúc không vẽ đúng chỗ, cuộn dọc/ngang làm nó biến mất hẳn (mất
     hàng xu/đậu/kim cương). Nên thanh này giờ nằm NGOÀI #screen-lobby (xem index.php) và
     dùng position:fixed thật sự như .bottom-nav — luôn đứng yên ở đầu màn hình, không trôi
     theo bất kỳ hướng cuộn/vuốt nào nữa. */
  .topbar{
    display:none; /* mặc định ẩn — chỉ hiện khi #screen-lobby đang active, xem rule bên dưới */
    align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:8px;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 16px;
    position:fixed; left:calc(50% - 260px); top:0; width:520px; z-index:40;
    background:linear-gradient(180deg,var(--bg)f2,var(--bg)cc 80%,transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    touch-action:pan-y; /* chặn kéo/trôi ngang trên thanh này */
  }
  #screen-lobby:not(.hidden) ~ .topbar{ display:flex; }
  /* BUG: .topbar dùng chung z-index:40 với .bottom-nav (CỐ Ý nổi trên mọi app-page — xem
     comment ở .modal-overlay.app-page) nhưng .topbar KHÔNG được thiết kế để hiện trong lúc
     đang ở 1 app-page (Tin nhắn/Cá nhân/Quảng trường/BXH), vì các trang đó có header riêng
     (vd .dm-thread-header với nút quay lại ‹). Do openModal() của app-page KHÔNG ẩn
     #screen-lobby (chỉ đè lớp phủ lên trên), .topbar vẫn hiện và nằm ĐÈ LÊN header riêng đó,
     che mất nút quay lại/tên người chat.
     Từng thử hạ z-index của .topbar xuống dưới 35 để nó bị lớp nền app-page che khuất — nhưng
     cách đó lại vô tình khiến các nút bên trong .topbar (Đậu/Cửa hàng/Trang chủ) không bấm
     được ngay cả lúc đang ở Trang chủ bình thường (một phần tử khác trên Trang chủ nằm giữa
     30-40 vô tình đè lên). Giữ nguyên z-index:40 như cũ (an toàn, đã test) và ẩn hẳn .topbar
     bằng display:none khi có app-page đang mở — xem body.app-page-open bên dưới và cờ
     tương ứng được bật/tắt trong openModal()/closeModal() (app.js). */
  body.app-page-open .topbar{ display:none !important; }
  @media (max-width:560px){ .topbar{ left:0; width:100%; } }
  .brand-mini{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; white-space:nowrap; flex-shrink:0; background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .brand-mini-logo{width:26px; height:26px; border-radius:9px; object-fit:cover; flex-shrink:0;}
  .brand-mini .dot{width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--orange); animation:dot-glow 2.4s ease-in-out infinite;}
  @keyframes dot-glow{0%,100%{box-shadow:0 0 6px var(--orange);} 50%{box-shadow:0 0 16px var(--magenta), 0 0 26px var(--magenta-dim);}}
  .wallet{
    display:flex; align-items:center; gap:7px; flex-wrap:nowrap; justify-content:flex-end;
    min-width:0; /* cho phép co lại thay vì đẩy tràn layout, để overflow-x bên dưới phát huy tác dụng */
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    cursor:grab;
    /* touch-action:pan-x phải đặt NGAY TỪ ĐẦU (không chỉ lúc đang kéo) để trình duyệt
       nhận diện đúng hướng cử chỉ ngay từ lúc chạm xuống. Nếu để mặc định, .wallet sẽ
       kế thừa touch-action:pan-y từ .topbar cha -> browser giằng co giữa chặn cuộn dọc
       và ý định kéo ngang -> vuốt bị khựng/lag lúc bắt đầu chạm. */
    touch-action:pan-x;
    scrollbar-width:none; -ms-overflow-style:none; /* ẩn thanh cuộn nhưng vẫn kéo được bằng tay/lăn chuột */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  }
  .wallet:active{ cursor:grabbing; }
  .wallet::-webkit-scrollbar{ display:none; height:0; }
  /* Khi đang kéo bằng CHUỘT: tắt scroll-behavior:smooth (nếu không mỗi lần cập nhật
     scrollLeft sẽ bị trình duyệt tự chèn hoạt ảnh dồn lại -> giật/lag rõ rệt),
     và tắt bôi đen chữ / con trỏ text để thao tác kéo mượt như native. */
  .wallet.dragging-wallet{
    scroll-behavior:auto !important;
    user-select:none; -webkit-user-select:none;
  }
  .chip{
    display:flex; align-items:center; gap:5px; background:var(--panel-strong); border:1px solid var(--line);
    padding:6px 11px 6px 9px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; flex-shrink:0;
    box-shadow:inset 0 1px 0 #ffffff90, var(--shadow-sm); transition:transform .15s;
  }
  .chip:active{transform:scale(.94);}
  .chip.coin{color:#3d2400; background:linear-gradient(135deg,#ffe08a,var(--gold)); border-color:#ffd76a55;}
  .chip.diamond{color:#052a33; background:linear-gradient(135deg,#a6faff,var(--cyan)); border-color:#35f2ff55;}
  .chip.bean{color:#0b3a1f; background:linear-gradient(135deg,#bdf5cf,#57d98f); border-color:#57d98f55; cursor:pointer;}
  .profile-btn{
    width:38px; height:38px; border-radius:50%; background:var(--panel-strong); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .15s;
    flex-shrink:0;
  }
  .profile-btn:active{transform:scale(.9);}
  .profile-btn.lang-switch-btn{width:auto; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; gap:2px;}

  /* ---------- DM TOAST (thông báo tin nhắn mới, nổi đè lên mọi màn hình) ---------- */
  .dm-toast-wrap{
    position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 8px);
    z-index:9500; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:0 16px; pointer-events:none;
  }
  .dm-toast{
    pointer-events:auto; width:100%; max-width:380px; display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:16px; cursor:pointer;
    background:linear-gradient(135deg,#3a1a66f0,#1c0f3af5); border:1px solid #ffffff22;
    box-shadow:0 14px 30px -10px #000000aa, 0 0 0 1px #ff2e9a33;
    transform:translateY(-120%); opacity:0; transition:transform .35s cubic-bezier(.22,1.2,.4,1), opacity .3s ease;
  }
  .dm-toast.show{transform:translateY(0); opacity:1;}
  .dm-toast .dt-avatar{
    width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:var(--grad-royal); display:flex; align-items:center; justify-content:center; font-size:18px;
  }
  .dm-toast .dt-avatar img{width:100%; height:100%; object-fit:cover;}
  .dm-toast .dt-body{flex:1; min-width:0;}
  .dm-toast .dt-name{font-size:13.5px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .dm-toast .dt-msg{font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
  .dm-toast .dt-close{
    flex-shrink:0; width:22px; height:22px; border-radius:50%; background:#ffffff14;
    display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-dim);
  }


  /* ---------- LOBBY ---------- */
  /* padding-top dự phòng bằng CSS var, được JS đo chiều cao thật của .topbar rồi set lại
     cho chính xác trên từng máy (xem nudgeLobbyScrollForStickyTopbar trong app.js) — tránh
     nội dung bị thanh topbar cố định đè lên. touch-action:pan-y để chặn vuốt/trôi ngang. */
  #screen-lobby{
    flex:1; padding:0 18px 84px; padding-top:calc(var(--lobby-topbar-h, 128px) + 4px);
    overflow-y:auto; overflow-x:hidden; min-height:0; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  }
  .section-head{display:flex; align-items:center; justify-content:space-between; margin:20px 0 12px;}
  .section-head h2{font-size:18px; font-weight:700;}
  .section-head .link-btn{font-size:12.5px; color:var(--cyan); font-weight:700;}
  .bonus-banner{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:linear-gradient(120deg,#f2e9ff,#e8f6ff); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin-top:10px; box-shadow:var(--shadow-sm);
  }
  .bonus-banner .txt{font-size:13.5px; color:var(--text-dim); line-height:1.4;}
  .bonus-banner .txt b{color:var(--text); display:block; font-size:15px; margin-bottom:2px;}
  .btn-mini{background:linear-gradient(160deg,#ffe08a,var(--gold)); color:#251400; font-weight:800; padding:9px 14px; border-radius:10px; font-size:13px; white-space:nowrap; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s;}
  .btn-mini:active{transform:scale(.96); box-shadow:none;}
  .btn-mini:disabled{opacity:.4;}

  .room-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  .room-list-footer{
    grid-column:1/-1;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:26px 20px 34px; color:var(--text-dim); font-size:13px;
  }
  .room-list-footer .rlf-emoji{font-size:30px; opacity:.7;}
  .room-list-footer .rlf-text{line-height:1.5;}
  .room-list-footer .rlf-btn{margin-top:4px; padding:10px 22px; background:var(--grad-hot); color:#fff; font-weight:700;}

  /* ---------- ROOM GRID CARD (kiểu Bigo/Yalla: ảnh full-bleed, badge nổi, info phủ đáy) ---------- */
  .room-card{
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    aspect-ratio:1; border-radius:18px; overflow:hidden; cursor:pointer;
    background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-sm);
    transition:transform .15s, box-shadow .15s;
  }
  .room-card:active{transform:scale(.97); box-shadow:var(--shadow-md);}
  .room-cover{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:44px; opacity:.9;
  }
  .room-cover img{ width:100%; height:100%; object-fit:cover; }
  .room-card::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent, #000000b0 78%, #000000d8);
  }
  .room-card-top{
    position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between;
    padding:9px 9px 0;
  }
  .room-card-tag{
    display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; letter-spacing:.01em;
    color:#fff; padding:4px 8px; border-radius:999px; white-space:nowrap;
    background:var(--panel-strong); border:1px solid #ffffff2a; backdrop-filter:blur(6px); text-shadow:0 1px 3px #00000066;
  }
  .room-card-tag.hot{background:linear-gradient(135deg,#ff2e9a,#ff5f6d); border-color:transparent; box-shadow:0 4px 12px -5px var(--magenta-dim);}
  .room-card-tag.pk{background:linear-gradient(135deg,#7c3aed,#2563eb); border-color:transparent;}
  .room-card-viewers{
    display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:#fff;
    background:#00000070; border:1px solid #ffffff26; padding:4px 8px; border-radius:999px; backdrop-filter:blur(6px);
    flex-shrink:0;
  }
  .room-card-lock{ font-size:12px; filter:drop-shadow(0 1px 3px #000); }
  .room-card-bottom{ position:relative; z-index:2; padding:0 10px 10px; display:flex; flex-direction:column; gap:4px;}
  .room-card-name{ color:#fff; font-weight:800; font-size:13.5px; line-height:1.25; text-shadow:0 1px 4px #00000088;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .room-card-host{ display:flex; align-items:center; gap:5px; min-width:0; }
  .room-card-host-av{ width:18px; height:18px; border-radius:50%; flex-shrink:0; object-fit:cover; box-shadow:0 0 0 1.5px #ffffff70; }
  .room-card-host-name{ font-size:11px; color:#ffffffcc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .room-card-live-dot{width:6px; height:6px; border-radius:50%; background:#ff4757; box-shadow:0 0 8px #ff4757; animation:pulse-dot 1.4s infinite; flex-shrink:0;}
  @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}

  /* ---------- FEED PROMO BANNER (chèn xen giữa lưới phòng, kiểu "Bản Sửa Đổi EXP Phòng") ---------- */
  .feed-promo-banner{
    grid-column:1/-1; position:relative; border-radius:18px; overflow:hidden; min-height:108px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; padding:16px 40px;
    background:linear-gradient(135deg,#5b3bd6,#8a5cf6 45%,#c084fc);
    box-shadow:0 14px 30px -16px #5b3bd688, inset 0 1px 0 #ffffff2a;
  }
  .feed-promo-banner::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(60% 90% at 15% 20%, #ffffff33, transparent 60%), radial-gradient(50% 80% at 90% 85%, #ffe08a3a, transparent 60%);
  }
  .feed-promo-banner-title{ position:relative; z-index:1; color:#fff; font-weight:800; font-size:16px; line-height:1.3; text-shadow:0 2px 8px #00000033; }
  .feed-promo-banner-sub{ position:relative; z-index:1; color:#ffffffe0; font-size:12px; font-weight:600; }
  .feed-promo-banner-close{
    position:absolute; top:8px; right:8px; z-index:2; width:24px; height:24px; border-radius:50%;
    background:#00000040; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .room-title-badge{
    display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; letter-spacing:.01em;
    border:1px solid; border-radius:999px; padding:2.5px 9px 2.5px 7px; white-space:nowrap; flex-shrink:0;
    background:linear-gradient(135deg, color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 6%, transparent));
    box-shadow:0 2px 8px -3px color-mix(in srgb, currentColor 65%, transparent), inset 0 1px 0 #ffffff22;
    text-shadow:0 1px 3px #00000055;
  }
  .room-count{
    font-size:12px; font-weight:800; color:#fff; display:flex; align-items:center; gap:4px; flex-shrink:0;
    background:linear-gradient(135deg,#ff6a9d,var(--orange)); padding:5px 10px; border-radius:999px;
    box-shadow:0 4px 12px -5px var(--orange-dim);
  }
  /* .room-lv-tag replaced by the gamified .lvbadge/.rlvbadge tier system — see LEVEL / TIER BADGES section below */

  /* ---------- BOTTOM TAB BAR (mobile nav, kiểu StarMaker/voice app) ----------
     Thanh này giờ nằm ngang hàng (sibling) với #screen-lobby / #screen-room trong HTML
     (xem index.php) để tránh lỗi WebKit/iOS: position:fixed lồng trong container có
     -webkit-overflow-scrolling:touch sẽ bị "kẹt" theo scroll của container thay vì dính
     vào viewport, gây khoảng trống trắng/đen ở chân trang. Vì không còn nằm trong
     #screen-lobby nên ẩn/hiện phải xử lý bằng CSS dựa trên trạng thái của #screen-lobby. */
  .bottom-nav{
    display:none; /* mặc định ẩn — chỉ hiện khi #screen-lobby đang active, xem rule bên dưới */
    position:fixed; left:calc(50% - 260px); bottom:0; width:520px; z-index:40;
    align-items:flex-end; justify-content:space-around;
    background:linear-gradient(180deg, #ffffff99, #ffffffea 45%);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;
    padding:8px 4px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -18px rgba(43,31,69,.18), inset 0 1px 0 #ffffff;
  }
  #screen-lobby:not(.hidden) ~ .bottom-nav{ display:flex; }
  @media (max-width:560px){ .bottom-nav{ left:0; width:100%; border-radius:0; } }

  .bn-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:transparent; border:none; padding:6px 2px 4px; color:var(--text-faint); font-size:10.5px; font-weight:700;
    -webkit-tap-highlight-color:transparent; transition:color .15s, transform .15s;
  }
  .bn-item:active{ transform:scale(.92); }
  .bn-item .bn-icon{ font-size:21px; line-height:1; position:relative; display:inline-block; opacity:.7; transition:.15s; transform:translateY(0);}
  .bn-item.active{ color:var(--orange); }
  .bn-item.active .bn-icon{ opacity:1; transform:translateY(-2px) scale(1.08); filter:drop-shadow(0 0 8px var(--magenta-dim)); }
  .bn-label{ letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

  .bn-center{ flex:0 0 auto; padding:0; margin:0 6px; position:relative; }
  .bn-center::before{
    content:''; position:absolute; left:50%; top:-27px; transform:translateX(-50%);
    width:60px; height:60px; border-radius:50%; background:var(--grad-hot);
    filter:blur(10px); opacity:.55; animation:bn-pulse 2.2s ease-in-out infinite; z-index:-1;
  }
  @keyframes bn-pulse{0%,100%{opacity:.4; transform:translateX(-50%) scale(.94);} 50%{opacity:.7; transform:translateX(-50%) scale(1.06);}}
  .bn-center-icon{
    width:54px; height:54px; margin-top:-25px; border-radius:50%;
    background:var(--grad-hot);
    display:flex; align-items:center; justify-content:center;
    font-size:27px; font-weight:800; color:#fff; line-height:1;
    box-shadow:0 10px 24px -6px var(--magenta-dim), 0 0 0 5px var(--bg);
  }
  .bn-center:active .bn-center-icon{ transform:scale(.92); }

  /* ---------- CREATE ROOM MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:#2b1f4559; backdrop-filter:blur(4px); z-index:100;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .modal-overlay.center{align-items:center; padding:20px;}
  .modal-sheet{
    width:100%; max-width:520px; background:linear-gradient(180deg,#ffffffff,#fdf9ffff); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line);
    border-radius:22px 22px 0 0; padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 28px); max-height:86vh; overflow-y:auto; overflow-x:hidden; position:relative;
    box-shadow:0 -20px 50px -20px #2b1f4530;
    /* Modal có nền sáng (trắng) nhưng biến màu chữ mặc định (--text, --text-dim, --text-faint)
       được thiết kế cho nền tối nên chữ bị nhạt, khó đọc trên nền trắng. Override lại 3 biến
       này ngay trong phạm vi modal-sheet để mọi rule con dùng var(--text)/var(--text-dim)/
       var(--text-faint) tự động đổi sang tông tối, đảm bảo độ tương phản tốt trên nền trắng. */
    --text:#241a3d;
    --text-dim:#5c4f80;
    --text-faint:#8b7fab;
    --line:rgba(43,31,69,.14);
    --panel:rgba(43,31,69,.05);
    --panel-strong:rgba(43,31,69,.09);
    /* Quan trọng: "color" là thuộc tính kế thừa, và <body> đã set color:var(--text) rồi —
       giá trị SÁNG đó được tính sẵn ở body và children sẽ kế thừa y nguyên nếu không tự khai
       báo "color" riêng (ví dụ tiêu đề modal, tên trong danh sách chat...). Chỉ đổi biến CSS
       thôi không đủ; phải set lại "color" ngay tại modal-sheet để mọi chữ con không có màu
       riêng cũng kế thừa đúng tông tối mới. */
    color:var(--text);
  }
  .modal-overlay.center .modal-sheet{border-radius:22px;}

  /* ---------- APP PAGE (Tin nhắn / Trang cá nhân / Quảng trường / BXH) ----------
     4 mục này được điều hướng bằng History API (xem app.js) nên về mặt hiển thị
     cũng cần trông như 1 trang riêng toàn màn hình, không phải bảng nổi (sheet)
     với nền mờ phía sau như các popup khác. */
  .modal-overlay.app-page{
    background:var(--bg);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    align-items:stretch; justify-content:stretch;
    animation:appPageSlideIn .22s ease;
    /* Thấp hơn z-index:40 của .bottom-nav (xem style.css dòng ~321) để 6 nút chức năng
       dưới cùng vẫn nổi lên trên các trang app-page (Cá nhân/Quảng trường/Tin nhắn/BXH),
       giống hệt trang chủ, thay vì bị lớp nền tối của trang này che mất hoàn toàn. */
    z-index:35;
  }
  .modal-overlay.app-page .modal-sheet{
    width:100%; max-width:100%; height:100%; max-height:100%;
    border-radius:0; box-shadow:none; border:none;
    padding-top:0;
    /* Chừa khoảng trống bằng đúng chiều cao .bottom-nav (giống #screen-lobby đang chừa
       84px ở dưới) để nội dung cuộn không bị thanh điều hướng nổi che mất dòng cuối. */
    padding-bottom:84px;
  }
  .modal-overlay.app-page .modal-title{
    /* BUG: trước đây background:var(--bg) — luôn là màu TỐI toàn cục, trong khi mọi
       .modal-sheet đều có nền TRẮNG và override --text sang màu chữ TỐI cho khớp. Header
       dính nền tối + chữ tối -> tiêu đề, nút quay lại, nút bên trong header của MỌI trang
       app-page (danh sách tin nhắn, nhóm chat, v.v.) bị vô hình hoàn toàn. Dùng màu nền
       sáng khớp với modal-sheet thay vì var(--bg). */
    position:sticky; top:0; z-index:3; background:#fdf9ffee; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    margin:0 -20px 16px; padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 14px;
    border-bottom:1px solid var(--line);
  }
  @keyframes appPageSlideIn{
    from{ opacity:0; transform:translateX(28px); }
    to{ opacity:1; transform:translateX(0); }
  }
  @media (prefers-reduced-motion:reduce){
    .modal-overlay.app-page{ animation:none; }
  }

  /* ---------- HIỆU ỨNG HỒ SƠ ("hiệu ứng vào phòng" tái dùng khi xem trang cá nhân) ---------- */
  .profile-fx-layer{
    position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1;
    border-radius:inherit;
  }
  .profile-fx-layer .room-effect-overlay{ position:absolute; inset:0; }
  .modal-title{font-size:19px; font-weight:800; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center;}
  .close-x{font-size:20px; color:var(--text-faint); width:30px; height:30px; display:flex; align-items:center; justify-content:center;}
  .theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 6px;}
  .theme-opt{height:52px; border-radius:12px; border:2px solid transparent; position:relative;}
  .theme-opt.selected{border-color:var(--magenta);}
  .theme-opt.selected::after{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; text-shadow:0 1px 4px #000;}
  .category-grid{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px;}
  .category-opt{padding:8px 14px; border-radius:20px; border:1.5px solid var(--line); background:var(--panel); font-size:13px; cursor:pointer; color:var(--text);}
  .category-opt.selected{border-color:#ff2e9a; background:rgba(255,46,154,.1); font-weight:700;}
  .room-category-badge{display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; background:var(--panel-strong); border:1px solid var(--line); margin-right:6px;}
  .emoji-picker-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:12px 0 6px; max-height:340px; overflow-y:auto; overflow-x:hidden;}
  .emoji-opt{font-size:24px; padding:8px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer;}
  .emoji-opt:active{background:var(--panel-strong);}
  .gif-picker-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0 6px; max-height:420px; overflow-y:auto; overflow-x:hidden;}
  .gif-opt{padding:0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--panel); cursor:pointer;}
  .gif-opt img{width:100%; height:110px; object-fit:cover; display:block;}
  .gif-picker-loading{grid-column:1/-1; text-align:center; padding:24px 8px; color:var(--muted, #999); font-size:14px;}
  .chat-gif-img{max-width:180px; max-height:180px; border-radius:10px; margin-top:4px; display:block;}

  /* ---------- ROOM SCREEN (redesigned) ---------- */
  #screen-room{flex:1; display:flex; flex-direction:column; position:relative; min-height:0;}
  .room-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch;}
  .room-scroll > .room-hero,
  .room-scroll > .broadcast-banner,
  .room-scroll > .announce-banner,
  .room-scroll > .music-bar{flex-shrink:0;}
  .room-scroll > .panel-area{flex:1 1 auto; min-height:0;}
  .room-hero{
    position:relative; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0; overflow:hidden; border-radius:0 0 26px 26px;
    box-shadow:inset 0 -1px 0 #ffffff10;
  }
  .room-hero::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% -10%, #ff2e9a22, transparent 60%);
  }
  .room-hero::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:78px; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent, var(--bg) 92%);
  }
  .room-hero-bg{position:absolute; inset:0; opacity:.5; filter:blur(0px) saturate(1.1);}
  /* Lớp nền tuỳ chỉnh của phòng: nằm ở #screen-room (bao trọn cả hero lẫn phần chat/BXH/
     thành viên bên dưới), z-index ÂM để luôn ở dưới cùng, không che nội dung nào cả dù
     đặt trước .room-scroll trong DOM. */
  .room-bg-layer{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    opacity:0; transition:opacity .35s ease;
  }
  .room-bg-layer.active{opacity:.55;}
  /* Khi phòng có ảnh nền tuỳ chỉnh: bỏ dải mờ dần sang màu nền đặc (--bg) ở cuối hero,
     để ảnh nền chảy liền mạch xuống tới khu vực chat thay vì bị 1 dải màu đặc cắt ngang. */
  #screen-room.room-has-bg .room-hero::after{background:none;}

  /* ===== PK Phòng ===== */
  .pk-battle-bar{
    display:flex; align-items:center; gap:8px; margin:8px 12px 0; padding:8px 10px;
    background:linear-gradient(90deg, #ff4d6d33, #7cd67222); border-radius:14px;
    border:1px solid #ffffff22; position:relative; z-index:3;
  }
  .pk-bar-side{flex:1; min-width:0;}
  .pk-bar-a{text-align:left;} .pk-bar-b{text-align:right;}
  .pk-bar-name{font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pk-bar-score{font-size:13px; font-weight:800; color:#ffc94a;}
  .pk-bar-mid{flex:0 0 auto; width:110px; text-align:center;}
  .pk-bar-progress{height:8px; border-radius:6px; background:#00000033; overflow:hidden; display:flex;}
  .pk-bar-progress-fill{height:100%; background:linear-gradient(90deg,#ff4d6d,#ffc94a); width:50%; transition:width .5s ease;}
  .pk-bar-timer{font-size:10px; color:var(--text-dim); margin-top:2px;}

  .pk-invite-banner{
    position:fixed; left:50%; top:74px; transform:translateX(-50%); z-index:400;
    display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px;
    background:#1a1f2eee; border:1px solid #ff4d6d55; box-shadow:0 8px 24px #00000055;
    max-width:92vw; color:#f4f0ff;
  }
  .pk-invite-banner-text{font-size:12.5px; line-height:1.4;}
  .pk-invite-banner-actions{display:flex; gap:6px; flex-shrink:0;}
  .pk-invite-banner-actions .btn-mini{padding:7px 12px; font-size:12px;}
  .room-topbar{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
  .back-btn{
    width:36px; height:36px; border-radius:50%; background:#00000055; display:flex; align-items:center; justify-content:center;
    font-size:18px; border:1px solid #ffffff1c; backdrop-filter:blur(10px); transition:transform .15s, background .15s, box-shadow .15s;
    box-shadow:0 4px 14px -6px #00000088;
  }
  .back-btn:active{transform:scale(.9); background:#00000088;}
  .room-title-wrap{
    flex:1; margin:0 10px; min-width:0; display:flex; align-items:center; gap:8px;
    background:linear-gradient(120deg,#ffffff10,#ffffff04); border:1px solid #ffffff14; border-radius:999px;
    padding:5px 12px 5px 5px; backdrop-filter:blur(10px);
  }
  .room-title-wrap .rt-name{font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:linear-gradient(90deg,#fff,#ffe9f6); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .room-title-wrap .rt-id{font-size:10.5px; color:var(--text-faint); letter-spacing:.02em;}
  .room-title-wrap .rt-name-row{display:flex; align-items:center; gap:6px; min-width:0;}
  .room-avatar-img{width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1.5px solid #ffffff33; box-shadow:0 4px 12px -4px #000000aa;}
  .icon-btn{
    width:36px; height:36px; border-radius:50%; background:#00000055; display:flex; align-items:center; justify-content:center;
    font-size:16px; border:1px solid #ffffff1c; backdrop-filter:blur(10px); transition:transform .15s, background .15s, box-shadow .15s;
    box-shadow:0 4px 14px -6px #00000088;
  }
  
  .icon-btn:active{transform:scale(.9); background:#00000088;}
  .icon-row{display:flex; gap:7px; align-items:center;}

  /* ---------- PARTY MISSION BADGE (🎁 nhiệm vụ tiệc, kiểu StarMaker) ---------- */
  .pm-badge-btn{
    position:relative;
    width:44px; height:44px;
    border-radius:14px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 20%, #ffffff40, transparent 45%),
      linear-gradient(155deg, #8a5cf6 0%, #5a2fd6 65%, #2c1466 100%);
    border:1px solid #2b1f4526;
    box-shadow:0 4px 14px -4px #5a2fd699, inset 0 1px 0 #ffffff30;
    overflow:visible;
    transition:transform .15s;
    animation:pmBadgePulse 2.4s ease-in-out infinite;
  }
  .pm-badge-btn:active{transform:scale(.92);}
  @keyframes pmBadgePulse{
    0%,100%{ box-shadow:0 4px 14px -4px #5a2fd699, inset 0 1px 0 #ffffff30; }
    50%{ box-shadow:0 4px 20px -2px #ff5c9eaa, inset 0 1px 0 #ffffff30; }
  }
  .pm-badge-ring{
    position:absolute; top:-7px; right:-7px;
    width:18px; height:18px; border-radius:50%;
    background:linear-gradient(160deg,#ffd36b,#e8a13a);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; box-shadow:0 2px 6px #00000066;
  }
  .pm-badge-icon{font-size:18px; line-height:1; margin-top:1px; filter:drop-shadow(0 2px 3px #00000055);}
  .pm-badge-count{font-size:8.5px; font-weight:800; color:#f0e9ff; margin-top:1px; letter-spacing:.01em;}
  .pm-badge-progress{
    position:absolute; bottom:4px; left:6px; right:6px; height:3px; border-radius:2px;
    background:#00000055; overflow:hidden;
  }
  .pm-badge-progress > span{
    display:block; height:100%; width:0%; border-radius:2px;
    background:linear-gradient(90deg,#54e6c1,#8bffdc);
  }

  .room-mode-badge{
    font-size:10.5px; font-weight:800; padding:2.5px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0;
    display:inline-flex; align-items:center; gap:4px; letter-spacing:.01em;
    border:1px solid color-mix(in srgb, var(--rmb-c, var(--cyan)) 55%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--rmb-c, var(--cyan)) 30%, transparent), color-mix(in srgb, var(--rmb-c, var(--cyan)) 8%, transparent));
    color:#fff; text-shadow:0 1px 3px #00000066;
    box-shadow:0 2px 8px -3px color-mix(in srgb, var(--rmb-c, var(--cyan)) 60%, transparent), inset 0 1px 0 #ffffff22;
  }
  .room-mode-opt{
    display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:14px;
    border:1.5px solid var(--line); background:var(--panel); font-size:13px; font-weight:700; color:var(--text);
  }
  .room-mode-opt .rmo-emoji{font-size:26px;}
  .room-mode-opt.selected{border-color:#ff2e9a; background:rgba(255,46,154,.08); color:#ff2e9a;}
  .stage{position:relative; z-index:2; padding:14px 10px 8px;}
  .seat-arc{display:flex; justify-content:center; gap:14px; flex-wrap:nowrap;}
  /* ---------- Chế độ GHÉP ĐÔI: 1 ghế MC trên cùng, bên dưới là 4 cặp ghế đôi ---------- */
  .stage.mode-dating .seat-arc{justify-content:center; margin-bottom:6px;}
  .stage.mode-dating .stage-row2{display:flex; flex-direction:column; gap:12px; margin-top:10px;}
  .stage.mode-dating .seat-pair{display:flex; align-items:center; justify-content:center; gap:10px;}
  .stage.mode-dating .seat-pair .seat{width:20% !important;}
  .stage.mode-dating .pair-heart{font-size:15px; flex-shrink:0;}
  /* ---------- Chế độ CA HÁT: ghế host lớn hơn, có ánh đèn sân khấu ---------- */
  .stage.mode-karaoke .seat.host .seat-avatar-wrap{width:106%;}
  .stage.mode-karaoke .seat.host .seat-avatar{box-shadow:0 0 0 3px #ffc94a33, 0 10px 26px -8px #ffc94a88, inset 0 1px 0 #ffffff1f;}
  .stage.mode-karaoke::before{
    content:''; position:absolute; left:0; right:0; top:0; height:120px; z-index:0; pointer-events:none;
    background:radial-gradient(60% 100% at 50% 0%, #ffc94a22, transparent 70%);
  }
  .seat{
    display:flex; flex-direction:column; align-items:center; gap:3px; width:16%; cursor:pointer;
    transition:transform .25s;
  }
  .seat:active{transform:scale(.94);}
  .seat-avatar-wrap{position:relative; width:100%; aspect-ratio:1;}
  .seat-ring{
    position:absolute; inset:-3px; border-radius:50%; border:2px solid transparent;
    transition:border-color .3s, box-shadow .3s;
  }
  .seat.host:not(.empty) .seat-ring{border-color:#ffc94a55; box-shadow:0 0 14px -4px #ffc94a55; animation:host-glow 2.2s ease-in-out infinite;}
  @keyframes host-glow{0%,100%{box-shadow:0 0 14px -4px #ffc94a55;}50%{box-shadow:0 0 22px -2px #ffc94a99;}}
  .seat-ring.speaking{
    border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan-dim), 0 0 12px var(--cyan-dim);
    animation:ring-pulse 1s ease-in-out infinite;
  }
  .seat-ring.speaking.me{border-color:var(--magenta); box-shadow:0 0 0 2px var(--magenta-dim), 0 0 12px var(--magenta-dim);}
  @keyframes ring-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
  .seat-avatar{
    position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg,#f2e9ff,#e3ecff); border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:14px; overflow:hidden; line-height:1;
    box-shadow:var(--shadow-sm), inset 0 1px 0 #ffffffcc;
  }
  .seat.host .seat-avatar-wrap{width:100%;}
  .seat.empty .seat-avatar{border-style:dashed; font-size:12px; color:var(--text-faint); box-shadow:none; background:var(--panel);}
  .seat-mute-badge{
    position:absolute; bottom:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background:var(--danger);
    display:flex; align-items:center; justify-content:center; font-size:8px; border:1.5px solid var(--bg);
  }
  /* 🐾 Pet Phòng — hiện cạnh avatar người đang nói (xem buildSeatEl trong app.js) */
  .seat-pet{
    position:absolute; top:-8px; left:-8px; font-size:15px; line-height:1; z-index:3;
    animation:seat-pet-bob 1.1s ease-in-out infinite; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  }
  .seat-pet.hidden{display:none;}
  @keyframes seat-pet-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
  .host-crown{position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:12px;}
  .seat-name{font-size:9.5px; font-weight:600; color:var(--text-dim); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .seat-lv{display:flex; justify-content:center;}
  /* idle (non-speaking) seat ring picks up a soft glow tinted by the sitter's level tier */
  .seat-ring{ border-color:color-mix(in srgb, var(--tierc1,transparent) 35%, transparent); }
  .seat.seat-tier-glow .seat-ring:not(.speaking){
    box-shadow:0 0 14px -3px var(--tierc2,transparent);
    animation:seat-tier-shimmer 2.4s ease-in-out infinite;
  }
  @keyframes seat-tier-shimmer{0%,100%{box-shadow:0 0 10px -3px var(--tierc2,transparent);}50%{box-shadow:0 0 20px -2px var(--tierc1,transparent);}}

  /* ---------- 💛 BẠN THÂN đang cùng ngồi ghế mic (Lv5+) ---------- */
  .seat.bf-linked .seat-ring{
    border-color:color-mix(in srgb, var(--bf-c1,#f0c419) 55%, transparent);
    box-shadow:0 0 16px -2px var(--bf-c2,#fff2b0);
    animation:bf-linked-pulse 1.8s ease-in-out infinite;
  }
  @keyframes bf-linked-pulse{0%,100%{box-shadow:0 0 10px -3px var(--bf-c2,#fff2b0);}50%{box-shadow:0 0 22px 0px var(--bf-c1,#f0c419);}}
  .seat-bf-heart{
    position:absolute; top:-4px; left:-4px; width:16px; height:16px; border-radius:50%;
    background:radial-gradient(circle, var(--bf-c2,#fff2b0), var(--bf-c1,#f0c419));
    display:flex; align-items:center; justify-content:center; font-size:9px; z-index:7;
    box-shadow:0 0 6px var(--bf-c1,#f0c419); animation:bf-heart-bounce 1.2s ease-in-out infinite;
  }
  @keyframes bf-heart-bounce{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}

  /* ---------- HIỆU ỨNG SÓNG ÂM khi đang nói (mic thật, biên độ lấy từ WebRTC) ---------- */
  .seat-wave{
    position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
    display:flex; align-items:flex-end; justify-content:center; gap:2px; height:15px; z-index:6;
    opacity:0; transition:opacity .18s ease; pointer-events:none;
  }
  .seat-wave.active{opacity:1;}
  .seat-wave span{
    width:3px; min-height:4px; border-radius:2px; background:linear-gradient(180deg,var(--cyan),var(--magenta));
    box-shadow:0 0 6px var(--cyan-dim); animation:seat-wave-bounce .55s ease-in-out infinite;
  }
  .seat-wave span:nth-child(1){animation-delay:0s;}
  .seat-wave span:nth-child(2){animation-delay:.12s;}
  .seat-wave span:nth-child(3){animation-delay:.24s;}
  .seat-ring.speaking.me ~ .seat-wave span,
  .seat-wave.active span{ background:linear-gradient(180deg,var(--magenta),var(--cyan)); }
  @keyframes seat-wave-bounce{
    0%,100%{ height:4px; }
    50%{ height:calc(4px + 13px * var(--wv, .55)); }
  }
  /* ---------- Màu/kiểu "Hiệu ứng sóng âm" mua ở Shop (mặc định: cyan-magenta ở trên) ---------- */
  .seat-wave.wv-gold span{ background:linear-gradient(180deg,#ffe9a8,#c98f1c); box-shadow:0 0 6px #ffd76699; }
  .seat-wave.wv-fire span{ background:linear-gradient(180deg,#ffcf5c,#ff4d2e); box-shadow:0 0 6px #ff6a3d99; }
  .seat-wave.wv-ice span{ background:linear-gradient(180deg,#e8fbff,#35c7f2); box-shadow:0 0 6px #35c7f299; }
  .seat-wave.wv-toxic span{ background:linear-gradient(180deg,#e2ff5c,#3ecf5a); box-shadow:0 0 6px #7dff3d99; }
  .seat-wave.wv-rainbow span{ background:linear-gradient(180deg,#ff5c8a,#ffe45c,#5cffb0,#5cc8ff,#b05cff); background-size:100% 300%; animation:seat-wave-bounce .55s ease-in-out infinite, wv-rainbow-shift 1.4s linear infinite; box-shadow:0 0 6px #ffffff77; }
  .seat-wave.wv-royal span{ background:linear-gradient(180deg,#ffe9a8,#ff9adf); box-shadow:0 0 8px #ffe9a8aa; }
  @keyframes wv-rainbow-shift{0%{background-position:0 0;}100%{background-position:0 100%;}}

  /* ---------- LEVEL / TIER BADGES (gamified, dùng cho user & phòng) ---------- */
  .lvbadge{
    display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; line-height:1.5;
    color:#1a1022; padding:2px 8px 2px 6px; border-radius:999px; white-space:nowrap;
    background:linear-gradient(115deg, var(--c1), var(--c2));
    box-shadow:0 2px 8px -2px #00000066, inset 0 1px 0 #ffffff55;
    border:1px solid #2b1f4533; text-shadow:0 1px 0 #ffffff40;
  }
  .lvbadge.lvbadge-mini{font-size:9px; padding:1px 6px 1px 4px; gap:2px; box-shadow:0 1px 4px -1px #00000066, inset 0 1px 0 #ffffff40;}
  .lvbadge.rlvbadge{font-size:11.5px; padding:3px 10px 3px 7px;}
  /* các bậc cao (Chiến Thần / Huyền Thoại / Vĩnh Cửu, Phòng Kim Cương / Huyền Thoại) lấp lánh nhẹ để nổi bật */
  .lvbadge.tier-t7, .lvbadge.tier-t8, .lvbadge.tier-t9, .lvbadge.tier-t10, .lvbadge.tier-t11, .lvbadge.tier-t12, .lvbadge.tier-t13,
  .lvbadge.tier-w7, .lvbadge.tier-w8, .lvbadge.tier-w9, .lvbadge.tier-w10, .lvbadge.tier-w11, .lvbadge.tier-w12, .lvbadge.tier-w13,
  .lvbadge.tier-c7, .lvbadge.tier-c8, .lvbadge.tier-c9, .lvbadge.tier-c10, .lvbadge.tier-c11, .lvbadge.tier-c12, .lvbadge.tier-c13,
  .lvbadge.rtier-t5, .lvbadge.rtier-t6, .lvbadge.rtier-t7, .lvbadge.rtier-t8{
    background:linear-gradient(115deg, var(--c1), var(--c2), var(--c1));
    background-size:220% 100%;
    animation:lvbadge-shine 2.6s linear infinite;
    color:#fff; text-shadow:0 1px 3px #00000088;
  }
  @keyframes lvbadge-shine{0%{background-position:0% 0;}100%{background-position:-220% 0;}}

  /* thanh EXP dùng chung màu bậc hiện tại (set qua --c1/--c2 ở JS) */
  #profile-exp-bar{background:linear-gradient(90deg, var(--c1,var(--magenta)), var(--c2,var(--cyan)));}

  /* ---------- 3 TRỤC CẤP ĐỘ: 💰 Đại Gia / 💗 Thu Hút / 🔥 Sôi Nổi ---------- */
  .level-tracks{display:flex; flex-direction:column; gap:7px; margin:10px 0 4px;}
  .level-track-row{display:grid; grid-template-columns:64px auto 1fr; align-items:center; gap:8px;}
  .level-track-row .ltr-label{font-size:11px; color:var(--text-dim,#9d8fc4); font-weight:700; white-space:nowrap;}
  .ltr-bar-wrap{background:#2b1f4514; border-radius:999px; height:6px; overflow:hidden;}
  .ltr-bar{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--c1), var(--c2));}

  .stage-row2{display:flex; justify-content:center; gap:14px; margin-top:16px;}

  .room-tabs{display:flex; gap:6px; padding:14px 16px 8px; position:relative; z-index:2;}
  .tab-btn{
    padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--text-dim); background:var(--panel-strong);
    border:1px solid var(--line); backdrop-filter:blur(6px); transition:background .2s, color .2s, box-shadow .2s;
  }
  .tab-btn.active{background:linear-gradient(135deg,var(--magenta),#c026d3); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px #ff2e9a88;}

  /* ===== EXP Phòng — trang chi tiết TOÀN MÀN HÌNH (không phải modal nhỏ giữa
     màn hình) — khớp thiết kế: header gradient tối + nút back + tab pill +
     dải 3 sao cấp độ, rồi nội dung nền trắng bo góc trượt lên phía dưới. ===== */
  .modal-overlay.fullpage{align-items:stretch; justify-content:stretch; padding:0; background:#0c0817;}
  .modal-overlay.fullpage .rexp-page-sheet{
    width:100%; height:100%; max-width:none; max-height:none; border-radius:0; padding:0;
    display:flex; flex-direction:column; overflow:hidden;
    background:linear-gradient(180deg,#241454 0%,#170d33 40%,#100822 100%);
  }
  .rexp-page-header{
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 10px;
  }
  .rexp-page-back{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:transparent; color:#fff; font-size:20px; flex-shrink:0;
  }
  .rexp-page-title{flex:1; text-align:center; font-size:19px; font-weight:800; color:#fff;}
  .rexp-page-new-badge{
    flex-shrink:0; font-size:11px; font-weight:800; color:#fff; padding:5px 12px; border-radius:999px;
    background:linear-gradient(135deg,#ff5f8a,#ff2e6d); box-shadow:0 3px 10px -3px #ff2e6d88;
  }
  .rexp-page-tabs{padding:4px 16px 14px; gap:8px; flex-shrink:0;}
  .rexp-page-body{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0 0 24px;}
  .rexp-page-body #rexp-today-pane, .rexp-page-body #rexp-level-pane, .rexp-page-body #rexp-vibrancy-pane{padding:0 16px;}

  /* ===== EXP Phòng — tab "Cấp độ Phòng": dải 3 ngôi sao + lưới đặc quyền ===== */
  .rlvl-stars{display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 4px 6px;}
  .rlvl-star{flex:0 0 auto; width:88px; text-align:center; opacity:.55; transform:scale(.82); transition:.2s;}
  .rlvl-star-empty{width:88px;}
  .rlvl-star-current{opacity:1; transform:scale(1);}
  .rlvl-star-icon{font-size:40px; line-height:1;}
  .rlvl-star-current .rlvl-star-icon{font-size:58px;}
  .rlvl-star-badge{
    display:inline-block; margin-top:2px; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:800;
    background:var(--panel-strong); border:1px solid var(--line); color:var(--text);
  }
  .rlvl-star-current .rlvl-star-badge{border-color:transparent; color:#fff; box-shadow:0 4px 12px -4px #0006;}
  .rlvl-star-sub{margin-top:6px; font-size:11px; color:var(--text-dim); line-height:1.5;}
  .rlvl-star-sub-dim{color:var(--text-faint); font-size:10px;}

  .rlvl-dots{display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 18px;}
  .rlvl-dots span{width:7px; height:7px; border-radius:50%; background:var(--line);}
  .rlvl-dots span.is-active{width:22px; border-radius:999px; background:linear-gradient(90deg,var(--magenta),var(--cyan));}
  .rlvl-dots span.is-off{visibility:hidden;}

  .rlvl-privs-title{
    display:flex; align-items:center; gap:10px; justify-content:center; font-weight:800; font-size:14px;
    color:var(--text); margin:4px 0 14px;
  }
  .rlvl-privs-title span{width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--line));}
  .rlvl-privs-title span:last-child{background:linear-gradient(90deg,var(--line),transparent);}

  .rlvl-privs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 8px; padding-bottom:6px;}
  .rlvl-priv{text-align:center;}
  .rlvl-priv-icon{
    width:52px; height:52px; margin:0 auto; border-radius:50%; background:var(--panel-strong); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:22px; position:relative;
  }
  .rlvl-priv-new{
    position:absolute; top:-6px; right:-8px; background:var(--danger); color:#fff; font-size:9px; font-weight:800;
    padding:1px 6px; border-radius:999px;
  }
  .rlvl-priv-label{margin-top:6px; font-size:11.5px; color:var(--text); line-height:1.3;}
  .rlvl-priv-value{margin-top:2px; font-size:10.5px; color:var(--text-dim);}

  .panel-area{flex:1; position:relative; z-index:2; display:flex; flex-direction:column; min-height:0;}
  .chat-filter-tabs{
    display:flex; gap:6px; padding:8px 16px 4px; flex-shrink:0;
    overflow-x:auto; touch-action:pan-x; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .chat-filter-tabs::-webkit-scrollbar{display:none;}
  .chat-filter-btn{
    padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-strong);
    color:var(--text-dim); font-size:12px; font-weight:700; flex-shrink:0; white-space:nowrap; transition:.15s;
  }
  .chat-filter-btn.active{background:var(--grad-hot); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px var(--magenta-dim); transform:translateY(-1px);}
  .chat-list.filter-chat [data-cat="gift"]{display:none;}
  .chat-list.filter-gift [data-cat="chat"]{display:none;}
  .chat-list{
    flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 16px 10px; display:flex; flex-direction:column; gap:9px; min-height:220px;
  }
  .chat-msg{
    font-size:13.5px; line-height:1.4; display:flex; gap:6px; flex-wrap:wrap; align-items:baseline;
    background:var(--panel); border-radius:12px; padding:6px 10px; width:fit-content; max-width:100%;
  }
  .chat-msg .cn{font-weight:700; color:var(--cyan); flex-shrink:0;}
  .chat-msg .cm{color:var(--text-dim); word-break:break-word;}
  .chat-msg.system{color:var(--text-faint); font-style:normal; font-size:12.5px; justify-content:center; text-align:center; background:transparent; margin:0 auto; padding:2px 10px;}
  .chat-msg.app-broadcast-chat-msg{
    display:flex; align-items:center; gap:6px; justify-content:center; text-align:center; color:var(--cyan);
    background:linear-gradient(90deg,#35f2ff14,#ff2e9a14); border:1px solid #35f2ff2e; border-radius:10px;
    padding:6px 12px; margin:4px auto; font-size:12px; font-weight:600; max-width:92%;
  }
  .chat-msg.app-broadcast-chat-msg .abm-icon{flex-shrink:0;}
  .chat-msg.gift-msg{background:linear-gradient(90deg,#ffc94a1a,#ff8a3d1a); border:1px solid #ffc94a2e;}
  .chat-msg.gift-msg .cm{color:var(--gold); font-weight:600;}
  .chat-msg.gif-msg{display:block; width:fit-content; max-width:100%; overflow:hidden;}
  .chat-msg.gif-msg .cn{display:block; margin-bottom:4px;}
  .chat-msg.gif-msg .chat-gif-img{max-width:100%;}
  .chat-msg.has-chat-frame{
    background-size:100% 100%; background-repeat:no-repeat; background-position:center;
    border-radius:12px; padding:5px 10px; margin:1px 0;
  }
  /* CSS-driven chat frames (no image needed) */
  .chat-msg.cf-frame{ border-radius:12px; padding:5px 10px; margin:1px 0; border:1.5px solid transparent; background-origin:border-box; background-clip:padding-box, border-box; }
  .chat-msg.cf-neon{ background-image:linear-gradient(var(--panel-strong),var(--panel-strong)), conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan)); }
  .chat-msg.cf-gold{ background-image:linear-gradient(var(--panel-strong),var(--panel-strong)), linear-gradient(120deg,#ffe08a,#ffc94a,#b8860b,#ffc94a); }
  .chat-msg.cf-rainbow{ background-image:linear-gradient(var(--panel-strong),var(--panel-strong)), linear-gradient(90deg,#ff5470,#ffae00,#5cffb0,#5cb8ff,#c25cff); background-size:100% 100%, 250% 100%; animation:cf-rainbow-move 4s linear infinite; }
  @keyframes cf-rainbow-move{ to{ background-position:0 0, -250% 0; } }
  .chat-msg.cf-ocean{ background-image:linear-gradient(var(--panel-strong),var(--panel-strong)), linear-gradient(120deg,#0072ff,#00c6ff,#4facfe); }
  .chat-msg.cf-fire{ background-image:linear-gradient(var(--panel-strong),var(--panel-strong)), linear-gradient(120deg,#ff4d00,#ffae00,#ff2e2e,#ffae00); }

  .leaderboard-list{flex:1; min-height:0; padding:10px 16px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
  .lb-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:12px;}
  .lb-rank{width:22px; height:22px; border-radius:50%; font-weight:800; color:var(--text-faint); font-size:12px; text-align:center; display:flex; align-items:center; justify-content:center;}
  .lb-rank.r1{background:linear-gradient(135deg,#ffe08a,#ffc94a,#b8860b); color:#3a2200; box-shadow:0 0 10px -1px #ffc94a99;}
  .lb-rank.r2{background:linear-gradient(135deg,#f1f4f8,#c3ccd6); color:#20242a; box-shadow:0 0 8px -2px #dfe4ea99;}
  .lb-rank.r3{background:linear-gradient(135deg,#f0b077,#c2793a); color:#2a1200; box-shadow:0 0 8px -2px #e0a35c99;}
  .lb-av{width:32px; height:32px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:16px;}
  .lb-name{flex:1; font-size:13.5px; font-weight:600;}
  .lb-score{font-size:12.5px; color:var(--gold); font-weight:700; display:flex; align-items:center; gap:3px;}

  .lb-sheet{ background:linear-gradient(180deg,#3d0f5c 0%, #7a1fb8 32%, #120a22 32%, #120a22 100%); overflow-y:auto; overflow-x:hidden; margin:-22px -20px -28px; padding:22px 20px 28px; border-radius:22px 22px 0 0; --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; --panel:rgba(255,255,255,.06); --panel-strong:rgba(255,255,255,.1); --line:rgba(255,255,255,.14); color:var(--text); }
  /* .modal-overlay.app-page .modal-sheet (3 lớp class) có độ đặc hiệu cao hơn .lb-sheet (1 lớp),
     nên width:100% của nó luôn thắng nếu chỉ khai báo width ở .lb-sheet — margin âm hai bên khi đó
     không làm hộp NỞ RA để bù, mà chỉ ĐẨY LỆCH nó sang trái, hụt mất 20px bên phải và lộ nền tối
     phía sau (đây chính là khoảng đen ở mép phải trên trang BXH). Phải viết đè đúng bằng selector
     kết hợp cả 3 lớp để thắng độ đặc hiệu, đồng thời cộng bù đúng 40px (bằng 2 lần margin âm) vào
     width để hộp nở ra thay vì bị đẩy lệch. */
  .modal-overlay.app-page .modal-sheet.lb-sheet{ width:calc(100% + 40px); max-width:calc(100% + 40px); }
  .lb-title{ color:#fff; }
  .lb-title .close-x{ color:#fff; }
  .lb-type-tabs{ display:flex; gap:4px; margin:4px 4px 12px; padding:4px; background:#00000030; border-radius:999px; }
  .lb-type-btn{ flex:1; min-width:0; border:none; background:transparent; color:#ffffffb0; font-weight:700; font-size:11.5px; padding:9px 1px; border-radius:999px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.15s; }
  .lb-type-btn.active{ background:linear-gradient(135deg,var(--magenta),#c026d3); color:#fff; box-shadow:0 4px 12px -4px #ff2e9a88; }
  @media (max-width:400px){
    .lb-type-btn{ font-size:10px; padding:8px 1px; letter-spacing:-0.2px; }
  }
  @media (max-width:360px){
    .lb-type-btn{ font-size:9px; padding:7px 0; }
  }
  .lb-period-tabs{ display:flex; gap:6px; margin:0 2px 16px; }
  .lb-period-btn{ flex:1; border:1px solid #ffffff2a; background:#ffffff12; color:#ffffffb0; font-weight:700; font-size:12.5px; padding:7px 6px; cursor:pointer; border-radius:999px; transition:.15s; }
  .lb-period-btn.active{ background:#fff; color:#7a1fb8; border-color:#fff; }

  .lgi-sheet{ max-width:480px; }
  .lgi-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:6px 2px 4px; }
  .lgi-tier-card{ background:var(--panel-strong); border:1px solid var(--line); border-radius:14px; padding:12px 6px; text-align:center; }
  .lgi-tier-icon{ font-size:26px; margin-bottom:4px; }
  .lgi-tier-label{ font-size:12px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lgi-tier-mult{ font-size:15px; font-weight:900; color:var(--gold); margin-top:2px; }
  .lgi-tier-rarity{ margin-top:4px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; display:inline-block; background:#ffffff14; color:#ffffffb0; }
  .lgi-tier-rarity.r-rare{ background:#2f8dff33; color:#8fc4ff; }
  .lgi-tier-rarity.r-epic{ background:#7b2ff733; color:#c9a6ff; }
  .lgi-tier-rarity.r-legendary{ background:#ffb30033; color:#ffe37a; }
  .lgi-rules{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
  .lgi-rules h3{ font-size:14px; color:#fff; margin-bottom:8px; }
  .lgi-rules ol{ margin:0; padding-left:20px; color:var(--text-dim); font-size:12.5px; line-height:1.8; }

  .lb-podium-wrap{ position:relative; padding:8px 0 4px; }
  .lb-podium{ display:flex; align-items:flex-end; justify-content:center; gap:8px; padding:16px 6px 4px; min-height:172px; }
  .lb-pod-col{ display:flex; flex-direction:column; align-items:center; flex:1; max-width:118px; position:relative; }
  .lb-pod-crown{ font-size:22px; margin-bottom:2px; filter:drop-shadow(0 2px 4px #0007); }
  .lb-pod-col.p2 .lb-pod-crown, .lb-pod-col.p3 .lb-pod-crown{ font-size:17px; opacity:.9; }
  .lb-pod-av-ring{
    width:64px; height:64px; border-radius:50%; padding:3px; margin-bottom:6px;
    background:conic-gradient(from 0deg, var(--gold), #fff6d8, var(--gold), #ff9adf, var(--gold));
    box-shadow:0 4px 14px -4px #0009;
  }
  .lb-pod-col.p1 .lb-pod-av-ring{ width:82px; height:82px; background:conic-gradient(from 0deg, #ffe37a, #fff6d8, #ffcf3f, #ff9adf, #ffe37a); }
  .lb-pod-av{ width:100%; height:100%; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; border:2px solid #1a0f2e; }
  .lb-pod-col.p1 .lb-pod-av{ font-size:34px; }
  .lb-pod-av-empty{ background:#ffffff0d; }
  .lb-pod-rank-chip{
    margin-top:-14px; margin-bottom:6px; z-index:2; width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#3a1400;
    background:linear-gradient(135deg,#ffe37a,#ffb300); border:2px solid #1a0f2e;
  }
  .lb-pod-col.p2 .lb-pod-rank-chip{ background:linear-gradient(135deg,#e7ecf5,#b7c1d6); }
  .lb-pod-col.p3 .lb-pod-rank-chip{ background:linear-gradient(135deg,#f2c19a,#c47a3f); }
  .lb-pod-name{ color:#fff; font-weight:800; font-size:12.5px; text-align:center; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lb-pod-badges{ display:flex; align-items:center; justify-content:center; gap:2px; margin-top:2px; flex-wrap:wrap; max-width:112px; }
  .lb-pod-score{
    background:#00000040; color:#ffe37a; font-weight:800; font-size:11px; padding:3px 10px; border-radius:999px;
    margin-top:6px; display:flex; align-items:center; gap:3px; border:1px solid #ffe37a33;
  }
  .lb-pod-empty .lb-pod-name{ color:#ffffff55; }

  .lb-rest-list{ padding:12px 2px 4px; display:flex; flex-direction:column; gap:8px; }
  .lb-rest-row{
    display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:16px;
    background:#ffffff0a; border:1px solid #ffffff14; transition:.15s;
  }
  .lb-rest-row:active{ background:#ffffff16; }
  .lb-rest-rank{ width:22px; font-weight:800; color:#ffffff70; font-size:14px; text-align:center; flex-shrink:0; }
  .lb-rest-av{ width:42px; height:42px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; overflow:hidden; border:1.5px solid #ffffff22; }
  .lb-rest-info{ flex:1; min-width:0; }
  .lb-rest-name{ font-weight:700; font-size:13.5px; color:#fff; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .lb-rest-score{ color:var(--gold); font-weight:800; font-size:13px; display:flex; align-items:center; gap:3px; flex-shrink:0; }

  .members-list{flex:1; min-height:0; padding:10px 16px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
  .manage-panel{flex:1; min-height:0; padding:10px 16px 24px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
  .settings-section-title{font-size:13px; font-weight:800; color:var(--text-dim); margin:18px 2px 8px;}
  .settings-list{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .settings-row{display:flex; align-items:center; justify-content:space-between; padding:13px 14px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--line); cursor:pointer;}
  .settings-row:last-child{border-bottom:none;}
  .settings-row:active{background:var(--panel-strong);}
  .settings-row-right{display:flex; align-items:center; gap:6px; color:var(--text-dim);}
  .settings-row-value{font-size:12.5px; font-weight:600;}
  .settings-chevron{font-size:16px; color:var(--text-faint);}
  .manage-subview-head{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; margin-bottom:14px;}
  .manage-back{font-size:13px; font-weight:700; color:var(--text-dim); background:var(--panel-strong); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
  .role-chip{display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:700; background:var(--panel-strong); border:1px solid var(--line); color:var(--text-dim);}
  .role-chip.role-owner{background:linear-gradient(135deg,#ffd700,#ff9d00); color:#251400; border-color:transparent;}
  .mem-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:12px;}
  .mem-av{width:32px; height:32px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:16px;}
  .mem-name{flex:1; font-size:13.5px; font-weight:600;}
  .mem-tag{font-size:11px; color:var(--text-faint);}

  .composer{
    display:flex; flex-direction:column; gap:8px; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
    background:#130b24cc; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:relative; z-index:3; flex-shrink:0;
  }
  .composer-row1{display:flex; align-items:center; gap:8px;}
  .composer::before{
    content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, #ff2e9a66, #35f2ff66, transparent);
  }
  .mic-toggle{
    width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px;
    background:var(--panel-strong); border:1px solid var(--line); position:relative;
  }
  .mic-toggle.on{background:linear-gradient(135deg,var(--cyan),#2563eb); box-shadow:0 0 0 3px var(--cyan-dim);}
  .mic-toggle.off{background:var(--danger); }
  .room-mute-toggle{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--panel-strong); border:1px solid var(--line);
  }
  .room-mute-toggle.muted{background:var(--danger); border-color:transparent;}
  .self-echo-toggle{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--panel-strong); border:1px solid var(--line); transition:background .15s,box-shadow .15s;
  }
  .self-echo-toggle.on{background:linear-gradient(135deg,var(--magenta),#7c3aed); box-shadow:0 0 0 3px var(--magenta-dim); border-color:transparent;}
  .echo-fx-toggle{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--panel-strong); border:1px solid var(--line); transition:background .15s,box-shadow .15s;
  }
  .echo-fx-toggle.on{background:linear-gradient(135deg,var(--gold),#ff8a3d); box-shadow:0 0 0 3px #ffb02f40; border-color:transparent;}
  .chat-input{
    flex:1; padding:11px 14px; border-radius:999px; border:1px solid var(--line); background:#2b1f4514; font-size:16px; outline:none; min-width:70px;
  }
  .chat-input:focus{border-color:var(--cyan);}
  .send-btn{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--magenta)); border:1px solid #2b1f4522; font-size:16px; flex-shrink:0; box-shadow:0 4px 14px -4px var(--magenta-dim);}
  .composer-extra{
    display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%;
  }
  .composer-extra button{width:100%; max-width:44px; height:38px; aspect-ratio:1; flex:1 1 0;}
  .gift-btn{border-radius:50%; background:linear-gradient(135deg,var(--gold),#ff8a3d); font-size:16px;}
  .effect-btn{border-radius:50%; background:linear-gradient(135deg,var(--magenta),#7c3aed); font-size:16px;}
  .flying-msg-btn{border-radius:50%; background:linear-gradient(135deg,#00e0ff,#ff2e9a); font-size:16px;}

  /* Gift sheet */
  .gift-tab-row{display:flex; align-items:center; gap:8px; margin-top:10px;}
  .gift-tab{flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text-dim); font-size:12px; font-weight:700; cursor:pointer;}
  .gift-tab.selected{color:#fff; border-color:var(--gold); background:linear-gradient(160deg,#3a2a0caa,var(--panel));}
  .gift-tab[data-tab="lucky"].selected{border-color:var(--magenta-dim); background:linear-gradient(160deg,#3a1256aa,var(--panel));}
  .gift-tab-lb{padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-size:14px;}

  /* ---------- MƯA LÌ XÌ / MƯA XU ---------- */
  .rain-layer{ position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
  .rain-banner{ position:absolute; top:14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#ff5f6d,#ffc371); color:#2a0900; font-weight:800; font-size:13px; padding:8px 16px; border-radius:999px; box-shadow:0 4px 18px #00000055; max-width:92vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Vùng bấm được MỞ RỘNG ra ngoài phần chữ emoji hiển thị (padding + margin âm bù lại
     để không đổi vị trí/quỹ đạo rơi trên màn hình) — trước đây vùng bấm chỉ đúng bằng
     kích thước chữ (34px) nên rất dễ bấm trượt ra ngoài, và vì phần nền quanh giọt mưa
     có pointer-events:none nên cú bấm trượt đó lọt thẳng xuống ghế ngồi bên dưới. */
  .rain-drop{
    position:absolute; top:-60px; font-size:34px; line-height:1; cursor:pointer; pointer-events:auto;
    animation-name:rainFall; animation-timing-function:linear; animation-fill-mode:forwards;
    filter:drop-shadow(0 2px 4px #00000066); user-select:none; touch-action:manipulation;
    padding:18px; margin:-18px;
    display:flex; align-items:center; justify-content:center;
  }
  .rain-drop.caught{ pointer-events:none; animation-play-state:paused; transition:transform .25s ease, opacity .6s ease .1s; transform:scale(1.4) translateY(-10px); opacity:0; }
  .rain-drop.rain-drop-caught-label{ font-size:16px !important; font-weight:800; color:#ffe27a; text-shadow:0 1px 3px #000; }
  @keyframes rainFall{ from{ top:-60px; } to{ top:100vh; } }

  .rain-result-overlay{ position:fixed; inset:0; z-index:10000; background:#000000aa; display:flex; align-items:center; justify-content:center; }
  .rain-result-card{ background:var(--panel); border-radius:20px; padding:26px 22px; text-align:center; width:min(320px, 84vw); box-shadow:0 10px 40px #00000077; }
  .rain-result-emoji{ font-size:46px; margin-bottom:6px; }
  .rain-result-title{ font-size:18px; font-weight:800; margin-bottom:8px; }
  .rain-result-body{ font-size:14px; color:var(--text-dim); margin-bottom:16px; line-height:1.5; }
  .gift-page-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;}
  .gift-page-tab{min-width:30px; padding:5px 9px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text-dim); font-size:12px; font-weight:700; cursor:pointer;}
  .gift-page-tab.selected{color:#fff; border-color:var(--gold); background:linear-gradient(160deg,#3a2a0caa,var(--panel));}
  .lucky-lb-list{display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; overflow-x:hidden; margin-top:6px;}
  .lucky-lb-row{display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 8px; border-radius:8px; background:var(--panel); border:1px solid var(--line);}
  .lucky-lb-row.rarity-epic{border-color:#7c3aed88;}
  .lucky-lb-row.rarity-legendary{border-color:var(--gold); background:linear-gradient(160deg,#3a2a0c88,var(--panel));}
  .lucky-lb-row .lb-name{font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lucky-lb-row .lb-coins{color:var(--gold); font-weight:700;}
  .gift-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
  .gift-opt{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center; position:relative;
  }
  .gift-opt .g-emoji{font-size:28px;}
  .gift-opt .g-name{font-size:12px; font-weight:700;}
  .gift-opt .g-price{font-size:11px; color:var(--gold); display:flex; align-items:center; gap:3px; font-weight:700;}
  .gift-opt.lucky{position:relative; border-color:var(--magenta-dim); background:linear-gradient(160deg,#3a1256aa,var(--panel)); box-shadow:0 0 0 1px var(--magenta-dim), 0 6px 18px -8px var(--magenta-dim); animation:lucky-pulse 2.2s ease-in-out infinite;}
  .lucky-ribbon{position:absolute; top:6px; right:-22px; transform:rotate(35deg); background:linear-gradient(90deg,var(--magenta),#7c3aed); color:#fff; font-size:8px; font-weight:800; letter-spacing:.5px; padding:2px 22px; box-shadow:0 2px 6px -2px #000a;}
  .fx-badge{position:absolute; top:4px; left:4px; font-size:12px; filter:drop-shadow(0 1px 2px #000a);}
  /* Quà VIP độc quyền chưa đủ bậc / quà giới hạn số lượng đã hết — vẫn hiện cho thấy sự tồn tại
     (kích thích nâng VIP / quay lại đợt sau) nhưng làm mờ + chặn bấm chọn. */
  .gift-opt.gift-locked{opacity:.5; filter:grayscale(.4);}
  .gift-opt.gift-locked:active{transform:none;}
  .gift-lock-badge{
    position:absolute; top:4px; right:4px; font-size:9px; font-weight:800; color:#fff;
    background:#000000a0; border:1px solid #2b1f4530; padding:2px 6px; border-radius:999px;
    white-space:nowrap; backdrop-filter:blur(4px);
  }
  @keyframes lucky-pulse{0%,100%{box-shadow:0 0 0 1px var(--magenta-dim), 0 6px 18px -8px var(--magenta-dim);} 50%{box-shadow:0 0 0 1px var(--cyan-dim), 0 8px 24px -6px var(--magenta);}}

  /* Quà ĐỘC QUYỀN: viền vàng lấp lánh + ruy băng, giống style .lucky nhưng tông vàng kim */
  .gift-opt.exclusive{
    position:relative; border-color:var(--gold); background:linear-gradient(160deg,#4a350caa,var(--panel));
    box-shadow:0 0 0 1px var(--gold), 0 6px 20px -8px var(--gold); animation:exclusive-pulse 2.4s ease-in-out infinite;
  }
  @keyframes exclusive-pulse{0%,100%{box-shadow:0 0 0 1px var(--gold), 0 6px 20px -8px var(--gold);} 50%{box-shadow:0 0 0 1px #fff2c4, 0 10px 28px -6px var(--gold);}}
  .exclusive-ribbon{
    position:absolute; top:6px; right:-22px; transform:rotate(35deg); z-index:2;
    background:linear-gradient(90deg,#ffd76a,var(--gold)); color:#3a2405; font-size:8px; font-weight:900;
    letter-spacing:.5px; padding:2px 20px; box-shadow:0 2px 6px -2px #000a;
  }

  /* Lucky gift blind-box reveal modal */
  .lucky-reveal-overlay{position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; background:radial-gradient(700px 500px at 50% 40%, #2a0f4ad9, #05030dee); backdrop-filter:blur(4px); opacity:1; transition:opacity .3s; --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; --panel-strong:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); color:var(--text);}
  .lucky-reveal-overlay.fade-out{opacity:0;}
  .lucky-reveal-card{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:28px 30px; border-radius:22px; background:var(--panel-strong); border:1px solid var(--line); min-width:240px;}
  .lucky-reveal-card.revealed.rarity-common{box-shadow:0 0 40px -6px #7a6ba388;}
  .lucky-reveal-card.revealed.rarity-rare{box-shadow:0 0 50px -6px var(--cyan-dim);}
  .lucky-reveal-card.revealed.rarity-epic{box-shadow:0 0 60px -4px var(--magenta);}
  .lucky-reveal-card.revealed.rarity-legendary{box-shadow:0 0 80px -2px var(--gold); border-color:var(--gold);}
  .lr-box{font-size:64px; line-height:1; transition:transform .2s;}
  .lr-box.shaking{animation:lr-shake .12s ease-in-out infinite;}
  .lr-box.popped{animation:lr-pop .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes lr-shake{0%,100%{transform:rotate(-8deg) scale(1);} 50%{transform:rotate(8deg) scale(1.05);}}
  @keyframes lr-pop{0%{transform:scale(.3) rotate(-15deg); opacity:.4;} 60%{transform:scale(1.25) rotate(5deg); opacity:1;} 100%{transform:scale(1) rotate(0);}}
  .lr-title{font-size:13px; color:var(--text-dim); font-weight:600;}
  .lr-label{font-size:18px; font-weight:800; color:var(--text);}
  .lr-multiplier{font-size:34px; font-weight:900; background:linear-gradient(90deg,var(--gold),var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; margin:2px 0;}
  .lr-rarity{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.6px;}
  .lr-reward{margin-top:6px; font-size:14px; font-weight:700; color:var(--gold);}

  /* Lucky gift leaderboard panel */
  .lucky-top-panel{display:flex; flex-direction:column; gap:8px;}
  .lucky-top-row{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:var(--panel); border:1px solid var(--line);}
  .lucky-top-row .lt-rank{width:20px; font-weight:900; color:var(--gold); text-align:center; flex-shrink:0;}
  .lucky-top-row .lt-av{width:32px; height:32px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
  .lucky-top-row .lt-info{flex:1; min-width:0;}
  .lucky-top-row .lt-name{font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lucky-top-row .lt-detail{font-size:10px; color:var(--text-dim);}
  .lucky-top-row .lt-coins{font-size:12px; font-weight:800; color:var(--gold); flex-shrink:0;}

  /* Friend suggestions */
  .suggest-row{display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line);}
  .suggest-row:last-child{border-bottom:none;}
  .suggest-row .sg-follow{padding:7px 12px; font-size:12px; flex-shrink:0;}
  .suggest-row .sg-dismiss{width:26px; height:26px; border-radius:50%; background:var(--panel); font-size:11px; opacity:.6; flex-shrink:0;}
  .suggest-row .sg-dismiss:active{opacity:1;}

  /* ---------- Gift effects: fireworks / hearts / coins / confetti / fullscreen ---------- */
  .firework-flash{position:fixed; z-index:850; font-size:34px; transform:translate(-50%,-50%); animation:fw-flash .85s ease-out forwards; pointer-events:none;}
  @keyframes fw-flash{0%{transform:translate(-50%,-50%) scale(.2); opacity:0;} 25%{opacity:1; transform:translate(-50%,-50%) scale(1.3);} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.7);}}

  .heart-rain-item{position:fixed; bottom:-40px; z-index:850; font-size:22px; animation:heart-rise linear forwards; pointer-events:none;}
  .heart-rain-item.big{font-size:30px;}
  @keyframes heart-rise{0%{transform:translate(0,0) rotate(0deg); opacity:0;} 10%{opacity:1;} 100%{transform:translate(var(--drift), -105vh) rotate(20deg); opacity:0;}}

  .coin-rain-item{position:fixed; top:-40px; z-index:850; font-size:22px; animation:coin-fall linear forwards; pointer-events:none; filter:drop-shadow(0 0 6px #ffc94a99);}
  @keyframes coin-fall{0%{transform:translateY(0) rotate(0deg); opacity:0;} 8%{opacity:1;} 100%{transform:translateY(112vh) rotate(360deg); opacity:.9;}}

  .confetti-piece{position:fixed; z-index:850; width:8px; height:14px; border-radius:2px; animation:confetti-burst .9s cubic-bezier(.2,.7,.3,1) forwards; pointer-events:none;}
  @keyframes confetti-burst{0%{transform:translate(0,0) rotate(0deg); opacity:1;} 100%{transform:translate(var(--cx),calc(var(--cy) + 140px)) rotate(var(--rot)); opacity:0;}}

  .fullscreen-gift-banner{
    position:fixed; inset:0; z-index:870; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(900px 500px at 50% 40%, #4a1a7ad0, #05030dcc); opacity:0; transition:opacity .25s; pointer-events:none;
    overflow:hidden;
  }
  .fullscreen-gift-banner.show{opacity:1;}
  .fullscreen-gift-banner.hide{opacity:0;}
  .fsg-rays{position:absolute; inset:-40%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #ffe9a866 6deg, transparent 14deg, transparent 40deg, #ff6fd866 48deg, transparent 58deg, transparent 84deg, #35f2ff55 92deg, transparent 102deg);
    animation:fsg-rays-spin 5s linear infinite;
  }
  @keyframes fsg-rays-spin{to{transform:rotate(360deg);}}
  .fsg-emoji{font-size:76px; perspective:700px; filter:drop-shadow(0 12px 20px #000a);}
  .fsg-emoji-inner{display:inline-block; animation:fsg-pop3d .9s cubic-bezier(.34,1.56,.64,1);}
  @keyframes fsg-pop3d{
    0%{transform:rotateY(0deg) scale(.2);}
    55%{transform:rotateY(560deg) scale(1.3);}
    100%{transform:rotateY(720deg) scale(1);}
  }
  .fsg-text{font-size:16px; font-weight:700; color:#fff; text-shadow:0 2px 8px #000a; text-align:center; padding:0 24px; position:relative;}

  /* ---------- Gift effects (tier cao hơn): diamond / rainbow / lightning / galaxy ---------- */
  .diamond-rain-item{position:fixed; top:-40px; z-index:850; font-size:22px; animation:diamond-fall linear forwards; pointer-events:none; filter:drop-shadow(0 0 8px #35c9ffcc);}
  .diamond-rain-item.big{font-size:28px;}
  @keyframes diamond-fall{0%{transform:translateY(0) rotate(0deg) scale(.7); opacity:0;} 8%{opacity:1;} 50%{transform:translateY(56vh) rotate(180deg) scale(1);} 100%{transform:translateY(112vh) rotate(360deg) scale(.9); opacity:.9;}}

  .rainbow-arc{
    position:fixed; z-index:849; width:360px; height:180px; margin:-260px 0 0 -180px; pointer-events:none;
    border-radius:180px 180px 0 0; opacity:0;
    border-top:10px solid #ff4d6d; box-shadow:0 -12px 0 -2px #ff9a2e, 0 -24px 0 -4px #ffe15a, 0 -36px 0 -6px #4dff8c, 0 -48px 0 -8px #35c9ff, 0 -60px 0 -10px #7c3aed;
    animation:rainbow-arc-kf 1.8s ease-out forwards;
  }
  .rainbow-arc.big{width:460px; height:230px; margin:-320px 0 0 -230px;}
  @keyframes rainbow-arc-kf{0%{opacity:0; transform:scale(.6) translateY(20px);} 25%{opacity:1; transform:scale(1) translateY(0);} 75%{opacity:1;} 100%{opacity:0; transform:scale(1.05) translateY(-10px);}}
  .rainbow-spark{position:fixed; z-index:851; width:9px; height:9px; border-radius:50%; pointer-events:none; animation:rainbow-spark-kf 1.1s ease-out forwards;}
  @keyframes rainbow-spark-kf{0%{transform:translate(-50%,-50%) scale(.4); opacity:1;} 100%{transform:translate(calc(-50% + var(--rx,0px)),calc(-50% + var(--ry,0px))) scale(1); opacity:0;}}

  .lightning-flash{position:fixed; inset:0; z-index:855; background:#fff; opacity:0; pointer-events:none; animation:lightning-flash-kf .26s ease-out forwards;}
  @keyframes lightning-flash-kf{0%{opacity:0;} 12%{opacity:.85;} 100%{opacity:0;}}
  .lightning-bolt{
    position:fixed; top:-5vh; z-index:856; width:6px; height:110vh; pointer-events:none;
    background:linear-gradient(180deg, #fff, #bfe8ff 40%, transparent 100%);
    filter:drop-shadow(0 0 12px #9fd8ffcc) drop-shadow(0 0 26px #6cb8ff99);
    clip-path:polygon(40% 0%, 60% 0%, 45% 22%, 70% 22%, 30% 55%, 50% 55%, 20% 100%, 40% 58%, 20% 58%, 55% 24%, 30% 24%);
    animation:lightning-bolt-kf .42s ease-out forwards;
  }
  @keyframes lightning-bolt-kf{0%{opacity:0; transform:scaleY(.3);} 15%{opacity:1; transform:scaleY(1);} 70%{opacity:.9;} 100%{opacity:0;}}

  .galaxy-gift-banner{
    position:fixed; inset:0; z-index:875; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(1000px 600px at 50% 42%, #1a1040e0, #020108d8); opacity:0; transition:opacity .3s; pointer-events:none; overflow:hidden;
  }
  .galaxy-gift-banner.show{opacity:1;}
  .galaxy-gift-banner.hide{opacity:0;}
  .glx-swirl{
    position:absolute; left:50%; top:42%; width:120vmax; height:120vmax; margin:-60vmax 0 0 -60vmax; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #7c3aed55 10deg, transparent 24deg, transparent 70deg, #35c9ff55 84deg, transparent 100deg, transparent 160deg, #ff4d9955 176deg, transparent 196deg, transparent 260deg, #ffe15a4d 276deg, transparent 296deg);
    animation:glx-spin 6s linear infinite;
  }
  .glx-swirl2{width:80vmax; height:80vmax; margin:-40vmax 0 0 -40vmax; animation:glx-spin-rev 4.2s linear infinite; opacity:.7;}
  @keyframes glx-spin{to{transform:rotate(360deg);}}
  @keyframes glx-spin-rev{to{transform:rotate(-360deg);}}
  .glx-core{font-size:80px; perspective:700px; filter:drop-shadow(0 0 26px #b28bffcc) drop-shadow(0 14px 22px #000a); position:relative;}
  .glx-core-inner{display:inline-block; animation:glx-core-pop 1s cubic-bezier(.34,1.56,.64,1);}
  @keyframes glx-core-pop{0%{transform:scale(.1) rotate(-180deg);} 60%{transform:scale(1.25) rotate(20deg);} 100%{transform:scale(1) rotate(0deg);}}
  .glx-text{font-size:16px; font-weight:700; color:#fff; text-shadow:0 2px 10px #000c; text-align:center; padding:0 24px; position:relative;}
  .galaxy-star{position:fixed; z-index:876; font-size:16px; pointer-events:none; animation:galaxy-star-kf 1.3s ease-in forwards;}
  @keyframes galaxy-star-kf{0%{transform:translate(calc(-50% + var(--gx,0px)),calc(-50% + var(--gy,0px))) scale(1); opacity:0;} 15%{opacity:1;} 100%{transform:translate(-50%,-50%) scale(.2); opacity:0;}}
  .gift-target-row{display:flex; gap:8px; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; padding:4px 2px 14px;}
  .gift-target{
    flex-shrink:0; width:56px; display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.55; transition:.15s;
  }
  .gift-target.selected{opacity:1;}
  .gift-target .gt-av{width:44px; height:44px; border-radius:50%; background:var(--panel-strong); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;}
  .gift-target.selected .gt-av{border-color:var(--gold);}
  .gift-target .gt-name{font-size:10px; color:var(--text-dim); max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gt-watch-badge{position:absolute; bottom:-2px; right:-2px; font-size:10px; background:#1c0f2e; border-radius:50%; padding:1px 2px; line-height:1; box-shadow:0 0 0 2px var(--panel,#1c0f2e);}
  .gift-target-bulk-row{display:flex; gap:8px; flex-shrink:0;}
  .gift-target-bulk{flex-shrink:0; width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; opacity:.7; transition:.15s; cursor:pointer;}
  .gift-target-bulk.selected{opacity:1;}
  .gift-target-bulk .gt-av-bulk{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#ff9a2e,#ff5470); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;}
  .gift-target-bulk.selected .gt-av-bulk{border-color:var(--gold); box-shadow:0 0 10px -1px var(--gold);}
  .gift-target-bulk .gt-name{font-size:9.5px; color:var(--text-dim); max-width:64px; text-align:center; line-height:1.2; white-space:normal;}
  .send-gift-bar{display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:10px;}
  .send-gift-bar .sel-gift{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700;}
  .qty-combo-row{display:flex; gap:8px; margin-top:6px;}
  .qty-opt{flex:1; padding:9px 0; border-radius:10px; background:var(--panel); border:1px solid var(--line); font-weight:800; font-size:13px; color:var(--text-dim); transition:.15s;}
  .qty-opt.selected{background:linear-gradient(135deg,var(--magenta),#7c3aed); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px var(--magenta-dim);}

  /* floating gift animation — quà tặng dạng khối 3D xoay (rotateY) bay vào mục tiêu */
  .gift3d-obj{
    position:fixed; z-index:200; pointer-events:none; perspective:600px;
    animation:gift3d-fly 1.3s cubic-bezier(.2,.75,.3,1) forwards;
  }
  .gift3d-obj .g3d-face{
    width:56px; height:56px; border-radius:16px; font-size:30px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 32% 26%, #fffdf4, #ffe9a8 38%, #ffb648 72%, #a85e12 100%);
    box-shadow:0 10px 22px -6px #000000aa, 0 0 18px -2px #ffd76699, inset 0 2px 4px #ffffffaa;
    animation:g3d-spin 1.3s linear infinite;
    transform-style:preserve-3d;
  }
  .gift3d-obj.big .g3d-face{width:80px; height:80px; font-size:44px; box-shadow:0 14px 30px -6px #000000cc, 0 0 26px -2px #ffd766cc, inset 0 2px 5px #ffffffb0;}
  @keyframes g3d-spin{0%{transform:rotateY(0deg);} 100%{transform:rotateY(360deg);}}
  @keyframes gift3d-fly{
    0%{transform:translate(0,0) scale(.45) rotate(-14deg); opacity:0;}
    12%{opacity:1; transform:translate(calc(var(--tx,0px)*0.15),calc(var(--ty,0px)*0.15 - 40px)) scale(1.2) rotate(8deg);}
    50%{transform:translate(calc(var(--tx,0px)*0.55),calc(var(--ty,0px)*0.5 - 70px)) scale(1.35) rotate(0deg);}
    78%{opacity:1;}
    100%{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.5) rotate(0deg); opacity:0;}
  }
  .gift-impact-ring{
    position:fixed; z-index:205; pointer-events:none; border-radius:50%;
    left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px;
    border:3px solid #ffe9a8; box-shadow:0 0 20px 4px #ffc94a99;
    animation:impact-ring-kf .6s ease-out forwards;
  }
  .gift-impact-ring.big{border-color:#ff9adf; box-shadow:0 0 26px 6px #ff6fd8aa;}
  .gift-impact-ring.delay{animation-delay:.12s; opacity:.7;}
  @keyframes impact-ring-kf{
    0%{width:10px; height:10px; margin:-5px 0 0 -5px; opacity:1;}
    100%{width:170px; height:170px; margin:-85px 0 0 -85px; opacity:0;}
  }
  .gift-sparkle{
    position:fixed; z-index:210; pointer-events:none; font-size:18px;
    animation:sparkle-burst .85s ease-out forwards;
  }
  @keyframes sparkle-burst{
    0%{transform:translate(-50%,-50%) scale(.3); opacity:1;}
    100%{transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,0px))) scale(1); opacity:0;}
  }
  .screen-shake{animation:screen-shake-kf .45s ease-in-out;}
  @keyframes screen-shake-kf{
    0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);} 80%{transform:translateX(4px);}
  }
  .combo-banner{
    position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:60;
    background:linear-gradient(90deg,#ff2e9add,#ffc94add); padding:8px 18px; border-radius:999px;
    display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; white-space:nowrap;
    box-shadow:0 10px 24px -8px #000000aa; animation:combo-in .4s ease-out; transition:opacity .5s;
  }
  .combo-banner.fade-out{opacity:0;}
  .combo-banner .cb-emoji{font-size:20px; animation:combo-emoji-pop .5s ease-out;}
  .combo-banner .cb-combo{background:#fff; color:#ff2e9a; border-radius:999px; padding:1px 8px; font-size:12px;}
  .combo-banner.big-gift{
    background:linear-gradient(90deg,#ff2e9a,#ffc94a,#35f2ff); background-size:200% 100%;
    animation:combo-in .4s ease-out, gradient-shift 1.5s linear infinite; font-size:15px; padding:10px 22px;
  }
  @keyframes gradient-shift{0%{background-position:0% 50%;} 100%{background-position:200% 50%;}}
  /* Quà siêu khủng / độc quyền (>= 50.000 xu tổng giá trị): banner vàng kim nổi bật hơn cả big-gift */
  .combo-banner.mega-gift{
    background:linear-gradient(90deg,#ffd76a,#ff9a2e,#ff2e9a,#35f2ff); background-size:300% 100%;
    animation:combo-in .4s ease-out, gradient-shift 1.1s linear infinite; font-size:16px; padding:11px 24px;
    box-shadow:0 12px 30px -8px #ffc94acc;
  }

  /* Rung màn hình mạnh hơn — dùng cho quà siêu khủng / hiệu ứng legendary */
  .screen-shake-mega{animation:screen-shake-mega-kf .9s ease-in-out;}
  @keyframes screen-shake-mega-kf{
    0%,100%{transform:translate(0,0);} 10%{transform:translate(-10px,-4px);} 20%{transform:translate(10px,4px);}
    30%{transform:translate(-8px,4px);} 40%{transform:translate(8px,-4px);} 50%{transform:translate(-6px,2px);}
    60%{transform:translate(6px,-2px);} 70%{transform:translate(-4px,2px);} 80%{transform:translate(4px,-2px);} 90%{transform:translate(-2px,0);}
  }

  /* ---------- Hiệu ứng "legendary" — tầng cao nhất, dành cho quà độc quyền (vd 1.000.000 xu) ---------- */
  .legendary-gift-banner{
    position:fixed; inset:0; z-index:880; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(1100px 650px at 50% 42%, #4a2d05e6, #050301e0); opacity:0; transition:opacity .35s; pointer-events:none; overflow:hidden;
  }
  .legendary-gift-banner.show{opacity:1;}
  .legendary-gift-banner.hide{opacity:0;}
  .leg-swirl{background:conic-gradient(from 0deg, transparent 0deg, #ffd76a66 10deg, transparent 24deg, transparent 70deg, #ff9a2e55 84deg, transparent 100deg, transparent 160deg, #ff2e9a55 176deg, transparent 196deg, transparent 260deg, #ffe15a66 276deg, transparent 296deg);}
  .leg-swirl2{opacity:.8;}
  .leg-rays{
    position:absolute; inset:-40%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #fff6d566 6deg, transparent 14deg, transparent 40deg, #ffd76a77 48deg, transparent 58deg, transparent 84deg, #ffe9a866 92deg, transparent 102deg);
    animation:fsg-rays-spin 4s linear infinite;
  }
  .leg-core{font-size:92px; filter:drop-shadow(0 0 34px #ffe6a0ee) drop-shadow(0 16px 24px #000c);}
  .leg-badge{
    position:relative; font-size:12px; font-weight:900; letter-spacing:2px; color:#3a2405;
    background:linear-gradient(90deg,#ffe9a8,#ffc94a,#ffe9a8); background-size:200% 100%;
    padding:4px 16px; border-radius:999px; animation:gradient-shift 1.4s linear infinite;
    box-shadow:0 4px 14px -4px #000a;
  }
  .leg-text{font-size:17px; text-shadow:0 2px 12px #000d;}

  /* ---------- 5 hiệu ứng quà mới: cánh hoa / bong bóng / nụ hôn / tuyết / bóng bay ---------- */
  .petal-fall-item{position:fixed; top:-40px; z-index:850; font-size:20px; animation:petal-fall-kf linear forwards; pointer-events:none;}
  .petal-fall-item.big{font-size:28px;}
  @keyframes petal-fall-kf{0%{transform:translate(0,0) rotate(0deg); opacity:0;} 8%{opacity:1;} 100%{transform:translate(var(--sway), 108vh) rotate(340deg); opacity:.85;}}

  .bubble-rise-item{position:fixed; bottom:-40px; z-index:850; border-radius:50%; pointer-events:none; animation:bubble-rise-kf linear forwards;
    background:radial-gradient(circle at 32% 28%, #ffffffcc, #9fe8ffaa 45%, #35c9ff44 100%); border:1px solid #ffffff66; box-shadow:0 0 10px #35c9ff55;}
  .bubble-rise-item.big{filter:drop-shadow(0 0 8px #35c9ffaa);}
  @keyframes bubble-rise-kf{0%{transform:translate(0,0) scale(.6); opacity:0;} 10%{opacity:.9;} 90%{opacity:.8;} 100%{transform:translate(var(--sway), -108vh) scale(1); opacity:0;}}

  .kiss-fly-item{position:fixed; z-index:851; font-size:24px; animation:kiss-fly-kf 1.6s ease-out forwards; pointer-events:none; filter:drop-shadow(0 0 6px #ff6fd8aa);}
  .kiss-fly-item.big{font-size:32px;}
  @keyframes kiss-fly-kf{0%{transform:translate(0,0) scale(.5) rotate(-8deg); opacity:0;} 15%{opacity:1; transform:translate(0,-20px) scale(1.1) rotate(6deg);} 100%{transform:translate(var(--kx), -220px) scale(.9) rotate(-6deg); opacity:0;}}

  .snow-fall-item{position:fixed; top:-40px; z-index:849; font-size:18px; color:#eaf6ff; text-shadow:0 0 6px #ffffffcc; animation:snow-fall-kf linear forwards; pointer-events:none;}
  .snow-fall-item.big{font-size:24px;}
  @keyframes snow-fall-kf{0%{transform:translate(0,0) rotate(0deg); opacity:0;} 10%{opacity:1;} 100%{transform:translate(var(--sway), 108vh) rotate(180deg); opacity:.9;}}

  .balloon-rise-item{position:fixed; bottom:-70px; z-index:850; width:26px; height:34px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; pointer-events:none;
    animation:balloon-rise-kf linear forwards; box-shadow:inset -4px -4px 8px #00000033, 0 0 10px #ffffff33;}
  .balloon-rise-item.big{width:34px; height:44px;}
  .balloon-rise-item::after{content:''; position:absolute; left:50%; top:100%; width:1px; height:22px; background:#ffffff55; transform:translateX(-50%);}
  @keyframes balloon-rise-kf{0%{transform:translate(0,0) rotate(-4deg); opacity:0;} 8%{opacity:.95;} 50%{transform:translate(var(--sway), -55vh) rotate(4deg);} 100%{transform:translate(calc(var(--sway) * -1), -112vh) rotate(-4deg); opacity:0;}}

  /* ---------- 3 hiệu ứng "trên legendary" cho quà siêu khủng >1 triệu xu: phượng hoàng / thần long / tối thượng ---------- */
  .phoenix-gift-banner{
    position:fixed; inset:0; z-index:882; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(1000px 600px at 50% 42%, #6a1505e6, #0c0301e0); opacity:0; transition:opacity .3s; pointer-events:none; overflow:hidden;
  }
  .phoenix-gift-banner.show{opacity:1;}
  .phoenix-gift-banner.hide{opacity:0;}
  .phx-flames{position:absolute; inset:-30%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #ff6a2e77 12deg, transparent 30deg, transparent 90deg, #ffd76a66 106deg, transparent 126deg, transparent 210deg, #ff2e4d66 226deg, transparent 250deg);
    animation:fsg-rays-spin 4.5s linear infinite;
  }
  .phx-bird{font-size:78px; filter:drop-shadow(0 0 26px #ff6a2eee) drop-shadow(0 12px 20px #000c); animation:phx-pulse 1.1s ease-in-out infinite;}
  @keyframes phx-pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
  .phx-badge{position:relative; font-size:12px; font-weight:900; letter-spacing:2px; color:#3a0f05;
    background:linear-gradient(90deg,#ffb17a,#ff6a2e,#ffb17a); background-size:200% 100%;
    padding:4px 16px; border-radius:999px; animation:gradient-shift 1.4s linear infinite; box-shadow:0 4px 14px -4px #000a;}
  .phx-text{font-size:16px; font-weight:700; color:#fff; text-shadow:0 2px 8px #000a; text-align:center; padding:0 24px; position:relative;}
  .phx-ember{position:fixed; bottom:-30px; z-index:851; font-size:20px; animation:phx-ember-kf 1.6s ease-out forwards; pointer-events:none;}
  @keyframes phx-ember-kf{0%{transform:translate(0,0) scale(.6); opacity:0;} 15%{opacity:1;} 100%{transform:translate(var(--drift), -70vh) scale(1); opacity:0;}}

  .dragon-gift-banner{
    position:fixed; inset:0; z-index:883; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(1000px 600px at 50% 42%, #05401ce6, #030a05e0); opacity:0; transition:opacity .3s; pointer-events:none; overflow:hidden;
  }
  .dragon-gift-banner.show{opacity:1;}
  .dragon-gift-banner.hide{opacity:0;}
  .drg-aura{position:absolute; inset:-30%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #ffd76a77 10deg, transparent 26deg, transparent 80deg, #4dff8c55 96deg, transparent 116deg, transparent 200deg, #ffe15a66 216deg, transparent 240deg);
    animation:fsg-rays-spin 5.5s linear infinite reverse;
  }
  .drg-body{font-size:84px; filter:drop-shadow(0 0 28px #ffd76aee) drop-shadow(0 12px 20px #000c); animation:drg-sway 1.6s ease-in-out infinite;}
  @keyframes drg-sway{0%,100%{transform:rotate(-6deg) scale(1);} 50%{transform:rotate(6deg) scale(1.08);}}
  .drg-badge{position:relative; font-size:12px; font-weight:900; letter-spacing:2px; color:#062a12;
    background:linear-gradient(90deg,#b6ffcf,#4dff8c,#b6ffcf); background-size:200% 100%;
    padding:4px 16px; border-radius:999px; animation:gradient-shift 1.4s linear infinite; box-shadow:0 4px 14px -4px #000a;}
  .drg-text{font-size:16px; font-weight:700; color:#fff; text-shadow:0 2px 8px #000a; text-align:center; padding:0 24px; position:relative;}
  .drg-wisp{position:fixed; z-index:851; font-size:20px; pointer-events:none; animation:drg-wisp-kf 1.4s ease-out forwards;}
  @keyframes drg-wisp-kf{0%{transform:translate(-50%,-50%) scale(.4); opacity:1;} 100%{transform:translate(calc(-50% + var(--gx)), calc(-50% + var(--gy))) scale(1); opacity:0;}}

  .supreme-gift-banner{
    position:fixed; inset:0; z-index:890; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:radial-gradient(1200px 700px at 50% 42%, #241033e6, #020103e6); opacity:0; transition:opacity .35s; pointer-events:none; overflow:hidden;
  }
  .supreme-gift-banner.show{opacity:1;}
  .supreme-gift-banner.hide{opacity:0;}
  .sup-swirl{background:conic-gradient(from 0deg, transparent 0deg, #ff2e9a66 8deg, transparent 22deg, transparent 70deg, #35f2ff66 86deg, transparent 106deg, transparent 170deg, #ffd76a66 186deg, transparent 206deg, transparent 280deg, #7c3aed66 296deg, transparent 316deg);}
  .sup-swirl2{opacity:.85;}
  .sup-rays{animation:fsg-rays-spin 3.4s linear infinite;}
  .sup-core{font-size:96px; filter:drop-shadow(0 0 40px #ffffffee) drop-shadow(0 16px 26px #000d); animation:phx-pulse 1s ease-in-out infinite;}
  .sup-badge{position:relative; font-size:12.5px; font-weight:900; letter-spacing:3px; color:#1a0a2b;
    background:linear-gradient(90deg,#ffe9ff,#ff8bf0,#8bf0ff,#ffe9ff); background-size:300% 100%;
    padding:5px 18px; border-radius:999px; animation:gradient-shift 1.1s linear infinite; box-shadow:0 4px 16px -3px #000b;}
  .sup-text{font-size:17px; text-shadow:0 2px 12px #000d;}

  /* ---- Tin nhắn bay: trôi ngang qua room-hero, phải -> trái ----
     Dùng `left` tính theo % của chính .room-hero (containing block, vì
     .room-hero có position:relative) thay vì đơn vị vw (theo % màn hình
     trình duyệt) — vw khiến tin nhắn xuất phát từ rất xa ngoài khung hẹp
     của phòng và bị .room-hero{overflow:hidden} cắt gần hết, chỉ lóe lên
     dính sát banner ở rìa thay vì trôi mượt qua toàn khung. */
  @keyframes flying-msg-move{
    0%{ left:100%; opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ left:-60%; opacity:0; }
  }
  .flying-msg{
    position:absolute; top:64px; white-space:nowrap; z-index:15;
    display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
    background:linear-gradient(90deg, var(--magenta,#ff2e9a), var(--cyan,#00e0ff));
    color:#fff; font-weight:700; font-size:13px; box-shadow:0 4px 16px -4px #00000066;
    animation:flying-msg-move 7s linear forwards; pointer-events:none;
  }
  .flying-msg .fm-name{opacity:.9; font-weight:800;}
  .flying-msg .fm-text{font-weight:600;}
  @keyframes combo-emoji-pop{0%{transform:scale(0);} 60%{transform:scale(1.4);} 100%{transform:scale(1);}}
  @keyframes combo-in{from{opacity:0; transform:translateX(-50%) translateY(-14px) scale(.8);} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}}

  /* ---------- Bảng "Thêm" (action sheet gộp nút chức năng phòng) ---------- */
  .more-actions-sheet{border-radius:22px; max-width:380px;}
  .more-actions-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding:4px 2px 6px;}
  .more-action-opt{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:14px 6px; border-radius:16px; background:var(--panel); border:1px solid var(--line);
    color:var(--text-dim); font-size:12px; font-weight:700; cursor:pointer; transition:.15s;
  }
  .more-action-opt:active{transform:scale(.94); border-color:var(--gold);}
  .more-action-opt .ma-ico{font-size:22px;}

  /* ---------- LÌ XÌ (lucky envelope) ---------- */
  .lixi-btn{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#ff4d6d,#ffb703); font-size:18px; flex-shrink:0;}
  .gift-lixi-panel{display:flex; flex-direction:column; gap:2px;}
  .gift-lixi-panel input[type="number"], .gift-lixi-panel input[type="text"]{
    padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:#00000022; color:inherit;
  }
  #lixi-tier-row [data-tier="vip"].selected{background:linear-gradient(135deg,#ffd166,#ff8a3d); color:#3a1900; border-color:transparent;}
  .lixi-hint{font-size:11.5px; color:var(--text-faint); margin-top:8px; line-height:1.5;}
  .lixi-floating-list{position:absolute; top:64px; right:10px; z-index:55; display:flex; flex-direction:column; gap:8px; pointer-events:none;}
  .lixi-envelope{
    pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,#c81e3c,#ff8a3d); border-radius:14px; padding:8px 12px;
    box-shadow:0 8px 20px -6px #000000aa; animation:lixi-swing 1.8s ease-in-out infinite, lixi-in .3s ease-out;
    border:1px solid #2b1f4533;
  }
  .lixi-envelope.claimed{opacity:.45; filter:grayscale(.6); cursor:default; animation:none;}
  .lixi-envelope.vip{background:linear-gradient(135deg,#8a5a00,#ffd166); border-color:#ffe9a8;}
  .lixi-envelope .lixi-icon{font-size:24px;}
  .lixi-envelope .lixi-from{font-size:12px; font-weight:800; color:#fff;}
  .lixi-envelope .lixi-left{font-size:11px; color:#ffe6c7;}
  @keyframes lixi-swing{0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);}}
  @keyframes lixi-in{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}}

  /* ---------- RƯƠNG QUÀ PHÒNG (treasure chest) — 3D, theo cấp bậc ---------- */
  .chest-floating{
    --tier-a:#ffc94a; --tier-b:#ff9f2b; --tier-glow:#ffc94a55;
    position:absolute; left:50%; top:-90px; transform:translateX(-50%); z-index:56;
    display:flex; flex-direction:column; align-items:center; cursor:pointer; perspective:400px;
    animation:chest-drop .7s cubic-bezier(.2,.9,.3,1.2) forwards, chest-bob 2.2s ease-in-out .7s infinite;
  }
  .chest-floating.hidden{display:none;}
  .chest-floating.tier-bronze{--tier-a:#c98a54; --tier-b:#8a5a37; --tier-glow:#c98a5455;}
  .chest-floating.tier-silver{--tier-a:#e3e9f0; --tier-b:#9aa5b1; --tier-glow:#c3ccd655;}
  .chest-floating.tier-gold{--tier-a:#ffdd7a; --tier-b:#ff9f2b; --tier-glow:#ffc94a66;}
  .chest-floating.tier-diamond{--tier-a:#9ef4ff; --tier-b:#3aa8d8; --tier-glow:#66e0ff66;}

  .chest-floating .chest-tier-badge{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:8px; font-weight:800;
    letter-spacing:.04em; padding:1px 7px; border-radius:999px; color:#1a1206; z-index:3;
    background:linear-gradient(90deg,var(--tier-a),var(--tier-b)); box-shadow:0 2px 6px -1px #0007;
  }
  .chest-floating .chest-glow{
    position:absolute; top:10px; left:50%; transform:translateX(-50%); width:76px; height:76px; border-radius:50%;
    background:radial-gradient(circle, var(--tier-glow), transparent 70%); z-index:-1; animation:chest-glow-pulse 1.8s ease-in-out infinite;
  }
  /* Rương 3D: thân + nắp lật mở bằng transform, không dùng icon emoji tĩnh */
  .chest-floating .chest-box{
    width:66px; height:58px; position:relative; transform-style:preserve-3d; margin-top:10px;
  }
  .chest-floating .chest-body{
    position:absolute; left:0; right:0; bottom:0; height:40px; border-radius:6px 6px 10px 10px;
    background:linear-gradient(155deg,var(--tier-a),var(--tier-b)); border:2px solid #1c1408;
    box-shadow:0 10px 22px -8px var(--tier-glow), inset 0 -6px 10px -4px #00000055;
  }
  .chest-floating .chest-body::after{
    content:''; position:absolute; left:0; right:0; top:0; height:6px; background:#1c1408; opacity:.4;
  }
  .chest-floating .chest-lid{
    position:absolute; left:-2px; right:-2px; top:0; height:26px; border-radius:10px 10px 4px 4px;
    background:linear-gradient(155deg,var(--tier-b),var(--tier-a)); border:2px solid #1c1408;
    transform-origin:bottom center; transform:rotateX(0deg) translateZ(1px);
    box-shadow:inset 0 2px 0 #ffffff33; transition:transform .45s cubic-bezier(.2,.9,.3,1.3);
  }
  .chest-floating .chest-lid::after{
    content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, #ffffff66 50%, transparent 60%);
    background-size:200% 100%; animation:chest-shine 2.6s linear infinite; border-radius:inherit;
  }
  .chest-floating .chest-burst{
    position:absolute; left:50%; top:6px; width:4px; height:4px; transform:translateX(-50%); opacity:0; pointer-events:none;
  }
  .chest-floating .chest-count{
    background:linear-gradient(90deg,var(--tier-a),var(--tier-b)); color:#1a1206; font-size:10.5px; font-weight:800; padding:2px 10px;
    border-radius:999px; margin-top:2px; box-shadow:0 3px 8px -2px #00000088; border:1.5px solid #1c1408; position:relative; z-index:2;
  }
  .chest-floating .chest-hint{
    color:#ffe1a3; font-size:9.5px; font-weight:700; margin-top:3px; text-shadow:0 1px 3px #000a;
  }
  /* Trạng thái đang mở: nắp bật ngửa ra sau + rương rung nhẹ + toé sáng */
  .chest-floating.opening .chest-lid{transform:rotateX(-115deg) translateZ(1px) translateY(-4px);}
  .chest-floating.opening .chest-box{animation:chest-shake .45s ease-in-out;}
  .chest-floating.opening .chest-burst{opacity:1; animation:chest-burst-pop .6s ease-out forwards;}
  .chest-floating.opened{cursor:default; animation:none;}
  .chest-floating.opened .chest-lid{transform:rotateX(-115deg) translateZ(1px) translateY(-4px);}
  .chest-floating.opened .chest-box{opacity:.45; filter:grayscale(.6);}
  .chest-floating.opened .chest-glow{display:none;}
  .chest-floating.opened .chest-tier-badge{opacity:.5;}
  .chest-floating.opened .chest-count{opacity:.5;}
  .chest-floating.opened .chest-hint{opacity:.5;}
  @keyframes chest-drop{0%{top:-90px; opacity:0;} 100%{top:14px; opacity:1;}}
  @keyframes chest-bob{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-7px);}}
  @keyframes chest-glow-pulse{0%,100%{opacity:.55; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.15);}}
  @keyframes chest-shine{0%{background-position:200% 0;} 100%{background-position:-50% 0;}}
  @keyframes chest-shake{0%,100%{transform:translateX(0) rotate(0);} 25%{transform:translateX(-3px) rotate(-3deg);} 75%{transform:translateX(3px) rotate(3deg);}}
  @keyframes chest-burst-pop{
    0%{box-shadow:0 0 0 0 var(--tier-a); opacity:1;}
    100%{box-shadow:0 0 0 46px transparent; opacity:0;}
  }


  /* ---------- REWARD RESULT MODAL (lì xì / rương) ---------- */
  .reward-result-emoji{font-size:56px; animation:combo-emoji-pop .5s ease-out;}
  .reward-result-title{font-size:17px; font-weight:800; margin-top:6px;}
  .reward-result-desc{font-size:13.5px; color:var(--text-dim); margin-top:6px; line-height:1.6;}

  .heart-float{position:fixed; z-index:200; pointer-events:none; font-size:20px; animation:heart-up 1.6s ease-out forwards;}
  @keyframes heart-up{
    0%{transform:translateY(0) translateX(0) scale(.7); opacity:1;}
    100%{transform:translateY(-140px) translateX(var(--dx,20px)) scale(1.1); opacity:0;}
  }
  .seat-reaction-float{
    position:fixed; z-index:200; pointer-events:none; font-size:22px; transform:translateX(-50%);
    animation:seat-reaction-up 1.4s ease-out forwards;
  }
  @keyframes seat-reaction-up{
    0%{transform:translate(-50%,0) scale(.6); opacity:0;}
    15%{opacity:1; transform:translate(-50%,-10px) scale(1.15);}
    100%{transform:translate(-50%,-70px) scale(1); opacity:0;}
  }

  /* ---------- ROOM EFFECTS ("hiệu ứng phòng") ---------- */
  .room-effect-overlay{
    position:absolute; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none; opacity:1; transition:opacity .6s ease; perspective:600px;
  }
  .room-effect-overlay.fade-out{opacity:0;}
  .room-effect-overlay img{max-width:80%; max-height:70%; object-fit:contain; filter:drop-shadow(0 10px 30px #000000aa);}
  .room-effect-caption{
    margin-top:10px; background:#000000aa; padding:6px 16px; border-radius:999px; font-size:12.5px; font-weight:700; color:#fff;
  }

  /* CSS-driven room effects (no GIF needed): particles spawned by JS, styled here.
     Mỗi hạt xoay theo trục Y (rotateY) khi bay để tạo cảm giác chiều sâu 3D thay vì phẳng. */
  .fx-particle{ position:absolute; top:-40px; z-index:150; pointer-events:none; will-change:transform, opacity; transform-style:preserve-3d; filter:drop-shadow(0 4px 6px #00000066); }
  .fx-confetti .fx-particle{ width:8px; height:14px; border-radius:2px; animation:fx-fall linear forwards; }
  .fx-hearts .fx-particle{ font-size:22px; bottom:-40px; top:auto; animation:fx-rise linear forwards; }
  .fx-fireworks .fx-particle{ font-size:26px; animation:fx-burst ease-out forwards; }
  .fx-sparkle .fx-particle{ font-size:18px; animation:fx-twinkle ease-in-out forwards; }
  .fx-snow .fx-particle{ font-size:16px; animation:fx-fall-drift linear forwards; }
  .fx-royal .fx-particle{ font-size:26px; animation:fx-royal-spin ease-out forwards; filter:drop-shadow(0 0 8px #ffe9a8cc); }
  /* ---------- 4 hiệu ứng phòng mới (bong bóng / cánh hoa / sét / mưa tiền) ---------- */
  .fx-bubbles .fx-particle{ font-size:20px; bottom:-40px; top:auto; animation:fx-rise linear forwards; }
  .fx-petals .fx-particle{ font-size:18px; animation:fx-fall-drift linear forwards; }
  .fx-lightning .fx-particle{ font-size:28px; animation:fx-burst ease-out forwards; filter:drop-shadow(0 0 8px #fff066cc); }
  .fx-money .fx-particle{ font-size:20px; animation:fx-fall linear forwards; }
  /* ---------- 10 hiệu ứng "vào phòng" kiểu 3D (rotateY), riêng biệt với hiệu ứng phòng ---------- */
  .fx3d-orbit .fx-particle, .fx3d-cube .fx-particle, .fx3d-portal .fx-particle,
  .fx3d-dragon .fx-particle, .fx3d-phoenix .fx-particle, .fx3d-diamond .fx-particle,
  .fx3d-meteor .fx-particle, .fx3d-crown .fx-particle, .fx3d-thunder .fx-particle,
  .fx3d-butterfly .fx-particle, .fx3d-unicorn .fx-particle, .fx3d-galaxy .fx-particle{ font-size:26px; animation:fx-royal-spin ease-out forwards; }
  .fx3d-orbit .fx-particle{ filter:drop-shadow(0 0 8px #7d5cffcc); }
  .fx3d-cube .fx-particle{ filter:drop-shadow(0 0 6px #ffd76699); }
  .fx3d-portal .fx-particle{ filter:drop-shadow(0 0 10px #35f2ffcc); }
  .fx3d-dragon .fx-particle{ filter:drop-shadow(0 0 8px #ff7a3dcc); }
  .fx3d-phoenix .fx-particle{ filter:drop-shadow(0 0 10px #ff4d4dcc); }
  .fx3d-diamond .fx-particle{ filter:drop-shadow(0 0 8px #9fe8ffcc); }
  .fx3d-meteor .fx-particle{ filter:drop-shadow(0 0 8px #ffffffaa); }
  .fx3d-crown .fx-particle{ filter:drop-shadow(0 0 8px #ffe9a8cc); }
  .fx3d-thunder .fx-particle{ filter:drop-shadow(0 0 10px #fff066cc); }
  .fx3d-butterfly .fx-particle{ filter:drop-shadow(0 0 6px #ff9adfcc); }
  .fx3d-unicorn .fx-particle{ filter:drop-shadow(0 0 8px #ff9adfcc); }
  .fx3d-galaxy .fx-particle{ filter:drop-shadow(0 0 8px #7d5cffcc); }
  .fx3d-orbit::before, .fx3d-cube::before, .fx3d-portal::before, .fx3d-dragon::before,
  .fx3d-phoenix::before, .fx3d-diamond::before, .fx3d-meteor::before, .fx3d-crown::before,
  .fx3d-thunder::before, .fx3d-butterfly::before, .fx3d-unicorn::before, .fx3d-galaxy::before{
    content:''; position:absolute; inset:-20%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #ffffff33 10deg, transparent 20deg, transparent 60deg, #ffffff22 70deg, transparent 80deg);
    animation:fsg-rays-spin 4s linear infinite;
  }
  @keyframes fx-fall{
    0%{transform:translateY(0) rotateY(0deg) rotate(0deg); opacity:1;}
    100%{transform:translateY(110vh) rotateY(1080deg) rotate(540deg); opacity:.9;}
  }
  @keyframes fx-fall-drift{
    0%{transform:translate(0,0) rotateY(0deg) rotate(0deg); opacity:1;}
    50%{transform:translate(var(--dx,20px), 55vh) rotateY(540deg) rotate(180deg);}
    100%{transform:translate(0, 110vh) rotateY(1080deg) rotate(360deg); opacity:.8;}
  }
  @keyframes fx-rise{
    0%{transform:translateY(0) translateX(0) rotateY(0deg) scale(.6); opacity:0;}
    15%{opacity:1;}
    100%{transform:translateY(-100vh) translateX(var(--dx,0px)) rotateY(720deg) scale(1.2); opacity:0;}
  }
  @keyframes fx-burst{
    0%{transform:translate(0,0) rotateY(0deg) scale(.3); opacity:1;}
    100%{transform:translate(var(--dx,0px), var(--dy,0px)) rotateY(480deg) scale(1.3); opacity:0;}
  }
  @keyframes fx-twinkle{
    0%{transform:scale(.2) rotateY(0deg); opacity:0;}
    50%{transform:scale(1.2) rotateY(360deg); opacity:1;}
    100%{transform:scale(.4) rotateY(720deg); opacity:0;}
  }
  /* ---------- Banner "Vào phòng" (giống hiệu ứng thú cưỡi) ---------- */
  .entrance-banner{
    position:absolute; left:0; right:0; top:96px; z-index:160; display:flex; justify-content:center;
    pointer-events:none; opacity:1; transition:opacity .5s ease; overflow:hidden;
  }
  .entrance-banner.fade-out{opacity:0;}
  .entrance-banner .eb-track{
    display:flex; align-items:center; gap:10px; padding:8px 20px 8px 8px; border-radius:999px;
    background:linear-gradient(90deg,#ffe9a8ee,#ff9adfee 55%,#35f2ffcc);
    box-shadow:0 10px 26px -8px #000000cc, 0 0 20px -4px #ffd766aa;
    white-space:nowrap; animation:eb-slide-in 3.6s cubic-bezier(.2,.8,.25,1) forwards;
  }
  .entrance-banner .eb-avatar{
    width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; font-size:20px;
    display:flex; align-items:center; justify-content:center; background:#ffffff33; border:2px solid #fff;
  }
  .entrance-banner .eb-avatar img{width:100%; height:100%; object-fit:cover;}
  .entrance-banner .eb-text{font-size:13.5px; font-weight:800; color:#2a1240; text-shadow:0 1px 0 #ffffff55;}
  .entrance-banner .eb-fx-tag{
    display:inline-block; margin-left:4px; padding:1px 9px; border-radius:999px; background:#2a1240; color:#ffe9a8;
    font-size:10.5px; font-weight:700; vertical-align:middle;
  }
  @keyframes eb-slide-in{
    0%{transform:translateX(-120%); opacity:0;}
    12%{opacity:1;}
    18%{transform:translateX(0);}
    82%{transform:translateX(0); opacity:1;}
    100%{transform:translateX(120%); opacity:0;}
  }

  .fx-royal::before{
    content:''; position:absolute; inset:-20%; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg, #ffe9a855 10deg, transparent 20deg, transparent 60deg, #ff9adf55 70deg, transparent 80deg);
    animation:fsg-rays-spin 4s linear infinite;
  }
  @keyframes fx-royal-spin{
    0%{transform:translate(-50%,-50%) rotateY(0deg) scale(.2); opacity:0;}
    18%{opacity:1;}
    100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) rotateY(1080deg) scale(1.4); opacity:0;}
  }

  .toast{
    /* BUG: trước đây dùng color:var(--text) — biến này mặc định là màu GẦN TRẮNG
       (#f4f0ff, thiết kế cho nền tối). Nhưng .toast luôn có nền trắng (#ffffffee)
       vì nó gắn thẳng vào <body>, không nằm trong .modal-sheet (nơi có override
       lại --text sang màu tối). Kết quả: chữ trắng trên nền trắng -> vô hình,
       khiến rất nhiều thông báo (vd "Bạn không đủ Đậu 🌱") hiện ra như 1 khối
       trắng trống không đọc được gì. Sửa: hardcode màu chữ tối, không phụ thuộc
       theme của trang nữa vì nền toast luôn cố định là trắng. */
    position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:#ffffffee; color:#241a3d; padding:10px 18px; border:1px solid var(--line);
    border-radius:999px; font-size:13px; font-weight:600; z-index:300; border:1px solid var(--line);
    box-shadow:0 10px 26px -10px #00000033; backdrop-filter:blur(8px);
  }

  /* Hiệu ứng "Lên cấp!" — hiện góc trên màn hình, gọi từ showLevelUpToast() khi bất kỳ
     API nào (chat, DM, GIF, nhận thưởng nhiệm vụ...) trả về levelUp.leveledUp = true. */
  .levelup-toast{
    position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-24px); z-index:420;
    display:flex; align-items:center; gap:12px; max-width:92vw;
    background:linear-gradient(135deg,#3a1f00ee,#7a4a00ee); border:1px solid #ffd76a88;
    padding:12px 18px; border-radius:18px; box-shadow:0 14px 30px -8px #000000dd, 0 0 0 1px #ffd76a33;
    opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none;
  }
  .levelup-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .levelup-toast-icon{ font-size:30px; line-height:1; filter:drop-shadow(0 0 6px #ffd76a); }
  .levelup-toast-title{ color:#ffe9a8; font-size:14.5px; font-weight:800; }
  .levelup-toast-sub{ color:#ffd76acc; font-size:12px; font-weight:600; margin-top:1px; }
  .levelup-toast-rewards{ color:#fff2cc; font-size:11.5px; font-weight:700; margin-top:3px; }

  .room-state-popup{
    position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:320;
    background:#3a1f00ee; color:#ffd58a; border:1px solid #ffc94a55; padding:8px 16px; border-radius:999px;
    font-size:12.5px; font-weight:700; box-shadow:0 8px 20px -6px #000000cc; max-width:88vw;
    text-align:center; transition:opacity .35s, transform .35s; opacity:1;
  }
  .room-state-popup.hide{opacity:0; transform:translateX(-50%) translateY(-10px); pointer-events:none;}

  /* Popup nổi bật khi 1 trong 3 bot hệ thống (Cảnh báo / Hỗ trợ / Hệ Thống) gửi tin nhắn mới */
  .system-notice-popup{
    position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:400; cursor:pointer;
    display:flex; align-items:center; gap:10px; max-width:92vw;
    background:linear-gradient(135deg,#2a1152ee,#4a1470ee); border:1px solid #ffd76a66;
    padding:10px 16px; border-radius:16px; box-shadow:0 12px 28px -8px #000000dd, 0 0 0 1px #ffd76a22;
    transition:opacity .35s, transform .35s; opacity:1; animation:snp-in .35s ease;
  }
  .system-notice-popup.hide{opacity:0; transform:translateX(-50%) translateY(-14px); pointer-events:none;}
  .system-notice-popup .snp-icon{font-size:20px; flex:none; filter:drop-shadow(0 0 6px #ffd76a99);}
  .system-notice-popup .snp-text{font-size:13px; font-weight:700; color:#fff2d6; line-height:1.35;}
  @keyframes snp-in{from{opacity:0; transform:translateX(-50%) translateY(-18px);} to{opacity:1; transform:translateX(-50%) translateY(0);}}

  .invite-banner{
    position:fixed; top:70px; left:50%; transform:translateX(-50%); background:#141428ee; padding:12px 16px;
    border-radius:16px; font-size:13px; font-weight:600; z-index:320; border:1px solid var(--cyan);
    display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px #0008; max-width:90vw; color:#f4f0ff;
  }
  .invite-banner button{ border:none; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; }
  .invite-banner .accept-btn{ background:var(--cyan); color:#031; }
  .invite-banner .decline-btn{ background:#ffffff22; color:#fff; }

  .greet-banner{
    position:fixed; bottom:150px; left:50%; transform:translateX(-50%); background:#141428ee; padding:9px 14px;
    border-radius:999px; font-size:12.5px; font-weight:600; z-index:300; border:1px solid var(--line);
    display:flex; align-items:center; gap:10px; box-shadow:0 6px 18px #0006; max-width:90vw; color:#f4f0ff;
  }
  .greet-banner button{ border:none; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; background:var(--magenta); color:#fff; }

  .profile-sheet .exp-bar-wrap{background:#2b1f4510; border-radius:999px; height:8px; overflow:hidden; margin-top:8px;}
  .profile-sheet .exp-bar{height:100%; background:linear-gradient(90deg,var(--cyan),var(--magenta)); border-radius:999px;}
  .profile-head{display:flex; align-items:center; gap:14px; position:relative;}
  .profile-head .p-av{width:60px; height:60px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid var(--gold); line-height:1;}
  .profile-head .p-name{font-size:18px; font-weight:800;}
  .profile-head .p-lv{font-size:12px; color:var(--gold); font-weight:700;}
  .profile-head .phv-info{flex:1; min-width:0;}
  .p-uid-row{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-faint); margin-top:3px;}
  .p-uid-row b{color:var(--text-dim); font-weight:700;}
  .p-uid-copy{width:20px; height:20px; border-radius:6px; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--text-dim); flex-shrink:0;}
  .p-uid-copy:active{transform:scale(.9);}
  .p-chevron{width:30px; height:30px; border-radius:50%; background:var(--panel-strong); border:1px solid var(--line); color:var(--text-faint); font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s;}
  .p-chevron.open{transform:rotate(90deg); color:var(--cyan);}

  /* ---------- Wallet cards (profile) ---------- */
  .wallet-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:16px;}
  .wallet-card{
    display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:12px 14px; transition:.15s; min-width:0; box-shadow:var(--shadow-sm);
  }
  .wallet-card:active{transform:scale(.97); box-shadow:var(--shadow-md); background:var(--panel-strong);}
  .wallet-card .wc-ico{width:34px; height:34px; border-radius:11px; background:linear-gradient(160deg,#f2e9ff,#e8f6ff); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; box-shadow:inset 0 0 0 1px var(--line);}
  .wallet-card > div{min-width:0;}
  .wallet-card .wc-v{font-size:16px; font-weight:800; line-height:1.15; overflow-wrap:break-word; word-break:break-all;}
  .wallet-card .wc-l{font-size:10.5px; color:var(--text-faint); margin-top:1px;}

  /* ---------- Icon grid menu (profile) ---------- */
  .profile-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; margin-top:18px;}
  .grid-item{display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;}
  .grid-item:active .grid-ico{transform:scale(.9);}
  .grid-ico{
    width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center;
    font-size:21px; transition:transform .15s; position:relative;
  }
  .grid-ico.c-cyan{background:linear-gradient(155deg,var(--cyan-dim),#35f2ff14);}
  .grid-ico.c-gold{background:linear-gradient(155deg,#ffc94a55,#ffc94a14);}
  .grid-ico.c-magenta{background:linear-gradient(155deg,var(--magenta-dim),#ff2e9a14);}
  .grid-ico.c-violet{background:linear-gradient(155deg,#8a6bff55,#8a6bff14);}
  .grid-item .grid-label{font-size:11px; color:var(--text-dim); font-weight:600; text-align:center; line-height:1.2;}
  .grid-ico .icon-badge{top:-3px; right:-3px;}

  /* ---------- Lobby quick menu: gọn thành icon 3D ---------- */
  .lobby-quick-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px 4px;}
  .lobby-quick-item{display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; background:none; border:none; text-decoration:none; color:inherit;}
  .lobby-quick-item:active .lobby-quick-ico{transform:translateY(2px) scale(.94); box-shadow:0 1px 0 -1px #00000000, inset 0 -2px 4px #00000030;}
  .lobby-quick-ico{
    width:50px; height:50px; border-radius:17px; display:flex; align-items:center; justify-content:center;
    font-size:21px; position:relative; transition:transform .12s, box-shadow .12s;
    border:1px solid #2b1f4522;
    box-shadow:
      inset 0 2px 2px #ffffff40,
      inset 0 -4px 6px #00000030,
      0 6px 10px -4px #00000066;
  }
  .lobby-quick-ico.q-gold{background:linear-gradient(155deg,#ffd76a,#e6a627);}
  .lobby-quick-ico.q-cyan{background:linear-gradient(155deg,#7be8ff,#1aa8c9);}
  .lobby-quick-ico.q-violet{background:linear-gradient(155deg,#b39bff,#7c5ce0);}
  .lobby-quick-ico.q-amber{background:linear-gradient(155deg,#ffb877,#d9772e);}
  .lobby-quick-ico.q-magenta{background:linear-gradient(155deg,#ff8ad0,#d6249e);}
  .lobby-quick-ico.q-mint{background:linear-gradient(155deg,#8af5d6,#2bb98c);}
  .lobby-quick-label{font-size:10.5px; color:var(--text-dim); font-weight:600; text-align:center; line-height:1.15;}
  .lobby-quick-ico .icon-badge{top:-4px; right:-4px;}
  @media (max-width:360px){ .lobby-quick-grid{grid-template-columns:repeat(3,1fr); gap:12px 4px;} }

  /* ---------- Bottom list rows (profile) ---------- */
  .profile-list-row{
    display:flex; align-items:center; gap:10px; padding:13px 4px; border-bottom:1px solid var(--line);
    font-size:14px; font-weight:600;
  }
  .profile-list-row:last-child{border-bottom:none;}
  .profile-list-row .plr-chev{margin-left:auto; color:var(--text-faint); font-size:14px;}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
  .stat-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center;}
  .stat-box .sv{font-size:18px; font-weight:800;}
  .stat-box .sl{font-size:11px; color:var(--text-faint); margin-top:2px;}
  .danger-btn{width:100%; margin-top:18px; padding:13px; border-radius:12px; background:#ff547022; color:var(--danger); font-weight:700; border:1px solid #ff547044;}

  .empty-hint{text-align:center; color:var(--text-faint); font-size:13px; padding:30px 20px;}
  .note-banner{font-size:11.5px; color:var(--text-faint); text-align:center; padding:8px 20px 0; line-height:1.5;}

  /* ---------- BADGES: verified / admin / title / extra ---------- */
  /* line-height:1 (thay vì 0) để chừa đủ khoảng trống dọc cho dấu tiếng Việt
     (ví dụ "Quý tộc") — line-height:0 khiến dấu ý/ộ bị đè lên chữ, trông như vỡ chữ. */
  .badge-inline{display:inline-flex; align-items:center; gap:2px; vertical-align:middle; line-height:1;}
  .gender-chip{
    display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%;
    font-size:11px; font-weight:800; vertical-align:middle; line-height:1;
  }
  .gender-chip.g-male{background:#35c2ff33; color:#5fd0ff;}
  .gender-chip.g-female{background:#ff2e9a33; color:#ff7fc2;}
  .gender-chip.g-other{background:#8a6bff33; color:#b3a0ff;}
  .b-verified svg{display:block; filter:drop-shadow(0 0 2px #35c7ff77);}
  .b-official svg{display:block; filter:drop-shadow(0 0 2px #ffc94a99);}
  .official-text-tag{
    display:inline-flex; align-items:center; vertical-align:middle; margin-left:2px;
    font-size:10px; font-weight:800; letter-spacing:.4px; color:#3a2900;
    background:linear-gradient(135deg,#ffe08a,#ffc94a); padding:2px 6px; border-radius:5px;
    box-shadow:0 1px 3px #ffc94a55;
  }
  .b-admin{font-size:11px;}
  .b-extra{cursor:default;}
  .title-tag{
    font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:6px; margin-right:3px; margin-bottom:3px;
    background:#2b1f4514; border:1px solid #2b1f4522; white-space:nowrap; display:inline-block;
  }
  .title-tag-row{display:flex; flex-wrap:wrap; gap:0;}

  /* ---------- TITLE PILLS: danh hiệu dạng viên thuốc gradient cho trang hồ sơ chi tiết ---------- */
  .title-pill-row{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px;}
  .title-pill{
    --tc: #8a7fae;
    display:inline-flex; align-items:center; gap:5px; padding:5px 12px 5px 6px; border-radius:999px;
    font-size:11.5px; font-weight:800; color:#fff; white-space:nowrap;
    background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 85%, #000 10%), color-mix(in srgb, var(--tc) 55%, #000 35%));
    box-shadow:0 2px 6px #00000040, inset 0 1px 0 #ffffff26;
    border:1px solid color-mix(in srgb, var(--tc) 60%, #fff 10%);
  }
  .title-pill .tp-icon{
    display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
    background:#2b1f4526; font-size:11px;
  }
  .seat-badges{display:flex; align-items:center; justify-content:center; gap:2px; margin-top:1px;}

  /* ---------- CUSTOM UPLOADED AVATAR PHOTO ---------- */
  .av-photo{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
  .av-letter{
    width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:1em; line-height:1; text-shadow:0 1px 2px #0004;
  }

  /* ---------- AVATAR FRAMES ---------- */
  .frame-ring{position:absolute; inset:-6px; border-radius:50%; pointer-events:none; z-index:2;}
  .frame-ring-img{position:absolute; inset:-10%; width:120%; height:120%; object-fit:contain; border-radius:0; background:transparent; -webkit-mask:none; mask:none; animation:none; z-index:2;}
  .frame-neon{background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan)); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 4s linear infinite;}
  .frame-gold{background:conic-gradient(from 0deg,#ffe08a,#ffc94a,#b8860b,#ffc94a,#ffe08a); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));}
  .frame-fire{background:conic-gradient(from 0deg,#ff4d00,#ffae00,#ff2e2e,#ffae00,#ff4d00); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 2.2s linear infinite;}
  .frame-crystal{background:conic-gradient(from 0deg,#a8e6ff,#e0c3fc,#9be8ff,#e0c3fc,#a8e6ff); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 5s linear infinite reverse;}
  .frame-royal{background:conic-gradient(from 0deg,#ffd700,#7c3aed,#ff2e9a,#ffd700); padding:3.5px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); animation:spin-slow 3s linear infinite;}
  .frame-invite{background:conic-gradient(from 0deg,#7cd672,#35f2ff,#ff2e9a,#ffc94a,#7cd672); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 3.6s linear infinite;}

  /* ---------- ROOM AVATAR FRAMES (khung avatar PHÒNG — catalog riêng, room_frames_catalog) ----------
     Cùng tên class `.room-frame-xxx` được dùng ở 2 nơi khác nhau:
     - `.frame-ring.room-frame-xxx`     -> vòng tròn nhỏ ở header trong phòng (avatar 44px)
     - `.room-cover-frame.room-frame-xxx` -> viền vuông bo góc phủ quanh ảnh bìa phòng ở trang chủ */
  .frame-ring.room-frame-spotlight{background:conic-gradient(from 0deg,#ffe066,#fff,#ffe066); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 4.5s linear infinite;}
  .frame-ring.room-frame-neon{background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan)); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 3.4s linear infinite;}
  .frame-ring.room-frame-gold{background:conic-gradient(from 0deg,#ffe08a,#ffc94a,#b8860b,#ffc94a,#ffe08a); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));}
  .frame-ring.room-frame-royal{background:conic-gradient(from 0deg,#ffd700,#7c3aed,#ff2e9a,#ffd700); padding:3.5px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); animation:spin-slow 3s linear infinite;}
  .frame-ring.room-frame-diamond{background:conic-gradient(from 0deg,#a8e6ff,#e0c3fc,#9be8ff,#e0c3fc,#a8e6ff); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 5s linear infinite reverse;}

  .room-cover-frame{position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:18px; padding:3.5px;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;}
  .room-cover-frame-img{position:absolute; inset:-3px; z-index:1; pointer-events:none; border-radius:20px; width:calc(100% + 6px); height:calc(100% + 6px); object-fit:contain;
    background:transparent; padding:0; -webkit-mask:none; mask:none;}
  .room-cover-frame.room-frame-spotlight{background:conic-gradient(from 0deg,#ffe066,#fff,#ffe066); animation:spin-slow 4.5s linear infinite;}
  .room-cover-frame.room-frame-neon{background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--cyan)); animation:spin-slow 3.4s linear infinite;}
  .room-cover-frame.room-frame-gold{background:conic-gradient(from 0deg,#ffe08a,#ffc94a,#b8860b,#ffc94a,#ffe08a);}
  .room-cover-frame.room-frame-royal{background:conic-gradient(from 0deg,#ffd700,#7c3aed,#ff2e9a,#ffd700); animation:spin-slow 3s linear infinite;}
  .room-cover-frame.room-frame-diamond{background:conic-gradient(from 0deg,#a8e6ff,#e0c3fc,#9be8ff,#e0c3fc,#a8e6ff); animation:spin-slow 5s linear infinite reverse;}

  /* ---------- NOBLE (Quý Tộc) exclusive personal avatar frames ---------- */
  .frame-ring.frame-noble-bt{background:conic-gradient(from 0deg,#e6a627,#ffe08a,#e6a627); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));}
  .frame-ring.frame-noble-ht{background:conic-gradient(from 0deg,#3d63e0,#9fc0ff,#3d63e0); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 3.6s linear infinite;}
  .frame-ring.frame-noble-ct{background:conic-gradient(from 0deg,#9a34d6,#ff4de0,#9a34d6); padding:3px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 3.2s linear infinite;}
  .frame-ring.frame-noble-qv{background:conic-gradient(from 0deg,#ffd700,#4dc9ff,#ffd700); padding:3.5px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); animation:spin-slow 2.8s linear infinite;}
  .frame-ring.frame-noble-de{background:conic-gradient(from 0deg,#ff6a00,#ffd23f,#ff6a00); padding:3.5px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3.5px)); animation:spin-slow 2.4s linear infinite;}
  .frame-ring.frame-noble-td{background:conic-gradient(from 0deg,#8a2eff,#35f2ff,#ff4de0,#8a2eff); padding:4px; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px)); animation:spin-slow 2s linear infinite;}

  /* ---------- NOBLE chat glow (tên lấp lánh trong chat, Bá Tước trở lên) ---------- */
  .chat-msg.noble-glow .cn{
    background:linear-gradient(90deg, var(--noble-c1,#ffd700), var(--noble-c2,#fff5cc), var(--noble-c1,#ffd700));
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:noble-glow-move 2.6s linear infinite; font-weight:800;
    text-shadow:0 0 10px var(--noble-c1,#ffd70088);
  }
  @keyframes noble-glow-move{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

  /* small avatar for chat/leaderboard with frame */
  .mini-av-wrap{position:relative; width:20px; height:20px; flex-shrink:0; display:inline-flex;}
  .mini-av-wrap .frame-ring{inset:-3px;}
  .mini-av-wrap .mini-av{width:100%; height:100%; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;}

  /* ---------- SHOP ---------- */
  .shop-tabs{display:flex; gap:6px; margin-bottom:14px;}
  .shop-item{
    display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:10px 12px; margin-bottom:9px;
  }
  .shop-item .si-preview{width:44px; height:44px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; background:var(--panel-strong); flex-shrink:0; line-height:1;}
  .si-expiry-badge{position:absolute; bottom:-4px; right:-6px; min-width:20px; height:16px; padding:0 4px; border-radius:8px; background:linear-gradient(135deg,#ff5f6d,#ff2e9a); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px -1px #ff2e9a88; border:1.5px solid var(--bg,#0a0714); z-index:2; white-space:nowrap;}
  .si-expiry-badge.warn{background:linear-gradient(135deg,#ffb020,#ff6b35);}
  .si-duration-badge{position:absolute; bottom:-4px; right:-6px; min-width:20px; height:16px; padding:0 4px; border-radius:8px; background:linear-gradient(135deg,#35b7ff,#7b6bff); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px -1px #7b6bff88; border:1.5px solid var(--bg,#0a0714); z-index:2; white-space:nowrap;}
  .shop-item .si-info{flex:1; min-width:0;}
  .shop-item .si-name{font-size:13.5px; font-weight:700;}
  .shop-item .si-price{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .shop-item .si-btn{padding:8px 14px; border-radius:10px; font-size:12px; font-weight:800; white-space:nowrap; flex-shrink:0;}
  .si-btn.buy{background:var(--gold); color:#251400;}
  .si-btn.equip{background:var(--panel-strong); border:1px solid var(--line); color:var(--text-dim);}
  .si-btn.equipped{background:linear-gradient(135deg,var(--cyan),#2563eb); color:#fff;}
  .si-btn:disabled{opacity:.45; cursor:not-allowed;}
  .si-price .si-price-old{color:var(--text-faint); text-decoration:line-through; margin-right:5px; font-size:11px;}
  .si-price .si-price-new{color:var(--danger); font-weight:800;}
  .si-badge{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:middle;}
  .si-badge.flash{background:var(--grad-hot); color:#fff;}
  .si-badge.event{background:linear-gradient(120deg,#7c3aed,#c026d3); color:#fff;}
  .si-stock{font-size:10.5px; color:var(--orange); margin-top:2px;}
  .si-countdown{font-size:10.5px; color:var(--text-faint); margin-top:2px;}

  /* ---------- SHOP: coupon ---------- */
  .shop-coupon-row{display:flex; gap:8px; margin-bottom:6px;}
  .shop-coupon-row input{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--text); font-size:12.5px;}
  .shop-coupon-row .btn-mini{padding:9px 14px; font-size:12px; white-space:nowrap;}
  .shop-coupon-row .btn-mini.ghost{background:transparent; border:1px solid var(--line); color:var(--text-dim);}
  .shop-coupon-status{font-size:11.5px; padding:8px 12px; border-radius:10px; margin-bottom:12px; background:var(--panel);}
  .shop-coupon-status.ok{color:#4ade80; border:1px solid #4ade8040;}
  .shop-coupon-status.err{color:var(--danger); border:1px solid var(--danger)40;}

  /* ---------- SHOP: flash sale / event ---------- */
  .flashsale-empty, .event-empty, .market-empty{text-align:center; padding:30px 10px; color:var(--text-faint); font-size:12.5px;}
  .event-block{margin-bottom:18px;}
  .event-banner{display:flex; align-items:center; gap:10px; background:var(--grad-royal); border-radius:14px; padding:10px 14px; margin-bottom:10px;}
  .event-banner .eb-icon{font-size:22px;}
  .event-banner .eb-name{font-weight:800; font-size:13.5px; color:#fff;}
  .event-banner .eb-msg{font-size:11px; color:#ffffffcc;}
  .event-banner .eb-countdown{margin-left:auto; font-size:10.5px; color:#fff; white-space:nowrap;}

  /* ---------- SHOP: marketplace ---------- */
  .market-subtabs{display:flex; gap:6px; margin-bottom:10px;}
  .market-filter-row{display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px;}
  .market-filter-row .mf-chip{flex-shrink:0; padding:6px 12px; border-radius:20px; font-size:11.5px; font-weight:700; background:var(--panel); border:1px solid var(--line); color:var(--text-dim); cursor:pointer;}
  .market-filter-row .mf-chip.active{background:linear-gradient(135deg,var(--magenta),#c026d3); color:#fff; border-color:transparent;}
  .market-mine-section-title{font-size:12px; font-weight:800; color:var(--text-dim); margin:14px 0 8px;}
  .market-listing .si-info .si-seller{font-size:10.5px; color:var(--text-faint); margin-top:1px;}
  .si-btn.cancel{background:var(--danger); color:#fff;}
  .si-btn.list-sell{background:var(--panel-strong); border:1px solid var(--line); color:var(--text-dim);}
  .si-btn.list-sell.is-listed{opacity:.5; cursor:not-allowed;}
  .verified-card{
    background:linear-gradient(120deg,#0e3a52,#12203f); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center;
  }
  .verified-card .vc-icon{font-size:34px; margin-bottom:6px;}

  /* ---------- PARTY MISSION (Nhiệm Vụ Tiệc) ---------- */
  .pm-progress-card{background:linear-gradient(120deg,#3a2410,#4a2f12); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px;}
  .pm-progress-bar-wrap{position:relative; height:20px; border-radius:999px; background:#00000040; overflow:hidden;}
  .pm-progress-bar{height:100%; width:0%; background:linear-gradient(90deg,#ffb000,#ff4de0); transition:width .3s ease;}
  .pm-progress-text{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 2px #000a;}
  .pm-chest-row{display:flex; gap:10px; margin-bottom:8px;}
  .pm-chest-card{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center;}
  .pm-chest-card .btn-mini:disabled{opacity:.4; cursor:not-allowed;}
  .pm-chest-super{background:linear-gradient(160deg,#3a2410,#5c1f6b); border-color:#c084fc88; position:relative; overflow:hidden;}
  .pm-chest-super::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, #ffffff22, transparent 60%); pointer-events:none;}
  .pm-gift-list{display:flex; flex-direction:column; gap:8px;}
  .pm-gift-item{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:9px 12px;}
  .pm-gift-item .pm-send-gift-btn{background:var(--gold); color:#251400; font-weight:800;}
  .pm-pool-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:6px;}
  .pm-pool-item{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 4px;}
  .pm-pool-item.rare{border-color:#c98bff88; background:linear-gradient(160deg,#2a1a44,#1a1030); color:#f3ecff;}
  .pm-pool-item.rare > div[style*="text-dim"]{color:#c9b8ea !important;}
  /* ---------- 🎪 QUÀ NHIỆM VỤ TIỆC RƠI GIỮA PHÒNG (dù + hộp quà) ----------
     Khác hoàn toàn Rương Quà Phòng (.chest-floating: rương 3D nhỏ ở mép trên): hộp quà treo dù
     rơi từ trên đỉnh màn hình xuống GIỮA phòng, lắc lư, chạm để mở → dù bay lên, nắp bật, pháo giấy. */
  .pm-drop{position:fixed; left:50%; top:50%; z-index:90; width:280px; margin-left:-140px; margin-top:-200px;
    display:flex; flex-direction:column; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
    animation:pm-drop-fall 1.9s cubic-bezier(.25,.8,.35,1) both;}
  .pm-drop-sway{display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; animation:pm-drop-sway 2.6s ease-in-out 1.9s infinite;}
  .pm-drop-glow{position:absolute; left:50%; top:60px; width:380px; height:380px; margin-left:-190px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,#ffd54acc 0%,#ff4de044 45%,transparent 70%); animation:pm-drop-pulse 1.6s ease-in-out infinite;}
  .pm-drop-chute{width:264px; height:206px; display:block; position:relative; transition:transform .7s ease-in, opacity .7s ease-in; filter:drop-shadow(0 4px 6px #00000055);}
  .pm-drop-box{position:relative; width:140px; height:116px; margin-top:-5px; border-radius:14px;
    background:linear-gradient(160deg,#ff5fb2,#a83bd6); box-shadow:0 10px 22px #a83bd688, inset 0 -6px 0 #00000026;}
  .pm-drop-box::before{content:''; position:absolute; left:50%; top:0; bottom:0; width:22px; margin-left:-11px; background:linear-gradient(90deg,#ffe58a,#ffb400,#ffe58a);}
  .pm-drop-lid{position:absolute; left:-8px; right:-8px; top:-20px; height:40px; border-radius:12px; z-index:2;
    background:linear-gradient(160deg,#ff7cc4,#c04ee8); box-shadow:0 3px 6px #0004; transition:transform .55s cubic-bezier(.3,1.6,.5,1), opacity .5s;}
  .pm-drop-lid::before{content:''; position:absolute; left:50%; top:0; bottom:0; width:22px; margin-left:-11px; background:linear-gradient(90deg,#ffe58a,#ffb400,#ffe58a);}
  .pm-drop-bow{position:absolute; left:50%; top:-50px; transform:translateX(-50%); font-size:50px; z-index:3; filter:drop-shadow(0 2px 3px #0006);}
  .pm-drop-label{margin-top:18px; padding:8px 18px; border-radius:999px; font-size:16px; font-weight:800; color:#fff; white-space:nowrap;
    background:linear-gradient(90deg,#9a34d6,#ff4de0); box-shadow:0 3px 10px #0005;}
  .pm-drop-hint{margin-top:8px; font-size:16px; font-weight:800; color:#fff; text-shadow:0 1px 3px #000c; animation:pm-drop-hint 1s ease-in-out infinite;}
  .pm-drop-count{position:absolute; right:30px; top:160px; min-width:30px; height:30px; padding:0 8px; border-radius:999px; background:#ff3d71; color:#fff;
    font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:4; box-shadow:0 2px 6px #0006;}
  .pm-drop-skip{position:absolute; left:10px; top:0; width:32px; height:32px; border:none; border-radius:50%; background:#000000aa; color:#fff; font-size:13px; z-index:5; cursor:pointer;}
  .pm-drop.opening{animation:none; pointer-events:none;}
  .pm-drop.opening .pm-drop-sway{animation:pm-drop-shake .5s linear infinite;}
  .pm-drop.opening .pm-drop-chute{transform:translateY(-230px) scale(.85) rotate(-8deg); opacity:0;}
  .pm-drop.opening .pm-drop-lid{transform:translateY(-90px) rotate(-22deg); opacity:0;}
  .pm-drop.opening .pm-drop-hint,.pm-drop.opening .pm-drop-label{opacity:0; transition:opacity .2s;}
  .pm-drop.gone{animation:pm-drop-gone .4s ease-in forwards; pointer-events:none;}
  .pm-confetti{position:fixed; top:-20px; z-index:91; pointer-events:none; font-size:20px; animation:pm-confetti-fall linear forwards;}
  @keyframes pm-drop-fall{
    0%{transform:translateY(-110vh) rotate(-8deg);}
    55%{transform:translateY(8px) rotate(5deg);}
    75%{transform:translateY(-10px) rotate(-3deg);}
    100%{transform:translateY(0) rotate(0);}
  }
  @keyframes pm-drop-sway{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);}}
  @keyframes pm-drop-pulse{0%,100%{opacity:.55; transform:scale(.92);} 50%{opacity:1; transform:scale(1.05);}}
  @keyframes pm-drop-hint{0%,100%{opacity:.6; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);}}
  @keyframes pm-drop-shake{0%,100%{transform:translateX(0) rotate(0);} 25%{transform:translateX(-4px) rotate(-3deg);} 75%{transform:translateX(4px) rotate(3deg);}}
  @keyframes pm-drop-gone{to{opacity:0; transform:scale(.6) translateY(20px);}}
  @keyframes pm-confetti-fall{to{transform:translateY(110vh) rotate(540deg); opacity:.9;}}
  .pm-rare-tag{position:absolute; top:-6px; left:-4px; background:linear-gradient(90deg,#9a34d6,#ff4de0); color:#fff; font-size:9px; font-weight:800; padding:1px 6px; border-radius:999px;}
  #pm-countdown{font-weight:700;}

  /* ---------- ADMIN PANEL ---------- */
  .admin-seat-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 12px; margin-bottom:8px;}
  .admin-seat-row .as-idx{width:20px; font-size:12px; color:var(--text-faint); font-weight:700;}
  .admin-seat-row .as-name{flex:1; font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .admin-seat-row .as-btns{display:flex; gap:6px;}
  .as-btn{padding:6px 9px; border-radius:8px; font-size:11px; font-weight:700; background:var(--panel-strong); border:1px solid var(--line);}
  .as-btn.on{background:var(--danger); color:#fff; border-color:transparent;}
  .as-btn.lockon{background:var(--gold); color:#251400; border-color:transparent;}
  .admin-section-title{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:800; margin:16px 0 8px;}
  .announce-input{width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:#2b1f4514; font-size:16px; outline:none; margin-top:6px;}

  /* ---------- ANNOUNCEMENT BANNER ---------- */
  .announce-banner{
    display:flex; align-items:center; gap:8px; background:linear-gradient(90deg,#ffc94a22,#ff2e9a22);
    border-bottom:1px solid var(--line); padding:9px 16px; font-size:12.5px; color:var(--text); position:relative; z-index:2;
  }
  .announce-banner .ab-icon{flex-shrink:0;}
  .announce-banner .ab-text{flex:1; min-width:0;}
  .announce-banner .ab-close{flex-shrink:0; color:var(--text-faint); font-size:14px; width:20px; text-align:center;}

  /* ---------- POLL BANNER (bình chọn nhanh) ---------- */
  .poll-banner{
    background:linear-gradient(90deg,#4ad8ff22,#7a5cff22);
    border-bottom:1px solid var(--line); padding:10px 14px; position:relative; z-index:2;
  }
  .poll-banner-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:8px;}
  .poll-close-x{cursor:pointer; color:var(--text-faint); font-size:13px; width:20px; text-align:center; flex-shrink:0;}
  .poll-option-row{margin-bottom:6px; cursor:pointer;}
  .poll-option-bar-wrap{position:relative; background:#00000018; border-radius:10px; overflow:hidden; height:30px; border:1px solid var(--line);}
  .poll-option-fill{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--cyan),#7a5cff); opacity:.35; transition:width .3s ease;}
  .poll-option-row.voted .poll-option-fill{opacity:.6;}
  .poll-option-label{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 10px; font-size:12.5px; font-weight:600;}
  .poll-option-row.voted .poll-option-label{color:var(--gold);}
  .poll-total{font-size:11px; color:var(--text-faint); text-align:right;}

  /* ---------- MUSIC BAR ---------- */
  .music-bar{
    display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#35f2ff1c,#c026d31c);
    border-bottom:1px solid var(--line); padding:8px 16px; position:relative; z-index:2;
  }
  .music-bar .mb-icon{flex-shrink:0; font-size:15px;}
  .music-bar .mb-info{flex:1; min-width:0;}
  .music-bar .mb-title{font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .music-bar .mb-progress-wrap{width:100%; height:3px; border-radius:2px; background:#00000018; margin-top:5px; overflow:hidden;}
  .music-bar .mb-progress{height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#ff2e9a); transition:width .3s linear;}
  .music-bar #btn-music-mute{flex-shrink:0; width:32px; height:32px; font-size:15px;}

  /* ---------- REACTIONS ---------- */
  .reaction-strip{
    display:flex; gap:8px; padding:8px 16px; position:relative; z-index:2; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch;
  }
  .reaction-opt{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:18px;
  }

/* ---------- AUTH (login/register) additions ---------- */
.auth-tabs{display:flex; gap:8px; margin-bottom:16px;}
.auth-tab{flex:1; padding:10px; text-align:center; border-radius:10px; background:#2b1f450c; border:1px solid var(--line); font-weight:700; font-size:13.5px; color:var(--text-dim);}
.auth-tab.active{background:var(--grad-hot); color:#fff; border-color:transparent;}
.auth-error{background:#ff547014; border:1px solid #ff547055; color:#c81b3f; padding:10px 14px; border-radius:10px; font-size:13px; margin-top:12px;}
.auth-field{margin-top:12px;}
.auth-divider{display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--text-faint); font-size:12px;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.google-signin-wrap{display:flex; justify-content:center;}
.btn-facebook-signin{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:280px; margin:0 auto; padding:11px 16px; border:none; border-radius:999px; background:#1877F2; color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
.btn-facebook-signin:hover{background:#166fe0;}
.btn-facebook-signin svg{flex-shrink:0;}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid #2b1f4544; border-top-color:#fff; border-radius:50%; animation:spin-slow .7s linear infinite;}
.voice-status{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:150; background:#ffffffee; color:var(--text); padding:7px 14px; border-radius:999px; font-size:11.5px; border:1px solid var(--line); display:flex; align-items:center; gap:6px; box-shadow:0 10px 26px -10px #2b1f4530;}
.mic-permission-hint{font-size:11px; color:var(--text-faint); text-align:center; padding:6px 16px;}

/* ---------- NOTIFICATIONS / DM ICON BADGES ---------- */
.icon-badge-wrap{position:relative;}
.icon-badge{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--bg);}

/* ---------- GLOBAL BROADCAST BANNER (lobby) ---------- */
.broadcast-banner{
  display:flex; align-items:center; gap:8px; background:linear-gradient(90deg,#ff2e9a33,#35f2ff33);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:10px 18px 0; font-size:12.5px;
}
.broadcast-banner .bb-close{margin-left:auto; color:var(--text-faint); cursor:pointer;}
.broadcast-banner.chest-banner{
  background:linear-gradient(90deg,#ffc94a55,#ff2e9a55); border-color:#ffc94a88;
  animation:chest-banner-pulse 1.4s ease-in-out infinite;
}
@keyframes chest-banner-pulse{0%,100%{box-shadow:0 0 0 0 #ffc94a44;} 50%{box-shadow:0 0 0 6px #ffc94a00;}}
.broadcast-banner.room-share-banner{
  background:linear-gradient(90deg,#35f2ff44,#7cd67244); border-color:#35f2ff88;
}

/* ---------- GIFT COMBO FAB (vòng tròn đếm ngược tặng liên tiếp) ---------- */
.gift-combo-fab{
  position:fixed; right:16px; bottom:78px; width:60px; height:60px; z-index:60;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  animation:gcf-pop .18s ease-out;
}
.gift-combo-fab.hidden{display:none;}
.gcf-ring{position:absolute; inset:0; width:60px; height:60px; transform:rotate(-90deg);}
.gcf-ring-bg{fill:#0f0f16cc; stroke:var(--line); stroke-width:3;}
.gcf-ring-fg{fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:163.36; stroke-dashoffset:0; transition:stroke-dashoffset .08s linear;}
.gcf-emoji{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; pointer-events:none;}
.gcf-combo{
  position:absolute; top:-8px; right:-8px; background:var(--magenta); color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; padding:2px 6px; min-width:18px; text-align:center; box-shadow:0 2px 6px -2px #000a; pointer-events:none;
}
@keyframes gcf-pop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12); opacity:1;} 100%{transform:scale(1);}}
.gift-combo-fab:active .gcf-emoji{transform:scale(.85);}


.trungthu-banner{
  display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#ff8a0033,#ffdd5533);
  border:1px solid #ffb02b88; border-radius:12px; padding:10px 14px; margin:10px 18px 0; font-size:12.5px;
  animation:trungthu-glow 2.6s ease-in-out infinite; cursor:pointer;
}
.trungthu-banner .tt-emoji{font-size:18px;}
.trungthu-banner .tt-txt{display:flex; flex-wrap:wrap; gap:2px; color:var(--text);}
.trungthu-banner .tt-countdown{color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums;}
@keyframes trungthu-glow{0%,100%{box-shadow:0 0 0 0 #ffb02b33;} 50%{box-shadow:0 0 0 6px #ffb02b00;}}

/* ===== 🏮 Trang trí giao diện app mùa Trung Thu (toàn app, bật/tắt theo trungthu_event_active())
   Xem applyTrungThuTheme() trong app.js — thêm class body.trungthu-theme + #trungthu-deco-layer khi
   sự kiện đang bật, gỡ sạch khi tắt. Thuần trang trí (đèn lồng trôi, ánh trăng, viền vàng ấm) —
   KHÔNG đụng tới bố cục hay logic của bất kỳ màn hình nào. ===== */
#trungthu-deco-layer{ position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
#trungthu-deco-layer .tt-deco-item{
  position:absolute; bottom:-60px; font-size:22px; opacity:0; filter:drop-shadow(0 0 6px #ffb02b66);
  animation:tt-deco-float 14s ease-in infinite;
}
@keyframes tt-deco-float{
  0%{ transform:translateY(0) translateX(0) rotate(-6deg); opacity:0; }
  8%{ opacity:.8; }
  50%{ transform:translateY(-52vh) translateX(14px) rotate(6deg); }
  85%{ opacity:.7; }
  100%{ transform:translateY(-105vh) translateX(-10px) rotate(-6deg); opacity:0; }
}
body.trungthu-theme #screen-lobby::before{
  content:''; position:fixed; top:-120px; right:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, #ffe9a877 0%, #ffb02b22 45%, transparent 70%);
  z-index:0; pointer-events:none;
}
body.trungthu-theme .logo-mark{ filter:drop-shadow(0 0 10px #ffb02b88); }
body.trungthu-theme .brand-title{
  background:linear-gradient(90deg,#ffe9a8,#ffb02b 55%,#ff8a00); -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.trungthu-theme .btn-primary{
  background:linear-gradient(90deg,#ff8a00,#ffb02b) !important; box-shadow:0 4px 16px -4px #ff8a0088 !important;
}
body.trungthu-theme .nominee-rail-wrap{ position:relative; }
body.trungthu-theme .lobby-quick-item .lobby-quick-ico{ box-shadow:0 0 0 2px #ffb02b33 inset; }
body.trungthu-theme .topbar, body.trungthu-theme .room-topbar{
  border-bottom:1px solid #ffb02b44;
}
@media (max-width:420px){
  #trungthu-deco-layer .tt-deco-item{ font-size:18px; }
}

/* ===== Hoạt Động Trung Thu (mảnh ghép + đố vui + BXH mùa) ===== */
.tth-sheet{ background:linear-gradient(180deg,#2a1a0f,#1a1008); border:1px solid #ffb02b55; }
.tth-header{ text-align:center; padding:6px 30px 10px; }
.tth-title{ font-size:19px; font-weight:900; color:#ffcf7a; letter-spacing:.3px; }
.tth-sub{ font-size:12px; color:#ffb02bcc; margin-top:2px; }
.tth-tabs{ display:flex; gap:6px; padding:0 14px 10px; overflow-x:auto; scrollbar-width:none; }
.tth-tabs::-webkit-scrollbar{ display:none; }
.tth-tabs .tab-btn{
  flex:0 0 auto; background:#00000033; border:1px solid #ffb02b44; color:#ffdca3; border-radius:10px;
  padding:8px 10px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tth-tabs .tab-btn.active{ background:linear-gradient(90deg,#ff8a00,#ffb02b); color:#2a1a0f; border-color:transparent; }
.tth-pane{ padding:4px 16px 18px; }

.tth-piece-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.tth-piece-cell{
  background:#00000033; border:1px solid #ffb02b33; border-radius:12px; padding:10px 4px;
  text-align:center; opacity:.55;
}
.tth-piece-cell.has{ opacity:1; border-color:#ffb02b99; background:#ffb02b1a; }
.tth-piece-icon{ font-size:26px; }
.tth-piece-name{ font-size:10.5px; color:#ffdca3; margin-top:2px; }
.tth-piece-qty{ font-size:11px; font-weight:800; color:#ffcf7a; margin-top:1px; }
.tth-combine-reward{ font-size:12px; color:#ffdca3cc; text-align:center; margin-bottom:10px; }

.tth-quiz-progress{ font-size:12px; color:#ffdca3cc; margin-bottom:8px; text-align:center; }
.tth-quiz-question{ font-size:14.5px; font-weight:700; color:#fff2df; margin-bottom:10px; text-align:center; }
.tth-quiz-options{ display:flex; flex-direction:column; gap:8px; }
.tth-quiz-opt{
  background:#00000033; border:1px solid #ffb02b44; color:#ffdca3; border-radius:10px;
  padding:10px 12px; font-size:13px; text-align:left; cursor:pointer;
}
.tth-quiz-opt:disabled{ opacity:.5; cursor:default; }
.tth-quiz-opt:not(:disabled):active{ background:#ffb02b33; }

.tth-my-rank{ font-size:12.5px; font-weight:700; color:#ffcf7a; text-align:center; margin-bottom:10px; }
.tth-board-list{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.tth-board-row{
  display:flex; align-items:center; gap:8px; background:#00000033; border:1px solid #ffb02b33;
  border-radius:10px; padding:7px 10px;
}
.tth-board-rank{ font-weight:900; color:#ffb02b; width:28px; font-size:12.5px; }
.tth-board-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--panel-strong); flex-shrink:0; }
.tth-board-avatar .av-photo{ width:100%; height:100%; object-fit:cover; }
.tth-board-avatar .av-letter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.tth-board-name{ flex:1; font-size:12.5px; color:#fff2df; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tth-board-value{ font-size:12px; font-weight:700; color:#ffcf7a; }

/* --- Phá cỗ trông trăng --- */
.tth-phaco-title{ font-size:13.5px; font-weight:800; color:#ffcf7a; text-align:center; margin-bottom:10px; }
.tth-phaco-bar-wrap{ height:16px; border-radius:10px; background:#00000044; border:1px solid #ffb02b44; overflow:hidden; }
.tth-phaco-bar{ height:100%; background:linear-gradient(90deg,#ff8a00,#ffd24d); transition:width .4s ease; }
.tth-phaco-progress{ font-size:12px; color:#ffdca3cc; text-align:center; margin:6px 0 4px; }
.tth-phaco-mine{ font-size:11.5px; color:#ffdca399; text-align:center; margin-bottom:10px; }
.tth-phaco-quick{ display:flex; gap:6px; margin-bottom:8px; }
.tth-phaco-qbtn{
  flex:1; background:#00000033; border:1px solid #ffb02b44; color:#ffdca3; border-radius:8px;
  padding:7px 2px; font-size:12px; font-weight:700; cursor:pointer;
}
.tth-phaco-qbtn:active{ background:#ffb02b33; }
.tth-phaco-input-row{ display:flex; gap:6px; margin-bottom:14px; }
.tth-phaco-input{
  flex:1; background:#00000033; border:1px solid #ffb02b44; color:#fff2df; border-radius:8px;
  padding:9px 10px; font-size:13px; min-width:0;
}
.tth-phaco-top-title{ font-size:12.5px; font-weight:700; color:#ffcf7a; margin-bottom:6px; }
.tth-phaco-top-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }

/* --- Vòng quay Lồng Đèn --- */
.tth-wheel-info{ font-size:12px; color:#ffdca3cc; text-align:center; margin-bottom:10px; }
.tth-wheel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.tth-wheel-cell{
  background:#00000033; border:1px solid #ffb02b33; border-radius:12px; padding:10px 4px;
  text-align:center; transition:box-shadow .25s, border-color .25s;
}
.tth-wheel-cell.win{ border-color:#ffd24d; box-shadow:0 0 0 2px #ffd24d88 inset; background:#ffb02b26; }
.tth-wheel-icon{ font-size:24px; }
.tth-wheel-label{ font-size:10px; color:#ffdca3; margin-top:2px; line-height:1.25; }

/* --- Thả đèn hoa đăng --- */
.tth-lantern-info{ font-size:12px; color:#ffdca3cc; text-align:center; margin-bottom:10px; }
.tth-lantern-input-row{ display:flex; gap:6px; margin-bottom:12px; }
.tth-lantern-input{
  flex:1; background:#00000033; border:1px solid #ffb02b44; color:#fff2df; border-radius:8px;
  padding:9px 10px; font-size:13px; min-width:0;
}
.tth-lantern-feed{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; }
.tth-lantern-item{
  background:#00000033; border:1px solid #ffb02b33; border-radius:10px; padding:8px 10px;
  font-size:12px; color:#fff2df;
}
.tth-lantern-item .tth-lantern-name{ font-weight:800; color:#ffcf7a; }
.tth-lantern-item .tth-lantern-wish{ color:#ffdca3; }
.tth-lantern-item .tth-lantern-prize{ display:block; margin-top:3px; font-size:11px; color:#ffd24d; font-weight:700; }


.lumipass-banner{
  display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  background:linear-gradient(90deg,#6a35c94d,#ff5fa84d); border:1px solid #b98cff88; border-radius:12px;
  padding:10px 14px; margin:10px 18px 0; font-size:12.5px; animation:lumipass-glow 2.6s ease-in-out infinite;
}
.lumipass-banner .lp-emoji{font-size:18px; flex-shrink:0;}
.lumipass-banner .lp-txt{display:flex; flex-direction:column; flex:1; min-width:0; gap:1px;}
.lumipass-banner .lp-title{color:var(--text); font-weight:800;}
.lumipass-banner .lp-countdown{color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; font-size:11.5px;}
.lumipass-banner .lp-arrow{color:var(--text-dim); font-size:18px; font-weight:800; flex-shrink:0;}
@keyframes lumipass-glow{0%,100%{box-shadow:0 0 0 0 #b98cff33;} 50%{box-shadow:0 0 0 6px #b98cff00;}}


/* ---------- APP-WIDE BROADCAST BANNER SHOWN INSIDE A ROOM (khác với thông báo riêng của phòng) ---------- */
.room-broadcast-banner{
  border-radius:0; margin:0; border-left:none; border-right:none;
  background:linear-gradient(90deg,#35f2ff26,#ff2e9a26); position:relative; z-index:2;
}
.room-broadcast-banner .bb-icon{flex-shrink:0;}

/* ---------- HOMEPAGE BANNER CAROUSEL (lobby) ---------- */
.banner-carousel{position:relative; margin:12px 18px 14px; border-radius:20px; overflow:hidden; aspect-ratio:2.6/1; background:var(--panel); box-shadow:0 14px 30px -16px #000000aa, 0 0 0 1px #ffffff10;}
.bc-track{display:flex; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1);}
.bc-slide{flex:0 0 100%; height:100%; position:relative; display:block; background:var(--panel-strong);}
.bc-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.bc-slide .bc-title{position:absolute; left:0; right:0; bottom:0; padding:16px 14px 10px; font-size:13.5px; font-weight:700;
  background:linear-gradient(0deg,#000000aa,transparent); color:#fff;}
.bc-dots{position:absolute; bottom:8px; right:10px; display:flex; gap:5px;}
.bc-dots .dot{width:6px; height:6px; border-radius:999px; background:#2b1f4555; transition:background .2s, width .2s;}
.bc-dots .dot.active{background:#fff; width:16px;}

/* ---------- NOTIFICATIONS LIST ---------- */
.notif-row{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--line); margin-bottom:8px;}
.notif-row.unread{border-color:var(--cyan-dim); background:#35f2ff0d;}
.notif-row.system-notice{border-color:#ffd76a88; background:linear-gradient(135deg,#3a1152, #2a0f45); box-shadow:0 0 0 1px #ffd76a22 inset;}
.notif-row.system-notice .notif-text{color:#fff2d6; font-weight:600;}
.notif-icon{width:34px; height:34px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.notif-text{font-size:13px; line-height:1.4; flex:1;}
.notif-time{font-size:11px; color:var(--text-faint); margin-top:3px;}

/* ---------- DM LIST / THREAD ---------- */
.dm-conv-row{display:flex; gap:10px; align-items:center; padding:11px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--line); margin-bottom:8px; cursor:pointer;}
.dm-conv-row .dm-preview{font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;}
.dm-conv-info{flex:1; min-width:0;}
.dm-unread-dot{width:9px; height:9px; border-radius:50%; background:var(--magenta); flex-shrink:0;}
.dm-conv-row.dm-pinned{background:linear-gradient(90deg, #ffc94a14, var(--panel) 60%); border-color:#ffc94a3a;}
.dm-conv-row.active{background:linear-gradient(90deg, #00c2d61a, var(--panel) 60%); border-color:var(--cyan-dim);}
.dm-list-divider{height:1px; background:var(--line); margin:4px 4px 12px;}
.dm-thread-sheet{padding-top:14px;}
/* Trước đây .dm-thread-list có max-height cố định 340px và .dm-composer chỉ trôi
   theo dòng chảy bình thường ngay sau nó (margin-top:12px) — khi cuộc trò chuyện
   ít/chưa có tin nhắn, composer bị đẩy lên sát ngay dưới header, để lại 1 khoảng
   trắng rất lớn phía dưới tới tận thanh điều hướng (đúng lỗi "khung chat trống
   trơn, ô nhập tin nằm sát trên cùng"). Chuyển cả khung sheet sang flex-column:
   header cố định trên cùng, danh sách tin nhắn giãn lấp đầy phần còn lại (tự
   cuộn riêng bên trong), composer luôn dính ở đáy màn hình bất kể có bao nhiêu
   tin nhắn — giống mọi app chat (Messenger/Zalo). */
.modal-overlay.app-page .modal-sheet.dm-thread-sheet{
  display:flex; flex-direction:column; overflow:hidden;
}
.dm-thread-header{display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); flex:0 0 auto;}
.modal-overlay.app-page .dm-thread-header{
  /* BUG: trước đây dùng background:var(--bg) — biến này luôn là màu nền TỐI toàn cục
     (#0a0714), bất kể modal đang ở nền sáng. Modal-sheet của DM lại có nền TRẮNG và
     override --text sang màu chữ TỐI cho phù hợp nền trắng đó. Kết quả: header dính
     nền tối + chữ tối -> toàn bộ header (nút quay lại ‹, avatar, tên, nút Hồ sơ) biến
     mất hoàn toàn, y hệt lỗi "chữ trắng trên nền trắng" ở toast trước đây, chỉ khác
     chiều. Sửa: dùng màu nền sáng khớp với modal-sheet thay vì var(--bg). */
  position:sticky; top:0; z-index:3; background:#fdf9ffee; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  margin:-14px -20px 14px; padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 12px;
}
.dm-thread-back{font-size:26px; font-weight:700; flex-shrink:0;}
.dm-thread-peer{display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; border-radius:12px; padding:4px 6px; margin:-4px -6px; transition:.15s;}
.dm-thread-peer:active{background:var(--panel);}
.dm-thread-av-wrap{width:42px; height:42px; flex-shrink:0;}
.dm-thread-head-info{min-width:0; text-align:left;}
.dm-thread-name{font-weight:800; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px;}
.dm-thread-sub{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
.dm-thread-view-profile{flex-shrink:0; font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--line); white-space:nowrap;}
.dm-thread-view-profile:active{background:var(--line);}
/* Header danh sách tin nhắn (modal-dm-list): nút quay lại + tiêu đề + nhóm chat + hồ sơ của tôi,
   dùng flex thường (không phải space-between của .modal-title mặc định) để 4 phần tử không bị
   dàn quá xa nhau/đè lên nhau trên màn hình nhỏ. */
.dm-list-title{display:flex !important; align-items:center; gap:8px; flex-wrap:nowrap;}
.dm-list-title > span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dm-list-title .link-btn{flex-shrink:0; font-size:12.5px;}
.dm-conv-row-avatar{cursor:pointer;}
.dm-conv-row-profile-btn{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--panel-strong); border:1px solid var(--line); font-size:14px; display:flex; align-items:center; justify-content:center;}
.dm-conv-row-profile-btn:active{background:var(--line);}

/* ===== Bạn bè đang online (dải ngang ở đầu Tin nhắn) + modal Bạn bè ===== */
.dm-online-strip{display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 12px; margin-bottom:6px; border-bottom:1px solid var(--line);}
.dm-online-strip.hidden{display:none;}
.dm-online-item{display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; width:56px; cursor:pointer;}
.dm-online-avatar-wrap{position:relative;}
.online-dot-badge{position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%; background:#2ecc71; border:2px solid var(--panel); box-shadow:0 0 0 1px #2ecc7155;}
/* 🎉 Nhãn "Tiệc" trên avatar khi bạn bè/người theo dõi đang có mặt trong 1 phòng —
   xem users_current_room_map() (includes/functions.php) + renderOnlineFriendsStrip()/
   openDMListModal() (assets/js/app.js). Bấm vào avatar có nhãn này sẽ vào thẳng phòng đó. */
.room-live-badge{position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); background:linear-gradient(90deg,#8b5cf6,#c026d3); color:#fff; font-size:8px; font-weight:800; padding:1.5px 6px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 4px #0007; letter-spacing:.02em; z-index:2; pointer-events:none;}
.dm-online-name{font-size:11px; color:var(--text-dim); max-width:56px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;}
.friends-online-count{flex-shrink:0; font-size:12px; color:#2ecc71; font-weight:600;}
.friend-row .dm-conv-row-avatar{position:relative;}
.dm-thread-list{flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:8px; padding:4px 2px;}

/* ---------- Thẻ hồ sơ + bài đăng gần đây (đầu khung chat, kiểu Zalo) ---------- */
.dm-topcard-wrap:empty{display:none;} /* chưa tải xong -> không chiếm chỗ / không có viền trống */
.dm-topcard{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:20px 16px 16px; margin-bottom:2px; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--panel-strong), var(--panel) 70%);
  border:1px solid var(--line);
}
.dm-topcard-av-wrap{position:relative; width:64px; height:64px; flex-shrink:0;}
.dm-topcard-av-wrap .mini-av{width:100%; height:100%;} /* avatarInnerHtml() không tự set size, ta ép ở đây */
.dm-topcard-av{width:100%; height:100%; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden;}
.dm-topcard-av .av-photo{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.dm-topcard-av .av-letter{width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff;}
.dm-topcard-badges{display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center;}
.dm-topcard-name{font-weight:800; font-size:15px; display:flex; align-items:center; gap:4px; justify-content:center; flex-wrap:wrap;}
.dm-topcard-post{width:100%; margin-top:6px; padding-top:12px; border-top:1px solid var(--line); text-align:left;}
.dm-topcard-post-head{font-size:11px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.3px; margin-bottom:7px;}
.dm-topcard-post-head span{text-transform:none; font-weight:600; letter-spacing:0;}
.dm-topcard-post-body{display:flex; gap:10px; align-items:center;}
.dm-topcard-post-thumb{width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--panel-strong);}
.dm-topcard-post-caption{font-size:13px; line-height:1.4; color:var(--text-dim); flex:1; min-width:0; overflow-wrap:anywhere;}
.dm-thread-divider{align-self:center; font-size:11.5px; font-weight:700; color:var(--text-faint); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 14px; margin:6px auto 4px;}

.dm-bubble{max-width:78%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.4;}
.dm-msg-row{display:flex; align-items:flex-end; gap:6px; align-self:flex-start; max-width:88%;}
.dm-msg-avatar{width:26px; height:26px; flex-shrink:0; cursor:pointer;}
.dm-msg-row .dm-bubble{align-self:auto; max-width:100%;}
.dm-bubble.them{background:var(--panel-strong); align-self:flex-start; border-bottom-left-radius:4px;}
.dm-bubble.me{background:linear-gradient(135deg,var(--magenta),#c026d3); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.dm-bubble.system-notice{
  background:linear-gradient(135deg,#3a1152,#2a0f45); border:1px solid #ffd76a55;
  box-shadow:0 0 0 1px #ffd76a22 inset, 0 4px 14px -6px #00000099; max-width:88%;
}
.dm-bubble.system-notice .system-notice-tag{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.3px; color:#ffd76a; margin-bottom:3px;
}
.dm-bubble.system-notice .system-notice-text{color:#fff2d6; font-weight:600;}
.dm-composer{display:flex; gap:7px; align-items:center; margin-top:12px; flex:0 0 auto;}
.dm-composer input{flex:1;}
.dm-composer-icon{
  flex:none; width:36px; height:36px; padding:0; font-size:16px; border-radius:50%;
  background:var(--panel-strong); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.dm-mic-btn.recording{background:var(--danger); border-color:var(--danger); animation:dm-mic-pulse 1s ease-in-out infinite;}
@keyframes dm-mic-pulse{0%,100%{box-shadow:0 0 0 0 #ff547066;} 50%{box-shadow:0 0 0 6px #ff547000;}}
.dm-send-btn{flex:none; padding:8px 16px; font-size:13px; font-weight:700; background:var(--grad-hot); color:#fff; border-radius:999px;}
.dm-group-sender{font-size:10.5px; color:var(--text-faint); margin:0 0 3px 2px;}

/* ---------- ➕ Menu mời (gia tộc / phòng) ---------- */
.chat-invite-menu{
  position:fixed; z-index:900; background:var(--panel-strong); border:1px solid var(--line); border-radius:14px;
  padding:6px; display:flex; flex-direction:column; gap:2px; box-shadow:0 8px 24px -8px #000000aa; min-width:200px;
}
.chat-invite-menu-item{
  text-align:left; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; background:transparent; color:var(--text);
}
.chat-invite-menu-item:active{background:var(--panel);}

/* ---------- 🎟️ Thẻ mời trong khung chat (gia tộc / phòng) ---------- */
.invite-card{
  display:flex; align-items:center; gap:10px; min-width:220px; max-width:100%;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px;
}
.dm-bubble.me .invite-card{background:#ffffff1a; border-color:#ffffff33;}
.invite-card-icon{font-size:26px; flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--panel-strong); border-radius:12px;}
.invite-card-body{flex:1; min-width:0;}
.invite-card-title{font-size:10.5px; font-weight:800; letter-spacing:.3px; opacity:.7; text-transform:uppercase;}
.invite-card-sub{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.invite-card-btn{flex:none; padding:7px 12px; font-size:12px; background:var(--grad-hot); color:#fff;}

/* ---------- 🤖 Thẻ hành động của bot (Trợ lý sự kiện) — "Nhấn đi đến >" ---------- */
.bot-action-card{min-width:200px; max-width:100%;}
.bot-action-text{font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; color:#fff2d6;}
.bot-action-link{
  margin-top:8px; padding-top:8px; border-top:1px solid #ffffff33;
  text-align:right; font-size:13px; font-weight:700; color:var(--danger);
}
.dm-bubble.me .bot-action-link{border-top-color:#ffffff33;}

/* ---------- USER PROFILE MODAL ---------- */
.user-profile-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.user-profile-actions .btn-mini{flex:1 1 calc(33.333% - 6px); min-width:0; padding:8px 6px; font-size:12.5px; white-space:normal; line-height:1.25; text-align:center;}

/* ---------- Gộp gọn nút quản trị (Admin/MC/Khách quý/Kick) trong hồ sơ người dùng ---------- */
.up-manage-accordion{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;}
.up-manage-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:transparent; border:0; color:var(--text); font-size:13.5px; font-weight:700; cursor:pointer;}
.up-manage-chevron{transition:transform .18s ease; color:var(--text-dim); font-weight:700;}
.up-manage-chevron.open{transform:rotate(180deg);}
.up-manage-body{padding:0 10px 10px;}
.up-manage-roles{display:grid; grid-template-columns:repeat(2,1fr); gap:6px;}
.up-manage-role-btn{padding:8px 6px; border-radius:9px; font-size:12px; font-weight:700; background:var(--panel-strong); border:1px solid var(--line); color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:4px;}
.up-manage-role-btn.on{background:linear-gradient(135deg,#ffd700,#ff9d00); color:#251400; border-color:transparent;}
.up-manage-role-btn:disabled{opacity:.45; cursor:not-allowed;}
.achv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px;}
.achv-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; opacity:.35;}
.achv-item.unlocked{opacity:1; border-color:var(--gold);}
.achv-item .a-icon{font-size:22px;}
.achv-item .a-name{font-size:9.5px; color:var(--text-dim); margin-top:4px; line-height:1.2;}

/* ---------- BỨC TƯỜNG QUÀ TẶNG (gift wall banner) ---------- */
.gift-wall-banner{
  position:relative; display:flex; align-items:center; gap:16px; margin-top:12px;
  padding:16px 18px; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, #ffffff22 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #ffffff1a 0 2px, transparent 3px),
    radial-gradient(circle at 85% 25%, #ffffff22 0 2px, transparent 3px),
    linear-gradient(120deg, #120a26, #1c1240 55%, #2a1554);
  border:1px solid var(--line);
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.gwb-showcase{
  flex-shrink:0; width:64px; height:64px; border-radius:12px; font-size:32px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#2c1f55,#4a2f8a); box-shadow:0 0 18px #9b6bff55;
}
.gwb-stats{display:flex; gap:26px;}
.gwb-stat{text-align:left;}
.gwb-stat .gwb-val{font-size:22px; font-weight:800; color:#fff;}
.gwb-stat .gwb-lbl{font-size:11.5px; color:var(--text-dim); margin-top:2px;}

/* ---------- 🎁 TƯỜNG QUÀ TẶNG (gift wall grid) ---------- */
.gw-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.gw-grid-full{grid-template-columns:repeat(3,1fr);}
.gw-cell{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 6px;
  text-align:center; transition:transform .15s, background .15s;
  min-width:0; box-sizing:border-box; overflow:hidden;
}
.gw-cell:hover{background:var(--panel-strong); transform:translateY(-2px);}
.gw-cell-emoji{font-size:26px; line-height:1.1;}
.gw-cell-name{font-size:10.5px; color:var(--text-dim); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gw-cell-qty{font-size:11.5px; font-weight:800; color:#ffd76a; margin-top:2px;}
.gw-cell-sender{font-size:10px; color:var(--text-dim); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- BẠN THÂN (best friend cards) ---------- */
.best-friend-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
.bf-card{
  position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:8px; border:1px solid var(--line);
}
.bf-card.bf-slot-pink{background:linear-gradient(160deg,#ff9ecb,#ff5fa2 60%,#c23478);}
.bf-card.bf-slot-blue{background:linear-gradient(160deg,#8fd9ff,#2e9dff 60%,#0c5fc2);}
.bf-card.bf-slot-purple{background:linear-gradient(160deg,#d3b6ff,#9a5cff 60%,#5b2ec2);}
.bf-card{box-shadow:0 0 0 2px color-mix(in srgb, var(--bf-c1,transparent) 45%, transparent) inset;}
.bf-card .bf-lv{
  position:absolute; top:6px; left:6px; background:#00000055; color:#fff; font-weight:800;
  font-size:10.5px; padding:2px 7px; border-radius:999px; backdrop-filter:blur(2px);
}
.bf-card .bf-icon{position:absolute; top:8px; right:8px; font-size:20px; opacity:.85; filter:drop-shadow(0 1px 2px #0004);}
.bf-card .bf-av{
  width:44px; height:44px; border-radius:50%; background:#0006; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; margin-bottom:4px;
}
.bf-card .bf-av img{width:100%; height:100%; object-fit:cover;}
.bf-card .bf-name{font-size:10.5px; font-weight:700; color:#fff; text-shadow:0 1px 2px #0006; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- BẠN THÂN — danh sách đầy đủ + chi tiết 1 cặp ---------- */
.bfl-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); padding:9px 12px; border-radius:12px; margin-bottom:8px; cursor:pointer;}
.bfl-row:hover{background:var(--panel-strong);}
.bfl-av{width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.bfl-av img{width:100%; height:100%; object-fit:cover;}
.bfl-info{flex:1; min-width:0;}
.bfl-name{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bfl-level{font-size:11.5px; color:var(--text-dim); margin-top:1px;}
.bfl-points{font-size:12.5px; font-weight:800; color:var(--danger); white-space:nowrap;}

.bfd-pair-row{display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 6px;}
.bfd-av-wrap{display:flex; flex-direction:column; align-items:center; gap:6px; width:84px; cursor:pointer;}
.bfd-av{width:68px; height:68px; border-radius:50%; overflow:hidden; background:var(--panel-strong); border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 4px 14px -6px #0004;}
.bfd-av img{width:100%; height:100%; object-fit:cover;}
.bfd-name{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.bfd-heart{font-size:30px; animation:bfd-heart-beat 1.1s ease-in-out infinite;}
@keyframes bfd-heart-beat{0%,100%{transform:scale(1);} 50%{transform:scale(1.22);}}
.bfd-tier-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 14px; border-radius:999px; font-size:13px; font-weight:800; color:#1a1a1a; margin-top:8px;}
.bfd-progress-label{font-size:11.5px; color:var(--text-dim); margin-bottom:8px;}
.bfd-since{font-size:12px; color:var(--text-dim); margin-bottom:10px;}
.bfd-daily-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.bfd-daily-box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px;}
.bfd-daily-title{font-size:11.5px; color:var(--text-dim); font-weight:700;}
.bfd-daily-val{font-size:16px; font-weight:800; margin-top:2px;}
.bfd-daily-hint{font-size:10.5px; color:var(--text-faint); margin-top:8px;}
.bfd-hint-tap{font-size:11px; color:var(--text-dim); margin-top:10px;}

/* ---------- TRẠNG THÁI (status/moments grid) ---------- */
.status-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.status-thumb{position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:pointer;}
.status-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.status-thumb .status-del{
  position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; border:none;
  background:#000000aa; color:#fff; font-size:10px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.status-thumb.view-only .status-del{display:none;}
#sv-like-btn.active{background:var(--danger); color:#fff;}
.sv-comment-row span[style*="cursor"]:hover{text-decoration:underline;}
.sv-c-av{width:26px; height:26px; border-radius:50%; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; flex-shrink:0; overflow:hidden;}
.sv-c-av img{width:100%; height:100%; object-fit:cover;}

/* ---------- BẢO VỆ (guardian avatars) ---------- */
.guardian-row{display:flex; gap:14px; margin-top:8px; padding-left:2px;}
.guardian-av{
  width:46px; height:46px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--panel); cursor:pointer; border:3px solid var(--line);
}
.guardian-av img{width:100%; height:100%; object-fit:cover;}
.guardian-av.g-rank-1{border-color:var(--gold); box-shadow:0 0 10px #ffc94a77;}
.guardian-av.g-rank-2{border-color:#c9d3e0; box-shadow:0 0 8px #c9d3e055;}
.guardian-av.g-rank-3{border-color:#e2a86b; box-shadow:0 0 8px #e2a86b55;}

/* ---------- PHÒNG VIP card ---------- */
.vip-room-card{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 12px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
}
.vrc-av{width:42px; height:42px; border-radius:12px; overflow:hidden; background:#2b1f4514; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.vrc-av img{width:100%; height:100%; object-fit:cover;}
.vrc-info{flex:1; min-width:0;}
.vrc-name{font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.vrc-meta{font-size:11px; color:var(--text-dim);}
.vrc-lv{font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:linear-gradient(90deg,var(--accent),#c026d3); color:#fff; flex-shrink:0;}

/* ---------- GIA TỘC card (đẹp hơn, dùng riêng cho trang hồ sơ) ---------- */
.clan-card{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 12px; border-radius:14px;
  background:linear-gradient(135deg,#fff3e0,#f3effb); border:1px solid var(--line); cursor:pointer;
}
.cc-av{width:44px; height:44px; border-radius:12px; background:#2b1f4514; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
.cc-info{flex:1; min-width:0;}
.cc-name{font-weight:800; font-size:13px;}
.cc-tag{color:var(--text-dim); font-weight:600;}
.cc-badges{display:flex; gap:5px; margin-top:4px; flex-wrap:wrap;}
.cc-chip{font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:#2b1f4510; border:1px solid var(--line); color:var(--text-dim);}

/* ---------- 🏯 GIA TỘC — trang chi tiết (giao diện mới) ---------- */
.grid-ico.c-orange{background:linear-gradient(155deg,var(--orange-dim),#ff7a4514);}
.grid-ico.c-rose{background:linear-gradient(155deg,#ff5f8a55,#ff5f8a14);}
.clan-hub-head{
  position:relative; text-align:center; padding:22px 16px 18px; border-radius:20px; margin-bottom:14px; overflow:hidden;
  background:var(--clan-grad, linear-gradient(150deg,#241a3d,#170f2b 65%));
  border:1px solid var(--line);
}
.clan-hub-avatar-wrap{width:88px; height:88px; margin:0 auto 10px; position:relative;}
.clan-hub-avatar{
  width:88px; height:88px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:40px; background:var(--panel-strong); border:3px solid var(--clan-c1, var(--magenta));
  box-shadow:0 0 0 4px var(--panel), 0 6px 20px -6px #00000066;
}
.clan-hub-avatar img{width:100%; height:100%; object-fit:cover;}
.clan-hub-avatar-edit{
  position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--cyan); color:#04202b; font-size:12px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); z-index:2;
}
.clan-hub-name{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; margin-top:2px;}
.clan-hub-tag{opacity:.65; font-weight:600; font-size:13px;}
.clan-hub-lvrow{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.clan-hub-desc{opacity:.78; font-size:12.5px; margin-top:8px; padding:0 8px; line-height:1.4;}
.clan-hub-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px;}

.clan-member-strip-wrap{margin-bottom:16px;}
.clan-member-strip-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.clan-member-strip-head h2{font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:800;}
.clan-count-pill{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; background:var(--panel-strong); color:var(--text-dim); border:1px solid var(--line);}
.clan-member-strip{display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.clan-member-strip::-webkit-scrollbar{display:none;}
.clan-strip-item{display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:62px;}
.clan-strip-av-wrap{width:52px; height:52px; border-radius:16px; overflow:hidden; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:22px; border:1px solid var(--line);}
.clan-strip-av-wrap img{width:100%; height:100%; object-fit:cover;}
.clan-strip-name{font-size:10.5px; color:var(--text-dim); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
.clan-strip-action{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; position:relative; background:var(--panel-strong); border:1px solid var(--line); color:var(--text-dim);
}
.clan-strip-action.notif{background:var(--magenta-dim); color:var(--magenta);}
.clan-strip-action .icon-badge{top:-4px; right:-4px;}
.clan-strip-more{color:var(--text-faint); font-size:11px;}

.clan-fn-title{font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:800; margin:4px 0 12px;}
.clan-fn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px 6px; margin-bottom:20px;}

.clan-announce-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.clan-announce-title-row h2{font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:800;}
.clan-announce-row{display:flex; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line);}
.clan-announce-row:last-child{border-bottom:none;}
.clan-announce-body{flex:1; min-width:0;}
.clan-announce-meta{font-size:11px; color:var(--text-faint); margin-top:2px;}
.clan-announce-text{font-size:13px; line-height:1.4;}

.clan-album-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.clan-album-cell{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--panel-strong);}
.clan-album-cell img{width:100%; height:100%; object-fit:cover;}
.clan-album-cell .clan-album-del{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:#000000aa; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;}

.clan-theme-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.clan-theme-swatch{border-radius:14px; padding:14px 10px; text-align:center; border:2px solid var(--line); cursor:pointer; position:relative;}
.clan-theme-swatch.active{border-color:#fff;}
.clan-theme-swatch .cts-icon{font-size:24px;}
.clan-theme-swatch .cts-name{font-weight:700; font-size:12.5px; margin-top:6px;}
.clan-theme-swatch .cts-cost{font-size:11px; opacity:.8; margin-top:2px;}
.clan-theme-swatch .cts-check{position:absolute; top:6px; right:8px; font-size:14px;}

.clan-event-row{padding:10px 4px; border-bottom:1px solid var(--line);}
.clan-event-row:last-child{border-bottom:none;}
.clan-event-title{font-weight:700; font-size:13.5px;}
.clan-event-meta{font-size:11px; color:var(--text-faint); margin-top:2px;}
.clan-event-desc{font-size:12.5px; opacity:.85; margin-top:4px; line-height:1.4;}
.clan-event-status{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; margin-top:6px; display:inline-block;}
.clan-event-status.pending{background:var(--gold-dim); color:var(--gold);}
.clan-event-status.approved{background:#22d3ee33; color:var(--cyan);}
.clan-event-status.rejected{background:var(--magenta-dim); color:var(--danger);}

.clan-monthsary-card{text-align:center; padding:28px 16px; border-radius:18px; background:linear-gradient(150deg,#241a3d,#170f2b 65%); border:1px solid var(--line);}
.clan-monthsary-num{font-family:'Baloo 2',sans-serif; font-size:42px; font-weight:800; background:var(--grad-royal); -webkit-background-clip:text; background-clip:text; color:transparent;}
.clan-monthsary-label{font-size:13px; color:var(--text-dim); margin-top:2px;}
.clan-monthsary-next{font-size:12px; color:var(--text-faint); margin-top:14px;}

/* ---------- 🏛️ QUẢNG TRƯỜNG (Plaza) ---------- */
.plaza-topic-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.plaza-topic-strip::-webkit-scrollbar{display:none;}
.plaza-topic-chip{
  flex-shrink:0; display:flex; align-items:center; gap:6px; padding:7px 12px 7px 7px; border-radius:999px;
  background:var(--panel-strong); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--text-dim);
}
.plaza-topic-chip.active{background:var(--grad-hot); color:#fff; border-color:transparent;}
.plaza-topic-chip-ico{width:22px; height:22px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--panel); font-size:12px; flex-shrink:0;}
.plaza-topic-chip-ico img{width:100%; height:100%; object-fit:cover;}
.plaza-topic-chip-count{opacity:.75; font-size:10.5px; font-weight:600;}

.plaza-post-card{
  border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px;
  background:linear-gradient(180deg,var(--panel-strong),var(--panel) 65%);
  box-shadow:0 10px 26px -18px #000000cc; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.plaza-post-card:hover{transform:translateY(-1px); box-shadow:0 14px 30px -16px #000000d9;}
.plaza-post-card.pinned{border-color:var(--gold-dim); box-shadow:0 0 0 1px var(--gold-dim), 0 10px 26px -18px #000000cc; background:linear-gradient(180deg,var(--gold-dim),var(--panel) 60%);}
.plaza-post-card.official{border-color:var(--cyan-dim); box-shadow:0 0 0 1px var(--cyan-dim), 0 10px 26px -18px #000000cc; background:linear-gradient(180deg,var(--cyan-dim),var(--panel) 60%);}
.plaza-post-card.official.pinned{border-color:var(--gold-dim); background:linear-gradient(180deg,var(--gold-dim),var(--cyan-dim) 45%,var(--panel) 85%);}
.plaza-pin-badge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; color:#3d2400; background:linear-gradient(135deg,#ffe08a,var(--gold)); padding:3px 9px; border-radius:999px; margin-bottom:8px;}
.plaza-official-badge{color:#052a33; background:linear-gradient(135deg,#a6faff,var(--cyan));}
.plaza-post-avatar:hover{filter:brightness(1.08);}
.plaza-post-author:hover, .plaza-comment-author:hover{text-decoration:underline;}
.plaza-post-head{display:flex; align-items:center; gap:10px;}
.plaza-post-head .mini-av-wrap{border:2px solid var(--line); box-shadow:0 0 0 2px transparent;}
.plaza-post-head-info{flex:1; min-width:0;}
.plaza-post-author{font-weight:700; font-size:13.5px;}
.plaza-post-time{font-size:11px; color:var(--text-faint);}
.plaza-post-del{background:transparent; font-size:14px; opacity:.6; padding:4px; border-radius:8px; transition:.15s;}
.plaza-post-del:hover{opacity:1; background:var(--panel-strong);}
.plaza-post-caption{font-size:13.5px; line-height:1.5; margin-top:10px; white-space:pre-wrap; word-break:break-word;}
.plaza-post-img-wrap{margin-top:10px; border-radius:14px; overflow:hidden; position:relative; cursor:zoom-in;}
.plaza-post-img-wrap img{width:100%; max-height:340px; object-fit:cover; display:block; transition:transform .25s;}
.plaza-post-img-wrap:hover img{transform:scale(1.02);}
.plaza-post-img-wrap::after{content:'🔍'; position:absolute; right:10px; bottom:10px; font-size:13px; background:#00000066; backdrop-filter:blur(4px); padding:5px 8px; border-radius:999px; opacity:0; transition:.15s;}
.plaza-post-img-wrap:hover::after{opacity:1;}
.plaza-post-tag{display:inline-block; margin-top:10px; font-size:11.5px; font-weight:700; color:var(--cyan); background:var(--panel-strong); padding:3px 10px; border-radius:999px;}
.plaza-post-stats{display:flex; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}
.plaza-post-action{background:transparent; font-size:12.5px; font-weight:600; color:var(--text-dim); display:flex; align-items:center; gap:4px; transition:.15s; border-radius:8px; padding:4px 6px;}
.plaza-post-action:hover{background:var(--panel-strong); color:var(--text);}
.plaza-post-action.active{color:var(--magenta);}

/* Tabs sắp xếp: Mới nhất / Nổi bật */
.plaza-sort-tabs{display:flex; gap:6px; margin:2px 0 10px;}
.plaza-sort-tab{font-size:12px; font-weight:700; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); padding:6px 14px; border-radius:999px; transition:.15s;}
.plaza-sort-tab.active{background:var(--grad-hot); color:#fff; border-color:transparent;}

/* Skeleton loading cho feed */
.plaza-skeleton{border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; background:var(--panel);}
.plaza-skeleton-row{display:flex; align-items:center; gap:10px;}
.plaza-skeleton-bar{border-radius:8px; background:linear-gradient(90deg,var(--panel-strong) 25%, var(--line) 37%, var(--panel-strong) 63%); background-size:400% 100%; animation:plaza-shimmer 1.4s ease infinite;}
.plaza-skeleton-avatar{width:38px; height:38px; border-radius:50%; flex-shrink:0;}
.plaza-skeleton-lines{flex:1; display:flex; flex-direction:column; gap:6px;}
.plaza-skeleton-lines .plaza-skeleton-bar:first-child{width:40%; height:11px;}
.plaza-skeleton-lines .plaza-skeleton-bar:last-child{width:25%; height:9px;}
.plaza-skeleton-body{height:12px; margin-top:14px; width:90%;}
.plaza-skeleton-body.short{width:60%;}
@keyframes plaza-shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}

/* Empty state */
.plaza-empty{text-align:center; padding:36px 12px; color:var(--text-faint);}
.plaza-empty-ico{font-size:34px; margin-bottom:8px;}
.plaza-empty-title{font-size:13.5px; font-weight:700; color:var(--text-dim); margin-bottom:4px;}
.plaza-empty-sub{font-size:12px;}

/* Composer */
.plaza-compose-preview-box{position:relative; display:inline-block; margin:8px 0;}
.plaza-compose-preview-box img{max-width:100%; max-height:220px; border-radius:14px; display:block; border:1px solid var(--line);}
.plaza-compose-preview-remove{position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:var(--danger); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); box-shadow:0 4px 10px -4px #000;}
.plaza-compose-counter{font-size:11px; color:var(--text-faint); text-align:right; margin-top:4px;}
.plaza-compose-counter.warn{color:var(--gold);}
.plaza-compose-counter.max{color:var(--danger);}

/* Lightbox xem ảnh Quảng trường */
.plaza-lightbox-overlay{position:fixed; inset:0; background:#000000e6; z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:24px;}
.plaza-lightbox-overlay.hidden{display:none;}
.plaza-lightbox-overlay img{max-width:100%; max-height:78vh; border-radius:12px; box-shadow:0 30px 80px -20px #000;}
.plaza-lightbox-caption{color:#fff; font-size:13px; margin-top:14px; max-width:520px; text-align:center; line-height:1.5; white-space:pre-wrap;}
.plaza-lightbox-close{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:#ffffff1a; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;}

/* ---------- BẢNG CỐNG HIẾN (top gifters trong trang cá nhân) ---------- */
.contrib-list{display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:220px; overflow-y:auto; overflow-x:hidden;}
.contrib-row{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); font-size:12px; cursor:pointer;
}

.contrib-row.top1{border-color:var(--gold); background:linear-gradient(90deg,#ffe08a44,var(--panel));}
.contrib-row.top2{border-color:#c7c7d1aa; background:linear-gradient(90deg,#c7c7d144,var(--panel));}
.contrib-row.top3{border-color:#b5691daa; background:linear-gradient(90deg,#f0b07744,var(--panel));}
.contrib-row .cr-rank{width:20px; text-align:center; font-weight:800; flex-shrink:0;}
.contrib-row .cr-av{width:26px; height:26px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#2b1f4514; flex-shrink:0; font-size:15px;}
.contrib-row .cr-av img{width:100%; height:100%; object-fit:cover;}
.contrib-row .cr-name{font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contrib-row .cr-uid{color:var(--text-faint); font-size:10.5px; flex-shrink:0;}
.contrib-row .cr-value{color:var(--gold); font-weight:800; flex-shrink:0;}

/* ---------- ROOM PASSWORD MODAL ---------- */
.room-password-hint{font-size:12px; color:var(--text-faint); margin-top:8px;}

/* ---------- MINI GAME: LUCKY WHEEL ---------- */
.mg-wrap{display:flex; flex-direction:column; align-items:center; padding-top:6px;}
.mg-wheel-outer{position:relative; width:220px; max-width:100%; height:auto; aspect-ratio:1/1; margin:6px auto 4px;}
.mg-wheel{
  width:100%; height:100%; border-radius:50%;
  border:5px solid var(--panel-strong);
  box-shadow:0 0 0 2px var(--line), 0 10px 30px #00000055;
  transition: transform 3.6s cubic-bezier(.12,.72,.14,1);
  position:relative;
}
.mg-pointer{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:22px; z-index:2; filter:drop-shadow(0 2px 3px #000a);
}
.mg-labels{
  position:absolute; width:220px; height:220px; pointer-events:none;
}
.mg-slice-label{
  position:absolute; top:50%; left:50%; font-size:10.5px; font-weight:700;
  color:#fff; text-shadow:0 1px 2px #000c; white-space:nowrap;
  transform-origin:0 0;
}
.mg-info{display:flex; justify-content:space-between; width:100%; font-size:12.5px; color:var(--text-dim); margin-top:10px;}
.mg-result{margin-top:12px; padding:10px 14px; border-radius:12px; background:var(--panel-strong); border:1px solid var(--line); text-align:center; font-size:14px; font-weight:700;}
.mg-result.win{border-color:var(--gold); color:var(--gold);}

/* ============================================================
   MÁY GẮP THÚ MAY MẮN (Claw Machine)
============================================================ */
.claw-sheet{
  background:
    radial-gradient(circle at 15% 0%, #ff2e9a22, transparent 45%),
    radial-gradient(circle at 85% 8%, #22d3ee22, transparent 40%),
    linear-gradient(180deg,#241a44,#150c28 55%);
  border:1px solid var(--line); position:relative; overflow-x:hidden;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.claw-sheet::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(#ffffff55 1px, transparent 1.4px);
  background-size:26px 26px; animation:claw-bg-drift 14s linear infinite;
}
@keyframes claw-bg-drift{ from{background-position:0 0;} to{background-position:0 -260px;} }
.claw-sheet > *{ position:relative; z-index:1; }
.claw-tabs{display:flex; gap:8px; margin:4px 0 10px; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.claw-tabs::-webkit-scrollbar{display:none;}
.claw-tab{
  flex:1; white-space:nowrap; text-align:center; padding:9px 10px; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--text-dim); background:var(--panel); border:1px solid var(--line);
  transition:all .15s ease;
}
.claw-tab.active{color:#fff; background:var(--grad-royal); border-color:transparent; box-shadow:0 6px 16px -6px #ff2e9a88;}

.claw-ticker{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:7px 0; font-size:12.5px; color:var(--text-dim); margin-bottom:10px;
  overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.claw-ticker-track{
  display:inline-flex; gap:32px; padding-left:100%;
  animation: claw-marquee linear infinite;
}
.claw-ticker-track span{display:inline-flex; align-items:center; gap:4px;}
.claw-ticker-track b{color:#fff;}
@keyframes claw-marquee{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

.claw-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; border-radius:16px;
  background:linear-gradient(160deg,#ff9a4433,#ff2e9a22); border:1px solid var(--line); margin-bottom:10px;
  box-shadow:inset 0 0 0 1px #ffffff14, inset 0 12px 30px -18px #ff2e9a55;
}
.claw-item{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), rgba(255,255,255,.06) 60%), var(--panel-strong);
  border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; transition:transform .15s ease, box-shadow .15s ease;
}

.claw-item.won{animation:claw-pop .5s ease;}
@keyframes claw-pop{ 0%{transform:scale(1);} 40%{transform:scale(1.18); box-shadow:0 0 0 4px var(--gold-dim);} 100%{transform:scale(1);} }
.claw-item .ci-icon{font-size:26px; line-height:1;}
.claw-item .ci-value{
  margin-top:4px; font-size:11px; font-weight:700; color:#2a1f4a; background:var(--gold);
  border-radius:999px; padding:2px 8px; display:flex; align-items:center; gap:2px;
}

/* ---- Chuỗi combo (streak) — hiện phía trên hàng nút gắp/đập, dùng chung cho cả 2 game ---- */
.combo-row{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; min-height:22px;}
.combo-chip{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:#fff;
  padding:4px 12px; border-radius:999px; background:linear-gradient(135deg,#ff5f6d,#ff2e9a);
  box-shadow:0 6px 14px -6px #ff2e9a99; opacity:0; transform:translateY(4px) scale(.9);
  transition:opacity .2s ease, transform .2s ease;
}
.combo-chip.show{opacity:1; transform:translateY(0) scale(1);}
.combo-chip.pulse{animation:combo-pulse .45s ease;}
@keyframes combo-pulse{ 0%{transform:scale(1);} 45%{transform:scale(1.16);} 100%{transform:scale(1);} }
.egg-sheet .combo-chip{background:linear-gradient(135deg,#7cc142,#4c8f2a);}

/* ---- Rung màn hình khi trúng hũ vàng ---- */
.gacha-shake{animation:gacha-shake-kf .5s cubic-bezier(.36,.07,.19,.97);}
@keyframes gacha-shake-kf{
  10%,90%{ transform:translate3d(-1px,0,0); } 20%,80%{ transform:translate3d(2px,0,0); }
  30%,50%,70%{ transform:translate3d(-4px,0,0); } 40%,60%{ transform:translate3d(4px,0,0); }
}

.claw-info-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-dim); margin-bottom:10px;}

.claw-actions{display:flex; gap:8px; margin-bottom:10px;}
.claw-pull-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;
  border-radius:14px; border:none; cursor:pointer; color:#fff; font-size:13px;
}
.claw-pull-btn b{font-size:13.5px;}
.claw-pull-btn small{font-size:10.5px; opacity:.85; font-weight:500;}
.claw-pull-1{background:linear-gradient(135deg,#22d3ee,#2563eb);}
.claw-pull-10{background:linear-gradient(135deg,#ff5f6d,#ff2e9a);}
.claw-pull-50{background:linear-gradient(135deg,#ffe27a,#ff9a44); color:#2a1f4a;}
.claw-pull-btn:disabled{opacity:.55; cursor:not-allowed;}

.claw-footer-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.btn-ghost-pill{
  background:var(--panel); border:1px solid var(--line); color:var(--text-dim); font-size:12px;
  padding:7px 14px; border-radius:999px; cursor:pointer;
}


/* ---- Bảng thông báo kết quả sau khi gắp (đè lên máy) ---- */
.claw-result-overlay{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:18px; background:radial-gradient(circle at 50% 30%, #3a2566f0, #0a0714f5 75%);
  backdrop-filter:blur(2px); opacity:0; transition:opacity .25s ease;
}
.claw-result-overlay.show{opacity:1;}
.claw-result-card{
  width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:10px;
  transform:scale(.85); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.claw-result-overlay.show .claw-result-card{transform:scale(1);}
.cr-burst{
  position:absolute; top:14%; left:50%; width:220px; height:220px; margin-left:-110px; pointer-events:none;
  background:conic-gradient(from 0deg, #ffd70055, #ff2e9a44, #22d3ee44, #ffd70055);
  border-radius:50%; filter:blur(6px); animation:claw-burst-spin 6s linear infinite; opacity:.7;
}
@keyframes claw-burst-spin{ to{ transform:rotate(360deg); } }
.cr-title{
  font-size:19px; font-weight:800; background:linear-gradient(90deg,#ffe27a,#ffc94a 45%,#ff9a44);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 12px #ff2e9a55;
  position:relative;
}
.claw-result-strip-wrap{
  position:relative; width:100%; overflow:hidden; border-radius:16px; border:1px solid var(--line);
  background:var(--panel-strong); padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.claw-result-strip{display:flex; gap:12px; width:max-content; animation:claw-strip-scroll linear infinite;}
@keyframes claw-strip-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.cr-card{
  flex-shrink:0; width:78px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 6px;
}
.cr-card.rare{border-color:var(--gold); box-shadow:0 0 14px -2px var(--gold-dim);}
.cr-card .cr-icon{font-size:28px;}
.cr-card .cr-val{font-size:11px; font-weight:700; color:var(--gold);}
.cr-summary{
  width:100%; text-align:center; padding:12px 16px; border-radius:14px; background:var(--panel-strong);
  border:1px solid var(--gold-dim); font-size:14px; font-weight:700; color:#fff; line-height:1.7;
}
.cr-summary .cr-net{font-size:17px; color:var(--gold);}
.cr-close{max-width:340px;}

.claw-list-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:12.5px;}
.claw-list-row .clr-avatar{width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--panel-strong);}
.claw-list-row .clr-avatar .av-photo{width:100%; height:100%; object-fit:cover;}
.claw-list-row .clr-avatar .av-letter{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;}
.claw-list-row .clr-name{font-weight:700; color:#fff;}
.claw-list-row .clr-sub{color:var(--text-dim); font-size:11.5px;}
.claw-list-row .clr-value{margin-left:auto; font-weight:800; color:var(--gold); white-space:nowrap;}
.claw-list-row.jackpot-row{border-color:var(--gold); box-shadow:0 0 14px -4px var(--gold-dim);}
#btn-mg-spin:disabled{opacity:.5; cursor:not-allowed;}

/* ---- Huy hiệu hạng nhất/nhì/ba cho Bảng may mắn (leaderboard) ---- */
.claw-list-row .clr-rank{
  flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:var(--text-dim); background:var(--panel-strong);
}
.claw-list-row.rank-1 .clr-rank{background:linear-gradient(135deg,#ffe27a,#ffc94a); color:#3a2a06; box-shadow:0 0 10px -2px #ffc94a;}
.claw-list-row.rank-2 .clr-rank{background:linear-gradient(135deg,#e6e9f0,#b7bfd1); color:#242a3a;}
.claw-list-row.rank-3 .clr-rank{background:linear-gradient(135deg,#f0b27a,#c97a3f); color:#3a2306;}
.claw-list-row.rank-1 .clr-avatar{box-shadow:0 0 0 2px var(--gold);}
.claw-list-row.rank-2 .clr-avatar{box-shadow:0 0 0 2px #b7bfd1;}
.claw-list-row.rank-3 .clr-avatar{box-shadow:0 0 0 2px #c97a3f;}

/* ---- Hũ vàng (Jackpot) — thanh hiển thị số xu tích luỹ trên đầu máy ---- */
.claw-jackpot-bar{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px;
  padding:8px 14px; border-radius:14px; font-size:13px; font-weight:800; color:#2a1f4a;
  background:linear-gradient(90deg,#ffe27a,#ffc94a 50%,#ffe27a); background-size:200% 100%;
  animation:claw-jackpot-shimmer 2.4s linear infinite; box-shadow:0 6px 16px -6px #ffc94a88;
}
@keyframes claw-jackpot-shimmer{ from{background-position:0% 0;} to{background-position:200% 0;} }
.claw-jackpot-bar .jb-amt{font-size:15px;}

/* ---- Banner sự kiện x2 tỉ lệ vật phẩm hiếm ---- */
.claw-event-banner{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px;
  padding:7px 12px; border-radius:12px; font-size:12px; font-weight:700; color:#fff; text-align:center;
  background:linear-gradient(90deg,#ff5f6d,#ff2e9a); box-shadow:0 6px 14px -6px #ff2e9a77;
}
.claw-event-banner .eb-count{opacity:.9; font-weight:600;}

/* ---- Vật phẩm hiếm / theo mùa: viền phát sáng + ruy băng nhỏ ---- */
.claw-item.rare-item{box-shadow:0 0 0 2px var(--gold), 0 0 14px -2px var(--gold-dim);}
.claw-item.seasonal-item::after{
  content:'🌸'; position:absolute; top:-6px; right:-4px; font-size:14px;
  filter:drop-shadow(0 2px 4px #0008);
}
.claw-item.jackpot-item::before{
  content:'🎰'; position:absolute; top:-6px; left:-4px; font-size:14px;
  filter:drop-shadow(0 2px 4px #0008);
}
.egg-sheet .claw-item.seasonal-item::after{ content:'🌻'; }

/* ---- Overlay đặc biệt khi vừa trúng hũ vàng ---- */
.cr-title.jackpot-hit{
  background:linear-gradient(90deg,#fff6c8,#ffd700 40%,#fff6c8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:claw-jackpot-shimmer 1.2s linear infinite; background-size:200% 100%;
}

/* ---- Cánh tay gắp thật (SVG) — thả xuống, kẹp, kéo lên trước khi hiện kết quả ---- */
.claw-arm-wrap{
  position:absolute; top:0; left:50%; width:64px; height:100%; margin-left:-32px;
  pointer-events:none; z-index:15; display:flex; justify-content:center;
}
.claw-arm-wrap.hidden{display:none;}
.claw-arm-rail{position:absolute; top:0; left:50%; width:2px; height:100%; margin-left:-1px; background:linear-gradient(180deg, #ffffff33, transparent);}
.claw-arm{
  position:absolute; top:-40px; left:50%; width:6px; height:40px; margin-left:-3px;
  background:linear-gradient(180deg,#dfe4ee,#9aa3b8); border-radius:3px;
  transition:top .55s cubic-bezier(.6,.05,.85,.35), height .55s cubic-bezier(.6,.05,.85,.35);
}
.claw-arm .claw-jaw{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:26px; transition:transform .25s ease;}
.claw-arm.dropping{top:120px; height:120px;}
.claw-arm.grabbing .claw-jaw{transform:translateX(-50%) scale(.85) rotate(-6deg);}
.claw-arm.rising{top:-40px; height:40px;}

/* ============================================================
   ĐẬP TRỨNG (Egg Smash) — chủ đề "Trại Gà Nắng Sớm" (farm/spring),
   cố ý tách hẳn khỏi tông neon-tím của Máy Gắp Thú: nền be/xanh lá
   ấm áp, tia nắng toả góc trên, ô phần thưởng hình quả trứng thay
   vì hình tròn. Vẫn dùng chung khung .claw-sheet/.claw-grid/.claw-tab
   qua modifier .egg-sheet để không lặp code, nhưng override đủ mạnh
   để cảm giác chơi khác hẳn máy gắp thú. Nút gắp/đập (.egg-pull-btn)
   là class riêng để tránh trùng bộ chọn toàn cục ".claw-pull-btn".
============================================================ */
.egg-sheet{
  background:
    conic-gradient(from 200deg at 15% -10%, #ffe9a655, transparent 35%),
    linear-gradient(180deg,#2f3a1e,#171e10 55%) !important;
}
.egg-sheet::before{
  background-image:none;
  background:radial-gradient(circle at 50% 0%, #ffe9a622, transparent 60%);
  animation:none;
}
.egg-sheet .claw-tab{ border-radius:12px; }
.egg-sheet .claw-tab.active{background:linear-gradient(135deg,#8bcf4a,#4c8f2a) !important; color:#132a06 !important; box-shadow:0 6px 16px -6px #4c8f2a88 !important;}
.egg-sheet .claw-jackpot-bar{background:linear-gradient(90deg,#fff0c0,#ffcf5c 50%,#fff0c0); background-size:200% 100%; color:#3a2a06;}
.egg-sheet .claw-event-banner{background:linear-gradient(90deg,#7cc142,#4c8f2a);}

/* ---- Lưới trứng: nền cỏ/rơm thay vì tông tím-hồng ---- */
.egg-sheet .claw-grid{
  background:
    repeating-linear-gradient(135deg, #ffffff08 0 8px, transparent 8px 16px),
    linear-gradient(160deg,#8bcf4a2e,#4c8f2a22) !important;
  box-shadow:inset 0 0 0 1px #ffffff10, inset 0 12px 30px -18px #4c8f2a55;
}
/* ---- Ô phần thưởng dạng quả trứng (bầu dục lệch), không còn hình tròn ---- */
.egg-sheet .claw-item{
  border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 26%, rgba(255,255,255,.4), rgba(255,255,255,.05) 58%), #fff8e6;
  border:1px solid #d8c48f55;
}
.egg-sheet .claw-item .ci-value{ background:#4c8f2a; color:#fff; }
.egg-sheet .claw-item.rare-item{ box-shadow:0 0 0 2px #ffcf5c, 0 0 14px -2px #ffcf5c99; }

.egg-pull-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;
  border-radius:14px; border:none; cursor:pointer; color:#fff; font-size:13px;
}
.egg-pull-btn b{font-size:13.5px;}
.egg-pull-btn small{font-size:10.5px; opacity:.85; font-weight:500;}
.egg-pull-1{background:linear-gradient(135deg,#8bcf4a,#3f7a20);}
.egg-pull-10{background:linear-gradient(135deg,#ffcf5c,#c98423);}
.egg-pull-50{background:linear-gradient(135deg,#ffe8a3,#ffcf5c); color:#3a2a06;}
.egg-pull-btn:disabled{opacity:.55; cursor:not-allowed;}

/* Búa đập trứng — vung xuống rồi bật lên, thay cho cánh tay gắp. */
.egg-hammer-wrap{
  position:absolute; top:0; left:50%; width:80px; height:100%; margin-left:-40px;
  pointer-events:none; z-index:15; display:flex; justify-content:center;
}
.egg-hammer-wrap.hidden{display:none;}
.egg-hammer{
  position:absolute; top:-10px; left:50%; font-size:40px; transform-origin:70% 20%;
  transform:translateX(-50%) rotate(-55deg); transition:transform .4s cubic-bezier(.6,.05,.85,.35);
}
.egg-hammer.swing{transform:translateX(-50%) rotate(15deg);}
.egg-hammer.back{transform:translateX(-50%) rotate(-55deg);}
.egg-crack-flash{
  position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, #fff8, transparent 60%);
  opacity:0; z-index:14; pointer-events:none;
}
.egg-crack-flash.flash{animation:egg-crack-pop .35s ease;}
@keyframes egg-crack-pop{ 0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;} }

/* ===== Tài Xỉu / Đoán Số games ===== */
#tx-pick-tai, #tx-pick-xiu { opacity: .55; transition: opacity .15s, transform .15s; }
#tx-pick-tai.active, #tx-pick-xiu.active { opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 16px -6px #ff2e9a88; }

/* ===== Room bubble nổi (thu nhỏ phòng, quay lại nhanh) ===== */
.room-bubble{
  position: fixed; right: 16px; bottom: 84px; z-index: 950;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(30,20,55,.95), rgba(15,10,35,.95));
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px 6px 6px; box-shadow: 0 10px 28px -10px #000c, 0 0 0 1px #ff2e9a33;
  cursor: pointer; max-width: 240px; animation: room-bubble-in .25s ease;
  --text-dim:#cfc3ea;
}
.room-bubble.hidden{ display:none; }
@keyframes room-bubble-in{ from{ transform: scale(.7) translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
.room-bubble-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.room-bubble-avatar{
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg,#ff2e9a,#7c3aed);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  border: 2px solid var(--gold); overflow:hidden;
}
.room-bubble-avatar img{ width:100%; height:100%; object-fit:cover; }
.room-bubble-info{ min-width:0; }
.room-bubble-name{ font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.room-bubble-hint{ font-size:11px; color:var(--text-dim); }
.room-bubble-close{
  position:absolute; top:-6px; left:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#fff; border:2px solid var(--bg); font-size:10px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
}

/* ============================================================
   FESTIVE POPUP — component banner dạng popup lễ hội, tái dùng
   được cho mọi sự kiện/thưởng (điểm danh tuần, khai trương, tết...).
   Cố ý sáng/rực rỡ, khác tông tối của app vì đây là khoảnh khắc
   "ăn mừng" nổi bật trên nền tối, giống các app tương tự.
============================================================ */
.festive-overlay{ align-items:center; padding:20px; }
.festive-shell{ width:100%; max-width:380px; position:relative; padding-top:74px; animation:festive-pop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes festive-pop{ from{ transform:scale(.85); opacity:0; } to{ transform:none; opacity:1; } }
.festive-close{
  position:absolute; top:0; right:6px; width:32px; height:32px; border-radius:50%;
  background:#00000055; border:1.5px solid #2b1f4555; color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center; z-index:6; backdrop-filter:blur(6px);
}
.festive-mascot{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:110px;
  display:flex; align-items:flex-end; justify-content:center; font-size:64px; z-index:3; line-height:1;
  filter:drop-shadow(0 8px 14px #00000055);
}
.festive-mascot .fm-side{ position:absolute; font-size:26px; }
.festive-mascot .fm-side.left{ left:6px; bottom:14px; }
.festive-mascot .fm-side.right{ right:6px; bottom:22px; }
.festive-ribbon{
  position:relative; z-index:4; margin:0 -6px -18px; text-align:center; padding:12px 20px 20px;
  background:linear-gradient(135deg,#ffb648,#fb7b3c); color:#fff; font-family:'Baloo 2',sans-serif;
  font-size:19px; font-weight:800; letter-spacing:.01em; text-shadow:0 2px 4px #ac420022;
  clip-path:polygon(0% 0%, 100% 0%, 100% 78%, 92% 100%, 8% 100%, 0% 78%);
}
.festive-card{
  position:relative; z-index:2; background:#fff8f0; border-radius:24px; padding:30px 16px 20px;
  box-shadow:0 20px 40px -14px #00000088, 0 0 0 1px #ffffff20;
}
.festive-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.festive-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.festive-day{
  background:#fdece0; border-radius:14px; padding:10px 4px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
}
.festive-day .fd-label{ font-size:11px; font-weight:800; color:#c98456; }
.festive-day .fd-ico{ width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg,#ffd76a,#ffb023); display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 3px 8px -2px #f0900055;}
.festive-day .fd-val{ font-size:14px; font-weight:800; color:#a85a1e; }
.festive-day.active{ background:linear-gradient(160deg,#ff9a3c,#fb7128); box-shadow:0 8px 18px -8px #fb712888; }
.festive-day.active .fd-label,.festive-day.active .fd-val{ color:#fff; }
.festive-day.active .fd-ico{ background:linear-gradient(135deg,#ffffff,#ffe9c2); box-shadow:0 3px 10px -2px #00000066; }
.festive-day.claimed{ opacity:.55; }
.festive-day.claimed::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#22a35c; background:#fdece0cc; border-radius:14px; }
.festive-day.mystery .fd-ico{ background:linear-gradient(160deg,#8ad0ff,#4aa4ff); font-size:16px; }
.festive-cta{
  width:100%; margin-top:18px; padding:15px; border-radius:16px; border:none;
  background:linear-gradient(135deg,#ffb648,#fb7b3c); color:#fff; font-family:'Baloo 2',sans-serif;
  font-size:17px; font-weight:800; box-shadow:0 10px 20px -8px #fb7b3c99; transition:.15s;
}
.festive-cta:active{ transform:scale(.97); }
.festive-cta:disabled{ opacity:.5; filter:grayscale(.3); }
.festive-hint{ text-align:center; font-size:12px; color:#c98456; margin-top:10px; }
.newbie-sub{ text-align:center; font-size:12.5px; color:#c98456; font-weight:700; margin-bottom:10px; }
.festive-day.locked{ opacity:.6; }
.festive-day.locked .fd-ico{ filter:grayscale(.4); }

/* ===== Popup Poster (quảng cáo/sự kiện toàn màn hình, admin quản lý) ===== */
.poster-popup-overlay{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,6,20,.55); backdrop-filter:blur(2px);
  animation:posterFadeIn .18s ease;
}
.poster-popup-overlay.hidden{ display:none; }
.poster-popup-inner{
  max-width:min(88vw, 420px); max-height:78vh;
  display:flex; align-items:center; justify-content:center;
}
.poster-popup-img{
  width:100%; height:100%; max-height:78vh; object-fit:contain;
  border-radius:16px; cursor:pointer;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
}
.poster-popup-close{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8vh; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; border:1.5px solid rgba(255,255,255,.5);
  font-size:16px; line-height:1; cursor:pointer; backdrop-filter:blur(3px);
}
.poster-popup-close:active{ transform:translateX(-50%) scale(.92); }
@keyframes posterFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   EVENT PAGES — banner ribbon + glass panel + reward grid
   (dùng chung cho modal Sự kiện, Mời bạn bè, Rương May Mắn,
   Chia Sẻ Nhận Thưởng, Quà Tân Thủ...)
============================================================ */
.event-hero{
  position:relative; border-radius:20px; overflow:hidden; text-align:center;
  padding:24px 16px 20px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--magenta-dim), transparent 60%),
    linear-gradient(165deg, #1a1030, #241340 55%, #170b28);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #ffffff14, 0 20px 40px -22px #000000a0;
  /* Banner này có nền TỐI cố định (không đổi theo theme trắng), nhưng .eh-sub/.eh-status
     bên trong dùng chung biến --text/--text-dim/--text-faint toàn cục — giờ biến đó đã
     đổi sang màu TỐI cho theme trắng nên chữ sẽ bị chìm vào nền. Ghi đè lại 3 biến này
     về màu SÁNG chỉ trong phạm vi banner, giống cách .modal-sheet từng làm ngược lại. */
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.event-hero::before, .event-hero::after{
  content:''; position:absolute; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, var(--cyan-dim), transparent 70%);
  top:-60px; left:-40px; pointer-events:none;
}
.event-hero::after{ background:radial-gradient(circle, var(--magenta-dim), transparent 70%); top:auto; bottom:-70px; right:-50px; left:auto; }
.eh-emoji{ font-size:42px; filter:drop-shadow(0 8px 16px #00000070); position:relative; z-index:1; }
.eh-title{
  font-size:19px; font-weight:900; margin-top:8px; position:relative; z-index:1;
  background:linear-gradient(90deg, var(--cyan), var(--magenta) 60%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.01em;
}
.eh-sub{ font-size:12px; color:var(--text-dim); margin-top:5px; position:relative; z-index:1; line-height:1.5; }
.eh-status{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px; position:relative; z-index:1;
  font-size:11.5px; font-weight:800; color:var(--text); background:#ffffff14; border:1px solid var(--line);
  padding:4px 12px; border-radius:999px;
}
.eh-status.live{ color:#0a2e12; background:linear-gradient(90deg,#8fffa8,#22d38a); border-color:transparent; }
.eh-status.ended{ color:var(--text-faint); }

.event-ribbon{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:16px 0 10px; padding:9px 18px; border-radius:999px;
  font-weight:800; font-size:13.5px; color:#1a0900; text-align:center;
  background:linear-gradient(90deg, var(--gold), #ffb03d 55%, var(--magenta));
  box-shadow:0 10px 22px -10px var(--magenta-dim), inset 0 1px 0 #ffffff55;
}

.event-panel{
  background:var(--panel-strong); border:1px solid var(--line); border-radius:18px;
  padding:16px; margin-top:12px;
}
.event-panel-title{ font-size:13.5px; font-weight:800; color:var(--text); margin-bottom:12px; text-align:center; }
.event-panel-note{ font-size:11px; color:var(--text-faint); margin-top:12px; line-height:1.6; }

.event-reward-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.event-reward-item{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 6px 10px;
  transition:.15s;
}
.event-reward-item:active{ transform:scale(.96); }
.eri-ico{
  width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:linear-gradient(160deg,var(--panel-strong),#00000040);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 #ffffff1a;
}
.eri-label{ font-size:11px; color:var(--text-dim); font-weight:700; line-height:1.3; }

.event-gift-row{
  display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); position:relative;
}
.egr-badge{
  position:absolute; top:-8px; left:10px; font-size:10px; font-weight:800; color:#1a0900;
  background:linear-gradient(90deg,var(--gold),#ff9f43); padding:2px 9px; border-radius:999px;
  box-shadow:0 4px 10px -3px #00000080;
}
.egr-ico{
  width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(160deg,var(--panel-strong),#00000040); border:1px solid var(--line);
}
.egr-body{ flex:1; min-width:0; }
.egr-title{ font-weight:800; font-size:13px; }
.egr-desc{ font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.4; }

.event-list-card{
  width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px;
  background:linear-gradient(160deg,var(--panel-strong),var(--panel)); border:1px solid var(--line);
  text-align:left; position:relative; overflow:hidden;
}
.event-list-card::before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--magenta));
}
.elc-ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:var(--panel); border:1px solid var(--line);
}
.elc-chevron{ color:var(--text-faint); font-size:15px; flex-shrink:0; }

/* ============================================================
   MỜI BẠN BÈ — tabs, nút chia sẻ nhanh, chặng mốc thưởng,
   bảng xếp hạng (modal-invite-friends trong index.php)
============================================================ */
.inv-tabs{ display:flex; gap:8px; margin-top:14px; }
.inv-tabs .tab-btn{ flex:1; text-align:center; justify-content:center; }
.inv-tabs .tab-btn.active{ background:linear-gradient(135deg,var(--cyan),#2f8dff); color:#04212b; box-shadow:0 6px 16px -6px #35f2ff88; }

.inv-share-row{ display:flex; gap:8px; margin-top:10px; }
.inv-share-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px; border-radius:12px; font-size:12px; font-weight:800; color:var(--text);
  background:var(--panel); border:1px solid var(--line); transition:transform .15s;
}
.inv-share-btn:active{ transform:scale(.96); }
.inv-share-native{ background:linear-gradient(135deg,var(--cyan-dim),var(--panel)); }
.inv-share-fb{ background:linear-gradient(135deg,#1a5fd6,#0f3d99); color:#fff; border-color:transparent; }
.inv-share-ico{ font-size:14px; }

/* Chặng mốc thưởng — đường ray ngang với các "trạm" mốc, mỗi trạm hiện
   icon + số bạn cần mời; trạm đã đạt tô sáng, trạm đã nhận thưởng có tick. */
.inv-tier-track{ display:flex; align-items:flex-start; gap:2px; overflow-x:auto; padding:6px 2px 2px; }
.inv-tier-item{
  position:relative; flex:1; min-width:64px; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding-top:2px;
}
.inv-tier-item::before{
  content:''; position:absolute; top:21px; left:-50%; width:100%; height:3px; z-index:0;
  background:var(--line);
}
.inv-tier-item:first-child::before{ display:none; }
.inv-tier-item.unlocked::before{ background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
.inv-tier-dot{
  position:relative; z-index:1; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:var(--panel-strong); border:2px solid var(--line); transition:.2s;
}
.inv-tier-item.unlocked .inv-tier-dot{
  background:linear-gradient(160deg,var(--cyan-dim),var(--magenta-dim)); border-color:var(--cyan);
  box-shadow:0 0 0 4px #35f2ff22;
}
.inv-tier-item.claimed .inv-tier-dot{
  background:linear-gradient(160deg,var(--gold),#ff9f43); border-color:transparent; box-shadow:0 6px 14px -6px #ffb03d99;
}
.inv-tier-count{ font-size:10.5px; font-weight:800; color:var(--text-dim); margin-top:5px; }
.inv-tier-item.unlocked .inv-tier-count{ color:var(--text); }
.inv-tier-label{ font-size:9.5px; color:var(--text-faint); margin-top:1px; line-height:1.25; max-width:70px; }
.inv-tier-check{
  position:absolute; top:-3px; right:6px; z-index:2; width:16px; height:16px; border-radius:50%;
  background:#22d38a; color:#04240f; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--panel-strong);
}

/* Bảng xếp hạng */
.inv-lb-podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:6px 0 2px; }
.inv-lb-podium-item{ display:flex; flex-direction:column; align-items:center; gap:4px; width:76px; }
.inv-lb-podium-av{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--panel-strong); border:2px solid var(--line); overflow:hidden;
}
.inv-lb-podium-item.rk1 .inv-lb-podium-av{ width:60px; height:60px; border-color:var(--gold); box-shadow:0 0 0 4px #ffd76a33; }
.inv-lb-podium-item.rk2 .inv-lb-podium-av{ border-color:#c7d2e0; }
.inv-lb-podium-item.rk3 .inv-lb-podium-av{ border-color:#e0a26a; }
.inv-lb-podium-medal{ font-size:15px; }
.inv-lb-podium-name{ font-size:11px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:76px; }
.inv-lb-podium-count{ font-size:10.5px; color:var(--text-dim); font-weight:700; }

.inv-lb-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:13px;
  background:var(--panel); border:1px solid var(--line);
}
.inv-lb-row.me{ border-color:var(--cyan); background:linear-gradient(90deg,var(--cyan-dim),var(--panel)); }
.inv-lb-rank{ width:22px; text-align:center; font-weight:900; font-size:12.5px; color:var(--text-dim); flex-shrink:0; }
.inv-lb-av{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--panel-strong); overflow:hidden; flex-shrink:0; }
.inv-lb-name{ flex:1; min-width:0; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-lb-count{ font-size:11.5px; font-weight:800; color:var(--cyan); flex-shrink:0; }
.inv-lb-av .av-letter, .inv-lb-podium-av .av-letter{ width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }

/* ============================================================
   TÚI DÒ MÌN (Mine Bag)
============================================================ */
.mine-bag-unit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.mine-bag-unit-opt{
  padding:10px 4px; border-radius:12px; text-align:center; font-size:13px; font-weight:800;
  color:var(--text-dim); background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:all .15s ease;
}
.mine-bag-unit-opt.active{color:#3a1900; background:linear-gradient(135deg,#ffd166,#ff8a3d); border-color:transparent; box-shadow:0 6px 16px -6px #ff8a3d88;}
.mine-bag-digit-opt{
  padding:10px 4px; border-radius:12px; text-align:center; font-size:13px; font-weight:800;
  color:var(--text-dim); background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:all .15s ease;
}
.mine-bag-digit-opt.active{color:#fff; background:var(--grad-royal); border-color:transparent; box-shadow:0 6px 16px -6px #ff2e9a88;}

/* ============================================================
   KHO XU — tủ trưng bày rút thăm, chủ đề TẾT TRUNG THU 🏮🥮🌕
   nền trời đêm rằm chàm-tím, trăng tròn phát sáng phía sau tiêu đề,
   đèn lồng hai bên, hộp bí ẩn ánh vàng, quầy đổi thưởng bánh trung thu.
============================================================ */
.kx-sheet{
  background:#160c28; border:1px solid #ffd98a55; padding:0 !important;
  box-shadow:0 0 0 1px #00000080, 0 30px 70px -20px #000c, 0 0 60px -10px #ffcf6688;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.kx-close{
  position:absolute; top:10px; right:10px; z-index:6; color:#3a2200;
  background:linear-gradient(180deg,#ffe9b0,#ffc44d); border:1px solid #fff6d9;
  box-shadow:0 3px 8px -2px #0007; border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:14px;
}

.kx-cabinet{
  position:relative; padding:60px 16px 16px;
  background:
    radial-gradient(70px 70px at 50% 30px, #fff4cf 0%, #ffe9b0 35%, transparent 70%),
    radial-gradient(120% 60% at 15% 100%, #ff8a3d22 0%, transparent 55%),
    radial-gradient(120% 60% at 85% 100%, #7b2ff733 0%, transparent 55%),
    linear-gradient(180deg,#241454 0%,#170d33 45%,#100822 100%);
  overflow:hidden;
}
/* trăng rằm phát sáng phía sau tiêu đề */
.kx-moon{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); width:92px; height:92px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 38% 32%, #fffdf3 0%, #fff2c4 45%, #ffd98a 75%, #f2b23e 100%);
  box-shadow:0 0 40px 14px #ffe9b055, 0 0 90px 30px #ffcf6633;
  opacity:.9;
}
/* hạt kim tuyến lấp lánh rải rác — như ánh sao đêm rằm */
.kx-cabinet::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, #fff 0 1.4px, transparent 1.6px),
    radial-gradient(circle, #ffd98a 0 1.2px, transparent 1.4px),
    radial-gradient(circle, #fff 0 1px, transparent 1.2px);
  background-size:120px 120px, 90px 90px, 70px 70px;
  background-position:10px 20px, 40px 80px, 70px 10px;
  opacity:.5; animation:kx-sparkle-drift 7s linear infinite;
}
@keyframes kx-sparkle-drift{
  0%{background-position:10px 20px, 40px 80px, 70px 10px; opacity:.35;}
  50%{opacity:.65;}
  100%{background-position:10px -100px, 40px -20px, 70px -110px; opacity:.35;}
}
.kx-cabinet > *{position:relative; z-index:1;}

/* đèn lồng treo hai bên, đung đưa nhẹ */
.kx-lantern{
  position:absolute; top:-6px; font-size:30px; z-index:2; transform-origin:top center;
  filter:drop-shadow(0 4px 8px #00000066);
  animation:kx-lantern-sway 3.4s ease-in-out infinite;
}
.kx-lantern-l{left:10px; animation-delay:0s;}
.kx-lantern-r{right:44px; animation-delay:.6s;}
@keyframes kx-lantern-sway{
  0%,100%{transform:rotate(-8deg);}
  50%{transform:rotate(8deg);}
}

/* banner sự kiện Trung Thu — chỉ hiện khi sự kiện đang bật */
.kx-event-banner{
  margin:0 0 10px; padding:7px 10px; border-radius:10px; text-align:center; font-size:11.5px; font-weight:800;
  color:#3a2200; background:linear-gradient(90deg,#ffe9b0,#ffc44d,#ffe9b0); background-size:200% 100%;
  position:relative; z-index:1; min-height:34px; display:flex; align-items:center; justify-content:center;
  animation:kx-progress-shimmer 3s linear infinite; box-shadow:0 3px 10px -3px #0007;
}
/* Trên màn hẹp (điện thoại), chữ banner dễ xuống 2 dòng — ép chiều cao tối
   thiểu đủ cho 2 dòng để các icon absolute (top cố định) không bị lệch. */
@media (max-width:400px){
  .kx-event-banner{min-height:50px; font-size:11px; line-height:1.3;}
}

.kx-ribbon{
  position:absolute; top:8px; z-index:5; padding:6px 10px 5px; font-size:10.5px; font-weight:800; line-height:1.25;
  text-align:center; color:#fff; border:none; cursor:default;
  filter:drop-shadow(0 4px 8px #00000066);
}
.kx-ribbon-bonus{
  left:-6px; border-radius:0 10px 10px 0; pointer-events:none;
  background:linear-gradient(135deg,#ff6fb0,#c8117a);
}
.kx-ribbon-preview{
  right:-6px; border-radius:10px 0 0 10px; cursor:pointer; color:#3a2200;
  background:linear-gradient(135deg,#ffe9b0,#ffc44d);
  transition:transform .15s ease;
}
.kx-ribbon-preview:active{transform:scale(.94);}

.kx-wheel-badge{
  position:absolute; top:132px; left:12px; z-index:4;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:3px solid; border-image:linear-gradient(135deg,#fff6d9,#ffc44d,#c8860a) 1; padding:0;
  background:radial-gradient(circle at 35% 30%, #4a2a70, #1c0f2e); font-size:24px;
  box-shadow:0 4px 14px -2px #000a, 0 0 14px -2px #ffd98a99;
  animation:kx-wheel-glow 2.6s ease-in-out infinite;
}
@keyframes kx-wheel-glow{
  0%,100%{box-shadow:0 4px 14px -2px #000a, 0 0 10px -2px #ffd98a77;}
  50%{box-shadow:0 4px 14px -2px #000a, 0 0 20px 2px #ffd98acc;}
}
.kx-wheel-count{
  position:absolute; top:-6px; right:-6px; background:linear-gradient(135deg,#ff5fa8,#c8117a); color:#fff; font-size:11px; font-weight:800;
  border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid #1c0f2e; box-shadow:0 0 6px #ff2e9a99;
}
.kx-refresh-btn{
  position:absolute; top:12px; right:14px; z-index:4; width:32px; height:32px; border-radius:50%;
  background:linear-gradient(180deg,#ffe9b0,#ffc44d); border:1px solid #fff6d9; color:#3a2200; font-size:15px; cursor:pointer;
  box-shadow:0 3px 10px -2px #0008; transition:transform .2s ease;
}
.kx-refresh-btn:active{transform:rotate(90deg);}

/* Thanh "EXP Phòng NGÀY" — mốc 3000 EXP/ngày (tier1, cuối tuần cao hơn),
   đặt cố định ở GÓC TRÊN-TRÁI phòng (đè lên nền phòng), khác với khối
   .rexp-badge (EXP vĩnh viễn/cấp độ phòng) nằm trong dòng thông tin ID. */
.rexp-daily-corner{
  position:absolute; top:8px; left:8px; z-index:5; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; width:auto;
  padding:4px 10px 4px 6px; border-radius:999px;
  background:linear-gradient(90deg, #35c4d6 var(--rexp-pct,0%), #163a42 var(--rexp-pct,0%));
  border:1px solid #2b1f4533; box-shadow:0 3px 8px -3px #0009;
  transition:background .3s ease;
}
.rexp-daily-corner.hidden{display:none;}
.rexp-daily-icon{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; background:#fff3; box-shadow:inset 0 0 0 1px #ffffff55;
}
.rexp-daily-label{font-size:11.5px; font-weight:800; color:#fff; white-space:nowrap; text-shadow:0 1px 2px #0007;}

/* Khối cấp độ Phòng GỘP — 1 badge duy nhất thay cho 2 badge rời trước đây
   (EXP Phòng vĩnh viễn + Sôi Động tuần): thanh tiến trình cấp Phòng +
   chip nhỏ "🔥 Lv.X" của Sôi Động đính kèm bên phải. Bấm vào phần chính mở
   tab "Cấp độ Phòng", bấm riêng chip Sôi Động mở thẳng tab "Sôi Động". */
.rt-explevel-row{margin-top:3px;}
.rexp-badge{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; max-width:100%;
  padding:3px 8px; border-radius:999px; background:#00000033; border:1px solid #2b1f451f;
}
.rexp-label{font-size:10px; font-weight:800; color:var(--c1, #ffd98a); white-space:nowrap;}
.rexp-bar-wrap{
  width:52px; height:6px; border-radius:999px; background:#0000004d; border:1px solid #2b1f4522; overflow:hidden; flex-shrink:0;
}
.rexp-bar-fill{
  height:100%; border-radius:999px; transition:width .3s ease;
  background:linear-gradient(90deg, var(--c1, #ffc44d), var(--c2, #ff8a3d));
}
.rexp-sub{font-size:9.5px; color:var(--text-faint, #b9aed8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rexp-combo{flex-wrap:nowrap;}
.rexp-combo-vib{
  display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:800; color:#3a1400; flex-shrink:0;
  background:linear-gradient(135deg,#ffb199,#ff5f3d,#c8161a); padding:2px 7px 2px 6px; border-radius:999px;
  border:1px solid #2b1f4555; margin-left:2px;
}
.rexp-combo-vib.rexp-combo-vib-lv0{background:linear-gradient(135deg,#6b7280,#9ca3af); color:#1c1c22;}
.rvib-summary-card{
  background:linear-gradient(160deg,#2a1440,#170d33); border:1px solid #ffd98a33; border-radius:14px; padding:12px;
  text-align:center;
}
.rvib-summary-level{font-size:20px; font-weight:900; color:#ffd98a;}
.rvib-summary-bar{height:8px; border-radius:999px; background:#0000004d; border:1px solid #ffd98a33; overflow:hidden; margin:8px 0 4px;}
.rvib-summary-bar-fill{height:100%; background:linear-gradient(90deg,#ff8a3d,#ff3d5c); border-radius:999px;}
.rvib-summary-label{font-size:11px; color:#e8dcff;}
.rvib-levels-table{width:100%; border-collapse:collapse; font-size:11px; margin-top:10px;}
.rvib-levels-table th, .rvib-levels-table td{padding:6px 4px; text-align:center; border-bottom:1px solid #2b1f4514;}
.rvib-levels-table th{color:#ffd98a; font-weight:700; font-size:10px;}
.rvib-levels-table tr.rvib-row-current{background:#ffd98a22;}
.rvib-levels-table tr.rvib-row-current td:first-child{color:#ffd98a; font-weight:800;}

/* Khung viền quanh avatar phòng theo Cấp Sôi Động — càng cao cấp càng lộng
   lẫy (đồng → bạc → vàng → hồng ngọc → lam ngọc → lục bảo → tím → cầu vồng
   → huyền thoại 2 lớp). Tự động áp cho #room-vibrancy-frame-ring, không qua
   hệ thống khung shop người dùng (frames_catalog) để tránh mua/né được.
   inset -6px khớp .frame-ring gốc (avatar phòng 32px → viền rộng ~44px). */
.frame-vibrancy1{background:conic-gradient(from 0deg,#c98a54,#8a5a37,#c98a54); padding:2.5px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));}
.frame-vibrancy2{background:conic-gradient(from 0deg,#e3e9f0,#9aa5b1,#e3e9f0,#9aa5b1); padding:3px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 6s linear infinite;}
.frame-vibrancy3{background:conic-gradient(from 0deg,#ffe08a,#ffc94a,#b8860b,#ffc94a,#ffe08a); padding:3px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 5s linear infinite;}
.frame-vibrancy4{background:conic-gradient(from 0deg,#ff8a80,#d6001c,#ff8a80,#d6001c); padding:3px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 4.4s linear infinite; box-shadow:0 0 8px -1px #ff2e2e88;}
.frame-vibrancy5{background:conic-gradient(from 0deg,#4de0ff,#1a5fd6,#4de0ff,#1a5fd6); padding:3px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); animation:spin-slow 3.8s linear infinite reverse; box-shadow:0 0 8px -1px #4de0ff88;}
.frame-vibrancy6{background:conic-gradient(from 0deg,#7cffb0,#0aa15a,#7cffb0,#0aa15a); padding:3.2px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.2px),#000 calc(100% - 3.2px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.2px),#000 calc(100% - 3.2px)); animation:spin-slow 3.2s linear infinite; box-shadow:0 0 9px -1px #2fdc8a88;}
.frame-vibrancy7{background:conic-gradient(from 0deg,#d9a8ff,#7c3aed,#d9a8ff,#7c3aed); padding:3.4px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 3.4px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.4px),#000 calc(100% - 3.4px)); animation:spin-slow 2.6s linear infinite reverse; box-shadow:0 0 10px -1px #a855f788;}
.frame-vibrancy8{background:conic-gradient(from 0deg,#ff4d6d,#ffae00,#5eff8f,#4de0ff,#a855f7,#ff4d6d); padding:3.6px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.6px),#000 calc(100% - 3.6px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.6px),#000 calc(100% - 3.6px)); animation:spin-slow 2.1s linear infinite; box-shadow:0 0 12px -1px #ffffff77;}
.frame-vibrancy9{background:conic-gradient(from 0deg,#fff6d9,#ffd700,#ff8a00,#ffd700,#fff6d9); padding:4px;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px)); animation:spin-slow 1.7s linear infinite; box-shadow:0 0 6px 2px #ffd700aa, 0 0 16px -2px #fff6d9cc;}
.frame-vibrancy9::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; pointer-events:none; z-index:-1;
  background:conic-gradient(from 180deg,#ffd70055,transparent 40%,#ffd70055); animation:spin-slow 3.4s linear infinite reverse;
}

/* Khi banner sự kiện Trung Thu đang hiện, nó chiếm thêm chỗ trong luồng bình
   thường (~44px) nhưng các nút Bonus / Xem Trước / Vòng Quay / Làm mới lại
   định vị "absolute" theo top cố định nên KHÔNG tự trôi xuống theo — dẫn tới
   bị đè lên chữ banner (lỗi lệch hình). Khi có banner, đẩy các nút này xuống
   thêm đúng phần banner chiếm chỗ. */
.kx-cabinet.kx-has-banner{padding-top:60px;}
.kx-cabinet.kx-has-banner .kx-ribbon{top:52px;}
.kx-cabinet.kx-has-banner .kx-refresh-btn{top:56px;}
.kx-cabinet.kx-has-banner .kx-wheel-badge{top:176px;}
@media (max-width:400px){
  .kx-cabinet.kx-has-banner .kx-ribbon{top:64px;}
  .kx-cabinet.kx-has-banner .kx-refresh-btn{top:68px;}
  .kx-cabinet.kx-has-banner .kx-wheel-badge{top:190px;}
}

.kx-title{
  position:relative; text-align:center; font-size:30px; font-weight:900; letter-spacing:2px; margin:34px 0 4px;
  background:linear-gradient(180deg,#fff8e0 0%,#ffe9b0 30%,#ffc44d 55%,#e8a317 70%,#ffe9b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px #6b3a00; text-shadow:0 3px 0 #6b3a00, 0 8px 18px #ffcf6666;
  filter:drop-shadow(0 2px 0 #6b3a00);
}
.kx-title::after{
  content:"KHO XU"; position:absolute; inset:0; color:transparent; -webkit-text-stroke:0;
  background:linear-gradient(110deg, transparent 30%, #fff 45%, transparent 60%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  mix-blend-mode:overlay; animation:kx-title-shine 3.2s ease-in-out infinite;
}
@keyframes kx-title-shine{
  0%{background-position:150% 0;}
  60%,100%{background-position:-50% 0;}
}
.kx-progress-row{margin:0 4px 12px;}
.kx-progress-bar{
  height:10px; border-radius:999px; background:#0000004d; border:1px solid #ffd98a55; overflow:hidden;
  box-shadow:inset 0 2px 4px #0006;
}
.kx-progress-fill{
  height:100%; background:linear-gradient(90deg,#ffc44d,#ff8a3d,#ff2e9a,#7b2ff7); background-size:200% 100%;
  border-radius:999px; transition:width .3s ease; width:0%; box-shadow:0 0 10px #ff2e9a99;
  animation:kx-progress-shimmer 3s linear infinite;
}
@keyframes kx-progress-shimmer{0%{background-position:0% 0;} 100%{background-position:200% 0;}}
.kx-progress-label{font-size:11px; color:#ffe9b0; font-weight:700; margin-top:5px; text-align:center; text-shadow:0 1px 3px #000a;}

.kx-shelf-frame{
  background:linear-gradient(180deg,#3a2160,#241540); border-radius:22px; padding:11px;
  box-shadow:inset 0 0 0 2px #ffd98a99, inset 0 0 24px -6px #ffd98a55, 0 14px 26px -10px #000c;
}
.kx-shelf{
  background:linear-gradient(180deg,#5b2a8f,#341864 60%,#2a1150); border-radius:15px; padding:14px 10px;
  box-shadow:inset 0 2px 6px #ffffff22, inset 0 -6px 14px #00000055;
}
.kx-box-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.kx-box{
  aspect-ratio:1; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 25%, #ffe9b0 0%, #ffc44d 35%, #e8951e 75%, #c8760a 100%);
  border:1px solid #fff6d9aa; cursor:pointer;
  box-shadow:inset 0 -5px 0 #a5610088, inset 0 3px 4px #ffffffaa, 0 6px 12px -3px #00000088, 0 0 10px -2px #ffd98a99;
  transition:transform .15s ease, box-shadow .15s ease; padding:6px;
}

.kx-box:active{transform:scale(.95);}
.kx-box-icon{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px #0005);}
.kx-box-icon-emoji{font-size:30px; display:flex; align-items:center; justify-content:center;}
.kx-box.won{animation:kx-box-pop .7s ease;}
@keyframes kx-box-pop{
  0%{transform:scale(1); box-shadow:inset 0 -5px 0 #a5610088, inset 0 3px 4px #ffffffaa, 0 6px 12px -3px #00000088, 0 0 10px -2px #ffd98a99;}
  35%{transform:scale(1.28) rotate(-5deg); box-shadow:inset 0 -5px 0 #a5610088, inset 0 3px 4px #ffffffaa, 0 10px 22px -4px #000a, 0 0 30px 6px #ffe9b0dd;}
  60%{transform:scale(1.12) rotate(4deg);}
  100%{transform:scale(1);}
}

.kx-balance-row{
  display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:#ffe9b0;
  margin-top:12px; padding:6px 10px; border-radius:10px;
  background:#00000033; border:1px solid #ffd98a33;
}

.kx-control-bar{
  background:linear-gradient(180deg,#241540,#160b26); padding:15px 16px 20px; display:flex; justify-content:center;
  border-top:1px solid #ffd98a33;
}
.kx-draw-btn{
  position:relative; overflow:hidden;
  width:100%; max-width:260px; padding:14px 0; border-radius:999px; border:1px solid #fff6d977; cursor:pointer;
  background:linear-gradient(135deg,#ff8a3d,#ff2e9a 55%,#7b2ff7); color:#fff; font-weight:900; font-size:16px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow:0 8px 20px -6px #ff2e9aaa, 0 0 0 4px #ffffff0d;
  text-shadow:0 1px 3px #0006;
}
.kx-draw-btn::after{
  content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 20%, #ffffff66 40%, transparent 60%);
  background-size:250% 100%; animation:kx-title-shine 2.4s ease-in-out infinite;
}
.kx-draw-btn:disabled{opacity:.55; cursor:not-allowed; animation:none;}
.kx-draw-cost{font-size:12px; font-weight:700; opacity:.95;}

.kx-preview-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:60vh; overflow-y:auto; overflow-x:hidden; padding-top:4px;
}
.kx-preview-item{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:12px;
  background:linear-gradient(180deg,var(--panel-2, #241a3a),#1a1330); border:1px solid #ffd98a3d;
  box-shadow:inset 0 1px 0 #ffffff14;
}
.kx-preview-icon{font-size:28px; filter:drop-shadow(0 0 6px #ffd98a88);}
.kx-preview-label{font-size:10.5px; text-align:center; color:var(--text-dim, #b9aed8); line-height:1.3;}

/* ============================================================
   HUY CHƯƠNG (Medals) — tách riêng khỏi Thành tựu, dạng lưới huy
   hiệu vàng kim trên nền tối, mỗi ô có thanh tiến độ riêng.
============================================================ */
.md-sheet{
  background:linear-gradient(180deg,#1c1430 0%,#120c22 100%); border:1px solid #ffd98a33;
  padding:20px 16px 22px !important; max-height:82vh; overflow-y:auto; overflow-x:hidden;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.md-header{text-align:center; margin-bottom:4px;}
.md-title{
  font-size:24px; font-weight:900; letter-spacing:1px;
  background:linear-gradient(180deg,#fff8e0,#ffe9b0 40%,#ffc44d 70%,#e8a317);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #6b3a00; text-shadow:0 2px 0 #6b3a00;
}
.md-tabs{justify-content:center; gap:20px; margin:10px 0 4px; border-bottom:1px solid #ffffff14; padding-bottom:0;}
.md-tabs .tab-btn{background:none; border:none; color:var(--text-dim,#8f86ab); font-size:16px; font-weight:700; padding:6px 2px 12px; position:relative;}
.md-tabs .tab-btn.active{color:#ffd98a;}
.md-tabs .tab-btn.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:linear-gradient(90deg,#ffc44d,#ff8a3d);}
.md-summary{
  text-align:center; font-size:12.5px; font-weight:700; color:#ffe9b0; margin:12px 0 14px;
  padding:6px 14px; border-radius:999px; display:inline-block; position:relative; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#ffd98a22,transparent); border-top:1px solid #ffd98a55; border-bottom:1px solid #ffd98a55;
}
.md-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 10px;}
.md-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:10px 6px 12px; border-radius:16px;
  background:linear-gradient(180deg,#241a3c,#1a1330); border:1px solid #ffffff12;
}
.md-item.won{border-color:#ffd98a66; box-shadow:0 0 0 1px #ffd98a33, 0 8px 18px -8px #ffd98a55;}
.md-icon-wrap{
  width:78px; height:78px; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 4px 8px #0007);
}
.md-item:not(.won) .md-icon-wrap{filter:grayscale(1) opacity(.45) drop-shadow(0 4px 8px #0007);}
.md-icon-wrap img{width:100%; height:100%; object-fit:contain;}
.md-emoji{font-size:52px; line-height:1;}
.md-name{font-size:12.5px; font-weight:800; color:#fff; line-height:1.25; min-height:32px; display:flex; align-items:center; justify-content:center;}
.md-progress-label{font-size:10px; color:var(--text-dim,#8f86ab); margin-top:2px;}
.md-progress-bar{width:100%; height:6px; border-radius:999px; background:#00000055; overflow:hidden; border:1px solid #ffffff14;}
.md-progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#ffc44d,#ff8a3d,#ff2e9a); box-shadow:0 0 8px #ff2e9a77;}
.md-progress-value{font-size:11px; font-weight:700; color:#ffe9b0;}
.md-equip-btn{
  margin-top:4px; width:100%; padding:5px 0; border-radius:999px; border:1px solid #ffd98a55; cursor:pointer;
  background:#ffffff10; color:#ffe9b0; font-size:11px; font-weight:800;
}
.md-equip-btn.on{background:linear-gradient(90deg,#ffc44d,#ff8a3d); color:#3a2200; border-color:transparent;}
.md-equip-btn:disabled{opacity:.6; cursor:not-allowed;}

/* Hàng huy chương đang đeo, hiển thị trong hồ sơ (own profile + xem profile người khác) —
   bấm vào để mở popup "Có N chứng nhận" (xem #modal-certifications + .cert-row bên dưới). */
.medal-row{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; cursor:pointer;}
.medal-chip{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #3a2160, #1c0f2e); border:1.5px solid #ffd98a99;
  box-shadow:0 2px 6px -2px #0008, 0 0 8px -2px #ffd98a66; font-size:15px; overflow:hidden;
}
.medal-chip img{width:100%; height:100%; object-fit:contain;}

/* Popup "Có N chứng nhận" — danh sách dạng hàng (icon tròn + tên), khác kiểu lưới của
   Huy Chương thường (.md-grid) — xem #modal-certifications trong index.php. */
.cert-row{ display:flex; align-items:center; gap:14px; padding:12px 20px; }
.cert-row-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:radial-gradient(circle at 35% 30%, #3a2160, #1c0f2e); border:1.5px solid #ffd98a99;
}
.cert-row-icon img{width:100%; height:100%; object-fit:contain;}
.cert-row-name{ font-size:15.5px; font-weight:600; color:var(--text); }


/* ===================== ROOM UI UPGRADE ===================== */

/* Row 1: level/EXP · điểm sao · thẻ phòng */
.room-status-row{
  display:flex; align-items:center; gap:8px; padding:8px 14px 0; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.room-status-row::-webkit-scrollbar{display:none;}
.rstat-chip{
  display:flex; align-items:center; gap:6px; flex-shrink:0; border:none; cursor:pointer;
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap;
  color:#fff; box-shadow:0 3px 10px -4px #00000066;
}
.rstat-exp{background:linear-gradient(135deg,#2fd0e0,#1e8fb0); border:1px solid #7af0ff55;}
.rstat-exp-mult{background:#ffffff2e; padding:1px 6px; border-radius:6px; font-size:10.5px;}
.rstat-star{background:linear-gradient(135deg,#c04fff,#7b2fe0); border:1px solid #e2a8ff55;}
.rstat-star-ic{filter:drop-shadow(0 0 3px #ffd76a);}
.rstat-card{
  flex:1; min-width:150px; justify-content:space-between; background:var(--panel-strong,#241a3acc);
  border:1px solid var(--line,#ffffff1c); color:var(--text-dim,#b9aed8); font-weight:700;
}
.rstat-card-arrow{opacity:.7;}

/* Row 2: dải vật phẩm nhanh */
.quick-items-row{
  display:flex; align-items:center; gap:10px; padding:10px 14px 2px;
}
.qitem{
  display:flex; flex-direction:column; align-items:center; gap:2px; border:none; cursor:pointer;
  background:linear-gradient(160deg,#2b2050,#1a1330); border:1px solid #ffffff22; border-radius:14px;
  padding:8px 12px; min-width:56px; box-shadow:0 3px 10px -4px #00000066;
}
.qitem-ic{font-size:20px; line-height:1;}
.qitem-count{font-size:10.5px; font-weight:800; color:var(--text-dim,#b9aed8);}
.qitem-claim{background:linear-gradient(160deg,#3d2a08,#ffc94a22); border-color:var(--gold,#ffc94a);}
.qitem-claim .qitem-count{color:var(--gold,#ffc94a);}
.qitem:active{transform:scale(.94);}

/* Ghế: số thứ tự + biểu tượng tai nghe khi có mic */
.seat{position:relative;}
.seat-index-tag{
  position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  font-size:7.5px; font-weight:800; color:var(--text-dim,#9d8fc4); background:#00000066;
  padding:1px 5px; border-radius:999px; white-space:nowrap; pointer-events:none;
}
.seat-headset{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  font-size:9px; filter:drop-shadow(0 0 2px #000);
}

/* Banner hệ thống nhiều màu, xếp chồng gọn */
.sys-banner-stack{display:flex; flex-direction:column; gap:6px; padding:6px 14px 0;}
.sys-banner{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px;
  font-size:12.5px; font-weight:600; color:#fff; animation:sysBannerIn .25s ease;
}
@keyframes sysBannerIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.sys-banner .sb-ic{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#ffffff26; font-size:13px;
}
.sys-banner .sb-text{flex:1; line-height:1.35;}
.sys-banner.sys-info{background:linear-gradient(135deg,#2f7bd6,#1e4fa0);}
.sys-banner.sys-warn{background:linear-gradient(135deg,#ff4f8b,#c22a63);}
.sys-banner.sys-event{background:linear-gradient(135deg,#a94fff,#6b1fc9);}
.sys-banner.sys-success{background:linear-gradient(135deg,#28c78f,#189a6b);}

/* Thẻ flash-sale nổi góc phải */
.flash-sale-floating{
  position:absolute; right:10px; bottom:96px; width:118px; z-index:20;
  background:linear-gradient(160deg,#ff8a3d,#ff3d5c); border-radius:14px; padding:8px 8px 10px;
  text-align:center; color:#fff; box-shadow:0 8px 20px -6px #00000088; border:1px solid #2b1f4533;
}
.flash-sale-floating.hidden{display:none;}
.fsf-ribbon{font-size:9.5px; font-weight:800; opacity:.9; margin-bottom:2px;}
.fsf-old-price{font-size:11px; text-decoration:line-through; opacity:.75;}
.fsf-new-label{font-size:9px; opacity:.85; margin-top:2px;}
.fsf-new-price{font-size:16px; font-weight:900; color:#fff400; text-shadow:0 1px 4px #00000066;}
.fsf-timer{
  margin-top:4px; background:#00000040; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:800;
}

@media (max-width:360px){
  .rstat-card{min-width:110px;}
  .flash-sale-floating{width:100px;}
}

.qitem-top{background:linear-gradient(160deg,#3d1a08,#ffb14a22); border-color:#ffb14a;}
.qitem-top .qitem-count{color:#ffb14a; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ============================================================
   ĐỀ CỬ (Nominee rail) — hàng avatar tròn ngang trên trang chủ:
   mục đầu tiên luôn là "Phòng của tôi", các mục sau là phòng
   đang được ghim/nổi bật (is_featured = 1, dữ liệu thật từ
   api/rooms_list.php) — có ruy băng "Đề cử" + viền phát sáng.
============================================================ */
.nominee-rail-wrap{ padding:14px 18px 2px; }
.nominee-rail-head{ font-size:13px; font-weight:800; color:var(--text-dim); margin-bottom:10px; }
.nominee-rail{
  display:flex; gap:16px; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; padding-bottom:4px;
  scrollbar-width:none;
}
.nominee-rail::-webkit-scrollbar{ display:none; }
.nominee-item{
  flex:0 0 auto; width:64px; display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; cursor:pointer;
}
.nominee-av-wrap{
  position:relative; width:64px; height:64px; border-radius:50%; overflow:visible;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:linear-gradient(135deg,#241238,#150c28);
}
.nominee-item.is-me .nominee-av-wrap{
  background:linear-gradient(135deg,#ff6a3d,#ff2e9a);
}
.nominee-av-ring{
  position:absolute; inset:-3px; border-radius:50%; padding:3px;
  background:conic-gradient(from 0deg, #ff2e9a, #ffc94a, #35f2ff, #ff2e9a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:nominee-ring-spin 3.5s linear infinite;
}
@keyframes nominee-ring-spin{ to{ transform:rotate(360deg); } }
.nominee-av-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
/* Khung trang trí avatar phòng (room-cover-frame) vốn bo góc vuông cho thẻ phòng hình
   chữ nhật ở lưới chính — ở đây avatar tròn nhỏ trong hàng Đề cử nên bo tròn lại 50%. */
.nominee-av-wrap .room-cover-frame{ border-radius:50%; z-index:2; }
.nominee-av-wrap .room-cover-frame-img{ border-radius:50%; }
.nominee-ribbon{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--grad-hot); color:#fff; font-size:9px; font-weight:800; padding:1.5px 7px; border-radius:999px;
  box-shadow:0 2px 6px -2px #ff2e9a99; z-index:2;
}
.nominee-viewers{
  position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:#000000b0; color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:999px;
  display:flex; align-items:center; gap:2px;
}
.nominee-label{
  font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; width:100%;
}
.nominee-rail-empty{ font-size:12px; color:var(--text-faint); padding:8px 0 4px; }

/* ---------- Badge + hiệu ứng đặc biệt cho THẺ PHÒNG đang được ghim (is_featured) ---------- */
.room-card.is-pinned{
  border:1.5px solid transparent;
  background-image:linear-gradient(var(--surface),var(--surface)), linear-gradient(135deg,#ffc94a,#ff2e9a 45%,#35f2ff);
  background-origin:border-box; background-clip:padding-box, border-box;
  box-shadow:0 0 0 1px #ffffff08, 0 10px 26px -14px #ff2e9a88;
  animation:pinned-card-glow 2.6s ease-in-out infinite;
}
@keyframes pinned-card-glow{
  0%,100%{ box-shadow:0 0 0 1px #ffffff08, 0 10px 26px -14px #ff2e9a88; }
  50%{ box-shadow:0 0 0 1px #ffffff10, 0 10px 34px -10px #ffc94aaa; }
}
.room-card-pin-flag{
  position:absolute; top:0; left:10px; z-index:3; display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 3px 6px #00000066);
}
.room-card-pin-flag .rcpf-icon{
  width:26px; height:26px; border-radius:50% 50% 50% 4px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ffc94a,#ff8a3d); font-size:13px; transform:rotate(-45deg);
}
.room-card-pin-flag .rcpf-icon span{ transform:rotate(45deg); }

/* ============================================================
   PHÒNG CỦA TÔI (My Room) — trang toàn màn hình, style thẻ ngọc
   lam kiểu ảnh mẫu: Level/EXP phòng + danh sách phòng được quản lý.
============================================================ */
#screen-my-room{ flex:1; display:flex; flex-direction:column; min-height:0; }
.mr-topbar{
  display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 12px;
  flex-shrink:0;
}
.mr-topbar-title{ flex:1; text-align:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px; margin-right:34px; }
.mr-topbar-deco{ font-size:18px; opacity:.8; width:34px; text-align:right; }
.mr-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0 16px calc(24px + env(safe-area-inset-bottom)); }

.mr-hero{
  position:relative; overflow:hidden; border-radius:22px; padding:20px; margin-bottom:16px;
  background:linear-gradient(135deg,#6fe6c8,#8fe3d8 55%,#eafff9);
  box-shadow:0 16px 34px -20px #2dd4bf99;
}
.mr-hero::after{
  content:''; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, #ffffff55, transparent 70%);
}
.mr-hero-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.mr-hero-cover{
  width:56px; height:56px; border-radius:14px; object-fit:cover; flex-shrink:0; background:#ffffff55;
  box-shadow:0 4px 12px -4px #00000033;
}
.mr-hero-info{ flex:1; min-width:0; }
.mr-hero-name{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:16px; color:#132; }
.mr-hero-id{ font-size:12px; color:#134e4a99; margin-top:2px; }
.mr-hero-tier{
  flex-shrink:0; width:52px; height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:22px; filter:drop-shadow(0 3px 6px #00000033);
}
.mr-hero-tier .mrht-num{ font-size:10px; font-weight:800; color:#134e4a; margin-top:-4px; }
.mr-hero-bars{ position:relative; z-index:1; margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.mr-hero-bar-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:#134e4acc; font-weight:700; margin-bottom:5px; }
.mr-hero-bar-row .mrhb-big{ font-size:15px; color:#0f3a34; }
.mr-hero-bar-track{ height:8px; border-radius:99px; background:#ffffff70; overflow:hidden; }
.mr-hero-bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#0f9b8e,#0f3a34); }
.mr-hero-legend{ display:flex; gap:16px; font-size:11px; color:#134e4acc; margin-top:2px; }
.mr-hero-legend span{ display:inline-flex; align-items:center; gap:5px; }
.mr-hero-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.mr-hero-legend i.free{ background:#22c55e; }
.mr-hero-legend i.gold{ background:#f59e0b; }

.mr-quick-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:16px 8px; margin-bottom:18px;
}
.mr-quick-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.mr-quick-ico{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--panel-strong);
}
.mr-quick-label{ font-size:11px; font-weight:700; color:var(--text-dim); }

.mr-section-title{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px; margin-bottom:10px; }
.mr-tabs{ display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none; }

/* ---------- Khung phòng: lưới chọn khung trong bảng quản trị ---------- */
.room-frame-picker-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:4px;}
.room-frame-pick{
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; padding:4px 0;
}
.room-frame-pick .rfp-preview{
  position:relative; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); font-size:20px;
}
.room-frame-pick.active .rfp-preview{box-shadow:0 0 0 2px var(--gold), 0 0 12px -2px var(--gold-dim);}
.room-frame-pick .rfp-name{font-size:10.5px; color:var(--text-dim); text-align:center; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.room-frame-pick.active .rfp-name{color:var(--gold); font-weight:700;}
.mr-tabs::-webkit-scrollbar{ display:none; }
.mr-tab-btn{
  flex-shrink:0; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--text-dim);
  background:var(--panel); border:1px solid var(--line); white-space:nowrap;
}
.mr-tab-btn.active{ color:#fff; background:var(--grad-hot); border-color:transparent; }

.mr-room-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:var(--panel);
  border:1px solid var(--line); margin-bottom:8px; cursor:pointer;
}
.mr-room-row-cover{ width:44px; height:44px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--panel-strong); display:flex; align-items:center; justify-content:center; font-size:20px; }
.mr-room-row-info{ flex:1; min-width:0; }
.mr-room-row-name{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-room-row-sub{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.mr-room-row-lv{ flex-shrink:0; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; color:#fff; }

.mr-empty{ text-align:center; padding:36px 12px 20px; color:var(--text-faint); }
.mr-empty-icon{ font-size:44px; margin-bottom:10px; opacity:.8; }
.mr-empty-text{ font-size:13px; line-height:1.6; }

.mr-cta{
  position:sticky; bottom:0; margin-top:18px; padding:12px 0 4px;
}
.mr-cta button{
  box-sizing:border-box; width:100%; padding:14px; border-radius:16px; background:var(--grad-hot); color:#fff; font-weight:800; font-size:15px;
  box-shadow:0 10px 24px -12px #ff2e9a99;
}

/* ============================================================
   KHO BÁU MA THUẬT — sự kiện Vòng Quay May Mắn nâng cấp
============================================================ */
.kbmt-sheet{
  background:
    radial-gradient(ellipse at 50% 0%, #4b2a8a55, transparent 60%),
    linear-gradient(180deg, #1c1140 0%, #2a1650 45%, #170c30 100%);
  border:1px solid #ffffff22;
  padding:14px 14px 18px;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.kbmt-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.kbmt-icon-btn{
  width:34px; height:34px; border-radius:50%; background:#ffffff14; border:1px solid #ffffff26;
  color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.kbmt-timer{
  flex:1; margin:0 10px; text-align:center; background:var(--grad-royal); border-radius:14px;
  padding:7px 10px; font-weight:800; font-size:13px; color:#fff; box-shadow:0 6px 16px -8px #7c3aed88;
}
.kbmt-heading{
  text-align:center; font-weight:900; font-size:20px; color:#fff; margin:6px 0 2px;
  text-shadow:0 2px 8px #ff2e9a55;
}
.kbmt-ticker{
  text-align:center; font-size:11.5px; color:var(--gold); margin-bottom:8px; opacity:.9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kbmt-tabs{margin-bottom:10px;}
.kbmt-ticket-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px;}
.kbmt-ticket-chip{
  background:var(--panel-strong); border:1px solid var(--line); border-radius:14px;
  padding:6px 16px; font-weight:800; font-size:14px; color:#fff;
}
.kbmt-ticket-add{
  width:30px; height:30px; border-radius:50%; background:var(--grad-hot); color:#fff;
  font-weight:900; font-size:17px; box-shadow:0 6px 14px -6px #ff2e9a88;
}
.kbmt-lumi-row{
  display:flex; align-items:center; gap:8px; background:#ffffff0d; border:1px solid #ffffff1f;
  border-radius:16px; padding:8px 10px; margin-bottom:10px;
}
.kbmt-lumi-avatar{font-size:26px;}
.kbmt-lumi-bubble{
  font-size:11px; font-weight:800; color:var(--magenta); background:#fff;
  border-radius:10px; padding:2px 8px; flex-shrink:0;
}
.kbmt-progress-wrap{flex:1; display:flex; align-items:center; gap:8px;}
.kbmt-progress-num{font-weight:900; color:var(--gold); font-size:13px; min-width:26px;}
.kbmt-progress-bar{flex:1; height:12px; border-radius:8px; background:#00000055; overflow:hidden; border:1px solid #ffffff22;}
.kbmt-progress-fill{height:100%; width:0%; background:linear-gradient(90deg,#ffb86b,#ffe9a8); transition:width .4s;}

.kbmt-wheel-outer{position:relative; width:250px; max-width:100%; height:auto; aspect-ratio:1/1; margin:8px auto 10px;}
.kbmt-wheel{
  width:100%; height:100%; border-radius:50%; position:relative;
  border:6px solid #ffd76b; box-shadow:0 0 0 4px #7c3aed, 0 14px 30px -10px #000a;
  transition:transform 3.5s cubic-bezier(.17,.67,.16,1);
}
.kbmt-pointer{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:26px; color:#ff2e9a;
  z-index:3; text-shadow:0 2px 4px #0008;
}
.kbmt-wheel-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe9a8, #ffb400 70%);
  border:4px solid #fff; display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 4px 10px #0006; z-index:2;
}
.kbmt-slice-label{
  position:absolute; top:50%; left:50%; font-size:12.5px; font-weight:900; color:#5a2e00;
  width:60px; text-align:center; text-shadow:0 1px 0 #fff8;
}

.kbmt-total-box{
  background:#ffffff10; border:1px solid var(--line); border-radius:16px; padding:10px 12px; text-align:center; margin-bottom:8px;
}
.kbmt-total-label{font-size:12.5px; color:var(--text-dim); font-weight:700; margin-bottom:6px;}
.kbmt-total-digits{
  display:inline-flex; gap:4px; font-weight:900; font-size:20px; color:var(--gold);
  letter-spacing:2px;
}

.kbmt-freecoin-toggle{
  display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; color:var(--gold);
  font-weight:700; margin-bottom:10px; opacity:.85;
}

.kbmt-spin-btn{
  width:100%; padding:14px; border-radius:18px; background:var(--grad-hot); color:#fff;
  font-weight:900; font-size:16px; display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow:0 10px 24px -12px #ff2e9a99;
}
.kbmt-spin-sub{font-size:12px; font-weight:700; opacity:.9;}
.kbmt-spin-btn:disabled{opacity:.55;}
.kbmt-spin-hint{text-align:center; font-size:11.5px; color:var(--text-dim); margin:8px 0 12px;}

.kbmt-topup-box{
  background:#ffffff0d; border:1px solid var(--line); border-radius:16px; padding:12px; text-align:center;
}
.kbmt-topup-title{font-size:13px; font-weight:800; color:#fff; margin-bottom:8px;}
.kbmt-topup-bar{height:10px; border-radius:8px; background:#00000055; overflow:hidden; border:1px solid #ffffff22; margin-bottom:6px;}
.kbmt-topup-fill{height:100%; width:0%; background:linear-gradient(90deg,#ffc94a,#fff3c2); transition:width .4s;}
.kbmt-topup-label{font-size:11.5px; color:var(--text-dim); margin-bottom:8px;}
.kbmt-topup-btn{
  width:100%; padding:11px; border-radius:14px; background:var(--grad-hot); color:#fff; font-weight:800; font-size:14px;
}

.kbmt-result{
  margin-top:12px; padding:10px 14px; border-radius:12px; background:var(--panel-strong);
  border:1px solid var(--gold); color:var(--gold); text-align:center; font-size:14px; font-weight:800;
}

/* ============================================================
   "THÊM VÀO MÀN HÌNH CHÍNH" — banner + hướng dẫn iOS
   Xem initAddToHomeScreen() trong app.js
============================================================ */
.a2hs-banner{
  position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px));
  z-index:9500; display:flex; align-items:center; gap:10px;
  background:linear-gradient(120deg,#1e1436,#2a1a4a); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 10px 10px 12px;
  box-shadow:0 16px 40px -16px #000000cc, inset 0 1px 0 #ffffff14;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  animation:a2hsSlideUp .35s ease;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
@keyframes a2hsSlideUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.a2hs-banner-icon{ width:40px; height:40px; border-radius:12px; flex-shrink:0; box-shadow:0 4px 14px -6px #000000aa; }
.a2hs-banner-text{ flex:1; min-width:0; }
.a2hs-banner-title{ font-size:13.5px; font-weight:800; color:var(--text); }
.a2hs-banner-sub{ font-size:11.5px; color:var(--text-dim); margin-top:1px; white-space:normal; }
.a2hs-banner-btn{
  flex-shrink:0; padding:9px 16px; border-radius:999px; background:var(--grad-hot);
  color:#fff; font-weight:800; font-size:13px; box-shadow:0 8px 18px -8px #ff2e9a88;
}
.a2hs-banner-close{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#2b1f4514;
  color:var(--text-dim); font-size:13px; display:flex; align-items:center; justify-content:center;
}

.a2hs-ios-sheet{
  position:fixed; inset:0; z-index:9600; background:#000000a0;
  display:flex; align-items:flex-end;
}
.a2hs-ios-sheet-inner{
  position:relative; width:100%; background:linear-gradient(180deg,#201136,#150c28);
  border-radius:20px 20px 0 0; padding:28px 22px calc(22px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line); box-shadow:0 -20px 60px -20px #000000cc;
  animation:a2hsSlideUp .3s ease;
  --text:#f4f0ff; --text-dim:#cfc3ea; --text-faint:#a698c9; color:var(--text);
}
.a2hs-ios-sheet-title{ font-size:16px; font-weight:800; color:var(--text); margin-bottom:14px; }
.a2hs-ios-sheet-step{ font-size:13.5px; color:var(--text-dim); line-height:1.6; margin-bottom:8px; }
.a2hs-ios-sheet-step b{ color:var(--text); }
.a2hs-ios-icon{ display:inline-block; transform:scaleY(1.4); color:var(--cyan); }
.a2hs-ios-sheet .a2hs-banner-close{ position:absolute; top:14px; right:14px; }

@media (min-width:520px){
  .a2hs-banner{ left:50%; right:auto; width:420px; transform:translateX(-50%); }
  .a2hs-ios-sheet{ align-items:center; }
  .a2hs-ios-sheet-inner{ width:420px; border-radius:20px; }
}

/* ============================================================
   TỐI ƯU RIÊNG CHO TỪNG NỀN TẢNG: iOS / Android / Web PC
   ============================================================ */

/* --- PC (chuột thật, có hover) ---
   Các hiệu ứng :hover chỉ nên chạy trên thiết bị có con trỏ chuột thật.
   Nếu để chạy cả trên cảm ứng, sau khi CHẠM vào nút trên iOS/Android nó
   sẽ bị "dính" trạng thái hover (sáng lên / đổi màu) cho tới khi chạm
   chỗ khác — trông như app bị lỗi, đứng hình. Gộp lại 1 chỗ cho dễ quản lý. */
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{ box-shadow:0 4px 16px -4px #ff2e9a55; }
  .contrib-row:hover{ border-color:var(--gold); }
  .claw-item:hover{ transform:translateY(-2px); }
  .btn-ghost-pill:hover{ color:#fff; border-color:var(--magenta); }
  .kx-box:hover{ transform:translateY(-2px); }
  .sv-comment-row span[style*="cursor"]:hover{ text-decoration:underline; }

  /* Trên PC nhấn nút không có phản hồi rung/haptic như điện thoại,
     nên thêm chuyển động nhẹ khi bấm để có cảm giác phản hồi. */
  button:active, .btn-primary:active, .btn-mini:active, .chip:active, [onclick]:active{
    transform:scale(.97); transition:transform .1s;
  }

  /* Cuộn bằng chuột/trackpad vẫn cần thấy được thanh cuộn (khác với cảm ứng
     vuốt tay không cần thanh cuộn) — hiện thanh cuộn mảnh, không chiếm layout,
     thay vì để trống hoàn toàn như trên di động. */
  body{ scrollbar-width:thin; scrollbar-color:#17112630 transparent; }
  body::-webkit-scrollbar{ width:8px; height:8px; }
  body::-webkit-scrollbar-thumb{ background:#2b1f452e; border-radius:8px; }
  body::-webkit-scrollbar-thumb:hover{ background:#2b1f454a; }
  body::-webkit-scrollbar-track{ background:transparent; }
}

/* Viền focus rõ ràng khi điều hướng bằng bàn phím trên PC (Tab/Shift+Tab),
   nhưng KHÔNG hiện khi bấm bằng chuột hoặc chạm tay — đúng chuẩn accessibility
   và không phá layout hiện có trên di động. */
:focus-visible{
  outline:2px solid var(--cyan, #22d3ee);
  outline-offset:2px;
  border-radius:4px;
}
.name-input:focus-visible, .chat-input:focus-visible, .announce-input:focus-visible{
  outline:2px solid var(--cyan, #22d3ee); outline-offset:1px;
}

/* --- Web PC: màn hình rộng ---
   #app đang là khung 520px căn giữa (giống khung điện thoại). Trên màn hình
   rộng, thêm khung/viền nhẹ + đổ bóng để rõ ràng đây là "khung app" chứ
   không phải lỗi bố cục/website bị hẹp, nhìn có chủ đích hơn thay vì trơ trọi. */
@media (min-width:640px) and (hover:hover) and (pointer:fine){
  #app{
    border-left:1px solid #2b1f4514; border-right:1px solid #2b1f4514;
    box-shadow:0 0 60px -20px #000000a0;
  }
}

/* --- Web PC: các trang "app-page" (Tin nhắn / Trang cá nhân / Quảng trường / BXH) ---
   .modal-overlay.app-page .modal-sheet đang set max-width:100% nên trên PC nó
   kéo giãn tràn hết chiều rộng trình duyệt, không đồng bộ với khung 520px của
   #app ở trang chủ. Giới hạn lại đúng 520px + canh giữa, giống hệt #app, để
   trải nghiệm nhất quán giữa các trang trên PC. */
@media (min-width:560px){
  .modal-overlay.app-page{ justify-content:center; }
  .modal-overlay.app-page .modal-sheet{
    max-width:520px; width:520px;
  }
}
@media (min-width:640px) and (hover:hover) and (pointer:fine){
  .modal-overlay.app-page .modal-sheet{
    border-left:1px solid #2b1f4514; border-right:1px solid #2b1f4514;
    box-shadow:0 0 60px -20px #000000a0;
  }
}

/* --- Rê chuột để cuộn dọc trang chủ (PC) --- */
@media (hover:hover) and (pointer:fine){
  #screen-lobby{ cursor:grab; }
  #screen-lobby.mouse-drag-scrolling{
    cursor:grabbing;
    scroll-behavior:auto !important;
    user-select:none; -webkit-user-select:none;
  }
}
   Input/select mặc định trên iOS có bo góc lạ + nền xám riêng của hệ thống,
   phá style tự thiết kế. Chuẩn hoá lại toàn bộ input/select/textarea. */
input, textarea{
  -webkit-appearance:none; appearance:none;
  border-radius:inherit;
}
select{
  -webkit-appearance:none; appearance:none;
  border-radius:inherit;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
}
/* Nút bấm giữ lâu trên iOS hay hiện menu callout (copy/lookup...) làm gián
   đoạn thao tác trong game/nút bấm nhanh — tắt đi cho các phần tử điều khiển. */
button, .btn-primary, .btn-mini, .chip, [onclick], .icon-btn{
  -webkit-touch-callout:none;
}

/* ============================================================
   💍 CẶP ĐÔI (CP) & 🛡️ BẢO HỘ PHÒNG — CSS chung
============================================================ */

/* ---- Khung avatar riêng của người đang Bảo Hộ Phòng (fr-guardian) ---- */
.frame-ring.fr-guardian{
  position:absolute; inset:-4px; border-radius:50%;
  border:3px solid transparent;
  background: linear-gradient(135deg,#ffd700,#ff3b3b,#ffd700) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rg-frame-spin 3s linear infinite;
}
@keyframes rg-frame-spin{ 0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(20deg);} }

/* ---- Khung chat riêng (cf-guardian) ---- */
.chat-msg.cf-frame.cf-guardian{
  background:linear-gradient(90deg,#ffd70022,#ff3b3b22);
  border:1px solid #ffd70066; border-radius:10px; padding:4px 8px;
}
.rg-chat-badge{ margin-right:2px; }
.rg-holder-msg .cn{ color:#ffd700; font-weight:800; }

/* ---- Nút mở modal Bảo Hộ Phòng ---- */
#btn-room-guardian.rg-active{
  animation: rg-btn-pulse 2s ease-in-out infinite;
}
@keyframes rg-btn-pulse{ 0%,100%{ filter:drop-shadow(0 0 0 #ffd70000);} 50%{ filter:drop-shadow(0 0 6px #ffd700cc);} }

/* ---- Ghế bảo hộ (seat_index=99) cạnh ghế host ---- */
.seat.rg-seat .seat-avatar{ background:linear-gradient(135deg,#2a1a0f,#1a1008); }
.seat.rg-holder .seat-name{ color:#ffd700; font-weight:800; }
.rg-seat-badge{
  position:absolute; bottom:-2px; right:-2px;
  background:#1a1008; border:1px solid #ffd700; border-radius:50%;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:2px; box-sizing:border-box;
}

/* Ảnh huy hiệu 🛡️ Bảo Hộ Phòng — thay cho emoji ở nhiều nơi */
.rg-icon-img{ width:22px; height:22px; object-fit:contain; vertical-align:middle; }
.rg-title-img{ width:26px; height:26px; object-fit:contain; vertical-align:middle; margin-right:2px; }
.rg-badge-icon{ width:100%; height:100%; object-fit:contain; display:block; }
.seat-avatar .rg-badge-icon{ width:60%; height:60%; margin:auto; }
.rg-chat-badge{ display:inline-flex; align-items:center; width:15px; height:15px; margin-right:2px; vertical-align:middle; }
.rg-current-name{ display:flex; align-items:center; gap:6px; }
.rg-current-name .rg-badge-icon{ width:18px; height:18px; flex-shrink:0; }

/* ---- Modal Bảo Hộ Phòng ---- */
.rg-sheet{ background:linear-gradient(180deg,#241812,#140d09); border:1px solid #ffd70055; }
.rg-header{ text-align:center; padding:8px 30px 12px; }
.rg-title{ font-size:19px; font-weight:900; color:#ffd700; }
.rg-sub{ font-size:12px; color:#e8c98c; margin-top:6px; line-height:1.5; }
.rg-current{ padding:0 16px 12px; }
.rg-current-card{
  display:flex; align-items:center; gap:10px; background:#00000033;
  border:1px solid #ffd70044; border-radius:12px; padding:10px 12px;
}
.rg-current-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:22px; background:var(--panel-strong); flex-shrink:0; }
.rg-current-avatar .av-photo{ width:100%; height:100%; object-fit:cover; }
.rg-current-avatar .av-letter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.rg-current-name{ font-size:14px; font-weight:800; color:#ffd700; }
.rg-current-meta{ font-size:11.5px; color:#e8c98ccc; margin-top:2px; }
.rg-current-empty{ text-align:center; font-size:12.5px; color:#e8c98ccc; padding:14px; }
.rg-buy-box{ padding:0 16px 18px; display:flex; flex-direction:column; gap:8px; }
.rg-buy-label{ font-size:12px; color:#e8c98cdd; text-align:center; }
.rg-price-input{
  background:#00000033; border:1px solid #ffd70044; border-radius:10px;
  padding:9px 12px; color:#fff2df; font-size:14px; text-align:center;
}

/* ---- Nhẫn cưới hiển thị cạnh tên/hồ sơ Cặp đôi ---- */
.cp-ring-badge{ font-size:13px; margin-left:2px; }

/* ============================================================
   💍 CẶP ĐÔI (CP) — modal
============================================================ */
.cp-sheet{ background:linear-gradient(180deg,#2a1420,#180a10); border:1px solid #ff6b9555; }
.cp-header{ text-align:center; padding:8px 30px 12px; }
.cp-title{ font-size:19px; font-weight:900; color:#ff8fb1; }

.cp-pane{ padding:0 16px 14px; }
.cp-search-label{ font-size:12px; color:#ffb3c9cc; margin-bottom:6px; font-weight:700; }
.cp-search-input{
  width:100%; background:#00000033; border:1px solid #ff6b9544; border-radius:10px;
  padding:9px 12px; color:#fff2df; font-size:13.5px; box-sizing:border-box;
}
.cp-search-results{ display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:220px; overflow-y:auto; }
.cp-search-row, .cp-proposal-row{
  display:flex; align-items:center; gap:8px; background:#00000033;
  border:1px solid #ff6b9533; border-radius:10px; padding:6px 10px;
}
.cp-search-avatar, .cp-proposal-avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--panel-strong); }
.cp-search-avatar .av-photo, .cp-proposal-avatar .av-photo{ width:100%; height:100%; object-fit:cover; }
.cp-search-avatar .av-letter, .cp-proposal-avatar .av-letter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.cp-search-name, .cp-proposal-name{ flex:1; font-size:12.5px; color:#fff2df; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-search-uid{ color:#ffb3c9aa; font-size:11px; }
.cp-search-empty{ font-size:12px; color:#ffb3c9aa; text-align:center; padding:8px; }
.cp-propose-cost{ font-size:11.5px; color:#ffb3c9aa; margin-top:8px; text-align:center; }

.cp-mini-btn{
  background:linear-gradient(90deg,#ff6b95,#ff8fb1); border:none; color:#2a1420;
  font-weight:800; font-size:11.5px; padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.cp-mini-btn:disabled{ opacity:.5; cursor:default; }
.cp-mini-btn.cp-decline{ background:#00000044; color:#ffb3c9; border:1px solid #ff6b9555; }

.cp-partner-card{ display:flex; align-items:center; gap:12px; padding:0 16px 10px; }
.cp-partner-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid #ff6b95; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--panel-strong); }
.cp-partner-avatar .av-photo{ width:100%; height:100%; object-fit:cover; }
.cp-partner-avatar .av-letter{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.cp-partner-name{ font-size:16px; font-weight:900; color:#ffd6e3; }
.cp-partner-meta{ font-size:11.5px; color:#ffb3c9cc; margin-top:2px; }

.cp-level-box{ padding:0 16px 14px; }
.cp-level-row{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:#ffd6e3; margin-bottom:4px; }
.cp-level-icon{ font-size:18px; }
.cp-level-bar{ height:8px; border-radius:6px; background:#00000044; overflow:hidden; }
.cp-level-bar span{ display:block; height:100%; border-radius:6px; transition:width .3s; }
.cp-level-sub{ font-size:11px; color:#ffb3c9aa; margin-top:4px; }

.cp-action-row{ display:flex; gap:8px; padding:0 16px 14px; }
.cp-action-btn{
  flex:1; background:#00000033; border:1px solid #ff6b9544; color:#ffd6e3;
  border-radius:10px; padding:9px 4px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.cp-action-btn:disabled{ opacity:.5; cursor:default; }

.cp-diary-box{ padding:0 16px 10px; }
.cp-diary-title{ font-size:12.5px; font-weight:800; color:#ffb3c9; margin-bottom:6px; }
.cp-diary-list{ display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; margin-bottom:8px; }
.cp-diary-entry{ background:#00000033; border:1px solid #ff6b9533; border-radius:10px; padding:8px 10px; }
.cp-diary-author{ font-size:11px; color:#ff8fb1; font-weight:700; }
.cp-diary-time{ color:#ffb3c9aa; font-weight:400; margin-left:4px; }
.cp-diary-content{ font-size:12.5px; color:#fff2df; margin-top:2px; }
.cp-diary-empty{ font-size:12px; color:#ffb3c9aa; text-align:center; padding:10px; }
.cp-diary-input-row{ display:flex; gap:6px; }
.cp-diary-input{
  flex:1; background:#00000033; border:1px solid #ff6b9544; border-radius:10px;
  padding:8px 10px; color:#fff2df; font-size:12.5px;
}
.cp-diary-send{
  background:linear-gradient(90deg,#ff6b95,#ff8fb1); border:none; color:#2a1420;
  font-weight:800; font-size:12px; padding:0 14px; border-radius:8px; cursor:pointer;
}

.cp-breakup-link{
  display:block; width:100%; background:none; border:none; color:#ff6b6bcc;
  font-size:11.5px; text-align:center; padding:10px 16px 16px; cursor:pointer;
}

.cp-ring-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0 16px 18px; }
.cp-ring-cell{
  background:#00000033; border:1px solid #ff6b9544; border-radius:12px; padding:12px 8px; text-align:center;
}
.cp-ring-cell.equipped{ border-color:#ffd700; background:#ffd70011; }
.cp-ring-icon{ font-size:28px; }
.cp-ring-name{ font-size:11.5px; color:#ffd6e3; margin-top:4px; font-weight:700; }
.cp-ring-price{ font-size:10.5px; color:#ffb3c9aa; margin:4px 0 8px; }

/* ============================================================
   🎨 Phòng Tự Tiến Hóa — hiệu ứng mở khoá theo cấp độ (xem
   applyRoomEvolutionVisual() trong app.js, effect_key cấu hình ở Admin)
============================================================ */
#room-hero-bg.room-evo-sparkle{ position:relative; }
#room-hero-bg.room-evo-sparkle::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 60%, #ffe89a, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, #ffe89a, transparent);
  background-size: 180px 180px; animation: room-sparkle-drift 6s linear infinite; opacity:.85;
}
@keyframes room-sparkle-drift{ 0%{ background-position:0 0; } 100%{ background-position:180px 180px; } }
/* Không tô nền đen nữa: để nền phòng (.room-bg-layer) lộ xuyên qua khu vực ghế, chỉ giữ lại các ngôi sao lấp lánh. */
#room-hero-bg.room-evo-starfield{ position:relative; }
#room-hero-bg.room-evo-starfield::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50% 50%, #cdd6ff, transparent),
    radial-gradient(1.5px 1.5px at 80% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 75%, #cdd6ff, transparent),
    radial-gradient(1.5px 1.5px at 65% 85%, #fff, transparent);
  background-size: 260px 260px; animation: room-star-twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes room-star-twinkle{ 0%{ opacity:.5; } 100%{ opacity:1; } }

/* ============================================================
   🗺️ Bản Đồ Thế Giới Lumi — marker phòng (xem openWorldMapModal() app.js)
============================================================ */
.wm-marker{ transition:transform .15s ease; }
.wm-marker:hover{ transform:translate(-50%,-100%) scale(1.08); }
.wm-marker-featured{ z-index:2; }

/* ---------- THẺ MỜI PHÒNG ("Mời bạn tham gia phòng chat" — admin đề xuất, hiện đầu sảnh) ---------- */
.room-invite-card{
  position:relative; margin:12px 18px 2px; padding:16px 16px 14px; border-radius:24px; overflow:hidden;
  background:linear-gradient(150deg,#b58cf7 0%,#a672f5 48%,#d6a3e2 100%);
  box-shadow:0 16px 34px -18px #7c3aedaa, inset 0 1px 0 #ffffff40;
  max-height:340px; animation:ri-in .42s cubic-bezier(.2,.9,.3,1.1) both;
  transition:max-height .36s ease, opacity .3s ease, margin .36s ease, padding .36s ease;
}
.room-invite-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 10% 15%, #ffffff30, transparent 60%), radial-gradient(45% 70% at 95% 90%, #ffe08a30, transparent 60%);
}
.room-invite-card.ri-out{ max-height:0; opacity:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
@keyframes ri-in{ from{ opacity:0; transform:translateY(-14px) scale(.97); } to{ opacity:1; transform:none; } }
.ri-close{
  position:absolute; top:10px; right:10px; z-index:3; width:24px; height:24px; border-radius:50%; border:0;
  background:#00000038; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ri-row{ position:relative; z-index:1; display:flex; gap:14px; align-items:center; padding-right:14px; }
.ri-host{ width:76px; flex-shrink:0; text-align:center; }
.ri-host-av{ position:relative; width:60px; height:60px; margin:6px auto 0; }
.ri-host-av-in{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:30px; background:#ffffff33; }
.ri-host-name{ margin-top:10px; font-size:12px; font-weight:800; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 4px #0003; }
.ri-info{ min-width:0; flex:1; }
.ri-title{ color:#ffffffd9; font-size:13px; font-weight:600; }
.ri-room{ display:flex; align-items:center; gap:6px; margin-top:3px; color:#fff; font-size:17px; font-weight:800; text-shadow:0 2px 8px #0003; }
.ri-cat{ flex-shrink:0; }
.ri-room-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ri-meta{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.ri-mems{ display:inline-flex; }
.ri-mem{
  width:26px; height:26px; border-radius:50%; overflow:hidden; border:2px solid #fff; margin-left:-8px; background:#ffffff55;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.ri-mem:first-child{ margin-left:0; }
.ri-count{ color:#fff; font-size:13px; font-weight:800; }
.ri-tag{ background:#ffffff38; color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; }
.ri-join{
  position:relative; z-index:1; width:100%; margin-top:14px; border:0; border-radius:999px; padding:13px 0;
  background:#fff; color:#8a5cf6; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px -10px #0004;
}
.ri-join:active{ transform:scale(.98); }
.ri-join:disabled{ opacity:.7; }

/* ---------- ẢNH ICON TRƯỚC TÊN DANH HIỆU (do admin tải lên) ---------- */
.title-tag .ti-img{ width:13px; height:13px; object-fit:contain; vertical-align:-2px; margin-right:3px; display:inline-block; }
.title-pill .tp-icon.has-img{ background:none; }
.title-pill .tp-img{ width:18px; height:18px; object-fit:contain; display:block; }
.room-title-badge .rt-img{ width:14px; height:14px; object-fit:contain; display:block; flex-shrink:0; }

/* ---------- LOGO ĐẦU TRANG do admin tải lên (có thể là logo ngang, không bị cắt vuông) ---------- */
.brand-mini-logo.custom{ width:auto; max-width:150px; height:28px; border-radius:6px; object-fit:contain; }
.logo-mark.custom{ width:auto; max-width:260px; height:84px; border-radius:22px; }
.logo-mark.custom img{ width:auto; height:100%; max-width:100%; object-fit:contain; }

/* ---------- KHUNG CẮT ẢNH AVATAR (cropImageFile) ---------- */
.crop-overlay{ position:fixed; inset:0; z-index:10050; background:#0b0714e6; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; }
.crop-box{
  width:min(100%, 380px); padding:18px 16px 16px; border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#fdf9ff); box-shadow:0 30px 80px -20px #000a;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  --text:#241a3d; --text-dim:#5c4f80; color:#241a3d;
}
.crop-title{ font-weight:800; font-size:16px; }
.crop-stage{ position:relative; width:min(78vw, 320px); aspect-ratio:1 / 1; overflow:hidden; border-radius:16px; background:#000; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.crop-stage:active{ cursor:grabbing; }
.crop-img{ position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; pointer-events:none; user-select:none; -webkit-user-drag:none; will-change:transform; }
.crop-mask{ position:absolute; inset:0; pointer-events:none; border-radius:50%; box-shadow:0 0 0 999px #000000a6; outline:2px solid #ffffffcc; outline-offset:-2px; }
.crop-hint{ font-size:12px; color:var(--text-dim); text-align:center; }
.crop-zoom{ width:100%; accent-color:var(--magenta); }
.crop-actions{ display:flex; gap:10px; width:100%; }
.crop-actions button{ flex:1; padding:12px 0; border-radius:999px; border:1px solid var(--line); background:transparent; color:#241a3d; font-weight:700; font-size:14px; cursor:pointer; }
.crop-actions .crop-ok{ border:0; background:var(--grad-hot); color:#fff; }
.crop-actions button:disabled{ opacity:.6; }