.guide-layout{grid-template-columns:260px 1fr;align-items:start;gap:36px;margin-top:10px;display:grid}.guide-sidebar{background:var(--bg-surface-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px 16px;position:sticky;top:24px}.guide-sidebar-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border-color);align-items:center;gap:8px;margin-bottom:12px;padding-bottom:12px;font-size:13px;font-weight:700;display:flex}.guide-nav-menu{flex-direction:column;gap:6px;display:flex}.guide-nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);transition:var(--transition);border:1px solid #0000;align-items:center;gap:12px;padding:10px 14px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.guide-nav-item:hover{color:var(--text-primary);background:var(--bg-surface-elevated);border-color:var(--border-color)}.guide-nav-item.active{color:#fff;border-color:var(--accent-primary);background:#6366f12e;box-shadow:0 2px 10px #6366f133}.guide-nav-num{background:var(--bg-surface);border:1px solid var(--border-color);width:22px;height:22px;color:var(--accent-primary);transition:var(--transition);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:11.5px;font-weight:700;display:inline-flex}.guide-nav-item.active .guide-nav-num{background:var(--accent-primary);color:#fff;border-color:#0000}.guide-nav-text{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sidebar-help-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-top:24px;padding:14px}.sidebar-help-title{color:var(--text-primary);margin-bottom:4px;font-size:12.5px;font-weight:700}.sidebar-help-desc{color:var(--text-muted);margin-bottom:8px;font-size:12px;line-height:1.4}.sidebar-zalo-link{color:#60a5fa;font-size:12.5px;font-weight:700;text-decoration:none;display:inline-block}.sidebar-zalo-link:hover{text-decoration:underline}.guide-content{min-width:0}.guide-section{margin-bottom:48px;scroll-margin-top:40px}.guide-section-header{align-items:center;gap:12px;margin-bottom:18px;display:flex}.guide-section-badge{border-radius:var(--radius-md);width:34px;height:34px;color:var(--accent-primary);border:1px solid var(--border-highlight);background:#6366f126;flex-shrink:0;justify-content:center;align-items:center;font-size:14.5px;font-weight:700;display:inline-flex}.guide-section-title{color:var(--text-primary);letter-spacing:-.01em;font-size:1.4rem;font-weight:700}.guide-card-main{background:var(--bg-surface-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px;position:relative;overflow:hidden}.guide-card-main:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-primary), transparent);opacity:.7;height:2px;position:absolute;top:0;left:0;right:0}.guide-steps-list{flex-direction:column;gap:20px;display:flex}.guide-step-item{align-items:flex-start;gap:18px;display:flex}.guide-step-idx{background:var(--bg-surface-elevated);border:1px solid var(--border-color);width:28px;height:28px;color:var(--accent-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:12.5px;font-weight:700;display:inline-flex}.guide-step-content{flex:1}.guide-step-heading{color:var(--text-primary);margin-bottom:6px;font-size:15.5px;font-weight:600}.guide-step-text{color:var(--text-secondary);font-size:14.5px;line-height:1.6}.kbd-key{color:var(--text-primary);background:var(--bg-surface-elevated);border:1px solid var(--border-color);border-bottom:2px solid var(--border-highlight);border-radius:6px;margin:0 2px;padding:2px 7px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:700;line-height:1.4;display:inline-block;box-shadow:0 1px 2px #0003}.visual-mockup{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:18px;padding:18px;position:relative}.mockup-header-bar{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;display:flex}.mockup-dots{gap:6px;display:flex}.mockup-dot{background:var(--border-color);border-radius:50%;width:10px;height:10px}.mockup-dot.red{background:#ef4444}.mockup-dot.yellow{background:#f59e0b}.mockup-dot.green{background:#10b981}.mockup-title{color:var(--text-muted);font-family:JetBrains Mono,monospace;font-size:12px}.mockup-browser-bar{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);align-items:center;gap:12px;margin-bottom:14px;padding:8px 14px;display:flex}.mockup-url{color:var(--text-muted);flex:1;font-family:JetBrains Mono,monospace;font-size:12.5px}.mockup-toolbar-icons{align-items:center;gap:10px;display:flex}.mockup-icon-btn{width:28px;height:28px;color:var(--text-secondary);border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.mockup-icon-btn.highlight{border-color:var(--accent-primary);color:var(--accent-primary);background:#6366f133;animation:2s ease-in-out infinite pulse-border}@keyframes pulse-border{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 4px #6366f126}}.mockup-pin-menu{background:var(--bg-surface-elevated);border:1px solid var(--border-highlight);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);padding:12px 14px}.mockup-menu-row{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 0;font-size:13.5px;display:flex}.mockup-menu-row:last-child{border-bottom:none}.mockup-pin-btn{background:var(--accent-primary);color:#fff;border:none;border-radius:6px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.info-callout{border:1px solid var(--border-color);border-left:3px solid var(--accent-primary);border-radius:var(--radius-sm);color:var(--text-secondary);background:#6366f114;align-items:flex-start;gap:12px;margin-top:14px;padding:12px 16px;font-size:13.5px;display:flex}.info-callout.warning{border-color:#f59e0b4d;border-left-color:var(--warning);background:#f59e0b14}.info-callout.success{border-color:#10b9814d;border-left-color:var(--success);background:#10b98114}.inline-puzzle-btn{vertical-align:middle;justify-content:center;align-items:center;width:24px;height:24px;margin:0 4px;display:inline-flex}.shortcut-url-row{flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;display:flex}.btn-copy-shortcut{background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.btn-copy-shortcut:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.btn-copy-shortcut.copied{background:var(--success);color:#fff;border-color:var(--success)}@media (width<=900px){.guide-layout{grid-template-columns:1fr;gap:24px}.guide-sidebar{padding:14px;position:static}.guide-nav-menu{flex-flow:wrap;gap:8px}.guide-nav-item{padding:8px 12px;font-size:13px}.sidebar-help-box{display:none}}@media (width<=600px){.guide-card-main{padding:20px 16px}.guide-step-item{gap:12px}.guide-section-title{font-size:1.25rem}}