!doctype html html lang=vi head meta charset=utf-8 meta name=viewport content=width=device-width, initial-scale=1 titleMy Portfoliotitle style body{margin0;font-familysystem-ui,Segoe UI,Roboto,Arial;background#0b1220;color#e5e7eb} header{positionsticky;top0;backgroundrgba(11,18,32,.72);backdrop-filterblur(10px);border-bottom1px solid rgba(229,231,235,.12)} .wrap{max-width1100px;margin0 auto;padding12px 16px;displayflex;justify-contentspace-between;gap12px;align-itemscenter} nav{displayflex;gap8px;flex-wrapwrap} a{color#e5e7eb;text-decorationnone;padding8px 10px;border-radius10px} a.active{backgroundrgba(255,255,255,.08)} iframe{width100%;heightcalc(100vh - 58px);border0;displayblock} style head body header div class=wrap div style=font-weight800My Portfoliodiv nav id=nav a href=home data-page=homeHomea a href=about data-page=aboutAbouta a href=resume data-page=resumeResumea a href=projects data-page=projectsProjectsa a href=contact data-page=contactContacta nav div header iframe id=appiframe script const EXEC_URL = PASTE_YOUR_APPS_SCRIPT_EXEC_URL; - dán ...exec vào đây const iframe = document.getElementById(app); const nav = document.getElementById(nav); function currentPage() { const p = (location.pathname home).replace(^+, ); return p home; } function setActive(page) { nav.querySelectorAll(a[data-page]).forEach(a = a.classList.toggle(active, a.getAttribute(data-page) === page) ); } function load(page) { setActive(page); iframe.src = `${EXEC_URL}page=${encodeURIComponent(page)}&embed=1`; } nav.querySelectorAll(a[data-page]).forEach(a = { a.addEventListener(click, (e) = { e.preventDefault(); const page = a.getAttribute(data-page); history.pushState({}, , `${page}`); load(page); }); }); window.addEventListener(popstate, () = load(currentPage())); load(currentPage()); script body html