/* ============================================================
   Đổ Xăm Hường — bố cục thích ứng màn hình nhỏ
   ============================================================ */

/* thương hiệu không được đè lên điểm */
.brand { min-width: 0; flex: 0 1 auto; }
.brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .pill { flex: none; }

/* sân khấu co lại được, không đẩy tràn chiếu */
.stage { overflow: hidden; }
.stage .notice {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stage .notice__body { overflow: auto; }

@media (max-width: 360px) {
  .brand__name { font-size: 14px; }
  .brand__mark { width: 26px; height: 26px; border-radius: 8px; }
  .pill { height: 30px; font-size: 13px; padding: 0 9px; gap: 4px; }
  .pill svg { width: 15px; height: 15px; }
  .icon-btn { width: 32px; height: 32px; }
  .topbar { gap: 6px; padding: 0 var(--s3) var(--s2); }
}

@media (max-height: 720px) {
  .table { padding: 10px 8px; gap: 8px; border-radius: 20px; margin: 0 8px 6px; }
  .cua { padding: 7px 3px 6px; border-radius: 11px; }
  .cua__emblem { width: 28px; height: 28px; }
  .cua__emblem svg { width: 18px; height: 18px; }
  .cua__name { font-size: 9.5px; }
  .cua__bet { font-size: 10.5px; min-height: 15px; }
  .die { width: 50px; height: 50px; border-radius: 11px; }
  .die svg { width: 27px; height: 27px; }
  .tray { min-height: 72px; padding: 8px; gap: 10px; }
  .stage__hint { display: none; }
  .controls { gap: 6px; }
  .chip { height: 38px; font-size: 14px; }
  .btn--roll, .btn--ghost { height: 46px; font-size: 15px; }
  .btn--ghost { width: 54px; }
  .history { min-height: 18px; }
  .stage .notice__body { max-height: 16vh; }
  .notice__head { padding: 7px var(--s3); }
  .news-item { padding: 8px 0; }
  .notice .news-item__body { font-size: 12px; line-height: 1.5; }
}

@media (max-height: 620px) {
  .history { display: none; }
  .table { margin-top: 0; }
  .die { width: 42px; height: 42px; border-radius: 10px; }
  .die svg { width: 22px; height: 22px; }
  .tray { min-height: 60px; padding: 6px; gap: 8px; }
  .cua__emblem { width: 24px; height: 24px; }
  .cua__emblem svg { width: 15px; height: 15px; }
  .cua__name { font-size: 8.5px; }
  .chip { height: 34px; font-size: 13px; }
  .btn--roll, .btn--ghost { height: 42px; font-size: 14px; }
  .stage .notice__body { max-height: 12vh; }
}

/* màn hình thấp: bảng tin chỉ 2 dòng, không cắt giữa chữ */
@media (max-height: 720px) {
  .notice__title { font-size: 10.5px; letter-spacing: .10em; }
  .notice .news-item__title { font-size: 13.5px; margin-bottom: 2px; }
  .notice .news-item__body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}