/* ============================================================
   LOBBY v1.9 — lưới chức năng ở Trang chủ
   Đặt SAU skin-v18.css. Chỉ đổi kiểu dáng + bố cục lưới; nút/ID/JS giữ nguyên.
   Muốn quay về bản cũ: bỏ dòng <link> lobby-v19.css trong index.php (và script ở ngay dưới lưới vẫn chạy bình thường).

   Ý tưởng:
   • 4 cột thay vì 6: ô to hơn, chữ đọc được, chạm trúng ngay (≥ 56px).
   • Hai việc làm hằng ngày (Điểm danh, Nhiệm vụ) là hai thẻ lớn nằm đầu — điểm nhấn duy nhất của khu vực này.
   • Chip nhóm (Thưởng / Trò chơi / Kết nối / Chợ) để tìm nhanh thay vì cuộn qua 25 nút.
   • Mục hay dùng tự lên đầu (xem script trong index.php).
   ============================================================ */

/* ---------- Chip nhóm ---------- */
#screen-lobby .lq-chips{
  display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin:0 -2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#screen-lobby .lq-chips::-webkit-scrollbar{ display:none; }
.lq-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 8px 0 14px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:#4d4270;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:800; line-height:1; cursor:pointer;
  box-shadow:var(--sk-soft-shadow); transition:background .16s, color .16s, border-color .16s;
  -webkit-tap-highlight-color:transparent;
}
.lq-chip-n{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; background:rgba(36,26,61,.07); color:#6a6390; transition:background .16s, color .16s;
}
.lq-chip.active{ background:var(--sk-ink,#241a3d); color:#fff; border-color:transparent; }
.lq-chip.active .lq-chip-n{ background:rgba(255,255,255,.22); color:#fff; }
.lq-chip:focus-visible, .lobby-quick-item:focus-visible{ outline:2px solid #ff3d9a; outline-offset:2px; }
@media (hover:hover){ .lq-chip:not(.active):hover{ border-color:rgba(36,26,61,.22); } }

/* ---------- Lưới ---------- */
#screen-lobby .lobby-quick-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 0; padding:12px 8px 8px; align-items:start;
  border-radius:26px;
}
@media (max-width:330px){ #screen-lobby .lobby-quick-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

#screen-lobby .lobby-quick-item{
  padding:8px 2px 8px; border-radius:18px; gap:7px; min-width:0;
  -webkit-tap-highlight-color:transparent; transition:background .15s;
}
#screen-lobby .lobby-quick-item.lq-off{ display:none; }
@media (hover:hover){ #screen-lobby .lobby-quick-item:hover{ background:rgba(36,26,61,.035); } }
#screen-lobby .lobby-quick-ico{ width:56px; height:56px; border-radius:20px; font-size:26px; }
#screen-lobby .lobby-quick-label{
  font-size:11.5px; line-height:1.2; max-width:100%; padding:0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lobby-quick-sub{ display:none; }
#screen-lobby .lobby-quick-ico .icon-badge{ top:-5px; right:-5px; }

/* ---------- Hai thẻ lớn (chỉ ở mục Tất cả / Thưởng, màn từ 331px) ---------- */
@media (min-width:331px){
  #screen-lobby .lobby-quick-grid[data-view="all"] .lobby-quick-item[data-hero],
  #screen-lobby .lobby-quick-grid[data-view="reward"] .lobby-quick-item[data-hero]{
    grid-column:span 2; display:grid; grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"i l" "i s"; column-gap:11px; row-gap:1px; align-items:center; justify-items:start;
    text-align:left; margin:2px 4px 8px; padding:11px 12px; border-radius:20px; border:1px solid transparent;
    transition:transform .12s;
  }
  #screen-lobby .lobby-quick-grid[data-view="all"] .lobby-quick-item[data-hero]:active,
  #screen-lobby .lobby-quick-grid[data-view="reward"] .lobby-quick-item[data-hero]:active{ transform:scale(.98); }

  #screen-lobby .lobby-quick-grid[data-view="all"] [data-hero] .lobby-quick-ico,
  #screen-lobby .lobby-quick-grid[data-view="reward"] [data-hero] .lobby-quick-ico{
    grid-area:i; width:46px; height:46px; border-radius:16px; font-size:23px;
    background:rgba(255,255,255,.78); border-color:rgba(255,255,255,.95);
    box-shadow:0 6px 12px -8px rgba(36,26,61,.35);
  }
  #screen-lobby .lobby-quick-grid[data-view="all"] [data-hero] .lobby-quick-label,
  #screen-lobby .lobby-quick-grid[data-view="reward"] [data-hero] .lobby-quick-label{
    grid-area:l; align-self:end; text-align:left; font-size:14px; font-weight:800; color:var(--sk-ink,#241a3d); padding:0;
  }
  #screen-lobby .lobby-quick-grid[data-view="all"] [data-hero] .lobby-quick-sub,
  #screen-lobby .lobby-quick-grid[data-view="reward"] [data-hero] .lobby-quick-sub{
    grid-area:s; display:block; align-self:start; text-align:left; font-size:11px; font-weight:600; line-height:1.25; color:#6a6390;
  }
  #screen-lobby .lobby-quick-grid[data-view="all"] [data-hero="gold"],
  #screen-lobby .lobby-quick-grid[data-view="reward"] [data-hero="gold"]{ background:linear-gradient(135deg,#fff8de,#ffe4a4); border-color:#ffd980; }
  #screen-lobby .lobby-quick-grid[data-view="all"] [data-hero="cyan"],
  #screen-lobby .lobby-quick-grid[data-view="reward"] [data-hero="cyan"]{ background:linear-gradient(135deg,#eafaff,#c6f0fb); border-color:#a8e5f5; }
}

/* ---------- Đổi nhóm: chỉ phản hồi thao tác bấm chip ---------- */
@keyframes lq-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.lobby-quick-grid.lq-swap .lobby-quick-item{ animation:lq-in .22s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion:reduce){ .lobby-quick-grid.lq-swap .lobby-quick-item{ animation:none; } }


/* ============================================================
   PHẦN CÒN LẠI CỦA TRANG CHỦ (v1.9)
   ============================================================ */

/* ---------- Dải thông báo sự kiện (Trung Thu / Lumi Pass / Kuma): cùng một kiểu, bỏ hiệu ứng nháy liên tục ---------- */
#screen-lobby .trungthu-banner,
#screen-lobby .lumipass-banner,
#screen-lobby .kuma-banner{
  animation:none; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:9px 14px 9px 9px; margin:10px 18px 0; gap:12px; box-shadow:var(--sk-soft-shadow); align-items:center;
  transition:transform .12s;
}
#screen-lobby .trungthu-banner:active, #screen-lobby .lumipass-banner:active, #screen-lobby .kuma-banner:active{ transform:scale(.985); }
#screen-lobby .trungthu-banner .tt-emoji,
#screen-lobby .lumipass-banner .lp-emoji,
#screen-lobby .kuma-banner .km-emoji{
  width:42px; height:42px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0;
  box-shadow:inset 0 1px 0 #ffffffcc;
}
#screen-lobby .trungthu-banner .tt-emoji{ background:linear-gradient(160deg,#fff0e0,#ffd5ab); }
#screen-lobby .lumipass-banner .lp-emoji{ background:linear-gradient(160deg,#f1eaff,#d9c9ff); }
#screen-lobby .kuma-banner .km-emoji{ background:linear-gradient(160deg,#e6f9ff,#bdeefb); }
#screen-lobby .lumipass-banner .lp-title, #screen-lobby .kuma-banner .km-title, #screen-lobby .trungthu-banner .tt-txt{
  color:var(--sk-ink,#241a3d); font-size:13px; font-weight:800; line-height:1.3;
}
#screen-lobby .trungthu-banner .tt-countdown, #screen-lobby .lumipass-banner .lp-countdown, #screen-lobby .kuma-banner .km-countdown{
  display:inline-block; align-self:flex-start; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; margin-top:2px;
  font-variant-numeric:tabular-nums;
}
#screen-lobby .trungthu-banner .tt-countdown{ background:#fff0dc; color:#a85a00; }
#screen-lobby .lumipass-banner .lp-countdown{ background:#f1eaff; color:#5b34c2; }
#screen-lobby .kuma-banner .km-countdown{ background:#e4f5ff; color:#0b6b98; }
#screen-lobby .lumipass-banner .lp-arrow, #screen-lobby .kuma-banner .km-arrow{ color:#a79fc2; font-size:22px; font-weight:700; }
#screen-lobby .trungthu-banner::after{ content:'›'; margin-left:auto; color:#a79fc2; font-size:22px; font-weight:700; line-height:1; }

/* ---------- Đề cử + Đang online: vòng viền chậm lại, bớt chuyển động ---------- */
.nominee-av-ring{ animation-duration:10s; }
@media (prefers-reduced-motion:reduce){ .nominee-av-ring{ animation:none; } }
.online-now-dot{ width:13px; height:13px; box-shadow:none; }
.online-now-item:active .online-now-av{ transform:scale(.94); }
.online-now-av{ transition:transform .12s; }

/* ---------- Ô tìm phòng: biểu tượng kính lúp nằm trong ô ---------- */
#screen-lobby #room-search{
  height:50px; padding:0 18px 0 48px; border-radius:999px; font-size:14px; font-weight:600;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b83a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 18px center / 19px;
}
#screen-lobby #room-search::placeholder{ color:#9a92b8; font-weight:600; }

/* ---------- Thẻ phòng ---------- */
#screen-lobby .room-list{ gap:12px; }
#screen-lobby .room-card{ border-radius:24px; }
@media (hover:hover){ #screen-lobby .room-card:hover{ transform:translateY(-2px); } }
#screen-lobby .room-card:focus-visible{ outline:3px solid #ff3d9a; outline-offset:2px; }
#screen-lobby .room-card-name{ font-size:15px; }
#screen-lobby .room-card-viewers{ background:rgba(20,12,40,.5); }
#screen-lobby .room-card-host{ margin-top:1px; }
#screen-lobby .room-card.is-pinned{ box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px #ff7ab8, 0 16px 30px -16px rgba(255,61,154,.7); }

/* ---------- Đang tải: khung xương thay cho dòng chữ ---------- */
@keyframes lq-shimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.room-skel{
  aspect-ratio:1/1; border-radius:24px; width:100%;
  background:linear-gradient(100deg,#f1edf8 30%,#fbf9ff 50%,#f1edf8 70%); background-size:300% 100%;
  animation:lq-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .room-skel{ animation:none; } }

/* ---------- Danh sách rỗng ---------- */
#screen-lobby .room-list .empty-hint{
  grid-column:1/-1; padding:34px 22px; border:1.5px dashed rgba(36,26,61,.16); border-radius:24px; background:#fff;
  color:#655e82; font-size:13.5px; font-weight:600; line-height:1.65;
}

/* ---------- Liên kết cuối trang ---------- */
.lobby-foot{ display:flex; flex-wrap:wrap; gap:8px; padding:18px 18px 12px; }
.lobby-foot a{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sk-soft-shadow);
  color:#4d4270; font-size:12px; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.lobby-foot a:active{ background:#f6f3fb; }
.lobby-foot a:focus-visible{ outline:2px solid #ff3d9a; outline-offset:2px; }

/* ---------- Thanh điều hướng dưới: icon nét mảnh thay emoji, bỏ nhịp nháy ở nút + ---------- */
#bottom-nav .bn-item .bn-icon{ display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; opacity:1; font-size:0; }
#bottom-nav .bn-item .bn-icon svg{ width:24px; height:24px; display:block; transition:fill-opacity .15s; }
#bottom-nav .bn-item:not(.active){ color:#7d7599; }
#bottom-nav .bn-item.active{ color:var(--magenta-ink,#c2127a); }
#bottom-nav .bn-item.active .bn-icon{ transform:none; filter:none; background:#fff0f8; box-shadow:inset 0 0 0 1px #ffd3ea; border-radius:16px; }
#bottom-nav .bn-item.active .bn-icon svg{ fill:currentColor; fill-opacity:.16; }
#bottom-nav .bn-icon .icon-badge{ top:-2px; right:8px; }
#bottom-nav .bn-center::before{ animation:none; opacity:.4; }
#bottom-nav .bn-item:focus-visible{ outline:2px solid #ff3d9a; outline-offset:-2px; border-radius:16px; }

/* ---------- Bàn phím: mọi nút có viền focus rõ ---------- */
#screen-lobby button:focus-visible, #screen-lobby a:focus-visible{ outline:2px solid #ff3d9a; outline-offset:2px; }