{"id":3466,"date":"2026-05-13T20:22:20","date_gmt":"2026-05-13T13:22:20","guid":{"rendered":"https:\/\/nlguitar.com\/?page_id=3466"},"modified":"2026-05-16T11:53:53","modified_gmt":"2026-05-16T04:53:53","slug":"arpeggio-and-triad-tools","status":"publish","type":"page","link":"https:\/\/nlguitar.com\/en\/arpeggio-and-triad-tools\/","title":{"rendered":"Tools Tra C\u1ee9u Arpeggios &#038; Triad"},"content":{"rendered":"\t\t<div data-elementor-type=\"masteriyo-course-archive-page\" data-elementor-id=\"3466\" class=\"elementor elementor-3466\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d710cb e-flex e-con-boxed e-con e-parent\" data-id=\"0d710cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf67ed5 elementor-widget elementor-widget-heading\" data-id=\"bf67ed5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">C\u00f4ng C\u1ee5 Tra C\u1ee9u Arpeggios v\u00e0 Triads<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac3d381 elementor-widget elementor-widget-text-editor\" data-id=\"ac3d381\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>C\u00f4ng c\u1ee5 tra c\u1ee9u Arpeggios v\u00e0 Triad \u0111\u01b0\u1ee3c t\u1ea1o v\u1edbi m\u1ed9t giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i v\u00e0 tinh g\u1ecdn, gi\u00fap qu\u00e1 tr\u00ecnh t\u1eadp luy\u1ec7n Guitar tr\u1edf n\u00ean th\u00fa v\u1ecb v\u00e0 \u0111\u01a1n gi\u1ea3n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6677a19 e-flex e-con-boxed e-con e-parent\" data-id=\"6677a19\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff40b5c elementor-widget__width-initial elementor-widget elementor-widget-shortcode\" data-id=\"ff40b5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"nlg-chord-tool\">\n        \n        <div class=\"nlg-section\">\n            <h4 class=\"nlg-heading\">ROOT NOTE<\/h4>\n            \n            <div style=\"display: flex; justify-content: center; gap: 10px; margin-bottom: 15px;\">\n                <div class=\"nlg-toggle-box\" id=\"nlg-key-toggle\">\n                    <button class=\"active\" data-val=\"sharp\"># Sharp<\/button>\n                    <button data-val=\"flat\">b Flat<\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"nlg-pill-group\" id=\"nlg-root-btns\"><\/div>\n        <\/div>\n\n        <div class=\"nlg-section nlg-border-divider\">\n            <h4 class=\"nlg-heading\">CHORD TYPE<\/h4>\n            <div class=\"nlg-pill-group\" id=\"nlg-type-btns\">\n                <\/div>\n        <\/div>\n\n        <div class=\"nlg-display-info\">\n            <h2 id=\"nlg-chord-title\">C Major Triad (C)<\/h2>\n            <p id=\"nlg-chord-intervals\">1 - 3 - 5<\/p>\n        <\/div>\n\n        <div class=\"nlg-toolbar\">\n            \n            <div class=\"nlg-toggle-wrapper\" id=\"nlg-group-wrapper\">\n                <span class=\"nlg-toggle-label\">Group:<\/span>\n                <div class=\"nlg-toggle-box\" id=\"nlg-group-toggle\">\n                    <button class=\"active\" data-val=\"all\">All<\/button>\n                    <button data-val=\"123\" class=\"triad-only\">123<\/button>\n                    <button data-val=\"234\" class=\"triad-only\">234<\/button>\n                    <button data-val=\"345\" class=\"triad-only\">345<\/button>\n                    <button data-val=\"456\" class=\"triad-only\">456<\/button>\n                    <button data-val=\"gs1\">Shape 1<\/button>\n                    <button data-val=\"gs2\">Shape 2<\/button>\n                    <button data-val=\"gs3\">Shape 3<\/button>\n                    <button data-val=\"gs4\">Shape 4<\/button>\n                    <button data-val=\"gs5\">Shape 5<\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"nlg-toggle-wrapper\">\n                <span class=\"nlg-toggle-label\">Show:<\/span>\n                <div class=\"nlg-toggle-box\" id=\"nlg-show-toggle\">\n                    <button class=\"active\" data-val=\"notes\">Notes<\/button>\n                    <button data-val=\"intervals\">Intervals<\/button>\n                    <button data-val=\"hide\">Hide Notes<\/button>\n                <\/div>\n            <\/div>\n            \n        <\/div>\n\n        <div class=\"nlg-fretboard-wrapper\">\n            <div id=\"nlg-fretboard\">\n                <\/div>\n            \n            <div class=\"nlg-fret-markers\">\n                <div><\/div><div><\/div><div><\/div><div>3<\/div><div><\/div><div>5<\/div><div><\/div><div>7<\/div><div><\/div><div>9<\/div><div><\/div><div><\/div><div>12<\/div><div><\/div><div><\/div><div>15<\/div><div><\/div><div>17<\/div>            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <style>\n        #nlg-chord-tool {\n            background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;\n            padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n            width: 100%; box-sizing: border-box; \n            margin: 0 auto; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);\n            overflow: hidden;\n        }\n        .nlg-section { margin-bottom: 25px; text-align: center; }\n        .nlg-border-divider { border-bottom: 1px solid #e5e7eb; padding-bottom: 35px; margin-bottom: 45px; }\n        .nlg-heading { color: #4b5563; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 15px; margin-top: 0; text-transform: uppercase; }\n        \n        .nlg-toggle-box { display: inline-flex; border: 1px solid #bfdbfe; border-radius: 999px; overflow: hidden; padding: 2px; background: #fff; justify-content: center; flex-wrap: wrap; gap: 2px; }\n        .nlg-toggle-box button { background: transparent; border: none; color: #3b82f6; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px; transition: 0.2s; }\n        .nlg-toggle-box button.active { background: #2563eb; color: #ffffff; }\n\n        .nlg-pill-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }\n        .nlg-pill { background: #ffffff; border: 1px solid #cbd5e1; color: #334155; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; outline: none; }\n        .nlg-pill.active { background: #2563eb; color: #ffffff; border-color: #2563eb; }\n\n        .nlg-display-info { text-align: center; margin: 0 0 35px 0; }\n        #nlg-chord-title { color: #0f172a; font-size: 32px; font-weight: 800; margin: 0 0 10px 0; }\n        #nlg-chord-intervals { color: #94a3b8; font-size: 15px; font-weight: 700; letter-spacing: 2px; margin: 0; }\n\n        .nlg-toolbar { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }\n        .nlg-toggle-wrapper { display: flex; align-items: center; gap: 8px; }\n        .nlg-toggle-label { color: #475569; font-size: 14px; font-weight: 600; }\n\n        .nlg-fretboard-wrapper { position: relative; padding: 10px 0 20px; overflow-x: auto; width: 100%; }\n        #nlg-fretboard, .nlg-fret-markers, #nlg-inlays-layer { display: grid; grid-template-columns: 40px repeat(17, minmax(35px, 1fr)); min-width: 750px; position: relative; border: none; }\n\n        #nlg-inlays-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; }\n        .nlg-inlay-col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; }\n        .nlg-inlay-dot { width: 12px; height: 12px; background: #e2e8f0; border-radius: 50%; }\n        .nlg-inlay-dot.dot-top { position: absolute; top: 33.333%; transform: translateY(-50%); }\n        .nlg-inlay-dot.dot-bottom { position: absolute; top: 66.666%; transform: translateY(-50%); }\n\n        .nlg-fret-markers { margin-top: 15px; }\n        .nlg-fret-markers div { color: #94a3b8; font-size: 13px; font-weight: 600; display: flex; justify-content: center; align-items: center; }\n\n        .nlg-string-row { display: contents; }\n        .nlg-fret-cell { position: relative; height: 38px; display: flex; justify-content: center; align-items: center; }\n\n        \/* Tinh ch\u1ec9nh d\u00e2y \u0111\u00e0n: K\u00edch th\u01b0\u1edbc b\u1eb1ng nhau v\u00e0 m\u00e0u \u0111en thu\u1ea7n *\/\n        .nlg-fret-cell::after {\n            content: ''; position: absolute; left: 0; right: 0; top: 50%; \n            height: 1px; \/* Chuy\u1ec3n v\u1ec1 1px ch\u1eb5n \u0111\u1ec3 d\u00e2y n\u00e9t v\u00e0 \u0111\u1ec1u *\/\n            background: #000000; transform: translateY(-10%); z-index: 2;\n        }\n        .nlg-fret-cell.fret-0::after { display: none; }\n\n        \/* V\u1ea1ch chia ng\u0103n m\u00e0u \u0111en v\u00e0 n\u00e9t ch\u1eb5n 2px \u0111\u1ec3 kh\u00f4ng b\u1ecb to nh\u1ecf *\/\n        .nlg-fret-cell:not(.fret-0)::before { \n            content: ''; position: absolute; left: 0; top: 0; bottom: 0; \n            width: 2px; background: #cbd5e1; z-index: 1; \n        }\n        \/* L\u01b0\u1ee3c \u0111\u00e0n m\u00e0u \u0111en *\/\n        .nlg-fret-cell.fret-0::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: #000000; z-index: 2; }\n\n        .nlg-string-row[data-string=\"1\"] .nlg-fret-cell::before { top: 50%; }\n        .nlg-string-row[data-string=\"6\"] .nlg-fret-cell::before { bottom: 50%; }\n        .nlg-fret-end { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #cbd5e1; z-index: 1; }\n        .nlg-string-row[data-string=\"1\"] .nlg-fret-end { top: 50%; }\n        .nlg-string-row[data-string=\"6\"] .nlg-fret-end { bottom: 50%; }\n\n        .nlg-note-dot {\n            position: relative; z-index: 4; width: 29px; height: 29px; border-radius: 50%;\n            display: flex; justify-content: center; align-items: center;\n            font-size: 13px; font-weight: 700; color: #ffffff; visibility: hidden;\n            background: #0f172a; box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n            transition: opacity 0.2s;\n        }\n        .nlg-note-dot.active { visibility: visible; }\n        .nlg-note-dot.is-root { background: #ef4444; }\n        \/* S\u1eecA L\u1ed6I D\u00cdNH: \u0110\u1ea9y n\u1ed1t ng\u0103n 0 c\u00e1ch xa l\u01b0\u1ee3c \u0111\u00e0n 18px *\/\n        .nlg-fret-cell.fret-0 .nlg-note-dot { \n             transform: translateX(-3px); \n        }\n\n    <\/style>\n\n    <script>\n    (function() {\n        const notesSharp = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];\n        const notesFlat  = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];\n        const tuning     = ['E', 'B', 'G', 'D', 'A', 'E']; \n        \n        const chordTypes = [\n            \/\/ Triads\n            { id: 'major', buttonLabel: 'Major', fullName: 'Major Triad', symbol: '', isTriad: true, int: ['1', '3', '5'], steps: [0, 4, 7] },\n            { id: 'minor', buttonLabel: 'Minor', fullName: 'Minor Triad', symbol: 'm', isTriad: true, int: ['1', 'b3', '5'], steps: [0, 3, 7] },\n            { id: 'dim', buttonLabel: 'Dim', fullName: 'Diminished Triad', symbol: 'dim', isTriad: true, int: ['1', 'b3', 'b5'], steps: [0, 3, 6] },\n            { id: 'aug', buttonLabel: '#5', fullName: 'Augmented Triad', symbol: '#5', isTriad: true, int: ['1', '3', '#5'], steps: [0, 4, 8] },\n            { id: 'flat5', buttonLabel: 'b5', fullName: 'Flat 5 Triad', symbol: 'b5', isTriad: true, int: ['1', '3', 'b5'], steps: [0, 4, 6] },\n            { id: 'sus2', buttonLabel: 'sus2', fullName: 'Suspended 2nd', symbol: 'sus2', isTriad: true, int: ['1', '2', '5'], steps: [0, 2, 7] },\n            { id: 'sus4', buttonLabel: 'sus4', fullName: 'Suspended 4th', symbol: 'sus4', isTriad: true, int: ['1', '4', '5'], steps: [0, 5, 7] },\n            \n            \/\/ 7ths\n            { id: 'maj7', buttonLabel: 'maj7', fullName: 'Major 7th', symbol: 'maj7', isTriad: false, int: ['1', '3', '5', '7'], steps: [0, 4, 7, 11] },\n            { id: 'dom7', buttonLabel: '7', fullName: 'Dominant 7th', symbol: '7', isTriad: false, int: ['1', '3', '5', 'b7'], steps: [0, 4, 7, 10] },\n            { id: 'min7', buttonLabel: 'm7', fullName: 'Minor 7th', symbol: 'm7', isTriad: false, int: ['1', 'b3', '5', 'b7'], steps: [0, 3, 7, 10] },\n            { id: 'm7b5', buttonLabel: 'm7b5', fullName: 'Half-Diminished', symbol: 'm7b5', isTriad: false, int: ['1', 'b3', 'b5', 'b7'], steps: [0, 3, 6, 10] },\n            { id: 'dim7', buttonLabel: 'dim7', fullName: 'Diminished 7th', symbol: 'dim7', isTriad: false, int: ['1', 'b3', 'b5', 'bb7'], steps: [0, 3, 6, 9] },\n            { id: 'mmaj7', buttonLabel: 'm(maj7)', fullName: 'Minor-Major 7th', symbol: 'm(maj7)', isTriad: false, int: ['1', 'b3', '5', '7'], steps: [0, 3, 7, 11] },\n            \n            \/\/ 9ths & Extensions\n            { id: 'add9', buttonLabel: 'add9', fullName: 'Add 9', symbol: 'add9', isTriad: false, int: ['1', '3', '5', '9'], steps: [0, 4, 7, 14] },\n            { id: 'maj9', buttonLabel: 'maj9', fullName: 'Major 9th', symbol: 'maj9', isTriad: false, int: ['1', '3', '5', '7', '9'], steps: [0, 4, 7, 11, 14] },\n            { id: 'dom9', buttonLabel: '9', fullName: 'Dominant 9th', symbol: '9', isTriad: false, int: ['1', '3', '5', 'b7', '9'], steps: [0, 4, 7, 10, 14] },\n            { id: 'min9', buttonLabel: 'm9', fullName: 'Minor 9th', symbol: 'm9', isTriad: false, int: ['1', 'b3', '5', 'b7', '9'], steps: [0, 3, 7, 10, 14] },\n            \n            \/\/ Altered & More Extensions\n            { id: 'dom7b9', buttonLabel: '7b9', fullName: 'Dominant 7b9', symbol: '7b9', isTriad: false, int: ['1', '3', '5', 'b7', 'b9'], steps: [0, 4, 7, 10, 13] },\n            { id: 'dom7s9', buttonLabel: '7#9', fullName: 'Dominant 7#9', symbol: '7#9', isTriad: false, int: ['1', '3', '5', 'b7', '#9'], steps: [0, 4, 7, 10, 15] },\n            { id: 'm7b9', buttonLabel: 'm7b9', fullName: 'Minor 7b9', symbol: 'm7b9', isTriad: false, int: ['1', 'b3', '5', 'b7', 'b9'], steps: [0, 3, 7, 10, 13] },\n            \n            { id: 'dom11', buttonLabel: '11', fullName: 'Dominant 11th', symbol: '11', isTriad: false, int: ['1', '3', '5', 'b7', '9', '11'], steps: [0, 4, 7, 10, 14, 17] },\n            { id: 'm11', buttonLabel: 'm11', fullName: 'Minor 11th', symbol: 'm11', isTriad: false, int: ['1', 'b3', '5', 'b7', '9', '11'], steps: [0, 3, 7, 10, 14, 17] },\n            { id: 'dom13', buttonLabel: '13', fullName: 'Dominant 13th', symbol: '13', isTriad: false, int: ['1', '3', '5', 'b7', '9', '13'], steps: [0, 4, 7, 10, 14, 21] }\n        ];\n\n        const shapeDefs = {\n            '1': { stringIdx: 5, minOffset: -1, maxOffset: 3 }, \n            '2': { stringIdx: 3, minOffset: -1, maxOffset: 4 }, \n            '3': { stringIdx: 4, minOffset: -3, maxOffset: 0 }, \n            '4': { stringIdx: 4, minOffset: -1, maxOffset: 4 }, \n            '5': { stringIdx: 5, minOffset: -3, maxOffset: 1 }  \n        };\n\n        const stringPitches = [64, 59, 55, 50, 45, 40];\n\n        let state = { type: 'major', root: 'C', key: 'sharp', group: 'all', show: 'notes' };\n\n        const rootContainer = document.getElementById('nlg-root-btns');\n        const typeContainer = document.getElementById('nlg-type-btns');\n        const titleEl = document.getElementById('nlg-chord-title');\n        const intervalsEl = document.getElementById('nlg-chord-intervals');\n        const fretboardEl = document.getElementById('nlg-fretboard');\n\n        function getNoteArray() { return state.key === 'sharp' ? notesSharp : notesFlat; }\n        function getChord() { return chordTypes.find(c => c.id === state.type); }\n\n        function autoDetectKey(root, typeId) {\n            \/\/ \u0110\u00e3 b\u1ed5 sung c\u00e1c h\u1ee3p \u00e2m m\u1edbi v\u00e0o m\u1ea3ng nh\u1eadn d\u1ea1ng \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng hi\u1ec3n th\u1ecb #\/b\n            const minorTypes = ['minor', 'dim', 'flat5', 'min7', 'm7b5', 'dim7', 'mmaj7', 'min9', 'm7b9', 'm11'];\n            const domTypes = ['dom7', 'dom9', 'dom11', 'dom13', 'dom7b9', 'dom7s9'];\n            const isMinor = minorTypes.includes(typeId);\n            const isDom = domTypes.includes(typeId);\n            let r = root;\n            if (r === 'Db') r = 'C#'; if (r === 'Eb') r = 'D#'; if (r === 'Gb') r = 'F#'; if (r === 'Ab') r = 'G#'; if (r === 'Bb') r = 'A#';\n            if (isMinor) {\n                const flatMinors = ['D', 'G', 'C', 'F', 'A#', 'D#']; return flatMinors.includes(r) ? 'flat' : 'sharp';\n            } else if (isDom) {\n                const flatDoms = ['C', 'F', 'A#', 'D#', 'G#', 'C#']; return flatDoms.includes(r) ? 'flat' : 'sharp';\n            } else {\n                const flatMajors = ['F', 'A#', 'D#', 'G#', 'C#']; return flatMajors.includes(r) ? 'flat' : 'sharp';\n            }\n        }\n\n        function renderRootButtons() {\n            rootContainer.innerHTML = '';\n            getNoteArray().forEach(note => {\n                const btn = document.createElement('button');\n                btn.className = `nlg-pill ${note === state.root ? 'active' : ''}`;\n                btn.style.width = '30px'; btn.style.height = '30px'; btn.style.padding = '0';\n                btn.innerText = note;\n                btn.onclick = () => { state.root = note; state.key = autoDetectKey(state.root, state.type); updateUI(); };\n                rootContainer.appendChild(btn);\n            });\n        }\n\n        function renderTypeButtons() {\n            typeContainer.innerHTML = '';\n            chordTypes.forEach(chord => {\n                const btn = document.createElement('button');\n                btn.className = `nlg-pill ${chord.id === state.type ? 'active' : ''}`;\n                btn.innerText = chord.buttonLabel; \n                btn.onclick = () => { state.type = chord.id; state.key = autoDetectKey(state.root, state.type); updateUI(); };\n                typeContainer.appendChild(btn);\n            });\n        }\n\n        function setupToggleLogic(containerId, stateKey, callback) {\n            const btns = document.querySelectorAll(`#${containerId} button`);\n            btns.forEach(btn => {\n                btn.onclick = (e) => {\n                    btns.forEach(b => b.classList.remove('active'));\n                    e.target.classList.add('active');\n                    state[stateKey] = e.target.dataset.val;\n                    if(callback) callback();\n                    updateUI();\n                };\n            });\n        }\n\n        function updateUI() {\n            const chord = getChord();\n            const currentArray = getNoteArray();\n            if (!currentArray.includes(state.root)) {\n                const otherArray = state.key === 'sharp' ? notesFlat : notesSharp;\n                const idx = otherArray.indexOf(state.root);\n                state.root = idx !== -1 ? currentArray[idx] : 'C';\n            }\n            document.querySelectorAll('#nlg-key-toggle button').forEach(b => {\n                b.classList.remove('active'); if(b.dataset.val === state.key) b.classList.add('active');\n            });\n            document.querySelectorAll('.triad-only').forEach(btn => {\n                btn.style.display = chord.isTriad ? 'inline-block' : 'none';\n            });\n            if (!chord.isTriad && ['123', '234', '345', '456'].includes(state.group)) { state.group = 'all'; }\n            document.querySelectorAll('#nlg-group-toggle button').forEach(b => {\n                b.classList.remove('active'); if(b.dataset.val === state.group) b.classList.add('active');\n            });\n            renderRootButtons(); renderTypeButtons();\n            titleEl.innerText = `${state.root} ${chord.fullName} (${state.root}${chord.symbol})`;\n            intervalsEl.innerText = chord.int.join(' - ');\n            renderFretboard();\n        }\n\n        function renderFretboard() {\n            let inlaysHTML = '<div id=\"nlg-inlays-layer\">';\n            for(let i=0; i<=17; i++) {\n                if ([3, 5, 7, 9, 15, 17].includes(i)) {\n                    inlaysHTML += `<div class=\"nlg-inlay-col\"><div class=\"nlg-inlay-dot\"><\/div><\/div>`;\n                } else if (i === 12) {\n                    inlaysHTML += `<div class=\"nlg-inlay-col\" style=\"position: relative;\"><div class=\"nlg-inlay-dot dot-top\"><\/div><div class=\"nlg-inlay-dot dot-bottom\"><\/div><\/div>`;\n                } else { inlaysHTML += `<div class=\"nlg-inlay-col\"><\/div>`; }\n            }\n            inlaysHTML += '<\/div>';\n            inlaysHTML += '<svg id=\"nlg-lines-layer\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3;\"><\/svg>';\n            fretboardEl.innerHTML = inlaysHTML;\n            const notes = getNoteArray();\n            const rootIdx = notes.indexOf(state.root);\n            const chord = getChord();\n            let intervalMap = {}; chord.steps.forEach((step, i) => { intervalMap[step] = chord.int[i]; });\n            let validNotesSet = new Set();\n            let validShapeFrets = new Set();\n            let validTriadShapes = [];\n            let effectiveShape = state.group.startsWith('gs') ? state.group.charAt(2) : 'all';\n\n            if (effectiveShape !== 'all') {\n                const def = shapeDefs[effectiveShape];\n                const openNotePitch = notes.indexOf(tuning[def.stringIdx]) > -1 ? notes.indexOf(tuning[def.stringIdx]) : notesSharp.indexOf(tuning[def.stringIdx]);\n                let baseFret = (rootIdx - openNotePitch + 12) % 12;\n                let tryAnchor = (anchor) => {\n                    let minF = anchor + def.minOffset, maxF = anchor + def.maxOffset;\n                    if (minF > 0 && maxF <= 17) return [minF, maxF]; return null;\n                };\n                let range = tryAnchor(baseFret) || tryAnchor(baseFret + 12);\n                if (range) { for(let i = range[0]; i <= range[1]; i++) { validShapeFrets.add(i); } }\n            }\n\n            let duplicateKeys = new Set();\n            if (effectiveShape !== 'all') {\n                let tempDisplayedNotes = [];\n                tuning.forEach((openNoteName, sIdx) => {\n                    const stringNum = sIdx + 1; let openNoteIdx = notes.indexOf(openNoteName) > -1 ? notes.indexOf(openNoteName) : notesSharp.indexOf(openNoteName);\n                    for(let fret = 0; fret <= 17; fret++) {\n                        const currentIdx = (openNoteIdx + fret) % 12;\n                        let isChordTone = chord.steps.some(step => (rootIdx + step) % 12 === currentIdx);\n                        if (isChordTone && validShapeFrets.has(fret)) { tempDisplayedNotes.push({ stringNum: stringNum, fret: fret, pitch: stringPitches[sIdx] + fret }); }\n                    }\n                });\n                let pitchMap = {}; tempDisplayedNotes.forEach(n => { if (!pitchMap[n.pitch]) pitchMap[n.pitch] = []; pitchMap[n.pitch].push(n); });\n                Object.values(pitchMap).forEach(group => { if (group.length > 1) { group.sort((a, b) => a.fret - b.fret); for (let i = 1; i < group.length; i++) { duplicateKeys.add(`${group[i].stringNum}-${group[i].fret}`); } } });\n            }\n\n            let isStandardTriadMode = chord.isTriad && !state.group.startsWith('gs');\n            if (isStandardTriadMode) {\n                function scanTriadShapes(s1, s2, s3) {\n                    let getNotesOnS = (strNum) => {\n                        let openNotePitch = stringPitches[strNum - 1], openNoteName = tuning[strNum - 1], openNoteIdx = notes.indexOf(openNoteName) > -1 ? notes.indexOf(openNoteName) : notesSharp.indexOf(openNoteName);\n                        let found = []; for(let f=0; f<=17; f++) { let idx = (openNoteIdx + f) % 12; if(chord.steps.some(step => (rootIdx + step) % 12 === idx)) { found.push({fret: f, idx: idx, pitch: openNotePitch + f}); } } return found;\n                    };\n                    let n1s = getNotesOnS(s1), n2s = getNotesOnS(s2), n3s = getNotesOnS(s3);\n                    let isCloseVoicing = (p1, p2, p3) => {\n                        let arr = [p1, p2, p3].sort((a,b) => a - b); let minP = arr[0] - 12, maxP = arr[2] + 12, cPitches = [];\n                        for(let i=minP; i<=maxP; i++) { if(chord.steps.some(step => (rootIdx + step) % 12 === i % 12)) { cPitches.push(i); } }\n                        let idx = cPitches.indexOf(arr[0]); if(idx === -1) return false; return (cPitches[idx+1] === arr[1] && cPitches[idx+2] === arr[2]);\n                    };\n                    for(let n1 of n1s) { for(let n2 of n2s) { for(let n3 of n3s) {\n                        let currentIdxs = [n1.idx, n2.idx, n3.idx], expectedIdxs = chord.steps.map(s => (rootIdx + s) % 12);\n                        if(expectedIdxs.every(e => currentIdxs.includes(e))) {\n                            let frets = [n1.fret, n2.fret, n3.fret], span = Math.max(...frets) - Math.min(...frets);\n                            if(span <= 5 && isCloseVoicing(n1.pitch, n2.pitch, n3.pitch)) { \n                                validNotesSet.add(`${s1}-${n1.fret}`); validNotesSet.add(`${s2}-${n2.fret}`); validNotesSet.add(`${s3}-${n3.fret}`);\n                                validTriadShapes.push([{s: s1, f: n1.fret}, {s: s2, f: n2.fret}, {s: s3, f: n3.fret}]);\n                            }\n                        }\n                    } } }\n                }\n                if(state.group === 'all') { scanTriadShapes(1,2,3); scanTriadShapes(2,3,4); scanTriadShapes(3,4,5); scanTriadShapes(4,5,6); }\n                else { let g = state.group.split('').map(Number); scanTriadShapes(g[0], g[1], g[2]); }\n            }\n\n            tuning.forEach((openNoteName, sIdx) => {\n                const stringNum = sIdx + 1; let openNoteIdx = notes.indexOf(openNoteName) > -1 ? notes.indexOf(openNoteName) : notesSharp.indexOf(openNoteName);\n                const row = document.createElement('div'); row.className = 'nlg-string-row'; row.dataset.string = stringNum;\n                for(let fret = 0; fret <= 17; fret++) {\n                    const cell = document.createElement('div'); cell.className = `nlg-fret-cell fret-${fret}`;\n                    if (fret === 17) { const endWire = document.createElement('div'); endWire.className = 'nlg-fret-end'; cell.appendChild(endWire); }\n                    const currentIdx = (openNoteIdx + fret) % 12;\n                    let isChordTone = chord.steps.some(step => (rootIdx + step) % 12 === currentIdx), shouldShow = false;\n                    if (chord.isTriad) {\n                        if (state.group.startsWith('gs')) { shouldShow = isChordTone && validShapeFrets.has(fret) && !duplicateKeys.has(`${stringNum}-${fret}`); }\n                        else { shouldShow = validNotesSet.has(`${stringNum}-${fret}`); }\n                    } else {\n                        shouldShow = isChordTone && (effectiveShape === 'all' || validShapeFrets.has(fret));\n                        if (effectiveShape !== 'all' && duplicateKeys.has(`${stringNum}-${fret}`)) { shouldShow = false; }\n                    }\n                    if (shouldShow) {\n                        const dot = document.createElement('div'); dot.className = 'nlg-note-dot active'; if (currentIdx === rootIdx) dot.classList.add('is-root');\n                        if(state.show === 'notes') { dot.innerText = notes[currentIdx]; }\n                        else if(state.show === 'intervals') { let matchingStep = chord.steps.find(step => (rootIdx + step) % 12 === currentIdx); dot.innerText = matchingStep !== undefined ? intervalMap[matchingStep] : ''; }\n                        cell.appendChild(dot);\n                    }\n                    row.appendChild(cell);\n                }\n                fretboardEl.appendChild(row);\n            });\n\n            let linesLayer = document.getElementById('nlg-lines-layer');\n            if (isStandardTriadMode && state.group !== 'all') {\n                setTimeout(() => {\n                    if(!linesLayer) return; let linesHTML = '';\n                    validTriadShapes.forEach(shape => {\n                        shape.sort((a,b) => a.s - b.s); \n                        let getCenterPos = (s, f) => {\n                            let row = fretboardEl.querySelector(`.nlg-string-row[data-string=\"${s}\"]`); if(!row) return null;\n                            let cell = row.querySelector(`.fret-${f}`); if(!cell) return null;\n                            return { x: cell.offsetLeft + cell.offsetWidth \/ 2, y: cell.offsetTop + cell.offsetHeight \/ 2 };\n                        };\n                        let p1 = getCenterPos(shape[0].s, shape[0].f), p2 = getCenterPos(shape[1].s, shape[1].f), p3 = getCenterPos(shape[2].s, shape[2].f);\n                        if(p1 && p2) linesHTML += `<line x1=\"${p1.x}\" y1=\"${p1.y}\" x2=\"${p2.x}\" y2=\"${p2.y}\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>`;\n                        if(p2 && p3) linesHTML += `<line x1=\"${p2.x}\" y1=\"${p2.y}\" x2=\"${p3.x}\" y2=\"${p3.y}\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>`;\n                    });\n                    linesLayer.innerHTML = linesHTML;\n                }, 10);\n            } else { if(linesLayer) linesLayer.innerHTML = ''; }\n        }\n\n        let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(updateUI, 100); });\n        setupToggleLogic('nlg-key-toggle', 'key'); setupToggleLogic('nlg-group-toggle', 'group'); setupToggleLogic('nlg-show-toggle', 'show');\n        state.key = autoDetectKey(state.root, state.type); updateUI(); \n    })();\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>C\u00f4ng C\u1ee5 Tra C\u1ee9u Arpeggios v\u00e0 Triads C\u00f4ng c\u1ee5 tra c\u1ee9u Arpeggios v\u00e0 Triad \u0111\u01b0\u1ee3c t\u1ea1o v\u1edbi m\u1ed9t giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i v\u00e0 tinh g\u1ecdn, gi\u00fap qu\u00e1 tr\u00ecnh t\u1eadp luy\u1ec7n Guitar tr\u1edf n\u00ean th\u00fa v\u1ecb v\u00e0 \u0111\u01a1n gi\u1ea3n.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3466","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tools Tra C\u1ee9u Arpeggios &amp; Triad - NL Guitar<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nlguitar.com\/en\/arpeggio-and-triad-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tools Tra C\u1ee9u Arpeggios &amp; Triad - NL Guitar\" \/>\n<meta property=\"og:description\" content=\"C\u00f4ng C\u1ee5 Tra C\u1ee9u Arpeggios v\u00e0 Triads C\u00f4ng c\u1ee5 tra c\u1ee9u Arpeggios v\u00e0 Triad \u0111\u01b0\u1ee3c t\u1ea1o v\u1edbi m\u1ed9t giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i v\u00e0 tinh g\u1ecdn, gi\u00fap qu\u00e1 tr\u00ecnh t\u1eadp luy\u1ec7n Guitar tr\u1edf n\u00ean th\u00fa v\u1ecb v\u00e0 \u0111\u01a1n gi\u1ea3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nlguitar.com\/en\/arpeggio-and-triad-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"NL Guitar\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nlguitarclass\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-16T04:53:53+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/\",\"name\":\"Tools Tra C\u1ee9u Arpeggios & Triad - NL Guitar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#website\"},\"datePublished\":\"2026-05-13T13:22:20+00:00\",\"dateModified\":\"2026-05-16T04:53:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nlguitar.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tools Tra C\u1ee9u Arpeggios &#038; Triad\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#website\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/\",\"name\":\"NL Guitar\",\"description\":\"Kh\u00f3a h\u1ecdc Guitar Online, Tabs &amp; S\u00e1ch Guitar Chuy\u00ean s\u00e2u\",\"publisher\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nlguitar.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Organization\",\"Place\"],\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#organization\",\"name\":\"NL Guitar\",\"alternateName\":\"NL Guitar Class\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/\",\"logo\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/#local-main-organization-logo\"},\"image\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/#local-main-organization-logo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/nlguitarclass\\\/\"],\"telephone\":[],\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"],\"opens\":\"09:00\",\"closes\":\"17:00\"}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/arpeggio-and-triad-tools\\\/#local-main-organization-logo\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-Logo-26-2.png\",\"contentUrl\":\"https:\\\/\\\/nlguitar.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-Logo-26-2.png\",\"width\":512,\"height\":512,\"caption\":\"NL Guitar\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tools Tra C\u1ee9u Arpeggios & Triad - NL Guitar","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nlguitar.com\/en\/arpeggio-and-triad-tools\/","og_locale":"en_US","og_type":"article","og_title":"Tools Tra C\u1ee9u Arpeggios & Triad - NL Guitar","og_description":"C\u00f4ng C\u1ee5 Tra C\u1ee9u Arpeggios v\u00e0 Triads C\u00f4ng c\u1ee5 tra c\u1ee9u Arpeggios v\u00e0 Triad \u0111\u01b0\u1ee3c t\u1ea1o v\u1edbi m\u1ed9t giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i v\u00e0 tinh g\u1ecdn, gi\u00fap qu\u00e1 tr\u00ecnh t\u1eadp luy\u1ec7n Guitar tr\u1edf n\u00ean th\u00fa v\u1ecb v\u00e0 \u0111\u01a1n gi\u1ea3n.","og_url":"https:\/\/nlguitar.com\/en\/arpeggio-and-triad-tools\/","og_site_name":"NL Guitar","article_publisher":"https:\/\/www.facebook.com\/nlguitarclass\/","article_modified_time":"2026-05-16T04:53:53+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/","url":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/","name":"Tools Tra C\u1ee9u Arpeggios & Triad - NL Guitar","isPartOf":{"@id":"https:\/\/nlguitar.com\/#website"},"datePublished":"2026-05-13T13:22:20+00:00","dateModified":"2026-05-16T04:53:53+00:00","breadcrumb":{"@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nlguitar.com\/"},{"@type":"ListItem","position":2,"name":"Tools Tra C\u1ee9u Arpeggios &#038; Triad"}]},{"@type":"WebSite","@id":"https:\/\/nlguitar.com\/#website","url":"https:\/\/nlguitar.com\/","name":"NL Guitar","description":"Kh\u00f3a h\u1ecdc Guitar Online, Tabs &amp; S\u00e1ch Guitar Chuy\u00ean s\u00e2u","publisher":{"@id":"https:\/\/nlguitar.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nlguitar.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Organization","Place"],"@id":"https:\/\/nlguitar.com\/#organization","name":"NL Guitar","alternateName":"NL Guitar Class","url":"https:\/\/nlguitar.com\/","logo":{"@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/#local-main-organization-logo"},"image":{"@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/#local-main-organization-logo"},"sameAs":["https:\/\/www.facebook.com\/nlguitarclass\/"],"telephone":[],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"09:00","closes":"17:00"}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nlguitar.com\/arpeggio-and-triad-tools\/#local-main-organization-logo","url":"https:\/\/nlguitar.com\/wp-content\/uploads\/2026\/04\/cropped-Logo-26-2.png","contentUrl":"https:\/\/nlguitar.com\/wp-content\/uploads\/2026\/04\/cropped-Logo-26-2.png","width":512,"height":512,"caption":"NL Guitar"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages\/3466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/comments?post=3466"}],"version-history":[{"count":0,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages\/3466\/revisions"}],"wp:attachment":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/media?parent=3466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}