/* Trung tâm hướng dẫn #guide — dùng biến màu của yulin-theme.css (sáng/tối). */
.gd{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;align-items:start}
.gd-nav{position:sticky;top:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;max-height:calc(100vh - 100px);overflow:auto}
.gd-nav summary{display:none}
.gd-group{margin:6px 0 12px}
.gd-group>b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 6px}
.gd-group a{display:block;padding:6px 8px;border-radius:6px;color:var(--text-soft);text-decoration:none;font-size:.92rem}
.gd-group a:hover{background:var(--hover)}
.gd-group a.active{background:var(--accent-soft);color:var(--heading);font-weight:600}
.gd-body{min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px}
.gd-body h1{margin:0 0 6px;font-size:1.6rem;color:var(--heading)}
.gd-body h3{margin:26px 0 8px;font-size:1.15rem;color:var(--heading);border-bottom:1px solid var(--border);padding-bottom:6px}
.gd-intro{color:var(--muted);margin:0 0 18px}
.gd-body p,.gd-body li{line-height:1.6;color:var(--text)}
.gd-body ul{padding-left:20px}
.gd-star{color:var(--gold);font-size:.8rem;font-weight:600}
.gd-step{display:flex;gap:12px;margin:14px 0}
.gd-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.gd-step h4{margin:2px 0 4px;color:var(--heading)}
.gd-step p{margin:0}
.gd-shot{margin:14px 0;max-width:640px}
.gd-shot img{display:block;width:100%;height:auto;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--field)}
.gd-shot figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.gd-imgwrap{position:relative;line-height:0}
.gd-box{position:absolute;border:2px solid #ff5a5f;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.gd-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#ff5a5f;color:#fff;font:700 .78rem/1 var(--font);font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.gd-box .gd-badge{position:absolute;left:-11px;top:-11px}
.gd-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.gd-legend li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-size:.92rem}
.gd-legend .gd-badge{flex:none;margin-top:1px}
.gd-eg{margin-top:4px;font-size:.84rem;color:var(--muted)}
.gd-note{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);border-left-width:4px}
.gd-note b{flex:none}
.gd-tip{background:var(--accent-2-soft);border-left-color:var(--accent-2)}
.gd-warn{background:var(--gold-bg);border-color:var(--gold-border);border-left-color:var(--gold)}
.gd-note-note{background:var(--accent-soft);border-left-color:var(--accent)}
.gd-table-wrap{margin:14px 0;overflow-x:auto}
.gd-table-title{margin:0 0 6px;color:var(--heading)}
.gd-table{width:100%;border-collapse:collapse;font-size:.92rem}
.gd-table th,.gd-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.gd-table th{background:var(--panel-head);color:var(--muted);font-weight:600}
.gd-table code{color:var(--code);background:var(--code-bg);padding:2px 6px;border-radius:4px;white-space:normal;overflow-wrap:anywhere}
.gd-pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:14px;border-top:1px solid var(--border)}
.gd-pager a{color:var(--link);text-decoration:none;font-weight:600}
@media (max-width:900px){
 .gd{grid-template-columns:1fr}
 .gd-nav{position:static;max-height:none}
 .gd-nav summary{display:block;cursor:pointer;font-weight:600;color:var(--heading);padding:4px 2px}
 .gd-body{padding:16px}
}