/* CSS riêng của party.js. CSS dùng chung vẫn nằm trong index.html */
/* Danh sách phòng */
.ptsearch{display:flex;align-items:center;gap:8px;margin:0 14px 8px;height:40px;border-radius:20px;background:var(--d2);padding:0 6px 0 14px;flex:none}
.ptsearch input{flex:1;min-width:0;border:0;background:none;outline:none;color:#fff;font-size:13.5px}
.ptsearch input::placeholder{color:var(--dmute)}
.ptsearch button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dtext)}
.ptban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 14px;border-radius:14px;scrollbar-width:none}
.ptban::-webkit-scrollbar{display:none}
.ptban>button{flex:0 0 100%;scroll-snap-align:start;display:block;width:100%}
.ptban .banner{margin:0}
.ptslide .evb{border-radius:14px}
.ptdots{display:flex;justify-content:center;gap:5px;margin-top:6px}
.ptdots i{width:5px;height:5px;border-radius:3px;background:#3A3360;transition:width .2s}
.ptdots i.on{width:14px;background:#A98BFF}
.rcard .rav{position:relative}
.rlv{position:absolute;left:0;bottom:0;right:0;background:linear-gradient(90deg,rgba(123,92,250,.95),rgba(255,79,139,.9));color:#fff;font-size:9.5px;font-weight:800;font-style:normal;text-align:center;line-height:15px}
.rcard .tg{display:flex;align-items:center;gap:6px}
.rcard .tg em{font-style:normal;background:rgba(169,139,255,.16);color:#C9B6FF;padding:1px 7px;border-radius:8px}
.rmeta{display:flex;gap:10px;margin-top:5px;font-size:11px;color:var(--dmute)}
.rmeta span{display:inline-flex;align-items:center;gap:3px}
.rmeta .hot{color:#FF9A5C;font-weight:700}
.ptempty{text-align:center;color:var(--dmute);padding:40px 20px;font-size:13px;line-height:1.5}
.sheet.dk .gsel button{background:#2C2550;color:var(--dmute)}
.sheet.dk .gsel button.on{background:#7B5CFA;color:#fff}
.sheet.dk .lbl{color:var(--dmute)}
.sheet.dk .field{background:#2C2550;border-color:#3A3360}
.sheet.dk .field input{color:#fff}
.pmmic{display:flex;flex-wrap:wrap;gap:8px}
.pmmic button{height:32px;padding:0 14px;border-radius:16px;background:#2C2550;color:var(--dtext);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.pmmic button.on{background:#7B5CFA;color:#fff}

/* Phòng: 10 ghế, 2 hàng x 5 */
.ptseats{grid-template-columns:repeat(5,1fr);gap:12px 2px;padding:12px 8px 6px}
.ptseats .seat.host{grid-column:auto}
.ptseats .seat .sr,.ptseats .seat.host .sr{width:52px;height:52px}
.ptseats .seat .eseat{width:52px;height:52px;border:1.5px dashed rgba(255,255,255,.18)}
.ptseats .seat.host .eseat{border-color:rgba(255,194,60,.55);color:var(--gold)}
.ptseats .seat .eseat.lk{background:rgba(0,0,0,.3);border-style:solid;color:#6F6893}
.ptseats .seat .nm{max-width:64px;font-size:10.5px}
.ptseats .seat .crw{top:-13px}
.seat .mut0{position:absolute;left:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#6F6893;display:grid;place-items:center;color:#fff}
.rhd .rt{display:block;text-align:left;position:relative}
.rhd .rt .ped{position:absolute;left:-2px;top:2px;color:#A98BFF}
.rhd .rt:has(.ped) b,.rhd .rt:has(.ped) small{padding-left:16px}
.rbar{gap:8px}
.rb2{margin-top:6px}
.rlvp{height:24px;padding:0 9px;border-radius:12px;background:linear-gradient(90deg,#7B5CFA,#B98BFF);color:#fff;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center}
.rfol{height:24px;padding:0 10px;border-radius:12px;background:#FF4F8B;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap}
.rfol.on{background:rgba(255,255,255,.12);color:var(--dmute)}
.rtop{display:flex;align-items:center}
.rtop span{border-radius:50%;border:2px solid #FFC23C;margin-left:-7px;line-height:0;background:var(--d2)}
.rtop .t2{border-color:#C9D3E6}.rtop .t3{border-color:#E59A6B}
.rtop .t0{width:28px;height:28px;display:grid;place-items:center;color:var(--gold);border-color:rgba(255,194,60,.4)}
.rapp{background:rgba(255,255,255,.12);color:var(--dtext)}
.rapp.on{background:#FF4F8B;color:#fff;animation:spk 1.4s infinite}
.rc.sys{color:#B9B1E8;font-size:11.5px}
.rc.wel{background:linear-gradient(90deg,rgba(124,243,208,.18),rgba(169,139,255,.14));border-radius:12px;padding:7px 10px}
.rc.rain{background:rgba(91,147,240,.2);border-radius:12px;padding:6px 10px}.rc.rain b{color:#9CC8FF}
.rc.atme{box-shadow:inset 0 0 0 1.5px #FF8FC1}
.rc b[data-a]{cursor:pointer}
.atm{color:#FF8FC1;font-weight:600}
.lbl2{display:block;color:#FFC23C!important;font-size:11px;margin-bottom:2px}
.rbtn.gm{background:linear-gradient(135deg,#FFB547,#FF6F8F)}

/* Sheet tối trong phòng */
.slist.dk{background:none}
.slist.dk .srow{border-color:#2C2550;color:var(--dtext)}
.crow.dk{background:none;color:var(--dtext);padding:8px 2px}
.crow.dk .ci b{color:var(--dtext)}
.ptinv{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.ptinv button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;width:60px;text-align:center;color:var(--dtext)}
.ptinv small{max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptapps{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto}
.ptapps .pill{height:28px;padding:0 12px}
.ptapps .pill.ok{background:#7B5CFA;color:#fff}
.ptapps .pill.rj{background:#2C2550;color:var(--dmute)}
.ptsw{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px;color:var(--dtext)}
.ptsw input{width:18px;height:18px;accent-color:#7B5CFA}
.ptmini{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;padding-top:6px}
.ptmini>b{font-size:17px;display:flex;align-items:center;gap:6px;margin-top:4px}
.ptmini>small{color:var(--dmute);font-size:12px}
.pmt{position:absolute;left:0;right:0;top:-4px;display:flex;justify-content:space-between}
.pmt button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dmute);background:#2C2550}
.pmt button.on{background:#FF4F6E;color:#fff}
.pmb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:12px}
.pmb button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--dtext);padding:10px 2px;border-radius:14px;background:#2C2550}
.pmb button.on{color:#FF8FC1}
.pmh{display:flex;gap:8px;width:100%;margin-top:8px}
.pmh button{flex:1;height:38px;border-radius:19px;border:1.5px solid #3A3360;color:var(--dtext);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.pmp{margin-top:10px;color:var(--dmute);font-size:12.5px;display:flex;align-items:center;gap:4px}
.btn.dkl{border-color:#3A3360;color:var(--dtext);margin-top:8px}
.ptinfo{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--dmute)}
.ptinfo span{background:#2C2550;border-radius:10px;padding:2px 9px}
.ptbox{background:#2C2550;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ptlv{display:flex;gap:12px;align-items:center;background:#2C2550;border-radius:14px;padding:12px}
.ptlv .lvb{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#B98BFF,#7B5CFA);display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.ptlv>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ptlv small{font-size:11.5px;color:var(--dmute)}
.ptlv .vbar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ptlv .vbar i{display:block;height:100%;background:linear-gradient(90deg,#7CF3D0,#A98BFF)}
.cnt2{float:right;font-weight:500;text-transform:none;letter-spacing:0}
.ptta{width:100%;border:1.5px solid #3A3360;background:#2C2550;color:#fff;border-radius:14px;padding:10px 12px;outline:none;resize:none;font-size:13.5px}
.ptcard .ptci{width:60px;height:60px;border-radius:20px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}
.ptbb{display:flex;gap:10px;width:100%}
.ptbb .btn{height:44px}

/* Bảng quà */
.gto{flex-wrap:wrap}
.gton{color:var(--dtext);font-weight:600;margin-left:4px}
.ptgt{overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-bottom:4px}
.ptgt button{display:inline-flex;align-items:center;gap:4px;flex:none}
.gcnt{display:flex;gap:8px;margin-bottom:12px}
.gcnt button{flex:1;height:30px;border-radius:15px;background:#2C2550;color:var(--dmute);font-size:12.5px;font-weight:700}
.gcnt button.on{background:#7B5CFA;color:#fff}

/* Hiệu ứng: quà to, mưa kim cương, vào phòng */
.ptbig{position:absolute;inset:0;z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(circle,rgba(255,194,60,.35),rgba(21,17,42,.55) 70%);animation:ptbig 3.3s ease forwards;overflow:hidden}
.ptbig .ecart{position:relative;z-index:1;box-shadow:0 0 60px rgba(255,214,102,.8);animation:ptbob 1s ease-in-out infinite}
.ptbig b{position:relative;z-index:1;color:#FFE29A;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:center;padding:0 30px}
.ptbig .rays{position:absolute;width:600px;height:600px;left:50%;top:50%;margin:-300px 0 0 -300px;background:repeating-conic-gradient(rgba(255,226,154,.28) 0 10deg,transparent 10deg 20deg);animation:ptspin 6s linear infinite;border-radius:50%;mask-image:radial-gradient(circle,#000 20%,transparent 65%)}
@keyframes ptbig{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes ptbob{50%{transform:translateY(-10px) scale(1.04)}}
@keyframes ptspin{to{transform:rotate(360deg)}}
.ptrain{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.ptrain i{position:absolute;top:-40px;color:#7FD6FF;filter:drop-shadow(0 0 6px rgba(127,214,255,.9));animation:ptfall linear forwards}
.ptrain b{position:absolute;left:50%;top:38%;transform:translateX(-50%);background:rgba(21,17,42,.75);color:#9CE7FF;padding:8px 16px;border-radius:16px;font-size:15px;white-space:nowrap;animation:pop .3s}
@keyframes ptfall{to{transform:translateY(900px) rotate(220deg)}}
.ptent{position:absolute;left:0;top:150px;z-index:29;pointer-events:none;animation:ptent 3.1s ease forwards}
@keyframes ptent{0%{transform:translateX(-110%)}18%{transform:translateX(14px)}80%{transform:translateX(14px);opacity:1}100%{transform:translateX(14px);opacity:0}}

/* Trò chơi */
.ptgames{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ptgames button{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;color:var(--dtext)}
.ptgames span{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff}
.ptrainp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ptrainp button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 4px;border-radius:16px;background:#2C2550;color:#7FD6FF;border:2px solid transparent}
.ptrainp button.on{border-color:#7FD6FF;background:rgba(127,214,255,.12)}
.ptrainp b{color:#fff;font-size:16px}
.wheel{position:relative;width:230px;height:230px;margin:4px auto 10px}
.wrot{width:230px;height:230px;transition:transform 4s cubic-bezier(.17,.89,.22,1)}
.wptr{position:absolute;left:50%;top:-8px;margin-left:-11px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:22px solid #fff;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.wgo{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFE29A,#FF8A3D);color:#3A1A00;font-weight:900;font-size:14px;box-shadow:0 0 0 5px #15112A,0 4px 14px rgba(0,0,0,.5);z-index:2}
.wres{text-align:center;font-size:13.5px;min-height:20px;margin-bottom:10px;color:var(--dtext)}
.wbet{justify-content:center}

/* Thẻ mời Party */
.pinv{position:absolute;left:10px;right:10px;top:10px;z-index:35;border-radius:18px;padding:12px 14px;background:linear-gradient(135deg,#8A5CFA,#5B2FD9);color:#fff;box-shadow:0 12px 30px rgba(40,20,90,.45);animation:pinv .3s ease}
@keyframes pinv{from{transform:translateY(-120%)}}
.pinv .pt{font-size:12px;font-weight:700;opacity:.9}
.pinv .px{position:absolute;right:10px;top:10px;opacity:.8}
.pinv .pr{display:flex;align-items:center;gap:10px;margin-top:8px}
.pinv .pr>div{flex:1;min-width:0}
.pinv .pr b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinv .pr small{font-size:11.5px;opacity:.85}
.pinv .pj{height:34px;padding:0 14px;border-radius:17px;background:#fff;color:#5B2FD9;font-weight:800;flex:none}
.ptabs{scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.rc.ptip{color:#9A93BE;font-size:11.5px}