/* Hướng dẫn theo ngữ cảnh (guide.js): khung tô sáng cụm + thẻ gợi ý + trang Help. */
.gd-spot{
  position:fixed; z-index:75; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(15,23,42,.38);
  transition:left .15s, top .15s, width .15s, height .15s;
}
.gd-card{
  position:fixed; z-index:76; width:min(330px, calc(100vw - 24px)); padding:14px 16px 12px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 18px 40px -12px rgba(15,23,42,.45);
}
.gd-card h3{margin:0 0 8px; font-size:.98rem;}
.gd-card ul, .gd-help-item ul{margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:6px; font-size:.84rem; line-height:1.55; color:var(--ink-soft);}
.gd-card li::marker, .gd-help-item li::marker{color:var(--accent);}
.gd-key{
  display:inline-block; padding:0 6px; margin:0 1px; border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:6px; background:var(--surface-2); color:var(--ink); font-size:.78rem; font-weight:600; line-height:1.5;
  white-space:nowrap;
}
.gd-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;}
.gd-off{padding:0; border:0; background:none; color:var(--ink-faint); font:inherit; font-size:.76rem; cursor:pointer; text-decoration:underline;}
.gd-ok{padding:6px 16px;}
.gd-arrow{position:absolute; width:12px; height:12px; margin-left:-6px; background:var(--surface); transform:rotate(45deg);}
.gd-arrow[hidden]{display:none;}
.gd-arrow.is-up{top:-7px; border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong);}
.gd-arrow.is-down{bottom:-7px; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);}

/* Nút Help ở thanh trên */
.gd-help-link{
  padding:0; border:0; background:none; color:var(--ink-soft); font:inherit; font-size:inherit; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;
}
.gd-help-link:hover{color:var(--ink);}

/* Trang hướng dẫn đầy đủ */
.gd-help-card{max-width:520px; max-height:calc(100vh - 40px); overflow-y:auto;}
.gd-help-list{display:flex; flex-direction:column; gap:12px; margin:4px 0 14px;}
.gd-help-item{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface);}
.gd-help-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.gd-help-head h3{flex:1; margin:0; font-size:.92rem;}
.gd-num{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-ink); font-size:.74rem; font-weight:700;
}
.gd-show{
  flex:0 0 auto; padding:3px 10px; border:1px solid var(--accent); border-radius:999px; background:var(--accent-soft);
  color:var(--accent-ink); font:inherit; font-size:.74rem; cursor:pointer;
}
.gd-toggle{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:.84rem; color:var(--ink-soft);}
.gd-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; padding:8px 14px; border-radius:999px;
  background:var(--ink); color:var(--surface); font-size:.82rem;
}
.gd-key svg{width:12px; height:12px; margin-right:4px; vertical-align:-2px;}
.gd-key-icon{padding:0 5px;}
.gd-key-icon svg{margin-right:0;}