:root{
  --gap:10px; --bd:#ddd; --muted:#666; --bg:#fff; --overlay:rgba(0,0,0,.45);
}

/* Buttons / badges */
button, .btn{
  padding:8px 12px; border:1px solid var(--bd); border-radius:10px; background:#fff; cursor:pointer;
}
.btn-primary{ border-color:#0a7; }
.badge{
  display:inline-block; padding:6px 12px; border:1px solid var(--bd); border-radius:999px; font-size:14px; color:var(--muted);
}

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:var(--overlay); display:none;
  align-items:center; justify-content:center; z-index:1000;
}
.modal{
  background:var(--bg); width:min(1100px, 95vw); max-height:90vh; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.2); display:flex; flex-direction:column;
}
.modal-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--bd);
}
.modal-tt{ font-weight:600; }

/* Body: vùng cuộn chính */
.modal-bd{
  padding:12px; overflow:auto;
}
.modal-ft{
  padding:10px 14px; border-top:1px solid var(--bd); text-align:right;
}

/* Grid các bộ thủ */
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  align-items:start;
}
.card{
  border:1px solid var(--bd); border-radius:10px; padding:6px; text-align:center; background:#fff;
  transition: box-shadow .15s ease;
  cursor:pointer; position:relative; /* cho anchor focus ring */
  text-decoration: none;
}
.card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }

/* Nội dung trong card */
.glyph{ font-size:22px; line-height:1.2; }
.num{ font-size:12px; color:var(--muted); }
.nm{
  font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Tooltip nguồn (nội dung) nằm trong .card nhưng KHÔNG hiển thị nữa.
   JS sẽ lấy innerHTML và render ra body (portal) */
.tooltip{ display:none; }

/* Tooltip portal (được gắn vào body) */
.tooltip-portal{
  position: fixed;
  display: none;
  z-index: 9999;

  background:#fff;
  border:1px solid var(--bd);
  border-radius:8px;
  padding:8px;
  max-width:260px;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  text-align:left;

  pointer-events:none; /* không bắt chuột */
  white-space: normal; /* cho phép xuống dòng */
}

/* Focus visible cho thẻ <a.card> để accessibility tốt hơn */
.card:focus-visible{
  outline: 2px solid #0a7;
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
}

/* Responsive columns */
@media (max-width:1200px){ .grid{ grid-template-columns:repeat(12,1fr);} }
@media (max-width:900px){  .grid{ grid-template-columns:repeat(8,1fr);} }
@media (max-width:700px){  .grid{ grid-template-columns:repeat(6,1fr);} }
@media (max-width:520px){  .grid{ grid-template-columns:repeat(4,1fr);} }



/* Hạn chế hiển thị ở IOS default */
.card .tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Tooltip chỉ hiện khi desktop có hover */
@media (hover: hover) and (pointer: fine) {
  .card:hover .tooltip,
  .card:focus-visible .tooltip {
    opacity: 1;
    pointer-events: auto;
  }
}